/* ─── FONTS ───
   Served from this site, not Google Fonts. The hosted stylesheet sat in the
   critical path behind two extra connections (googleapis, then gstatic)
   before the hero could draw its headline. Latin and Latin Extended only;
   unicode-range means a browser fetches a file only for text that needs it.
   Oswald and Playfair are variable: one file serves every weight. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/anton-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/anton-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/bebas-neue-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/bebas-neue-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/lato-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/lato-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/lato-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/lato-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/lato-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/lato-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/oswald-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/oswald-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/oswald-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/oswald-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/oswald-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/oswald-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/oswald-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/oswald-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:700;font-display:swap;src:url('fonts/playfair-display-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:700;font-display:swap;src:url('fonts/playfair-display-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/playfair-display-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/playfair-display-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/playfair-display-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/playfair-display-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Yellowtail';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/yellowtail-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Yellowtail';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/yellowtail-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ─── ROOT VARS ─── */
:root{
  --container-max: 1440px;

  /* Primary palette */
  --black:    #050505;
  --cream:    #F3EADC;
  --amber:    #F29A12;
  /* --amber-l was var(--st-open) — the OPEN-status green. Every hover built on this
     token jumped hue instead of brightening. It is a lighter amber now; the
     green lives only in --st-open, where it means something. */
  --amber-l:  #FFB43D;
  --amber-d:  #C97A00;
  --teal:     #0B8F86;
  --teal-l:   #12B5AA;
  --line:     rgba(243,234,220,.10);
  --nav-h:    108px;

  /* PAGE SYSTEM — one value per decision, so no two blocks can disagree.
     Packages set the standard: its card edge, padding and radius are the
     ones every other section now uses. */
  --gutter:      clamp(24px,3vw,40px);    /* screen edge → content        */
  --section-max: 1120px;                  /* one content width, gutters included */
  --section-y:   clamp(88px,9vw,120px);   /* section edge → content       */
  --stack-gap:   clamp(44px,5vw,64px);    /* heading → content, block → block */
  --card-pad:    clamp(28px,3.2vw,44px);  /* card edge → card content     */
  --card-radius: 6px;
  --btn-h:       54px;
  --btn-radius:  3px;

  /* MOTION — every curve and duration on the site comes from here.
     ease-in is deliberately absent: it delays the first frame, which is the
     one the eye is already watching. */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer:  cubic-bezier(.32, .72, 0, 1);
  --dur-press:   140ms;
  --dur-hover:   200ms;
  --dur-pop:     220ms;
  --dur-panel:   320ms;

  /* FOCUS — one ring, used by every interactive element. Its own colour,
     not an accent alias: the ring must not drift when the palette does. */
  --focus-ring:  #FFB43D;
  --focus:       0 0 0 2px var(--black), 0 0 0 4px var(--focus-ring);

  /* Legacy aliases */
  --orange:   #F29A12;
  --orange-2: #FFB43D;
  --fire:     #CC2200;
  --fire-l:   #E03A00;

  /* Surface scale — pure charcoal, no red bias */
  --dark:     #080808;
  --dark-2:   #0D0D0D;
  --dark-3:   #121212;
  --dark-4:   #181818;

  /* Text scale */
  --white:    #F3EADC;
  --muted:    #A89888;
  --gray:     #6E6258;
  /* The faintest reading text: hints, fine print, descriptions. .55 is the
     floor that still clears WCAG AA (4.5:1) on the lightest card; anything
     fainter is decoration, not text. */
  --tx-quiet: rgba(243,234,220,.55);
}

html{scroll-behavior:smooth;font-size:16px;background:var(--black);scroll-padding-top:calc(var(--nav-h) + 16px)}
body{background:var(--dark);color:var(--cream);font-family:'Lato',sans-serif;line-height:1.65;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit;border:none;background:none;color:inherit}

/* A keyboard user had no focus indicator anywhere on this site: buttons were
   reset with outline:none and nothing replaced it. One ring, everywhere. */
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:3px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{position:relative;z-index:2}
input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:var(--focus)}

.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}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--dark)}
::-webkit-scrollbar-thumb{background:rgba(242,154,18,.4);border-radius:2px}

/* ─── CONTAINER BREAKPOINTS ─── */
@media(max-width:1599px){:root{--container-max:1380px}}
@media(max-width:1439px){:root{--container-max:1280px}}
@media(max-width:1199px){:root{--container-max:1040px}}
@media(max-width:991px) {:root{--container-max:100%}}

/* ─── UTILS ─── */
.wrap,.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
/* Primary section padding — shared across About, Menu, Catering, Stats */
.sec{padding:clamp(88px,9vw,120px) 0}

/* Spacing scale */
:root{
  --sp-xs: 8px;
  --sp-s:  16px;
  --sp-m:  24px;
  --sp-l:  40px;
  --sp-xl: 64px;
  --sp-xxl:96px;
}

/* ─── TYPOGRAPHY SYSTEM ─── */
/* SMALL LABEL (eyebrow) */
.tag{display:inline-block;font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--amber);margin-bottom:var(--sp-s)}
/* SECTION DISPLAY (all major content sections share this scale) */
.h1{font-family:'Playfair Display',serif;font-size:clamp(2.5rem,4.6vw,3.6rem);font-weight:900;line-height:1.06;letter-spacing:-.025em}
.h2{font-family:'Playfair Display',serif;font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;line-height:1.12;letter-spacing:-.01em}
/* ACCENT RULE — consistent below all section headings */
.bar{display:block;width:40px;height:1.5px;background:var(--amber);border-radius:1px;margin:var(--sp-s) 0 var(--sp-l)}
/* BODY COPY */
.body{color:var(--muted);line-height:1.82;font-family:'Lato',sans-serif;font-size:clamp(.93rem,1.05vw,1.05rem)}

/* ─── SMALL BUTTONS (non-hero sections) ─── */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;padding:15px 36px;border-radius:2px;cursor:pointer;transition:transform var(--dur-hover) var(--ease-out),background var(--dur-hover) ease,border-color var(--dur-hover) ease,box-shadow var(--dur-hover) ease}

/* ══════════════════════════
   SITE HEADER
══════════════════════════ */
.site-header{
  position:fixed;
  z-index:200;
  top:0;left:0;right:0;
  height:var(--nav-h);
  display:grid;
  grid-template-columns:220px 1fr 220px;
  align-items:center;
  padding:0 calc(max(0px,(100% - var(--container-max)) / 2) + var(--gutter));
  pointer-events:none;
  transition:background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
}
.site-header.on{
  background:rgba(3,3,4,.9);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 1px 0 rgba(242,154,18,.12),0 4px 28px rgba(0,0,0,.55);
}
.brand,.desktop-nav,.nav-cta,.mobile-menu{pointer-events:auto}

.brand{position:relative;display:flex;align-items:center;gap:10px}
.brand-wm{display:flex;flex-direction:column;gap:4px;line-height:1}
.brand-wm-top{
  font-family:'Yellowtail',cursive;
  font-size:28px;
  color:var(--cream);
  line-height:1.05;
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}
.brand-wm-btm{
  font-family:'Oswald',sans-serif;
  font-size:11px;font-weight:400;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--amber);
  line-height:1;
}
.brand::before{
  content:'';
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,154,18,.13),transparent 68%);
  pointer-events:none;z-index:0;
}
.brand img{
  width:88px;height:88px;
  object-fit:contain;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(242,154,18,.22));
  transition:transform var(--dur-hover) var(--ease-out);
  position:relative;z-index:1;
}
/* The logo lifts. It does not change colour and it does not bloom — the
   glow is the brand's resting state, not a hover effect. Gated, or a tap
   on a phone leaves the mark floating with nothing to set it back down. */
@media(hover:hover) and (pointer:fine){
  .brand:hover img{transform:translateY(-2px)}}
.brand:active img{transform:translateY(0) scale(.97)}
@media(prefers-reduced-motion:reduce){
  .brand:hover img,.brand:active img{transform:none}}

/* ─── DESKTOP NAV ─────────────────────────────────────────────────────────
   The gap between links is padding on the links, not flex gap: no dead
   strip where the pointer falls between two words and the row flickers.
   Hovering the row lowers the others, so the one under the pointer is the
   only thing lit. The rule draws in from the left and leaves to the right,
   as if the pointer pulled it through; leaving is quicker than arriving. */
.desktop-nav{
  --nav-pad:18px;
  justify-self:center;
  display:flex;align-items:center;
  font-family:'Oswald',sans-serif;
  font-size:11px;line-height:1;
  letter-spacing:.24em;text-transform:uppercase;
  color:rgba(243,234,220,.74);
}
.desktop-nav a{
  position:relative;
  padding:14px var(--nav-pad);
  text-shadow:0 2px 14px rgba(0,0,0,.6);
  transition:color var(--dur-hover) ease;
}
.desktop-nav a::after{
  content:'';
  position:absolute;
  left:var(--nav-pad);right:calc(var(--nav-pad) + .24em);  /* the tracking trails the last letter */
  bottom:9px;height:1px;
  background:linear-gradient(90deg,var(--fire-l),var(--amber));
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform 200ms var(--ease-out);
}
/* The shadow keeps the words legible over the hero photo. Once the header has
   its own ground it only smudges a dark halo around each word. */
.site-header.on .desktop-nav a{text-shadow:none}
.desktop-nav a.active{color:var(--cream)}
.desktop-nav a.active::after{transform:scaleX(1)}
.desktop-nav a:focus-visible{color:var(--cream)}
@media(hover:hover) and (pointer:fine){
  .desktop-nav:hover a{color:rgba(243,234,220,.42)}
  .desktop-nav:hover a:hover{color:var(--cream)}
  .desktop-nav a:hover::after{
    transform:scaleX(1);
    transform-origin:left center;
    transition-duration:320ms;
  }
  /* The current section hands its rule to the link being pointed at. */
  .desktop-nav:hover a.active:not(:hover)::after{transform:scaleX(0)}
}
@media(prefers-reduced-motion:reduce){
  .desktop-nav a::after{transform:none;opacity:0;transition:opacity 200ms ease}
  .desktop-nav a.active::after,.desktop-nav a:hover::after{transform:none;opacity:1}
}

.nav-cta{
  justify-self:end;align-self:center;
  display:inline-flex;align-items:center;gap:11px;
  font-family:'Oswald',sans-serif;
  font-size:10px;line-height:1;
  letter-spacing:.24em;text-transform:uppercase;
  padding:13px 26px;
  color:var(--cream);
  background:linear-gradient(135deg,#cf2d10,#e65412);
  border-radius:2px;
  box-shadow:0 4px 18px rgba(204,34,0,.28),inset 0 1px 0 rgba(255,255,255,.08);
  white-space:nowrap;
}
/* No lift: the header is a rail, and a button hopping off it reads as loose.
   It warms instead, and the arrow leans toward where it goes. */
.nav-cta .ico{transition:transform var(--dur-hover) var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .nav-cta:hover{
    filter:brightness(1.1);
    box-shadow:0 8px 26px rgba(204,34,0,.42),inset 0 1px 0 rgba(255,255,255,.12);
  }
  .nav-cta:hover .ico{transform:translateX(3px)}
}
.nav-cta span{font-size:1em;line-height:1;opacity:.82}

.mobile-menu{
  display:none;justify-self:end;
  flex-direction:column;gap:7px;
  width:44px;padding:4px;
}
.mobile-menu span{
  height:2.5px;width:100%;
  background:var(--cream);border-radius:99px;
  transition:transform var(--dur-pop) var(--ease-out),opacity 140ms ease;
}
.mobile-menu.x span:nth-child(1){transform:translateY(9.5px) rotate(45deg)}
.mobile-menu.x span:nth-child(2){opacity:0;transform:scaleX(0)}
.mobile-menu.x span:nth-child(3){transform:translateY(-9.5px) rotate(-45deg)}

/* ══════════════════════════
   HERO SECTION
══════════════════════════ */

.hero{
  position:relative;
  height:100vh;
  height:100dvh;
  min-height:760px;
  overflow:hidden;
  isolation:isolate;
  background:#050404;
}

.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-image:url('hero-v4.jpg');
  background-image:-webkit-image-set(url('hero-v4.webp') 1x, url('hero-v4-2x.webp') 2x);
  background-image:image-set(url('hero-v4.webp') 1x, url('hero-v4-2x.webp') 2x);
  background-size:cover;
  background-position:64% center;
  background-repeat:no-repeat;
  filter:brightness(.96) contrast(1.04) saturate(1.02);
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  /* The scrim is shaped around the words, not laid over the whole photo.
     Its vertical band used to reach .58 at the bottom edge across the full
     width — which is exactly where the grill and the food sit — while the
     headline it protected measured 15:1, three times what AA asks. The dark
     now lives in the text column and under the buttons; the right-hand
     bottom, the product, is left close to the photograph. */
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.68) 21%,
      rgba(0,0,0,.40) 42%,
      rgba(0,0,0,.08) 62%,
      rgba(0,0,0,0) 100%
    ),
    radial-gradient(ellipse 52% 58% at 0% 100%,rgba(0,0,0,.5) 0%,transparent 72%),
    linear-gradient(180deg,
      rgba(0,0,0,.36) 0%,
      rgba(0,0,0,.02) 44%,
      rgba(0,0,0,.08) 100%
    );
}

.hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  /* Only as tall as the handoff into the page needs: at 230px it was a
     second scrim over the food. */
  height:140px;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(5,3,3,.35) 45%,
    rgba(5,3,3,.92) 100%
  );
}

.hero-embers{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  overflow:hidden;
}

.hero-embers span{
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:rgba(255,110,0,.72);
  filter:blur(.4px);
  animation:hero-ember-rise var(--dur,18s) ease-in infinite;
}

.hero-embers span:nth-child(1){left:47%;top:48%;--dur:17s;animation-delay:0s;--dx:12px}
.hero-embers span:nth-child(2){left:52%;top:41%;--dur:21s;animation-delay:3s;--dx:-14px}
.hero-embers span:nth-child(3){left:58%;top:58%;--dur:19s;animation-delay:7s;--dx:16px}
.hero-embers span:nth-child(4){left:64%;top:38%;--dur:24s;animation-delay:5s;--dx:-10px}
.hero-embers span:nth-child(5){left:71%;top:68%;--dur:18s;animation-delay:10s;--dx:18px}
.hero-embers span:nth-child(6){left:38%;top:65%;--dur:22s;animation-delay:12s;--dx:-16px}

@keyframes hero-ember-rise{
  0%{transform:translateY(0) translateX(0) scale(1);opacity:0}
  8%{opacity:.9}
  60%{opacity:.45}
  100%{transform:translateY(-34vh) translateX(var(--dx)) scale(.45);opacity:0}}

.hero-inner{
  position:relative;
  z-index:5;
  width:100%;
  max-width:var(--container-max);
  height:100%;
  margin:0 auto;
  padding:0 clamp(24px,3vw,40px);
  display:flex;
  align-items:center;
}

.hero-content{
  position:relative;
  width:min(590px,46vw);
}
.hero-content::before{
  content:'';
  position:absolute;
  top:38%;left:15%;
  width:580px;height:420px;
  background:radial-gradient(ellipse,rgba(242,154,18,.06) 0%,transparent 65%);
  filter:blur(60px);
  pointer-events:none;
  z-index:-1;
  transform:translate(-50%,-50%);
}

.hero-meta{
  display:block;
  margin-bottom:0;
}

.meta-services{
  font-family:'Oswald',sans-serif;
  font-size:clamp(10px,.82vw,12px);
  letter-spacing:.32em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--amber);
  text-shadow:0 4px 18px rgba(0,0,0,.85);
}

.hero-script-top{
  font-family:'Yellowtail',cursive;
  font-size:clamp(22px,2vw,36px);
  line-height:1;
  color:var(--teal-l);
  margin-left:0;
  margin-bottom:20px;
  position:relative;
  z-index:1;
  transform:rotate(-2deg) translateY(-3px);
  text-shadow:
    0 4px 18px rgba(0,0,0,.9),
    0 0 18px rgba(18,181,170,.18);
}

.hero-title{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-transform:uppercase;
  line-height:1;
  text-shadow:0 7px 24px rgba(0,0,0,.82);
}

.title-caribbean{
  font-family:'Anton','Bebas Neue',sans-serif;
  font-size:clamp(62px,6.4vw,108px);
  line-height:.78;
  letter-spacing:.012em;
  color:var(--cream);
  transform:scaleX(.91);
  transform-origin:left center;
  transform-origin:left center;
  filter:
    drop-shadow(0 3px 0 rgba(0,0,0,.25))
    drop-shadow(0 0 14px rgba(243,234,220,.08));
}

.title-hibachi{
  font-family:'Anton','Bebas Neue',sans-serif;
  font-size:clamp(72px,7.8vw,130px);
  line-height:.80;
  letter-spacing:.012em;
  color:#F06522;
  margin-top:2px;
  transform:skewX(-7deg) scaleX(.96);
  transform-origin:left center;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.28));
}

.title-experience{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:7px;
  margin-left:0;
  font-family:'Bebas Neue','Oswald',sans-serif;
  font-size:clamp(30px,3.2vw,54px);
  line-height:.9;
  letter-spacing:.26em;
  color:var(--cream);
  font-weight:400;
}

.title-experience i{
  display:block;
  width:38px;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--fire-l));
  flex-shrink:0;
}

.title-experience i:last-child{
  background:linear-gradient(90deg,var(--fire-l),transparent);
}

.title-backyard{
  position:relative;
  margin-top:6px;
  margin-left:0;
  font-family:'Yellowtail',cursive;
  text-transform:none;
  font-size:clamp(26px,2.6vw,44px);
  line-height:1;
  color:var(--teal-l);
  transform:rotate(-2deg);
  text-shadow:
    0 4px 18px rgba(0,0,0,.85),
    0 0 18px rgba(18,181,170,.18);
}

.title-backyard::after{
  content:"";
  position:absolute;
  left:6%;right:22%;bottom:-9px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--teal-l),transparent);
  opacity:.72;
  transform:rotate(-2deg);
}

.hero-copy{
  margin-top:40px;
  max-width:420px;
  font-family:'Lato',sans-serif;
  font-size:clamp(15px,1.1vw,17px);
  line-height:1.7;
  font-weight:400;
  letter-spacing:.01em;
  color:rgba(243,234,220,.92);
  text-shadow:0 4px 18px rgba(0,0,0,.9);
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:36px;
}

