/* ==================================================================
   Paperfish — paperfish.com.my  ·  v2
   Colour, type and ratio from Paperfish Brand Identity & Guidelines
   v1.0 (25 Aug 2026).

   RHYTHM: the page alternates grounds so no two adjacent bands share
   one. Cream still carries the majority of the height; forest, mist,
   sand and green punctuate it; ink appears exactly once, on the craft
   band, which is where the book allows the torched shot to go moody.

   MOTION: everything is a paper fold. Sections unfold on entry, the
   hero headline unfolds on load, and section seams are creases.
   ================================================================== */

:root{
  --cream:#F4F2EC;   /* Rice Cream  · primary ground              */
  --mist:#E8F1E1;    /* Leaf Mist   · secondary ground            */
  --green:#4DAA50;   /* Paperfish Green · the brand               */
  --forest:#235326;  /* Forest · headlines & structure            */
  --ink:#293041;     /* Charcoal Ink · body text, ONE dark band   */
  --orange:#EE7A16;  /* Mango Orange · prices & CTAs ONLY         */
  --grabg:#00B14F;   /* Grab green · the Order-on-Grab buttons only */
  --sage:#CDD2C2;
  --sand:#E4D8CF;
  --char:#4A1E19;   /* Maroon #511A1D warmed — the craft band's ground */

  /* cook-style tags — sampled from the printed menu, do not re-tint */
  --raw:#B2475A; --cooked:#CC823A; --torched:#652D22; --seasonal:#AD485B;

  --line:#DEDACB;
  --ink-72:rgba(41,48,65,.76);
  --ink-55:rgba(41,48,65,.70);   /* .58 read 3.48:1 on cream; AA wants 4.5 */
  --cream-80:rgba(244,242,236,.82);
  --cream-55:rgba(244,242,236,.56);

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --text:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --gut:clamp(20px,5vw,64px);
  --sect:clamp(76px,9vw,132px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --r:26px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);
  font-family:var(--text);font-weight:400;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* NO overflow-x here. hidden on one axis computes the other to auto, which
     makes body a scroll container, which detaches the sticky header from the
     viewport - invisible in Chromium, header gone in WebKit. Horizontal
     overflow is caught by tools/qa_fonts.py instead, at ten widths, on every
     run. If it ever reports one, fix the element, not the symptom. */
  background-color:var(--cream);
  /* a whisper of paper under everything — this is a brand called Paperfish */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
}
/* everything real sits above the ambient + swimmer layers */
main,header,footer{position:relative;z-index:1}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
:focus-visible{outline:2.5px solid var(--green);outline-offset:3px;border-radius:6px}

.wrap{width:min(1240px,100% - var(--gut)*2);margin-inline:auto}
.sect{padding-block:var(--sect)}
section[id]{scroll-margin-top:88px}
#catering{padding-bottom:clamp(40px,5vw,64px)}
#next{padding-top:clamp(56px,6vw,88px)}

/* ---------- the grounds ---------- */
.g-cream {background:transparent}
.g-mist  {background:var(--mist)}
.g-sand  {background:var(--sand)}
.g-forest{background:var(--forest);color:var(--cream-80)}
/* soft-edged tint bands: colour arrives and leaves gently, the page stays one paper */
.band-mist {background:linear-gradient(180deg,rgba(232,241,225,0),rgba(232,241,225,.85) 12% 88%,rgba(232,241,225,0))}
.band-sand {background:linear-gradient(180deg,rgba(228,216,207,0),rgba(228,216,207,.62) 12% 88%,rgba(228,216,207,0))}
.band-green{background:linear-gradient(180deg,rgba(77,170,80,0),rgba(77,170,80,.11) 18% 82%,rgba(77,170,80,0))}
.g-green {background:var(--green);color:#fff}
.g-ink   {background:var(--ink);color:var(--cream-80)}
.g-char  {background:var(--char);color:var(--cream-80)}
.g-forest h2,.g-forest h3,.g-ink h2,.g-ink h3,.g-char h2,.g-char h3,.g-green h2,.g-green h3{color:var(--cream)}
.g-forest .eyebrow,.g-ink .eyebrow,.g-char .eyebrow{color:#7ECB80}
.g-forest .eyebrow::before,.g-ink .eyebrow::before{background:var(--green)}
.g-char .eyebrow::before{background:#7ECB80}
.g-green .eyebrow{color:rgba(255,255,255,.9)}
.g-green .eyebrow::before{background:rgba(255,255,255,.9)}
.g-forest .lede,.g-ink .lede,.g-char .lede{color:var(--cream-80)}
.g-green .lede{color:rgba(255,255,255,.9)}

/* a paper crease where two grounds meet — the seam of a fold */
.crease{position:relative;height:0}
.crease::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55) 18%,rgba(255,255,255,.55) 82%,transparent);
}
.crease::after{
  content:"";position:absolute;left:0;right:0;top:1px;height:3px;
  background:linear-gradient(90deg,transparent,rgba(41,48,65,.10) 18%,rgba(41,48,65,.10) 82%,transparent);
  filter:blur(1.5px);
}

/* ---------- type ---------- */
h1,h2,h3{
  font-family:var(--display);font-weight:900;color:var(--forest);
  margin:0;line-height:.99;letter-spacing:-.022em;
  font-optical-sizing:auto;text-wrap:balance;
}
h1{font-size:clamp(46px,7vw,96px);line-height:.94}
h2{font-size:clamp(34px,5vw,68px)}
h3{font-size:clamp(20px,2.1vw,27px);line-height:1.14;letter-spacing:-.012em}

.eyebrow{
  font-weight:900;font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--green);margin:0 0 18px;display:flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:26px;height:2.5px;background:var(--green);border-radius:2px;flex:none}
.eyebrow.plain::before{display:none}

.lede{font-size:clamp(16.5px,1.35vw,19px);color:var(--ink-72);max-width:54ch;
  text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.small{font-size:13.5px;color:var(--ink-55);line-height:1.55}
.price{color:var(--orange);font-weight:900;font-family:var(--display);font-variant-numeric:tabular-nums}

.sect-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.84fr);gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(38px,5vw,64px)}
@media(max-width:860px){.sect-head{grid-template-columns:1fr;align-items:start;gap:18px}}

/* ---------- buttons & tags ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;
  padding:15px 27px;font-weight:900;font-size:13.5px;letter-spacing:.085em;
  text-transform:uppercase;text-decoration:none;border:2px solid transparent;
  transition:transform .28s var(--ease),background .2s,box-shadow .28s var(--ease),color .2s,border-color .2s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 6px 18px -8px rgba(238,122,22,.9)}
.btn-primary:hover{box-shadow:0 14px 28px -12px rgba(238,122,22,.95)}
.btn-grab{
  background:var(--grabg);color:#fff;position:relative;overflow:hidden;
  box-shadow:0 6px 18px -8px rgba(0,177,79,.95);
}
.btn-grab:hover{box-shadow:0 14px 28px -12px rgba(0,177,79,.95)}
/* a light sweep crosses the button every few seconds — alive, not shouty */
.btn-grab::after{
  content:"";position:absolute;top:-40%;bottom:-40%;left:-38%;width:34%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);animation:grabShine 3.8s ease-in-out infinite;
}
@keyframes grabShine{0%,62%{left:-38%}86%,100%{left:138%}}
.pill-grab{border-color:var(--grabg);color:var(--grabg)}
.pill-grab:hover{background:rgba(0,177,79,.09);border-color:var(--grabg)}
.btn-ghost{border-color:var(--forest);color:var(--forest)}
.btn-ghost:hover{background:var(--forest);color:var(--cream)}
.btn-light{border-color:rgba(244,242,236,.5);color:var(--cream)}
.btn-light:hover{background:var(--cream);color:var(--forest);border-color:var(--cream)}
.btn-sm{padding:11px 19px;font-size:12px}

.tag{
  display:inline-block;border-radius:999px;padding:5px 12px;
  font-size:10.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:#fff;
}
.tag-RAW{background:var(--raw)}
.tag-COOKED{background:var(--cooked)}
.tag-TORCHED{background:var(--torched)}
.tag-VEGETARIAN{background:var(--green)}
.tag-SEASONAL{background:var(--seasonal)}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;background:rgba(244,242,236,.88);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s;
}
.hdr.stuck{border-bottom-color:var(--line);box-shadow:0 10px 30px -26px rgba(41,48,65,.6)}
.hdr-in{display:flex;align-items:center;gap:clamp(16px,3vw,44px);height:74px}
.hdr-logo img{height:34px;width:auto}
.nav{display:flex;gap:clamp(14px,2.1vw,30px);margin-left:auto}
.nav a{
  text-decoration:none;font-weight:700;font-size:12.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--forest);padding:6px 0;position:relative;
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--green);transition:right .32s var(--ease)}
.nav a:hover::after{right:0}
@media(max-width:1000px){.nav{display:none}.hdr-in>.btn{margin-left:auto}}

/* ==================================================================
   HERO
   ================================================================== */
.hero{position:relative;overflow:hidden;padding-top:clamp(26px,4vw,52px);padding-bottom:clamp(30px,5vw,64px)}
.hero>*{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,4vw,56px);align-items:center}
.hero h1{margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--green)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:10px}}

/* the trust row — an unknown brand has to say the boring things out loud */
.trust{display:flex;gap:clamp(14px,2.4vw,30px);flex-wrap:wrap;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.trust div{font-size:12.5px;color:var(--ink-55);line-height:1.35}
.trust b{display:block;font-family:var(--display);font-weight:900;font-size:19px;color:var(--forest);letter-spacing:-.01em}

/* THE AMBIENT LAYER — the hero's soft washes, made page-wide and fixed,
   so every viewport of the scroll carries the same fresh light */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(44% 40% at 78% 8%,rgba(77,170,80,.14),transparent 70%),
    radial-gradient(38% 44% at 4% 34%,rgba(232,241,225,.9),transparent 72%),
    radial-gradient(44% 46% at 94% 88%,rgba(228,216,207,.65),transparent 70%);
}
/* the fish swims the whole page — position driven by scroll in app.js */
.swim-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.swim{position:absolute;left:50%;top:14vh;width:clamp(160px,24vw,320px);
  margin-left:clamp(-170px,-13vw,-85px);opacity:.07;will-change:transform}
.swim.s2{width:clamp(90px,12vw,150px);margin-left:clamp(-75px,-6vw,-45px);top:6vh;opacity:.05}

/* ---------- the wheel ---------- */
.wheel-stage{position:relative;width:100%;aspect-ratio:1;max-width:660px;margin-inline:auto;touch-action:pan-y}
.wheel{position:absolute;inset:0;cursor:grab}
.wheel.drag{cursor:grabbing}
.wheel-item{
  position:absolute;top:50%;left:50%;width:25%;aspect-ratio:1;margin:-12.5% 0 0 -12.5%;
  padding:0;transition:filter .5s var(--ease);
}
.wheel-item img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(29,42,28,.2))}
.wheel-item .lvl{width:100%;height:100%;transition:transform .55s var(--ease)}
.wheel-item.on .lvl{transform:scale(1.3)}
.wheel-item:not(.on){filter:saturate(.92) opacity(.88)}
/* bowls arrive one by one, like a counter being laid out */
.wheel-item{animation:layout .7s var(--ease) backwards}
@keyframes layout{from{opacity:0;transform:scale(.72)}}
.wheel-ring{position:absolute;inset:16%;border-radius:50%;border:1px dashed rgba(35,83,38,.18);pointer-events:none}
.wheel-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:40%;pointer-events:none;z-index:1}
.wheel-hub .nm{font-family:var(--display);font-weight:900;color:var(--forest);font-size:clamp(19px,2.3vw,29px);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.wheel-hub .pr{margin-top:7px;font-size:clamp(15px,1.6vw,19px)}
.wheel-hub .tg{margin-top:11px}
.wheel-hub .sub{margin-top:10px;font-size:12.5px;color:var(--ink-55);line-height:1.45}
.wheel-fade{animation:hubIn .45s var(--ease)}
@keyframes hubIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

@media(max-width:760px){
  .wheel-stage{max-width:430px;margin-bottom:clamp(118px,32vw,150px)}
  .wheel-ctl button{width:44px;height:44px}
  .wheel-hub{top:auto;bottom:-10px;transform:translate(-50%,100%);width:96%}
  .wheel-hub .nm{font-size:26px}
  .wheel-hub .sub{font-size:12px}
}

.wheel-ctl{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:6px}
.wheel-ctl button{border:1.5px solid var(--line);border-radius:999px;width:38px;height:38px;display:grid;place-items:center;color:var(--forest);transition:background .2s,border-color .2s}
.wheel-ctl button:hover{background:var(--mist);border-color:var(--green)}
.wheel-hint{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55);font-weight:700}

/* ---------- ticker ---------- */
.ticker{background:var(--forest);color:var(--cream);overflow:hidden;position:relative;
  height:44px;contain:paint}   /* contain keeps the marquee out of the page's layout width */
.ticker-track{display:flex;width:max-content;position:absolute;top:0;left:0;height:100%;
  align-items:center;animation:slide 56s linear infinite}
.ticker span{padding:0 26px;font-size:12.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap;opacity:.92}
.ticker span.hot{color:#fff;opacity:1}
.ticker span.hot b{color:var(--green)}
.ticker span::after{content:"◆";margin-left:26px;color:var(--green);font-size:8px;vertical-align:middle}
@keyframes slide{to{transform:translateX(-50%)}}

/* ==================================================================
   THE EIGHT
   ================================================================== */
.sig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,38px) clamp(14px,2vw,28px)}
@media(max-width:1000px){.sig-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.sig-grid{gap:26px 14px}}
.sig{padding:0;text-align:left;display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:18px}
.sig-img{position:relative;margin:0 0 14px}
.sig-img img{width:100%;transition:transform .6s var(--ease);filter:drop-shadow(0 18px 24px rgba(29,42,28,.15))}
.sig:hover .sig-img img{transform:translateY(-9px) rotate(-5deg) scale(1.04)}
.sig-img .tag{position:absolute;top:2%;right:2%}
.sig-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sig h3{margin-bottom:2px}
.sig .star{color:var(--orange);font-size:13px}
.sig .who{font-size:13px;color:var(--forest);font-weight:700;margin-top:5px}
.sig .in{font-size:12.5px;color:var(--ink-55);line-height:1.5;margin-top:5px}

/* ==================================================================
   CRAFT — the page's one dark band, three cards left to right
   ================================================================== */
