/* ============================================================
   RESPONSIVE BREAKPOINTS - Tailwind scale, width-only, mobile-first
   nesting. Authored as max-width, so each tier is one pixel below a
   Tailwind min-width:
     sm   max-width:  639px
     md   max-width:  767px
     lg   max-width: 1023px
     xl   max-width: 1279px
     desktop  min-width: 1280px      (2xl 1536 caps huge screens)
   Rules currently live on md (nav, phone type) and xl (stacking,
   brands bottom-wipe); sm and lg are part of the scale and available.
   brands-carousel.css and brands-slideshow.css use the same scale, so
   the carousel geometry and its ticks/type switch together at xl.
   The JS drivers also use 1279, so script and stylesheet agree.
   Short-landscape (max-height) queries are a separate axis.
   Do not add width values outside this scale.
   ============================================================ */
/* High Flying Foods site styles */
:root {
  --bg: #000000;
  --ink: #f5f1ea;
  --ink-dim: #a8a39b;
  --line: rgba(245,241,234,0.14);
  --line-strong: rgba(245,241,234,0.28);
  --cream: #f5f1ea;
  --accent: #d97a4f;
  --serif: 'EB Garamond';
  --sans: 'Jost';
  /* Jost replaces JetBrains Mono / Helvetica Neue for all uppercase
     letter-spaced labels, nav links, eyebrows, stamps, etc. */
  --mono: 'Jost';
  /* Cream-section colors — HBA editorial palette (warm cream + teal ink) */
  --cream-bg: #FBFBF9;
  --cream-ink: #3a3a42;
  --cream-ink-dim: rgba(58,58,66,0.62);
  --cream-line: rgba(58,58,66,0.14);
  --cream-line-strong: rgba(58,58,66,0.26);
  /* HBA type substitutes */
  --font-heading: 'EB Garamond';
  --font-body: 'Jost';
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em; margin: 0; line-height: 1.02; }
h1 { font-size: clamp(72px, 12vw, 220px); }
h2 { font-size: clamp(48px, 7vw, 110px); line-height: 1.05; }
h3 { font-size: clamp(28px, 3.2vw, 48px); line-height: 1.1; }
em { /* weight inherits */ }
.body-lg { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55; max-width: 60ch; color: var(--ink); }
.body { font-size: 16px; line-height: 1.6; color: var(--ink-dim); max-width: 62ch; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: flex-start; justify-content: space-between;
  /* Top reduced to visually match the left padding — the icon PNG has
     internal whitespace at top, so equal CSS padding looks unbalanced.
     Top 22px + icon's ~18px internal whitespace ≈ 40px visual = matches left. */
  padding: 30px 40px;
  color: #fff;
  /* Always reserve a transparent 1px bottom border so the sticky-state border
     transitions transparent→cream (never from the default currentColor=white,
     which caused a white line to flash on load). */
  border-bottom: 1px solid transparent;
  /* Hidden until JS adds .icon-on (same trigger that fades in the top-left
     icon). Once the cover reveal lands, the nav and icon appear together. */
  opacity: 0;
  transition: opacity 0.6s ease, background 0.45s ease, color 0.45s ease, border-color 0.45s ease;
}
body.icon-on .nav { opacity: 1; }
/* mix-blend-mode is applied to the LINKS so the hover-friendly difference
   blending still works against bright/dark content, but the icon stays
   fully opaque (no see-through to the video underneath). */
.nav ul, .nav .mark-wordmark { mix-blend-mode: difference; }
.nav .mark { display: inline-flex; align-items: center; gap: 10px; }
/* Icon ↔ wordmark swap: icon during hero (when nav sits over the video),
   wordmark after the user scrolls past the hero. body.past-hero is toggled
   by the scroll handler in site.js. */
/* Icon stack: white + orange occupy the same exact box so the swap at
   landing is alignment-perfect with zero horizontal or vertical shift. */
.nav .mark-icon-wrap {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  line-height: 0;
  flex: 0 0 auto;
}
.nav .mark-icon {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100px !important;
  height: 100px !important;
  display: block;
  width: 100px;
  height: 100px;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0s linear;   /* instant swap — no perceptible fade */
}
/* Nav icon: hidden until the wordmark reveal is at least 50% complete. */
body.icon-on .nav .mark-icon--white  { opacity: 1; transition: opacity 0.5s ease; }
/* Slight ease on the swap — JS overrides this inline at the swap moment,
   but the CSS gives a sensible fallback. */
.nav .mark-icon--orange {
  /* Two-stage clip-path: orange fills in from top→bottom, holds, then is
     covered from top→bottom (revealing the white icon underneath). */
  opacity: 1 !important;
  clip-path: inset(0 0 100% 0);
}
body.plane-landed .nav .mark-icon--white  { opacity: 1 !important; transition: none !important; }
body.plane-landed .nav .mark-icon--orange {
  animation: hff-icon-fill-then-empty 4.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes hff-icon-fill-then-empty {
  /* 0–1.8s: fill from top to bottom (orange appears) */
  0%      { clip-path: inset(0 0 100% 0); }
  39.13%  { clip-path: inset(0 0 0% 0); }
  /* 1.8s–2.8s: hold fully orange */
  60.87%  { clip-path: inset(0 0 0% 0); }
  /* 2.8s–4.6s: cover from top to bottom (white emerges from top) */
  100%    { clip-path: inset(100% 0 0 0); }
}

/* Live clock inside the est-stamp (between "Est. 2000" and "Sausalito").
   Tabular numerals so the seconds tick without the surrounding text
   shifting horizontally. */
.hff-clock {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.nav .mark-wordmark {
  display: none;
  height: 22px;
  width: auto;
  object-fit: contain;
}
body.past-hero .nav .mark-icon-wrap { display: none; }
body.past-hero .nav .mark-wordmark { display: block; }

/* Sticky nav bar background — once the user scrolls past the hero,
   give the nav a solid backing. Color follows the current section's tone
   (data-nav-tone="dark|light" on each <section>), driven by JS that
   updates body.nav-tone-dark / body.nav-tone-light. */
body.past-hero .nav {
  padding-top: 16px;
  padding-bottom: 16px;
}
body.past-hero.nav-tone-dark .nav {
  background: #000000;
  color: #fff;
  border-bottom: 1px solid rgba(245, 241, 234, 0.08);
}
body.past-hero.nav-tone-light .nav {
  background: #000000;
  color: #fff;
  border-bottom: 1px solid rgba(245, 241, 234, 0.08);
}
body.past-hero .nav .mark-wordmark {
  mix-blend-mode: normal;
  height: 18px;             /* 80% of previous 22px */
}
/* Wordmark stays white on light sections (salmon bg). */
body.past-hero.nav-tone-light .nav .mark-wordmark {
  filter: none;
}
/* Global visited-link override — defeat browsers that color visited
   nav links with their default purple/teal. Apply EVERYWHERE in the nav. */
.nav a:link,
.nav a:visited { color: inherit; }

/* Light/salmon section nav rule:
   • Base = #cccbca, font-weight 300 (applies to all link states including
     :link, :visited, :active, :focus AND aria-current="page" — so the
     current page's link doesn't default to white)
   • Hover = white + Jost Bold (700)
   This is the single source of truth for nav appearance on salmon bg. */
body.past-hero.nav-tone-light .nav ul li a,
body.past-hero.nav-tone-light .nav ul li a:link,
body.past-hero.nav-tone-light .nav ul li a:visited,
body.past-hero.nav-tone-light .nav ul li a:active,
body.past-hero.nav-tone-light .nav ul li a:focus,
body.past-hero.nav-tone-light .nav ul li a[aria-current="page"],
body.past-hero.nav-tone-light .nav ul li a[aria-current="page"]:link,
body.past-hero.nav-tone-light .nav ul li a[aria-current="page"]:visited {
  color: #ffffff !important;
  font-weight: 300 !important;
}
body.past-hero.nav-tone-light .nav ul li a:hover,
body.past-hero.nav-tone-light .nav ul li a:link:hover,
body.past-hero.nav-tone-light .nav ul li a:visited:hover,
body.past-hero.nav-tone-light .nav ul li a[aria-current="page"]:hover {
  color: #d97a4f !important;
  font-weight: 300 !important;
  -webkit-text-stroke: 0 !important;
  font-family: 'Jost' !important;
}
.nav ul { list-style: none; display: flex; gap: 36px; margin: 0; padding: 0; align-items: flex-start; }
/* Nudge the menu links so their cap-height aligns with the icon's top edge. */
.nav ul li > a { padding-top: 4px; }

/* ===== About hero page-load reveal ===== */
/* Hide the nav from the very first paint on the about page (set on <html>
   before body renders) so there's no flash of nav/icon before the reveal. */
html.about-armed .nav { opacity: 0 !important; }
.about-reveal {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  pointer-events: none;
  overflow: hidden;
}
/* Dark filter over the hero video: multiply blend darkens richly without the
   grey veil a flat black-alpha overlay produces. */
.about-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: rgba(0,0,0,0.34);
}
/* Full-bleed image, FIXED size + position the entire time. Only the
   clip-path window animates, so widening it un-crops (reveals more) of the
   scene — the image itself never scales or moves. */
.about-reveal-img {
  position: absolute;
  inset: 0;
  filter: brightness(0.62) contrast(1.14) saturate(1.1);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Reveal removed — image shows full-bleed from load, no clip animation. */
  clip-path: inset(0 0 0 0);
}
@keyframes about-reveal-clip {
  /* Two keyframes only → one continuous interpolation, no velocity changes
     mid-animation (which caused the stutter). All insets in % so the browser
     interpolates a single smooth path from centered landscape sliver to full. */
  from { clip-path: inset(49.2% 47% 49.2% 47%); }
  to   { clip-path: inset(0% 0% 0% 0%); }
}
.about-hero-v3.reveal-done .about-reveal-img {
  animation: none;
  clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
  .about-reveal-img { animation: none; clip-path: inset(0 0 0 0); }
}
/* "OUR STORY" plate over the hero */
.about-story {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center; pointer-events: none;
}
.about-story-box {
  width: min(38vw, 480px);
  height: min(20vw, 250px);
  background: #000;
  display: grid; place-items: center;
  clip-path: inset(100% 0 0 0);
}
.about-story.box-in .about-story-box {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.about-story-title {
  margin: 0;
  font-family: 'Jost';
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 56px);
  letter-spacing: 0.06em;
  color: #fff;
  white-space: nowrap;
}
.about-story-title .l { display: inline-block; opacity: 0; transition: opacity 0.34s ease; }
.about-story-title .l.lit { opacity: 1; }

/* ===== About hero stat stagger (mirrors home hero fade-in/hold/fade-out) ===== */
.about-stagger {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  text-align: center;
  color: #fff;
  font-family: 'Bebas Neue';
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.04em;
  font-size: clamp(46px, 6.2vw, 104px);
  text-shadow: 0 2px 44px rgba(0,0,0,0.4);
  pointer-events: none;
  /* Block stays up after the last line holds; scroll drives it out via --c. */
  opacity: calc(1 - var(--c, 0) * 2);
}
/* Lines overlap in the same spot and cross-fade (no stacking). */
.about-stagger .as-line {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.about-stagger .as-line .w {
  display: inline-block;
  opacity: 0;
}
/* Lines 1–3 fade in, hold, then fade out (3.4s each, back-to-back). */
.about-stagger .as-line:nth-child(1) .w { animation: aboutStaggerCycle 3.6s ease-in-out 1.6s both; }
.about-stagger .as-line:nth-child(2) .w { animation: aboutStaggerCycle 3.6s ease-in-out 5.2s both; }
.about-stagger .as-line:nth-child(3) .w { animation: aboutStaggerCycle 3.6s ease-in-out 8.8s both; }
/* ONE FAMILY fades in and HOLDS. */
.about-stagger .as-line:nth-child(4) .w { animation: aboutStaggerIn 2.6s ease-in-out 12.4s both; }
@keyframes aboutStaggerIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes aboutStaggerCycle {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes aboutStaggerOut { to { opacity: 0; } }

/* ---------- Awards laurels — full-width bg, staggered fade-in ---------- */
.awards-laurels {
  position: relative;
  z-index: 10;
  background: #000;
  width: 100%;
}
.awards-laurels .al-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 2560 / 1133;
}
.awards-laurels .al-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.72) contrast(1.04);
}
/* Top-edge vignette to black (top only). */
.awards-laurels .al-frame::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 26%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 100%);
}
/* Bottom-right corner fade to black — hides the faint flour-dust haze in
   the source photo behind the right-hand laurels. */
.awards-laurels .al-frame::after {
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: 65%; height: 100%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(115% 130% at 100% 100%, #000 48%, rgba(0,0,0,0) 82%);
}
.awards-laurels .al-mark {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 7.5s ease;
  will-change: opacity;
}
.awards-laurels.al-in .al-mark { opacity: 1; }
/* order-based reveal cadence (1.4s apart) */
.awards-laurels.al-in .al-1  { transition-delay: 0s; }
.awards-laurels.al-in .al-2  { transition-delay: 0.9s; }
.awards-laurels.al-in .al-3  { transition-delay: 1.8s; }
.awards-laurels.al-in .al-4  { transition-delay: 2.7s; }
.awards-laurels.al-in .al-5  { transition-delay: 3.6s; }
.awards-laurels.al-in .al-6  { transition-delay: 4.5s; }
.awards-laurels.al-in .al-7  { transition-delay: 5.4s; }
.awards-laurels.al-in .al-8  { transition-delay: 6.3s; }
.awards-laurels.al-in .al-9  { transition-delay: 7.2s; }
.awards-laurels.al-in .al-10 { transition-delay: 8.1s; }
/* Positions + sizes matched to the mockup (percent of frame). */
/* Row 1 */
.awards-laurels .al-8  { left: 21%;   top: 21%; width: 15.5%; }
.awards-laurels .al-1  { left: 50%;   top: 22%; width: 25%; }
.awards-laurels .al-3  { left: 80%;   top: 21%; width: 15.5%; }
/* Row 2 */
.awards-laurels .al-2  { left: 10.5%; top: 53%; width: 15.5%; }
.awards-laurels .al-7  { left: 35.5%; top: 53%; width: 15.5%; }
.awards-laurels .al-4  { left: 65.5%; top: 53%; width: 15.5%; }
.awards-laurels .al-10 { left: 88.5%; top: 53%; width: 15.5%; }
/* Row 3 */
.awards-laurels .al-5  { left: 23.5%; top: 83%; width: 15.5%; }
.awards-laurels .al-9  { left: 50%;   top: 84%; width: 15.5%; }
.awards-laurels .al-6  { left: 76%;   top: 84%; width: 15.5%; }
@media (prefers-reduced-motion: reduce) {
  .awards-laurels .al-mark { opacity: 1; transition: none; }
}
/* Scroll-down cue: small Jost, centered at the bottom; fades as scroll starts. */
.about-scrollcue {
  position: absolute;
  left: 50%; bottom: 32px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,0.8);
  font-family: 'Jost';
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 11px;
  pointer-events: none;
  opacity: calc(1 - var(--c, 0) * 3);
  animation: aboutCueIn 1s ease 7.4s both;
}
.about-scrollcue .asc-text { display: block; }
.about-scrollcue .asc-skip {
  display: block;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  pointer-events: auto;
  transition: color 0.3s ease;
  animation: aboutCuePulse 3.2s ease-in-out infinite;
}
.about-scrollcue .asc-skip:hover { color: #d97a4f; }

/* Awards ticker: stack the cycling phrase on its own wrapping line so the
   long award names fit within the content column (not nowrap like BRANDS). */
.brands-carousel.home-statement .bc-tag--awards { display: flex; align-items: flex-end; flex-wrap: nowrap; white-space: nowrap; font-size: clamp(16px, 3.0vw, 58px) !important; line-height: 1; }
.bc-tag--awards .bc-tag-head { flex: none; }
.bc-tag--awards .bc-tag-cycle {
  flex: none;
  white-space: nowrap;
  clip-path: none;
  overflow: visible;
  margin-left: 0.4em;
  font-size: 1em;
  line-height: 1;
  transform: translateY(0.025em);
}
.bc-tag--awards .bc-tag-i { display: inline-block; white-space: nowrap; }
.bc-tag--awards .bc-tag-i.bc-tag-out { position: absolute; top: 0; left: 0; }
.about-scrollcue .asc-arrow {
  width: 20px; height: 12px;
  display: block;
  animation: aboutCuePulse 3.2s ease-in-out infinite;
}
.about-scrollcue .asc-text { animation: aboutCuePulse 3.2s ease-in-out infinite; }
@keyframes aboutCueIn { from { opacity: 0; } to { opacity: 0.8; } }
@keyframes aboutCuePulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .about-stagger { animation: none; }
  .about-stagger .as-line .w { animation: none; opacity: 1; }
}
/* Closing wipe: a black box that starts at the reveal's sliver size and
   grows (same speed/easing as the opening reveal) to cover the screen.
   Nav + icon (z-index 50) always stay above. */
.about-close {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #000;
  pointer-events: none;
  /* Scroll-driven full-screen dim to black: --c 0→1. Words fade across
     c:0→0.5; the screen dims to solid black by c:0.7, then the 1996 story
     begins. No growing box — just a straight fade. */
  opacity: clamp(0, calc((var(--c, 0) - 0.35) / 0.35), 1);
}
@media (prefers-reduced-motion: reduce) {
  .about-close { opacity: 0; }
}
/* Typed phrase on the filled black screen — letters reveal one by one via
   scroll (JS toggles .lit on each letter). Jost 300, centered. */
.about-typed {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  text-align: center;
  color: #f5f1ea;
  font-family: 'Jost';
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: 0.005em;
  font-size: clamp(20px, 2.6vw, 37px);
  pointer-events: none;
}
.about-typed .at-line { display: block; }
.about-typed .at-ch { opacity: 0; }
.about-typed .at-ch.lit { opacity: 1; }

/* "1996" swipe-in (right→left), centered, large bold Jost, white 50%. */
.about-year {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(calc(-50% + var(--yr-x, 90vw) ), -50%);
  z-index: 4;
  color: rgba(255,255,255,0.5);
  font-family: 'Jost';
  font-weight: 700;
  font-size: clamp(72px, 12.8vw, 224px);
  letter-spacing: -0.01em;
  line-height: 1;
  opacity: var(--yr-o, 0);
  pointer-events: none;
}
/* Story paragraph: types out letter by letter, centered, Jost. */
.about-para {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  text-align: center;
  color: #f5f1ea;
  font-family: 'EB Garamond';
  font-weight: 400;
  font-size: clamp(15px, 1.55vw, 22px);
  line-height: 1.65;
  width: min(74vw, 624px);
  pointer-events: none;
}
.about-para .ap-line { display: block; letter-spacing: 0.01em; opacity: 0; }
.about-para .ap-year {
  display: block;
  font-family: 'Jost';
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  font-size: clamp(36px, 3.94vw, 57px);
  line-height: 1;
  margin-bottom: 0.18em;
  opacity: 0;
}
.about-para .ap-title {
  font-family: 'Bebas Neue';
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #d97a4f;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1.05;
  margin-bottom: 0.5em;
  white-space: nowrap;
  opacity: 0;
}
.about-para .ap-ch { opacity: 0; }
.about-para .ap-ch.lit { opacity: 1; }

/* Story video: full-width cinematic letterbox band sitting BEHIND the black
   cover (z2). Black (#000 page + cover layers) frames it top & bottom. */
.about-story-media {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 86vh;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  opacity: 1 !important;
  clip-path: inset(var(--vid-clip, 100%) 0 0 0);
}
.about-story-media .about-story-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.4) contrast(1.05) saturate(0.92);
}
/* Edge vignette only — no flat color fill (which caused the green cast).
   inset:-2px closes the sub-pixel sliver at the bottom edge. */
.about-story-media::after {
  content: '';
  position: absolute;
  inset: -2px;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,0.7) 100%);
}
/* Bottom black panel — starts off-screen below, rises to re-cover video. */
.about-cover2 {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #000;
  pointer-events: none;
  transform: translateY(110%);
}
@media (prefers-reduced-motion: reduce) {
  .about-story-media { clip-path: none; }
}
@media (prefers-reduced-motion: reduce) {
  .about-year { opacity: 0.5; --yr-x: 0; }
  .about-para .ap-ch { opacity: 1; }
}

/* ===== Story chapter: video right, typed paragraph left ===== */
.about-story {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
  padding: 120px clamp(40px, 6vw, 96px);
  opacity: 0;                 /* fades in via --v set by JS */
  pointer-events: none;
}
.about-story-text {
  color: #f5f1ea;
  font-family: 'EB Garamond';
  font-weight: 300;
  font-size: clamp(13px, 0.92vw, 16px);
  line-height: 1.6;
  max-width: 36ch;
}
.about-story-text .ast-p { margin: 0 0 1.05em; }
.about-story-text .ast-ch { opacity: 0; }
.about-story-text .ast-ch.lit { opacity: 1; }
.about-story-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 64vh;
  justify-self: end;
  overflow: hidden;
  opacity: var(--v, 0);
  transition: opacity 0.1s linear;
}
.about-story-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* true darkening (brightness/contrast) instead of a grey veil */
  filter: brightness(0.6) contrast(1.05) saturate(0.98);
}
.about-story-vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 38%, rgba(0,0,0,0.62) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .about-story { opacity: 1; }
  .about-story-text .ast-ch { opacity: 1; }
}
/* Pin the about hero so scrolling only grows the closing box — content
   itself doesn't move. The spacer provides the scrollable distance. */
.about-hero-v3 { position: fixed; inset: 0; z-index: 5; }
.about-scroll-spacer { height: 6200vh; background: #000; }
/* Hamburger button — hidden on desktop, shown on mobile via the media query. */
.nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; z-index: 60; }
.nav-burger span { display: block; width: 26px; height: 2px; margin: 5px 0; background: currentColor; transition: transform 0.3s ease, opacity 0.3s ease; }
/* Reserve space for each nav link in its bold variant so going bold on
   hover doesn't reflow the neighboring links. */
.nav ul li { position: relative; text-align: left; }
.nav ul li a { display: inline-block; text-align: left; }
.nav ul li::before {
  content: attr(data-label);
  display: block;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  font-family: 'Jost';
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 300;
  pointer-events: none;
  text-align: center;
}
.nav ul li > a { display: block; text-align: center; }
.nav a {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 6px 0; position: relative;
  font-weight: 300;
  /* Brand-orange hover state (matches the "awards." accent). Bold the
     weight on hover, which Jost supports natively as 700. */
  transition: color 0.18s ease, font-weight 0.01s linear;
}
.nav a:hover,
.nav a[aria-current="page"]:hover {
  color: #d97a4f;
  /* Colour-only: keep the resting weight so the glyphs themselves never
     thicken or widen. */
  font-weight: 300;
  -webkit-text-stroke: 0;
}
.nav .mark::after, .nav .mark:hover::after { content: none !important; }
.nav ul li a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px;
  background: #d97a4f; transform: scaleX(0); transform-origin: right center;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.nav ul li a:hover::after,
.nav ul li a[aria-current="page"]:hover::after { transform: scaleX(1); }

/* ---------- Hero (video) ---------- */
.hero {
  position: relative; height: 100vh; min-height: 720px;
  overflow: hidden; background: #000;
}
.hero .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}
.hero .hero-scrim {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.08);
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  /* Subtle radial edge vignette only — no top/bottom darkening. */
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 70%);
  pointer-events: none;
}
.hero .hero-inner {
  position: relative; z-index: 2; height: 100%;
  display: grid; grid-template-rows: 1fr auto;
  padding: 120px 40px 56px;
  align-items: center;
}
.hero h1 {
  align-self: center;
  text-align: center;
  color: #fff;
  font-size: clamp(56px, 9vw, 160px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-weight: 700;
  white-space: nowrap;
}
.hero h1 em { /* weight inherits */ }
.hero .hero-meta {
  display: flex; justify-content: space-between; align-items: end;
  color: var(--cream); margin-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: 20px;
}
.hero .hero-meta .left { max-width: none; flex: 1 1 auto; }
.hero .hero-lede {
  /* EB Garamond for the hero lede. */
  font-family: 'EB Garamond';
  font-optical-sizing: auto;
  font-weight: 400;
  /* One-line headline of staccato phrases — kept small enough that all four
     fit on a single row at any reasonable desktop width. */
  white-space: nowrap;
  font-size: clamp(13px, 1.05vw, 18px);
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--cream);
  max-width: none;
}
.hero .hero-lede em {
  font-weight: 400;
  color: #fff;
}
.hero .hero-meta .right { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.hero .est-stamp { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--cream); }
.hero .est-stamp .est-plane { width: 84px; height: 42px; opacity: 0.85; transform: rotate(-2deg); margin-right: -4px; margin-bottom: 6px; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(255,255,255,0.7);
  z-index: 3;
}

/* ---------- Sections ---------- */
section { position: relative; }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
.section-pad { padding: 140px 0; }

.section-head {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 80px;
  margin-bottom: 72px; align-items: end;
}
.section-head h2 {
  font-size: clamp(44px, 5.5vw, 84px);
}
.section-head h2 em { white-space: nowrap; }
.section-lede {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink-dim);
  max-width: 42ch;
}
.section-lede em {
  font-weight: 400;
  color: var(--cream);
}

/* Editorial variant — bigger, softer, better Fraunces voice */
.section-lede--editorial {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 36, 'SOFT' 50;
  font-weight: 360;
  font-size: clamp(22px, 1.75vw, 30px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  max-width: 36ch;
  text-wrap: balance;
}
.section-lede--editorial em {
  font-weight: 360;
}
.section-head .num {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 16px;
}

/* ---------- Intro statement ---------- */
.intro {
  background: var(--bg); color: var(--ink);
  padding: 140px 0 100px;
  border-bottom: 1px solid var(--line);
}
.intro .pull {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 5vw, 78px);
  line-height: 1.08; letter-spacing: -0.025em;
  max-width: 22ch;
}
.intro .pull em { }
.intro .pull .hl { color: var(--accent); }

/* ---------- Brand grid ---------- */
.brands {
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding: 100px 0 140px;
}
/* Full-bleed grid: escape .wrap so cells span the entire viewport */
.brands .brand-grid {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.brand-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.brand-cell {
  aspect-ratio: 5/4;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  background: #0f0f0f center/cover no-repeat;
  cursor: pointer;
}
.brand-cell .label {
  position: absolute; left: 24px; right: 24px; bottom: 22px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 2;
}
.brand-cell .label .meta {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.7);
  order: -1;
}
.brand-cell .label .name {
  font-family: var(--serif); font-weight: 700; font-size: 22px;
  letter-spacing: -0.01em; color: #fff; line-height: 1.05;
}
.brand-cell::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%);
  z-index: 1;
}
.brand-cell::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,0.18);
  transition: background .5s ease;
  z-index: 1;
}
.brand-cell:hover::after { background: rgba(0,0,0,0); }
.brand-cell:hover { transform: none; }

/* ---------- Brands Cinema (sticky photo + scroll-driven crossfade) ---------- */
.brands-cinema {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.brands-cinema .bc-head {
  padding: 100px 0 80px;
}
.brands-cinema .bc-foot {
  padding: 0 0 140px;
}

/* Stage: holds the sticky viewport + the panel-driven scroll spacers */
.brands-cinema .bc-stage {
  position: relative;
}

/* Sticky viewport — full width of section, 100vh */
.brands-cinema .bc-sticky {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

/* Photo layers — absolute, crossfade via opacity. Active layer ken-burns. */
.brands-cinema .bc-layer {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.02);
  transform-origin: 50% 55%;
  transition: opacity 1.1s cubic-bezier(.55,.05,.35,.95),
              transform 8s cubic-bezier(.2,.7,.2,1);
  z-index: 1;
  cursor: pointer;
  display: block;
}
.brands-cinema .bc-layer.is-active {
  opacity: 1;
  transform: scale(1.12); /* ken-burns: zoom toward camera while active */
}
/* Subtle vignette + bottom gradient for legibility */
.brands-cinema .bc-sticky::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.45) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 5;
}

/* HUD overlay: counter top-right, brand card bottom-left, CTA bottom-right */
.brands-cinema .bc-hud {
  position: absolute; inset: 0;
  z-index: 10;
  pointer-events: none;
  padding: 56px 64px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr auto;
  gap: 24px;
}
.brands-cinema .bc-counter {
  grid-column: 2; grid-row: 1;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.22em;
  color: rgba(245,241,232,0.8);
  text-transform: uppercase;
  display: flex; gap: 6px; align-items: baseline;
}
.brands-cinema .bc-counter .bc-i { color: #f5f1ea; font-size: 13px; }
.brands-cinema .bc-counter .bc-sep { opacity: 0.4; }

/* Brand cards stack — only one is-active at a time */
.brands-cinema .bc-cards {
  grid-column: 1; grid-row: 3;
  position: relative;
  min-height: 110px;
  align-self: end;
}
.brands-cinema .bc-card {
  position: absolute; left: 0; bottom: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.brands-cinema .bc-card.is-active {
  opacity: 1;
  transform: translateY(0);
}
.brands-cinema .bc-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: #f5f1ea;
  text-wrap: balance;
}
.brands-cinema .bc-meta {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.7);
}
.brands-cinema .bc-cta {
  grid-column: 2; grid-row: 3;
  align-self: end;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.85);
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(245,241,232,0.3);
}
.brands-cinema .bc-cta span { font-size: 14px; }

/* Centered-bottom overlay CTA (replaces the old bc-foot pill) */
.brands-cinema .bc-see-cta {
  position: absolute;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%) translateY(8px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 32px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #f5f1ea;
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid rgba(245, 241, 234, 0.35);
  border-radius: 999px;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(.2,.7,.2,1),
              background 0.3s ease, border-color 0.3s ease;
}
.brands-cinema.bc-on-last .bc-see-cta {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.brands-cinema .bc-see-cta:hover {
  background: rgba(245, 241, 234, 0.92);
  color: #000000;
  border-color: rgba(245, 241, 234, 0.92);
}
.brands-cinema.bc-on-last .bc-see-cta:hover {
  transform: translateX(-50%) translateY(-2px);
}
.brands-cinema .bc-see-cta-arrow { font-size: 14px; letter-spacing: 0; }
@media (max-width: 767px) {
  .brands-cinema .bc-see-cta {
    bottom: 28px;
    padding: 14px 22px;
    font-size: 11px;
    letter-spacing: 0.2em;
  }
}

/* Make the active layer's <a> clickable above the HUD's pointer-events:none */
.brands-cinema .bc-layer.is-active { pointer-events: auto; }
.brands-cinema .bc-layer:not(.is-active) { pointer-events: none; }

/* Scroll-driven spacer panels (one per brand). Each is 100vh tall. */
.brands-cinema .bc-panels {
  position: relative;
  /* The first panel overlaps the sticky's first viewport, so we offset
     by -100vh so total scroll = 6 panels worth */
  margin-top: -100vh;
}
.brands-cinema .bc-panel {
  height: 100vh;
}

@media (max-width: 767px) {
  .brands-cinema .bc-hud { padding: 32px 24px; }
  .brands-cinema .bc-name { font-size: clamp(28px, 8vw, 40px); }
  .brands-cinema .bc-counter { font-size: 10px; }
  .brands-cinema .bc-foot { padding: 0 0 80px; }
}

/* ---------- Locations video sticky section ---------- */
.locations-walk {
  position: relative;
  background: #000;
}
.locations-walk .sticky-video {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden;
}
.locations-walk .sticky-video video,
.locations-walk .sticky-video .vid-fallback,
.locations-walk .sticky-video .vid-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.locations-walk .sticky-video .vid-fallback {
  background: #000 center/cover no-repeat;
  background-size: cover;
  background-position: center;
}
.locations-walk .sticky-video .vid-layer {
  background: #000 center/cover no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 1;
}
.locations-walk .sticky-video .vid-layer.is-active {
  opacity: 1;
}
.locations-walk .sticky-video::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.35) 100%);
}

