/* ============================================================
   Palm & Berry — faithful rebuild of acai.png
   ============================================================ */
:root{
  --cream:#FBF4EC;        /* page background            */
  --cream-2:#F5ECDD;      /* feature band / alt panels  */
  --card:#FFFFFF;         /* white cards                */
  --green:#2F461D;        /* primary forest green       */
  --green-d:#26391A;      /* darker green (hover)       */
  --green-soft:#415A29;   /* signature green card       */
  --berry:#9F1951;        /* berry magenta accent       */
  --berry-d:#85113F;      /* berry hover                */
  --rose:#B8657B;         /* soft rose                  */
  --ink:#2B2C24;          /* near-black olive text      */
  --muted:#736F63;        /* muted body text            */
  --line:#E7DECF;         /* hairline borders           */
  --gold:#E0A93B;         /* review stars               */
  --matcha:#4E7B22;       /* fresh matcha green (hero)  */
  --berry-l:#C93A6B;      /* lighter berry (gradients)  */
  /* section bands — all derived from the house palette, kept light enough that
     the dark green / ink type keeps full contrast on every one of them */
  --band-cream:#FBF4EC;   /* base                       */
  --band-sand:#F5EAD8;    /* warm sand                  */
  --band-matcha:#EDF3E2;  /* matcha tint                */
  --band-rose:#F9EAEE;    /* soft berry tint            */
  --radius:18px;
  --radius-lg:26px;
  --shadow-sm:0 6px 22px rgba(47,70,29,.07);
  --shadow:0 18px 48px rgba(47,70,29,.12);
  --maxw:1600px;
  --font-serif:'Playfair Display',Georgia,serif;
  --font-sans:'Nunito Sans','Segoe UI',system-ui,sans-serif;
  --font-script:'Dancing Script',cursive;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:clamp(16px,0.62vw + 11px,21px);
  -webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
  position:relative;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
::selection{background:var(--berry);color:#fff}
/* keyboard accessibility — visible focus ring for interactive elements */
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:2px solid var(--berry);outline-offset:3px;border-radius:6px}
:focus:not(:focus-visible){outline:none}
.container{--cpad:clamp(28px,3vw,64px);max-width:var(--maxw);margin:0 auto;padding:0 var(--cpad)}

h1,h2,h3,.serif{font-family:var(--font-serif)}
/* house accent: one word per heading set in the script face, berry-coloured */
.script{font-family:var(--font-script);font-style:normal;font-weight:700;
  color:var(--berry);font-size:1.16em;line-height:.9;padding:0 .05em;
  display:inline-block;vertical-align:baseline}

/* eyebrow label (magenta, uppercase, spaced) with a small editorial accent line.
   Block + inline dash rather than flex: as a flex item the dash was laid out
   beside the whole (wrapped) text block, so a two-line label on a phone left it
   stranded on the far left. Inline, it just rides along with the first line. */
.eyebrow{
  display:block;
  font-weight:700;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--berry);margin-bottom:10px;
}
.eyebrow::before{content:"";display:inline-block;vertical-align:middle;
  width:26px;height:2px;border-radius:2px;margin:-2px 11px 0 0;
  background:currentColor;opacity:.6}
.eyebrow.eyebrow-c{text-align:center}

/* buttons ---------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-sans);font-weight:700;font-size:.95rem;
  padding:14px 26px;border-radius:40px;border:2px solid transparent;
  cursor:pointer;transition:.22s ease;white-space:nowrap;
}
.btn-green{background:var(--green);color:#fff;box-shadow:0 8px 20px rgba(47,70,29,.18)}
.btn-green:hover{background:var(--green-d);transform:translateY(-2px);box-shadow:0 12px 26px rgba(47,70,29,.24)}
.btn-outline{background:transparent;color:var(--green);border-color:var(--green)}
.btn-outline:hover{background:var(--green);color:#fff}
.btn-berry{background:var(--berry);color:#fff;box-shadow:0 8px 20px rgba(159,25,77,.20)}
.btn-berry:hover{background:var(--berry-d);transform:translateY(-2px);box-shadow:0 12px 26px rgba(159,25,77,.28)}
.btn:active{transform:translateY(0) scale(.98)}
.btn .ic{width:17px;height:17px}

/* ============================================================
   SECTION BANDS + WAVE DIVIDERS
   ============================================================ */
.band-cream{background:var(--band-cream)}
.band-sand{background:var(--band-sand)}
.band-matcha{background:var(--band-matcha)}
.band-rose{background:var(--band-rose)}

/* the divider belongs to the section BELOW and is filled with the colour of the
   section ABOVE, so the two bands interlock and there is no seam to line up.
   z-index 3 keeps it over the pinned child in .byo, which would else cover it. */
.sec-wave{position:absolute;top:-1px;left:0;width:100%;
  height:clamp(34px,5vw,92px);display:block;z-index:3;pointer-events:none}
.sec-wave use{fill:currentColor}
.from-cream{color:var(--band-cream)}
.from-sand{color:var(--band-sand)}
.from-matcha{color:var(--band-matcha)}
.from-rose{color:var(--band-rose)}
/* sections that used to run flush into the previous one need room for the wave */
.wave-pad{padding-top:clamp(66px,6.4vw,120px)}
.features{position:relative}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,244,236,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(231,222,207,.7);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
.nav-collapse{display:flex;align-items:center;flex:1;gap:30px}
.nav-collapse .nav-links{margin-inline:auto}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:54px;height:54px;flex:none}
.nav-links{display:flex;gap:34px;list-style:none}
.nav-links a{
  font-weight:600;font-size:.96rem;color:var(--ink);padding:6px 0;position:relative;
  white-space:nowrap;
}
.nav-links a:hover{color:var(--green)}
.nav-links a.active{color:var(--green)}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--green);border-radius:2px;
}
.nav-cta{padding:12px 24px}
.burger{display:none;background:rgba(47,70,29,.08);border:0;cursor:pointer;
  width:48px;height:48px;border-radius:14px;align-items:center;justify-content:center;padding:0;
  position:relative;z-index:70;transition:background .25s ease}
.burger:hover{background:rgba(47,70,29,.15)}
body.nav-open .burger{background:rgba(159,25,77,.13)}
.burger-box{position:relative;width:26px;height:16px;display:block}
.burger-inner{top:50%;margin-top:-1.5px}
.burger-inner,.burger-inner::before,.burger-inner::after{
  position:absolute;left:0;width:26px;height:3px;border-radius:3px;background:var(--green);
  transition:transform .36s cubic-bezier(.5,.1,.2,1),top .3s ease .06s,background .3s,opacity .2s}
.burger-inner::before{content:"";top:-8px}
.burger-inner::after{content:"";top:8px}
body.nav-open .burger-inner{background:transparent}
body.nav-open .burger-inner::before{top:0;transform:rotate(45deg);background:var(--berry);transition-delay:0s,0s,0s,0s}
body.nav-open .burger-inner::after{top:0;transform:rotate(-45deg);background:var(--berry)}
.nav-backdrop{display:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:175vh;background:var(--cream)}
.hero-sticky{position:sticky;top:0;height:100vh;min-height:600px;overflow:hidden;display:flex;align-items:center}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;will-change:transform;
  /* the raw clip grades flat — push the fruit before anything is laid over it */
  filter:saturate(1.32) contrast(1.08) brightness(1.02)}
/* Centred copy needs its light from the middle, so the wash is radial instead of a
   side sweep — and it is tinted (rose warm, matcha at the edges) rather than plain
   cream, which is what made the whole hero read as washed out. */
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* tight enough that the bowls left and right keep their full colour — a wide
       wash was what bleached them, and a bleached hero is what read as lifeless */
    radial-gradient(47% 57% at 50% 49%,
      rgba(252,242,238,.92) 0%,
      rgba(251,238,233,.86) 44%,
      rgba(250,235,236,.54) 70%,
      rgba(250,235,236,.18) 87%,
      rgba(250,235,236,0) 100%),
    linear-gradient(180deg, rgba(47,70,29,.24) 0%, rgba(47,70,29,0) 26%),
    linear-gradient(0deg, rgba(159,25,77,.20) 0%, rgba(159,25,77,0) 32%);}
.hero-inner{position:relative;z-index:3;width:100%}
/* horizontal interactive vines — fixed viewport layer, simulated in page space.
   z-index:-1 keeps the tracery BEHIND page content (shows through the cream
   negative space, hidden behind opaque cards) so it never hurts legibility. */
.vines{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}
@media (max-width:600px){.vines{opacity:.72}}
.hero-float{position:absolute;z-index:2;pointer-events:none;opacity:.62;will-change:transform;
  /* printed into the scrim, not a ghost hovering over the headline */
  mix-blend-mode:multiply;filter:saturate(1.05) contrast(.96) brightness(1.02)}
.hero-float.hf-tl{--fw:min(30vw,440px);width:var(--fw);
  top:calc(var(--fw) * -0.14);left:calc(var(--fw) * -0.14);scale:1 -1}
/* second cluster frames the centred copy from the opposite corner */
.hero-float.hf-br{--fw:min(26vw,380px);width:var(--fw);
  bottom:calc(var(--fw) * -0.16);right:calc(var(--fw) * -0.12);scale:-1 1;opacity:.5}
.scroll-cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--green);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase}
.scroll-cue .mouse{width:25px;height:40px;border:2px solid var(--green);border-radius:14px;position:relative}
.scroll-cue .wheel{position:absolute;left:50%;top:7px;width:4px;height:8px;border-radius:3px;background:var(--green);transform:translateX(-50%);animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}65%{opacity:1;transform:translate(-50%,10px)}100%{opacity:0;transform:translate(-50%,13px)}}
.hero-kicker{display:inline-block;
  background:linear-gradient(100deg,var(--berry),var(--berry-l));color:#fff;
  font-family:var(--font-sans);font-weight:800;font-size:.78rem;letter-spacing:.06em;
  padding:9px 19px;border-radius:30px;margin-bottom:20px;
  box-shadow:0 8px 22px rgba(159,25,77,.22)}
.hero h1{
  font-size:clamp(2.4rem,3.4vw,3.6rem);line-height:1.07;font-weight:800;color:var(--green);
  letter-spacing:-.5px;
}
/* three colours max: forest green sets the ground, matcha and berry name the two
   products the bowls are actually made of */