.craft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
@media(max-width:900px){
  .craft-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;
    overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);padding-bottom:8px;
    scrollbar-width:none}
  .craft-grid::-webkit-scrollbar{display:none}
  .craft{scroll-snap-align:start}
}
.craft{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 3px 0 rgba(35,83,38,.05);
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.craft:hover{border-color:var(--green);transform:translateY(-4px);box-shadow:0 16px 30px -22px rgba(35,83,38,.45)}
.craft-art{position:relative;aspect-ratio:4/3;overflow:hidden;background:#11131a}
.craft-art img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.craft:hover .craft-art img{transform:scale(1.05)}
.craft-n{
  position:absolute;top:14px;left:14px;z-index:3;font-family:var(--display);font-weight:900;
  font-size:12px;letter-spacing:.1em;color:var(--cream);background:rgba(41,48,65,.62);
  backdrop-filter:blur(6px);border-radius:999px;padding:5px 11px;
}
.craft-body{padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;gap:8px;flex:1}
.craft-body .lb{font-size:10.5px;font-weight:900;letter-spacing:.17em;text-transform:uppercase;color:#7ECB80}
.craft-body h3{color:var(--forest)}
.craft-body p{margin:0;font-size:14.5px;line-height:1.58;color:var(--ink-55);text-align:justify;-webkit-hyphens:auto;hyphens:auto}

/* the photo brings its own flame — all we add is the heat coming off it */
.heat{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(34% 26% at 52% 52%,rgba(238,122,22,.34),transparent 72%);
  animation:breathe 2.8s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.5}to{opacity:1}}
.embers{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.embers i{position:absolute;bottom:38%;width:3px;height:3px;border-radius:50%;
  background:#FFC46B;box-shadow:0 0 6px 2px rgba(238,122,22,.55);opacity:0;
  animation:rise 3.6s ease-out infinite}
.embers i:nth-child(1){left:46%;animation-delay:0s}
.embers i:nth-child(2){left:53%;animation-delay:.7s}
.embers i:nth-child(3){left:49%;animation-delay:1.4s}
.embers i:nth-child(4){left:57%;animation-delay:2.1s}
.embers i:nth-child(5){left:43%;animation-delay:2.8s}
@keyframes rise{
  0%{transform:translateY(0) scale(.6);opacity:0}
  15%{opacity:.95}
  100%{transform:translateY(-120px) translateX(10px) scale(1.1);opacity:0}
}


/* the knife catches the light */
.glint{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.glint::after{
  content:"";position:absolute;top:-40%;left:-60%;width:40%;height:180%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  transform:rotate(14deg);animation:sweep 5.5s ease-in-out infinite}
@keyframes sweep{0%,72%{left:-60%}92%,100%{left:130%}}

/* ==================================================================
   BUILD YOUR OWN
   ================================================================== */
/* this section is a tool, not a story — it gets a compact head */
#build{padding-block:clamp(56px,6vw,88px)}
#build .sect-head{margin-bottom:clamp(24px,3vw,36px);align-items:center}
#build h2{font-size:clamp(30px,3.6vw,48px)}
#build .lede{font-size:clamp(15px,1.15vw,16.5px)}
.build-grid{display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);gap:clamp(22px,3.4vw,52px);align-items:start}
@media(max-width:1000px){.build-grid{grid-template-columns:1fr}}

.bowl-col{position:sticky;top:96px}
.pf-bowl-svg{width:100%;max-width:320px;margin-inline:auto;display:block;filter:drop-shadow(0 26px 26px rgba(29,42,28,.2))}
.pf-piece{animation:drop .42s var(--ease) backwards}
@keyframes drop{from{opacity:0;transform:translateY(-10px) scale(.9);transform-origin:center}to{opacity:1;transform:none}}
.bowl-caption{text-align:center;margin-top:10px}
.bowl-caption .nm{font-family:var(--display);font-weight:900;color:var(--forest);font-size:20px;line-height:1.1}
.bowl-caption .li{font-size:12.5px;color:var(--ink-55);margin-top:5px;min-height:2.6em;line-height:1.35}
.totals{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;background:#fff;border-radius:999px;padding:10px 20px;width:max-content;margin-inline:auto;box-shadow:0 2px 0 rgba(35,83,38,.06)}
.totals .lb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:900;color:var(--ink-55)}
.totals .vl{font-size:23px}

/* phones: the bowl becomes a compact sticky strip, not a screenful */
@media(max-width:1000px){
  .bowl-col{
    position:sticky;top:74px;z-index:20;padding:10px 0 12px;
    margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);
    background:linear-gradient(var(--mist) 82%,rgba(232,241,225,0));
    display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;
  }
  .pf-bowl-svg{width:clamp(96px,26vw,132px);max-width:none;margin:0}
  .bowl-caption{text-align:left;margin-top:0}
  .bowl-caption .li{min-height:0}
  .totals{grid-column:2;margin:8px 0 0;justify-self:start;padding:7px 15px}
  .totals .vl{font-size:19px}
}

/* start-from presets */
.presets{display:flex;gap:7px;margin-bottom:14px;align-items:center;overflow-x:auto;
  padding-bottom:4px;scrollbar-width:none}
.presets::-webkit-scrollbar{display:none}
.presets>*{flex:none}
.presets .lb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:900;color:var(--ink-55);margin-right:2px}
.chip{border:1.5px solid rgba(35,83,38,.22);background:rgba(255,255,255,.62);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:700;color:var(--forest);transition:all .2s}
.chip:hover{background:#fff;border-color:var(--green);transform:translateY(-1px)}

/* the five-step rail, using the brand's own step icons */
.steps-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:16px}
@media(max-width:560px){.steps-nav{grid-template-columns:repeat(5,1fr);gap:4px}}
.stepbtn{
  background:rgba(255,255,255,.55);border-radius:14px;padding:9px 6px 8px;
  display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;
  transition:background .24s var(--ease),box-shadow .24s var(--ease),transform .24s var(--ease);
}
.stepbtn:hover{background:#fff;transform:translateY(-1px)}
.stepbtn.on{background:#fff;box-shadow:0 3px 0 rgba(35,83,38,.09)}
.stepbtn .si{width:26px;height:26px;display:block}
.stepbtn .si path,.stepbtn .si circle,.stepbtn .si rect{fill:var(--sc)}
.stepbtn .tx{font-size:11.5px;font-weight:900;letter-spacing:.03em;color:var(--ink-55);line-height:1}
.stepbtn.on .tx{color:var(--forest)}
.stepbtn .ct{
  font-size:9.5px;font-weight:900;letter-spacing:.06em;color:var(--ink-55);
  background:rgba(41,48,65,.08);border-radius:999px;padding:2px 7px;line-height:1.5;
}
.stepbtn.done .ct{background:var(--green);color:#fff}
@media(max-width:560px){.stepbtn .tx{font-size:10px}.stepbtn .si{width:22px;height:22px}.stepbtn .ct{display:none}}

.panel{background:#fff;border-radius:var(--r);padding:clamp(16px,2vw,24px);box-shadow:0 3px 0 rgba(35,83,38,.05);
  display:flex;flex-direction:column}
/* the panel is a fixed window so the section height stops changing per step */
.panel-scroll{overflow-y:auto;max-height:min(40vh,360px);margin-inline:-4px;padding-inline:4px;scrollbar-width:thin}
@media(max-width:1000px){.panel-scroll{max-height:none;overflow:visible}}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:3px}
.panel-head h3{color:var(--sc,var(--forest))}
.panel-rule{font-size:11.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-55);white-space:nowrap}
.pickr{font-family:var(--text);font-weight:900;font-size:.5em;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-55);vertical-align:.35em;margin-left:2px}
.panel-note{font-size:12.5px;color:var(--ink-55);margin:0 0 14px;line-height:1.45}

/* THE ICON TILES */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:7px}
@media(max-width:420px){.tiles{grid-template-columns:repeat(3,1fr);gap:7px}}
.tile{
  border:1.5px solid var(--line);background:#fff;border-radius:16px;
  padding:9px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;
  text-align:center;position:relative;transition:border-color .18s,transform .18s var(--ease),box-shadow .18s;
}
.tile:hover{border-color:var(--sc,var(--green));transform:translateY(-2px);box-shadow:0 6px 14px -10px rgba(41,48,65,.5)}
.tile .pf-ic,.tile .pf-im{width:40px;height:40px;display:block;flex:none;object-fit:contain}
.tile .nm{font-size:11px;line-height:1.2;color:var(--ink);font-weight:400;text-wrap:balance}
.tile .dl{font-size:10.5px;font-weight:900;color:var(--orange);letter-spacing:.04em}
.tile .bg{position:absolute;top:6px;right:7px;font-size:9.5px;font-weight:900;color:var(--orange)}
.tile.on{border-color:var(--sc,var(--green));border-width:2px;padding:8.5px 5.5px 7.5px;
  background:color-mix(in srgb,var(--sc,var(--green)) 6%,#fff)}
.tile .ck{
  position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;
  background:var(--sc,var(--green));color:#fff;display:none;place-items:center;
  font-size:11px;font-weight:900;box-shadow:0 0 0 3px #fff;
}
.tile.on .ck{display:grid;animation:pop .28s var(--ease)}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.tile.full{opacity:.38;pointer-events:none}
.tile.full:hover{transform:none;border-color:var(--line)}

.tier{margin-top:16px}
.tier:first-of-type{margin-top:2px}
.tier-lb{font-size:11px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-55);margin-bottom:9px;display:flex;align-items:center;gap:9px}
.tier-lb::after{content:"";flex:1;height:1px;background:var(--line)}

.panel-foot{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.panel-foot .sp{flex:1}
.linkbtn{font-size:12.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-55);padding:6px 2px}
.linkbtn:hover{color:var(--forest)}

.done-card{background:var(--forest);color:var(--cream-80);border-radius:var(--r);padding:clamp(20px,2.6vw,30px);margin-top:14px}
.done-card h3{color:var(--cream);margin-bottom:6px}
.done-lines{margin:16px 0 0;padding:0;list-style:none;font-size:13.5px}
.done-lines li{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:8px 0;border-top:1px solid rgba(244,242,236,.16)}
.done-lines .k{font-size:10.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--cream-55);padding-top:3px}
.done-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.saved{font-size:12.5px;color:var(--green);font-weight:700;margin-top:12px;min-height:1.2em}

/* ==================================================================
   STORY
   ================================================================== */
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(26px,5vw,72px);align-items:center}
@media(max-width:900px){.story-grid{grid-template-columns:1fr}}
.story p{margin:18px 0 0;max-width:54ch}
.pull{
  margin:26px 0 0;padding:0 0 0 20px;border-left:3px solid var(--green);
  font-family:var(--display);font-weight:900;font-size:clamp(19px,2vw,25px);
  line-height:1.18;letter-spacing:-.015em;color:var(--forest);max-width:22ch;
}
.story-art{display:flex;flex-direction:column;align-items:center;gap:22px}

/* THE ORIGAMI FOLD
   The mark is cut into five facets radiating from the spine. Each facet is a
   clip-path of the real logo outline, so however they move the silhouette is
   always exactly the Paperfish fish. They swing in around their own crease,
   staggered, and the five greens read as paper catching light at angles.
   Swap this for a Lottie later if a designer animates the real fold. */
.fold{
  position:relative;width:min(340px,74%);aspect-ratio:320/382;
  transform-style:preserve-3d;perspective:900px;
  filter:drop-shadow(0 22px 26px rgba(35,83,38,.22));
}
.fold .fc{position:absolute;inset:0;display:block;backface-visibility:hidden;
  transform-origin:40% 50%;
  transform:rotate3d(var(--ax),var(--ay),0,-116deg);opacity:0}
.fold.go .fc{animation:foldCycle 4.5s var(--ease) infinite;animation-delay:var(--d)}
/* one breath of paper: fold in facet by facet, hold as the fish, fold away, rest */
@keyframes foldCycle{
  0%      {transform:rotate3d(var(--ax),var(--ay),0,-116deg);opacity:0}
  9%,74%  {transform:none;opacity:1}
  84%,100%{transform:rotate3d(var(--ax),var(--ay),0,-116deg);opacity:0}
}

/* the five facets, cut from the real logo outline */
.fc0{clip-path:polygon(91.86% 55.45%,99.69% 48.43%,61.67% 15.33%,40% 50%);background:#5FB962;--ax:0.438;--ay:0.899;--d:0s}
.fc1{clip-path:polygon(58.71% 85.19%,91.86% 55.45%,40% 50%);background:#4DAA50;--ax:-0.559;--ay:0.829;--d:.065s}
.fc2{clip-path:polygon(28.14% 65.18%,38.12% 73.82%,42.5% 99.74%,58.71% 85.19%,40% 50%);background:#3E9142;--ax:-0.996;--ay:-0.087;--d:.13s}
.fc3{clip-path:polygon(15.32% 42.92%,6.8% 40.48%,12.19% 51.31%,7.5% 50.26%,0% 62.57%,19.38% 57.59%,28.14% 65.18%,40% 50%);background:#57B25A;--ax:-0.309;--ay:-0.951;--d:.195s}
.fc4{clip-path:polygon(44.06% 0%,41.88% 43.72%,39.06% 25.92%,15.32% 42.92%,17.81% 38.48%,4.38% 35.6%,6.8% 40.48%,40% 50%,61.67% 15.33%);background:#449B47;--ax:0.934;--ay:-0.358;--d:.26s}

.fold-cap{
  margin:0;text-align:center;font-family:var(--display);font-weight:900;
  font-size:clamp(16px,1.5vw,19px);color:var(--forest);line-height:1.25;letter-spacing:-.01em;
}
.fold-cap span{display:block;margin-top:7px;font-family:var(--text);font-weight:400;
  font-size:13px;color:var(--ink-55);letter-spacing:0}

.statband{padding-block:clamp(40px,5vw,64px)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,3vw,40px)}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr);gap:24px 14px}}
.stat b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(34px,4.4vw,58px);line-height:1;color:var(--green);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:12.5px;margin-top:8px;color:var(--ink-72);line-height:1.35}

/* ==================================================================
   OUTLETS
   ================================================================== */
.outlets{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
@media(max-width:900px){.outlets{grid-template-columns:1fr}}
.outlet{background:#fff;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 3px 0 rgba(35,83,38,.05)}
.outlet-img{position:relative;aspect-ratio:3/2;background:var(--sage);overflow:hidden}
.outlet-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.outlet:hover .outlet-img img{transform:scale(1.04)}
.outlet-img .yr{position:absolute;left:14px;top:14px;background:var(--cream);border-radius:999px;padding:5px 12px;font-family:var(--display);font-weight:900;font-size:12px;color:var(--forest);letter-spacing:.04em}
.outlet-ph{position:absolute;inset:0;display:grid;place-items:center;background:repeating-linear-gradient(45deg,var(--sand) 0 14px,#EDE3DA 14px 28px);color:var(--ink-55);text-align:center;padding:20px}
.outlet-ph .t{font-family:var(--display);font-weight:900;font-size:19px;color:var(--forest);line-height:1.1}
.outlet-ph .s{font-size:12px;margin-top:6px}
.outlet-body{padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;flex:1}
.outlet h3{margin:0 0 3px}
.outlet .tg{font-size:12.5px;color:var(--ink-55)}
.outlet .ad{font-size:14px;color:var(--ink-72);margin:16px 0 0;line-height:1.5}
.outlet .hr{font-size:13px;font-weight:700;color:var(--forest);margin-top:10px;display:flex;align-items:center;gap:7px}
.outlet .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.outlet .lk{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:20px}
.pill{border:1.5px solid var(--line);border-radius:999px;padding:7px 13px;font-size:11.5px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;color:var(--forest);transition:all .2s}
.pill:hover{border-color:var(--green);background:var(--mist)}
.pill.soonpill{border-style:dashed;color:var(--ink-55)}

/* ==================================================================
   CATERING · shaped like the A5 flyer: one photo, three lines, one ask
   ================================================================== */
.cater-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(22px,3.4vw,54px);align-items:center}
@media(max-width:900px){.cater-grid{grid-template-columns:1fr}}

.fmt{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:14px;
  padding:14px 0;border-top:1px solid var(--line);align-items:center}
.fmt:first-child{border-top:0;padding-top:0}
.fmt .fic{width:30px;height:30px}
.fmt b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(16.5px,1.6vw,19px);
  color:var(--forest);letter-spacing:-.01em;line-height:1.15}
.fmt span{display:block;font-size:13px;color:var(--ink-55);margin-top:2px;line-height:1.4}
.fmt .fmt-for{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green);text-align:right;max-width:130px;line-height:1.5}
@media(max-width:560px){.fmt .fmt-for{display:none}}

.minis{display:flex;gap:clamp(18px,3vw,38px);flex-wrap:wrap;padding:16px 0 0;margin-top:4px;
  border-top:1px solid var(--line)}
.mini b{font-family:var(--display);font-weight:900;font-size:clamp(18px,1.9vw,23px);
  color:var(--forest);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mini span{display:block;font-size:10px;font-weight:900;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-55);margin-top:3px}

.cater-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px}
.flow{margin:0;font-size:12.5px;color:var(--ink-55)}
.flow b{color:var(--forest);font-weight:900}
.flow span{color:var(--green);font-weight:900;margin:0 5px}

.cater-photo{position:relative;display:grid;place-items:center;padding:10px 0}
.cater-photo::before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(232,241,225,.9),rgba(232,241,225,0) 70%)}
.cater-photo img{position:relative;width:min(460px,94%);
  filter:drop-shadow(0 34px 40px rgba(29,42,28,.3))}
