/* ============================================================
   PRIME TACOS — styles.css
   Tokens, header scroll behaviour, the five animations,
   and every page layout. Plain CSS, no build step.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root{
  --red:    #D1342B;
  --black:  #141110;
  --bone:   #FBF4E6;
  --yellow: #FFD23F;
  --panel:  #1E1917;

  --muted:  #BDB3A7;   /* body copy on dark, ~7:1 */
  --faint:  #98908a;   /* meta on dark, >=4.5:1   */
  --ink-muted: #5C554E;/* body copy on bone       */
  --line:   rgba(251,244,230,.10);
  --line-strong: rgba(251,244,230,.16);

  --gut: 44px;

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Baloo 2", "Trebuchet MS", sans-serif;
  --slab: "Alfa Slab One", var(--display);

  --ease-out: cubic-bezier(.22,1,.36,1);
}
@media (max-width: 767px){
  :root{ --gut: 18px; }
}

/* ------------------------------------------------------------
   2. RESET + BASE
   ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-padding-top: 160px;
  -webkit-text-size-adjust: 100%;
}
body{
  margin:0;
  background: var(--black);          /* footer is the last pixel — no white below, ever */
  color: var(--bone);
  font-family: var(--body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}
main{ flex: 1 0 auto; }
.site-footer{ flex-shrink: 0; }

img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 1em; }
address{ font-style: normal; }
button{ font: inherit; color: inherit; background:none; border:0; padding:0; cursor:pointer; }

h1,h2,h3,.display{
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: .015em;
  margin: 0 0 .35em;
}
h1{ font-size: clamp(44px, 6.4vw, 84px); }
h2{ font-size: clamp(34px, 4.4vw, 58px); }
h3{ font-size: clamp(22px, 2.2vw, 28px); }

.container{
  width:100%;
  max-width:1360px;
  margin-inline:auto;
  padding-inline: var(--gut);
}
.container--narrow{ max-width:1028px; } /* 940px of content inside the gutters */

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  background: var(--yellow); color: var(--black);
  font-weight:800; padding:12px 20px; border-radius:0 0 6px 6px;
  text-decoration:none; transition: top .2s;
}
.skip-link:focus{ top:0; }

:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; }
.sec-bone :focus-visible,
.btn-yellow:focus-visible{ outline-color: var(--red); }
.sec-red :focus-visible{ outline-color: var(--black); }

/* The nav, the buttons and every heading moved to Big Shoulders; this was
   the last uppercase UI type still set in the rounded body face, and a
   rounded sans at 12.5px with .16em of tracking is the stock label recipe.
   Condensed lets it run larger at the same optical width, so it reads as
   signage rather than fine print. */
.eyebrow{
  font-family: var(--display);
  font-weight:800;
  font-size:16px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--yellow);
  margin:0 0 13px;
}
.eyebrow--red{ color: var(--red); }
.eyebrow--white{ color:#fff; }
.eyebrow--muted{ color: var(--faint); }
.sec-bone .eyebrow--muted{ color:#8a8178; }

.confirm{ white-space:nowrap; }

/* ------------------------------------------------------------
   3. BUTTONS
   ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding: 4px 28px 0;   /* top nudge optically centres Big Shoulders */
  font-family: var(--display);
  font-weight:800; font-size:18px;
  letter-spacing:.05em; text-transform:uppercase;
  text-decoration:none; border-radius:4px; border:0;
  cursor:pointer; white-space:nowrap;
}
.btn-yellow{ background:var(--yellow); color:var(--black); }
.btn-red{ background:var(--red); color:#fff; }
.btn-bone{ background:var(--bone); color:var(--black); }
.btn-outline{ background:transparent; border:2px solid var(--bone); color:var(--bone); }
.btn-outline-yellow{ background:transparent; border:2px solid var(--yellow); color:var(--yellow); }
.btn-outline-dark{ background:transparent; border:2px solid var(--black); color:var(--black); }
.btn:hover{ filter:brightness(1.07); }
.btn:active{ transform:translateY(1px); }

/* yellow button light sweep (home hero) */
.btn-sweep{ position:relative; overflow:hidden; isolation:isolate; }
.btn-sweep::after{
  content:""; position:absolute; inset:0; z-index:-0;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.65) 50%, transparent 68%);
  transform:translateX(-130%);
  animation: sweep 3.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sweep{
  0%   { transform:translateX(-130%); }
  55%  { transform:translateX(130%); }
  100% { transform:translateX(130%); }
}

.text-link{
  font-weight:800; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--red); text-decoration:none;
}
.text-link:hover{ text-decoration:underline; }
.text-link--yellow{ color: var(--yellow); }


/* ------------------------------------------------------------
   4. HEADER — transparent over hero, solid on scroll.
   Scroll-driven animation across the first 150px; JS adds a
   .scrolled fallback class only when the timeline is missing.
   ------------------------------------------------------------ */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:100;
  background:transparent;
  border-bottom:3px solid rgba(255,210,63,0);
  box-shadow:0 10px 26px rgba(0,0,0,0);
}
.utility-bar{
  background:var(--red); color:#fff;
  height:34px; overflow:hidden;
}
.utility-inner{
  height:34px; display:flex; align-items:center; justify-content:space-between;
  font-weight:800; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
}
.utility-inner a{ text-decoration:none; }
.utility-inner a:hover{ text-decoration:underline; }
.header-main{ height:104px; }
.header-inner{
  height:100%; display:flex; align-items:center; gap:28px;
}
.logo{ flex:none; display:block; }
.logo img{ width:220px; height:auto; flex:none; }
.main-nav{ flex:1; display:flex; justify-content:center; }
.nav-list{ display:flex; align-items:center; gap:34px; }
.nav-list > li{ position:relative; }
/* Big Shoulders here so the nav matches the buttons and headings
   rather than sitting in the body face on its own */
.nav-list a, .sub-toggle{
  font-family:var(--display);
  font-weight:800; font-size:18px; letter-spacing:.05em; text-transform:uppercase;
  color:#fff; text-decoration:none;
  display:inline-flex; align-items:center; gap:7px; padding:8px 0;
}
.nav-list a:hover, .sub-toggle:hover{ color:var(--yellow); }
.nav-list a[aria-current="page"], .sub-toggle.active{ color:var(--yellow); }
.caret{ width:10px; height:7px; fill:currentColor; }
.sub-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  min-width:230px; padding:10px 0;
  background:var(--panel); border:1px solid var(--line-strong); border-radius:8px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; translate:0 8px;
  transition: opacity .18s, visibility .18s, translate .18s;
}
.has-sub:hover .sub-menu,
.has-sub:focus-within .sub-menu,
.has-sub.open .sub-menu{ opacity:1; visibility:visible; translate:0 0; }
.sub-menu a{ display:block; padding:10px 22px; font-size:16px; }
.sub-menu a:hover{ background:rgba(255,210,63,.08); }
.order-pill{
  flex:none; min-height:46px; border-radius:999px; font-size:16px;
  background:var(--red); color:#fff; padding-top:3px;
}
.pill-bag, .pill-now{ display:none; }
.burger{ display:none; }

/* scroll-driven header (no JS) */
@supports (animation-timeline: scroll()){
  .site-header, .utility-bar, .header-main, .logo img{
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root);
    animation-range: 0px 150px;
  }
  .site-header{ animation-name: hdr-shell; }
  .utility-bar{ animation-name: hdr-util; }
  .header-main{ animation-name: hdr-row; }
  .logo img{ animation-name: hdr-logo; }
}
@keyframes hdr-shell{
  from{ background:rgba(20,17,16,0); box-shadow:0 10px 26px rgba(0,0,0,0); border-bottom:3px solid rgba(255,210,63,0); }
  to  { background:#141110;          box-shadow:0 10px 26px rgba(0,0,0,.5); border-bottom:2px solid #FFD23F; }
}
@keyframes hdr-util{ from{ height:34px; opacity:1; } to{ height:0; opacity:0; } }
@keyframes hdr-row{ from{ height:104px; } to{ height:62px; } }
@keyframes hdr-logo{ from{ width:220px; } to{ width:118px; } }

/* JS fallback: html.no-stl gets transitions + .scrolled end state */
html.no-stl .site-header{ transition: background .25s, box-shadow .25s, border-color .25s, border-width .25s; }
html.no-stl .utility-bar{ transition: height .25s, opacity .25s; }
html.no-stl .header-main{ transition: height .25s; }
html.no-stl .logo img{ transition: width .25s; }
html.no-stl.scrolled .site-header{
  background:#141110; box-shadow:0 10px 26px rgba(0,0,0,.5);
  border-bottom:2px solid var(--yellow);
}
html.no-stl.scrolled .utility-bar{ height:0; opacity:0; }
html.no-stl.scrolled .header-main{ height:62px; }
html.no-stl.scrolled .logo img{ width:118px; }

/* ------------------------------------------------------------
   5. MOBILE HEADER + DRAWER
   ------------------------------------------------------------ */
@media (max-width: 1099px){
  .utility-bar{ display:none; }
  /* Same reason as the logo below: the scroll-driven animation outranks a
     plain height, and 104px of header is a lot of a phone screen. One
     constant bar instead. */
  .header-main{ height:72px; animation-name:none; }
  html.no-stl.scrolled .header-main{ height:72px; }

  /* Burger left, logo on the centre line, order right. 1fr auto 1fr keeps
     the logo truly centred however wide the two side items end up. */
  html.js .header-inner{
    display:grid; grid-template-columns:1fr auto 1fr;
    gap:10px; align-items:center;
  }
  /* grid-row:1 on all three: the burger is last in the markup, so with an
     auto row the placement cursor had already passed column 1 and dropped
     it onto a second row under the logo. */
  html.js .burger{ grid-column:1; grid-row:1; justify-self:start; margin-left:0; }
  html.js .logo{ grid-column:2; grid-row:1; justify-self:center; }
  html.js .order-pill{ grid-column:3; grid-row:1; justify-self:end; }

  /* A CSS animation outranks a normal declaration, so the only way to size
     the logo here is to drop the scroll-driven one. It is already small
     enough that shrinking it again on scroll bought nothing. */
  .logo img{ width:128px; animation-name:none; }
  html.no-stl.scrolled .logo img{ width:128px; }

  /* On a phone the order action is an icon with its label under it, not a
     pill - it has to sit at the end of the bar as light as the menu button
     at the other end, or the header reads lopsided. */
  .order-pill{
    display:inline-flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border-radius:0; color:#fff;
    min-height:0; padding:0; font-size:10.5px; letter-spacing:.09em;
    line-height:1; white-space:nowrap;
    filter:drop-shadow(0 2px 7px rgba(10,8,7,.75));
  }
  .order-pill:hover{ filter:drop-shadow(0 2px 7px rgba(10,8,7,.75)); color:var(--yellow); }
  .pill-bag{ display:block; width:25px; height:27px; }
  .pill-now{ display:inline; }
  .pill-rest{ display:none; }

  /* The header is transparent over the hero, so this used to carry its own
     chip to stop it reading as a stray mark. Now the order action at the
     other end is a bare icon too, and a chip on one side only looked
     lopsided - both ends are bare marks held off the photo by one shadow. */
  .burger{
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:6px;
    width:34px; height:30px; margin-left:auto; padding:0;
    z-index:130; position:relative;
    background:none; border:0;
    filter:drop-shadow(0 2px 7px rgba(10,8,7,.8));
    transition:opacity .2s;
  }
  .burger:hover{ opacity:.78; }
  .burger span{
    display:block; height:3px; width:100%; background:#fff; border-radius:2px;
    transition: transform .25s, opacity .2s;
  }
  html.drawer-open .burger span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
  html.drawer-open .burger span:nth-child(2){ opacity:0; }
  html.drawer-open .burger span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

  /* With JS: the nav becomes a right-hand drawer */
  html.js .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(320px, 86vw);
    background:var(--panel); border-left:1px solid var(--line-strong);
    padding:110px 30px 40px; z-index:120;
    display:block; overflow-y:auto;
    transform:translateX(100%); visibility:hidden;
    transition: transform .3s var(--ease-out), visibility .3s;
  }
  html.js.drawer-open .main-nav{ transform:translateX(0); visibility:visible; }
  html.js .nav-list{ display:block; }
  html.js .nav-list > li{ border-bottom:1px solid var(--line); }
  html.js .nav-list a, html.js .sub-toggle{
    display:block; padding:16px 0; font-size:17px;
  }
  html.js .has-sub > .sub-toggle{ display:none; }   /* drawer shows the two links directly */
  html.js .sub-menu{
    position:static; transform:none; translate:0 0; opacity:1; visibility:visible;
    background:transparent; border:0; box-shadow:none; padding:0 0 6px;
  }
  html.js .sub-menu a{ padding:12px 0 12px 16px; font-size:15px; color:var(--muted); }
  html.js .drawer-order{ margin-top:26px; width:100%; }
  html.js .drawer-backdrop{
    position:fixed; inset:0; z-index:110; background:rgba(0,0,0,.55);
    opacity:0; visibility:hidden; transition: opacity .3s, visibility .3s;
  }
  html.js.drawer-open .drawer-backdrop{ opacity:1; visibility:visible; }
  html.js.drawer-open body{ overflow:hidden; }
  /* the fixed header is its own stacking context at z 100, which would put
     the backdrop (110) over the drawer and swallow every tap — lift the
     whole header above the backdrop while the drawer is open */
  html.js.drawer-open .site-header{ z-index:140; }

  /* Without JS: plain wrapping nav row, everything reachable */
  html:not(.js) .header-main{ height:auto; padding:10px 0; }
  html:not(.js) .header-inner{ flex-wrap:wrap; }
  html:not(.js) .nav-list{ flex-wrap:wrap; gap:14px 20px; }
  html:not(.js) .burger{ display:none; }
}
@media (min-width: 1100px){
  .drawer-order{ display:none; }
  .drawer-backdrop{ display:none; }
}

