@font-face { font-family:'FT Blank'; src:url(/assets/fonts/FTBlank-300_599.woff2) format('woff2'); font-weight:300 599; font-style:normal; font-display:swap; }
  @font-face { font-family:'FT Blank'; src:url(/assets/fonts/FTBlank-600_900.woff2) format('woff2'); font-weight:600 900; font-style:normal; font-display:swap; }
  :root { --ink:#1a1a1a; --gold:#a98d5f; --line:#e5e0d8; --paper:#f7f3ec; --sand:#e9dfcd; }
  * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  body { font-family:"FT Blank","Helvetica Neue",Helvetica,Arial,sans-serif; color:var(--ink); background:#fff; max-width:430px; margin:0 auto; }
  a { color:inherit; text-decoration:none; }
  header { position:sticky; top:0; background:#fff; z-index:10; border-bottom:1px solid var(--line); }
  .bar { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; }
  .wordmark { display:block; } .wordmark .wm { height:13px; display:block; color:var(--ink); } footer .w .wm { height:12px; display:block; color:#fff; }
  .burger { width:22px; height:14px; display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; }
  .burger i { display:block; height:1.5px; background:var(--ink); }
  .menu { display:none; border-top:1px solid var(--line); background:#fff; }
  .menu.on { display:block; }
  .menu a { display:block; padding:14px 18px; font-size:11px; letter-spacing:2.4px; font-weight:800; border-bottom:1px solid var(--line); }
  .menu a.gold { color:var(--gold); }
  .page { display:none; } .page.on { display:block; }

  .hero { position:relative; height:520px; background:var(--sand) center/cover; }
  .hero .vid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .hero .ov { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(26,26,26,.75)); }
  .hero .tx { position:absolute; left:18px; right:18px; bottom:24px; color:#fff; }
  .crumb { font-size:9px; letter-spacing:3px; font-weight:800; color:var(--gold); margin-bottom:8px; }
  h1 { font-size:30px; font-weight:800; letter-spacing:3px; line-height:1.18; }
  .sub { font-size:12.5px; line-height:1.6; margin:10px 0 14px; opacity:.92; }
  .cta { display:inline-block; background:#fff; color:var(--ink); font-size:10px; letter-spacing:2.4px; font-weight:800; padding:12px 18px; margin:0 6px 8px 0; }
  .cta.dark { background:var(--ink); color:#fff; }
  .cta.line { background:transparent; color:#fff; border:1.5px solid #fff; }
  .cta.lined { background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
  .strip { background:var(--ink); color:#fff; padding:12px 18px; display:flex; gap:18px; overflow-x:auto; font-size:9px; letter-spacing:1.8px; font-weight:800; white-space:nowrap; scrollbar-width:none; }
  .strip b { color:var(--gold); margin-right:5px; }
  section { padding:26px 18px; border-top:1px solid var(--line); }
  h2 { font-size:10.5px; font-weight:800; letter-spacing:2.6px; color:var(--gold); margin-bottom:12px; }
  p { font-size:13px; line-height:1.7; color:#444; }
  .more { display:inline-block; margin-top:12px; font-size:10px; letter-spacing:2px; font-weight:800; }

  .locs { display:grid; gap:12px; }
  .lc { display:flex; gap:12px; border:1px solid var(--line); }
  .lc .ph { width:104px; flex:none; background:var(--sand) center/cover; }
  .lc .in { padding:12px 12px 12px 0; }
  .lc h4 { font-size:10px; letter-spacing:1.8px; font-weight:800; }
  .lc h4 span { color:var(--gold); }
  .lc p { font-size:10.5px; line-height:1.55; color:#777; margin-top:3px; }
  .lc .vw { display:inline-block; margin-top:6px; font-size:9px; letter-spacing:1.6px; font-weight:800; }
  .lc.now { border-color:var(--gold); }
  .lc.soon .ph { filter:grayscale(.2); }

  .vidwrap { margin-top:14px; aspect-ratio:4/5; background:var(--sand); overflow:hidden; }
  .vidwrap video { width:100%; height:100%; object-fit:cover; display:block; }
  .photos { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .photos div { aspect-ratio:1; background:var(--sand) center/cover; }

  .beansrow { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
  .beansrow a { text-align:center; }
  .beansrow svg { width:78px; height:78px; display:block; margin:0 auto 4px; }
  .beansrow span { font-size:8px; letter-spacing:1.4px; font-weight:800; }
  .loyal { background:var(--paper); }
  .loyal .box { display:flex; gap:14px; align-items:center; }
  .qr { width:64px; height:64px; background:#fff; border:1px solid var(--line); flex:none; }
  .qr img { width:100%; height:100%; image-rendering:pixelated; }

  /* menu page */
  .tabs { display:flex; gap:6px; overflow-x:auto; padding:12px 18px; scrollbar-width:none; border-bottom:1px solid var(--line); position:sticky; top:49px; background:#fff; z-index:5; }
  .tab { flex:none; font-size:9px; letter-spacing:1.6px; font-weight:800; padding:6px 10px; border:1px solid var(--line); border-radius:20px; color:#666; }
  .tab.on { background:var(--ink); color:#fff; border-color:var(--ink); }
  .msec { padding:18px 18px 8px; border-top:1px solid var(--line); }
  .msec h2 { color:var(--ink); margin-bottom:4px; }
  .adds { font-size:8.5px; letter-spacing:1.2px; color:var(--gold); font-weight:800; margin-bottom:12px; }
  .adds b { padding:0 2px; margin:0 6px 0 3px; }
  .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px 8px; }
  .item { text-align:center; display:flex; flex-direction:column; align-items:center; }
.item .n { width:100%; }
.item .p { margin-top:auto; padding-top:5px; }
  .item svg { width:64px; height:64px; display:block; margin:0 auto 6px; }
  .item .pi { width:64px; height:64px; object-fit:cover; display:block; margin:0 auto 6px; border:1px solid var(--line); }
  #m6 .item .pi { object-fit:contain; border:0; }
  .item .n { font-size:8.6px; letter-spacing:1px; font-weight:800; line-height:1.3; min-height:22px; }
  .item .n em { display:block; font-style:normal; font-weight:400; color:#888; letter-spacing:.2px; font-size:8px; margin-top:2px; }
  .item .p { display:inline-block; margin-top:auto; padding-top:5px; font-size:9px; font-weight:800; }
  .item .p small { font-size:6px; color:var(--gold); margin:0 1px; }
  .only { color:var(--gold); font-size:7px; display:block; }
  .orderbar { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px; background:var(--ink); color:#fff; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; z-index:9; }
  .orderbar .l { font-size:9px; letter-spacing:1.6px; font-weight:800; }
  .orderbar .l b { display:block; font-size:12px; letter-spacing:.5px; margin-top:2px; }
  .orderbar .go { font-size:10px; letter-spacing:2px; font-weight:800; color:var(--gold); }
  .pad { height:80px; }

  /* coffee at home + honest states */
  .coffees { display:grid; gap:10px; margin:4px 0 12px; }
  .cof { border:1px solid var(--line); padding:12px 14px; display:flex; align-items:center; gap:14px; }
  .cof .ci { width:76px; height:76px; object-fit:contain; flex:none; }
  .cof > div { min-width:0; }
  .cof .cn { font-size:10px; letter-spacing:1.8px; font-weight:800; }
  .cof .cn small { color:var(--gold); font-size:8px; letter-spacing:1.4px; margin-left:6px; }
  .cof em { display:block; font-style:normal; font-size:10.5px; color:#777; line-height:1.55; margin-top:3px; }
  .cof .cp { display:inline-block; margin-top:6px; font-size:9px; font-weight:800; border:1px solid var(--ink); border-radius:12px; padding:2px 8px; }
  .cof .cp small { font-size:6px; color:var(--gold); margin:0 1px; }
  .cof.na { opacity:.65; }
  .buy.na { color:#999; }
  .note-demo { background:var(--paper); border:1px solid var(--line); padding:10px 12px; font-size:9px; letter-spacing:1.4px; font-weight:800; color:#8a7a5c; margin-top:12px; }
  .qr svg { width:100%; height:100%; display:block; }
  /* location detail */
  .facts { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .fact { border:1px solid var(--line); padding:12px; }
  .fact small { display:block; font-size:8.5px; letter-spacing:2px; font-weight:800; color:var(--gold); margin-bottom:5px; }
  .fact b { font-size:11px; letter-spacing:.8px; line-height:1.5; font-weight:700; }
  .map { aspect-ratio:16/9; background:#ececec; display:flex; align-items:center; justify-content:center; font-size:9px; letter-spacing:2.5px; color:#999; font-weight:800; margin-top:14px; }
  .pill { display:inline-block; font-size:8.5px; letter-spacing:1.6px; font-weight:800; border:1px solid var(--gold); color:var(--gold); border-radius:12px; padding:2px 8px; margin-right:6px; }
  .shopgrid { display:grid; grid-template-columns:1fr 1fr; gap:14px 10px; }
  .prod { display:flex; flex-direction:column; align-items:center; text-align:center; border:1px solid var(--line); padding:14px 8px 12px; }
  .prod .n { width:100%; }
  .prod .p { margin-top:auto; padding-top:6px; }
  .prod svg { width:72px; height:72px; display:block; margin:0 auto 6px; }
  .prod .bi { width:96px; height:96px; object-fit:contain; display:block; margin:0 auto 6px; }
  .prod .bi.sm { width:80px; height:80px; margin-bottom:10px; }
  .prod .n { font-size:9px; letter-spacing:1.2px; font-weight:800; }
  .prod em { display:block; font-style:normal; font-size:8px; color:#888; margin:3px 0 6px; line-height:1.4; }
  .prod .p { display:inline-block; font-size:9px; font-weight:800; }
  .prod .p small { font-size:6px; color:var(--gold); margin:0 1px; }
  .prod .buy { display:block; margin-top:8px; font-size:8.5px; letter-spacing:1.8px; font-weight:800; color:var(--gold); }
  .steps div { display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line); font-size:12px; line-height:1.6; color:#444; }
  .steps b { flex:none; width:24px; height:24px; border:1.5px solid var(--ink); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; }
  .tiers { display:grid; gap:10px; }
  .tier { border:1px solid var(--line); padding:12px 14px; }
  .tier .tn { font-size:10.5px; letter-spacing:2.4px; font-weight:800; margin-bottom:4px; }
  .tier .tn small { font-size:8px; letter-spacing:1.5px; color:var(--gold); margin-left:6px; }
  .tier p { font-size:11px; }
  .tier.gold { border-color:var(--gold); background:var(--paper); }
  .tier.ink { background:var(--ink); border-color:var(--ink); color:#fff; } .tier.ink p { color:#ddd; } .tier.ink .tn small { color:var(--gold); }
  footer { background:var(--ink); color:#ccc; padding:28px 18px 34px; font-size:10px; letter-spacing:1.4px; line-height:2.1; }
  footer h3 { font-size:9px; letter-spacing:2.6px; color:var(--gold); margin:14px 0 4px; }
  footer .w { color:#fff; font-weight:800; letter-spacing:6px; font-size:14px; }

  /* ================= DESKTOP ================= */
  @media (min-width: 900px) {
    body { max-width:none; }
    .wrap-d { max-width:1160px; margin:0 auto; padding:0 40px; }
    header .bar { padding:18px max(40px, calc((100% - 1160px)/2)); }
    .wordmark .wm { height:17px; }
    .burger { display:none; }
    .menu { display:flex !important; border:0; position:absolute; right:max(40px, calc((100% - 1160px)/2)); top:14px; background:transparent; }
    .menu a { border:0; padding:8px 0 8px 28px; font-size:10.5px; }
    header { position:relative; }
    .hero { height:78vh; min-height:560px; }
    .hero .tx { left:max(40px, calc((100% - 1160px)/2)); right:max(40px, calc((100% - 1160px)/2)); bottom:64px; }
    h1 { font-size:54px; letter-spacing:5px; max-width:860px; }
    .cta { font-size:11px; padding:16px 26px; }
    .strip { padding:14px 40px; justify-content:center; gap:44px; font-size:10px; }
    section { padding:56px max(40px, calc((100% - 1160px)/2)); }
    h2 { font-size:11.5px; margin-bottom:18px; }
    p { font-size:15px; max-width:640px; }
    .locs { grid-template-columns:repeat(3,1fr); gap:18px; }
    .lc { flex-direction:column; gap:0; }
    .lc .ph { width:100%; aspect-ratio:4/3; }
    .lc .in { padding:16px; }
    .lc h4 { font-size:11px; }
    .photos { grid-template-columns:repeat(4,1fr); gap:10px; }
    .coffees { grid-template-columns:repeat(3,1fr); gap:14px; }
    .cof { align-items:flex-start; flex-direction:column; gap:10px; }
    .cof .ci { width:100px; height:100px; }
    .beansrow { grid-template-columns:repeat(3,160px); gap:40px; }
    .beansrow svg { width:120px; height:120px; }
    .loyal .box { max-width:760px; }
    /* menu page */
    .tabs { padding:14px 40px; justify-content:center; top:0; }
    .msec { padding:34px max(40px, calc((100% - 1160px)/2)); }
    .grid { grid-template-columns:repeat(6,1fr); gap:26px 14px; }
    .item svg { width:96px; height:96px; }
    .item .pi { width:96px; height:96px; }
    .item .n { font-size:10px; }
    .item .p { font-size:10.5px; }
    .orderbar { max-width:none; left:0; transform:none; padding:16px 40px; }
    .orderbar .l b { font-size:13px; }
    /* location detail */
    .facts { grid-template-columns:1fr 1fr; max-width:640px; }
    .map { max-width:1160px; aspect-ratio:21/6; }
    /* shop */
    .shopgrid { grid-template-columns:repeat(4,1fr); gap:20px; }
    .prod svg { width:110px; height:110px; }
    .prod .bi { width:132px; height:132px; }
    .prod .bi.sm { width:108px; height:108px; }
    .prod .n { font-size:10.5px; }
    .tiers { grid-template-columns:repeat(4,1fr); }
    .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
    .steps div { border:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px; }
    footer { padding:56px max(40px, calc((100% - 1160px)/2)); }
    .fcols { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
  }


  .homevid { margin-top:14px; aspect-ratio:16/9; overflow:hidden; background:var(--sand); border-radius:16px; }
  .homevid video { width:100%; height:100%; object-fit:cover; display:block; }
  /* ===== rounded corners (brand refresh) ===== */
  .lc, .vidwrap, .photos div, .cof, .note-demo, .fact, .map, .prod, .tier, .steps div, .qr, .loyal .box { border-radius:16px; overflow:hidden; }
  .item .pi, .item svg, .prod .bi, .prod svg, .cof .ci { border-radius:12px; }
  .cta, .btn { border-radius:12px; }
  .menuimgs div, .gal div, .gal img { border-radius:16px; }

  /* ===== menu list layout (grote foto's + tekst) ===== */
  #menusecs .grid { display:block; }
  #menusecs .item { flex-direction:row; align-items:center; text-align:left; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
  #menusecs .item:last-child { border-bottom:0; }
  #menusecs .item svg, #menusecs .item .pi { width:88px; height:88px; margin:0; flex:none; }
  #menusecs .item .n { flex:1; width:auto; font-size:10.5px; min-height:0; letter-spacing:1.2px; }
  #menusecs .item .n em { display:block; margin-top:4px; }
  #menusecs .item .p { margin:0 0 0 auto; padding:0; flex:none; font-size:11px; white-space:nowrap; }
  @media (min-width:900px){
    #menusecs .grid { display:grid; grid-template-columns:1fr 1fr; gap:0 56px; }
    #menusecs .item svg, #menusecs .item .pi { width:116px; height:116px; }
    #menusecs .item .n { font-size:11.5px; }
    #menusecs .item .p { font-size:12px; }
  }
/* hero-full: show the whole photo (bar + coffee boxes) over a soft blurred fill */
.hero-full{background:#211c18;}
.hero-full::before{content:"";position:absolute;inset:0;z-index:0;background-image:url(/assets/img/site-city-da216fcd.jpg);background-size:cover;background-position:center;filter:blur(28px) brightness(.5);transform:scale(1.14);}
.hero-full .vid{z-index:1;object-fit:contain!important;}
.hero-full .ov{z-index:2;}
.hero-full .tx{z-index:3;}
/* hero video legibility */
.hero .ov{background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 34%,rgba(26,26,26,.84) 100%);}
.hero h1{text-shadow:0 2px 24px rgba(0,0,0,.55);}
.hero .crumb{text-shadow:0 1px 12px rgba(0,0,0,.6);}
.hero .cta.line{text-shadow:0 1px 10px rgba(0,0,0,.5);}

/* featured location card */
.lc{position:relative;}
.lc .nb{position:absolute;top:10px;left:10px;z-index:3;background:var(--gold);color:#fff;font-size:8.5px;letter-spacing:1.3px;font-weight:800;padding:4px 8px;border-radius:4px;}
.lc.now{box-shadow:0 6px 24px rgba(169,141,95,.22);}
@media (min-width:900px){
  .lc.feat{grid-column:span 2;}
  .lc.feat .ph{aspect-ratio:16/9;}
  .lc.feat .in{padding:18px 18px 20px;}
  .lc.feat h4{font-size:14px;letter-spacing:2px;}
  .lc.feat p{font-size:12px;}
  .lc.feat .vw{font-size:10px;margin-top:9px;}
}