.cater-stamp{position:absolute;right:10%;bottom:2%;background:var(--cream);
  box-shadow:0 10px 20px -12px rgba(41,48,65,.5);
  border:1.5px solid var(--line);border-radius:999px;padding:8px 15px;font-size:11px;
  font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--forest)}
.fpill{
  position:absolute;z-index:2;display:flex;align-items:center;gap:7px;
  background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:7px 13px;
  font-size:10.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  color:var(--forest);box-shadow:0 14px 26px -16px rgba(41,48,65,.55);
  animation:pillFloat 4.2s ease-in-out infinite alternate;
}
.fpill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.p1{top:5%;right:1%;animation-delay:.3s;animation-duration:3.6s}
.p2{top:13%;left:-1%;animation-delay:1.1s;animation-duration:4.8s}
.p3{bottom:24%;left:-2%;animation-delay:.7s;animation-duration:4s}
.p4{top:44%;right:-3%;animation-delay:1.6s;animation-duration:4.4s}
@keyframes pillFloat{from{transform:translateY(-6px)}to{transform:translateY(7px)}}
@media(max-width:900px){.p1{right:0}.p2{left:0}.p3{left:0}.p4{right:0}}
@media(max-width:560px){.fpill{font-size:9px;padding:5px 9px}.p3{display:none}}

.faqfold{margin-top:clamp(22px,3vw,36px);border-radius:20px;
  background:rgba(255,255,255,.52);border:1px solid rgba(255,255,255,.65);
  backdrop-filter:blur(8px) saturate(1.15);-webkit-backdrop-filter:blur(8px) saturate(1.15);
  padding:0 clamp(16px,2vw,24px);box-shadow:0 3px 0 rgba(35,83,38,.04)}
.faqfold>summary{cursor:pointer;list-style:none;padding:17px 0;display:flex;
  justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--display);font-weight:900;font-size:16.5px;color:var(--forest)}
.faqfold>summary::-webkit-details-marker{display:none}
.faqfold>summary::after{content:"+";font-family:var(--display);font-weight:900;
  color:var(--green);font-size:22px;line-height:1;transition:transform .25s var(--ease)}
.faqfold[open]>summary{border-bottom:1px solid var(--line)}
.faqfold[open]>summary::after{transform:rotate(45deg)}
.faq details{border-bottom:1px solid rgba(41,48,65,.12)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:14px 0;font-weight:700;font-size:14.5px;color:var(--forest);
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-weight:900;color:var(--green);
  font-size:18px;line-height:1;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 15px;font-size:14px;color:var(--ink-72);line-height:1.6;max-width:64ch;text-align:justify;-webkit-hyphens:auto;hyphens:auto}

/* ==================================================================
   THE CLOSE — the three counters
   ================================================================== */
.close-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(26px,4vw,60px);align-items:center}
@media(max-width:900px){.close-grid{grid-template-columns:1fr}}
.signup{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.signup input{flex:1 1 240px;border:1.5px solid rgba(41,48,65,.2);background:#fff;
  border-radius:999px;padding:14px 22px;font:inherit;font-size:15px;color:var(--ink)}
.signup input::placeholder{color:var(--ink-55)}
.signup input:focus{outline:none;border-color:var(--green)}
.close-note{font-size:12.5px;color:var(--ink-55);margin-top:14px;max-width:46ch}
.launch-row{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}

.counters{list-style:none;margin:0;padding:0;position:relative}
.counters::before{content:"";position:absolute;left:23px;top:26px;bottom:26px;width:2px;
  background:linear-gradient(var(--green),var(--sand))}
.counters li{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);
  gap:18px;padding:14px 0;align-items:start}
.counters .pip{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:900;font-size:15px;background:var(--green);color:#fff;
  box-shadow:0 0 0 6px var(--cream);z-index:1;font-variant-numeric:tabular-nums;
}
.counters li.next .pip{background:var(--cream);color:var(--forest);
  box-shadow:0 0 0 6px var(--cream),inset 0 0 0 2px var(--green)}
.counters .nm{font-family:var(--display);font-weight:900;font-size:clamp(20px,2.1vw,26px);
  color:var(--forest);line-height:1.1;letter-spacing:-.018em}
.counters .mt{font-size:13px;color:var(--ink-55);margin-top:5px;line-height:1.45}
.counters .st{
  display:inline-block;margin-top:9px;border-radius:999px;padding:4px 11px;font-size:10.5px;
  font-weight:900;letter-spacing:.12em;text-transform:uppercase;background:var(--mist);color:var(--forest);
}
.counters li.next .st{background:var(--orange);color:#fff}

/* ==================================================================
   FOOTER
   ================================================================== */
.ftr{background:var(--forest);color:rgba(244,242,236,.7);padding-block:clamp(40px,5vw,64px) 26px}
.ftr-grid{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,.63fr));gap:clamp(20px,3vw,40px)}
@media(max-width:860px){.ftr-grid{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:520px){.ftr-grid{grid-template-columns:1fr}}
.ftr h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin:0 0 12px;font-weight:900;font-family:var(--text)}
.ftr .tagline{font-family:var(--display);font-weight:900;color:var(--cream);font-size:clamp(20px,2.2vw,26px);line-height:1.1;margin:16px 0 0;letter-spacing:-.015em}
.ftr a{color:rgba(244,242,236,.7);text-decoration:none;font-size:14px;display:block;padding:3px 0}
.ftr a:hover{color:var(--cream)}
.ftr .fishmark{height:34px;width:auto;filter:brightness(1.5)}
.ftr-base{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-top:clamp(30px,4vw,52px);padding-top:20px;border-top:1px solid rgba(244,242,236,.16);font-size:12px;color:rgba(244,242,236,.5)}

/* ==================================================================
   MOTION — everything unfolds like paper
   ================================================================== */
.reveal{opacity:0;transform:perspective(1000px) rotateX(-14deg) translateY(26px);transform-origin:top center}
.reveal.in{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .85s var(--ease)}
.reveal.d1.in{transition-delay:.08s}
.reveal.d2.in{transition-delay:.16s}
.reveal.d3.in{transition-delay:.24s}

/* the hero headline unfolds line by line on load */
.unfold>span{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.unfold>span>i{display:block;font-style:inherit;animation:unfold .95s var(--ease) backwards}
.unfold>span:nth-child(1)>i{animation-delay:.05s}
.unfold>span:nth-child(2)>i{animation-delay:.17s}
.unfold>span:nth-child(3)>i{animation-delay:.29s}
@keyframes unfold{from{transform:translateY(102%) rotateX(-58deg);opacity:0}}

/* The four-item bottom bar lived here until round 15. It duplicated the
   drawer, and the WhatsApp floater now carries the always-there action. */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .unfold>span>i{animation:none}
  .fold .fc,.fold.go .fc{animation:none!important;transform:none!important;opacity:1!important}
}

/* v8b: the wheel controls win their tap-target size on phones */
@media(max-width:760px){.wheel-ctl button{width:44px;height:44px}}

/* v12: long CTA labels wrap on phones instead of widening the page.
   (The Midtown grand-launch button was 391px wide on a 390px screen.) */
@media(max-width:560px){
  .btn{white-space:normal;text-align:center;line-height:1.32;min-width:0}
}

/* v13: phones narrower than 371px — the signature grid must be able to
   shrink (a 1fr track floors at min-content, which is 371px wide).
   Scoped to 370px so the 390px layout Victor approved is untouched. */
@media(max-width:370px){
  .sig-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sig-top{flex-wrap:wrap;gap:2px 10px}
}
/* v13: CTAs meet the same 44px tap target as the wheel controls */
@media(max-width:560px){
  .btn{padding:16px 24px}
}

/* =============================== v14 · round 13 ===============================
   Appended at EOF on purpose. .pill-grab is declared up at line 149, but
   .pill:hover lives at line ~543 and would win on source order at equal
   specificity — the filled green would flash back to white on hover. Overrides
   go last so the cascade cannot bite. (Same reason as the v8b/v12/v13 blocks.) */

/* the GrabFood pill on an outlet card now matches the header CTA: filled Grab
   green with the same 3.8s shine sweep */
.pill-grab,
.pill-grab:hover{
  background:var(--grabg);border-color:var(--grabg);color:#fff;
}
.pill-grab{
  position:relative;overflow:hidden;
  box-shadow:0 5px 14px -7px rgba(0,177,79,.9);
}
.pill-grab:hover{box-shadow:0 10px 20px -8px rgba(0,177,79,.95)}
.pill-grab::after{
  content:"";position:absolute;top:-40%;bottom:-40%;left:-38%;width:34%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);animation:grabShine 3.8s ease-in-out infinite;
}

/* per-outlet photo zoom — TTDI is shot from further back than USJ, so --z
   crops it to the same apparent storefront size. Hover keeps its +.04 lift. */
.outlet-img img{transform-origin:var(--zo,50% 50%);transform:scale(var(--z,1))}
.outlet:hover .outlet-img img{transform:scale(calc(var(--z,1) + .04))}

/* "Coming soon" is the whole placeholder now — give it the full box */
.outlet-ph .t{font-size:22px}

/* Select all, as cell one of the toppings grid. Dashed so it reads as a
   control and not as an ingredient you can eat. */
