/* ---------- NUNITO · the Disco Tots corporate typeface (single family, all weights) ---------- */
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/nunito-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/nunito-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/nunito-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/nunito-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/nunito-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/nunito-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/nunito-latin-900-normal.woff2') format('woff2')}

/* ==========================================================
   DISCO TOTS · corporate bookings
   One continuous cream surface: #F1DAC2 everywhere.
   ========================================================== */

:root{
  --cream:#FBF7EE;            /* brand off-white surface */
  --pink:#EE5FA7;             /* Coral Crush, stronger pink */
  --pink-deep:#D9438D;
  --ink:#33313B;              /* warm charcoal, logo outline */
  --ink-soft:rgba(51,49,59,.72);
  --gold:#F2C14E;             /* Goldenrod Glow */
  --teal:#59B5AC;             /* Retro Teal */
  --lav:#A79BC8;              /* Lavender Pop */
  --blue:#5B87C9;             /* Oceanic Blue */
  --silver:#C9C2B8;           /* Metallic Silver / Smoky Taupe */
  --wash-pink:rgba(238,95,167,.10);
  --wash-mint:rgba(89,181,172,.12);
  --wash-sky:rgba(167,155,200,.12);
  /* one family, three roles. Nunito is the corporate typeface. */
  --display:'Nunito','Segoe UI',system-ui,sans-serif;   /* nav, buttons, labels */
  --groove:'Nunito','Segoe UI',system-ui,sans-serif;    /* big headlines (900) */
  --body:'Nunito','Segoe UI',system-ui,sans-serif;      /* running copy */
  --ease-out:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:var(--cream)}
body{
  font-family:var(--body);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{display:block;max-width:100%}
a{color:inherit}

/* ---------- ambient disco light thread ---------- */
.lights{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden;opacity:0;will-change:opacity}
.light{position:absolute;width:56vmax;height:56vmax;border-radius:50%;will-change:transform}
.light--pink{background:radial-gradient(circle,var(--wash-pink) 0%,transparent 65%);top:-14vmax;left:-12vmax}
.light--mint{background:radial-gradient(circle,var(--wash-mint) 0%,transparent 65%);top:32%;right:-20vmax}
.light--sky{background:radial-gradient(circle,var(--wash-sky) 0%,transparent 65%);bottom:-18vmax;left:8vw}

main{position:relative;z-index:1}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--body);font-weight:800;font-size:.74rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--pink);
  margin-bottom:1.1rem;
}
.h2{
  font-family:var(--groove);font-weight:900;
  font-size:clamp(2.05rem,5.1vw,3.5rem);
  line-height:1.1;letter-spacing:-.022em;margin-bottom:1.2rem;
}
.body{color:var(--ink-soft);max-width:34rem;font-size:1.02rem;margin-bottom:1rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--display);font-weight:800;
  font-size:.88rem;letter-spacing:.02em;text-decoration:none;
  border-radius:999px;padding:1rem 2rem;cursor:pointer;border:0;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .25s;
}
.btn--primary{
  background:var(--pink);color:#fff;
  border:2.5px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}
.btn--primary:hover{background:var(--pink-deep);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn--big{font-size:.95rem;padding:1.15rem 2.6rem}
.btn--ghost{
  background:var(--cream);color:var(--ink);border:2.5px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}
.btn--ghost:hover{color:var(--pink);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--pink);outline-offset:3px;border-radius:6px;
}

/* ---------- nav (hidden through hero) ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:1rem clamp(1.2rem,4vw,3rem);
  opacity:0;transform:translateY(-12px);pointer-events:none;
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
  background:linear-gradient(to bottom,rgba(241,218,194,.92),rgba(241,218,194,0));
}
.nav.is-visible{opacity:1;transform:none;pointer-events:auto}
.subpage .nav{background:linear-gradient(to bottom,var(--cream) 62%,rgba(241,218,194,0))}
.subpage .lights{opacity:1}
.nav__brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;min-width:0}
.nav__logo{
  width:clamp(64px,6.2vw,86px);height:clamp(64px,6.2vw,86px);flex:none;
  transform-origin:center;
  transition:width .5s var(--ease-out),opacity .35s var(--ease-out),
             transform .5s var(--ease-out),margin-right .5s var(--ease-out);
}
.nav__mark{
  font-family:var(--display);font-weight:900;font-size:clamp(1.4rem,1.95vw,1.95rem);
  letter-spacing:.01em;color:var(--pink);white-space:nowrap;line-height:1;
}
.nav__links{display:flex;gap:clamp(1.2rem,2.6vw,2.4rem)}
.nav__links a{
  font-family:var(--body);font-weight:700;font-size:.9rem;letter-spacing:.01em;
  color:var(--ink);text-decoration:none;position:relative;padding:.3rem 0;white-space:nowrap;
}
.nav__links a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--pink);border-radius:2px;transition:right .3s var(--ease-out);
}
.nav__links a:hover::after,.nav__links a.is-active::after{right:0}
.nav__right{display:flex;align-items:center;gap:.9rem;justify-self:end}
.nav__brand{justify-self:start}
.nav__burger{
  display:none;background:none;border:0;cursor:pointer;padding:.5rem;
}
.nav__burger span{
  display:block;width:24px;height:2.5px;border-radius:2px;background:var(--ink);
  margin:5px 0;transition:transform .3s var(--ease-out),opacity .3s;
}
.nav__burger.is-open span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}
.mobmenu{
  position:fixed;inset:0;z-index:55;background:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease-out);
}
.mobmenu.is-open{opacity:1;pointer-events:auto}
.mobmenu a{
  font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.01em;color:var(--ink);text-decoration:none;
}
.mobmenu a.is-active,.mobmenu a:hover{color:var(--pink)}
.nav__cta{
  font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.03em;
  text-decoration:none;color:#fff;background:var(--pink);
  padding:.65rem 1.3rem;border-radius:999px;white-space:nowrap;
  transition:background .25s,transform .3s var(--ease-out);
}
.nav__cta:hover{background:var(--pink-deep);transform:translateY(-2px)}

/* ---------- canvas edge insurance: fade outer rim to page cream ---------- */
.edgefade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,var(--cream),transparent 7%,transparent 93%,var(--cream)),
    linear-gradient(to bottom,var(--cream),transparent 7%,transparent 93%,var(--cream));
}

/* ---------- the statement stage (landing) ---------- */
.statement{position:relative}
.statement__stage{
  position:relative;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:4.5rem 1.6rem 7.5rem;overflow:hidden;
}