.hcta-primary,
.hcta-secondary{
  height:60px;
  min-width:220px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:0 28px;
  border-radius:3px;
  font-family:'Oswald',sans-serif;
  font-size:clamp(12px,.9vw,15px);
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:transform .25s ease,filter .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.hcta-primary{
  color:var(--cream);
  background:linear-gradient(135deg,#cf2d10 0%,#e65412 52%,#f28a12 100%);
  box-shadow:
    0 12px 30px rgba(204,34,0,.34),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.hcta-secondary{
  color:rgba(243,234,220,.86);
  background:rgba(0,0,0,.42);
  border:1px solid rgba(242,154,18,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

@media(hover:hover) and (pointer:fine){
  .hcta-primary:hover,
  .hcta-secondary:hover{
    transform:translateY(-2px);
    filter:brightness(1.08);
  }

  .hcta-secondary:hover{
    border-color:var(--amber);
    box-shadow:0 0 24px rgba(242,154,18,.14);
  }
}

.hero-location-bar{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:8;
  /* A height, not a ceiling. Some stop names are three words long and some
     are a festival plus a park; the bar grows rather than cutting either. */
  min-height:60px;
  padding:8px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-top:1px solid rgba(243,234,220,.10);
  background:linear-gradient(180deg,rgba(5,5,5,.44),rgba(5,5,5,.86));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.hero-location-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px 18px;
  text-align:center;
  font-family:'Oswald',sans-serif;
  font-size:clamp(12px,.95vw,16px);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(243,234,220,.72);
}

.hero-location-inner .pin{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--fire-l);
  flex-shrink:0;
}
.hero-location-inner .pin svg{
  width:22px;
  height:22px;
  display:block;
}

.hero-location-inner strong{
  color:var(--fire-l);
  font-weight:600;
}

/* Laid out by hero-bar.js as a column of centred lines, each one run of
   text — not a row of boxes that wrap on their own and strand the hours on a
   short line between two long ones. --bar-gap is the space either side of a
   separator and after the pin. */
.hero-location-inner{--bar-gap:18px}
.hero-location-inner[data-layout="lines"]{flex-direction:column;flex-wrap:nowrap;gap:0}
.hero-loc-line{display:block;max-width:100%;overflow-wrap:anywhere}
/* The pin is sized to the line (1.5em = its line-height) and centred on the
   capitals: -.35em puts the middle of a 1.5em box at half the cap height. */
.hero-loc-line .pin{display:inline-flex;vertical-align:-.35em;margin-right:.8em}
.hero-loc-line .pin svg{width:1.5em;height:1.5em}
/* One fact per line on a phone. Where it is reads in sentence case without
   the tracking, so a real street address fits a line instead of wrapping in
   spaced capitals. */
.hero-loc-line--title{color:rgba(243,234,220,.94)}
.hero-loc-line--where,.hero-loc-line--note{font-size:1.1em;letter-spacing:.02em;text-transform:none}
.hero-loc-sep{
  margin:0 var(--bar-gap);
  font-family:Arial,sans-serif;font-size:7px;line-height:0;letter-spacing:0;vertical-align:middle;
  color:rgba(224,58,0,.8);
}

.hero-loc-addr-link{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.3);
  text-underline-offset:3px;
  transition:text-decoration-color .18s;
}
@media(hover:hover) and (pointer:fine){
  .hero-loc-addr-link:hover{
    text-decoration-color:rgba(255,255,255,.8);
  }
}

/* Suppress removed hero elements */
.hero-left-gradient,
.hero-depth-layer,
.palm-shadow,
.hero-trust,
.hero-badges,
.hcta-note,
.hcta-pip,
.hero-kicker,
.badge,
.badge-line{
  display:none !important;
}

@media(max-width:1200px){
  .hero-content{width:min(560px,48vw)}
  .title-caribbean{font-size:clamp(56px,6vw,92px)}
  .title-hibachi{font-size:clamp(66px,7.2vw,112px)}
  .hero-actions{flex-direction:column;align-items:flex-start;gap:12px}}

@media(max-width:780px){
  /* At least a screen, and taller when the content needs it: on the smallest
     phones the headline, buttons and a three-line stop name do not fit in
     one, and a fixed height made them overlap the menu or the bar. */
  .hero{height:auto;min-height:max(760px,100vh);min-height:max(760px,100dvh);display:flex;flex-direction:column}
  .hero-bg{background-position:73% center;filter:brightness(.98) contrast(1.04) saturate(1.02)}
  .hero-overlay{
    /* Direccional: la columna izquierda sostiene el titular, la derecha deja
       respirar la cara del chef. Antes era solo vertical y la apagaba igual. */
    background:
      linear-gradient(90deg,
        rgba(0,0,0,.46) 0%,
        rgba(0,0,0,.34) 40%,
        rgba(0,0,0,.06) 74%,
        rgba(0,0,0,0) 100%
      ),
      /* El tramo del 58% es el que cae sobre EXPERIENCE y sostiene el
         titular: queda intacto en .44. Sólo baja el pie (.88/.97 → .66/.82),
         que era lo que apagaba la foto bajo los botones. */
      linear-gradient(180deg,
        rgba(0,0,0,.30) 0%,
        rgba(0,0,0,.12) 30%,
        rgba(0,0,0,.44) 58%,
        rgba(0,0,0,.58) 80%,
        rgba(0,0,0,.40) 100%
      ),
      /* The eyebrow and "Bring the" sat on the chef's red hat and measured
         3:1. A shade sized to those two lines fixes them without dimming
         his face, which a taller band would. */
      radial-gradient(ellipse 96% 8% at 0% 19%,rgba(0,0,0,.62) 0%,rgba(0,0,0,.46) 58%,transparent 100%);
  }
  /* Room under the content for the bar laid over the hero's foot. It was a
     fixed 70px, and a stop name long enough to wrap three lines covered the
     buttons on a small phone; schedule.js reports the bar's real height. */
  .hero-inner{flex:1 0 auto;height:auto;padding:var(--nav-h) var(--gutter) calc(var(--hero-bar-h, 60px) + 10px);align-items:center}
  .hero-content{width:100%;padding-top:0;transform:none}
  .hero-meta{gap:4px;margin-bottom:14px}
  .hero-script-top{margin-left:-.09em;font-size:26px}
  .title-caribbean{font-size:clamp(53px,14.6vw,73px);transform:scaleX(.92)}
  .title-hibachi{font-size:clamp(67px,17.7vw,91px);letter-spacing:.012em}
  .title-experience{font-size:clamp(30px,8vw,43px);letter-spacing:.24em;gap:10px;margin-top:8px;margin-left:0}
  .title-experience i{width:24px}
  .title-backyard{margin-left:0;font-size:clamp(24px,6.5vw,36px)}
  .hero-copy{margin-top:20px;max-width:360px;font-size:16px}
  .hero-copy br{display:none}
  .hero-actions{margin-top:26px;width:100%;flex-direction:column;align-items:flex-start;gap:12px}
  .hcta-primary,.hcta-secondary{width:min(100%,330px);min-width:0;height:54px;font-size:12px;padding:0 20px}
  /* A long stop name — "Hispanic Heritage Celebration" plus its park — is
     three times the width of a phone. Scrolling it sideways hid the fact
     behind an invisible gesture; wrapping shows all of it and lets the bar
     grow instead. */
  /* The desktop bar's 60px is two phone lines tall, so a stop that fits on one
     line sat in a strip with a line's worth of empty space under it. The
     content sets the height here: one line (46px), two (66px), or more. The
     floor is one line, so the loading skeleton does not jump when text lands.
     Measured ink, not boxes: wrapped lines centre on equal padding, but on one
     line the pin's shape sits 2px low in its box, so that case gets 11/13.
     schedule.js marks which case the bar is in. */
  .hero-location-bar{min-height:46px;padding:12px 0}
  .hero-location-bar[data-lines="one"]{padding:11px 0 13px}
  /* One flat shade, not the desktop's fade. The fade let the photo show through
     the top of the bar, so the eye placed the bar's edge where it turned dark,
     and centred text read as sitting high above a strip of black. */
  .hero-location-bar{background:rgba(5,5,5,.8)}
  .hero-location-inner{
    --bar-gap:11px;gap:5px 11px;font-size:10px;letter-spacing:.18em;padding:0 var(--gutter);line-height:1.5;
  }
  .hero-location-inner>span{overflow-wrap:anywhere}}

/* A portrait phone shows a third of the photo's width. At 73% that third
   always falls inside the strip from 36.5% to 86.5%, so the phone downloads
   only that strip: the same pixels on screen, a quarter fewer bytes. The
   position stays 73% because the strip is cut symmetrically around it. */
@media(max-width:780px) and (max-aspect-ratio:3/4){
  .hero-bg{
    background-image:-webkit-image-set(url('hero-v4-m.webp') 1x, url('hero-v4-m-2x.webp') 2x);
    background-image:image-set(url('hero-v4-m.webp') 1x, url('hero-v4-m-2x.webp') 2x);
  }
}

@media(max-width:430px){
  .hero{min-height:max(720px,100vh);min-height:max(720px,100dvh)}
  .hero-script-top{font-size:22px;margin-left:-.09em}
  .hero-copy{margin-top:20px}
  .title-experience{margin-left:0}
  .title-backyard{margin-left:0}}

/* ══════════════════════════
   ABOUT
══════════════════════════ */
#about{background:var(--dark-2)}

/* ── ABOUT: ATMOSPHERE + CHEF NARRATIVE CARD ── */
#about{position:relative;isolation:isolate}
#about::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 50% 40% at 18% 60%,rgba(242,154,18,.05),transparent 62%),
    radial-gradient(ellipse 35% 30% at 85% 30%,rgba(11,143,134,.03),transparent 58%);
}
#about .wrap{position:relative;z-index:1}
/* ══════════════════════════
   SERVICES STRIP
══════════════════════════ */
#svcs{
  background:var(--dark);
  padding:clamp(56px,6vw,84px) 0;
  border-top:1px solid rgba(242,154,18,.07);
  border-bottom:1px solid rgba(242,154,18,.07);
  position:relative;isolation:isolate;
}
#svcs::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 50% 40% at 50% 0%,rgba(242,154,18,.04),transparent 60%),
    radial-gradient(ellipse 28% 50% at 0% 55%,rgba(11,143,134,.025),transparent 55%),
    radial-gradient(ellipse 28% 50% at 100% 55%,rgba(11,143,134,.025),transparent 55%);
}
#svcs .wrap{position:relative;z-index:1}

/* ══════════════════════════
   STATEMENT STRIP (unused)
══════════════════════════ */
#statement{
  padding:0;overflow:hidden;
  background:var(--teal);
  border-top:1px solid rgba(11,143,134,.25);
  border-bottom:1px solid rgba(11,143,134,.25);
  position:relative;
}
#statement::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0,transparent 1px,transparent 60px,rgba(0,0,0,.08) 61px);pointer-events:none}
/* ══════════════════════════
   SOCIAL PROOF
══════════════════════════ */
#proof{background:var(--dark-2);padding:80px 0;position:relative;overflow:hidden}
#proof::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 0% 100%,rgba(11,143,134,.10),transparent 60%),radial-gradient(ellipse 60% 50% at 100% 0%,rgba(204,34,0,.08),transparent 60%);pointer-events:none}

/* ══════════════════════════
   MENU
══════════════════════════ */

/* ── Base: pure charcoal */
#menu{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--dark);
}

/* All menu content sits above atmosphere */
#menu .wrap{position:relative;z-index:2}
.tabs{
  display:flex;gap:0;justify-content:center;flex-wrap:wrap;
  margin-bottom:clamp(40px,5vw,64px);
  border-bottom:1px solid rgba(243,234,220,.06);
}
.tab{
  font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:3px;
  text-transform:uppercase;padding:14px 22px;
  cursor:pointer;transition:transform var(--dur-press) var(--ease-out),border-color var(--dur-hover) ease,background var(--dur-hover) ease;
  background:transparent;border:none;border-bottom:2px solid transparent;
  color:rgba(168,152,136,.55);
  margin-bottom:-1px;
}
@media(hover:hover) and (pointer:fine){
  .tab:hover{color:rgba(243,234,220,.75);border-bottom-color:rgba(243,234,220,.15)}
}
.tab.on{color:var(--cream);border-bottom-color:var(--amber)}

/* ── Category blocks: editorial, spacious */
.mcat{
  position:relative;
  padding:clamp(32px,4vw,52px) clamp(24px,3vw,40px) clamp(28px,3.5vw,44px);
  margin-bottom:clamp(32px,4vw,56px);
  border:none;
  border-top:1px solid rgba(243,234,220,.06);
  border-radius:0;
  background:none;
  box-shadow:none;
}

/* ══════════════════════════════════════════════════════════════════════════
   PACKAGES
   ──────────────────────────────────────────────────────────────────────────
   Two cards on the request card's surface (6px panel, amber hairline), the
   menu's section rule and price voice for the upgrades. Nothing new except
   the one moment a card arrives: its top edge sears in, once.
   ══════════════════════════════════════════════════════════════════════════ */
#packages{position:relative;isolation:isolate;background:var(--dark)}
.pk-shell{position:relative;z-index:1}
/* One lede under every section title: what the section is for, in a line. */
.sec-lede{
  max-width:34ch;margin:0 auto;
  font-family:'Lato',sans-serif;font-size:clamp(15px,1.15vw,17px);line-height:1.6;
  color:rgba(243,234,220,.62);text-wrap:balance;
}

/* ─── SECTION MARK ────────────────────────────────────────────────────────
   Between every section title and its line: the three marks a hot spatula
   leaves on the flat-top. The middle one still holds heat. Two hairlines
   draw out from the marks as the heading lands — once per visit, so it may
   take a little longer than UI motion, and nothing waits on it.
   All three bars are one element: the side bars are box-shadows, so they
   inherit its slant and move as one.                                     */
.sec-mark{
  --mark-gap:7px;
  position:relative;display:block;
  width:clamp(128px,13vw,168px);height:12px;
  margin:clamp(4px,.6vw,8px) auto clamp(14px,1.5vw,20px);
}
.sec-mark::before,.sec-mark::after{
  content:'';position:absolute;top:50%;
  width:calc(50% - var(--mark-gap) * 2 - 6px);height:1px;
  transition:transform 760ms var(--ease-out) 260ms;
}
.sec-mark::before{
  left:0;transform-origin:right center;
  background:linear-gradient(90deg,transparent,rgba(242,154,18,.5));
}
.sec-mark::after{
  right:0;transform-origin:left center;
  background:linear-gradient(90deg,rgba(242,154,18,.5),transparent);
}
.sec-mark i{
  position:absolute;left:50%;top:0;
  width:2px;height:12px;margin-left:-1px;border-radius:1px;
  background:var(--fire-l);
  box-shadow:
    calc(var(--mark-gap) * -1) 0 0 rgba(242,154,18,.62),
    var(--mark-gap) 0 0 rgba(242,154,18,.62),
    0 0 8px rgba(224,58,0,.55);
  transition:transform 420ms var(--ease-out) 140ms,opacity 420ms var(--ease-out) 140ms;
}

/* Before the heading lands: lines undrawn, marks cold. */
.r:not(.vis) .sec-mark::before,
.r:not(.vis) .sec-mark::after,
.sec-mark.r:not(.vis)::before,
.sec-mark.r:not(.vis)::after{transform:scaleX(0)}
/* Every title ends in amber italic, so the marks share its slant rather
   than the heading's upright axis. */
.sec-mark i{transform:skewX(-24deg)}
.r:not(.vis) .sec-mark i,
.sec-mark.r:not(.vis) i{opacity:0;transform:skewX(-24deg) scaleY(.4)}

.sec-mark + .sec-lede,
.sec-mark + .fcta-lede{margin-top:0}
.fcta-headline + .sec-mark{margin-top:clamp(20px,2.2vw,28px)}

@media(prefers-reduced-motion:reduce){
  .sec-mark::before,.sec-mark::after{transition:none;transform:none!important}
  .sec-mark i{transition:opacity 200ms ease}
  .r:not(.vis) .sec-mark i,.sec-mark.r:not(.vis) i{transform:skewX(-24deg)}
}

.pk-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,28px);
  margin-bottom:var(--stack-gap);
}

.pk-card{
  position:relative;
  display:flex;flex-direction:column;
  padding:clamp(28px,3.2vw,44px);
  background:linear-gradient(170deg,rgba(24,18,12,.9) 0%,rgba(10,8,6,.94) 100%);
  border:1px solid rgba(242,154,18,.16);
  border-radius:6px;
  transition:border-color var(--dur-hover) ease;
}
/* The sear: a line of heat drawn across the top edge as the card lands.
   clip-path, so it costs no layout; ease-out, so it leaves fast and settles. */
.pk-card::before{
  content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:2px;
  border-radius:6px 6px 0 0;
  background:linear-gradient(90deg,var(--fire-l),var(--amber) 60%,rgba(242,154,18,0));
  clip-path:inset(0 100% 0 0);
  transition:clip-path 900ms var(--ease-out) 180ms;
}
.pk-card.vis::before{clip-path:inset(0 0 0 0)}
@media(hover:hover) and (pointer:fine){
  .pk-card:hover{border-color:rgba(242,154,18,.34)}
}

.pk-kicker{
  font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--amber);margin-bottom:10px;
}
.pk-name{
  font-family:'Playfair Display',serif;font-weight:900;
  font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.08;letter-spacing:-.02em;
  color:var(--cream);
}
.pk-price{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;
  margin:clamp(18px,2vw,26px) 0 clamp(22px,2.4vw,30px);
  padding-bottom:clamp(22px,2.4vw,30px);
  border-bottom:1px solid rgba(243,234,220,.08);
}
.pk-amt{
  font-family:'Oswald',sans-serif;font-weight:500;
  font-size:clamp(3rem,5vw,4.2rem);line-height:.9;letter-spacing:-.01em;
  color:var(--cream);font-variant-numeric:tabular-nums;
}
.pk-unit{
  font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(243,234,220,.5);
}
/* The number a guest compares against a restaurant bill. Its own line, in the
   price's quiet voice, so the package total stays the figure that leads. */
.pk-per{
  flex-basis:100%;
  font-family:'Lato',sans-serif;font-size:14px;line-height:1.4;
  color:var(--amber);
}

.pk-pick{margin-bottom:18px}
.pk-pick-lbl{
  font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tx-quiet);margin-bottom:6px;
}
.pk-pick-opts{
  display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;
  font-family:'Oswald',sans-serif;font-size:clamp(17px,1.4vw,20px);letter-spacing:.03em;
  color:var(--cream);
}
.pk-pick-opts i{width:4px;height:4px;border-radius:50%;background:var(--fire-l);opacity:.8}

.pk-inc{list-style:none;display:grid;gap:10px;margin-bottom:clamp(28px,3vw,36px)}
.pk-inc li{
  position:relative;padding-left:26px;
  font-family:'Lato',sans-serif;font-size:15px;line-height:1.45;
  color:rgba(243,234,220,.82);
}
/* A drawn check, not an icon font: two borders rotated into a tick. */
.pk-inc li::before{
  content:'';position:absolute;left:3px;top:.36em;
  width:6px;height:11px;
  border:solid var(--amber);border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);opacity:.85;
}
/* The list follows its card in, 40ms apart. Decorative only: the items are
   readable the whole time the card is still fading. */
.pk-card .pk-inc li{
  opacity:0;transform:translateY(6px);
  transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out);
  transition-delay:calc(260ms + var(--i) * 40ms);
}
.pk-card.vis .pk-inc li{opacity:1;transform:none}

/* Outlined, like Book Private Event in Follow the Fire: two parallel choices
   should not outshout the one red button that sends the request. */
.pk-foot{margin-top:auto}
.pk-cta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:54px;padding:0 22px;
  font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cream);
  background:rgba(0,0,0,.28);
  border:1px solid rgba(242,154,18,.5);border-radius:2px;
  transition:transform var(--dur-press) var(--ease-out),
             background-color var(--dur-hover) ease,border-color var(--dur-hover) ease;
}
.pk-cta .ico{color:var(--amber);transition:transform var(--dur-hover) var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .pk-cta:hover{background:rgba(242,154,18,.1);border-color:var(--amber)}
  .pk-cta:hover .ico{transform:translateX(3px)}
}
.pk-cta:active{transform:scale(.975)}

/* The hand-off mark on the form's package chip: a ring that settles out.
   Transform and opacity on a pseudo-element, so the chip itself never moves. */
.rq-chip.is-handed::after,
.bk2-date-wrap.is-handed::after{
  content:'';position:absolute;inset:-4px;pointer-events:none;
  border:1px solid var(--amber);border-radius:5px;
  animation:pk-handed 1100ms var(--ease-out) both;
}
@keyframes pk-handed{
  0%  {opacity:0;transform:scale(.96)}
  25% {opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.03)}
}

/* ─── UPGRADES ─── */
.pk-up-list{
  list-style:none;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,48px);
}
.pk-up-item{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 12px;
  padding-top:16px;border-top:1px solid rgba(243,234,220,.08);
}
.pk-up-item strong{
  font-family:'Oswald',sans-serif;font-weight:400;
  font-size:clamp(17px,1.45vw,21px);letter-spacing:.06em;text-transform:uppercase;
  color:rgba(243,234,220,.92);
}
.pk-up-item .ftm-pr{grid-column:2;grid-row:1}
.pk-up-item .ftm-pr small{font-size:.62em;letter-spacing:.08em;margin-left:2px;color:var(--tx-quiet);text-shadow:none}
.pk-up-desc{
  grid-column:1 / -1;
  font-family:'Lato',sans-serif;font-size:13.5px;line-height:1.4;
  color:var(--tx-quiet);
}
.pk-how{
  max-width:52ch;margin:clamp(36px,4vw,48px) auto 0;text-align:center;
  font-family:'Lato',sans-serif;font-size:14px;line-height:1.6;
  color:rgba(243,234,220,.5);text-wrap:balance;
}

@media(max-width:860px){
  .pk-grid{grid-template-columns:minmax(0,1fr)}
  .pk-up-list{grid-template-columns:minmax(0,1fr);gap:16px}
}

@media(prefers-reduced-motion:reduce){
  .pk-card::before{clip-path:none;transition:none}
  .pk-card .pk-inc li{transform:none;transition:opacity 200ms ease;transition-delay:0ms}
}

/* ══════════════════════════════════════════════════════════════════════════
   CATERING — REQUEST FLOW
   ──────────────────────────────────────────────────────────────────────────
   Four steps on the left, the brief they are writing on the right. Every
   token here comes from the top of this file: two radii (3px controls,
   6px panels), one focus ring, one ease, and amber reserved for the thing
   that is currently true.
   ══════════════════════════════════════════════════════════════════════════ */
#catering{
  /* Same ground, glow and texture as Menu above and Follow the Fire below
     (.ftm-bg), and the same vertical rhythm — so the page reads as one
     surface instead of a black slab between two textured sections. */
  position:relative;isolation:isolate;
  padding:clamp(88px,9vw,120px) 0;
  background:var(--dark);
}
/* Menu ends in a fire glow that was written to bleed into this section and
   never did: it stopped dead at the boundary, 57,21,6 to 6,6,6 in one pixel.
   The same gradient, mirrored, makes the glow straddle the seam. */
#packages::before{
  content:'';position:absolute;left:0;right:0;top:0;height:340px;
  z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(224,58,0,.235) 0%,rgba(224,58,0,.08) 45%,transparent);
}
.rq-shell{position:relative;z-index:1}

/* ─── THE CARD ────────────────────────────────────────────────────────────
   One object: the questions on top, the ticket they produce torn off along a
   perforation underneath. A side rail left most of its height empty and
   squeezed the chips into ragged rows; a footer spends that width on the
   questions instead.                                                     */
.rq-grid{
  display:grid;grid-template-columns:minmax(0,1fr);
  max-width:1120px;margin:0 auto;
  background:linear-gradient(170deg,rgba(24,18,12,.9) 0%,rgba(10,8,6,.94) 100%);
  border:1px solid rgba(242,154,18,.2);
  border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04);
}
.rq-grid[hidden]{display:none}
.rq-form{padding:clamp(22px,3.4vw,44px) clamp(18px,3.4vw,46px);min-width:0}

/* ─── GROUPS ──────────────────────────────────────────────────────────────
   The labels already name every question, so a heading per group was a
   second label saying the same thing. A hairline is enough to group.     */
.rq-groups{display:flex;flex-direction:column}
.rq-group{
  border:0;padding:0;margin:0;min-width:0;
  display:flex;flex-direction:column;gap:clamp(14px,1.6vw,18px);
}
.rq-group+.rq-group{
  margin-top:clamp(20px,2.6vw,30px);padding-top:clamp(20px,2.6vw,30px);
  border-top:1px solid rgba(243,234,220,.09);
}