/* ------------------------------------------------------------
   6. SECTIONS / SHARED BANDS
   ------------------------------------------------------------ */
.sec{ padding-block: clamp(64px, 8vw, 104px); }
.sec-bone{ background:var(--bone); color:var(--black); }
.sec-bone .eyebrow{ color:var(--red); }
.sec-red{ background:var(--red); color:#fff; }
.sec-panel{ background:var(--panel); }
.muted{ color:var(--muted); }
.sec-bone .muted{ color:var(--ink-muted); }

.page-banner{
  padding-top: clamp(130px, 16vw, 206px);
  padding-bottom: clamp(44px, 5vw, 72px);
}
.page-banner .lede{
  max-width:620px; font-size:17px; margin:18px 0 0;
}
.banner-red{ background:var(--red); color:#fff; }
.banner-dark{ background:var(--black); }
.banner-dark .lede{ color:var(--muted); }

.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:28px; flex-wrap:wrap; margin-bottom:40px;
}
.sec-head h2{ margin:0; }
.sec-head > div{ min-width:0; }

/* dashed placeholder frames */
.ph-frame{
  border:2px dashed rgba(251,244,230,.28);
  border-radius:14px;
  background:var(--panel);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; padding:28px;
  color:var(--faint);
}
.ph-frame .ph-title{
  font-family:var(--display); font-weight:800; font-size:21px;
  letter-spacing:.08em; text-transform:uppercase; color:#8f8276; margin:0;
}
.ph-frame .ph-meta{
  font-weight:800; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#6e675f; margin:0;
}
.play-dot{
  width:72px; height:72px; border-radius:50%; background:var(--red);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.play-dot::after{
  content:""; display:block; margin-left:5px;
  border-style:solid; border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent #fff;
}

/* ------------------------------------------------------------
   7. ANIMATION 1 + 2 — LOGO MARQUEES
   translateX(-50%) -> 0 reads as rightward drift. Two identical
   groups back-to-back make the loop seamless.
   ------------------------------------------------------------ */
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track{
  display:flex; width:max-content;
  transform:translateX(-50%);
  animation: marquee-right 42s linear infinite;
}
.marquee--festivals .marquee-track{ animation-duration: 54s; }
@keyframes marquee-right{
  from{ transform:translateX(-50%); }
  to  { transform:translateX(0); }
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{ animation-play-state:paused; }
.marquee-group{
  display:flex; align-items:center;
  gap: clamp(56px, 7vw, 104px);
  padding-inline: clamp(28px, 3.5vw, 52px);
}
/* every logo is sized by optical area, never a shared box */
.marquee-group img{ width:auto; flex:none; }
.logo-abc7{ height:60px; }
.logo-wgntv{ height:38px; }
.logo-nbc5{ height:55px; }
.logo-wgnradio{ height:35px; }
.logo-dvnews{ height:32px; }
.logo-taste{ height:24px; }
.logo-lolla{ height:36px; }
.logo-lakeview{ height:92px; }
.logo-tyt{ height:57px; }
.logo-suenos{ height:44px; }  /* heavy solid wordmark — reads dense */
.logo-nc{ height:56px; }      /* solid disc — equal pixel area would look oversized */
.logo-smash{ height:66px; }   /* detailed sun lockup — needs size to stay legible */
@media (max-width: 767px){
  .logo-abc7{ height:46px; } .logo-wgntv{ height:30px; } .logo-nbc5{ height:42px; }
  .logo-wgnradio{ height:27px; } .logo-dvnews{ height:25px; }
  .logo-lakeview{ height:70px; } .logo-tyt{ height:44px; }
  .logo-suenos{ height:34px; } .logo-nc{ height:44px; } .logo-smash{ height:52px; }
}

.press-band{ padding-block:36px 42px; }
.press-band .eyebrow{ margin-bottom:24px; }

/* ------------------------------------------------------------
   8. ANIMATION 3 — FOLLOWER COUNT-UP
   CSS @property + view() preferred; .cnt-fallback carries the
   literal number so a real visitor never sees 0 or a blank.
   ------------------------------------------------------------ */
.stat-num{
  font-family:var(--display); font-weight:900; font-size:clamp(64px, 8vw, 104px);
  line-height:.9; letter-spacing:.015em; color:#fff; margin:0;
  font-variant-numeric: tabular-nums;
}
/* The count itself is JS-driven (IntersectionObserver + rAF in main.js):
   it plays once as a timed 1.8s count the moment the number is fully in
   view, instead of scrubbing with the scroll position. The literal number
   lives in the markup, so with no JS it simply reads 150K+ / 61K+. */

/* ------------------------------------------------------------
   10. ANIMATION 5 — FLAME ON "HOT" + hero entrance
   ------------------------------------------------------------ */
.hero{
  position:relative; display:flex; align-items:center;
  /* tracks the 2720x1400 frame's own ratio so wide screens see the full
     composition and the red band never rides up over the burger */
  min-height: clamp(620px, 51vw, 100vh);
  min-height: clamp(620px, 51vw, 100svh);
  overflow:hidden;
}
.hero-bg, .hero-bg img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(10,8,7,.62) 0%, rgba(10,8,7,.28) 42%, rgba(10,8,7,0) 62%);
}
.hero-content{ position:relative; z-index:2; padding-block:120px 70px; }
/* One slab of type: every word the same size, set big and stacked tight so
   the block itself is the composition. No kicker line, no rule, no label -
   the three-step rag and the leading do the work. */
.hero h1{
  color:#fff; margin-bottom:34px;
  font-size:clamp(40px, 6.2vw, 104px);
  line-height:.84;
  /* display faces set loose this large; pulling it in is most of the
     difference between a headline and a default */
  letter-spacing:-.015em;
}
.hero .hl{ display:block; }
/* Four groups in the markup so a phone can break the name over two lines.
   Wide, the last two run together: HOME OF / THE FAMOUS / HOT CHEETO BURGER. */
.hero .hl:nth-child(3), .hero .hl:nth-child(4){ display:inline; }

/* word-by-word rise out of a clipped line — visible by default,
   JS (html.anim) opts the animation in. */
/* the clip exists only while the entrance runs — html.anim-done releases it
   so the ember glow and flame are never boxed in afterwards; the headroom
   padding (cancelled by negative margins) keeps ascenders unclipped mid-rise */
.w{ display:inline-block; vertical-align:bottom; }
html.anim:not(.anim-done) .w{
  overflow:hidden;
  padding:.45em .3em 0; margin:-.45em -.3em 0;
}
.wi{ display:inline-block; }
html.anim .hero .wi{
  opacity:0; transform:translateY(106%);
  animation: word-rise .62s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes word-rise{
  to{ opacity:1; transform:translateY(0); }
}
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
html.anim .hero-ctas{
  opacity:0; transform:translateY(16px);
  animation: fade-up .6s var(--ease-out) forwards;
  animation-delay:.86s;
}
@keyframes fade-up{ to{ opacity:1; transform:translateY(0); } }

/* HOT stays brand red, no ember or flame — animation removed by request */
.hot{ color:var(--red); }

@media (max-width: 767px){
  /* The hero is a fixed height with its content pinned to the bottom, so
     trimming the padding only slid the headline down - the empty griddle
     under it comes off the height itself. */
  .hero{ align-items:flex-end; min-height: 80svh; }
  /* on very short phones there is no room for header + burger + headline,
     so the type can land on the burger — this keeps it readable there and
     is invisible where the headline sits on the dark griddle */
  .hero h1{ text-shadow:0 2px 18px rgba(10,8,7,.8); }
  /* Dark at both ends: the bar at the top and the headline at the bottom
     both sit on the photo, and a shorter hero brings the bun up under the
     wordmark. Lightest through the middle so the burger keeps its colour. */
  .hero::before{
    background:linear-gradient(180deg,
      rgba(10,8,7,.68) 0%, rgba(10,8,7,.14) 17%,
      rgba(10,8,7,.5) 54%, rgba(10,8,7,.88) 74%, rgba(10,8,7,.94) 100%);
  }
  .hero-content{ padding-block:0 96px; }
}
.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* ------------------------------------------------------------
   11. HOME — sections
   ------------------------------------------------------------ */
.menu-cards{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:30px;
}
.menu-card{ display:block; text-decoration:none; color:inherit; }
.menu-card img{
  width:100%; aspect-ratio:1/1.06; object-fit:cover; border-radius:10px;
}
.menu-card h3{ margin:22px 0 10px; font-size:24px; font-weight:800; }
.menu-card p{ color:var(--ink-muted); font-size:15px; margin-bottom:14px; min-height:3.2em; }
.menu-card .text-link::after{ content:" \2192"; }
.menu-card:hover h3{ color:var(--red); }

.about-block{
  display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center;
}
.about-block figure{ margin:0; }
/* the owners shot is a 4:5 portrait — show it at its own ratio so no faces crop */
.about-block img{ border-radius:12px; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top; }
.pull-quote{
  border-left:4px solid var(--red);
  padding:4px 0 4px 24px; margin:28px 0 30px;
}
.pull-quote p{
  font-family:var(--display); font-weight:800; font-size:clamp(22px,2.2vw,30px);
  line-height:1.05; letter-spacing:.01em; margin:0 0 6px; color:#fff;
  text-transform:none;
}
.pull-quote cite{ font-style:normal; font-size:13px; color:var(--faint); font-weight:700; }

.press-rows{ border-top:1px solid var(--line); }
.press-row{
  display:flex; align-items:center; gap:30px;
  padding:24px 0; border-bottom:1px solid var(--line);
  text-decoration:none;
}
.press-row .pr-logo{ flex:none; width:118px; display:flex; }
.press-row .pr-logo img{ width:auto; max-width:118px; }
.pr-logo .logo-wgntv{ height:30px; } .pr-logo .logo-nbc5{ height:40px; }
.pr-logo .logo-abc7{ height:44px; } .pr-logo .logo-wgnradio{ height:27px; }
.pr-logo .logo-dvnews{ height:26px; }
.pr-logo .pr-text{
  font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:.04em;
  text-transform:uppercase; color:#fff; line-height:1;
}
.press-row h3, .press-row .pr-title{
  font-family:var(--display); font-weight:800; font-size:clamp(19px,1.8vw,24px);
  letter-spacing:.03em; text-transform:uppercase; margin:0; color:var(--bone); flex:1;
  min-width:0;
}
.press-row .pr-meta{
  display:block; font-family:var(--body); font-weight:800; font-size:11.5px;
  letter-spacing:.14em; color:var(--faint); margin-top:7px;
}
.press-row .pr-cta{
  flex:none; font-weight:800; font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--yellow);
}
.press-row .pr-cta::after{ content:" \2192"; }
.press-row:hover .pr-title, .press-row:hover h3{ color:#fff; }
.press-row:hover .pr-cta{ text-decoration:underline; }

.truck-block{
  display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center;
}
.truck-block img{ border-radius:12px; width:100%; aspect-ratio:16/9; object-fit:cover; }
.truck-block .btns{ display:flex; gap:16px; flex-wrap:wrap; margin-top:30px; }

/* ---- Social: copy on the left, a phone running stories on the right ----
   The bone slab is anchored to the phone, not the viewport, so the
   red/bone seam always falls at the same point across the handset no
   matter how wide the window gets. */
.social-sec{ --sec-pad: clamp(64px, 8vw, 104px); position:relative; overflow-x:clip; }
.social-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(30px, 4.6vw, 72px); align-items:center;
}
.social-copy{ min-width:0; }

.stats{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(18px, 2.6vw, 40px);
  padding-bottom:clamp(22px, 2.8vw, 32px);
  border-bottom:1px solid rgba(255,255,255,.24);
}
.social-copy .stat-num{ font-size:clamp(40px, 4.4vw, 74px); }
.stat-label{
  font-family:var(--display); font-weight:800; font-size:14px; letter-spacing:.06em;
  text-transform:uppercase; margin:9px 0 0; color:#fff;
}
.social-lead{ margin:clamp(22px, 2.8vw, 32px) 0 0; }
.social-lead p{ font-size:17px; margin:0 0 24px; max-width:46ch; }
.social-lead .btns{ display:flex; gap:14px; flex-wrap:wrap; }

/* the bone half, bleeding off the right edge of the window */
.social-phone{ position:relative; display:flex; justify-content:flex-end; }
.social-phone::before{
  content:""; position:absolute; z-index:0;
  left:14%; right:-100vw;
  top:calc(-1 * var(--sec-pad)); bottom:calc(-1 * var(--sec-pad));
  background:var(--bone);
}

/* ---- The handset ----
   Every inset below is measured off Images/social/iphone-frame.png
   (692x1382, screen cut-out 612x1317 at 40,32). --u is one percent of
   the phone width, so the whole UI scales with the frame. */
.iph{
  --pw: clamp(282px, 28.5vw, 404px);
  --u: calc(var(--pw) / 100);
  --fs-s: clamp(9.5px, calc(var(--u) * 2.9), 12px);
  --fs-m: clamp(11px, calc(var(--u) * 3.5), 15px);
  position:relative; z-index:1;
  width:var(--pw); aspect-ratio:692 / 1382;
}
.iph-frame{
  position:absolute; inset:0; z-index:3; display:block; pointer-events:none;
  filter:drop-shadow(0 28px 48px rgba(0,0,0,.42));
}
.iph-frame img{ width:100%; height:100%; display:block; }
.iph-screen{
  position:absolute; z-index:1; overflow:hidden;
  left:5.78%; right:5.78%; top:2.32%; bottom:2.39%;
  border-radius:11.44% / 5.32%;
  background:#0B0908;
}

/* ---- Story reel ----
   Markup ships one stack of slides. main.js adds the progress bars, the
   tap zones, the caption slot and the sound toggle; without it the first
   story simply stands still with its own caption and link. */
.st{ position:absolute; inset:0; }
/* scrims that keep white chrome legible over any still */
.st::before, .st::after{
  content:""; position:absolute; left:0; right:0; z-index:2; pointer-events:none;
}
.st::before{ top:0; height:26%; background:linear-gradient(rgba(8,6,5,.62), transparent); }
.st::after{ bottom:0; height:46%; background:linear-gradient(transparent, rgba(8,6,5,.88)); }

.st-stage{ position:absolute; inset:0; }
.st-slide{
  position:absolute; inset:0; margin:0;
  opacity:0; visibility:hidden;
  transition:opacity .42s var(--ease-out), visibility 0s linear .42s;
}
.st .st-slide:first-child{ opacity:1; visibility:visible; }   /* no-JS: story 1 */
.st--js .st-slide{ opacity:0; visibility:hidden; }
.st--js .st-slide[data-on]{
  opacity:1; visibility:visible; transition-delay:0s, 0s;
}
.st-media, .st-media img, .st-vid{
  position:absolute; inset:0; display:block;
  width:100%; height:100%; object-fit:cover;
}
/* A 9:16 reel is wider than this 1:2.15 screen. Rather than crop 17% off the
   sides, the clip is fitted by width and the blurred band baked into its
   poster shows above and below — which is what Instagram does. */
.st-vid{ object-fit:contain; background:transparent; }
.st-media img{ transform:scale(1.04); transition:transform 7s linear; }
.st--js .st-slide[data-on] .st-media img{ transform:scale(1); }  /* slow settle */
/* a clip's own motion is the motion — do not drift its poster underneath it */
.st-slide[data-video] .st-media img{ transform:none; transition:none; }
.st-vid{ opacity:0; transition:opacity .4s var(--ease-out); background:#0B0908; }
.st-slide[data-ready] .st-vid{ opacity:1; }

/* chip marking a slot the client still has to fill */
.st-chip{
  position:absolute; z-index:4; top:14%; left:calc(var(--u) * 5);
  font-family:var(--body); font-weight:800; font-size:var(--fs-s);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--black); background:var(--yellow);
  padding:calc(var(--u) * 1.1) calc(var(--u) * 2.6);
  border-radius:3px;
}

/* progress bars, clear of the notch */
.st-bars{
  position:absolute; z-index:5; top:4.9%; left:4.6%; right:4.6%;
  display:flex; gap:calc(var(--u) * .9); pointer-events:none;
}
.st-bar{
  flex:1 1 0; height:2.5px; border-radius:2px; overflow:hidden;
  background:rgba(255,255,255,.34);
}
.st-bar-fill{
  display:block; height:100%; border-radius:inherit; background:#fff;
  transform:scaleX(var(--p, 0)); transform-origin:left center;
  will-change:transform;
}

/* Instagram sets the handle row in the platform UI font, not a webfont.
   It lives on .st-head so every part of the row inherits the same face and
   size — the collab name included. */
.st-head{
  position:absolute; z-index:5; top:7.3%; left:4.6%; right:4.6%;
  display:flex; align-items:center; gap:calc(var(--u) * 2.4);
  pointer-events:none;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  font-size:var(--fs-s); letter-spacing:0; line-height:1.2;
}
/* a collab post shows both accounts, second avatar tucked under the first */
/* these carry display:block/flex, which outranks the UA rule for [hidden] */
.st-head [hidden]{ display:none !important; }
.st-faces{ flex:none; display:flex; align-items:center; }
.st-faces .st-ring--b{ margin-left:calc(var(--u) * -3.1); }
.st-row{ display:flex; align-items:center; gap:calc(var(--u) * 1.6); min-width:0; }
.st-ring{
  flex:none; display:block; border-radius:50%;
  width:calc(var(--u) * 8.6); height:calc(var(--u) * 8.6);
  padding:1.5px; background:linear-gradient(45deg, #FFD23F, #D1342B 55%, #8A2BE2);
}
.st-ring--b{ box-shadow:0 0 0 1.5px rgba(12,10,9,.85); }
.st-ring--b img{ object-fit:cover; padding:0; background:none; }
/* the client's own profile picture: the red wordmark on white, inset so the
   ends of PRIME TACOS clear the circle */
.st-ring img{
  width:100%; height:100%; border-radius:50%; display:block;
  background:#fff; object-fit:contain; padding:0 11%;
}
.st-who{ font-weight:600; color:#fff; }
.st-tick{
  flex:none; display:block; margin-left:calc(var(--u) * -1.1);
  width:calc(var(--u) * 3.2); height:calc(var(--u) * 3.2);
  min-width:11px; min-height:11px;
}
.st-with{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:400; color:rgba(255,255,255,.82);
}
.st-with b{ font-weight:600; color:#fff; }
.st-ago{ flex:none; font-weight:400; color:rgba(255,255,255,.72); }
.st-sound{
  margin-left:auto; pointer-events:auto; flex:none;
  width:calc(var(--u) * 8); height:calc(var(--u) * 8); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(12,10,9,.46); color:#fff;
  transition:background .2s, opacity .25s;
}
.st-sound svg{ width:52%; height:52%; fill:currentColor; display:block; }
.st-sound .ico-on{ display:none; }
.st-sound.is-on .ico-on{ display:block; }
.st-sound.is-on .ico-off{ display:none; }
.st-sound:hover{ background:rgba(12,10,9,.78); }
.st:not([data-vid]) .st-sound{ opacity:0; pointer-events:none; }

/* caption + link live above the tap zones so the link stays clickable */
.st-foot{
  position:absolute; z-index:5; left:5.4%; right:5.4%; bottom:5.2%;
  pointer-events:none;
}
.st-foot p{
  margin:0 0 calc(var(--u) * 3.2);
  font-size:var(--fs-m); line-height:1.32; font-weight:400; color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
  overscroll-behavior:contain;
}
/* expanded, a long caption scrolls inside the screen instead of growing
   past the handset */
.st-foot[data-open] p{
  max-height:calc(var(--u) * 78); overflow-y:auto; scrollbar-width:none;
}
.st-foot[data-open] p::-webkit-scrollbar{ display:none; }
/* the "more" / "less" toggle, inline at the end of the caption */
.st-more{
  pointer-events:auto; color:rgba(255,255,255,.72); font:inherit;
  font-weight:600; padding:0; margin-left:.35em;
}
.st-more:hover{ color:#fff; }
.st-link{
  pointer-events:auto; display:inline-block; text-decoration:none;
  font-family:var(--display); font-weight:800; font-size:var(--fs-s);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--black); background:#fff; border-radius:999px;
  padding:calc(var(--u) * 2) calc(var(--u) * 4.4);
  transition:background .2s, color .2s, transform .2s var(--ease-out);
}
.st-link:hover{ background:var(--yellow); transform:translateY(-1px); }
/* no-JS: the caption sits in the slide itself */
.st-cap{
  position:absolute; z-index:4; left:5.4%; right:5.4%; bottom:5.2%;
}
.st-cap p{
  margin:0 0 calc(var(--u) * 3.2);
  font-size:var(--fs-m); line-height:1.32; font-weight:400; color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
  /* no JS means no "more" toggle, so clamp it here instead of letting a
     300-character caption run off the handset */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4;
  overflow:hidden;
}
.st--js .st-cap{ display:none; }

/* tap zones: right two thirds forward, left third back, hold to pause */
.st-zone{
  position:absolute; z-index:3; top:0; bottom:0;
  background:transparent; border:0; -webkit-tap-highlight-color:transparent;
}
.st-zone--prev{ left:0; width:34%; cursor:w-resize; }
.st-zone--next{ right:0; width:66%; cursor:e-resize; }
/* while held, the chrome steps back the way Instagram does */
.st-bars, .st-head, .st-foot{ transition:opacity .22s var(--ease-out); }
.st.is-held .st-bars,
.st.is-held .st-head,
.st.is-held .st-foot{ opacity:0; }
.st.is-held::before, .st.is-held::after{ opacity:.25; transition:opacity .22s; }
.post-tiles{
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
}
.post-tile{
  display:block; border-radius:10px; overflow:hidden; text-decoration:none;
  background:var(--black);
}
.post-tile img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.post-tile .pt-bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px;
}
.post-tile .pt-handle{ font-weight:700; font-size:13.5px; color:var(--bone); }
.post-tile .pt-view{
  font-weight:800; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--yellow);
}
.post-tile:hover .pt-view{ text-decoration:underline; }

.findus{
  display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center;
}
.findus h2{ font-size:clamp(40px,4.6vw,64px); }
.findus .hours{ color:var(--muted); margin:0 0 4px; }
.findus .btns{ display:flex; gap:16px; flex-wrap:wrap; margin-top:28px; }
.map-frame{ min-height:420px; }
.map-embed{
  display:block; width:100%; height:440px; border:0; border-radius:14px;
  background:var(--panel);
}
@media (max-width:767px){
  .map-embed{ height:320px; }
}

/* ------------------------------------------------------------
   12. FOOTER — ends the page flush, no dead space below
   ------------------------------------------------------------ */
.site-footer{
  background:var(--black);
  border-top:2px solid var(--yellow);
  padding:52px 0 46px;
  margin-top:0;
}
.footer-grid{
  display:grid; grid-template-columns:auto 1fr 1fr 1fr; gap:48px;
  align-items:start;
}
.footer-logo img{ width:118px; height:auto; flex:none; }
.f-label{
  font-weight:800; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); margin:0 0 12px;
}
.site-footer address, .site-footer p.f-line{ color:var(--bone); font-size:15.5px; line-height:1.75; margin:0; }
.site-footer a{ color:var(--bone); text-decoration:none; }
.site-footer a:hover{ color:var(--yellow); }
.footer-tagline{
  text-align:right; margin:26px 0 0;
  font-weight:800; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--yellow);
}