/* ---------- statement copy ---------- */
.statement__copy{position:relative;z-index:3;text-align:center;max-width:900px}
.statement__h1{
  font-family:var(--groove);font-weight:900;
  font-size:clamp(2.6rem,6.4vw,5.6rem);
  line-height:1.03;letter-spacing:-.03em;color:var(--ink);
}
.statement__h1 span{display:block;white-space:nowrap}
.statement__h1--pink{color:var(--pink)}
.statement__sub{margin:1.4rem auto 0;max-width:30rem;color:var(--ink-soft);font-size:1.05rem}
.statement .hero__actions{justify-content:center}

/* ---------- tot confetti field ---------- */
/* ---------- statement actions + scroll hint ---------- */
.hero__actions{display:flex;align-items:center;gap:1.4rem;margin-top:1.8rem;flex-wrap:wrap}
.hero__minor{
  font-weight:600;font-size:.9rem;color:var(--ink);text-decoration:none;
  border-bottom:2px solid var(--pink);padding-bottom:2px;transition:color .25s;white-space:nowrap;
}
.hero__minor:hover{color:var(--pink)}
.hero__scrollhint{
  text-align:center;color:var(--ink-soft);
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;
}
.statement .hero__scrollhint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:4}
.hero__scrollline{
  width:2px;height:44px;margin:.6rem auto 0;border-radius:2px;
  background:linear-gradient(var(--pink),transparent);
  animation:scrollpulse 1.8s var(--ease-out) infinite;transform-origin:top;
}
@keyframes scrollpulse{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- sunburst behind the statement ---------- */
.statement__stage::before{
  content:'';position:absolute;left:50%;top:50%;
  width:150vmax;height:150vmax;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 8deg,
    rgba(242,193,78,.10) 0deg 8deg, transparent 8deg 20deg,
    rgba(238,95,167,.07) 20deg 28deg, transparent 28deg 40deg);
  -webkit-mask-image:radial-gradient(circle,black 0%,transparent 62%);
  mask-image:radial-gradient(circle,black 0%,transparent 62%);
  pointer-events:none;
}

/* ---------- sparkles ---------- */
.sparkle{position:absolute;pointer-events:none;animation:twinkle 2.8s ease-in-out infinite}
.sparkle--2{animation-delay:.9s}
.sparkle--3{animation-delay:1.7s}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.8) rotate(0deg)}50%{opacity:1;transform:scale(1.1) rotate(18deg)}}