/* ─── FIELDS ────────────────────────────────────────────────────────────── */
.rq-field{display:flex;flex-direction:column;gap:9px;min-width:0}
.rq-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,18px)}
.rq-trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(12px,1.6vw,18px)}
.rq-label{
  display:flex;align-items:baseline;gap:9px;margin:0;line-height:16px;height:16px;
  font-family:'Oswald',sans-serif;font-weight:500;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(243,234,220,.78);
}
/* Required mark: hugs its word (cancels most of the label's 9px gap), in the
   fire red the site already uses for prices, so it reads as part of the voice
   rather than an alarm. */
.rq-req{margin-left:-7px;color:var(--fire-l);font-weight:500;letter-spacing:0}
.rq-label em{
  font-family:'Lato',sans-serif;font-style:normal;font-weight:400;
  font-size:11.5px;line-height:16px;letter-spacing:0;text-transform:none;
  color:var(--tx-quiet);
}
/* Text inputs. One height, one radius, a leading icon that names the field
   and no trailing ornament competing with it. */
.rq-control{position:relative;display:flex;align-items:center}
.rq-control-ico{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  color:rgba(242,154,18,.6);pointer-events:none;
  transition:color var(--dur-hover) ease;
}
.rq-control:focus-within .rq-control-ico{color:var(--amber)}
.rq-control-ico+.rq-input{padding-left:48px}
.rq-input{
  width:100%;min-width:0;height:52px;
  padding:0 18px;
  font-family:'Lato',sans-serif;font-size:15px;color:var(--cream);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(243,234,220,.13);
  border-radius:3px;outline:none;
  -webkit-appearance:none;appearance:none;
  transition:border-color var(--dur-hover) ease,background-color var(--dur-hover) ease;
}
.rq-input::placeholder{color:var(--tx-quiet)}
@media(hover:hover) and (pointer:fine){
  .rq-input:hover{border-color:rgba(243,234,220,.24)}
}
.rq-input:focus{border-color:rgba(242,154,18,.65);background:rgba(255,255,255,.055)}
.rq-textarea{
  height:auto;min-height:84px;padding:14px 18px;
  line-height:1.7;resize:vertical;
}
/* Keyboard instructions for the date grid are read out, not shown: on screen
   they sat under the error for the same field, two messages at once. */
.rq-hint{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Errors take no space until they say something, so nothing jumps on blur. */
.rq-err{
  display:flex;align-items:center;gap:7px;margin:0;
  font-family:'Lato',sans-serif;font-size:13px;line-height:1.45;color:#FF8A6B;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height var(--dur-pop) var(--ease-out),opacity var(--dur-pop) var(--ease-out);
}
.rq-field.has-error .rq-err{max-height:4em;opacity:1}
/* An empty error or a hidden hint still counts as a flex child, and each one
   added a 9px gap — enough to make one group sit visibly lower than the next. */
.rq-err:empty{display:none}
/* Revealed by display, so the fade needs a starting style to have a from. */
@starting-style{.rq-field.has-error .rq-err{opacity:0}}
.rq-field.has-error .rq-input{border-color:rgba(255,138,107,.6)}
.rq-field.has-error .rq-chip span{border-color:rgba(255,138,107,.34)}

/* ─── CHOICE CHIPS ────────────────────────────────────────────────────────
   Radios and checkboxes underneath, so the keyboard and the screen reader
   get the semantics and the eye gets a 48px target.                       */
.rq-chips{display:flex;flex-wrap:wrap;gap:8px}
.rq-chips>.rq-chip{flex:1 1 auto}
.rq-chips--even{display:grid;grid-template-columns:repeat(6,1fr)}
.rq-chip{position:relative;display:flex;margin:0;cursor:pointer;min-width:0}
.rq-chip input{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;
}
.rq-chip span{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:46px;padding:0 14px;
  font-family:'Lato',sans-serif;font-size:14px;line-height:1.3;text-align:center;
  color:rgba(243,234,220,.76);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(243,234,220,.13);
  border-radius:3px;
  transition:background-color var(--dur-hover) ease,border-color var(--dur-hover) ease,
             color var(--dur-hover) ease,transform var(--dur-press) var(--ease-out);
}
.rq-chip span b{font-weight:400;color:var(--amber);margin-left:6px}
.rq-chip--num span{padding:0 10px;font-family:'Oswald',sans-serif;font-size:14px;letter-spacing:.04em}
@media(hover:hover) and (pointer:fine){
  .rq-chip input:not(:checked):hover~span{border-color:rgba(243,234,220,.28);color:var(--cream)}
}
.rq-chip input:active~span{transform:scale(.97)}
.rq-chip input:checked~span{
  color:var(--cream);
  background:rgba(242,154,18,.13);
  border-color:rgba(242,154,18,.62);
  box-shadow:inset 0 0 0 1px rgba(242,154,18,.18);
}
.rq-chip input:focus-visible~span{box-shadow:var(--focus)}
/* Add-ons are the only chips you can pick several of. A plus that turns into
   a check says so without a word of instruction. */
.rq-chip input[type="checkbox"]~span::before{
  content:'';width:12px;height:12px;margin-right:8px;flex-shrink:0;
  background:currentColor;opacity:.55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.5v9M1.5 6h9' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.5v9M1.5 6h9' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.rq-chip input[type="checkbox"]:checked~span::before{
  opacity:1;background:var(--amber);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3 4.8 9 10 3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3 4.8 9 10 3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ─── STATUS ──────────────────────────────────────────────────────────────
   One live region for the whole form. Success and failure both land here,
   and the failure branch always carries the phone number.                 */
.rq-status{
  display:none;align-items:center;gap:10px;
  margin:clamp(16px,2vw,20px) 0 0;padding:12px 16px;border-radius:4px;
  font-family:'Lato',sans-serif;font-size:14px;line-height:1.55;
}
.rq-status[data-kind="ok"]{display:flex;color:#7FE8C4;background:rgba(11,143,134,.14);border:1px solid rgba(18,181,170,.36)}
.rq-status[data-kind="error"]{display:flex;color:#FFB3A0;background:rgba(204,34,0,.07);
  border:1px solid rgba(224,58,0,.26);border-left:2px solid var(--fire-l)}

/* ─── THE BRIEF ───────────────────────────────────────────────────────────
   The ticket: what they asked for and the one button that sends it. It rides
   the bottom of the viewport while the card is on screen, so the summary and
   the primary action stay in view without a column of dead space.        */
.rq-brief{
  position:sticky;bottom:0;z-index:2;min-width:0;
  padding:clamp(18px,2.2vw,24px) clamp(18px,3.4vw,46px);
  border-top:1px dashed rgba(243,234,220,.16);
  /* Solid: the chips scroll under it, and any alpha ghosts their labels
     through the summary. */
  background:#0C0907;
  border-radius:0 0 8px 8px;
}
.rq-brief-inner{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:clamp(18px,3vw,40px);
}
.rq-brief-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
.rq-brief-line{
  margin:0;
  font-family:'Playfair Display',serif;font-style:italic;font-weight:700;
  font-size:18px;line-height:1.45;color:rgba(243,234,220,.92);
  text-wrap:pretty;
  transition:filter .2s ease,opacity .2s ease;
}
.rq-brief-line.is-swapping{filter:blur(2.5px);opacity:.45}
.rq-brief-act{display:flex;flex-direction:column;width:300px}

/* One live region for the whole form; the failure branch carries the phone. */
.rq-status{
  display:none;align-items:center;gap:10px;
  margin:0 0 14px;padding:11px 14px;border-radius:3px;
  font-family:'Lato',sans-serif;font-size:13.5px;line-height:1.5;
}
.rq-status[data-kind="ok"]{display:flex;color:#7FE8C4;background:rgba(11,143,134,.14);border:1px solid rgba(18,181,170,.36)}
.rq-status[data-kind="error"]{display:flex;color:#FFB3A0;background:rgba(204,34,0,.07);
  border:1px solid rgba(224,58,0,.26);border-left:2px solid var(--fire-l)}

/* Never disabled into a dead end: pressing it with a gap names the reason
   and puts the cursor on it. */
.rq-next{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;min-height:58px;padding:0 20px;
  font-family:'Oswald',sans-serif;font-size:13px;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--cream);background:var(--fire);
  border-radius:2px;
  box-shadow:0 10px 32px rgba(204,34,0,.28),inset 0 1px 0 rgba(255,255,255,.08);
  transition:background-color var(--dur-hover) ease,box-shadow var(--dur-hover) ease,
             transform var(--dur-press) var(--ease-out),opacity var(--dur-hover) ease;
}
.rq-next-ico{transition:transform var(--dur-hover) var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .rq-next:not(:disabled):hover{background:var(--fire-l);box-shadow:0 14px 40px rgba(204,34,0,.4),inset 0 1px 0 rgba(255,255,255,.1)}
  .rq-next:not(:disabled):hover .rq-next-ico{transform:translateX(3px)}
}
.rq-next:not(:disabled):active{transform:scale(.975)}
.rq-next:disabled{cursor:default;opacity:.72}
.rq-next[data-state="sending"] .rq-next-ico{animation:rq-spin 700ms linear infinite;stroke-dasharray:14 30}
@keyframes rq-spin{to{transform:rotate(360deg)}}
.rq-send-note{
  margin:10px 0 0;text-align:center;
  font-family:'Lato',sans-serif;font-weight:300;font-size:12.5px;
  color:var(--tx-quiet);
}
.rq-call{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  min-height:32px;
  font-family:'Lato',sans-serif;font-size:13.5px;color:rgba(243,234,220,.6);
  transition:color var(--dur-hover) ease;
}
.rq-call .ico{color:var(--amber)}
.rq-call strong{font-family:'Playfair Display',serif;font-style:italic;font-weight:700;font-size:17px;color:var(--amber);margin-left:2px}
@media(hover:hover) and (pointer:fine){
  .rq-call:hover{color:var(--cream)}
}
.rq-alts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px}
/* Text is a phone habit. On a desk it would open nothing on most machines,
   so it shows where a thumb is — and everywhere once sending has failed. */
.rq-text{
  display:none;align-items:center;gap:9px;min-height:44px;
  font-family:'Lato',sans-serif;font-size:13.5px;color:rgba(243,234,220,.72);
  text-decoration:underline;text-decoration-color:rgba(242,154,18,.4);text-underline-offset:4px;
  transition:color var(--dur-hover) ease,transform var(--dur-press) var(--ease-out);
}
.rq-text .ico{color:var(--amber)}
.rq-text:active{transform:scale(.97)}
@media(pointer:coarse){.rq-text{display:inline-flex}}
.rq-grid.is-failed .rq-text{display:inline-flex}
@media(hover:hover) and (pointer:fine){
  .rq-text:hover{color:var(--cream)}
}
.rq-call{min-height:44px}

/* What the live schedule says about the chosen date. Takes no space until
   it has something to say, like the error line beside it. */
.rq-avail{
  display:flex;align-items:baseline;gap:8px;margin:0;
  font-family:'Lato',sans-serif;font-size:13px;line-height:1.45;
}
.rq-avail:empty{display:none}
.rq-avail::before{
  content:'';flex-shrink:0;width:6px;height:6px;border-radius:50%;
  transform:translateY(-1px);background:currentColor;
}
.rq-avail[data-tone="free"]{color:var(--st-avail)}
.rq-avail[data-tone="booked"]{color:rgba(243,234,220,.62)}
.rq-avail[data-tone="booked"]::before{background:var(--st-private)}
@starting-style{.rq-avail{opacity:0}}
.rq-avail{transition:opacity var(--dur-pop) var(--ease-out)}

/* ─── NOTE DISCLOSURE ─────────────────────────────────────────────────────
   Most requests never need a note. It costs one line until it is wanted.  */
.rq-more{
  display:flex;align-items:center;gap:10px;align-self:flex-start;
  min-height:44px;padding:0 2px;
  font-family:'Lato',sans-serif;font-size:14px;color:rgba(243,234,220,.72);
  transition:color var(--dur-hover) ease;
}
.rq-more .ico{color:var(--amber)}
.rq-more em{font-style:normal;font-weight:300;font-size:13px;color:var(--tx-quiet)}
.rq-more[hidden],.rq-field[hidden]{display:none}
/* The note field arrives where the button was. Rare, so it may move — 6px,
   ease-out, under 250ms; it enters, so nothing about it starts slow. */
#rqNote{transition:opacity var(--dur-pop) var(--ease-out),transform var(--dur-pop) var(--ease-out)}
@starting-style{#rqNote{opacity:0;transform:translateY(-6px)}}
@media(hover:hover) and (pointer:fine){
  .rq-more:hover{color:var(--cream)}
}

/* ─── CONFIRMATION ────────────────────────────────────────────────────────
   Not a line of green text: the brief they just wrote, handed back with
   what happens next and the number that always works.                    */
.rq-done{
  max-width:560px;margin:0 auto;text-align:center;
  padding:clamp(34px,4vw,46px) clamp(24px,3vw,38px);
  background:linear-gradient(168deg,rgba(30,22,14,.92),rgba(12,9,6,.96));
  border:1px solid rgba(242,154,18,.26);
  border-radius:6px;
  animation:rq-fade 260ms var(--ease-out) both;
}
.rq-done[hidden]{display:none}

/* ─── SENT ────────────────────────────────────────────────────────────────
   Seen once per booking, so it may take its time — but only just under a
   second, and nothing waits on it. The seal lands, the check writes itself,
   one halo breathes out, then the ticket reads top to bottom. Every step is
   transform, opacity or a stroke — no filters: a blur repaints every frame
   and was the stutter on phones. */
.rq-done>*{animation:rq-rise 420ms var(--ease-out) both}
.rq-done>h3{animation-delay:200ms}
.rq-done>.rq-done-line{animation-delay:260ms}
.rq-done>.rq-done-sub{animation-delay:320ms}
.rq-done>.rq-done-call{animation-delay:380ms}
.rq-done>.rq-done-again{animation-delay:440ms}
@keyframes rq-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.rq-done>.rq-done-mark{position:relative;animation:rq-seal 460ms var(--ease-out) 40ms both}
@keyframes rq-seal{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
/* The check is ~22 units of path; the dash hides it, the offset writes it. */
.rq-done-mark .ico{stroke-dasharray:23;stroke-dashoffset:23;animation:rq-write 360ms var(--ease-in-out) 220ms forwards}
@keyframes rq-write{to{stroke-dashoffset:0}}
.rq-done-mark::after{
  content:'';position:absolute;inset:-1px;border-radius:50%;
  border:1px solid rgba(18,181,170,.55);
  opacity:0;pointer-events:none;
  animation:rq-halo 900ms var(--ease-out) 300ms both;
}
@keyframes rq-halo{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.9)}}

.rq-done-mark{
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;margin:0 auto 22px;
  border-radius:50%;color:var(--teal-l);
  background:rgba(11,143,134,.16);border:1px solid rgba(18,181,170,.4);
}
.rq-done h3{
  font-family:'Playfair Display',serif;font-weight:900;
  font-size:clamp(26px,3vw,34px);line-height:1.15;color:var(--cream);
  letter-spacing:-.02em;
}
.rq-done-line{
  margin:14px auto 0;max-width:44ch;
  font-family:'Playfair Display',serif;font-style:italic;font-weight:700;
  font-size:16px;line-height:1.55;color:rgba(243,234,220,.82);
}
.rq-done-sub{
  margin:16px auto 0;max-width:46ch;
  font-family:'Lato',sans-serif;font-weight:300;font-size:14px;line-height:1.7;
  color:rgba(243,234,220,.55);
}
.rq-done-call{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  margin-top:26px;min-height:56px;padding:0 30px;
  font-family:'Playfair Display',serif;font-style:italic;font-weight:700;font-size:20px;
  color:var(--amber);
  background:rgba(242,154,18,.07);
  border:1px solid rgba(242,154,18,.32);border-radius:3px;
  transition:background-color var(--dur-hover) ease,border-color var(--dur-hover) ease,transform var(--dur-press) var(--ease-out);
}
.rq-done-call .ico{font-style:normal}
@media(hover:hover) and (pointer:fine){
  .rq-done-call:hover{background:rgba(242,154,18,.14);border-color:rgba(242,154,18,.55)}
}
.rq-done-call:active{transform:scale(.985)}
.rq-done-again{
  display:block;margin:22px auto 0;min-height:44px;padding:0 8px;
  font-family:'Oswald',sans-serif;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tx-quiet);
  transition:color var(--dur-hover) ease;
}
@media(hover:hover) and (pointer:fine){
  .rq-done-again:hover{color:var(--cream)}
}

/* ─── RESPONSIVE ──────────────────────────────────────────────────────────
   Same card, same order at every width: questions, then the ticket with the
   button. On one column the perforation turns horizontal and nothing sticks —
   a panel following the thumb while typing is noise.                     */
@media(max-width:960px){
  /* A bar pinned over the thumb while typing is noise; on one column the
     ticket simply closes the card. */
  .rq-brief{position:static;background:rgba(0,0,0,.22)}
  .rq-brief-inner{grid-template-columns:1fr;gap:18px}
  .rq-brief-act{width:auto}
  .rq-brief-copy{display:contents}
  .rq-alts{order:1;justify-content:center}
}
@media(max-width:720px){
  .rq-chips--even{grid-template-columns:repeat(3,1fr)}
  .rq-trio{grid-template-columns:1fr 1fr}
  .rq-trio .rq-field[data-field="email"]{grid-column:1/-1}
}
@media(max-width:560px){
  .rq-duo,.rq-trio{grid-template-columns:1fr}
  /* Ragged chip rows read as loose on a phone. A two-column grid gives every
     choice the same edge; an odd one out takes the full row. */
  .rq-chips:not(.rq-chips--even){display:grid;grid-template-columns:1fr 1fr}
  .rq-chips:not(.rq-chips--even):not(:has(b))>.rq-chip:last-child:nth-child(odd){grid-column:1/-1}
  /* The one chip carrying a price gets the full row, so it reads as a line,
     not four broken words — and the other four pair up evenly. */
  .rq-chip:has(b){grid-column:1/-1}
  .rq-chip span{font-size:13.5px;padding:0 10px}
}

@media(prefers-reduced-motion:reduce){
  .rq-done,.rq-done>*,.rq-done>.rq-done-mark{animation:rq-fade 200ms ease both}
  .rq-done-mark .ico{animation:none;stroke-dashoffset:0}
  .rq-done-mark::after{animation:none}
  .rq-brief-line.is-swapping{filter:none;opacity:.55}
  #rqNote{transition:opacity var(--dur-pop) ease}
  @starting-style{#rqNote{transform:none}}
  .rq-next[data-state="sending"] .rq-next-ico{animation:none}
}
@keyframes rq-fade{from{opacity:0}to{opacity:1}}

/* ══════════════════════════
   LOCATION — FOLLOW THE FIRE
══════════════════════════ */
@keyframes live-pulse-dot{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes loc2-float{0%{transform:translateY(0) translateX(0);opacity:0}8%{opacity:.5}85%{opacity:.18}100%{transform:translateY(-90px) translateX(10px);opacity:0}}
.loc2{position:relative;isolation:isolate;overflow:hidden;background:var(--dark);padding:clamp(88px,9vw,120px) 0}
.loc2-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.loc2-bg::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 38% 32% at 0% 52%,rgba(224,58,0,.14),transparent 65%),
    radial-gradient(ellipse 34% 28% at 100% 52%,rgba(224,58,0,.10),transparent 62%),
    radial-gradient(ellipse 55% 30% at 50% 100%,rgba(242,154,18,.07),transparent 70%),
    radial-gradient(circle at 5% 10%,rgba(224,58,0,.28),transparent 3px),
    radial-gradient(circle at 96% 14%,rgba(224,58,0,.2),transparent 2px);
}
.loc2-bg::after{
  content:'';position:absolute;inset:0;
  background-image:url('menu-bg.jpg');
  background-repeat:repeat;background-size:auto;
  opacity:.2;
}
.loc2 .wrap{position:relative;z-index:1}
.loc2-embers{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.loc2-embers span{position:absolute;bottom:0;width:1.5px;height:1.5px;border-radius:50%;background:rgba(242,154,18,.28);filter:blur(.4px);animation:loc2-float var(--d,22s) var(--del,0s) ease-in infinite;opacity:0}
.loc2-embers span:nth-child(1){left:14%;--d:25s;--del:0s;width:2px;height:2px}
.loc2-embers span:nth-child(2){left:42%;--d:19s;--del:5s;background:rgba(224,58,0,.22)}
.loc2-embers span:nth-child(3){left:74%;--d:23s;--del:9s}
/* Section Header */
.loc2-head{text-align:center;padding-bottom:var(--stack-gap)}
.loc2-kicker{display:inline-flex;align-items:center;gap:10px;font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(242,154,18,.82);margin-bottom:16px}
.loc2-kdot{width:5px;height:5px;border-radius:50%;flex-shrink:0;background:var(--fire-l);box-shadow:0 0 6px rgba(224,58,0,.6),0 0 12px rgba(224,58,0,.25);animation:live-pulse-dot 1.8s ease-in-out infinite}
.loc2-title{font-family:'Playfair Display',serif;font-size:clamp(2.8rem,5.2vw,4.6rem);font-weight:900;line-height:1.02;letter-spacing:-.03em;color:var(--cream);margin-bottom:clamp(10px,1vw,16px)}
.loc2-title-em{font-style:italic;color:var(--amber);text-shadow:0 0 48px rgba(242,154,18,.2)}
/* Layout */
.loc2-grid{display:grid;grid-template-columns:1fr .7fr;gap:clamp(14px,2vw,22px);align-items:stretch}
/* Schedule Card */
.loc2-card{--loc2-inset:26px;background:rgba(7,5,4,.90);border:1px solid rgba(243,234,220,.14);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;min-height:0}
/* Schedule Rows */
.loc2-rows{display:flex;flex-direction:column;flex:1;justify-content:space-between}
/* A scanning aid, not a click affordance — and gated, or a tap on a phone
   leaves the row stuck lit with nothing to un-light it. */
@media(hover:hover) and (pointer:fine){
  .loc2-row:hover{background:rgba(243,234,220,.055)}}
/* Current Location Card */
.loc2-cur{background:rgba(7,5,4,.93);border:1px solid rgba(243,234,220,.10);border-top:2px solid rgba(242,154,18,.42);border-radius:3px;overflow:hidden;position:sticky;top:calc(var(--nav-h) + 24px);display:flex;flex-direction:column}
.loc2-live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--teal-l);box-shadow:0 0 6px rgba(18,181,170,.7),0 0 12px rgba(18,181,170,.35);animation:live-pulse-dot 1.8s ease-in-out infinite}
/* Atmospheric branded panel — no photo placeholder */
.loc2-cur-panel{position:relative;aspect-ratio:4/2.8;overflow:hidden;background:linear-gradient(175deg,#0e0605 0%,#080202 55%,#110404 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(14px,2vw,20px) clamp(16px,2.2vw,22px)}
.loc2-cur-panel-grid{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(242,154,18,.007) 0,rgba(242,154,18,.007) 1px,transparent 1px,transparent 50px),repeating-linear-gradient(90deg,rgba(242,154,18,.007) 0,rgba(242,154,18,.007) 1px,transparent 1px,transparent 50px)}
.loc2-cur-panel-glow{position:absolute;bottom:-15%;left:50%;transform:translateX(-50%);width:130%;height:65%;background:radial-gradient(ellipse at 50% 88%,rgba(224,58,0,.13) 0%,rgba(242,154,18,.04) 38%,transparent 64%);pointer-events:none}
.loc2-cur-panel-inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:10px}
.loc2-cur-panel-label{display:flex;align-items:center;gap:8px;font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(243,234,220,.50);font-weight:500}
.loc2-cur-panel-name{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,2.9vw,2.8rem);font-weight:900;line-height:.98;letter-spacing:-.025em;color:var(--cream);text-shadow:0 2px 10px rgba(0,0,0,.65);margin:0;overflow-wrap:anywhere;hyphens:auto}
/* Body under panel */
.loc2-cur-body{padding:clamp(16px,2vw,22px) clamp(16px,2vw,22px) clamp(10px,1.2vw,14px);flex:1}
.loc2-cur-time-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.loc2-cur-hrs{font-family:'Oswald',sans-serif;font-size:clamp(13px,1.1vw,16px);letter-spacing:2px;color:var(--amber);font-weight:600}
.loc2-cur-day-ref{font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(243,234,220,.42)}
.loc2-cur-addr{font-family:'Lato',sans-serif;font-size:12px;font-style:normal;color:rgba(243,234,220,.46);line-height:1.5}
/* CTAs */
.loc2-cur-btns{display:flex;flex-direction:column;gap:10px;padding:4px clamp(16px,2vw,22px) clamp(14px,1.8vw,20px)}
.loc2-cur-btns[hidden]{display:none}
.loc2-btn-dir{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;height:46px;font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;border-radius:2px;white-space:nowrap;transition:transform .22s ease,filter .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;width:100%;padding:0 18px}
.loc2-btn-arrow{font-size:13px;line-height:1;opacity:.65;flex-shrink:0}
.loc2-btn-dir{background:var(--fire-l);color:var(--cream);box-shadow:0 4px 16px rgba(224,58,0,.3)}
@media(hover:hover) and (pointer:fine){
  .loc2-btn-dir:hover{transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 9px 24px rgba(224,58,0,.46)}
}
.loc2-btn-dir svg{stroke:currentColor;flex-shrink:0}
/* Footer */
.loc2-cur-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px clamp(16px,2vw,22px) 13px;border-top:1px solid rgba(243,234,220,.05)}
.loc2-cur-footer>span{font-family:'Lato',sans-serif;font-size:10px;color:rgba(243,234,220,.30)}
.loc2-ig-handle{display:inline-flex;align-items:center;gap:5px;font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(243,234,220,.40);transition:color .2s ease}
.loc2-ig-handle svg{fill:currentColor;flex-shrink:0}
#location{background:var(--dark)}
.live-dot{width:5px;height:5px;border-radius:50%;background:var(--teal-l);box-shadow:0 0 6px rgba(11,143,134,.7),0 0 12px rgba(11,143,134,.4);animation:live-pulse-dot 1.8s ease-in-out infinite}
@keyframes live-pulse-dot{0%,100%{opacity:1}50%{opacity:.35}}
/* ══════════════════════════
   GALLERY
══════════════════════════ */
#gallery{background:var(--dark);padding:80px 0;overflow:hidden}
/* ══════════════════════════
   HIBACHI SHOW SECTION
══════════════════════════ */
#hibachi-show{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(96px,10vw,140px) 0;
  background:var(--dark);
}
#hibachi-show::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 30% at 50% 108%,rgba(242,154,18,.08),transparent 65%),
    radial-gradient(ellipse 30% 20% at 6% 0%,rgba(11,143,134,.04),transparent 58%),
    radial-gradient(ellipse 30% 20% at 94% 0%,rgba(11,143,134,.03),transparent 58%);
}
#hibachi-show .wrap{position:relative;z-index:1}
/* ══════════════════════════
   STATS STRIP (SOCIAL PROOF)
══════════════════════════ */
#stats{
  background:var(--dark-2);
  border-top:1px solid rgba(243,234,220,.05);
  border-bottom:1px solid rgba(243,234,220,.05);
  padding:0;overflow:hidden;position:relative;
  /* Consistent strip — no extra vertical weight */
}
#stats::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%,rgba(245,158,11,.04),transparent 65%),
    radial-gradient(ellipse 25% 55% at 5% 50%,rgba(11,143,134,.04),transparent 55%),
    radial-gradient(ellipse 25% 55% at 95% 50%,rgba(11,143,134,.04),transparent 55%);
}