/* Year flipboard overlay — upper-left of the journey */
.locations-walk .lw-year {
  position: absolute;
  top: clamp(64px, 8vh, 96px);
  left: clamp(32px, 5vw, 80px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: none;
  user-select: none;
}
.locations-walk .lw-year-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245,241,234,0.55);
}
.locations-walk .lw-year-row {
  display: flex;
  gap: 8px;
}
.locations-walk .lw-year .fb-char {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(56px, 6vw, 92px);
  height: clamp(72px, 7.6vw, 116px);
  background: linear-gradient(180deg, #1a1815 0%, #1a1815 49%, #0d0c0b 50%, #161412 100%);
  border-radius: 4px;
  font-family: 'Jost';
  font-size: clamp(46px, 5vw, 76px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  color: #f5f1ea;
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  transition: filter 80ms;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.locations-walk .lw-year .fb-char::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(0,0,0,0.55);
  z-index: 2;
  pointer-events: none;
}
.locations-walk .lw-year .fb-char.is-flipping {
  filter: brightness(1.3);
  animation: fbFlap 90ms ease-in-out;
}

@media (max-width: 1279px) {
  .locations-walk .lw-year { top: 32px; left: 20px; gap: 10px; }
  .locations-walk .lw-year-eyebrow { font-size: 9px; letter-spacing: 0.22em; }
}

/* Tiled timeline variant — dark theme, dark card on dark bg with image tile on right,
   year flipboard pinned upper-left. Cards swap in place as scroll drivers pass. */
.locations-walk.journey-static {
  background: #000000;
  color: #f5f1ea;
}
.locations-walk.journey-static .sticky-video {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  background: #000000;
  padding: 0;
  overflow: hidden;
}
.locations-walk.journey-static .sticky-video::after { content: none; }

/* Two-column layout inside the sticky stage. Year flipboard is its own row
   pinned upper-left; image and card share the lower row side-by-side. */
.locations-walk.journey-static .lw-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "year year"
    "card image";
  column-gap: 56px;
  row-gap: 28px;
  padding: 36px 40px 40px;
  height: 100%;
  box-sizing: border-box;
}

/* Year flipboard — top row, left aligned */
.locations-walk.journey-static .lw-year {
  grid-area: year;
  position: relative;
  top: auto; left: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.locations-walk.journey-static .lw-year-eyebrow { color: rgba(245,241,234,0.55); }

/* Image column */
.locations-walk.journey-static .lw-images {
  grid-area: image;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.locations-walk.journey-static .vid-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: none;
  transition: opacity 0.6s cubic-bezier(.2,.7,.2,1), filter 0.5s cubic-bezier(.2,.7,.2,1);
  filter: grayscale(1) contrast(0.92) brightness(1.06);
}
.locations-walk.journey-static .vid-layer.is-active { opacity: 1; }
.locations-walk.journey-static .lw-images:hover .vid-layer { filter: grayscale(0) contrast(1.04) saturate(1.02); }

/* Card column — text boxes stack in same cell */
.locations-walk.journey-static .journey-cards {
  grid-area: card;
  position: relative;
  display: grid;
  align-items: start;
  justify-items: stretch;
  padding: 0;
  z-index: 3;
  pointer-events: none;
}
.locations-walk.journey-static .journey-card {
  grid-area: 1 / 1;
  width: 100%;
  max-width: 540px;
  background: #1a1714;
  color: #f5f1ea;
  padding: 40px 44px 44px;
  border: 1px solid rgba(245,241,232,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.5s cubic-bezier(.2,.7,.2,1), transform 0.5s cubic-bezier(.2,.7,.2,1), visibility 0s linear 0.5s;
  pointer-events: none;
}
.locations-walk.journey-static .journey-card.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.6s cubic-bezier(.2,.7,.2,1), transform 0.6s cubic-bezier(.2,.7,.2,1), visibility 0s linear 0s;
  pointer-events: auto;
}

.locations-walk.journey-static .journey-card .num {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-dim);
  margin-bottom: 18px;
}
.locations-walk.journey-static .journey-card h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  color: #f5f1ea;
}
.locations-walk.journey-static .journey-card h3 em { font-style: normal; font-weight: 400; color: #f5f1ea; }
.locations-walk.journey-static .journey-card p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.5;
  color: rgba(245,241,234,0.78);
  margin: 0;
}
.locations-walk.journey-static .journey-card .card-lede {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.45;
  color: #f5f1ea;
  margin: 0 0 18px;
}
.locations-walk.journey-static .journey-card .card-emph {
  font-style: normal;
  font-size: clamp(14px, 1.05vw, 16px);
  color: rgba(245,241,234,0.7);
  margin: 14px 0 0;
}
.locations-walk.journey-static .journey-card .card-sourcing {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(245,241,234,0.18);
}
.locations-walk.journey-static .journey-card .card-sourcing li {
  display: grid;
  grid-template-columns: minmax(110px, 0.85fr) 1.4fr;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(245,241,234,0.10);
  font-size: 13px;
}
.locations-walk.journey-static .journey-card .card-sourcing .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,241,234,0.55);
  padding-top: 2px;
}
.locations-walk.journey-static .journey-card .card-sourcing .v {
  font-family: var(--serif);
  font-style: normal;
  color: #f5f1ea;
}

/* Scroll drivers (invisible) */
.locations-walk.journey-static .panels {
  position: relative;
  z-index: 2;
  margin-top: -100vh;
  pointer-events: none;
}
.locations-walk.journey-static .panel {
  height: 100vh;
  pointer-events: none;
  background: transparent;
  padding: 0;
}

@media (max-width: 1279px) {
  .locations-walk.journey-static .sticky-video {
    height: auto;
    min-height: 100vh;
    position: relative;
    top: auto;
  }
  .locations-walk.journey-static .lw-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "year"
      "image"
      "card";
    column-gap: 0;
    row-gap: 20px;
    padding: 56px 20px 32px;
  }
  .locations-walk.journey-static .lw-images { height: 240px; }
  .locations-walk.journey-static .journey-card { max-width: 100%; padding: 28px 24px 32px; }
}
.locations-walk .panels {
  position: relative; z-index: 2; margin-top: -100vh;
}
.locations-walk .panel {
  height: 100vh;
  display: grid; place-items: center;
  padding: 0 40px;
  color: #fff;
}
.locations-walk .panel .card {
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 44px 48px;
  max-width: 540px;
  opacity: 0; transform: translateY(40px);
  transition: opacity .8s ease, transform .8s ease;
}
.locations-walk .panel.in .card { opacity: 1; transform: translateY(0); }
.locations-walk .panel:nth-child(odd)  { justify-content: start; }
.locations-walk .panel:nth-child(even) { justify-content: end; }
.locations-walk .panel .num {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-dim);
  margin-bottom: 14px;
}
.locations-walk .panel h3 {
  font-size: clamp(40px, 5vw, 72px); margin-bottom: 16px;
}
.locations-walk .panel h3 em { /* weight inherits */ }
.locations-walk .panel p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,0.88);
  margin: 0;
  max-width: 38ch;
  text-wrap: pretty;
}

/* Editorial photo paired with a panel — sits opposite the card on wide screens */
.locations-walk .panel { position: relative; }
.locations-walk .panel-media {
  position: absolute;
  right: 80px; top: 50%; transform: translate(0, calc(-50% + 18px));
  width: clamp(320px, 28vw, 480px);
  margin: 0;
  opacity: 0; transition: opacity .9s ease, transform .9s ease;
}
.locations-walk .panel.in .panel-media {
  opacity: 1; transform: translate(0, -50%);
}
.locations-walk .panel-media .img {
  width: 100%; aspect-ratio: 4/5;
  background-size: cover; background-position: center;
  border: 1px solid rgba(255,255,255,0.08);
  filter: saturate(0.92) contrast(1.02);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}
.locations-walk .panel-media figcaption {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 14px; padding-left: 2px;
}
@media (max-width: 1279px) {
  .locations-walk .panel-media { display: none; }
}

/* ---------- Leadership / chef-forward ---------- */
.leadership { padding: 140px 0; border-bottom: 1px solid var(--line); }
.leader-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 32px;
}

/* Infinite marquee variant of the leader row */
.leader-marquee {
  position: relative;
  overflow: hidden;
}
.leader-marquee .leader-track {
  display: flex;
  gap: 32px;
  width: max-content;
  animation: leader-scroll var(--marquee-duration, 80s) linear infinite;
  animation-direction: var(--marquee-direction, normal);
  will-change: transform;
}
.leader-marquee:hover .leader-track { animation-play-state: paused; }
.leader-marquee .leader {
  flex: 0 0 calc((100vw - 80px - 96px) / 4);
  max-width: 380px;
}
@media (max-width: 1279px) {
  .leader-marquee .leader { flex-basis: calc((100vw - 80px - 64px) / 3); }
}
@media (max-width: 767px) {
  .leader-marquee .leader { flex-basis: calc((100vw - 80px - 32px) / 2); }
}

/* Speed-up controls — overlay on the marquee */
.leader-marquee .marquee-ctrl {
  position: absolute;
  top: 50%;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(245,241,232,0.92);
  border: 1px solid rgba(26,24,21,0.1);
  cursor: pointer;
  z-index: 3;
  transform: translateY(-50%);
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  font-family: var(--mono);
  font-size: 18px;
  color: var(--cream-ink, #1a1815);
  opacity: 0;
}
.leader-marquee:hover .marquee-ctrl { opacity: 1; }
.leader-marquee .marquee-ctrl:hover {
  background: var(--accent, #d97a4f);
  color: #000000;
  transform: translateY(-50%) scale(1.05);
}
.leader-marquee .marquee-ctrl.prev { left: 24px; }
.leader-marquee .marquee-ctrl.next { right: 24px; }
.leader-marquee .marquee-ctrl svg { width: 18px; height: 18px; }

@keyframes leader-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .leader-marquee .leader-track { animation: none; }
}
.leader { display: flex; flex-direction: column; gap: 16px; }
.leader .pic {
  aspect-ratio: 4/5; background: #1a1a1a center/cover no-repeat;
  filter: grayscale(0.15) contrast(1.05);
  transition: filter .6s ease;
}
.leader:hover .pic { filter: grayscale(0) contrast(1); }
.leader .name { font-family: var(--serif); font-size: 22px; font-weight: 700; }
.leader .title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }

/* ---------- Press / awards ---------- */
/* ---------- Awards (laurel marquee) ---------- */
.awards {
  background: #000000;
  padding: 140px 0 100px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.awards::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(212,175,55,0.06), transparent 60%);
  pointer-events: none;
}
.awards-head {
  position: relative; z-index: 2;
  margin-bottom: 100px;
}
.awards-head .num {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 60px;
  text-align: center;
}
.awards-figures {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 64px;
}
.awards-title {
  font-size: clamp(56px, 7vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0;
  text-align: center;
  align-self: center;
}
.awards-title em { /* weight inherits */ }

.awards-head .fig {
  display: flex; flex-direction: column;
  align-items: flex-start;
  position: relative;
  padding-bottom: 18px;
}
.awards-head .fig::after {
  content: '';
  position: absolute; left: 0; right: 30%; bottom: 0;
  height: 1px; background: rgba(255,255,255,0.18);
}
.awards-head .fig--alt {
  align-items: flex-end;
}
.awards-head .fig--alt::after {
  left: 30%; right: 0;
}
.awards-head .fig-n {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(96px, 11vw, 180px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: #fff;
}
.awards-head .fig-l {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 18px;
}
.awards-head .fig--alt .fig-l { text-align: right; }

@media (max-width: 1279px) {
  .awards-figures { grid-template-columns: 1fr; gap: 32px; }
  .awards-head .fig, .awards-head .fig--alt { align-items: center; }
  .awards-head .fig::after, .awards-head .fig--alt::after { left: 20%; right: 20%; }
  .awards-head .fig--alt .fig-l { text-align: center; }
}

/* Marquee tracks */
.awards-track {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 36px;
}
.awards-track::before,
.awards-track::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 200px;
  z-index: 3;
  pointer-events: none;
}
.awards-track::before { left: 0; background: linear-gradient(90deg, #000000, transparent); }
.awards-track::after  { right: 0; background: linear-gradient(-90deg, #000000, transparent); }

.awards-marquee {
  display: flex;
  width: max-content;
  will-change: transform;
}
.awards-marquee--ltr { animation: aw-scroll-ltr 70s linear infinite; }
.awards-marquee--rtl { animation: aw-scroll-rtl 90s linear infinite; }
.awards-row {
  display: flex; align-items: center; gap: 64px;
  padding-right: 64px;
  flex-shrink: 0;
}
.award {
  display: inline-flex; align-items: center; gap: 14px;
  flex-shrink: 0;
}
.award .laurel {
  width: 64px; height: 96px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.85;
  flex-shrink: 0;
}
.award .laurel.l-left {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA2NCA5Nic+PGcgZmlsbD0nbm9uZScgc3Ryb2tlPScjZjVlOWM4JyBzdHJva2Utd2lkdGg9JzEuNCcgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJz48cGF0aCBkPSdNNTggOCBDIDMwIDI2LCAxNiA1MCwgMTggODgnLz48cGF0aCBkPSdNNTIgMTggQyAzOCAyMiwgMzAgMzAsIDI0IDQwJyAvPjxwYXRoIGQ9J000NiAzMCBDIDMyIDMyLCAyNCAzOCwgMjAgNTAnIC8+PHBhdGggZD0nTTQwIDQyIEMgMjggNDIsIDIyIDQ4LCAyMCA2MCcgLz48cGF0aCBkPSdNMzYgNTYgQyAyNiA1NCwgMjIgNjAsIDIyIDcwJyAvPjxwYXRoIGQ9J001MiAxOCBxIDYgLTMgMTIgLTEnIC8+PHBhdGggZD0nTTQ2IDMwIHEgNiAtMiAxMiAwJyAvPjxwYXRoIGQ9J000MCA0MiBxIDUgLTIgMTAgLTEnIC8+PHBhdGggZD0nTTM2IDU2IHEgNCAtMiA4IDAnIC8+PC9nPjwvc3ZnPg==");
}
.award .laurel.l-right {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA2NCA5Nic+PGcgZmlsbD0nbm9uZScgc3Ryb2tlPScjZjVlOWM4JyBzdHJva2Utd2lkdGg9JzEuNCcgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJz48cGF0aCBkPSdNNiA4IEMgMzQgMjYsIDQ4IDUwLCA0NiA4OCcvPjxwYXRoIGQ9J00xMiAxOCBDIDI2IDIyLCAzNCAzMCwgNDAgNDAnIC8+PHBhdGggZD0nTTE4IDMwIEMgMzIgMzIsIDQwIDM4LCA0NCA1MCcgLz48cGF0aCBkPSdNMjQgNDIgQyAzNiA0MiwgNDIgNDgsIDQ0IDYwJyAvPjxwYXRoIGQ9J00yOCA1NiBDIDM4IDU0LCA0MiA2MCwgNDIgNzAnIC8+PHBhdGggZD0nTTEyIDE4IHEgLTYgLTMgLTEyIC0xJyAvPjxwYXRoIGQ9J00xOCAzMCBxIC02IC0yIC0xMiAwJyAvPjxwYXRoIGQ9J00yNCA0MiBxIC01IC0yIC0xMCAtMScgLz48cGF0aCBkPSdNMjggNTYgcSAtNCAtMiAtOCAwJyAvPjwvZz48L3N2Zz4=");
}
.award .body {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px;
  min-width: 180px; max-width: 280px;
}
.award .kicker {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-dim);
}
.award .title {
  font-family: var(--serif);
  font-size: 14px; line-height: 1.25;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.award .year {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.16em;
  color: var(--ink-dim);
  margin-top: 4px;
}
@keyframes aw-scroll-ltr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes aw-scroll-rtl {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.awards-marquee:hover { animation-play-state: paused; }

/* ---------- Awards — The Reel ---------- */
.reel {
  background: #000000;
  color: #fff;
  padding: 140px 0 120px;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.reel::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(212,175,55,0.06), transparent 60%),
    radial-gradient(ellipse at 0% 100%, rgba(212,175,55,0.04), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Header */
.reel-head {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 60px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  margin-bottom: 80px;
}
.reel-num {
  font-family: var(--mono);
  font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-dim);
  grid-column: 1; grid-row: 1;
  margin-bottom: 32px;
}
.reel-meta {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-dim);
  grid-column: 2; grid-row: 1;
  align-self: end;
  display: flex; gap: 14px; align-items: baseline;
}
.reel-meta-sep { opacity: 0.5; }
.reel-title {
  grid-column: 1 / -1; grid-row: 2;
  font-family: var(--serif);
  font-size: clamp(72px, 10vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0;
  font-weight: 500;
}
.reel-title em { font-weight: 400; color: var(--accent); }

/* Stage — Awards carousel (peeking cards) */
.aw-carousel {
  position: relative; z-index: 2;
  margin: 0 0 96px;
}
.aw-track-mask {
  position: relative;
  /* Faded edges so cards bleed beyond the visible area */
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
/* Continuous-scroll marquee. The track is duplicated so the second half
   slides into view as the first half slides out — endless loop. */
.aw-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 28px;
  width: max-content;
  padding: 8px 0 24px;
  animation: aw-marquee var(--aw-marquee-dur, 80s) linear infinite;
  will-change: transform;
}
.aw-carousel:hover .aw-track,
.aw-carousel:focus-within .aw-track { animation-play-state: paused; }
.aw-track::-webkit-scrollbar { display: none; }
@keyframes aw-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--aw-marquee-shift, -50%)); }
}
@media (prefers-reduced-motion: reduce) {
  .aw-track { animation: none; }
}

/* Each award card */
.aw-card {
  flex: 0 0 360px;
  width: 360px;
  background: linear-gradient(180deg, #0f0f10 0%, #0a0a0b 100%);
  border: 1px solid rgba(245,241,232,0.10);
  padding: 28px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  cursor: pointer;
  transition: border-color 0.4s ease, background 0.4s ease;
}
.aw-card:hover { border-color: rgba(245,241,232,0.22); background: linear-gradient(180deg, #161616 0%, #0c0c0d 100%); }

.aw-card-meta {
  display: flex; align-items: baseline; gap: 14px;
  margin: 0;
}
.aw-card-num {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.aw-card-cat {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.5);
}
/* (Year shown inline in the meta line) */
.aw-card-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
.aw-card-spacer { display: none; }
.aw-card-attr {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(245,241,232,0.6);
  border-top: 1px solid rgba(245,241,232,0.10);
  padding-top: 14px;
  margin: 4px 0 0;
}

/* Nav: prev/next + counter */
.aw-nav {
  margin-top: 28px;
  display: flex; align-items: center; gap: 24px;
  justify-content: flex-start;
}
.aw-btn {
  border: 1px solid rgba(245,241,232,0.18);
  background: transparent;
  color: #f5f1ea;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.aw-btn:hover { background: rgba(245,241,232,0.08); border-color: rgba(245,241,232,0.35); }
.aw-btn:active { transform: scale(0.96); }
.aw-counter {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.22em;
  color: rgba(245,241,232,0.65);
  display: inline-flex; gap: 4px; min-width: 76px;
  font-variant-numeric: tabular-nums;
}
.aw-counter .aw-i { color: #fff; }
.aw-counter .aw-sep { opacity: 0.4; }

@media (max-width: 1279px) {
  .aw-card { flex-basis: 280px; width: 280px; padding: 22px 22px 24px; }
  .aw-track { gap: 20px; }
  .aw-card-name { font-size: 22px; }
}
@media (max-width: 767px) {
  .aw-card { flex-basis: 84vw; width: 84vw; }
}

/* ============================================================
   Restaurant Carousel — locations page, photo-fronted cards
   Uses the same continuous-marquee mechanic as the awards carousel.
   ============================================================ */
.restaurants {
  background: #000000;
  color: #f5f1ea;
  padding: 96px 0 88px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.restaurants .rc-head {
  max-width: 1480px;
  margin: 0 auto 56px;
  padding: 0 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
}
.restaurants .rc-head .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 18px;
}
.restaurants .rc-head h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(48px, 6vw, 92px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.restaurants .rc-head h2 em { font-weight: 700; }
.restaurants .rc-head p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(245,241,234,0.65);
  margin: 0;
  max-width: 38ch;
}

.rc-track-mask {
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.rc-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 32px;
  width: max-content;
  padding: 4px 0 12px;
  animation: rc-marquee var(--rc-marquee-dur, 80s) linear infinite;
  will-change: transform;
}
.restaurants:hover .rc-track,
.restaurants:focus-within .rc-track { animation-play-state: paused; }
.rc-track::-webkit-scrollbar { display: none; }
@keyframes rc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .rc-track { animation: none; }
}

.rc-card {
  flex: 0 0 480px;
  width: 480px;
  background: #000000;
  border: 1px solid rgba(245,241,234,0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.4s ease;
}
.rc-card:hover { border-color: rgba(245,241,234,0.22); }
.rc-card-photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  background-size: cover;
  background-position: center;
  background-color: #000000;
  flex: none;
}
.rc-card-meta {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 20px 24px;
  border-top: 1px solid rgba(245,241,234,0.08);
}
.rc-card-code {
  font-family: 'Jost';
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #d97a4f;
  flex: none;
}
.rc-card-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #f5f1ea;
}

@media (max-width: 1279px) {
  .restaurants { padding: 72px 0 64px; }
  .restaurants .rc-head { padding: 0 28px; gap: 32px; grid-template-columns: 1fr; }
  .rc-card { flex-basis: 360px; width: 360px; }
}
@media (max-width: 767px) {
  .rc-card { flex-basis: 86vw; width: 86vw; }
  .rc-card-name { font-size: 18px; }
}

/* Footer: 3 stats spread across the width */
.reel-foot {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  align-items: stretch;
  padding-top: 48px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.reel-stat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 32px;
  border-left: 1px solid rgba(255,255,255,0.10);
}
.reel-stat:first-child { border-left: 0; padding-left: 0; }
.reel-stat:last-child  { padding-right: 0; }
.rs-n {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(56px, 6.4vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline;
}
.rs-n em {
  color: var(--accent);
  font-weight: 400;
  margin-left: 2px;
}
.rs-l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
}

@media (max-width: 1279px) {
  .reel-foot { grid-template-columns: 1fr 1fr 1fr; gap: 0; }
}
@media (max-width: 767px) {
  .reel-stage { min-height: 240px; }
  .reel-foot { grid-template-columns: 1fr; }
  .reel-stat { border-left: 0; border-top: 1px solid rgba(255,255,255,0.10); padding: 24px 0 0; }
  .reel-stat:first-child { border-top: 0; padding-top: 0; }
}

/* ---------- Sustainability ---------- */
.sustain {
  padding: 160px 0;
  background: #0e0d0b;
  border-bottom: 1px solid var(--line);
}
.sustain-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 100px;
  align-items: start;
}
.sustain ul { list-style: none; padding: 0; margin: 32px 0 0; }

/* New editorial lead */
.sustain-kicker {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 1.9vw, 30px);
  line-height: 1.3;
  color: #fff;
  margin: 32px 0 0;
  letter-spacing: -0.005em;
  max-width: 22ch;
}
.sustain-figs {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.sustain-figs .fig {
  display: grid;
  grid-template-columns: minmax(180px, auto) 1fr;
  align-items: baseline;
  gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.sustain-figs .fig:last-child { border-bottom: 0; padding-bottom: 0; }
.sustain-figs .fig-n {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(64px, 6.5vw, 104px);
  line-height: 0.85;
  letter-spacing: -0.035em;
  color: #fff;
}
.sustain-figs .fig-n .plus,
.sustain-figs .fig-n .pct { font-weight: 400;
  color: var(--accent);
  font-size: 0.55em;
  margin-left: 0.04em;
  vertical-align: 0.45em;
}
.sustain-figs .fig-l {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-dim);
  line-height: 1.5;
}
.sustain li {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  display: grid; grid-template-columns: 32px 1fr; gap: 16px;
  align-items: baseline;
}
.sustain li .n { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); letter-spacing: 0.16em; }
.sustain li h4 { font-family: var(--serif); font-size: 22px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
.sustain li p {
  margin: 0;
  color: var(--ink-dim);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

/* ---------- Partner / careers CTA ---------- */
.cta-split {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}
.cta-split > a {
  position: relative;
  padding: 120px 56px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 460px;
  overflow: hidden;
  isolation: isolate;
  border-right: 1px solid var(--line);
}
.cta-split > a:last-child { border-right: 0; }
.cta-split .bg {
  position: absolute; inset: 0; background: #111 center/cover no-repeat;
  z-index: -1; transition: transform 1.2s cubic-bezier(.2.7.2,1);
  filter: brightness(0.4) grayscale(0.2);
}
.cta-split > a:hover .bg { transform: scale(1.05); filter: brightness(0.55) grayscale(0); }
.cta-split h2 { font-size: clamp(48px, 6vw, 92px); }
.cta-split .arrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.cta-split .arrow span { display: inline-block; transition: transform .5s ease; }
.cta-split > a:hover .arrow span { transform: translateX(8px); }

/* ---------- Footer ---------- */
footer {
  background: #000000; color: var(--ink-dim);
  padding: 80px 40px 40px;
}
footer .ft-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 60px; margin-bottom: 28px;
}
footer h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18px, 1.3vw, 22px);
  letter-spacing: -0.012em;
  text-transform: none;
  color: var(--cream);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(245,241,232,0.14);
}
footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
footer ul li { line-height: 1.3; }
footer ul a {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: rgba(245,241,232,0.78);
  transition: color 0.25s ease, transform 0.25s ease;
  display: inline-block;
}
footer ul a:hover {
  color: var(--cream);
  transform: translateX(3px);
}
footer .ft-grid > div:first-child p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: rgba(245,241,232,0.62);
  text-wrap: pretty;
}
footer .ft-mark { font-family: var(--serif); font-size: clamp(48px, 8vw, 112px); font-weight: 700; letter-spacing: -0.025em; color: var(--cream); line-height: 0.9; }
footer .ft-mark em { /* weight inherits */ }
footer .ft-bottom { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }

/* ---------- LOCAL cutout band — cream overlay, video through letters ---------- */
.privacy-page { background: #000; color: #f5f1ea; }
.privacy-hero {
  background: #000;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  padding: 0 clamp(24px, 6vw, 64px) clamp(28px, 4vw, 56px);
}
.privacy-hero h1 {
  font-family: 'Bebas Neue';
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(64px, 10vw, 180px);
  line-height: 0.9;
  margin: 0;
  white-space: nowrap;
}
.privacy-hero .pw-char {
  color: #ffffff;
  -webkit-text-stroke: 0;
          text-stroke: 0;
}
.privacy-hero .pw-char.lit {
  color: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
  .privacy-hero .pw-char { color: #fff; }
}
.privacy-body {
  background: #000;
  color: #f5f1ea;
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) clamp(24px, 6vw, 64px) clamp(80px, 10vw, 140px);
  font-family: 'Jost';
}
.privacy-body h2 {
  font-family: 'Bebas Neue';
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(24px, 2.4vw, 34px);
  color: #fff;
  margin: clamp(40px, 5vw, 64px) 0 18px;
}
.privacy-body h3 {
  font-family: 'Jost';
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 20px);
  color: #fff;
  margin: 32px 0 12px;
}
.privacy-body h4 {
  font-family: 'Jost';
  font-weight: 500;
  font-size: clamp(14px, 1.1vw, 16px);
  color: #ffffff;
  letter-spacing: 0.04em;
  margin: 22px 0 8px;
}
.privacy-body p {
  font-weight: 300;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.72;
  color: #ffffff;
  margin: 0 0 16px;
}
.privacy-body ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.privacy-body li {
  position: relative;
  font-weight: 300;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.7;
  color: #ffffff;
  padding-left: 22px;
  margin-bottom: 12px;
}
.privacy-body li::before {
  content: '';
  position: absolute;
  left: 2px; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #ffffff;
}
.privacy-body a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }
.privacy-body a:hover { color: var(--accent); }
.privacy-body a.pv-email { color: var(--accent); text-decoration: none; }
.privacy-body a.pv-email:hover { text-decoration: underline; }
.privacy-body strong { color: #fff; font-weight: 500; }

/* ---------- LOCAL cutout band — cream overlay, video through letters ---------- */
.home-statement.brands-blank {
  background: #000 !important;
  min-height: auto;
  padding-top: clamp(150px, 13vh, 200px);
  padding-bottom: 0;
}
.home-statement.brands-blank::before { display: none !important; }

/* ---------- Brand index list (brands page) ---------- */
/* Sticky-hero scroll: the BRANDS hero pins at the top while the list scrolls
   up behind it, each row vanishing into the black beneath the hero. */
.brands-scroll { position: relative; background: #000; }
.home-statement.brands-blank {
  position: sticky;
  top: 0;
  z-index: 5;
}
.brand-index {
  background: #000;
  padding: 0 clamp(40px, 10vw, 145px) clamp(80px, 12vh, 160px);
  margin-top: 0;
  position: relative;
  z-index: 1;
}
.bx-list { list-style: none; margin: 0; padding: 0; }
.bx-row {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 48px);
  padding: clamp(4px, 0.8vh, 12px) 0;
  cursor: pointer;
}
/* Lead: airport code + em dash. Code sits left; on hover it slides right to
   land where the dash was. */
.bx-lead {
  position: relative;
  flex: none;
  width: 10.5ch;
  align-self: center;
  font-family: 'Jost';
  font-weight: 400;
  font-size: clamp(13px, 1vw, 17px);
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.27);
  height: 1em;
}
.bx-code {
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  transition: transform 0.55s cubic-bezier(.4,0,.1,1), color 0.4s ease;
}
.bx-dash {
  position: absolute; left: 8.3ch; top: 50%;
  transform: translate(-50%, -50%) scaleX(2.4);
  transition: opacity 0.35s ease;
}
.bx-name {
  font-family: 'Bebas Neue';
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: clamp(40px, 7vw, 124px);
  line-height: 1.06;
  white-space: nowrap;
}
.bx-name .bx-l {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.27);
          text-stroke: 1px rgba(255,255,255,0.27);
  transition: color 0.28s ease, -webkit-text-stroke-color 0.28s ease;
}


/* Hover image stage — fixed on the right, fills from the wall to the bottom
   of the screen. Reuses the carousel photos + their vignette; the deep
   left-fade blends each image's left into black so it never covers the names. */
.bx-stage {
  position: fixed;
  /* Anchor the LEFT edge with a px floor so on smaller screens the image
     shifts further right (clear of the names) instead of scaling inward. */
  left: min(45vw, calc(100% - 340px));
  right: 0;
  top: var(--bx-top, 40vh);
  bottom: 0;
  z-index: -1;
  pointer-events: none;
}
.bx-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* Organic feather via two intersected mask layers so EVERY edge fades to
     transparent (revealing black behind — no hard lines):
       • horizontal fade — extra burn on the left, gentle on the right
       • vertical fade — gentle on top & bottom
     mask-composite:intersect shows a pixel only where BOTH are opaque. */
  -webkit-mask:
    radial-gradient(ellipse 92% 82% at 70% 70%, #000 52%, rgba(0,0,0,0.4) 76%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 22%, #000 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 24%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask:
    radial-gradient(ellipse 92% 82% at 70% 70%, #000 52%, rgba(0,0,0,0.4) 76%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 22%, #000 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 24%, #000 80%, transparent 100%);
  mask-composite: intersect;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.bx-img.is-on { opacity: 1; }
.bx-img--vigdark { filter: brightness(0.74); }
/* (860px display:none removed — portrait now uses the bottom-wipe layout.) */
@media (max-width: 767px) {
  .bx-name { font-size: clamp(32px, 11vw, 64px); white-space: normal; }
}
.local-cut {
  background: #FBFBF9;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
  z-index: 11;
}
.local-cut--450 .lc-frame { aspect-ratio: 1920 / 450 !important; }
.local-cut--325 .lc-frame { aspect-ratio: 1920 / 325 !important; }
.local-cut .lc-frame {
  position: relative;
  width: 100%;
  max-width: none;
  aspect-ratio: 1920 / 400;
  overflow: hidden;
}
.local-cut .lc-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.local-cut .lc-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.local-cut .lc-fill { fill: #FBFBF9; }

/* ---------- Footer v2 — black band, wordmark left, links right ---------- */
footer.ft-v2 {
  background: #000;
  color: #f5f1ea;
  padding: clamp(32px, 3.4vw, 48px) clamp(40px, 8vw, 150px) clamp(26px, 2.6vw, 36px);
  position: relative;
  z-index: 11;
}
.ft-v2 .ftv2-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}
.ft-v2 .ftv2-mark { display: inline-flex; }
.ft-v2 .ftv2-mark img {
  height: clamp(33px, 3vw, 45px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.ft-v2 .ftv2-right {
  width: clamp(360px, 40vw, 580px);
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
.ft-v2 .ftv2-links {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: 1fr;
  width: 100%;
  column-gap: clamp(20px, 3vw, 48px);
  row-gap: clamp(10px, 1vw, 14px);
  justify-items: end;
  align-items: start;
}
.ft-v2 .ftv2-links a {
  font-family: 'Jost';
  font-weight: 300;
  font-size: clamp(11px, 0.81vw, 14px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: right;
  color: #f5f1ea;
  text-decoration: none;
  transition: color 0.25s ease;
}
/* Each link reserves its BOLD width at rest (invisible zero-height copy at
   weight 400), so hovering swaps 300 -> 400 with no reflow. */
.ft-v2 .ftv2-links a { display: inline-block; text-align: right; }
.ft-v2 .ftv2-links a::before {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 400;
  pointer-events: none;
}
.ft-v2 .ftv2-links a { position: relative; }
.ft-v2 .ftv2-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.32s cubic-bezier(.4,0,.2,1);
}
.ft-v2 .ftv2-links a:hover { color: var(--accent); }
.ft-v2 .ftv2-links a:hover::after { transform: scaleX(1); }
.ft-v2 .ftv2-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(20px, 3vw, 48px);
  align-items: center;
  margin-top: clamp(18px, 2vw, 30px);
  width: 100%;
}
.ft-v2 .ftv2-social { grid-column: 2; justify-self: end; display: flex; align-items: center; gap: 18px; }
.ft-v2 .ftv2-copy { grid-column: 3; justify-self: end; }
.ft-v2 .ftv2-social svg { width: 23px; height: 23px; }
.ft-v2 .ftv2-social a {
  display: inline-flex;
  color: #f5f1ea;
  transition: color 0.25s ease, transform 0.25s ease;
}
.ft-v2 .ftv2-social a:hover { color: var(--accent); transform: translateY(-1px); }
.ft-v2 .ftv2-privacy {
  font-family: 'Jost';
  font-weight: 400;
  font-size: clamp(13px, 0.95vw, 15px);
  color: #f5f1ea;
  text-decoration: none;
  margin-left: 6px;
  transition: color 0.25s ease;
  transform: none !important;
}
.ft-v2 .ftv2-privacy:hover { color: var(--accent); }
.ft-v2 .ftv2-copy {
  font-family: 'Jost';
  font-weight: 400;
  font-size: clamp(13px, 0.95vw, 15px);
  color: #f5f1ea;
}
@media (max-width: 767px) {
  .ft-v2 .ftv2-top { flex-direction: column; gap: 32px; }
  .ft-v2 .ftv2-bottom { gap: 20px; margin-top: 28px; }
}

/* ---------- Footer hero variant (index) ---------- */
footer.ft-hero { padding: 56px 40px 28px; overflow: hidden; }
footer.ft-hero .ft-grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 56px 0;
  margin-bottom: 28px;
}

/* ---------- Simplified 2-column footer (Company + Social) ---------- */
footer .ft-grid-2 {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 40px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
  margin-bottom: 18px;
}
footer .ft-col-company { text-align: left; }
footer .ft-col-social {
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  align-items: center;
}
footer .ft-col-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: rgba(245,241,232,0.78);
  border: 1px solid rgba(245,241,232,0.18);
  border-radius: 50%;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
footer .ft-col-social a:hover {
  color: var(--cream);
  border-color: rgba(245,241,232,0.45);
  background: rgba(245,241,232,0.06);
  transform: none;
}
@media (max-width: 767px) {
  footer .ft-grid-2 { grid-template-columns: 1fr; gap: 36px; align-items: start; }
  footer .ft-col-social { justify-content: flex-start; }
}

/* ---- Big calm wordmark ---- */
.ft-bigmark {
  font-family: var(--serif);
  color: var(--cream);
  line-height: 0.9;
  letter-spacing: -0.035em;
  font-weight: 700;
  font-size: clamp(56px, 9vw, 132px);
  margin-bottom: 36px;
  text-wrap: balance;
}
.ft-bm-foods {
  font-weight: 400;
  font-variation-settings: "opsz" 144, "wght" 460;
  display: inline-block;
  position: relative;
}
.ft-bm-dot {
  display: inline-block;
  color: #d97a4f;
  margin-left: 0.02em;
  transform-origin: center 80%;
  animation: ft-dot-pulse 3.2s ease-in-out infinite;
}
@keyframes ft-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-bm-dot { animation: none; }
}

footer .ft-statement {
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--cream);
  max-width: 22ch;
  margin-top: 36px;
  text-wrap: pretty;
}
footer .ft-statement em {
  font-weight: 600;
  background-image: linear-gradient(transparent 78%, rgba(245, 234, 215, 0.35) 78%, rgba(245, 234, 215, 0.35) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 0.04em;
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Section divider rule ---------- */
/* Hand-drawn marker line that draws on, then keeps a subtle wobble via filter */
.section-rule-svg {
  display: block;
  width: min(100%, calc(100% - 80px));
  height: 24px;
  margin: 0 auto;
  overflow: visible;
}
.section-rule-svg .srule-path {
  stroke-dasharray: 1700;
  stroke-dashoffset: 1700;
  transition: stroke-dashoffset 1.6s cubic-bezier(.45,.05,.55,.95);
}
.section-rule-svg.in .srule-path { stroke-dashoffset: 0; }
@media (max-width: 767px) {
  .section-rule-svg { width: min(100%, calc(100% - 48px)); }
}

/* Legacy section-rule div (kept for other pages) */
.section-rule {
  position: relative;
  height: 1px;
  width: min(1320px, calc(100% - 96px));
  margin: 0 auto;
  background: rgba(245, 241, 232, 0.10);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
  /* Override .reveal defaults so opacity stays at 1 — only the scale animates */
  opacity: 1 !important;
}
.section-rule.in {
  transform: scaleX(1);
}
/* Cream-section variant (auto-detect: when followed by a cream section, use ink color) */
.section-rule.is-ink {
  background: rgba(26, 26, 26, 0.12);
}
@media (max-width: 767px) {
  .section-rule { width: min(100%, calc(100% - 48px)); }
}

/* ---------- 1. Headline word-by-word reveal ---------- */
.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--word-delay, 0ms);
}
.split-word em { /* weight inherits */ }
.split-ready.in .split-word {
  opacity: 1;
  transform: translateY(0);
}
/* Italic words get a touch more delay + slower transition for emphasis */
.split-word.is-em {
  transition-duration: 1.2s;
}

/* ---------- 2. Brand grid diagonal cascade ---------- */
.brand-grid.cascade .brand-cell {
  opacity: 0;
  transform: scale(0.96);
  clip-path: inset(8% 8% 8% 8%);
  transition:
    opacity 0.9s cubic-bezier(.2,.7,.2,1),
    transform 1.1s cubic-bezier(.2,.7,.2,1),
    clip-path 1.1s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--cell-delay, 0ms);
}
.brand-grid.cascade.in .brand-cell {
  opacity: 1;
  transform: scale(1);
  clip-path: inset(0 0 0 0);
}