/* legal row — copyright + policy links, still flush to the page bottom */
.footer-legal{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px 28px; flex-wrap:wrap;
  margin:30px 0 0; padding-top:24px;
  border-top:1px solid var(--line);
  font-size:13.5px; color:var(--faint);
}
.footer-legal-links{ display:flex; gap:26px; flex-wrap:wrap; }
.site-footer .footer-legal a{ color:var(--faint); }
.site-footer .footer-legal a:hover{ color:var(--yellow); }
.site-footer .footer-legal a[aria-current="page"]{ color:var(--bone); }

/* ------------------------------------------------------------
   13. MOBILE ORDER BAR (home, menu, order)
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   14. MENU PAGE
   ------------------------------------------------------------ */
.order-now{
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  flex-wrap:wrap; padding-top:34px;
}
.order-now h2{ margin:0 0 4px; font-size:34px; }
.order-now p{ margin:0; font-size:15.5px; }
.order-now .btns{ display:flex; gap:16px; flex-wrap:wrap; }

.menu-switch-bar{
  background:var(--black); border-bottom:1px solid var(--line);
  padding-block:22px;
}
.menu-switch-inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.menu-switch{ display:flex; gap:12px; flex-wrap:wrap; }
.switch-btn{
  min-height:48px; padding:3px 24px 0;
  font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:.05em;
  text-transform:uppercase; border-radius:4px; text-decoration:none;
  display:inline-flex; align-items:center;
  color:var(--bone); border:2px solid var(--line-strong); background:transparent;
}
.switch-btn[aria-pressed="true"], .switch-btn.active{
  background:var(--red); border-color:var(--red); color:#fff;
}
.menu-switch-addr{
  font-weight:800; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint);
}
.pills-bar{ background:var(--black); padding-block:4px 20px; }
.pills{
  display:flex; gap:12px; overflow-x:auto; padding-bottom:6px;
  -webkit-mask-image:linear-gradient(90deg,#000 92%, transparent);
          mask-image:linear-gradient(90deg,#000 92%, transparent);
  scrollbar-width:none;
}
.pills::-webkit-scrollbar{ display:none; }
.pill-link{
  flex:none; display:inline-flex; align-items:center;
  min-height:46px; padding:2px 22px 0; border-radius:999px;
  border:1.5px solid var(--line-strong);
  font-family:var(--display); font-weight:800; font-size:15.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--bone); text-decoration:none; white-space:nowrap;
}
.pill-link:hover{ border-color:var(--bone); }
.pill-link.active, .pill-link[aria-current="true"]{
  background:var(--red); border-color:var(--red); color:#fff;
}

.menu-panel{ padding-block:54px 68px; }
.cat-head{
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
  margin-bottom:38px;
}
.cat-num{
  font-family:var(--display); font-weight:800; font-size:30px; color:var(--red);
  letter-spacing:.04em;
}
.cat-head h2{ margin:0; font-size:clamp(34px,3.6vw,46px); }
.cat-note{
  margin-left:auto; font-weight:800; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint);
}
.mi-grid{ columns:2; column-gap:60px; }
.mi{ break-inside:avoid; padding:14px 0 18px; border-bottom:1px solid var(--line); }
.mi-head{ display:flex; align-items:baseline; gap:10px; }
.mi-head h3{
  font-family:var(--body); font-weight:700; font-size:17px; letter-spacing:0;
  text-transform:none; margin:0; line-height:1.3;
}
.leader{
  flex:1; min-width:28px; border-bottom:2px dotted rgba(251,244,230,.26);
  transform:translateY(-5px);
}
.price{
  font-family:var(--display); font-weight:800; font-size:23px; color:var(--yellow);
  letter-spacing:.02em; white-space:nowrap; font-variant-numeric:tabular-nums;
}
/* an asterisk on a price: ask in store. Replaced the old degree mark, which
   stood for "online listing price" — that distinction is gone now. */