/* ══════════════════════════
   FINAL CTA SECTION
══════════════════════════ */
#final-cta{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(72px,7.4vw,106px) 0 clamp(64px,7vw,100px);
  background:var(--black);
}
.fcta-bg{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
}
.fcta-bg::before{
  content:'';position:absolute;inset:0;
  background:url('catering-bg.webp');
  background-size:cover;background-position:center 30%;background-repeat:no-repeat;
}
.fcta-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(4,3,2,.80) 0%,rgba(4,3,2,.60) 42%,rgba(4,3,2,.84) 100%),
    radial-gradient(ellipse 80% 50% at 50% 100%,rgba(180,30,0,.22),transparent 65%),
    radial-gradient(ellipse 68% 38% at 50% 0%,rgba(204,34,0,.06),transparent 56%);
}
/* CSS ember particles */
.fcta-embers{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fcta-embers span{
  position:absolute;bottom:-8px;
  width:3px;height:3px;border-radius:50%;
  background:rgba(255,130,0,.85);
  animation:ember-float 9s ease-in infinite;
}
.fcta-embers span:nth-child(1){left:12%;animation-duration:8s;animation-delay:0s;width:2px;height:2px}
.fcta-embers span:nth-child(2){left:28%;animation-duration:11s;animation-delay:2.5s;background:rgba(255,80,0,.7)}
.fcta-embers span:nth-child(3){left:46%;animation-duration:9.5s;animation-delay:1s;width:2px;height:2px}
.fcta-embers span:nth-child(4){left:63%;animation-duration:12s;animation-delay:3.5s;background:rgba(245,158,11,.75)}
.fcta-embers span:nth-child(5){left:78%;animation-duration:8.5s;animation-delay:.8s;width:2px;height:2px}
.fcta-embers span:nth-child(6){left:90%;animation-duration:10s;animation-delay:4s}
.fcta-embers span:nth-child(7){left:5%;animation-duration:13s;animation-delay:6s;background:rgba(255,160,0,.6)}
.fcta-embers span:nth-child(8){left:55%;animation-duration:7.5s;animation-delay:5s;width:2px;height:2px}
@keyframes ember-float{
  0%{transform:translateY(0) translateX(0);opacity:0}
  8%{opacity:1}
  80%{opacity:.6}
  100%{transform:translateY(-55vh) translateX(calc(var(--dx,18px)));opacity:0}}
.fcta-embers span:nth-child(1){--dx:14px}
.fcta-embers span:nth-child(2){--dx:-20px}
.fcta-embers span:nth-child(3){--dx:24px}
.fcta-embers span:nth-child(4){--dx:-16px}
.fcta-embers span:nth-child(5){--dx:20px}
.fcta-embers span:nth-child(6){--dx:-12px}
.fcta-embers span:nth-child(7){--dx:18px}
.fcta-embers span:nth-child(8){--dx:-22px}
/* horizontal amber rule above section */
#final-cta::before{
  content:'';
  position:absolute;top:0;left:5%;right:5%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(245,158,11,.35),rgba(204,34,0,.3),rgba(245,158,11,.35),transparent);
}
.fcta-inner{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}
.fcta-headline{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.8rem,5.8vw,5.4rem);
  font-weight:900;line-height:.92;
  color:var(--cream);
  margin:var(--sp-s) 0 0;
  letter-spacing:-.03em;
}
.fcta-headline{text-wrap:balance}
.fcta-headline span{
  display:block;color:var(--amber);font-style:italic;
  font-size:.78em;
  letter-spacing:.005em;
  margin-top:6px;
}
/* Kicker, flanked by short rules so it reads as a label, not a sentence. */
.fcta-kicker{
  display:inline-flex;align-items:center;gap:14px;
  font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--amber);
}
.fcta-kicker::before,.fcta-kicker::after{
  content:'';width:28px;height:1px;background:currentColor;opacity:.5;
}
.fcta-lede{
  max-width:44ch;margin:clamp(20px,2.2vw,28px) auto 0;
  font-family:'Lato',sans-serif;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.65;
  color:rgba(243,234,220,.78);text-wrap:balance;
}
.fcta-btns{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  margin:clamp(30px,3vw,40px) 0 0;
}
/* Both actions share one height; the call is the quieter of the two. */
.fcta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--btn-h);padding:0 34px;border-radius:var(--btn-radius);
  font-family:'Oswald',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
}
.fcta-btn .ico{transition:transform var(--dur-hover) var(--ease-out)}
.fcta-btn-primary{
  background:var(--fire);color:var(--cream);
  box-shadow:0 6px 24px rgba(204,34,0,.32);
}
.fcta-btn-call{
  color:var(--cream);letter-spacing:.14em;
  border:1px solid rgba(243,234,220,.22);
  background:rgba(5,5,5,.35);
}
.fcta-btn-call .ico{color:var(--amber)}
@media(hover:hover) and (pointer:fine){
  .fcta-btn-primary:hover{box-shadow:0 10px 32px rgba(204,34,0,.5);filter:brightness(1.08)}
  .fcta-btn-primary:hover .ico{transform:translateX(3px)}
  .fcta-btn-call:hover{border-color:rgba(242,154,18,.6);background-color:rgba(5,5,5,.55)}
}
.fcta-trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;
  margin:clamp(22px,2.4vw,28px) 0 0;list-style:none;
  font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(243,234,220,.55);
}
.fcta-trust li{position:relative}
.fcta-trust li+li::before{
  content:'';position:absolute;left:-12.5px;top:50%;
  width:3px;height:3px;margin-top:-1.5px;border-radius:50%;
  background:var(--amber);opacity:.7;
}
@media(max-width:600px){
  .fcta-trust{flex-direction:column;gap:8px}
  .fcta-trust li+li::before{display:none}
}

/* ══════════════════════════
   FOOTER
   The page's closing line, not another section. It sits on the page system
   (one content width, the same gutters), signs with the header's wordmark,
   and carries no decoration of its own: the final CTA right above already
   has the fire, and a second ember field under it only added noise.
══════════════════════════ */
.site-footer{
  background:var(--black);
  border-top:1px solid var(--line);
  padding-top:clamp(64px,7vw,88px);
  font-family:'Lato',sans-serif;
}
.site-footer .wrap{max-width:var(--section-max)}

.ft-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:48px clamp(56px,8vw,120px);
  align-items:start;
}

/* Brand */
.ft-brand{max-width:36ch}
.ft-mark{display:inline-flex;align-items:center;gap:14px;text-decoration:none}
.ft-mark img{
  width:64px;height:64px;object-fit:contain;
  transition:transform var(--dur-hover) var(--ease-out);
}
/* Same wordmark as the header, one step smaller: the footer signs, it does
   not announce. The header's shadow lifts it off the hero photo; on flat
   black it only painted a dark box, so it goes. */
.ft-mark .brand-wm-top{font-size:24px;text-shadow:none}
@media(hover:hover) and (pointer:fine){
  .ft-mark:hover img{transform:translateY(-2px)}
}
.ft-brand-desc{
  margin:20px 0 24px;
  font-size:15px;line-height:1.7;
  color:var(--muted);
}
.ft-socials{display:flex;gap:8px}
.ft-social-ic{
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(243,234,220,.14);border-radius:var(--btn-radius);
  color:rgba(243,234,220,.72);
}
.ft-social-ic svg{width:16px;height:16px;fill:currentColor;display:block}
@media(hover:hover) and (pointer:fine){
  .ft-social-ic:hover{color:var(--amber);border-color:rgba(242,154,18,.4)}
}

/* Link columns — sized to their content, so no rule runs past its words.
   Each row is its hit area: 44px tall and the full column wide, so a short
   word like "Menu" is as easy to hit as "Find The Truck". */
.ft-col-hd{
  margin:0 0 10px;
  font-family:'Oswald',sans-serif;
  font-size:11px;font-weight:500;line-height:1;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--amber);
}
.ft-list{list-style:none;margin:0;padding:0;overflow-wrap:anywhere}
.ft-list a,
.ft-list .ft-area{
  display:flex;align-items:center;min-height:44px;
  font-size:15px;line-height:1.4;
  color:rgba(243,234,220,.72);text-decoration:none;
}
.ft-list a{transition:color var(--dur-hover) ease}
.ft-list .ft-phone{
  font-family:'Oswald',sans-serif;
  font-size:20px;letter-spacing:.06em;
  color:var(--cream);
}
/* Service area is information, not a link: muted, led by the site's pin,
   and it never reacts to the pointer. */
.ft-list .ft-area{gap:8px;color:var(--muted)}
.ft-area .ico{flex:none;color:var(--amber)}
@media(hover:hover) and (pointer:fine){
  .ft-list a:hover{color:var(--cream)}
  .ft-list .ft-phone:hover{color:var(--amber-l)}
}
/* Hover is gated, so this is what a thumb gets. */
.ft-list a:active,.ft-credit-link:active{color:var(--amber-l)}
.ft-mark:active img{transform:scale(.96)}

/* Legal line — inside the content width, so its rule aligns with everything
   above instead of running edge to edge. */
.ft-bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:0 24px;
  margin-top:clamp(56px,6vw,80px);
  padding-block:12px;
  border-top:1px solid var(--line);
  font-size:12px;letter-spacing:.04em;
  color:rgba(243,234,220,.55);
}
.ft-copy,.ft-credit{margin:0;min-height:44px;display:flex;align-items:center}
.ft-credit-link{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  color:inherit;text-decoration:none;
  transition:color var(--dur-hover) ease;
}
/* Neutron is a company name, set in the line's own type — not the site's
   display italic, which belongs to Whooopsieee. */
.ft-credit-name{color:rgba(243,234,220,.8)}
.ft-neutron-logo{
  height:14px;width:auto;
  opacity:.6;
  transition:opacity var(--dur-hover) ease;
}
@media(hover:hover) and (pointer:fine){
  .ft-credit-link:hover{color:rgba(243,234,220,.8)}
  .ft-credit-link:hover .ft-neutron-logo{opacity:1}
}

@media(max-width:900px){
  .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-brand{grid-column:1/-1}
}
@media(max-width:560px){
  .ft-grid{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .ft-list--nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .ft-mark img{width:56px;height:56px}
  .ft-mark .brand-wm-top{font-size:22px}
}

/* ══════════════════════════
   REVEAL
══════════════════════════ */
.r{opacity:0;transform:translateY(20px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.r.rl{transform:translateX(-20px)}
.r.rr{transform:translateX(20px)}
.r.vis{opacity:1;transform:none}

/* ══════════════════════════
   SCROLL PROGRESS BAR
══════════════════════════ */
.progress-bar{
  position:fixed;top:0;left:0;z-index:9999;
  height:2px;width:100%;
  background:var(--amber);
  opacity:.7;
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
  pointer-events:none;
}

/* ══════════════════════════
   BACK TO TOP BUTTON
══════════════════════════ */
.btt{
  position:fixed;bottom:30px;right:30px;z-index:500;
  width:36px;height:36px;border-radius:2px;
  background:var(--dark-3);
  border:1px solid rgba(242,154,18,.22);
  box-shadow:0 4px 20px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(14px) scale(.88);
  transition:opacity .35s,transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;
  pointer-events:none;
}
.btt.show{opacity:1;transform:none;pointer-events:auto}
@media(hover:hover) and (pointer:fine){
  .btt:hover{box-shadow:0 8px 24px rgba(0,0,0,.6);border-color:rgba(242,154,18,.5);transform:translateY(-2px)}
}
.btt svg{width:13px;height:13px;stroke:var(--amber)}

/* ══════════════════════════
   RESPONSIVE
══════════════════════════ */

@media(max-width:1200px){
  .site-header{grid-template-columns:180px 1fr auto}
  .brand img{width:80px;height:80px}
  .desktop-nav{--nav-pad:15px;font-size:19px}
  .nav-cta{font-size:13px;padding:10px 20px 10px 15px}}

@media(max-width:1024px){
  .site-header{grid-template-columns:150px 1fr 50px}
  .brand img{width:74px;height:74px}
  .brand-wm-top{font-size:24px}
  .desktop-nav{--nav-pad:11px;font-size:17px}
  .nav-cta{display:none}
  .mobile-menu{display:flex}
  /* Remove sticky on the current-location card — prevents scroll lock on tablets and landscape phones */
  .loc2-cur{position:static}}

@media(max-width:780px){
  :root{--nav-h:88px}
  .site-header{grid-template-columns:1fr auto;padding:0 var(--gutter);align-items:center}
  .brand img{width:62px;height:62px}
  .brand-wm{gap:3px}
  .brand-wm-top{font-size:22px}
  .brand-wm-btm{font-size:10px;letter-spacing:.28em}
  .desktop-nav,.nav-cta{display:none}
  .mobile-menu{display:flex}

  /* Location loc2 responsive */
  .loc2-grid{grid-template-columns:1fr}
  .loc2-cur{position:static}
  .loc2-cur-panel{aspect-ratio:16/9}
  .fcta-btns{flex-direction:column;align-items:stretch;align-self:stretch}
  .fcta-btn{justify-content:center}
  .btt{display:none !important}}

@media(max-width:430px){

  .btt{display:none !important}

  /* Location loc2 small mobile */
  .loc2-title{font-size:clamp(2.2rem,10vw,3rem)}}


/* Reduced motion means fewer and gentler, not none. Movement and looping
   decoration go; opacity and colour stay, because those are what tell you a
   thing changed. The blanket duration:0 here also silently killed the
   schedule's deliberate swap and week-shift transitions. */
@media(prefers-reduced-motion:reduce){
  .hero-embers,.loc2-embers,.fcta-embers{display:none}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
  .r,.r.rl,.r.rr{transform:none}
  *{transition-property:opacity,color,background-color,border-color,box-shadow!important}
}

/* ══════════════════════════
   FOOD TRUCK MENU (ftm)
══════════════════════════ */

/* Atmospheric bottom fire glow — bleeds warmth into the catering section above */
#menu.ftm::before{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:340px;
  z-index:0;pointer-events:none;
  background:linear-gradient(to top,rgba(224,58,0,.20) 0%,rgba(224,58,0,.07) 55%,transparent);
}

/* Top edge warmth — ties into the dark header above */
#menu.ftm::after{
  content:'';
  position:absolute;
  left:0;right:0;top:0;
  height:140px;
  z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.22),transparent);
}

#menu.ftm{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(88px,9vw,120px) 0 clamp(72px,8vw,104px);
  background:var(--dark);
}

.ftm-bg{position:absolute;inset:0;z-index:-2;pointer-events:none}

.ftm-bg::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 38% 32% at 0% 52%,rgba(224,58,0,.14),transparent 65%),
    radial-gradient(ellipse 34% 28% at 100% 52%,rgba(224,58,0,.10),transparent 62%),
    radial-gradient(ellipse 55% 30% at 50% 100%,rgba(242,154,18,.07),transparent 70%),
    radial-gradient(circle at 5% 10%,rgba(224,58,0,.28),transparent 3px),
    radial-gradient(circle at 96% 14%,rgba(224,58,0,.2),transparent 2px);
}

.ftm-bg::after{
  content:'';position:absolute;inset:0;
  background-image:url('menu-bg.jpg');
  background-repeat:repeat;background-size:auto;
  opacity:.2;
}

#menu.ftm .wrap{position:relative;z-index:2}


.ftm-ch{
  display:flex;align-items:center;gap:16px;
  font-family:'Oswald',sans-serif;
  font-size:clamp(1.35rem,2vw,2.1rem);
  font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fire-l);margin-bottom:24px;
}

.ftm-ch::before,.ftm-ch::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--fire-l));
  opacity:.45;
}