.hero h1 .berry{color:var(--berry)}
.hero h1 .matcha{color:var(--matcha)}
.hero h1 .script{color:var(--berry)}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .hero h1 .script{background:linear-gradient(96deg,var(--berry) 12%,var(--berry-l) 88%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
}
/* the copy already carries its own <br>; 430px was narrower than line one at the
   larger root sizes, so "mit" kept breaking off on its own */
.hero .lead{margin:22px auto 30px;font-size:1.12rem;color:var(--ink);max-width:560px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.hero-badges{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px;justify-content:center}
.hero-badge{display:flex;align-items:center;gap:9px;font-size:.9rem;font-weight:700;color:var(--green)}
.hero-badge .ic{width:18px;height:18px;color:var(--berry)}
/* the hero's second action carries the berry side of the palette, so the pair
   reads as the two bowls rather than as one button plus a grey ghost */
.hero-actions .btn-outline{color:var(--berry);border-color:var(--berry);
  background:rgba(255,255,255,.55)}
.hero-actions .btn-outline:hover{background:var(--berry);color:#fff}
/* centred on the desktop stage — the video's bowls sit left and right of the copy
   instead of being covered by it; ≤980px goes back to the left-aligned stack */
.hero-copy{max-width:min(940px,100%);margin-inline:auto;text-align:center}

/* ============================================================
   FEATURES BAR
   ============================================================ */
.features{border-bottom:1px solid var(--line)}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  padding-top:clamp(24px,2.6vw,52px)}
.feature{display:flex;gap:16px;align-items:flex-start;padding:30px 26px;position:relative;
  transition:transform .28s ease}
.feature:hover{transform:translateY(-3px)}
.feature + .feature::before{
  content:"";position:absolute;left:0;top:24px;bottom:24px;width:1px;background:var(--line);
}
.feature .ic-wrap{flex:none;color:var(--green);transition:transform .28s ease,color .28s ease}
.feature:hover .ic-wrap{transform:scale(1.12) rotate(-6deg);color:var(--berry)}
.feature .ic-wrap svg{width:30px;height:30px}
.feature h4{font-family:var(--font-sans);font-weight:800;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:5px}
.feature p{font-size:.92rem;color:var(--muted);line-height:1.45}

/* ============================================================
   SECTION SHELL
   ============================================================ */
section{position:relative}
/* the header is sticky, so every in-page anchor has to stop short of it —
   without this the targeted heading lands underneath the bar */
section[id]{scroll-margin-top:88px}
@media(max-width:600px){section[id]{scroll-margin-top:72px}}
.section{padding:clamp(78px,7vw,140px) 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:38px;gap:20px}
.section-head h2{font-size:clamp(1.9rem,3.3vw,2.6rem);color:var(--green);font-weight:800;line-height:1.1}
.section-link{display:inline-flex;align-items:center;gap:7px;color:var(--berry);font-weight:700;font-size:.92rem}
.section-link:hover{gap:11px}

/* ============================================================
   FAVOURITES (product cards)
   ============================================================ */
.fav-wrap{display:flex;align-items:center;gap:18px}
.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;flex:1}
.pcard{
  background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;transition:.25s;border:1px solid #F0E8DA;
}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.pcard-img{position:relative;aspect-ratio:1/1;overflow:hidden}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.pcard:hover .pcard-img img{transform:scale(1.06)}
.leaf-badge{
  position:absolute;top:12px;left:12px;width:34px;height:34px;border-radius:10px;
  background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--green);box-shadow:var(--shadow-sm);
}
.leaf-badge svg{width:18px;height:18px}
.pcard-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.pcard-body h3{font-family:var(--font-serif);font-size:1.18rem;color:var(--ink);margin-bottom:6px;font-weight:700}
.pcard-body .desc{font-size:.84rem;color:var(--muted);line-height:1.45;flex:1;margin-bottom:14px}
.pcard-foot{display:flex;align-items:center;justify-content:space-between}
.price{font-weight:800;color:var(--green);font-size:1.1rem}
.price.link{color:var(--green);font-size:.95rem}
.add-btn{
  flex:none;width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;border:0;cursor:pointer;
  display:grid;place-items:center;transition:.2s;
}
.add-btn:hover{background:var(--green-d);transform:scale(1.08)}
.add-btn svg{width:18px;height:18px}