.tile-all{border-style:dashed;color:var(--sc,var(--green));cursor:pointer}
.tile-all .nm{font-weight:900;color:var(--sc,var(--forest));letter-spacing:.02em}
.tile-all:hover{background:color-mix(in srgb,var(--sc,var(--green)) 7%,#fff);border-style:dashed}
.tile-all.on{border-style:solid}

/* ======================= v16 - round 14 - the phone pass ===================
   Appended at EOF so it lands after every earlier breakpoint. Everything here
   is inside a max-width query except the two structural rules the desktop
   grid needs after the builder markup was reordered. */

/* --- the builder columns, after #stepsNav became a direct grid child ----- */
@media(min-width:1001px){
  .build-grid{grid-template-rows:auto minmax(0,1fr)}
  .bowl-col{grid-column:1;grid-row:1/span 2}
  .steps-nav{grid-column:2;grid-row:1}
  .build-main{grid-column:2;grid-row:2}
}

/* --- 0 - the wide lockup carries more wordmark, so it needs less height --- */
.hdr-logo img{height:30px}
.burger{display:none}
.drawer[hidden]{display:none}

@media(max-width:1000px){
  /* --- 1 - burger, drawer, and a CTA sized to share the bar with it ------ */
  .hdr-in>.btn{margin-left:auto}
  .hdr-in .btn-grab{padding:10px 15px;font-size:10.5px;letter-spacing:.06em}
  .burger{
    display:grid;align-content:center;justify-items:center;gap:5px;
    width:44px;height:44px;flex:none;margin-left:8px;border-radius:12px;
  }
  .burger span{display:block;width:20px;height:2.5px;border-radius:2px;background:var(--forest);
    transition:transform .26s var(--ease),opacity .16s}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .drawer{
    display:grid;padding:4px var(--gut) 14px;background:var(--cream);
    border-top:1px solid var(--line);animation:drawerIn .24s var(--ease);
  }
  .drawer a{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 2px;font-family:var(--display);font-weight:900;font-size:19px;
    color:var(--forest);text-decoration:none;border-bottom:1px solid var(--line);
  }
  .drawer a:last-child{border-bottom:0}
  .drawer a::after{content:"\203A";color:var(--green);font-size:23px;line-height:1}
}
@keyframes drawerIn{from{opacity:0;transform:translateY(-10px)}}

@media(max-width:760px){
  /* --- 5 - the dead band between sections was 152px of nothing ---------- */
  :root{--sect:clamp(44px,8vw,62px)}
  .sect-head{margin-bottom:24px;gap:12px}

  /* justified text on a 350px column makes rivers - left-align on phones */
  .lede,.craft-body p,.faq p{text-align:left;hyphens:manual}

  /* --- 2 - the two hero CTAs share one row ----------------------------- */
  .hero .hero-cta{display:flex;flex-wrap:nowrap;gap:9px}
  .hero .hero-cta .btn{
    flex:1 1 0;min-width:0;justify-content:center;text-align:center;
    padding:14px 8px;font-size:11px;letter-spacing:.045em;
  }

  /* --- 3 - the ring gives way to a single bowl -------------------------- */
  .hero .wheel-stage,.hero .wheel-ctl{display:none}
  .hero-phone{
    display:block;position:relative;width:min(300px,80%);margin:18px auto 0;
    text-decoration:none;
  }
  .hero-phone img{width:100%;display:block;filter:drop-shadow(0 20px 26px rgba(29,42,28,.24))}
  .hp-cap{
    display:block;text-align:center;margin-top:10px;font-family:var(--display);
    font-weight:900;font-size:18px;color:var(--forest);line-height:1.15;
  }
  .hp-cap i{
    display:block;margin-top:4px;font-family:var(--text);font-style:normal;
    font-weight:700;font-size:12px;letter-spacing:.03em;color:var(--orange);
  }

  /* --- 4 + 6 - one card at a time, snapped, with dots ------------------- */
  .sig-grid,.craft-grid{
    display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:100%;
    gap:0 14px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;
  }
  .sig-grid::-webkit-scrollbar,.craft-grid::-webkit-scrollbar{display:none}
  .sig,.craft{scroll-snap-align:start}
  .sig{border-top:0;padding-top:0}
  .sig-img{margin-bottom:10px}
  .sig-img img{width:min(72%,260px);margin-inline:auto;display:block}
  .sig-top{flex-wrap:nowrap;gap:10px}
  .sig h3{font-size:22px}
  .craft-art{aspect-ratio:16/10}
  .rail-dots{display:flex;gap:2px;justify-content:center;margin-top:18px}
  .rail-dots button{
    width:26px;height:26px;padding:9px;border-radius:50%;
    background:var(--line);background-clip:content-box;
    transition:background .22s,transform .22s var(--ease);
  }
  .rail-dots button.on{background:var(--green);transform:scale(1.3)}

  /* --- 8 - the fold belongs inside the story, not under it -------------- */
  .story-grid{gap:22px}
  .story-art{gap:12px;margin-top:4px}
  .fold{width:min(168px,44%)}
  .fold-cap{font-size:15px}
  .fold-cap span{font-size:12px;margin-top:5px}

  /* --- 9 - outlets: photo left, everything else right ------------------- */
  .outlets{gap:12px}
  .outlet{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:stretch}
  .outlet-img{aspect-ratio:auto;height:100%}
  .outlet-img .yr{left:8px;top:8px;padding:3px 8px;font-size:10px}
  .outlet-ph .t{font-size:14px}
  .outlet-body{padding:11px 13px 12px}
  .outlet h3{font-size:19px}
  .outlet .tg{font-size:11.5px}
  .outlet .ad{margin-top:6px;font-size:12px;line-height:1.4}
  .outlet .hr{margin-top:5px;font-size:11.5px}
  .outlet .lk{padding-top:9px;gap:5px}
  .outlet .pill{padding:6px 9px;font-size:10px;letter-spacing:.04em}

  /* --- 10 - catering: the bowl moves up under the title ----------------- */
  .cater-grid{display:flex;flex-direction:column;gap:18px}
  .cater-photo{order:-1;padding:0}
  .cater-photo img{width:min(250px,68%)}
  .cater-photo::before{width:64%}
  .cater-photo .fpill{font-size:9.5px;padding:5px 9px}
  .cater-photo .fpill.p3,.cater-photo .fpill.p4{display:none}
  .minis{gap:14px 22px;padding-top:12px}
  .cater-cta{margin-top:16px}

  /* --- 11 - Midtown in one screen -------------------------------------- */
  .close-grid{gap:18px}
  .counters li{padding-block:9px}
  #next h2{font-size:clamp(30px,9vw,40px)}
}

/* --- 7 - the builder: bowl and step chips both stay on screen -----------
   The bowl is the whole point of this section, so on a phone it pins to the
   header with the step chips directly under it. Both bleed to the screen
   edges and carry the band's own colour, so tiles scroll behind, not through. */
@media(max-width:1000px){
  #build{--phbar:78px}
  .bowl-col{
    position:sticky;top:74px;z-index:22;height:var(--phbar);
    display:flex;align-items:center;gap:12px;
    margin-inline:calc(var(--gut)*-1);padding:0 var(--gut);
    background:var(--mist);
  }
  #bowlArt{flex:none;width:58px}
  .pf-bowl-svg{width:58px;max-width:none;margin:0;filter:drop-shadow(0 8px 10px rgba(29,42,28,.22))}
  .bowl-caption{flex:1 1 auto;min-width:0;text-align:left;margin:0}
  .bowl-caption .nm{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bowl-caption .li{display:none}
  .totals{flex:none;margin:0;padding:6px 13px;gap:7px}
  .totals .lb{font-size:9.5px;letter-spacing:.1em}
  .totals .vl{font-size:17px}
  .steps-nav{
    position:sticky;top:calc(74px + var(--phbar));z-index:21;
    margin-inline:calc(var(--gut)*-1);padding:0 var(--gut) 10px;
    background:var(--mist);box-shadow:0 12px 14px -14px rgba(41,48,65,.5);
    overflow-x:auto;scrollbar-width:none;
  }
  .steps-nav::-webkit-scrollbar{display:none}
  /* a step chip tapped from the sticky bar must not land under the sticky bar */
  .panel{scroll-margin-top:calc(74px + var(--phbar) + 62px)}
}

/* ---- v16c: what the first phone render got wrong -------------------------- */
@media(max-width:760px){
  /* the hero bowl was floating a long way below the trust row */
  .hero-grid{gap:10px}
  .hero .trust{margin-top:18px;padding-top:16px;gap:12px 18px}
  .hero-phone{width:min(258px,66%);margin-top:2px}

  /* an outlet photo in a 112px-wide column is already a tight crop - the extra
     1.5x zoom that matches the two desktop cards cut the sign in half */
  .outlet-img img{transform:none}
  .outlet{grid-template-columns:118px minmax(0,1fr)}

  /* catering: the bowl had a screenful of air around it */
  .cater-grid{gap:12px}
  .cater-photo img{width:min(198px,56%)}
  .cater-photo::before{width:54%}
  .cater-photo .fpill{font-size:9px}
  .minis{gap:10px 20px;padding-top:10px}
  .cater-cta{margin-top:12px}
  .faqfold{margin-top:14px}

  /* Midtown: the timeline carried desktop spacing */
  .counters li{padding-block:7px}
}

/* the builder head and chips were sitting a long way off the panel */
@media(max-width:1000px){
  #build .sect-head{margin-bottom:12px}
  .steps-nav{padding-bottom:8px}
  .build-main{margin-top:12px}
}

/* ---- v16d ---------------------------------------------------------------- */
/* A: the phone hero bowl is phone-only. The base rule needs its phone
      counterpart right here: a later rule of equal specificity wins even when
      the earlier one sits inside a media query, so declaring display:none at
      the end of the file would otherwise cancel the block: set in v16. */
.hero-phone{display:none}
@media(max-width:760px){.hero-phone{display:block}}

/* B: no edge bleed - the gutter beside the builder is empty band colour, so
      the negative margin bought nothing and at 320px it pushed the document to
      323.3px, giving the whole page a 3px horizontal scroll. */
@media(max-width:1000px){
  .bowl-col{margin-inline:0;padding-inline:0}
  .steps-nav{margin-inline:0;padding-inline:0}
}

/* C: tablets were left with desktop section padding and a one-column outlet
      list, which made 768px the tallest layout on the site. They keep the
      wheel and the two-up bowl grid - only the dead space goes. */
@media(min-width:761px) and (max-width:1000px){
  :root{--sect:clamp(56px,7vw,86px)}
  .sect-head{margin-bottom:30px}
  .outlets{grid-template-columns:repeat(2,1fr)}
  .build-grid{gap:20px}
}

/* ---- v16e ---------------------------------------------------------------- */
@media(max-width:760px){
  .rail-dots{gap:0}
  .rail-dots button{
    width:27px;height:26px;padding:9.5px;border-radius:999px;
    background:var(--line);background-clip:content-box;transform:none;
    transition:padding .26s var(--ease),background .26s;
  }
  .rail-dots button.on{background:var(--green);padding:9.5px 3.5px;transform:none}
}

/* ---- v16f ---------------------------------------------------------------- */
@media(max-width:760px){
  .rail-dots button{
    background:none;background-color:var(--line);background-clip:content-box;
  }
  .rail-dots button.on{
    background-color:var(--green);background-clip:content-box;padding:9.5px 3.5px;
  }
}

/* ---- v18: hit areas ------------------------------------------------------ */
@media(max-width:760px){
  .hero .hero-cta .btn{padding:15.5px 8px}
  .outlet .pill{padding:10px 9px}
  .rail-dots{margin-top:14px}
  .rail-dots button{height:34px;padding:13.5px 9.5px}
  .rail-dots button.on{padding:13.5px 3.5px}
}

/* ---- v19: the rest of the 44px pass -------------------------------------- */
@media(max-width:760px){
  .hdr-logo{display:flex;align-items:center;min-height:44px}
  .hdr-in .btn-grab{padding:13px 15px}
  .outlet .pill{padding:13px 9px}
  .linkbtn{padding:14px 4px}
  .rail-dots{margin-top:10px}
  .rail-dots button{height:44px;padding:18.5px 9.5px}
  .rail-dots button.on{padding:18.5px 3.5px}
  /* ten links that are almost never tapped; 44 each would cost a third of a
     screen, so these are the one documented exception */
  .ftr a{padding:9px 0}
}

/* ========================= v20 - round 15 ================================= */

/* --- the always-there WhatsApp, top right under the header --------------- */
.wafloat{
  position:fixed;right:14px;top:calc(74px + 16px);z-index:65;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:#25D366;box-shadow:0 10px 26px -9px rgba(37,211,102,.8);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease);
}
.wafloat svg{width:27px;height:27px;fill:#fff}
.wafloat:hover{transform:scale(1.07);box-shadow:0 16px 32px -10px rgba(37,211,102,.9)}
@media(max-width:560px){.wafloat{width:48px;height:48px;right:12px;top:calc(74px + 12px)}
  .wafloat svg{width:25px;height:25px}}

/* --- carousel arrows beside the dots ------------------------------------ */
.rail-ctl{display:none}
@media(max-width:760px){
  .rail-ctl{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:12px}
  .rail-arrow{
    width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;
    font-size:25px;line-height:1;color:var(--forest);
    border:1.5px solid var(--line);background:#fff;
    transition:opacity .2s,border-color .2s,background .2s;
  }
  .rail-arrow:disabled{opacity:.28}
  .rail-arrow:not(:disabled):active{background:var(--mist);border-color:var(--green)}
  .rail-dots{margin-top:0}
}

/* --- the outlet landline ------------------------------------------------ */
.outlet .ph{
  display:inline-block;margin-top:5px;padding:4px 0;
  font-size:13px;font-weight:700;color:var(--forest);text-decoration:none;
  border-bottom:1.5px solid transparent;
}
.outlet .ph:hover{color:var(--green);border-bottom-color:var(--green)}

/* --- E: the fold sits under the headline; desktop keeps its two columns -- */
@media(min-width:901px){
  .story-grid{grid-template-rows:auto minmax(0,1fr);align-items:start}
  .story-head{grid-column:1;grid-row:1}
  .story{grid-column:1;grid-row:2}
  .story-art{grid-column:2;grid-row:1/span 2;align-self:center}
  /* the columns keep their air; the headline and its first sentence do not
     need 72px of it between them */
  .story-grid{row-gap:clamp(16px,1.7vw,26px)}
}
.story-head h2{margin-bottom:0}

/* --- F: the invite button sits under the 01-02-03 list, desktop too ------ */
.close-cta{margin-top:6px}
@media(min-width:901px){
  .close-grid{align-items:start}
  .close-grid>:nth-child(1){grid-column:1;grid-row:1/span 2}
  .close-grid>:nth-child(2){grid-column:2;grid-row:1}
  .close-grid>:nth-child(3){grid-column:2;grid-row:2}
}

/* --- G: the footer, rebuilt around the contact block -------------------- */
.ftr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) repeat(2,minmax(0,.82fr))}
.ftr-talk a.big{
  display:flex;align-items:center;gap:9px;
  font-size:16px;font-weight:700;color:var(--cream);padding:8px 0;
}
.ftr-talk a.big svg{width:18px;height:18px;fill:var(--green);flex:none}
.ftr-talk a.big:hover svg{fill:var(--cream)}
@media(max-width:860px){
  .ftr-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  /* the bottom bar it used to clear is gone */
  .ftr{padding-bottom:24px;padding-top:34px}
  .ftr-grid{gap:16px 18px}
  .ftr-brand{grid-column:1/-1;display:flex;align-items:center;gap:12px}
  .ftr-brand .fishmark{height:26px}
  .ftr .tagline{margin:0;font-size:18px}
  .ftr-talk{grid-column:1/-1}
  .ftr-talk a.big{font-size:15px;padding:9px 0}
  .ftr h4{margin-bottom:4px}
  .ftr a{font-size:13.5px;padding:8px 0}
  .ftr-base{margin-top:20px;padding-top:14px;font-size:11px;gap:4px}
  .outlet .ph{padding:11px 0;margin-top:2px}
}
@media(max-width:520px){
  .ftr-grid{grid-template-columns:1fr 1fr}
}

/* --- 4: the builder in one screen -------------------------------------- */
@media(max-width:760px){
  #build h2{font-size:clamp(34px,10.5vw,46px)}
  #build .lede{font-size:15px}
  #build{--phbar:94px}
  #bowlArt{width:76px}
  .pf-bowl-svg{width:76px}
  .bowl-caption .nm{font-size:17px}
  .steps-nav{padding-bottom:6px}
  .stepbtn{padding:7px 6px}
  .panel{padding:14px 13px 12px}
  .panel-head h3{font-size:21px}
  .panel-note{font-size:12.5px;margin-bottom:10px}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .tile{padding:7px 3px 6px;gap:3px;border-radius:13px}
  .tile .pf-ic,.tile .pf-im{width:32px;height:32px}
  .tile .nm{font-size:9.5px;line-height:1.15}
  .tile .dl{font-size:9.5px}
  .tier{margin-top:11px}
  .tier-lb{font-size:10.5px}
}
@media(max-width:370px){
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* --- catering, tightened now the two unconfirmed figures are gone ------- */
@media(max-width:760px){
  .minis{gap:8px 26px;padding-top:8px}
  .cater-photo img{width:min(180px,52%)}
  .faqfold{margin-top:10px}
}

/* ---- v20f ---------------------------------------------------------------- */
@media(max-width:760px){
  /* B: the pills are positioned against the photo box, so the photo has to stay
        wider than they are or they pile up on the food */
  .cater-photo img{width:min(212px,60%)}
  .cater-photo::before{width:62%}
  .cater-photo .fpill{font-size:8.5px;padding:4px 8px}
  .cater-photo .cater-stamp{font-size:9.5px;padding:6px 12px}

  /* C: win the landline's line back out of the card */
  .outlets{gap:10px}
  .outlet-body{padding:10px 12px 11px}
  .outlet .ad{margin-top:5px;line-height:1.35}
  .outlet .hr{margin-top:4px}
  .outlet .ph{margin-top:1px;padding:9px 0;font-size:13.5px}
  .outlet .lk{padding-top:7px}
}

/* ---- v20g ---------------------------------------------------------------- */
@media(max-width:760px){
  .cater-photo .fpill,.cater-photo .cater-stamp{display:none}
  .cater-photo{padding:2px 0}
  .cater-photo img{width:min(230px,64%)}
  .cater-photo::before{width:66%}
}

/* ---- v20h ---------------------------------------------------------------- */
@media(max-width:760px){
  .cater-grid{gap:8px}
  .cater-photo img{width:min(196px,56%)}
  .cater-photo::before{width:58%}
  .fmt{padding-block:11px;gap:11px}
  .fmt span{font-size:12.5px}
  .fmt-for{display:none}          /* the third column repeats the sentence beside it */
  .minis{padding-top:6px}
  .cater-cta .flow{font-size:12px;margin-top:8px}
}

/* ---- v20i ---------------------------------------------------------------- */
@media(max-width:760px){
  #catering .sect-head{margin-bottom:18px}
  .cater-cta .flow{display:none}
  .cater-cta{margin-top:10px}
  .minis{gap:6px 24px;padding-top:4px}
  .mini b{font-size:26px}
  .faqfold{margin-top:8px}
}

/* ---- v20j: single-column mobile grids must be allowed to shrink ---------- */
@media(max-width:1000px){ .build-grid{grid-template-columns:minmax(0,1fr)} }
@media(max-width:900px){
  /* .outlets is deliberately absent: tablets keep the two-up grid v16d gave
     them, and the phone rule below is the one that makes it single column */
  .story-grid,.cater-grid,.close-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  /* the outlets card keeps its own two-column split at phone widths */
  .outlets{grid-template-columns:minmax(0,1fr)}
  .outlet{grid-template-columns:118px minmax(0,1fr)}
  /* and the footer stays two-up on phones */
  .ftr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ---- v20k ---------------------------------------------------------------- */
@media(max-width:760px){
  .outlet .pill,.outlet .ph,.ftr-talk a.big{
    min-height:44px;display:inline-flex;align-items:center;
  }
  .outlet .ph{padding:0}
}

/* ========================= v22 - round 16 ================================= */

/* --- 1 - a bigger lockup, everywhere ------------------------------------ */
.hdr-logo img{height:38px}

/* --- 4 - desktop section rhythm. 9vw put 264px of nothing between every
       band at 1440. 6.4vw is still generous and gives back ~370px of page. */
:root{--sect:clamp(64px,6.4vw,96px)}

/* --- 3 - the floater moves to the thumb, bottom right ------------------- */
.wafloat{
  top:auto;bottom:calc(20px + env(safe-area-inset-bottom));right:18px;
  width:56px;height:56px;
}
.wafloat svg{width:30px;height:30px}
@media(max-width:560px){
  .wafloat{width:54px;height:54px;right:14px;bottom:calc(16px + env(safe-area-inset-bottom))}
  .wafloat svg{width:29px;height:29px}
}

/* --- 7 - arrows ride the card edges, dots sit underneath ---------------- */
.rail-ctl{position:relative}
.rail-arrow{display:none}
@media(max-width:760px){
  .rail-arrow{
    display:grid;place-items:center;position:absolute;z-index:4;
    width:44px;height:44px;border-radius:50%;
    background:rgba(255,255,255,.95);border:1px solid var(--line);
    box-shadow:0 8px 20px -8px rgba(41,48,65,.6);
    font-size:26px;line-height:1;color:var(--forest);padding-bottom:3px;
    transition:opacity .22s,background .18s;
  }
  .rail-arrow.prev{left:-10px}
  .rail-arrow.next{right:-10px}
  /* dimmed, not removed: the reference keeps both arrows in place */
  .rail-arrow:disabled{opacity:.3;pointer-events:none}
  .rail-arrow:not(:disabled):active{background:var(--mist)}
  #sigCtl .rail-arrow{top:23%}
  #craftCtl .rail-arrow{top:17%}
  .rail-dots{margin-top:16px}
  /* the rail can no longer clip its own arrows */
  .sig-grid,.craft-grid{overflow-y:visible}
}

/* --- 8 + 9 - the phone hero: one bowl, then two readable CTAs ----------- */
@media(max-width:760px){
  .hero-phone{width:min(300px,76%);margin:6px auto 16px}
  .hp-cap{display:none}
  .hero .hero-cta .btn{font-size:13px;padding:16px 10px;letter-spacing:.05em}
}

/* --- 2 - the header CTA stands down on phones; the floater and the drawer
       both cover it, and the bar reads better with room for a bigger mark -- */
@media(max-width:1000px){
  .hdr-logo img{height:34px}
  .hdr-in .btn-grab{display:none}
  .burger{margin-left:auto}
}

/* --- 5 + 12 - the storefront reads as a fascia strip, not a cropped square */
@media(max-width:760px){
  .outlet{display:block}
  .outlet-img{aspect-ratio:3/1;height:auto}
  .outlet-img img{object-position:50% 36%}
  .outlet-ph{position:static;aspect-ratio:3/1}
  .outlet-body{padding:12px 14px 13px}
  .outlet h3{font-size:20px}
  .outlet .ad{font-size:12.5px}
}

/* --- 6 - desktop: the invite button belongs under the description ------- */
@media(min-width:901px){
  .close-grid>:nth-child(1){grid-column:1;grid-row:1}
  .close-grid>:nth-child(2){grid-column:2;grid-row:1/span 2}
  .close-cta{grid-column:1;grid-row:2;align-self:start;margin-top:4px}
}

/* --- 11 - phones: no step chips, and two rows of tiles at a time -------- */
@media(max-width:760px){
  .steps-nav{display:none}
  .panel{scroll-margin-top:calc(74px + var(--phbar) + 12px)}
  .tiles{
    --tilerow:78px;
    max-height:calc(var(--tilerow)*2 + 6px);
    overflow-y:auto;overscroll-behavior-y:contain;
    /* the tick badge sits outside the tile, so the scroller needs headroom */
    padding:9px 2px 2px;margin:-9px -2px 0;
    scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  }
  .tiles::-webkit-scrollbar{width:4px}
  .tiles::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
}

/* --- 13 - the catering photo Victor is reshooting ----------------------- */
.photo-ph{
  display:grid;place-content:center;gap:7px;text-align:center;
  aspect-ratio:1;width:min(330px,82%);margin-inline:auto;border-radius:50%;
  background:repeating-linear-gradient(45deg,var(--sand) 0 15px,#EDE3DA 15px 30px);
  border:2px dashed rgba(35,83,38,.3);position:relative;
}
.photo-ph .t{font-family:var(--display);font-weight:900;font-size:20px;color:var(--forest)}
.photo-ph .s{font-size:10.5px;color:var(--ink-55);font-family:ui-monospace,monospace;padding:0 12px}
@media(max-width:760px){
  .photo-ph{width:min(210px,58%)}
  .photo-ph .t{font-size:16px}
  .photo-ph .s{font-size:9px}
}

/* --- 14 - socials as marks you can actually tap ------------------------- */
.ftr-social{display:flex;flex-direction:column;gap:0}
.ftr-social a{
  display:flex;align-items:center;gap:9px;min-height:44px;padding:6px 0;
  color:rgba(244,242,236,.7);text-decoration:none;font-size:14px;
}
.ftr-social svg{width:19px;height:19px;flex:none;fill:rgba(244,242,236,.62);transition:fill .2s}
.ftr-social a:hover{color:var(--cream)}
.ftr-social a:hover svg{fill:var(--green)}

/* --- 15 - the copyright line leads the base row ------------------------- */
#copyLine{order:-1}
@media(max-width:760px){
  .ftr-base{flex-direction:column;align-items:flex-start}
  .ftr-social a{font-size:13.5px}
}

/* ---- v22e ---------------------------------------------------------------- */
@media(max-width:760px){
  /* A: the wrapper positions the arrows over the rail - it must not lay out
        its children in a row, or the dots end up beside the cards */
  .rail-ctl{
    display:block;position:relative;margin-top:0;
    align-items:initial;justify-content:initial;gap:0;
  }
  .rail-dots{display:flex;justify-content:center;gap:0;margin-top:16px}

  /* B: one crop cannot suit both fascias, so each outlet carries its own */
  .outlet-img img{object-position:50% 32%}

  /* C: a shorter strip and a tighter body */
  .outlet-img{aspect-ratio:3.5/1}
  .outlet-body{padding:10px 13px 12px}
  .outlet h3{font-size:19px}
  .outlet .tg{font-size:11px}
  .outlet .ad{margin-top:4px;font-size:12px}
  .outlet .hr{margin-top:3px}
  .outlet .lk{padding-top:6px}
  .outlets{gap:9px}
}

/* ---- v22f ---------------------------------------------------------------- */
@media(max-width:760px){
  /* A: block-level again, hit area kept */
  .ftr-talk a.big{display:flex;min-height:44px}

  /* B: a shallower fascia strip and tighter card type */
  .outlet-img{aspect-ratio:4/1}
  .outlet h3{font-size:18px;margin-bottom:1px}
  .outlet .ad{font-size:11.5px;line-height:1.32;margin-top:3px}
  .outlet .hr{font-size:11px}
  .outlet .ph{font-size:13px;min-height:40px}
  .outlet .pill{min-height:40px;padding:11px 9px;font-size:9.5px}
  .outlet-body{padding:9px 12px 10px}
  #outlets .sect-head{margin-bottom:16px}
}

/* ---- v22g ---------------------------------------------------------------- */
@media(max-width:760px){
  .outlet .ph{min-height:44px}
  .outlet .pill{min-height:44px;padding:13px 9px}
}

/* ---- v22h ---------------------------------------------------------------- */
/* A: the wrapper is scaffolding, never a thing to hide - the cards live in it */
.rail-ctl{display:block;position:relative}
.rail-dots{display:none}
@media(max-width:760px){
  .rail-dots{display:flex;justify-content:center;gap:0;margin-top:16px}
}

/* B: restated at the same specificity as the rules they replace */
@media(min-width:901px){
  .close-grid>:nth-child(1){grid-column:1;grid-row:1}
  .close-grid>:nth-child(2){grid-column:2;grid-row:1/span 2}
  .close-grid>:nth-child(3){grid-column:1;grid-row:2;align-self:start;margin-top:2px}
}

/* ========================= v24 - round 17 ================================= */

/* --- D2 - the step chip bar goes at every width -------------------------- */
.steps-nav{display:none}
@media(min-width:1001px){
  .build-grid{grid-template-rows:auto}
  .bowl-col{grid-column:1;grid-row:1}
  .build-main{grid-column:2;grid-row:1}
}

/* --- M1 - two lines of headline down to 320, and a bowl that turns ------- */
@media(max-width:760px){
  .hero h1{font-size:clamp(37px,11.4vw,48px)}
  .hero{padding-top:14px}
  .hero .lede{font-size:15px}
  .hero-phone{width:min(248px,64%);margin:2px auto 14px}
  .hero .trust{margin-top:14px;padding-top:13px}
  /* one turn a minute: alive, never distracting, and it reads as the bowl
     being shown off rather than as a loading spinner */
  .hero-phone img{animation:bowlturn 60s linear infinite}
}
@keyframes bowlturn{to{transform:rotate(360deg)}}

/* --- M2 - plain round dots, no pill ------------------------------------- */
/* round 31: an 8px dot inside a 26px box with a 3px gap left 21px of air
   between dots, which read as a scattered row rather than one indicator. The
   dot is now 10px in a 24px box laid edge to edge - 14px of air, and the row
   is 192px wide instead of 229px. 24px is deliberate: it is the floor for the
   spacing exception in WCAG 2.5.8, so a 24px circle centred on each button
   still clears its neighbour and the targets stay compliant. */
@media(max-width:760px){
  .rail-dots{gap:0}
  .rail-dots button{
    width:24px;height:44px;padding:17px 7px;border-radius:50%;
    background:none;background-color:var(--line);background-clip:content-box;
    transition:background-color .22s,transform .22s var(--ease);
  }
  .rail-dots button.on{
    background-color:var(--green);background-clip:content-box;
    padding:17px 7px;transform:scale(1.45);
  }
}

/* --- M3 - the craft rail was still bleeding a gutter to the left --------- */
@media(max-width:1000px){
  .craft-grid{margin-inline:0;padding-inline:0}
}

/* --- M4 - the bowl leads, its name and total stack beside it ------------- */
@media(max-width:1000px){
  #build{--phbar:104px}
  #bowlArt{width:92px}
  .pf-bowl-svg{width:92px}
  .bowl-col{gap:14px}
  .bowl-caption{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
  .bowl-caption .nm{font-size:18px}
  .totals{align-self:flex-start;margin:0}
}

/* --- M5 - the cooking-style chooser ------------------------------------- */
.tierpick{display:grid;gap:9px}
.tierbtn{
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:13px;align-items:center;
  text-align:left;padding:12px 14px;border-radius:16px;
  border:1.5px solid var(--line);background:#fff;
  transition:border-color .18s,transform .18s var(--ease),box-shadow .18s;
}
.tierbtn:hover,.tierbtn:active{
  border-color:var(--sc,var(--green));transform:translateY(-2px);
  box-shadow:0 8px 18px -12px rgba(41,48,65,.6);
}
.tier-ic{width:52px;height:52px;display:block}
.tierbtn b{
  grid-column:2;font-family:var(--display);font-weight:900;font-size:19px;
  color:var(--forest);line-height:1.05;
}
.tierbtn span{grid-column:2;font-size:12.5px;color:var(--ink-72);line-height:1.35}
.tierbtn i{
  grid-column:2;font-style:normal;font-size:10.5px;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sc,var(--green));
}
.tierback{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-size:11.5px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sc,var(--green));padding:0 2px;margin-bottom:4px;
}

/* --- M6 - outlets become the same rail as the bowls ---------------------- */
@media(max-width:760px){
  .outlets{
    display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:100%;
    gap:0 14px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;
  }
  .outlets::-webkit-scrollbar{display:none}
  .outlet{scroll-snap-align:start;display:flex;flex-direction:column}
  /* one card to a screen, so the storefront keeps its own shape and nothing
     is cropped out of the fascia */
  .outlet-img{aspect-ratio:3/2}
  .outlet-img img{object-position:50% 50%}
  .outlet-ph{aspect-ratio:3/2}
  .outlet-ph .t{font-size:20px}
  .outlet-body{padding:14px 16px 16px;flex:1}
  .outlet h3{font-size:23px}
  .outlet .tg{font-size:12.5px}
  .outlet .ad{font-size:13px;margin-top:8px}
  .outlet .hr{font-size:12.5px;margin-top:6px}
  .outlet .ph{font-size:15px}
  .outlet .pill{font-size:10.5px;padding:13px 12px}
  .outlet .lk{padding-top:10px;gap:7px}
  #outletCtl .rail-arrow{top:20%}
}

/* --- F2 - the two socials share one row --------------------------------- */
.ftr-social{flex-direction:row;justify-content:space-between;gap:16px}
.ftr-social a{flex:0 1 auto}

/* ---- v24d ---------------------------------------------------------------- */
@media(max-width:1000px){
  /* B: the bowl spans both rows; name sits over the total beside it */
  .bowl-col{
    display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
    align-items:center;column-gap:14px;row-gap:5px;
  }
  #bowlArt{grid-column:1;grid-row:1/span 2}
  .bowl-caption{grid-column:2;grid-row:1;align-self:end;display:block}
  .totals{grid-column:2;grid-row:2;align-self:start;justify-self:start}

  /* C: three controls on one line at 390 */
  .panel-foot{gap:8px}
  .panel-foot .btn{padding:14px 17px;font-size:11.5px;letter-spacing:.05em}
  .panel-foot .linkbtn{font-size:11px;letter-spacing:.07em}
}
@media(max-width:370px){
  .panel-foot .btn{padding:13px 12px;font-size:10.5px}
}
.tierbtn{row-gap:2px}

/* ==================================================================
   v27 — the bowl note, and the questions band
   ================================================================== */

/* The one-liner from menu.js, on every signature card. Two lines are
   reserved whether the sentence needs them or not, so the eight cards
   stay on one baseline instead of going ragged at the bottom. */
.sig .sig-note{
  font-size:12.5px;line-height:1.35;color:var(--ink-55);font-style:italic;
  margin:6px 0 0;min-height:calc(2 * 1.35em);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media(max-width:760px){
  .sig .sig-note{font-size:12px;min-height:calc(2 * 1.35em)}
}

/* The questions band. Deliberately quiet — no eyebrow, no heading, just
   the fold sitting on cream between the outlets and the catering band. */
.sect-tight{padding-top:0}
#questions .faqfold{margin-top:0}
#questions .faqfold>summary{font-size:17.5px}

/* ========================= v27 - round 18 ================================= */

/* --- B1 - the tick and the order badges were being cut off ---------------
   .ck sits at top:-7px right:-7px, outside its tile on purpose. Both the
   desktop panel scroller and the phone tile scroller clipped it. Each one now
   carries the overhang as padding and pulls it back with a negative margin,
   so nothing moves but nothing is cropped either. */
.panel-scroll{padding:10px 10px 0;margin:-10px -10px 0}
@media(max-width:760px){
  .tiles{padding:10px 10px 2px;margin:-10px -10px 0}
}

/* --- B3 - the three shelves sit side by side ----------------------------- */
.tierpick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.tierbtn{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:4px;text-align:center;padding:14px 8px 12px;
}
img.tier-ic{width:54px;height:54px;object-fit:contain;display:block}
.tierbtn b{font-size:16px}
.tierbtn span{font-size:11px;line-height:1.3;text-wrap:balance}
.tierbtn i{font-size:9.5px;letter-spacing:.07em;margin-top:2px}
@media(max-width:370px){
  .tierbtn{padding:11px 5px 10px}
  img.tier-ic{width:44px;height:44px}
  .tierbtn b{font-size:14px}
  .tierbtn span{font-size:10px}
}

/* --- B5 - the bands were carrying far too much air above them ------------ */
:root{--sect:clamp(52px,4.6vw,74px)}
@media(max-width:760px){:root{--sect:clamp(36px,6.5vw,50px)}}

/* --- B6 - the bowl descriptions read as a caption, not a second lede ----- */
.sig .sig-note{font-size:12.5px;line-height:1.42}
@media(max-width:760px){.sig .sig-note{font-size:12px}}

/* --- M1 - one line of eyebrow on a phone --------------------------------- */
@media(max-width:760px){
  .hero .eyebrow{font-size:10.5px;letter-spacing:.1em;white-space:nowrap}
}

/* --- M2 - the y of Healthy was landing on the d of made ------------------ */
@media(max-width:760px){
  .hero h1{line-height:1.04}
  .hero h1 span{padding-bottom:.2em;margin-bottom:-.2em}
}

/* --- M3 - a bowl worth looking at, with its name centred over the total --- */
@media(max-width:1000px){
  #build{--phbar:auto}
  .bowl-col{
    display:flex;flex-direction:column;align-items:center;gap:6px;
    height:auto;position:static;padding:0 0 14px;
  }
  #bowlArt{width:min(300px,72vw)}
  .pf-bowl-svg{width:100%}
  .bowl-caption{text-align:center;margin:0}
  .bowl-caption .nm{font-size:20px}
  .totals{margin:0 auto}
  .panel{scroll-margin-top:90px}
}

/* --- M4 - once a shelf is chosen there is nothing left to scroll ---------- */
@media(max-width:760px){
  .tierpick~*,.tierback~* .tiles,.panel .tierback~.tier .tiles{max-height:none}
  /* the chooser replaces the grid entirely, so the two-row cap only belongs
     on the steps that really do have more tiles than fit */
  #panel .tierback~.tier .tiles{max-height:none;overflow:visible}
}

/* ---- v27c ---------------------------------------------------------------- */
@media(max-width:1000px){
  .bowl-caption,.totals,#bowlArt{align-self:center;justify-self:center}
  .bowl-caption{text-align:center;width:100%}
}

/* ========================= v28 - round 19 ================================= */

/* --- O1 - the rating sits with the other trust figures ------------------- */
.trust .gstar{color:#F5A623;font-size:.88em;vertical-align:.02em}

/* --- O4 - the two social marks read as a pair, not opposite ends of a row - */
.ftr-social{justify-content:flex-start;gap:24px;flex-wrap:wrap}
.ftr-social a{gap:8px}
.ftr-social svg{width:18px;height:18px}

/* --- O5 - justified body copy, with hyphenation doing the work -----------
   Justify on a narrow column opens rivers unless the text can break, so
   hyphens stay on at every width. This is the one thing to re-check on a real
   phone: if any paragraph looks gappy, the fix is to drop back to left. */
.lede,.craft-body p,.faq p,.sig .sig-note,.story p,.outlet .ad{
  text-align:justify;-webkit-hyphens:auto;hyphens:auto;
}
.trust div,.mini span,.fmt span{text-align:left;hyphens:manual}

/* --- O6 - the footer base row stays one line where there is room --------- */
@media(max-width:760px){
  .ftr-base{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
  .ftr-site{flex:1 1 auto}
}

/* --- O7 / M7 - the Midtown band was carrying a whole screen of air ------- */
#next{padding-top:clamp(20px,3vw,34px)}

/* --- the question folds, tighter ---------------------------------------- */
.faqfold{margin-top:12px}
@media(max-width:760px){
  #outlets .faqfold{margin-top:10px;margin-bottom:0}
  .faqfold>summary{padding-block:14px}
}

/* --- M5 - catering leads as loudly as the other sections ----------------- */
#catering h2{font-size:clamp(34px,7vw,64px)}

/* --- M1 - a bigger hero bowl -------------------------------------------- */
@media(max-width:760px){
  .hero-phone{width:min(288px,74%)}
}

/* --- M3 - one screen: bowl, then name and total on one row, then Base ---- */
@media(max-width:1000px){
  .bowl-col{
    display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;
    justify-content:center;align-items:center;column-gap:12px;row-gap:8px;
    padding:0 0 12px;
  }
  #bowlArt{grid-column:1/span 2;grid-row:1;width:min(190px,46vw);justify-self:center}
  .pf-bowl-svg{width:100%}
  .bowl-caption{grid-column:1;grid-row:2;text-align:right;width:auto;margin:0}
  .bowl-caption .nm{font-size:18px}
  .totals{grid-column:2;grid-row:2;margin:0}
}

/* ---- v28d: the catering spread replaces the round placeholder ------------ */
.cater-spread{width:min(520px,100%);height:auto;display:block;margin-inline:auto;border-radius:20px}
.cater-photo::before{display:none}
@media(max-width:760px){.cater-spread{width:min(340px,92%);border-radius:16px}}

/* ---- v28f ---------------------------------------------------------------- */
/* The fold is a whole section of its own; it only needs the air a fold needs. */
#questions{padding-block:clamp(14px,2vw,26px)}
#questions .faqfold{margin:0}
@media(max-width:760px){
  #questions{padding-block:12px}
  #questions .faqfold>summary{padding-block:15px}
}


/* ========================= v30 - round 20 ================================= */

/* --- 1 - the lockup, 30% bigger. 38 -> 49 desktop, 34 -> 44 on phones.
       Overrides .hdr-logo img at 1212 and its 560 twin at 1263; same
       specificity (0,1,1), later in the file, so this is the one that lands. */
.hdr-logo img{height:49px}
@media(max-width:560px){.hdr-logo img{height:44px}}
@media(max-width:380px){.hdr-logo img{height:40px}}

/* --- 13 - the WhatsApp floater, 20% bigger. 56 -> 67, 54 -> 65. ---------- */
.wafloat{width:67px;height:67px}
.wafloat svg{width:36px;height:36px}
@media(max-width:560px){
  .wafloat{width:65px;height:65px}
  .wafloat svg{width:35px;height:35px}
}

/* --- 2 - the four trust figures become two rows of two on desktop, so
       pork-free and the Google rating read as their own line rather than
       as the ragged tail of the first one. Phones keep the flex wrap. */
@media(min-width:761px){
  .hero .trust{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px clamp(14px,2.4vw,30px);
  }
}

/* --- 3 - the eight cards share a baseline. Two title lines are reserved
       above 760px, which is the only width where a name wraps (Gochujang
       Salmon did, and pushed its whole card 28px down). Below 760 the card
       is full width, the name never wraps, and reserving would only add
       empty space to a screen we spent the last two rounds tightening. */
@media(min-width:761px){
  .sig h3{min-height:calc(2 * 1.14em)}
}

/* --- 5 - the summary card, tightened. Same information, ~90px shorter,
       so the bowl and the green card can share one screen. ---------------- */
.done-card{padding:clamp(15px,1.8vw,22px);margin-top:12px}
.done-card h3{font-size:clamp(19px,1.7vw,22px);margin-bottom:4px}
.done-card>p{font-size:13px;line-height:1.45;color:var(--cream-55)}
.done-lines{margin-top:11px;font-size:13px}
.done-lines li{padding:5px 0;gap:10px;grid-template-columns:78px 1fr}
.done-lines .k{font-size:10px;padding-top:2px}
.done-cta{margin-top:14px}
@media(max-width:560px){
  .done-card{padding:14px 14px 16px}
  .done-lines{font-size:12.5px}
  .done-lines li{padding:4px 0}
  .done-cta .btn{width:100%}
}

/* --- 5 - the folded step. Once "See my bowl" is pressed the tile grid
       collapses to a single line, because the choice is made and the card
       underneath is the thing being read. Tapping it opens the tiles again. */
.panel-folded{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:#fff;border:0;border-radius:var(--r);cursor:pointer;
  padding:clamp(13px,1.5vw,17px) clamp(14px,1.8vw,20px);
  box-shadow:0 3px 0 rgba(35,83,38,.05);
  font-family:var(--text);color:var(--forest);
  transition:box-shadow .22s var(--ease);
}
.panel-folded:hover{box-shadow:0 3px 0 rgba(35,83,38,.12)}
.panel-folded .pf-t{font-family:var(--display);font-weight:900;font-size:17px;letter-spacing:-.01em}
.panel-folded .pf-n{font-size:12.5px;color:var(--ink-55);margin-left:auto;text-align:right}
.panel-folded .pf-e{
  font-size:11px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;
  color:var(--green);flex:none;
}
.panel-folded .pf-ok{
  width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;flex:none;
  display:grid;place-items:center;font-size:14px;font-weight:900;
}
@media(max-width:560px){
  .panel-folded{padding:12px 13px;gap:9px}
  .panel-folded .pf-t{font-size:15.5px}
  .panel-folded .pf-n{font-size:11.5px}
  .panel-folded .pf-e{font-size:10px;letter-spacing:.09em}
}

/* --- 8 - the catering photo. .cater-spread on its own is (0,1,0) and lost
       every argument with .cater-photo img (0,1,1) at line 575 and in six
       media queries below it, so the round-19 sizing never actually took.
       Restated at (0,2,1), which wins at every width. */
.cater-photo img.cater-spread{
  width:100%;max-width:520px;height:auto;display:block;margin-inline:auto;
  border-radius:20px;box-shadow:0 22px 44px -26px rgba(29,42,28,.5);
}
@media(max-width:900px){
  .cater-photo img.cater-spread{max-width:none;border-radius:16px}
}

/* --- 11 - the catering block on a phone -------------------------------- */
@media(max-width:760px){
  /* photo first, edge to edge inside the wrap, so it reads as a picture of
     a real catering drop rather than a thumbnail floating on sand */
  .cater-photo{order:-1;padding:0;display:block}
  #catering .cater-grid{gap:16px}

  /* the three figures fit one row: 17px display type instead of 26px, and
     a hairline between them so they read as a set */
  #catering .minis{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;padding:12px 0 0;margin-top:2px;
  }
  #catering .minis .mini{padding-left:12px;border-left:1px solid var(--line)}
  #catering .minis .mini:first-child{padding-left:0;border-left:0}
  #catering .mini b{font-size:17px;line-height:1.1}
  #catering .mini span{font-size:8.6px;letter-spacing:.1em;margin-top:3px}

  /* one full-width action, and room for the fold under it */
  #catering .cater-cta{display:block;margin-top:16px}
  #catering .cater-cta .btn{display:block;width:100%;text-align:center}
  #catering .faqfold{margin-top:18px}
}
@media(max-width:380px){
  #catering .mini b{font-size:15.5px}
  #catering .minis .mini{padding-left:9px}
}

/* --- 11 - the two folds get a quiet label, so a phone reader knows what is
       inside before opening one, and the tap target keeps its height ------ */
.faqfold>summary{gap:14px}

/* --- 9 + 10 - the footer ------------------------------------------------ */
/* the lockup is the fish AND the word now, so it is sized by height and the
   tagline hangs under it */
.ftr .fishmark{height:30px;width:auto;filter:brightness(1.35)}
.ftr .tagline{margin-top:18px}

/* 10 - the three link columns run on one rhythm. Talk-to-us rows were 15px
   with an icon and Outlets rows were 14px plain, so row two of one column
   sat 20px below row two of the next. One row height fixes all three. */
@media(min-width:861px){
  .ftr-grid>div>a,.ftr-talk a.big{
    min-height:32px;display:flex;align-items:center;padding-block:0;margin-block:3px;
  }
  .ftr-social{margin-top:9px}
}

/* 12 - the base is two rows on a phone: the company on one, everything else
   on the next. The hours are the part that pushes it to three, so they step
   out below 560 where they are already stated twice on the page. */
.ftr-base{gap:6px 18px}
@media(max-width:640px){
  .ftr-base{flex-direction:column;align-items:flex-start;gap:3px}
  .ftr-base>span{display:block}
  .ftr-hrs{display:none}
}

/* ---- v30b --------------------------------------------------------------- */
/* .panel is (0,1,0); .panel.folded is (0,2,0), so the card style steps aside
   for the folded line whatever the source order says. */
.panel.folded{background:transparent;box-shadow:none;padding:0}

/* the fold scrolls the bowl to the top of the screen, and the sticky header
   is 74px of it, plus the phone bar */
.bowl-col{scroll-margin-top:calc(74px + 14px)}
@media(max-width:1000px){.bowl-col{scroll-margin-top:calc(74px + var(--phbar) + 12px)}}

/* ---- v32 ---------------------------------------------------------------- */
/* a) a plain number, because --phbar is `auto` under 1000px and calc() with
      a keyword in it is invalid, which silently drops the whole property */
@media(max-width:1000px){.bowl-col{scroll-margin-top:88px}}

/* b) */
.ftr-hrs{font-style:normal}

/* c) the third row of the three columns now lines up too */
@media(min-width:861px){
  .ftr-social{margin-top:0}
  .ftr-social a{min-height:32px;display:flex;align-items:center;margin-block:3px}
}

/* d) the last line of the page is not the floater's to sit on */
@media(max-width:640px){
  .ftr{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* ---- v32b --------------------------------------------------------------- */
@media(max-width:760px){
  #catering .minis .mini{min-width:0}
  #catering .mini b{font-size:clamp(13.6px,4.3vw,17px)}
}
@media(max-width:380px){
  #catering .mini b{font-size:clamp(13.6px,4.3vw,15.5px)}
}

/* ---- v33 ---------------------------------------------------------------- */
@media(max-width:760px){
  /* the three cells share two rows, so the labels stay on one line even if a
     figure above them takes two. .mini keeps its box, so the hairline and the
     padding still belong to it - which is what display:contents would cost. */
  #catering .minis{grid-template-rows:auto auto;align-items:end}
  #catering .minis .mini{
    display:grid;grid-template-rows:subgrid;grid-row:span 2;align-content:end;
  }
  #catering .minis .mini{padding-left:10px}
  #catering .minis .mini:first-child{padding-left:0}

  /* measured in Fraunces 900: 'From RM19.90' is 122px at 17px and the column
     is (100vw - 40px)/3, so the figure has to ride the viewport, not a
     breakpoint. 3.7vw clears it from 320 all the way up. */
  #catering .mini b{font-size:clamp(11.8px,3.7vw,17px)}
}
@media(max-width:380px){
  /* the 380 step from v32b is now doing the opposite of its job */
  #catering .mini b{font-size:clamp(11.8px,3.7vw,17px)}
}
@supports not (grid-template-rows: subgrid){
  @media(max-width:760px){
    #catering .minis .mini{display:block}
  }
}

/* ---- v34 ---------------------------------------------------------------- */
/* a) a grid item's automatic minimum size is its content, not zero. Every
      column in this file that holds a nowrap row needs saying out loud. */
.hero-grid>*{min-width:0}
@media(max-width:360px){
  /* below 360 the two hero buttons stop pretending they fit side by side */
  .hero .hero-cta{flex-wrap:wrap}
  .hero .hero-cta .btn{flex:1 1 100%}
}

/* b) */
@media(max-width:380px){
  #catering .mini span{font-size:8px;letter-spacing:.06em}
}

/* ---- v35 ---------------------------------------------------------------- */
@media(max-width:760px){
  .sig h3{font-size:clamp(19px,5.9vw,22px)}
}

/* ---- v37 ---------------------------------------------------------------- */
/* (0,2,0) beats every .wafloat rule in this file, whatever the source order */
.wafloat.stood-down{
  opacity:0;transform:scale(.72);pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
@media(prefers-reduced-motion:reduce){.wafloat.stood-down{transition:none}}


/* ========================= v42 - round 21 ================================= */

/* --- a) the fish swims in closer. It was starting a third of the way across
       the page, out on its own; it now sits just off the tail of
       "delicious." The clamp's upper stop is unchanged, so phones - where
       the headline runs the full width - are untouched. */
.swim{margin-left:clamp(-240px,-16.7vw,-85px)}

/* --- b) the flow line is the CTA's width. Wrapping the pair in an
       inline-flex column means the line inherits the button's measure
       exactly, instead of a max-width guessed against a font. */
.cater-cta{display:inline-flex;flex-direction:column;align-items:stretch;gap:10px}
.cater-cta .btn{text-align:center}
.cater-cta .flow{margin:0;text-align:center;line-height:1.5}
@media(max-width:760px){
  #catering .cater-cta{display:block}
  #catering .cater-cta .flow{margin-top:10px}
}

/* --- c) the summary card ------------------------------------------------ */
/* the step icons are drawn in their own dark step colours, which vanish on
   forest, so the card lightens them. A CSS fill beats the presentation
   attribute stepIcon() writes, no !important needed. */
.done-lines li{grid-template-columns:112px 1fr}
.done-lines .k{display:flex;align-items:center;gap:7px;padding-top:0}
.done-lines .ri{width:15px;height:15px;flex:none;fill:#8FD08F}
.done-lines .ri-none{width:15px;height:15px;flex:none}
.done-lines li.tot{border-top-width:2px;border-top-color:rgba(244,242,236,.3)}
.done-lines li.tot .k{padding-left:22px}
.done-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.done-cta .btn-light{background:rgba(244,242,236,.13);color:var(--cream);border:1px solid rgba(244,242,236,.3)}
.done-cta .btn-light:hover{background:rgba(244,242,236,.22)}
.done-cta .btn[disabled]{opacity:.6;pointer-events:none}
.done-card .saved{
  font-size:12.5px;color:#8FD08F;font-weight:700;margin:11px 0 0;min-height:1.15em;
}
@media(max-width:560px){
  .done-lines li{grid-template-columns:100px 1fr}
  .done-cta{display:grid;grid-template-columns:1fr;gap:8px}
  .done-cta .btn{width:100%}
}

/* --- d) the hero bowl on phones, larger --------------------------------- */
@media(max-width:760px){
  .hero-phone{width:min(300px,80%)}
}
@media(max-width:380px){
  .hero-phone{width:min(268px,84%)}
}

/* --- e) the mobile footer gave up 96px so the floater would not sit on the
       company line. The floater now fades out over Talk-to-us, which is on
       the same screen, so the room was being held for nothing. */
@media(max-width:640px){
  .ftr{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
}


/* ========================= v49 - round 22 ================================= */

/* --- 1 - one heading size for every band on a phone --------------------- */
@media(max-width:760px){
  .sect-head h2,.story-head h2{font-size:clamp(34px,10.5vw,46px)}
  /* #next h2 is (1,0,1) and set at 9vw, so it needs saying at its own
     weight rather than through .sect-head */
  #next h2{font-size:clamp(32px,9.6vw,44px)}
}

/* --- 2 - the catering band, on one screen through to the button --------- */
@media(max-width:760px){
  #catering{padding-top:28px;padding-bottom:30px}
  #catering .sect-head{gap:10px}
  #catering .lede{font-size:14.5px;line-height:1.5}
  #catering .cater-grid{gap:14px}

  /* a band rather than a square: the photo is a repeating pattern of bowls,
     so a shallower crop loses nothing and gives back 65px */
  .cater-photo img.cater-spread{aspect-ratio:16/9;object-fit:cover}

  #catering .fmt{padding-block:9px;gap:10px}
  #catering .fmt b{font-size:15.5px}
  #catering .fmt span{font-size:12px;line-height:1.35}
  #catering .fic{width:26px;height:26px}
  #catering .minis{padding-top:10px}
  #catering .cater-cta{margin-top:12px}
  #catering .faqfold{margin-top:14px}
}

/* --- 3 - the protein step scrolls in one piece -------------------------- */
/* Every other step is a single grid of tiles capped at two rows. The protein
   step is two labelled groups, so capping each one still left a panel three
   rows and two headings tall. One scroller around the whole body behaves the
   way the other four steps do. :has() is the only way to say "the body that
   has groups in it" without a class from app.js. */
@media(max-width:760px){
  .panel-scroll:has(.tier){
    max-height:calc(var(--tilerow,78px) * 2 + 78px);
    overflow-y:auto;overscroll-behavior-y:contain;
    scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  }
  .panel-scroll:has(.tier) .tiles{max-height:none;overflow:visible}
  .panel-scroll:has(.tier)::-webkit-scrollbar{width:4px}
  .panel-scroll:has(.tier)::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
}

/* --- 4 - the two actions share the row --------------------------------- */
@media(max-width:560px){
  .done-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .done-cta .btn{width:100%;padding-inline:6px;font-size:12px;letter-spacing:.03em}
}
@media(max-width:340px){
  .done-cta .btn{font-size:11px}
}

/* --- 5 - room for the floater at the very bottom of the page ------------ */
@media(max-width:640px){
  .ftr{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
}

/* ---- v49b --------------------------------------------------------------- */
@media(max-width:760px){
  #catering h2{font-size:clamp(34px,10.5vw,46px)}
  #catering{padding-top:20px}
  #catering .sect-head{gap:8px}
}

/* ---- v49c --------------------------------------------------------------- */
@media(max-width:760px) and (max-height:820px){
  #catering{padding-top:14px}
  .cater-photo img.cater-spread{aspect-ratio:2/1}
  #catering .lede{font-size:13.5px;line-height:1.45}
  #catering .fmt{padding-block:7px}
  #catering .fmt span{font-size:11.5px}
  #catering .minis{padding-top:6px}
  #catering .cater-cta{margin-top:10px}
}

/* ---- v49d --------------------------------------------------------------- */
/* the 2016 SE, 320x568: 493px of usable screen and 12px still to find */
@media(max-width:340px) and (max-height:800px){
  .cater-photo img.cater-spread{aspect-ratio:5/2}
}


/* ========================= v53 - round 23 ================================= */

/* --- a) #questions is the fold now, not a section around it -------------- */
/* The old rules set padding-block on a section and margins on a .faqfold
   inside it. Both selectors still match something - the first now pads the
   fold itself - so they are restated rather than left to misfire. */
#questions{padding-block:0}
#outlets>.faqfold{margin-top:clamp(20px,2.6vw,34px);margin-bottom:0}
#outlets>.faqfold>summary{font-size:17.5px}
@media(max-width:760px){
  #outlets>.faqfold{margin-top:16px}
  #outlets>.faqfold>summary{padding-block:15px;font-size:16px}
}

/* --- b) the printed menu ------------------------------------------------ */
.menu-dl{
  margin-top:clamp(26px,3.4vw,44px);padding-top:clamp(22px,2.6vw,32px);
  border-top:1px solid var(--line);
  display:flex;align-items:center;gap:clamp(14px,2.4vw,28px);flex-wrap:wrap;
}
.menu-dl .btn{display:inline-flex;align-items:center;gap:9px;flex:none}
.menu-dl .btn svg{width:17px;height:17px;flex:none}
.menu-dl p{
  margin:0;flex:1 1 320px;min-width:0;
  font-size:13.5px;line-height:1.55;color:var(--ink-55);
}
@media(max-width:760px){
  .menu-dl{
    margin-top:20px;padding-top:18px;
    flex-direction:column;align-items:stretch;gap:10px;
  }
  .menu-dl .btn{justify-content:center;width:100%}
  /* flex-basis is the HEIGHT once the direction is column, so the 320px
     that sets a sensible line length on desktop was setting a 320px-tall
     paragraph here */
  .menu-dl p{flex:0 0 auto;font-size:12.5px;text-align:center}
}

/* --- c) the hours sit with the outlets they belong to ------------------- */
.ftr-hours{
  margin:10px 0 0;font-size:13px;color:rgba(244,242,236,.5);
}
@media(max-width:860px){.ftr-hours{margin-top:6px;font-size:12.5px}}

/* --- d) the floater is always there ------------------------------------- */
/* It is the one control on the page that is meant to be reachable from
   anywhere, so it no longer fades for anything. Where it lands on top of
   something it does so in front of it, which is what a floating button is. */
.wafloat.stood-down{opacity:1;transform:none;pointer-events:auto}

/* and the footer stops holding a button's worth of green open. The company
   line is the last thing on the page again. */
@media(max-width:640px){
  .ftr{padding-bottom:calc(26px + env(safe-area-inset-bottom))}
}


/* ========================= v58 - round 25 ================================= */

/* --- 1 - less air above every band on desktop --------------------------- */
/* 4.6vw put 66px above and 66px below, and the bands sit flush, so the gap
   a reader actually sees was 132px. 3.5vw makes it 100. Phones keep their
   own value, set right after, because they were never the complaint. */
:root{--sect:clamp(42px,3.5vw,58px)}
@media(max-width:760px){:root{--sect:clamp(36px,6.5vw,50px)}}
/* #build sets padding-block itself at (1,0,0); --sect cannot reach it */
#build{padding-block:clamp(46px,4.4vw,66px)}

/* --- 2 - the phone hero bowl, larger again ------------------------------ */
@media(max-width:760px){
  .hero-phone{width:min(330px,88%)}
}
@media(max-width:380px){
  .hero-phone{width:min(296px,90%)}
}

/* --- 3 - the menu button stands on its own ------------------------------ */
/* the sentence beside it was what balanced a full-width row; with the button
   alone, centred under the rule reads as placed rather than left over */
.menu-dl{display:block;text-align:center}
.menu-dl .btn{display:inline-flex}
@media(max-width:760px){
  .menu-dl .btn{display:flex;width:100%;justify-content:center}
}

/* --- 4 - the catering button fits its phrase ---------------------------- */
/* stretch was making the button as wide as the line under it. Centre puts
   both at their natural width, stacked on one axis. */
.cater-cta{align-items:center}
/* round 33: flush left with the flow line under it, not centred in the column */
.cater-cta .btn{align-self:flex-start}
.cater-cta .flow{text-align:left}

/* ---- v59 ---------------------------------------------------------------- */
/* --- 1 - one sentence per screen size ----------------------------------- */
.phone-only{display:none}
@media(max-width:760px){
  .wide-only{display:none}
  .phone-only{display:inline}
  #build .lede{font-size:15px}
}

/* --- 3 - the two actions, their own width, centred as a pair ------------ */
@media(max-width:560px){
  .done-cta{
    display:flex;flex-wrap:nowrap;justify-content:center;align-items:stretch;gap:8px;
  }
  .done-cta .btn{width:auto;flex:0 1 auto;padding-inline:14px}
}

/* --- 4 - the footer mark, then the line under it ------------------------ */
@media(max-width:860px){
  .ftr-brand{display:block}
  .ftr .tagline{margin:12px 0 0}
  .ftr .tagline br{display:none}
}

/* ---- v60 ---------------------------------------------------------------- */
@media(max-width:760px){
  /* only once "See my bowl" has folded the step away */
  #build:has(.panel.folded){padding-top:22px;padding-bottom:26px}
  #build:has(.panel.folded) .sect-head{margin-bottom:8px;gap:6px}
  #build:has(.panel.folded) .lede{display:none}
  #build:has(.panel.folded) .build-grid{gap:10px}
  #build:has(.panel.folded) #bowlArt{width:min(124px,32vw)}
  #build:has(.panel.folded) .bowl-col{padding-bottom:4px;gap:2px}
  #build:has(.panel.folded) .bowl-caption .nm{font-size:16px}

  #build:has(.panel.folded) .done-card{padding:12px 13px 14px;margin-top:10px}
  #build:has(.panel.folded) .done-card h3{font-size:18px}
  #build:has(.panel.folded) .done-card>p{display:none}
  #build:has(.panel.folded) .done-lines{margin-top:8px;font-size:12px}
  #build:has(.panel.folded) .done-lines li{padding:3px 0}
  #build:has(.panel.folded) .done-cta{margin-top:11px}
  #build:has(.panel.folded) .done-card .saved{min-height:0;margin-top:8px}
}

/* short screens: the same finished state, wound in further. Measured against
   a 360x780 Galaxy (705px usable) and a 375x667 SE (592px). */
@media(max-width:760px) and (max-height:820px){
  #build:has(.panel.folded){padding-top:14px;padding-bottom:18px}
  #build:has(.panel.folded) .eyebrow{display:none}
  #build:has(.panel.folded) h2{font-size:clamp(28px,8.4vw,34px)}
  #build:has(.panel.folded) #bowlArt{width:min(96px,26vw)}
  #build:has(.panel.folded) .bowl-caption .nm{font-size:15px}
  #build:has(.panel.folded) .done-lines{font-size:11.5px}
  #build:has(.panel.folded) .done-lines li{padding:2px 0;grid-template-columns:92px 1fr}
  #build:has(.panel.folded) .done-card h3{font-size:16.5px}
  #build:has(.panel.folded) .panel-folded{padding:9px 12px}
}

/* Below 700px of screen the heading has to go too, in the finished state
   only. Someone who has just pressed "See my bowl" knows what section they
   are in; the bowl and the summary are what they came for. Building the bowl
   still shows the heading at every size. */
@media(max-width:760px) and (max-height:700px){
  #build:has(.panel.folded) .sect-head{display:none}
  #build:has(.panel.folded){padding-top:10px}
  #build:has(.panel.folded) .done-card{padding:11px 12px 12px}
}
@media(max-width:760px) and (max-height:660px){
  #build:has(.panel.folded) .done-card{margin-top:6px}
  #build:has(.panel.folded) .done-cta{margin-top:6px}
  #build:has(.panel.folded) .done-cta .btn{padding-block:12px}
}

/* ---- v61 ---------------------------------------------------------------- */
/* the last ~50px of the finished screen. It buys two things at once: the
   whole section inside a phone, and the two buttons above the floater rather
   than underneath it. */
@media(max-width:760px){
  #build:has(.panel.folded) .done-lines{font-size:11.5px}
  #build:has(.panel.folded) .done-lines li{padding:2px 0}
  #build:has(.panel.folded) .done-card{padding-bottom:11px}
  #build:has(.panel.folded) #bowlArt{width:min(110px,29vw)}
  #build:has(.panel.folded) .bowl-caption{margin-top:0}
  #build:has(.panel.folded) .totals{padding-block:4px}
}

/* On a short phone the summary reaches the bottom of the screen, which is
   where the floater lives, so the pair steps left out from under it rather
   than the floater stepping aside. Left inside a right-padded row reads as
   placed; a button half-covered by a green circle does not. */

/* The floater is always on now, bottom right, so no primary action may run
   underneath it. The builder's Next step is the one that lands there most
   often - the panel footer is the last row of a tall panel. */

/* ---- v63 ---------------------------------------------------------------- */
/* The floater moves instead of the page. --lift is written by app.js each
   frame near the bottom of the page; :hover has to repeat the translate or
   the button would drop back down under the cursor. */
/* --lift is written per scroll frame, so it rides `bottom` rather than
   `transform`: transform carries a .26s transition and would lag the scroll,
   and it is needed for the hover scale anyway. */
.wafloat{bottom:calc(20px + env(safe-area-inset-bottom) + var(--lift, 0px))}
@media(max-width:560px){
  .wafloat{bottom:calc(16px + env(safe-area-inset-bottom) + var(--lift, 0px))}
}
.wafloat.is-away{opacity:0;pointer-events:none;transform:scale(.72)}
@media(prefers-reduced-motion:reduce){.wafloat{transition:none}}

/* ---- v69 ---------------------------------------------------------------- */
/* the footer's quiet tier was cream at 50% on forest - 3.27:1. At 70% it is
   4.84:1 and still plainly the quiet tier. */
.ftr{color:rgba(244,242,236,.78)}
.ftr a{color:rgba(244,242,236,.78)}
.ftr-hours{color:rgba(244,242,236,.7)}
.ftr-base{color:rgba(244,242,236,.7)}
.ftr-social svg{fill:rgba(244,242,236,.72)}


/* ========================= v71 - round 28 ================================= */

/* --- 2 - do not download what is not on the screen ---------------------- */
/* Measured on a 390px phone: 719KB of images on first paint against FOUR
   images actually visible. loading="lazy" does not help on its own - the
   threshold is about a screen and a half, so everything below the hero loads
   whether or not anyone scrolls. A lazy image inside a content-visibility:auto
   subtree that has not come near the screen is not fetched at all. Measured
   after: 135KB, same page height, no broken images once scrolled.
   The intrinsic sizes carry `auto`, so each box is measured once and
   remembered; the number is only the guess for the very first pass.

   ROUND 31 - the same rule on the individual CARDS has been taken out. A phone
   rail lays all eight cards in ONE grid row, and a skipped card reports its
   intrinsic height (470px) rather than its real one (398px). The tallest item
   sets the row height, so seven cards nobody could see were inflating the row
   by 72px and dropping the dots 88px below the artwork instead of 16px.
   contain-intrinsic-height:auto none and :auto 0 were both measured first and
   both collapse the entire rail to zero in WebKit - size containment applies
   to the on-screen card as well, so there is nothing left to set the row.
   The cost of removing it is one 69KB picture (the first signature bowl) that
   may now arrive during first paint instead of on approach; the rest of the
   saving lives in the section-level rule below, which is untouched. */
#menu,#craft,#story,#outlets,#catering,#next{
  content-visibility:auto;
  contain-intrinsic-width:none;
  contain-intrinsic-height:auto 880px;
}
/* the frame, not the card: .craft-art is aspect-ratio:4/3 (16/10 on phones) at
   every width, so it keeps its height while its contents are skipped */
.craft-grid > .craft .craft-art{
  content-visibility:auto;
  contain-intrinsic-size:none;
}

/* --- 3 - the finished bowl is the size it was while being built --------- */
@media(max-width:760px){
  #build:has(.panel.folded) #bowlArt{width:min(190px,46vw)}
}
@media(max-width:760px) and (max-height:820px){
  #build:has(.panel.folded) #bowlArt{width:min(160px,40vw)}
}

/* ---- v72 ---------------------------------------------------------------- */
@media(max-width:860px){
  .ftr{padding-top:18px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .ftr-grid{gap:8px 18px}
  .ftr .fishmark{height:26px}
  .ftr .tagline{margin-top:8px;font-size:17px}
  .ftr h4{margin-bottom:2px}
  .ftr-talk a.big{font-size:14.5px;padding:6px 0;min-height:0}
  .ftr a{font-size:13px;padding:5px 0}
  .ftr-social{margin-top:4px}
  .ftr-social a{padding:5px 0}
  .ftr-hours{margin-top:5px;font-size:12px}
  .ftr-base{margin-top:12px;padding-top:10px;font-size:11px}
}
@media(max-width:560px){
  .ftr-talk a.big{min-height:0}
}
@media(max-width:560px){
  /* the floor is the tap targets: 13px text on 5px of padding is a 24px row,
     which is the smallest WCAG allows. Everything above this line is padding
     and rhythm; nothing below it may come out of the rows. */
  .ftr-grid{gap:6px 16px}
  .ftr .tagline{font-size:16px;margin-top:6px}
  .ftr-base{margin-top:10px;padding-top:9px}
}


/* ========================= v79 - round 30 ================================= */

/* --- the header is fixed on phones, not sticky -------------------------- */
/* sticky is relative to a scroll container, and which box that turns out to
   be depends on how every ancestor computes overflow - which is exactly what
   went wrong once already and is not worth a second chance on the one element
   that must never be missing. fixed has no such dependency.
   body gives the height back so nothing else moves. */
@media(max-width:760px){
  .hdr{
    position:fixed;left:0;right:0;top:0;
    /* a blurred backdrop on a fixed, composited layer is the most bug-prone
       thing on iOS, and cream over cream was buying almost nothing */
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(244,242,236,.97);
  }
  body{padding-top:75px}
  /* the hero used to sit under a header that took up room in the flow */
  .hero{padding-top:clamp(14px,3vw,26px)}
}


/* ========================= v93 - round 32 ================================= */

/* --- 4 - Surprise me ---------------------------------------------------- */
/* Under step one, not in the section head: on arrival the choice is either
   work through the five steps or have the bowl built for you, and both have to
   be visible at the same moment for that to be a choice. */
.surprise-row{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:16px;
}
.surprise-row>span{font-size:13.5px;color:var(--ink-55)}
.surprise{display:inline-flex;align-items:center;gap:8px}
.surprise svg{width:17px;height:17px;flex:none}
@media(max-width:760px){
  .surprise-row{gap:10px;margin-top:13px}
  .surprise-row>span{font-size:13px}
  .surprise{padding:13px 20px}
}
/* nothing left to surprise once the bowl is finished - and on a phone the
   finished screen is measured from the top of the section, where every pixel
   is already spoken for */
#build:has(.panel.folded) .surprise-row{display:none}

/* --- 5 - the order block on the finished card --------------------------- */
/* It lives inside .done-card, which is forest on cream-80, so everything here
   is a tint of the cream rather than a new colour. */
.order-box{margin-top:16px;padding-top:14px;border-top:1px solid rgba(244,242,236,.16)}
.ob-lb{font-size:10.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
       color:var(--cream-55);margin-bottom:8px}
.ob-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.obc{font-family:var(--text);font-size:13px;font-weight:700;color:var(--cream-80);
     padding:8px 15px;border-radius:999px;border:1.5px solid rgba(244,242,236,.3);
     background:none;transition:background .2s,color .2s,border-color .2s}
.obc:hover{border-color:rgba(244,242,236,.6)}
.obc.on{background:var(--cream);border-color:var(--cream);color:var(--forest)}

.ob-opt{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;
        gap:11px;padding:10px 12px;margin-bottom:7px;border-radius:12px;cursor:pointer;
        border:1.5px solid rgba(244,242,236,.16);transition:border-color .2s,background .2s}
.ob-opt.on{border-color:rgba(244,242,236,.34);background:rgba(244,242,236,.07)}
/* the native box carries the keyboard and the screen reader; the drawn one
   carries the look, so neither has to be reinvented */
.ob-opt input{position:absolute;opacity:0;width:0;height:0}
.ob-box{width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(244,242,236,.45);
        display:block;position:relative;transition:background .18s,border-color .18s}
.ob-opt.on .ob-box{background:var(--cream);border-color:var(--cream)}
.ob-opt.on .ob-box::after{content:"";position:absolute;left:6.5px;top:2.5px;width:5px;height:10px;
        border:solid var(--forest);border-width:0 2.4px 2.4px 0;transform:rotate(43deg)}
.ob-opt input:focus-visible + .ob-box{outline:2px solid var(--cream);outline-offset:2px}
.ob-txt{display:block;min-width:0}
.ob-txt b{display:block;font-family:var(--text);font-size:14px;font-weight:700;color:var(--cream)}
.ob-txt i{display:block;font-style:normal;font-size:11.5px;line-height:1.35;color:var(--cream-55);margin-top:1px}
.ob-amt{font-size:13px;font-weight:700;color:var(--cream-80);white-space:nowrap}

.ob-sum{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(244,242,236,.16)}
.ob-sum>div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:3px 0}
.ob-sum dt{font-size:13px;color:var(--cream-55)}
.ob-sum dd{margin:0;font-size:13px;color:var(--cream-80)}
.ob-tot{margin-top:6px;padding-top:9px;border-top:1px solid rgba(244,242,236,.16)}
.ob-tot dt{font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--cream)}
.ob-tot dd{font-family:var(--display);font-weight:900;font-size:clamp(21px,2.2vw,25px);color:var(--orange)}

/* a phone reads the same block with less air around it */
@media(max-width:760px){
  .order-box{margin-top:12px;padding-top:11px}
  .ob-lb{margin-bottom:6px}
  .ob-chips{gap:6px;margin-bottom:9px}
  .obc{padding:9px 14px;font-size:12.5px}
  .ob-opt{padding:8px 10px;margin-bottom:6px;gap:10px}
  .ob-txt b{font-size:13.5px}
  .ob-txt i{font-size:11px}
  .ob-sum{margin-top:11px;padding-top:9px}
  .ob-sum>div{padding:2px 0}
  .ob-tot{margin-top:4px;padding-top:7px}
}

/* --- 5b - the finished bowl still has to be one screen ------------------ */
@media(max-width:760px){
  #build:has(.panel.folded) .sect-head .eyebrow,
  #build:has(.panel.folded) .sect-head .lede{display:none}
  #build:has(.panel.folded) .sect-head h2{font-size:clamp(24px,7vw,30px)}
  #build:has(.panel.folded) .sect-head{margin-bottom:8px}
  /* the card underneath names the protein and prices the bowl, in those words */
  #build:has(.panel.folded) .bowl-caption,
  #build:has(.panel.folded) .totals{display:none}
  #build:has(.panel.folded) .done-card>p{display:none}
  #build:has(.panel.folded) .done-card h3{font-size:18px;margin-bottom:8px}
  #build:has(.panel.folded) .done-lines{margin-top:8px}
  #build:has(.panel.folded) .done-lines li{padding:3.5px 0}
  #build:has(.panel.folded) .done-cta{margin-top:13px}
}

/* --- 5c - the same block, phone-tight ----------------------------------- */
@media(max-width:760px){
  /* the label is four words; it does not need a line of its own */
  .order-box{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 12px;
             align-items:center;margin-top:11px;padding-top:10px}
  .ob-lb{margin:0;grid-column:1;grid-row:1}
  .ob-chips{grid-column:2;grid-row:1;margin:0;justify-content:flex-end}
  .ob-opt{grid-column:1 / -1;margin-top:9px;margin-bottom:0;padding:7px 10px}
  .ob-opt + .ob-opt{margin-top:6px}
  .ob-txt i{margin-top:0}
  .ob-sum{grid-column:1 / -1;margin-top:10px;padding-top:9px}
  .ob-sum>div{padding:1.5px 0}
  .ob-tot{margin-top:3px;padding-top:6px}
  .ob-tot dd{font-size:22px}

  /* the rail is display:none while the bowl is folded, but its margin was
     still holding sixteen pixels open */
  #build:has(.panel.folded) .steps-nav{margin:0}
  #build:has(.panel.folded) .panel-folded{padding-top:11px;padding-bottom:11px}
}

/* --- 5d - the recipe folds on a phone ----------------------------------- */
.done-fold summary{display:none}
.done-fold>.done-lines{margin-top:16px}
@media(max-width:760px){
  #build:has(.panel.folded) .sect-head{display:none}
  #build:has(.panel.folded) .done-card h3{display:none}
  .done-fold summary{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    list-style:none;cursor:pointer;padding:11px 0 10px;
    border-top:1px solid rgba(244,242,236,.16);
    font-family:var(--text);font-size:13.5px;font-weight:700;color:var(--cream);
  }
  .done-fold summary::-webkit-details-marker{display:none}
  .done-fold summary i{
    width:9px;height:9px;flex:none;border:solid rgba(244,242,236,.6);
    border-width:0 2px 2px 0;transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .2s var(--ease);
  }
  .done-fold[open] summary i{transform:rotate(-135deg) translate(-3px,-3px)}
  .done-fold summary:focus-visible{outline:2px solid var(--cream);outline-offset:3px;border-radius:6px}
  .done-fold>.done-lines{margin-top:0}
  .done-fold>.done-lines li:first-child{border-top:none}
}

/* --- 5e - short phones (SE, 6/7/8) -------------------------------------- */
@media(max-width:760px) and (max-height:700px){
  #build:has(.panel.folded) #bowlArt{width:min(126px,34vw)}
  #build:has(.panel.folded) .done-card{padding:13px}
  #build:has(.panel.folded) .done-lines li{padding:2.5px 0;font-size:12.5px}
  #build:has(.panel.folded) .ob-opt{padding:6px 9px}
  #build:has(.panel.folded) .ob-txt b{font-size:13px}
  #build:has(.panel.folded) .done-cta{margin-top:10px}
  #build:has(.panel.folded) .done-cta .btn{padding:12px 10px}
  #build:has(.panel.folded) .ob-tot dd{font-size:20px}
  #build:has(.panel.folded) .build-grid{gap:8px}
  #build:has(.panel.folded) .panel-folded{padding-top:9px;padding-bottom:9px}
  #build:has(.panel.folded) .done-card{margin-top:6px}
  #build:has(.panel.folded) .bowl-col{margin-bottom:0}
}

/* --- 3 - the craft frame is square ------------------------------------- */
/* The three new photos are portrait with the action above the bowl. 4/3 cut
   the hand and the torch out of shot; 16/10 on a phone cut more. Stated at
   (0,2,0) and (0,2,0) so it beats the .craft-art rules it replaces rather
   than sitting behind them. */
.craft-grid .craft-art{aspect-ratio:5/6}
@media(max-width:1000px){
  .craft-grid .craft-art{aspect-ratio:5/6}
}


/* ========================= v104 - round 33 ================================ */

/* --- 3 - the pill under the bowl quotes the payable total --------------- */
.totals{flex-wrap:wrap}
.tnote{flex-basis:100%;text-align:center;font-size:10.5px;letter-spacing:.02em;
       color:var(--ink-55);margin-top:-2px}
@media(max-width:760px){.tnote{font-size:10px}}

/* --- 3b - the bowl's own column must not be negotiable ------------------ */
@media(max-width:1000px){
  .bowl-col{grid-template-columns:max-content minmax(0,1fr)}
  .totals{min-width:0}
}

/* --- 3c - one thing under another, on a phone --------------------------- */
@media(max-width:1000px){
  .bowl-col{
    display:flex;flex-direction:column;align-items:center;gap:7px;
    grid-template-columns:none;grid-template-rows:none;
  }
  .bowl-caption{width:auto;text-align:center}
  .totals{margin:0}
}


/* ========================= v113 - round 34 =============================== */

/* --- 3 - the invite button sits closer to the sentence above it --------- */
@media(min-width:901px){
  .close-grid{row-gap:clamp(14px,1.5vw,22px)}
}

/* --- 1 - Start over, from the finished card ----------------------------- */
/* .linkbtn is ink-55 on cream, which is nothing at all on forest */
.done-reset{display:block;margin:10px auto 0;color:var(--cream-55)}
.done-reset:hover{color:var(--cream)}
.done-card .saved:empty{min-height:0;margin:0}
@media(max-width:760px){.done-reset{margin-top:8px}}

/* --- 6 - the arrows are SVG now, and they sit inside the rail ----------- */
@media(max-width:760px){
  .rail-arrow{padding:0;font-size:0}
  .rail-arrow svg{width:19px;height:19px;display:block}
  /* flush with the rail rather than hanging over its edge: on a 390px screen
     that is 20px of page beside the circle instead of 10 */
  .rail-arrow.prev{left:0}
  .rail-arrow.next{right:0}
}

/* --- 1b - Start over is a link, and pays link rent ---------------------- */
@media(max-width:760px){
  .done-reset{margin-top:3px;padding:9px 4px}
  #build:has(.panel.folded) .done-cta{margin-top:9px}
  #build:has(.panel.folded) .done-fold summary{padding:9px 0 8px}
}
@media(max-width:760px) and (max-height:700px){
  #build:has(.panel.folded) .done-reset{margin-top:2px;padding:7px 4px;font-size:10.5px}
  #build:has(.panel.folded) .done-fold summary{padding:8px 0 7px}
  #build:has(.panel.folded) .order-box{margin-top:9px;padding-top:8px}
  #build:has(.panel.folded) .ob-sum{margin-top:8px;padding-top:7px}
}

/* --- 4b - 01/02/03 sits at the foot of the frame ------------------------ */
.craft-art .craft-n{top:auto;bottom:14px;left:14px;background:rgba(20,26,20,.72)}
@media(max-width:760px){.craft-art .craft-n{bottom:11px;left:11px}}

/* --- 6b - the ring's controls are drawn too ----------------------------- */
.wheel-ctl button{font-size:0}
.wheel-ctl button svg{width:17px;height:17px;display:block}


/* ========================= v123 - round 35 =============================== */

/* --- the two actions fill the card, and Start over rides with them ------ */
.done-reset{margin:0}
@media(max-width:560px){
  .done-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:8px}
  /* flex:0 1 auto sized them to their own words and left the card's width
     unused either side */
  .done-cta .btn{width:auto;flex:1 1 0;min-width:0;padding-inline:10px}
  .done-reset{flex:0 0 100%;margin-top:3px}
}

/* --- narrow phones: half a card is 124px of text room ------------------- */
@media(max-width:389px){
  .done-cta .btn{font-size:11px;letter-spacing:.02em;padding-inline:8px}
}
@media(max-width:335px){
  .done-cta .btn{font-size:10px;padding-inline:4px;letter-spacing:.01em}
}
@media(max-width:760px){
  #build:has(.panel.folded) .done-cta{gap:7px}
  #build:has(.panel.folded) .done-reset{margin-top:1px}
}


/* ========================= v126 - round 36 =============================== */

/* --- the three controls sit in the middle of the card ------------------- */
.done-cta{justify-content:center}


/* ========================= v130 - round 37 =============================== */

/* --- the SST line under each bowl's price ------------------------------- */
/* Inside .price, not beside it: .sig-top aligns the name and the price on one
   baseline, and a third item in that row would drag the price off it. */
.price .sst{
  display:block;font-family:var(--text);font-style:normal;font-weight:400;
  font-size:10px;line-height:1.25;letter-spacing:.01em;color:var(--ink-55);
  text-align:right;white-space:nowrap;margin-top:1px;
}
@media(max-width:560px){.price .sst{font-size:9.5px}}
@media(max-width:360px){.price .sst{font-size:9px}}


/* ========================= v136 - round 38 =============================== */

/* --- 1 - the trust bar is two columns, not four floating items ---------- */
/* flex-wrap started column two wherever item one ended: 164 against 147 at
   390px, and three ragged rows at 320. */
@media(max-width:760px){
  .hero .trust{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 14px;align-items:start;
  }
}

/* --- 3 - the link that finishes an FAQ answer --------------------------- */
/* .faq p is justified, which is right for a paragraph and wrong for a link
   sitting alone on its own line. */
.faq .faq-go{text-align:left;margin:2px 0 15px;max-width:none}
.faq .faq-cta{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--text);font-weight:900;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--green);
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;
  padding:4px 0;
}
.faq .faq-cta:hover{color:var(--forest)}
.faq .faq-cta span{font-size:14px;line-height:1}
@media(max-width:760px){.faq .faq-cta{padding:8px 0}}
/* two addresses read as a list, not as one wall of justified text */
.faq details p b{color:var(--forest)}

/* --- 1b - and type that fits the column it was just given --------------- */
@media(max-width:379px){.hero .trust b{font-size:18px}}
@media(max-width:359px){.hero .trust b{font-size:17px}}