.ftm-ch::after{background:linear-gradient(90deg,var(--fire-l),transparent)}

.ftm-ch-note{
  margin:-14px 0 22px;
  font-family:'Oswald',sans-serif;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--tx-quiet);
}

.ftm-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,80px);
  align-items:start;
  margin-bottom:var(--stack-gap);
}

.ftm-ul{list-style:none;display:flex;flex-direction:column}

.ftm-li{padding:11px 0;border-bottom:1px solid rgba(243,234,220,.07)}
.ftm-li:last-child{border-bottom:none}
.ftm-li-top{display:flex;align-items:center}

.ftm-li-top strong,.ftm-li--sm strong{
  font-family:'Oswald',sans-serif;
  font-size:clamp(16px,1.35vw,21px);
  font-weight:400;letter-spacing:.02em;
  color:rgba(243,234,220,.92);flex:0 0 auto;line-height:1.1;
}

.ftm-li-desc{
  display:block;margin-top:4px;
  font-family:'Lato',sans-serif;
  font-size:13px;color:var(--tx-quiet);line-height:1.35;
}

.ftm-li--sm{display:flex;align-items:center}

.ftm-dot-line{
  flex:1;min-width:14px;height:1px;
  background:repeating-linear-gradient(
    90deg,
    rgba(243,234,220,.38) 0 2px,
    transparent 2px 8px
  );
  margin:0 10px;align-self:center;
}

.ftm-pr{
  font-family:'Oswald',sans-serif;
  font-size:clamp(16px,1.35vw,21px);
  letter-spacing:.06em;color:var(--fire-l);
  flex:0 0 auto;line-height:1;
  text-shadow:0 0 18px rgba(224,58,0,.24);
}

.ftm-combos{
  position:relative;
  /* No rule or padding of its own: the sauce note above already closes with
     a rule, and a second one 44px later read as a double line. */
  margin-bottom:var(--stack-gap);
}

.ftm-combo-ul{list-style:none;display:flex;flex-direction:column}

.ftm-combo-li{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid rgba(243,234,220,.07);flex-wrap:nowrap;
}

.ftm-combo-li:last-child{border-bottom:none}

.ftm-combo-name{
  flex:0 0 auto;min-width:clamp(130px,14%,200px);
  font-family:'Oswald',sans-serif;
  font-size:clamp(17px,1.4vw,22px);font-weight:400;
  color:rgba(243,234,220,.92);white-space:nowrap;
}

.ftm-combo-desc{
  flex:0 1 auto;font-style:normal;
  font-family:'Lato',sans-serif;
  font-size:14px;color:rgba(243,234,220,.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}


.ftm-sides-g{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid rgba(224,58,0,.22);
  border-bottom:1px solid rgba(224,58,0,.22);
}

.ftm-side{
  display:flex;align-items:center;
  padding:14px 0;border-bottom:1px solid rgba(224,58,0,.14);
}

.ftm-sides-g .ftm-side:nth-child(3),
.ftm-sides-g .ftm-side:nth-child(4){border-bottom:none}

.ftm-sides-g .ftm-side:nth-child(odd){
  padding-right:clamp(16px,3vw,44px);
  border-right:1px solid rgba(224,58,0,.18);
}

.ftm-sides-g .ftm-side:nth-child(even){padding-left:clamp(16px,3vw,44px)}

.ftm-side strong{
  font-family:'Oswald',sans-serif;
  font-size:clamp(15px,1.25vw,20px);font-weight:400;
  color:rgba(243,234,220,.9);flex:0 0 auto;
}

.ftm-sauce{
  margin:0 auto var(--stack-gap);
  max-width:600px;
  text-align:center;
  padding:18px 0;
  border-top:1px solid rgba(243,234,220,.055);
  border-bottom:1px solid rgba(243,234,220,.055);
}

.ftm-sauce-body{
  display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;
}

.ftm-sauce-pr{
  font-family:'Oswald',sans-serif;
  font-size:15px;letter-spacing:.06em;color:var(--fire-l);
  text-shadow:0 0 18px rgba(224,58,0,.24);
}

.ftm-sauce-body strong{
  font-family:'Oswald',sans-serif;
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--tx-quiet);font-weight:400;
}

@media(max-width:900px){
  .ftm-cols{grid-template-columns:1fr}
  .ftm-col:first-child{padding-bottom:36px;border-bottom:1px solid rgba(224,58,0,.2)}}

@media(max-width:640px){
  .ftm-combo-li{flex-wrap:wrap;row-gap:2px}
  .ftm-combo-desc{order:4;flex:0 0 100%;white-space:normal;overflow:visible;font-size:12px}
  .ftm-combo-name{min-width:0}
  .ftm-sides-g{grid-template-columns:1fr}
  .ftm-sides-g .ftm-side:nth-child(odd){padding-right:0;border-right:none}
  .ftm-sides-g .ftm-side:nth-child(even){padding-left:0}
  .ftm-sides-g .ftm-side:nth-child(3){border-bottom:1px solid rgba(224,58,0,.14)}
  .ftm-sides-g .ftm-side:last-child{border-bottom:none}
  .ftm-sauce{text-align:center;padding:22px 16px}
  .ftm-sauce-body{gap:10px}
  .ftm-sauce-body small{letter-spacing:.22em}}

@media(max-width:480px){
  .ftm-ch{font-size:1.5rem;letter-spacing:.14em}
  .ftm-ch::before,.ftm-ch::after{flex:0 0 28px}}

/* ─── MENU ROW HOVER: THE FUSE ────────────────────────────────────────────
   The dotted leader is a fuse. On hover it lights from the name toward the
   price, a spark lands at the end, and the price heats from fire to amber.
   Reading aid first: nothing the eye is reading moves, only light changes.
   Dots reveal with clip-path and the spark rides transform, both over the
   leader's own width, so they stay in sync. Exit is faster than enter. */
.ftm-dot-line{
  position:relative;overflow:hidden;
  height:9px;
  background:repeating-linear-gradient(90deg,rgba(243,234,220,.38) 0 2px,transparent 2px 8px) center/100% 1px no-repeat;
}
.ftm-dot-line::before,
.ftm-dot-line::after{content:'';position:absolute;inset:0;pointer-events:none}
.ftm-dot-line::after{
  background:repeating-linear-gradient(90deg,var(--amber-l) 0 2px,transparent 2px 8px) center/100% 1px no-repeat;
  filter:drop-shadow(0 0 2px rgba(255,120,0,.9));
  clip-path:inset(0 100% 0 0);
  transition:clip-path 180ms var(--ease-out);
}
.ftm-dot-line::before{
  background:radial-gradient(circle at calc(100% - 4px) 50%,#FFE2A8 0 1px,rgba(255,150,30,.75) 1.5px,transparent 4.5px);
  opacity:0;
  transform:translateX(-100%);
  transition:transform 180ms var(--ease-out),opacity 120ms ease;
}

.ftm-li,.ftm-combo-li,.ftm-side{position:relative;isolation:isolate}
.ftm-li::before,.ftm-combo-li::before,.ftm-side::before{
  content:'';position:absolute;inset:0 -14px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 55% 90% at 100% 50%,rgba(242,120,18,.13),rgba(224,58,0,.04) 55%,transparent 75%);
  opacity:0;
  transition:opacity var(--dur-hover) ease;
}
.ftm-sides-g .ftm-side:nth-child(odd)::before{right:0}
.ftm-sides-g .ftm-side:nth-child(even)::before{left:0}

.ftm-li-top strong,.ftm-li--sm strong,.ftm-combo-name,.ftm-side strong,.ftm-li-desc{
  transition:color var(--dur-hover) ease;
}
.ftm-pr{transition:color var(--dur-hover) ease,text-shadow var(--dur-hover) ease}

@media (hover:hover) and (pointer:fine){
  :is(.ftm-li,.ftm-combo-li,.ftm-side):hover::before{opacity:1}
  :is(.ftm-li,.ftm-combo-li,.ftm-side):hover .ftm-dot-line::after{
    clip-path:inset(0 0 0 0);
    transition-duration:380ms;
  }
  :is(.ftm-li,.ftm-combo-li,.ftm-side):hover .ftm-dot-line::before{
    opacity:1;transform:translateX(0);
    transition:transform 380ms var(--ease-out),opacity 80ms ease;
  }
  :is(.ftm-li,.ftm-combo-li,.ftm-side):hover :is(strong,.ftm-combo-name){color:var(--cream)}
  .ftm-li:hover .ftm-li-desc{color:rgba(243,234,220,.62)}
  :is(.ftm-li,.ftm-combo-li,.ftm-side):hover .ftm-pr{
    color:var(--amber-l);
    text-shadow:0 0 14px rgba(255,140,20,.45),0 0 2px rgba(255,180,61,.5);
  }
}

/* Reduced motion: the fuse is already lit, it just fades up. No travel. */
@media (prefers-reduced-motion:reduce){
  .ftm-dot-line::after{clip-path:none;opacity:0;transition:opacity var(--dur-hover) ease}
  .ftm-dot-line::before{display:none}
  @media (hover:hover) and (pointer:fine){
    :is(.ftm-li,.ftm-combo-li,.ftm-side):hover .ftm-dot-line::after{opacity:1;transition-duration:var(--dur-hover)}
  }
}


/* ── SCHEDULE ROWS — status color system ── */


/* CLOSED — Warm stone: informative, never invisible, quieter than active days */


/* ── PANEL BOTTOM FADE — sits above photo, under inner content ── */
.loc2-cur-panel::after{
  content:'';
  position:absolute;left:0;right:0;bottom:0;
  height:72%;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    to top,
    rgba(4,2,2,.92) 0%,
    rgba(4,2,2,.72) 22%,
    rgba(4,2,2,.38) 46%,
    rgba(4,2,2,.10) 68%,
    transparent 88%
  );
}

/* ── PANEL PHOTO ── */
.loc2-cur-panel-photo{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:38% 54%;
  opacity:.82;pointer-events:none;z-index:1;
}
.loc2-cur-panel-glow{
  width:150%;height:92%;bottom:-10%;
  background:
    radial-gradient(ellipse at 50% 100%,rgba(0,0,0,.88) 0%,rgba(0,0,0,.62) 30%,rgba(0,0,0,.12) 65%,transparent 82%),
    radial-gradient(ellipse at 50% 85%,rgba(224,58,0,.09) 0%,rgba(242,154,18,.04) 42%,transparent 66%);
}

/* ── LOADING / ERROR ── */
.loc2-loading{padding:clamp(28px,4vw,44px) 24px;text-align:center;flex:1;display:flex;align-items:center;justify-content:center}
.loc2-loading span{font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(243,234,220,.16);animation:loc2-loading-pulse 1.8s ease-in-out infinite}
@keyframes loc2-loading-pulse{0%,100%{opacity:.5}50%{opacity:1}}
.loc2-error{padding:clamp(28px,4vw,44px) 24px;text-align:center}
.loc2-error p{font-family:'Lato',sans-serif;font-size:13px;line-height:1.75;color:rgba(243,234,220,.3)}
.loc2-error p+p{margin-top:6px}
.loc2-error a{color:var(--amber);text-decoration:none;font-family:'Oswald',sans-serif;letter-spacing:1px}
@media(hover:hover) and (pointer:fine){
  .loc2-error a:hover{color:var(--amber-l)}
}

/* ── WEEK TABS ── */
.loc2-week-tabs{
  position:relative;
  display:flex;
  padding-left:calc(var(--loc2-inset) - 18px);
  overflow-x:auto;
  scrollbar-width:none;
  border-bottom:1px solid rgba(243,234,220,.07);
  flex-shrink:0;
  /* Without this the horizontal swipe chains to the page and to iOS's
     back-gesture — the strip stole a gesture that was never meant for it. */
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  /* Edge fades are the only signal that more weeks exist; JS sets data-edge */
  --edge-l:transparent;
  --edge-r:transparent;
  mask-image:linear-gradient(to right,var(--edge-l) 0,#000 28px,#000 calc(100% - 28px),var(--edge-r) 100%);
  -webkit-mask-image:linear-gradient(to right,var(--edge-l) 0,#000 28px,#000 calc(100% - 28px),var(--edge-r) 100%);
}
.loc2-week-tabs[data-edge~="start"]{--edge-l:transparent}
.loc2-week-tabs[data-edge~="nostart"]{--edge-l:#000}
.loc2-week-tabs[data-edge~="end"]{--edge-r:transparent}
.loc2-week-tabs[data-edge~="noend"]{--edge-r:#000}

/* Sliding indicator. A border-color swap cannot show which way you moved;
   one bar that travels can. transform only, so it stays on the GPU. */
.loc2-week-ind{
  position:absolute;left:0;bottom:-1px;
  width:1px;height:2px;
  background:var(--amber);
  transform-origin:left center;
  transform:translateX(0) scaleX(0);
  transition:transform .28s cubic-bezier(.23,1,.32,1);
  pointer-events:none;
}
.loc2-week-tabs::-webkit-scrollbar{display:none}
.loc2-week-tab{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;                       /* was ~30px — under the touch minimum */
  font-family:'Oswald',sans-serif;
  font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  padding:0 18px;
  color:rgba(243,234,220,.62);
  background:transparent;border:none;
  cursor:pointer;white-space:nowrap;flex-shrink:0;
  scroll-snap-align:start;
  transition:color .2s ease;
  line-height:1;
}
.loc2-week-tab:active{color:var(--cream)}
.loc2-week-tab--active{color:var(--cream)}

/* ══════════════════════════
   LOCATION — PREMIUM PANEL SYSTEM
   Now Serving panel: status-driven accent colors
══════════════════════════ */

/* ── NOW SERVING EYEBROW ── */
/* Dot and label read as one unit on the left; the live status takes the right
   edge. space-between spread three items and parked the label mid-card. */
.loc2-cur-eyebrow{
  display:flex;align-items:center;justify-content:flex-start;gap:10px;
  padding:15px clamp(16px,2vw,22px) 12px;
  font-family:'Oswald',sans-serif;font-size:10px;
  letter-spacing:3px;text-transform:uppercase;
  color:rgba(243,234,220,.96);
  font-weight:700;
  border-bottom:1px solid rgba(243,234,220,.11);
  transition:color .3s ease;
}
.loc2-cur-eyebrow-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:rgba(243,234,220,.55);
  transition:background .3s ease,box-shadow .3s ease;
}
.loc2-cur-eyebrow-title{
  display:inline-block;
  font-size:10px;letter-spacing:3px;
  color:rgba(243,234,220,.60);font-weight:600;
}

/* ── PANEL HOURS — base ── */
.loc2-cur-hrs{
  font-family:'Oswald',sans-serif;
  font-size:clamp(16px,1.5vw,21px);
  letter-spacing:2px;font-weight:600;
  color:var(--amber);
  transition:color .3s ease;
}
.loc2-cur-time-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.loc2-cur-day-ref{
  font-family:'Oswald',sans-serif;font-size:10px;
  letter-spacing:2.5px;text-transform:uppercase;
  color:rgba(243,234,220,.52);
}

/* ── PANEL BODY TEXT ── */
.loc2-cur-addr{
  font-family:'Lato',sans-serif;font-size:14px;
  font-style:normal;color:rgba(243,234,220,.84);line-height:1.6;
}

/* ── PANEL STATUS THEMING — data-status attribute ─────────────────────────
   One recipe, five tones, all read from the status tokens. The panel used to
   carry its own palette — grey for Private, brand amber for TBD, an older
   teal for Available — so the card beside the list disagreed with the list. */
.loc2-cur[data-status]{--cur:var(--st-closed);--cur-rgb:var(--st-closed-rgb)}
.loc2-cur[data-status="open"]     {--cur:var(--st-open);   --cur-rgb:var(--st-open-rgb)}
.loc2-cur[data-status="available"]{--cur:var(--st-avail);  --cur-rgb:var(--st-avail-rgb)}
.loc2-cur[data-status="private"],
.loc2-cur[data-status="booked"]   {--cur:var(--st-private);--cur-rgb:var(--st-private-rgb)}
.loc2-cur[data-status="tbd"]      {--cur:var(--st-tbd);    --cur-rgb:var(--st-tbd-rgb)}

.loc2-cur[data-status]{border-top-color:rgba(var(--cur-rgb),.48) !important}
.loc2-cur[data-status] .loc2-cur-eyebrow-dot{
  background:var(--cur);
  box-shadow:0 0 6px rgba(var(--cur-rgb),.6),0 0 12px rgba(var(--cur-rgb),.28);
  animation:none;
}
/* Only a day someone can act on pulses. */
.loc2-cur[data-status="open"] .loc2-cur-eyebrow-dot,
.loc2-cur[data-status="available"] .loc2-cur-eyebrow-dot{animation:live-pulse-dot 1.8s ease-in-out infinite}
.loc2-cur[data-status] .loc2-cur-hrs{color:var(--cur)}
.loc2-cur[data-status] .loc2-cur-panel-glow{
  background:
    radial-gradient(ellipse at 50% 100%,rgba(0,0,0,.88) 0%,rgba(0,0,0,.62) 30%,rgba(0,0,0,.12) 65%,transparent 82%),
    radial-gradient(ellipse at 50% 85%,rgba(var(--cur-rgb),.09) 0%,rgba(var(--cur-rgb),.035) 42%,transparent 66%);
}
/* A day off is readable, present, and quieter than every active state. */
.loc2-cur[data-status="closed"]{border-top-color:rgba(var(--st-closed-rgb),.28) !important}
.loc2-cur[data-status="closed"] .loc2-cur-eyebrow-dot{box-shadow:none}

/* ── MISC READABILITY ── */
/* ── DIRECTIONS BUTTON ── */
.loc2-btn-dir{
  height:52px;font-size:10px;
  letter-spacing:.28em;
  box-shadow:0 6px 22px rgba(224,58,0,.38);
}
@media(hover:hover) and (pointer:fine){
  .loc2-btn-dir:hover{box-shadow:0 12px 32px rgba(224,58,0,.52)}
}

/* ── PANEL NAME — editorial scale ── */
.loc2-cur-panel-name{
  font-size:clamp(2.1rem,3.5vw,3.5rem) !important;
  font-weight:900 !important;
  text-shadow:
    0 1px 4px rgba(0,0,0,.95),
    0 4px 16px rgba(0,0,0,.80),
    0 12px 40px rgba(0,0,0,.55) !important;
  line-height:.93 !important;
  letter-spacing:-.03em !important;
}

/* ── NEXT STOP (shown when CLOSED or TBD) ── */
.loc2-next-stop{
  display:flex;flex-direction:column;gap:4px;
  margin-top:10px;padding:9px 12px;
  background:rgba(242,154,18,.04);
  border-left:2px solid rgba(242,154,18,.22);
  border-radius:0 2px 2px 0;
}
.loc2-next-stop-label{
  font-family:'Oswald',sans-serif;font-size:10px;
  letter-spacing:3px;text-transform:uppercase;
  color:rgba(242,154,18,.48);line-height:1;
}
.loc2-next-stop-val{
  font-family:'Lato',sans-serif;font-size:13px;
  font-weight:600;color:rgba(243,234,220,.80);line-height:1.3;
}

/* ── FOOTER ── */
.loc2-cur-footer>span{color:rgba(243,234,220,.50)}
.loc2-ig-handle{color:rgba(243,234,220,.58)}
@media(hover:hover) and (pointer:fine){
  .loc2-ig-handle:hover{color:var(--amber)}
}

/* ══════════════════════════
   SCHEDULE → FINAL CTA: ATMOSPHERIC CONTINUITY
   Subtle, invisible, intentional.
══════════════════════════ */

/* Additional embers at the bottom of the schedule section — very quiet */
.loc2-embers span:nth-child(4){left:55%;--d:21s;--del:7s;background:rgba(224,58,0,.15);width:2px;height:2px}
.loc2-embers span:nth-child(5){left:28%;--d:26s;--del:11s;background:rgba(242,154,18,.13)}
.loc2-embers span:nth-child(6){left:82%;--d:17s;--del:4s;background:rgba(224,58,0,.12)}
.loc2-embers span:nth-child(7){left:64%;--d:24s;--del:14s;width:2px;height:2px}

/* Schedule section bottom: a clean, natural dark fade — no glow, no gap */
.loc2::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:96px;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(to bottom,transparent 0%,rgba(5,2,2,1) 100%);
}

/* fcta-bg pseudo-elements handle the image and overlays — no override needed here */

/* Top of Final CTA: replace the 1px amber rule with a very low warmth — no drama */
#final-cta::before{
  left:0;right:0;
  height:120px;
  background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(160,38,0,.09),transparent 58%);
}

/* Headline: quiet depth — warmth implied, not announced */
.fcta-headline{
  text-shadow:0 0 44px rgba(160,38,0,.09),0 4px 18px rgba(0,0,0,.82);
}
.fcta-headline span{
  text-shadow:0 0 32px rgba(204,110,0,.09),0 4px 14px rgba(0,0,0,.72);
}