/* ============================================================
   SIGNATURE BOWLS (large split cards)
   ============================================================ */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.scard{
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  display:grid;grid-template-columns:1.18fr 1fr;position:relative;min-height:218px;transition:.25s;
}
.scard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.scard .scard-media{overflow:hidden}
.scard .scard-media img{width:100%;height:100%;object-fit:cover;transition:.4s}
.scard:hover .scard-media img{transform:scale(1.06)}
.scard .scard-body{padding:22px 18px;display:flex;flex-direction:column;justify-content:center}
.scard h3{font-size:1.32rem;font-weight:800;margin-bottom:8px;line-height:1.15}
.scard .ingr{font-size:.82rem;line-height:1.5;opacity:.85;margin-bottom:14px}
.scard .scard-foot{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.scard .s-price{font-weight:800;font-size:1.2rem}
.scard .s-link{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.9rem}
.scard .s-link:hover{gap:11px}
/* variants */
.scard.green{background:var(--green-soft);color:#F4EFE4}
.scard.green h3,.scard.green .s-price{color:#fff}
.scard.green .s-link{color:#D9E3C8}
.scard.berry{background:var(--berry);color:#FBE7EE}
.scard.berry h3,.scard.berry .s-price{color:#fff}
.scard.berry .s-link{color:#F6CBD9}
.scard.cream{background:var(--card);color:var(--ink);border:1px solid #F0E8DA}
.scard.cream h3,.scard.cream .s-price{color:var(--green)}
.scard.cream .ingr{color:var(--muted);opacity:1}
.scard.cream .s-link{color:var(--berry)}

/* ============================================================
   BUILD YOUR BOWL — scroll-driven toppings rail (windowed)
   ============================================================ */
.byo{position:relative;height:260vh;background:var(--band-matcha)}
/* vine layer for this section: above .byo-sticky's backdrop, below the copy (z-index:2).
   Clipped by the sticky's overflow:hidden, so the vines hang INTO the section. */
/* the soft hole behind the headline block is punched in the canvas itself
   (vines.js, data-hole) — a CSS mask on a layer that repaints every frame costs
   an extra compositing pass. */
.byo-vines{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.byo-sticky{position:sticky;top:0;height:100vh;min-height:600px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(26px,4.5vh,54px);
  background:radial-gradient(125% 92% at 50% 30%, #F5F9EC 0%, var(--band-matcha) 62%)}
/* padding-INLINE only — this is also a .container, and a `padding` shorthand
   here would drop its side gutters (same trap as .footer-grid) */
.byo-head{text-align:center;max-width:820px;margin:0 auto;position:relative;z-index:2;
  padding-block:0;padding-inline:max(24px,var(--cpad))}
.byo .eyebrow{text-align:center}
.byo-title{font-family:var(--font-serif);font-weight:800;color:var(--green);
  font-size:clamp(2.7rem,7vw,5.8rem);line-height:1.02;letter-spacing:-1.5px;margin:4px 0 14px}
.byo-title em{font-family:var(--font-script);font-style:normal;font-weight:700;color:var(--berry);
  font-size:1.12em;padding:0 .06em;text-shadow:0 6px 22px rgba(159,25,77,.18)}
.byo-sub{color:var(--muted);font-size:1.1rem;max-width:560px;margin:0 auto}
/* the rail is a fixed-width WINDOW (caps width) so only a few toppings show at
   once on any screen — the strip is panned through it by scroll (see app.js) */
.byo-rail{width:min(1080px,92vw);overflow:hidden;position:relative;z-index:2;
  /* a 10% fade was far shorter than one topping (up to 300px in a 1080px rail),
     so the item entering the window was still fully opaque when the rail edge
     sliced it in half. The fade now spans a whole item width, which is what makes
     the strip read as panning rather than as cut-off content. */
  --rail-fade:linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,.10) 8%, rgba(0,0,0,.42) 18%, #000 32%,
    #000 68%, rgba(0,0,0,.42) 82%, rgba(0,0,0,.10) 92%, transparent 100%);
  -webkit-mask-image:var(--rail-fade);
          mask-image:var(--rail-fade)}
.byo-track{display:flex;align-items:flex-end;gap:clamp(30px,3.2vw,60px);width:max-content;
  padding:18px clamp(60px,12vw,200px);will-change:transform}
.topping{flex:0 0 auto;width:clamp(190px,24vw,300px);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:16px}
.topping-img{position:relative;width:100%}
/* two shadows ground each bowl: a tight dark core right under the foot (contact)
   plus a wide soft pool around it — one mid-strength ellipse alone left the bowls
   reading as if they hovered a hand's width above the band */
.topping-img::after{content:"";position:absolute;left:50%;bottom:2.5%;transform:translateX(-50%);
  width:66%;height:16px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(37,56,23,.34) 0%,rgba(47,70,29,.16) 45%,transparent 74%);
  filter:blur(4px);z-index:-1}
.topping-img img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 8px 12px rgba(47,70,29,.18));
  transition:transform .4s cubic-bezier(.2,.8,.25,1)}
.topping:hover .topping-img img{transform:translateY(-12px) scale(1.05)}
.topping h4{font-family:var(--font-sans);font-weight:800;color:var(--green);
  font-size:1.05rem;letter-spacing:.005em}
.byo-progress{width:min(280px,60vw);height:4px;border-radius:4px;background:rgba(47,70,29,.14);
  overflow:hidden;position:relative;z-index:2}
.byo-progress i{display:block;height:100%;width:8%;border-radius:4px;
  background:linear-gradient(90deg,var(--green),var(--berry));transition:width .1s linear}
.byo-hint{display:flex;align-items:center;justify-content:center;gap:11px;
  color:var(--muted);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  position:relative;z-index:2}
.byo-hint .ic{width:15px;height:15px;color:var(--berry)}
@media(max-width:600px){
  .byo{height:220vh}
  .topping{width:60vw}
  .byo-track{gap:22px;padding:14px 16vw}
}
@media(prefers-reduced-motion:reduce){
  .byo{height:auto}
  .byo-sticky{position:static;height:auto;min-height:0;padding:clamp(60px,8vw,110px) 0}
  .byo-rail{overflow-x:auto}
  .byo-track{transform:none!important}
}

/* ============================================================
   TESTIMONIALS + INSTAGRAM
   ============================================================ */
.stars{display:flex;gap:3px;color:var(--gold)}
.stars svg{width:16px;height:16px}

/* --- Google rating summary --- */
.greviews-head{
  display:flex;align-items:center;justify-content:center;gap:18px 30px;flex-wrap:wrap;
  margin:26px auto 34px;padding:20px 32px;max-width:780px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.gr-glogo-lg{width:46px;height:46px;flex:none}
.gr-score{display:flex;flex-direction:column;align-items:flex-start;gap:6px;line-height:1}
/* line-height 1 clipped the comma of "5,0" straight onto the star row */
.gr-num{font-family:var(--font-serif);font-weight:800;font-size:2.3rem;color:var(--ink);line-height:1.1}
.gr-score .stars svg{width:19px;height:19px}
.gr-count{font-size:.86rem;color:var(--muted);margin-top:3px}
.gr-count b{color:var(--ink);font-weight:800}
.gr-cta{padding:11px 22px;font-size:.9rem}

/* --- review cards (masonry) --- */
.greviews-grid{columns:3;column-gap:18px}
.gr-card{
  break-inside:avoid;margin:0 0 18px;
  background:var(--card);border:1px solid #F0E8DA;border-radius:var(--radius);
  padding:20px 20px 21px;box-shadow:var(--shadow-sm);
  transition:transform .3s ease,box-shadow .3s ease;
}
.gr-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.gr-top{display:flex;align-items:center;gap:12px}
.gr-avatar{
  width:44px;height:44px;flex:none;border-radius:50%;
  display:grid;place-items:center;background:var(--a,var(--berry));
  color:#fff;font-weight:800;font-size:1.12rem;line-height:1;
  box-shadow:0 4px 12px rgba(47,70,29,.16);
}
.gr-id{flex:1;min-width:0}
.gr-id b{display:block;color:var(--ink);font-size:.96rem;line-height:1.2}
.gr-meta{font-size:.76rem;color:var(--muted)}
.gr-glogo{width:20px;height:20px;flex:none}
.gr-rate{display:flex;align-items:center;gap:10px;margin:14px 0 9px}
.gr-date{font-size:.78rem;color:var(--muted)}
.gr-quote{font-size:.92rem;color:var(--ink);line-height:1.6}


/* ============================================================
   LOCATION
   ============================================================ */
.loc-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:24px;align-items:stretch}

/* ---- shop duo: arched interior shot + circular inset, one shared hover ---- */
.shopduo{grid-column:1/-1;position:relative;margin:0 0 6px;
  padding-bottom:clamp(52px,5vw,74px)}
.sd-arch{position:relative;overflow:hidden;box-shadow:var(--shadow);
  height:clamp(320px,40vw,560px);
  border-radius:clamp(160px,26vw,340px) clamp(160px,26vw,340px) var(--radius-lg) var(--radius-lg)}
.sd-arch img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;
  transition:transform 1s cubic-bezier(.2,.8,.25,1)}
/* slow diagonal light sweep on hover */
.sd-sheen{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.30) 50%,transparent 66%);
  transform:translateX(-38%);transition:opacity .5s ease,transform 1.1s ease}
.sd-round{position:absolute;left:clamp(18px,4vw,64px);bottom:0;
  width:clamp(150px,17vw,238px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  border:7px solid var(--cream);box-shadow:var(--shadow);
  transition:transform .55s cubic-bezier(.2,.8,.25,1),box-shadow .55s ease}
.sd-round img{width:100%;height:100%;object-fit:cover;object-position:60% 30%;
  transition:transform 1s cubic-bezier(.2,.8,.25,1)}
.sd-badge{position:absolute;right:clamp(16px,3vw,42px);bottom:clamp(58px,6vw,86px);
  width:clamp(76px,8vw,108px);aspect-ratio:1;border-radius:50%;
  background:rgba(251,244,236,.96);display:grid;place-items:center;box-shadow:var(--shadow);
  transition:transform .55s cubic-bezier(.2,.8,.25,1)}
.sd-badge .logo{width:86%;height:86%;object-fit:contain}
.sd-cap{position:absolute;left:calc(clamp(18px,4vw,64px) + clamp(160px,18vw,252px));
  bottom:clamp(14px,1.6vw,26px);color:var(--muted);font-weight:700;
  font-size:clamp(.86rem,1.1vw,1rem);letter-spacing:.01em}
.shopduo:hover .sd-arch img{transform:scale(1.05)}
.shopduo:hover .sd-round{transform:translateY(-12px) scale(1.05)}
.shopduo:hover .sd-round img{transform:scale(1.06)}
.shopduo:hover .sd-badge{transform:translateY(-6px) rotate(-6deg)}
.shopduo:hover .sd-sheen{opacity:1;transform:translateX(38%)}
.loc-info{display:flex;flex-direction:column;justify-content:center}
.loc-info h2{font-size:clamp(1.7rem,2.7vw,2.2rem);color:var(--green);font-weight:800;line-height:1.14;margin-bottom:22px}
.loc-row{display:flex;gap:14px;margin-bottom:20px}
.loc-row .ic{flex:none;width:38px;height:38px;border-radius:11px;background:var(--cream-2);display:grid;place-items:center;color:var(--berry)}
.loc-row .ic svg{width:18px;height:18px}
.loc-row b{display:block;color:var(--ink)}
.loc-row span{color:var(--muted);font-size:.93rem}
.loc-map{display:block;position:relative;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);min-height:300px;height:clamp(300px,24vw,400px);background:#EDEAE2;
  transition:box-shadow .3s ease,transform .3s ease}
.loc-map:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.loc-map .map-svg{width:100%;height:100%;display:block;transition:transform .5s ease}
.loc-map:hover .map-svg{transform:scale(1.03)}
.loc-map .map-pin{
  position:absolute;top:42%;left:50%;transform:translate(-50%,-100%);color:var(--berry);z-index:2;
}
.loc-map .map-pin svg{position:relative;width:40px;height:40px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.map-pulse{position:absolute;left:50%;bottom:2px;width:16px;height:16px;border-radius:50%;
  transform:translateX(-50%);background:var(--berry);opacity:.5;
  animation:mapPulse 2.2s ease-out infinite}
@keyframes mapPulse{0%{transform:translateX(-50%) scale(.6);opacity:.55}
  70%{transform:translateX(-50%) scale(2.8);opacity:0}100%{opacity:0}}
.loc-map .route-btn{position:absolute;right:18px;bottom:18px;z-index:2}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--green);color:#D9DDCC;position:relative;overflow:hidden;margin-top:10px}
/* corner foliage reads as leaves standing IN the footer's shade: darkened toward
   the ground colour at moderate opacity, instead of a pale translucent print */
.footer-leaf{position:absolute;pointer-events:none;opacity:.32;width:clamp(240px,21vw,400px);
  filter:brightness(.55) saturate(.8) drop-shadow(0 12px 22px rgba(0,0,0,.35))}
/* the two plants live in the footer at z-index auto, i.e. above its green but
   BELOW .footer-grid (z-index 1) — they show through the empty areas and never
   compete with the text, at any width. Rooted at the bottom edge, so they grow
   out of the page rather than hover in it. */
.footer-plant{position:absolute;bottom:calc(var(--fpw) * -0.08);pointer-events:none;
  --fpw:clamp(110px,11vw,190px);width:var(--fpw);height:auto;
  /* a physical plant is opaque — the old 50% let the green ground bleed through
     the stems, the classic pasted-ghost tell. Presence comes from being darker
     (standing in the footer's shade), not from being see-through. */
  opacity:.85;filter:brightness(.78) saturate(.82) drop-shadow(0 14px 22px rgba(0,18,6,.45))}
.fp-l{left:clamp(120px,13vw,300px)}
.fp-r{right:clamp(120px,13vw,300px);scale:-1 1}
.footer-leaf.l{left:-5%;bottom:-22%}
.footer-leaf.r{right:-5%;bottom:-22%;scale:-1 1}
/* NB: this element is also a .container — use padding-BLOCK only. A `padding`
   shorthand here wins on source order and wipes the container's side padding,
   which put the whole footer flush against the viewport edges. */
.footer-grid{position:relative;z-index:5;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px;
  padding-block:clamp(74px,7vw,124px) 30px}
.footer-brand .flogo{width:120px;height:120px;margin-bottom:8px}
.footer-brand p{font-size:.9rem;opacity:.8;max-width:240px}
.footer h5{font-family:var(--font-sans);color:#fff;font-weight:800;font-size:1.02rem;margin-bottom:18px}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.footer a:hover{color:#fff}
.footer .fcontact li{display:flex;align-items:center;gap:11px;font-size:.92rem}
.footer .fcontact .ic{color:#A9C08A}
.footer .fcontact .ic svg{width:16px;height:16px}
.footer .flinks li{font-size:.92rem}
/* ---- social links in the top bar ---- */
.nav-social{display:flex;gap:4px;margin-left:16px;padding-left:16px;position:relative}
.nav-social::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:24px;background:var(--line)}
.nav-social a{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  color:var(--green);transition:background .25s ease,color .25s ease,transform .25s ease}
.nav-social a svg{width:25px;height:25px}
.nav-social a:hover{background:var(--cream-2);transform:translateY(-2px)}
.nav-social a:first-child:hover{color:var(--berry)}

.socials{display:flex;gap:12px;margin-bottom:16px}
.socials a{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.1);display:grid;place-items:center;
  transition:background .25s ease,transform .25s ease}
.socials a:hover{background:var(--berry);transform:translateY(-3px)}
.socials svg{width:26px;height:26px;color:#fff}

/* ============================================================
   SOCIAL SECTION (instagram + tiktok, house-drawn marks)
   ============================================================ */
.social{text-align:center}
.social-title{font-size:clamp(2rem,4vw,3.1rem);color:var(--green);font-weight:800;line-height:1.06;margin:6px 0 14px}
.social-sub{color:var(--muted);max-width:600px;margin:0 auto;font-size:1.03rem}
.social-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px);
  max-width:920px;margin:clamp(30px,4vw,48px) auto 0}
.soc{display:flex;align-items:center;gap:clamp(14px,1.6vw,20px);text-align:left;
  padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);border-radius:var(--radius-lg);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .38s cubic-bezier(.2,.8,.25,1),box-shadow .38s ease,border-color .38s ease}
.soc:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:transparent}
.soc-ic{flex:none;width:clamp(54px,5.4vw,68px);aspect-ratio:1;border-radius:20px;
  display:grid;place-items:center;color:var(--green);background:var(--cream-2);
  transition:background .38s ease,color .38s ease,transform .38s cubic-bezier(.2,.8,.25,1)}
.soc-ic svg{width:64%;height:64%}
.soc:hover .soc-ic{color:#fff;transform:rotate(-6deg) scale(1.05)}
.soc-ig:hover .soc-ic{background:linear-gradient(140deg,#F4C84B,var(--berry) 62%,#7B2A6B)}
.soc-tt:hover .soc-ic{background:linear-gradient(140deg,#2F461D,#123018)}
.soc-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.soc-txt b{font-family:var(--font-serif);font-size:clamp(1.15rem,1.6vw,1.4rem);color:var(--green);font-weight:800}
.soc-txt span{color:var(--muted);font-size:.94rem;overflow:hidden;text-overflow:ellipsis}
.soc-go{width:20px;height:20px;margin-left:auto;flex:none;color:var(--berry);
  transition:transform .38s cubic-bezier(.2,.8,.25,1)}
.soc:hover .soc-go{transform:translateX(6px)}
.fhandle{font-size:.92rem;opacity:.9}
.fhandle .tag{display:block;opacity:.6;margin-top:4px}
.footer-bottom a{color:inherit;text-decoration:underline;text-underline-offset:3px;opacity:.9}
.footer-bottom a:hover{opacity:1}
.footer-bottom{position:relative;z-index:5;border-top:1px solid rgba(255,255,255,.12);
  padding:18px clamp(20px,4vw,48px);text-align:center;font-size:.82rem;opacity:.6}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ---------- tablet ---------- */
@media(max-width:980px){
  .hero{height:150vh}
  .hero-sticky{min-height:84vh}
  .hero-scrim{background:
    linear-gradient(168deg,
      rgba(252,242,238,.97) 0%,
      rgba(250,235,231,.87) 40%,
      rgba(249,234,238,.58) 66%,
      rgba(249,234,238,.30) 100%),
    linear-gradient(0deg, rgba(159,25,77,.12) 0%, rgba(159,25,77,0) 34%);}
  .hero-copy{max-width:none;text-align:left;margin-inline:0}
  .hero .lead{margin-inline:0}
  .hero-actions,.hero-badges{justify-content:flex-start}
  .hero-float.hf-tl{--fw:54vw;opacity:.32}
  .hero-float.hf-br{display:none}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .feature + .feature::before{display:none}
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .cards-3{grid-template-columns:1fr}
  .scard{max-width:640px;width:100%;margin-inline:auto}
  .greviews-grid{columns:2}
  .loc-grid{grid-template-columns:1fr}
  .sd-arch{height:clamp(300px,52vw,420px)}
  .social-cards{grid-template-columns:1fr;max-width:520px}
  .footer-grid{grid-template-columns:1fr 1fr}
}

/* ---------- mobile nav drawer ----------
   Breakpoint is 1180px, not 900: the horizontal bar (links + socials + CTA)
   needs ~1145px, so between 901 and 1180 the links wrapped onto a second line
   and the "Besuche uns" button was pushed off the right edge. */
@media(max-width:1180px){
  .burger{display:flex}
  .nav-collapse{position:fixed;top:0;right:0;bottom:0;width:min(84vw,360px);
    height:100vh;height:100dvh;background:var(--cream);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:96px 26px 36px;overflow-y:auto;
    transform:translateX(102%);transition:transform .38s cubic-bezier(.4,0,.2,1);
    box-shadow:-26px 0 70px rgba(20,40,15,.20);z-index:60}
  body.nav-open .nav-collapse{transform:translateX(0)}
  .nav-collapse .nav-links{flex-direction:column;gap:2px;margin:0;width:100%}
  .nav-collapse .nav-links a{display:block;padding:15px 8px;font-size:1.18rem;
    border-bottom:1px solid var(--line)}
  .nav-collapse .nav-links a.active::after{display:none}
  .nav-cta{display:inline-flex;margin-top:24px;justify-content:center;font-size:1.05rem;padding:15px 24px}
  .nav-collapse .nav-social{justify-content:center;gap:14px;margin:26px 0 0;padding-left:0}
  .nav-collapse .nav-social::before{display:none}
  .nav-collapse .nav-social a{width:54px;height:54px;background:var(--cream-2)}
  .nav-collapse .nav-social a svg{width:28px;height:28px}
  .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(18,30,14,.45);
    opacity:0;visibility:hidden;transition:.38s;z-index:55}
  body.nav-open .nav-backdrop{opacity:1;visibility:visible}
  body.nav-open{overflow:hidden}
}

/* ---------- phone ---------- */
@media(max-width:600px){
  .nav{height:64px}
  .brand .logo{width:50px;height:50px}
  .hero{height:auto;min-height:0}
  /* content pinned to the upper zone over a strong top scrim; the hero_mobile
     video's bowls stay clean+visible in the lower zone (padding-bottom) */
  /* taller hero + a scrim that clears earlier, so the video gets a real, clearly
     visible band at the bottom instead of a sliver under a near-opaque wash */
  .hero-sticky{position:relative;height:auto;min-height:104vh;align-items:flex-start}
  .hero-inner{padding-top:34px;padding-bottom:min(62vw,340px)}
  .hero-scrim{background:linear-gradient(180deg,
    rgba(251,244,236,.98) 0%,
    rgba(251,244,236,.94) 26%,
    rgba(251,244,236,.62) 46%,
    rgba(251,244,236,.14) 66%,
    rgba(251,244,236,0) 82%)!important}
  .hero-kicker{margin-bottom:16px}
  .hero h1{font-size:clamp(2.1rem,8.5vw,2.9rem)}
  .hero .lead{font-size:1.02rem;margin:16px 0 24px;max-width:none}
  .hero-actions{width:100%;gap:10px}
  .hero-actions .btn{flex:1 1 auto;justify-content:center}
  .hero-badges{gap:9px 16px;margin-top:22px}
  .hero-badge{font-size:.82rem}
  .scroll-cue{bottom:18px}
  .section-head{flex-wrap:wrap;gap:12px}
  .section-head .section-link,.section-head .btn{margin-top:2px}
  /* bowls read as a swipe rail on a phone, not a tall stack. Both rows bleed to
     the screen edges by cancelling the container padding, so the next card peeks
     in at the right — that peek is the affordance, no arrows needed. */
  .cards-4,.cards-3{
    display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--cpad));padding:2px var(--cpad) 10px;
    scrollbar-width:none;max-width:none}
  .cards-4::-webkit-scrollbar,.cards-3::-webkit-scrollbar{display:none}
  .cards-4 > *{flex:0 0 74%;scroll-snap-align:center}
  .cards-3 > *{flex:0 0 86%;scroll-snap-align:center;max-width:none;margin-inline:0}
  .features-grid{grid-template-columns:1fr}
  .greviews-grid{columns:1}
  .greviews-head{gap:14px;padding:18px 22px}
  .gr-num{font-size:2rem}
  .footer-grid{grid-template-columns:1fr;text-align:left}
  .scard{grid-template-columns:1fr}
  .scard .scard-media{min-height:210px;order:-1}
  .scard .scard-body{padding:22px}
  .loc-map{min-height:240px}
  .sd-cap{display:none}                 /* no room next to the inset on phones */
  .sd-badge{width:64px;bottom:auto;top:16px;right:14px}
  .shopduo{padding-bottom:44px}
  .footer-grid{gap:30px;padding-block:64px 28px}
  .footer h5{margin-bottom:14px}
  .footer-brand .flogo{width:104px;height:104px}
  .footer-bottom{padding:16px 0;line-height:1.5}
  /* footer foliage: keep visible at the bottom corners on phones */
  /* the footer is single-column on a phone, so every left-hand position sits on
     text. Decor here has to stay small and low or it turns into a thicket:
     the leaves were 52vw each and the bamboo 37vw — together wider than the screen. */
  .footer-leaf{width:min(24vw,108px);opacity:.22}
  .footer-plant{--fpw:min(8.5vw,38px);opacity:.6}
  /* at 260px on a 390px screen the section leaves covered two thirds of the
     width and read as a flat green block rather than foliage */
  .deco-leaf{--lw:clamp(150px,40vw,215px);opacity:.34}
  .deco-leaf.sm{--lw:clamp(110px,28vw,155px);opacity:.36}
  .fp-l{left:3vw}
  .fp-r{right:3vw}
  .footer-leaf.l{left:-12%;bottom:-2%}
  .footer-leaf.r{right:-12%;bottom:-2%}
}

/* ---------- small phone ---------- */
@media(max-width:400px){
  .container{--cpad:20px}
  .hero h1{font-size:clamp(1.9rem,9vw,2.5rem)}
  .hero-badges{gap:8px 14px}
  .byo-title{font-size:clamp(2.3rem,13vw,3rem)}
  .greviews-head{flex-direction:column;text-align:center}
  .gr-score{align-items:center}
}

/* ============================================================
   LOGO IMAGES (real brand mark)
   ============================================================ */
.brand .logo{width:60px;height:60px;object-fit:contain}
.loc-photo .logo-badge .logo{width:90px;height:90px;object-fit:contain}
.footer-brand .flogo{width:128px;height:128px;object-fit:contain}

/* ============================================================
   SECTION STACKING (deco leaves behind content)
   ============================================================ */
.section{overflow:hidden}
section > .container{position:relative;z-index:1}

/* ============================================================
   DECO LEAVES (animated / parallax background)
   ============================================================ */
.deco-leaf{position:absolute;z-index:0;pointer-events:none;opacity:.52;
  /* multiply melts the cutouts into each band's paper colour instead of laying a
     translucent photo ON it — the white studio sheen disappears and every leaf
     picks up the cream/sand/rose tint of its section, like a botanical print.
     The grade tames the raw photo saturation to the site's pastel range. */
  mix-blend-mode:multiply;
  filter:saturate(.78) contrast(.92) brightness(1.08);
  /* The bleed past the section edge MUST be a share of the leaf's own size. It
     used to be a percentage of the section (-7%/-15%), which on a 3440px screen
     meant 241px of a leaf that is capped at 480px — half of it gone, and 89% of
     the small ones. calc() over the same clamp keeps it at 16% everywhere. */
  --lw:clamp(260px,27vw,480px);
  --bleed:calc(var(--lw) * -0.16);
  --bx:var(--bleed);--by:var(--bleed);
  width:var(--lw);
  will-change:transform;animation:floaty 9s ease-in-out infinite;
  /* the leaves bleed past the section edge on purpose, but sections clip with
     overflow:hidden — so fade the outer corner out instead of slicing it off.
     All four variants are flips of the same art, which puts the outer corner at
     the LOCAL bottom-left in every case. */
  -webkit-mask-image:linear-gradient(to bottom,#000 66%,transparent 98%),
                     linear-gradient(to right,transparent 2%,#000 30%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to bottom,#000 66%,transparent 98%),
                     linear-gradient(to right,transparent 2%,#000 30%);
          mask-composite:intersect}
/* the new botanical accents sit smaller and fainter than the base leaves so they
   read as texture rather than as a second layer of decoration */
.deco-leaf.sm{--lw:clamp(150px,15vw,270px);opacity:.52;animation-duration:11s;animation-delay:-2.2s}
/* the açaí panicle is near-black fruit — under multiply it darkens much harder
   than foliage, so it runs at LOWER opacity than the leaves, not higher */
.deco-leaf[src*="j_acai"]{opacity:.4}
/* ROOTED: fully clear of the side edge, but the STEM still runs out through the
   horizontal edge. A plant inset on all four sides has a stem ending in mid-air —
   it reads as a floating sticker. Anchoring the stem is what makes it look grown
   rather than pasted, while the foliage itself stays completely visible. */
.deco-leaf.rooted{--bx:clamp(14px,1.6vw,40px);--by:calc(var(--lw) * -0.09)}
.deco-leaf.rooted{-webkit-mask-image:none;mask-image:none}
.deco-leaf.dl-bl{bottom:var(--by);left:var(--bx)}
.deco-leaf.dl-br{bottom:var(--by);right:var(--bx);scale:-1 1;animation-delay:-3s}
.deco-leaf.dl-tl{top:var(--by);left:var(--bx);scale:1 -1;animation-delay:-4.5s}
.deco-leaf.dl-tr{top:var(--by);right:var(--bx);scale:-1 -1;animation-delay:-1.5s}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -11px}}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{opacity:0;transform:translateY(32px);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1) var(--rd,0ms),
             transform .75s cubic-bezier(.2,.7,.2,1) var(--rd,0ms)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   HEADER scrolled state
   ============================================================ */
.site-header{transition:box-shadow .3s ease,background .3s ease}
.site-header.scrolled{box-shadow:0 10px 34px rgba(47,70,29,.10);background:rgba(251,244,236,.96)}

/* ============================================================
   JUNGLE LOADING SCREEN
   ============================================================ */
html.loading,html.loading body{overflow:hidden;height:100%}
.loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(125% 125% at 50% 28%, #21391c 0%, #15280f 46%, #0c1c08 100%);
  transition:opacity .9s ease,visibility .9s ease}
.loader.done{opacity:0;visibility:hidden}
.ldr-glow{position:absolute;width:62vmax;height:62vmax;border-radius:50%;
  background:radial-gradient(circle, rgba(140,200,90,.30), rgba(140,200,90,0) 60%);
  filter:blur(24px);animation:glowpulse 3.2s ease-in-out infinite}
@keyframes glowpulse{0%,100%{transform:scale(.88);opacity:.55}50%{transform:scale(1.12);opacity:1}}

.ldr-leaf{position:absolute;opacity:0;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.4));
  animation:leafIn 1.05s cubic-bezier(.18,.8,.25,1) forwards,
            leafSway 5.5s ease-in-out infinite 1.05s}
@keyframes leafIn{from{opacity:0;translate:var(--fx) var(--fy);scale:.6}
                  to{opacity:.96;translate:0 0;scale:1}}
@keyframes leafSway{0%,100%{rotate:var(--r,0deg)}50%{rotate:calc(var(--r,0deg) + 5deg)}}
.ldr-leaf.p1{width:34vmin;top:-7vmin;left:-7vmin;--r:-18deg;--fx:-80px;--fy:-80px;animation-delay:.05s,1.1s}
.ldr-leaf.p2{width:30vmin;top:-6vmin;right:-7vmin;--r:150deg;--fx:80px;--fy:-80px;animation-delay:.15s,1.2s}
.ldr-leaf.p3{width:30vmin;bottom:-7vmin;left:-6vmin;--r:118deg;--fx:-80px;--fy:80px;animation-delay:.25s,1.3s}
.ldr-leaf.p4{width:28vmin;bottom:-7vmin;right:-6vmin;--r:18deg;--fx:80px;--fy:80px;animation-delay:.35s,1.4s}
.ldr-leaf.p5{width:20vmin;top:34%;left:-8vmin;--r:60deg;--fx:-90px;--fy:0;animation-delay:.45s,1.5s}
.ldr-leaf.p6{width:18vmin;bottom:30%;right:-8vmin;--r:-46deg;--fx:90px;--fy:0;animation-delay:.55s,1.6s}

.spore{position:absolute;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle,#cdeca0,#8fc25a);filter:blur(.4px);opacity:0;
  animation:spore 7s linear infinite}
@keyframes spore{0%{transform:translateY(30px) scale(.6);opacity:0}
  12%{opacity:.9}88%{opacity:.9}100%{transform:translateY(-80vh) scale(1);opacity:0}}
.spore.s1{left:16%;bottom:8%;animation-delay:0s}
.spore.s2{left:34%;bottom:14%;animation-delay:1.4s}
.spore.s3{left:52%;bottom:6%;animation-delay:2.6s}
.spore.s4{left:68%;bottom:12%;animation-delay:.8s}
.spore.s5{left:82%;bottom:9%;animation-delay:3.4s}
.spore.s6{left:46%;bottom:18%;animation-delay:4.6s}

/* slim bamboo growing up from the bottom corners (40-frame animated webp) */
.ldr-bamboo{position:absolute;bottom:0;z-index:1;height:80vh;width:auto;pointer-events:none;
  opacity:0;animation:bambooFade .9s ease .15s forwards;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.5));
  /* source video clipped the tallest cane tip at the frame edge — fade the top
     so the cut blends softly into the dark loader instead of a hard edge */
  -webkit-mask-image:linear-gradient(to top,#000 90%,transparent 99%);
          mask-image:linear-gradient(to top,#000 90%,transparent 99%)}
.ldr-bamboo.bl{left:4vw}
.ldr-bamboo.br{right:4vw;transform:scaleX(-1)}
@keyframes bambooFade{to{opacity:.97}}
@media(max-width:600px){
  .ldr-bamboo{height:58vh;opacity:0;animation:bambooFade .9s ease .15s forwards}
  .ldr-bamboo.bl{left:-6vw}
  .ldr-bamboo.br{right:-6vw}
}

/* tall decorative bamboo rising from the very bottom of the page, framing the
   edges. z-index 4 keeps it above the page bands but BELOW the footer's own
   columns (z-index 5) — it used to draw straight over the logo and copy. */
.page-bamboo{position:absolute;left:0;right:0;bottom:0;height:0;z-index:4;pointer-events:none}
/* sized by WIDTH now: the new asset carries real foliage and is 2.7x wider in
   proportion than the old bare crop, so driving it off 126vh would have made it
   ~590px wide. Width-driven keeps the silhouette honest and nothing gets cropped
   to force it thin; the top fade lets the culms end softly instead of snapping. */
.pb{position:absolute;bottom:0;width:clamp(190px,21vh,330px);height:auto;opacity:.92;
  /* near-opaque + toned down: real culms at the page edge, not a translucent
     overlay — the wash-out came from opacity, not from the asset */
  filter:saturate(.82) brightness(1.02) drop-shadow(0 12px 26px rgba(18,42,10,.28));
  -webkit-mask-image:linear-gradient(to top,#000 76%,transparent 99%);
          mask-image:linear-gradient(to top,#000 76%,transparent 99%)}
.pb-l{left:-2vh}
.pb-r{right:-2vh;transform:scaleX(-1)}
@media(max-width:600px){
  .pb{width:clamp(96px,13vh,150px);opacity:.72}
  .pb-l{left:-2.4vh}
  .pb-r{right:-2.4vh}
}

.ldr-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:24px;
  animation:centerIn 1s .25s both}
@keyframes centerIn{from{opacity:0;scale:.82}to{opacity:1;scale:1}}
.ldr-logo{width:min(42vmin,230px);filter:drop-shadow(0 16px 44px rgba(0,0,0,.5));
  animation:logoFloat 3.6s ease-in-out infinite}
@keyframes logoFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
.ldr-bar{width:210px;height:5px;border-radius:6px;background:rgba(255,255,255,.16);overflow:hidden}
.ldr-bar i{display:block;height:100%;width:0;border-radius:6px;
  background:linear-gradient(90deg,#9bd36a,#e9b53d);
  box-shadow:0 0 14px rgba(155,211,106,.7);
  animation:barfill 2.35s cubic-bezier(.4,0,.2,1) forwards}
@keyframes barfill{0%{width:0}72%{width:84%}100%{width:100%}}
.ldr-tagline{color:#d3e3bf;font-family:var(--font-sans);font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;font-size:.72rem}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
  .deco-leaf,.hero-float,.ldr-leaf,.ldr-logo,.ldr-glow,.spore,.ldr-bamboo,
  .map-pulse,.scroll-cue .wheel,.ldr-bar i{animation:none!important}
  .ldr-bamboo{opacity:.97!important}
  html{scroll-behavior:auto}
}


/* ============================================================
   BOWL CARDS — transparent cutouts on a tinted "plate" (2026-09-03)
   The product photos are alpha WebPs now, not square studio shots: each card
   image area paints its own soft radial plate in the bowl's colour family, a
   contact shadow under the cup, and the cutout sits on top with a drop shadow.
   ============================================================ */
.pcard-img.cut{--pt1:#F5EAD8;--pt2:#EAD9BF;
  background:radial-gradient(120% 90% at 50% 92%,var(--pt2) 0%,var(--pt1) 52%,#FFFDF9 100%)}
.pcard-img.cut::before{content:"";position:absolute;left:50%;top:50%;width:80%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-48%);
  background:radial-gradient(circle,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 70%)}
.pcard-img.cut::after{content:"";position:absolute;left:50%;bottom:7.5%;width:58%;height:14px;border-radius:50%;
  transform:translateX(-50%);filter:blur(4px);
  background:radial-gradient(ellipse at center,rgba(40,50,30,.30) 0%,rgba(40,50,30,.12) 48%,transparent 74%)}
.pcard-img.cut img{position:relative;z-index:1;object-fit:contain;padding:9% 13% 11%;
  filter:drop-shadow(0 14px 16px rgba(47,70,29,.16));
  transition:transform .55s cubic-bezier(.2,.8,.25,1)}
.pcard:hover .pcard-img.cut img{transform:translateY(-8px) scale(1.04)}
.tint-berry{--pt1:#F9E6EC;--pt2:#F0CBD8}
.tint-matcha{--pt1:#EDF3E2;--pt2:#D7E5C1}
.tint-sand{--pt1:#F7EBD6;--pt2:#ECD7B2}
.tint-ocean{--pt1:#E6F3F5;--pt2:#CBE4E9}
.pcard-meta{font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.02em;line-height:1.35;max-width:72%}

/* ============================================================
   SIGNATURE BOWLS — pinned 360° scroll showcases (2026-09-03)
   ============================================================ */
.sig{position:relative;background:var(--band-sand);padding-top:clamp(78px,7vw,140px)}
.sig-head{text-align:center;position:relative;z-index:1;padding-bottom:clamp(44px,5vw,76px)}
.sig-head h2{font-size:clamp(1.9rem,3.3vw,2.6rem);color:var(--green);font-weight:800;line-height:1.1}
.sig-intro{color:var(--muted);font-size:1.05rem;margin-top:12px}
/* NO overflow:hidden on .sig / .sig-panel — sticky needs the page as scrollport.
   Only the 100vh stage clips (blob + giant word bleed inside it). */
.sig-panel{position:relative;height:230vh}
.sig-sticky{position:sticky;top:0;height:100vh;min-height:620px;overflow:hidden;
  display:flex;align-items:center;
  --sig-bg:#E3F0F2;--sig-bg2:#F1F7F8;--sig-ink:#1D5461;--sig-accent:#2B8A9C;
  --sig-blob:#BEDFE5;--sig-word:rgba(43,138,156,.085);--sig-prev:var(--band-sand)}
.sig-panel.pitaya .sig-sticky{--sig-bg:var(--band-rose);--sig-bg2:#FDF3F6;--sig-ink:#7E1443;--sig-accent:#C2276C;
  --sig-blob:#F4C3D6;--sig-word:rgba(194,39,108,.075);--sig-prev:#E3F0F2}
/* soft hand-over from the previous band at the top edge instead of a hard cut */
.sig-sticky::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--sig-prev) 0%,var(--sig-bg2) 14%,var(--sig-bg) 100%)}
.sig-blob{position:absolute;width:min(80vh,740px);aspect-ratio:1;right:4%;top:50%;translate:0 -50%;
  border-radius:46% 54% 52% 48%/58% 44% 56% 42%;filter:blur(2px);opacity:.95;
  background:radial-gradient(circle at 40% 35%,#fff 0%,var(--sig-blob) 58%,transparent 71%);
  animation:blobMorph 16s ease-in-out infinite;will-change:border-radius}
.sig-panel.pitaya .sig-blob{right:auto;left:4%;animation-delay:-6s}
@keyframes blobMorph{0%,100%{border-radius:46% 54% 52% 48%/58% 44% 56% 42%;rotate:0deg}
  50%{border-radius:54% 46% 44% 56%/44% 56% 46% 54%;rotate:10deg}}
.sig-word{position:absolute;left:50%;top:50%;translate:-50% -50%;pointer-events:none;
  font-family:var(--font-serif);font-weight:900;font-size:clamp(8rem,26vw,30rem);line-height:1;
  letter-spacing:-.04em;white-space:nowrap;color:var(--sig-word);will-change:transform}
.sig-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(24px,4vw,80px);width:100%;
  /* --sig-exit: 1 while the panel is pinned, 0 once it is pushed out by the next
     one — otherwise the leaving panel's button/bowl sit half-cut above the fold */
  opacity:var(--sig-exit,1)}
.sig-panel.pitaya .sig-copy{order:2}
.sig-copy{max-width:560px}
.sig-panel.pitaya .sig-copy{justify-self:end}
.sig-kicker{display:flex;align-items:center;gap:12px;font-weight:800;font-size:.76rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sig-accent)}
.sig-tag{background:var(--sig-accent);color:#fff;border-radius:999px;padding:4px 11px;font-size:.66rem;letter-spacing:.14em}
.sig-title{font-family:var(--font-serif);font-weight:800;color:var(--sig-ink);
  font-size:clamp(3rem,6.2vw,5.4rem);line-height:.98;letter-spacing:-.02em;margin:16px 0 10px}
.sig-title em{font-family:var(--font-script);font-style:normal;font-weight:700;color:var(--sig-accent);
  font-size:1.02em;display:block;padding-left:.38em;text-shadow:0 8px 26px rgba(0,0,0,.08)}
.sig-sub{font-weight:800;color:var(--sig-ink);letter-spacing:.05em;font-size:1.02rem;margin-bottom:22px;opacity:.82}
.sig-ingr{list-style:none;display:grid;gap:9px;margin-bottom:26px}
.sig-ingr li{display:flex;align-items:baseline;gap:12px;padding:10px 16px;border-radius:14px;
  background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transform:translateX(-22px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.sig-panel.pitaya .sig-ingr li{transform:translateX(22px)}
.sig-ingr li.on{opacity:1;transform:none}
.sig-ingr li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--sig-accent);translate:0 -1px}
.sig-ingr strong{color:var(--sig-ink);font-weight:800;font-size:.96rem;white-space:nowrap}
.sig-ingr span{color:var(--muted);font-size:.84rem}
.sig-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.sig-note{font-weight:800;font-size:.76rem;color:var(--sig-ink);opacity:.7;letter-spacing:.1em;text-transform:uppercase}
.sig-stage{position:relative;display:flex;justify-content:center;align-items:flex-end;height:min(78vh,760px)}
/* the poster (frame 0) defines the box; the canvas is laid over it and takes over
   once the sequence is decoded — no layout jump, no aspect-ratio bookkeeping */
.sig-cup{position:relative;height:100%;max-width:100%;z-index:2;
  filter:drop-shadow(0 26px 28px rgba(29,84,97,.22))}
.sig-panel.pitaya .sig-cup{filter:drop-shadow(0 26px 28px rgba(126,20,67,.22))}
.sig-cup img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;transition:opacity .35s}
.sig-cup canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .35s}
.sig-cup.ready canvas{opacity:1}
.sig-cup.ready img{opacity:0}
.sig-shadow{position:absolute;left:50%;bottom:-1.5%;width:54%;height:26px;border-radius:50%;translate:-50% 0;
  filter:blur(6px);z-index:1;
  background:radial-gradient(ellipse at center,rgba(29,84,97,.30),rgba(29,84,97,.10) 50%,transparent 74%)}
.sig-panel.pitaya .sig-shadow{background:radial-gradient(ellipse at center,rgba(126,20,67,.30),rgba(126,20,67,.10) 50%,transparent 74%)}
.sig-hint{position:absolute;right:2%;bottom:5%;display:flex;align-items:center;gap:9px;z-index:3;
  font-weight:800;font-size:.7rem;letter-spacing:.22em;color:var(--sig-accent)}
.sig-hint i{width:30px;height:30px;border-radius:50%;border:2px solid var(--sig-accent);position:relative;
  animation:spin360 4.5s linear infinite}
.sig-hint i::after{content:"";position:absolute;top:-4px;left:50%;width:6px;height:6px;border-radius:50%;
  background:var(--sig-accent);translate:-50% 0}
@keyframes spin360{to{rotate:360deg}}

/* ============================================================
   BUILD YOUR BOWL — second, counter-panning rail (fruits & toppings)
   ============================================================ */
.byo{height:300vh}
.byo-sticky{gap:clamp(16px,2.6vh,36px)}
.byo-title{font-size:clamp(2.5rem,6vw,5rem);margin:4px 0 10px}
.byo-sub{font-size:1.02rem}
.topping{width:clamp(168px,20vw,250px)}
.byo-lab{position:relative;z-index:2;font-weight:800;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--berry);margin-bottom:calc(-1 * clamp(8px,1.6vh,20px))}
.byo-lab span{position:relative;padding:0 14px}
.byo-lab span::before,.byo-lab span::after{content:"";position:absolute;top:50%;width:34px;height:1px;background:rgba(159,25,77,.35)}
.byo-lab span::before{right:100%}
.byo-lab span::after{left:100%}
.byo-track-2{gap:clamp(22px,2.4vw,44px);padding:10px clamp(60px,12vw,200px)}
.topping.sm{width:clamp(118px,12.5vw,168px);gap:8px}
.topping.sm .topping-img img{filter:drop-shadow(0 6px 9px rgba(47,70,29,.16))}
.topping.sm .topping-img::after{height:10px;width:60%;bottom:1%}
.topping.sm h4{font-size:.8rem;letter-spacing:.01em}
.topping.sm:hover .topping-img img{transform:translateY(-8px) scale(1.06)}
@media(max-height:760px){
  .byo-sub{display:none}
  .byo-title{font-size:clamp(2.2rem,4.5vw,3.4rem);margin-bottom:0}
  .topping{width:clamp(150px,17vw,210px)}
}

/* ---------- tablet / phone ---------- */
@media(max-width:980px){
  .sig-grid{grid-template-columns:1fr;gap:6px;align-content:center}
  .sig-panel.pitaya .sig-copy{order:0;justify-self:center}
  .sig-stage{order:-1;height:min(42vh,420px)}
  .sig-copy{max-width:600px;text-align:center;margin:0 auto}
  .sig-kicker{justify-content:center}
  .sig-title{font-size:clamp(2.5rem,10vw,3.8rem);margin:10px 0 4px;line-height:1}
  .sig-title em{display:inline;padding:0}
  .sig-sub{margin-bottom:14px;font-size:.92rem}
  .sig-ingr{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
  .sig-ingr li{padding:9px 10px;flex-direction:column;align-items:center;text-align:center;gap:1px;
    transform:translateY(14px)}
  .sig-panel.pitaya .sig-ingr li{transform:translateY(14px)}
  .sig-ingr li::before{display:none}
  .sig-ingr strong{font-size:.86rem;white-space:normal}
  .sig-ingr span{font-size:.72rem}
  .sig-actions{justify-content:center;gap:12px}
  .sig-blob{width:min(64vw,420px);right:50%;translate:50% -50%;top:26%}
  .sig-panel.pitaya .sig-blob{left:auto;right:50%}
  .sig-word{font-size:24vw;top:24%}
  .sig-hint{right:6px;bottom:2px}
  .sig-panel{height:200vh}
  .sig-sticky{min-height:0}
}
@media(max-width:600px){
  .topping{width:52vw}
  .topping.sm{width:33vw;gap:6px}
  .byo-track-2{gap:16px;padding:8px 12vw}
  .byo-lab{font-size:.6rem}
  .sig-ingr li:nth-child(n+5) span{display:none}
}
@media(prefers-reduced-motion:reduce){
  .sig-panel{height:auto}
  .sig-sticky{position:static;height:auto;min-height:0;padding:clamp(60px,8vw,110px) 0}
  .sig-ingr li{opacity:1;transform:none}
  .sig-blob,.sig-hint i{animation:none}
  .sig-cup canvas{display:none}
  .sig-cup.ready img{opacity:1}
}

/* ---------- fit pass (2026-09-03): the sticky header covers the top ~78px of
   every pinned stage, so both pinned sections reserve that strip instead of
   centring into it — the toppings headline used to sit under the nav bar once
   the second rail pushed the stack taller than the viewport. ---------- */
.byo-sticky{padding-top:72px;gap:clamp(12px,2vh,26px)}
.byo-head{max-width:760px}
.byo-title{font-size:clamp(2.3rem,5vw,4.2rem);margin:2px 0 8px}
.byo-sub{font-size:.98rem;max-width:620px}
.topping{width:clamp(150px,17vw,220px)}
.topping.sm{width:clamp(104px,11vw,150px)}
.byo-track{padding:14px clamp(60px,12vw,200px)}
.byo-track-2{padding:8px clamp(60px,12vw,200px)}
.sig-sticky{padding-top:64px}
.sig-stage{height:min(72vh,720px)}
/* Laptop heights: the pinned signature copy (the pitaya panel carries six
   ingredients) grew taller than the 100vh stage, so its CTA was cut off at the
   bottom edge — measured overshoot was 9px at 768, 43px at 700, 64px at 640.
   The copy tightens in two steps instead of the stage getting shorter. */
@media(max-height:820px){
  .sig-title{font-size:clamp(2.4rem,5vw,3.6rem);margin:10px 0 6px}
  .sig-sub{margin-bottom:13px;font-size:.95rem}
  .sig-ingr{gap:6px;margin-bottom:16px}
  .sig-ingr li{padding:7px 14px}
}
@media(max-height:760px){
  .byo-sub{display:none}
  .byo-title{font-size:clamp(2rem,4vw,3rem);margin-bottom:0}
  .topping{width:clamp(130px,15vw,190px)}
  .topping.sm{width:clamp(92px,10vw,130px)}
  .sig-stage{height:min(66vh,620px)}
  .sig-title{font-size:clamp(2.1rem,4.4vw,3.1rem);margin:6px 0 4px}
  .sig-sub{margin-bottom:10px;font-size:.9rem}
  .sig-ingr{gap:4px;margin-bottom:13px}
  .sig-ingr li{padding:5px 13px}
  .sig-ingr strong{font-size:.9rem}
  .sig-ingr span{font-size:.8rem}
}
@media(max-height:700px){
  /* last resort before the button would clip: the descriptions go, the
     ingredient names stay */
  .sig-ingr span{display:none}
  .sig-ingr{margin-bottom:11px}
  .sig-stage{height:min(60vh,540px)}
}
@media(max-width:980px){
  .sig-sticky{padding-top:56px}
  .sig-stage{height:min(40vh,400px)}
}
@media(max-width:600px){
  /* a phone rail is only ~360px wide, so the fade needs a bigger share of it to
     swallow the half item at each edge */
  .byo-rail{--rail-fade:linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,.10) 10%, rgba(0,0,0,.40) 22%, #000 38%,
    #000 62%, rgba(0,0,0,.40) 78%, rgba(0,0,0,.10) 90%, transparent 100%)}
  .byo-sticky{padding-top:60px}
  .topping{width:46vw}
  .topping.sm{width:30vw}
}
@media(max-width:600px){
  .byo-sub{display:none}
  .byo-hint{font-size:.62rem;letter-spacing:.12em;padding:0 24px}
  .byo-lab{margin-bottom:0}
}
/* vines keep clear of both product rails on desktop (hole via data-hole-for) and
   stay out of the toppings section entirely on tablets/phones — they ran straight
   through the granola row on a 390px screen (2026-09-04) */
.byo-vines{display:none}


/* ============================================================
   MOBILE PASS (2026-09-04)
   ============================================================ */
/* 1. no sideways wiggle: the off-canvas drawer (translated 102 % to the right)
   and the bamboo at the page edges extended the scrollable width to ~2x the
   viewport. `clip` cuts the overflow WITHOUT turning html/body into scroll
   containers (which `hidden` does — that is what broke scrollTo in headless and
   what iOS ignores on body alone); `hidden` stays as the fallback for old engines. */
html,body{overflow-x:hidden;overflow-x:clip}
/* 2. pinned stages measure the DYNAMIC viewport on phones, so the progress bar
   and the 360° hint are not hidden behind Safari's bottom toolbar */
.sig-sticky,.byo-sticky{height:100dvh}
@media(max-width:600px){.sig-sticky,.byo-sticky{min-height:0}}
/* 3. legible small type (nothing under ~11.5 px) */
.sig-tag{font-size:.72rem;padding:4px 12px}
.sig-hint{font-size:.76rem}
.byo-lab{font-size:.72rem}
@media(max-width:600px){
  .byo-lab{font-size:.66rem}
  .byo-hint{font-size:.68rem;letter-spacing:.1em}
  .sig-ingr span{font-size:.76rem}
  .sig-note{font-size:.74rem}
}
/* 4. comfortable tap targets for the text links (were 20–24 px tall) */
.section-link{padding-block:8px}
.site-footer ul a,.footer ul a{display:inline-block;padding-block:6px}
@media(max-width:600px){
  .site-footer ul a{padding-block:8px}
  .add-btn{width:44px;height:44px}
}
/* 5. hover lifts stick after a tap on touch screens — keep them for pointers only */
@media(hover:none){
  .pcard:hover{transform:none;box-shadow:var(--shadow-sm)}
  .pcard:hover .pcard-img img,.pcard:hover .pcard-img.cut img{transform:none}
  .topping:hover .topping-img img,.topping.sm:hover .topping-img img{transform:none}
  .add-btn:hover{transform:none;background:var(--green)}
  .btn:hover{transform:none}
  .section-link:hover,.scard .s-link:hover{gap:7px}
}
/* 6. landscape phones: a 100vh stage is ~350 px tall there — unpin both scroll
   stages and lay them out statically (the JS switches to viewport progress) */
@media(max-width:980px) and (max-height:520px){
  .sig-panel{height:auto}
  .sig-sticky{position:static;height:auto;min-height:0;padding:56px 0 40px}
  .sig-grid{grid-template-columns:1fr 1fr;gap:20px}
  .sig-stage{order:0;height:min(80vh,360px)}
  .sig-panel.pitaya .sig-copy{order:2}
  .sig-copy{text-align:left}
  .sig-kicker,.sig-actions{justify-content:flex-start}
  .byo{height:auto}
  .byo-sticky{position:static;height:auto;min-height:0;padding:64px 0 40px}
  .byo-rail{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .byo-track{transform:none!important;padding-inline:24px}
}
/* 7. small phones (≤ 360): tighter rails and titles */
@media(max-width:360px){
  .container{--cpad:18px}
  .sig-title{font-size:clamp(2.2rem,11vw,2.8rem)}
  .sig-ingr{gap:6px}
  .sig-ingr li{padding:8px 8px}
  .topping{width:50vw}
  .topping.sm{width:34vw}
  .pcard-body{padding:16px 14px 18px}
  .hero-actions .btn{padding-inline:16px}
}
/* 8. short phones (<= 640 px tall, e.g. iPhone SE): both pinned stages overflowed
   their 100vh — trim the copy and shrink the rails so everything stays inside */
.byo-lab{text-align:center;max-width:88vw}
@media(max-width:600px) and (max-height:640px){
  .byo .eyebrow,.byo-hint{display:none}
  .byo-sticky{gap:10px;padding-top:58px}
  .byo-title{font-size:2rem;margin:0}
  .topping{width:40vw;gap:6px}
  .topping.sm{width:26vw;gap:4px}
  .topping h4{font-size:.86rem}
  .topping.sm h4{font-size:.7rem}
  .byo-lab{font-size:.6rem;margin-bottom:0}
  .sig-sticky{padding-top:52px}
  .sig-stage{height:min(30vh,240px)}
  .sig-title{font-size:2.1rem;margin:6px 0 2px}
  .sig-sub{display:none}
  .sig-ingr{gap:6px;margin-bottom:12px}
  .sig-ingr li{padding:7px 6px}
  .sig-ingr span{display:none}
  .sig-ingr li:nth-child(n+5){display:none}
  .sig-actions .btn{padding:11px 18px;font-size:.92rem}
}
@media(max-width:360px){
  .byo-lab span::before,.byo-lab span::after{display:none}
  .byo-lab{font-size:.6rem;line-height:1.5}
}

/* ============================================================
   SPEISEKARTE — full menu with prices + coffee
   ============================================================ */
.menu-head{margin-bottom:16px}
.menu-intro{color:var(--muted);max-width:660px;margin:0 0 34px;font-size:1.06rem}
.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,28px);align-items:start}
.menu-card{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(22px,2.6vw,34px);box-shadow:var(--shadow-sm)}
.menu-card.wide{grid-column:1 / -1}
.mc-head{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.mc-head h3{font-family:var(--font-serif);font-weight:800;color:var(--green);font-size:1.5rem;line-height:1}
.mc-ic{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--band-matcha);color:var(--green)}
.mc-ic svg{width:22px;height:22px}
.mc-price{margin-left:auto;font-weight:800;color:var(--berry);font-size:.98rem;white-space:nowrap}
.m-list{list-style:none;display:flex;flex-direction:column;gap:11px}
.m-list.tight{gap:8px}
.m-row{display:flex;align-items:baseline;gap:7px}
.m-name{font-weight:700;color:var(--ink)}
.m-name em{font-style:normal;font-weight:600;color:var(--muted);font-size:.9em}
.m-dots{flex:1 1 auto;min-width:16px;align-self:center;height:0;border-bottom:2px dotted var(--line)}
.m-price{font-weight:800;color:var(--berry);white-space:nowrap}
/* inline "Neu" flag on a menu row — same berry pill as the card badge, shrunk
   so it rides along the item name instead of competing with the price */
.m-new{display:inline-block;background:var(--berry);color:#fff;border-radius:40px;
  padding:2px 9px;margin-left:8px;font-size:.62rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;vertical-align:middle;translate:0 -1px}
.m-sub{font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-soft);margin:18px 0 9px}
.m-tags{display:flex;flex-wrap:wrap;gap:8px}
.m-tag{background:var(--band-matcha);color:var(--green);border-radius:40px;
  padding:6px 13px;font-size:.86rem;font-weight:700;line-height:1.2}
.m-tag em{font-style:normal;color:var(--berry);font-weight:800}
.m-note{color:var(--muted);font-size:.92rem;margin-top:14px}
.m-note em{font-style:italic;font-size:.86em}
.byo-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px);margin-top:6px}
.byo-cols > div > .m-sub:first-child{margin-top:8px}
.mc-badge{position:absolute;top:16px;right:16px;background:var(--berry);color:#fff;
  font-weight:800;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 12px;border-radius:40px;box-shadow:0 6px 16px rgba(159,25,77,.28)}
.coffee-card{background:linear-gradient(160deg,#ffffff,#FBF1E7);border-color:#EBD9C6}
.coffee-card .mc-ic{background:#F1E1D0;color:#6B4A2F}
.coffee-card .m-tag{background:#F1E1D0;color:#6B4A2F}
.vegan-card .mc-ic{background:#E7F1D8;color:var(--green-soft)}
.menu-legend{color:var(--muted);font-size:.8rem;margin-top:26px;text-align:center}
@media(max-width:760px){
  .menu-grid{grid-template-columns:1fr}
  .byo-cols{grid-template-columns:1fr}
}

/* ---- Build-your-Bowl rails on phones/tablets: drop the pinned scroll-jack
        (was a 220vh section panning two rails sideways as you scrolled — felt
        bad on touch) and lay the cremes, fruits & toppings out as a plain
        wrapping grid you just scroll past normally ---- */
@media(max-width:768px){
  .byo{height:auto}
  .byo-vines{display:none}
  .byo-sticky{position:static;height:auto;min-height:0;overflow:visible;
    padding:clamp(58px,10vw,84px) 0;gap:20px;background:var(--band-matcha)}
  /* two side-by-side rows the visitor swipes, not a stack you scroll past:
     each rail keeps its own horizontal scroller and lays its items out in TWO
     rows, so a phone shows a compact block instead of one endless column */
  .byo-rail,.byo-rail-2{width:100%;max-width:none;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    cursor:grab;touch-action:pan-x pan-y pinch-zoom;scroll-snap-type:x proximity}
  .byo-rail::-webkit-scrollbar,.byo-rail-2::-webkit-scrollbar{height:0;display:none}
  .byo-track,.byo-track-2{transform:none!important;display:grid;grid-auto-flow:column;
    grid-template-rows:repeat(2,auto);width:max-content;
    gap:clamp(14px,3.4vw,22px);padding:2px clamp(16px,5vw,26px)}
  .byo-track .topping{width:42vw;max-width:220px;scroll-snap-align:center}
  .byo-track-2 .topping{width:32vw;max-width:170px;scroll-snap-align:center}
  .byo-progress{display:none}
  .byo-hint{display:flex}
}
/* ---- Build-your-Bowl on desktop (>768px): drop the scroll-jacked auto-pan and
        lay the two rails out side by side as plain horizontal scrollers the
        visitor moves themselves (wheel / trackpad / drag). No pin, no auto-pan. ---- */
@media(min-width:769px){
  .byo{height:auto}
  .byo-sticky{position:static;height:auto;min-height:0;overflow:visible;
    padding:clamp(80px,9vh,130px) 0;gap:clamp(22px,3.4vh,44px)}
  .byo-rail,.byo-rail-2{overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding-inline:12vw;
    /* the bar is hidden, so the cursor has to say "you can pull this" */
    cursor:grab;touch-action:pan-x pan-y pinch-zoom}
  .byo-rail.is-dragging,.byo-rail-2.is-dragging{cursor:grabbing;user-select:none;scroll-behavior:auto}
  .byo-rail.is-dragging *,.byo-rail-2.is-dragging *{pointer-events:none}
  .byo-rail:focus-visible,.byo-rail-2:focus-visible{outline:2px solid var(--berry);outline-offset:4px;border-radius:12px}
  .byo-rail::-webkit-scrollbar,.byo-rail-2::-webkit-scrollbar{height:0;display:none}
  .byo-track,.byo-track-2{transform:none!important;will-change:auto}
  .byo-progress{display:none}
}


/* ============================================================
   LEGAL PAGES (Impressum) — plain reading layout on the house palette:
   no pinned sections, no motion, one column that stays readable at 100 %
   browser zoom. Header is the site header in its "scrolled" state.
   ============================================================ */
body.legal{background:var(--cream)}
.legal-page{padding:calc(88px + clamp(28px,4vw,60px)) 0 clamp(60px,7vw,110px);
  background:linear-gradient(180deg,var(--band-sand) 0%,var(--cream) 42%)}
.legal-inner{max-width:820px}
.legal-page h1{font-family:var(--font-serif);font-size:clamp(2.2rem,4.6vw,3.4rem);
  font-weight:800;color:var(--green);line-height:1.05;margin:6px 0 14px;letter-spacing:-.02em}
.legal-lead{color:var(--muted);font-size:1.05rem;margin-bottom:clamp(28px,3.4vw,44px)}
.legal-block{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(18px,2.2vw,28px);margin-bottom:14px;box-shadow:var(--shadow-sm)}
.legal-block h2{font-family:var(--font-sans);font-size:.82rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--berry);margin-bottom:10px}
.legal-block p{color:var(--ink);font-size:.98rem;line-height:1.7}
.legal-block p + p{margin-top:12px}
.legal-block a{color:var(--berry);font-weight:700;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.legal-block a:hover{color:var(--berry-d)}
/* the open fields are meant to be impossible to miss while the page is a draft */
.legal-todo{background:var(--band-rose);border-left:3px solid var(--berry);
  border-radius:0 10px 10px 0;padding:11px 14px;font-size:.9rem;color:var(--berry-d);font-weight:600}
.legal-todo-inline{background:var(--band-rose);color:var(--berry-d);font-weight:700;
  border-radius:6px;padding:1px 7px}
.legal-note{margin:22px 0 26px;font-size:.86rem;color:var(--muted);font-style:italic}
.legal-back{display:inline-flex}
.legal-footer{padding:0}
.legal-footer .footer-bottom{border-top:0}
.legal-footer a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media(max-width:600px){
  .legal-page{padding-top:calc(72px + 26px)}
  .legal-block{padding:16px}
}

/* ---- printed café boards inside the menu section. They are the same three
   sheets that hang in the shop, so they get a paper treatment (white edge,
   soft shadow, slight lift on hover) rather than sitting flush like UI. ---- */
.menu-sheets{margin-top:clamp(22px,3vw,38px)}
.sheets-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.sheets-head .m-sub{margin:0}
.sheets-note{font-size:.8rem;color:var(--muted)}
.sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
.sheet{position:relative;display:block;padding:10px 10px 0;border:0;cursor:zoom-in;
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  transition:transform .35s cubic-bezier(.2,.8,.25,1),box-shadow .35s}
.sheet:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.sheet img{width:100%;height:auto;border-radius:12px;display:block}
.sheet-cap{display:block;padding:11px 4px 13px;font-weight:800;font-size:.86rem;
  color:var(--green);text-align:center;letter-spacing:.01em}
.sheet:focus-visible{outline:2px solid var(--berry);outline-offset:3px}
@media(max-width:980px){.sheet-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.sheet-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}

/* lightbox — one shared overlay, opened from any sheet */
.lb{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(14px,3vw,40px);
  background:rgba(24,36,16,.86);opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}
.lb.open{opacity:1;visibility:visible}
.lb img{max-width:min(880px,100%);max-height:100%;width:auto;height:auto;border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);transform:scale(.97);transition:transform .3s cubic-bezier(.2,.8,.25,1)}
.lb.open img{transform:scale(1)}
.lb-close{position:absolute;top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);
  width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--green);
  font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.lb-close:hover{background:#fff}
@media(prefers-reduced-motion:reduce){.lb,.lb img,.sheet{transition:none}}


/* ============================================================
   BOWL SHOWCASE (2026-09-04)
   The bowls are cut-outs standing free on the band — no card, no plate. The
   copy is NOT under each bowl any more, it lives in one panel below the stage
   and swaps with the selection. On a phone the row becomes a stack: the active
   bowl in front, its two neighbours faded behind it, swipe to switch.
   ============================================================ */
.bowlshow{--bs-h:clamp(280px,30vw,430px);position:relative;z-index:1}
.bs-stage{position:relative;display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(6px,1.6vw,30px);height:var(--bs-h);touch-action:pan-y;
  -webkit-user-select:none;user-select:none}
.bs-bowl{flex:1 1 0;min-width:0;height:100%;position:relative;
  display:flex;align-items:flex-end;justify-content:center;
  padding:0;border:0;background:none;cursor:pointer;transform-origin:bottom center;
  opacity:.44;transform:scale(.8);filter:saturate(.82);
  transition:opacity .5s ease,transform .55s cubic-bezier(.2,.8,.25,1),filter .5s ease}
.bs-bowl img{width:100%;height:100%;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 18px 20px rgba(47,70,29,.18));pointer-events:none}
/* ground shadow scales with the bowl, so stepping back reads as depth not as fog */
.bs-bowl::after{content:"";position:absolute;left:50%;bottom:-4px;translate:-50% 0;
  width:58%;height:18px;border-radius:50%;z-index:-1;filter:blur(6px);opacity:.45;
  background:radial-gradient(ellipse at center,rgba(40,50,30,.32),rgba(40,50,30,.10) 52%,transparent 76%);
  transition:opacity .5s ease}
.bs-bowl.on{opacity:1;transform:scale(1);filter:none}
.bs-bowl.on::after{opacity:1}
.bs-bowl:focus-visible{outline:2px solid var(--berry);outline-offset:6px;border-radius:16px}
@media(hover:hover){.bs-bowl:not(.on):hover{opacity:.7;transform:scale(.85)}}

.bs-controls{display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,2vw,22px);margin-top:clamp(18px,2.4vw,26px);position:relative;z-index:2}
.bs-arrow{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(255,255,255,.86);color:var(--green);
  cursor:pointer;transition:background .22s,color .22s,border-color .22s,transform .22s}
.bs-arrow:hover{background:var(--green);color:#fff;border-color:var(--green);transform:translateY(-2px)}
.bs-arrow .ic{width:18px;height:18px}
.bs-dots{display:flex;align-items:center;gap:9px}
.bs-dot{width:9px;height:9px;flex:none;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(47,70,29,.22);transition:background .28s,width .28s,border-radius .28s}
.bs-dot.on{background:var(--berry);width:28px;border-radius:6px}

/* the panel below — one grid cell, the active entry cross-fades in */
.bs-panel{display:grid;max-width:720px;margin:clamp(16px,2.2vw,26px) auto 0}
.bs-info{grid-area:1/1;text-align:center;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .42s ease,transform .42s cubic-bezier(.2,.8,.25,1),visibility .42s}
.bs-info.on{opacity:1;visibility:visible;transform:none}
.bs-kicker{font-weight:800;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--berry)}
.bs-info h3{font-family:var(--font-serif);font-size:clamp(1.7rem,3vw,2.4rem);color:var(--green);
  font-weight:800;margin:8px 0 10px;line-height:1.1}
.bs-desc{color:var(--muted);font-size:1.02rem;line-height:1.6;max-width:560px;margin:0 auto}
.bs-foot{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,22px);
  flex-wrap:wrap;margin-top:20px}
.bs-meta{font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green);opacity:.7;max-width:260px;text-align:left;line-height:1.5}

@media(max-width:760px){
  .bowlshow{--bs-h:clamp(250px,60vw,340px)}
  /* stack: absolute children, the two neighbours peek out past the gutters */
  .bs-stage{display:block;overflow:hidden;margin-inline:calc(-1 * var(--cpad))}
  .bs-bowl{position:absolute;left:50%;top:0;bottom:0;width:56%;margin-left:-28%;
    height:auto;flex:none;filter:none;
    --tx:0;--sc:.6;--op:0;--z:0;
    opacity:var(--op);z-index:var(--z);transform:translateX(var(--tx)) scale(var(--sc))}
  .bs-bowl.on{--tx:0;--sc:1;--op:1;--z:3}
  .bs-bowl.is-prev{--tx:-54%;--sc:.72;--op:.4;--z:2}
  .bs-bowl.is-next{--tx:54%;--sc:.72;--op:.4;--z:2}
  .bs-bowl.is-far{pointer-events:none}
  .bs-bowl img{filter:drop-shadow(0 14px 16px rgba(47,70,29,.20))}
  .bs-bowl::after{width:52%;height:14px}
  .bs-meta{text-align:center;max-width:none}
  .bs-foot{gap:14px;margin-top:16px}
  .bs-desc{font-size:.96rem}
}
@media(max-width:400px){
  .bs-bowl{width:64%;margin-left:-32%}
  .bs-bowl.is-prev{--tx:-58%}
  .bs-bowl.is-next{--tx:58%}
}
@media(prefers-reduced-motion:reduce){
  .bs-bowl,.bs-info{transition:none}
}

/* ============================================================
   VEGAN MARKER (2026-09-04) — cremes, fruits & toppings
   ============================================================ */
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.vg{position:absolute;top:0;right:3%;z-index:3;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:var(--green);color:#EAF3DC;
  box-shadow:0 6px 14px rgba(47,70,29,.26)}
.vg svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.topping.sm .vg{width:21px;height:21px}
.topping.sm .vg svg{width:11px;height:11px}
.byo-legend{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  position:relative;z-index:2;font-size:.8rem;color:var(--muted);text-align:center;
  margin:0 auto;padding-inline:16px}
.byo-legend em{font-style:normal;opacity:.72}
.vg-key{position:static;width:22px;height:22px;box-shadow:none}
.vg-key svg{width:12px;height:12px}
@media(max-width:600px){
  .vg{width:24px;height:24px}
  .vg svg{width:13px;height:13px}
  .topping.sm .vg{width:19px;height:19px}
  .byo-legend{font-size:.72rem;gap:6px}
}

/* ============================================================
   RAIL BASELINE FIX — a two-line label used to push its bowl up, so
   "Weiße Schoko-Creme" floated a line higher than its neighbours.
   A fixed two-line label box puts every bowl back on one ground line.
   ============================================================ */
.topping h4{line-height:1.25;min-height:2.5em}

/* ============================================================
   MENU SHEETS — cut-outs, no white card behind them
   ============================================================ */
.sheet{background:none;box-shadow:none;padding:0;border-radius:0}
.sheet:hover{box-shadow:none;transform:translateY(-6px)}
.sheet img{border-radius:0;filter:drop-shadow(0 16px 22px rgba(47,70,29,.20))}
.sheet-cap{padding-top:14px}

/* showcase polish: on desktop all four bowls stay appetising — the step-back is
   carried by scale and the dots, not by washing the others out. The phone stack
   keeps the stronger fade because there the neighbours overlap the active bowl. */
@media(min-width:761px){
  .bs-bowl{opacity:.56;transform:scale(.84)}
  @media(hover:hover){.bs-bowl:not(.on):hover{opacity:.8;transform:scale(.88)}}
}
/* the copy panel now reaches into the corner where this section's leaf sits */
@media(max-width:760px){
  #favoriten .deco-leaf.dl-bl{opacity:.18}
}


/* ============================================================
   TOPPINGS & SAUCES AS VERTICAL LISTS (2026-09-04)
   One item per row, read top to bottom — identical on phone and desktop.
   This replaces the two horizontal rails: sideways scrolling hid items.
   ============================================================ */
.byo{height:auto}
.byo-lists{width:100%;max-width:620px;margin-inline:auto;position:relative;z-index:2;
  display:flex;flex-direction:column;gap:clamp(30px,4vw,52px)}
.byo-gtitle{display:flex;align-items:center;gap:14px;margin-bottom:8px;
  font-family:var(--font-sans);font-weight:800;font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--berry)}
.byo-gtitle::before,.byo-gtitle::after{content:"";height:1px;flex:1;background:rgba(159,25,77,.26)}
.tlist{list-style:none;margin:0;padding:0}
.titem{display:flex;align-items:center;gap:clamp(12px,2vw,18px);
  padding:8px 10px;border-radius:14px;border-bottom:1px solid rgba(47,70,29,.10);
  transition:background .25s ease}
.titem:last-child{border-bottom:0}
@media(hover:hover){.titem:hover{background:rgba(255,255,255,.55)}}
.titem-img{flex:none;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 62%,#fff 0%,rgba(255,255,255,.4) 68%,transparent 100%)}
.titem-img img{width:100%;height:100%;object-fit:contain;padding:5px;
  filter:drop-shadow(0 4px 6px rgba(47,70,29,.14))}
.titem-name{flex:1;min-width:0;font-weight:800;color:var(--green);font-size:1.02rem;line-height:1.3}
/* the leaf sits in the row, so it must drop the rail's absolute placement */
.vg-row{position:static;flex:none;width:26px;height:26px}
.vg-row svg{width:14px;height:14px}
@media(max-width:600px){
  .byo-lists{gap:26px}
  .titem{padding:7px 4px;gap:13px}
  .titem-img{width:54px;height:54px}
  .titem-name{font-size:.95rem}
  .vg-row{width:23px;height:23px}
  .vg-row svg{width:12px;height:12px}
}

/* ============================================================
   COFFEE — small section for the new offering
   ============================================================ */
.coffee-wrap{display:grid;grid-template-columns:.8fr 1fr;align-items:center;
  gap:clamp(20px,5vw,72px);position:relative;z-index:1}
.coffee-media{position:relative;display:flex;justify-content:center}
.coffee-media img{width:100%;max-width:min(300px,30vw);height:auto;
  filter:drop-shadow(0 22px 26px rgba(47,70,29,.22))}
.coffee-media::after{content:"";position:absolute;left:50%;bottom:-6px;translate:-50% 0;
  width:min(200px,20vw);height:20px;border-radius:50%;filter:blur(7px);z-index:-1;
  background:radial-gradient(ellipse at center,rgba(40,50,30,.30),rgba(40,50,30,.10) 52%,transparent 76%)}
.coffee-copy h2{font-family:var(--font-serif);font-size:clamp(1.9rem,3.3vw,2.6rem);
  color:var(--green);font-weight:800;line-height:1.1;margin:6px 0 14px}
.coffee-lead{color:var(--muted);font-size:1.04rem;line-height:1.6;max-width:520px}
.coffee-tags{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 12px;padding:0}
.coffee-tags li{background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;font-weight:700;font-size:.86rem;color:var(--green)}
.coffee-note{font-size:.86rem;color:var(--muted);margin-bottom:22px}
@media(max-width:760px){
  .coffee-wrap{grid-template-columns:1fr;text-align:center;gap:14px}
  .coffee-media img{max-width:min(196px,50vw)}
  .coffee-media::after{width:120px}
  .coffee-tags{justify-content:center;gap:8px}
  .coffee-tags li{padding:7px 13px;font-size:.8rem}
  .coffee-lead{margin-inline:auto;font-size:.98rem}
}

/* ============================================================
   SCROLL-SCRUBBED FRAME SEQUENCE (2026-09-04)
   Alpha frames keyed out of a green-screen clip; app.js swaps the frame with
   scroll position. The poster is the finished bowl, so a JS-less or
   reduced-motion visitor sees the product rather than food mid-air.
   ============================================================ */
.scrub{position:relative;width:min(360px,64vw);margin:0 auto clamp(6px,1.6vw,18px);
  z-index:2;pointer-events:none}
.scrub img,.scrub canvas{display:block;width:100%;height:auto}
.scrub canvas{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}
.scrub img{transition:opacity .35s ease}
.scrub canvas{transition:opacity .35s ease}
.scrub.ready canvas{opacity:1}
.scrub.ready img{opacity:0}
/* the bowl rests on the band instead of floating over it */
.scrub::after{content:"";position:absolute;left:50%;bottom:1.5%;translate:-50% 0;
  width:46%;height:16px;border-radius:50%;filter:blur(6px);z-index:-1;
  background:radial-gradient(ellipse at center,rgba(40,50,30,.26),rgba(40,50,30,.09) 52%,transparent 76%)}
@media(max-width:600px){.scrub{width:min(280px,72vw)}}

/* ============================================================
   COFFEE — price rows in the site's menu style
   ============================================================ */
.coffee-list{margin:20px 0 0;max-width:420px}
.coffee-list + .m-sub{margin-top:18px}
.coffee-copy .m-sub{color:var(--berry)}
.coffee-copy .btn{margin-top:22px}
@media(max-width:760px){
  .coffee-list{margin-inline:auto;text-align:left}
  .coffee-copy .m-sub{text-align:center}
}