/* ---------- 3. Numbers count-up + rule draw ---------- */
.bn-num { will-change: contents; }
.bn-rule {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(.2,.7,.2,1) 0.6s;
}
.bynumbers-grid.in .bn-rule { transform: scaleX(1); }

/* Awards figures count-up styling support */
.awards-head .fig-n[data-count] { display: inline-block; }

/* ---------- 4. Story timeline rule draw ---------- */
.locations-walk { position: relative; }
.locations-walk .timeline-rule {
  position: absolute;
  left: 40px;
  top: 100vh;
  width: 1px;
  height: calc(100% - 100vh);
  background: linear-gradient(180deg,
    rgba(245,241,234,0) 0%,
    rgba(245,241,234,0.35) 8%,
    rgba(245,241,234,0.35) 92%,
    rgba(245,241,234,0) 100%);
  transform-origin: top;
  transform: scaleY(var(--timeline-progress, 0));
  z-index: 3;
  pointer-events: none;
}
.locations-walk .panel .num {
  transition: color 0.6s ease;
}
.locations-walk .panel.in .num {
  color: var(--ink-dim);
}

/* ---------- 5. Hero vignette breathing + caption fade-in ---------- */
@keyframes hero-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.78; }
}
.hero::after {
  animation: none;
}
.hero h1 .hero-line {
  display: block;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 1.2s cubic-bezier(.2,.7,.2,1), transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.hero.hero-armed h1 .hero-line { opacity: 1; transform: translateY(0); }
.hero.hero-armed h1 .hero-line.l1 { transition-delay: 200ms; }
.hero.hero-armed h1 .hero-line.l2 { transition-delay: 500ms; }
.hero .hero-meta {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1s ease 900ms, transform 1s cubic-bezier(.2,.7,.2,1) 900ms;
}
.hero.hero-armed .hero-meta { opacity: 1; transform: translateY(0); }
.hero .scroll-cue {
  opacity: 0;
  transition: opacity 1s ease 1400ms;
}
.hero.hero-armed .scroll-cue { opacity: 0.7; }
@keyframes scroll-cue-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}
.hero.hero-armed .scroll-cue { animation: scroll-cue-bob 2.4s ease-in-out infinite 1.6s; }

/* ---------- 6. Principles row stagger (brands.html) ---------- */
.principles-row > div {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.principles-row.in > div:nth-child(1) { transition-delay: 0ms; }
.principles-row.in > div:nth-child(2) { transition-delay: 180ms; }
.principles-row.in > div:nth-child(3) { transition-delay: 360ms; }
.principles-row.in > div { opacity: 1; transform: translateY(0); }

/* ---------- 7. Footer wordmark hover ---------- */
footer .ft-mark {
  display: inline-block;
  cursor: default;
}
footer .ft-mark .ft-foods {
  display: inline-block;
  transform: translateX(-4px);
  opacity: 0.92;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1), opacity 0.6s ease;
}
footer .ft-mark .ft-period {
  display: inline-block;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.5s ease 0.15s, transform 0.6s cubic-bezier(.2,.7,.2,1) 0.15s;
}
footer .ft-mark:hover .ft-foods { transform: translateX(0); opacity: 1; }
footer .ft-mark:hover .ft-period { opacity: 1; transform: translateX(0); }

/* ---------- 8. Page transitions ---------- */
.page-veil {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 9999;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.page-veil.lifted { opacity: 0; }
.page-veil.dropping { opacity: 1; pointer-events: auto; transition: opacity 0.4s ease; }

/* ---------- Brands & Contact page animations ---------- */

/* Brand cell hover: image zoom + label slide */
.brand-cell { overflow: hidden; }
.brand-cell { background-size: cover !important; }
.brand-cell::before { transition: background 0.6s ease; }
.brand-cell {
  background-position: center;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.brand-cell .label .name {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.brand-cell .label .meta {
  display: inline-block;
  opacity: 0.85;
  transform: translateY(4px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.brand-cell:hover .label .name { transform: translateY(-2px); }
.brand-cell:hover .label .meta { opacity: 1; transform: translateY(0); color: var(--accent); }

/* Brands "How we partner" featured photo: scroll-driven scale */
.story-section .ph {
  transform: scale(1);
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.story-section.in .ph { transform: scale(1.02); }

/* Principles 01/02/03: number ticker */
.principles-row > div .pn {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: top;
}
.principles-row > div .pn .pn-roll {
  display: block;
  transform: translateY(100%);
  transition: transform 0.9s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--pn-delay, 0ms);
}
.principles-row.in > div .pn .pn-roll { transform: translateY(0); }

/* ---------- Contact page ---------- */

/* Hero photo: ken-burns drift on the side image */
@keyframes contact-photo-drift {
  0%   { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.10) translate(-1%, -1.5%); }
}
.contact-hero-photo {
  animation: contact-photo-drift 22s ease-out forwards;
  will-change: transform;
}

/* Contact 3-col cards: stagger entry + email link underline draw */
.contact-grid .col {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(.2,.7,.2,1),
              transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.contact-grid .col.in { opacity: 1; transform: translateY(0); }
.contact-grid .col:nth-child(1).in { transition-delay: 0ms; }
.contact-grid .col:nth-child(2).in { transition-delay: 140ms; }
.contact-grid .col:nth-child(3).in { transition-delay: 280ms; }
.contact-grid .col:nth-child(4).in { transition-delay: 420ms; }

.contact-grid .col a[href^="mailto:"] {
  position: relative;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease;
}
.contact-grid .col a[href^="mailto:"]::after {
  content: '';
  position: absolute; left: 0; bottom: -2px; right: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.contact-grid .col a[href^="mailto:"]:hover::after { transform: scaleX(1); }
.contact-grid .col a[href^="mailto:"]:hover { color: var(--cream); }

/* Airport code letter reveal */
/* Subtle radial edge vignette on the locations hero photo, matching the
   home-page hero video treatment. */
.page-hero--still.loc-hero-full::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.28) 72%);
}

.airport-block .code .l {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.6s ease,
              color 0.5s ease;
  transition-delay: var(--letter-delay, 0ms);
}
.airport-block .code .l.is-em {
  font-weight: inherit;
  color: inherit;
  transition-duration: 1.1s;
}
.airport-block.in .code .l { opacity: 1; }

.airport-block .city {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s ease 0.4s, transform 0.8s cubic-bezier(.2,.7,.2,1) 0.4s;
}
.airport-block.in .city { opacity: 1; transform: translateY(0); }

/* Unit list cascade */
.airport-block .units .unit {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--unit-delay, 0ms);
  position: relative;
}
.airport-block .units .unit::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--unit-delay, 0ms);
}
.airport-block .units .unit { border-top-color: transparent; }
.airport-block.in .units .unit {
  opacity: 1;
  transform: translateY(0);
}
.airport-block.in .units .unit::before { transform: scaleX(1); }

/* Block hover */
.airport-block { transition: background 0.4s ease; }
.airport-block:hover .code em { color: inherit; }
.airport-block .units .unit .n { transition: color 0.3s ease; }
.airport-block:hover .units .unit .n { color: var(--cream); }

/* Locations hero parallax + tint settle */
.page-hero--still .page-hero-img { will-change: transform; }
.page-hero--still .page-hero-tint {
  opacity: 0;
  transition: opacity 1.4s ease 0.3s;
}
.page-hero--still.lh-armed .page-hero-tint { opacity: 1; }

/* Locations: full-bleed hero — image runs edge-to-edge under nav, headline pinned bottom-left */
.page-hero--still.loc-hero-full {
  min-height: 0;
  height: clamp(420px, 62vh, 620px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* pin the headline to the photo's bottom */
  /* Sticky so the section below rises up and covers the image on scroll,
     while the image itself stays put. */
  position: sticky;
  top: 0;
  z-index: 0;
}
.page-hero--still.loc-hero-full .page-hero-img {
  top: 0; height: 100%;
  object-fit: cover; object-position: center 30%;
}
/* Plane-window photo: framing keeps the wing/sunset horizon visible across viewports */
.page-hero--still.loc-hero-window .page-hero-img {
  object-position: center 60%;
}
.page-hero--still.loc-hero-window .page-hero-tint {
  background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%);
}

/* CSS-illustrated plane window — centered/right oval with sunset gradient */
.loc-hero-window .loc-window-stage {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 90% at 60% 50%, #1a1714 0%, #000000 55%, #050403 100%);
  overflow: hidden;
  z-index: 0;
}
.loc-hero-window .loc-window-cabin {
  position: absolute; inset: 0;
  /* Subtle seat-rim highlights bleeding from the left, hinting at cabin */
  background:
    radial-gradient(ellipse 60% 50% at -5% 50%, rgba(217,122,79,0.18) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at -10% 40%, rgba(217,122,79,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.loc-hero-window .loc-window-frame {
  position: absolute;
  top: 50%; left: 60%;
  transform: translate(-50%, -50%);
  width: clamp(280px, 32vw, 480px);
  aspect-ratio: 3 / 4;
  border-radius: 48% / 50%;
  box-shadow:
    0 0 0 1px rgba(245,241,232,0.05),
    0 40px 120px rgba(217,122,79,0.18),
    0 0 80px rgba(217,122,79,0.08);
}
.loc-hero-window .loc-window-glass {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
}
.loc-hero-window .loc-window-sky {
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    #0a1820 0%,
    #1a2a3a 18%,
    #4a4258 38%,
    #d4856a 62%,
    #e8923f 76%,
    #f59a3a 86%,
    #f5a850 92%,
    #1a1410 100%
  );
}
.loc-hero-window .loc-window-clouds {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 5% at 50% 75%, rgba(245,241,232,0.18) 0%, transparent 50%),
    radial-gradient(ellipse 60% 3% at 30% 82%, rgba(245,241,232,0.12) 0%, transparent 50%),
    radial-gradient(ellipse 70% 4% at 70% 88%, rgba(217,122,79,0.15) 0%, transparent 50%);
  mix-blend-mode: screen;
}
.loc-hero-window .loc-window-horizon {
  position: absolute; left: 0; right: 0;
  top: 92%;
  height: 1px;
  background: rgba(245,241,232,0.25);
  filter: blur(0.5px);
}
.loc-hero-window .loc-window-bezel {
  /* Soft inner shadow — gives the glass dimension */
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1.5px rgba(245,241,232,0.06),
    inset 0 0 24px rgba(0,0,0,0.6),
    inset 0 0 60px rgba(0,0,0,0.4);
  pointer-events: none;
}
.loc-hero-window .loc-window-shade {
  /* Faint sunset rim glow on the cabin around the window */
  position: absolute; inset: -8%;
  border-radius: 48% / 50%;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, transparent 60%, rgba(217,122,79,0.06) 75%, transparent 90%);
  pointer-events: none;
}
.page-hero--still.loc-hero-window .page-hero-tint {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}
.page-hero--still.loc-hero-window .hero-foot { z-index: 2; }

@media (max-width: 767px) {
  .loc-hero-window .loc-window-frame {
    top: 42%;
    left: 58%;
    width: clamp(220px, 60vw, 320px);
  }
}
.page-hero--still.loc-hero-full .page-hero-tint {
  top: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}
.page-hero--still.loc-hero-full .hero-foot {
  padding: 0 40px 80px;
  text-align: left;
}
.page-hero--still.loc-hero-full .hero-invite {
  text-align: left;
}

/* ============================================================
   CONTACT — full-bleed hero with kitchen-line photo, cards over
   ============================================================ */
.contact-hero-full {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #000000;
}
.contact-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  z-index: 0;
}
.contact-hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 18%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.85) 100%);
}
.contact-hero-inner {
  position: relative; z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
  padding: 180px 40px 100px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 96px;
  min-height: 100vh;
}
.contact-hero-top {
  max-width: 920px;
  color: #fff;
}
.contact-hero-top .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 28px;
}
.contact-hero-top h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(56px, 9vw, 160px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0 0 32px;
  color: #fff;
}
.contact-hero-top h1 em { /* weight inherits */ }
.contact-hero-lede {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 1.55vw, 26px);
  line-height: 1.42;
  color: rgba(255,255,255,0.88);
  max-width: 680px;
  margin: 0;
  text-wrap: pretty;
}

/* card grid — 4 cards, glass over the photo */
.contact-hero-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.08);
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  align-self: end;
}
.ch-card {
  background: rgba(8,8,8,0.55);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  padding: 40px 32px 36px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  color: #fff;
  transition: background 0.4s ease;
}
.ch-card:hover { background: rgba(12,12,12,0.72); }
.ch-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 24px;
}
.ch-h {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: #fff;
  margin: 0 0 14px;
}
.ch-h em { /* weight inherits */ }
.ch-p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: rgba(245,241,232,0.82);
  margin: 0 0 28px;
  flex: 1;
  text-wrap: pretty;
}
.ch-soft { color: rgba(245,241,232,0.5); font-size: 13px; }
.ch-link {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: #fbf7ec;
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,0.22);
  padding-top: 20px;
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  word-break: break-word;
  position: relative;
  transition: color 0.35s ease;
}
.ch-link::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: #d97a4f;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.ch-link:hover { color: #fff; }
.ch-link:hover::before { transform: scaleX(1); }
.ch-link span {
  font-family: var(--serif);
  font-size: 22px;
  color: #d97a4f;
  flex: none;
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.ch-link:hover span { transform: translateX(6px); }
.ch-link--cta {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.018em;
  color: #fff;
  border-top-color: rgba(217, 81, 60, 0.7);
}
.ch-link--cta span { font-size: 24px; }

.contact-hero-grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1279px) {
  .contact-hero-grid,
  .contact-hero-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .contact-hero-inner { padding: 140px 24px 80px; gap: 64px; }
}
@media (max-width: 767px) {
  .contact-hero-grid,
  .contact-hero-grid--3 { grid-template-columns: 1fr; }
  .ch-card { min-height: 260px; padding: 32px 24px; }
}

/* About: hand-drawn marker circle around the pizza */
.pizza-circle-host { overflow: hidden; }
.pizza-circle {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
.pizza-circle .pcirc-path {
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  transition: stroke-dashoffset 1.5s cubic-bezier(.45,.05,.55,.95);
}
.story-grid.in .pizza-circle .pcirc-path {
  stroke-dashoffset: 0;
}

/* Locations hero: hand-drawn marker outline of the dripper cylinder */
.hero-cyl {
  position: absolute;
  /* Aligned to the green cup-stack row */
  top: 55%;
  left: 35.5%;
  width: 30%;
  height: 22%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
.hero-cyl .hcup {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: hcyl-draw 1.6s cubic-bezier(.45,.05,.55,.95) forwards;
}
.hero-cyl .hcup-1 { animation-delay: 0.5s; }
.hero-cyl .hcup-2 { animation-delay: 1.4s; }
.hero-cyl .hcup-3 { animation-delay: 2.3s; }
.hero-cyl .hcyl-line {
  stroke-dasharray: 3600;
  stroke-dashoffset: 3600;
  animation: hcyl-draw 4s cubic-bezier(.45,.05,.55,.95) 0.5s forwards;
}
@keyframes hcyl-draw {
  to { stroke-dashoffset: 0; }
}
@media (max-width: 1279px) {
  .hero-cyl { display: none; }
}
@media (max-width: 1279px) {
  .hero-cyl { display: none; }
}

/* About hero: ken-burns drift on the bg image */
@keyframes about-kenburns {
  0%   { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1.5%, -1%); }
}
.about-hero-v3 { position: relative; }
.about-hero-v3::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--kb-bg, none);
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  animation: about-kenburns 24s ease-out forwards;
  will-change: transform;
  pointer-events: none;
}
.about-hero-v3.kb-armed { background-image: none !important; }

/* Hero gold rule: draw from 0 width on load */
.about-hero-rule-anim {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(.2,.7,.2,1) 0.6s;
}
.about-hero-v3.kb-armed .about-hero-rule-anim { transform: scaleX(1); }

/* Hero lede + meta sequential fade */
.about-hero-lede-anim,
.about-hero-meta-anim {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.about-hero-lede-anim { transition-delay: 800ms; }
.about-hero-meta-anim { transition-delay: 1100ms; }
.about-hero-v3.kb-armed .about-hero-lede-anim,
.about-hero-v3.kb-armed .about-hero-meta-anim { opacity: 1; transform: translateY(0); }

/* Story photos: clip-path wipe reveal */
.story-grid .ph {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(.2,.7,.2,1) 0.15s,
              filter 0.6s ease;
}
.story-grid.in .ph { clip-path: inset(0 0 0 0); }

/* Leader portraits: stagger entry + sharpen hover */
.leader-grid .leader {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(.2,.7,.2,1),
              transform 0.8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--leader-delay, 0ms);
}
.leader-grid.in .leader { opacity: 1; transform: translateY(0); }
.leader .pic { transition: filter 0.6s ease, transform 0.8s cubic-bezier(.2,.7,.2,1); }
.leader:hover .pic { transform: scale(1.02); }

