/* ==========================================================================
   HOT ROD SMOOTHIES  ·  hotrodsmoothies.com  ·  site.css  ·  build v2.7
   Rewritten clean at v2.0 (the v1.x sheet carried three abandoned themes).
   Brand rules honoured here: chrome lives in the logo and on hardware, and
   no element ever gets a box or a plate behind its type.
   ========================================================================== */

:root{
  --tang:#F26B1D;          /* candy tangerine, the paint */
  --tang-deep:#C4520F;
  --tang-lift:#FF8A3D;
  --blue:#9ECFE8;          /* baby blue pinstripe */
  --blue-hot:#4FC3F7;      /* nitrous backlight */
  --cream:#F3EEE2;         /* the truck's lower body and the menu's sheet metal */
  --ink:#15171A;
  --ink-2:#1D2126;
  --ink-3:#0D0F11;
  --ink-soft:rgba(21,23,26,.66);
  --steel:#EEF1F3;         /* light steel panel behind the route */
  --steel-line:#D5DCE1;
  --green:#3FD16B;

  --f-display:"industry-inc-base","Oswald","Arial Narrow",Impact,sans-serif;
  --f-label:"rift","Oswald","Arial Narrow",sans-serif;
  --f-body:"rift","Oswald","Arial Narrow",sans-serif;

  --gut:clamp(20px,5vw,64px);
  --max:1280px;
  --navh:84px;
  --rule:1px solid rgba(21,23,26,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --stripe:#2E86B8;        /* the pinstripe, deepened so it holds on white */
  --stripe-2:#F26B1D;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#fff;color:var(--ink);
  font-family:var(--f-body);font-weight:400;font-size:clamp(16px,1.05vw,18px);line-height:1.55;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue-hot);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:12px;z-index:200;background:var(--tang);color:#fff;padding:.8em 1.4em;border-radius:99px}

/* ---------- type ---------- */
.d1,.d2,.d3{font-family:var(--f-display);font-weight:400;text-transform:uppercase;line-height:.9;margin:0}
.d1{font-size:clamp(44px,7vw,104px);letter-spacing:.01em}
.d2{font-size:clamp(34px,5.4vw,82px)}
.d3{font-size:clamp(24px,2.6vw,40px)}
.lbl{font-family:var(--f-label);font-weight:700;text-transform:uppercase;font-size:clamp(11px,.82vw,13px);letter-spacing:.22em;line-height:1.2;margin:0}
.lede{font-size:clamp(18px,1.5vw,23px);line-height:1.5;max-width:56ch;margin:0}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
section{position:relative}
.sec{padding-block:clamp(64px,8.5vw,128px);background:#fff}
.sec-head{margin-bottom:clamp(28px,4vw,56px)}
.sec-head .txt{min-width:0}
.sec-head .lede{margin-top:0}
.t-steel{background:var(--steel)}

/* ==========================================================================
   NAV · white bar, the horizontal colour lockup, billet order button
   ========================================================================== */
.nav{position:fixed;inset:0 0 auto 0;z-index:80;background:#fff;
  box-shadow:0 1px 0 var(--steel-line);transition:box-shadow .3s}
.nav.is-stuck{box-shadow:0 1px 0 var(--steel-line),0 6px 24px rgba(16,19,21,.08)}
.nav-in{display:flex;align-items:center;gap:clamp(14px,2vw,34px);height:var(--navh)}
.nav-mark{flex:0 0 auto;display:block;line-height:0}
.nav-logo{height:clamp(44px,4.4vw,60px);width:auto}
@media (max-width:960px){.nav-logo{height:44px}}
.nav-links{display:flex;align-items:center;flex:1 1 auto;min-width:0;justify-content:flex-end;gap:clamp(14px,2vw,32px)}
.nav-links a{font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:13px;
  color:var(--ink);position:relative;padding:.35em 0;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--stripe);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav .btn{padding:.72em 1.35em;flex:0 0 auto}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--ink);margin:5px 0;transition:transform .3s,opacity .3s}
.nav.is-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav-toggle span:nth-child(2){opacity:0}
.nav.is-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:960px){
  :root{--navh:70px}
  .nav-toggle{display:block;order:3}
  .nav .btn{order:2;margin-left:auto}
  .nav-links{position:fixed;inset:var(--navh) 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;
    background:rgba(255,255,255,.98);backdrop-filter:blur(16px);padding:8px var(--gut) 26px;
    clip-path:inset(0 0 100% 0);transition:clip-path .45s var(--ease-out);box-shadow:0 12px 30px rgba(16,19,21,.12)}
  .nav.is-open .nav-links{clip-path:inset(0 0 0 0)}
  .nav-links a{font-size:22px;padding:.62em 0;width:100%;border-bottom:1px solid var(--steel-line)}
}
@media (max-width:480px){.nav .btn{display:none}}

/* ==========================================================================
   HERO · the truck, the first thing on the page
   ========================================================================== */
.hero{margin-top:var(--navh);position:relative}
.hero-stage{position:relative;height:calc(100svh - var(--navh));min-height:420px;max-height:1040px;
  background:var(--ink-3);overflow:hidden;isolation:isolate}
.hero-pic,.hero-pic img{position:absolute;inset:0;width:100%;height:100%}
.hero-pic img{object-fit:cover;object-position:50% 85%}

/* v2.9: the headline sits ON the photo, one line along the asphalt under the family, never on the truck
   or the people. 85% keeps the parking lot for the type and the roof in frame on 16:9 screens; the size
   also follows the hero's height so a short window gets a smaller line, not a collision with the feet. */
.hero-copy{position:absolute;left:0;right:0;bottom:clamp(22px,3.2vw,40px);z-index:2;pointer-events:none}
.hero-copy .hero-eyebrow{color:var(--cream);margin-bottom:clamp(10px,1.2vw,18px)}
.hero-copy .hero-eyebrow::before{background:var(--tang)}
.hero-copy .d1{color:var(--cream);font-size:clamp(40px,min(5.3vw,9.3svh),76px)}
.hero-copy .d1 .ln{display:inline-block;overflow:hidden;vertical-align:top}
.hero-copy .d1 .ln+.ln{margin-left:.18em}
.hero-copy .d1 .ln i{display:block;font-style:normal}
.hero-copy .d1 em{font-style:normal;color:var(--tang)}
/* v2.14 (Michael's pick, E): the asphalt darkens under the line with a soft fade, no box, no plate;
   tangerine and that lit grey are almost the same brightness, so the ground has to give */
