/* ============================================================
   Lekker Koffiewinkel — Coffee Shop, Kleinmond
   Shared stylesheet (Index1 landing + Home / Menu / Story /
   Gallery / Visit).
   "Jazz lounge" palette: warm ivory · apricot · deep teal with
   a burnt-apricot feature accent and brass-gold stars.
   ============================================================ */

:root{
  --cream:#F9F4EB;
  --cream-2:#F2EADC;
  --latte:#E0A374;          /* apricot (was latte) */
  --latte-deep:#C67B4E;     /* terracotta (was latte-deep) */
  --espresso:#1E3D40;       /* deep teal (was espresso) */
  --roast:#14262B;          /* midnight petrol — dark bands & footer */
  --ink:#202B2B;
  --muted:#6A7370;
  --line:rgba(20,38,43,.10);
  --gold:#C9A24B;
  --butterscotch:#C96F4A;   /* burnt apricot — feature accent */
  --butterscotch-soft:rgba(201,111,74,.12);
  --shadow-soft:0 30px 60px -25px rgba(20,38,43,.28);
  --shadow-card:0 22px 50px -30px rgba(20,38,43,.45);
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-soft:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x on <html> as well as <body>: with it only on body, iOS Safari
   still lets the page pan sideways when something overflows. */
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:"Spectral",Georgia,serif;font-weight:400;line-height:1.04;letter-spacing:-.015em}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* Skip link — visible only when focused via keyboard */
.skip-link{
  position:fixed;top:10px;left:10px;z-index:100;
  background:var(--roast);color:var(--cream);font-weight:600;font-size:14px;
  padding:12px 20px;border-radius:999px;
  transform:translateY(-200%);transition:transform .3s var(--ease);
}
.skip-link:focus{transform:translateY(0)}

/* Film grain overlay */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.28em;font-weight:600;
  color:var(--espresso);padding:7px 14px;border-radius:999px;
  background:rgba(224,163,116,.16);border:1px solid rgba(224,163,116,.38);
}
.eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--latte);box-shadow:0 0 0 4px rgba(224,163,116,.22)}

section{position:relative}
.reveal{opacity:0;transform:translateY(40px);filter:blur(6px)}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:center;padding:22px 16px}
.nav-inner{
  position:relative;
  width:100%;max-width:1120px;display:flex;align-items:center;justify-content:space-between;
  padding:12px 12px 12px 26px;border-radius:999px;
  background:rgba(249,244,235,.7);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.5);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 20px 40px -28px rgba(20,38,43,.4);
  transition:all .5s var(--ease);
}
.nav.scrolled .nav-inner{background:rgba(249,244,235,.92);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 24px 44px -26px rgba(20,38,43,.5)}
.brand{display:flex;align-items:center;gap:11px;font-family:"Spectral",serif;font-size:18px;letter-spacing:-.01em}
.brand .mark{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#fff;border:1px solid rgba(20,38,43,.07);box-shadow:0 6px 14px -8px rgba(30,61,64,.6);flex-shrink:0}
.brand .mark img{width:100%;height:100%;object-fit:contain;padding:3px}
.brand b{font-weight:500}
.brand small{display:block;font-family:"Hanken Grotesk";font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:1px}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:14px;font-weight:500;color:var(--ink);opacity:.72;transition:opacity .3s var(--ease)}
.nav-links a:hover{opacity:1}
.nav-links a.active{opacity:1;color:var(--espresso)}

/* ---------- MOBILE NAV (trigger + drop panel) ---------- */
/* Both are display:none until the 760px breakpoint switches them on. */
.nav-toggle{
  display:none;width:46px;height:46px;flex-shrink:0;
  align-items:center;justify-content:center;
  border-radius:50%;border:1px solid var(--line);
  background:rgba(20,38,43,.05);color:var(--ink);cursor:pointer;
  transition:background .3s var(--ease);
}
.nav-toggle:hover{background:rgba(20,38,43,.1)}
.nav-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(224,163,116,.55)}
.nav-toggle .bars{display:block;position:relative;width:18px;height:12px}
.nav-toggle .bars span{
  position:absolute;left:0;width:100%;height:1.8px;border-radius:2px;background:currentColor;
  transition:transform .4s var(--ease),opacity .25s var(--ease);
}
.nav-toggle .bars span:nth-child(1){top:0}
.nav-toggle .bars span:nth-child(2){top:5.1px}
.nav-toggle .bars span:nth-child(3){top:10.2px}
.nav.open .nav-toggle .bars span:nth-child(1){transform:translateY(5.1px) rotate(45deg)}
.nav.open .nav-toggle .bars span:nth-child(2){opacity:0}
.nav.open .nav-toggle .bars span:nth-child(3){transform:translateY(-5.1px) rotate(-45deg)}

