:root{
  /* v8: palette follows the basket-guy logo. Every colour on the site is a token,
     and html[data-pal] swaps the whole set so Christophe can see each colourway.
     Roles: --teal = "pop" (light highlight, used on dark grounds and as fills),
     --teal-d = brand (buttons, links, any type), --clay = accent CTA, --night = dark
     sections. The names are kept from v7 so nothing downstream had to change.
     Default = TRICOLORE: the logo's navy, cream paper, tomato red accent. */
  --paper:#fbf6ec; --paper2:#f3eadb; --card:#ffffff;
  --ink:#1b1f33; --ink-rgb:27,31,51; --muted:#5f5e6b; --line:rgba(27,31,51,.14);
  --teal:#ff9a8b; --pop-h:#ff8473; --pop-rgb:255,154,139;
  --teal-d:#1d2a6b; --brand-h:#16205a; --brand-rgb:29,42,107; --teal-ink:#141d4d;
  --deep:#0f1640; --deep-rgb:15,22,64; --tint:#eef1fb; --teal-w:#eef1fb;
  --clay:#d6402f; --accent-h:#b8321f;
  --night:#151c45; --night2:#0e1433;
  --amber:#b57a2a;
  --shadow:0 1px 2px rgba(27,31,51,.05),0 14px 38px rgba(27,31,51,.10);
  --disp:"Fraunces",Georgia,serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --wrap:1120px;
}
html[data-pal="navy"]{
  --paper:#fbf7ef; --paper2:#f2ecdf;
  --teal:#b9c6f0; --pop-h:#a3b4ea; --pop-rgb:185,198,240;
  --clay:#9b6a1c; --accent-h:#82580f;
}
html[data-pal="tealscript"]{
  --teal:#83dbe0; --pop-h:#6fd3d9; --pop-rgb:131,219,224;
  --tint:#eaf6f7; --teal-w:#eaf6f7;
  --clay:#0f7178; --accent-h:#0b5b61;
}
html[data-pal="tealword"]{
  --teal:#83dbe0; --pop-h:#6fd3d9; --pop-rgb:131,219,224;
  --teal-d:#0f7178; --brand-h:#0b5b61; --brand-rgb:15,113,120; --teal-ink:#08494e;
  --tint:#eaf6f7; --teal-w:#eaf6f7;
}
html[data-pal="tealbasket"]{
  --teal:#83dbe0; --pop-h:#6fd3d9; --pop-rgb:131,219,224;
  --tint:#eaf6f7; --teal-w:#eaf6f7;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:82px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block;height:auto}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
h1,h2,h3,h4,.disp{font-family:var(--disp);font-weight:600;line-height:1.08;letter-spacing:-.018em;text-wrap:balance;margin:0}
h2{font-size:clamp(1.85rem,3.9vw,2.7rem)}
h3{font-size:1.2rem;letter-spacing:-.01em}
p{margin:0}
a{color:var(--teal-ink)}
:focus-visible{outline:3px solid var(--teal-d);outline-offset:2px}
.eyebrow{font-family:var(--body);font-weight:700;font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;color:var(--teal-d)}
.lede{color:var(--muted);font-size:1.06rem;max-width:64ch}
section{padding:82px 0}
.sec-head{max-width:70ch;margin-bottom:40px}
.sec-head .eyebrow{display:block;margin-bottom:12px}
.sec-head p{margin-top:16px}
.tnum{font-variant-numeric:tabular-nums}
/* Fraunces has no tabular figures, so tnum above is a no-op on the display face and
   digit widths swing by up to 40%. Harmless on a static number, but the rank counters
   animate through ~50 values, which would shuffle everything beside them the whole way
   down. Reserving the widest two-digit span they pass through keeps the box still; the
   negative margin gives that reserved space back so "#11" sits exactly where it did
   before. em, so it holds at every size these counters are used at. Counting starts at
   99, not 100, on purpose: three digits do not fit this reserved box without either
   shoving the badge or colliding with the "#". */
.tnum[data-from]{display:inline-block;width:1.35em;margin-inline:-.23em;text-align:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;font-weight:700;font-size:.95rem;padding:14px 26px;border-radius:100px;border:1px solid transparent;transition:transform .16s,background .2s,color .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-p{background:var(--night);color:#fff}
.btn-p:hover{background:#000}
.btn-t{background:var(--teal-d);color:#fff}
.btn-t:hover{background:var(--brand-h)}
.btn-o{background:transparent;color:var(--ink);border-color:rgba(29,26,22,.25)}
.btn-o:hover{border-color:var(--night)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(251,248,243,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:16px;padding:11px 0;min-height:66px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.brand img{height:72px;width:72px;border-radius:50%}
.brand .bn{display:flex;flex-direction:column;line-height:1.1}
/* The logo badge already says Piknik, so the header carries no wordmark. The tagline
   sits beside it as a two-line whisper behind a hairline rule: present, never competing
   with the nav for width. */
.brand .b2{font-family:var(--disp);font-style:italic;font-size:.82rem;line-height:1.28;color:var(--muted);letter-spacing:.005em;padding-left:12px;border-left:1px solid rgba(var(--pop-rgb),.55);display:block;white-space:nowrap}
.brand .b2 em{font-style:italic;font-weight:700;color:var(--teal-ink,var(--deep))}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.93rem;position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .22s}
.nav a:hover::after{transform:scaleX(1)}
.hdr-cta{flex:0 0 auto;display:flex;gap:10px;align-items:center}
.burger{display:none;margin-left:auto;width:46px;height:46px;border:1px solid var(--line);border-radius:10px;background:var(--card);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.burger span{display:block;width:20px;height:2px;background:var(--night);border-radius:2px;transition:transform .22s,opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{display:none;border-top:1px solid var(--line);background:var(--paper);padding:10px 0 20px}
.mnav.open{display:block}
.mnav a:not(.btn){display:block;padding:15px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600;font-size:1.05rem}
.mnav .btn{display:flex;width:100%;margin-top:18px;padding:16px 24px;text-align:center;border-bottom:0;font-size:1rem}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(84vh,720px);display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,13,.36) 0%,rgba(20,17,13,.12) 38%,rgba(20,17,13,.78) 100%)}
.hero-in{position:relative;z-index:2;padding:64px 0 60px;color:#fff;width:100%}
.hero .tagline{display:inline-flex;align-items:center;gap:9px;background:rgba(var(--pop-rgb),.94);color:var(--deep);font-weight:700;font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;padding:8px 16px;border-radius:100px}
.hero h1{margin-top:20px;font-size:clamp(2.3rem,6.4vw,4.35rem);color:#fff;line-height:1.02}
.hero h1 em{font-style:italic;color:var(--teal)}
.hero .hsub{margin-top:20px;font-size:clamp(1.02rem,2.1vw,1.24rem);color:rgba(255,255,255,.9);max-width:56ch}
.hero-act{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.hero-strip{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center;font-size:.9rem;color:rgba(255,255,255,.82);border-top:1px solid rgba(255,255,255,.2);padding-top:20px}
.hero-strip b{color:#fff;font-weight:700}
/* Live open/closed. Rendered empty and filled by JS, so with JS off the visitor
   simply sees the hours with no badge rather than a badge that might be lying. */
.onow{display:none;align-items:center;gap:7px;font-weight:700;white-space:nowrap}
.onow.ready{display:inline-flex}
.onow i{width:9px;height:9px;border-radius:50%;background:#1e9e57;flex:0 0 auto;box-shadow:0 0 0 3px rgba(30,158,87,.2)}
.onow.shut i{background:#cf3a2c;box-shadow:0 0 0 3px rgba(207,58,44,.2)}
.onow{color:#15804a}
.onow.shut{color:#b7301f}
/* On the hero the badge sits on video, so both states use lighter tints that
   hold up against moving bread rather than the darker on-paper versions. */
.hero-strip .onow{color:#7ff0ad}
.hero-strip .onow i{background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.28)}
.hero-strip .onow.shut{color:#ff9c8c}
.hero-strip .onow.shut i{background:#ff6a55;box-shadow:0 0 0 3px rgba(255,106,85,.3)}
@media(prefers-reduced-motion:no-preference){
  .onow:not(.shut) i{animation:onowpulse 2.4s ease-in-out infinite}
}
@keyframes onowpulse{0%,100%{box-shadow:0 0 0 3px rgba(74,222,128,.28)}50%{box-shadow:0 0 0 7px rgba(74,222,128,.06)}}
.stars{color:#ffc94d;letter-spacing:2px}

/* hero video */
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
.hero-vid.ready{opacity:1}
.hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* award badge */
.award{position:relative;display:inline-flex;align-items:center;gap:18px;background:rgba(var(--deep-rgb),.72);border:1px solid rgba(var(--pop-rgb),.55);backdrop-filter:blur(12px);border-radius:14px;padding:14px 24px 14px 20px;overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,.28)}
.award::before{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.2),transparent);animation:sheen 5s ease-in-out 1.6s infinite}
@keyframes sheen{0%{left:-60%}38%{left:130%}100%{left:130%}}
.aw-rank{position:relative;z-index:1;display:inline-flex;align-items:baseline;font-family:var(--disp);font-weight:700;color:#fff;line-height:.9;letter-spacing:-.03em;font-size:2.5rem;font-variant-numeric:tabular-nums}
.aw-rank i{font-style:normal;font-size:1.35rem;color:var(--teal);margin-right:2px;font-weight:700}
.aw-txt{position:relative;z-index:1;display:flex;flex-direction:column;gap:5px;padding-left:18px;border-left:1px solid rgba(255,255,255,.22)}
.aw-on{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.72);line-height:1}
.aw-yelp{height:23px;width:auto;display:block}
.aw-sub{font-size:.65rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);line-height:1.25}
@media(max-width:560px){
  .award{gap:13px;padding:12px 17px 12px 15px;border-radius:12px}
  .aw-rank{font-size:2rem}
  .aw-rank i{font-size:1.1rem}
  .aw-txt{padding-left:13px;gap:4px}
  .aw-yelp{height:19px}
  .aw-sub{font-size:.56rem;letter-spacing:.1em}
}

/* scroll cue */
.scroll-cue{position:absolute;left:50%;bottom:18px;z-index:3;width:22px;height:34px;margin-left:-11px;border:1.5px solid rgba(255,255,255,.45);border-radius:100px}
.scroll-cue i{position:absolute;left:50%;top:7px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:rgba(255,255,255,.8);animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:0}22%{opacity:1}70%{transform:translateY(12px);opacity:0}}

/* reveal engine */
[data-rise]{opacity:0;transform:translateY(20px);transition:opacity .78s cubic-bezier(.22,.7,.3,1),transform .78s cubic-bezier(.22,.7,.3,1)}
[data-rise].in{opacity:1;transform:none}
[data-rise="2"]{transition-delay:.09s}[data-rise="3"]{transition-delay:.17s}
[data-rise="4"]{transition-delay:.25s}[data-rise="5"]{transition-delay:.33s}
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,.7,.3,1),transform .8s cubic-bezier(.22,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}

/* ---------- proof ---------- */
.proof{background:var(--night);color:#fff;padding:26px 0}
.proof-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px;text-align:center}
.proof .k{font-family:var(--disp);font-weight:700;font-size:2.15rem;line-height:1;color:var(--teal);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.proof .k .hash{font-style:normal;font-size:1.25rem;vertical-align:.18em;margin-right:1px}
.proof .l{margin-top:9px;font-size:.8rem;color:rgba(255,255,255,.68);letter-spacing:.04em;line-height:1.45}
.pf-yelp{height:24px;width:auto;display:block;margin:12px auto 0}

/* ---------- chef ---------- */
.chef{background:var(--paper2)}
.chef-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:60px;align-items:center}
.chef-photo{position:relative}
.chef-photo img{border-radius:8px;box-shadow:var(--shadow);width:100%}
.chef-photo .stamp{position:absolute;right:-22px;bottom:26px;background:var(--card);border-radius:50%;width:112px;height:112px;display:grid;place-items:center;text-align:center;box-shadow:var(--shadow);padding:12px;line-height:1.2}
.chef-photo .stamp .flag{display:block;width:34px;height:auto;margin:0 auto 7px;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.chef-photo .stamp span{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.chef blockquote{margin:26px 0 0;padding-left:22px;border-left:3px solid var(--teal-d);font-family:var(--disp);font-size:1.24rem;font-style:italic;line-height:1.42;color:var(--ink)}
.creds{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:13px}
.creds li{display:flex;gap:13px;align-items:flex-start;font-size:1rem}
.creds .ci{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--teal);display:grid;place-items:center;margin-top:3px}
.creds .ci svg{width:13px;height:13px}

/* ---------- press ---------- */
.press{padding-top:78px;padding-bottom:0}
.press-band{display:grid;grid-template-columns:150px 1fr;gap:46px;align-items:center;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--teal);border-radius:10px;padding:40px 44px;box-shadow:var(--shadow)}
.pb-mark{text-align:center;padding-right:46px;border-right:1px solid var(--line)}
.pb-rank{display:block;font-family:var(--disp);font-weight:700;font-size:4.9rem;line-height:.88;letter-spacing:-.04em;color:var(--teal-d);font-variant-numeric:tabular-nums}
.pb-rank i{font-style:normal;font-size:2.4rem;vertical-align:.3em;margin-right:1px}
.pb-src{margin-top:16px;font-size:.86rem;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.pb-yelp{height:21px;width:auto}
.pb-of{display:block;margin-top:6px;font-size:.68rem;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:var(--muted)}
.pb-body h2{margin-top:12px;font-size:clamp(1.5rem,3vw,2.15rem)}
@media(max-width:760px){
  .press-band{grid-template-columns:1fr;gap:24px;padding:30px 26px}
  .pb-mark{text-align:left;padding-right:0;border-right:0;border-bottom:1px solid var(--line);padding-bottom:18px}
  .pb-rank{font-size:4rem}
}

/* ---------- menu ---------- */
.mtabs{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}
.mtab{border:1px solid var(--line);background:var(--card);border-radius:100px;padding:9px 19px;font-weight:600;font-size:.87rem;cursor:pointer;color:var(--muted);font-family:var(--body);transition:all .18s}
.mtab:hover{border-color:var(--night);color:var(--ink)}
.mtab[aria-selected="true"]{background:var(--night);border-color:var(--night);color:#fff}
.mpanel{display:none}
.mpanel.on{display:block}
.mlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:0 46px}
.mi{display:grid;grid-template-columns:1fr auto;gap:10px;padding:16px 0;border-bottom:1px dashed var(--line);align-items:baseline}
.mi .mn{font-family:var(--disp);font-weight:600;font-size:1.06rem;letter-spacing:-.01em}
.mi .md{grid-column:1/-1;margin-top:4px;color:var(--muted);font-size:.92rem;line-height:1.5}
.mi .mp{font-family:var(--disp);font-weight:700;font-size:1.06rem;color:var(--teal-d);font-variant-numeric:tabular-nums}
.mnote{margin-top:24px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px 22px;font-size:.94rem;color:var(--muted);box-shadow:var(--shadow)}

.mshots{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:30px}
.mshots.one{grid-template-columns:minmax(0,min(520px,100%))}
.mshots figure{margin:0}
.mshots img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;box-shadow:var(--shadow)}
.mshots figcaption{margin-top:9px;font-size:.83rem;color:var(--muted)}
.mnote.mock{background:#fffaf0;border:1px dashed rgba(181,122,42,.5);color:#7a5a22}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:38px}
.gal figure{margin:0;border-radius:8px;overflow:hidden;box-shadow:var(--shadow);background:var(--card)}
.gal img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s}
.gal figure:hover img{transform:scale(1.045)}

/* ---------- order ways ---------- */
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px;align-items:start}
.way{position:relative;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:30px 28px 28px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;height:100%}
.way .wnum{font-family:var(--disp);font-weight:700;font-size:.82rem;letter-spacing:.14em;color:var(--muted)}
.way h3{font-size:1.16rem}
.way p{color:var(--muted);font-size:.97rem;flex:1}
.way .btn{align-self:flex-start;margin-top:4px}
.way small{color:var(--muted);font-size:.82rem;line-height:1.5}
.way-ai{border-color:rgba(var(--brand-rgb),.42);background:linear-gradient(168deg,#ffffff 0%,var(--tint) 100%)}
.ai-chip{position:absolute;top:20px;right:22px;display:inline-flex;align-items:center;gap:7px;background:var(--teal);color:var(--deep);border-radius:100px;padding:5px 12px;font-size:.63rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.ai-dot{width:6px;height:6px;border-radius:50%;background:var(--deep);animation:pulse 2.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.28;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}

/* ---------- catering ---------- */
.cat{background:var(--night);color:#fff}
.cat h2{color:#fff}
.cat .lede{color:rgba(255,255,255,.74)}
.cat-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;align-items:center}
.cat-img img{border-radius:8px;width:100%}
.cat-list{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:11px}
.cat-list li{display:flex;gap:12px;align-items:flex-start;color:rgba(255,255,255,.86);font-size:1rem}
.cat-list .ci{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--teal);display:grid;place-items:center;margin-top:4px}
.cat-list .ci svg{width:12px;height:12px}
.cat-act{margin-top:30px;display:flex;flex-wrap:wrap;gap:11px}

.cat-head{max-width:62ch;margin-bottom:34px}
.cat-head h2{margin-top:12px}
.cat-head .lede{margin-top:18px;color:rgba(255,255,255,.74)}
.cat-hero{margin-bottom:34px}
.cat-hero img{width:100%;border-radius:10px;aspect-ratio:16/9;object-fit:cover}
.pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;align-items:stretch}
.pkg{display:flex;flex-direction:column;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.15);border-radius:10px;overflow:hidden}
.pk-img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;flex:0 0 auto}
.pk-body{display:flex;flex-direction:column;flex:1 1 auto;gap:11px;padding:24px 22px 22px}
.pkg h3{color:#fff;font-size:1.2rem}
.pk-tag{font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.pk-for{font-size:.83rem;color:rgba(255,255,255,.58);line-height:1.45}
.pkg ul{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:9px;flex:1}
.pkg li{position:relative;padding-left:17px;font-size:.93rem;color:rgba(255,255,255,.84);line-height:1.5}
.pkg li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--teal)}
.pk-price{margin:auto 0 0;padding-top:15px;border-top:1px solid rgba(255,255,255,.15);display:flex;align-items:baseline;gap:8px}
.pk-price b{font-family:var(--disp);font-weight:700;font-size:1.85rem;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pk-price span{font-size:.86rem;font-weight:600;color:rgba(255,255,255,.72)}
/* ---- Order. Deliberately unequal. Pickup and Margot are the two we want
   people to use, so they get the whole width and the artwork. The delivery apps
   are real and stay on the page, but as a quiet footnote with their own marks,
   because every order that goes through them costs the shop a commission. */
.oways{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:20px;align-items:stretch}
.oway{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:32px 30px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.oway h3{font-family:var(--disp);font-weight:700;font-size:1.5rem;line-height:1.15;margin-top:10px}
.oway p{margin-top:12px;color:var(--muted);font-size:.98rem}
.ow-num{font-family:var(--disp);font-weight:700;font-size:.8rem;letter-spacing:.14em;color:var(--teal-d);opacity:.8}
.ow-list{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:9px;font-size:.93rem;color:var(--muted)}
.ow-list li{padding-left:20px;position:relative}
.ow-list li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--teal)}
.oway .btn{margin-top:auto;align-self:flex-start;margin-top:24px}
.oway small{display:block;margin-top:12px;font-size:.8rem;color:var(--muted)}

.oway-ai{background:linear-gradient(150deg,var(--tint) 0%,var(--card) 62%);border-color:rgba(var(--brand-rgb),.28);overflow:hidden}
.ow-ai-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:18px;align-items:end;flex:1}
.ow-ai-copy{display:flex;flex-direction:column}
.ow-ai-art{position:relative;align-self:end;justify-self:center;min-height:230px;display:grid;place-items:end center}
.ow-ai-art img{position:relative;z-index:1;width:100%;max-width:236px;height:auto;filter:drop-shadow(0 12px 22px rgba(var(--ink-rgb),.14));animation:owfloat 5.5s ease-in-out infinite}
.ow-pulse{position:absolute;bottom:26%;left:50%;width:150px;height:150px;margin-left:-75px;border-radius:50%;border:2px solid var(--teal);opacity:0;animation:owpulse 3.4s ease-out infinite}
.ow-pulse2{animation-delay:1.7s}
@keyframes owfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes owpulse{0%{transform:scale(.55);opacity:.55}70%{opacity:0}100%{transform:scale(1.5);opacity:0}}

.apps{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 26px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;box-shadow:var(--shadow)}
.apps-t b{display:block;font-size:.95rem;font-weight:700}
.apps-t span{display:block;margin-top:3px;font-size:.87rem;color:var(--muted)}
.apps-l{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.apps-l a{display:inline-flex;align-items:center;opacity:.62;transition:opacity .2s}
.apps-l a:hover,.apps-l a:focus-visible{opacity:1}
.apps-l img{height:17px;width:auto}
.apps-l a:last-child img{height:20px}

@media(max-width:900px){
  .oways{grid-template-columns:1fr}
  .ow-ai-in{grid-template-columns:1fr}
  .ow-ai-art{min-height:0;margin-top:22px;justify-self:start}
  .ow-ai-art img{max-width:190px}
  .apps{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .ow-ai-art img{animation:none}
  .ow-pulse{display:none}
}

/* ---- The Pantry. The new evening line: prepared meals from 4pm to 8pm. Given
   its own light section between ordering and catering because it is a retail
   habit, not an event, and it needs to be scannable by someone deciding what to
   do about dinner in the next ten minutes. */
.pantry{background:var(--paper2)}
.pan-day{margin-bottom:38px}
.pan-clock{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.pc-row{display:grid;grid-template-columns:112px 1fr;gap:18px;padding:16px 22px;border-bottom:1px solid var(--line);align-items:baseline}
.pc-row:last-child{border-bottom:0}
.pc-t{font-family:var(--disp);font-weight:700;font-size:1.02rem;color:var(--muted)}
.pc-l b{display:block;font-size:1rem;font-weight:700}
.pc-l{font-size:.93rem;color:var(--muted);line-height:1.5}
.pc-now{background:linear-gradient(90deg,rgba(var(--pop-rgb),.22),rgba(var(--pop-rgb),.06))}
.pc-now .pc-t{color:var(--teal-ink)}
.pc-now .pc-l b{color:var(--teal-ink)}

.pan-head{max-width:60ch;margin-bottom:26px}
.pan-head h3{font-family:var(--disp);font-weight:700;font-size:clamp(1.3rem,2.6vw,1.72rem);line-height:1.18}
.pan-head p{margin-top:11px;color:var(--muted)}

.pan-hero{margin:0 0 34px}
.pan-hero img{width:100%;height:auto;border-radius:12px;box-shadow:var(--shadow)}
.pan-hero figcaption{margin-top:11px;font-size:.88rem;color:var(--muted)}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:16px;align-items:stretch}
.plan-c{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.pl-img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;flex:0 0 auto}
/* The body is the flex child that grows, and the bullet list is pushed to the
   bottom of it, so all four cards line up whatever the copy does. */
.pl-body{display:flex;flex-direction:column;flex:1 1 auto;padding:22px 22px 24px}
.plan-c h3{font-family:var(--disp);font-weight:700;font-size:1.18rem;line-height:1.18;margin-top:8px}
.plan-c p{margin-top:10px;color:var(--muted);font-size:.93rem}
.plan-c ul{list-style:none;padding:16px 0 0;margin:auto 0 0;display:grid;gap:8px;font-size:.86rem;color:var(--muted);border-top:1px solid var(--line)}
.plan-c li{padding-left:18px;position:relative}
.plan-c li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.pl-tag{font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d)}
.plan-hero{border-color:rgba(var(--brand-rgb),.45);box-shadow:0 0 0 1px rgba(var(--brand-rgb),.18),var(--shadow)}
.plan-hero .pl-body{background:linear-gradient(170deg,var(--tint) 0%,var(--card) 65%)}
.plan-del .pl-img{filter:saturate(.85)}
.plan-del .pl-tag{color:var(--muted)}

.pan-margot{margin-top:20px;display:grid;grid-template-columns:210px minmax(0,1fr);gap:26px;align-items:center;background:linear-gradient(150deg,var(--tint) 0%,var(--card) 62%);border:1px solid rgba(var(--brand-rgb),.28);border-radius:12px;padding:26px 30px;box-shadow:var(--shadow)}
.pm-art{position:relative;display:grid;place-items:center}
.pm-art img{position:relative;z-index:1;width:100%;max-width:170px;height:auto;filter:drop-shadow(0 10px 20px rgba(var(--ink-rgb),.14))}
.pm-pulse{position:absolute;bottom:14%;left:50%;width:120px;height:120px;margin-left:-60px;border-radius:50%;border:2px solid var(--teal);opacity:0;animation:owpulse 3.4s ease-out infinite}
.pm-copy h3{font-family:var(--disp);font-weight:700;font-size:clamp(1.2rem,2.4vw,1.5rem);line-height:1.18;margin-top:8px}
.pm-copy p{margin-top:11px;color:var(--muted);font-size:.96rem}
.pm-act{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:760px){
  .pan-margot{grid-template-columns:1fr;gap:14px;padding:24px 20px;text-align:left}
  .pm-art{justify-items:start}
  .pm-art img{max-width:130px}
  .pm-pulse{display:none}
}
@media(prefers-reduced-motion:reduce){.pm-pulse{display:none}}

.pan-note{margin-top:24px;background:rgba(var(--brand-rgb),.07);border:1px dashed rgba(var(--brand-rgb),.4);border-radius:8px;padding:19px 22px;font-size:.92rem;color:var(--muted);line-height:1.6}
.pan-note strong{color:var(--teal-ink);font-weight:700}
.pan-act{margin-top:26px;display:flex;flex-wrap:wrap;gap:11px}

.pan-form{margin-top:30px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:36px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:30px 32px;box-shadow:var(--shadow);scroll-margin-top:90px}
.pf-copy h3{font-family:var(--disp);font-weight:700;font-size:1.3rem}
.pf-copy p{margin-top:10px;color:var(--muted);font-size:.95rem}
.pf-form{display:grid;gap:12px}
.pf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pf-form label{display:grid;gap:6px;font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.pf-form input,.pf-form select{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:11px 13px;color:var(--ink);font-family:var(--body);font-size:.95rem;font-weight:400;letter-spacing:0;text-transform:none}
.pf-form input:focus,.pf-form select:focus{outline:2px solid var(--teal-d);outline-offset:1px}
.pf-form .btn{justify-self:start;margin-top:4px}
.pf-fine{font-size:.76rem;color:var(--muted)}
.pf-ok{background:rgba(30,158,87,.1);border:1px solid rgba(30,158,87,.4);border-radius:8px;padding:15px 17px;font-size:.95rem;line-height:1.55}
.pf-ok strong{color:#15804a}
.pf-ok span{display:block;margin-top:5px;font-size:.78rem;color:var(--muted)}
@media(max-width:820px){
  .pan-form{grid-template-columns:1fr;gap:22px;padding:24px 20px}
  .pf-row{grid-template-columns:1fr}
  .pc-row{grid-template-columns:84px 1fr;gap:12px;padding:14px 16px}
}

/* ---- Catering. Still the biggest ticket on the site. The old argument was that
   the kitchen sat dark after 3pm; now the evenings run prepared meals instead, so
   catering is sold on the chef rather than on spare capacity. */
.cat-seg{margin:0 0 30px}
.cat-seg h3{font-family:var(--disp);font-weight:600;font-size:1.02rem;margin-bottom:14px;color:rgba(255,255,255,.9)}
.segs{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:12px}
.seg{display:block;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-left:3px solid var(--teal);border-radius:8px;padding:14px 16px;font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.66)}
.seg b{display:block;color:#fff;font-weight:700;font-size:.94rem;margin-bottom:3px}
.pkg-hero{background:rgba(232,132,60,.13);border-color:rgba(232,132,60,.45)}

.cat-form{margin-top:30px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:34px 36px;scroll-margin-top:90px}
.cf-copy h3{font-family:var(--disp);font-weight:700;font-size:1.4rem;line-height:1.16}
.cf-copy p{margin-top:12px;color:rgba(255,255,255,.7);font-size:.96rem}
.cf-tick{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px;font-size:.87rem;color:rgba(255,255,255,.62)}
.cf-tick li{padding-left:18px;position:relative}
.cf-tick li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.cf-form{display:grid;gap:13px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.cf-form label{display:grid;gap:6px;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.cf-form input,.cf-form select,.cf-form textarea{width:100%;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.2);border-radius:7px;padding:11px 13px;color:#fff;font-family:var(--body);font-size:.95rem;font-weight:400;letter-spacing:0;text-transform:none}
.cf-form input:focus,.cf-form select:focus,.cf-form textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:transparent}
.cf-form input:invalid:not(:placeholder-shown){border-color:rgba(255,140,120,.7)}
.cf-form select option{color:#1d1a16}
.cf-form textarea{resize:vertical}
.cf-form .btn{justify-self:start;margin-top:4px}
.cf-fine{font-size:.76rem;color:rgba(255,255,255,.45)}
.cf-ok{background:rgba(63,191,106,.14);border:1px solid rgba(63,191,106,.4);border-radius:8px;padding:16px 18px;font-size:.95rem;color:#fff;line-height:1.55}
.cf-ok strong{color:#8ce0a6}
.cf-ok span{display:block;margin-top:6px;font-size:.78rem;color:rgba(255,255,255,.5)}
@media(max-width:820px){
  .cat-form{grid-template-columns:1fr;gap:26px;padding:26px 22px}
  .cf-row{grid-template-columns:1fr}
}

/* Bridge from ordering into catering. This is the sentence that does the work. */
.catbridge{background:var(--teal-d);color:#fff}
.catbridge .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 20px;padding:20px 0;text-align:center}
.catbridge p{font-family:var(--disp);font-weight:600;font-size:clamp(1.02rem,2.1vw,1.28rem);line-height:1.3}
.catbridge a{color:#fff;font-weight:700;font-size:.95rem;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.5);padding-bottom:2px;white-space:nowrap}
.catbridge a:hover{border-color:#fff}

.vip{margin-top:18px;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:0;background:rgba(var(--pop-rgb),.07);border:1px solid rgba(var(--pop-rgb),.34);border-radius:12px;overflow:hidden}
.vip-img{width:100%;height:100%;min-height:300px;object-fit:cover;display:block}
.vip-body{padding:34px 36px;display:flex;flex-direction:column}
.vip-tag{font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.vip-body h3{font-family:var(--disp);font-weight:700;font-size:clamp(1.35rem,2.7vw,1.78rem);line-height:1.14;margin-top:10px}
.vip-body p{margin-top:13px;color:rgba(255,255,255,.72);font-size:.99rem}
.vip-list{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:9px 18px;font-size:.9rem;color:rgba(255,255,255,.68)}
.vip-list li{padding-left:17px;position:relative}
.vip-list li b{color:#fff}
.vip-list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.vip-price{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px}
.vp-num b{font-family:var(--disp);font-weight:700;font-size:2.5rem;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.vp-num span{margin-left:9px;font-size:.83rem;color:rgba(255,255,255,.6)}
.vp-note{flex:1 1 240px;font-size:.85rem;color:rgba(255,255,255,.58);line-height:1.5}
.vip-act{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:860px){
  .vip{grid-template-columns:1fr}
  .vip-img{min-height:230px;aspect-ratio:16/10}
  .vip-body{padding:26px 22px}
  .vip-list{grid-template-columns:1fr}
}

.pk-note{margin-top:24px;background:rgba(232,132,60,.10);border:1px dashed rgba(232,132,60,.45);border-radius:8px;padding:19px 22px;font-size:.92rem;color:rgba(255,255,255,.78);line-height:1.6}
.pk-note strong{color:var(--teal);font-weight:700}

/* ---------- visit ---------- */
.visit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px}
.vcard{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:26px;box-shadow:var(--shadow)}
.vcard h3{font-size:.72rem;font-family:var(--body);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-d)}
.vcard .vb{margin-top:14px;font-size:1.04rem;line-height:1.6}
.vcard a{color:var(--ink);text-decoration:none;font-weight:600;border-bottom:2px solid var(--teal)}
.vcard a:hover{color:var(--teal-d)}
.hrs{margin-top:14px;display:grid;gap:7px;font-size:1rem}
.hrs div{display:flex;justify-content:space-between;gap:14px}
.hrs .cl{color:var(--muted)}

/* ---------- footer ---------- */
.foot{background:var(--night2);color:rgba(255,255,255,.6);padding:56px 0 26px;font-size:.93rem}
.foot a{color:rgba(255,255,255,.6);text-decoration:none}
.foot a:hover{color:#fff}
.foot-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-top h4{font-size:.7rem;font-family:var(--body);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:13px}
.foot-top ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.foot img.fl{width:78px;height:78px;border-radius:50%;margin-bottom:14px}
.foot-legal{padding:22px 0 6px;display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;font-size:.85rem;color:rgba(255,255,255,.42);text-align:center}

/* ---------- mobile action bar ---------- */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(20,18,16,.97);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.12);padding-bottom:env(safe-area-inset-bottom)}
.mbar-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.2fr)}
.mbar a,.mbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:62px;padding:9px 4px;min-width:0;overflow:hidden;text-decoration:none;color:rgba(255,255,255,.86);background:none;border:0;border-left:1px solid rgba(255,255,255,.12);font-family:var(--body);cursor:pointer}
.mbar a:first-child{border-left:0}
.mbar .lbl{font-size:.6rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.mbar svg{width:19px;height:19px}
.mbar .prime{background:var(--teal-d);color:#fff}
.mbar .prime svg{stroke:#fff}

/* ---------- chat ---------- */
.chat-l{position:fixed;right:20px;bottom:22px;z-index:75;display:inline-flex;align-items:center;gap:9px;background:var(--night);color:#fff;border:0;border-radius:100px;padding:14px 22px;font-family:var(--body);font-weight:700;font-size:.92rem;cursor:pointer;box-shadow:0 12px 34px rgba(29,26,22,.32)}
.chat-l:hover{background:#000}
.chat-l svg{width:18px;height:18px}
.chat-p{position:fixed;right:20px;bottom:22px;z-index:80;width:min(370px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 60px));background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 64px rgba(29,26,22,.28);display:none;flex-direction:column;overflow:hidden}
.chat-p.open{display:flex}
.chat-h{background:var(--night);color:#fff;padding:15px 17px;display:flex;align-items:center;gap:11px}
.chat-h img{width:36px;height:36px;border-radius:50%;flex:0 0 auto}
.chat-h .ch-n{font-weight:700;font-size:.95rem;line-height:1.25}
.chat-h .ch-s{font-size:.68rem;color:var(--teal);font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.chat-h button{margin-left:auto;background:none;border:0;color:rgba(255,255,255,.7);font-size:1.5rem;line-height:1;cursor:pointer;padding:0 4px}
.chat-b{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px;background:var(--paper)}
.msg{max-width:86%;padding:11px 14px;border-radius:14px;font-size:.92rem;line-height:1.55}
.msg.bot{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px;align-self:flex-start}
.msg.me{background:var(--teal);color:var(--deep);border-bottom-right-radius:4px;align-self:flex-end;font-weight:500}
.chat-q{padding:11px 14px;display:flex;flex-wrap:wrap;gap:7px;border-top:1px solid var(--line);background:var(--card)}
.chat-q button{background:var(--paper2);border:1px solid var(--line);border-radius:100px;padding:8px 14px;font-size:.8rem;font-weight:600;font-family:var(--body);color:var(--ink);cursor:pointer}
.chat-q button:hover{background:var(--teal);border-color:var(--teal-d)}

@media(max-width:960px){
  .chef-grid,.cat-grid{grid-template-columns:1fr;gap:38px}
  .chef-photo{max-width:400px}
  .chef-photo .stamp{right:8px}
}
@media(max-width:860px){
  section{padding:58px 0}
  .nav,.hdr-cta .btn{display:none}
  .burger{display:flex}
  .brand img{height:58px;width:58px}
  .brand .b2{font-size:.72rem;padding-left:9px}
  .mbar{display:block}
  body{padding-bottom:74px}
  .chat-l{right:14px;bottom:calc(74px + env(safe-area-inset-bottom));padding:12px 18px;font-size:.86rem}
  .scroll-cue{display:none}
  .chat-p{bottom:78px;right:16px;max-height:calc(100vh - 140px)}
  .hero{min-height:auto}
  .hero-in{padding:52px 0 46px}
  .mlist{grid-template-columns:1fr;gap:0}
}
/* ---- Order panel: Square ordering loaded inside the site.
   Square Online serves menu, cart and checkout from one origin and does not
   send X-Frame-Options, so the whole order can happen in here. The header keeps
   an escape hatch to a real tab, because a frame is a courtesy and not a cage. */
.ord-scrim{position:fixed;inset:0;background:rgba(36,25,15,.55);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:120}
.ord-scrim.on{opacity:1;visibility:visible}
.ord-panel{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--paper);display:flex;flex-direction:column;transform:translateX(101%);transition:transform .38s cubic-bezier(.4,0,.2,1);z-index:121;box-shadow:-18px 0 60px rgba(36,25,15,.28)}
.ord-panel.on{transform:none}
.ord-head{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line);background:var(--card);flex:0 0 auto}
.ord-head .ot{font-family:var(--disp);font-weight:600;font-size:1.05rem;line-height:1.2;flex:1 1 auto;min-width:0}
.ord-head .os{display:block;font-family:var(--body);font-weight:500;font-size:.76rem;color:var(--muted);margin-top:3px}
.ord-head a.oext{font-size:.78rem;font-weight:600;color:var(--teal-d);text-decoration:none;white-space:nowrap;border-bottom:1px solid rgba(194,84,26,.35);padding-bottom:1px}
.ord-head a.oext:hover{color:var(--teal-ink)}
.ord-x{flex:0 0 auto;width:38px;height:38px;border:1px solid var(--line);background:var(--paper);border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink);font-size:20px;line-height:1}
.ord-x:hover{background:var(--paper2)}
.ord-body{position:relative;flex:1 1 auto;min-height:0;background:#fff}
.ord-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ord-load{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;color:var(--muted);font-size:.92rem;background:var(--paper);transition:opacity .4s}
.ord-load.gone{opacity:0;pointer-events:none}
.ord-spin{width:30px;height:30px;margin:0 auto 14px;border:3px solid var(--line);border-top-color:var(--teal-d);border-radius:50%;animation:ordspin .8s linear infinite}
@keyframes ordspin{to{transform:rotate(360deg)}}
.ord-foot{flex:0 0 auto;padding:11px 18px;border-top:1px solid var(--line);background:var(--card);font-size:.76rem;color:var(--muted);text-align:center}
body.ord-open{overflow:hidden}
@media(max-width:640px){
  .ord-panel{width:100%}
  .ord-head{padding:13px 14px}
}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* ---- block 2 ---- */


      .dv8-credit{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:inherit;font-size:12.5px;font-weight:600;line-height:1;color:rgba(255,255,255,.5);letter-spacing:.01em;transition:color .3s}
      .dv8-credit strong{font-weight:800;color:#f2ece4;transition:color .3s}
      .dv8-credit:hover{color:rgba(255,255,255,.78)}
      .dv8-credit:hover strong{color:#ff6a1f}
      .dv8-orbit{position:relative;width:18px;height:18px;flex:0 0 auto}
      .dv8-orbit .dv8-ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(255,255,255,.22)}
      .dv8-orbit .dv8-core{position:absolute;inset:4px;border-radius:50%;background:#f2ece4}
      .dv8-orbit .dv8-sat{position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;animation:dv8-spin 3.6s linear infinite}
      .dv8-orbit .dv8-sat i{position:absolute;top:-1px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#ff6a1f;box-shadow:0 0 7px rgba(255,106,31,.75)}
      @keyframes dv8-spin{to{transform:rotate(360deg)}}
      @media (prefers-reduced-motion:reduce){.dv8-orbit .dv8-sat{animation:none}}
    
/* ============================================================
   v5 - the back pages. Same tokens, same vocabulary as the
   homepage; only these components are new.
   ============================================================ */

/* inner-page hero. Copy sits on a solid panel on small screens rather
   than over the photograph - the gradient is horizontal and squeezing it
   into one column just buries the picture. */
.phero{position:relative;background:var(--night);overflow:hidden;isolation:isolate;padding:0;margin:0}
.phero-img{position:absolute;inset:0;z-index:0}
.phero-img img{width:100%;height:100%;object-fit:cover;opacity:.52}
.phero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(var(--ink-rgb),.94) 0%,rgba(var(--ink-rgb),.78) 46%,rgba(var(--ink-rgb),.34) 100%)}
.phero-in{position:relative;z-index:2;padding:78px 0 70px;max-width:none}
.phero .kicker{display:inline-block;font-family:var(--body);font-weight:600;font-size:.74rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--teal);margin-bottom:18px}
.phero h1{font-family:var(--disp);font-weight:700;color:#fff;margin:0;
  font-size:clamp(2rem,5vw,3.35rem);line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.phero-sub{margin-top:20px;color:rgba(255,255,255,.84);font-size:1.08rem;max-width:56ch;line-height:1.66}
@media(max-width:820px){
  .phero{background:var(--night)}
  .phero-img{position:relative;height:220px}
  .phero-img img{opacity:.85}
  .phero::after{inset:auto 0 0 0;height:220px;
    background:linear-gradient(180deg,rgba(var(--ink-rgb),0) 40%,rgba(var(--ink-rgb),.92) 100%)}
  .phero-in{padding:34px 0 44px}
}

/* section head + lede on inner pages */
.sh{font-family:var(--disp);font-weight:700;font-size:clamp(1.5rem,3.2vw,2.1rem);
  letter-spacing:-.02em;line-height:1.12;margin:0 0 14px;text-wrap:balance}
.sl{color:var(--muted);font-size:1.02rem;max-width:68ch;line-height:1.7;margin:0}
.sl b{color:var(--ink);font-weight:600}

/* two-up content rows. Every card gets the same structure so none of them
   fills a different amount of its box. */
.rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(296px,1fr));gap:16px;margin-top:26px;align-items:stretch}
.row2{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:24px;
  box-shadow:var(--shadow);display:flex;flex-direction:column}
.row2 h3{font-family:var(--disp);font-weight:600;font-size:1.12rem;letter-spacing:-.01em;margin:0 0 8px}
.row2 p{margin:0;color:var(--muted);font-size:.97rem;line-height:1.62}
.row2 a{color:var(--teal-d)}
.row2.hi{border-color:rgba(var(--brand-rgb),.4);background:linear-gradient(180deg,var(--tint) 0%,#fff 58%)}

/* the private-chef price block */
.pricebox{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:30px;box-shadow:var(--shadow);margin-top:24px}
.pb-n{font-family:var(--disp);font-weight:700;font-size:clamp(2.4rem,6vw,3.4rem);line-height:1;
  letter-spacing:-.035em;color:var(--teal-d);font-variant-numeric:tabular-nums}
.pb-d p{margin:0;color:var(--muted);font-size:1rem;line-height:1.66}
.pb-d p + p{margin-top:12px}
.pb-d b{color:var(--ink);font-weight:600}
@media(max-width:620px){.pricebox{grid-template-columns:1fr;gap:16px;padding:24px}}

/* the full-width CTA band. He reads big bold highlights, not fine print,
   so every important link on this site is one of these, never small grey text. */
.ctaband{background:var(--teal-d);color:#fff;padding:52px 0;text-align:center}
.ctaband h2{font-family:var(--disp);font-weight:700;color:#fff;margin:0;
  font-size:clamp(1.5rem,3.4vw,2.1rem);letter-spacing:-.02em;line-height:1.14;text-wrap:balance}
.ctaband p{margin:14px auto 0;color:rgba(255,255,255,.85);max-width:54ch;font-size:1.02rem}
.btn-c{display:inline-block;margin-top:24px;background:var(--clay);color:#fff;text-decoration:none;
  font-family:var(--body);font-weight:700;font-size:1rem;padding:15px 30px;border-radius:9px;transition:.18s}
.btn-c:hover{background:var(--accent-h);transform:translateY(-1px)}

/* "while you are here" - internal linking that a person actually clicks */
.also{padding:52px 0;border-top:1px solid var(--line);background:var(--paper2)}
.also h2{font-family:var(--disp);font-weight:700;font-size:1.3rem;letter-spacing:-.015em;margin:0 0 20px}
.also-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px}
.also-g a{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px 22px;
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow);display:flex;flex-direction:column;
  gap:6px;transition:.18s}
.also-g a:hover{border-color:var(--teal-d);transform:translateY(-2px)}
.also-g b{font-family:var(--disp);font-weight:600;font-size:1.06rem;letter-spacing:-.01em}
.also-g span{color:var(--muted);font-size:.93rem;line-height:1.5}

/* current page in the nav */
.nav a.on{color:var(--teal-d);font-weight:700}
.nav a.on::after{opacity:1;transform:scaleX(1)}

/* inner pages start below the fixed header */
body.inner main > section:first-child{margin-top:0}

/* Generic photography strips. These are ATMOSPHERE only - never a photograph of a
   specific menu item, because we do not have those yet and the site must not imply
   we do. Equal aspect and equal caption box so no cell fills differently. */
.phs{padding:0 0 8px}
.phs-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px;align-items:stretch}
.ph{margin:0;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column}
.ph img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ph figcaption{padding:12px 15px;font-size:.87rem;color:var(--muted);line-height:1.45;
  border-top:1px solid var(--line);flex:1 1 auto;display:flex;align-items:center}

/* ============================================================
   Sandwich grid. Each one gets a real photograph, big enough to
   want, and clicking opens it full size. Cards are a flex column
   with the price row pinned to the bottom so every card in a row
   fills its box identically however long the description runs.
   ============================================================ */
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:18px;margin-top:26px;align-items:stretch}
.scard{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s}
.scard:hover{transform:translateY(-3px);border-color:rgba(var(--brand-rgb),.4);
  box-shadow:0 2px 6px rgba(var(--ink-rgb),.06),0 20px 44px rgba(var(--ink-rgb),.14)}
.scard-img{position:relative;display:block;border:0;padding:0;background:none;cursor:zoom-in;width:100%}
.scard-img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.scard-img::after{content:"View";position:absolute;right:10px;bottom:10px;background:rgba(var(--ink-rgb),.72);
  color:#fff;font-family:var(--body);font-weight:600;font-size:.72rem;letter-spacing:.04em;
  padding:5px 11px;border-radius:100px;opacity:0;transition:opacity .2s;backdrop-filter:blur(3px)}
.scard:hover .scard-img::after{opacity:1}
.scard-b{padding:17px 18px 18px;display:flex;flex-direction:column;flex:1 1 auto}
.scard-n{font-family:var(--disp);font-weight:700;font-size:1.13rem;letter-spacing:-.015em;line-height:1.2}
.scard-tag{display:inline-block;font-family:var(--body);font-weight:700;font-size:.62rem;letter-spacing:.09em;
  text-transform:uppercase;background:var(--teal-w);color:var(--teal-d);padding:3px 8px;border-radius:4px;margin-left:8px;vertical-align:2px}
.scard-d{margin-top:7px;color:var(--muted);font-size:.93rem;line-height:1.55}
.scard-f{margin-top:auto;padding-top:15px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.scard-p{font-family:var(--disp);font-weight:700;font-size:1.2rem;color:var(--teal-d);font-variant-numeric:tabular-nums}
.scard-a{background:var(--teal-d);border:0;color:#fff;font-family:var(--body);font-weight:600;font-size:.84rem;
  padding:9px 16px;border-radius:100px;cursor:pointer;text-decoration:none;white-space:nowrap}
.scard-a:hover{background:var(--brand-h)}

/* the free-delivery nudge, used near the menu and the order block */
.nudge{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;text-align:center;
  background:var(--teal-d);color:#fff;border-radius:10px;padding:16px 22px;margin-top:26px;
  font-size:1rem;line-height:1.5}
.nudge b{font-family:var(--disp);font-weight:700}
.nudge a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* lightbox */
.lb{position:fixed;inset:0;z-index:10000;background:rgba(20,17,18,.92);display:grid;place-items:center;
  padding:24px;animation:lbIn .18s ease-out}
.lb[hidden]{display:none}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb figure{margin:0;max-width:min(1020px,100%);max-height:100%;display:flex;flex-direction:column;gap:12px}
.lb img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:12px;display:block}
.lb figcaption{color:rgba(255,255,255,.9);font-family:var(--disp);font-weight:600;font-size:1.05rem;text-align:center}
.lb figcaption span{display:block;font-family:var(--body);font-weight:400;font-size:.88rem;
  color:rgba(255,255,255,.62);margin-top:5px}
.lb-x{position:fixed;top:18px;right:18px;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;font-size:1.4rem;line-height:1}
.lb-x:hover{background:rgba(255,255,255,.3)}

/* click-to-open detail on the text-only lists (no invented photographs) */
.mi.open-able{cursor:pointer}
.mi-more{grid-column:1/-1;max-height:0;overflow:hidden;transition:max-height .28s ease;color:var(--muted);font-size:.9rem}
.mi.is-open .mi-more{max-height:220px}
.mi-more-in{padding:12px 0 4px;border-top:1px dashed var(--line);margin-top:10px}
.mi-more-in a{color:var(--teal-d);font-weight:600}

/* ===================== dietary tags, filters and item pages ===================== */
/* Text labels always. A colour-blind customer has to be able to read an allergen,
   so no badge here means anything by its colour alone. */
.bdgs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.bdg{font-family:var(--body);font-weight:700;font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 8px;border-radius:4px;white-space:nowrap;line-height:1.3}
.bdg-veg{background:rgba(var(--brand-rgb),.10);color:var(--teal-ink);border:1px solid rgba(var(--brand-rgb),.22)}
.bdg-warn{background:rgba(194,84,26,.09);color:#8f3d12;border:1px solid rgba(194,84,26,.24)}

.filters{margin-top:24px}
.filters-h{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.filters-l{font-family:var(--body);font-weight:700;font-size:.72rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{font-family:var(--body);font-weight:600;font-size:.87rem;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;cursor:pointer;min-height:44px;transition:background .18s,border-color .18s,color .18s}
.chip:hover{border-color:rgba(var(--brand-rgb),.45)}
.chip[aria-checked="true"]{background:var(--teal-d);border-color:var(--teal-d);color:#fff}
.chip[aria-checked="true"]::before{content:"\2713\00a0";font-weight:800}
.chip-clear{min-height:36px;padding:6px 13px;font-size:.8rem;color:var(--muted)}
.fcount{margin-top:11px;font-size:.9rem;color:var(--teal-ink);font-weight:600;min-height:1.2em}
.fcount:empty{min-height:0;margin-top:0}
.fnote{margin-top:12px;font-size:.84rem;color:var(--muted);line-height:1.6;max-width:72ch}
.fnone{margin-top:22px;padding:18px 20px;border:1px dashed var(--line);border-radius:10px;
  color:var(--muted);font-size:.95rem}

/* card becomes a link into the item page; the order button stays clickable */
.scard{position:relative}
.scard-img{cursor:default}
.scard-img::after{content:"See what is in it"}
.scard-l{color:inherit;text-decoration:none}
.scard-l::after{content:"";position:absolute;inset:0;z-index:1}
.scard-l:focus-visible{outline:none}
.scard:focus-within{outline:3px solid var(--teal-d);outline-offset:2px}
.scard-a{position:relative;z-index:2}
.scard-b .bdgs{margin-top:11px}

/* ---- item page ---- */
.crumb{padding:18px 0 0}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;
  font-size:.84rem;color:var(--muted)}
.crumb li+li::before{content:"/";margin-right:6px;color:var(--line)}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--teal-d);text-decoration:underline}

.ip{padding:26px 0 40px}
.ip-g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px;align-items:start}
.ip-ph{border-radius:14px;overflow:hidden;box-shadow:var(--shadow);background:var(--card)}
.ip-zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.ip-zoom img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ip-noph{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;
  border:1px dashed var(--line);box-shadow:none;background:var(--paper2)}
.ip-noph-in{text-align:center;padding:26px;max-width:38ch}
.ip-noph-in span{font-family:var(--body);font-weight:700;font-size:.7rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted)}
.ip-noph-in p{margin-top:10px;color:var(--muted);font-size:.93rem;line-height:1.6}
.ip-in .kicker{display:flex;align-items:center;gap:10px}
.ip-in h1{font-size:clamp(2rem,5vw,2.9rem);margin-top:10px}
.ip-price{font-family:var(--disp);font-weight:700;font-size:1.7rem;color:var(--teal-d);
  margin-top:12px;font-variant-numeric:tabular-nums}
.ip-blurb{margin-top:10px;color:var(--muted);font-size:1.03rem;line-height:1.62}
.ip-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ip-del{margin-top:14px;font-size:.88rem;color:var(--muted)}
.ip-body{padding:10px 0 46px}
.ip-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px}
.ings{list-style:none;margin:16px 0 0;padding:0}
.ings li{padding:9px 0 9px 24px;border-bottom:1px solid var(--line);position:relative;font-size:.97rem}
.ings li::before{content:"";position:absolute;left:4px;top:18px;width:6px;height:6px;
  border-radius:50%;background:var(--teal-d)}
.ip-note{margin-top:18px;color:var(--muted);font-size:.96rem;line-height:1.68}
.ip-h3{font-family:var(--disp);font-weight:700;font-size:1.05rem;margin-top:22px}
.al{margin-top:14px;font-size:.96rem;line-height:1.6}
.al b{display:block;font-family:var(--body);font-weight:700;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.al-has span{color:#8f3d12;font-weight:600}
.al-no span{color:var(--ink)}
.swaps{list-style:none;margin:12px 0 0;padding:0}
.swaps li{padding:8px 0 8px 22px;position:relative;color:var(--muted);font-size:.95rem;line-height:1.6}
.swaps li::before{content:"\2192";position:absolute;left:0;color:var(--teal-d);font-weight:700}
.nut{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:20px 0 0}
.nut>div{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.nut dt{font-family:var(--body);font-weight:700;font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}
.nut dd{margin:6px 0 0;font-family:var(--disp);font-weight:700;font-size:1.65rem;
  color:var(--teal-d);font-variant-numeric:tabular-nums}

@media (max-width:820px){
  .ip-g{grid-template-columns:1fr;gap:22px}
  .ip-cols{gap:28px}
}
@media (prefers-reduced-motion:reduce){
  .chip,.scard{transition:none}
}
ul.mlist{list-style:none;margin:0;padding:0}
.mi .bdgs{grid-column:1/-1;margin-top:8px}
.mi[hidden],.scard[hidden]{display:none}
.btn-g{display:inline-block;background:transparent;color:var(--teal-d);border:1px solid rgba(var(--brand-rgb),.4);
  border-radius:100px;padding:14px 24px;font-family:var(--body);font-weight:700;font-size:.95rem;
  text-decoration:none;transition:background .2s,border-color .2s}
.btn-g:hover{background:rgba(var(--brand-rgb),.07);border-color:var(--teal-d)}
.ip-acts .btn-c{margin-top:0}
.note{margin-top:20px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--teal-d);
  border-radius:8px;padding:16px 20px;font-size:.94rem;color:var(--muted);line-height:1.65}
.note b{color:var(--ink)}
.ip-g{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
/* the filter row sits directly under the menu tabs and must not read as more tabs */
.filters{background:rgba(var(--brand-rgb),.045);border:1px solid rgba(var(--brand-rgb),.13);
  border-radius:12px;padding:16px 18px}
/* 44px is the minimum comfortable touch target. The tabs were 36px tall, which
   is the single most common accessibility miss on a phone menu. */
.mtab{min-height:44px;display:inline-flex;align-items:center}
.mtabs{margin-bottom:22px}
.filters{margin-bottom:30px}
.scard-a{min-height:44px;display:inline-flex;align-items:center}
/* This has to come last. An earlier .ip-g column override was appended after the
   820px media query and, at equal specificity, silently beat it - which left the
   item page in two columns on a phone with a thumbnail-sized photograph. */
@media (max-width:820px){
  .ip-g{grid-template-columns:1fr;gap:22px}
  .ip-ph{width:100%}
  .ip-in h1{font-size:2.1rem}
}

/* ============ mobile: the homepage sandwich row swipes sideways ============ */
/* Twelve full-width cards stacked is a very long thumb-scroll for what is only a
   taster. The menu page keeps the vertical grid - that is where people compare. */
.swipe-hint{display:none}
.seeall{margin:26px 0 0;text-align:center}
.seeall .btn-c{margin-top:0}
.seeall span{display:block;margin-top:10px;font-size:.88rem;color:var(--muted)}
.scard-end{display:none}

@media (max-width:760px){
  .swipe-hint{display:block;margin:18px 0 -4px;font-family:var(--body);font-weight:700;
    font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .swipe-hint span{display:inline-block;margin-left:5px;animation:nudgeR 1.6s ease-in-out infinite}
  @keyframes nudgeR{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

  .sgrid.is-swipe{
    display:flex;grid-template-columns:none;gap:14px;
    overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    /* No edge bleed. A negative margin plus percentage padding left the first
       card flush against the screen while the heading above it sat on the 20px
       gutter, which read as a broken row rather than a deliberate one. The peek
       comes from the card being narrower than the rail instead. */
    padding:4px 0 14px;
  }
  .sgrid.is-swipe::-webkit-scrollbar{height:0}
  .sgrid.is-swipe{scrollbar-width:none}
  .sgrid.is-swipe>.scard{flex:0 0 82%;scroll-snap-align:start}
  .sgrid.is-swipe .scard-img img{aspect-ratio:5/4}
  .sgrid.is-swipe:focus-visible{outline:3px solid var(--teal-d);outline-offset:4px}

  /* the card that ends the swipe */
  .scard-end{flex:0 0 74%;display:flex;flex-direction:column;justify-content:center;
    text-decoration:none;color:#fff;background:var(--teal-d);border-color:var(--teal-d);
    padding:24px 22px;scroll-snap-align:start}
  .scard-end .se-k{font-family:var(--body);font-weight:700;font-size:.65rem;letter-spacing:.16em;
    text-transform:uppercase;color:rgba(255,255,255,.72)}
  .scard-end .se-h{font-family:var(--disp);font-weight:700;font-size:1.45rem;line-height:1.12;
    margin-top:9px;letter-spacing:-.02em}
  .scard-end .se-d{margin-top:10px;font-size:.88rem;line-height:1.5;color:rgba(255,255,255,.86)}
  .scard-end .se-go{margin-top:16px;font-weight:700;font-size:.88rem;
    text-decoration:underline;text-underline-offset:4px}
  .scard-end:hover{transform:none}

  /* The swipe already ends on a full-width "See the full menu" card, so the
     button underneath said the same thing twice, thirty pixels apart. */
  .seeall{display:none}
}
@media (prefers-reduced-motion:reduce){.swipe-hint span{animation:none}}
/* Patisserie is priced on the board, so its cards say that instead of a number. */
.scard-ask{font-family:var(--body);font-weight:600;font-size:.82rem;color:var(--muted)}

/* ===================== the long menu page ===================== */
/* One page in the order you would walk past the counter, with a sticky jump bar.
   The header is already sticky at the top, so this sits directly beneath it. */
.secnav{position:sticky;top:var(--hdr-h,64px);z-index:50;background:rgba(253,248,242,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.secnav-in{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px 0}
.secnav-in::-webkit-scrollbar{display:none}
.secnav a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:40px;
  padding:7px 15px;border-radius:999px;text-decoration:none;color:var(--muted);
  font-family:var(--body);font-weight:600;font-size:.88rem;white-space:nowrap;
  border:1px solid transparent;transition:background .18s,color .18s,border-color .18s}
.secnav a:hover{color:var(--ink);border-color:var(--line)}
.secnav a.on{background:var(--teal-d);color:#fff;border-color:var(--teal-d)}
.msec{padding:46px 0 10px;scroll-margin-top:118px}
.msec:nth-of-type(even){background:var(--paper2)}
.msec-top{padding:26px 0 0}
#sandwiches{padding-top:34px}
@media (max-width:760px){
  .secnav-in{padding:8px 0}
  .msec{padding:34px 0 6px;scroll-margin-top:104px}
}
@media (prefers-reduced-motion:reduce){.secnav a{transition:none}}
.scard-two{font-family:var(--body);font-weight:700;font-size:.9rem;color:var(--teal-d)}

/* eclair flavours on the item page: four equal photos, two per row on a phone */
.flv-s{padding-top:0}
.flv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.flv figure{margin:0;display:flex;flex-direction:column;gap:8px}
.flv img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block}
.flv figcaption{font-weight:600;font-size:15px}
@media (max-width:700px){.flv{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* bakery page: the baguette gets its own band so the pastry grid stays a full 3x3 */
.bread{padding-top:0}
.bread-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px;align-items:center}
.bread-g .sgrid{grid-template-columns:1fr}
.bread-t{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (max-width:760px){.bread-g{grid-template-columns:1fr}}

/* sub-groups inside a menu section (drinks) */
.msub{font-family:var(--disp,inherit);font-size:20px;margin:34px 0 0}
.bread-t .mlist{margin-top:4px}

/* ---------------------------------------------------------------- v8 brand
   The basket-guy logo: horizontal lockup in the header, the round seal as a
   sticker on every hero and in the footer, and Pik (the mascot) wherever a
   section needs a friendly face. Mascot SVGs carry their own cream fill, so
   they read on light and dark grounds alike. */
.brand img.logo-h{height:52px;width:auto;border-radius:0;display:block}
.brand .b2{border-left-color:rgba(var(--brand-rgb),.25)}
.foot img.fl{width:128px;height:128px;border-radius:50%;margin-bottom:18px}
.hero-seal{position:absolute;z-index:3;right:max(24px,calc((100vw - var(--wrap)) / 2));top:44px;width:156px;height:156px;
  transform:rotate(-9deg);filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));pointer-events:none;animation:sealIn .7s .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes sealIn{from{opacity:0;transform:rotate(-30deg) scale(.6)}to{opacity:1;transform:rotate(-9deg) scale(1)}}
.phero .hero-seal{top:28px;width:118px;height:118px}
.ow-ai-art img.ow-pik{max-width:250px;filter:drop-shadow(0 12px 22px rgba(var(--ink-rgb),.16))}
.cb-pik{display:block;width:128px;height:128px;margin:-6px auto 12px;transform-origin:50% 100%;animation:pikBob 3.2s ease-in-out infinite}
@keyframes pikBob{0%,100%{transform:translateY(0) rotate(0) scale(1)}10%{transform:translateY(2px) rotate(0) scale(1.06,.94)}22%{transform:translateY(-16px) rotate(-4deg) scale(.97,1.04)}34%{transform:translateY(0) rotate(0) scale(1.04,.96)}42%{transform:translateY(0) rotate(0) scale(1)}70%{transform:translateY(-3px) rotate(3deg)}}
.vcard{position:relative}
.hrs-pik{display:inline-block;vertical-align:middle;width:50px;height:50px;margin:10px 6px 0 -6px}
.hrs-pik img{width:100%;height:100%}
.hrs-pik .pk-shut,.shop-shut .hrs-pik .pk-open{display:none}
.shop-shut .hrs-pik .pk-shut{display:block}
.mbar{background:var(--night2)}
@media(max-width:900px){
  .brand img.logo-h{height:42px}
  .hero-seal{width:92px;height:92px;top:18px;right:16px}
  .phero .hero-seal{width:80px;height:80px;top:16px}
  .cb-pik{width:96px;height:96px}
}
@media(prefers-reduced-motion:reduce){.hero-seal,.cb-pik{animation:none}}
.row-pik{float:right;width:104px;height:104px;margin:-8px -4px 6px 12px}

/* Dark sections: the brand navy disappears on the navy night ground, so buttons
   switch to the accent there and small labels to the pop colour. */
.cat{--teal-d:var(--clay);--brand-h:var(--accent-h)}
.cat .eyebrow,.cat .kicker{color:var(--teal)}
.vcard .btn{color:#fff}
.apps-l a.btn{opacity:1}
@media(max-width:600px){.hero > .hero-seal{display:none}}

/* v8 header, second pass: logo, nav, basket, order - nothing else. Labels never
   wrap; the nav hands over to the burger before it runs out of room. */
.nav{gap:28px}
.nav a{white-space:nowrap}
.hdr-in{gap:28px;min-height:74px}
@media(max-width:1180px){
  .nav,.hdr-cta .btn{display:none}
  .burger{display:flex;margin-left:0}
  .hdr-cta{margin-left:auto}
  .mnav.open,.hdr.open .mnav{display:block}
}

/* Launch (Oct 20): the ingredients sit beside the photo with the price, compact,
   instead of a separate block below. Two columns of short lines on a wide screen. */
.ip-what{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.ip-what .ip-h3{margin-top:0;font-size:.98rem}
.ings-c{margin-top:8px;columns:2;column-gap:22px}
.ings-c li{break-inside:avoid;padding:5px 0 5px 18px;font-size:.92rem;line-height:1.4;border-bottom:0}
.ings-c li::before{top:12px;left:2px;width:5px;height:5px}
.ip-what .ip-note{margin-top:10px;font-size:.9rem;line-height:1.55}
@media (max-width:520px){.ings-c{columns:1}}
/* The closed order drawer kept display:flex over its [hidden] attribute, so its
   shadow bled onto the right edge of every page. */
.ord-panel[hidden],.ord-scrim[hidden]{display:none}
.ip-del a[href^="tel:"],.mg-st a{white-space:nowrap}
/* Two photos (breakfast sandwich) fill the row instead of half of a four-up grid. */
.flv:has(> figure:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}

/* legal pages: heading left, text right, so the copy uses the width instead of a narrow column */
.legal-row{display:grid;grid-template-columns:minmax(180px,1fr) 2.6fr;gap:10px 56px;padding:28px 0;border-top:1px solid var(--line)}
.legal-row:first-child{border-top:0;padding-top:0}
.legal-row h2{font-family:var(--disp);font-weight:700;font-size:1.22rem;line-height:1.3;margin:0;color:var(--ink)}
.legal-row p{color:var(--muted);font-size:1rem;line-height:1.72;margin:0 0 12px}
.legal-row p:last-child{margin-bottom:0}
.legal-row b{color:var(--ink);font-weight:600}
.legal-date{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.88rem}
.nf-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
@media(max-width:760px){.legal-row{grid-template-columns:1fr;gap:10px}}