.hero-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0))}
@media (max-width:640px){
  .hero-stage{height:calc(100svh - var(--navh));min-height:520px}
  .hero-pic img{object-position:52% 60%}
  /* phone: no asphalt under the family at this width, so the type goes up on the sky, two lines, in ink */
  .hero-copy{top:clamp(14px,3vw,24px);bottom:auto}
  .hero-copy .hero-eyebrow,.hero-copy .d1{color:var(--ink)}
  .hero-stage::after{display:none}
  .hero-copy .d1{font-size:clamp(36px,10.4vw,44px)}
  .hero-copy .d1 .ln{display:block}
  .hero-copy .d1 .ln+.ln{margin-left:0}
}
/* wide screens (16:9 laptops and monitors, or anything past 2200 px): the hero is too short for the
   cropped plate to hold both the truck's roof and a line of type on the asphalt, so the photo keeps
   the truck and the headline steps down onto the white under it, the way v2.8 read. 27% splits the
   loss between the sky above the roof and the asphalt below the feet. */
@media (min-width:641px) and ((min-aspect-ratio:7/4) or (min-width:2200px)){
  .hero-pic img{object-position:50% 27%}
  .hero-copy{position:static;pointer-events:auto;padding-top:clamp(26px,3vw,44px)}
  .hero-copy .hero-eyebrow{color:#B84A08}
  .hero-copy .hero-eyebrow::before{background:#B84A08}
  .hero-copy .d1{color:var(--ink)}
  .hero-stage::after{display:none}
}

/* the sub line alone, a slim band on white under the photo (the buttons left in v2.10: the status board right under it has its own) */
.head-block{background:#fff;padding-block:clamp(22px,2.8vw,40px)}
.hero-eyebrow{display:flex;align-items:center;gap:.8em;color:#B84A08;margin-bottom:clamp(12px,1.4vw,20px)}
.hero-eyebrow::before{content:"";width:clamp(28px,4vw,64px);height:2px;background:#B84A08}
.hero-sub{margin:0;max-width:60ch;font-size:clamp(17px,1.35vw,20px);color:var(--ink-soft);line-height:1.5}
@media (prefers-reduced-motion:no-preference){
  .hero-pic img{animation:settle 2.6s var(--ease-out) .1s both}
  .hero-copy .hero-eyebrow::before{animation:runOut .7s var(--ease-out) .5s both}
  .hero-copy .d1 .ln:nth-child(1) i{animation:sprayIn 1s cubic-bezier(.19,1,.28,1) .55s both}
  .hero-copy .d1 .ln:nth-child(2) i{animation:sprayIn 1s cubic-bezier(.19,1,.28,1) .7s both}
  .boardbar .board{animation:liftIn .7s var(--ease-out) 1.2s both}
}
@keyframes settle{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes runOut{from{width:0}to{width:clamp(28px,4vw,64px)}}
@keyframes sprayIn{from{transform:translateY(105%)}to{transform:none}}
@keyframes liftIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ==========================================================================
   BOARD · live status strip under the truck
   ========================================================================== */
.boardbar{background:var(--ink-3);color:var(--cream);border-bottom:1px solid rgba(255,255,255,.08)}
.board{padding-block:clamp(18px,2vw,26px)}
.board-row{display:grid;align-items:start;column-gap:clamp(20px,3vw,56px);row-gap:0;
  grid-template-columns:1fr 1.5fr 1fr auto;grid-template-rows:auto auto auto}
.board-cell{display:grid;grid-row:1/4;grid-template-rows:subgrid;min-width:0;row-gap:0}
.board-cell .k{grid-row:1;font-family:var(--f-label);font-weight:700;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.55);line-height:1;padding-bottom:.55em}
.board-cell .v{grid-row:2;font-family:var(--f-display);text-transform:uppercase;font-size:clamp(20px,1.8vw,27px);line-height:1;color:#fff;
  display:flex;align-items:center;min-height:1em}
.board-cell .sub{grid-row:3;font-family:var(--f-label);text-transform:uppercase;letter-spacing:.05em;font-size:13px;
  color:rgba(255,255,255,.62);line-height:1.2;padding-top:.45em}
.board-status{gap:.55em}
.dot{width:11px;height:11px;border-radius:50%;background:var(--green);flex:0 0 auto;box-shadow:0 0 0 0 rgba(63,209,107,.7);animation:pulse 2.4s infinite}
.dot.off{background:#5A646C;animation:none;box-shadow:none}
.dot.soon{background:var(--tang);animation:pulse-t 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(63,209,107,0)}100%{box-shadow:0 0 0 0 rgba(63,209,107,0)}}
@keyframes pulse-t{0%{box-shadow:0 0 0 0 rgba(242,107,29,.7)}70%{box-shadow:0 0 0 12px rgba(242,107,29,0)}100%{box-shadow:0 0 0 0 rgba(242,107,29,0)}}
.board-cta{display:flex;gap:10px;flex-wrap:wrap;justify-self:end;grid-row:1/4;align-self:center}
.boardbar .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06) 52%,rgba(255,255,255,.14))}
@media (max-width:960px){
  .board-row{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto auto auto;row-gap:18px}
  .board-cell{grid-row:auto/span 3}
  .board-cta{grid-column:1/-1;grid-row:auto;justify-self:stretch}
  .board-cta .btn{flex:1 1 auto;justify-content:center}
}
@media (max-width:560px){.board-row{grid-template-columns:1fr;grid-template-rows:none}.board-cell{grid-template-rows:auto auto auto}}

/* ---------- ticker: sprayed and polished, not a flat orange strip ---------- */
.ticker{position:relative;overflow:hidden;color:#fff;padding-block:clamp(11px,1.15vw,15px);
  background:linear-gradient(180deg,#FF9245 0%,#F5701F 34%,#E15E10 62%,#B94A08 100%)}
.ticker::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.44) 0%,rgba(255,255,255,.05) 27%,rgba(255,255,255,0) 48%,rgba(0,0,0,.18) 100%)}
.ticker-track{display:flex;width:max-content;animation:roll 44s linear infinite;will-change:transform}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-seq{display:flex;align-items:center;flex:0 0 auto}
.ticker-seq span{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(15px,1.5vw,22px);letter-spacing:.02em;
  padding-inline:clamp(14px,1.6vw,26px);white-space:nowrap}
.ticker-seq i{flex:0 0 auto;width:clamp(11px,1.1vw,15px);height:clamp(11px,1.1vw,15px);background:#fff;border-radius:50%}
@keyframes roll{to{transform:translate3d(-50%,0,0)}}

/* ==========================================================================
   THE MENU · the cream hood, straight off the printed menu (v15)
   Cream sheet metal, blue double pinstripe frame, the seven gauges with the
   smoothie inside a chrome cup, name and build under each, the Nitrous strip.
   ========================================================================== */
#menu{padding:0;background:none}
#menu>.wrap{max-width:none;padding:0}
.hood{position:relative;isolation:isolate;
  padding:clamp(56px,7vw,110px) clamp(28px,6vw,110px) clamp(40px,5vw,80px);
  background:
    radial-gradient(60% 40% at 22% 12%,rgba(255,255,255,.62),transparent 70%),
    radial-gradient(45% 30% at 86% 92%,rgba(255,255,255,.2),transparent 70%),
    linear-gradient(135deg,#F6F1E4 0%,#EFE8D8 50%,#DDD4C0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.hood::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(-24deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 56%,rgba(255,255,255,.12) 62%,transparent 66%)}
.hood-frame{position:absolute;inset:clamp(16px,2.4vw,36px);border:3px solid var(--stripe);border-radius:3px;pointer-events:none;z-index:1}
.hood-frame::after{content:"";position:absolute;inset:8px;border:1.4px solid var(--stripe);opacity:.85;border-radius:2px}
.hood>*{position:relative;z-index:2}
.hood>.hood-frame{position:absolute}
.hood-head{text-align:center;margin-bottom:clamp(30px,4vw,60px)}
.hood-lockup img{width:clamp(220px,30vw,460px);height:auto;margin-inline:auto;filter:drop-shadow(4px 6px 3px rgba(0,0,0,.22))}
.hood-sub{margin:clamp(14px,1.8vw,26px) 0 0;white-space:nowrap;font-family:var(--f-label);font-weight:400;text-transform:uppercase;
  letter-spacing:.24em;font-size:clamp(12px,1.15vw,17px);color:rgba(21,23,26,.75)}

.gauges,.nstrip,.hood-foot,.hood-head{max-width:1180px;margin-inline:auto}
.gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(40px,4.4vw,70px) clamp(18px,3vw,50px);
  padding-inline:clamp(4px,2vw,28px)}
@media (max-width:900px){.gauges{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.gauges{grid-template-columns:1fr;gap:44px}.hood-sub{letter-spacing:.14em;font-size:11.5px}}
.gauge{text-align:center;min-width:0}
.gauge-dial{width:min(100%,444px);margin:0 auto clamp(14px,1.8vw,26px);position:relative}
.gauge-svg{display:block;width:100%;height:auto;overflow:visible;
  filter:drop-shadow(14px 18px 16px rgba(20,16,10,.36))}
.gauge-svg .ind{font-family:var(--f-display);font-weight:400}
.gauge-svg .num{font-size:15px;fill:var(--ink)}
.gauge-svg .needle{transform:rotate(-250deg);transform-origin:var(--c) var(--c);
  transition:transform 1.7s cubic-bezier(.28,1.28,.5,1) .3s}
.is-in .gauge-svg .needle{transform:rotate(0deg)}
.gauge-name{margin:0;font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(26px,2.5vw,42px);line-height:1;color:var(--ink)}
.gauge-name .price,.nname .price{color:var(--tang);margin-left:.34em}
.gauge-ing{margin:.55em 0 0;font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:clamp(13px,1.2vw,18px);line-height:1.35;color:rgba(21,23,26,.82)}
.gauge-build{margin:.5em 0 0;font-family:var(--f-label);font-weight:400;text-transform:uppercase;letter-spacing:.1em;
  font-size:clamp(11px,.95vw,14px);color:rgba(21,23,26,.72)}

/* the Nitrous strip: black glass, blue backlight */
.nstrip{margin-top:clamp(44px,5vw,76px)}
.nstrip-in{position:relative;display:grid;align-items:center;gap:clamp(16px,2.4vw,40px);
  grid-template-columns:auto minmax(0,1fr) auto;
  padding:clamp(14px,1.6vw,22px) clamp(18px,3vw,56px) clamp(14px,1.6vw,22px) clamp(18px,2.6vw,48px);
  background:#07090C;border:3px solid #2A2F36;border-radius:18px;
  box-shadow:inset 0 0 0 6px #07090C,inset 0 0 0 7.5px rgba(79,195,247,.55),0 18px 40px rgba(0,0,0,.28)}
.ndial{width:clamp(120px,15vw,190px);flex:0 0 auto;position:relative;border-radius:50%;
  box-shadow:0 0 0 3px rgba(79,195,247,.9),0 0 22px rgba(79,195,247,.55)}
.ndial .gauge-svg{filter:none}
.ndial .gauge-svg .num{display:none}
.nname{margin:0;font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.07em;
  font-size:clamp(30px,3.4vw,54px);line-height:1;color:#7FD8FF;white-space:nowrap}
.ning{margin:.5em 0 0;font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:clamp(12px,1.25vw,20px);color:#CFEFFF}
.nbuild{margin:.4em 0 0;font-family:var(--f-label);font-weight:400;text-transform:uppercase;letter-spacing:.1em;
  font-size:clamp(11px,.95vw,14px);color:rgba(207,239,255,.75)}
.nlab{display:grid;justify-items:start;gap:.9em;font-family:var(--f-label);font-weight:400;text-transform:uppercase;
  letter-spacing:.24em;font-size:clamp(12px,1.15vw,18px);color:#7FD8FF;white-space:nowrap}
.meter{display:flex;gap:7px}
.meter i{display:block;width:14px;height:22px;border-radius:3px;background:#1B2430;transition:background-color .1s linear,box-shadow .1s linear}
.meter i.lit{background:var(--blue-hot);box-shadow:0 0 8px rgba(79,195,247,.9)}
/* the meter charges on a loop (site.js): at the top of the charge every
   segment blasts brighter and the label lights with it */
.meter.blast i.lit{background:#A8E8FF;box-shadow:0 0 12px rgba(79,195,247,1),0 0 26px rgba(79,195,247,.65)}
.nlab .meter + span{transition:color .25s,text-shadow .25s}
.nlab .meter.blast + span{color:#fff;text-shadow:0 0 12px rgba(79,195,247,.9)}
@media (max-width:820px){
  .nstrip-in{grid-template-columns:auto minmax(0,1fr)}
  .nlab{grid-column:1/-1}
}
@media (max-width:480px){
  .nstrip-in{grid-template-columns:1fr;text-align:center;justify-items:center}
  .nlab{justify-items:center}
  .nname{white-space:normal}
}

.hood-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6em 2em;
  margin-top:clamp(28px,3.4vw,52px);padding-inline:clamp(4px,2vw,28px);
  font-family:var(--f-label);font-weight:400;text-transform:uppercase;letter-spacing:.16em;
  font-size:clamp(12px,1.1vw,17px);color:rgba(21,23,26,.85)}
.hood-foot b{font-weight:700;margin-right:.6em}

/* ==========================================================================
   THE DROP · baby blue band, the Nitrous plate
   ========================================================================== */
.drop{background:linear-gradient(180deg,#B4DCEF 0%,#93C9E6 100%);color:var(--ink)}
.drop-grid{display:grid;gap:clamp(26px,3.4vw,60px);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:center}
.n2o{display:inline-flex;align-items:center;gap:1em;margin:0 0 1.2em;padding:.7em 1.4em;
  border:2px solid rgba(21,23,26,.5);border-radius:4px;background:rgba(255,255,255,.28);
  font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.26em;font-size:clamp(13px,1.1vw,16px)}
.n2o .bars{display:flex;align-items:flex-end;gap:2.5px;height:19px}
.n2o .bars i{width:3.5px;background:var(--ink);animation:jump 1.05s ease-in-out infinite}
@keyframes jump{0%,100%{opacity:.35;transform:scaleY(.42)}50%{opacity:1;transform:scaleY(1)}}
.drop-lede{margin-top:.7em;color:rgba(21,23,26,.86)}
.drop-ing{font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(13px,1.05vw,15px);color:rgba(21,23,26,.72);margin:1.4em 0 0;padding-top:1em;border-top:1px solid rgba(21,23,26,.28)}
.drop-meta{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,44px);margin-top:1.7em}
.drop-meta .k{font-family:var(--f-label);font-weight:700;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(21,23,26,.55);display:block;margin-bottom:.42em}
.drop-meta .v{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(18px,1.6vw,24px);line-height:1}
.drop-shot{max-width:520px;margin-inline:auto;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 1px rgba(21,23,26,.14),0 26px 56px rgba(21,23,26,.22)}
.drop-shot img{width:100%;height:auto;transition:transform 1.2s var(--ease-out)}
.drop-shot:hover img{transform:scale(1.04)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,36px)}
.hero{position:relative}

/* ==========================================================================
   UNDER THE HOOD · the seven plates, then the spec sheet
   ========================================================================== */
/* five columns: the first plate is the feature, two wide and two tall, the
   other six fill the three columns beside it. Every tile keeps the 3:4 plate. */
.plates{display:grid;gap:clamp(16px,2vw,28px);grid-template-columns:repeat(5,1fr)}
.plate:first-child{grid-column:1/3;grid-row:1/3}
.plate:first-child .plate-cap b{font-size:clamp(24px,2.4vw,36px)}
/* the feature fills both rows exactly: its picture runs from the top of row
   one to the bottom of row two and its caption sits level with the captions
   beside it. No air under Redline. */
@media (min-width:1001px){
  .plate:first-child{display:flex;flex-direction:column}
  .plate:first-child picture{flex:1 1 auto;min-height:0}
  .plate:first-child img{height:100%;aspect-ratio:auto}
}
@media (max-width:1000px){
  .plates{grid-template-columns:repeat(2,1fr);gap:14px}
  .plate:first-child{grid-column:1/-1;grid-row:auto}
  .plate:first-child img{aspect-ratio:4/3;object-position:50% 46%}
}
.plate{display:block;min-width:0}
.plate picture{display:block;overflow:hidden;border-radius:4px;box-shadow:0 14px 30px rgba(16,19,21,.16);background:#9a9ea3}
.plate img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;transition:transform .9s var(--ease-out)}
.plate:hover img{transform:scale(1.035)}
.plate-cap{display:block;margin-top:.8em}
.plate-cap b{display:flex;align-items:baseline;gap:.4em;font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  letter-spacing:.04em;font-size:clamp(18px,1.7vw,26px);line-height:1}
.plate-cap b i{font-style:normal;color:var(--tang);margin-left:auto}
.plate-cap>span{display:block;margin-top:.45em;font-family:var(--f-label);text-transform:uppercase;letter-spacing:.08em;
  font-size:clamp(10.5px,.85vw,12.5px);color:var(--ink-soft)}
#hood .hero-cta{margin-top:clamp(28px,3.4vw,48px)}

.spec{margin:clamp(48px,6vw,84px) 0 0;border-top:2px solid var(--ink)}
.spec-row{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:clamp(12px,2vw,30px);
  padding-block:clamp(13px,1.5vw,19px);border-bottom:var(--rule);align-items:baseline}
.spec-row dt{font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.17em;font-size:12.5px;color:var(--tang);margin:0}
.spec-row dd{margin:0;font-size:clamp(15.5px,1.15vw,18px);line-height:1.45}
@media (max-width:560px){.spec-row{grid-template-columns:1fr;gap:.35em}}

/* ==========================================================================
   THE PIT BOARD · dark face, chrome bezel, live lamp
   ========================================================================== */
.pitboard{position:relative;border-radius:8px;padding:clamp(8px,1vw,14px);
  background:linear-gradient(180deg,#22272C 0%,#14181C 12%,#101418 88%,#1B2126 100%);
  box-shadow:0 0 0 3px #C6CED5,0 0 0 4px #78838C,0 0 0 6px #E6EBEF,0 26px 60px rgba(16,19,21,.3),
    inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.5)}
.pitboard-head{display:flex;align-items:center;gap:.9em;padding:clamp(9px,1.1vw,15px) clamp(12px,1.4vw,20px) clamp(11px,1.3vw,17px);
  border-bottom:1px solid rgba(255,255,255,.13)}
.pitboard-head .t{font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.26em;font-size:12px;color:rgba(255,255,255,.62)}
.pitboard-head .live{margin-left:auto;display:flex;align-items:center;gap:.55em;font-family:var(--f-label);font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:#7FE3A3}
.pitboard-head .live.off{color:rgba(255,255,255,.45)}
.lamp{width:9px;height:9px;border-radius:50%;background:#3FD16B;box-shadow:0 0 10px #3FD16B,0 0 0 0 rgba(63,209,107,.6);animation:pulse 2.4s infinite}
.live.off .lamp{background:#5A646C;box-shadow:none;animation:none}
.route{margin:0}
.route-day{display:grid;grid-template-columns:74px 1fr auto;gap:clamp(12px,2vw,30px);
  padding:clamp(13px,1.5vw,19px) clamp(12px,1.4vw,20px);border-bottom:1px solid rgba(255,255,255,.09);align-items:center;transition:background-color .3s}
.route-day:last-child{border-bottom:0}
.route-day:hover{background:rgba(255,255,255,.045)}
.route-day .day{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(20px,1.8vw,27px);line-height:1;
  background:linear-gradient(180deg,#FFFFFF 0%,#D3DAE0 38%,#8F99A1 55%,#EDF1F4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.route-day .where{min-width:0}
.route-day .where b{display:block;font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:clamp(17px,1.5vw,24px);line-height:1.08;color:#fff}
.route-day .where>span{display:block;font-family:var(--f-label);text-transform:uppercase;letter-spacing:.05em;font-size:15px;color:rgba(255,255,255,.72);margin-top:.4em}
.route-day .when{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(16px,1.4vw,22px);color:#8FD4F2;white-space:nowrap;text-align:right;text-shadow:0 0 14px rgba(78,195,247,.45)}
.route-day.today{background:linear-gradient(90deg,rgba(242,107,29,.22),rgba(242,107,29,.06) 46%,transparent 78%);box-shadow:inset 4px 0 0 var(--tang)}
.route-day.today .when{color:#FFC073;text-shadow:0 0 16px rgba(255,168,63,.55)}
.route-day .flag{display:inline-block;margin-left:.7em;vertical-align:middle;font-family:var(--f-label);font-weight:700;font-size:10.5px;letter-spacing:.2em;
  color:#1A1D20;background:var(--tang);padding:.32em .66em;border-radius:99px;transform:translateY(-2px);box-shadow:0 0 16px rgba(242,107,29,.55)}
@media (max-width:640px){.route-day{grid-template-columns:56px 1fr;row-gap:.45em}.route-day .when{grid-column:2;text-align:left}}
.route-note{margin-top:1.6em;color:var(--ink-soft);max-width:56ch}

/* ==========================================================================
   BOOK THE TRUCK
   ========================================================================== */
.book{display:grid;gap:clamp(28px,4vw,66px);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-items:center}
.book-shot{position:relative;border-radius:8px;overflow:hidden;box-shadow:0 26px 60px rgba(21,23,26,.22)}
.book-shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.book-shot:hover img{transform:scale(1.045)}
.tickrow{display:grid;gap:.6em;margin:1.5em 0 0;padding:0;list-style:none}
.tickrow li{display:flex;gap:.75em;align-items:flex-start;font-size:16px}
.tickrow li::before{content:"";flex:0 0 auto;width:9px;height:9px;margin-top:.52em;border-radius:50%;background:var(--tang);box-shadow:0 0 0 3px rgba(242,107,29,.2)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--ink-3);color:var(--cream);padding-block:clamp(52px,6vw,84px) 28px}
.foot-top{display:grid;gap:clamp(28px,3.5vw,60px);grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.foot h3{font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.22em;font-size:11.5px;color:rgba(243,238,226,.5);margin:0 0 1.1em}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.62em}
.foot a:hover{color:var(--tang-lift)}
.foot-mark img{width:min(240px,62vw);margin-bottom:1.2em}
.foot-mark p{color:rgba(243,238,226,.6);max-width:32ch;margin:0}
.foot-legal{margin-top:clamp(34px,4vw,58px);padding-top:22px;border-top:1px solid rgba(243,238,226,.14);
  display:flex;flex-wrap:wrap;gap:.6em clamp(16px,2vw,32px);font-family:var(--f-label);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:rgba(243,238,226,.42)}

/* ==========================================================================
   BILLET BUTTONS · machined out of a block
   ========================================================================== */
.btn{position:relative;display:inline-flex;align-items:center;gap:.6em;font-family:var(--f-label);font-weight:700;
  text-transform:uppercase;letter-spacing:.15em;font-size:clamp(13px,.95vw,15px);
  padding:.92em 1.7em;border-radius:5px;border:1px solid #96A1A9;overflow:hidden;cursor:pointer;color:var(--ink);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 1px,rgba(255,255,255,0) 1px 4px),
    linear-gradient(180deg,#FBFDFE 0%,#E2E8ED 44%,#C3CCD3 52%,#DCE3E8 82%,#F3F7F9 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.16),inset 1px 0 0 rgba(255,255,255,.5),inset -1px 0 0 rgba(0,0,0,.08),
    0 3px 0 #8D979F,0 6px 12px rgba(16,19,21,.26);
  transition:transform .12s ease-out,box-shadow .12s ease-out,background-color .25s,color .25s,filter .25s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.16),0 4px 0 #8D979F,0 9px 18px rgba(16,19,21,.3)}
.btn:active{transform:translateY(3px);box-shadow:inset 0 2px 5px rgba(0,0,0,.34),inset 0 -1px 0 rgba(255,255,255,.35),0 0 0 #8D979F,0 2px 5px rgba(16,19,21,.24)}
.btn .arw{transition:transform .25s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-go{border-color:#000;color:#fff;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,rgba(255,255,255,0) 1px 4px),
    linear-gradient(180deg,#3A4147 0%,#20262B 44%,#12161A 52%,#252B31 82%,#3E454B 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.6),0 3px 0 #05070A,0 6px 14px rgba(16,19,21,.42)}
.btn-go:hover{border-color:#A8480B;color:#fff;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,rgba(255,255,255,0) 1px 4px),
    linear-gradient(180deg,#FF9A50 0%,#F26B1D 46%,#D95C11 54%,#FF8A3D 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.3),0 4px 0 #94400A,0 9px 20px rgba(166,72,11,.4)}
.btn-go:active{box-shadow:inset 0 2px 6px rgba(0,0,0,.5),0 0 0 #94400A,0 2px 5px rgba(16,19,21,.3)}

/* ==========================================================================
   PINSTRIPING · laid on with a brush, drawn on as you scroll
   ========================================================================== */
.ps-svg{display:block;overflow:visible}
.ps{fill:none;stroke:var(--stripe);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.5s cubic-bezier(.22,.68,.24,1)}
.ps-a{stroke-width:2.8}
.ps-b{stroke-width:1.5;transition-delay:.14s}
.ps-c{stroke-width:1;transition-delay:.26s}
.ps-drop{fill:var(--stripe);stroke:none;opacity:0;transition:opacity .5s ease-out .95s}
.is-in .ps{stroke-dashoffset:0}
.is-in .ps-drop{opacity:1}
.ps-wrap{margin:clamp(10px,1.4vw,20px) 0 clamp(14px,1.8vw,26px)}
.ps-spear{width:min(460px,74%);height:auto}
.divider{position:relative;background:#fff}
/* the bumper: a rolled chrome bar with a real profile. Bright top roll, the
   dark reflection line where the face turns under, a second highlight on the
   lower roll, a thinner blade under it, a shadow thrown onto the page, and a
   pair of chrome bumperettes bolted on. */
.divider{overflow:visible}
.trim-chrome{display:block;position:relative;height:46px;z-index:2;
  background:linear-gradient(180deg,
    #FFFFFF 0%,#F6F8FA 8%,#DCE2E7 18%,#B4BEC5 30%,#727D85 42%,#2B3339 50%,
    #6F7981 56%,#BCC5CB 66%,#EEF2F4 76%,#FFFFFF 84%,#D4DBE0 92%,#8E979F 100%);
  border-radius:0 0 16px 16px/0 0 12px 12px;
  box-shadow:0 2px 0 #343C42,0 4px 0 #EDF1F3,0 12px 0 #40484F,0 14px 0 #C3CBD1,
    0 26px 30px rgba(16,19,21,.38),0 6px 10px rgba(16,19,21,.3)}
.trim-chrome::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,rgba(255,255,255,.4),#fff 30%,#fff 70%,rgba(255,255,255,.4))}
.trim-chrome::after{content:"";position:absolute;left:0;right:0;top:44%;height:8px;
  background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.32) 10%,rgba(0,0,0,.55) 50%,rgba(0,0,0,.32) 90%,rgba(0,0,0,0));
  filter:blur(1.2px)}
/* bumperettes: two vertical chrome guards, one each side, overhanging the bar */
.divider::before,.divider::after{content:"";position:absolute;top:-10px;width:38px;height:78px;z-index:3;border-radius:12px;
  background:linear-gradient(90deg,#5E686F 0%,#C9D1D7 12%,#FFFFFF 30%,#E4E9ED 46%,#7A848C 62%,#3A4248 74%,#9AA4AB 88%,#DDE3E7 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(0,0,0,.5),0 10px 16px rgba(16,19,21,.45),0 2px 3px rgba(16,19,21,.4)}
.divider::before{left:clamp(28px,9vw,150px)}
.divider::after{right:clamp(28px,9vw,150px)}
@media (max-width:640px){.trim-chrome{height:32px}.divider::before,.divider::after{width:26px;height:56px;top:-8px;border-radius:9px}}
.ps-rule{display:flex;align-items:center;gap:clamp(12px,2.2vw,30px);padding:clamp(44px,5vw,68px) var(--gut) clamp(18px,2.6vw,38px)}
.ps-line{position:relative;flex:1 1 0;height:8px;min-width:0}
.ps-line::before,.ps-line::after{content:"";position:absolute;background:var(--stripe);border-radius:2px;transform:scaleX(0);transition:transform 1.3s cubic-bezier(.22,.68,.24,1)}
.ps-line::before{left:0;right:0;top:0;height:2.8px}
.ps-line::after{left:7%;right:0;top:5px;height:1.3px;opacity:.8;transition-delay:.12s}
.ps-line:first-child::before,.ps-line:first-child::after{transform-origin:left}
.ps-line:last-child::before,.ps-line:last-child::after{transform-origin:right}
.is-in .ps-line::before,.is-in .ps-line::after{transform:scaleX(1)}
.ps-fl{flex:0 0 auto;width:clamp(130px,15vw,230px);height:auto}
.divider:nth-of-type(even){--stripe:var(--stripe-2)}
#hood .ps-wrap,#book .ps-wrap{--stripe:var(--stripe-2)}
.divider:has(+ .t-steel),.t-steel + .divider{background:var(--steel)}
.divider:has(+ .drop){background:#fff}
.divider:has(+ #menu),#menu + .divider{background:#fff}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}.rv-d4{transition-delay:.36s}.rv-d5{transition-delay:.45s}

/* ==========================================================================
   BUILD SHEETS PAGE · one screen. The shift gate on the left picks the drink,
   the sheet on the right is sized to the viewport, so nothing scrolls.
   Six gears plus R is the seven drinks (Michael, 2026-09-05): 1 3 5 R across
   the top, 2 4 6 below, Nitrous in reverse. The knob is the only chrome on
   the page. Picking writes the slug to the hash so the plates on the home
   page still deep link. Under 900 px the gate gives way to a sticky chip row.
   ========================================================================== */
.page-sheets main{margin-top:var(--navh)}
.sheets-view{--pad:clamp(22px,3vw,44px);min-height:calc(100svh - var(--navh));padding-block:var(--pad);display:flex;align-items:center}
.sheets-grid{display:grid;grid-template-columns:minmax(300px,440px) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.sheets-side .sec-head{margin-bottom:0}
.sheets-side .ps-wrap{--stripe:var(--stripe-2);margin-bottom:clamp(8px,1vw,14px)}
.sheets-eyebrow{color:#B84A08;margin-bottom:.9em;min-height:1.2em}
.sheets-title{font-size:clamp(32px,3.2vw,46px)}
.sheets-lede{font-size:clamp(15px,1.05vw,17px);line-height:1.5;color:var(--ink-soft);margin:0 0 clamp(16px,1.8vw,24px);max-width:40ch}

/* ---------- the shift gate ---------- */
.gate-lbl{display:flex;justify-content:space-between;gap:1em;margin:0 0 4px;font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:11px;color:var(--ink-soft)}
.gate{--gx:25%;--y0:66px;--dy:46px;position:relative;height:230px;margin:0 0 clamp(12px,1.4vw,20px);user-select:none;font-size:clamp(9px,.78vw,10.5px)}
.gate-lines i{position:absolute;background:var(--ink);border-radius:4px}
.gate-lines .gl-h{left:12.5%;right:12.5%;top:calc(var(--y0) + var(--dy));height:6px;transform:translateY(-50%)}
.gate-lines .gl-v{width:6px;top:var(--y0);height:calc(2*var(--dy));left:calc((var(--c) + .5)*var(--gx));transform:translateX(-50%)}
.gate-lines .gl-v.short{height:var(--dy)}
.gear{position:absolute;z-index:2;left:calc((var(--c) + .5)*var(--gx));top:calc(var(--y0) + var(--r)*var(--dy));
  width:24%;padding:0;border:0;background:none;cursor:pointer;color:var(--ink);text-align:center;font:inherit;display:grid;justify-items:center;row-gap:5px}
.gear.top{transform:translate(-50%,calc(17px - 100%))}
.gear.bot{transform:translate(-50%,-17px)}
.gear b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;
  font-family:var(--f-display);font-weight:400;font-size:24px;line-height:1;color:rgba(21,23,26,.5);transition:color .25s}
.gear span{font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:1em;line-height:1.25;color:var(--ink-soft);transition:color .25s}
.gear:hover b,.gear:hover span,.gear[aria-selected="true"] span{color:var(--ink)}
.gear[aria-selected="true"] b{color:var(--tang)}
.gear:focus-visible{outline:none}
.gear:focus-visible b{outline:3px solid var(--blue-hot);outline-offset:3px}
.knob{position:absolute;z-index:1;width:46px;height:46px;border-radius:50%;pointer-events:none;border:5px solid transparent;
  left:calc((var(--kc) + .5)*var(--gx));top:calc(var(--y0) + var(--kr)*var(--dy));transform:translate(-50%,-50%);
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(160deg,#ffffff 0%,#d3d8dc 28%,#8d959c 58%,#454b51 82%,#2b3035 100%) border-box;
  box-shadow:0 5px 10px rgba(16,19,21,.32),0 1px 0 rgba(255,255,255,.8);
  transition:left .24s var(--ease),top .24s var(--ease)}

/* ---------- the readout for the gear you are in ---------- */
.readout{border-top:2px solid var(--ink);padding-top:clamp(12px,1.3vw,18px)}
.ro-name{margin:0;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.04em;font-size:clamp(26px,2.4vw,38px);line-height:1;display:flex;align-items:baseline;gap:.4em}
.ro-name .price{color:var(--tang)}
.ro-ing{margin:.55em 0 0;font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:12.5px;color:var(--ink)}
.ro-build{margin:.3em 0 0;font-family:var(--f-label);text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;color:var(--ink-soft)}

/* ---------- the chip row (phones and narrow tablets only) ---------- */
.sheet-picker{display:none}
.pick{display:inline-flex;align-items:baseline;gap:.4em;flex:0 0 auto;padding:.55em 1em;border:1px solid var(--steel-line);border-radius:999px;background:none;cursor:pointer;color:var(--ink);
  font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;white-space:nowrap;
  transition:border-color .25s,background-color .25s,color .25s}
.pick .price{color:var(--tang)}
.pick[aria-selected="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.pick[aria-selected="true"] .price{color:var(--tang-lift)}

.sheets-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6em 2em;margin-top:clamp(16px,1.8vw,24px);
  font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:12px}
.sheets-links a{color:var(--stripe);position:relative;padding-bottom:.3em}
.sheets-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--stripe);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.sheets-links a:hover::after{transform:scaleX(1)}

/* ---------- the stage: seven sheets stacked, one lit ---------- */
.sheet-stage{margin:0;position:relative;aspect-ratio:1600/2143;width:min(100%,calc((100svh - var(--navh) - 2*var(--pad)) * 1600 / 2143));margin-inline:auto;
  border-radius:3px;overflow:hidden;box-shadow:0 22px 50px rgba(16,19,21,.22);background:#9a9ea3}
.sheet-stage picture{display:contents}
.sheet-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease)}
.sheet-stage img.is-on{opacity:1}

@media (max-height:820px) and (min-width:901px){
  .sheets-lede{display:none}
  .gate{--y0:56px;--dy:42px;height:200px}
}
@media (max-width:900px){
  .sheets-view{display:block;min-height:0}
  .sheets-grid{grid-template-columns:1fr;gap:16px}
  .sheets-side{display:contents}
  .gate-wrap{display:none}
  .sheet-picker{position:sticky;top:var(--navh);z-index:5;display:flex;gap:8px;overflow-x:auto;
    margin-inline:calc(-1*var(--gut));padding:10px var(--gut);background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);scrollbar-width:none}
  .sheet-picker::-webkit-scrollbar{display:none}
  .readout{border-top:0;padding-top:0}
  .sheets-links{order:10}
  .sheet-stage{width:100%}
}

/* ==========================================================================
   ORDER AHEAD and BOOK THE TRUCK · forms in the house style. Numbered steps
   down the left, a sticky ticket on the right that fills in as you go. No
   backend yet: both hand off by text or email (site.js). Fields are the
   only boxes on these pages, and they hold input, never display type.
   ========================================================================== */
.page-order main,.page-book main{margin-top:var(--navh)}
.order-head,.book-head{padding-bottom:clamp(20px,2.6vw,36px)}
.flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(28px,4.5vw,72px);align-items:start}
.steps{min-width:0}
.step{margin-top:clamp(36px,4.5vw,64px)}
.step:first-child{margin-top:0}
.step-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:.3em .7em;margin:0 0 clamp(14px,1.6vw,22px);padding-bottom:.6em;border-bottom:2px solid var(--ink)}
.step-head .no{font-family:var(--f-display);font-size:clamp(22px,2vw,30px);line-height:1;color:var(--tang)}
.step-head h2{margin:0;font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(22px,2vw,30px);line-height:1}
.step-head .hint{margin-left:auto;font-family:var(--f-label);text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;color:var(--ink-soft)}

/* ---------- fields ---------- */
.fields{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.fields .wide{grid-column:1/-1}
.field{display:grid;gap:.45em;min-width:0;align-content:start}
.field>span{font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;color:var(--ink-soft)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid #B9C2C9;border-radius:5px;padding:.7em .85em;
  transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:5.5em;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--stripe);box-shadow:0 0 0 3px rgba(46,134,184,.22)}
.field.bad input,.field.bad select{border-color:#C4520F;box-shadow:0 0 0 3px rgba(242,107,29,.18)}
.check{display:flex;align-items:flex-start;gap:.7em;font-size:15.5px;line-height:1.4;cursor:pointer}
.check input{flex:0 0 auto;width:18px;height:18px;margin:.15em 0 0;accent-color:var(--tang)}
.sc-check{margin-top:clamp(14px,1.6vw,22px)}
.qty{display:inline-flex;align-items:center;border:1px solid #B9C2C9;border-radius:999px;overflow:hidden;background:#fff}
.qty button{width:40px;height:38px;border:0;background:none;font-family:var(--f-display);font-size:22px;line-height:1;color:var(--ink);cursor:pointer;transition:background-color .2s}
.qty button:hover{background:var(--steel)}
.qty output{min-width:2.2em;text-align:center;font-family:var(--f-display);font-size:20px;line-height:1}

/* ---------- order: the lineup with steppers ---------- */
.orow{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:clamp(12px,1.6vw,22px);align-items:center;padding:clamp(12px,1.4vw,18px) 0;border-bottom:var(--rule);
  transition:box-shadow .25s,padding-left .25s}
.orow img{width:78px;height:78px;border-radius:50%;box-shadow:0 6px 14px rgba(16,19,21,.22)}
.orow .nm{margin:0;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.04em;font-size:clamp(20px,1.7vw,26px);line-height:1;display:flex;align-items:baseline;gap:.4em}
.orow .nm .price{color:var(--tang)}
.orow .ing{margin:.4em 0 0;font-family:var(--f-label);text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;color:var(--ink-soft)}
.orow .sc{margin-top:.6em;display:inline-flex;align-items:center;gap:.6em;font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--ink-soft)}
.orow .sc select{font:inherit;font-family:var(--f-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:11.5px;padding:.4em .7em;border:1px solid #B9C2C9;border-radius:999px;background:#fff;color:var(--ink)}
.orow.in{box-shadow:inset 4px 0 0 var(--tang);padding-left:14px}
@media (max-width:600px){
  .orow{grid-template-columns:56px minmax(0,1fr)}
  .orow img{width:56px;height:56px}
  .orow .qty{grid-column:2;justify-self:start}
}

/* ---------- order: the stops ---------- */
.ostops{display:grid;gap:clamp(8px,1vw,14px)}
.oday{display:grid;grid-template-columns:104px minmax(0,1fr);gap:clamp(10px,1.4vw,20px);align-items:start;padding-top:12px;border-top:var(--rule)}
.oday:first-child{border-top:0;padding-top:0}
.oday .d{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(18px,1.5vw,22px);line-height:1.1;padding-top:.5em}
.oday .d small{display:block;font-family:var(--f-label);font-weight:700;letter-spacing:.12em;font-size:11px;color:var(--ink-soft);margin-top:.4em}
.oday.today .d{color:var(--tang)}
.ostop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25em 1em;width:100%;text-align:left;padding:.7em .9em;margin:0 0 8px;
  border:1px solid #B9C2C9;border-radius:6px;background:#fff;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.ostop:last-child{margin-bottom:0}
.ostop b{font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:clamp(16px,1.35vw,20px);line-height:1.1}
.ostop .w{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(14px,1.2vw,17px);color:var(--stripe);white-space:nowrap}
.ostop small{grid-column:1/-1;font-family:var(--f-label);text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;color:var(--ink-soft)}
.ostop:hover{border-color:var(--ink)}
.ostop[aria-pressed="true"]{border-color:var(--tang);box-shadow:0 0 0 3px rgba(242,107,29,.2)}
.ostop[disabled]{opacity:.45;cursor:not-allowed}
.ostop[disabled] .w{color:var(--ink-soft)}
.otime{margin-top:clamp(14px,1.6vw,22px);max-width:420px}
.onote{margin:clamp(14px,1.6vw,22px) 0 0;font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;line-height:1.6;color:var(--ink-soft)}
.onote a{color:var(--stripe);position:relative;padding-bottom:.2em}
.onote a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--stripe);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.onote a:hover::after{transform:scaleX(1)}
@media (max-width:600px){.oday{grid-template-columns:1fr;gap:6px}.oday .d{padding-top:0}}

/* ---------- the ticket ---------- */
/* The ticket opens with the same step-head as the three steps beside it, so its
   rule runs level with the rule under 01 and the two columns read as one page. */
.ticket{position:sticky;top:calc(var(--navh) + 20px)}
.tline{display:flex;justify-content:space-between;gap:1em;padding:.55em 0;border-bottom:var(--rule);font-family:var(--f-label);text-transform:uppercase;letter-spacing:.06em;font-size:14px;line-height:1.3}
.tline span:last-child{white-space:nowrap}
.tline.soft{color:var(--ink-soft)}
.ttotal{display:flex;justify-content:space-between;align-items:baseline;padding:.8em 0 .2em;font-family:var(--f-display);text-transform:uppercase;font-size:clamp(24px,2.2vw,34px);line-height:1}
.ttotal span:last-child{color:var(--tang)}
.tpick{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1em;padding:.55em 0;border-bottom:var(--rule);font-family:var(--f-label);text-transform:uppercase;letter-spacing:.06em;font-size:14px;line-height:1.3}
.tpick span:first-child{font-weight:700;color:var(--ink-soft)}
.tpick.soft span:last-child{color:var(--ink-soft)}
.tempty{margin:0;padding:.75em 0;border-bottom:var(--rule);font-family:var(--f-label);text-transform:uppercase;letter-spacing:.06em;font-size:14px;line-height:1.3;color:var(--ink-soft)}
.terr{display:none;margin:.9em 0 0;padding:.7em .9em;border-left:3px solid var(--tang);font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px;line-height:1.4;color:#B84A08}
.terr.show{display:block}
.ticket .hero-cta{margin-top:1.1em;display:grid;gap:18px;justify-items:center}
.ticket .hero-cta .btn{width:100%;justify-content:center}
/* the second way out is a line of type, not a second slab of chrome */
.tlink{display:inline-block;margin:0;padding:0 0 .3em;border:0;background:none;cursor:pointer;position:relative;
  font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:12px;line-height:1.2;color:var(--stripe)}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--stripe);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1)}
.tlink:focus-visible{outline:none}
.tnote{margin:1em 0 0;font-size:14.5px;line-height:1.45;color:var(--ink-soft)}
.req .rline{display:grid;grid-template-columns:96px minmax(0,1fr);gap:1em;padding:.55em 0;border-bottom:var(--rule);font-family:var(--f-label);text-transform:uppercase;letter-spacing:.06em;font-size:13.5px;line-height:1.35}
.req .rline span:first-child{font-weight:700;color:var(--ink-soft)}
.req .rline.soft span:last-child{color:rgba(21,23,26,.4)}

/* ---------- order: the phone bar ---------- */
.orderbar{display:none}
@media (max-width:960px){
  .flow{grid-template-columns:1fr}
  .ticket{position:static}
  .orderbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:1em;padding:10px var(--gut);
    background:rgba(13,15,17,.96);color:#fff;font-family:var(--f-display);text-transform:uppercase;font-size:18px;box-shadow:0 -10px 30px rgba(16,19,21,.3)}
  .orderbar .btn{padding:.6em 1.1em;flex:0 0 auto}
  .page-order .foot{padding-bottom:96px}
}

/* ---------- booking extras ---------- */
.book-hero{margin-top:clamp(8px,1vw,16px);border-radius:8px;overflow:hidden;box-shadow:0 26px 60px rgba(21,23,26,.22)}
.book-hero img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;object-position:50% 45%}
.hows{display:grid;gap:clamp(16px,2.4vw,36px);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));margin-top:clamp(28px,3.4vw,48px)}
.how .n{display:block;font-family:var(--f-display);font-size:clamp(34px,3.4vw,52px);line-height:1;color:var(--tang)}
.how b{display:block;margin:.35em 0 .3em;font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(20px,1.7vw,26px);line-height:1.05}
.how p{margin:0;font-size:15.5px;line-height:1.45;color:var(--ink-soft)}
.opts{display:grid;gap:10px}
.opt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2em .8em;align-items:start;padding:.85em 1em;border:1px solid #B9C2C9;border-radius:6px;transition:border-color .2s,box-shadow .2s}
.opt input{margin:.35em 0 0;accent-color:var(--tang)}
.opt label{display:grid;cursor:pointer}
.opt b{font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(17px,1.4vw,21px);line-height:1.1}
.opt span{font-family:var(--f-label);text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;color:var(--ink-soft);margin-top:.3em}
.opt:has(input:checked){border-color:var(--tang);box-shadow:0 0 0 3px rgba(242,107,29,.2)}
.opt-more{grid-column:2;display:none;margin-top:.6em}
.opt:has(input:checked) .opt-more{display:block}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:.5em;padding:.5em .9em;border:1px solid #B9C2C9;border-radius:999px;cursor:pointer;background:#fff;color:var(--ink);
  font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:12px;transition:border-color .2s,background-color .2s,color .2s}
.chip input{accent-color:var(--tang);margin:0}
.chip:has(input:checked){border-color:var(--ink);background:var(--ink);color:#fff}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .gauge-svg .needle{transform:none}
  .ps{stroke-dashoffset:0}.ps-drop{opacity:1}
  .ps-line::before,.ps-line::after{transform:scaleX(1)}
}