/* ---------- ticker ---------- */
.ticker{
  overflow:hidden;border-top:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);
  background:var(--gold);padding:.85rem 0;white-space:nowrap;
}
.ticker__track{display:flex;width:max-content;animation:tick 24s linear infinite}
.ticker__set{display:flex;flex-shrink:0;align-items:center}
.ticker__track span{white-space:nowrap;flex-shrink:0;
  font-family:var(--display);font-weight:900;font-size:.86rem;letter-spacing:.14em;
  color:var(--ink);text-transform:uppercase;padding:0 1.2rem;
}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- talk to a tot ---------- */
.totchat__fab{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:70;
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.03em;
  background:var(--pink);color:#fff;border:2.5px solid var(--ink);border-radius:999px;
  padding:.7rem 1.2rem .7rem .8rem;cursor:pointer;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.totchat__fab:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.totchat__fab img{width:30px;height:30px;object-fit:contain}
.totchat{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:75;
  width:min(380px,calc(100vw - 2rem));height:min(560px,calc(100svh - 4rem));
  background:var(--cream);border:2.5px solid var(--ink);border-radius:20px;
  box-shadow:8px 8px 0 rgba(51,49,59,.2);
  display:none;flex-direction:column;overflow:hidden;
}
.totchat.is-open{display:flex}
.totchat__head{
  display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;
  background:var(--pink);border-bottom:2.5px solid var(--ink);
}
.totchat__head img{width:38px;height:38px;border-radius:50%;background:var(--cream);border:2px solid var(--ink);object-fit:contain;padding:3px}
.totchat__head strong{font-family:var(--display);font-weight:700;font-size:.9rem;color:#fff}
.totchat__head small{display:block;font-size:.68rem;color:rgba(255,255,255,.85)}
.totchat__close{margin-left:auto;background:none;border:0;color:#fff;font-size:1.3rem;cursor:pointer;line-height:1}
.totchat__msgs{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem}
.totchat__msg{
  max-width:82%;padding:.6rem .9rem;border:2px solid var(--ink);border-radius:14px;
  font-size:.88rem;line-height:1.45;
}
.totchat__msg--bot{align-self:flex-start;background:#fff;border-bottom-left-radius:4px}
.totchat__msg--user{align-self:flex-end;background:var(--gold);border-bottom-right-radius:4px}
.totchat__msg--card{align-self:stretch;max-width:none;background:#fff}
.totchat__msg--card dt{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-top:.4rem}
.totchat__msg--card dd{margin:0;font-weight:600}
.totchat__msg--card .btn{margin-top:.8rem;display:block;text-align:center}
.totchat__typing{align-self:flex-start;color:var(--ink-soft);font-size:.8rem;padding:.2rem .4rem}
.totchat__chips{display:flex;flex-wrap:wrap;gap:.45rem;align-self:flex-start;max-width:92%}
.totchat__chip{
  font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.02em;
  color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:999px;
  padding:.5rem .95rem;cursor:pointer;transition:transform .2s var(--ease-out),background .2s;
}
.totchat__chip:hover{background:var(--gold);transform:translateY(-2px)}
.totchat__inline{align-self:flex-start;display:flex;gap:.45rem;max-width:92%}
.totchat__inline input{
  font-family:var(--body);font-size:.9rem;color:var(--ink);
  border:2px solid var(--ink);border-radius:10px;padding:.55rem .8rem;background:#fff;min-width:0;
}
.totchat__inline button{
  font-family:var(--display);font-weight:700;font-size:.74rem;color:#fff;
  background:var(--pink);border:2px solid var(--ink);border-radius:10px;padding:.55rem .95rem;cursor:pointer;
}
.totchat__form{display:flex;gap:.5rem;padding:.8rem;border-top:2.5px solid var(--ink);background:#fff}
.totchat__form input{
  flex:1;font-family:var(--body);font-size:.92rem;color:var(--ink);
  border:2px solid var(--ink);border-radius:10px;padding:.6rem .8rem;background:var(--cream);
}
.totchat__form button{
  font-family:var(--display);font-weight:700;font-size:.78rem;color:#fff;
  background:var(--pink);border:2px solid var(--ink);border-radius:10px;padding:.6rem 1rem;cursor:pointer;
}
@media (max-width:480px){.totchat{right:.6rem;bottom:.6rem}}

/* ---------- footer smiley ---------- */
.footer__smiley{width:34px;height:34px;margin:0 auto 1rem;display:block}

/* ==========================================================
   VAN · WE COME TO YOU
   ========================================================== */
.van{position:relative}
.van__stage{
  position:relative;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;
}
.van__copy{
  position:relative;z-index:3;
  width:min(34rem,40vw);
  padding-left:clamp(1.4rem,6vw,6rem);
}
.van__h2{
  font-family:var(--groove);font-weight:900;
  font-size:clamp(2.05rem,4vw,3.6rem);
  line-height:1.02;letter-spacing:-.025em;margin-bottom:1.2rem;
  white-space:nowrap;
}
.van__copy .body{margin-bottom:1.8rem}
.van__note{margin-top:1rem;font-size:.82rem;color:var(--ink-soft)}

.van__canvaswrap{
  position:absolute;z-index:2;
  right:-5vw;top:50%;
  width:min(1180px,76vw);
  transform:translateY(-50%) translateX(-130vw);
  will-change:transform;
  backface-visibility:hidden;
}
/* frames are 1280x712. The bus's visual mass sits low in the frame
   (centre of mass ~57% of height), so the canvas is nudged up to
   optically centre it against the copy block. */
#vanCanvas{width:100%;aspect-ratio:1280/712;height:auto;display:block}
/* Desktop only: the bus is optically centred against the copy block beside it.
   Its centre of mass sits ~57% down the frame, so lift it. On phones the bus is
   bottom-anchored with the copy above it, so no correction is wanted there. */
@media (min-width:821px){
  #vanCanvas{transform:translateY(-5.5%)}
  /* the rim fade must travel with the canvas or the top edge stops being covered */
  .van__canvaswrap .edgefade{transform:translateY(-5.5%)}
}

/* reveal states (animated in via GSAP) */
.eyebrow--reveal,.h2--reveal,.body--reveal,.btn--reveal,.note--reveal{
  will-change:transform;
}

/* ---------- chips ---------- */
.chips{display:flex;gap:.55rem;flex-wrap:wrap;margin:0 0 1.8rem}
.chips--small{margin:0}
.chip{
  font-family:var(--display);font-weight:800;font-size:.7rem;letter-spacing:.04em;
  color:var(--pink);border:1.5px solid var(--pink);border-radius:999px;padding:.38rem .85rem;white-space:nowrap;
}
.chip--gold{color:var(--gold);border-color:var(--gold)}

/* ==========================================================
   PAYOFF
   ========================================================== */
.payoff{padding:clamp(6rem,14vh,11rem) clamp(1.4rem,6vw,6rem)}
.payoff__inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center;
}
.payoff__tots{position:relative}
.payoff__tot{will-change:transform}
/* hero bowl shot: light from top-right, shadow cast to bottom-left */
.payoff__bowl{
  position:relative;width:100%;max-width:560px;margin:0 auto;display:block;
  filter:drop-shadow(-30px 36px 34px rgba(51,49,59,.26));
}

/* ==========================================================
   PROOF
   ========================================================== */
.proof{padding:clamp(5rem,12vh,9rem) clamp(1.4rem,6vw,6rem)}
.proof__inner{max-width:880px;margin:0 auto;text-align:center}
.proof__stars{color:var(--gold);font-size:1.3rem;letter-spacing:.35em;display:block;margin-bottom:1.4rem}
.proof__quote p{
  font-family:var(--body);font-weight:600;
  font-size:clamp(1.12rem,2.2vw,1.55rem);line-height:1.45;color:var(--ink);
}
.proof__quote cite{
  display:block;margin-top:1.6rem;font-style:normal;font-weight:600;
  font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
}
.proof__stats{
  margin-top:4rem;display:flex;justify-content:center;gap:clamp(2rem,7vw,6rem);flex-wrap:wrap;
}
.proof__stat strong{
  display:block;font-family:var(--display);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--pink);
}
.proof__stat span{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

/* ==========================================================
   REASSURE
   ========================================================== */
.reassure{padding:clamp(5rem,12vh,9rem) clamp(1.4rem,6vw,6rem)}
.reassure__inner{max-width:1200px;margin:0 auto}
.reassure__grid{
  margin-top:2.6rem;display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.card{
  border:2px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 rgba(51,49,59,.12);
  padding:1.8rem 1.6rem;
  transition:transform .4s var(--ease-out),border-color .3s;
  will-change:transform,opacity;
}
.card:hover{transform:translateY(-6px);border-color:var(--pink)}
.card__badge{
  display:inline-block;font-family:var(--display);font-weight:700;font-size:.72rem;
  color:var(--pink);border:1.5px solid var(--pink);border-radius:999px;
  padding:.4rem .9rem;margin-bottom:1.1rem;letter-spacing:.06em;
}
.card h3{font-family:var(--display);font-weight:900;font-size:1.08rem;letter-spacing:-.01em;margin-bottom:.6rem;white-space:nowrap}
.card p{color:var(--ink-soft);font-size:.92rem}

/* ==========================================================
   NEWS
   ========================================================== */
.news{padding:clamp(5rem,12vh,9rem) clamp(1.4rem,6vw,6rem)}
.news__inner{max-width:1200px;margin:0 auto}
.news__row{
  margin-top:2.6rem;display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.newscard{
  border:2px solid var(--ink);
  border-radius:18px;box-shadow:4px 4px 0 rgba(51,49,59,.12);padding:1.8rem 1.6rem;
  transition:transform .4s var(--ease-out),border-color .3s;
  will-change:transform,opacity;
}
.newscard:hover{border-color:var(--gold)}
.newscard:hover{transform:translateY(-6px)}
.newscard__tag{
  font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.newscard h3{font-family:var(--display);font-weight:900;font-size:1.06rem;letter-spacing:-.01em;margin:.8rem 0 .5rem}
.newscard p{color:var(--ink-soft);font-size:.9rem}
.newscard__date{display:block;margin-top:1.2rem;font-size:.72rem;letter-spacing:.18em;color:var(--ink-soft)}

/* ==========================================================
   BOOK
   ========================================================== */
.book{padding:clamp(6rem,14vh,11rem) clamp(1.4rem,6vw,6rem)}
.book__inner{max-width:760px;margin:0 auto;text-align:center}
.book__h2{
  font-family:var(--groove);font-weight:900;
  font-size:clamp(2.4rem,6.4vw,4.8rem);line-height:1.0;letter-spacing:-.03em;margin-bottom:1.2rem;white-space:nowrap;
}
.book__sub{margin:0 auto 2.8rem}
.book__form{
  display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;text-align:left;
}
.field{display:flex;flex-direction:column}
.field--full{grid-column:1/-1}
.field label{
  font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:.45rem;
}
.field input,.field textarea{
  font-family:var(--body);font-size:1rem;color:var(--ink);
  background:rgba(255,255,255,.42);
  border:2px solid var(--ink);border-radius:12px;
  padding:.9rem 1.1rem;transition:border-color .25s;
}
.field input:focus,.field textarea:focus{border-color:var(--pink);outline:none}
.book__form .btn--big{grid-column:1/-1;justify-self:center;margin-top:1rem}
.book__alt{margin-top:1.6rem;font-size:.9rem;color:var(--ink-soft)}
.book__alt a{color:var(--pink);font-weight:600}

/* ==========================================================
   SUBPAGES
   ========================================================== */
.pagehero{padding:clamp(8rem,16vh,11rem) clamp(1.4rem,6vw,6rem) clamp(1.6rem,4vh,3rem)}
.pagehero__inner{max-width:1200px;margin:0 auto}
.pagehero__h1{
  font-family:var(--groove);font-weight:900;
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.012em;
  margin-bottom:1rem;white-space:nowrap;
}

.menu{padding:0 clamp(1.4rem,6vw,6rem) clamp(5rem,12vh,8rem)}
.menu__inner{max-width:1200px;margin:0 auto}
.menu__grid{
  display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.menuitem{
  border:2px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 rgba(51,49,59,.12);
  padding:1.6rem;transition:transform .4s var(--ease-out),border-color .3s;
}
.menuitem:hover{transform:translateY(-6px);border-color:var(--pink)}
.menuitem__img{display:flex;justify-content:center;padding:.4rem 0 1rem}
.menuitem__img img{width:72%;max-width:220px;filter:drop-shadow(0 16px 22px rgba(38,51,95,.16))}
.menuitem__head{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;margin-bottom:.5rem}
.menuitem__head h3{font-family:var(--display);font-weight:900;font-size:1.12rem;letter-spacing:-.01em}
.menuitem__price{font-family:var(--display);font-weight:700;color:var(--pink)}
.menuitem p{color:var(--ink-soft);font-size:.9rem;margin-bottom:1rem}
.menu__note{margin-top:3rem;text-align:center}
.menu__note .chips{justify-content:center}
.menu__note .body{margin:0 auto}

/* ---------- HOT. CRISPY. DELICIOUS. lockup ---------- */
.triple{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:.55rem .9rem;margin:1.5rem 0 0;
}
.triple span{
  font-family:var(--display);font-weight:900;
  font-size:clamp(.82rem,1.5vw,1.05rem);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);
}
.triple span:nth-of-type(2){color:var(--pink)}
.triple span:nth-of-type(3){color:var(--teal)}
.triple i{
  display:block;width:7px;height:7px;border-radius:50%;background:var(--gold);
  border:1.5px solid var(--ink);flex:none;
}
.statement .triple{margin-top:1.6rem}

/* ---------- second review card ---------- */
.proof__second{
  margin-top:3.2rem;max-width:620px;margin-left:auto;margin-right:auto;
  border:2.5px solid var(--ink);border-radius:20px;box-shadow:5px 5px 0 rgba(51,49,59,.14);
  background:rgba(255,255,255,.4);padding:1.8rem 1.9rem;text-align:left;
}
.proof__second .proof__stars{font-size:1rem;margin-bottom:.9rem;letter-spacing:.28em}
.proof__second p{font-size:1rem;color:var(--ink-soft);line-height:1.6}
.proof__second cite{
  display:block;margin-top:1rem;font-style:normal;font-weight:800;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pink);
}

/* ---------- menu groups (several menus, one page) ---------- */
.menu__jump{
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin:0 0 3.2rem;
}
.menu__jump a{
  font-family:var(--display);font-weight:800;font-size:.76rem;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  border:2px solid var(--ink);border-radius:999px;padding:.6rem 1.1rem;
  transition:background .25s,color .25s,transform .3s var(--ease-out);white-space:nowrap;
}
.menu__jump a:hover{background:var(--pink);color:#fff;transform:translateY(-2px)}
.menugroup{margin-bottom:clamp(3.5rem,8vh,5.5rem);scroll-margin-top:8rem}
.menugroup__head{margin-bottom:1.8rem}
.menugroup__head h2{
  font-family:var(--groove);font-weight:900;letter-spacing:-.025em;
  font-size:clamp(1.55rem,3.4vw,2.3rem);line-height:1.05;margin-bottom:.5rem;
}
.menugroup__head .body{margin-bottom:0}
.menugroup__flag{
  display:inline-block;font-family:var(--display);font-weight:800;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  background:var(--gold);border:2px solid var(--ink);border-radius:999px;
  padding:.34rem .8rem;margin-bottom:.9rem;
}
.menuitem__tags{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.2rem}
/* photo placeholder tile · sits where Louise's shot will go */
.menuitem__ph{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;margin:.4rem 0 1rem;border-radius:14px;
  border:2px dashed rgba(51,49,59,.28);background:rgba(255,255,255,.32);
}
.menuitem__ph span{
  font-family:var(--display);font-weight:800;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
}
.menu__note .btn{margin-top:1.8rem}
.menu__legal{font-style:italic;color:var(--ink-soft);font-size:.92rem;max-width:34rem;margin:0 auto}

.findteaser{padding:clamp(5rem,12vh,9rem) clamp(1.4rem,6vw,6rem)}
.findteaser__inner{max-width:1200px;margin:0 auto;text-align:center}
.spots{
  margin:2.6rem 0 3rem;display:grid;gap:1.4rem;text-align:left;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.spot{
  border:2px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 rgba(51,49,59,.12);padding:1.6rem;
  transition:transform .4s var(--ease-out),border-color .3s;
}
.spot:hover{transform:translateY(-6px);border-color:var(--pink)}
.findteaser .btn--ghost{margin-top:.4rem}
.spot__day{
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.1em;
  color:var(--pink);text-transform:uppercase;
}
.spot h3{font-family:var(--display);font-weight:900;font-size:1.08rem;letter-spacing:-.01em;margin:.7rem 0 .45rem}
.spot p{color:var(--ink-soft);font-size:.9rem}
.locations{padding:0 clamp(1.4rem,6vw,6rem)}
.locations__inner{max-width:1200px;margin:0 auto}

.story{padding:clamp(1rem,3vh,2rem) clamp(1.4rem,6vw,6rem) clamp(3.5rem,8vh,6rem)}
.story__inner{
  max-width:1060px;margin:0 auto;
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:center;
}
.story__van{width:100%;border-radius:0}

.bookcta{padding:clamp(6rem,14vh,10rem) clamp(1.4rem,6vw,6rem)}
.bookcta__inner{max-width:760px;margin:0 auto;text-align:center}
.bookcta__h2{
  font-family:var(--groove);font-weight:900;
  font-size:clamp(2.2rem,5.6vw,4.2rem);line-height:1.0;letter-spacing:-.03em;margin-bottom:1.2rem;white-space:nowrap;
}
.bookcta__sub{margin:0 auto 2.4rem}

.reveal{opacity:0;transform:translateY(40px);will-change:transform,opacity}
.no-js .reveal{opacity:1;transform:none}

/* ---------- footer ---------- */
.footer{
  position:relative;z-index:1;text-align:center;
  padding:4rem 1.4rem 3rem;
}
.footer__logo{margin:0 auto 1rem;width:clamp(104px,11vw,132px);height:auto}
.footer__mark{font-family:var(--display);font-weight:900;font-size:clamp(1.3rem,2.6vw,1.75rem);
  color:var(--pink);letter-spacing:.01em;white-space:nowrap;line-height:1}
.footer__nav{display:flex;justify-content:center;gap:1.6rem;margin:1rem 0 .4rem;flex-wrap:wrap}
.footer__nav a{
  font-weight:600;font-size:.84rem;color:var(--ink);text-decoration:none;
}
.footer__nav a:hover{color:var(--pink)}
.footer__line{margin-top:.6rem;font-size:.85rem;color:var(--ink-soft)}
.footer__credit{margin-top:1.6rem;font-size:.72rem;letter-spacing:.1em;color:var(--ink-soft)}
.footer__credit a{color:var(--ink-soft)}

/* ==========================================================
   MOBILE
   ========================================================== */
@media (max-width:900px){
  .nav__links{display:none}
  .nav__burger{display:block}
  .nav{grid-template-columns:minmax(0,1fr) 0 auto;gap:.6rem}
  .nav__brand{overflow:hidden}
  .nav__logo{width:60px;height:60px}
  .nav__mark{font-size:1.35rem}
  .story__inner{grid-template-columns:1fr}
  .pagehero__h1{font-size:clamp(1.8rem,8.2vw,2.4rem)}
}
@media (max-width:820px){
  .hero{display:none}
  .statement__stage{min-height:100svh;height:auto;overflow:hidden}
  .statement__h1{font-size:clamp(2.2rem,10.2vw,3rem)}
  .statement__sub{font-size:1rem}
  .hero__actions{gap:1rem}
  .van__stage{align-items:flex-end}
  .van__copy{
    position:absolute;top:9vh;left:0;width:100%;
    padding:0 1.4rem;
  }
  .van__h2{font-size:clamp(1.7rem,8vw,2.4rem)}
  .van__copy .body{font-size:.95rem;margin-bottom:1.2rem}
  .van__copy{top:7vh}
  .van__copy .body{margin-bottom:1rem}
  .van__note{font-size:.76rem;margin-top:.7rem}
  .van__canvaswrap{
    right:auto;left:50%;top:auto;bottom:1vh;
    width:168vw;
    transform:translateX(-50%) translateX(-180vw);
  }
  .payoff{padding-top:4rem;padding-bottom:4rem}
  .payoff__inner{grid-template-columns:1fr;gap:1.4rem}
  .payoff__copy .chips{margin-bottom:1.2rem}
  .payoff__tots{order:2;margin-top:2.4rem}
  .proof{padding-top:3rem}
  .findteaser{padding-top:3rem}
  .findteaser .btn--ghost{margin-top:1.4rem}
  .book__form{grid-template-columns:1fr}
  .triple span{font-size:.78rem;letter-spacing:.12em}
  .proof__second{padding:1.5rem 1.4rem}
  .menu__jump{margin-bottom:2.4rem}
}
@media (max-width:420px){
  .nav__logo{width:52px;height:52px}
  .nav__mark{font-size:1.05rem}
  .nav__cta{font-size:.7rem;padding:.55rem 1rem}
}

@media (max-width:820px) and (max-height:740px){
  .van__canvaswrap{width:136vw}
  .van__copy{top:6vh}
}

/* ==========================================================
   REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero__scrollline{display:none}
  .eyebrow--reveal,.h2--reveal,.body--reveal,.btn--reveal,.note--reveal,
  .card,.newscard,.reveal{opacity:1!important;transform:none!important}
  .van__canvaswrap{transform:translateY(-50%)!important}
  .lights{opacity:0!important}
  @media (max-width:820px){.van__canvaswrap{transform:translateX(-50%)!important}}
}

/* ---------- long page headline: must stay on ONE line at every width ---------- */
.pagehero__h1--long{font-size:clamp(1.45rem,6.2vw,4rem);letter-spacing:-.035em}
@media (max-width:900px){
  .pagehero__h1--long{font-size:clamp(1.4rem,6.4vw,2.2rem)}
}

/* ==========================================================
   DINER MENUS · v19
   Four different menu styles, each a cut-out frame that sits
   directly on the site cream. Photos are Polaroids on a slant.
   ========================================================== */

:root{
  --paper-ink:#3E3128;
  --paper-ink-soft:rgba(62,49,40,.74);
  --paper-rule:rgba(62,49,40,.26);
  --board-k:.58;
}

.menus{padding:clamp(2rem,5vh,3.5rem) clamp(1.1rem,5vw,3rem) clamp(4rem,10vh,7rem)}
.menus__inner{max-width:1180px;margin:0 auto}

/* --- intro --- */
.menus__intro{
  display:grid;grid-template-columns:minmax(0,1fr) 230px;
  gap:clamp(1.5rem,4vw,3rem);align-items:center;
  margin:0 auto clamp(2.6rem,7vh,4.2rem);
}
.menus__introtext p{color:var(--ink-soft);font-size:1.06rem;max-width:34rem}
.menus__salt{
  display:inline-block;margin-top:1rem;font-weight:800;font-size:.76rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--pink);
}

/* --- jump nav --- */
.menus__jump{
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
  margin-bottom:clamp(2.4rem,6vh,4rem);
}
.menus__jump a{
  font-family:var(--display);font-weight:800;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:.62rem 1.15rem;border-radius:999px;
  border:2.5px solid var(--ink);background:var(--cream);color:var(--ink);
  transition:transform .3s var(--ease-out),background .2s,color .2s;
}
.menus__jump a:hover{background:var(--pink);color:#fff;transform:translateY(-2px)}

/* --- one menu block --- */
.mset{margin-bottom:clamp(4rem,10vh,7rem);scroll-margin-top:7.5rem}
.mset__head{text-align:center;margin-bottom:clamp(1.4rem,3vh,2.2rem)}
.mset__head h2{
  font-family:var(--groove);font-weight:900;
  font-size:clamp(1.8rem,4.4vw,2.9rem);line-height:1.08;letter-spacing:-.02em;
  margin-bottom:.5rem;
}
.mset__head p{color:var(--ink-soft);max-width:36rem;margin:0 auto;font-size:.98rem}

.mset__body{
  display:grid;grid-template-columns:minmax(0,1fr) 250px;
  gap:clamp(1.2rem,3vw,2.4rem);align-items:center;
}
.mset__body--flip{grid-template-columns:250px minmax(0,1fr)}
.mset__body--flip .board{order:2}
.mset__body--flip .polaroid{order:1}
.mset__body--solo{grid-template-columns:minmax(0,1fr)}

/* ---------- the four frames ---------- */
.board{border-style:solid;padding:0;background:transparent}

.board--pink{
  border-width:calc(104px*var(--board-k)) calc(46px*var(--board-k))
               calc(104px*var(--board-k)) calc(46px*var(--board-k));
  border-image:url('../assets/menu/board-pink.webp') 104 46 104 46 fill stretch;
  filter:drop-shadow(0 16px 26px rgba(51,49,59,.18));
}
.board--checker{
  border-width:calc(100px*var(--board-k)) calc(96px*var(--board-k))
               calc(84px*var(--board-k)) calc(101px*var(--board-k));
  border-image:url('../assets/menu/board-checker.webp') 100 96 84 101 round;
  background:#F9FCED;background-clip:padding-box;
  filter:drop-shadow(0 14px 22px rgba(51,49,59,.16));
}
.board--sign{
  border-width:calc(188px*var(--board-k)) calc(25px*var(--board-k))
               calc(190px*var(--board-k)) calc(25px*var(--board-k));
  border-image:url('../assets/menu/board-sign.webp') 188 25 190 25 fill round stretch;
  filter:drop-shadow(0 16px 26px rgba(51,49,59,.18));
}
.board--card{
  border-width:calc(281px*var(--board-k)) calc(68px*var(--board-k))
               calc(73px*var(--board-k)) calc(68px*var(--board-k));
  border-image:url('../assets/menu/board-card.webp') 281 68 73 68 stretch;
  background:#FCF6EC;background-clip:padding-box;
  filter:drop-shadow(0 14px 24px rgba(51,49,59,.16));
}

.board__inner{padding:clamp(.3rem,1.3vw,1rem) clamp(.3rem,1.4vw,1.2rem);color:var(--paper-ink)}
/* the painted sign is white, not cream — nudge the ink cooler */
.board--sign .board__inner{--paper-ink:#2B2B2B;--paper-ink-soft:rgba(43,43,43,.72);--paper-rule:rgba(43,43,43,.26)}

/* masthead printed on the panel */
.board__mast{text-align:center;margin-bottom:1.3rem}
.board__kicker{
  font-weight:800;font-size:.64rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--paper-ink-soft);margin-bottom:.42rem;
}
.board__title{
  font-family:var(--groove);font-weight:900;
  font-size:clamp(1.3rem,3vw,2.05rem);
  letter-spacing:.09em;text-transform:uppercase;line-height:1.05;
}
.board--checker .board__title,.board--card .board__title{color:var(--pink-deep)}
.board__rule{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:.65rem auto 0;max-width:15rem}
.board__rule::before,.board__rule::after{
  content:"";flex:1;height:0;border-top:1.5px solid var(--paper-rule);
  box-shadow:0 3px 0 -1.5px var(--paper-rule);
}
.board__rule span{color:var(--pink);font-size:.78rem;line-height:1}

/* items */
.board__list{list-style:none;display:grid;gap:1.05rem}
.mitem__top{display:flex;align-items:baseline;gap:.5rem}
.mitem__name{
  font-family:var(--display);font-weight:900;
  font-size:clamp(.92rem,1.5vw,1.05rem);
  letter-spacing:.04em;text-transform:uppercase;
}
.mitem__lead{flex:1;min-width:1.5rem;height:0;align-self:center;border-bottom:1.5px dotted var(--paper-rule)}
.mitem__tags{display:flex;gap:.3rem;flex-shrink:0}
.mtag{
  font-family:var(--display);font-weight:800;font-size:.59rem;letter-spacing:.09em;
  text-transform:uppercase;padding:.2rem .42rem;border-radius:5px;
  border:1.5px solid var(--paper-rule);color:var(--paper-ink-soft);line-height:1;
}
.mtag--ve{border-color:var(--teal);color:#3d8a82}
.mtag--v{border-color:var(--gold);color:#a37c14}
.mtag--add{border-color:var(--pink);color:var(--pink-deep)}
.mitem__desc{font-size:.88rem;line-height:1.5;color:var(--paper-ink-soft);margin-top:.2rem}

.board__key{
  display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;
  margin-top:1.4rem;padding-top:.9rem;border-top:1.5px solid var(--paper-rule);
}
.board__key span{font-size:.66rem;font-weight:700;letter-spacing:.06em;color:var(--paper-ink-soft);text-transform:uppercase}

/* ---------- polaroids on the slant ---------- */
.polaroid{margin:0}
.polaroid img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 14px 20px rgba(51,49,59,.24));
  transform:rotate(var(--tilt,-4deg));
  transition:transform .45s var(--ease-out);
}
.polaroid:hover img{transform:rotate(0deg) scale(1.03)}
.polaroid--a{--tilt:-5deg}
.polaroid--b{--tilt:4.5deg}
.polaroid--c{--tilt:-3.5deg}
.polaroid--d{--tilt:5.5deg}

/* ---------- closing note ---------- */
.menus__note{margin-top:clamp(1rem,3vh,2rem);text-align:center}
.menus__note .chips{justify-content:center;margin-bottom:1.2rem}
.menus__legal{font-style:italic;color:var(--ink-soft);font-size:.92rem;max-width:38rem;margin:0 auto 1.8rem}

/* ---------- responsive ---------- */
@media (max-width:1100px){:root{--board-k:.5}}
@media (max-width:900px){
  :root{--board-k:.44}
  .menus__intro{grid-template-columns:minmax(0,1fr);text-align:center}
  .menus__introtext p{margin-inline:auto}
  .menus__intro .polaroid{max-width:220px;margin-inline:auto}
  .mset__body,.mset__body--flip{grid-template-columns:minmax(0,1fr)}
  .mset__body--flip .board{order:1}
  .mset__body--flip .polaroid{order:2}
  .mset__body .polaroid{max-width:230px;margin-inline:auto}
}
@media (max-width:620px){
  :root{--board-k:.3}
  .board__inner{padding:.2rem}
  .mitem__top{flex-wrap:wrap;gap:.35rem}
  .mitem__lead{display:none}
  .board__list{gap:.95rem}
}
@media (prefers-reduced-motion:reduce){
  .polaroid img,.polaroid:hover img{transition:none}
}

/* ==========================================================
   v20 · JUKEBOX SELECTOR + DINER TRIM
   ========================================================== */

.pagehero--tight{padding-bottom:clamp(1rem,3vh,2rem)}

/* ---------- jukebox selector ---------- */
.jukebox{
  display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);
  gap:clamp(1.4rem,4vw,3.4rem);align-items:center;
  max-width:1000px;margin:0 auto clamp(3rem,8vh,5rem);
}
.jukebox__box{
  width:100%;height:auto;
  filter:drop-shadow(0 22px 34px rgba(51,49,59,.22));
}

.jukebox__rack{
  position:relative;border-radius:18px;padding:clamp(1rem,2.4vw,1.6rem);
  background:linear-gradient(180deg,#F2EFE9 0%,#E4DFD6 48%,#F4F1EB 52%,#D8D2C7 100%);
  border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
}
.jukebox__label{
  font-family:var(--display);font-weight:900;font-size:.68rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);
  text-align:center;margin-bottom:.9rem;
}
.jukebox__strips{display:grid;gap:.5rem}
.jbstrip{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;column-gap:.85rem;
  padding:.62rem .9rem;border-radius:9px;text-decoration:none;
  background:#FCF8EE;border:2px solid var(--ink);
  transition:transform .28s var(--ease-out),background .2s,box-shadow .28s var(--ease-out);
}
.jbstrip:hover,.jbstrip:focus-visible{
  background:var(--pink);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink);
}
.jbstrip__code{
  grid-row:1 / span 2;
  font-family:var(--display);font-weight:900;font-size:.82rem;letter-spacing:.06em;
  color:#fff;background:var(--ink);border-radius:5px;padding:.32rem .46rem;line-height:1;
}
.jbstrip:hover .jbstrip__code{background:var(--ink)}
.jbstrip__name{
  font-family:var(--display);font-weight:900;font-size:1rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);line-height:1.2;
}
.jbstrip__sub{
  font-size:.76rem;color:var(--ink-soft);line-height:1.3;
}
.jbstrip:hover .jbstrip__name,.jbstrip:hover .jbstrip__sub,
.jbstrip:focus-visible .jbstrip__name,.jbstrip:focus-visible .jbstrip__sub{color:#fff}
.jukebox__foot{
  margin-top:.95rem;text-align:center;font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
}

/* ---------- polaroid in the homepage payoff ---------- */
.payoff__tots.polaroid{display:flex;justify-content:center}
.payoff__tots.polaroid img{max-width:min(100%,420px)}

/* ---------- diner checker rule ---------- */
.checkrule{
  height:26px;width:100%;
  background:
    repeating-conic-gradient(var(--ink) 0% 25%, transparent 0% 50%) 0 0/26px 26px;
  opacity:.9;
}

@media (max-width:820px){
  .jukebox{grid-template-columns:minmax(0,1fr);justify-items:center}
  .jukebox__box{max-width:190px}
  .jukebox__rack{width:100%}
}
@media (max-width:420px){
  .jbstrip{grid-template-columns:auto minmax(0,1fr);column-gap:.6rem;padding:.55rem .7rem}
  .jbstrip__name{font-size:.92rem}
}

/* ---------- jukebox: pressed state + one-menu-at-a-time ---------- */
.jbstrip{
  font:inherit;text-align:left;cursor:pointer;width:100%;
  -webkit-appearance:none;appearance:none;
}
.jbstrip.is-on{
  background:var(--pink);box-shadow:4px 4px 0 var(--ink);transform:translate(-2px,-2px);
}
.jbstrip.is-on .jbstrip__name,.jbstrip.is-on .jbstrip__sub{color:#fff}
.jbstrip.is-on .jbstrip__code{background:var(--ink);color:var(--gold)}
.jbstrip__now{
  grid-column:2;font-size:.6rem;font-weight:900;letter-spacing:.2em;
  text-transform:uppercase;color:#fff;opacity:0;height:0;overflow:hidden;
  transition:opacity .2s;
}
.jbstrip.is-on .jbstrip__now{opacity:1;height:auto;margin-top:.15rem}

.mset[hidden]{display:none}
.mset.is-on{animation:msetIn .5s var(--ease-out) both}
@keyframes msetIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .mset.is-on{animation:none}
}

/* a swapped-in menu is always fully visible — the scroll-reveal on the
   panel children would otherwise leave it at opacity 0 */
.mset.is-on .reveal{opacity:1 !important;transform:none !important}

/* ==========================================================
   v24 · the reel sits beside the quote, on a slant
   ========================================================== */

.proof__inner{
  max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);
  gap:clamp(1.8rem,5vw,4rem);align-items:center;text-align:left;
}
.proof__words{min-width:0}
.proof__words .eyebrow{margin-bottom:.9rem}
.proof__stars{margin-bottom:1rem}
.proof__quote p{margin-bottom:.9rem}
.proof__stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;margin-top:2rem;text-align:left;
}

/* the frame */
.reelframe{
  position:relative;margin:0;width:100%;aspect-ratio:900/1747;
  transform:rotate(-3.5deg);
  filter:drop-shadow(0 22px 32px rgba(51,49,59,.26));
  transition:transform .5s var(--ease-out);
}
.reelframe:hover{transform:rotate(-1deg) scale(1.015)}
.reelframe video{
  position:absolute;left:10.802%;top:5.481%;
  width:78.396%;height:73.019%;
  object-fit:cover;border-radius:3px;background:var(--ink);
}
.reelframe > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:fill;pointer-events:none;
}
.reelframe__sound{
  position:absolute;right:13%;bottom:9%;z-index:3;
  display:grid;place-items:center;width:2.4rem;height:2.4rem;
  border-radius:999px;border:2.5px solid var(--ink);background:var(--cream);
  color:var(--ink);cursor:pointer;font-size:.92rem;line-height:1;
  transition:transform .3s var(--ease-out),background .2s,color .2s;
}
.reelframe__sound:hover{background:var(--pink);color:#fff;transform:scale(1.08)}

/* ---------- mobile: keep it tight so the page doesn't run on ---------- */
@media (max-width:860px){
  .proof__inner{
    grid-template-columns:minmax(0,1fr);
    gap:1.6rem;text-align:center;justify-items:center;
  }
  .reelframe{max-width:186px;transform:rotate(-3deg);margin:.8rem auto 2.2rem}
  .proof__stats{text-align:center;gap:.6rem}
}
@media (max-width:600px){
  .proof{padding-top:3rem;padding-bottom:3rem}
  .reelframe{max-width:168px;margin:.6rem auto 2rem}
  .proof__quote p{font-size:1.02rem;line-height:1.55}
  .proof__stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
  .proof__stat strong{font-size:1.5rem}
  .proof__stat span{font-size:.66rem;letter-spacing:.06em}
}

/* ---------- proper shadow under every menu ---------- */
.board--pink{filter:drop-shadow(0 20px 30px rgba(51,49,59,.30)) drop-shadow(0 4px 8px rgba(51,49,59,.16))}
.board--checker{filter:drop-shadow(0 20px 30px rgba(51,49,59,.28)) drop-shadow(0 4px 8px rgba(51,49,59,.14))}
.board--sign{filter:drop-shadow(0 20px 30px rgba(51,49,59,.30)) drop-shadow(0 4px 8px rgba(51,49,59,.16))}
.board--card{filter:drop-shadow(0 20px 30px rgba(51,49,59,.28)) drop-shadow(0 4px 8px rgba(51,49,59,.14))}
.jukebox__box{filter:drop-shadow(0 24px 36px rgba(51,49,59,.28)) drop-shadow(0 5px 10px rgba(51,49,59,.16))}

/* the caption strip printed on the frame's cream card */
.reelframe__cap{
  position:absolute;left:16%;right:16%;top:83.2%;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  color:var(--paper-ink);
}
.reelframe__dish{
  font-family:var(--display);font-weight:900;
  font-size:clamp(.46rem,.72vw,.7rem);
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}
.reelframe__lead{
  flex:1;min-width:.4rem;height:0;
  border-bottom:1.5px dotted rgba(62,49,40,.42);
}
@media (max-width:860px){
  .reelframe__cap{left:15%;right:15%;top:82.8%}
  .reelframe__dish{font-size:.44rem;letter-spacing:.07em}
}

/* wrapper so the slide-in can animate x without clobbering the frame's tilt */
.proof__reelwrap{min-width:0;width:100%}

/* enquiry form feedback line */
.book__note{
  grid-column:1 / -1;margin-top:.9rem;font-size:.92rem;font-weight:700;min-height:1.2em;
}
.book__note.is-ok{color:#2f7d63}
.book__note.is-warn{color:var(--pink-deep)}

/* live event extras on Find Us */
.spot__notes{margin-top:.4rem;font-style:italic;opacity:.8}
.spot__map{
  display:inline-block;margin-top:.7rem;font-weight:800;font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--pink-deep);text-decoration:none;
}
.spot__map:hover{text-decoration:underline}

/* an event that is happening right now */
.spot--live .spot__day{background:var(--teal);color:#fff;border-color:var(--teal)}

/* ==========================================================
   v30 · caps navigation, tighter menus page
   ========================================================== */
.nav__links a,
.mobmenu a,
.footer__nav a,
.nav__cta{
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:800;
}
.nav__links a{font-size:.82rem}
.mobmenu a{letter-spacing:.06em}
.footer__nav a{font-size:.8rem}
.nav__cta{font-size:.78rem}

/* menus page: the boards carry the titles now, so the sections sit closer */
.mset{margin-bottom:clamp(3rem,7vh,5rem)}
.board__mast{margin-bottom:1.5rem}

/* nothing booked in yet */
.spot--empty{text-align:center}
.spot--empty h3{margin-bottom:.5rem}
.spot--empty p{margin-bottom:1.3rem}
.findteaser__none{margin:0 auto 1.8rem;text-align:center}

/* ==========================================================
   v32 · multi-day events
   A run line so a three day festival cannot be mistaken
   for a single afternoon.
   ========================================================== */
.spot__run{
  margin-top:.45rem;
  font-family:var(--display);
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.02em;
  color:var(--teal);
}
.spot--multi .spot__day{white-space:normal}
.spot--live .spot__run{color:var(--pink)}

/* ==========================================================
   v33 · bespoke menus band
   Louise asked for this under the boards: people who do not
   see their thing on a menu need telling they can just ask.
   ========================================================== */
.bespoke{
  margin-top:clamp(1.8rem,5vh,3.2rem);
  padding:clamp(1.6rem,4vw,2.4rem);
  text-align:center;
  border:2.5px solid var(--ink);
  border-radius:18px;
  background:rgba(238,95,167,.08);
  box-shadow:0 10px 0 rgba(51,49,59,.08);
}
.bespoke__h2{
  font-family:var(--display);font-weight:900;
  font-size:clamp(1.1rem,2.6vw,1.6rem);
  letter-spacing:.06em;color:var(--pink);margin-bottom:.5rem;
}
.bespoke__p{
  font-family:var(--body);color:var(--ink);
  font-size:clamp(.95rem,1.6vw,1.08rem);margin-bottom:1.3rem;
}

/* ---------- booking page: a little more said, not a lot more read ---------- */
.book__lead{max-width:40rem;margin:0 auto 1.8rem;text-align:center}
.book__steps{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(.6rem,2vw,1.6rem);margin:1.6rem 0 .6rem;padding:0;counter-reset:step;
}
.book__steps li{
  counter-increment:step;
  font-family:var(--display);font-weight:800;font-size:.82rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);
  display:flex;align-items:center;gap:.5rem;
}
.book__steps li::before{
  content:counter(step);
  display:grid;place-items:center;width:1.55rem;height:1.55rem;flex:none;
  border-radius:50%;background:var(--pink);color:#fff;font-size:.78rem;
}

/* Very narrow phones: the wordmark and the Book Us button cannot both fit,
   so the logo carries the brand on its own and grows a little to compensate. */
@media (max-width:400px){
  .nav__mark{display:none}
  .nav__logo{width:58px;height:58px}
}

/* ==========================================================
   v34 · hero logo, and the nav logo that arrives after it
   The mark is big on the landing and the nav carries the
   wordmark alone, so the two are never on screen together.
   Scroll past the first section and the logo slides into the
   nav to take over.
   ========================================================== */
.statement__logo{
  display:block;margin:0 auto clamp(.7rem,2vh,1.4rem);
  width:clamp(148px,17.5vw,262px);height:auto;
  filter:drop-shadow(0 14px 22px rgba(51,49,59,.16));
}
.nav--nologo .nav__logo{
  width:0;min-width:0;opacity:0;margin-right:-.6rem;
  transform:scale(.35) rotate(-30deg);pointer-events:none;
}
@media (max-width:900px){
  .statement__logo{width:clamp(132px,34vw,200px)}
}
@media (max-width:400px){
  /* This narrow the nav only has room for one of them, so at the top of the
     page the wordmark carries the brand and the logo takes over on scroll. */
  .nav--nologo .nav__mark{display:block}
}
@media (prefers-reduced-motion:reduce){
  .nav__logo{transition:none}
}

/* ---------- footer socials ---------- */
.footer__social{
  display:flex;justify-content:center;gap:.9rem;margin:1.1rem 0 .2rem;
}
.footer__social a{
  display:grid;place-items:center;width:42px;height:42px;
  border:2.5px solid var(--ink);border-radius:50%;
  color:var(--ink);background:#fff;
  transition:transform .25s var(--ease-out),background .25s var(--ease-out),color .25s var(--ease-out);
}
.footer__social a:hover{
  background:var(--pink);color:#fff;border-color:var(--ink);transform:translateY(-3px);
}

/* Short windows: the hero logo gives way first so the headline and the
   Book the bus button still land above the fold on a laptop. */
@media (max-height:860px) and (min-width:901px){
  .statement__logo{width:clamp(120px,13vw,190px)}
}
@media (max-height:740px) and (min-width:901px){
  .statement__logo{width:clamp(96px,10vw,146px)}
  .statement__stage{padding-bottom:8.5rem}
}
@media (max-height:700px) and (max-width:900px){
  .statement__logo{width:clamp(90px,22vw,130px)}
}