/* ==========================================================================
   CHICKFLIX — v4
   A warm, editorial build. Bone paper, ink type, red as an accent only.
   Dark is punctuation, not the ground: the photography does the work.

   Motion rule for the whole file: transform and opacity only.
   ========================================================================== */

:root{
  --bone:#FAF6F0;
  --paper:#FFFFFF;
  --sand:#F1E9DF;
  --ink:#1A1512;
  --ink-2:#54483F;
  --mute:#8C7D71;
  --line:rgba(26,21,18,.13);
  --red:#D81F18;
  --red-dk:#A8120C;
  --amber:#E8A62C;
  --char:#17120F;

  --dsp:'Fraunces',Georgia,'Times New Roman',serif;
  --cond:'Barlow Condensed','Arial Narrow',sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;

  --gut:clamp(1.25rem,5vw,4.5rem);
  --maxw:1320px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --hdr:84px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bone)}
body{
  background:var(--bone);color:var(--ink);
  font-family:var(--body);font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.lock{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2.5px solid var(--red);outline-offset:3px;border-radius:3px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap--wide{max-width:1560px}
.wrap--tight{max-width:920px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);
  color:#fff;padding:.9rem 1.3rem}
.skip:focus{left:1rem;top:1rem}

/* ----------------------------------------------------------------- type -- */
.d1,.d2,.d3,.d4{
  font-family:var(--dsp);font-weight:600;letter-spacing:-.022em;line-height:.96;
  font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 100;
}
.d1{font-size:clamp(2.7rem,min(8.6vw,12.4vh),8rem);line-height:.9}
.d2{font-size:clamp(2.1rem,5.2vw,4.4rem)}
.d3{font-size:clamp(1.6rem,3.4vw,2.7rem)}
.d4{font-size:clamp(1.2rem,2.2vw,1.65rem);line-height:1.08}
.it{font-style:italic;font-variation-settings:'SOFT' 40,'WONK' 1,'opsz' 100}
.red{color:var(--red)}

.lede{font-size:clamp(1.02rem,1.7vw,1.22rem);line-height:1.72;color:var(--ink-2);
  max-width:56ch}
.small{font-size:.9rem;line-height:1.7;color:var(--mute)}

.kick{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--cond);
  font-weight:600;text-transform:uppercase;letter-spacing:.2em;
  font-size:clamp(.68rem,1.1vw,.76rem);color:var(--red)}
.kick::before{content:"";width:28px;height:1.5px;background:currentColor;flex:none}
.kick--plain::before{display:none}
.kick--pale{color:rgba(255,255,255,.64)}

.num{font-family:var(--cond);font-weight:600;font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------- button -- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.86rem;line-height:1;
  padding:1.05rem 1.9rem;border-radius:999px;overflow:hidden;isolation:isolate;
  background:var(--ink);color:var(--bone);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.btn span{position:relative;z-index:1}
.btn::after{content:"";position:absolute;inset:0;z-index:0;background:var(--red);
  transform:translateY(101%);transition:transform .5s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(26,21,18,.6)}
.btn:hover::after{transform:translateY(0)}
.btn--red{background:var(--red);color:#fff}
.btn--red::after{background:var(--ink)}
.btn--line{background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--line::after{background:var(--ink)}
.btn--line:hover{color:var(--bone);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--pale{background:transparent;color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32)}
.btn--pale::after{background:#fff}
.btn--pale:hover{color:var(--ink)}
.btn--sm{padding:.78rem 1.35rem;font-size:.76rem}

.tlink{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--cond);
  font-weight:600;text-transform:uppercase;letter-spacing:.15em;font-size:.78rem;
  position:relative;padding-bottom:.3rem}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:right center;
  transition:transform .45s var(--ease)}
.tlink:hover::after{transform:scaleX(1);transform-origin:left center}
.tlink svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}

/* --------------------------------------------------------------- header -- */
/* The hero is light, so the header is ink on bone from the first pixel and
   simply gains a hairline and a blur once you scroll. */
.hd{position:fixed;inset:0 0 auto;z-index:100;background:var(--bone);
  transition:background .4s ease,box-shadow .4s ease,transform .5s var(--ease)}
.hd.solid{background:rgba(250,246,240,.94);backdrop-filter:saturate(1.5) blur(14px);
  box-shadow:0 1px 0 var(--line)}
.hd.up{transform:translateY(-100%)}
.hd__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  height:var(--hdr)}
.brand{display:flex;align-items:center;gap:.6rem;flex:none}
.brand img{width:38px;height:auto}
.brand b{font-family:var(--dsp);font-weight:600;font-size:1.3rem;letter-spacing:-.02em;
  color:var(--ink)}
.brand i{font-style:normal;color:var(--red)}

.nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem)}
.nav a{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.82rem;color:var(--ink-2);
  position:relative;padding-block:.4rem;transition:color .4s ease}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--red);transform:scaleX(0);transform-origin:right center;
  transition:transform .42s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);
  transform-origin:left center}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}

.hd__r{display:flex;align-items:center;gap:.8rem;flex:none}
.burger{display:none;width:44px;height:44px;place-items:center;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--line)}
.burger i{display:block;width:17px;height:1.6px;background:var(--ink);position:relative;
  transition:transform .4s var(--ease),background .4s ease}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:17px;
  height:1.6px;background:inherit;transition:transform .4s var(--ease)}