.ask{ font-size:.72em; font-weight:700; vertical-align:super; line-height:0; color:var(--yellow); }
.sec-bone .ask{ color:var(--red); }
.mi-badge{
  display:inline-block; margin:8px 0 0;
  font-weight:800; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--yellow);
}
.mi-badge--red{ color:#ff8a80; }
.mi-desc{ margin:6px 0 0; font-size:14.5px; color:var(--muted); }
.cat-photos{ margin-top:46px; display:grid; gap:30px; }
.cat-photos--two{ grid-template-columns:1fr 1fr; }
.cat-photos--one{ justify-items:center; }
.cat-photos--one figure{ width:min(560px, 100%); }
.cat-photos figure{ position:relative; margin:0; }
.cat-photos img{ width:100%; aspect-ratio:8/5; object-fit:cover; border-radius:12px; }
.cat-photos--one img{ aspect-ratio:7/5; }
.cat-photos figcaption{
  position:absolute; left:22px; bottom:18px;
  font-family:var(--display); font-weight:800; font-size:21px; letter-spacing:.05em;
  text-transform:uppercase; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.65);
}
.menu-footnote{
  padding-block:8px 60px; color:var(--faint); font-size:14px; max-width:760px;
}

/* chips used on festival items */
.chip{
  display:inline-block; vertical-align:middle; margin-left:12px;
  font-family:var(--body); font-weight:800; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; padding:4px 9px 3px; border-radius:3px;
}
.chip--red{ background:var(--red); color:#fff; }
.chip--yellow{ background:var(--yellow); color:var(--black); }

/* festival menu lists (menu page tab + food-truck page) */
.fest-groups{ display:grid; grid-template-columns:1fr 1fr; gap:0 64px; }
.fest-group-label{
  font-weight:800; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); margin:34px 0 4px; padding-bottom:12px;
  border-bottom:1px solid var(--line-strong);
}
.fest-item{
  display:flex; align-items:baseline; gap:12px;
  padding:19px 0; border-bottom:1px solid var(--line);
}
.fest-item .fi-name{
  font-family:var(--display); font-weight:700; font-size:clamp(19px,1.8vw,24px);
  letter-spacing:.04em; text-transform:uppercase; color:var(--bone);
}
.fest-item .price{ font-size:clamp(19px,1.8vw,24px); }

/* ------------------------------------------------------------
   15. FOOD TRUCK PAGE
   ------------------------------------------------------------ */
.ft-hero{ background:var(--red); color:#fff; padding-top:clamp(96px,12vw,150px); }

/* ---- Events hero: the truck running behind the booking band ----
   The clip is portrait 720x1280, so on a wide screen cover shows a narrow
   horizontal slice of it. That is the trade for a full-bleed overlay. */
.ft-hero--video{ position:relative; overflow:hidden; background:var(--black); }
.ft-hero-bg{ position:absolute; inset:0; z-index:0; }
.ft-hero-bg video{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* The copy runs down the middle of the clip, so the shade runs top to
   bottom rather than in from one side. */
.ft-hero--video::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,8,7,.72) 0%, rgba(10,8,7,.46) 28%,
    rgba(10,8,7,.68) 62%, rgba(10,8,7,.92) 100%);
}
.ft-hero--video > .container{ position:relative; z-index:2; }
/* no still beside the copy any more, so the band is one centred column */
.ft-hero--video .ft-band{ grid-template-columns:minmax(0,1fr); text-align:center; }
.ft-hero--video .ft-band > div{ max-width:46ch; margin-inline:auto; }
.ft-hero--video .ft-band p{ margin-inline:auto; }
.ft-hero--video .ft-band .btns{ justify-content:center; }
.ft-hero--video .ev-strip{ text-align:center; }
.ft-hero--video .ev-list{ justify-content:center; }
.ft-hero--video .ev-head{ text-align:center; }
/* on the video the black diamonds and the dark rule both disappear */
.ft-hero--video .ev-strip{ border-top-color:rgba(251,244,230,.22); }
.ft-hero--video .ev-list li:not(:last-child)::after{ background:var(--red); }
.ft-band{
  display:grid; grid-template-columns:1fr 1.15fr; gap:60px; align-items:center;
  padding-bottom:clamp(56px,7vw,88px);
}
.ft-band h1{ font-size:clamp(40px,4.6vw,66px); }
.ft-band p{ font-size:17px; max-width:46ch; }
.ft-band img{
  width:100%; aspect-ratio:16/9.6; object-fit:cover; border-radius:14px;
  border:10px solid var(--black); background:var(--black);
}
.book-grid{
  display:grid; grid-template-columns:1fr 1.05fr; gap:72px; align-items:start;
}
.book-grid h2{ font-size:clamp(30px,3vw,40px); }
.bullet-list li{
  position:relative; padding:0 0 14px 24px; font-size:16.5px; color:var(--muted);
}
.bullet-list li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--red);
}
.rather-call{
  border-top:2px solid var(--yellow); margin-top:26px; padding-top:26px;
}
.rather-call .rather-lead{ color:var(--muted); font-size:15.5px; margin:0 0 8px; }
/* was .big-phone at up to 52px; an address that long needs its own scale and
   has to be able to break rather than overflow the column */