/* ══════════════════════════════════════════════
   NOW SERVING CARD — MOBILE ART DIRECTION
   Truck as hero · tighter rhythm · premium scan
══════════════════════════════════════════════ */
@media(max-width:780px){

  /* 1 — REFRAME: center on truck body/logo, less sky and less lower body */
  .loc2-cur-panel-photo{
    object-position:38% 42%;
  }

  /* 4 — OVERLAY: heavier bottom gradient behind the title without darkening the overall image */
  .loc2-cur-panel::after{
    height:80%;
    background:linear-gradient(
      to top,
      rgba(4,2,2,.98) 0%,
      rgba(4,2,2,.92) 20%,
      rgba(4,2,2,.72) 42%,
      rgba(4,2,2,.30) 62%,
      rgba(4,2,2,.08) 78%,
      transparent 90%
    );
  }

  /* 2 — TITLE: ~12% reduction in font size, same typographic voice */
  .loc2-cur-panel-name{
    font-size:clamp(1.85rem,5.8vw,2.4rem) !important;
    line-height:.95 !important;
  }

  /* 3 — HIERARCHY: "Current Location" label — elevated contrast and presence */
  .loc2-cur-panel-label{
    font-size:10px;
    letter-spacing:3px;
    color:rgba(243,234,220,.88);
  }

  /* 3 — HIERARCHY: panel inner — tighter gap between label and name */
  .loc2-cur-panel-inner{
    gap:6px;
  }

  /* 5 — TIGHTER CARD: recover vertical space below the image */
  .loc2-cur-body{
    padding:11px 18px 5px;
  }
  .loc2-cur-time-row{
    margin-bottom:4px;
  }
  .loc2-cur-btns{
    padding:0 18px 12px;
    gap:8px;
  }
  .loc2-cur-footer{
    padding:7px 18px 10px;
  }

}

/* ══════════════════════════
   DATE PICKER CALENDAR
══════════════════════════ */
.bk2-date-wrap{position:relative}
#eventDateInput{cursor:pointer;user-select:none}

.bk2-cal{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  z-index:400;
  width:324px;
  max-width:calc(100vw - 24px);
  background:linear-gradient(165deg,rgba(22,16,8,.99) 0%,rgba(10,7,3,1) 100%);
  border:1px solid rgba(242,154,18,.38);
  border-radius:8px;
  box-shadow:0 24px 64px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04);
  padding:16px;
  opacity:0;
  pointer-events:none;
  transform:translateY(-8px) scale(.98);
  transform-origin:top left;
  transition:opacity .2s ease,transform .2s ease;
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}
.bk2-cal.open{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}

.bk2-cal-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;padding-bottom:12px;
  border-bottom:1px solid rgba(242,154,18,.1);
}
.bk2-cal-nav{
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(242,154,18,.06);
  border:1px solid rgba(242,154,18,.18);
  border-radius:3px;
  color:rgba(243,234,220,.65);
  font-size:18px;line-height:1;
  cursor:pointer;
  transition:background .16s,border-color .16s,color .16s;
  font-family:inherit;padding:0;
}
@media(hover:hover) and (pointer:fine){
  .bk2-cal-nav:disabled{opacity:.3;cursor:default;pointer-events:none}
.bk2-cal-nav:hover{
    background:rgba(242,154,18,.14);
    border-color:rgba(242,154,18,.4);
    color:var(--amber);
  }
}
.bk2-cal-month{
  font-family:'Oswald',sans-serif;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--cream);line-height:1;
}

.bk2-cal-dow{
  display:grid;grid-template-columns:repeat(7,1fr);
  margin-bottom:4px;
}
.bk2-cal-dow span{
  text-align:center;
  font-family:'Oswald',sans-serif;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx-quiet);
  padding:3px 0 7px;
}

.bk2-cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:1px;
}
.bk2-cal-day{
  aspect-ratio:1;width:100%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Lato',sans-serif;font-size:12px;font-weight:400;
  color:rgba(243,234,220,.75);
  border-radius:3px;
  cursor:pointer;
  background:transparent;
  border:1px solid transparent;
  transition:background .14s,color .14s,border-color .14s;
  line-height:1;padding:0;
}
@media(hover:hover) and (pointer:fine){
  .bk2-cal-day:not(.past):not(.empty):hover{
    background:rgba(242,154,18,.12);
    color:var(--cream);
    border-color:rgba(242,154,18,.22);
  }
}
.bk2-cal-day.today{
  border-color:rgba(242,154,18,.45);
  color:var(--amber);
  font-weight:700;
}
.bk2-cal-day.selected{
  background:var(--amber);
  color:var(--dark);
  font-weight:700;
  border-color:transparent;
}
@media(hover:hover) and (pointer:fine){
  .bk2-cal-day.selected:hover{background:var(--amber-l);color:var(--dark)}
}
.bk2-cal-day.past{
  color:rgba(243,234,220,.17);
  cursor:default;
}
.bk2-cal-day.empty{cursor:default;background:transparent;border-color:transparent}

/* Centring this on the viewport needed a translate that the open state then
   overwrote, which parked the panel half off-screen. It is anchored to its
   field at every width instead, and simply narrows. */
@media(max-width:480px){
  .bk2-cal{padding:14px}}

/* ══════════════════════════
   LIVE SCHEDULE SWAPS
   The schedule updates while the page is open. Blurring through the change
   reads as one element transforming, instead of two strings overlapping.
══════════════════════════ */
.hero-location-inner,
.loc2-cur-panel-name,
.loc2-cur-hrs,
.loc2-cur-day-ref,
.loc2-cur-addr{transition:filter .2s ease,opacity .2s ease}

.hero-location-inner.is-swapping,
.loc2-cur-panel-name.is-swapping,
.loc2-cur-hrs.is-swapping,
.loc2-cur-day-ref.is-swapping,
.loc2-cur-addr.is-swapping{filter:blur(2.5px);opacity:.45}

@media(prefers-reduced-motion:reduce){
  .hero-location-inner.is-swapping,
  .loc2-cur-panel-name.is-swapping,
  .loc2-cur-hrs.is-swapping,
  .loc2-cur-day-ref.is-swapping,
  .loc2-cur-addr.is-swapping{filter:none;opacity:.6}}

/* ══════════════════════════
   SCHEDULE ROWS — WEEK SWAP
   Which direction the week moved is the only thing this carries. 6px is
   enough to orient and too small to feel like waiting.
══════════════════════════ */
.loc2-rows{transition:opacity .18s cubic-bezier(.23,1,.32,1),transform .18s cubic-bezier(.23,1,.32,1)}
.loc2-rows[data-shift="next"]{opacity:0;transform:translateX(-6px)}
.loc2-rows[data-shift="prev"]{opacity:0;transform:translateX(6px)}

@media(prefers-reduced-motion:reduce){
  .loc2-rows[data-shift]{transform:none}
  .loc2-week-ind{transition-duration:120ms}}

/* ══════════════════════════════════════════════════════════════════════════
   SYSTEM LAYER
   Components added or rebuilt in the usability pass. Everything here reuses
   the motion and focus tokens declared at the top of this file.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── ICONS ───────────────────────────────────────────────────────────────
   One geometry for the whole site. The sprite itself never renders.        */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{
  flex-shrink:0;
  fill:none;stroke:currentColor;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.ico--solid{fill:currentColor;stroke:none}

/* ─── PRESS ───────────────────────────────────────────────────────────────
   Every pressable thing confirms it heard you. Hover is gated so a tap on a
   phone does not leave an element stuck in its hover state.                */
.hcta-primary,.hcta-secondary,.nav-cta,
.fcta-btn,.loc2-btn-dir,.loc2-empty-cta,.btt,
.bk2-cal-nav,.bk2-cal-day,.loc2-week-tab,.ft-social-ic,.mobile-menu{
  transition:transform var(--dur-press) var(--ease-out),
             background-color var(--dur-hover) ease,
             border-color var(--dur-hover) ease,
             color var(--dur-hover) ease,
             box-shadow var(--dur-hover) ease,
             filter var(--dur-hover) ease;
}
/* Every :hover on this site is gated behind (hover:hover) and (pointer:fine),
   so a tap never leaves an element stuck lit. :active is what a thumb gets
   instead — it must therefore cover every pressable thing, ungated. */
.hcta-primary:active,.hcta-secondary:active,.nav-cta:active,.fcta-btn:active,.loc2-btn-dir:active,
.loc2-empty-cta:active,.ft-social-ic:active{transform:scale(.975)}
.loc2-week-tab:active{transform:scale(.97)}
.btt:active,.bk2-cal-nav:active,.bk2-cal-day:not(:disabled):active{transform:scale(.92)}
.mobile-menu:active{transform:scale(.94)}

@media(hover:hover) and (pointer:fine){
  .loc2-week-tab:hover{color:rgba(243,234,220,.9)}}


/* ─── SUBMIT BUTTON ───────────────────────────────────────────────────────
   Sending and sent are states of one button, not a swapped innerHTML.      */


@keyframes btn-spin{to{transform:rotate(360deg)}}


/* ─── DATE PICKER ─────────────────────────────────────────────────────────
   Anchored to its trigger, so it grows from the field it belongs to.       */
.bk2-cal{
  opacity:0;transform:scale(.97) translateY(-4px);
  transform-origin:top left;
  transition:opacity var(--dur-pop) var(--ease-out),transform var(--dur-pop) var(--ease-out);
}
.bk2-cal.open{opacity:1;transform:none}
.bk2-cal[hidden]{display:none}
.bk2-cal-day{
  /* The cell takes its width from the grid; a min-width here is what pushed
     the seventh column past the panel edge. */
  min-width:0;min-height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:3px;font-family:'Oswald',sans-serif;font-size:13px;
}
.bk2-cal-day:disabled,.bk2-cal-day.past{opacity:.28;cursor:default}
.bk2-cal-day.empty{pointer-events:none}

/* Live availability. A free day gets a dot, a taken day a struck numeral —
   shape as well as hue, so neither depends on colour. Booked stays pressable:
   a request for it is still a lead. */
.bk2-cal-day{position:relative}
.bk2-cal-day.is-free{color:var(--cream)}
.bk2-cal-day.is-free::after{
  content:'';position:absolute;left:50%;bottom:5px;
  width:4px;height:4px;margin-left:-2px;border-radius:50%;
  background:var(--st-avail);
}
.bk2-cal-day.selected.is-free::after{background:var(--dark)}
.bk2-cal-day.is-booked{
  color:rgba(243,234,220,.42);
  text-decoration:line-through;text-decoration-color:rgba(var(--st-private-rgb),.75);text-decoration-thickness:1px;
}
.bk2-cal-day.selected.is-booked{color:var(--dark);text-decoration-color:var(--dark)}
.bk2-cal-key{
  display:flex;flex-wrap:wrap;gap:6px 18px;
  margin:12px 0 0;padding-top:12px;border-top:1px solid rgba(242,154,18,.1);
  font-family:'Lato',sans-serif;font-size:12px;line-height:1.3;color:rgba(243,234,220,.6);
}
.bk2-cal-key[hidden]{display:none}
.bk2-cal-key span{display:inline-flex;align-items:center;gap:7px}
.bk2-cal-key-free::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--st-avail)}
.bk2-cal-key-booked::before{content:'';width:10px;height:1px;background:var(--st-private)}
.bk2-cal-nav{
  min-width:40px;min-height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:3px;color:var(--cream);
}

/* ─── LOADING SKELETONS ───────────────────────────────────────────────────
   A shape that matches what is coming reads as loading. A bare "Loading…"
   that never resolves reads as broken.                                     */
@keyframes skel{0%,100%{opacity:.22}50%{opacity:.46}}
.hero-loc-skeleton{
  display:inline-block;width:min(230px,42vw);height:11px;border-radius:2px;
  background:rgba(243,234,220,.5);animation:skel 1.4s ease-in-out infinite;
}
.loc2-loading{display:flex;flex-direction:column;gap:10px;padding:22px 0}
.loc2-skel{
  display:block;height:56px;border-radius:4px;
  background:rgba(243,234,220,.06);animation:skel 1.4s ease-in-out infinite;
}
.loc2-skel:nth-child(3){animation-delay:120ms}
.loc2-skel:nth-child(4){animation-delay:240ms}
.loc2-skel:nth-child(5){animation-delay:360ms}

/* ─── SCHEDULE ────────────────────────────────────────────────────────── */
.loc2-rows-list{display:flex;flex-direction:column;flex:1;justify-content:space-between}

/* ─── FIRST PAINT ─────────────────────────────────────────────────────────
   Seven rows replacing a skeleton in one frame reads as a flash. A short
   stagger turns it into an arrival. It runs once: a week switch already
   carries its own motion, and re-staggering rows someone is mid-read would
   be the animation getting in the way of the data. */
.loc2-rows-list--enter .loc2-row{
  opacity:0;transform:translateY(6px);
  animation:loc2-row-in 260ms var(--ease-out) forwards;
}
.loc2-rows-list--enter .loc2-row:nth-child(1){animation-delay:0ms}
.loc2-rows-list--enter .loc2-row:nth-child(2){animation-delay:40ms}
.loc2-rows-list--enter .loc2-row:nth-child(3){animation-delay:80ms}
.loc2-rows-list--enter .loc2-row:nth-child(4){animation-delay:120ms}
.loc2-rows-list--enter .loc2-row:nth-child(5){animation-delay:160ms}
.loc2-rows-list--enter .loc2-row:nth-child(6){animation-delay:200ms}
.loc2-rows-list--enter .loc2-row:nth-child(7){animation-delay:240ms}
@keyframes loc2-row-in{to{opacity:1;transform:none}}

/* Fewer and gentler, not none: the fade still explains that rows replaced a
   skeleton; the movement and the stagger are what get dropped. */
@media(prefers-reduced-motion:reduce){
  .loc2-rows-list--enter .loc2-row{
    transform:none;animation-duration:160ms;animation-delay:0ms !important;
  }
}

/* A week with nothing scheduled used to render seven identical rows. */
.loc2-empty{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:clamp(30px,4vw,46px) clamp(20px,2.6vw,32px);
}
.loc2-empty-title{
  font-family:'Playfair Display',serif;font-size:clamp(1.3rem,2.2vw,1.75rem);
  font-weight:700;color:var(--cream);line-height:1.2;
}
.loc2-empty-sub{
  font-family:'Lato',sans-serif;font-size:14.5px;line-height:1.65;
  color:var(--muted);max-width:42ch;
}
.loc2-empty-next{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin-top:4px;padding-top:14px;width:100%;
  border-top:1px solid var(--line);
}
.loc2-empty-next-label{
  font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--amber);
}
.loc2-empty-next-val{
  font-family:'Oswald',sans-serif;font-size:14px;letter-spacing:.04em;
  color:var(--cream);
}
.loc2-empty-cta{
  display:inline-flex;align-items:center;gap:9px;
  min-height:48px;margin-top:8px;padding:0 24px;border-radius:3px;
  font-family:'Oswald',sans-serif;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream);
  background:linear-gradient(135deg,#cf2d10,#e65412);
  box-shadow:0 8px 22px rgba(204,34,0,.28);
}
/* A quiet week (no stops, today off) says it once: today's card steps aside
   and the week's card takes the row. Set by schedule.js, never in the HTML. */
.loc2[data-quiet] .loc2-grid{grid-template-columns:1fr}
.loc2[data-quiet] .loc2-cur{display:none}
.loc2[data-quiet] .loc2-empty{align-items:center;text-align:center;text-wrap:balance}
.loc2[data-quiet] .loc2-empty-next{justify-content:center}

/* ─── TOUCH TARGETS ───────────────────────────────────────────────────────
   Everything a finger has to hit clears 44px. */
.mobile-menu{min-height:44px;justify-content:center}
.btt{width:48px;height:48px}
.loc2-ig-handle{min-height:40px;font-size:10.5px;color:rgba(243,234,220,.72)}


/* ══ PAGE SYSTEM ═══════════════════════════════════════════════════════════
   Every section, card and button reads its measurements from the tokens in
   :root. Values here override the per-section ones above, which had drifted:
   22px gutters beside 24px ones, card padding of 18, 20, 26 and 28, three
   button heights, and sections whose last element added its own margin to
   the section's padding.
   ════════════════════════════════════════════════════════════════════════ */

/* Width — every section's content shares one edge. */
body > section > .wrap{max-width:var(--section-max)}

/* Vertical rhythm — the same air above and below every section. Padding owns
   the space, so the first and last visible elements give up their margins. */
#menu.ftm,
#packages,
#catering,
.loc2,
#final-cta{padding-block:var(--section-y)}
.ftm-sides{margin-bottom:0}
.fcta-inner > :first-child{margin-top:0}

/* Cards */
.pk-card,.rq-grid,.loc2-card,.loc2-cur{border-radius:var(--card-radius)}
.pk-card{padding:var(--card-pad)}
.rq-form{padding:var(--card-pad)}
.rq-brief{padding:clamp(18px,2.2vw,24px) var(--card-pad);border-radius:0 0 var(--card-radius) var(--card-radius)}
.loc2-card{--loc2-inset:var(--card-pad)}
/* The card ends at the last row; its own border is the edge. */
.loc2-row:last-child{border-bottom:0}
.loc2-cur-panel,
.loc2-cur-body,
.loc2-cur-btns,
.loc2-cur-footer{padding-left:var(--card-pad);padding-right:var(--card-pad)}

/* Buttons — one height, one radius, one type size for the full-width ones */
.hcta-primary,.hcta-secondary,
.pk-cta,.rq-next,.loc2-btn-dir,.fcta-btn,.mnav-cta{
  min-height:var(--btn-h);border-radius:var(--btn-radius);
}
.loc2-btn-dir{height:auto;font-size:13px;letter-spacing:.2em}
.hcta-primary,.hcta-secondary{height:var(--btn-h)}
@media(max-width:780px){
  .loc2-cur-panel,
  .loc2-cur-body,
  .loc2-cur-btns,
  .loc2-cur-footer{padding-left:var(--card-pad);padding-right:var(--card-pad)}
}

/* ─── MENU COLUMNS ────────────────────────────────────────────────────────
   The two lists started 26px apart because only one carried a note. The
   note now reserves its line in both columns. */
.ftm-col{display:flex;flex-direction:column}
.ftm-col{display:grid;grid-template-rows:auto auto 1fr;align-content:start}
.ftm-ch-note{min-height:1.4em}
.ftm-ch-note:empty{margin-bottom:22px}

/* ─── RESTORED BASE RULES ─────────────────────────────────────────────────
   These lost their base declaration when the unused-rule sweep ran; their
   class names only ever appear inside template literals, so a plain text
   scan could not see them. Kept here, next to the sweep that removed them. */


/* ─── LOCATION CARD BUTTONS ───────────────────────────────────────────────
   These were laid out space-between for a leading icon and a trailing arrow.
   With one icon left, the label drifted to the far edge. Centre the pair. */
.loc2-cur-btns a{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
}


/* Skeletons need the full row width, not the centred single-line loading text
   this rule was originally written for. */
.loc2-loading{align-items:stretch;justify-content:flex-start;padding-inline:24px}


/* ─── TOUCH TARGETS, FINAL PASS ───────────────────────────────────────────
   Every link a thumb has to hit clears 44px. Padding grows the hit area
   without changing the type size or the visual rhythm of the lists. */
.loc2-ig-handle{
  display:inline-flex;align-items:center;min-height:44px;
}

.loc2-cur-footer{flex-wrap:wrap}

/* ─── HERO CTAs ───────────────────────────────────────────────────────────
   space-between was written for label + trailing arrow. Two of the three
   buttons now lead with an icon, which shoved their labels to the far edge. */
.hcta-secondary{justify-content:center;gap:10px}
.hcta-primary{gap:16px}

/* ─── HERO TITLE AT PHONE WIDTH ───────────────────────────────────────────
   "HIBACHI" is skewed and scaled, so its painted width runs past its box.
   The earlier fix for that clipping shrank the type until the block used
   barely half the column. These sizes are measured against the real box. */
@media(max-width:430px){
  .title-hibachi{font-size:81px}
  .title-caribbean{font-size:61px}
  .title-experience{font-size:33px;letter-spacing:.16em}
  .title-experience i{width:20px}
  .title-backyard{font-size:31px}
}
@media(max-width:360px){
  .title-hibachi{font-size:70px}
  .title-caribbean{font-size:53px}
  .title-experience{font-size:28px;letter-spacing:.12em}
  .title-backyard{font-size:28px}
}


/* ══════════════════════════════════════════════════════════════════════════
   SCHEDULE — STATUS SYSTEM AND ROW GRID
   ──────────────────────────────────────────────────────────────────────────
   Five statuses, five hues, and a second channel on every chip so none of
   them reads the same as another and none depends on colour vision:

     OPEN       green  129°   solid fill        come and eat
     AVAILABLE  cyan   190°   2px border        free to book
     PRIVATE    rose   348°   1px border        taken
     TBD        gold    39°   dashed border     out, spot not confirmed
     CLOSED     taupe   32°   no border, flat   day off

   Hierarchy survives the five hues because only OPEN fills: the one day a
   customer can act on is the only block of solid colour on the card.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --st-open:    #5BC46B;   /* green  — go                       */
  --st-avail:   #2DB8D4;   /* cyan   — free to book             */
  --st-private: #FF6584;   /* rose   — taken by someone else    */
  --st-tbd:     #D9A441;   /* gold   — out, spot not confirmed  */
  --st-closed:  #8F7E6A;   /* taupe  — day off                  */

  /* The same five as channels, for translucent fills and rules. schedule.js
     overwrites all ten from truck.config.js at boot. */
  --st-open-rgb:91,196,107;   --st-avail-rgb:45,184,212;  --st-private-rgb:255,101,132;
  --st-tbd-rgb:217,164,65;    --st-closed-rgb:143,126,106;
}

/* ─── THE ROW GRID ────────────────────────────────────────────────────────
   One grid for every row, no exceptions. Fixed tracks for the day, the hours
   and the status mean those three columns line up perfectly all the way down
   whether a cell has content or not. Closed days previously used a different
   grid from open ones, so the columns shifted as you scanned — the single
   biggest reason the list was hard to read. */