.burger i::before{top:-5.5px}.burger i::after{top:5.5px}
body.navopen .burger i{background:transparent}
body.navopen .burger i::before{transform:translateY(5.5px) rotate(45deg);background:#fff}
body.navopen .burger i::after{transform:translateY(-5.5px) rotate(-45deg);background:#fff}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:95;background:var(--char);color:#fff;
  display:grid;align-content:center;padding:var(--hdr) var(--gut) 2rem;
  clip-path:circle(0% at calc(100% - 46px) 42px);
  transition:clip-path .75s var(--ease-io);visibility:hidden}
body.navopen .drawer{clip-path:circle(150% at calc(100% - 46px) 42px);visibility:visible}
.drawer a{display:block;font-family:var(--dsp);font-weight:600;
  font-size:clamp(1.9rem,8vw,3rem);line-height:1.18;padding-block:.22rem;
  opacity:0;transform:translateY(22px);
  transition:opacity .5s ease,transform .6s var(--ease),color .3s}
body.navopen .drawer a{opacity:1;transform:none}
body.navopen .drawer a:nth-child(1){transition-delay:.16s}
body.navopen .drawer a:nth-child(2){transition-delay:.21s}
body.navopen .drawer a:nth-child(3){transition-delay:.26s}
body.navopen .drawer a:nth-child(4){transition-delay:.31s}
body.navopen .drawer a:nth-child(5){transition-delay:.36s}
body.navopen .drawer a:nth-child(6){transition-delay:.41s}
.drawer a:hover{color:var(--amber)}
.drawer__f{margin-top:2rem;font-size:.9rem;color:rgba(255,255,255,.6);
  opacity:0;transition:opacity .5s ease .5s}
body.navopen .drawer__f{opacity:1}

@media(max-width:1060px){
  .nav,.hd__r .btn{display:none}
  .burger{display:grid}
}

/* ----------------------------------------------------------------- hero --
   MeVaMe stages its food on a saturated red surface and makes that the brand
   motif, so the right half of the hero is a red panel that bleeds off the
   edge of the page and the photograph sits on it. Flameo names the actual
   products under the campaign line. Konala keeps the promise plain-spoken.
   -------------------------------------------------------------------------- */
/* ------------------------------------------------------- nav panels ----- */
/* Only Menu and Catering have one. It opens on hover and on keyboard focus,
   and the link underneath still works on the first click — the panel is a
   shortcut, never a gate. */
/* Not anchored to the nav item: at 1100px that pushed the panel 30px off the
   left edge. The header is already position:fixed and spans the viewport, so
   the panel centres on that instead and can never overhang. */
.nav__has{position:static}
.np{position:absolute;left:50%;top:var(--hdr);z-index:70;
  width:min(94vw,860px);transform:translate(-50%,-8px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease,transform .36s var(--ease),visibility .28s}
.nav__has:hover .np,.nav__has:focus-within .np{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,6px)}
/* the panel has to survive the trip from the link down to it */
.np::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.np__in{background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:clamp(1rem,2vw,1.4rem);
  box-shadow:0 30px 60px -28px rgba(23,18,15,.42)}
.np .kick{display:block;margin-bottom:.9rem}
.np__g{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.np__i{display:flex;flex-direction:column;gap:.5rem;padding:.6rem;
  border-radius:12px;transition:background .3s ease,transform .4s var(--ease)}
.np__i:hover{background:var(--sand);transform:translateY(-2px)}
.np__ph{display:block;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:var(--sand)}
.np__ph img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}
.np__i:hover .np__ph img{transform:scale(1.07)}
.np__t b{display:block;font-family:var(--dsp);font-weight:600;font-size:.92rem;
  line-height:1.2}
.np__t i{display:block;margin-top:.15rem;font-style:normal;font-family:var(--cond);
  font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.64rem;
  color:var(--red)}
/* the panel is a pointer convenience; phones get the drawer instead */
@media(max-width:1024px){.np{display:none}}
@media(prefers-reduced-motion:reduce){.np{transition:none}}

/* On a pointer screen the hero is given scroll length and the content sticks,
   so the campaign changes as you scroll rather than on a timer. position:
   sticky, never a ScrollTrigger pin — you can scroll straight past it. */
.hero{position:relative}
.hero__stick{position:relative;overflow:hidden;
  padding-top:calc(var(--hdr) + clamp(1.4rem,4vh,3rem));
  padding-bottom:clamp(2.5rem,6vw,4.5rem)}
@media(min-width:861px){
  .hero{height:300vh}
  .hero__stick{position:sticky;top:0;height:100svh;display:grid;align-content:center}
}
.hero__panel{position:absolute;right:0;top:var(--hdr);bottom:0;width:46%;z-index:0;
  background:radial-gradient(120% 90% at 30% 20%,#E8322A,var(--red) 42%,var(--red-dk) 100%);
  border-radius:0 0 0 clamp(2rem,6vw,5rem)}
.hero__g{position:relative;z-index:1;display:grid;
  grid-template-columns:1.18fr .82fr;gap:clamp(1.6rem,3.4vw,3.6rem);
  align-items:center;min-height:min(74vh,720px)}
.hero__t{position:relative;z-index:2}
.hero__t .kick{margin-bottom:clamp(.9rem,2vw,1.3rem)}
.hero h1{margin-bottom:clamp(.9rem,2.2vw,1.4rem)}
.hero .lede{max-width:40ch}
.hero__line{margin-top:1rem;font-family:var(--cond);font-weight:600;
  text-transform:uppercase;letter-spacing:.15em;font-size:.82rem;color:var(--ink);
  padding-top:.9rem;border-top:1px solid var(--line);max-width:40ch}
.hero__cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:clamp(1.5rem,3vw,2.2rem)}
.hero__meta{display:flex;gap:clamp(1.2rem,3vw,2.6rem);flex-wrap:wrap;
  margin-top:clamp(1.8rem,4vw,2.8rem);padding-top:clamp(1.1rem,2.4vw,1.6rem);
  border-top:1px solid var(--line)}
.hero__meta div b{display:block;font-family:var(--dsp);font-weight:600;
  font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1}
.hero__meta div span{display:block;margin-top:.22rem;font-family:var(--cond);
  font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;
  color:var(--mute)}

.hero__m{position:relative;z-index:2}
.hfig{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:7/6;
  background:var(--red-dk);box-shadow:0 40px 80px -44px rgba(23,18,15,.75)}
.hfig[hidden]{display:none}
.hfig img{width:100%;height:100%;object-fit:cover}
.hfig__p{position:absolute;left:clamp(.8rem,2vw,1.2rem);bottom:clamp(.8rem,2vw,1.2rem);
  background:var(--bone);border-radius:12px;padding:.7rem 1rem;
  box-shadow:0 16px 36px -20px rgba(23,18,15,.7)}
.hfig__p b{display:block;font-family:var(--cond);font-weight:600;
  text-transform:uppercase;letter-spacing:.11em;font-size:.7rem;color:var(--mute)}
.hfig__p span{display:block;font-family:var(--dsp);font-weight:600;font-size:1.3rem;
  line-height:1.15;color:var(--ink)}
/* ------------------------------------------------------------- steam ---- */
/* Pre-blurred sprites. Only transform and opacity animate, so the wisps cost
   nothing per frame; a runtime blur filter on a moving element is what made
   the rotating dishes drop frames. */
/* Sat over the whole column before, which meant the wisps drifted up past the
   photograph and dissolved somewhere near the header — technically animating,
   invisible in practice. Now it is clipped to the picture itself and rises off
   the food. */
.hero__steam{position:absolute;inset:0;z-index:3;border-radius:16px;
  pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to top,transparent 2%,#000 26%,#000 78%,transparent);
  mask-image:linear-gradient(to top,transparent 2%,#000 26%,#000 78%,transparent)}
.hfig{z-index:1}
.hero__steam i{position:absolute;left:50%;bottom:-16%;display:block;
  width:clamp(150px,46%,280px);aspect-ratio:300/620;
  background:var(--wisp) center/100% 100% no-repeat;
  opacity:0;will-change:transform,opacity;
  animation:rise 7.5s linear infinite;animation-delay:var(--d)}
.hero__steam i:nth-child(1){--wisp:url(../img/fx/steam1.webp)}
.hero__steam i:nth-child(2){--wisp:url(../img/fx/steam2.webp)}
.hero__steam i:nth-child(3){--wisp:url(../img/fx/steam3.webp)}
@keyframes rise{
  0%  {opacity:0;   transform:translate(calc(-50% + var(--x)),8%)   scale(calc(var(--s) * .55))}
  14% {opacity:.85}
  55% {opacity:.5}
  100%{opacity:0;   transform:translate(calc(-50% + var(--x) + 6%),-92%) scale(calc(var(--s) * 1.3))}
}
@media(prefers-reduced-motion:reduce){.hero__steam{display:none}}

.hero__dots{display:flex;gap:.5rem;margin-top:1.1rem}
.hero__dots button{width:30px;height:4px;border-radius:99px;
  background:rgba(255,255,255,.4);transition:background .35s,transform .35s}
.hero__dots button.on{background:#fff;transform:scaleY(1.8)}

@media(max-width:900px){
  .hero{padding-bottom:0}
  /* On a narrow screen the panel must sit behind the photograph only —
     stacked, it ran under the buttons and the stats and swallowed them. */
  .hero__panel{display:none}
  .hero__g{grid-template-columns:1fr;min-height:0;gap:clamp(1.8rem,5vw,2.6rem)}
  .hero__m{position:relative;margin-inline:calc(var(--gut) * -1);
    padding:clamp(1.6rem,5vw,2.4rem) var(--gut) clamp(1.8rem,5vw,2.6rem);
    background:radial-gradient(120% 90% at 30% 10%,#E8322A,var(--red) 44%,var(--red-dk) 100%);
    border-radius:clamp(1.6rem,6vw,2.4rem) clamp(1.6rem,6vw,2.4rem) 0 0}
  .hfig{aspect-ratio:4/3}
  .hero__cta .btn{flex:1 1 auto;justify-content:center}
  .hero__dots{justify-content:center}
}

/* --------------------------------------------------------------- ticker -- */
.tick{border-block:1px solid var(--line);padding-block:.85rem;overflow:hidden;
  background:var(--bone)}
.tick__t{display:flex;width:max-content;will-change:transform;
  animation:marq 44s linear infinite}
.tick:hover .tick__t{animation-play-state:paused}
.tick span{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.84rem;color:var(--ink-2);padding-inline:1.3rem;
  white-space:nowrap;display:flex;align-items:center;gap:1.3rem}
.tick span::after{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--red);display:block}
@keyframes marq{to{transform:translate3d(-50%,0,0)}}

/* ------------------------------------------------------------- sections -- */
.sec{padding-block:clamp(3.5rem,8vw,7rem);position:relative}
.sec--dark{background:var(--char);color:var(--bone)}
.sec--dark .lede{color:rgba(255,255,255,.72)}
.sec--dark .small{color:rgba(255,255,255,.52)}
.sec--sand{background:var(--sand)}
.sec--paper{background:var(--paper)}
.shead{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,5vw,5rem);
  align-items:end;margin-bottom:clamp(2.2rem,5vw,3.6rem)}
.shead__r{justify-self:end;align-self:end;padding-bottom:.4rem}
.shead h2{margin-top:1rem}
@media(max-width:800px){
  .shead{grid-template-columns:1fr;align-items:start;gap:1.2rem}
  .shead__r{justify-self:start}
}

/* ============================== THE LIST ==================================
   The signature piece: a typeset dish list where the photograph follows the
   cursor. Rows are plain type, so the page reads like a menu, and the食
   photography only appears when you reach for it.
   ========================================================================== */
.list{border-top:1px solid var(--line)}
.lrow{display:grid;grid-template-columns:2.4rem 64px 1fr auto;align-items:center;
  gap:clamp(.7rem,1.6vw,1.4rem);padding-block:clamp(.7rem,1.6vw,1rem);
  border-bottom:1px solid var(--line);position:relative;isolation:isolate;
  perspective:800px}
.lrow::before{content:"";position:absolute;inset:0 calc(var(--gut) * -.4);z-index:-1;
  background:var(--ink);border-radius:10px;transform:scaleY(0);transform-origin:bottom center;
  transition:transform .45s var(--ease)}
.lrow:hover::before{transform:scaleY(1);transform-origin:top center}
.lrow__n{font-family:var(--cond);font-weight:600;font-size:.8rem;color:var(--mute);
  letter-spacing:.08em;transition:color .35s ease}
/* small, square, and it leans toward you — photography used at a size that
   lets twelve of them live on one screen */
.lrow__i{width:64px;height:64px;border-radius:10px;overflow:hidden;background:var(--sand);
  transform-style:preserve-3d;
  transition:transform .55s var(--ease),box-shadow .45s ease}
.lrow__i img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.lrow:hover .lrow__i{transform:rotateY(-18deg) rotateX(6deg) translateZ(26px) scale(1.12);
  box-shadow:-14px 16px 34px -14px rgba(0,0,0,.6)}
.lrow:hover .lrow__i img{transform:scale(1.14)}
.lrow__t{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.lrow__t b{font-family:var(--dsp);font-weight:600;
  font-size:clamp(1.05rem,2.2vw,1.6rem);line-height:1.12;letter-spacing:-.018em;
  transition:color .35s ease,transform .5s var(--ease)}
.lrow:hover .lrow__t b{transform:translateX(8px)}
.lrow__tag{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.64rem;padding:.2rem .55rem;border-radius:99px;
  background:var(--sand);color:var(--ink-2);transition:opacity .35s}
.lrow__tag--veg{background:rgba(32,110,70,.14);color:#206E46}
.lrow__tag--chef{background:rgba(216,31,24,.12);color:var(--red)}
.lrow__p{font-family:var(--dsp);font-weight:600;font-size:clamp(.98rem,1.8vw,1.3rem);
  white-space:nowrap;transition:color .35s ease}
.lrow:hover .lrow__n{color:rgba(255,255,255,.5)}
.lrow:hover .lrow__t b{color:var(--bone)}
.lrow:hover .lrow__p{color:var(--amber)}
.lrow:hover .lrow__tag{opacity:.85}

/* Every category card carries its own order button, the way MeVaMe puts
   START YOUR ORDER on each card rather than one link at the bottom. */
.card .tlink{padding:.5rem .95rem;border:1px solid var(--line);border-radius:99px;
  letter-spacing:.12em;font-size:.7rem;transition:background .4s var(--ease),
  color .4s var(--ease),border-color .4s var(--ease)}
.card .tlink::after{display:none}
.card:hover .tlink{background:var(--red);border-color:var(--red);color:#fff}
/* Two columns from a laptop up. Fifteen grills in one thin stack left half a
   wide screen empty and read as a plain HTML table; paired, the section is one
   screen instead of two and the photography carries it. Column flow, so the
   numbering still runs straight down each column. */
@media(min-width:1100px){
  .list--two{display:grid;grid-auto-flow:column;
    grid-template-rows:repeat(var(--rows),auto);grid-template-columns:1fr 1fr;
    column-gap:clamp(2rem,4.5vw,4.5rem)}
  .lrow__i{width:76px;height:76px}
  .lrow{grid-template-columns:2.2rem 76px 1fr auto}
  .lrow::before{inset:0 -.9rem}
}
@media(max-width:620px){
  .lrow{grid-template-columns:52px 1fr auto;gap:.8rem}
  .lrow__n{display:none}
  .lrow__i{width:52px;height:52px}
  .lrow:hover .lrow__i{transform:scale(1.06)}
}

/* ---------------------------------------------------------- scroll rail -- */
.rail{overflow:hidden;padding-block:clamp(1rem,2.5vw,2rem)}
.rail__t{display:flex;gap:clamp(.7rem,1.6vw,1.2rem);width:max-content;
  will-change:transform;padding-inline:var(--gut)}
.rtile{position:relative;flex:none;width:clamp(210px,24vw,330px);aspect-ratio:3/4;
  border-radius:14px;overflow:hidden;background:var(--sand)}
.rtile img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.rtile:hover img{transform:scale(1.06)}
.rtile__b{position:absolute;inset:auto 0 0 0;padding:1rem;
  background:linear-gradient(to top,rgba(23,18,15,.92),transparent);color:#fff}
.rtile__b b{display:block;font-family:var(--dsp);font-weight:600;font-size:1.05rem;
  line-height:1.15}
.rtile__b i{font-style:normal;font-family:var(--cond);font-weight:600;
  letter-spacing:.1em;font-size:.76rem;color:var(--amber)}


/* ----------------------------------------------------------- card grid --- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,2rem)}
.card{display:block;position:relative;background:var(--paper);border-radius:16px;
  overflow:hidden;box-shadow:0 1px 0 var(--line);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:0 28px 54px -30px rgba(26,21,18,.42)}
.card__i{display:block;position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--sand)}
.card__i img{width:100%;height:100%;object-fit:cover;
  transition:transform .85s var(--ease)}
.card:hover .card__i img{transform:scale(1.06)}
.card__p{position:absolute;left:.85rem;top:.85rem;background:var(--bone);
  border-radius:99px;padding:.32rem .8rem;font-family:var(--cond);font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;font-size:.7rem}
.card__b{display:block;padding:clamp(1.1rem,2.2vw,1.5rem)}
.card__b h3{margin-bottom:.5rem}
.card__b p{color:var(--ink-2);font-size:.94rem;line-height:1.62;
  margin-bottom:1rem;min-height:3em}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cards{grid-template-columns:1fr;max-width:420px;
  margin-inline:auto}.card__b p{min-height:0}}

/* ---------------------------------------------------------------- steps -- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.4vw,2rem);
  counter-reset:s}
.step{position:relative;padding-top:1.6rem;border-top:2px solid rgba(255,255,255,.2);
  transition:border-color .5s ease}
.step:hover{border-color:var(--amber)}
.step b{font-family:var(--cond);font-weight:600;font-size:.82rem;
  letter-spacing:.18em;color:var(--red)}
.step h3{margin:.7rem 0 .55rem}
.step p{font-size:.93rem;line-height:1.65;color:rgba(255,255,255,.68)}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* ----------------------------------------------------------------- band -- */
.band{position:relative;min-height:clamp(380px,62vh,620px);display:grid;
  align-items:center;overflow:hidden;color:#fff}
.band__bg{position:absolute;inset:-10% 0}
.band__bg img{width:100%;height:100%;object-fit:cover;will-change:transform}
.band__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,rgba(23,18,15,.88) 0%,rgba(23,18,15,.6) 46%,rgba(23,18,15,.25) 100%)}
.band__in{position:relative;z-index:2;padding-block:clamp(2.5rem,6vw,4rem);
  max-width:40rem}
.band__in p{color:rgba(255,255,255,.82);margin-top:1.1rem}
.band__cta{margin-top:1.8rem;display:flex;gap:.7rem;flex-wrap:wrap}

/* ---------------------------------------------------------------- stats -- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,3vw,2rem)}
.stat{text-align:center}
.stat b{display:block;font-family:var(--dsp);font-weight:600;line-height:1;
  font-size:clamp(2.4rem,6vw,4.2rem);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:.5rem;font-family:var(--cond);font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--mute)}
.sec--dark .stat span{color:rgba(255,255,255,.55)}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr);gap:2rem}}

/* ------------------------------------------------------------------ duo -- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,1.8rem)}
.dcard{position:relative;display:block;border-radius:18px;overflow:hidden;
  min-height:clamp(330px,40vw,440px);color:#fff}
.dcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease)}
.dcard:hover img{transform:scale(1.05)}
/* The text sat over the photograph at 78% white and washed out wherever the
   image was pale. The scrim is deeper and reaches higher, and the copy is
   full strength. */
.dcard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(23,18,15,.97) 2%,rgba(23,18,15,.86) 28%,
    rgba(23,18,15,.45) 62%,rgba(23,18,15,.12))}
.dcard__b{position:absolute;inset:auto 0 0 0;z-index:2;
  padding:clamp(1.3rem,3vw,2.2rem)}
.dcard__b h3{margin:.6rem 0 .6rem}
.dcard__b p{color:rgba(255,255,255,.93);font-size:1rem;line-height:1.66;
  max-width:36ch;margin-bottom:1.1rem;
  text-shadow:0 1px 14px rgba(23,18,15,.5)}
.dcard__b h3{text-shadow:0 2px 18px rgba(23,18,15,.55)}
.dcard__b .tlink{padding:.5rem .95rem;border:1px solid rgba(255,255,255,.4);
  border-radius:99px;letter-spacing:.12em;font-size:.7rem}
.dcard__b .tlink::after{display:none}
.dcard:hover .tlink{background:var(--red);border-color:var(--red)}
@media(max-width:860px){.duo{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ why -- */
.why{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,5rem);
  align-items:start}
.why__h{position:sticky;top:calc(var(--hdr) + 2.5rem)}
.wrow{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,2.4vw,2rem);
  padding-block:clamp(1.3rem,3vw,2.1rem);border-top:1px solid var(--line)}
.wrow:first-child{border-top:0;padding-top:0}
.wrow > b{font-family:var(--dsp);font-weight:600;font-size:clamp(1.5rem,3vw,2.2rem);
  line-height:1;color:var(--red)}
.wrow h3{margin-bottom:.45rem}
.wrow p{color:var(--ink-2);line-height:1.74}
@media(max-width:900px){.why{grid-template-columns:1fr}.why__h{position:static}}

/* ---------------------------------------------------------------- visit -- */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center}
.vinfo{margin-top:clamp(1.5rem,3vw,2.2rem)}
.vinfo div{display:flex;justify-content:space-between;gap:1rem;
  padding-block:.85rem;border-bottom:1px solid rgba(255,255,255,.14);
  font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:.95rem}
.vinfo div span:first-child{color:rgba(255,255,255,.52)}
.vinfo div span:last-child{color:var(--amber)}
.vfig{border-radius:18px;overflow:hidden;aspect-ratio:4/3}
.vfig img{width:100%;height:100%;object-fit:cover}
/* The map takes the photograph's place. It is not a photo, so the no-upscale
   cap further down does not apply to it. */
.vfig.vmap{max-width:none;aspect-ratio:4/3;background:var(--sand)}
.vmap iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:900px){.visit{grid-template-columns:1fr}}

/* --------------------------------------------------------------- footer -- */
.ft{background:var(--char);color:var(--bone);padding-block:clamp(3rem,6vw,5rem) 2rem}
.ft__g{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(1.8rem,4vw,3.5rem);
  padding-bottom:clamp(2rem,4vw,3rem);border-bottom:1px solid rgba(255,255,255,.14)}
.ft__g h3{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:.74rem;color:rgba(255,255,255,.5);
  margin-bottom:1.1rem}
.ft__n{display:grid;gap:.6rem}
.ft__n a{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.92rem;width:fit-content;position:relative}
.ft__n a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--amber);transform:scaleX(0);transform-origin:right center;
  transition:transform .4s var(--ease)}