.rather-call .big-email{
  display:inline-block; max-width:100%; overflow-wrap:anywhere;
  font-family:var(--display); font-weight:900; font-size:clamp(22px,2.3vw,32px);
  color:#fff; text-decoration:none; letter-spacing:.02em;
}
.rather-call .big-email:hover{ color:var(--yellow); }

/* ---- Private events: what we work ----
   One running line of display type rather than a tile grid, so no single
   booking type gets arbitrarily highlighted. Wraps at any width on its own. */
.ev-list{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:10px 0; margin:0; padding:0; list-style:none;
}
.ev-list li{
  display:inline-flex; align-items:center;
  font-family:var(--display); font-weight:800;
  font-size:clamp(18px, 2.1vw, 27px);
  line-height:1.15; letter-spacing:.03em; text-transform:uppercase;
  color:var(--bone);
}
/* separator trails each item so a wrapped line still starts flush left */
.ev-list li:not(:last-child)::after{
  content:""; flex:none;
  width:8px; height:8px; margin-inline:clamp(11px, 1.3vw, 18px);
  background:var(--red); transform:rotate(45deg);
}
/* catch-all closer */
.ev-list .ev-more{ color:var(--yellow); }

/* The list sits in the hero, so it runs on red: the red diamonds would be
   invisible there and go black, which also picks up the trailer's border. */
.ev-strip{
  border-top:1px solid rgba(20,17,16,.22);
  padding-top:clamp(28px,3.4vw,42px);
  padding-bottom:clamp(56px,7vw,88px);
}
.ev-head{ font-size:clamp(21px,2vw,27px); color:#fff; margin:0 0 20px; }
.ft-hero .ev-list li{ color:#fff; }
.ft-hero .ev-list li:not(:last-child)::after{ background:var(--black); }
.ft-hero .ev-list .ev-more{ color:var(--yellow); }

/* ---- Private events: food gallery ----
   The gallery was already a centred block; the heading and intro now sit
   on the same axis instead of hanging off the left of it. */
.ev-travels{ text-align:center; }
.ev-travels .ev-travels-lede{
  /* the negative top pulls it under the heading; the bottom is the gap to
     the gallery, which the old zero margin left the photos sitting on */
  max-width:56ch; margin:-14px auto clamp(30px, 3.6vw, 48px);
}
.ev-gallery{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(20px, 3vw, 34px);
  max-width:940px; margin:0 auto;
}
.ev-gallery figure{ position:relative; margin:0; }
.ev-gallery img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:14px; display:block;
}
.ev-gallery figcaption{
  position:absolute; left:20px; bottom:18px;
  font-family:var(--display); font-weight:800; font-size:20px;
  letter-spacing:.05em; text-transform:uppercase; color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.75);
}

/* ---- Two-up blocks with a photo or placeholder beside copy ---- */
.split-2{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(36px, 5vw, 64px); align-items:center;
}
.split-2 img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px; }
.split-2 .ph-frame{ aspect-ratio:16/10; }

/* ---- Service / spec cards (how we show up, what arrives, why book us) ---- */
.svc-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
/* a long nowrap run (e.g. a [Confirm] tag) must never push a column
   past the container — grid's auto minimum would otherwise allow it */
.svc-grid > *{ min-width:0; }
.svc-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:16px 16px 30px;
}
.svc-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:8px; }
.svc-card .ph-frame{ aspect-ratio:16/10; }
.svc-card h3{ font-size:25px; margin:20px 0 10px; padding-inline:8px; }
.svc-card p{ color:var(--muted); font-size:14.5px; margin:0; padding-inline:8px; }

/* ---- Labelled spec list: good to know / before we can quote ---- */
.spec-list{ margin:0; padding:0; list-style:none; }
.spec-list li{ position:relative; padding:18px 0 18px 26px; border-bottom:1px solid var(--line); }
.spec-list li::before{
  content:""; position:absolute; left:2px; top:1.6em;
  width:8px; height:8px; border-radius:50%; background:var(--yellow);
}
.spec-list h3{
  font-family:var(--display); font-weight:800; font-size:18px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--bone); margin:0 0 6px;
}
.spec-list p{ color:var(--muted); font-size:14.5px; margin:0; }

/* ---- Private events: the three service modes ----
   These are the offer, so they get cards and a display-size price. They used
   to run as .spec-list, which gave "$1,500, 50 guests, 3 hours" exactly the
   weight of "we bring our own generator" two sections down. */
.mode-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.2vw,26px); margin:0; padding:0; list-style:none;
  /* each card sizes to its own content: stretching the closed ones to match
     whichever is open leaves them with a hole where the list would be */
  align-items:start;
}
.mode-grid > *{ min-width:0; }
.mode-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid rgba(20,17,16,.12);
  border-radius:12px; padding:clamp(22px,2.4vw,30px);
}
.mode-card h3{ font-size:clamp(21px,1.9vw,26px); color:var(--black); margin:0 0 14px; }
.mode-card .mode-price{
  font-family:var(--display); font-weight:900; line-height:.9;
  font-size:clamp(36px,3.7vw,48px); letter-spacing:.01em;
  color:var(--red); margin:0 0 16px;
}
/* the qualifier rides the price so the number never reads as the whole story */
.mode-card .mode-price span{
  display:block; margin-top:9px;
  font-family:var(--body); font-weight:700; font-size:12.5px;
  letter-spacing:.05em; text-transform:uppercase; color:#8a8178;
}
/* no rule of its own any more - the toggle below carries one, and the two
   together read as a double line */
.mode-card .mode-what{
  color:var(--ink-muted); font-size:14.5px; margin:0 0 18px;
}
/* What you actually get. The tick carries the "included" sense on its own,
   so the list needs no label over it. */
.mode-includes{ margin:0 0 26px; padding:0; list-style:none; }
.mode-includes li{
  position:relative; padding:0 0 11px 26px;
  color:var(--black); font-size:14.5px; line-height:1.45;
}
.mode-includes li::before{
  content:""; position:absolute; left:3px; top:.42em;
  width:11px; height:6px; border-left:2.5px solid var(--red);
  border-bottom:2.5px solid var(--red); transform:rotate(-45deg);
}
/* ---- The cards open rather than showing everything at once ----
   Collapsed, a card is name, price and what the service is; the list and
   the booking button are behind the toggle. margin-top:auto on the toggle
   pins the three arrows to one line however uneven the cards above are. */
.mode-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; margin-top:auto; padding:14px 0 0;
  border-top:1px solid rgba(20,17,16,.12);
  font-family:var(--display); font-weight:800; font-size:14px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--red);
}
.mode-toggle:hover{ color:var(--black); }
.mode-caret{
  width:13px; height:9px; flex:none;
  transition:transform .22s var(--ease-out);
}
.mode-toggle[aria-expanded="true"] .mode-caret{ transform:rotate(180deg); }
.mode-more{ padding-top:20px; }
/* opening is a state change, so it gets a short fade rather than nothing */
.mode-toggle[aria-expanded="true"] + .mode-more{ animation:mode-open .22s var(--ease-out); }
@keyframes mode-open{ from{ opacity:0; transform:translateY(-4px); } }
.mode-cta{ align-self:flex-start; }
@media (min-width: 768px){
  .mode-card .mode-what{ min-height:7.4em; }
}
@media (prefers-reduced-motion: reduce){
  .mode-caret{ transition:none; }
  .mode-toggle[aria-expanded="true"] + .mode-more{ animation:none; }
}
/* A charge that lands on every order, so it reads at body weight with a
   red rule rather than sinking into the grey note under it. */
.ev-gratuity{
  max-width:60ch; margin:34px 0 0; font-size:17px; font-weight:700;
  padding-left:16px; border-left:3px solid var(--red);
}
.ev-min{ max-width:60ch; margin:34px 0 0; font-size:17px; }
.ev-gratuity + .ev-min{ margin-top:16px; }
.ask-note{ font-size:13px; line-height:1.5; margin:14px 0 0; color:var(--faint); }
.sec-bone .ask-note{ color:#8a8178; }
/* Netlify honeypot. Bots fill it, people never see it, Netlify bins those. */
.hidden{ display:none !important; }

/* Shown in place of the form once it has gone through. */
.form-sent{
  margin:0; padding:24px 26px;
  border:2px solid var(--yellow); border-radius:12px;
  background:rgba(255,210,63,.07);
  color:var(--bone); font-size:17px; font-weight:700; line-height:1.6;
}
.form-error{
  margin:14px 0 0; font-size:15px; font-weight:700; color:var(--yellow);
}
.form-error a{ color:var(--yellow); text-decoration:underline; text-underline-offset:3px; }

/* ---- Validation ----
   Yellow, not red: red on this near-black ground fails contrast, and
   yellow is already the site's "look here" colour. */
.field-error{
  margin:8px 0 0; font-size:13.5px; font-weight:700; line-height:1.45;
  color:var(--yellow);
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea{
  border-color:var(--yellow);
}

.form-reply{
  font-family:var(--display); font-weight:800; font-size:14px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--yellow);
  margin:16px 0 0;
}

/* ---- Festival logos beside the stand video (vendor page) ---- */
/* Vendor hero: copy beside the stand footage, so the banner is not one
   column with an empty half. The page-banner's own top padding already
   clears the header. */
.vd-hero{ padding-bottom:clamp(44px,5vw,72px); }
.vd-hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(36px,5vw,68px); align-items:center;
}
.vd-hero-grid h1{ font-size:clamp(40px,4.8vw,68px); }
.vd-hero-grid .lede{ margin-top:18px; }
.vd-hero-cta{ margin:28px 0 0; }

/* The logos read as a strip with the heading beside them rather than a
   full section stacked over them. */
.vd-lots{ padding-block:clamp(48px,5.4vw,72px); }
.vd-lots-grid{
  display:grid; grid-template-columns:minmax(190px,.42fr) 1fr;
  gap:clamp(28px,4vw,60px); align-items:center;
}
.vd-lots-grid > *{ min-width:0; }
.vd-lots-grid h2{ margin:0; font-size:clamp(30px,3.2vw,44px); }
/* The strip is far wider than the old column, so the logos spread across it
   and carry more weight. Gated to the wide layout: these selectors outrank
   the phone sizes further up, and the home marquee shares those classes. */
@media (min-width: 768px){
  .vd-lots .biglots{ justify-content:space-between; gap:clamp(24px,3vw,44px); }
  .vd-lots .logo-taste{ height:29px; }
  .vd-lots .logo-lolla{ height:43px; }
  .vd-lots .logo-lakeview{ height:108px; }
  .vd-lots .logo-tyt{ height:67px; }
  .vd-lots .logo-suenos{ height:52px; }
  .vd-lots .logo-nc{ height:66px; }
  .vd-lots .logo-smash{ height:78px; }
}