.loc2-row{
  display:grid;
  /* 92px holds the TODAY tag and its date without wrapping — the widest the
     day column ever gets, so the next column starts on the same x all the
     way down. */
  grid-template-columns:92px minmax(0,1fr) 104px 96px;
  align-items:center;
  gap:0 24px;
  padding:0 var(--loc2-inset);
  padding-left:calc(var(--loc2-inset) - 3px);   /* the rail makes up the rest */
  min-height:64px;
  border-bottom:1px solid rgba(243,234,220,.06);
  border-left:3px solid transparent;
  transition:background var(--dur-hover) ease;
  /* Rows share the card's spare height equally instead of leaving a void
     above the footer. Seven equal rows, whatever the card ends up being. */
  flex:1 1 auto;
}
/* The left rail is the scanning aid: run your eye down the edge and the
   days worth acting on are the only ones carrying colour. */
.loc2-row--open   {border-left-color:var(--st-open)}
.loc2-row--avail  {border-left-color:var(--st-avail)}
.loc2-row--private{border-left-color:var(--st-private)}
.loc2-row--tbd    {border-left-color:var(--st-tbd)}
/* A day off still gets a rail. An empty edge would be the one status that
   communicates by absence, and absence is indistinguishable from a bug.
   But a day nobody can act on does not need full-strength colour to say so —
   the chip still carries the hue at full value for anyone decoding it. */
.loc2-row--private,
.loc2-row--tbd    {opacity:1}
.loc2-row--private{border-left-color:rgba(var(--st-private-rgb),.42)}
.loc2-row--tbd    {border-left-color:rgba(var(--st-tbd-rgb),.45)}
.loc2-row--closed {border-left-color:rgba(var(--st-closed-rgb),.4)}


/* ─── DAY COLUMN ──────────────────────────────────────────────────────────
   "SAT 12", not "SATURDAY" over "12". Three letters give the column a fixed
   width, which is what lets the next column start on the same x for all
   seven rows. */
.loc2-col-day{
  display:flex;align-items:baseline;gap:7px;
  flex-direction:row;flex-wrap:wrap;
}
.loc2-dayname{
  font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;line-height:1;
  color:rgba(243,234,220,.62);
}
.loc2-daynum{
  font-family:'Oswald',sans-serif;font-size:14px;font-weight:400;
  letter-spacing:0;line-height:1;margin-top:0;
  color:rgba(243,234,220,.5);font-variant-numeric:tabular-nums;
}

/* ─── WHAT / HOURS / STATUS ─────────────────────────────────────────────── */
/* These two carried an ellipsis, which turned "Hispanic Heritage Celebration"
   into "Hispanic Heritage Cele…" the moment the column narrowed. A stop is
   either named or it is not — the row wraps and grows instead. */
.loc2-evt-name{
  font-family:'Lato',sans-serif;font-size:15px;font-weight:600;line-height:1.3;
  color:rgba(243,234,220,.92);
  overflow-wrap:anywhere;
}
.loc2-evt-city{
  font-family:'Lato',sans-serif;font-size:12.5px;line-height:1.4;
  color:rgba(243,234,220,.55);
  overflow-wrap:anywhere;
}
/* The single line a non-open day gets. Lighter than a stop's name, because a
   day nobody can visit should not compete with one they can. */
.loc2-evt-note{
  font-family:'Lato',sans-serif;font-size:14px;font-weight:400;line-height:1.4;
  color:rgba(243,234,220,.66);
  overflow:hidden;text-overflow:ellipsis;
}

/* The one actionable line in the list. It carries its status colour so the
   affordance is legible at rest — including on touch, where hover can never
   be the thing that reveals it. Vertical padding is cancelled by an equal
   negative margin: a 44px target that costs the row no height. */
.loc2-evt-cta{
  display:inline-flex;align-items:center;gap:9px;width:fit-content;
  padding-block:12px;margin-block:-12px;
  color:var(--st-avail);text-decoration:none;
  transition:color var(--dur-hover) ease;
}
.loc2-evt-cta-arrow{
  font-size:13px;line-height:1;flex-shrink:0;opacity:.5;
  transition:transform 180ms var(--ease-out),opacity 180ms var(--ease-out);
}
@media(hover:hover) and (pointer:fine){
  .loc2-evt-cta:hover{color:#7FD6E8}
  .loc2-evt-cta:hover .loc2-evt-cta-arrow{opacity:1;transform:translateX(3px)}
}
.loc2-evt-cta:active .loc2-evt-cta-arrow{transform:translateX(1px)}

/* Fewer and gentler: the colour still answers "can I press this", the travel
   is what goes. */
@media(prefers-reduced-motion:reduce){
  .loc2-evt-cta:hover .loc2-evt-cta-arrow,
  .loc2-evt-cta:active .loc2-evt-cta-arrow{transform:none}
}
.loc2-col-hrs{
  font-family:'Oswald',sans-serif;font-size:12px;font-weight:500;
  /* Right-aligned: the column is empty on four rows in seven, and a left edge
     that only exists half the time is not an edge. */
  letter-spacing:.06em;line-height:1.2;text-align:right;
  color:rgba(243,234,220,.72);font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.loc2-col-status{display:flex;justify-content:flex-end}

/* Nothing-to-do days recede: quieter day column, no hours, no name. */
.loc2-row--closed .loc2-dayname,
.loc2-row--private .loc2-dayname{color:rgba(243,234,220,.42)}
.loc2-row--closed .loc2-daynum,
.loc2-row--private .loc2-daynum{color:rgba(243,234,220,.34)}

/* ─── CHIPS ───────────────────────────────────────────────────────────────
   Solid = confirmed. Outline = an invitation. Absent = nothing to act on. */
.loc2-status-pill{
  display:inline-flex;align-items:center;width:fit-content;
  font-family:'Oswald',sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;line-height:1;
  padding:6px 10px;border-radius:2px;white-space:nowrap;
  border:1px solid transparent;
}
/* OPEN — the only filled chip on the card. */
.loc2-status-pill--open{
  background:var(--st-open);color:#07220C;border-color:var(--st-open);
  font-weight:700;
  box-shadow:0 1px 10px rgba(var(--st-open-rgb),.16);
}
/* AVAILABLE — heaviest outline: an invitation, one step below an open day. */
.loc2-status-pill--avail{
  background:rgba(var(--st-avail-rgb),.1);color:var(--st-avail);
  border:2px solid rgba(var(--st-avail-rgb),.62);
  padding:5px 9px;
}
/* PRIVATE — plain outline: real information, not an offer. */
.loc2-status-pill--private{
  background:rgba(var(--st-private-rgb),.09);color:var(--st-private);
  border-color:rgba(var(--st-private-rgb),.5);
}
/* TBD — a dashed edge is what "not confirmed yet" looks like. */
.loc2-status-pill--tbd{
  background:rgba(var(--st-tbd-rgb),.08);color:var(--st-tbd);
  border:1px dashed rgba(var(--st-tbd-rgb),.7);
}
/* CLOSED — no border at all, the quietest chip, but still a chip. */
.loc2-status-pill--closed{
  background:rgba(var(--st-closed-rgb),.13);color:#B5A794;
  border-color:transparent;font-weight:500;
}

/* ─── MOBILE ──────────────────────────────────────────────────────────────
   Four tracks do not fit a phone. Day and status hold the top line, the
   location and hours sit under them — still one grid for every row. */
@media(max-width:780px){
  .loc2-row{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:7px 14px;
    padding:16px var(--loc2-inset);
    padding-left:calc(var(--loc2-inset) - 3px);
    min-height:0;
  }
  .loc2-col-day  {grid-column:1;grid-row:1}
  .loc2-col-hrs  {grid-column:2;grid-row:1;text-align:left}
  .loc2-col-status{grid-column:3;grid-row:1}
  .loc2-col-evt  {grid-column:1/-1;grid-row:2}
  .loc2-row--today{min-height:0}
}


/* ══ MOBILE NAVIGATION ═════════════════════════════════════════════════════
   Full height, in the hero's voice: Anton for the destinations, tracked
   Oswald for everything that labels them, the same fire gradient on the one
   action. The page header stays above the sheet — brand in place, hamburger
   morphed into the close — so the menu reads as the page changing state.
   ════════════════════════════════════════════════════════════════════════ */

.mnav{
  --mnav-x:var(--gutter);
  /* iOS Safari resizes the viewport as its toolbar shows and hides, and a
     fixed sheet can lag a frame — or stick — behind it, leaving a strip of
     page under the dock. The sheet bleeds past the bottom edge so any lag
     falls on its own background, and the script re-measures the height
     (--mnav-vh) whenever the viewport changes while it is open. */
  --mnav-bleed:120px;
  position:fixed;top:0;left:0;right:0;z-index:199;
  height:calc(100vh + var(--mnav-bleed));
  height:calc(var(--mnav-vh,100dvh) + var(--mnav-bleed));
  display:flex;flex-direction:column;
  padding-top:var(--nav-h);
  padding-bottom:var(--mnav-bleed);
  background:
    radial-gradient(120% 55% at 100% 104%,rgba(207,45,16,.24) 0%,transparent 62%),
    radial-gradient(80% 40% at 0% 0%,rgba(242,154,18,.07) 0%,transparent 70%),
    linear-gradient(180deg,#0A0908 0%,#060505 100%);
  overflow:hidden;
  overscroll-behavior:contain;
  /* The sheet unrolls from under the header and rolls back up into it.
     Exit is shorter than entry: the user has already decided. */
  clip-path:inset(0 0 100% 0);
  transition:clip-path 260ms var(--ease-out);
}
.mnav.open{clip-path:inset(0);transition-duration:460ms;transition-timing-function:var(--ease-drawer)}
.mnav[hidden]{display:none}
/* A drag on the sheet must not reach the page and toggle the toolbar. */
.nav-open{overscroll-behavior:none}

/* The header's scrolled bar would seam across the sheet. It steps back and
   lets the sheet be the surface. */
.nav-open .site-header.on{
  background:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* The hero's embers, fewer of them. Decoration only, and below the content. */
.mnav-embers{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mnav-embers span{
  position:absolute;bottom:6%;width:2px;height:2px;border-radius:50%;
  background:rgba(255,110,0,.72);filter:blur(.4px);
  animation:hero-ember-rise var(--dur,18s) ease-in infinite;
}
.mnav-embers span:nth-child(1){left:72%;--dur:15s;--dx:-12px}
.mnav-embers span:nth-child(2){left:86%;--dur:19s;--dx:10px;animation-delay:4s}
.mnav-embers span:nth-child(3){left:58%;--dur:17s;--dx:14px;animation-delay:8s}
.mnav-embers span:nth-child(4){left:92%;--dur:21s;--dx:-8px;animation-delay:11s}

.mnav-body{
  position:relative;
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  padding:0 var(--mnav-x) clamp(16px,3vh,28px);
  padding-right:calc(var(--mnav-x) + env(safe-area-inset-right));
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}

/* ─── DESTINATIONS ───────────────────────────────────────────────────────
   Three words set like the hero headline. The number and the line of copy
   carry the detail, so the word can be as big as the width allows. */
.mnav-list{
  display:flex;flex-direction:column;border-bottom:1px solid var(--line);
  margin-bottom:clamp(16px,3vh,28px);
}
.mnav-list a{
  display:grid;grid-template-columns:28px 1fr;column-gap:12px;
  padding:clamp(12px,2.1vh,20px) 0;
  border-top:1px solid var(--line);
  transform-origin:left center;
}
.mnav-num{
  grid-row:1;align-self:start;padding-top:.7em;
  font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.22em;
  color:var(--amber);
}
/* The mask the word rises through. The padding keeps Anton's cap tops out
   of the clip; the negative margin gives the space back to the layout. */
.mnav-lbl{display:block;overflow:hidden;padding-top:.08em;margin-top:-.08em}
.mnav-word{
  display:block;
  font-family:'Anton','Bebas Neue',sans-serif;
  font-size:clamp(46px,13.5vw,84px);line-height:.94;
  letter-spacing:.012em;text-transform:uppercase;
  color:var(--cream);
  transition:color var(--dur-hover) ease;
}
.mnav-sub{
  grid-column:2;margin-top:6px;
  font-family:'Lato',sans-serif;font-size:13.5px;line-height:1.45;
  color:var(--muted);
}

/* ─── ACTIONS ────────────────────────────────────────────────────────────
   One dock under the thumb: today's stop, then the hero's primary button.
   Both are cut from the same block — full width, same radius, same edge —
   so the pair reads as primary and secondary, not a card and a button. */
.mnav-foot{
  position:relative;flex-shrink:0;
  display:flex;flex-direction:column;gap:8px;
  padding:16px var(--mnav-x);
  padding-right:calc(var(--mnav-x) + env(safe-area-inset-right));
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
}

/* Today's stop. Hidden until the schedule resolves, so it never renders as
   an empty promise; when it lands with the menu open it fades in rather
   than popping. */
.mnav-live{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;
  min-height:58px;padding:12px 16px 12px 20px;border-radius:3px;
  border:1px solid rgba(243,234,220,.12);
  background:rgba(243,234,220,.035);
  opacity:1;
}
@starting-style{.mnav.open .mnav-live{opacity:0}}
.mnav-live[hidden]{display:none}
.mnav-live-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.mnav-live-kicker{
  display:flex;align-items:center;gap:8px;
  font-family:'Oswald',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
}
/* The site's live signal: teal when the truck is serving, fire when a date
   is still open to book, quiet when there is nothing today. */
.mnav-live-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:var(--fire-l);box-shadow:0 0 8px rgba(224,58,0,.55);
}
.mnav-live[data-status="open"] .mnav-live-dot{
  background:var(--teal-l);box-shadow:0 0 8px rgba(18,181,170,.6);
  animation:live-pulse-dot 1.8s ease-in-out infinite;
}
.mnav-live[data-status="closed"] .mnav-live-dot,
.mnav-live[data-status="tbd"] .mnav-live-dot{background:rgba(243,234,220,.3);box-shadow:none}
/* No clamp, no ellipsis: this is the answer to "where are they today". */
.mnav-live-title{
  font-family:'Oswald',sans-serif;font-size:15px;line-height:1.3;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream);overflow-wrap:anywhere;
}
.mnav-live-hours{
  font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.12em;
  color:rgba(243,234,220,.62);
}
/* Sentence case, not tracked caps: an address is read, not scanned. */
.mnav-live-addr{
  font-family:'Lato',sans-serif;font-size:13px;line-height:1.4;
  color:var(--muted);overflow-wrap:anywhere;
}
.mnav-live-addr[hidden]{display:none}
/* The verb says where the tap goes before it leaves the site. */
.mnav-live-go{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(243,234,220,.55);
  transition:color var(--dur-hover) ease;
}
.mnav-live[data-action="directions"] .mnav-live-go{color:var(--amber)}
/* The narrowest phones keep the icon and give the words to the stop. */
@media(max-width:359px){.mnav-live-act{display:none}}
.mnav-cta{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:58px;padding:0 24px;border-radius:3px;
  font-family:'Oswald',sans-serif;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cream);
  background:linear-gradient(135deg,#cf2d10 0%,#e65412 52%,#f28a12 100%);
  box-shadow:0 12px 30px rgba(204,34,0,.34),inset 0 1px 0 rgba(255,255,255,.12);
}
.mnav-foot-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.mnav-call{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding-right:6px;
  font-family:'Oswald',sans-serif;font-size:14px;letter-spacing:.12em;
  color:var(--cream);
}
.mnav-call .ico{color:var(--amber)}
.mnav-social{display:flex;gap:2px;margin-right:-10px}
.mnav-social a{
  display:grid;place-items:center;width:44px;height:44px;border-radius:3px;
  color:rgba(243,234,220,.55);
}

/* ─── PRESS & HOVER ──────────────────────────────────────────────────────
   Everything pressable confirms it heard you. Hover is gated so a tap does
   not leave a row stuck lit. */
.mnav-cta,.mnav-call,.mnav-live,.mnav-list a,.mnav-social a{
  transition:transform var(--dur-press) var(--ease-out),
             background-color var(--dur-hover) ease,
             border-color var(--dur-hover) ease,
             color var(--dur-hover) ease,
             filter var(--dur-hover) ease,
             opacity var(--dur-hover) var(--ease-out);
}
.mnav-cta:active{transform:scale(.975)}
.mnav-live:active{transform:scale(.975);background-color:rgba(243,234,220,.07)}
.mnav-list a:active{transform:scale(.985)}
.mnav-call:active,.mnav-social a:active{transform:scale(.93)}
.mnav-list a:active .mnav-word{color:#F06522}

@media(hover:hover) and (pointer:fine){
  .mnav-list a:hover .mnav-word{color:#F06522}
  .mnav-live:hover{border-color:rgba(243,234,220,.22);background-color:rgba(243,234,220,.06)}
  .mnav-live:hover .mnav-live-go{color:var(--amber-l)}
  .mnav-social a:hover{color:var(--cream);background:rgba(243,234,220,.06)}
  .mnav-cta:hover{filter:brightness(1.08)}
}

/* ─── ENTRANCE ───────────────────────────────────────────────────────────
   The words rise through their masks just behind the sheet's leading edge,
   50ms apart; the detail fades in after them. Nothing reverses on exit — the
   sheet rolls up over a still menu, which is what a dismissal should feel
   like. `backwards` fill hands transform back, so press still works. */
@keyframes mnav-rise{from{transform:translate3d(0,105%,0)}}
@keyframes mnav-fade{from{opacity:0;transform:translate3d(0,8px,0)}}
.mnav.open .mnav-word{animation:mnav-rise 520ms var(--ease-out) backwards}
.mnav.open .mnav-num,
.mnav.open .mnav-sub,
.mnav.open .mnav-foot{animation:mnav-fade 360ms var(--ease-out) backwards}
.mnav.open .mnav-list a:nth-child(1) .mnav-word{animation-delay:90ms}
.mnav.open .mnav-list a:nth-child(2) .mnav-word{animation-delay:140ms}
.mnav.open .mnav-list a:nth-child(3) .mnav-word{animation-delay:190ms}
.mnav.open .mnav-list a:nth-child(4) .mnav-word{animation-delay:240ms}
.mnav.open .mnav-list a:nth-child(1) :is(.mnav-num,.mnav-sub){animation-delay:200ms}
.mnav.open .mnav-list a:nth-child(2) :is(.mnav-num,.mnav-sub){animation-delay:250ms}
.mnav.open .mnav-list a:nth-child(3) :is(.mnav-num,.mnav-sub){animation-delay:300ms}
.mnav.open .mnav-list a:nth-child(4) :is(.mnav-num,.mnav-sub){animation-delay:350ms}
.mnav.open .mnav-foot{animation-delay:330ms}

/* Short phones (SE, landscape): the words give up size before anything
   scrolls or clips. */
@media(max-height:700px){
  .mnav-word{font-size:clamp(38px,10.5vw,60px)}
  .mnav-list a{padding:9px 0}
  .mnav-list{margin-bottom:12px}
  .mnav-live{min-height:52px;padding-block:10px}
  .mnav-foot{gap:6px}
}

/* Reduced motion keeps the state change legible and drops the travel. */
@media(prefers-reduced-motion:reduce){
  .mnav{clip-path:none;opacity:0;transition:opacity 200ms ease}
  .mnav.open{opacity:1;transition-duration:200ms}
  .mnav.open .mnav-word,
  .mnav.open :is(.mnav-num,.mnav-sub,.mnav-foot){animation:none}
  .mnav-live-dot{animation:none!important}
  .mnav-embers{display:none}
}

/* Name over address, never beside it. (This rule was collateral damage when
   the old row system was swept out — its text was byte-identical.) */
.loc2-col-evt{display:flex;flex-direction:column;gap:3px;min-width:0}

/* ─── QUIET DAYS, STILL READABLE ──────────────────────────────────────────
   These were dimmed to .42/.46, which read as hierarchy but measured 3.6:1
   and 4.1:1 — under AA for text someone is expected to read. The rail and
   the absent chip already carry the hierarchy; the type does not have to go
   illegible to help. At .60 a quiet day still sits 3x below an open one
   (15.7:1 vs ~5.6:1) and clears the threshold. */
.loc2-row--closed .loc2-dayname,
.loc2-row--private .loc2-dayname{color:rgba(243,234,220,.6)}
.loc2-row--closed .loc2-daynum,
.loc2-row--private .loc2-daynum{color:rgba(243,234,220,.5)}

/* ─── TODAY ───────────────────────────────────────────────────────────────
   Today was marked in weight alone, one notch of brightness apart from six
   identical rows — and on a day off the dimming above landed after it and
   took even that back, so the one row a customer is looking for was the
   faintest on the card.

   It is marked in light, never in hue: a filled cream tag and a lit band.
   The rail and the chip keep the status colours, so "which day is it" and
   "what is happening" stay two separate readings instead of one muddled
   one. These rules sit after the quiet-day dimming deliberately — today is
   the row that is never quieted. */
.loc2-row--today{
  background:linear-gradient(90deg,
    rgba(243,234,220,.085) 0%,
    rgba(243,234,220,.032) 58%,
    rgba(243,234,220,.014) 100%);
}
/* A day off that happens to be today still gets its rail at full value —
   the muted rails above exist to recede, and today does not recede. */
.loc2-row--today.loc2-row--closed {border-left-color:var(--st-closed)}
.loc2-row--today.loc2-row--private{border-left-color:var(--st-private)}
.loc2-row--today.loc2-row--tbd    {border-left-color:var(--st-tbd)}

/* The brightest element on the card, and the smallest. Cream on charcoal is
   the one filled treatment no status owns, so it reads as "now" and not as
   a sixth state. */
.loc2-today-tag{
  display:inline-flex;align-items:center;
  font-family:'Oswald',sans-serif;font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;line-height:1;
  padding:5px 7px;border-radius:2px;white-space:nowrap;
  background:var(--cream);color:#0A0806;
}
.loc2-row--today .loc2-daynum{
  color:var(--cream);font-weight:500;
}
.loc2-row--today .loc2-evt-name{font-size:16px}
/* A quiet day's note is set to recede. On today it is the answer to the
   question the customer actually came with. */
.loc2-row--today .loc2-evt-note{color:rgba(243,234,220,.82)}
.loc2-row--today .loc2-col-hrs {color:rgba(243,234,220,.88)}

/* The wash already separates the row; the hover tint would only muddy it. */
@media(hover:hover) and (pointer:fine){
  .loc2-row--today:hover{background:linear-gradient(90deg,
    rgba(243,234,220,.105) 0%,
    rgba(243,234,220,.045) 58%,
    rgba(243,234,220,.02) 100%)}
}

/* On a phone the day column is a top-line cell, not a fixed track, so the
   tag sizes itself and the wash runs the full width. */
@media(max-width:780px){
  .loc2-today-tag{font-size:9px;padding:5px 6px}
}

/* ─── THE WEEK THAT HOLDS TODAY ───────────────────────────────────────────
   Six tabs of date ranges, and nothing said which one you are standing in.
   Once someone browses to October, the way back to now was arithmetic. */
.loc2-week-tab--now{gap:7px}
.loc2-week-tab--now::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--cream);flex-shrink:0;
  opacity:.55;transition:opacity var(--dur-hover) ease;
}
.loc2-week-tab--now.loc2-week-tab--active::before{opacity:1}

/* ─── PANEL + HERO INDICATORS ─────────────────────────────────────────────
   The Now Serving card and the hero bar read the same five statuses, so they
   read them in the same five colours. One colour never means two things on
   one screen. */
.loc2-cur[data-status="open"]      { --st: var(--st-open) }
.loc2-cur[data-status="available"] { --st: var(--st-avail) }
.loc2-cur[data-status="private"],
.loc2-cur[data-status="booked"]    { --st: var(--st-private) }
.loc2-cur[data-status="tbd"]       { --st: var(--st-tbd) }
.loc2-cur[data-status="closed"]    { --st: var(--st-closed) }

.loc2-cur[data-status]{border-top-color:color-mix(in srgb,var(--st) 48%,transparent) !important}
.loc2-cur[data-status] .loc2-cur-eyebrow-dot{
  background:var(--st);
  box-shadow:0 0 6px color-mix(in srgb,var(--st) 65%,transparent),
             0 0 12px color-mix(in srgb,var(--st) 32%,transparent);
}
.loc2-cur[data-status] .loc2-cur-hrs{color:var(--st)}
.loc2-cur[data-status] .loc2-live-dot{
  background:var(--st);
  box-shadow:0 0 6px color-mix(in srgb,var(--st) 65%,transparent);
}
/* Nothing is happening, so nothing pulses. */
.loc2-cur[data-status="closed"] .loc2-cur-eyebrow-dot,
.loc2-cur[data-status="closed"] .loc2-live-dot,
.loc2-cur[data-status="private"] .loc2-cur-eyebrow-dot,
.loc2-cur[data-status="private"] .loc2-live-dot{animation:none;box-shadow:none}

/* "Updated Live" belongs to the section, not to any one day's status. */
.loc2-kdot{background:var(--fire-l)}



/* ══ PHONE: ONE CENTRE LINE ════════════════════════════════════════════════
   On a phone every section below the hero shares the screen's centre axis —
   headings, copy, cards and their actions. Rows that pair a name with a price keep
   their leaders; those are read across, not down. The footer keeps its own
   left-aligned directory layout. */
@media(max-width:780px){
  /* Hero: stays on the left edge, beside the chef. Two full-width actions. */
  .hero-actions{flex-direction:column;align-items:stretch;gap:10px}
  .hcta-primary,.hcta-secondary{width:100%;padding:0 20px}
  .pk-cta{justify-content:center;gap:12px}

  /* Menu category titles: the rules either side meet the word evenly. */
  .ftm-ch{justify-content:center;text-align:center}
  .ftm-ch-note{text-align:center}

  /* Package cards */
  .pk-card{text-align:center}
  .pk-price,.pk-pick-opts{justify-content:center}
  /* The list is centred as one block; its ticks still share a left edge. */
  .pk-inc{width:fit-content;max-width:100%;margin-inline:auto;text-align:left}

  /* Seafood upgrade: name, price, description on one axis. */
  .pk-up-item{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:4px}
  .pk-up-item .ftm-pr{grid-column:1;grid-row:2}
}


/* ═══ LIVE NOTE ════════════════════════════════════════════════════════════
   The one line the owner adds on the day — sold out, closing early, running
   late. It is news, so it takes the accent; it is never truncated, because a
   half-read "Closing ear…" is worse than a taller row.
   ══════════════════════════════════════════════════════════════════════════ */
.loc2-evt-alert{
  display:block;margin-top:3px;
  font-family:'Lato',sans-serif;font-size:12.5px;font-weight:700;line-height:1.35;
  color:var(--amber);overflow-wrap:anywhere;
}
.loc2-cur-note{
  margin-top:10px;padding:9px 12px;
  font-family:'Lato',sans-serif;font-size:14px;font-weight:700;line-height:1.4;
  color:rgba(243,234,220,.92);
  background:rgba(242,154,18,.08);border-left:2px solid var(--amber);
  border-radius:0 2px 2px 0;overflow-wrap:anywhere;
}
.hero-loc-note{color:var(--fire-l);overflow-wrap:anywhere}


/* ═══ LIVE CLOCK ═══════════════════════════════════════════════════════════
   "Open now", "Closes in 40 min", "Opens in 2h": the one line that turns a
   timetable into a reason to go. Serving reads in the Open colour, the last
   hour in the accent, and only a truck serving right now pulses.
   ══════════════════════════════════════════════════════════════════════════ */
.loc2-evt-live{
  display:block;margin-top:3px;
  font-family:'Lato',sans-serif;font-size:12.5px;font-weight:700;line-height:1.35;
  color:rgba(243,234,220,.66);overflow-wrap:anywhere;
}
.loc2-evt-live[data-live="open"],
.hero-location-inner strong[data-live="open"],
.loc2-cur[data-live="open"] .loc2-cur-eyebrow-title,
.mnav-live[data-live="open"] .mnav-live-kicker{color:var(--st-open)}
.loc2-evt-live[data-live="closing"],
.hero-location-inner strong[data-live="closing"],
.loc2-cur[data-live="closing"] .loc2-cur-eyebrow-title,
.mnav-live[data-live="closing"] .mnav-live-kicker{color:var(--amber)}
.loc2-cur-eyebrow-title:empty{display:none}
.loc2-cur-eyebrow-title{overflow-wrap:anywhere;text-align:right;margin-left:auto}
.loc2-cur[data-live="before"] .loc2-cur-eyebrow-dot,
.loc2-cur[data-live="after"] .loc2-cur-eyebrow-dot,
.loc2-cur[data-live="before"] .loc2-live-dot,
.loc2-cur[data-live="after"] .loc2-live-dot{animation:none;box-shadow:none;opacity:.55}
.mnav-live[data-live="before"] .mnav-live-dot,
.mnav-live[data-live="after"] .mnav-live-dot{animation:none;box-shadow:none;background:rgba(243,234,220,.3)}




/* ═══ MENU, OCTOBER 2026 ════════════════════════════════════════════════════
   The new board added a second list to the appetizer column and a note under
   Combos. Combo descriptions grew to three proteins, so they wrap instead of
   trailing off: the old ellipsis cut "Lobster Tail, Filet Mignon & Shrimp"
   in half on tablets.                                                    */
.ftm-ch--sub{margin-top:clamp(36px,4vw,52px)}
.ftm-li-top strong{flex:0 1 auto;min-width:0}
.ftm-combos .ftm-ch-note{text-align:center}
.ftm-combo-desc{white-space:normal;overflow:visible;text-overflow:clip;min-width:0}
.ftm-sides-g .ftm-side:nth-child(3),
.ftm-sides-g .ftm-side:nth-child(4){border-bottom:1px solid rgba(224,58,0,.14)}
.ftm-sides-g .ftm-side:nth-last-child(-n+2){border-bottom:none}
.ftm-fine{
  margin-top:var(--sp-m);text-align:center;
  font-family:'Lato',sans-serif;font-size:13px;line-height:1.55;
  color:var(--tx-quiet);text-wrap:balance;
}
@media(max-width:640px){
  .ftm-sides-g .ftm-side:nth-last-child(2){border-bottom:1px solid rgba(224,58,0,.14)}
}


/* ═══ REEL ══════════════════════════════════════════════════════════════════
   The section header sits in the page's one content width like every other;
   the strip under it starts on that same left edge and runs out past the
   right side of the screen, so it reads as a reel that continues rather than
   a box of thumbnails. Every slide is the same height; a landscape shot is
   wider, never shorter. No slide is dimmed: the one that is "current" is
   only marked in the progress bar, because a faded photo reads as disabled.
   ══════════════════════════════════════════════════════════════════════════ */
#gallery{position:relative;isolation:isolate;background:var(--dark);padding-block:var(--section-y)}
/* Seams. The reel took the menu's old place under the hero, so it takes the
   menu's top shade too; its bottom carries the mirror of that shade, so the
   two sections meet on the same value instead of a warm band stopping dead
   against the menu's dark top edge. The shared texture's bottom glow is the
   band that stopped, and it goes. */
#gallery::before,#gallery::after{
  content:'';position:absolute;left:0;right:0;height:140px;z-index:0;pointer-events:none;
}
#gallery::before{top:0;background:linear-gradient(to bottom,rgba(0,0,0,.22),transparent)}
#gallery::after{bottom:0;background:linear-gradient(to top,rgba(0,0,0,.22),transparent)}
#gallery .ftm-bg::before{
  background:
    radial-gradient(ellipse 38% 32% at 0% 52%,rgba(224,58,0,.14),transparent 65%),
    radial-gradient(ellipse 34% 28% at 100% 52%,rgba(224,58,0,.10),transparent 62%),
    radial-gradient(circle at 5% 10%,rgba(224,58,0,.28),transparent 3px),
    radial-gradient(circle at 96% 14%,rgba(224,58,0,.2),transparent 2px);
}
.reel-head,.reel-ctrl{position:relative;z-index:1}

.reel-track{
  /* Never taller than the screen under the fixed header: a phone on its
     side would otherwise get a photo taller than what it can show. */
  --h:min(clamp(380px,38vw,540px),calc(100svh - var(--nav-h) - 64px));
  --edge:max(var(--gutter),calc((100% - var(--section-max)) / 2 + var(--gutter)));
  position:relative;z-index:1;
  list-style:none;
  display:flex;gap:clamp(10px,1.2vw,16px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);
  padding-inline:var(--edge);
  scrollbar-width:none;
}
.reel-track::-webkit-scrollbar{display:none}

.reel-slide{position:relative;flex:0 0 auto;width:calc(var(--h) * .8);scroll-snap-align:start}
.reel-slide--wide{width:calc(var(--h) * 4 / 3)}

.reel-tile{
  position:relative;display:block;height:var(--h);
  overflow:hidden;isolation:isolate;
  border-radius:var(--card-radius);
  background:var(--dark-3);
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--dur-press) var(--ease-out);
}
.reel-tile :is(img,video){
  display:block;width:100%;height:100%;object-fit:cover;
  /* Hover is the one motion here seen tens of times a visit, so it is kept
     near-imperceptible: 3% over 600ms, on `ease`. Slower than UI on
     purpose; a photo that jumps toward the cursor reads as a button. */
  transition:transform 600ms ease;
}
/* The night shot is a portrait with sky over the crowd: keep the faces. */
.reel-tile[href*="night-crew"] img{object-position:50% 75%}
/* Hairline on a layer above the photo: the package cards' 7% cream edge,
   warming to amber on the slide being pointed at. */