.ft__n a:hover::after{transform:scaleX(1);transform-origin:left center}
.ft__b{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding-top:1.6rem;font-size:.84rem;color:rgba(255,255,255,.5)}
.ft__b a{color:rgba(255,255,255,.76)}
.ft__m{font-family:var(--dsp);font-weight:600;font-size:clamp(1.6rem,3vw,2.2rem);
  line-height:1;margin-bottom:.9rem}
.ft__m i{font-style:normal;color:var(--red)}
.soc{display:flex;gap:.5rem;margin-top:1.2rem}
.soc a{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2);transition:background .3s,box-shadow .3s}
.soc a:hover{background:var(--red);box-shadow:inset 0 0 0 1.5px var(--red)}
.soc svg{width:17px;height:17px;fill:currentColor}
/* On a phone this was one column, which made the footer nearly a full screen
   tall. The brand block keeps the full width; Explore and Visit sit side by
   side underneath it, which roughly halves the height. */
@media(max-width:800px){
  .ft__g{grid-template-columns:1fr 1fr;gap:1.8rem clamp(1rem,5vw,2rem)}
  .ft__g > :first-child{grid-column:1 / -1}
}
@media(max-width:380px){.ft__g{grid-template-columns:1fr}}

/* ------------------------------------------------------------ order bar -- */
.obar{position:fixed;inset:auto 0 0;z-index:90;padding:.8rem var(--gut)
  calc(.8rem + env(safe-area-inset-bottom));background:var(--char);display:none;
  transform:translateY(100%);transition:transform .5s var(--ease)}