.nav-panel{
  display:none;position:absolute;top:100%;left:0;right:0;margin-top:10px;padding:10px;
  border-radius:26px;
  /* Solid, not translucent: the panel nests inside .nav-inner's backdrop-filter
     layer, and a semi-transparent fill there lets the hero read straight through. */
  background:var(--cream);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 60px -30px rgba(20,38,43,.65);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
.nav.open .nav-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.nav-panel a{
  display:block;padding:15px 18px;border-radius:16px;
  font-size:16.5px;font-weight:500;color:var(--ink);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.nav-panel a + a{margin-top:2px}
.nav-panel a:hover{background:rgba(20,38,43,.05)}
.nav-panel a.active{background:rgba(224,163,116,.16);color:var(--espresso);font-weight:600}
.nav-panel a:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(224,163,116,.55)}
.nav-panel .panel-cta{
  margin-top:8px;text-align:center;font-weight:600;
  background:var(--roast);color:var(--cream);
  box-shadow:0 16px 30px -18px rgba(20,38,43,.8);
}
.nav-panel .panel-cta:hover{background:var(--butterscotch);color:var(--cream)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14.5px;
  padding:13px 14px 13px 22px;border-radius:999px;cursor:pointer;border:none;
  transition:transform .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
  will-change:transform;
}
.btn .ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;transition:transform .45s var(--ease),background .4s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--roast);color:var(--cream);box-shadow:0 16px 30px -16px rgba(20,38,43,.8)}
.btn-primary .ic{background:rgba(249,244,235,.16)}
.btn-primary:hover{background:var(--butterscotch)}
.btn-primary:hover .ic{transform:translate(3px,-2px) scale(1.06)}
.btn-ghost{background:rgba(20,38,43,.05);color:var(--ink);border:1px solid var(--line)}
.btn-ghost .ic{background:rgba(20,38,43,.07)}
.btn-ghost:hover{background:rgba(20,38,43,.09)}
.btn-ghost:hover .ic{transform:translate(3px,-2px) scale(1.06)}
.btn-light{background:var(--cream);color:var(--roast)}
.btn-light .ic{background:rgba(20,38,43,.08)}
.btn-light:hover .ic{transform:translate(3px,-2px) scale(1.06)}
.btn-on-dark{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn-on-dark .ic{background:rgba(255,255,255,.16)}
.btn-on-dark:hover .ic{transform:translate(3px,-2px) scale(1.06)}

/* ---------- HERO (home / landing) ---------- */
.hero{min-height:100dvh;display:flex;align-items:center;position:relative;overflow:hidden;padding:140px 0 90px}
.hero-bg{position:absolute;inset:-12% 0 0 0;z-index:0;will-change:transform}
.hero-bg img{width:100%;height:118%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:
    /* the headline is centre-set now, so the scrim is even rather than
       left-heavy, with a soft pool in the middle to hold the type */
    radial-gradient(82% 66% at 50% 48%,rgba(9,20,23,.55),rgba(9,20,23,0) 78%),
    linear-gradient(180deg,rgba(9,20,23,.62) 0%,rgba(9,20,23,.40) 30%,rgba(9,20,23,.44) 62%,rgba(9,20,23,.72) 100%),
    linear-gradient(100deg,rgba(9,20,23,.62) 0%,rgba(13,28,32,.50) 40%,rgba(16,33,37,.46) 72%,rgba(120,68,40,.42) 100%),
    radial-gradient(120% 90% at 80% 10%,rgba(224,163,116,.16),transparent 60%);
}
.hero-inner{position:relative;z-index:2;color:var(--cream);max-width:900px;margin-inline:auto;text-align:center}
/* sized so the slogan holds two lines from 360px up — never a third */
.hero h1{font-size:clamp(34px,6.4vw,82px);color:#fff;font-weight:380;margin:26px 0 24px;text-wrap:balance}
.hero h1 em{font-style:italic;color:#F2CDA8}
.hero p.lead{font-size:clamp(16px,1.5vw,19px);max-width:640px;margin-inline:auto;color:rgba(255,255,255,.9);font-weight:300;text-wrap:pretty}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:38px}
.hero-eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#F6E8D3}
.hero-eyebrow .dot{background:var(--gold);box-shadow:0 0 0 4px rgba(201,162,75,.25)}
/* svh rather than dvh on handsets: dvh grows as the URL bar retracts, which
   re-lays-out the hero (and its parallax) mid-scroll. */
/* Two things drive the phone hero. svh rather than dvh, because dvh grows as
   the URL bar retracts and re-lays-out the hero mid-scroll. And 76svh rather
   than a full screen: a full-height hero on a 390px handset is a 1:2 box, and
   no photograph fills that without being magnified. */
@media(max-width:760px){
  .hero{min-height:76svh;padding:120px 0 84px}
  .hero h1{margin:22px 0 20px}
  .hero-cta{margin-top:30px}

  /* Plain background on the phone. No photograph survives a 1:2 crop well
     enough to sit behind a headline, so the mobile hero is a flat panel in the
     brand palette and the picture stays underneath at low strength, for depth
     rather than subject. To go completely flat, drop the opacity to 0. */
  .hero-bg{background:linear-gradient(165deg,var(--roast) 0%,#123138 46%,#1E3D40 100%)}
  .hero-bg img{opacity:.12}
  .hero-bg::after{
    background:
      linear-gradient(180deg,rgba(9,20,23,.5) 0%,rgba(9,20,23,.3) 44%,rgba(9,20,23,.75) 100%),
      radial-gradient(120% 80% at 78% 6%,rgba(224,163,116,.2),transparent 62%);
  }
}
/* 320–365px devices: the clamp floor is a hair too wide for line two */
@media(max-width:365px){.hero h1{font-size:30px}}

/* floating rating badge */
.rating-badge{
  position:absolute;right:6%;bottom:12%;z-index:3;
  background:rgba(249,244,235,.14);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.28);border-radius:24px;padding:8px;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
}
.rating-badge .core{background:rgba(249,244,235,.95);border-radius:17px;padding:18px 22px;text-align:center;min-width:172px}
.rating-badge .num{font-family:"Spectral",serif;font-size:40px;color:var(--roast);line-height:1}
.rating-badge .stars{color:var(--gold);font-size:15px;letter-spacing:2px;margin:6px 0 3px}
.rating-badge .lbl{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.04em}
.rating-badge .g{margin-top:8px;font-size:10.5px;color:var(--espresso);font-weight:700;text-transform:uppercase;letter-spacing:.14em}
@media(max-width:860px){.rating-badge{display:none}}

.scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;color:rgba(255,255,255,.7);font-size:10px;letter-spacing:.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:9px}
.scroll-hint .ln{width:1px;height:38px;background:linear-gradient(rgba(255,255,255,.6),transparent);animation:drop 2s var(--ease) infinite}
/* once the CTAs stack they reach into the cue's space — and a short hero
   needs no invitation to scroll anyway */
@media(max-width:430px){.scroll-hint{display:none}}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}40%{transform:scaleY(1);transform-origin:top}60%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero{position:relative;min-height:58vh;display:flex;align-items:flex-end;overflow:hidden;padding:150px 0 56px}
.page-hero .hero-bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(9,20,23,.82) 0%,rgba(12,26,30,.72) 38%,rgba(10,22,25,.9) 100%),
    linear-gradient(90deg,rgba(9,20,23,.55) 0%,rgba(9,20,23,.1) 60%,rgba(9,20,23,0) 100%)}