.reel-tile::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(243,234,220,.07);
  transition:box-shadow var(--dur-hover) ease;
}
.reel-tile:active{transform:scale(.985)}
/* A clip lies over its poster: the poster is what shows until the first
   frame, and what shows at all with no script. */
.reel-tile video{position:absolute;inset:0}
.reel-tile:focus-visible{outline:none;box-shadow:var(--focus)}
@media(hover:hover) and (pointer:fine){
  .reel-tile{cursor:zoom-in}
  .reel-tile:hover :is(img,video){transform:scale(1.03)}
  .reel-tile:hover::after{box-shadow:inset 0 0 0 1px rgba(242,154,18,.45)}
}

/* Arrival, once per visit. Each photo rises into its frame from the bottom
   edge (clip-path, so nothing but the reveal moves the layout), settles from
   a slight zoom, and its caption lands last. The first four are staggered;
   the rest finish before they are scrolled to. Animations rather than
   transitions, with backwards fill only: once done, the tile is back on its
   own styles and the hover zoom answers without a leftover delay. */
.reel-slide.r{opacity:1;transform:none}
.reel-slide:nth-child(2){--d:70ms}
.reel-slide:nth-child(3){--d:140ms}
.reel-slide:nth-child(4){--d:210ms}
.reel-slide.r:not(.vis) .reel-tile{clip-path:inset(100% 0 0 0 round var(--card-radius))}
.reel-slide.r:not(.vis) .reel-cap{opacity:0}
.reel-slide.vis .reel-tile{animation:reel-rise 1100ms var(--ease-out) var(--d,0ms) backwards}
.reel-slide.vis .reel-tile :is(img,video){animation:reel-settle 1500ms var(--ease-out) var(--d,0ms) backwards}
.reel-slide.vis .reel-cap{animation:reel-cap 600ms var(--ease-out) calc(var(--d,0ms) + 520ms) backwards}
@keyframes reel-rise{
  from{clip-path:inset(100% 0 0 0 round var(--card-radius))}
  to{clip-path:inset(0 0 0 0 round var(--card-radius))}
}
@keyframes reel-settle{from{transform:scale(1.14)}}
@keyframes reel-cap{from{opacity:0;transform:translateY(10px)}}
@keyframes reel-fade{from{opacity:0}}

/* The caption rides on the photo, story-style: a short floor of shade
   under it so it reads on a white sky or a green lawn, and the shade also
   sinks the daylight shots into the page's dark ground. It never takes a
   tap from the photo, and it wraps rather than clips. */
.reel-tile::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(5,5,5,.78) 0%,rgba(5,5,5,.34) 24%,transparent 46%);
}
.reel-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  display:flex;gap:12px;align-items:baseline;
  padding:0 clamp(16px,1.6vw,22px) clamp(16px,1.6vw,22px);
  font-family:'Lato',sans-serif;font-size:15px;line-height:1.4;
  color:var(--cream);text-wrap:pretty;
}
.reel-num{
  flex:0 0 auto;
  font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.2em;
  font-variant-numeric:tabular-nums;color:var(--amber);
}

/* Story-style progress: one segment per photo. Past ones are lit, the
   current one fills over the slide's time, the rest wait. */
.reel-ctrl{
  display:flex;align-items:center;gap:var(--sp-m);
  margin-top:clamp(28px,3vw,40px);
}
.reel-progress{flex:1;display:flex;gap:4px;min-width:0}
.reel-seg{
  position:relative;flex:1;height:2px;border-radius:1px;overflow:hidden;
  background:rgba(243,234,220,.14);
}
.reel-seg::after{
  content:'';position:absolute;inset:0;
  background:var(--amber);
  transform:scaleX(0);transform-origin:left center;
}
.reel-seg.is-past::after{transform:none}
.reel-seg.is-now::after{animation:reel-fill var(--reel-dwell,5200ms) linear forwards}
.reel[data-paused] .reel-seg.is-now::after{animation-play-state:paused}
@keyframes reel-fill{to{transform:none}}
.reel-btns{display:flex;gap:10px;flex:0 0 auto}

@media(max-width:640px){
  .reel-track{--h:min(108vw,520px,calc(100svh - var(--nav-h) - 64px))}
  /* Twelve segments beside three buttons left each one 3px wide on a small
     phone. The bar takes the full width, the buttons sit under it. */
  .reel-ctrl{flex-wrap:wrap;row-gap:var(--sp-s);justify-content:center}
  .reel-progress{flex:0 0 100%}
  .reel-slide{width:calc(var(--h) * .74)}
  /* A landscape shot keeps the strip's rhythm on a phone: same width,
     cropped to the middle, instead of one slide wider than the screen. */
  .reel-slide--wide{width:calc(var(--h) * .74)}
}

@media(prefers-reduced-motion:reduce){
  .reel-tile :is(img,video){transition:none}
  .reel-slide.r:not(.vis) .reel-tile{clip-path:none}
  .reel-slide.vis .reel-tile,.reel-slide.vis .reel-tile :is(img,video){animation:none}
  .reel-slide.vis .reel-cap{animation:reel-fade 300ms ease backwards}
  .reel-seg.is-now::after{animation:none;transform:none}
}


/* ═══ GALLERY VIEWER ════════════════════════════════════════════════════════
   Full screen, three rows: count and close on top, the photo, then caption
   between the two arrows, where a thumb already is. The caption keeps two
   lines of room so the arrows never jump when a short one follows a long one,
   and still grows past that rather than clip.                            */
.lb{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;
  background:transparent;color:var(--cream);
  overscroll-behavior:contain;isolation:isolate;
}
/* The ground is its own layer so it can fade while the photo travels. */
.lb-scrim{position:absolute;inset:0;z-index:-1;background:var(--black)}
/* Every clip is 9:16. The box is the largest 9:16 that fits the stage
   (container units), so it is known before the first frame arrives, the
   morph measures the real shape, and no bars show on a narrow phone. */
.lb-stage{container-type:size}
.lb-stage:focus{outline:none}
.lb-img.lb-vid{width:min(100cqw,100cqh * 9 / 16);height:auto;aspect-ratio:9 / 16;object-fit:cover}
.lb-vid[hidden],.lb-img[hidden]{display:none}
.lb[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.lb::backdrop{background:transparent}
html.lb-open{overflow:hidden}

.lb-top,.lb-bar{
  width:100%;max-width:var(--section-max);margin:0 auto;
  padding-left:var(--gutter);padding-right:var(--gutter);
}
.lb-top{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:calc(env(safe-area-inset-top,0px) + 12px);padding-bottom:12px;
}
.lb-count{
  display:flex;align-items:baseline;gap:8px;
  font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.24em;
  font-variant-numeric:tabular-nums;color:rgba(243,234,220,.55);
}
.lb-count #lbNum{color:var(--cream)}
.lb-count-sep{color:var(--amber)}

.lb-stage{
  margin:0;min-height:0;
  display:flex;align-items:center;justify-content:center;
  padding:0 var(--gutter);
  touch-action:pinch-zoom;user-select:none;-webkit-user-select:none;
}
.lb-img{
  display:block;max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;border-radius:var(--card-radius);
  -webkit-user-drag:none;
}

.lb-bar{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-s);
  padding-top:14px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
}
.lb-cap{
  min-height:2.9em;display:grid;place-items:center;
  font-family:'Lato',sans-serif;font-size:15px;line-height:1.45;text-align:center;
  color:rgba(243,234,220,.78);text-wrap:balance;overflow-wrap:anywhere;
}

.step-btn{
  display:grid;place-items:center;width:48px;height:48px;flex:0 0 auto;
  border-radius:var(--btn-radius);
  border:1px solid rgba(243,234,220,.16);background:rgba(243,234,220,.04);
  color:var(--cream);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--dur-press) var(--ease-out),
             border-color var(--dur-hover) ease,background-color var(--dur-hover) ease;
}
.step-btn:active{transform:scale(.92)}
.step-btn:focus-visible{outline:none;box-shadow:var(--focus)}
@media(hover:hover) and (pointer:fine){
  .step-btn:hover{border-color:var(--amber);background:rgba(242,154,18,.1)}
}


/* ═══ SECTION TOPS ══════════════════════════════════════════════════════════
   The kicker over every title was an inline-block sitting in a 26px line
   box, so each section's first visible thing started 7px below its padding
   while the final call-to-action's started on it. As a block with its own
   line height it starts on the padding like every other section; the margin
   below keeps the kicker-to-title distance it had.                        */
.loc2-head > .tag{display:block;width:fit-content;margin-inline:auto;line-height:1.4;margin-bottom:calc(var(--sp-s) + 2px)}
.loc2-head > .loc2-kicker{display:flex;width:fit-content;margin-inline:auto;line-height:1.4;margin-bottom:calc(16px + 2px)}


/* ─── MENU SHEET, PHONE ON ITS SIDE ─────────────────────────────────────────
   Under 500px of height the dock alone (today, the button, the phone line)
   filled the sheet and the four destinations scrolled out of sight. Here
   the destinations sit two by two without their lines of copy, and the
   dock folds into one row. Today's stop stays in the hero bar.          */
@media(max-height:500px) and (orientation:landscape){
  .mnav-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter);margin-bottom:0}
  .mnav-list a{padding:8px 0;align-items:center}
  .mnav-num{padding-top:0;align-self:center}
  .mnav-word{font-size:clamp(26px,8vh,34px)}
  .mnav-sub{display:none}
  .mnav-live{display:none}
  .mnav-foot{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px var(--gutter);padding-block:10px calc(10px + env(safe-area-inset-bottom))}
  .mnav-cta{flex:1 1 280px}
  .mnav-foot-row{flex:1 1 260px}
}

/* Viewer top bar: sound (only for a clip that has it) beside Close. */
.lb-top-acts{display:flex;gap:10px}