.obar.on{transform:none}
.obar .btn{width:100%;justify-content:center;background:var(--red);color:#fff}
@media(max-width:1060px){.obar{display:block}body.hasbar{padding-bottom:80px}}

.sheet{position:fixed;inset:0;z-index:120;visibility:hidden}
.sheet.open{visibility:visible}
.sheet__v{position:absolute;inset:0;background:rgba(23,18,15,.6);opacity:0;
  transition:opacity .4s ease}
.sheet.open .sheet__v{opacity:1}
.sheet__p{position:absolute;inset:auto 0 0;background:var(--bone);
  border-radius:22px 22px 0 0;padding:1.6rem var(--gut) calc(1.6rem + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .55s var(--ease-io)}
.sheet.open .sheet__p{transform:none}
.sheet__p h3{margin-bottom:1.2rem}
.opt{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.2rem;border-radius:14px;background:var(--paper);
  box-shadow:0 1px 0 var(--line);margin-bottom:.6rem;transition:transform .3s var(--ease)}
.opt:hover{transform:translateX(4px)}
.opt b{display:block;font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em}
.opt span span{display:block;font-size:.86rem;color:var(--mute)}

/* ----------------------------------------------------------------- form -- */
.form{display:grid;gap:1rem}
.f label{display:block;font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.72rem;color:var(--mute);margin-bottom:.4rem}
.f input,.f textarea{width:100%;padding:.9rem 1.1rem;border-radius:12px;
  border:1.5px solid var(--line);background:var(--paper);font:inherit;color:inherit;
  transition:border-color .3s ease}
.f textarea{min-height:120px;resize:vertical}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--red)}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:600px){.r2{grid-template-columns:1fr}}