/* Values list: sequential rise + number underline draw */
.sustain ul li {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s cubic-bezier(.2,.7,.2,1),
              transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.sustain-grid.in ul li:nth-child(1) { transition-delay: 200ms; }
.sustain-grid.in ul li:nth-child(2) { transition-delay: 360ms; }
.sustain-grid.in ul li:nth-child(3) { transition-delay: 520ms; }
.sustain-grid.in ul li:nth-child(4) { transition-delay: 680ms; }
.sustain-grid.in ul li { opacity: 1; transform: translateY(0); }

.sustain ul li .n {
  position: relative;
  padding-bottom: 6px;
}
.sustain ul li .n::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 22px; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.sustain-grid.in ul li:nth-child(1) .n::after { transition-delay: 500ms; }
.sustain-grid.in ul li:nth-child(2) .n::after { transition-delay: 660ms; }
.sustain-grid.in ul li:nth-child(3) .n::after { transition-delay: 820ms; }
.sustain-grid.in ul li:nth-child(4) .n::after { transition-delay: 980ms; }
.sustain-grid.in ul li .n::after { transform: scaleX(1); }

/* ---------- Page heroes (non-home) ---------- */
.page-hero {
  padding: 200px 40px 120px;
  border-bottom: 1px solid var(--line);
}
.page-hero--still {
  position: relative;
  overflow: hidden;
  background: #000000;
  min-height: 100vh;
  padding: 96px 0 0;
  border-bottom: none;
  display: grid;
  grid-template-rows: 1fr auto;
}
.page-hero--still .page-hero-img {
  position: absolute; left: 0; right: 0; top: 96px; bottom: 0;
  width: 100%; height: calc(100% - 96px);
  object-fit: cover; z-index: 0;
}
.page-hero--still .page-hero-tint {
  position: absolute; left: 0; right: 0; top: 96px; bottom: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}

/* Bottom-anchored headline */
.page-hero--still .hero-foot {
  position: relative; z-index: 2;
  padding: 0 40px 80px;
}
.page-hero--still .hero-invite {
  color: #fff;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(72px, 12vw, 200px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0;
}
/* Locations hero headline: all-caps Jost regular, left-aligned to the nav
   icon, pinned to the bottom of the photo via absolute positioning. */
.page-hero--still.loc-hero-full .hero-foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 40px 36px;
  z-index: 2;
}
.page-hero--still .hero-invite--letters,
.page-hero--still .hero-invite--letters .cv-char {
  font-family: 'Jost' !important;
  text-transform: uppercase;
  font-weight: 400 !important;
  letter-spacing: 0.04em;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1;
  white-space: nowrap;
  color: #fff;
}
.page-hero--still .hero-invite--letters .cv-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  animation: cv-char-in 0.5s ease forwards;
}
.page-hero--still .hero-invite--letters .cv-char:nth-child(1)  { animation-delay: 0.25s; }
.page-hero--still .hero-invite--letters .cv-char:nth-child(2)  { animation-delay: 0.30s; }
.page-hero--still .hero-invite--letters .cv-char:nth-child(3)  { animation-delay: 0.35s; }
.page-hero--still .hero-invite--letters .cv-char:nth-child(4)  { animation-delay: 0.40s; }
.page-hero--still .hero-invite--letters .cv-char:nth-child(5)  { animation-delay: 0.45s; }
.page-hero--still .hero-invite--letters .cv-char:nth-child(6)  { animation-delay: 0.50s; }
.page-hero--still .hero-invite--letters .cv-char:nth-child(7)  { animation-delay: 0.55s; }
.page-hero--still .hero-invite--letters .cv-char:nth-child(8)  { animation-delay: 0.60s; }
.page-hero--still .hero-invite--letters .cv-char:nth-child(9)  { animation-delay: 0.65s; }
.page-hero--still .hero-invite--letters .cv-char:nth-child(10) { animation-delay: 0.70s; }
.page-hero--still .hero-invite--letters .cv-char:nth-child(11) { animation-delay: 0.75s; }
.page-hero--still .hero-invite--letters .cv-char:nth-child(12) { animation-delay: 0.80s; }
.page-hero--still .hero-invite--letters .cv-char:nth-child(13) { animation-delay: 0.85s; }
.page-hero--still .hero-invite--letters .cv-char:nth-child(14) { animation-delay: 0.90s; }
@keyframes cv-char-in { to { opacity: 1; transform: none; } }
.page-hero--still .hero-codes {
  display: flex; align-items: baseline; gap: 32px;
  color: #fff;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(96px, 16vw, 240px);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.page-hero--still .hero-codes .dot {
  font-weight: 400;
  opacity: 0.55;
  font-size: 0.7em;
  position: relative;
  top: -0.08em;
}
.page-hero .eyebrow { margin-bottom: 32px; }
.page-hero h1 {
  font-size: clamp(56px, 9vw, 160px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.page-hero h1 em { /* weight inherits */ }
.page-hero .lede {
  margin-top: 56px;
  max-width: 60ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--cream);
  text-wrap: pretty;
}

/* ---------- About hero (image-backed) ---------- */
.about-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
.about-hero-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 38%;
  z-index: 0;
  transform: scale(1.04);
  filter: saturate(0.85) contrast(1.05);
}
.about-hero-tint {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 120% 70% at 50% 35%, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.70) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.05) 28%, rgba(0,0,0,0.30) 72%, rgba(0,0,0,0.92) 100%);
}
.about-hero-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.12;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}
.about-hero-inner {
  position: relative; z-index: 3;
  min-height: 100vh;
  padding: 200px 40px 64px;
  max-width: 1680px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 80px;
}
.about-hero .eyebrow {
  color: rgba(255,255,255,0.7);
  margin-bottom: 0;
}
.about-hero-h1 {
  align-self: end;
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  color: #fff;
  font-size: clamp(80px, 13.5vw, 240px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.about-hero-h1 .line { display: block; }
.about-hero-h1 .line-1 {
  font-weight: 600;
}
.about-hero-h1 .line-2 {
  padding-left: 0.18em;
  font-weight: 400;
}
.about-hero-h1 em { /* weight inherits */ }
.about-hero-foot {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: 48px;
  align-items: start;
  padding-top: 48px;
  border-top: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
}
.about-hero-rule {
  width: 56px; height: 1px;
  background: var(--gold, #d97a4f);
  margin-top: 14px;
}
.about-hero-lede {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.45;
  color: rgba(255,255,255,0.92);
  max-width: 52ch;
  font-weight: 400;
  text-wrap: pretty;
}
.about-hero-lede .lede-kicker {
  display: block;
  color: #fff;
  margin-bottom: 0.5em;
}
.about-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: baseline;
  justify-content: flex-end;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-top: 4px;
}
.about-hero-meta .dot { opacity: 0.45; }

@media (max-width: 1279px) {
  .about-hero-inner { padding: 140px 24px 48px; gap: 56px; }
  .about-hero-foot {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 32px;
  }
  .about-hero-meta { justify-content: flex-start; }
  .about-hero-rule { display: none; }
}

/* ---------- About story ---------- */
.story-section {
  padding: 140px 0; border-bottom: 1px solid var(--line);
}
.story-grid {
  display: grid; grid-template-columns: 1.05fr 1.1fr; gap: 80px;
  align-items: start;
}
.story-grid > .ph,
.story-grid > .pizza-circle-host {
  position: sticky;
  top: 96px;
  align-self: start;
  aspect-ratio: 4/5;
  width: 100%;
}
.story-grid .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 18px; }
.story-grid h2 { margin-bottom: 56px; line-height: 1.18; }
.story-grid p { margin: 0 0 18px; color: var(--cream); font-size: 18px; line-height: 1.6; }
.story-grid p em { }
.story-grid .ph {
  aspect-ratio: 4/5; background: #111 center/cover no-repeat;
  filter: contrast(1.05);
}

/* ---------- Locations ---------- */
.locations-list { padding: 120px 0; position: relative; z-index: 1; background: #000; }

/* Big LOCATIONS outline-fill reveal beneath the hero (mirrors the home page). */
.loc-bigword-band {
  background: #000;
  position: relative;
  z-index: 1;
  padding: clamp(40px, 6vw, 96px) 0 0 clamp(40px, 10vw, 145px);
  overflow-x: clip;
}
.loc-bigword-band + .locations-list { padding-top: clamp(16px, 2.4vw, 36px); }
.loc-bigword-band .wrap { overflow: visible; }
.loc-bigword {
  font-family: 'Bebas Neue' !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(79px, 14.5vw, 264px);
  line-height: 0.9;
  margin: 0;
  white-space: nowrap;
}
.loc-bigword .hh-1 { display: inline-block; }
.loc-bigword .hh-1 .hs-char {
  font-family: 'Bebas Neue' !important;
  font-weight: 400 !important;
  transition: color 0.45s ease, -webkit-text-stroke-color 0.45s ease;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(255,255,255,0.65);
          text-stroke: 1.2px rgba(255,255,255,0.65);
}
.loc-bigword .hh-1 .hs-char.lit {
  color: #ffffff;
  -webkit-text-stroke: 1.2px #ffffff;
          text-stroke: 1.2px #ffffff;
}
/* ---- SAN spotlight: fade everything but SAN's code+city, show flip-card ---- */
.airport-block,
.airport-block .units,
.airport-block .code,
.airport-block .city { transition: opacity 1.8s ease; }
.airport-block[data-spotlight] { transition: opacity 1.8s ease, border-color 1.8s ease, transform 1.6s cubic-bezier(.4,0,.2,1); }
.airport-block[data-spotlight] .code,
.airport-block[data-spotlight] .city { transition: opacity 1.1s ease, transform 1.6s cubic-bezier(.4,0,.2,1); }
body.spot-active .airport-block:not(.is-spot) { opacity: 0; pointer-events: none; }
body.spot-active .airport-block.is-spot .units { opacity: 0; pointer-events: none; }
/* Fade the spotlit block's underline + grow/recenter its code+city. translateY
   is set inline by JS so it lands at the vertical center of the viewport. */
body.spot-active .airport-block.is-spot { border-bottom-color: transparent; }
body.spot-active .airport-block.is-spot .code { transform-origin: left center; }

.san-spot {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
body.spot-active .san-spot { opacity: 1; transition: opacity 1.4s ease; }
.san-spot-card {
  position: relative;
  height: 43vh;
  width: 34.4vh;            /* 4:5 portrait ratio, ~30% larger */
  perspective: 1600px;
  transform-style: preserve-3d;   /* required so faces keep 3D depth → backface-visibility works */
  /* First reveal: slide in from the right edge of the screen. */
  transform: translateX(0);
  transition: transform 0.8s cubic-bezier(.3,.7,.2,1);
}
.san-spot-card.enter-right { transform: translateX(120vw); transition: none; }
.san-spot-card.exit-right { transform: translateX(120vw); transition: transform 0.8s cubic-bezier(.5,0,.75,.3); }
.san-spot-face {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  border-radius: 0;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* The card flips 180° each step; JS loads the NEXT brand onto whichever face
   will be forward after the flip, so the flip always reveals a new brand. */
.san-spot-card.flip { transform: rotateY(180deg); transition: transform 0.7s cubic-bezier(.45,.05,.3,1); }
.san-spot-card.flip0 { transform: rotateY(0deg); transition: transform 0.7s cubic-bezier(.45,.05,.3,1); }
.san-spot-face--back { transform: rotateY(180deg); }
.airport-block {
  display: grid; grid-template-columns: 200px 1fr;
  gap: 60px; padding: 56px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.airport-block .code { font-family: var(--serif); font-size: 132px; font-weight: 700;
  letter-spacing: -0.03em; line-height: 0.9;
}
.airport-block .code em { font-weight: inherit; color: inherit; }
.airport-block .city {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-dim); margin-top: 14px;
}
.airport-block .units {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 32px;
  font-size: 15px;
}
.airport-block .units .unit {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 12px;
}
.airport-block .units .unit .n { font-family: var(--serif); font-weight: 600; }
.airport-block .units .unit .t { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 100px;
  padding: 140px 0; border-bottom: 1px solid var(--line);
}
.contact-grid .col h3 { margin: 0 0 20px; font-family: var(--serif); font-size: 32px; }
.contact-grid .col p {
  color: var(--cream);
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.contact-grid .col a { border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.contact-grid .col a:hover { border-color: var(--cream); }

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  .nav { padding: 16px 20px; }
  .nav ul { gap: 18px; }
  .wrap { padding: 0 20px; }
  .section-pad.leadership.brands.sustain.story-section.locations-list.press { padding: 80px 0; }
  .section-head.sustain-grid.story-grid.contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .brand-grid.leader-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-split { grid-template-columns: 1fr; }
  .cta-split > a { border-right: 0; border-bottom: 1px solid var(--line); padding: 80px 32px; min-height: 360px; }
  footer .ft-grid { grid-template-columns: 1fr 1fr; }
  .airport-block { grid-template-columns: 1fr; gap: 24px; }
  .airport-block .units { grid-template-columns: 1fr; }
  .hero .hero-inner { padding: 100px 20px 32px; }
  .hero .hero-meta { flex-direction: column; align-items: start; gap: 16px; }
}


/* ---------- By the numbers ---------- */
.bynumbers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(245,241,232,0.10);
}
.bn-stat {
  padding: 56px 40px 56px 0;
  border-bottom: 1px solid rgba(245,241,232,0.10);
  border-right: 1px solid rgba(245,241,232,0.10);
  padding-left: 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bn-stat:nth-child(3n) { border-right: none; }
.bn-stat:nth-last-child(-n+3) { border-bottom: none; }
.bn-num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(72px, 9vw, 132px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #f5f1e8;
}
.bn-num em {
  font-style: normal;
  font-weight: 400;
  color: #d97a4f;
  margin-left: 0.04em;
}
.bn-rule {
  width: 32px;
  height: 1px;
  background: #d97a4f;
  margin: 4px 0;
}
.bn-label {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  color: #f5f1e8;
}
.bn-sub {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: rgba(245,241,232,0.62);
  max-width: 32ch;
  text-wrap: pretty;
}
@media (max-width: 1279px) {
  .bynumbers-grid { grid-template-columns: 1fr; }
  .bn-stat { border-right: none !important; padding: 40px 0; }
  .bn-stat:last-child { border-bottom: none; }
}

/* ============================================================
   HAND-DRAWN MARKER SYSTEM (reusable)
   ============================================================ */

/* Wrap the words you want marked. SVG sits absolutely over the text. */
.marker-host {
  position: relative;
  display: inline-block;
}
.marker-host > .marker-svg {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.marker-host .marker-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1.2s cubic-bezier(.55,.05,.35,.95);
}
.marker-host.in .marker-path,
.marker-host[data-armed] .marker-path,
.reveal.in .marker-host .marker-path,
.in .marker-host .marker-path {
  stroke-dashoffset: 0;
}

/* Underline variant: scribble line beneath the text */
.marker-underline {
  position: relative;
  display: inline-block;
}
.marker-underline > svg {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.18em;
  width: 104%;
  height: 0.32em;
  overflow: visible;
  pointer-events: none;
}
.marker-underline path {
  fill: none;
  stroke: #d97a4f;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.1s cubic-bezier(.55,.05,.35,.95) 0.4s;
}
.marker-underline.in path,
.reveal.in .marker-underline path,
.in .marker-underline path { stroke-dashoffset: 0; }
/* White variant for dark sections where gold fights the type */
.marker-underline.is-white path { stroke: #ffffff; }
.marker-underline.is-cream path { stroke: #f5f1e8; }

/* Circle variant: oval ring around an inline word/number */
.marker-circle {
  position: relative;
  display: inline-block;
  padding: 0 0.18em;
}
.marker-circle > svg {
  position: absolute;
  left: -8%;
  right: -8%;
  top: -18%;
  width: 116%;
  height: 136%;
  overflow: visible;
  pointer-events: none;
}
.marker-circle path {
  fill: none;
  stroke: #d97a4f;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  transition: stroke-dashoffset 1.4s cubic-bezier(.55,.05,.35,.95) 0.5s;
}
.marker-circle.in path,
.reveal.in .marker-circle path,
.in .marker-circle path { stroke-dashoffset: 0; }
.marker-circle.is-white path { stroke: #ffffff; }

/* Check / tick mark for inline placement next to items */
.marker-check {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.18em;
  margin-right: 0.35em;
}
.marker-check path {
  fill: none;
  stroke: #d97a4f;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  transition: stroke-dashoffset 0.9s cubic-bezier(.55,.05,.35,.95);
}
.reveal.in .marker-check path,
.in .marker-check path { stroke-dashoffset: 0; }

/* Stagger checks down a list */
.marker-check-list li:nth-child(1) .marker-check path { transition-delay: 100ms; }
.marker-check-list li:nth-child(2) .marker-check path { transition-delay: 220ms; }
.marker-check-list li:nth-child(3) .marker-check path { transition-delay: 340ms; }
.marker-check-list li:nth-child(4) .marker-check path { transition-delay: 460ms; }
.marker-check-list li:nth-child(5) .marker-check path { transition-delay: 580ms; }
.marker-check-list li:nth-child(6) .marker-check path { transition-delay: 700ms; }

/* Arrow marker (loose hand-drawn arrow) */
.marker-arrow {
  display: inline-block;
  width: 1.6em;
  height: 1em;
  vertical-align: -0.1em;
}
.marker-arrow path {
  fill: none;
  stroke: #d97a4f;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 0.9s cubic-bezier(.55,.05,.35,.95) 0.3s;
}
.reveal.in .marker-arrow path,
.in .marker-arrow path { stroke-dashoffset: 0; }

/* ============================================================
   BREATHING MOMENTS — oversized single-word interludes
   ============================================================ */
.breath {
  background: #000000;
  padding: 200px 40px 220px;
  border-top: 1px solid rgba(245,241,232,0.06);
  border-bottom: 1px solid rgba(245,241,232,0.06);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.breath--cream {
  background: var(--cream-bg);
  color: var(--cream-ink);
  border-top-color: rgba(58,58,66,0.06);
  border-bottom-color: rgba(10,10,10,0.06);
}
.breath .breath-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.55);
  margin-bottom: 56px;
}
.breath--cream .breath-eyebrow { color: rgba(10,10,10,0.5); }
.breath .breath-word {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(120px, 22vw, 360px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: #f5f1e8;
  margin: 0;
  text-wrap: balance;
}
.breath--cream .breath-word { color: #000000; }
.breath .breath-word em { /* weight inherits */ }
.breath .breath-period {
  color: var(--accent);
  font-style: normal;
  margin-left: 0.02em;
}
.breath .breath-foot {
  margin-top: 64px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 24px);
  color: rgba(245,241,232,0.55);
  max-width: 38ch;
  margin-left: auto;
  margin-right: auto;
}
.breath--cream .breath-foot { color: rgba(10,10,10,0.55); }

/* Reveal animation for breath words */
.breath .breath-word { opacity: 0; transform: translateY(20px); transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); }
.breath .breath-eyebrow,
.breath .breath-foot { opacity: 0; transition: opacity 1s ease 0.6s; }
.breath.in .breath-word { opacity: 1; transform: translateY(0); }
.breath.in .breath-eyebrow,
.breath.in .breath-foot { opacity: 1; }

/* ============================================================
   CREAM SECTIONS — site-wide utility
   ============================================================ */
.section-cream {
  background: var(--cream-bg) !important;
  color: var(--cream-ink) !important;
  border-color: var(--cream-line) !important;
}
.section-cream h1,
.section-cream h2,
.section-cream h3,
.section-cream h4 { color: var(--cream-ink); }
.section-cream p,
.section-cream li,
.section-cream span:not(.eyebrow):not(.label):not(.num):not(.kicker):not(.year):not(.meta):not(.t):not(.code):not(.n):not(.title) { color: var(--cream-ink); }
.section-cream .body,
.section-cream .section-lede,
.section-cream .lede,
.section-cream p.body,
.section-cream p:not(.pull):not(.pull-quote) { color: var(--cream-ink-dim); }
.section-cream .eyebrow,
.section-cream .label,
.section-cream .num,
.section-cream .kicker,
.section-cream .meta,
.section-cream .t {
  color: rgba(26,24,21,0.55);
}
.section-cream em { color: inherit; }
.section-cream a { color: var(--cream-ink); }
.section-cream a:hover { color: #d97a4f; }
.section-cream hr,
.section-cream [style*="background:#d97a4f"],
.section-cream [style*="background: #d97a4f"] { background: #d97a4f !important; }

/* Borders inside cream */
.section-cream [style*="rgba(245,241,232,0.12)"] { border-color: rgba(26,24,21,0.12) !important; }
.section-cream [style*="rgba(245,241,232,0.18)"] { border-color: rgba(26,24,21,0.18) !important; }
.section-cream [style*="rgba(245,241,232,0.06)"] { border-color: rgba(26,24,21,0.06) !important; }

/* Specific component overrides inside cream */
.section-cream.leadership { border-bottom-color: var(--cream-line) !important; }
.section-cream .leader .name { color: var(--cream-ink); }
.section-cream .leader .title { color: var(--cream-ink-dim); }
.section-cream .leader .pic {
  /* Soft shadow instead of relying on dark contrast */
  box-shadow: 0 1px 0 rgba(26,24,21,0.06), 0 8px 24px rgba(26,24,21,0.05);
}

.section-cream.sustain { border-top-color: var(--cream-line); border-bottom-color: var(--cream-line); }
.section-cream .sustain ul li .n { color: var(--cream-ink); }
.section-cream .sustain ul li .n::after { background: #d97a4f; }
.section-cream .sustain ul li h4 { color: var(--cream-ink); }
.section-cream .sustain ul li p { color: var(--cream-ink-dim); }
.section-cream .sustain ul li { border-color: var(--cream-line) !important; }

.section-cream.story-section { border-bottom-color: var(--cream-line); }
.section-cream.story-section h2 em { color: #d97a4f; }
.section-cream .pull-quote {
  border-left-color: rgba(217,122,79,0.5) !important;
  color: #8c7224 !important;
}

.section-cream.brands { border-bottom-color: var(--cream-line); }
.section-cream .brand-cell { box-shadow: 0 1px 0 rgba(26,24,21,0.06), 0 12px 32px rgba(26,24,21,0.06); }
.section-cream .brand-cell .label { color: #f5f1e8; } /* labels sit on dark photo, keep cream */

/* Pill CTA — adapts to dark or cream surface */
.cta-pill {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f5f1ea;
  text-decoration: none;
  border: 1px solid rgba(245,241,232,0.3);
  padding: 18px 36px;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.cta-pill:hover {
  background: rgba(245,241,232,0.08);
  border-color: rgba(245,241,232,0.6);
}
.section-cream .cta-pill {
  color: var(--cream-ink);
  border-color: rgba(26,24,21,0.22);
}
.section-cream .cta-pill:hover {
  background: rgba(26,24,21,0.05);
  border-color: rgba(26,24,21,0.55);
}

.section-cream.contact-grid,
.section-cream .contact-grid { border-bottom-color: var(--cream-line); }
.section-cream .contact-grid .col p,
.section-cream .col p { color: var(--cream-ink) !important; }
.section-cream .contact-grid .col a[href^="mailto:"],
.section-cream .col a[href^="mailto:"] {
  color: var(--cream-ink);
  border-bottom-color: rgba(26,24,21,0.4);
}
.section-cream .col a[href^="mailto:"]:hover { color: #d97a4f; }

/* Marker tweaks inside cream */
.section-cream .marker-underline path,
.section-cream .marker-circle path,
.section-cream .marker-check path { stroke: #d97a4f; }
.section-cream .marker-underline.is-cream path { stroke: #1a1815; }
.page-hero.is-cream .marker-underline.is-cream path { stroke: #1a1815; }
/* Auto-draw underline inside hero on load (no scroll-trigger needed) */
.page-hero .marker-underline path { animation: heroUnderlineDraw 1.4s cubic-bezier(.55,.05,.35,.95) 1.2s forwards; }
@keyframes heroUnderlineDraw { to { stroke-dashoffset: 0; } }

/* Page heroes that go cream */
.page-hero.is-cream {
  background: var(--cream-bg);
  color: var(--cream-ink);
  border-bottom-color: var(--cream-line);
}
.page-hero.is-cream h1 { color: var(--cream-ink); }
.page-hero.is-cream .eyebrow { color: rgba(26,24,21,0.5); }
.page-hero.is-cream .lede { color: var(--cream-ink-dim); }
.page-hero.is-cream h1 em { color: #d97a4f; }

/* ============== HOME STATEMENT (post-hero) ============== */
.home-statement {
  background: var(--cream-bg);
  padding: 120px 0 0;
  position: relative;
  overflow: hidden;
}

/* faint grain/glow accent */
.home-statement::before {
  content: '';
  position: absolute;
  top: -10%; right: -10%;
  width: 60%; height: 80%;
  background: radial-gradient(ellipse at center, rgba(217,122,79,0.06) 0%, rgba(217,122,79,0) 60%);
  pointer-events: none;
}

.home-statement .hs-inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 64px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 120px;
  position: relative;
  z-index: 1;
}
.home-statement .wrap { position: relative; max-width: none; padding: 0 clamp(40px, 10vw, 145px); }
/* Breathing room under the left-column caption so it isn't flush to the
   black video band below. */
.home-statement:not(.rise-stage) { padding-bottom: 90px; }
/* Local Roots video band: black, and no cream gap above it — it reads as a
   continuation of the statement section, not a new cream block. */
.home-statement.rise-stage { background: #000 !important; padding-top: 0; }
.home-statement.rise-stage .hs-fullvideo { margin-top: 0 !important; }
/* Headline sits flush at the 40px page margin (the wrap is now symmetric). */
.home-statement .hs-head { padding-left: 0; }

/* Full-bleed Chicago video band — breaks out of the wrap's asymmetric
   padding to span the entire viewport width. */
.home-statement .hs-fullvideo {
  position: relative;
  left: auto;
  /* Full-bleed without the 100vw-vs-scrollbar offset: width auto + equal
     negative margins relative to the content box (excludes the scrollbar)
     so the band bleeds symmetrically and the centered caption is truly
     centered in the VISIBLE area. */
  width: auto;
  margin: 120px calc(-1 * clamp(40px, 10vw, 145px)) 0;
  transform: none;
  overflow: hidden;
  line-height: 0;
  /* Band aspect = the video's CONTENT region (1920×921 after the 7.3% top /
     7.4% bottom black bars), so object-fit:cover crops exactly the bars and
     virtually no real footage. */
  aspect-ratio: 1920 / 921;
}
.home-statement .hs-fullvideo-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Caption overlay on the full-width video — letters fade in one by one. */
.home-statement .hs-fullvideo-cap {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.18fr);
  column-gap: clamp(120px, 15vw, 340px);
  align-content: end;
  justify-items: start;
  padding: 0 clamp(40px, 10vw, 145px) clamp(40px, 6vh, 96px);
  pointer-events: none;
  font-family: 'Jost';
  font-weight: 500;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.55;
  text-align: left;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
/* The caption fills the about right-column; its inner block mirrors the
   "Who we are" intro grid: eyebrow on the left, body + button to its right
   (so the text lines up with the about body copy above). */
.home-statement .hs-fullvideo-cap .fv-inner {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(120px, 0.4fr) minmax(0, 1.6fr);
  column-gap: clamp(32px, 4vw, 72px);
  align-items: start;
}
.home-statement .hs-fullvideo-cap .fv-eyebrow { grid-column: 1; align-self: start; }
.home-statement .hs-fullvideo-cap .fv-text { grid-column: 2; }
/* text-indent compensates the trailing letter-spacing so centered uppercase
   lines read truly centered (the trailing 0.08em is otherwise counted into
   the centered box, shifting the visible ink left). */
.home-statement .hs-fullvideo-cap .fv-line { display: block; white-space: nowrap; }
.home-statement .hs-fullvideo-cap .fv-line:first-child { font-weight: 300; }
.home-statement .hs-fullvideo-cap .fv-ch {
  display: inline-block;
  opacity: 0;
  white-space: pre;
  transition: opacity 0.42s ease;
}
.home-statement .hs-fullvideo-cap .fv-ch.lit { opacity: 1; }
.home-statement .hs-fullvideo-cap .fv-body .fv-word { display: inline-block; white-space: nowrap; }
/* EB Garamond body line under the caption — same size as the section's
   body lede; fades in letter-by-letter after the two headline lines. */
.home-statement .hs-fullvideo-cap .fv-body {
  font-family: 'EB Garamond';
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 36, 'SOFT' 50;
  font-weight: 360;
  font-size: clamp(20px, 1.55vw, 27px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  text-transform: none;
  max-width: 46ch;
  margin: 0 0 0;
  text-wrap: pretty;
  text-shadow: 0 2px 24px rgba(0,0,0,0.4);
  color: #ffffff;
}

/* Left rail */
.home-statement .hs-rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 0;
  min-height: 540px;
}
.home-statement .hs-meta-k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.4);
  margin-bottom: 10px;
}
.home-statement .hs-meta-v {
  font-family: 'Jost';
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: rgba(245,241,232,0.85);
}

/* Main column */
.home-statement .hs-main {
  max-width: 1080px;
}

/* ---- Two-column staggered "Who we are" layout ---- */
.home-statement .hs-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.18fr);
  column-gap: clamp(120px, 15vw, 340px);
  align-items: start;
}
.home-statement .hs-col { min-width: 0; }
/* Left column: headline sits at top, tall photo below it */
.home-statement .hs-col--left { display: flex; flex-direction: column; }
/* Tall photo sits directly under the headline (top-aligned with the wide
   photo in the right column — no bottom push). */
.home-statement .hs-col--left .hs-photo--tall {
  max-width: 100%;
  margin-top: 0;
}
/* Right column: intro block, then the wide photo pushed lower (staggered) */
.home-statement .hs-col--right { display: flex; flex-direction: column; }

/* Desktop: collapse the two columns into one shared 2×2 grid so the photo
   row starts at the same Y on both sides (true top-alignment) regardless of
   how tall the headline vs. intro block is. Responsive — the grid row track
   auto-sizes to the taller header at any window width. Mobile (≤980px)
   keeps its own single-column flow below. */
@media (min-width: 1280px) {
  .home-statement .hs-col { display: contents; }
  .home-statement .hs-col--left .hs-head { grid-column: 1; grid-row: 1; align-self: start; }
  .home-statement .hs-col--left .hs-photo-fig { grid-column: 1; grid-row: 2; align-self: start; }
  .home-statement .hs-col--right .hs-intro { grid-column: 2; grid-row: 1; align-self: start; }
  .home-statement .hs-col--right .hs-photo-fig { grid-column: 2; grid-row: 2; align-self: start; }
  /* Equal top offset so both photos sit on the same line within the shared
     row (overrides the differing 150px / 124px margins above). */
  .home-statement .hs-col--left .hs-photo-fig,
  .home-statement .hs-col--right .hs-photo-fig { margin-top: 48px; }

  /* Statement section with a SECOND right-column video: the left tall video
     spans rows 2-3 and bottom-aligns with the second right video. Scoped so
     it can't affect the Brands carousel (which has no 2nd figure). */
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-col--left .hs-photo-fig {
    grid-column: 1; grid-row: 2 / span 2; align-self: stretch;
    display: flex; flex-direction: column; min-height: 0;
  }
  /* Left video fills the stretched figure (crops via cover) so its bottom
     lines up with the second right video instead of overflowing tall. */
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-col--left .hs-video-crop--tall {
    flex: 1 1 auto; height: auto !important; min-height: 0;
    aspect-ratio: auto !important;
  }
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-col--left .hs-photo-video.hs-photo--tall {
    height: 100% !important; aspect-ratio: auto !important; object-fit: cover;
  }
  /* Both right-column videos render in 16:9. */
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-col--right .hs-photo--wide {
    aspect-ratio: 16 / 9 !important;
  }
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-col--right .hs-photo-fig--2 {
    grid-column: 2; grid-row: 3; align-self: start;
  }
}

.home-statement .num {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 28px;
}
/* Eyebrow sits to the LEFT of the body copy (HBA-style) */
.home-statement .hs-intro {
  display: grid;
  grid-template-columns: minmax(120px, 0.4fr) minmax(0, 1.6fr);
  column-gap: clamp(32px, 4vw, 72px);
  align-items: start;
}
.home-statement .hs-intro .num { margin-bottom: 0; padding-top: 0.55em; }
.home-statement .hs-intro-body { min-width: 0; }

/* Headline — smaller now, left column */
.home-statement .hs-head {
  font-family: 'Jost';
  font-weight: 600;
  font-size: clamp(46px, 5.28vw, 91px);
  line-height: 1.1;
  letter-spacing: normal;
  color: #f5f1ea;
  margin: 0 0 88px;
  text-wrap: balance;
}
.home-statement .hs-head em {
  font-weight: 600;
  color: #f5f1ea;
}
.home-statement .hs-head .hh-1 { color: #3a3a42; font-family: 'Jost'; font-weight: 600; text-transform: none; letter-spacing: normal; }
.home-statement .hs-head .hh-2 { color: var(--accent); font-family: 'Jost'; font-weight: 600; text-transform: none; letter-spacing: normal; }
/* Headline letter-by-letter darken on scroll (mirrors the lede). Each char
   starts light and resolves to its span's own color via .lit. */
.home-statement .hs-head .hs-char { color: transparent; transition: color 0.4s ease; }
.home-statement .hs-head .hh-2 .hs-char { color: transparent; }
.home-statement .hs-head .hh-2 .hs-char.lit { color: #3a3a42; }
.home-statement .hs-head .hh-1 .hs-char.lit { color: #3a3a42; }
.home-statement .hs-head .hh-2 .hs-char.lit { color: var(--accent); }

/* BRANDS — oversized Jost ExtraBold, thin white outline that fills white
   letter-by-letter on scroll (reuses .hs-char/.lit reveal). */
.hs-head--brands,
.hs-head--brands .hh-1,
.home-statement .hs-head--brands .hh-1 .hs-char {
  font-family: 'Bebas Neue' !important;
  font-weight: 400 !important;
}
.home-statement .hs-head.hs-head--brands {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(124px, 22.6vw, 412px) !important;
  line-height: 0.9;
}
/* On the brands page, match the LOCATIONS hero size exactly. */
.brands-blank .hs-head.hs-head--brands {
  font-size: clamp(79px, 14.5vw, 264px) !important;
  line-height: 0.9;
  margin-bottom: 0;
}

/* ABOUT — same Bebas outline-fill as BRANDS, but salmon. */
.hs-head--about,
.hs-head--about .hh-1,
.home-statement .hs-head--about .hh-1 .hs-char {
  font-family: 'Bebas Neue' !important;
  font-weight: 400 !important;
}
.home-statement .hs-head.hs-head--about {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(124px, 22.6vw, 412px) !important;
  line-height: 0.9;
  /* Lift the Bebas cap-height to top-align with the WHO WE ARE eyebrow
     (Bebas carries large internal leading above the caps). */
}
.home-statement .hs-head--about .hh-1 .hs-char {
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(217,122,79,0.85);
          text-stroke: 1.2px rgba(217,122,79,0.85);
  transition: color 0.45s ease;
}
.home-statement .hs-head--about .hh-1 .hs-char.lit {
  color: #d97a4f;
  -webkit-text-stroke: 1.2px #d97a4f;
          text-stroke: 1.2px #d97a4f;
}

/* LOCATIONS — Bebas outline-fill (white), overlaid top-left on the Chicago
   video band. Same size/effect as ABOUT & BRANDS. */
.hs-head--locations {
  position: absolute;
  top: clamp(6px, 1vw, 18px);
  left: clamp(40px, 10vw, 145px);
  z-index: 3;
  margin: 0 !important;
}
.hs-head--locations,
.hs-head--locations .hh-1,
.hs-head--locations .hh-1 .hs-char {
  font-family: 'Bebas Neue' !important;
  font-weight: 400 !important;
}
.hs-head--locations {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(124px, 22.6vw, 412px) !important;
  line-height: 0.9;
}
.home-statement .hs-head--locations .hh-1 .hs-char {
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(255,255,255,0.56);
          text-stroke: 1.2px rgba(255,255,255,0.56);
  transition: color 0.45s ease;
}
.home-statement .hs-head--locations .hh-1 .hs-char.lit {
  color: rgba(255,255,255,0.56);
  -webkit-text-stroke: 1.2px rgba(255,255,255,0.56);
          text-stroke: 1.2px rgba(255,255,255,0.56);
}
.home-statement .hs-head--brands .hh-1 .hs-char {
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(255,255,255,0.65);
          text-stroke: 1.2px rgba(255,255,255,0.65);
  transition: color 0.45s ease;
}
.home-statement .hs-head--brands .hh-1 .hs-char.lit {
  color: #ffffff;
  -webkit-text-stroke: 1.2px #ffffff;
          text-stroke: 1.2px #ffffff;
}

/* Photos */
.home-statement .hs-photo {
  display: block;
  width: 100%;
  background: rgba(58,58,66,0.06);
  border: 1px solid rgba(58,58,66,0.12);
}
.home-statement .hs-photo--tall { width: 100%; height: auto !important; aspect-ratio: 5 / 7; }
.home-statement .hs-photo--wide { width: 100%; height: auto !important; aspect-ratio: 3 / 2; }
.home-statement .hs-photo-fig { margin: 150px 0 0; }
/* Video figures are always visible (no scroll-reveal gating). */
.home-statement .hs-photo-fig--video { opacity: 1 !important; transform: none !important; }
.home-statement .hs-photo-video { opacity: 1 !important; }
/* Video-on-hover overlay: video stacks exactly over the wide photo and
   cross-fades in on hover while the clip plays from the start. */
.home-statement .hs-photo-fig--video { position: relative; }
/* Crop wrapper: clips the video's baked-in side bars via object-fit cover.
   overflow:hidden lives HERE (not the figure) so the caption stays visible. */
.home-statement .hs-video-crop {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.home-statement .hs-video-crop--tall { aspect-ratio: 1 / 2.04; }
.home-statement .hs-video-crop video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;          /* fills the box, cropping side bars; no distortion */
  object-position: center;
  transform: scale(1.22);      /* push baked-in side bars outside the crop */
}
.home-statement .hs-photo-fig--tall { margin-left: 0; margin-top: 124px; }
.home-statement .hs-photo-video.hs-photo--tall { aspect-ratio: 1 / 2.04; }
.home-statement .hs-photo-video {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* The source clip has baked-in black bars on the sides; widen the video
     remains — crops the bars off the left/right without zooming vertically. */
  width: 100%;
  margin-left: 0;
}
.home-statement .hs-photo-cap {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(58,58,66,0.6);
  margin-top: 16px;
}

/* Lede */
.home-statement .hs-lede {
  font-family: 'EB Garamond';
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 36, 'SOFT' 50;
  font-weight: 360;
  font-size: clamp(20px, 1.55vw, 27px);
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: rgba(245,241,232,0.94);
  margin: 0;
  max-width: 56ch;
  text-wrap: pretty;
}
.home-statement .hs-lede .dim {
  display: block;
  margin-top: 18px;
  font-weight: 360;
  font-size: 0.78em;
  letter-spacing: 0.005em;
  color: var(--accent);
  opacity: 0.78;
}

/* Stat ticker */
.section-rule-line {
  position: relative;
  z-index: 1;
  background: #000;
  height: 1px;
  margin: 0 50px;
  max-width: none;
  width: auto;
}
.section-rule-line::before {
  content: '';
  display: block;
  height: 1px;
  background: rgba(255,255,255,0.5);
}
.home-statement .hs-ticker {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: center;
  gap: 0;
  /* Full-bleed black band for the ticker. */
  background: #000000;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  padding-top: 88px;
  padding-bottom: 96px;
  padding-left: 40px;
  padding-right: 40px;
  /* Cancel the wrap's responsive side padding so the ticker is true
     full-bleed (no left padding) regardless of the wrap's clamp padding. */
  margin-left: calc(-1 * clamp(40px, 10vw, 145px));
  margin-right: 0;
  width: 100vw;
  box-sizing: border-box;
  border-top: none;
  max-width: none;
  position: relative;
}
/* Cream band bleeds to both edges via a pseudo-element that can't overflow
   the page (uses 100% of an overflow-clipped parent, not 100vw). */
.home-statement { overflow-x: clip; }
.home-statement .hs-ticker::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -100vw; right: -100vw;
  background: #000000;
  z-index: -1;
}
.home-statement .hs-tick {
  padding-right: 80px;
  border-right: 1px solid rgba(255,255,255,0.5);
  padding-left: 80px;
}
.home-statement .hs-ticker {
  gap: 0;
  align-items: end;
  border-top: 1px solid rgba(245,241,232,0.14);
  padding-top: 36px;
  max-width: 880px;
}
.home-statement .hs-tick {
  padding-right: 56px;
  border-right: 1px solid rgba(255,255,255,0.5);
  padding-left: 32px;
}
.home-statement .hs-tick:first-child { padding-left: 0; }
.home-statement .hs-tick:last-child { border-right: none; padding-right: 0; }
.home-statement .hs-tick .n {
  font-family: 'Bebas Neue';
  font-weight: 400;
  font-size: clamp(78px, 8.96vw, 134px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--cream-ink);
  margin-bottom: 16px;
}
.home-statement .hs-tick .n .u {
  font-family: 'Jost';
  font-weight: 700;
  font-size: 0.22em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-ink-dim);
  margin-left: 6px;
  vertical-align: 0.6em;
  font-weight: 400;
}
.home-statement .hs-tick .l {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-ink-dim);
}

/* Reveal animation timing */
.home-statement .hs-head { opacity: 1; transform: none; transition: none; }
.home-statement .hs-head.in { opacity: 1; transform: translateY(0); }
.home-statement .hs-intro { opacity: 0; transform: translateY(20px); transition: opacity 0.9s cubic-bezier(.2,.7,.2,1) .15s, transform 0.9s cubic-bezier(.2,.7,.2,1) .15s; }
.home-statement .hs-intro.in { opacity: 1; transform: translateY(0); }
.home-statement .hs-photo--tall, .home-statement .hs-photo-fig { opacity: 0; transform: translateY(24px); transition: opacity 1s cubic-bezier(.2,.7,.2,1) .2s, transform 1s cubic-bezier(.2,.7,.2,1) .2s; }
.home-statement .hs-photo--tall.in, .home-statement .hs-photo-fig.in { opacity: 1; transform: translateY(0); }
/* Slow top-to-bottom clip reveal on the two statement media frames. Target
   the video elements directly so the wipe is reliable regardless of crop
   wrappers. Starts fully clipped from the bottom, wipes downward on scroll. */
.home-statement .hs-photo-fig--video .hs-photo-video {
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  transition: clip-path 2.4s cubic-bezier(.22,.61,.36,1) .1s,
              -webkit-clip-path 2.4s cubic-bezier(.22,.61,.36,1) .1s;
}
.home-statement .hs-photo-fig--video.in .hs-photo-video {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}
/* The tall (portrait) frame is much taller in pixels, so the same duration
   wipes faster visually. Give it a longer duration to match the wide
   frame's pace. */
.home-statement .hs-photo-fig--tall .hs-photo-video {
  transition-duration: 4s, 4s;
}
.home-statement .hs-ticker { opacity: 0; transform: translateY(20px); transition: opacity 0.9s cubic-bezier(.2,.7,.2,1) .3s, transform 0.9s cubic-bezier(.2,.7,.2,1) .3s; }
.home-statement .hs-ticker.in { opacity: 1; transform: translateY(0); }

/* "Our Practice" pill button beneath the body copy */
.home-statement .hs-more {
  margin-top: 36px;
}
.home-statement .hs-more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.82);
  text-decoration: none;
  padding: 15px 32px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 999px;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, font-weight 0.01s linear;
  /* scroll-driven left→right fill */
  position: relative;
  overflow: hidden;
  --mhf-fill: 0;
}
.home-statement .hs-more-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  transform: scaleX(var(--mhf-fill));
  transform-origin: left center;
  transition: transform 0.12s linear;
  z-index: -1;
  pointer-events: none;
}
.home-statement .hs-more-link > * { position: relative; z-index: 1; }
.home-statement .hs-more-link:hover {
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
  gap: 20px;
}
.home-statement .hs-more-link span { font-size: 14px; }

/* CTA below the full-width video caption — centered, white over dark video. */
.home-statement .hs-fullvideo-cap .fv-cta-wrap {
  display: flex;
  justify-content: flex-start;
  margin-top: 30px;
  pointer-events: auto;
}
.home-statement .hs-fullvideo-cap .fv-cta {
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.85) !important;
  background: transparent;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.7s ease, color 0.3s ease, background 0.3s ease, border-color 0.3s ease, font-weight 0.01s linear;
}
.home-statement .hs-fullvideo-cap .fv-cta.lit { opacity: 1; }
/* Make the button its own stacking context so the white ::before fill paints
   INSIDE the button (above the video) instead of dropping behind it. */
.home-statement .hs-fullvideo-cap .fv-cta { isolation: isolate; }
/* Scroll-driven left→right white fill, identical to the ABOUT button. The
   ::before keeps z-index:-1 so it sits behind the button text; isolation on
   the button keeps that layer above the video. */
.home-statement .hs-fullvideo-cap .fv-cta::before { display: block; background: #ffffff; }
.home-statement .hs-fullvideo-cap .fv-cta.is-filled {
  color: #3a3a42 !important;
  background: transparent;
  border-color: #ffffff !important;
  font-family: 'Jost';
  font-weight: 600;
}
/* Hover: white fill, dark-gray Jost SemiBold text. */
.home-statement .hs-fullvideo-cap .fv-cta:hover,
.home-statement .hs-fullvideo-cap .fv-cta.is-filled:hover {
  color: rgba(58,58,66,0.75);
  background: #ffffff;
  border: 1px solid #ffffff !important;
  font-family: 'Jost';
  font-weight: 600;
}

/* Tablet/mobile */
@media (max-width: 1279px) {
  .home-statement { padding: 120px 0 120px; }
  .home-statement .hs-grid { grid-template-columns: 1fr; row-gap: 56px; }
  .home-statement .hs-head { margin-bottom: 32px; }
  .home-statement .hs-intro { grid-template-columns: 1fr; row-gap: 18px; }
  .home-statement .hs-intro .num { padding-top: 0; }
  .home-statement .hs-photo--tall { height: clamp(360px, 70vw, 520px) !important; }
  .home-statement .hs-photo-fig { margin-top: 40px; }
  .home-statement .hs-ticker {
    grid-template-columns: repeat(2, 1fr);
    padding-top: 28px;
  }
  .home-statement .hs-tick {
    padding: 24px 16px;
    border-right: 1px solid rgba(245,241,232,0.10);
    border-bottom: 1px solid rgba(245,241,232,0.10);
  }
  .home-statement .hs-tick:nth-child(2n) { border-right: none; }
  .home-statement .hs-tick:nth-last-child(-n+2) { border-bottom: none; }
}


/* ---------- About story (refined typography) ---------- */
.story-grid > div:last-child { max-width: 56ch; }

.story-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 28px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.story-eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: rgba(217,122,79,0.55);
}

.story-h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fbf7ec;
  margin: 0 0 56px;
  text-wrap: balance;
}
.story-h2 em {
  font-weight: 400;
  color: #d97a4f;
}

.story-dateline {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 24px;
  display: inline-flex;
  gap: 14px;
  align-items: baseline;
}
.story-dateline-dot {
  opacity: 0.45;
  font-family: var(--mono);
}

.story-lede {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: #fbf7ec;
  margin: 0 0 48px;
  text-wrap: pretty;
}
.story-dropcap {
  float: left;
  font-family: var(--serif);
  font-weight: 500;
  font-style: normal;
  font-size: 4.6em;
  line-height: 0.85;
  color: #d97a4f;
  margin: 0.04em 0.12em -0.12em 0;
  letter-spacing: -0.04em;
}

.story-sourcing {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  border-top: 1px solid rgba(245,241,232,0.1);
}
.story-sourcing li {
  display: grid;
  grid-template-columns: 9.5em 1fr;
  align-items: baseline;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(245,241,232,0.1);
}
.story-sourcing-k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.55);
}
.story-sourcing-v {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(17px, 1.35vw, 21px);
  color: #f0e7d2;
  letter-spacing: -0.005em;
}

.story-body {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
  color: #d9d0bd;
  margin: 0 0 28px;
  text-wrap: pretty;
  max-width: 50ch;
}
.story-body--emph {
  color: #f0e7d2;
  font-size: clamp(18px, 1.4vw, 22px);
}

.story-closer {
  position: relative;
  margin: 56px 0 0;
  padding-left: 28px;
}
.story-closer-rule {
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(to bottom, #d97a4f, rgba(217,122,79,0.0));
}
.story-closer-line {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #fbf7ec;
  margin: 0 0 14px;
  text-wrap: pretty;
}
.story-closer-line em {
  font-weight: 400;
  color: #d97a4f;
}
.story-closer-coda {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.5;
  color: #d97a4f;
  margin: 0;
  letter-spacing: -0.005em;
}

/* Section-cream variant overrides for the new story typography */
.section-cream .story-eyebrow { color: #8a6b1f; }
.section-cream .story-eyebrow::before { background: rgba(138,107,31,0.5); }
.section-cream .story-h2 { color: #1a1a1a; }
.section-cream .story-h2 em { color: #8a6b1f; }
.section-cream .story-dateline { color: rgba(26,26,26,0.55); }
.section-cream .story-lede { color: #1a1a1a; }
.section-cream .story-dropcap { color: #8a6b1f; }
.section-cream .story-sourcing { border-top-color: rgba(26,26,26,0.12); }
.section-cream .story-sourcing li { border-bottom-color: rgba(26,26,26,0.12); }
.section-cream .story-sourcing-k { color: rgba(26,26,26,0.5); }
.section-cream .story-sourcing-v { color: #1a1a1a; }
.section-cream .story-body { color: rgba(26,26,26,0.78); }
.section-cream .story-body--emph { color: #1a1a1a; }
.section-cream .story-closer-rule { background: linear-gradient(to bottom, #8a6b1f, rgba(138,107,31,0.0)); }
.section-cream .story-closer-line { color: #1a1a1a; }
.section-cream .story-closer-line em { color: #8a6b1f; }
.section-cream .story-closer-coda { color: #8a6b1f; }


/* About: hand-drawn marker box around the first journey card */
.card--marked { position: relative; }
.card-mark {
  position: absolute;
  inset: -22px -28px;
  width: calc(100% + 56px);
  height: calc(100% + 44px);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.9s cubic-bezier(.45,.05,.55,.95) 0.4s,
              transform 1.1s cubic-bezier(.2,.7,.2,1) 0.3s;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.45));
  z-index: 1;
}
.locations-walk .panel.in .card-mark {
  opacity: 0.85;
  transform: scale(1);
}
.card--marked > *:not(.card-mark) { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .card-mark { animation: none; }
  .card-mark feTurbulence animate { display: none; }
}


/* ============================================================
   Weight-contrast pass — black default, white breathing,
   no italics. Body becomes light; emphasis stays bold.
   ============================================================ */
:root {
  --cream-bg: #ffffff;
}
body { font-weight: 300; }
.body, .body-lg, .section-lede, .lede,
.hero-lede, .home-statement .hs-lede,
.ch-p, .contact-grid .col p,
.airport-block .units .unit .n,
footer .ft-blurb, footer .ft-statement,
.story-lede, .about-hero-lede,
.bn-label, .bn-sub,
.section-lede--editorial { font-weight: 300; }

/* Default H1 style site-wide (EB Garamond 600), unless manually overridden. */
h1 {
  font-family: 'EB Garamond';
  font-weight: 600;
  font-size: clamp(46px, 5.28vw, 91px);
  line-height: 1.1;
  letter-spacing: normal;
}
h1 em { font-weight: 600; font-style: normal; }

/* Headings keep bold; em accents stay bold (the contrast vs body 300) */
h2, h3, h4 { font-weight: 700; }
em { font-style: normal; font-weight: 700; }

/* Light-weight numerals (display stats) — let big serifs breathe */
.bn-num, .rs-n, .awards-head .fig-n, .sustain-figs .fig-n {
  font-weight: 400;
}

/* Marker underlines were italic-paired — keep but trim */
.split-word em, .reel-title em, .ch-h em, .ft-statement em,
.hero h1 em, .hero-invite em, .page-hero h1 em,
.locations-walk .panel h3 em, .airport-block .code em,
.story-h2 em, .story-closer-line em, .home-statement .hs-head em,
.brands-cinema .bc-name em,
.us-map-h2 em,
.contact-hero-top h1 em {
  font-weight: 400;
}


/* ============================================================
   Squiggly markers + section-lede emphasis — REMOVED
   ============================================================ */
.marker-underline > svg,
.marker-circle > svg,
.marker-check { display: none !important; }
.marker-underline, .marker-circle { padding: 0 !important; }

/* Section ledes: kill weight contrast on inline emphasis */
.section-lede em,
.section-lede--editorial em,
.brands-hero-lede em,
.hero-lede em { font-weight: inherit !important; color: inherit !important; }


/* "Foods" weight contrast — match the footer wordmark treatment.
   Same homepage-hero treatment is applied site-wide to every page hero
   so headings share the bold-base + thin-em contrast. */
.nav .mark em,
.hero h1 em,
.page-hero h1 em,
.brands-hero-h1 em,
.about-hero-h1 em,
.contact-hero-h1 em,
.page-hero--still .hero-invite em {
  font-weight: 400;
}


/* ============================================================
   Flipboard — Vestaboard-style split-flap widget
   ============================================================ */
.home-statement .hs-main { position: relative; }
.flipboard {
  position: absolute;
  top: 78px;       /* aligns top with the headline (below the .num eyebrow + its 64px margin-bottom) */
  right: 40px;     /* matches .wrap left padding so flipboard sits flush to the right page margin */
  background: transparent;
  border: 0;
  padding: 0;
  font-family: 'Jost';
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* "Now Serving" label — small caps mono, flush-left to the flipboard's left edge. */
.fb-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  align-self: flex-start;
  margin-bottom: 4px;
}
.fb-head { display: none; }
.fb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(245,241,234,0.08);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,241,234,0.45);
}
.fb-led {
  width: 6px; height: 6px; border-radius: 100%;
  background: #f5f1ea;
  box-shadow: 0 0 6px rgba(217,122,79,0.8);
  animation: fbBlink 1.6s ease-in-out infinite;
}
@keyframes fbBlink {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.fb-title { flex: 1; color: rgba(245,241,234,0.6); }
.fb-time { font-variant-numeric: tabular-nums; color: rgba(245,241,234,0.4); }

.fb-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 28px;
  padding: 0;
}
.fb-cell {
  display: flex;
  gap: 8px;
  white-space: pre;
}
.fb-char {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 96px;
  background: linear-gradient(180deg, #1a1815 0%, #1a1815 49%, #0d0c0b 50%, #161412 100%);
  border-radius: 4px;
  font-family: 'EB Garamond';
  font-size: 62px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  color: #f5f1ea;
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  transition: filter 80ms;
}
/* Airport codes in orange accent */
.fb-code .fb-char { color: #d97a4f; }
/* Restaurant counts in white */
.fb-count .fb-char { color: #f5f1ea; }
.fb-char::before {
  /* seam line — the visible flap edge */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(0,0,0,0.55);
  z-index: 2;
  pointer-events: none;
}
.fb-char.is-flipping {
  filter: brightness(1.3);
  animation: fbFlap 90ms ease-in-out;
}
@keyframes fbFlap {
  0%   { transform: scaleY(1); }
  50%  { transform: scaleY(0.92); }
  100% { transform: scaleY(1); }
}

/* Status color treatments */
.fb-status .fb-char { color: #f5f1ea; }
.fb-status.is-new .fb-char { color: #d97a4f; }

/* Status cell row alignment */
.fb-status { justify-self: end; }
.fb-code   { letter-spacing: 0; }
.fb-city   { letter-spacing: 0; }

/* Wide desktops — full size flipboard side-by-side with headline */
@media (max-width: 1535px) {
  .fb-char { width: 68px; height: 86px; font-size: 56px; }
}
/* 13" laptops and tablets — stack the flipboard BELOW the headline so it doesn't collide */
@media (max-width: 1279px) {
  .home-statement .hs-main { position: relative; }
  .flipboard {
    position: static;
    width: 100%;
    max-width: 560px;
    margin: 48px 0 0;
    top: auto;
    right: auto;
  }
  .fb-char { width: 64px; height: 80px; font-size: 52px; }
}
@media (max-width: 767px) {
  .fb-char { width: 44px; height: 56px; font-size: 36px; border-radius: 3px; }
  .fb-cell { gap: 4px; }
  .flipboard { gap: 4px; max-width: 100%; }
}
@media (max-width: 767px) {
  .fb-char { width: 32px; height: 42px; font-size: 26px; }
  .flipboard { margin-top: 32px; }
}

/* ============================================================
   HERO — Scroll-triggered masked logo reveal
   The hero video is hidden behind a dark cover with the HFF wordmark
   logo punched through. As the user scrolls, the cutout grows until
   the entire video is revealed; the cover fades; the headline +
   meta + scroll cue fade in.
   ============================================================ */
.hero-reveal {
  /* Sticky so the next section scrolls up and "covers" the hero on its way
     up the page (rather than pushing it offscreen). Any sibling after the
     hero is bumped to z-index: 1 so it paints over the pinned hero. */
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 0;
  background: #000000;
}
.hero-reveal ~ * { position: relative; z-index: 1; }
/* Section-rule divider between Statement and Brands sits BETWEEN two
   z-index:1 sections; without a solid backing, the sticky hero video
   would show through the transparent SVG bounding box. */
.section-rule-svg {
  background: #000000 !important;
  width: 100% !important;        /* span full width so no video shows in side gaps */
}
/* The .hero-reveal element starts with inline style="visibility:hidden" in
   the HTML, so nothing can flash before paint. JS removes the inline style
   once the cover SVG is laid out and painted. As a hard fallback, this CSS
   keyframe forces visibility back on after 1.2s in case JS never runs. */
@keyframes hero-prime-fallback { to { visibility: visible; } }
.hero-reveal { animation: hero-prime-fallback 0s linear 1.2s forwards; }
.hero-reveal .hero--masked {
  position: relative;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

/* SVG cover: a 1920×1080 dark rectangle with the HFF wordmark cut out via
   fill-rule:evenodd. CSS-only animation — 2s hold, 8s grow, instant cut.
   `animation-fill-mode: both` locks the initial state from the moment
   the SVG appears, so there's no JS race and no flash. */
.hero-reveal .hero-video {
  background: #000000;
}
/* Safety net: once scrolled past the hero (body.past-hero), hide the video
   entirely so it can never bleed through any seam below. Restored on scroll
   back to top. */
body.past-hero .hero-reveal .hero-video { visibility: hidden; }

.hero-mask-cover {
  position: absolute; inset: 0;
  z-index: 4;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  background: transparent;
  shape-rendering: geometricPrecision;
  /* Grow is driven by JS animating the SVG viewBox (vector-perfect at any
     zoom — no raster). CSS only handles the fade-out + final cut. */
  animation:
    hero-cover-fadeout 0.5s   ease   10s   both,
    hero-cover-cut     0.001s linear 10.5s both;
}
.hero-mask-cover * { shape-rendering: geometricPrecision; }
/* Force the browser to re-rasterize on every paint frame instead of
   caching the SVG as a GPU texture (which is what gets pixelated when
   scaled). transform: translateZ(0) WITHOUT will-change keeps the
   element flat in the document layer. */
.hero-mask-cover { transform-origin: 50% 50%; backface-visibility: hidden; }
@keyframes hero-cover-fadeout {
  to { opacity: 0; }
}
/* Cover grow: a single smooth scale from 1 to viewport-engulfing, eased
   with a standard ease-in-out cubic. One keyframe pair + one timing
   function — no intermediate "settle" points = no judder. */
@keyframes hero-cover-grow-LEGACY-UNUSED {
  /* Kept as a no-op so prior selectors using this name don't break;
     actual grow animation is JS-driven viewBox shrinkage now. */
  from { transform: scale(1); }
  to   { transform: scale(800); }
}
/* Hard cut, no fade — the cover disappears in a single frame once the letters
   have engulfed the viewport. */
@keyframes hero-cover-cut {
  to { visibility: hidden; }
}

.hero-mask-hint {
  position: absolute; left: 50%; bottom: 9vh;
  transform: translateX(-50%);
  z-index: 7;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--cream);
  pointer-events: none;
  animation: hero-hint-fade 0.6s ease 0.75s both;
}
@keyframes hero-hint-fade { to { opacity: 0; } }
.hero-mask-hint .hmh-arrow {
  font-size: 14px; letter-spacing: 0;
  animation: hero-mask-hint-bob 2.4s ease-in-out infinite;
}
@keyframes hero-mask-hint-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

.hero-reveal .hero .hero-inner { z-index: 5; }

/* Hero logo (PNG lockup) animation sequence (fires after the cover hard-cut).

   Timeline, relative to .hero-armed (added at 12s, the moment of cover cut):
     0.00s   center logo letter-by-letter mask sweep begins (1.4s)
     1.40s   hold full center logo
     3.40s   center logo fades out (0.6s)
     4.00s   wait
     7.00s   bottom-left logo letter-by-letter sweep begins (1.4s)
     8.40s   meta + scroll cue fade in

   The letter-by-letter is a CSS @property animated gradient mask that
   sweeps across the lockup. Each letter fades up as the transition
   zone passes over it. */
@property --hff-reveal {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

.hero-reveal .hero .hero-inner {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 40px 65px 36px 65px;
  align-items: end;
  max-width: none;
  width: 100%;
}

/* Override base hero spacing inside the reveal: tighten gap between
   logo, dividing line, and text. */
.hero-reveal .hero .hero-meta {
  align-items: baseline;
  /* The meta row is the bottom row of a 1fr/auto grid. Shrinking its
     vertical breathing room expands the logo row above and lowers the
     logo while simultaneously bringing the thin line closer up to it. */
  margin-top: 18px;             /* was 40px — line moves up */
  padding-top: 12px;
  border-top: none;             /* drawn by ::before below so we can animate */
  position: relative;
}
/* The thin top line on the meta row — animated from left to right
   AFTER the logo letter sweep finishes. */
.hero-reveal .hero .hero-meta::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: rgba(255,255,255,0.28);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.55, 0, 0.3, 1);
}
.hero-reveal .hero.hero-armed .hero-meta::before {
  transform: scaleX(1);
  transition-delay: 1.2s;       /* draw in shortly after arming */
}

/* Base logo styling shared by both instances */
.hero-logo {
  display: block;
  height: auto;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  --hff-reveal: 0%;
  -webkit-mask-image: linear-gradient(90deg,
    #fff 0%,
    #fff calc(var(--hff-reveal) - 6%),
    transparent var(--hff-reveal));
          mask-image: linear-gradient(90deg,
    #fff 0%,
    #fff calc(var(--hff-reveal) - 6%),
    transparent var(--hff-reveal));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

@keyframes hff-letters-in {
  0%   { opacity: 1; --hff-reveal: 0%; }
  100% { opacity: 1; --hff-reveal: 106%; }
}

/* ---- Corner logo: letter reveal driven by the flying plane ----
   Mask gradient flipped to `to left` so the wordmark reveals RIGHT to
   LEFT (FOODS first, HIGH last), in sync with the plane traversing
   the wordmark area from right to left. */
.hero-logo--corner {
  grid-row: 1;
  align-self: end;
  justify-self: start;
  width: 100%;
  max-width: 100%;
  --hff-reveal: 0%;
  -webkit-mask-image: linear-gradient(to left,
    #fff 0%,
    #fff calc(var(--hff-reveal) - 6%),
    transparent var(--hff-reveal));
          mask-image: linear-gradient(to left,
    #fff 0%,
    #fff calc(var(--hff-reveal) - 6%),
    transparent var(--hff-reveal));
}
.hero.hero-armed .hero-logo--corner {
  /* JS drives --hff-reveal each frame from the plane's actual screen X,
     so the reveal front always trails directly behind the plane. The
     opacity flip is what makes the masked image visible at all — without
     this the wordmark would stay at the base opacity:0. */
  opacity: 1;
  transition: opacity 0.45s ease;
}
/* When the Vestaboard scramble takes over, the PNG wordmark fades away
   and yields its visual position to the board. */
/* ---- Staccato BOOM BOOM BOOM word sequence ----
   Three words flash one after another in the center of the video,
   between the cover cut and the plane/wordmark reveal. Each word
   fades in fast, holds 1.5s, fades out. Total ~4.6s. */
.hero-staccato {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
  width: 84.7%;              /* 10% bigger than previous 77% */
  max-width: 1331px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-staccato__word {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
/* HFF wordmark sits 25% larger than the other staccato words. */
.hero-staccato__word--hff {
  width: 125%;
}
body.staccato-on .hero-staccato__word--local      { animation: hff-staccato      1.25s cubic-bezier(0.16, 1, 0.3, 1) both 0s; }
body.staccato-on .hero-staccato__word--iconic     { animation: hff-staccato      1.25s cubic-bezier(0.16, 1, 0.3, 1) both 1.25s; }
body.staccato-on .hero-staccato__word--chefdriven { animation: hff-staccato      1.25s cubic-bezier(0.16, 1, 0.3, 1) both 2.5s; }
body.staccato-on .hero-staccato__word--hff        { animation: hff-staccato-hff  5s    cubic-bezier(0.16, 1, 0.3, 1) both 3.75s; }
@keyframes hff-staccato {
  /* Very dramatic snap-in: tiny start, large overshoot, snappy settle. */
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  4%   { opacity: 1; transform: translate(-50%, -50%) scale(1.14); }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(0.98); }
  14%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  88%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.04); }
}
/* HFF wordmark: same punchy snap-in, then a smooth ~3.2s linear fade-out
   that runs all the way to zero opacity. */
@keyframes hff-staccato-hff {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.78); }
  2.4% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  5.4% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  36%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-staccato { display: none; }
}

/* ---- Slot-machine ticker overlay ----
   Sits absolutely positioned inside .hero-inner, sized + placed by JS
   to exactly mirror the corner logo's bounding rect. All ticker frames
   are the same 2354×176 aspect as the wordmark, so each cell shows a
   single full image at the wordmark's exact size. */
.hero-ticker {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;        /* JS-driven */
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 3;
}
body.ticker-on .hero-ticker { opacity: 1; transition: none; }
body.ticker-on .hero-logo--corner {
  /* Instant hide — no transition — so the ticker's first frame fully
     replaces the wordmark with zero overlap. */
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
}
.hero-ticker__track {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2300%;              /* 23 stacked frames */
  will-change: transform;
}
.hero-ticker__track img {
  display: block;
  width: 100%;
  height: calc(100% / 23);
}
/* Slot-machine sequence (total 7.7s):
     0.0–0.5s   fast spin → land LOCAL          (frame 8)
     0.5–2.5s   hold LOCAL
     2.5–2.9s   spin → land ICONIC              (frame 13)
     2.9–4.9s   hold ICONIC
     4.9–5.3s   spin → land CHEF-DRIVEN         (frame 17)
     5.3–7.3s   hold CHEF-DRIVEN
     7.3–7.7s   spin → land HFF wordmark        (frame 22)
*/
body.ticker-on .hero-ticker__track {
  animation: hero-ticker-roll 7.7s linear forwards;
}
@keyframes hero-ticker-roll {
  0%      { transform: translateY(0%);       animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
  6.49%   { transform: translateY(-34.78%);  animation-timing-function: steps(1, end); }
  32.47%  { transform: translateY(-34.78%);  animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
  37.66%  { transform: translateY(-56.52%);  animation-timing-function: steps(1, end); }
  63.64%  { transform: translateY(-56.52%);  animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
  68.83%  { transform: translateY(-73.91%);  animation-timing-function: steps(1, end); }
  94.81%  { transform: translateY(-73.91%);  animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
  100%    { transform: translateY(-95.65%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ticker { display: none; }
}

/* ---- "Local Favorites" cross-fade ----
   Positioned/sized by JS to occupy the exact same bounding rect as the
   HFF wordmark, so when one fades out the other fades in at the same
   visual position and visual height. */
.hero-logo--local {
  position: fixed !important;
  top: 0; left: 0;
  height: auto;                 /* sized by JS at runtime */
  width: auto;
  z-index: 5;                   /* below the plane (z=6) */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease;
  /* defeat any inherited mask from .hero-logo (corner uses one) */
  -webkit-mask-image: none !important;
          mask-image: none !important;
  clip-path: none !important;
}
.hero.local-on .hero-logo--local { opacity: 1; }
.hero.local-on .hero-logo--corner { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero-logo--local { display: none; }
}

/* Drop the older Vestaboard styles (now unused). */
.hero-board { display: none !important; }
.hero-board .hb-cell { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-board { display: none; }
}

/* ---- Flying plane animation ----
   The path is built in JS at runtime (so it adapts to any viewport size
   and lines up exactly with the nav icon's measured position). The path
   shape: straight horizontal cruise across the wordmark band, then one
   smooth quarter-arc that curls up and lands on the icon.
   `--plane-path` is the SVG path string; `--plane-end-rot` is the angle
   the plane ends pointing at (set to 0deg so it lands perfectly upright). */
.hero-plane {
  position: fixed;
  width: 100px;
  height: 100px;
  object-fit: contain;
  top: 0; left: 0;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  offset-path: var(--plane-path, path("M -200 -200 L -200 -200"));
  offset-rotate: auto 90deg;
  offset-distance: 0%;
}
.hero.hero-armed .hero-plane {
  /* 7s flight (faster), 1s hold at icon, 2.5s slow fade (fade starts at 8s). */
  animation:
    hero-plane-fly  7s   cubic-bezier(0.33, 0, 0.25, 1) 0s    forwards,
    hero-plane-fade 2.5s ease-out                       8s    forwards;
}
@keyframes hero-plane-fly {
  0%   { opacity: 0; offset-distance: 0%;   }
  3%   { opacity: 1; offset-distance: 1%;   }
  /* Land — distance hits 100%, then offset-rotate gets neutralized so
     the plane sits perfectly upright in the icon. */
  92%  { opacity: 1; offset-distance: 100%; offset-rotate: auto 90deg; }
  100% { opacity: 1; offset-distance: 100%; offset-rotate: 0deg; }
}
@keyframes hero-plane-fade {
  to { opacity: 0; }
}

/* Reduced motion: skip the flight, just leave the plane invisible. */
@media (prefers-reduced-motion: reduce) {
  .hero-plane { display: none; }
}

/* Reduced motion: skip the sweep, just show the logo. */
@media (prefers-reduced-motion: reduce) {
  .hero-logo {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero-logo--corner { opacity: 1; animation: none; }
}

/* Meta text reveals left-to-right with the same mask sweep used by the
   logo, fired AFTER the line draws in. Each meta column gets its own
   sweep; both use the same --hff-reveal property the logo uses. */
.hero-reveal .hero .hero-meta .left,
.hero-reveal .hero .hero-meta .right {
  --hff-reveal: 0%;
  -webkit-mask-image: linear-gradient(90deg,
    #fff 0%, #fff calc(var(--hff-reveal) - 6%), transparent var(--hff-reveal));
          mask-image: linear-gradient(90deg,
    #fff 0%, #fff calc(var(--hff-reveal) - 6%), transparent var(--hff-reveal));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
/* Left lede: phrase-by-phrase staccato fade-in in all-caps Jost. The four
   short sentences pop one after another (BOOM. BOOM. BOOM. BOOM.) starting
   AFTER the thin line above has drawn in. */
.hero-reveal .hero .hero-meta .left {
  -webkit-mask-image: none;
          mask-image: none;
  /* Override the Caslon serif from .hero-lede with editorial-style caps. */
  font-family: 'Jost';
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(11px, 0.92vw, 14px);
}
.hero-reveal .hero .hero-meta .left .hl-phrase {
  display: inline;
  opacity: 0;
  transition: opacity 0.35s ease-out;
}
.hero-reveal .hero .hero-meta .left .hl-phrase + .hl-phrase { margin-left: 0.55em; }
.hero-reveal .hero.hero-armed .hero-meta .left .hl-phrase { opacity: 1; }
.hero-reveal .hero.hero-armed .hero-meta .left .hl-phrase:nth-child(1) { transition-delay: 10.7s; }
.hero-reveal .hero.hero-armed .hero-meta .left .hl-phrase:nth-child(2) { transition-delay: 11.1s; }
.hero-reveal .hero.hero-armed .hero-meta .left .hl-phrase:nth-child(3) { transition-delay: 11.5s; }
.hero-reveal .hero.hero-armed .hero-meta .left .hl-phrase:nth-child(4) { transition-delay: 11.9s; }
.hero-reveal .hero.hero-armed .hero-meta .left {
  animation: none;             /* override the older mask-sweep keyframes */
}
/* The hl-phrase em ("Undiluted.") inherits the caps + Jost from its parent;
   keep it the same weight so the staccato beat doesn't bold-pop on the last. */
.hero-reveal .hero .hero-meta .left .hl-phrase em {
  font-style: normal;
  font-weight: 500;
}
.hero-reveal .hero.hero-armed .hero-meta .right {
  animation: hff-letters-in 1.1s linear 1.5s forwards;
}

/* Meta opacity transitions are no longer needed since we animate via mask.
   Keep the row visible from the start so the mask animation is what reveals it. */
/* Scroll cue: hidden entirely until the plane has fully landed AND the
   wordmark / thin line / meta text have all fully revealed. Cue fades in
   at 9.5s after .hero-armed — well after plane fade (ends ~9.2s) and meta
   text (ends ~4.65s). The high-specificity opacity:0 override defeats the
   generic `.hero.hero-armed .scroll-cue { opacity: 0.7 }` rule earlier in
   the stylesheet that would otherwise flash the cue on instantly. */
.hero-reveal .scroll-cue { display: none !important; opacity: 0 !important; }
.hero-reveal .hero.hero-armed .scroll-cue {
  display: block !important;
  opacity: 0 !important;
  animation: hero-cue-in 0.6s ease 14.5s forwards;
}
.hero-reveal .hero.hero-armed .scroll-cue.cue-on {
  opacity: 0.7 !important;
}
@keyframes hero-cue-in {
  from { opacity: 0; }
  to   { opacity: 0.7; }
}

/* Phones: tighter padding, scale corner logo */
@media (max-width: 767px) {
  .hero-reveal .hero .hero-inner { padding: 100px 20px 32px; }
  .hero-logo--corner { width: 100%; }
  /* Mask SVG is 16:9. On portrait viewports, stretching to 100%×100%
     squishes the letter cutouts vertically. Switch to `contain` so the
     mask keeps its proportions (with solid black above/below filling
     the rest of the viewport via background-color). The scale-up
     animation still grows the whole element, so the wordmark expands
     smoothly out of frame. */
  .hero-mask-cover {
    background-color: transparent;
  }
}
/* Very small portrait phones — boost the start scale a touch so the
   wordmark is legible at the beginning of the reveal. */
@media (max-width: 767px) {
  .hero-mask-cover { /* SVG already responsive via preserveAspectRatio="none" */ }
}

@media (prefers-reduced-motion: reduce) {
  .hero-reveal { height: 100vh; visibility: visible; animation: none; }
  .hero-mask-cover,
  .hero-mask-hint { display: none; }
}

/* Phones: same auto runway — animation length is the same, just smaller text */
@media (max-width: 767px) {
  .hero-reveal { height: 100vh; }
}

/* ============================================================
   HBA EDITORIAL THEME — applied to all post-hero content
   (cream bg + teal ink + light Hanken Grotesk headings).
   The hero (.hero-reveal) is intentionally excluded so it
   stays dark and cinematic.
   ============================================================ */
.home-statement,
.brands-carousel,
.reel,
.breath,
.ft-hero,
.section-rule-svg {
  /* Remap the color tokens within scope so every var()-based color
     flips automatically from light-on-dark to dark-on-cream. */
  --bg: #FBFBF9;
  --ink: #3a3a42;
  --cream: #3a3a42;
  --ink-dim: rgba(58,58,66,0.6);
  --cream-ink: #3a3a42;
  --cream-ink-dim: rgba(58,58,66,0.6);
  --line: rgba(58,58,66,0.14);
  --line-strong: rgba(58,58,66,0.26);
  --serif: var(--font-heading);
  --sans: var(--font-body);
  background: #FBFBF9 !important;
  color: #3a3a42;
}

/* (lede keeps its serif font — no override) */
.home-statement .hs-head,
.home-statement .hs-head .l1,
.home-statement .hs-head .l2,
.home-statement .hs-head .l3,
.home-statement .hs-head em {
  font-family: 'Jost' !important;
  font-weight: 600 !important;
}

/* Headlines: light-weight Hanken Grotesk, near-black teal ink */
.home-statement h1, .home-statement h2, .home-statement h3, .home-statement h4,
.brands-carousel h1, .brands-carousel h2, .brands-carousel h3, .brands-carousel h4,
.reel h1, .reel h2, .reel h3, .reel h4,
.breath h1, .breath h2, .breath h3, .breath h4,
.ft-hero h1, .ft-hero h2, .ft-hero h3, .ft-hero h4 {
  font-family: var(--font-heading);
  font-weight: 300;
  color: #3a3a42;
  letter-spacing: -0.01em;
}
.home-statement em, .brands-carousel em, .reel em, .breath em, .ft-hero em {
  color: #3a3a42;
}
/* Headline sub-lines carry hardcoded light-cream colors — force teal so
   they're visible on the cream background. */
.home-statement .hs-head .l1,
.home-statement .hs-head .l2,
.home-statement .hs-head .l3,
.home-statement .hs-head em { color: #3a3a42 !important; }

/* 3rd headline line ("at your gate.") — Reckless Medium, salmon accent. */
.home-statement .hs-head .l3 {
  font-family: 'Jost' !important;
  font-weight: 600 !important;
  color: #d97a4f !important;
}

/* Body copy: Inter, teal ink */
.home-statement p, .brands-carousel p, .reel p, .breath p, .ft-hero p,
.home-statement .body, .home-statement .body-lg {
  font-family: var(--font-body);
  color: #3a3a42;
}
/* Lede keeps EB Garamond (set above) — only its color comes from the theme. */
.home-statement .hs-lede { color: #3a3a42; }
.home-statement .hs-lede .dim { color: rgba(58,58,66,0.6); }

/* Word-by-word scroll color reveal on the lede paragraph */
.home-statement .hs-lede .hs-word {
  display: inline-block;
  white-space: nowrap;
}
.home-statement .hs-lede .hs-char {
  color: rgba(58,58,66,0.16);
  transition: color 0.4s ease;
}
/* "WHO WE ARE" eyebrow: fills in letter-by-letter over blank on scroll. */
.home-statement .hs-intro .num .hs-char { color: transparent; transition: color 0.4s ease; }
.home-statement .hs-intro .num .hs-char.lit { color: var(--ink-dim); }
.home-statement .hs-lede .hs-char.lit { color: #3a3a42; }

/* Eyebrows / mono labels: teal-dim, still Jost caps */
.home-statement .num,
.reel .reel-num,
.brands-carousel .num { color: rgba(58,58,66,0.55) !important; }

/* "Now Serving" + flipboard: KEEP the dark flap version even on the cream
   section (the dark board reads as an authentic split-flap display). */
.fb-label { color: rgba(58,58,66,0.6) !important; }
.fb-char {
  background: linear-gradient(180deg, #1a1815 0%, #1a1815 49%, #0d0c0b 50%, #161412 100%) !important;
  color: #f5f1ea !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6) !important;
}
.fb-code .fb-char { color: #d97a4f !important; }
.fb-count .fb-char { color: #f5f1ea !important; }

/* Stat ticker numbers + labels */
.home-statement .hs-tick .n { color: #ffffff; font-family: 'Bebas Neue'; font-weight: 400; transition: color 0.3s ease, transform 0.3s ease; }
.home-statement .hs-tick .n .u,
.home-statement .hs-tick .n em { color: var(--accent); transition: color 0.3s ease; }
.home-statement .hs-tick:hover .n { color: var(--accent); transform: scale(1.08); }
.home-statement .hs-tick:hover .n .u,
.home-statement .hs-tick:hover .n em { color: #ffffff; }
.home-statement .hs-tick .l { color: #ffffff; }

/* Footer wordmark + links flip to teal on cream */
.ft-hero, .ft-hero a, .ft-hero .ft-bigmark { color: #3a3a42; }
.ft-hero a:hover { color: var(--accent); }
.ft-hero h4 { color: #3a3a42; }

/* The divider rule between sections: cream backing, teal stroke */
.section-rule-svg .srule-path { stroke: rgba(58,58,66,0.4) !important; }

/* Awards reel cards on cream */
.reel .reel-stat .rs-n { color: #3a3a42; }
.reel .reel-stat .rs-l { color: rgba(58,58,66,0.6); }

/* "More about us" / see-link arrows */
.home-statement .hs-more-link,
.brands-carousel .bc2-see-link { color: #3a3a42; }
.home-statement .hs-more-link { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.home-statement .hs-more-link.is-filled { color: #ffffff; border-color: color-mix(in srgb, var(--accent) 55%, transparent); font-family: 'Jost'; font-weight: 600; }
.home-statement .hs-more-link { transition: color 0.25s ease, border-color 0.3s ease, background 0.3s ease; }
.home-statement .hs-more-link:hover,
.brands-carousel .bc2-see-link:hover { color: #ffffff; }
.home-statement .hs-more-link:hover { background: var(--accent); border-color: var(--accent); }
.home-statement .hs-more-link:hover::before { transform: scaleX(1); }

/* The sticky hero sits behind cream sections via z-index; make sure these
   content sections paint a solid cream so no video shows through. */
.home-statement, .brands-carousel, .reel, .breath, .ft-hero { position: relative; z-index: 1; }

/* ===== Brands carousel header: reuse .home-statement cream + dark-ink
   text colors exactly. Section background becomes cream; the carousel
   controls below overlay the slide images so they keep their own light
   colors. ===== */
.brands-carousel.home-statement { background: #000000 !important; }
/* Two-tone diagonal dark-gray panel — applied to the carousel viewport only,
   matching the reference (lighter charcoal upper-left, darker lower-right). */
.bss-viewport {
  background: #000000;
}
/* The divider SVG between the ticker and the (now black) Brands section was
   painting the shared cream background, creating a cream gap. Make it black. */
.section-rule-svg { background: #000000 !important; }

/* ===== Brands section on BLACK: flip all ink to light ===== */
.brands-carousel.home-statement h1,
.brands-carousel.home-statement h2,
.brands-carousel.home-statement h3,
.brands-carousel.home-statement h4,
.brands-carousel.home-statement em,
.brands-carousel.home-statement p,
.brands-carousel.home-statement .hs-lede,
.brands-carousel.home-statement .bss-title,
.brands-carousel.home-statement .bss-cta { color: #f5f1ea; }
.brands-carousel.home-statement .hs-lede .hs-char { color: rgba(245,241,234,0.18); }
.brands-carousel.home-statement .hs-lede .hs-char.lit { color: #f5f1ea; }
/* Brands headline first line: white at 100% (dark section). */
.brands-carousel.home-statement .hs-head .hh-1 { color: #ffffff; }
.brands-carousel.home-statement .hs-head .hh-1 .hs-char.lit { color: #ffffff; }
.brands-carousel.home-statement .num { color: rgba(245,241,234,0.55) !important; }
/* "THE COLLECTION" eyebrow: white @20% → salmon @100% letter-by-letter. */
.brands-carousel.home-statement .hs-intro .num .hs-char { color: rgba(255,255,255,0.2) !important; }
.brands-carousel.home-statement .hs-intro .num .hs-char.lit { color: var(--accent) !important; }
.brands-carousel.home-statement .bss-meta { color: rgba(245,241,234,0.6); }
.brands-carousel.home-statement .bss-num { color: rgba(245,241,234,0.20); }
/* VIEW ALL OUR BRANDS button: white outline + white text; scroll fills white
   with #3a3a42 text; hover = full salmon fill, white text. */
.brands-carousel.home-statement .hs-more-link {
  color: #ffffff;
  border-color: #ffffff;
}
.brands-carousel.home-statement .hs-more-link::before { background: #ffffff; }
/* The decorative salmon corner-glow (.home-statement::before) reads as an
   unwanted light haze on the black brands background — remove it here. */
.brands-carousel.home-statement::before { display: none; }
.brands-carousel.home-statement .hs-more-link.is-filled {
  color: #3a3a42;
  border-color: #ffffff;
}
.brands-carousel.home-statement .hs-more-link:hover {
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
}
.brands-carousel.home-statement .hs-more-link:hover::before { background: var(--accent); }
/* Italicize "Top Chef" (27th & 28th word spans) in the brands lede — home only. */
.brands-carousel:not(#awards) .hs-lede .hs-word:nth-child(27),
.brands-carousel:not(#awards) .hs-lede .hs-word:nth-child(28) { font-style: italic; }
/* Awards lede: italicize "Airport Experience (AX) News" (words 15–18). */
#awards .hs-lede .hs-word:nth-child(15),
#awards .hs-lede .hs-word:nth-child(16),
#awards .hs-lede .hs-word:nth-child(17),
#awards .hs-lede .hs-word:nth-child(18) { font-style: italic; }

/* ===== Hero heading — word-by-word fade-up reveal (replaces all prior
   hero overlay animations: cover, staccato, plane, wordmark, ticker) ===== */
.hero .hero-heading {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2;
  margin: 0 !important;
  max-width: 90vw;
  text-align: center !important;
  white-space: normal !important;
  color: #fff;
  font-family: 'Bebas Neue' !important;
  font-weight: 400 !important;
  font-style: normal;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  letter-spacing: 0.04em !important;
  font-size: clamp(99px, 13.2vw, 231px) !important;
  text-shadow: 0 2px 44px rgba(0,0,0,0.32);
  pointer-events: none;
}
.hero .hero-heading .hl {
  display: block;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.hero .hero-heading .hl-2 { padding-left: 0; }
.hero .hero-heading .w {
  display: inline-block;
  opacity: 0;
  will-change: opacity;
}
/* Three lines cross-fade in sequence; CHEF-DRIVEN fades out before the
   HFF wordmark fades in at 9.6s (no overlap). */
.hero .hero-heading .hl-1 .w { animation: heroWordCycle 2.6s ease-in-out 1.5s both; }
.hero .hero-heading .hl-2 .w { animation: heroWordCycle 2.6s ease-in-out 4.1s both; }
.hero .hero-heading .hl-3 .w { animation: heroWordCycle 2.6s ease-in-out 6.7s both; }
@keyframes heroHeadingOut {
  to { opacity: 0; }
}
@keyframes heroWordIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes heroWordCycle {
  0%   { opacity: 0; }
  38%  { opacity: 1; }
  62%  { opacity: 1; }
  100% { opacity: 0; }
}
/* HFF wordmark: hidden until the heading clears (~11.3s), then fades in
   centered and holds static. */
.hero .hero-wordmark-final {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(59.5vw, 1037px);
  height: auto;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  /* Default (fade-OUT on scroll) is quicker so the mark clears before the
     next section scrolls over it. */
  transition: opacity 1s ease;
}
/* Fade-IN (entrance / scroll back to top) is slow and gentle. */
.hero .hero-wordmark-final.wm-in { opacity: 1; transition: opacity 4s ease; }
@media (max-width: 767px) {
  .hero .hero-heading { font-size: clamp(46px, 13vw, 84px) !important; left: 50% !important; right: auto !important; max-width: 92vw; }
  .hero .hero-heading .hl-2 { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-heading .w { animation: none; opacity: 1; transform: none; }
}

/* Nav appears immediately on the new hero (no plane/arm chain to trigger
   body.icon-on). Higher specificity than the base `.nav { opacity: 0 }`. */
body .nav { opacity: 1; }
/* Show the white icon immediately too (the old plane-landing chain that set
   body.icon-on no longer runs on the new hero). */
body .nav .mark-icon--white { opacity: 1; }

/* Scroll cue: left-aligned under the heading, fades in after the words land. */
.hero-reveal .scroll-cue {
  display: block !important;
  left: clamp(40px, 6vw, 110px);
  transform: none;
  opacity: 0 !important;
  animation: heroCueIn 0.8s ease 2.7s forwards;
}
@keyframes heroCueIn { to { opacity: 0.6 !important; } }
@media (max-width: 767px) {
  .hero-reveal .scroll-cue { left: 24px; }
}

/* ============================================================
   MOBILE RESPONSIVE FIXES (≤ 760px) — additive, desktop untouched
   ============================================================ */
@media (max-width: 767px) {
  /* --- Hamburger nav --- */
  .nav { padding: 20px; align-items: flex-start; }   /* center wordmark + burger (sticky) */
  /* Hero state: icon pinned to the top so its top + left padding read equal. */
  body:not(.past-hero) .nav { align-items: flex-start; }
  /* Kill the inline baseline gap on the mark so the icon's top edge sits at
     the nav's 20px padding line — exactly level with the hamburger. */
  .nav .mark { line-height: 0; display: inline-flex; align-items: flex-start; }
  body:not(.past-hero) .nav .mark-icon-wrap { margin-top: 0; }
  .nav-burger { display: block; }
  .nav-burger span { background: #fff; }   /* always white over hero/sticky */
  /* Larger static wordmark over the hero video on mobile. */
  .hero .hero-wordmark-final { width: min(82vw, 520px); }
  .nav ul {
    position: fixed; inset: 0;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 32px;
    background: #000000;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 55;
  }
  .nav.nav-open ul { transform: translateX(0); }
  .nav ul li::before { content: none; }   /* drop the desktop bold-reserve hack */
  .nav ul a { font-size: 20px; }
  /* Burger morphs to an X when open */
  .nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Nav mark: larger icon over hero; sticky wordmark ~80% of desktop.
     Force height (a desktop rule set it to 100px, breaking alignment) and
     zero margins so flex-start + 20px nav padding puts the icon top at 20px,
     level with the hamburger. */
  .nav .mark-icon-wrap { width: 58px !important; height: 58px !important; margin: 2px 0 0 8px !important; }
  .nav .mark-icon { width: 58px !important; height: 58px !important; margin: 0 !important; }
  body.past-hero .nav .mark-wordmark { height: 18px; }

  /* When the menu is open, keep the icon visible + in place above the
     fullscreen overlay (which is z-index 55). */
  .nav .mark { position: relative; z-index: 56; }
  /* Over the dark overlay always show the icon (not the sticky wordmark). */
  .nav.nav-open .mark-icon-wrap { display: inline-block !important; }
  .nav.nav-open .mark-wordmark { display: none !important; }

  /* Hero heading: keep each line (incl. "chef-driven") on one line. */
  .hero .hero-heading .hl { white-space: nowrap; }

  /* --- Hero video = exactly the screen height (no overflow) --- */
  .hero-reveal { height: 100svh; }
  .hero-reveal .hero, .hero-reveal .hero-video { height: 100svh; }
  .hero-reveal .hero-video { object-fit: cover; }

  /* --- Statement section: reorder to headline → intro → photos --- */
  .home-statement .hs-grid { display: flex; flex-direction: column; row-gap: 0; }
  .home-statement .hs-col { display: contents; }
  .home-statement .hs-head      { order: 1; margin-bottom: 28px; }
  .home-statement .hs-intro     { order: 2; margin-bottom: 40px; }
  .home-statement .hs-intro .hs-more { margin-bottom: 0; }
  .home-statement .hs-col--left  .hs-photo-fig { order: 3; margin: 28px 0 28px !important; }
  .home-statement .hs-col--right .hs-photo-fig { order: 4; margin: 0 !important; }
  /* Kill the desktop margin-top:auto that pushed the left video to the
     bottom of the column (creating a huge gap below the button). */
  .home-statement .hs-col--left .hs-photo--tall { margin-top: 0 !important; }
  .home-statement .hs-photo-fig--tall { margin-top: 0 !important; }
  /* Left video matches the wide photo exactly: full width, same 3/2 aspect.
     The crop wrapper carries the aspect on desktop, so it must be overridden
     too — otherwise the 1/2.04 portrait ratio leaves a tall empty gap. */
  .home-statement .hs-video-crop--tall,
  .home-statement .hs-photo--tall,
  .home-statement .hs-photo-video.hs-photo--tall {
    width: 100% !important; max-width: 100% !important;
    height: auto !important; aspect-ratio: 3 / 2 !important;
  }
  /* Both figures: identical full-width frame, even vertical rhythm. */
  .home-statement .hs-col--left .hs-photo-fig,
  .home-statement .hs-col--right .hs-photo-fig { width: 100% !important; }

  /* --- Local Roots: full-screen video; caption + button centered --- */
  .home-statement .hs-fullvideo {
    aspect-ratio: auto !important; height: 100svh !important;
    /* Full-bleed without the 100vw-vs-scrollbar offset: width:auto + equal
       negative margins (relative to the content box, which excludes the
       scrollbar) bleeds symmetrically so the centered caption is truly
       centered to the VISIBLE viewport. */
    width: auto !important;
    margin-left: calc(-1 * clamp(40px, 10vw, 145px)) !important;
    margin-right: calc(-1 * clamp(40px, 10vw, 145px)) !important;
  }
  /* Bars are 7.3% top / 7.4% bottom of the 16:9 source. Make the video
     element 16% taller than the band and center it so ONLY the bars spill
     past the band edges — no extra footage lost (object-fit cover handles
     the horizontal crop normally). */
  .home-statement .hs-fullvideo { overflow: hidden !important; position: relative !important; }
  .home-statement .hs-fullvideo .hs-fullvideo-el {
    position: absolute !important; left: 0 !important; top: -11% !important;
    width: 100% !important; height: 122% !important; object-fit: cover !important;
    transform: none !important;
  }
  /* Caption: dead-center horizontally + symmetric padding. */
  .home-statement .hs-fullvideo-cap {
    left: 0 !important; right: 0 !important; padding: 0 24px !important;
    text-align: center !important; align-items: center !important;
  }
  .home-statement .hs-fullvideo-cap .fv-body { font-size: 17px; margin-left: auto; margin-right: auto; }
  .home-statement .hs-fullvideo-cap .fv-cta-wrap { margin-left: auto; margin-right: auto; }

  /* --- Ticker: left-align cells, tighten gap to the divider below --- */
  .home-statement .hs-ticker { justify-content: stretch; padding-bottom: 8px; }
  .home-statement .hs-tick { padding-left: 0; padding-right: 24px; border-right-width: 2px; }
  .home-statement .hs-tick:nth-child(odd) { padding-left: 0; }
  /* Right-column cells nudged off the center grid line. */
  .home-statement .hs-tick:nth-child(2n) { padding-left: 28px; border-right: none; }

  /* --- Brands carousel: ghost number handled in brands-slideshow.css --- */
}

/* Locations airport blocks: code + city in Jost, brand names in EB Garamond. */
.airport-block .code,
.airport-block .code em,
.airport-block .code .l { font-family: 'Bebas Neue' !important; font-weight: 400 !important; }
.airport-block .code { letter-spacing: 0.01em !important; }
/* Airport code: outlined at rest, fills solid on hover/click of either the
   code or the city; city turns salmon on the same interaction. */
.airport-block .code,
.airport-block .code em,
.airport-block .code .l {
  color: transparent !important;
  -webkit-text-stroke: 0.8px rgba(255,255,255,0.85);
          text-stroke: 0.8px rgba(255,255,255,0.85);
  transition: color 0.35s ease, -webkit-text-stroke-color 0.35s ease;
}
.airport-block:hover .code,
.airport-block:hover .code em,
.airport-block:hover .code .l,
.airport-block.is-active .code,
.airport-block.is-active .code em,
.airport-block.is-active .code .l {
  color: #ffffff !important;
  -webkit-text-stroke-color: #ffffff;
}
.airport-block .city { transition: color 0.35s ease; }
.airport-block:hover .city,
.airport-block.is-active .city { color: var(--accent) !important; }
.airport-block .city { font-family: 'Jost' !important; }
.airport-block .units .unit .n { font-family: 'Jost' !important; }
.airport-block .units .unit .t { font-family: 'Jost' !important; }


/* ---- About story chapters: restore the centered letterbox band ---------- */
.about-chapters { position: absolute; inset: 0; pointer-events: none; }
.about-chapters .about-story-media {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 100% !important;
  height: 86vh !important;
  overflow: hidden;
  opacity: 1 !important;
  clip-path: inset(var(--vid-top, 100%) 0 var(--vid-bot, 0%) 0);
}
.about-chapters .about-story-media .about-story-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(0.4) contrast(1.05) saturate(0.92);
}
.about-chapters .about-para {
  position: absolute !important;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}

/* Chapter copy: every line block centred within the para. */
.about-chapters .about-para { text-align: center; }
.about-chapters .about-para .ap-line,
.about-chapters .about-para .ap-title,
.about-chapters .about-para .ap-year { margin-left: auto; margin-right: auto; }

/* Chapter copy: span the full stage and centre by text-align only — removes
   any left:50%/translateX offset (which was pulled off-centre by the
   scrollbar and by the inline transform on the para). */
.about-chapters .about-para {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  transform: translateY(-50%) !important;
  text-align: center !important;
  padding: 0 6vw;
}
.about-chapters .about-para .ap-year,
.about-chapters .about-para .ap-title { display: block; width: 100%; }
.about-chapters .about-para .ap-line:not(.ap-title) {
  display: block;
  width: min(56ch, 90%);
  margin: 0 auto !important;
}

/* ---------- Story journey progress rail ---------- */
.about-rail {
  position: fixed;
  left: 0; right: 0;
  bottom: 68px;
  z-index: 8;
  padding: 0 clamp(24px, 4vw, 64px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
  font-family: 'Jost';
}
.about-rail.is-on { opacity: 1; }
.about-rail .rail-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase;
  color: rgba(217,122,79,0.72);
}
.about-rail .rail-label { display: flex; align-items: center; gap: 14px; }
.about-rail .rail-label i { display: none; }
.about-rail .rail-track { position: relative; height: 12px; }
.about-rail .rail-line {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(245,241,234,0.16);
}
.about-rail .rail-fill {
  position: absolute; left: 0; top: 50%;
  height: 1px; margin-top: 0;
  width: var(--rail-p, 0%);
  background: var(--accent);
  transition: none;
}
.about-rail .rail-dots { pointer-events: auto; }
.about-rail .rail-dot {
  position: absolute; top: 50%;
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  border: 1px solid rgba(245,241,234,0.45);
  background: #000;
  cursor: pointer;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.3s ease;
}
.about-rail .rail-dot::after {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
}
.about-rail .rail-dot:hover { transform: scale(1.5); border-color: var(--accent); }
.about-rail .rail-dot.is-done {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.18);
}
.about-rail .rail-dot.is-done:hover { transform: scale(1.5); }
.about-rail .rail-plane {
  position: absolute; top: 50%; left: var(--rail-p, 0%);
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  transform: rotate(90deg);
  transition: none;
}
.about-rail .rail-plane img {
  width: 100%; height: 100%; display: block; object-fit: contain;
  /* recolour the white icon PNG to the salmon accent */
  filter: brightness(0) saturate(100%) invert(58%) sepia(38%) saturate(900%) hue-rotate(330deg) brightness(94%) contrast(88%);
}
@media (max-width: 767px) { .about-rail .rail-head { font-size: 9px; } }

/* Keep the SCROLL DOWN / SKIP TO AWARDS cue clear of the journey rail. */
.about-scrollcue { bottom: 14px !important; }

/* Hide the dot the plane is currently sitting on so they don't stack. */
.about-rail .rail-dot.is-at { opacity: 0; }

/* Skip link tucked under the last dot on the timeline. */
.about-rail .rail-skip {
  position: absolute;
  right: 0;
  top: calc(50% + 34px);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245,241,234,0.7);
  text-decoration: none;
  pointer-events: auto;
  transition: color 0.3s ease;
}
.about-rail .rail-skip:hover { color: var(--accent); }
.about-scrollcue .asc-skip { display: none !important; }

/* ===================== HOME RESPONSIVENESS ===================== */
/* The giant Bebas headlines are sized in vw and previously ran under the
   eyebrow column. Cap them against the column they actually occupy and give
   the eyebrow real breathing room at every width. */

/* Local Roots caption over the video: never let the copy clip or squeeze. */
@media (max-width: 1279px) {
  .home-statement .hs-fullvideo-cap {
    display: block;
    align-content: end;
    padding: 0 clamp(24px, 6vw, 56px) clamp(32px, 6vh, 72px);
  }
  .home-statement .hs-fullvideo-cap .fv-inner { display: block; }
  .home-statement .hs-fullvideo-cap .fv-line { white-space: normal; }
  .home-statement .hs-fullvideo-cap .fv-eyebrow { margin-bottom: 14px; }
  .home-statement .hs-fullvideo-cap .fv-body { max-width: none; font-size: clamp(16px, 2.4vw, 22px); }
  .home-statement .hs-fullvideo-cap .fv-cta-wrap { margin-top: 22px; }
}

/* Phones: single column, headline scales with the viewport, nothing overlaps. */
@media (max-width: 767px) {
  .home-statement { padding: 84px 0 84px; }
  .home-statement .hs-inner { padding: 0 22px; }
  .home-statement .hs-head.hs-head--about,
  .home-statement .hs-head.hs-head--brands,
  .home-statement .hs-head--locations { font-size: clamp(62px, 21.5vw, 170px) !important; margin-bottom: 20px; }
  .home-statement .hs-intro { grid-template-columns: 1fr; row-gap: 12px; }
  .home-statement .hs-intro .num { padding-top: 0; margin-bottom: 4px; }
  .home-statement .hs-lede { font-size: clamp(16px, 4.4vw, 20px); }
  .home-statement .hs-fullvideo-cap { padding: 0 22px 28px; }
  .home-statement .hs-fullvideo-cap .fv-line { font-size: clamp(11px, 3vw, 14px); }
  .home-statement .hs-tick .n { font-size: clamp(44px, 15vw, 78px); }
  .brands-carousel.home-statement .bc-tag { font-size: clamp(28px, 9vw, 54px); }
}

/* Headline sizing must keep applying below the 981px stacking breakpoint. */
@media (min-width: 768px) and (max-width: 1279px) {
  .home-statement .hs-head.hs-head--about,
  .home-statement .hs-head.hs-head--brands { font-size: clamp(72px, 13vw, 190px) !important; }
  .home-statement .hs-head--locations { font-size: clamp(64px, 12vw, 165px) !important; }
  .home-statement .hs-grid { grid-template-columns: 1fr !important; }
  .home-statement .hs-intro { grid-template-columns: 1fr !important; row-gap: 18px; }
}

/* Phones: headline size must win over the tablet rule. */
@media (max-width: 767px) {
  .home-statement .hs-head.hs-head--about,
  .home-statement .hs-head.hs-head--brands,
  .home-statement .hs-head--locations { font-size: clamp(62px, 21.5vw, 170px) !important; }
}

/* ============ LANDSCAPE / TABLET: preserve the original 3-part layout ============
   headline (left)  |  eyebrow (narrow)  |  body + button (right)
   The only real bug was the headline being sized in vw independent of the
   column it lives in, so long words ran under the eyebrow. Size each word so
   it always fits its own track. */

/* Phone held landscape (short viewport, wide): same 3-part relationship,
   just tighter. */
@media (max-height: 560px) and (orientation: landscape) and (min-width: 768px) {
  .home-statement { padding: 56px 0 !important; }
  .home-statement .hs-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important;
    column-gap: 28px !important;
  }
  .home-statement .hs-col--left .hs-head { grid-column: 1 !important; grid-row: 1 !important; }
  .home-statement .hs-col--right .hs-intro { grid-column: 2 !important; grid-row: 1 !important; }
  .home-statement .hs-intro { grid-template-columns: minmax(max-content, 0.28fr) minmax(0, 1fr) !important; column-gap: 16px !important; }
  .home-statement .hs-head.hs-head--about,
  .home-statement .hs-head.hs-head--brands,
  .home-statement .hs-head--locations       { font-size: min(15.5vw, 175px) !important; }
  .home-statement .hs-lede { font-size: 15px; }
}

/* Local Roots caption keeps the same three-part relationship in landscape. */

/* iPad portrait: the tall photo's caption was surfacing between the headline
   and the eyebrow — keep captions with their figure. */
@media (max-width: 1279px) {
  .home-statement .hs-photo-cap { order: 99; }
  .home-statement .hs-col--left .hs-photo-fig .hs-photo-cap,
  .home-statement .hs-col--right .hs-photo-fig .hs-photo-cap { order: initial; }
}

/* The eyebrow is split into per-character spans by the reveal JS, so it can
   never wrap — force it to keep its own line and reserve its intrinsic width
   so it can't bleed into the body column. Buttons stay on one line too. */
.home-statement .hs-intro .num,
.home-statement .hs-fullvideo-cap .fv-eyebrow { white-space: nowrap; }
.home-statement .hs-more-link,
.home-statement .hs-fullvideo-cap .fv-cta { white-space: nowrap; }

/* Mobile: keep the Local Roots caption off the bottom edge and centre it. */
@media (max-width: 767px) {
  .home-statement .hs-fullvideo-cap { padding-bottom: clamp(44px, 9vh, 84px) !important; }
  .home-statement .hs-fullvideo-cap .fv-cta-wrap { justify-content: center !important; }
  .home-statement .hs-fullvideo-cap .fv-eyebrow,
  .home-statement .hs-fullvideo-cap .fv-body { text-align: center; }
}

/* Mobile: even gap between every stacked photo in the statement section.
   The stack is a flex column, so drive the spacing with row-gap and zero the
   per-figure margins (which were uneven: 48px top on some, 0 on others). */
@media (max-width: 767px) {
  .home-statement .hs-grid { row-gap: 38px !important; }
  .home-statement .hs-photo-fig,
  .home-statement .hs-col--left .hs-photo-fig,
  .home-statement .hs-col--right .hs-photo-fig,
  .home-statement .hs-col--right .hs-photo-fig--2,
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-col--left .hs-photo-fig,
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-col--right .hs-photo-fig--2 {
    margin: 0 !important;
  }
  .home-statement .hs-photo-cap { margin: 12px 0 0 !important; }
}

/* Mobile: keep the first (tall) statement photo portrait instead of letting
   it collapse to the shared landscape ratio. */
@media (max-width: 767px) {
  .home-statement .hs-col--left .hs-video-crop--tall,
  .home-statement .hs-col--left .hs-photo-fig .hs-video-crop--tall {
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    min-height: 0 !important;
  }
  .home-statement .hs-col--left .hs-photo-video.hs-photo--tall,
  .home-statement .hs-col--left .hs-photo--tall {
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover;
  }
}


/* ================= MOBILE PORTRAIT REFINEMENTS ================= */
@media (max-width: 767px) {
  /* 1 — thinner outline on the big Bebas headers */
  .home-statement .hs-head--brands .hh-1 .hs-char,
  .home-statement .hs-head--about .hh-1 .hs-char,
  .home-statement .hs-head--locations .hh-1 .hs-char,
  .loc-bigword .hh-1 .hs-char {
    -webkit-text-stroke-width: 0.45px !important;
  }
  /* 3 — headers a little bigger */
  .home-statement .hs-head.hs-head--about,
  .home-statement .hs-head.hs-head--brands,
  .home-statement .hs-head--locations { font-size: clamp(72px, 23.5vw, 190px) !important; }
  /* 2 — stat ticker: force the 2-col grid (the 4-col base rule was winning
     and overflowing the viewport to the left) and keep it inside the gutter */
  .home-statement .hs-ticker {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    max-width: 100% !important;
  }
  .home-statement .hs-tick {
    padding-left: 0 !important;
    min-width: 0 !important;
  }
  .home-statement .hs-tick:nth-child(2n) { padding-left: 22px !important; }
  .home-statement { overflow-x: clip; }
  /* 4 — hero fade-in words a bit larger */
  .hero .hero-heading { font-size: clamp(62px, 17.5vw, 116px) !important; }
}
/* 6 — footer nav's RIGHT column right-aligns with the wordmark's right edge:
   the nav grid is pushed to the end of the same box the wordmark occupies. */
@media (max-width: 767px) {
  .ft-v2 .ftv2-top { align-items: center; }
  .ft-v2 .ftv2-mark { width: auto; }
  .ft-v2 .ftv2-mark img { width: auto; max-width: 100%; height: clamp(28px, 7vw, 40px); object-fit: contain; }
  /* Centre the whole nav block, and centre the links within each column. */
  .ft-v2 .ftv2-right { width: 100%; display: flex; flex-direction: column; align-items: center; }
  /* Left column left-aligned, middle centred, right column right-aligned. */
  .ft-v2 .ftv2-links {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(2, auto) !important;
    width: 100%;
    justify-content: stretch !important;
    justify-items: stretch !important;
  }
  .ft-v2 .ftv2-links a { width: 100% !important; }
  .ft-v2 .ftv2-links a:nth-child(1),
  .ft-v2 .ftv2-links a:nth-child(2) { text-align: left !important; }
  .ft-v2 .ftv2-links a:nth-child(3),
  .ft-v2 .ftv2-links a:nth-child(4) { text-align: center !important; }
  .ft-v2 .ftv2-links a:nth-child(5),
  .ft-v2 .ftv2-links a:nth-child(6) { text-align: right !important; }
  /* Social icons centred on the nav's MIDDLE column (the bottom row becomes a
     matching 3-col grid so the icons land under column 2). */
  .ft-v2 .ftv2-bottom {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    align-items: center;
    width: 100%;
    justify-content: stretch !important;
  }
  .ft-v2 .ftv2-social {
    grid-column: 2 !important;
    justify-self: center !important;
  }
  .ft-v2 .ftv2-copy { grid-column: 3 !important; justify-self: end; }
}

/* ===== ONE SHARED MOBILE GUTTER (single source of truth) =====
   Every mobile section — statement copy, Local Roots caption, the carousel
   tagline, stage, photo, city/CTA and ticks — reads the SAME variable, so the
   left edges can never drift apart again. */
/* Always defined, so no viewport width can leave it unresolved. */
:root { --page-gutter: 40px; }
@media (max-width: 1279px) {
  /* Carousel ONLY — the page's own sections keep their original gutters. */
  .brands-carousel .wrap.bc-tagline,
  .bss-stage {
    padding-left: clamp(40px, 10vw, 145px) !important;
    padding-right: clamp(40px, 10vw, 145px) !important;
  }
  /* Children of the padded stage/text boxes align at 0 — the padding box
     already puts them on the gutter. */
  .bss-ticks, .bss-foot, .bss-title { left: 0 !important; }
}

/* ===== MOBILE MENU: keep the overlay anchored to the VIEWPORT =====
   body.past-hero .nav applies backdrop-filter, which turns .nav into the
   containing block for its position:fixed children — so the open menu was
   sized to the sticky bar instead of the screen. Drop those effects (and any
   transform/filter) while the menu is open so inset:0 means the viewport. */
@media (max-width: 767px) {
  body.past-hero .nav.nav-open,
  .nav.nav-open {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    filter: none !important;
    transform: none !important;
    background: transparent !important;
    border-bottom-color: transparent !important;
  }
  /* Belt and braces: the panel itself carries the opaque background. */
  .nav.nav-open ul {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #000000 !important;
    z-index: 55 !important;
  }
}

/* Freeze reveal motion while cap-top alignment measures geometry. */
html.align-measure .reveal,
html.align-measure .hs-head,
html.align-measure .hs-lede,
html.align-measure .num {
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* ==========================================================================
   RESPONSIVE OVERHAUL — one rule set per size band, portrait + landscape.
   Bands:  >1500 wide desktop | 1201-1500 laptop | 981-1200 small laptop
           641-980 tablet     | <=640 phone
   Principle: the headline / eyebrow / paragraph trio only stays side-by-side
   while it can breathe. The moment it can't, ALL of them stack, left-aligned.
   ========================================================================== */

/* ---- 1a. Headline sizing per band so it never crowds the eyebrow ---- */
@media (min-width: 1536px) {
  .home-statement .hs-head.hs-head--about,
  .home-statement .hs-head.hs-head--brands { font-size: clamp(120px, 13.5vw, 300px) !important; }
  .home-statement .hs-head--locations      { font-size: clamp(120px, 13.5vw, 300px) !important; }
}
@media (min-width: 1280px) and (max-width: 1535px) {
  .home-statement .hs-head.hs-head--about,
  .home-statement .hs-head.hs-head--brands,
  .home-statement .hs-head--locations { font-size: clamp(96px, 11vw, 210px) !important; }
  .home-statement .hs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important; }
}

/* ---- 1b. STACK POINT: below 1201px everything stacks, left aligned ---- */
@media (max-width: 1279px) {
  .home-statement .hs-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: clamp(28px, 4vh, 56px) !important;
  }
  .home-statement .hs-col { display: block !important; }
  .home-statement .hs-head,
  .home-statement .hs-intro,
  .home-statement .hs-lede,
  .home-statement .hs-more-wrap { text-align: left !important; }
  .home-statement .hs-intro {
    display: block !important;
    grid-template-columns: none !important;
  }
  .home-statement .hs-intro .num {
    padding-top: 0 !important;
    margin: 0 0 10px !important;
  }
  .home-statement .hs-lede { max-width: 58ch; }
  .home-statement .hs-head.hs-head--about,
  .home-statement .hs-head.hs-head--brands,
  .home-statement .hs-head--locations {
    font-size: clamp(72px, 15vw, 200px) !important;
    margin-bottom: clamp(10px, 2vh, 24px) !important;
  }

  /* Local Roots caption stacks on the SAME breakpoint, left aligned. */
  .home-statement .hs-fullvideo-cap {
    display: block !important;
    align-content: end !important;
    text-align: left !important;
    grid-template-columns: none !important;
    padding: 0 clamp(40px, 10vw, 145px) clamp(36px, 7vh, 88px) !important;
  }
  .home-statement .hs-fullvideo-cap .fv-inner {
    display: block !important;
    grid-template-columns: none !important;
  }
  .home-statement .hs-fullvideo-cap .fv-eyebrow { margin: 0 0 14px !important; }
  .home-statement .hs-fullvideo-cap .fv-line { white-space: normal !important; }
  .home-statement .hs-fullvideo-cap .fv-body {
    max-width: 52ch !important;
    margin: 0 !important;
    text-align: left !important;
  }
  .home-statement .hs-fullvideo-cap .fv-cta-wrap {
    justify-content: flex-start !important;
    margin-top: 22px !important;
  }
}

/* ---- 2. Stat ticker: same gutter as every other section, all widths ---- */
@media (max-width: 1279px) {
  .home-statement .hs-tick .n { font-size: clamp(52px, 9vw, 104px) !important; }
}

/* ---- 4/5/6. BRANDS PAGE ---- */
/* 4 — first brand is active (filled + image shown) on first paint. */
.bx-row.is-active .bx-name .bx-l {
  color: #ffffff !important;
  -webkit-text-stroke-color: #ffffff !important;
}
/* 5 — dim the other names whenever one row is engaged. */
.bx-name .bx-l { transition: color 0.28s ease, -webkit-text-stroke-color 0.28s ease, opacity 0.55s ease; }

/* 6 — landscape: always show at least 4.5 brand rows. */
@media (orientation: landscape) and (max-height: 700px) {
    .bx-row { padding: min(0.8vh, 12px) 0 !important; }
}

/* Narrow tier: no room beside the names, so the photo wipes UP from the
   bottom. Desktop (1101+) keeps the right-hand layout. */
@media (max-width: 1279px) {
  .bx-stage {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    height: 54vh !important;
    z-index: 0 !important;
  }

  /* soft top edge so the photo melts into the black instead of a hard line */
  .bx-stage::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none; z-index: 2;
    background: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 26%);
  }
  .brand-index { position: relative; z-index: 2; }
}


/* ---- 9. LOCATIONS PAGE: gutters match the LOCATIONS header; columns reflow ---- */
.locations-list .wrap,
.loc-bigword-band {
  padding-left: clamp(40px, 10vw, 145px) !important;
  padding-right: clamp(40px, 10vw, 145px) !important;
}
.loc-bigword-band { padding-top: clamp(14px, 1.8vw, 32px) !important; }
.locations-list .wrap { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
@media (max-width: 1279px) {
  .airport-block { grid-template-columns: 1fr !important; row-gap: clamp(18px, 3vh, 32px) !important; }
  .airport-block .units { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 767px) {
  .airport-block .units { grid-template-columns: 1fr !important; }
  .airport-block .code { font-size: clamp(56px, 18vw, 104px) !important; }
}

/* Locations list: gutters can never be tighter than the LOCATIONS header, and
   the airport code column collapses above the brand list on narrow screens. */
@media (max-width: 1279px) {
  .airport-block { gap: clamp(14px, 2.4vh, 28px) !important; }
}
@media (min-width: 1280px) and (max-width: 1535px) {
  .airport-block { grid-template-columns: 160px 1fr; gap: 40px; }
  .airport-block .units { grid-template-columns: 1fr 1fr; }
}

/* First-paint selection must not animate (it would stick at the wipe start). */
.bx-stage.bx-no-anim .bx-img { transition: none !important; }

/* Short landscape: the sticky BRANDS hero was eating 45% of the viewport, so
   fewer than 4.5 rows fit. Cap the hero against vh and tighten the row size. */
@media (orientation: landscape) and (max-height: 700px) {
  .home-statement.brands-blank {
    padding-top: clamp(28px, 6vh, 64px) !important;
    padding-bottom: 0 !important;
  }
  .brands-blank .hs-head.hs-head--brands {
    font-size: min(11vw, 15vh) !important;
    line-height: 0.82 !important;
    margin-bottom: 0 !important;
  }
    .bx-row { padding: min(0.5vh, 7px) 0 !important; }
  .brand-index { padding-top: 0 !important; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .home-statement.brands-blank { padding-top: clamp(20px, 4vh, 40px) !important; }
  .brands-blank .hs-head.hs-head--brands { font-size: min(10vw, 12vh) !important; }
}

/* Local Roots caption (wide): eyebrow gets its own max-content track with a
   real gap, so "NATIONAL REACH." can never run into the paragraph. */
@media (min-width: 1280px) {
  .home-statement .hs-fullvideo-cap .fv-inner {
    grid-template-columns: max-content minmax(0, 1fr) !important;
    column-gap: clamp(28px, 3vw, 64px) !important;
    align-items: start !important;
  }
  .home-statement .hs-fullvideo-cap .fv-eyebrow { white-space: nowrap; }
  .home-statement .hs-fullvideo-cap .fv-text { min-width: 0; }
  .home-statement .hs-fullvideo-cap .fv-body { max-width: 46ch; }
}

/* ---- 2. Headlines are the point — keep them BIG at every size. ---- */
@media (min-width: 1536px) {
  .home-statement .hs-head.hs-head--about,
  .home-statement .hs-head.hs-head--brands,
  .home-statement .hs-head--locations { font-size: clamp(180px, 17vw, 412px) !important; }
}
@media (min-width: 1280px) and (max-width: 1535px) {
  .home-statement .hs-head.hs-head--about,
  .home-statement .hs-head.hs-head--brands,
  .home-statement .hs-head--locations { font-size: clamp(140px, 15.5vw, 300px) !important; }
}
@media (max-width: 1279px) {
  .home-statement .hs-head.hs-head--about,
  .home-statement .hs-head.hs-head--brands,
  .home-statement .hs-head--locations { font-size: min(21vw, 280px) !important; }
}
@media (max-width: 767px) {
  .home-statement .hs-head.hs-head--about,
  .home-statement .hs-head.hs-head--brands,
  .home-statement .hs-head--locations { font-size: min(23vw, 200px) !important; }
}

/* ---- 3. Brands: names/code/dash only fade on the portrait wipe-up layout. ---- */
@media (max-width: 1279px) {
    .bx-list.has-active .bx-row:not(.is-active) .bx-name .bx-l,
    .bx-list.has-active .bx-row:not(.is-active) .bx-lead {
    opacity: 0.16;
    transition: opacity 0.55s ease;
  }
}
.bx-lead { transition: opacity 0.55s ease; }


/* ---- About story chapters: real DOM is .about-para > .ap-year/.ap-title/.ap-line ---- */
.about-para {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: min(920px, 92vw) !important;
  text-align: center !important;
}
.about-para .ap-title,
.about-para .ap-line,
.about-para .ap-year {
  white-space: normal !important;
  overflow-wrap: break-word;
  max-width: 100%;
}
.about-para .ap-title { text-wrap: balance; }
@media (max-width: 1279px) {
  .about-para { max-width: 92vw !important; padding: 0 clamp(14px, 4vw, 32px) !important; }
  .about-para .ap-title { font-size: clamp(20px, 6.2vw, 34px) !important; line-height: 1.1 !important; }
  .about-para .ap-year { font-size: clamp(30px, 9vw, 52px) !important; }
  .about-para .ap-line { font-size: clamp(13px, 3.6vw, 17px) !important; }
}
@media (max-width: 767px) {
  .about-para .ap-title { font-size: clamp(17px, 5.8vw, 27px) !important; }
  .about-rail { padding: 0 clamp(18px, 5vw, 32px) !important; }
}

/* ---- 3. Stat ticker: full-bleed band must re-pad with the SAME gutter token
   as .wrap, and must not use 100vw (scrollbar pushed it right). ---- */
.home-statement .hs-ticker {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* ---- Locations video band (below the airport list) ---- */
.loc-videoband {
  position: relative;
  z-index: 2;
  width: 100%;
  background: #000;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  max-height: 78vh;
}
.loc-videoband-el {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* true darkening rather than a grey veil */
}
.loc-videoband-tint {
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: rgba(0,0,0,0.22);
}
@media (max-width: 767px) {
  .loc-videoband { aspect-ratio: 4 / 5; max-height: none; }
}

/* ==================== CONTACT PAGE ==================== */
.ct-section {
  position: relative;
  z-index: 2;
  background: #000;
  padding: clamp(28px, 5vh, 72px) 0 clamp(80px, 12vh, 150px);
}
.ct-inner {
  padding-left: clamp(40px, 10vw, 145px);
  padding-right: clamp(40px, 10vw, 145px);
}

/* Tabs */
.ct-tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(245,241,234,0.14);
}
.ct-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 16px clamp(18px, 2vw, 32px);
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  cursor: pointer;
  font-family: 'Jost';
  font-weight: 400;
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,241,234,0.5);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.ct-tab:hover { color: #f5f1ea; }
.ct-tab.is-on {
  color: #f5f1ea;
  border-bottom-color: var(--accent);
  background: rgba(245,241,234,0.04);
}
.ct-tab .ct-tab-n { color: rgba(245,241,234,0.32); font-size: 0.86em; }
.ct-tab.is-on .ct-tab-n { color: var(--accent); }

/* Two-column body: form left, direct line right */
.ct-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  column-gap: clamp(48px, 7vw, 130px);
  padding-top: clamp(34px, 5vh, 64px);
}
.ct-form { display: grid; row-gap: clamp(22px, 3vh, 36px); }
.ct-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(24px, 3vw, 48px);
}
.ct-field { display: block; }
.ct-label {
  display: block;
  font-family: 'Jost';
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245,241,234,0.46);
  margin-bottom: 10px;
}
.ct-form input,
.ct-form textarea {
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(245,241,234,0.18);
  padding: 0 0 12px;
  color: #f5f1ea;
  font-family: 'Jost';
  font-weight: 300;
  font-size: clamp(15px, 1.1vw, 19px);
  line-height: 1.5;
  transition: border-color 0.3s ease;
}
.ct-form input::placeholder,
.ct-form textarea::placeholder { font-family: 'Jost'; font-weight: 300; }
.ct-form textarea { resize: vertical; min-height: 96px; }
.ct-form input::placeholder,
.ct-form textarea::placeholder { color: rgba(245,241,234,0.34); }
.ct-form input:focus,
.ct-form textarea:focus { outline: none; border-bottom-color: var(--accent); }


/* Right column */
.ct-aside { display: grid; row-gap: clamp(26px, 4vh, 46px); align-content: start; }
.ct-meta { border-bottom: 1px solid rgba(245,241,234,0.14); padding-bottom: 16px; }
.ct-mail {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #f5f1ea;
  text-decoration: none;
  font-family: 'EB Garamond';
  font-size: clamp(17px, 1.4vw, 24px);
  transition: color 0.3s ease;
}
.ct-mail:hover { color: var(--accent); }
.ct-hq {
  margin: 0;
  color: #f5f1ea;
  font-family: 'EB Garamond';
  font-size: clamp(17px, 1.4vw, 24px);
}

@media (max-width: 1279px) {
  .ct-grid { grid-template-columns: 1fr; row-gap: clamp(40px, 6vh, 72px); }
}
@media (max-width: 767px) {
  .ct-row { grid-template-columns: 1fr; row-gap: clamp(22px, 3vh, 34px); }
  .ct-tab { padding: 13px 14px; flex: 1 1 auto; }
  .ct-submit { width: 100%; justify-content: center; }
}

/* Locations hero can be a video: match the still-image geometry exactly. */
video.page-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Contact hero clock — bottom-right, small Jost caps. */
.ct-clock {
  position: absolute;
  right: clamp(20px, 3vw, 48px);
  bottom: clamp(10px, 1.8vh, 24px);
  z-index: 6;
  display: grid;
  justify-items: end;
  row-gap: 4px;
  pointer-events: none;
  font-family: 'Jost';
  color: rgba(245,241,234,0.86);
  text-shadow: 0 1px 14px rgba(0,0,0,0.55);
}
.ct-clock-city {
  font-weight: 400;
  font-size: clamp(9px, 0.72vw, 12px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.ct-clock-time {
  font-weight: 400;
  font-size: clamp(9px, 0.72vw, 12px);
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}
.ct-clock-street {
  font-weight: 400;
  font-size: clamp(9px, 0.72vw, 12px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
/* Gentle, quick cross-fade when the location swaps. */
.ct-clock { transition: opacity 1.5s cubic-bezier(.4,0,.2,1); }
.ct-clock.is-swapping { opacity: 0; }

/* Contact intro: eyebrow + lede, left aligned on the page gutter. */
.ct-intro {
  position: relative;
  z-index: 2;
  background: #000;
  padding: clamp(20px, 4vh, 56px) 0 0;
}
.ct-intro .ct-eyebrow {
  margin: 0 0 clamp(14px, 2vh, 24px);
  font-family: 'Jost';
  font-weight: 400;
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: left;
}
.ct-intro .ct-lede {
  margin: 0;
  max-width: 68ch;
  font-family: 'EB Garamond';
  font-weight: 400;
  font-size: clamp(16px, 1.35vw, 24px);
  line-height: 1.5;
  color: #f5f1ea;
  text-align: left;
  text-wrap: pretty;
}

/* LOCATIONS / GET IN TOUCH: guarantee a fully-outlined start state, filling in
   only as .lit is applied on scroll. */
.loc-bigword .hh-1 .hs-char {
  color: transparent !important;
  -webkit-text-stroke-color: rgba(255,255,255,0.65) !important;
}
.loc-bigword .hh-1 .hs-char.lit {
  color: #ffffff !important;
  -webkit-text-stroke-color: #ffffff !important;
}

/* About hero: the header stays a full-viewport fixed stage (it hosts the story
   cover, chapters and rail). Only the VIDEO band is reduced to match the
   Locations/Contact header height. */
.about-hero-v3 {
  inset: 0 !important;
  height: 100vh !important;
}
.about-hero-v3 .about-reveal-img {
  height: 100% !important;
}

/* Header video: a poster frame sits BEHIND the film so the band never reads as
   flat black while the video loads. No opacity gating — always visible. */
.page-hero-poster { z-index: 0; opacity: 1; }
.page-hero-vid { z-index: 1; opacity: 1; }

/* Stat words centre on the video band (not the full viewport) now that the film
   is a reduced-height header. */
.about-hero-v3 .about-stagger {
  top: calc(clamp(420px, 62vh, 620px) / 2) !important;
}
/* ABOUT header beneath the video, same treatment as LOCATIONS / GET IN TOUCH. */

/* All four post-hero headers share one size so BRANDS can't read larger. */
.brands-blank .hs-head.hs-head--brands,
.loc-bigword {
  font-size: clamp(79px, 14.5vw, 264px) !important;
  letter-spacing: 0.04em !important;
  line-height: 0.9 !important;
}
/* Tighten the brands sticky hero's own top gap to match. */
.home-statement.brands-blank {
  padding-top: clamp(14px, 1.8vw, 32px) !important;
}

.loc-bigword .hh-1 .hs-char:not(.lit) {
  color: transparent !important;
  -webkit-text-stroke-color: rgba(255,255,255,0.65) !important;
}

/* ---- BRANDS: keep the film and the BRANDS band locked together ----
   The video header was in normal flow while the band was sticky at top:0, so
   scrolling pulled them apart and re-exposed the film. Fix the film at the top
   and stick the band immediately beneath it. */
.brands-vidhero {
  position: relative !important;
  height: clamp(420px, 62vh, 620px) !important;
  z-index: 1;
}
.brands-scroll { padding-top: 0; }
.home-statement.brands-blank {
  position: relative !important;
  top: auto !important;
  z-index: 6;
  background: #000 !important;
}
/* The list must pass UNDER the pinned band. */
.brands-scroll .brand-index { position: relative; z-index: 1; }

/* Dots own their hit area; the skip link can never intercept a dot click. */
.about-rail .rail-dots { position: static; }
.about-rail .rail-dot { z-index: 4; }
.about-rail .rail-skip { z-index: 1; pointer-events: auto; }
.about-rail .rail-plane { z-index: 3; }

/* Hero video sits above the brand hover stage. */
.brands-vidhero { z-index: 3 !important; }
.bx-stage { z-index: -1 !important; }
@media (max-width: 1279px) { .bx-stage { z-index: 6 !important; } }

/* Brands page: tighten the black gap between BRANDS and the first brand row. */
.home-statement.brands-blank { padding-bottom: 0 !important; }
.brands-scroll .brand-index { padding-top: 0 !important; margin-top: clamp(4px, 1vh, 16px) !important; }


/* Brands PAGE eyebrow + lede: same colour treatment as the home page brands
   section (eyebrow white@20% → salmon on reveal, lede cream@18% → cream). */
.brands-blank .hs-intro .num { color: rgba(245,241,234,0.55) !important; }
.brands-blank .hs-intro .num .hs-char { color: rgba(255,255,255,0.2) !important; }
.brands-blank .hs-intro .num .hs-char.lit { color: var(--accent) !important; }
.brands-blank .hs-lede { color: #f5f1ea; }
.brands-blank .hs-lede .hs-char { color: rgba(245,241,234,0.18); }
.brands-blank .hs-lede .hs-char.lit { color: #f5f1ea; }
.brands-blank .hs-lede em { color: #f5f1ea; }

/* The ABOUT band borrows .home-statement for its grid + type rules, so re-pin
   its black background and remove the section's own padding/glow. */
.about-bigword-band.home-statement {
  background: #000 !important;
  padding-top: clamp(14px, 1.8vw, 32px) !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}
.about-bigword-band.home-statement::before { display: none !important; }
.about-bigword-band .bc-tag {
  margin-top: clamp(6px, 0.9vh, 14px) !important;
  font-size: clamp(22px, 2.6vw, 44px) !important;
}
.about-bigword-band .hs-head.loc-bigword {
  margin-bottom: 0 !important;
  line-height: 0.82 !important;
}
.about-bigword-band.home-statement { padding-top: clamp(8px, 1.2vw, 20px) !important; }

/* Locations: stacked eyebrow to the right of the LOCATIONS header. */
.loc-bigword-band .loc-band-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.loc-band-eyebrow {
  display: grid;
  row-gap: clamp(4px, 0.6vh, 10px);
  padding-top: clamp(10px, 1.6vw, 26px);
  font-family: 'Jost';
  font-weight: 400;
  font-size: clamp(11px, 0.95vw, 15px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  text-align: right;
  justify-items: end;
}
@media (max-width: 1279px) {
  .loc-bigword-band .loc-band-grid { grid-template-columns: 1fr; row-gap: 14px; }
  .loc-band-eyebrow { justify-items: start; text-align: left; padding-top: 0; }
}


/* About film header — normal flow, same band height as the other pages. */
.about-filmheader {
  position: relative !important;
  height: clamp(420px, 62vh, 620px);
  overflow: hidden;
  z-index: 6 !important;
  background: #000;
}
.about-filmheader .about-reveal { position: absolute; inset: 0; height: 100%; }
.about-filmheader .about-reveal-img { width: 100%; height: 100%; object-fit: cover; }
/* Band now sits in normal flow directly beneath it. */
.about-bigword-band.home-statement {
  position: relative;
  z-index: 11;
  background: #000 !important;
  padding-top: clamp(8px, 1.2vw, 20px) !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  min-height: 0 !important;
}

/* Big header stays invisible until Bebas Neue is ready (no fallback flash). */
.loc-bigword { visibility: hidden; }
.loc-bigword.font-ready { visibility: visible; }

/* Sticky nav is fully opaque black — no backdrop filter needed. */
body.past-hero .nav {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}


/* Contact submit — identical to the home-page pill buttons. */
.ct-more { margin-top: clamp(10px, 1.6vh, 24px); }
.ct-more .hs-more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  appearance: none;
  cursor: pointer;
  background: transparent;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  padding: 15px 32px;
  border: 1px solid #ffffff;
  border-radius: 999px;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.ct-more .hs-more-link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}
/* Direct line + headquarters in Jost. */
.ct-mail, .ct-hq {
  font-family: 'Jost' !important;
  font-weight: 300;
  letter-spacing: 0.01em;
}

/* Carousel: no right gutter so the next photo bleeds off the right edge. */
.brands-carousel .bss-stage { padding-right: 0 !important; }
@media (max-width: 1279px) { .brands-carousel .bss-stage { padding-right: 0 !important; } }

/* Landscape: photo starts at 40% from the left. */
@media (min-width: 1280px) {
  .bx-stage { left: 45vw !important; }
}

/* Awards backdrop is now a video — same geometry as the still it replaced,
   with a vignette fading to black on all four sides. */
video.al-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.awards-laurels .al-vig {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 26%),
    linear-gradient(to top, #000 0%, rgba(0,0,0,0) 26%),
    linear-gradient(to right, #000 0%, rgba(0,0,0,0) 22%),
    linear-gradient(to left, #000 0%, rgba(0,0,0,0) 22%),
    radial-gradient(ellipse 84% 84% at 50% 50%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.72) 100%);
}
.awards-laurels .al-mark { z-index: 2; }

/* Breathing room between the awards video and the UNCOMPROMISING band. */
.awards-laurels { padding-bottom: clamp(28px, 4vh, 64px); }

/* Clock reads as one line: CITY · STATE · TIME */
.ct-clock { display: block; text-align: right; }
.ct-clock-city, .ct-clock-sep, .ct-clock-time { display: inline; }
.ct-clock-sep {
  font-weight: 400;
  font-size: clamp(9px, 0.72vw, 12px);
  letter-spacing: 0.26em;
  color: rgba(245,241,234,0.6);
}
.ct-clock-time {
  font-size: clamp(9px, 0.72vw, 12px);
  letter-spacing: 0.2em;
}

/* Home hero: no word overlay — the HFF wordmark holds for the whole loop. */
.hero-reveal .hero-heading { display: none !important; }
.hero-reveal .hero-wordmark-final {
  opacity: 1 !important;
  animation: none !important;
  transition: none !important;
}

/* Cross-dissolve veil for non-adjacent timeline jumps. */
.about-jumpveil {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.about-jumpveil.is-on { opacity: 1; }

/* Locations video band: edge vignette on all sides, heavier at the corners. */
.loc-videoband { position: relative; }
.loc-videoband::after {
  content: '';
  position: absolute;
  inset: -2px;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse 78% 74% at 50% 50%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.28) 62%, rgba(0,0,0,0.72) 86%, #000 100%);
}


/* Darken the awards film itself — guaranteed to sit exactly on the video. */
.awards-laurels .al-bg { filter: brightness(0.5) contrast(1.04); }

/* Breathing room between the locations video band and the AUTHENTIC bar. */
.loc-videoband { padding-bottom: clamp(190px, 26vh, 400px); background: #000; }

/* The journey rail is always visible and sits above the jump veil, so it never
   blinks out while navigating by dot. */
.about-rail { z-index: 22 !important; }
.about-rail:not(.is-on) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.about-rail.is-on { opacity: 1 !important; visibility: visible !important; }


/* Narrow landscape / portrait tablets: use the bottom-wipe layout too, so the
   photo is never pushed outside the viewport. */
@media (max-width: 1279px) {
  .bx-stage {
    display: block !important;
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    top: auto !important; bottom: 0 !important;
    height: 52vh !important;
    z-index: 0 !important;
  }

  .brand-index { position: relative; z-index: 2; }
}







/* ================= BRANDS — narrow & mobile portrait =================
   Simple and predictable: the full brand list always stays visible, and tapping
   a brand reveals its photo in a fixed band at the bottom of the screen. No
   collapsing, no re-ordering, no measured offsets. */
@media (max-width: 1279px) {
  .bx-stage {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    height: 38vh !important;
    z-index: 6 !important;
  }
  .bx-img {
    -webkit-mask: none !important;
            mask: none !important;
    clip-path: inset(100% 0 0 0);
    opacity: 1;
    transition: clip-path 0.7s cubic-bezier(.22,1,.36,1);
  }
  .bx-img.is-on { clip-path: inset(0 0 0 0); }
  /* Soft top edge so the photo melts into the page instead of a hard line. */
  .bx-stage::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none; z-index: 2;
    background: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 22%);
  }

  /* Every row always visible and tappable — nothing collapses or moves. */
  .brand-index { position: relative; z-index: 2; min-height: 0; padding-bottom: var(--bx-lag-reserve, 42vh) !important; }
  .bx-row { opacity: 1 !important; max-height: none !important; overflow: visible; }
  .bx-name .bx-l, .bx-lead { opacity: 1 !important; }
  /* Only the selected brand fills in; the rest stay outlined. */
  .bx-row.is-active .bx-name .bx-l {
    color: #ffffff !important;
    -webkit-text-stroke-color: #ffffff !important;
  }
  .bx-row.is-active .bx-code { color: var(--accent) !important; }
}

/* Narrow / portrait: the selected brand advances to the TOP of the list (flex
   order — instant and reliable, no measured offsets) while the rest stay
   visible beneath it. */
.bx-row { transition: opacity 0.35s ease; }
@media (max-width: 1279px) {
  .bx-list { display: flex; flex-direction: column; }
  .bx-row.is-active { order: -1; }
}

/* Narrow / portrait: the promoted brand sits just BELOW the sticky BRANDS band,
   never behind it, and the band's own edge line is suppressed so no dark seam
   shows when the full list is on screen with no photo. */
@media (max-width: 1279px) {
  /* Band paints above the list, so a promoted row can never sit on top of it. */
  .home-statement.brands-blank { z-index: 8 !important; background: #000 !important; }
  .brand-index { z-index: 2 !important; }
  /* Clear the promoted row of the band. */
  .bx-list.has-active .bx-row.is-active { scroll-margin-top: var(--nav-h, 64px); }
  .bx-list.has-active { padding-top: 6px; }
  /* Kill the seam: no border/shadow between the band and the list. */
  .home-statement.brands-blank { border-bottom: 0 !important; box-shadow: none !important; }
  .brand-index::before { display: none !important; }
  .bx-stage::after { background: none !important; }
  .bx-stage:has(.bx-img.is-on)::after {
    background: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 22%) !important;
  }
}

/* Narrow / portrait final tweaks. */
@media (max-width: 1279px) {
  /* 1 — Two-line names (e.g. Gott's Roadside): keep the whole row clear of the
     sticky band by giving the promoted row real breathing room above it. */
  .bx-list.has-active .bx-row.is-active { padding-top: 18px; margin-top: 6px; }
  .bx-list.has-active { padding-top: 14px; }
  /* 3 — Slightly thinner outlines on mobile. */
  .bx-name .bx-l {
    -webkit-text-stroke-width: 0.7px !important;
            text-stroke-width: 0.7px !important;
  }
}



/* Narrow / portrait: with a brand selected, the others are removed from flow
   entirely — so nothing can pass behind the active name and no sticky offset is
   needed. The active row is simply first in a short list. */
@media (max-width: 1279px) {

  .bx-list.has-active .bx-row.is-active {
    position: static !important;
    order: 0 !important;
    background: transparent !important;
    padding-top: 8px !important;
    padding-bottom: 12px !important;
    margin: 0 !important;
    z-index: auto !important;
  }
}

/* Two-line brand names only: shorten the photo band so it starts lower and
   can't clip the second line. Single-line names are unchanged. */
@media (max-width: 1279px) {
  .bx-list.is-twoline ~ .bx-stage,
  .brand-index:has(.bx-list.is-twoline) ~ .bx-stage,
  body:has(.bx-list.is-twoline) .bx-stage { height: 31vh !important; }
}

/* Mobile portrait: the awards ticker's orange phrase wraps to its own line
   beneath "30 NOMINATIONS. 18 WINS." instead of running off the page. */
@media (max-width: 767px) {
  .brands-carousel.home-statement .bc-tag--awards {
    display: block !important;
    white-space: normal !important;
  }
  .bc-tag--awards .bc-tag-head { display: block; }
  .bc-tag--awards .bc-tag-cycle {
    display: block !important;
    margin-left: 0 !important;
    margin-top: 0.28em;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
  }
}

/* ===== HOME — MOBILE PORTRAIT FIXES ===== */
@media (max-width: 1279px) {
  /* 1 — Sequence the statement section: ABOUT, then eyebrow + copy + button,
     then every photo. Flattening the columns lets order do this reliably. */
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-grid {
    display: flex !important;
    flex-direction: column !important;
    /* The desktop rule sets align-items:start for the BLOCK axis. Under
       flex-direction:column that becomes the INLINE axis and shrinks every
       child to content width, so it must be reset here. */
    align-items: stretch !important;
  }
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-col { display: contents !important; }
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-head { order: 1; }
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-intro { order: 2; }
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-col--left .hs-photo-fig { order: 3; }
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-col--right .hs-photo-fig { order: 4; }
  /* Desktop grid placements are meaningless under a flex parent; clear them so
     they don't read as active layout. */
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-head,
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-intro,
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-photo-fig {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-col--right .hs-photo-fig--2 { order: 5; }

  /* 2 — Captions fit on a single line. */
  .home-statement .hs-photo-cap {
    font-size: 8.5px !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 4 — Local Roots eyebrow + copy left aligned. */
  .home-statement .hs-fullvideo-cap .fv-eyebrow,
  .home-statement .hs-fullvideo-cap .fv-body { text-align: left !important; }
  .home-statement .hs-fullvideo-cap .fv-cta-wrap { justify-content: flex-start !important; }

  /* 5 — Progress ticks become dots: low-opacity white, active in salmon. */
  .bss-ticks { gap: 10px !important; align-items: center; }
  .bss-tick {
    width: 8px !important;
    max-width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.28) !important;
    transition: background 0.3s ease, transform 0.3s ease;
  }
  .bss-tick.is-active {
    background: #d97a4f !important;
    transform: scale(1.25);
  }
}

/* ===== Carousel progress indicators: discrete states, no morphing ===== */
/* Landscape / desktop: fixed-width LINES (no vw, so they never stretch). */
@media (min-width: 1280px) {
  .bss-tick {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 2px !important;
    border-radius: 0 !important;
    transform: none !important;
  }
  .bss-ticks { gap: 10px !important; }
}
/* Narrow tier: circular DOTS (pairs with the stacked carousel layout). */
@media (max-width: 1279px) {
  .bss-tick {
    width: 8px !important;
    min-width: 8px !important;
    max-width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
  }
}

/* ===== Statement section: photo order holds at EVERY stacked width ===== */
/* The order rules were portrait-only, so mid-range widths (901–1200px) still
   used the raw column order and the cocktail film jumped ahead of the copy. */
@media (max-width: 1279px) {
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-grid {
    display: flex !important;
    flex-direction: column !important;
    /* The desktop rule sets align-items:start for the BLOCK axis. Under
       flex-direction:column that becomes the INLINE axis and shrinks every
       child to content width, so it must be reset here. */
    align-items: stretch !important;
  }
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-col { display: contents !important; }
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-head { order: 1; }
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-intro { order: 2; }
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-col--left .hs-photo-fig { order: 3; }
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-col--right .hs-photo-fig { order: 4; }
  /* Desktop grid placements are meaningless under a flex parent; clear them so
     they don't read as active layout. */
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-head,
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-intro,
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-photo-fig {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .home-statement:not(.brands-carousel):not(.rise-stage) .hs-col--right .hs-photo-fig--2 { order: 5; }
}

/* ===== Captions: one size for all three, as large as the longest one allows =====
   Longest is "PEET'S COFFEE - SAN FRANCISCO INTERNATIONAL AIRPORT" (51 chars),
   measured at 30.62em in Jost 300 uppercase with 0.085em tracking. Divide the
   available width by 31 for a small safety margin. */
@media (max-width: 1279px) {
  .home-statement .hs-photo-cap {
    font-size: var(--cap-fs, 10px) !important;
    letter-spacing: 0.085em !important;
    white-space: nowrap !important;
    overflow: visible;
    text-overflow: clip;
  }
}

/* ===== Brands tagline on mobile portrait: as large as fits, never clipped =====
   "THEY ARE UNCOMPROMISING." is the longest string, so drive the size from the
   longest phrase measured against the stage width (set by JS below). */
@media (max-width: 1279px) {
  .brands-carousel.home-statement .bc-tag {
    font-size: var(--tag-fs, 26px) !important;
    white-space: nowrap !important;
    letter-spacing: 0.01em !important;
  }
  .brands-carousel.home-statement .bc-tag .bc-tag-cycle { overflow: hidden; }
}

/* ===== Mobile portrait: "THEY ARE <WORD>." must always fit on one line =====
   The longest cycling word is UNCOMPROMISING, so the whole line is sized from
   live measurement (canvas, in the tag's real Bebas font) against the available
   width. That keeps it as large as possible without clipping. */
@media (max-width: 1279px) {
  .brands-carousel.home-statement .bc-tag {
    font-size: var(--tag-fs, 30px) !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
  }
  .brands-carousel.home-statement .bc-tag .bc-tag-cycle { margin-left: 0 !important; }
  /* One true space between "THEY ARE" and the salmon word: a Bebas space is
     ~0.16em, while the base rule's 0.28em read as 1.75 spaces. Mobile only. */
  .brands-carousel.home-statement .bc-tag { column-gap: 0.16em !important; }
  /* The tagline sits in the same shared inset as .bss-stage, which carries
     padding-right:0 so the next photo can bleed off screen. Type must not bleed —
     restore the page's right gutter here (the stage keeps its 0). */
  .brands-carousel .wrap.bc-tagline { padding-right: clamp(40px, 10vw, 145px) !important; }
}

/* About lede: allow hyphenated compounds to break at the hyphen so lines fill
   naturally instead of pushing whole words like "community-rooted" down. */
.home-statement .hs-lede {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
  text-wrap: normal;
}
.home-statement .hs-lede .hs-word { white-space: normal; }

/* Mobile portrait: smaller journey-rail dots and plane. */
@media (max-width: 767px) {
  .about-rail .rail-dot {
    width: 7px !important;
    height: 7px !important;
    margin: -3.5px 0 0 -3.5px !important;
  }
  .about-rail .rail-dot:hover,
  .about-rail .rail-dot.is-done { transform: scale(1.08); }
  .about-rail .rail-plane {
    width: 17px !important;
    height: 17px !important;
    margin: -8.5px 0 0 -8.5px !important;
  }
}

/* Awards ticker: when the line wraps at mid widths, the cycling phrase must
   start flush at the left edge (not indented under the white lead-in), and the
   whole ticker needs clearance from the body copy above it. */
.brands-carousel.home-statement .bc-tag--awards {
  flex-wrap: wrap !important;
  align-items: baseline !important;
  margin-top: clamp(20px, 3vh, 44px) !important;
}
.brands-carousel.home-statement .bc-tag--awards {
  white-space: normal !important;
  row-gap: 2px;
}
.brands-carousel.home-statement .bc-tag--awards .bc-tag-head {
  flex: 1 0 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.brands-carousel.home-statement .bc-tag--awards .bc-tag-cycle {
  flex: 1 0 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
}

/* Hidden rail must not intercept taps (its dots re-enabled pointer events). */
.about-rail:not(.is-on),
.about-rail:not(.is-on) .rail-dots,
.about-rail:not(.is-on) .rail-dot,
.about-rail:not(.is-on) .rail-skip {
  pointer-events: none !important;
}

/* ===== Contact form — simplified single-column layout ===== */
.ct-legend {
  display: block;
  font-family: 'Jost';
  font-weight: 400;
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #f5f1ea;
  margin-bottom: 12px;
}
.ct-legend em {
  font-style: normal;
  font-size: 0.62em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-left: 6px;
}
.ct-sub { display: block; }
.ct-sub .ct-label { margin-bottom: 8px; }
.ct-form .ct-field--full { display: block; }
.ct-form input,
.ct-form textarea,
.ct-form .ct-select {
  border: 1px solid rgba(245,241,234,0.32);
  border-radius: 2px;
  background: rgba(0,0,0,0.35);
  padding: 13px 14px;
  color: #f5f1ea;
  font-family: 'Jost';
  font-weight: 300;
}
.ct-form input:focus,
.ct-form textarea:focus,
.ct-form .ct-select:focus {
  outline: none;
  border-color: var(--accent);
}
.ct-selectwrap { position: relative; display: block; }
.ct-form .ct-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  box-sizing: border-box;
  font-size: clamp(15px, 1.1vw, 19px);
  cursor: pointer;
}
.ct-form .ct-select option { background: #000; color: #f5f1ea; }
.ct-caret {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  color: #f5f1ea;
  pointer-events: none;
}
/* Single column: no aside beside the form now. */
.ct-grid { grid-template-columns: minmax(0, 1fr) !important; }
.ct-form { max-width: 820px; }





/* ===== Legacy brand-row rules (these produced the correct desktop) ===== */
.bx-lead {
  width: 10.5ch !important;
  flex-basis: 10.5ch !important;
}
@media (orientation: landscape) and (max-height: 700px) {
  .bx-name { font-size: min(7vw, 11.5vh) !important; line-height: 1.02 !important; }
}
@media (orientation: landscape) and (max-height: 700px) {
  .bx-name { font-size: min(7vw, 9.5vh) !important; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .bx-name { font-size: min(6.4vw, 8.6vh) !important; }
}
@media (max-width: 1279px) {
  body.brands-page .bx-name { font-size: clamp(26px, 8.6vw, 46px) !important; }
}

/* ===== Blurb + brackets, exactly as they stood when desktop was correct ===== */
.bx-list .bx-row { position: relative; }
.bx-list .bx-row .bx-name { position: relative; }
.bx-blurb {
  display: block;
  position: absolute;
  top: 100%;
  left: 10.5ch;
  margin: 12px 0 0;
  width: clamp(26ch, var(--bx-name-w, 34ch), 52ch);
  max-width: min(60vw, 52ch);
  font-family: 'Jost';
  font-weight: 300;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: normal;
  color: #f5f1ea;
  -webkit-text-stroke: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease 0.1s;
  z-index: 9;
}
.bx-list .bx-row.is-active > .bx-blurb { opacity: 1; }
.bx-list .bx-row.is-active { margin-bottom: calc(var(--bx-reserve, 0px) + 28px); }
@media (max-width: 1279px) {
  .bx-list .bx-row { flex-wrap: wrap; }
  .bx-list .bx-row > .bx-blurb {
    position: static;
    flex: 0 0 calc(100% - 96px);
    width: auto;
    max-width: calc(100% - 96px);
    margin: 9px 0 2px 96px;
    font-size: 15px;
    display: none;
  }
  .bx-list .bx-row.is-active > .bx-blurb { display: block; }
  .bx-list .bx-row.is-active { margin-bottom: 0; padding-bottom: 20px; }
  .bx-stage {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    top: auto !important; bottom: 0 !important;
    height: 46vh !important;
    z-index: 10 !important;
    background: #000 !important;
  }
  body.bx-at-end .bx-stage { position: absolute !important; z-index: 1 !important; }
  .brand-index { position: relative; z-index: 2; padding-bottom: var(--bx-lag-reserve, 46vh) !important; }
}

/* ===== Brand row restored to the state where desktop was correct =====
   (the version in place when mobile still flashed). The pieces I later deleted
   are back: the active name's scale-up, row-level brackets sized from the
   measured name height, the blurb at the measured name offset, the dash centred
   in the lead, and the salmon active lead. */

/* Active brand GROWS. */
.bx-list.has-active .bx-row.is-active .bx-name {
  transform: scale(1.06) !important;
  transform-origin: left center !important;
  transition: transform 0.4s cubic-bezier(.22,1,.36,1) !important;
}

/* Brackets on the ROW, outside the airport code, centred on the name. */
.bx-list .bx-row.is-active .bx-name::before,
.bx-list .bx-row.is-active .bx-name::after { content: none !important; }
.bx-list .bx-row.is-active::before,
.bx-list .bx-row.is-active::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: calc(var(--bx-brk-h, 1.2em) + 26px) !important;
  width: 12px !important;
  border: 1px solid var(--accent) !important;
  opacity: 1 !important;
  z-index: 10 !important;
  pointer-events: none !important;
}
.bx-list .bx-row.is-active::before { left: -34px !important; right: auto !important; border-right: 0 !important; }
.bx-list .bx-row.is-active::after  { right: -52px !important; left: auto !important; border-left: 0 !important; }

/* Blurb at the name's measured left edge. */
.bx-list .bx-row > .bx-blurb { left: var(--bx-lead-w, 155px) !important; }

/* Dash centred in the lead; active lead salmon. */
.bx-list .bx-row .bx-lead {
  display: grid !important;
  grid-template-columns: max-content 1fr !important;
  align-items: center !important;
}
.bx-list .bx-row .bx-code { justify-self: start !important; }
.bx-list .bx-row .bx-dash { justify-self: center !important; margin: 0 !important; }
.bx-list .bx-row.is-active .bx-lead,
.bx-list .bx-row.is-active .bx-code,
.bx-list .bx-row.is-active .bx-dash { color: var(--accent) !important; }

/* Brackets: taller (they were sized from a stale var, so they read as tiny) and
   the right one is pulled in from the row's far edge to sit beside the name. */
.bx-list .bx-row.is-active::before,
.bx-list .bx-row.is-active::after {
  height: calc(var(--bx-name-h, 1.2em) + 30px) !important;
  width: 14px !important;
}
.bx-list .bx-row.is-active::after {
  left: calc(var(--bx-lead-w, 155px) + var(--bx-name-w, 500px) + 30px) !important;
  right: auto !important;
}
/* Active name a touch smaller. */
.bx-list.has-active .bx-row.is-active .bx-name { transform: scale(1.0) !important; }
/* More air between the blurb and the next brand. */
.bx-list .bx-row.is-active { margin-bottom: calc(var(--bx-reserve, 0px) + 56px) !important; }

/* Brackets a little shorter. */
.bx-list .bx-row.is-active::before,
.bx-list .bx-row.is-active::after {
  height: calc(var(--bx-name-h, 1.2em) + 14px) !important;
}
/* Inactive brands smaller than the active one (the earlier size rule was being
   overridden by the legacy landscape font-size !important rules). */
@media (min-width: 1280px) {
  .bx-list .bx-row:not(.is-active) .bx-name { font-size: min(6.1vw, 10vh) !important; }
  .bx-list .bx-row.is-active .bx-name { font-size: min(7vw, 11.5vh) !important; }
}
@media (orientation: landscape) and (max-height: 700px) {
  .bx-list .bx-row:not(.is-active) .bx-name { font-size: min(6.1vw, 8.3vh) !important; }
  .bx-list .bx-row.is-active .bx-name { font-size: min(7vw, 9.5vh) !important; }
}

/* Brackets a little shorter again. */
.bx-list .bx-row.is-active::before,
.bx-list .bx-row.is-active::after {
  height: calc(var(--bx-name-h, 1.2em) + 4px) !important;
}
/* Inactive brands smaller still. */
@media (min-width: 1280px) {
  .bx-list .bx-row:not(.is-active) .bx-name { font-size: min(5.2vw, 8.4vh) !important; }
}
@media (orientation: landscape) and (max-height: 700px) {
  .bx-list .bx-row:not(.is-active) .bx-name { font-size: min(5.2vw, 7vh) !important; }
}

/* ===== BRANDS PAGE — extra black sticky band under the site header =====
   Gives the brand list breathing room beneath the nav (this page only). */
body.brands-page .brands-blank,
.brands-scroll .brands-blank {
  position: sticky !important;
  top: var(--nav-h, 72px) !important;
  z-index: 6 !important;
  background: #000 !important;
  padding-bottom: clamp(14px, 2vw, 30px) !important;
}

/* BRANDS header scrolls away (not sticky). Only the SITE header is taller on
   this page, giving the brand list room beneath it. */
body.brands-page .brands-blank,
.brands-scroll .brands-blank {
  position: static !important;
  top: auto !important;
  z-index: 1 !important;
  padding-bottom: clamp(24px, 3.4vh, 52px) !important;
}
/* This page only: extra length on the site sticky header. */
body.brands-page.past-hero .nav,
body.brands-page .nav {
  padding-bottom: 34px !important;
}

/* Longer site sticky header on the brands page. */
body.brands-page.past-hero .nav,
body.brands-page .nav {
  padding-bottom: 64px !important;
}

/* Taller site sticky header on the brands page. */
body.brands-page.past-hero .nav,
body.brands-page .nav {
  padding-bottom: 104px !important;
}

/* No hairline under the taller brands-page sticky header. */
body.brands-page .nav,
body.brands-page.past-hero .nav {
  border-bottom: 0 !important;
  box-shadow: none !important;
}











/* More air between BRANDS and the first brand on landing. */
.brands-scroll .brand-index { padding-top: clamp(56px, 8vh, 140px) !important; margin-top: 0 !important; }

/* More vertical spacing per brand row, so the list progresses more slowly. */
.brands-scroll .bx-list .bx-row { padding-top: 22px !important; padding-bottom: 22px !important; }
@media (max-width: 1279px) {
  .brands-scroll .bx-list .bx-row { padding-top: 14px !important; padding-bottom: 14px !important; }
}

/* Slower progression again: more scroll distance per brand row. */
.brands-scroll .bx-list .bx-row { padding-top: 40px !important; padding-bottom: 40px !important; }
@media (max-width: 1279px) {
  .brands-scroll .bx-list .bx-row { padding-top: 24px !important; padding-bottom: 24px !important; }
}

/* Row spacing restored — scroll speed is controlled in JS, not by spacing. */
.brands-scroll .bx-list .bx-row { padding-top: 20px !important; padding-bottom: 20px !important; }
@media (max-width: 1279px) {
  .brands-scroll .bx-list .bx-row { padding-top: 14px !important; padding-bottom: 14px !important; }
}

/* Opt the brand list out of browser scroll anchoring, so the space reserved for
   the blurb pushes the following brands down instead of the browser shifting the
   page to compensate. */
.bx-list { overflow-anchor: none; }



/* Careers: the page is short, so JS sizes a trailing spacer (and, when the page
   is over-tall, tightens the two gaps) so max scroll lands with the headline
   exactly at the nav's bottom edge. Normal flow — nothing overlaps the footer. */
.careers-flow { position: relative; z-index: 2; background: #000; margin-top: -4px; }
.careers-spacer { height: var(--careers-pad, 90px); background: #000; }
.careers-flow .ct-intro { margin-bottom: calc(-1 * var(--careers-sq-a, 0px)); }
.careers-flow [data-screen-label="Careers, Positions"] { margin-top: calc(-1 * var(--careers-sq-b, 0px)); }



/* Keep the % small, but lift it so its top edge lines up with the cap-height of
   the 100. The count-up script emits it as an inline-styled <em>, so target that. */
.home-statement .hs-tick .n[data-count="100%"] em {
  display: inline-block;
  vertical-align: baseline;
  transform: translateY(-0.42em);
}

/* ===== AWARDS v2 — copy column left, laurel wall right, one screen tall ===== */
.awards-v2 { padding: clamp(40px, 6vh, 88px) 0 clamp(40px, 6vh, 88px); }
.awards-v2 .aw-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(24px, 4vw, 72px);
}
.awards-v2 .aw-copy { display: block; }
.awards-v2 .aw-copy .hs-head { margin: 0 0 clamp(18px, 3vh, 44px); }
.awards-v2 .aw-copy .hs-intro { margin-bottom: clamp(20px, 4vh, 56px); }
.awards-v2 .aw-copy .bc-tag { margin: 0; }

/* The wall keeps the mockup's proportions and scales as one unit. */
.awards-v2 .aw-wall {
  position: relative;
  width: 100%;
  aspect-ratio: 666 / 810;
  width: min(100%, calc(86vh * 666 / 810));
  margin-left: auto;
}
.awards-v2 .al-mark {
  position: absolute;
  transform: translateX(-50%);
  height: auto;
  opacity: 0;
  transition: opacity 0.28s ease;
  will-change: opacity;
}
/* The 30/18 mark is always present — no fade. */
.awards-v2 .al-1 { opacity: 1 !important; transition: none !important; }
/* Rapid staccato for the rest, in the original order. */
.awards-v2.al-in .al-mark { opacity: 1; }
.awards-v2.al-in .al-2  { transition-delay: 0.00s; }
.awards-v2.al-in .al-3  { transition-delay: 0.09s; }
.awards-v2.al-in .al-4  { transition-delay: 0.18s; }
.awards-v2.al-in .al-5  { transition-delay: 0.27s; }
.awards-v2.al-in .al-6  { transition-delay: 0.36s; }
.awards-v2.al-in .al-7  { transition-delay: 0.45s; }
.awards-v2.al-in .al-8  { transition-delay: 0.54s; }
.awards-v2.al-in .al-9  { transition-delay: 0.63s; }
.awards-v2.al-in .al-10 { transition-delay: 0.72s; }
/* Placement — percentages of the wall, matched to the mockup. */
.awards-v2 .al-1  { left: 45.3%; top: 3.1%;  width: 41.5%; }
.awards-v2 .al-8  { left: 13%;   top: 35.8%; width: 23%; }
.awards-v2 .al-3  { left: 79%;   top: 35.8%; width: 23%; }
.awards-v2 .al-7  { left: 45.3%; top: 42%;   width: 23%; }
.awards-v2 .al-2  { left: 13%;   top: 55.8%; width: 23%; }
.awards-v2 .al-10 { left: 79%;   top: 55.8%; width: 23%; }
.awards-v2 .al-4  { left: 45.3%; top: 61%;   width: 23%; }
.awards-v2 .al-5  { left: 13%;   top: 77.5%; width: 23%; }
.awards-v2 .al-6  { left: 79%;   top: 77.5%; width: 23%; }
.awards-v2 .al-9  { left: 45.3%; top: 80%;   width: 23%; }
@media (prefers-reduced-motion: reduce) {
  .awards-v2 .al-mark { opacity: 1; transition: none; }
}
/* Narrow: stack the copy above the wall. */
@media (max-width: 1279px) {
  .awards-v2 .aw-wrap { grid-template-columns: minmax(0, 1fr); row-gap: clamp(28px, 5vh, 56px); }
  .awards-v2 .aw-wall { width: 100%; }
}

/* The shared .hs-head rule carries a ~1100px top margin (it was tuned for the
   old grid layout), which pushed the whole copy column off-screen. Reset it here
   and make the copy visible without depending on the reveal observer. */
.awards-v2 .aw-copy .hs-head,
.awards-v2 .aw-copy .hs-head--brands {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.awards-v2 .aw-copy .reveal,
.awards-v2 .aw-copy .hs-intro {
  opacity: 1 !important;
  transform: none !important;
}

/* 1 — the shared .hs-intro is a 2-column grid (eyebrow beside body); here the
   body belongs UNDER the ACCOLADES eyebrow. */
.awards-v2 .aw-copy .hs-intro {
  display: block !important;
  grid-template-columns: none !important;
}
.awards-v2 .aw-copy .hs-intro .num { margin-bottom: clamp(10px, 1.4vh, 18px); }
.awards-v2 .aw-copy .hs-intro-body { max-width: 46ch; }

/* 2 + 3 — reclaim the right margin and scale the wall up: the 30/18 mark much
   larger, the rest a step bigger. Spacing follows so nothing collides
   (a mark's height = width x 666/810). */
@media (min-width: 1280px) {
  .awards-v2 .aw-wrap { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); }
  .awards-v2 .aw-wall { margin-right: calc(-1 * clamp(10px, 3vw, 64px)); }
}
/* 4 — wall + section padding must fit one screen. */
.awards-v2 .aw-wall { width: min(100%, calc(78vh * 666 / 810)); }
.awards-v2 .al-1  { left: 46%; top: 0%;    width: 46%; }
.awards-v2 .al-8  { left: 12%; top: 39%;   width: 24%; }
.awards-v2 .al-3  { left: 80%; top: 39%;   width: 24%; }
.awards-v2 .al-7  { left: 46%; top: 40%;   width: 24%; }
.awards-v2 .al-2  { left: 12%; top: 58.5%; width: 24%; }
.awards-v2 .al-10 { left: 80%; top: 58.5%; width: 24%; }
.awards-v2 .al-4  { left: 46%; top: 59.5%; width: 24%; }
.awards-v2 .al-5  { left: 12%; top: 78%;   width: 24%; }
.awards-v2 .al-6  { left: 80%; top: 78%;   width: 24%; }
.awards-v2 .al-9  { left: 46%; top: 79%;   width: 24%; }
@media (max-width: 1279px) {
  .awards-v2 .aw-wall { width: 100%; margin-right: 0; }
}

/* ---- Awards wall: fit one laptop screen, larger marks, tighter grid ---- */
.awards-v2 { padding: clamp(14px, 2vh, 32px) 0 clamp(14px, 2vh, 32px) !important; }
/* Height budget drives the width, so the 666/810 frame can never overflow. */
.awards-v2 .aw-wall { width: min(100%, calc(92vh * 666 / 810)) !important; }
@media (min-width: 1280px) {
  /* 2 — reclaim the right margin: narrower copy track and a deeper pull into
     the page gutter. */
  .awards-v2 .aw-wrap { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); }
  .awards-v2 .aw-wall { margin-right: calc(-1 * clamp(20px, 6vw, 130px)); }
}
/* 3 — bigger marks, closer rows. A mark's height = width x 666/810 (0.8214),
   so the stack is sized to land just inside the frame. */
.awards-v2 .al-1  { left: 46%; top: 0%;    width: 46%; }
.awards-v2 .al-8  { left: 12%; top: 38.2%; width: 24.8%; }
.awards-v2 .al-3  { left: 80%; top: 38.2%; width: 24.8%; }
.awards-v2 .al-7  { left: 46%; top: 39.2%; width: 24.8%; }
.awards-v2 .al-2  { left: 12%; top: 58.8%; width: 24.8%; }
.awards-v2 .al-10 { left: 80%; top: 58.8%; width: 24.8%; }
.awards-v2 .al-4  { left: 46%; top: 59.8%; width: 24.8%; }
.awards-v2 .al-5  { left: 12%; top: 79.4%; width: 24.8%; }
.awards-v2 .al-6  { left: 80%; top: 79.4%; width: 24.8%; }
.awards-v2 .al-9  { left: 46%; top: 79.4%; width: 24.8%; }

/* 4 — the eyebrow and body are letter-lit by the scroll reveal, which left them
   half-filled here. In this section they always render fully resolved. */
.awards-v2 .aw-copy .hs-intro .num .hs-char,
.awards-v2 .aw-copy .hs-intro .num .hs-char.lit { color: var(--accent) !important; opacity: 1 !important; }
.awards-v2 .aw-copy .hs-lede .hs-char,
.awards-v2 .aw-copy .hs-lede .hs-char.lit { color: #f5f1ea !important; opacity: 1 !important; }

/* ---- Awards wall v3 — placement and scale taken from the reference image
   (703x848). Marks are not square, so rows are spaced off each mark's real
   proportion (a small mark is ~0.61 of its own width in wall-height terms). ---- */
.awards-v2 { padding: clamp(10px, 1.4vh, 24px) 0 !important; }
.awards-v2 .aw-wall { width: min(100%, calc(96vh * 703 / 848)) !important; aspect-ratio: 703 / 848 !important; }
@media (min-width: 1280px) {
  /* Give the wall the dominant share of the row and let it run to the edge. */
  .awards-v2 .aw-wrap { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); column-gap: clamp(16px, 2.4vw, 48px); }
  .awards-v2 .aw-wall { margin-right: calc(-1 * clamp(24px, 8vw, 150px)); }
}
/* 30/18 dominates the top; three staggered columns beneath, as in the image. */
.awards-v2 .al-1  { left: 50%;   top: 3%;    width: 50%; }
.awards-v2 .al-8  { left: 20.9%; top: 40.5%; width: 26%; }
.awards-v2 .al-3  { left: 82.1%; top: 40.5%; width: 26%; }
.awards-v2 .al-7  { left: 51.6%; top: 47.5%; width: 26%; }
.awards-v2 .al-2  { left: 20.9%; top: 58%;   width: 26%; }
.awards-v2 .al-10 { left: 82.1%; top: 58%;   width: 26%; }
.awards-v2 .al-4  { left: 51.6%; top: 65%;   width: 26%; }
.awards-v2 .al-5  { left: 20.9%; top: 76%;   width: 26%; }
.awards-v2 .al-6  { left: 82.1%; top: 76%;   width: 26%; }
.awards-v2 .al-9  { left: 51.6%; top: 82.5%; width: 26%; }

/* ---- Awards wall v4 — 30/18 top-aligned with AWARDS and 130% larger; the nine
   smaller marks pulled up so the column ends inside the frame.
   A wider frame (703/790) is what lets the marks grow: the wall is capped by
   HEIGHT, so a less-tall ratio buys width, and width is what sizes each mark. ---- */
.awards-v2 .aw-wall {
  width: min(100%, calc(96vh * 703 / 790)) !important;
  aspect-ratio: 703 / 790 !important;
  overflow: visible;
}
/* Negative top cancels the PNG's transparent margin so the wreath's cap lines up
   with the cap-height of AWARDS. */
.awards-v2 .al-1  { left: 50%;   top: -4%; width: 65%; }
.awards-v2 .al-8  { left: 20.9%; top: 44%; width: 24%; }
.awards-v2 .al-3  { left: 82.1%; top: 44%; width: 24%; }
.awards-v2 .al-7  { left: 51.6%; top: 47%; width: 24%; }
.awards-v2 .al-2  { left: 20.9%; top: 61%; width: 24%; }
.awards-v2 .al-10 { left: 82.1%; top: 61%; width: 24%; }
.awards-v2 .al-4  { left: 51.6%; top: 64%; width: 24%; }
.awards-v2 .al-5  { left: 20.9%; top: 78%; width: 24%; }
.awards-v2 .al-6  { left: 82.1%; top: 78%; width: 24%; }
.awards-v2 .al-9  { left: 51.6%; top: 81%; width: 24%; }

/* ---- Awards: keep the wall wide WITHOUT the headline overflowing ----
   The shared headline rules size AWARDS from the VIEWPORT (17vw / 15.5vw with
   !important), so narrowing the copy track can never shrink the type. Size it
   from its own column instead: the glyph run measures ~2.51x the font-size, so
   font-size <= track/2.51 keeps it inside. */
@media (min-width: 1280px) {
  .awards-v2 .aw-copy .hs-head,
  .awards-v2 .aw-copy .hs-head--brands {
    font-size: min(clamp(96px, 14vw, 412px), 38cqw) !important;
  }
  .awards-v2 .aw-copy { container-type: inline-size; }
}
/* 2 — al-9's own height is 21.4% of the frame, so the last centre row must
   start at or below 78.6% to stay inside. */
.awards-v2 .al-9 { top: 78%; }
.awards-v2 .al-5,
.awards-v2 .al-6 { top: 75%; }
/* 3 — no bbox above the section: seat the wreath at the frame top and align it
   with the AWARDS cap-height via a transform instead of a negative offset. */
.awards-v2 .al-1 { top: 0; transform: translate(-50%, -4%); }


/* ---- Awards fine-tune ----
   1) AWARDS was over-constrained by the container cap; allow it to run into the
      gutter again, stopping short of the wreath's visible left edge.
   2) award-1.png is a square canvas with 12.2% transparent padding above the
      wreath, so the box must sit higher than the type to LOOK top-aligned.
   3) Even 17% gaps between all three small rows. */
@media (min-width: 1280px) {
  .awards-v2 .aw-copy .hs-head,
  .awards-v2 .aw-copy .hs-head--brands {
    font-size: min(clamp(96px, 14vw, 412px), 56cqw) !important;
  }
}
.awards-v2 .al-1 { transform: translate(-50%, -11%); }
.awards-v2 .al-8,
.awards-v2 .al-3  { top: 43% !important; }
.awards-v2 .al-2,
.awards-v2 .al-10 { top: 60% !important; }
.awards-v2 .al-5,
.awards-v2 .al-6  { top: 77% !important; }
.awards-v2 .al-7  { top: 46% !important; }
.awards-v2 .al-4  { top: 62.5% !important; }
.awards-v2 .al-9  { top: 79% !important; }

/* Centre the 3x3 grid of small laurels on the big wreath: measured grid centre
   was 51.5% vs the wreath's 50%, so pull each column left by 1.5%. */
.awards-v2 .al-2,
.awards-v2 .al-5,
.awards-v2 .al-8  { left: 19.4% !important; }
.awards-v2 .al-4,
.awards-v2 .al-7,
.awards-v2 .al-9  { left: 50% !important; }
.awards-v2 .al-3,
.awards-v2 .al-6,
.awards-v2 .al-10 { left: 80.6% !important; }

/* Shift the 3x3 laurel grid up 6% as a rigid group (relative spacing unchanged)
   so the bottom row stays on the page. */
.awards-v2 .al-8,
.awards-v2 .al-3  { top: 37% !important; }
.awards-v2 .al-2,
.awards-v2 .al-10 { top: 54% !important; }
.awards-v2 .al-5,
.awards-v2 .al-6  { top: 71% !important; }
.awards-v2 .al-7  { top: 40% !important; }
.awards-v2 .al-4  { top: 56.5% !important; }
.awards-v2 .al-9  { top: 73% !important; }

/* 1 — Body copy spans the full width of the AWARDS headline. */
.awards-v2 .aw-copy .hs-intro,
.awards-v2 .aw-copy .hs-intro-body { max-width: none !important; width: 100% !important; }
.awards-v2 .aw-copy .hs-lede { max-width: none !important; width: 100% !important; }

/* 2 — SKIP TO AWARDS previously pinned the section flush under the sticky nav,
   clipping the tops of the letters. Offset the anchor so it lands a little above
   the headline. */
.awards-v2 { scroll-margin-top: calc(var(--nav-h, 64px) + 25px); }

/* Nudge only the LEFT and RIGHT laurel columns up 3% as a rigid group; the
   centre column stays where it is. */
.awards-v2 .al-8,
.awards-v2 .al-3  { top: 34% !important; }
.awards-v2 .al-2,
.awards-v2 .al-10 { top: 51% !important; }
.awards-v2 .al-5,
.awards-v2 .al-6  { top: 68% !important; }

/* Chapter year lines: Bebas Neue, matched to the headline size, solid white. */
.about-para .ap-year {
  font-family: 'Bebas Neue', 'Jost', sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(40px, 4.6vw, 68px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.03em !important;
  color: #ffffff !important;
}
@media (max-width: 1279px) {
  .about-para .ap-year { font-size: clamp(20px, 6.2vw, 34px) !important; line-height: 1.1 !important; }
}
@media (max-width: 767px) {
  .about-para .ap-year { font-size: clamp(17px, 5.8vw, 27px) !important; }
}


/* Stat-ticker unit marks: the count-up script emits the % with an inline
   font-size:0.6em but gives the + no size at all, so the + rendered at full
   digit size. Match them. Base rule (all widths) — the + keeps its own baseline
   position; only its size changes. */
.home-statement .hs-tick .n em { font-size: 0.6em; }

/* Stat ticker, xl and below (the 2x2 grid tier): the base rule bottom-aligns the
   cells, so the two-line "INDEPENDENTLY OWNED" label pushed 100% up while the
   one-line "GUESTS / YR" left 14M+ low. Top-align the cells so both numbers
   share a top edge. Each number moves as a whole; the + is untouched. */
@media (max-width: 1279px) {
  .home-statement .hs-ticker { align-items: start; }
}

/* ===== Statement section media: stills below desktop =====
   The <source media="(min-width: 1280px)"> attributes mean no video file is even
   requested on phones/tablets; these rules swap in the matching still so the
   layout is identical. Desktop (1280+) keeps the videos and hides the stills.
   The stills deliberately carry no .hs-photo--tall/--wide class: those are reveal
   targets (opacity:0 until the observer adds .in), which would leave a still
   permanently invisible. */
.hs-photo-still { display: none; }
@media (max-width: 1279px) {
  .home-statement .hs-photo-fig--video video { display: none !important; }
  /* Inside the crop wrapper the video was absolutely positioned — match it. */
  .home-statement .hs-video-crop .hs-photo-still {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* The two wide stills are direct children of the figure. */
  .home-statement .hs-photo-fig > .hs-photo-still {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}
/* Desktop: the still is hidden only once its sibling video is genuinely playable
   (aboutMediaSwap adds .is-covered). A bare width query hid it before the video
   had selected a source, leaving an empty frame when the viewport crossed 1280px
   without a reload. */
@media (min-width: 1280px) {
  .home-statement .hs-photo-still {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .home-statement .hs-photo-still.is-covered { display: none; }
  .home-statement .hs-photo-fig--video:not(.hs-photo-fig--tall) { position: relative; }
  .home-statement .hs-photo-fig--video video { position: relative; z-index: 1; }
}

/* Hamburger panel links: no salmon + underline-wipe treatment. That hover
   language belongs to the desktop nav bar; inside the open mobile panel the
   items stay white with no underline. */
@media (max-width: 767px) {
  .nav.nav-open ul li a,
  .nav.nav-open ul li a:hover,
  .nav.nav-open ul li a:active,
  .nav.nav-open ul li a[aria-current="page"],
  .nav.nav-open ul li a[aria-current="page"]:hover {
    color: #ffffff !important;
  }
  .nav.nav-open ul li a::after,
  .nav.nav-open ul li a:hover::after,
  .nav.nav-open ul li a[aria-current="page"]::after,
  .nav.nav-open ul li a[aria-current="page"]:hover::after {
    content: none !important;
    transform: none !important;
  }
}

/* Careers heading on phones: "JOIN OUR TEAM" is far longer than LOCATIONS or
   GET IN TOUCH, so the 79px floor in .loc-bigword's shared clamp() (which binds
   below ~545px wide) pushed it off the screen. Scale it purely with the viewport
   here and give the band a right gutter. Desktop and the other pages keep the
   shared clamp untouched. */
@media (max-width: 767px) {
  .careers-flow .loc-bigword-band { padding-right: clamp(40px, 10vw, 145px); }
  .careers-flow .loc-bigword { font-size: 13vw !important; }
}

/* The sticky JOIN OUR TEAM block had BODY as its containing block, so the pin
   never released and the footer scrolled up over it. This scope ends just before
   the footer, so the pin releases there and the footer arrives in normal flow.
   Desktop is unaffected: its max scroll already lands exactly at the pin. */
.careers-pin-scope { position: relative; }

/* ============================================================
   BRANDS — MOBILE CAROUSEL (xl tier and below, brands page only)
   One brand at a time, always in its activated state. Owns its own
   DOM (.bxm*, built at runtime from the desktop list), so nothing
   here can reach the desktop layout. Desktop hides .bxm entirely.
   ============================================================ */
.bxm { display: none; }

@media (max-width: 1279px) {
  body.brands-page .bx-list,
  body.brands-page .bx-stage { display: none !important; }
  body.brands-page .brand-index { padding: 0 !important; min-height: 0 !important; }

  /* BRANDS + THE COLLECTION pin under the nav as ONE block; the lede (moved out
     by the carousel script) scrolls up behind them. No thick sticky band here —
     that treatment is desktop-only. */
  body.brands-page .brands-blank {
    position: sticky !important;
    top: var(--nav-h, 56px) !important;
    z-index: 6 !important;
    background: #000 !important;
    padding-bottom: 10px !important;
  }
  /* Explicit stacking order: the shared mobile rule flattens .hs-grid to a flex
     column and only orders .hs-head, so the eyebrow floated above it. */
  body.brands-page .brands-blank .hs-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  body.brands-page .brands-blank .hs-col,
  body.brands-page .brands-blank .hs-intro { display: contents !important; }
  body.brands-page .brands-blank .hs-head { order: 1 !important; margin: 0 !important; }
  body.brands-page .brands-blank .hs-intro .num { order: 2 !important; margin: 6px 0 0 !important; }
  body.brands-page .bxm-lede {
    position: relative;
    z-index: 1;
    padding: 18px var(--page-gutter, 22px) 22px;
  }

  body.brands-page .bxm {
    display: block;
    position: relative;
    z-index: 5;
    background: #000;
    /* The section's natural height tracks the blurb, so short blurbs let the
       cream ICONIC band peek in and the fold appeared to jump between brands.
       A full-viewport floor puts the band off screen for every brand; the slack
       falls below the dots as black. 100vh (not svh) so a collapsed mobile URL
       bar cannot expose the band. */
    min-height: 88vh;
  }

  /* Full-bleed photo, 4:3, cross-fading between brands. */
  body.brands-page .bxm-photo {
    position: relative;
    /* NOT 100vw + negative margin: 100vw counts the scrollbar gutter while the
       containing block resolves to clientWidth, so the photo overhung both edges
       and gave the document a horizontal scroll range. .bxm is already the full
       content width, so plain 100% is a true full bleed. */
    width: 100%;
    margin-left: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #000;
  }
  body.brands-page .bxm-frame {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.55s ease;
  }
  body.brands-page .bxm-frame.is-on { opacity: 1; }
  /* Blend the photo into the black page top and bottom. */
  body.brands-page .bxm-photo::after {
    content: '';
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background:
      linear-gradient(to bottom, #000 0%, transparent 16%, transparent 84%, #000 100%),
      linear-gradient(to right, rgba(0,0,0,0.55) 0%, transparent 22%, transparent 78%, rgba(0,0,0,0.55) 100%);
  }

  /* Name plate inside salmon corner brackets. */
  body.brands-page .bxm-card { padding: 0 var(--page-gutter, 22px); }
  body.brands-page .bxm-plate {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    margin-top: 4px;
  }
  body.brands-page .bxm-plate::before,
  body.brands-page .bxm-plate::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 14px;
    border: 1px solid var(--accent);
  }
  body.brands-page .bxm-plate::before { left: 0; border-right: none; }
  body.brands-page .bxm-plate::after { right: 0; border-left: none; }
  body.brands-page .bxm-lead {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
  }
  body.brands-page .bxm-code {
    font-family: 'Jost';
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--accent);
  }
  body.brands-page .bxm-dash {
    width: 22px;
    height: 1px;
    background: var(--accent);
    display: inline-block;
  }
  body.brands-page .bxm-name {
    font-family: 'Bebas Neue';
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 0.94;
    color: #fff;
    font-size: clamp(30px, 10.5vw, 62px);
  }
  body.brands-page .bxm-blurb {
    font-family: 'Jost';
    font-weight: 300;
    font-size: clamp(12px, 3.4vw, 15px);
    line-height: 1.55;
    color: rgba(245,241,234,0.78);
    margin: 12px 0 0;
    padding-left: 20px;
    text-wrap: pretty;
  }

  /* Windowed dots — 8 at a time, tappable. */
  body.brands-page .bxm-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 26px 0 34px;
  }
  body.brands-page .bxm-dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(245,241,234,0.42);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
  }
  body.brands-page .bxm-dot.is-on { background: var(--accent); transform: scale(1.18); }
}

/* ===== BRANDS PAGE — MOBILE ONLY (desktop untouched) ===== */
@media (max-width: 1279px) {
  /* The brands page gives the SITE header 104px of extra depth so the desktop
     brand list has room beneath it. Mobile has no such list — restore the normal
     nav depth so BRANDS is not pushed down behind a tall black band. */
  body.brands-page .nav,
  body.brands-page.past-hero .nav { padding-bottom: 16px !important; }

  /* Pin zone: the sticky header releases at THIS element's bottom, which is the
     carousel's top. So BRANDS + eyebrow pin while the lede scrolls behind them,
     then unpin and move up together with the photo, name and blurb. */
  body.brands-page .bxm-pinzone { position: relative; z-index: 6; }
  body.brands-page .brands-blank { padding-top: clamp(10px, 2vh, 22px) !important; }
}

/* ===== Mobile carousel: photo gap, dot scale, brand counter ===== */
@media (max-width: 1279px) {
  /* A little black between the photo and the name plate. */
  body.brands-page .bxm-card { margin-top: 18px; }

  /* Dots and counter share the footer row; counter sits bottom-right. */
  body.brands-page .bxm-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* Leading space separates the dots from the blurb; trailing space keeps
       them off the cream ICONIC band below. */
    padding: clamp(20px, 3.4vh, 34px) var(--page-gutter, 22px) clamp(28px, 5vh, 48px);
  }
  body.brands-page .bxm-dots { gap: 13px; padding: 0; flex: 1 1 auto; }
  /* Inactive dots smaller; the active one keeps its size. */
  body.brands-page .bxm-dot { width: 7px; height: 7px; }
  body.brands-page .bxm-dot.is-on { width: 10px; height: 10px; }

  /* Matches the about-page journey rail counter. */
  body.brands-page .bxm-count {
    flex: 0 0 auto;
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: rgba(217,122,79,0.72);
    font-variant-numeric: tabular-nums;
  }
}