/* the banner's stock top padding assumes a short column; this one is tall */
.vd-hero{ padding-top:clamp(130px,12vw,150px); }

.biglots-grid{
  display:grid; grid-template-columns:1.25fr .75fr;
  gap:clamp(36px, 5vw, 72px); align-items:center;
}
.biglots{ display:flex; align-items:center; gap:clamp(30px, 4vw, 56px); flex-wrap:wrap; }
.biglots img{ width:auto; flex:none; }
/* second row sits under the first, divided by a hairline */
.biglots--more{
  margin-top:30px; padding-top:30px;
  border-top:1px solid rgba(20,17,16,.14);
}
.lolla-video{
  margin:0; justify-self:center;
  width:min(296px, 100%); aspect-ratio:9/16;
  border-radius:16px; overflow:hidden; background:var(--black);
  box-shadow:0 24px 54px rgba(20,17,16,.28);
}
.lolla-video video{ display:block; width:100%; height:100%; object-fit:cover; }
/* ---- Press knockouts on dark (vendor page) ---- */
.press-logos{ display:flex; align-items:center; gap:clamp(26px, 4vw, 48px); flex-wrap:wrap; margin-top:34px; }
.press-logos img{ width:auto; flex:none; }
.press-logos .logo-abc7{ height:44px; }
.press-logos .logo-wgntv{ height:28px; }
.press-logos .logo-nbc5{ height:40px; }

/* ------------------------------------------------------------
   16. FORMS
   ------------------------------------------------------------ */
.form-head{ font-size:clamp(24px,2.2vw,30px); margin-bottom:14px; }
.form-lede{ color:var(--muted); font-size:15px; max-width:52ch; margin:0 0 28px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px 26px; }
.form-grid .span-2{ grid-column:1 / -1; }
.field label{
  display:block; font-weight:700; font-size:14.5px; margin-bottom:8px; color:var(--bone);
}
.field .req{ font-weight:400; color:var(--faint); font-size:13px; }
.field input, .field select, .field textarea{
  width:100%; min-height:52px; padding:12px 14px;
  background:var(--black); color:var(--bone);
  border:1px solid rgba(251,244,230,.18); border-radius:6px;
  font-family:var(--body); font-size:16px;   /* 16px stops iOS zoom-on-focus */
}
.field textarea{ min-height:130px; resize:vertical; }
.field select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FBF4E6' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
  padding-right:42px;
}
/* The native date control renders its calendar glyph dark, which is all but
   invisible on these fields. color-scheme:dark flips the whole picker -- glyph
   and the drop-down calendar with it. Do NOT also invert the indicator: with
   color-scheme set the glyph is already light, and the filter turns it black
   again. */
.field input[type="date"]{ color-scheme:dark; }
.field input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:.9; cursor:pointer;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline:3px solid var(--yellow); outline-offset:1px; border-color:transparent;
}
.field input::placeholder, .field textarea::placeholder{ color:#847c74; }
.check-row{
  display:flex; align-items:flex-start; gap:12px; font-size:14.5px; font-weight:600;
}
.check-row input{
  width:20px; height:20px; min-height:0; margin-top:2px; accent-color:var(--red); flex:none;
}
form .btn{ margin-top:6px; }

/* ---- Truck-menu add-ons (events.html) ----
   A fieldset rather than a .field so .field label's display:block does not
   flatten the .check-row flex. */
.addons{ border:0; padding:0; margin:0; min-width:0; }
.addons legend{
  padding:0; font-weight:700; font-size:14.5px; color:var(--bone); margin-bottom:8px;
}
.addons-note{ color:var(--faint); font-size:13.5px; margin:0 0 16px; max-width:50ch; }
.addons-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; }
.addons-grid > *{ min-width:0; }

/* ------------------------------------------------------------
   17. CATERING PAGE
   ------------------------------------------------------------ */
.pkg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.pkg{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:34px 32px 36px;
}
.pkg h3{ font-size:27px; margin-bottom:8px; }
.pkg .pkg-sub{ color:var(--muted); font-size:14.5px; margin:0 0 18px; }
.pkg .pkg-price{
  font-family:var(--display); font-weight:800; font-size:26px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--yellow); margin:0 0 18px;
}
.pkg ul li{ padding:4px 0; color:var(--muted); font-size:15px; }
.strip-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:52px;
}
.strip-grid img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; }
.split-60{ display:grid; grid-template-columns:1fr 1.05fr; gap:72px; align-items:start; }
/* events.html booking block: form first and wider, fine print alongside it */
.split-book{
  display:grid; grid-template-columns:1.05fr .8fr;
  gap:clamp(44px,5vw,72px); align-items:start;
}
/* Both columns head at the same size. At full h2 scale, Good to Know shouted
   over the form it is meant to support. */
.split-book h2{ font-size:clamp(24px,2.2vw,30px); margin-bottom:28px; }
.vendor-sec{ background:var(--red); color:#fff; }
.vendor-sec .lede{ max-width:560px; }
.vendor-card{
  margin-top:44px; background:var(--black); border-radius:16px;
  padding:clamp(28px,4vw,48px); max-width:900px;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
}

/* ------------------------------------------------------------
   18. ABOUT PAGE — editorial timeline
   ------------------------------------------------------------ */
/* ---- Intro: centred, no side image, so the title reads as a lead-in ---- */
.tl-intro{ max-width:780px; margin:0 auto; text-align:center; }
.tl-intro h2{
  color:var(--red); font-size:clamp(32px, 4vw, 54px); margin:0 0 20px;
}
.tl-intro-copy{
  color:var(--muted); font-size:17px; max-width:60ch; margin:0 auto 24px;
}
.tl-intro-copy strong{ color:var(--bone); font-weight:700; }
.tl-cue{
  display:inline-block; text-decoration:none;
  font-weight:800; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red); border-bottom:2px solid var(--red); padding-bottom:6px;
}
.tl-cue:hover{ color:var(--bone); border-bottom-color:var(--bone); }
.tl-squiggle{
  display:block; width:min(430px, 72%); height:auto;
  margin:24px auto 4px; color:var(--red);
}

/* ---- The rail ---- */
.tl{ position:relative; margin:0; padding:0; list-style:none; }
.tl::before{
  content:""; position:absolute; left:50%; top:0; bottom:0;
  width:1px; background:rgba(251,244,230,.18); transform:translateX(-50%);
}
.tl-row{
  position:relative; display:grid;
  grid-template-columns:1fr 150px 1fr;
  align-items:center; padding-block:24px;
}
.tl-text{ grid-column:1; grid-row:1; }
.tl-rail{ grid-column:2; grid-row:1; display:flex; align-items:center; justify-content:center; gap:14px; }
.tl-media{ grid-column:3; grid-row:1; margin:0; }
/* even rows mirror: media left, copy right */
.tl-row:nth-child(even) .tl-text{ grid-column:3; }
.tl-row:nth-child(even) .tl-media{ grid-column:1; }
/* the year label always sits on the same side as that row's photo */
.tl-row:nth-child(even) .tl-rail{ flex-direction:row-reverse; }

.tl-dot{
  width:11px; height:11px; border-radius:50%; flex:none;
  border:2px solid var(--red); background:var(--black);
}
.tl-row:first-child .tl-dot{ background:var(--red); }
.tl-yr{
  font-family:var(--display); font-weight:800; font-size:24px;
  letter-spacing:.06em; color:var(--red); white-space:nowrap;
}
.tl-text h3{ color:var(--red); font-size:clamp(21px, 2.1vw, 27px); margin:0 0 10px; }
.tl-text p{ color:var(--muted); font-size:15.5px; margin:0; max-width:46ch; }

/* 16/9 matches the native ratio of the garage, line and trailer shots, so
   none of them crop — it also keeps the garage photo's printed border intact */
.tl-media img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; display:block; }
.tl-media .ph-frame{ aspect-ratio:16/9; padding:18px; }
/* the belt is a portrait plate — its own ratio so the whole belt shows */
.tl-media--tall img{ aspect-ratio:987/1594; max-width:264px; }
/* portrait stand shot, framed to keep the crew and the food in view */
.tl-media--crop img{ aspect-ratio:4/5; max-width:286px; object-position:center 20%; }
/* festival stand: 9:16 source cropped to 3/4 and pushed down the frame so the
   sky falls away and the menu board sits above the burger */
.tl-media--stand img{ aspect-ratio:3/4; max-width:300px; object-position:center 78%; }
/* low-res phone capture: hold the neon sign in frame */
.tl-media--sign img{ object-position:center 36%; }
/* portrait media hugs the rail-facing edge of its column */
.tl-row:nth-child(odd) .tl-media--tall img,
.tl-row:nth-child(odd) .tl-media--crop img,
.tl-row:nth-child(odd) .tl-media--stand img{ margin-right:auto; }
.tl-row:nth-child(even) .tl-media--tall img,
.tl-row:nth-child(even) .tl-media--crop img,
.tl-row:nth-child(even) .tl-media--stand img{ margin-left:auto; }

/* A video sits in the rail where a photo would. .vplayer brings its own
   position/aspect/overlay; .tl-media only has to place it in the grid and
   push it to the same edge the photos use on that side. */
.tl-media.vplayer{ width:min(248px, 100%); }
.tl-media.vplayer--45{ width:min(286px, 100%); aspect-ratio:4/5; }
.tl-row:nth-child(odd) .tl-media.vplayer{ justify-self:start; }
.tl-row:nth-child(even) .tl-media.vplayer{ justify-self:end; }
/* The heading beside the player already names the chapter, so the overlay
   label would print it twice on every row. The dot alone is enough here. */
.tl-media.vplayer .vplayer-label{ display:none; }
.tl-media.vplayer .play-dot{ width:58px; height:58px; }
.tl-media.vplayer .play-dot::after{ border-width:10px 0 10px 17px; margin-left:4px; }

@media (min-width: 881px){
  /* One height for every player, so the rail keeps an even rhythm no matter
     what each clip's aspect is -- width follows the aspect rather than the
     clip being cropped to match its neighbours. */
  .tl-media.vplayer, .tl-media.vplayer--45{ height:376px; width:auto; }

  /* Pull the copy over to the rail. Left at the far edge of its own column it
     sat about 440px from the video it belongs to, with the rail in between,
     and the two stopped reading as one row. */
  .tl-text{ max-width:400px; }
  .tl-row:nth-child(odd) .tl-text{ justify-self:end; }
  .tl-row:nth-child(even) .tl-text{ justify-self:start; }
  .tl-row:not(.tl-row--today){ align-items:start; }
  .tl-row:not(.tl-row--today) .tl-rail{ padding-top:7px; }
}

/* TODAY — the rail ends here, so the row centres under the line and the dot
   caps it rather than sitting beside another photo. */