/* ------------------------------------------------------------- reveal ---- */
.rv{opacity:0;transform:translateY(26px)}
html:not(.js) .rv{opacity:1;transform:none}

/* ------------------------------------------------------------- curtain --- */
.curtain{position:fixed;inset:0;z-index:9999;background:var(--char);
  display:grid;place-items:center;transform:translateY(100%);visibility:hidden}
.curtain.on{visibility:visible}
.curtain img{width:84px;opacity:0}

.intro{position:fixed;inset:0;z-index:10000;background:var(--char);
  display:grid;place-items:center}
.intro__in{display:grid;justify-items:center;gap:1rem}
.intro img{width:clamp(70px,10vw,104px)}
.intro b{font-family:var(--dsp);font-weight:600;color:#fff;
  font-size:clamp(1.4rem,3.4vw,2rem);overflow:hidden;display:block}
.intro b i{display:inline-block;font-style:normal}
.intro b em{font-style:normal;color:var(--red)}
.intro__bar{width:min(200px,42vw);height:2px;background:rgba(255,255,255,.16);
  overflow:hidden}
.intro__bar i{display:block;height:100%;transform:scaleX(0);transform-origin:left;
  background:var(--red)}
html.introdone .intro{display:none}
html:not(.js) .intro{display:none}

/* ------------------------------------------------------- scroll progress - */
.prog{position:fixed;inset:0 0 auto;height:2px;z-index:101;transform-origin:0 50%;
  transform:scaleX(0);background:var(--red)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .intro,.curtain,.peek{display:none!important}
  .sigrow{opacity:1}
}

/* word boxes for the headline split */
.w{display:inline-block;overflow:hidden;vertical-align:bottom}
.w > i{display:inline-block;font-style:normal}

/* ==========================================================================
   MENU PAGE
   ========================================================================== */
.mnav{position:sticky;top:var(--hdr);z-index:80;background:rgba(250,246,240,.95);
  backdrop-filter:saturate(1.5) blur(12px);border-block:1px solid var(--line)}
.mnav__in{display:flex;gap:.4rem;overflow-x:auto;padding-block:.7rem;
  scrollbar-width:none}
.mnav__in::-webkit-scrollbar{display:none}
.mnav a{flex:none;font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.11em;font-size:.8rem;padding:.5rem 1rem;border-radius:99px;
  color:var(--ink-2);transition:background .3s,color .3s}
.mnav a{border:1px solid transparent;
  transition:background .35s ease,color .35s ease,box-shadow .35s ease,
             border-color .35s ease,transform .35s var(--ease)}