.page-hero-inner{position:relative;z-index:2;color:var(--cream);max-width:760px}
.page-hero h1{font-size:clamp(40px,6vw,82px);color:#fff;font-weight:380;margin:22px 0 16px}
.page-hero h1 em{font-style:italic;color:#F2CDA8}
.page-hero p{font-size:clamp(15px,1.4vw,18px);max-width:560px;color:rgba(255,255,255,.9);font-weight:300}
.crumbs{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(249,244,235,.6);font-weight:600}
.crumbs a:hover{color:#fff}

/* ---------- STATS ---------- */
.stats{background:var(--roast);color:var(--cream);padding:0}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.stat{padding:54px 30px;text-align:center;border-right:1px solid rgba(249,244,235,.1)}
.stat:last-child{border-right:none}
.stat .v{font-family:"Spectral",serif;font-size:clamp(38px,4vw,56px);color:#fff;line-height:1}
.stat .v small{font-size:.5em;color:var(--latte);vertical-align:super;margin-left:2px}
.stat .k{margin-top:10px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(249,244,235,.6);font-weight:600}
/* Three facts in two columns leaves the last one stranded in a half-width
   cell — give it the whole row instead. */
@media(max-width:760px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat{padding:38px 18px;border-right:none;border-bottom:1px solid rgba(249,244,235,.1)}
  .stat:nth-child(odd):last-child{grid-column:1/-1}
  .stat .k{font-size:11px;letter-spacing:.12em}
}

/* ---------- ABOUT / STORY ---------- */
.about{padding:130px 0}
.about-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:74px;align-items:center}
.about-img-shell{background:rgba(20,38,43,.05);border:1px solid var(--line);padding:10px;border-radius:34px;box-shadow:var(--shadow-soft)}
.about-img-shell .core{position:relative;border-radius:25px;overflow:hidden}
.about-img-shell img{width:100%;height:560px;object-fit:cover;background:#fff}
.about-img-shell .tag{position:absolute;left:16px;bottom:16px;background:rgba(249,244,235,.92);backdrop-filter:blur(8px);border-radius:14px;padding:11px 16px;display:flex;align-items:center;gap:10px}
.about-img-shell .tag .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(150deg,var(--latte),var(--espresso));color:#fff;display:grid;place-items:center;font-family:"Spectral",serif;font-size:15px}
.about-img-shell .tag b{font-size:13px;display:block}
.about-img-shell .tag span{font-size:11px;color:var(--muted)}
.about h2{font-size:clamp(34px,4.2vw,56px);margin:22px 0 26px}
.about h2 em{font-style:italic;color:var(--espresso)}
.about p{color:#3E4A48;font-size:16.5px;font-weight:300;margin-bottom:20px}
.about .sig{font-family:"Spectral",serif;font-style:italic;font-size:26px;color:var(--roast);margin-top:6px}
.creds{display:flex;gap:26px;flex-wrap:wrap;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.cred b{font-family:"Spectral",serif;font-size:21px;display:block;color:var(--roast)}
.cred span{font-size:12px;color:var(--muted)}
/* Stacked, the shell is the full column width — a fixed 440px height on a
   360px phone crops nearly half the frame off. Let the photo keep its own
   ratio instead, so the whole picture shows. */
@media(max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:44px}
  .about-img-shell img{height:auto}
  /* the caption tag needs a right edge or long text overflows the rounded core */
  .about-img-shell .tag{right:16px}
}
@media(max-width:560px){
  .about-img-shell{padding:8px;border-radius:26px}
  .about-img-shell .core{border-radius:19px}
  .about-img-shell .tag{left:10px;bottom:10px;right:10px;padding:10px 12px;gap:8px}
  .about-img-shell .tag .av{width:32px;height:32px;font-size:13px}
}

/* ---------- OFFERINGS / SERVICES ---------- */
.services{padding:120px 0;background:var(--cream-2)}
.sec-head{max-width:680px;margin-bottom:60px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(34px,4.4vw,58px);margin:20px 0 16px}
.sec-head h2 em{font-style:italic;color:var(--espresso)}
.sec-head p{color:var(--muted);font-size:16.5px;font-weight:300;max-width:560px}
.sec-head.center p{margin-left:auto;margin-right:auto}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{
  background:rgba(249,244,235,.6);border:1px solid var(--line);padding:9px;border-radius:28px;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);will-change:transform;
}
.svc .core{background:#FCF8F0;border-radius:20px;padding:32px 28px 30px;height:100%;box-shadow:inset 0 1px 1px rgba(255,255,255,.7)}
.svc:hover{transform:translateY(-8px);box-shadow:var(--shadow-card)}
.svc .ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:rgba(224,163,116,.18);color:var(--espresso);margin-bottom:22px}
.svc:hover .ic{background:var(--espresso);color:#fff;transition:all .5s var(--ease)}
.svc h3{font-size:22px;margin-bottom:9px}
.svc p{font-size:14.5px;color:var(--muted);font-weight:300}
.svc.feat{background:linear-gradient(160deg,var(--butterscotch),#96502F)}
.svc.feat .core{background:transparent;box-shadow:none;color:var(--cream)}
.svc.feat .ic{background:rgba(249,244,235,.18);color:#fff}
.svc.feat:hover .ic{background:rgba(249,244,235,.3)}
.svc.feat h3{color:#fff}
.svc.feat p{color:rgba(249,244,235,.85)}
.svc.feat .pill{display:inline-block;margin-top:18px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#fff;background:rgba(249,244,235,.18);padding:6px 13px;border-radius:999px}
@media(max-width:900px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.svc-grid{grid-template-columns:1fr}}

/* ---------- FEATURE / APPROACH BAND ---------- */
.approach{position:relative;padding:140px 0;color:var(--cream);overflow:hidden}
.approach-bg{position:absolute;inset:-12% 0 0 0;z-index:0;will-change:transform}
.approach-bg img{width:100%;height:120%;object-fit:cover;filter:grayscale(.2)}
.approach-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(10,21,24,.95),rgba(14,29,33,.85) 50%,rgba(96,55,33,.78))}
.approach-inner{position:relative;z-index:2}
.approach .quote{font-family:"Spectral",serif;font-size:clamp(26px,3.4vw,44px);font-style:italic;font-weight:300;max-width:880px;color:#fff;line-height:1.2}
.approach .quote span{color:var(--latte)}
.approach .by{margin-top:22px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:rgba(249,244,235,.65);font-weight:600}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:70px}
.step{background:rgba(14,29,33,.42);backdrop-filter:blur(10px);border:1px solid rgba(249,244,235,.18);border-radius:22px;padding:30px 26px}
.step .n{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:rgba(249,244,235,.12);color:var(--latte);margin-bottom:18px}
.step h4{font-size:23px;color:#fff;margin:0 0 9px}
.step p{font-size:14px;color:rgba(249,244,235,.78);font-weight:300}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

/* ---------- GALLERY TEASER STRIP ---------- */
.gallery-teaser{padding:120px 0}
/* Fixed-height rows cropped every landscape photo down to a letterbox slice.
   Instead each tile carries its photo's own aspect ratio — 3:4 for the
   portraits (.tall), 4:3 for the landscapes (.wide) — so the whole photo
   shows. Rows then only stay square-edged if every photo in a row is the
   same orientation, which is how the markup is ordered. */
.teaser-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.teaser-grid figure{overflow:hidden;border-radius:18px;position:relative;background:var(--cream-2)}
.teaser-grid img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.teaser-grid figure:hover img{transform:scale(1.06)}
.teaser-grid .tall{aspect-ratio:3/4}
.teaser-grid .wide{grid-column:span 2;aspect-ratio:4/3}

/* Four photos can't fill orientation-grouped rows, so the home teaser pairs a
   portrait with a landscape per row. 9:16 is the width ratio at which a 3:4
   and a 4:3 photo come out the same height, so both still show in full. */
.teaser-grid.pairs{grid-template-columns:repeat(25,1fr)}
.teaser-grid.pairs .tall{grid-column:span 9}
.teaser-grid.pairs .wide{grid-column:span 16}

@media(max-width:760px){
  .teaser-grid{grid-template-columns:repeat(2,1fr)}
  .teaser-grid .wide{grid-column:span 2}
  .teaser-grid.pairs{grid-template-columns:1fr}
  .teaser-grid.pairs .tall,.teaser-grid.pairs .wide{grid-column:span 1}
}

/* ---------- PHOTO FEATURES (chalkboards, shelf, signs) ---------- */
.photos{padding:120px 0;background:var(--cream-2)}
.photos.plain{background:transparent}
.duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:46px}
.duo-grid.trio{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.duo-grid,.duo-grid.trio{grid-template-columns:1fr}}

.photo-card{background:rgba(249,244,235,.6);border:1px solid var(--line);padding:9px;border-radius:28px;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);will-change:transform}
.photo-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card)}
.photo-card .shot{border-radius:20px;overflow:hidden;background:var(--cream-2)}
.photo-card .shot img{width:100%;height:420px;object-fit:cover;transition:transform .8s var(--ease)}
.photo-card:hover .shot img{transform:scale(1.04)}
.photo-card .cap{padding:22px 20px 14px}
.photo-card .cap h3{font-size:21px;margin-bottom:7px}
.photo-card .cap p{font-size:14.5px;color:var(--muted);font-weight:300}
.photo-card.tall .shot img{height:560px}
/* portrait chalkboards: show the whole sign rather than cropping it */
.photo-card.sign .shot{background:#101F23}
.photo-card.sign .shot img{height:620px;object-fit:contain}
.photo-card.sign:hover .shot img{transform:none}
@media(max-width:860px){.photo-card .shot img,.photo-card.tall .shot img{height:340px}.photo-card.sign .shot img{height:460px}}

/* take-home shelf */
.shelf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.shelf-card{background:#FCF8F0;border:1px solid var(--line);border-radius:26px;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.shelf-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card)}
.shelf-card img{width:100%;height:260px;object-fit:cover}
.shelf-card .body{padding:24px 24px 26px}
.shelf-card h3{font-size:20px;margin-bottom:8px}
.shelf-card p{font-size:14px;color:var(--muted);font-weight:300}
.shelf-card .tagline{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--butterscotch);background:var(--butterscotch-soft);padding:6px 12px;border-radius:999px}
@media(max-width:860px){.shelf-grid{grid-template-columns:1fr 1fr}.shelf-card img{height:220px}}
/* One card per row, so nothing has to line up: drop the fixed height and let
   each product photo keep its own shape. Two of the three are portrait and a
   220px letterbox was cutting about half of them away. */
@media(max-width:600px){
  .shelf-grid{grid-template-columns:1fr}
  .shelf-card img{height:auto;object-fit:contain;background:var(--cream-2)}
  .shelf-card .body{padding:22px 20px 24px}
}

/* today's special band */
.special{padding:120px 0}
.special-inner{background:var(--roast);color:var(--cream);border-radius:34px;overflow:hidden;
  display:grid;grid-template-columns:.85fr 1.15fr;align-items:stretch;box-shadow:var(--shadow-soft)}
.special-inner .shot{position:relative;min-height:470px;background:#0F1D21}
/* the board is portrait — show it whole rather than cropping the price off */
.special-inner .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:20px}
/* centre the copy in the dark panel instead of letting it sit top-aligned */
.special-inner .body{padding:52px 48px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.special-inner h2{font-size:clamp(30px,3.4vw,46px);color:#fff;margin:20px 0 14px}
.special-inner h2 em{font-style:italic;color:var(--latte)}
.special-inner p{color:rgba(249,244,235,.75);font-weight:300;max-width:460px}
.special-price{font-family:"Spectral",serif;font-size:56px;color:var(--latte);line-height:1;margin-top:26px}
.special-price small{font-family:"Hanken Grotesk",sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(249,244,235,.6);font-weight:600;display:block;margin-top:8px}
@media(max-width:860px){.special-inner{grid-template-columns:1fr}.special-inner .body{padding:36px 28px}}
@media(max-width:560px){
  .special-inner{border-radius:26px}
  .special-inner .shot{min-height:340px}
  .special-inner .shot img{padding:14px}
  .special-inner .body{padding:30px 22px 34px}
  .special-price{font-size:46px;margin-top:22px}
  .special-alt{padding:26px 22px;border-radius:26px}
}

/* second special — no board photo for this one, so it's a wide copy card */
.special-alt{margin-top:22px;background:#fff;border:1px solid rgba(23,42,48,.10);border-radius:34px;
  padding:44px 48px;display:grid;grid-template-columns:auto 1fr auto;gap:34px;align-items:center;
  box-shadow:var(--shadow-soft)}
.special-alt .day{font-family:"Spectral",serif;font-style:italic;font-size:15px;line-height:1.15;
  text-align:center;color:var(--roast);background:var(--cream);border-radius:20px;padding:18px 20px;min-width:104px}
.special-alt .day b{display:block;font-family:"Hanken Grotesk",sans-serif;font-style:normal;font-size:26px;
  letter-spacing:.01em;font-weight:600;margin-bottom:2px}
.special-alt h3{font-size:clamp(24px,2.4vw,32px);margin:0 0 10px;color:var(--roast)}
.special-alt h3 em{font-style:italic;color:var(--latte-deep)}
.special-alt p{margin:0;font-weight:300;max-width:560px}
.special-alt .note{font-family:"Hanken Grotesk",sans-serif;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:var(--roast);text-align:right;line-height:1.5;white-space:nowrap}
@media(max-width:860px){.special-alt{grid-template-columns:1fr;gap:20px;padding:32px 28px;text-align:left}
  .special-alt .day{justify-self:start}.special-alt .note{text-align:left;white-space:normal}}

/* ---------- TESTIMONIALS (stagger) ---------- */
.testi{padding:120px 0 60px;overflow:hidden}
.st-stage{position:relative;width:100%;height:620px;margin-top:34px}
.st-card{
  position:absolute;left:50%;top:50%;cursor:pointer;box-sizing:border-box;
  border:2px solid rgba(198,123,78,.42);padding:34px;background:#FCF8F0;color:var(--ink);
  transition:transform .6s var(--ease),background .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
  clip-path:polygon(50px 0%,calc(100% - 50px) 0%,100% 50px,100% 100%,calc(100% - 50px) 100%,50px 100%,0 100%,0 0);
  will-change:transform;
}
.st-card:not(.center):hover{border-color:var(--latte-deep)}
.st-card.center{z-index:10;background:var(--roast);color:var(--cream);border-color:var(--roast);box-shadow:0 8px 0 4px var(--latte-deep)}
.st-notch{position:absolute;display:block;transform-origin:top right;transform:rotate(45deg);background:rgba(198,123,78,.5);right:-2px;top:48px;width:70.7px;height:2px}
.st-card.center .st-notch{background:rgba(249,244,235,.32)}
.st-av{width:48px;height:56px;margin-bottom:18px;display:grid;place-items:center;font-family:"Spectral",serif;font-size:22px;color:#fff;background:linear-gradient(150deg,var(--latte),var(--espresso));box-shadow:3px 3px 0 var(--cream)}
.st-card.center .st-av{box-shadow:3px 3px 0 rgba(249,244,235,.22)}
.st-stars{color:var(--gold);font-size:13px;letter-spacing:2px;margin-bottom:10px}
.st-quote{font-family:"Spectral",serif;font-size:18px;line-height:1.34;font-weight:400}
.st-by{position:absolute;bottom:34px;left:34px;right:34px;font-size:13px;font-style:italic;color:var(--muted);line-height:1.4}
.st-by span{font-style:normal;font-size:11.5px;opacity:.75;display:block;margin-top:2px}
.st-card.center .st-by{color:rgba(249,244,235,.82)}
.st-nav{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:20}
.st-nav button{width:54px;height:54px;display:grid;place-items:center;background:var(--cream);border:2px solid rgba(198,123,78,.42);color:var(--roast);cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.st-nav button:hover{background:var(--espresso);color:#fff;border-color:var(--espresso)}
.st-nav button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(224,163,116,.5)}
/* main.js sizes the cards and the stage from the viewport; these are the
   matching type/notch sizes (and the no-JS stage height). */
@media(max-width:640px){
  .st-stage{height:560px}
  .st-card{padding:22px 20px;
    clip-path:polygon(34px 0%,calc(100% - 34px) 0%,100% 34px,100% 100%,calc(100% - 34px) 100%,34px 100%,0 100%,0 0)}
  .st-notch{top:32px;width:48.1px}
  .st-av{width:42px;height:48px;font-size:19px;margin-bottom:14px}
  .st-stars{font-size:12px;margin-bottom:8px}
  .st-quote{font-size:15px;line-height:1.36}
  .st-by{bottom:22px;left:20px;right:20px;font-size:12.5px}
  .st-nav button{width:48px;height:48px}
}

/* ---------- MENU PAGE ---------- */
.menu-sec{padding:96px 0 0}
.menu-sec:last-of-type{padding-bottom:110px}
.menu-block{margin-bottom:64px}
.menu-block-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;border-bottom:2px solid var(--line);padding-bottom:16px;margin-bottom:26px}
.menu-block-head h2{font-size:clamp(28px,3.4vw,42px)}
.menu-block-head h2 em{font-style:italic;color:var(--espresso)}
.h-en{font-family:"Hanken Grotesk",sans-serif;font-size:13px;letter-spacing:.02em;color:var(--muted);font-weight:400;font-style:normal;margin-left:9px;white-space:nowrap}
.menu-block-head .when{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--butterscotch);font-weight:700;white-space:nowrap}
/* "Enkel of dubbel · Single or double" beside a heading is wider than a phone.
   Both give up their nowrap and the heading takes the whole row. */
@media(max-width:600px){
  .menu-block-head{gap:6px 14px}
  .menu-block-head h2{flex:0 0 100%}
  .menu-block-head .when{white-space:normal}
  .h-en{white-space:normal;margin-left:7px}
  .menu-sec{padding:72px 0 0}
  .menu-sec:last-of-type{padding-bottom:80px}
  .menu-block{margin-bottom:48px}
}
.menu-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 56px}
@media(max-width:760px){.menu-list{grid-template-columns:1fr}}
.menu-row{display:flex;align-items:baseline;gap:10px;padding:14px 0;border-bottom:1px dashed var(--line)}
.menu-row .nm{font-family:"Spectral",serif;font-size:18px;color:var(--roast);white-space:nowrap}
.menu-row .desc{flex:1;font-size:13px;color:var(--muted);font-weight:300;position:relative;top:-1px}
/* English gloss beside the card's Afrikaans item name */
.menu-row .en{font-family:"Hanken Grotesk",sans-serif;font-size:12.5px;color:var(--muted);font-weight:400;white-space:nowrap;position:relative;top:-1px}
.menu-row .en::before{content:"·";margin-right:7px;color:rgba(20,38,43,.3)}
.menu-row .leader{flex:1;border-bottom:1px dotted rgba(20,38,43,.25);transform:translateY(-4px);min-width:18px}
.menu-row .price{font-family:"Spectral",serif;font-size:18px;color:var(--espresso);white-space:nowrap}
.menu-row .price.soft{font-family:"Hanken Grotesk",sans-serif;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--muted);position:relative;top:-2px}
.menu-row.full{flex-direction:column;align-items:flex-start;gap:2px}
.menu-row.full .top{display:flex;align-items:baseline;gap:10px;width:100%}
.menu-note{margin-top:8px;font-size:13px;color:var(--muted);font-style:italic;font-weight:300}
.menu-cta{text-align:center;padding:0 0 110px}

/* single-column list (used by the coffee board and the Soet/Sout columns) */
.menu-list.one{grid-template-columns:1fr}

/* Enkel / Dubbel price columns */
.price-head{display:flex;justify-content:flex-end;gap:0;padding:0 0 4px}
.price-head span{width:62px;text-align:right;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--butterscotch)}
.menu-row .price.col{flex:none;width:62px;text-align:right;font-size:17px}
.menu-row .price.col.none{color:rgba(20,38,43,.22)}
/* ---- Menu rows on small screens ----
   The name and its English gloss are both `nowrap` so the dotted leader lands
   in one place on a wide row. Below ~600px "Feta & spinasie quiche · Feta &
   spinach" is wider than the whole viewport, and the row was running off the
   side of the page. Under this breakpoint the row stacks instead: name (which
   may now wrap) on the left, price hard right, gloss and description on their
   own lines beneath. The leader has nothing left to lead across, so it goes. */
@media(max-width:600px){
  .menu-row,.menu-row .top{flex-wrap:wrap;gap:0 8px}
  /* flex-basis 0 so a long name wraps inside its own cell instead of bumping
     the price onto a line of its own */
  .menu-row .nm{white-space:normal;min-width:0;flex:1 1 0}
  .menu-row .leader{display:none}
  /* first price takes the slack; the Dubbel column stays glued to the Enkel one */
  .menu-row .price{margin-left:auto}
  .menu-row .price + .price{margin-left:0}
  .menu-row .en{order:8;flex:0 0 100%;white-space:normal;margin-top:3px;top:0}
  .menu-row .en::before{display:none}
  .menu-row .desc{order:9;flex:0 0 100%;margin-top:2px;top:0}
}
@media(max-width:480px){
  .price-head span,.menu-row .price.col{width:50px}
  .price-head span{font-size:9.5px;letter-spacing:.06em}
  .menu-row .price.col{font-size:16px}
  .menu-row .nm{font-size:17px}
  .duo-price .menu-row .desc{display:none}
}

/* Ekstras pills */
.menu-extras{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.extra-pill{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px;font-size:13px;font-weight:400;color:var(--espresso);
  background:var(--butterscotch-soft);border:1px solid rgba(201,111,74,.22);padding:9px 16px;border-radius:999px}
.extra-pill b{font-family:"Spectral",serif;font-weight:500;font-size:15px;color:var(--roast)}
.extra-pill .amt{font-family:"Spectral",serif;font-size:15px;color:var(--butterscotch)}

/* Soet / Sout columns */
.menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 56px}
/* 900, not 760: at tablet widths the 56px gutter plus two nowrap columns
   ("Feta & spinasie quiche · Feta & spinach") ran past the right edge. */
@media(max-width:900px){.menu-cols{grid-template-columns:1fr;gap:34px}}
.menu-sub{font-family:"Spectral",serif;font-style:italic;font-weight:400;font-size:26px;color:var(--butterscotch);
  padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.menu-row .sub{display:block;font-size:12.5px;color:var(--muted);font-weight:300;margin-top:3px}
.menu-row.stack{flex-direction:column;align-items:stretch;gap:0}
.menu-row.stack .top{display:flex;align-items:baseline;gap:10px;width:100%}

/* landing-page menu sampler */
.sampler{padding:120px 0;background:var(--cream-2)}
.sampler .menu-block{max-width:980px;margin:0 auto 0}
.sampler .sec-head{margin-bottom:48px}

/* ---------- GALLERY: CARD FAN ---------- */
/* The fan deals cards out to ±30rem and flies spent ones to ±40rem, so the
   section clips horizontally. Card widths and stage heights below are paired:
   stageHeight() in main.js mirrors these stage heights in px. */
.gallery{padding:120px 0 110px;overflow:hidden}
.filter-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.chip{font-size:12px;letter-spacing:.06em;font-weight:600;color:var(--muted);background:rgba(20,38,43,.05);border:1px solid var(--line);padding:9px 16px;border-radius:999px;cursor:default}
.fan-stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:84rem;height:36rem;margin:46px auto 0}
.fan-card{
  position:absolute;width:20rem;aspect-ratio:3/4;
  border:7px solid #fff;border-radius:16px;overflow:hidden;
  background:var(--cream-2);box-shadow:var(--shadow-card);
  cursor:pointer;will-change:transform;
  /* Hidden for the deal-in, like .reveal. main.js restores it (fan-fallback)
     when GSAP is missing, so the deck never stays blank. */
  opacity:0;
}
.fan-card img{width:100%;height:100%;display:block;object-fit:cover}
.fan-card:focus-visible{outline:none;box-shadow:0 0 0 3px var(--latte),var(--shadow-card)}
.fan-card.is-center{cursor:zoom-in;box-shadow:0 44px 80px -34px rgba(20,38,43,.62)}
.fan-cap{
  position:absolute;left:0;right:0;bottom:0;padding:46px 18px 16px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#fff;
  /* Holds >=.82 opacity across the full height of the text, so the caption
     stays legible over pale photos (glass domes, white plates) too. */
  background:linear-gradient(to top,rgba(20,38,43,.92) 0%,rgba(20,38,43,.82) 38%,rgba(20,38,43,0) 100%);
  opacity:0;transition:opacity .45s var(--ease)
}
.fan-card.is-center .fan-cap{opacity:1}

/* pager — matches the review carousel's controls */
.fan-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:34px}
.fan-nav[hidden]{display:none}
.fan-nav button{width:52px;height:52px;display:grid;place-items:center;background:var(--cream);border:2px solid rgba(198,123,78,.42);color:var(--roast);cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.fan-nav button:hover{background:var(--espresso);color:#fff;border-color:var(--espresso)}
.fan-nav button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(224,163,116,.5)}
/* 22 dots — allowed to wrap so the row never pushes the arrows off a 340px screen */
.fan-dots{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;max-width:min(60vw,300px)}
.fan-dots span{width:7px;height:7px;border-radius:50%;background:rgba(20,38,43,.16);transition:background .35s var(--ease),transform .35s var(--ease)}
.fan-dots span.on{background:var(--espresso);transform:scale(1.5)}

/* No GSAP? fall back to a plain wrapped strip of photos, pager hidden.
   Without this the 22 absolutely-positioned cards would stack. */
.fan-stage.fan-fallback{height:auto;flex-wrap:wrap;gap:16px}
.fan-stage.fan-fallback .fan-card{position:relative;width:min(240px,42vw);opacity:1;transform:none;box-shadow:var(--shadow-card)}
.fan-stage.fan-fallback .fan-cap{opacity:1}
.fan-stage.fan-fallback + .fan-nav{display:none}

@media(max-width:1279px){.fan-stage{height:33rem}.fan-card{width:18.5rem}}
@media(max-width:1023px){.fan-stage{height:31rem}.fan-card{width:17rem}}
@media(max-width:767px){.fan-stage{height:25rem;margin-top:36px}.fan-card{width:15rem;border-width:6px}}
@media(max-width:639px){.fan-stage{height:21rem}.fan-card{width:13rem}}
@media(max-width:479px){.fan-stage{height:15.5rem}.fan-card{width:10rem;border-width:5px;border-radius:12px}.fan-cap{padding:34px 12px 12px;font-size:11px;letter-spacing:.1em}.fan-nav{gap:10px;margin-top:26px}.fan-nav button{width:46px;height:46px}.fan-dots{gap:5px}.fan-dots span{width:6px;height:6px}}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(10,20,23,.92);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:40px;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:14px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.lightbox .close{position:absolute;top:24px;right:28px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(249,244,235,.14);border:1px solid rgba(255,255,255,.25);color:#fff;cursor:pointer;z-index:2}
/* leave the top strip clear so the close button never sits on the photo */
@media(max-width:640px){
  .lightbox{padding:78px 14px 24px}
  .lightbox .close{top:16px;right:16px;width:44px;height:44px}
}

/* ---------- CONTACT / VISIT ---------- */
.contact{padding:80px 0 40px}
.c-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:stretch}
.c-card{background:var(--roast);color:var(--cream);border-radius:30px;padding:48px 44px;display:flex;flex-direction:column}
.c-card h2{font-size:clamp(32px,3.6vw,48px);color:#fff;margin:18px 0 14px}
.c-card h2 em{font-style:italic;color:var(--latte)}
.c-card .sub{color:rgba(249,244,235,.72);font-weight:300;margin-bottom:34px}
.c-row{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid rgba(249,244,235,.12)}
.c-row .ic{width:40px;height:40px;border-radius:12px;background:rgba(249,244,235,.1);display:grid;place-items:center;color:var(--latte);flex-shrink:0}
.c-row .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(249,244,235,.5);font-weight:600}
.c-row .val{font-size:16px;color:#fff;margin-top:2px}
.c-row .val a:hover{color:var(--latte)}
.c-row .val.open{color:var(--latte);font-weight:600}
.c-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:34px}
.map-shell{background:rgba(20,38,43,.05);border:1px solid var(--line);padding:10px;border-radius:30px;box-shadow:var(--shadow-soft)}
.map-shell iframe{width:100%;height:100%;min-height:480px;border:0;border-radius:21px;filter:grayscale(.15) contrast(1.02)}
@media(max-width:900px){.c-grid{grid-template-columns:1fr;gap:26px}.map-shell iframe{min-height:340px}}
/* 44px of side padding inside a 34px-inset card leaves very little line length
   on a phone — the address was reading four words wide. */
@media(max-width:560px){
  .c-card{padding:32px 24px;border-radius:26px}
  .c-card .sub{margin-bottom:24px}
  .c-row{gap:13px;padding:16px 0}
  .c-row .ic{width:36px;height:36px;border-radius:11px}
  .c-row .val{font-size:15px}
  .c-cta{padding-top:26px;gap:10px}
  .map-shell{padding:7px;border-radius:24px}
  .map-shell iframe{min-height:300px;border-radius:18px}
}

/* good-to-know cards */
.gtk{padding:90px 0 120px}
.gtk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.gtk-card{background:#FCF8F0;border:1px solid var(--line);border-radius:22px;padding:30px 28px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.gtk-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card)}
.gtk-card .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--butterscotch-soft);color:var(--butterscotch);margin-bottom:18px}
.gtk-card h3{font-size:20px;margin-bottom:8px}
.gtk-card p{font-size:14.5px;color:var(--muted);font-weight:300}
@media(max-width:860px){.gtk-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.gtk-grid{grid-template-columns:1fr}}

/* hours table (visit page) */
.hours-list{margin-top:6px}
.hours-list .hrow{display:flex;justify-content:space-between;gap:16px;font-size:14px;padding:3px 0;color:rgba(249,244,235,.85)}
.hours-list .hrow span:first-child{color:rgba(249,244,235,.55);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.hours-list .hrow.today span{color:var(--latte)}

/* ---------- LOCATIONS (Kleinmond shop + Betty's Bay takeaway) ---------- */
.locs{padding:110px 0 0}
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px}
.loc-card{
  display:flex;flex-direction:column;background:#FCF8F0;border:1px solid var(--line);
  border-radius:26px;padding:36px 34px 32px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.loc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card)}
.loc-badge{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  padding:6px 13px;border-radius:999px;
  background:var(--butterscotch-soft);color:var(--butterscotch);
}
.loc-card .loc-name{font-size:clamp(25px,2.3vw,32px);margin:20px 0 8px}
.loc-card .loc-name em{font-style:italic;color:var(--espresso)}
.loc-card .loc-where{color:var(--muted);font-weight:300;font-size:15px;margin-bottom:12px}
.loc-meta{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line)}
.loc-meta .ic{
  width:36px;height:36px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;
  background:var(--butterscotch-soft);color:var(--butterscotch);
}
.loc-meta .k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.loc-meta .v{font-size:15px;color:var(--ink);margin-top:2px}
.loc-foot{margin-top:auto;padding-top:26px}
/* the second shop, while the details are still being confirmed */
.loc-card.pending{background:rgba(242,234,220,.55);border-style:dashed;border-color:rgba(201,111,74,.34)}
.loc-note{
  font-size:13.5px;font-weight:300;color:var(--muted);line-height:1.6;
  background:var(--butterscotch-soft);border-radius:16px;padding:14px 16px;
}
@media(max-width:860px){.locs{padding:80px 0 0}.loc-grid{grid-template-columns:1fr}}
@media(max-width:560px){
  .loc-card{padding:28px 22px 26px;border-radius:22px}
  .loc-card .loc-name{margin:16px 0 8px}
  .loc-meta{gap:12px}
  .loc-foot{padding-top:22px}
  .loc-foot .btn{width:100%;justify-content:space-between}
}

/* ---------- CTA STRIP ---------- */
.cta-strip{padding:110px 0;background:var(--cream-2);text-align:center}
.cta-strip h2{font-size:clamp(32px,4.4vw,58px);margin:18px auto 16px;max-width:760px}
.cta-strip h2 em{font-style:italic;color:var(--espresso)}
.cta-strip p{color:var(--muted);font-weight:300;max-width:520px;margin:0 auto 32px}
.cta-strip .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- FOOTER ---------- */
footer{background:var(--roast);color:rgba(249,244,235,.7);padding:60px 0 40px}
.f-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;padding-bottom:36px;border-bottom:1px solid rgba(249,244,235,.12)}
.f-brand{color:#fff;font-family:"Spectral",serif;font-size:24px;max-width:340px}
.f-logo{width:74px;height:74px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;margin-bottom:18px}
.f-logo img{width:100%;height:100%;object-fit:contain;padding:5px}
.f-brand p{font-family:"Hanken Grotesk";font-size:13.5px;color:rgba(249,244,235,.6);font-weight:300;margin-top:12px}
.f-links{display:flex;gap:60px;flex-wrap:wrap}
.f-col h5{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--latte);margin-bottom:16px;font-weight:700}
.f-col a,.f-col span{display:block;font-size:14px;margin-bottom:10px;color:rgba(249,244,235,.72)}
.f-col a{transition:color .3s var(--ease)}
.f-col a:hover{color:#fff}
.f-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:30px;font-size:12.5px;color:rgba(249,244,235,.45)}

@media(max-width:760px){
  /* Desktop link row gives way to the trigger + drop panel. The header CTA
     collapses to its pin icon so directions stay one tap away. */
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .nav-panel{display:block}
  .nav{padding:14px 12px}
  .nav-inner{gap:10px;padding:10px 10px 10px 16px}
  .nav-cta{width:46px;height:46px;padding:0;gap:0;border-radius:50%;justify-content:center;flex-shrink:0}
  .nav-cta .btn-label{display:none}
  .nav-cta .ic{background:transparent}
  .nav-cta:hover .ic{transform:none}

  .wrap{padding:0 22px}
  .about,.services,.testi,.contact,.gallery-teaser{padding:80px 0}
  .approach{padding:96px 0}
  .sampler{padding:80px 0}
  .photos,.special,.gallery{padding:80px 0}
  .gtk{padding:70px 0 84px}
  .cta-strip{padding:84px 0}
  .locs{padding:80px 0 0}

  /* Section heads and the footer link row */
  .sec-head{margin-bottom:44px}
  .f-links{gap:34px}
  .f-col{min-width:132px}
  .f-top{gap:30px}
}

/* Full-width CTA buttons below this width: side by side they were each
   shrinking to about seven characters. */
@media(max-width:430px){
  .hero-cta,.cta-strip .row,.c-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn,.cta-strip .row .btn,.c-cta .btn{width:100%;justify-content:space-between}
  .creds{gap:16px 22px}
}

/* The brand block is the first thing to give up room on small handsets. It
   shares the pill with two 46px controls, and once it runs out of room it
   wraps "Lekker Koffiewinkel" onto two lines and pushes the nav taller. */
@media(max-width:480px){
  .brand{font-size:16px;gap:9px;min-width:0}
  .brand .mark{width:38px;height:38px}
  .brand b{white-space:nowrap}
  .brand small{font-size:8px;letter-spacing:.14em}
}
@media(max-width:380px){
  .brand{font-size:14px;gap:8px}
  .brand .mark{width:34px;height:34px}
  .brand small{display:none} /* nothing left to give — the tagline goes */
  .nav-inner{padding:8px 8px 8px 12px;gap:8px}
  .nav-toggle,.nav-cta{width:44px;height:44px} /* WCAG minimum target */
}

/* Page must not scroll behind the open panel. */
body.nav-open{overflow:hidden}

/* ---------- ONE-PAGE ANCHORS ----------
   Every nav link is a hash on this page, so anchored sections have to clear
   the fixed pill nav (66px tall + 22px of padding either side) instead of
   landing underneath it. */
main > section[id],
main > header[id]{scroll-margin-top:112px}
@media(max-width:760px){
  main > section[id],
  main > header[id]{scroll-margin-top:92px}
}

/* ---------- SMALL-SCREEN SAFETY NET ----------
   Grid and flex children are min-width:auto by default, which means a single
   wide child — a nowrap price row, a long unbroken word — can refuse to shrink
   and shove its whole column past the right edge of the screen. Overflow is
   then clipped by the overflow-x:hidden above and the text simply disappears.
   Forcing min-width:0 lets those cells shrink to the space that exists. */
@media(max-width:900px){
  .svc-grid > *,.shelf-grid > *,.gtk-grid > *,.loc-grid > *,.duo-grid > *,
  .steps > *,.menu-cols > *,.menu-list > *,.c-grid > *,.stats-grid > *,
  .teaser-grid > *{min-width:0}
  .menu-row,.menu-row .top,.c-row,.loc-meta,.f-col,.creds,.about-img-shell .tag{min-width:0}
  .menu-row > *,.c-row > *,.loc-meta > *,.about-img-shell .tag > *{min-width:0}
  /* an address or a URL should wrap rather than set the page width */
  body{overflow-wrap:break-word}
}

/* ---------- REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  /* .reveal starts hidden for the scroll animation — show it outright */
  .reveal{opacity:1!important;transform:none!important;filter:none!important}
}