@media (min-width: 881px){
  .tl-row--today{
    grid-template-columns:1fr;
    justify-items:center; text-align:center;
    padding-top:16px;
  }
  .tl-row--today > *{ position:relative; z-index:1; }
  .tl-row--today .tl-rail{
    grid-column:1 !important; grid-row:1 !important;
    flex-direction:column !important; gap:14px;
  }
  .tl-row--today .tl-text{
    grid-column:1 !important; grid-row:2; margin-top:24px;
    justify-self:center !important; max-width:none;
  }
  .tl-row--today .tl-text p{ max-width:52ch; margin-inline:auto; }
  .tl-row--today .tl-chips{ justify-content:center; }
  /* the terminus carries a player too, centred under the copy */
  .tl-row--today .tl-media{
    grid-column:1 !important; grid-row:3;
    justify-self:center !important; margin-top:30px;
  }
  .tl-row--today .tl-dot{ width:17px; height:17px; background:var(--red); }
  /* mask the shared rail from the dot down, so the line terminates on it */
  .tl-row--today::after{
    content:""; position:absolute; z-index:0;
    left:50%; transform:translateX(-50%);
    top:32px; bottom:0; width:3px; background:var(--black);
  }
}

.tl-chips{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.tl-chip{
  display:inline-flex; align-items:center; min-height:40px; padding:2px 20px 0;
  border-radius:999px; background:var(--yellow); color:var(--black);
  font-family:var(--display); font-weight:800; font-size:15px;
  letter-spacing:.05em; text-transform:uppercase;
}
.owners-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-top:12px; }
.owner img{ width:100%; aspect-ratio:4/4.4; object-fit:cover; border-radius:12px; }
.owner h3{ margin:24px 0 4px; font-size:32px; }
.owner .eyebrow{ margin-bottom:12px; }
/* the bios run to two paragraphs now, so they need space between them */
.owner p{ color:var(--muted); font-size:15.5px; margin:0 0 14px; max-width:46ch; }
.owner p:last-child{ margin-bottom:0; }

/* ------------------------------------------------------------
   19. NEWS PAGE
   ------------------------------------------------------------ */
.award-grid{
  display:grid; grid-template-columns:1fr 1.05fr; gap:60px; align-items:center;
}
.award-grid h2{ font-size:clamp(34px,3.6vw,52px); }
.award-grid .small-note{ font-size:13.5px; color:rgba(255,255,255,.82); margin:16px 0 0; }

/* The 9:16 player drives this band's height, so the section carries
   tighter padding than the site default to keep the red block compact. */
.award-sec{ padding-block: clamp(40px, 4.5vw, 58px); }

/* ---- Award video: vertical 9:16 player ---- */
.vplayer{
  position:relative; margin:0; justify-self:center;
  width:min(248px, 100%); aspect-ratio:9/16;
  border-radius:16px; overflow:hidden; background:var(--black);
  border:1px solid rgba(251,244,230,.14);
  box-shadow:0 26px 60px rgba(0,0,0,.42);
}
.vplayer-el{
  display:block; width:100%; height:100%; object-fit:cover; background:var(--black);
}
.vplayer-nosupport{ color:var(--bone); padding:20px; font-size:15px; }
/* Poster overlay: only shown once JS has taken the native controls off,
   so a no-JS visitor still gets a plain, working video element. */
.vplayer-play{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background:linear-gradient(180deg, rgba(10,8,7,.12) 40%, rgba(10,8,7,.72));
  border:0; cursor:pointer; width:100%;
  transition: opacity .25s, visibility .25s;
}
.vplayer-play .play-dot{
  transition: transform .2s var(--ease-out);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.vplayer-play:hover .play-dot{ transform:scale(1.08); }
.vplayer-label{
  font-family:var(--display); font-weight:800; font-size:21px;
  letter-spacing:.06em; text-transform:uppercase; color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.7);
}
.vplayer.playing .vplayer-play{
  opacity:0; visibility:hidden; pointer-events:none;
}
@media (max-width:767px){
  .vplayer{ width:min(260px, 100%); }
  .vplayer-label{ font-size:18px; }
}
.reel-row{
  display:grid; grid-template-columns:repeat(5,1fr); gap:24px; margin-top:28px;
}
.reel{
  aspect-ratio:9/16; border:2px dashed rgba(251,244,230,.22); border-radius:16px;
  background:radial-gradient(120% 90% at 50% 20%, #2a1512 0%, var(--panel) 70%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:18px; text-align:center;
}
.reel:nth-child(even){ transform:translateY(44px); }
.reel .play-dot{ width:58px; height:58px; }
.reel .play-dot::after{ border-width:9px 0 9px 15px; }
.reel .reel-title{
  font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:.05em;
  text-transform:uppercase; color:#fff; margin:0;
}
.reel .reel-handle{
  font-weight:800; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); margin:0;
}
.videos-sec .sec-head p{ max-width:54ch; margin:14px 0 0; }
@media (min-width:1100px){
  .videos-sec{ padding-bottom:150px; } /* room for the staggered frames */
}

/* ------------------------------------------------------------
   20. CONTACT PAGE
   ------------------------------------------------------------ */
.contact-cards{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.contact-card{
  background:var(--panel); border-radius:12px; padding:40px 38px;
}
.contact-card--restaurant{ border:1px solid rgba(209,52,43,.55); }
.contact-card--truck{ border:1px solid rgba(255,210,63,.5); }
.contact-card h2{ font-size:clamp(28px,2.6vw,40px); }
.contact-card .big-line{
  font-family:var(--display); font-weight:800; font-size:clamp(24px,2.3vw,32px);
  letter-spacing:.02em; color:var(--yellow); text-decoration:none; display:inline-block;
  margin:4px 0 14px;
}
.contact-card .big-line:hover{ color:#fff; }
/* an email is twice the characters of a phone number and must not ride out
   of the card on a narrow column */
.contact-card .big-line--mail{
  font-size:clamp(17px,1.75vw,25px); max-width:100%; overflow-wrap:anywhere;
}
.contact-card p{ color:var(--muted); margin:0 0 4px; }
.contact-card .btns{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.contact-form-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:72px; align-items:start; }

/* ------------------------------------------------------------
   21. ORDER PAGE
   ------------------------------------------------------------ */
.pickup-card{
  display:grid; grid-template-columns:1.1fr 1fr;
  background:var(--red); color:#fff;
  border:1px solid rgba(255,210,63,.55); border-radius:14px; overflow:hidden;
}
.pickup-card .pc-body{ padding:clamp(30px,4vw,54px); align-self:center; }
.pickup-card h2{ font-size:clamp(30px,3.4vw,48px); }
.pickup-card p{ max-width:44ch; }
.pickup-card .btns{ display:flex; gap:16px; flex-wrap:wrap; margin:26px 0 0; }
.pickup-card .fine{ font-size:13px; margin:18px 0 0; color:rgba(255,255,255,.85); }
.pickup-card img{ width:100%; height:100%; object-fit:cover; min-height:340px; }
.apps-grid{
  display:grid; gap:26px;
  grid-template-columns:repeat(auto-fit, minmax(258px, 1fr));
}
.app-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:34px 32px 36px;
}
.app-card h3{ font-size:26px; margin-bottom:6px; }
.app-card p{ color:var(--muted); font-size:14.5px; margin:0 0 22px; }

/* ------------------------------------------------------------
   22. LEGAL PAGES — privacy, terms
   Long-form prose: headings keep the display face but drop far
   below the 58px marketing h2, and the measure is capped well
   short of .container--narrow so the lines stay readable.
   ------------------------------------------------------------ */
.legal{ max-width:720px; }

.legal h2{
  font-size:clamp(21px, 2.1vw, 27px);
  line-height:1.02;
  letter-spacing:.03em;
  margin:46px 0 14px;
}
.legal > h2:first-of-type{ margin-top:0; }

.legal p{
  font-size:16.5px; line-height:1.78;
  color:var(--ink-muted);
  margin:0 0 1.1em;
}
.legal p.legal-intro{
  font-size:18.5px; font-weight:600; line-height:1.7;
  color:var(--black);
  margin-bottom:34px; padding-bottom:30px;
  border-bottom:1px solid rgba(20,17,16,.13);
}

/* red diamond markers, the same device the events page list uses */
.legal ul{ list-style:none; margin:0 0 1.5em; padding:0; }
.legal li{
  position:relative; padding-left:24px; margin:0 0 12px;
  font-size:16.5px; line-height:1.72; color:var(--ink-muted);
}
.legal li:last-child{ margin-bottom:0; }
.legal li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:8px; height:8px; background:var(--red);
  transform:rotate(45deg);
}

.legal a{
  color:var(--red); font-weight:700;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1.5px;
}
.legal a:hover{ color:var(--black); }

.legal-contact{ font-size:16.5px; line-height:1.9; color:var(--ink-muted); }

.legal p.legal-sibling{
  margin:48px 0 0; padding-top:26px;
  border-top:1px solid rgba(20,17,16,.13);
  font-size:15.5px;
}

@media (max-width: 767px){
  .legal h2{ margin-top:38px; }
  .legal p, .legal li, .legal-contact{ font-size:16px; }
  .legal p.legal-intro{ font-size:17.5px; }
}

/* ------------------------------------------------------------
   23. NEWSLETTER — the one ask on the home page
   Sits between the red social band and the dark Find Us block, so it
   is bone: the only light band in that stretch, which is what makes it
   read as the thing to act on rather than more to scroll past.
   ------------------------------------------------------------ */
.nl-sec{ position:relative; }
/* Torn-ticket edge. Drawn as bone domes rising INTO whatever sits above,
   not as red notches bitten out of this section: the social band above is
   only red on its left, because its bone slab bleeds off the right edge, so
   red notches left half the width as red blobs floating on cream. Bone domes
   scallop the seam where the colour actually changes and vanish, correctly,
   where bone already meets bone. */
.nl-sec::before{
  content:""; position:absolute; left:0; right:0; bottom:100%; height:11px;
  background:radial-gradient(circle at 11px 11px, var(--bone) 9px, transparent 9.5px)
             0 0 / 22px 11px repeat-x;
  pointer-events:none;
}

.nl-card{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(32px, 5vw, 76px); align-items:center;
}
.nl-copy h2{ color:var(--red); font-size:clamp(34px, 4.4vw, 60px); margin:0 0 18px; }
.nl-lead{ color:var(--ink-muted); font-size:17px; line-height:1.7; max-width:46ch; margin:0; }

.nl-form{ display:grid; gap:16px; }
.nl-row{ display:flex; gap:12px; align-items:flex-start; }
.nl-field{ flex:1 1 auto; min-width:0; }
.nl-submit{ flex:none; min-height:56px; }
/* form .btn{margin-top:6px} is (0,1,1) and beats a lone .nl-submit, which
   left the button sitting 6px below the field it belongs beside. */
.nl-row .nl-submit{ margin-top:0; }

/* The field styles are written for dark sections; this is the only form on
   bone, so it gets its own skin rather than the global rules being bent. */