.mnav a:hover{background:var(--sand);transform:translateY(-1px)}
/* The active pill is the brand red, raised off the bar rather than cut into
   it — a soft inner highlight on top, a coloured shadow underneath. */
.mnav a.on{background:var(--red);color:#fff;border-color:rgba(255,255,255,.22);
  box-shadow:0 6px 16px -6px rgba(216,31,24,.65),
             inset 0 1px 0 rgba(255,255,255,.4),
             inset 0 -2px 6px rgba(23,18,15,.18);
  transform:translateY(-1px)}
.mnav a.on:hover{background:var(--red)}

/* Every day is the same here, so one long narrow column of seven identical
   rows looked like a bug. Two columns across the width reads as a normal
   opening-hours block. */
.hours{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(2rem,6vw,5rem);max-width:none}
@media(max-width:760px){.hours{grid-template-columns:1fr}}
.hours div{display:flex;justify-content:space-between;gap:1rem;padding-block:.85rem;
  border-bottom:1px solid var(--line);font-family:var(--cond);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;font-size:.95rem}
.hours div.today{color:var(--red)}
.hours div.today span:last-child::after{content:" · Today";font-size:.74rem;
  letter-spacing:.16em}
.vinfo--light div{border-bottom-color:var(--line)}
.vinfo--light div span:first-child{color:var(--mute)}
.vinfo--light div span:last-child{color:var(--ink)}

/* ==========================================================================
   BUILD YOUR OWN
   ========================================================================== */
/* ------------------------------------------------- builder icons ------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* An inline <svg> with only a viewBox has no intrinsic size, so it needs a
   block parent to resolve 100% against — centred grid items gave it zero. */
.ic{display:block;width:100%;aspect-ratio:1;height:auto}
 /* percentage padding here resolved against the button, not the box, and ate
   the whole width — the glyphs already carry their own margin in the viewBox */
.bo__i--ic{display:block;padding:0;
  background:radial-gradient(circle at 40% 34%,rgba(23,18,15,.05),transparent 72%)}
.bo--ic .bo__i--ic{aspect-ratio:1}
.bchips--ic{display:flex;flex-wrap:wrap;gap:.5rem}
.bchips--ic .bo{display:flex;align-items:center;gap:.5rem;padding:.45rem .8rem .45rem .5rem}
.bchips--ic .bo__i--ic{width:30px;padding:0;flex:none;background:none}
.bchips--ic .bo__t b{font-size:.84rem}

/* the rule sits on the step heading, where the question is */
.brule{display:inline-block;margin-left:.7rem;vertical-align:middle;
  font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.62rem;padding:.3rem .62rem;border-radius:99px;
  background:rgba(216,31,24,.1);color:var(--red);
  border:1px solid rgba(216,31,24,.22)}
.brule[data-pick="many"]{background:rgba(32,110,70,.12);color:#206E46;
  border-color:rgba(32,110,70,.25)}
.brule[data-pick="two"]{background:rgba(232,163,61,.16);color:#8A5A12;
  border-color:rgba(232,163,61,.35)}

.bpips{list-style:none;display:flex;gap:.4rem;margin:0 0 .9rem;padding:0;
  overflow-x:auto;scrollbar-width:none}
.bpips::-webkit-scrollbar{display:none}
.bpips li{flex:1 0 auto;display:flex;align-items:center;gap:.55rem;
  padding:.5rem 1rem;border-radius:99px;background:var(--paper);
  transition:background .35s ease}
.bpips li span{display:grid;place-items:center;width:22px;height:22px;flex:none;
  border-radius:50%;background:var(--line);color:var(--ink-2);
  font-family:var(--cond);font-weight:600;font-size:.8rem}
.bpips li b{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.8rem;color:var(--ink-2);white-space:nowrap}
.bpips li.on{background:var(--ink)}
.bpips li.on span{background:var(--red);color:#fff}
.bpips li.on b{color:var(--bone)}
.bpips li.ok span{background:#206E46;color:#fff}

.bprog{height:4px;border-radius:99px;background:var(--line);overflow:hidden;
  margin-bottom:clamp(1.6rem,3.5vw,2.4rem)}
.bprog i{display:block;height:100%;background:var(--red);transform-origin:left center;
  transition:transform .55s var(--ease)}

.blayout{display:grid;grid-template-columns:1fr 300px;gap:clamp(1.4rem,3vw,2.6rem);
  align-items:start}
.bp[hidden]{display:none}
.bp__h{margin-bottom:1.4rem}
.bp__h h3{margin:.5rem 0 .4rem}
.bopts{display:grid;gap:.7rem;grid-template-columns:repeat(3,1fr)}
.bopts--n{grid-template-columns:repeat(2,1fr)}
.bchips{display:flex;flex-wrap:wrap;gap:.5rem}
.bgrp .kick{margin:1.6rem 0 .7rem}
.bgrp > .kick:first-child{margin-top:0}

.bo{display:flex;align-items:center;gap:.8rem;text-align:left;width:100%;
  border:1.5px solid var(--line);background:var(--paper);border-radius:14px;
  padding:.65rem;transition:border-color .25s,transform .25s var(--ease),box-shadow .25s}
.bo:hover{transform:translateY(-2px);box-shadow:0 10px 22px -14px rgba(26,21,18,.4)}
.bo[aria-pressed="true"]{border-color:var(--red);box-shadow:0 0 0 3px rgba(216,31,24,.12)}
.bo__i{flex:none;width:58px;height:58px;border-radius:10px;overflow:hidden;
  background:var(--sand)}
.bo__i img{width:100%;height:100%;object-fit:cover}
.bo__t{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.bo__t b{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.02em;font-size:.94rem;line-height:1.15}
.bo__t i{font-style:normal;font-size:.79rem;color:var(--mute);line-height:1.4}
.bo__c{flex:none;margin-left:auto;width:21px;height:21px;border-radius:50%;
  border:1.5px solid var(--line);position:relative;transition:background .2s,border-color .2s}
.bo[aria-pressed="true"] .bo__c{background:var(--red);border-color:var(--red)}
.bo__c::after{content:"";position:absolute;inset:0;margin:auto;width:9px;height:5px;
  border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;
  transform:rotate(-45deg) translate(1px,-2px) scale(.4);opacity:0;
  transition:opacity .2s,transform .25s var(--ease)}
.bo[aria-pressed="true"] .bo__c::after{opacity:1;
  transform:rotate(-45deg) translate(1px,-2px) scale(1)}
.bo--n{padding:.55rem .85rem}
.bchips .bo{width:auto;padding:.45rem .8rem}
.bchips .bo__t i{display:none}
.bchips .bo__c{width:17px;height:17px;margin-left:.4rem}

.bnav{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;
  margin-top:clamp(1.4rem,3vw,2rem);padding-top:1.2rem;border-top:1px solid var(--line)}
.bnav [data-next]{margin-left:auto}
.bnav .btn[disabled]{opacity:.35;pointer-events:none}

.brail{position:sticky;top:calc(var(--hdr) + 5rem);background:var(--char);
  color:var(--bone);border-radius:16px;padding:1.3rem}
.brail h4{margin-bottom:.9rem}
.brail ul{list-style:none;margin:0 0 1rem;padding:0}
.brail li{display:flex;justify-content:space-between;gap:.8rem;align-items:baseline;
  padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.14)}
.brail li b{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.74rem;color:rgba(255,255,255,.55);flex:none}
.brail li span{font-family:var(--cond);font-weight:600;font-size:.9rem;text-align:right;
  line-height:1.3}
.brail li.set span{color:var(--amber)}
.brail .small{color:rgba(255,255,255,.45)}

.bsum div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--line)}
.bsum div b{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.76rem;color:var(--mute);flex:none}
.bsum div span{font-family:var(--cond);font-weight:600;font-size:1rem;text-align:right}

@media(max-width:1024px){
  .blayout{grid-template-columns:1fr}
  .brail{position:static;order:-1}
  .brail ul{display:grid;grid-template-columns:repeat(2,1fr);gap:0 1.2rem}
  .bopts{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .bopts,.bopts--n{grid-template-columns:1fr}
  .brail ul{grid-template-columns:1fr}
  .bnav [data-next]{margin-left:0;flex:1 1 100%;justify-content:center}
  .bpips li b{display:none}
  .bpips li{flex:0 0 auto}
}

/* ==========================================================================
   STATEMENT — Konala opens on a plain promise, not a slogan
   ========================================================================== */
.stmt{padding-block:clamp(3.4rem,9vw,7rem);text-align:center}
.stmt__p{margin:clamp(1.2rem,3vw,2rem) auto 0;max-width:22ch;
  font-family:var(--dsp);font-weight:600;letter-spacing:-.022em;line-height:1.1;
  font-size:clamp(1.9rem,4.4vw,3.4rem)}
.stmt .band__cta{justify-content:center;margin-top:clamp(1.8rem,4vw,2.8rem)}

/* ==========================================================================
   CATEGORY SECTIONS — one category per screen, alternating sides
   Konala stacks a generous section per category down the page instead of a
   grid of cards. Same rhythm, with the dish cut out and floated on a disc so
   the photograph never has to fill a rectangle it cannot fill sharply.
   ========================================================================== */
/* Each section carries its own --tone, so the page warms and cools as you move
   down it. Painted into the section background at build time, which costs
   nothing at scroll time. */
.cat{padding-block:clamp(2.8rem,7vw,5.6rem);position:relative;
  background:linear-gradient(180deg,rgb(var(--tone) / .02),rgb(var(--tone) / .07))}
/* Alternate the gradient direction so neighbouring sections meet at the same
   alpha — otherwise every boundary shows as a hard seam. */
.cat:nth-of-type(2n) {
  background:linear-gradient(180deg,rgb(var(--tone) / .07),rgb(var(--tone) / .02))}
.cat__g{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.8rem,5vw,5rem);align-items:center}
.cat--b .cat__f{order:2}
/* Every child of this figure is absolutely positioned (disc, steam, the stack
   of dishes), so it has no intrinsic width. It needs an explicit one or the
   whole thing collapses to nothing and the dish disappears. */
/* The photograph itself, cropped into a circle and filling it edge to edge.
   Cutouts floated on a plate made the food look small and clinical — the dish
   had to shrink to clear the circle, and the circle then dominated. A tight
   crop needs no background removal at all: the red-check paper and the kraft
   box fill the frame and the counter is simply cropped out. */
.cat__f{position:relative;margin:0;aspect-ratio:1;width:100%;max-width:520px;
  justify-self:center}
.cat__stack{position:absolute;inset:0;display:block;border-radius:50%;
  overflow:hidden;will-change:transform;background:var(--sand);
  box-shadow:0 34px 60px -34px rgba(23,18,15,.55)}
/* slightly taller than the circle, so it can drift inside it as you scroll */
.cat__f img{position:absolute;left:0;top:-7%;width:100%;height:114%;
  object-fit:cover;opacity:0;pointer-events:none;will-change:transform,opacity}
.cat__f img[data-on]{opacity:1}
.no-js .cat__f img:first-of-type{opacity:1}
/* A cup photographed close up fills the entire circle when it is cropped —
   there are no wider pixels to crop back to. The drinks use their cut-out
   instead, sitting small on the disc. */
.cat__f--cut .cat__stack{background:radial-gradient(circle at 38% 32%,
  rgb(var(--tone) / .05),rgb(var(--tone) / .13) 74%);box-shadow:none;
  outline:1px solid rgb(var(--tone) / .12);outline-offset:-1px}
.cat__f--cut img{left:9%;top:8%;width:82%;height:84%;object-fit:contain;
  filter:drop-shadow(0 20px 20px rgba(23,18,15,.22))}
.cat__f--cut .cat__disc{box-shadow:none}
/* a hairline ring keeps the crop from melting into the background */
.cat__disc{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgb(var(--tone) / .14)}
.cat__disc::after{content:"";position:absolute;left:14%;right:14%;bottom:-5%;
  height:11%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(23,18,15,.2),transparent 78%)}
.cat__steam{display:none}
.cat__t .kick{margin-bottom:clamp(.8rem,1.8vw,1.1rem)}
.cat__t h2{margin-bottom:clamp(.8rem,1.8vw,1.1rem)}
.cat__t .lede{max-width:44ch}
.cat__l{list-style:none;margin:clamp(1.2rem,2.6vw,1.8rem) 0 0;
  border-top:1px solid var(--line);max-width:38rem}
.cat__l li{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding-block:.62rem;border-bottom:1px solid var(--line)}
.cat__l b{font-family:var(--dsp);font-weight:600;font-size:clamp(.98rem,1.3vw,1.12rem)}
/* These were lost when the figure block was rewritten: without them the
   button collapsed to content width and the price sat against the name. */
.cat__l li{position:relative}
.cat__l li:has(.cat__pick){padding-block:0;display:block}
.cat__pick{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;width:calc(100% + 1.4rem);margin-inline:-.7rem;
  padding:.62rem .7rem;border-radius:10px;text-align:left;
  background:none;border:0;cursor:pointer;color:inherit;font:inherit;
  transition:background .35s ease}
.cat__pick::before{content:"";position:absolute;left:-.7rem;top:50%;
  width:3px;height:0;border-radius:3px;background:var(--red);
  transform:translateY(-50%);transition:height .4s var(--ease)}