.nl-sec .field input{
  background:#fff; color:var(--black);
  border:1px solid rgba(20,17,16,.22); min-height:56px;
}
.nl-sec .field input::placeholder{ color:#9a918a; }
.nl-sec .field input:focus-visible{
  outline:3px solid var(--red); outline-offset:1px; border-color:transparent;
}
/* yellow validation text would be invisible here */
.nl-sec .field-error, .nl-sec .form-error{ color:var(--red); }
.nl-sec .form-error a{ color:var(--red); }
.nl-sec .field.is-invalid input{ border-color:var(--red); box-shadow:none; }

.nl-consent{
  margin:0; font-size:13px; line-height:1.65;
  color:var(--ink-muted); max-width:54ch;
}
.nl-consent a{
  color:var(--red); font-weight:700;
  text-decoration:underline; text-underline-offset:2px;
}

/* ---- the thank you ----
   .form-sent is a yellow-bordered panel for the dark booking forms; here it
   is nothing but the mark and the words, drawn on. */
/* .nl-sent carries display:grid below, which outranks the UA rule for
   [hidden] and would leave the thank-you on screen from page load. Same trap
   the stories header hit. */
.nl-sec [hidden]{ display:none !important; }
.nl-sec .nl-sent{
  border:0; background:none; padding:0; border-radius:0;
  color:var(--black); font-size:inherit; font-weight:400;
  display:grid; gap:12px; justify-items:start;
  animation:nl-rise .5s var(--ease-out) both;
}
.nl-tick{
  width:56px; height:56px; fill:none; stroke:var(--red);
  stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round;
}
.nl-tick-ring{ stroke-dasharray:145; stroke-dashoffset:145; animation:nl-draw .55s var(--ease-out) .08s forwards; }
.nl-tick-mark{ stroke-dasharray:36; stroke-dashoffset:36; animation:nl-draw .3s var(--ease-out) .52s forwards; }
.nl-sent-head{
  margin:0; font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(26px, 2.8vw, 38px); line-height:1; letter-spacing:.015em;
  color:var(--black);
}
.nl-sent-sub{ margin:0; color:var(--ink-muted); font-size:16px; line-height:1.65; max-width:40ch; }
@keyframes nl-draw{ to{ stroke-dashoffset:0; } }
@keyframes nl-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

@media (max-width: 900px){
  .nl-card{ grid-template-columns:1fr; gap:34px; }
  .nl-lead, .nl-consent{ max-width:none; }
}
@media (max-width: 560px){
  /* stretch, not flex-start: stacked, the row's cross axis is the width, and
     flex-start left the input short while the button went full bleed */
  .nl-row{ flex-direction:column; align-items:stretch; }
  .nl-submit{ width:100%; }
}

/* ------------------------------------------------------------
   24. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1023px){
  .biglots-grid{ grid-template-columns:1fr; justify-items:start; }
  .lolla-video{ justify-self:start; width:min(260px, 100%); }
  .svc-grid{ grid-template-columns:1fr; max-width:560px; }
  .menu-cards{ grid-template-columns:repeat(2,1fr); }
  .post-tiles{ grid-template-columns:repeat(2,1fr); }
  .reel-row{ grid-template-columns:repeat(3,1fr); }
  .pkg-grid{ grid-template-columns:1fr; max-width:560px; }
  .strip-grid{ grid-template-columns:repeat(2,1fr); }
}

/* Three mode cards get too narrow to hold a 52px price before the phone
   breakpoint, so they go two-up first and the odd one runs full width. */
@media (max-width: 1023px){
  /* the stand footage is portrait; below this it is taller than the copy
     beside it and the hero reads as two unrelated halves */
  .vd-hero-grid{ grid-template-columns:1fr; gap:38px; }
  .vd-hero-grid .lolla-video{ justify-self:start; }
  .mode-grid{ grid-template-columns:repeat(2,1fr); }
  .mode-grid > :last-child{ grid-column:1 / -1; }
  .split-book{ grid-template-columns:1fr; gap:48px; }
}
@media (max-width: 980px){
  /* stacked: the bone slab turns into a horizon the phone stands on */
  .social-grid{ grid-template-columns:1fr; gap:44px; justify-items:center; }
  .social-copy{ width:100%; }
  .social-phone{ justify-content:center; }
  .social-phone::before{
    left:-100vw; right:-100vw; top:19%; bottom:calc(-1 * var(--sec-pad));
  }
  .iph{ --pw: min(336px, 76vw); }
}
/* Rail timeline collapses to a single left-hand rail */
@media (max-width: 880px){
  .tl::before{ left:7px; transform:none; }
  .tl-row{ grid-template-columns:1fr; gap:14px; padding:22px 0 22px 34px; }
  .tl-rail{
    grid-column:1 !important; grid-row:1;
    justify-content:flex-start; flex-direction:row !important;
    gap:12px; margin-left:-34px; padding-left:2px;
  }
  .tl-text{ grid-column:1 !important; grid-row:2; }
  .tl-media{ grid-column:1 !important; grid-row:3; }
  .tl-text p{ max-width:none; }
  .tl-media--tall img{ max-width:224px; }
  .tl-media--crop img{ max-width:240px; }
  .tl-media--stand img{ max-width:250px; }
  .tl-row:nth-child(odd) .tl-media.vplayer,
  .tl-row:nth-child(even) .tl-media.vplayer{ justify-self:start; }
  /* the left-hand rail stops on the Today dot the same way */
  .tl-row--today{ position:relative; }
  .tl-row--today::after{
    content:""; position:absolute; z-index:0;
    left:6px; top:30px; bottom:0; width:3px; background:var(--black);
  }
  .tl-row--today > *{ position:relative; z-index:1; }
  .tl-row--today .tl-dot{ background:var(--red); }
  .tl-row:nth-child(even) .tl-media--tall img,
  .tl-row:nth-child(even) .tl-media--crop img,
  .tl-row:nth-child(even) .tl-media--stand img{ margin-left:0; }
  .tl-squiggle{ display:none; }
}
@media (max-width: 767px){
  .sec{ padding-block:56px; }
  .stats{ grid-template-columns:1fr; gap:16px; padding-bottom:24px; }
  .stat{ display:flex; align-items:baseline; gap:14px; }
  .stat-num, .social-copy .stat-num{ font-size:44px; }
  .stat-label{ margin:0; font-size:14px; }
  .social-lead p{ margin-bottom:20px; }
  .about-block, .truck-block, .findus,
  .book-grid, .split-60, .split-book, .split-2, .award-grid, .contact-cards,
  .contact-form-grid, .owners-grid, .ft-band, .vd-hero-grid, .vd-lots-grid{
    grid-template-columns:1fr; gap:36px;
  }
  .vd-lots-grid{ gap:24px; }
  .mode-grid{ grid-template-columns:1fr; }
  .biglots{ gap:26px; }
  .lolla-video{ width:min(240px, 100%); }
  .ev-gallery{ grid-template-columns:1fr; max-width:380px; }
  .ev-gallery figcaption{ font-size:18px; }
  .menu-cards, .post-tiles, .strip-grid, .apps-grid,
  .fest-groups, .cat-photos--two{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .form-grid .span-2{ grid-column:auto; }
  /* two columns of these wrap mid-item at phone width */
  .addons-grid{ grid-template-columns:1fr; }
  .mi-grid{ columns:1; }
  .menu-card p{ min-height:0; }
  .pickup-card{ grid-template-columns:1fr; }
  .pickup-card img{ min-height:240px; }
  .press-row{ flex-wrap:wrap; gap:14px 22px; }
  .press-row .pr-logo{ width:96px; }
  .sec-head .btn{ margin-top:4px; }
  .footer-grid{ grid-template-columns:1fr; gap:30px; }
  .footer-tagline{ text-align:left; }
  .footer-legal{ justify-content:flex-start; }
  /* Four even lines instead of two short ones under a line that ran to the
     edge, which lets the type come up without crowding the frame. */
  .hero .hl:nth-child(3), .hero .hl:nth-child(4){ display:block; }
  /* nothing follows the headline here any more, so its button gap is just
     dead space on top of the padding below it */
  .hero h1{ font-size:clamp(42px,16vw,68px); margin-bottom:0; }
  /* The header carries Order Now the whole way down and the menu is one tap
     into the drawer, so the hero's own pair was the same two actions again.
     Headline only here. */
  .hero-content{ padding-block:100px 30px; text-align:center; }
  .hero-ctas{ display:none; }
  /* the photo sits a little lower so the logo clears the bun; scaled first
     so shifting it down cannot expose the top edge */
  .hero-bg img{ transform:scale(1.1) translateY(3.4%); }
  .videos-sec{ padding-bottom:56px; }
  /* This used to be hidden because the sticky bar carried the same two
     buttons. The bar is gone, so the block comes back - the header pill is
     the only other order action and it does not carry the phone number. */
  .order-now{ flex-direction:column; align-items:flex-start; gap:18px; }
  .menu-switch-inner{ flex-direction:column; align-items:flex-start; }
}

/* ---- Vendor page, phones: the whole column runs centred ----
   Scoped to the page class so events.html's Good to Know, which shares
   .spec-list and .form-head, is not dragged along with it. */
@media (max-width: 767px){
  .page-vendor .vd-hero-grid > div,
  .page-vendor .vd-lots-grid,
  .page-vendor .split-book > div{ text-align:center; }
  .page-vendor .vd-hero-grid .lede{ margin-inline:auto; }
  .page-vendor .vd-hero-grid .lolla-video{ justify-self:center; margin-inline:auto; }
  .page-vendor .vd-lots .biglots{ justify-content:center; }
  .page-vendor .form-lede{ margin-inline:auto; }
  /* the dot leaves the left margin and becomes a marker over each item */
  .page-vendor .spec-list li{ padding-left:0; }
  .page-vendor .spec-list li::before{
    position:static; display:block; margin:0 auto 10px;
  }
  /* labels centre over their fields, but typed text still starts at the left */
  .page-vendor .field input,
  .page-vendor .field select,
  .page-vendor .field textarea{ text-align:left; }
}

@media (max-width: 767px){
  /* a little more floor under the event list where it runs several rows */
  .ft-hero--video::after{
    background:linear-gradient(180deg,
      rgba(10,8,7,.8) 0%, rgba(10,8,7,.48) 26%,
      rgba(10,8,7,.72) 58%, rgba(10,8,7,.93) 100%);
  }
  .ft-hero--video .ft-band > div{ max-width:none; }
}

/* Short phones: these have to sit AFTER the block above, which sets the
   phone hero, or its .hero-bg img transform wins on source order. */
@media (max-width: 767px) and (max-height: 720px){
  .hero h1{ font-size:clamp(40px,15.5vw,62px); margin-bottom:0; }
  .hero-content{ padding-block:88px 24px; }
  .hero{ min-height:86svh; }
  /* and less of a drop on the photo: there is no spare height here, so the
     full 3.4% pushes the bottom bun behind the headline */
  .hero-bg img{ transform:scale(1.04) translateY(1.4%); }
}

/* ------------------------------------------------------------
   25. REDUCED MOTION — everything rests in its final visible state
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .nl-sent{ animation:none; }
  .nl-tick-ring, .nl-tick-mark{ animation:none; stroke-dashoffset:0; }
  .marquee-track, .btn-sweep::after,
  html.anim .hero .wi, html.anim .hero-ctas{
    animation:none !important;
  }
  html.anim:not(.anim-done) .w{ overflow:visible; padding:0; margin:0; }
  html.anim .hero .wi{ opacity:1; transform:none; }
  html.anim .hero-ctas{ opacity:1; transform:none; }
  .marquee-track{ transform:none; }
  .marquee{ overflow-x:auto; }
  .st-slide, .st-vid, .st-media img, .st-foot{ transition:none; }
  .st-media img{ transform:none; }
  /* header rests solid — its end state */
  .site-header{
    animation:none !important;
    background:#141110; box-shadow:0 10px 26px rgba(0,0,0,.5);
    border-bottom:2px solid var(--yellow);
  }
  .utility-bar, .header-main, .logo img{ animation:none !important; transition:none !important; }
  .header-main{ height:62px; }
  .logo img{ width:118px; }
  .utility-bar{ height:0; opacity:0; }
  html.js .main-nav{ transition:none; }
  *{ scroll-behavior:auto !important; }
}