.cat__pick:hover{background:rgb(var(--tone) / .05)}
.cat__pick[aria-pressed="true"]{background:rgb(var(--tone) / .07)}
.cat__pick[aria-pressed="true"]::before{height:62%}
.cat__pick[aria-pressed="true"] b{color:var(--red)}
.cat__pick:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.cat__row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.cat__l b{transition:color .35s ease}
.cat__pick b{font-family:var(--dsp);font-weight:600;font-size:clamp(.98rem,1.3vw,1.12rem)}
.cat__pick i{font-style:normal;font-family:var(--cond);font-weight:600;
  letter-spacing:.1em;font-size:.84rem;color:var(--red)}
.cat__l i{font-style:normal;font-family:var(--cond);font-weight:600;
  letter-spacing:.1em;font-size:.84rem;color:var(--red)}
.cat .band__cta{margin-top:clamp(1.3rem,2.8vw,2rem)}
@media(max-width:860px){
  .cat{padding-block:clamp(1.7rem,5vw,2.6rem)}
  .cat__g{grid-template-columns:1fr;gap:clamp(.9rem,3vw,1.4rem)}
  .cat--b .cat__f{order:0}
  .cat__f{max-width:min(62%,268px)}
  .cat__t .lede{font-size:.95rem;line-height:1.6}
  .cat__l{margin-top:1rem}
  .cat__l li{padding-block:.5rem}
  .cat__f img{filter:drop-shadow(0 16px 14px rgba(23,18,15,.2))}
  .cat .band__cta .btn{flex:1 1 auto;justify-content:center}
}

/* ==========================================================================
   COLLAGE — many small photographs instead of one big one
   ========================================================================== */
/* The four raw-marinade photographs are only ~650x400 — the smallest sources
   in the project. Tall narrow tiles threw away 64% of each one and then
   upscaled what was left. Landscape tiles in a narrower column match the
   source shape, so nothing is stretched. */
.coll{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(.6rem,1.2vw,1rem);max-width:860px}
.coll figure{position:relative;border-radius:12px;overflow:hidden;
  background:var(--sand);aspect-ratio:1.45;will-change:transform}
.coll img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.coll figure:hover img{transform:scale(1.08)}
/* The name and price used to sit as white text on a gradient over a busy red
   photograph and were close to unreadable. They are a frosted chip now: the
   blur gives the soft frame, and the fill underneath is solid enough to carry
   the contrast that a true neomorphic treatment never could. */
.coll figcaption{position:absolute;left:.7rem;right:.7rem;bottom:.7rem;
  padding:.5rem .7rem;border-radius:12px;
  background:rgba(250,246,240,.82);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 10px 24px -12px rgba(23,18,15,.5),
             inset 0 1px 0 rgba(255,255,255,.75);
  font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:.7rem;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  transition:background .4s ease,transform .5s var(--ease)}
.coll figure:hover figcaption{transform:translateY(-2px);
  background:rgba(250,246,240,.94)}
.coll figcaption i{font-style:normal;font-family:var(--dsp);font-weight:600;
  font-size:.92rem;letter-spacing:0;color:var(--red);text-transform:none}
@supports not (backdrop-filter:blur(4px)){
  .coll figcaption{background:rgba(250,246,240,.95)}
}
@media(max-width:900px){
  .coll{max-width:none;gap:.55rem}
  .coll figcaption{font-size:.62rem;padding:.45rem .5rem}
}

/* A photograph is never rendered wider than the pixels behind it. These caps
   are the enforcement; the audit script checks them. */
.duo{max-width:940px;margin-inline:auto}

/* Marinated — the collage is capped at the width its photographs support, so
   the copy and the counter stats take the space that cap frees up. */
.mar{display:grid;grid-template-columns:minmax(0,860px) minmax(260px,1fr);
  gap:clamp(1.6rem,3.6vw,3.4rem);align-items:start}
.mar__s .small{margin-top:.9rem;color:var(--ink-2);line-height:1.75}
.mar__l{list-style:none;margin:clamp(1.3rem,2.6vw,1.9rem) 0 0;
  border-top:1px solid var(--line)}
.mar__l li{display:flex;align-items:baseline;gap:.8rem;
  padding-block:.7rem;border-bottom:1px solid var(--line)}
.mar__l b{font-family:var(--dsp);font-weight:600;font-size:1.25rem;line-height:1;
  color:var(--red);flex:none;min-width:3.4rem}
.mar__l span{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;font-size:.72rem;color:var(--mute)}
.mar .band__cta{margin-top:clamp(1.3rem,2.6vw,1.9rem)}
@media(max-width:1020px){
  .mar{grid-template-columns:1fr;gap:1.6rem}
}
.vfig{max-width:470px}

/* ==========================================================================
   3D TILT — cards lean toward the pointer with real depth inside them
   ========================================================================== */
.t3{transform-style:preserve-3d;will-change:transform}
.t3 > *{transform-style:preserve-3d}
.t3 .card__i,.t3 .dcard__b{transform:translateZ(28px)}
.t3 .card__b{transform:translateZ(16px)}

/* ==========================================================================
   ORBIT — a ring of small circular dish photos
   ========================================================================== */
.orbit{display:flex;gap:clamp(.6rem,1.4vw,1.1rem);width:max-content;
  will-change:transform;padding-inline:var(--gut)}
.orb{flex:none;width:clamp(96px,11vw,148px);aspect-ratio:1;border-radius:50%;
  overflow:hidden;background:var(--sand);position:relative;
  box-shadow:0 14px 30px -18px rgba(23,18,15,.55)}
.orb img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.orb:hover img{transform:scale(1.12)}
.orbwrap{overflow:hidden;padding-block:clamp(1rem,2.4vw,1.8rem)}

/* ==========================================================================
   MOBILE — rebuilt, not just reflowed
   The horizontal rows used to run off the edge with no way to move them. On a
   phone they are proper swipe carousels now, with snap and native momentum,
   and the page lost about four screens of height.
   ========================================================================== */
@media(max-width:900px){
  /* every horizontal row scrolls by hand, with snap */
  .rail__t,.orbit{overflow-x:auto;scroll-snap-type:x mandatory;width:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;transform:none!important}
  .rail__t::-webkit-scrollbar,.orbit::-webkit-scrollbar{display:none}
  .rtile,.orb{scroll-snap-align:center}
  .rtile{width:min(62vw,250px)}
  .orb{width:clamp(88px,26vw,120px)}

  /* tighter vertical rhythm so the page is not sixteen screens long */
  .sec{padding-block:clamp(2.4rem,7vw,3.4rem)}
  .shead{margin-bottom:clamp(1.4rem,4vw,2rem)}
  .wrow,.sigrow{padding-block:clamp(1rem,3.5vw,1.5rem)}
  .card__b p{display:none}
  .cards{gap:.8rem}
  .dcard{min-height:clamp(260px,56vw,320px)}
}
@media(max-width:600px){
  .cards{grid-template-columns:repeat(2,1fr);max-width:none}
  .card__b{padding:.8rem .85rem 1rem}
  .card__b h3{font-size:1rem}
  .card__b .tlink{font-size:.68rem}
  .hero__meta div:last-child{display:none}
}