/* ===== Brand tokens (pulled from the OT Breaks logos) ===== */
:root {
  --navy: #25355a;
  --navy-deep: #131d35;
  --orange: #e8772e;
  --orange-dark: #c9611c;
  --gold: #ffb347;
  --cream: #f7f4ee;
  --white: #ffffff;
  --ink: #1b2133;
  --muted: #5d6478;
  --line: #e5e0d6;
  --radius: 16px;
  --shadow: 0 12px 32px rgba(19, 29, 53, 0.12);
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, sans-serif;
  --nav-h: 68px;

  /* ----- cinematic design system (Phase 1). New names only: nothing uses them yet, so they change nothing on
     screen. Later phases build the section environments from these. See docs/PHASE-1-AUDIT.md, section 3. ----- */
  /* environment */
  --env-void: #080d1a;          /* deepest background; matches the 3D scene's clear colour and fog */
  --env-base: #0a1122;          /* section background (the hero's base) */
  --env-panel: #0e1830;         /* architectural panels, cards on dark */
  --env-panel-edge: #1a2747;    /* panel bevels and dividers */
  --brand-navy: #0a2a54;        /* the logo's own navy (wordmark fill), for brand moments */
  --text-hi: #ffffff;
  --text-mid: rgba(255, 255, 255, 0.68);
  --text-low: rgba(255, 255, 255, 0.45);
  --lane: #bcdeff;              /* LED light lanes */
  --lane-warm: #ff8a3d;         /* orange lane accent (at most 1 in 5 lanes) */
  /* one lighting rig: key light upper left, so shadows fall down-right */
  --shadow-key: 0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-key-soft: 0 8px 20px rgba(0, 0, 0, 0.26);
  /* spacing scale */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  /* motion */
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);   /* reveals (the hero's text uses this curve) */
  --ease-out-soft: cubic-bezier(.16, 1, .3, 1);    /* UI, hovers, settles */
  --ease-in-out-cine: cubic-bezier(.65, 0, .35, 1); /* camera moves, scene handoffs */
  --dur-micro: 150ms; --dur-ui: 300ms; --dur-reveal: 900ms; --dur-scene: 1400ms; --stagger: 70ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.08rem;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--orange-dark); }

.container { width: min(1140px, 100% - 32px); margin-inline: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 600; line-height: 1.05;
  text-transform: uppercase; letter-spacing: 0.01em; color: var(--navy); margin: 0 0 0.5em;
}
h2 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; margin: 0; }

.eyebrow {
  font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--orange); margin: 0 0 0.5rem;
}
.lead { font-size: 1.18rem; color: var(--muted); max-width: 640px; }
.small { font-size: 0.92rem; color: var(--muted); }

/* ===== Opening animation (about 2.6s, pure CSS so it always clears) =====
   1. circle badge spins in fast like a flipped coin   2. slows, overshoots a hair and locks in
      (orange ring pulses out)   3. light sweeps across it   4. screen lifts away */
.intro {
  position: fixed; inset: 0; z-index: 1000; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem;
  background: radial-gradient(ellipse at 50% 45%, #23345e 0%, var(--navy-deep) 65%);
  animation: intro-out 0.65s cubic-bezier(.7,0,.3,1) 2s forwards;
}
.no-intro .intro { display: none; }
.intro-mark {
  position: relative; width: clamp(190px, 32vw, 280px); aspect-ratio: 1;
  animation: intro-spin 1.25s cubic-bezier(.2,.7,.2,1) 0.05s both;
}
.intro-mark img { width: 100%; height: 100%; filter: drop-shadow(0 14px 30px rgba(0,0,0,0.45)); }
.intro-ring { /* pulse that fires the moment the badge locks */
  position: absolute; inset: 9%; border-radius: 50%; border: 3px solid var(--orange); opacity: 0;
  animation: intro-ring 0.6s ease-out 1.1s both;
}
.intro-shine { /* light band clipped to the badge's shape */
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.75) 50%, transparent 65%) 120% 0 / 250% 100% no-repeat;
  -webkit-mask: url("assets/otbreaks-badge.webp") center / contain no-repeat;
          mask: url("assets/otbreaks-badge.webp") center / contain no-repeat;
  animation: intro-shine 0.7s ease-in-out 1.25s both;
}
@keyframes intro-spin {
  0%   { opacity: 0; transform: perspective(900px) rotateY(1800deg) scale(0.55); }
  12%  { opacity: 1; }
  84%  { transform: perspective(900px) rotateY(-14deg) scale(1.05); }
  100% { opacity: 1; transform: perspective(900px) rotateY(0deg) scale(1); }
}
@keyframes intro-ring { 0% { opacity: 0.9; transform: scale(0.95); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes intro-shine { to { background-position: -40% 0; } }
@keyframes intro-out   { to { transform: translateY(-100%); visibility: hidden; } }

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

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.6rem; border-radius: 999px;
  font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform .15s, background .15s, color .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn-sm { padding: 0.45rem 1.1rem; font-size: 0.95rem; }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-deep); }
.btn-orange { background: var(--orange); color: var(--white); box-shadow: 0 6px 20px rgba(232, 119, 46, 0.4); }
.btn-orange:hover { background: var(--orange-dark); }
.btn-ghost { border-color: rgba(255,255,255,0.7); color: var(--white); background: rgba(255,255,255,0.06); }
.btn-ghost:hover { background: var(--white); color: var(--navy); }
.btn-black { background: #222; color: #ffe500; }
.btn-ebay { background: #0064d2; color: var(--white); }
.btn-tiktok { background: #fe2c55; color: var(--white); }

/* ===== Nav: translucent deep navy with a soft blur =====
   The hero runs up underneath it (the negative margin; the hero adds the bar's height back as padding), so at the top
   the 3D footage shows softly through the bar. On scroll (script.js adds .is-scrolled) it turns a little more solid
   with a soft shadow, and the wordmark settles slightly smaller: colour and transform changes only, so nothing on the
   page moves. One faint hairline instead of a border. */
.nav {
  position: sticky; top: 0; z-index: 50; margin-bottom: calc(-1 * var(--nav-h));
  background: rgba(8, 13, 26, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 -1px 0 rgba(246, 243, 238, 0.07);
  transition: background-color .35s var(--ease-out-soft), box-shadow .35s var(--ease-out-soft);
}
.nav.is-scrolled { background: rgba(8, 13, 26, 0.72); box-shadow: inset 0 -1px 0 rgba(246, 243, 238, 0.1), 0 10px 30px rgba(2, 4, 9, 0.35); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); width: min(1560px, 100% - 2 * clamp(24px, 4vw, 72px)); }
.nav-logo { display: block; }
.nav-logo img { height: 34px; width: auto; transform-origin: 0 50%; transition: transform .35s var(--ease-out-soft), opacity .2s; }
.nav.is-scrolled .nav-logo img { transform: scale(0.92); }
.nav-logo:hover img { opacity: 0.88; }
.nav-links { display: flex; align-items: center; gap: clamp(1.4rem, 2.4vw, 2.4rem); }
.nav-links a:not(.nav-cta) {
  position: relative; padding: 0.4rem 0;
  color: rgba(246, 243, 238, 0.78); text-decoration: none;
  font-family: "Manrope", var(--font-body); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  transition: color .25s var(--ease-out-soft);
}
/* a thin orange underline grows from the centre on hover and keyboard focus */
.nav-links a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--orange);
  transform: scaleX(0); transition: transform .3s var(--ease-out-soft);
}
.nav-links a:not(.nav-cta):hover, .nav-links a:not(.nav-cta):focus-visible { color: #fff; }
.nav-links a:not(.nav-cta):hover::after, .nav-links a:not(.nav-cta):focus-visible::after { transform: scaleX(1); }
.nav-links a:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 2px; }
/* the one orange call to action: a quiet pill, colour-only hover (no glow, no bounce) */
.nav-cta {
  display: inline-flex; align-items: center; height: 2.4rem; padding: 0 1.25rem; border-radius: 999px;
  background: var(--orange); color: #fff; text-decoration: none;
  font-family: "Manrope", var(--font-body); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background-color .25s var(--ease-out-soft);
}
.nav-cta:hover { background: #f2843b; }
.nav-toggle { display: none; background: none; border: 0; padding: 10px 8px; cursor: pointer; }
.nav-toggle span {
  display: block; width: 22px; height: 2px; border-radius: 2px; background: rgba(246, 243, 238, 0.9); margin: 5px 0;
  transition: transform .3s var(--ease-out-soft), opacity .2s;
}
/* the burger folds into an X while the menu is open */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Hero: cinematic 3D brand stage ===== */
/* A cinematic banner (about 65% of the screen height): the 3D logo reveal (sign.js) settles into close-up
   cinematography behind one centred headline. The tonal backdrop and spotlight below show only if 3D can't load. */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  --hero-h: clamp(420px, 65svh, 760px);   /* the visible banner below the nav */
  --hero-pad: clamp(1.5rem, 3vw, 2.75rem);
  --hero-text: #f6f3ee;                                                 /* warm white */
  background: #080d1a;
  color: var(--hero-text);
  /* the hero also runs up under the translucent nav: its height and top padding add the bar back, so the visible
     banner below the bar is still --hero-h and the headline stays centred in it */
  height: calc(var(--hero-h) + var(--nav-h));
  display: flex; align-items: stretch;
  padding: calc(var(--hero-pad) + var(--nav-h)) 0 var(--hero-pad);
}
.hero > .container { width: min(1560px, 100% - 2 * clamp(24px, 4vw, 72px)); }

/* ----- living environment ----- */
.hero-env { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; --lean: 0; --glow: 0; }
/* tonal backdrop: two broad pools of navy light that drift very slowly */
.env-base {
  position: absolute; inset: -12%;
  background:
    radial-gradient(ellipse 45% 55% at 72% 38%, #1c2c52 0%, transparent 62%),
    radial-gradient(ellipse 45% 55% at 12% 85%, #111c37 0%, transparent 60%),
    linear-gradient(180deg, #0e172b 0%, #0a1122 55%, #070b16 100%);
  animation: env-drift 28s ease-in-out infinite alternate;
}
@keyframes env-drift { to { transform: translate3d(-3%, 2%, 0) scale(1.06); } }
/* the spotlight behind the logo (shows only if the 3D scene can't load) */
.env-spot {
  position: absolute; left: 50%; top: 46%; width: min(1150px, 95vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(135, 165, 235, 0.3) 0%, rgba(90, 120, 200, 0.12) 32%, rgba(232, 119, 46, 0.035) 50%, transparent 66%);
  transform: translate3d(-50%, -50%, 0);
  opacity: calc(0.8 + var(--glow) * 0.35);
}
.env-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  background:
    radial-gradient(ellipse 40% 35% at 50% 100%, rgba(40, 60, 110, 0.35) 0%, transparent 70%),
    linear-gradient(180deg, transparent, rgba(5, 8, 16, 0.55));
}
/* fine grain so the soft gradients never band */
.env-grain {
  position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes float { 50% { transform: translateY(-8px); } }

/* ----- layout: the headline sits centred over the 3D scene -----
   --S  the box the full logo is framed into as the reveal lands (sign.js reads it): 58% of the container width or 92%
        of the hero's inner height, whichever is smaller, centred in the hero. After the reveal the camera moves into
        close-ups that fill the whole hero. */
.hero-inner {
  container-type: inline-size;
  --inner-h: calc(var(--hero-h) - 2 * var(--hero-pad));
  --S: min(58cqw, 0.92 * var(--inner-h));
  display: grid; grid-template: 1fr / 1fr; height: 100%;
}
/* --hl: the headline's size; the sub headline is sized from it */
.hero-copy {
  grid-area: 1 / 1; align-self: center; justify-self: center;
  position: relative; z-index: 2; text-align: center;
  --hl: min(calc(85cqw / 10.02), 0.42 * var(--inner-h));
  /* as the hero scrolls away the headline block lifts a little and fades, ahead of the footage behind it */
  transform: translate3d(0, calc(var(--exit, 0) * -56px), 0);
  opacity: calc(1 - var(--exit, 0) * 1.35);
}

/* headline: one line across ~85% of the hero on desktop. "THE CHASE STARTS HERE." (Big Shoulders Display Black, with
   the script CHASE and the round stop) measures 10.02em, so its size is that share of the container width divided by
   10.02 (never stretched, never wrapped). Shrink-wrapped (inline-block), so its width is the measure the sub headline is fitted to. */
.hero-title {
  display: inline-block; vertical-align: top;
  margin: 0; color: var(--hero-text); white-space: nowrap;
  font-family: "Big Shoulders Display", var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: var(--hl); line-height: 0.9; letter-spacing: 0.005em;
  /* depth, lit like the scene (key light upper left, so shadows fall just below): a crisp two-step shadow right under
     the letters that reads as thickness, a short soft one for lift, and a wide soft one that sets the line above the
     footage. Filter layers, not text-shadow, so they sit beneath the tonal fill below rather than covering it. */
  filter: drop-shadow(0 0.018em 0 rgba(2, 4, 9, 0.6)) drop-shadow(0 0.04em 0.012em rgba(2, 4, 9, 0.45))
          drop-shadow(0 0.08em 0.12em rgba(2, 4, 9, 0.5)) drop-shadow(0 0.16em 0.42em rgba(2, 4, 9, 0.55));
}
.hero-title .line { display: inline-block; }
/* each word is its own piece for the reveal. A subtle tonal fill inside each, still white: a touch brighter at the
   top easing to a soft warm white at the bottom, so the letters read as lit surfaces rather than flat cut-outs */
.hero-title .word {
  display: inline-block;
  background: linear-gradient(180deg, #ffffff 0%, #f5f1ea 45%, #d6cfc4 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* CHASE in the OT Breaks script lettering (assets/chase-script.png: the supplied CHASE artwork, recoloured to the
   wordmark's own navy, white inline and orange, background removed). Its letters stand slightly taller than the
   capitals around it, and it sits a touch below the baseline like the logo's script. */
.hero-title .word-script { background: none; vertical-align: -0.2em; margin: 0 -0.14em; }   /* pulls THE and STARTS in */
.hero-title .word-script img { display: block; height: 1.28em; width: auto; }
/* sub headline: small, wide-tracked caps under the headline, spanning exactly its width (script.js sets the letter
   spacing from the two measured widths, and cancels the spacing after the last letter, so both ends line up) */
.hero-sub {
  display: block; width: max-content; margin: calc(var(--hl) * 0.07) auto 0;
  font-family: "Manrope", var(--font-body); font-weight: 700; font-size: calc(var(--hl) * 0.3); line-height: 1;
  text-transform: uppercase; white-space: nowrap; color: rgba(246, 243, 238, 0.9);
  word-spacing: 0.55em;   /* wider gaps between the words than between the letters, so the three words stay distinct */
  filter: drop-shadow(0 0.06em 0.08em rgba(2, 4, 9, 0.6)) drop-shadow(0 0.2em 0.6em rgba(2, 4, 9, 0.55));
}
/* a round full stop (the typeface's own is square), white like the letters, sitting on the baseline */
.hero-title .stop {
  display: inline-block; width: 0.15em; height: 0.15em; margin-left: 0.05em;
  border-radius: 50%; background: #ddd7cd; vertical-align: baseline;   /* the fill's tone at the baseline */
}

/* ----- the logo stage: centred; only used to frame the full logo as the reveal lands ----- */
.coin-stage {
  grid-area: 1 / 1; justify-self: center; align-self: center;
  position: relative; z-index: 1; width: var(--S); aspect-ratio: 1;
}
.coin-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14%; transition: opacity .4s ease; }
/* the 3D scene: a full-hero canvas */
.hero-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
/* as the hero scrolls away (--exit 0-1, script.js), the footage dims and eases very slightly closer */
.hero.has-scene .hero-scene {
  opacity: calc(1 - var(--exit, 0) * 0.55);
  transform: scale(calc(1 + var(--exit, 0) * 0.06));
}
.hero.has-scene.is-exiting .hero-scene { transition: none; }   /* follow the scroll exactly, no lag */
/* with JavaScript the flat badge stays hidden; it appears only if the 3D logo can't load (sign.js adds .no-scene) */
.js .coin-fallback { opacity: 0; }
.js .hero.no-scene .coin-fallback { opacity: 0.35; }
/* a restrained shade behind the headline, and soft falloff at the edges; it comes in with the headline so the reveal
   itself plays at full strength */
.hero-scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 48% at 50% 50%, rgba(4, 7, 14, 0.62) 0%, rgba(4, 7, 14, 0) 100%),
    linear-gradient(0deg, rgba(4, 7, 14, 0) 28%, rgba(4, 7, 14, 0.38) 50%, rgba(4, 7, 14, 0) 72%),
    linear-gradient(90deg, rgba(4, 7, 14, 0.5) 0%, rgba(4, 7, 14, 0) 18%, rgba(4, 7, 14, 0) 82%, rgba(4, 7, 14, 0.5) 100%),
    linear-gradient(0deg, rgba(4, 7, 14, 0.45) 0%, rgba(4, 7, 14, 0) 25%);
}

/* ----- phones and small tablets: a shorter banner, the headline on two centred lines ----- */
@media (max-width: 900px) {
  .hero { --hero-h: clamp(360px, 58svh, 560px); --hero-pad: 1.25rem; }
  .hero-inner { --S: min(100cqw, 0.9 * var(--inner-h)); }
  .hero-copy { --hl: min(calc(92cqw / 5), 0.22 * var(--inner-h)); }
  .hero-title { white-space: normal; line-height: 0.92; }
  .hero-sub { font-size: calc(var(--hl) * 0.26); margin-top: calc(var(--hl) * 0.12); }
  .hero-title .line { display: block; }
  .env-spot { left: 50%; top: 50%; }
  .env-floor { height: 30%; }
}

/* ----- the entrance sequence (script.js adds .is-loaded; sign.js runs the 3D part on the same clock) -----
   0.0-4.0  the 3D logo reveal (sign.js): macro shots while the logo builds itself, then the pull-back; it lands at 4.0
   4.3-7.5  sign.js: the camera eases into the close-up loop and the light eases down, so the logo recedes
   5.2      the shade behind the headline comes in (2s)
   6.2-7.6  as the camera slows, the headline lands one word at a time, a quarter second apart: THE, CHASE, STARTS,
            HERE. Each one punches in, slightly oversized and motion-blurred, then snaps to size and sharpens.
            Then it holds completely still.
   7.45     the sub headline fades up beneath it
   Nothing stays applied at rest. If the visitor tabs, scrolls or presses a key early, .copy-now shows it at once. */
.js .hero:not(.is-loaded) .hero-env,
.js .hero:not(.is-loaded) .anim-up,
.js .hero:not(.is-loaded) .coin-fallback,
.js .hero:not(.is-loaded) .hero-scene,
.js .hero:not(.is-loaded) .hero-scrim { opacity: 0; }
.js .hero:not(.is-loaded) :is(.word, .hero-sub) { opacity: 0; }
.hero.is-loaded .hero-env { animation: fade-in 1s ease both; }
.hero.is-loaded .anim-up { animation: rise-in .9s cubic-bezier(.19,1,.22,1) var(--d, 0s) backwards; }
.hero.is-loaded .hero-scene { animation: fade-in .45s ease backwards; }
.hero.is-loaded .hero-scrim { animation: fade-in 2s ease 5.2s backwards; }
/* one word at a time (--w is each word's place, 0-3), a quarter second apart */
.hero.is-loaded .word { animation: word-impact .75s cubic-bezier(.16, 1, .3, 1) calc(6.2s + var(--w) * 0.25s) backwards; }
/* the sub headline fades up as HERE. settles */
.hero.is-loaded .hero-sub { animation: rise-in 1s var(--ease-out-expo) 7.45s backwards; }
.hero.copy-now :is(.word, .hero-sub, .hero-scrim) { animation: none !important; }
.js .hero.copy-now :is(.word, .hero-sub, .hero-scrim) { opacity: 1; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } }
/* the impact: in from slightly oversized and blurred, as if it hit the screen, snapping to size and sharpening; it is
   fully visible within the first fifth, so the four words read as four beats rather than one fade */
@keyframes word-impact {
  0%   { opacity: 0; transform: scale(1.45); filter: blur(14px); }
  20%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* pause looping motion while it's scrolled out of view */
.hero.is-offscreen * { animation-play-state: paused !important; }

/* the hero's lower edge dissolves into the dark the next section begins with (#080d1a = --env-void), so the footage
   flows straight into Pick Your Platform with no line between them. Always on, from the first frame of the reveal. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32%; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, #080d1a 0%, rgba(8, 13, 26, 0.85) 22%, rgba(8, 13, 26, 0.4) 58%, rgba(8, 13, 26, 0) 100%);
}

/* ===== Section entrances (script.js tags each piece; nothing here applies without it) =====
   text: fades up a little. head: rises into place through a mask on its own box (the clip moves against the rise, so
   the visible area stays fixed). item: fades up a touch further and settles from 98.5%. --rv-delay staggers each group. */
.rv {
  transition: opacity .8s var(--ease-out-expo), transform 1s var(--ease-out-expo), clip-path 1s var(--ease-out-expo);
  transition-delay: var(--rv-delay, 0ms);
}
.rv-head { clip-path: inset(-0.25em -0.25em -0.25em -0.25em); }
.rv-text:not(.is-in) { opacity: 0; transform: translate3d(0, 18px, 0); }
.rv-head:not(.is-in) { opacity: 0; transform: translate3d(0, 0.6em, 0); clip-path: inset(-0.25em -0.25em 0.85em -0.25em); }
.rv-item:not(.is-in) { opacity: 0; transform: translate3d(0, 34px, 0) scale(0.985); }

/* ===== Sections ===== */
.section { padding: clamp(4rem, 9vw, 6.5rem) 0; }
.section-cream { background: var(--cream); }
.section-navy { background: var(--navy-deep); color: var(--white); }
.section-navy h2 { color: var(--white); }

/* ===== Watch Live: a clean continuation of the hero's dark, deepening slightly toward the bottom ===== */
.scene-watch {
  position: relative; isolation: isolate; overflow: hidden; color: var(--text-mid);
  background: linear-gradient(180deg, var(--env-void) 0%, var(--env-base) 45%, #0b1428 100%);
}
.scene-watch .container { position: relative; z-index: 1; }
/* in the hero's type: Big Shoulders Display Black for the heading, Manrope for the one-line description */
.scene-watch h2 {
  margin: 0; color: var(--hero-text, #f6f3ee);
  font-family: "Big Shoulders Display", var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.8rem, 5.2vw, 4.25rem); line-height: 0.95; letter-spacing: 0.01em;
}
.scene-watch .lead {
  margin: 0.7rem 0 0; max-width: none; color: var(--text-mid);
  font-family: "Manrope", var(--font-body); font-weight: 500; font-size: clamp(1rem, 1.25vw, 1.12rem);
}
/* the cards: brand colours kept, the site's type throughout, buttons as the same tracked-caps pills as Apply Now */
.scene-watch .platform-grid { margin-top: 2rem; gap: 1.25rem; }
.scene-watch .platform-card {
  border-radius: 18px; padding: 1.75rem 1.6rem; gap: 1rem;
  font-family: "Manrope", var(--font-body); font-weight: 500; font-size: 0.96rem; line-height: 1.55;
  box-shadow: 0 14px 34px rgba(2, 4, 9, 0.35);
}
.scene-watch .platform-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(2, 4, 9, 0.45); }
.scene-watch .platform-card .btn {
  height: 2.75rem; padding: 0 1.3rem; border: 0;
  font-family: "Manrope", var(--font-body); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.14em;
  transition: background-color .25s var(--ease-out-soft), filter .25s var(--ease-out-soft);
}
.scene-watch .platform-card .btn:hover { transform: none; filter: brightness(1.12); }
.scene-watch .pc-btns .btn { padding-inline: 0.6rem; font-size: 0.72rem; letter-spacing: 0.12em; }

/* ===== Instagram highlights: titled with the handle, the latest posts in a carousel =====
   Starts in About's cream and eases to white, so the two sections run together without an edge. */
.section-hits {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--cream);   /* About's cream, carried straight on */
  margin-top: -1px;   /* overlap a pixel so no seam row can show */
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
}
/* the photos run a little narrower than the page so the section isn't so tall */
.section-hits .container { max-width: 1000px; }
/* About's pinstripes: the same 48px tile and soft 2px stripe from the left edge, so the columns line up with the
   section above; faded out toward the edges the same way */
.section-hits::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(37, 53, 90, 0) 0, rgba(37, 53, 90, 0.045) 0.5px, rgba(37, 53, 90, 0.07) 1px,
                              rgba(37, 53, 90, 0.045) 1.5px, rgba(37, 53, 90, 0) 2px) 0 0 / 48px 100% repeat-x;
  /* and gone entirely by the bottom edge, where Careers takes over with plain cream */
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 0%, transparent 100%), linear-gradient(#000 55%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 0%, transparent 100%), linear-gradient(#000 55%, transparent);
          mask-composite: intersect;
}
/* the heading is centred over the carousel, sized as a share of its width (script.js sets the size) */
.hits-head { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.hits-head h2 {
  margin: 0; color: var(--navy); white-space: nowrap;
  font-family: "Big Shoulders Display", var(--font-display); font-weight: 900; text-transform: uppercase;
  text-align: center; font-size: clamp(2.2rem, 5.4vw, 6rem); line-height: 1; letter-spacing: 0.01em;
}
/* the header's OT Breaks wordmark stands in for the typed name, set on the same line as ONLY AT */
.hits-mark {
  /* the wordmark's letters (centred at 49.6% of the image's height, measured from the bottom) sit on the middle of
     the capitals, 0.405em up (half their 0.81em height): 0.405em - 0.496 x 1.45em */
  display: inline-block; height: 1.45em; width: auto; vertical-align: -0.314em;
  max-width: none;   /* never squeezed by the page-wide img rule while script.js measures it at a test size */
}
/* small line under the heading, linking to the profile */
.hits-follow {
  display: table; margin: clamp(0.6rem, 1.2vw, 0.9rem) auto 0; color: var(--orange); text-decoration: none;
  font-family: "Manrope", var(--font-body); font-weight: 700; text-transform: uppercase;
  font-size: clamp(0.78rem, 1.1vw, 0.95rem); letter-spacing: 0.22em;
  border-bottom: 2px solid transparent; padding-bottom: 2px; transition: border-color .25s var(--ease-out-soft), color .25s var(--ease-out-soft);
}
.hits-follow:hover, .hits-follow:focus-visible { color: var(--navy); border-bottom-color: currentColor; }
.hits-follow:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 2px; }
/* the entrance mask must not trim the wordmark's edges once the heading has risen */
.hits-head h2.rv-head.is-in { clip-path: inset(-1em -1em -1em -1em); }
.sub-head { margin-top: 3rem; }

/* ===== Live status, from the show schedule (script.js adds .is-live to <html> during show hours) ===== */
.nav-live { background: #ff3b30; animation: live-pulse 2s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255, 59, 48, 0); } }
/* a small red dot after "Watch Live" in the nav, only while live */
.nav-live { display: none; width: 6px; height: 6px; border-radius: 50%; margin-left: 0.5em; vertical-align: 0.15em; }
.is-live .nav-live { display: inline-block; }
/* a "Live" badge in each platform card's corner, only while live */
.pc-live {
  display: none; position: absolute; top: 1.15rem; right: 1.15rem; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.65rem 0.3rem 0.55rem; border-radius: 999px; background: #e0241b; color: #fff;
  font-family: "Manrope", var(--font-body); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.pc-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: live-blink 1.6s ease-in-out infinite; }
@keyframes live-blink { 50% { opacity: 0.35; } }
.is-live .pc-live { display: inline-flex; }

/* Platforms */
.platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.25rem; }
.platform-card {
  position: relative;
  border-radius: 22px; padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: 1.1rem;
  box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s;
}
.platform-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(19,29,53,0.2); }
.platform-card p { margin: 0; flex: 1; }
.platform-card .btn { align-self: flex-start; }
/* Whatnot card: one button per account, side by side, sharing the row equally */
.pc-btns { display: flex; gap: 0.5rem; }
.pc-btns .btn { flex: 1 1 0; min-width: 0; padding-inline: 0.75rem; font-size: 0.95rem; white-space: nowrap; }
.pc-logo { height: 60px; display: flex; align-items: center; gap: 0.6rem; }
.pc-whatnot { background: #ffe500; color: #222; }
.pc-whatnot .pc-logo img { height: 40px; width: auto; }
.pc-ebay { background: var(--white); border: 2px solid var(--line); color: var(--ink); }   /* dark text on the white card */
.pc-ebay .pc-logo img { height: 50px; width: auto; }
.pc-tiktok { background: #000; color: rgba(255,255,255,0.88); }
.pc-tiktok .pc-logo img { height: 48px; width: auto; }

/* ===== About: an editorial layout on cream =====
   Texture from the badge itself: faint baseball pinstripes (fading out toward the edges) and a large, faint badge
   watermark bleeding off the right. Type as in the hero: Big Shoulders Display for the headline, numbers and value
   titles, Manrope for everything else. */
/* ===== What's New: one featured banner on white, with hard stops to the navy above and the cream below ===== */
.section-news { position: relative; background: var(--white); margin-top: -1px; padding: clamp(3rem, 6vw, 4.5rem) 0; }
.section-news h2 {
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem); color: var(--navy);
  font-family: "Big Shoulders Display", var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.8rem, 5.2vw, 4.25rem); line-height: 0.95; letter-spacing: 0.01em;
}
/* the carousel: one full-width banner image per slide (up to 3), rounded like the other cards, with the same arrows
   and dots as the Instagram carousel; swipe or scroll sideways to move between slides */
.news-carousel { position: relative; }
.news-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; outline: none;
  border-radius: 18px; box-shadow: 0 14px 34px rgba(19, 29, 53, 0.12);
}
.news-track::-webkit-scrollbar { display: none; }
.news-slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 3 / 1; position: relative; overflow: hidden; }
.news-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* until an image is added: a navy panel with the badge in the middle */
.news-slide.is-placeholder { background: radial-gradient(ellipse at 50% 45%, #2f4475 0%, var(--navy) 55%, #0b1428 100%); }
.news-slide.is-placeholder img {
  position: absolute; top: 50%; left: 50%; width: auto; height: 62%; transform: translate(-50%, -50%);
  filter: drop-shadow(0 18px 30px rgba(2, 4, 9, 0.45));
}
.news-dots { display: flex; justify-content: center; gap: 8px; margin-top: 1rem; }
.news-dots button { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: rgba(37,53,90,0.2); cursor: pointer; transition: width .3s var(--ease-out-soft), background .3s; }
.news-dots button.active { width: 24px; background: var(--orange); }
/* a single slide needs no arrows or dots */
.news-carousel.is-single .car-btn, .news-carousel.is-single + .news-dots { display: none; }

/* a hard stop from the white What's New straight into the cream */
.about {
  position: relative; overflow: hidden; isolation: isolate; color: var(--ink);
  background: var(--cream);
  margin-top: -1px;   /* overlap a pixel, so the white page behind can't leak through the seam row */
}
.about::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  /* one stripe per 48px tile, drawn with a soft symmetrical 2px profile: a hard 1px line lands on the pixel grid
     differently from stripe to stripe (some crisp, some smeared over two pixels), this looks the same everywhere */
  background: linear-gradient(90deg, rgba(37, 53, 90, 0) 0, rgba(37, 53, 90, 0.045) 0.5px, rgba(37, 53, 90, 0.07) 1px,
                              rgba(37, 53, 90, 0.045) 1.5px, rgba(37, 53, 90, 0) 2px) 0 0 / 48px 100% repeat-x;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 55% 45%, #000 0%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 70% at 55% 45%, #000 0%, transparent 100%);
}
.about-mark {
  position: absolute; z-index: -1; right: -9%; top: 50%; width: min(52vw, 700px); height: auto;
  transform: translateY(-50%) rotate(-10deg); opacity: 0.07; mix-blend-mode: multiply; pointer-events: none;
}
.about .eyebrow {
  font-family: "Manrope", var(--font-body); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.22em; margin-bottom: 1rem;
}
/* headline and story side by side, bottoms aligned */
.about-top { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: end; }
.about h2 {
  margin: 0; color: var(--navy);
  font-family: "Big Shoulders Display", var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.9rem, 5.6vw, 5rem); line-height: 0.92; letter-spacing: 0.005em;
}
.about h2 .accent-word { color: var(--orange); white-space: nowrap; }   /* the orange phrase never splits */
/* the plain N and M here, and N, Y and K in the highlights heading (script.js wraps each one; Big Shoulders' own are steep and notched) */
.about .glyph-n, .hits-head .glyph-n, .section-news .glyph-n { font-family: "Oswald", var(--font-display); font-weight: 700; }
/* the story in Big Shoulders Text, the headline typeface's own thin, tall text cut */
.about-story p {
  margin: 0 0 1rem; color: #3f4759;
  font-family: "Big Shoulders Text", "Manrope", var(--font-body); font-weight: 400;
  font-size: clamp(1.15rem, 1.45vw, 1.32rem); line-height: 1.5; letter-spacing: 0.01em;
}
.about-story p:last-child { margin-bottom: 0; }
/* the numbers: a full-width row between hairlines, large numerals over small tracked labels */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(2.5rem, 5vw, 4rem); }
.stats div { display: flex; flex-direction: column; gap: 0.55rem; padding: clamp(1.25rem, 2.6vw, 2rem) clamp(1rem, 3vw, 2.5rem); }
.stats div:first-child { padding-left: 0; }
.stats div + div { border-left: 1px solid rgba(37, 53, 90, 0.16); }
.stats strong {
  font-family: "Big Shoulders Display", var(--font-display); font-weight: 900; color: var(--navy); text-transform: uppercase; white-space: nowrap;
  font-size: clamp(2.6rem, 4.6vw, 4.4rem); line-height: 0.85; letter-spacing: 0.005em;
}
.stats div > span {
  font-family: "Manrope", var(--font-body); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}
/* the values: numbered columns (01, 02, 03) */
.values {
  list-style: none; counter-reset: value; padding: 0; margin: clamp(2rem, 4vw, 3rem) 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem);
}
.values li { counter-increment: value; display: flex; flex-direction: column; gap: 0.45rem; }
.values li::before {
  content: "0" counter(value); color: var(--orange);
  font-family: "Big Shoulders Display", var(--font-display); font-weight: 800; font-size: 1rem; letter-spacing: 0.12em;
}
.values strong {
  font-family: "Big Shoulders Display", var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 1.55rem; line-height: 1; letter-spacing: 0.01em; color: var(--navy);
}
.values li > span { font-family: "Manrope", var(--font-body); font-weight: 500; font-size: 0.95rem; line-height: 1.6; color: #4a5266; }
@media (max-width: 760px) {
  .about-top { grid-template-columns: 1fr; }
  .about-mark { width: 120vw; right: -55%; top: 30%; opacity: 0.06; }
  /* phones: the stats as three rows (number and label side by side), too narrow for three columns */
  .stats { grid-template-columns: 1fr; gap: 0.35rem; }
  .stats div { flex-direction: row; align-items: baseline; gap: 0.9rem; padding: 0.55rem 0; }
  .stats div + div { border-left: 0; }
  .stats strong { font-size: 2.6rem; }
  .values { grid-template-columns: 1fr; }
}


/* ===== Instagram carousel ===== */
.carousel { position: relative; }
.car-track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; outline: none; padding: 8px 0 30px;   /* room for the cards' soft shadows */
}
.car-track::-webkit-scrollbar { display: none; }
.car-slide {
  flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; position: relative;
  aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; display: block;
  background: linear-gradient(160deg, #2f4475, var(--navy)); color: var(--white); text-decoration: none;
  box-shadow: 0 12px 30px rgba(19, 29, 53, 0.14);
}
.car-slide img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out-soft); }
.car-slide:hover img { transform: scale(1.04); }
.car-slide .ig-icon { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; color: var(--white); filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.car-slide .play { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(0,0,0,.45); display: grid; place-items: center; }
.car-slide .play::after { content: ""; border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 6px; }
.car-caption {
  position: absolute; inset: auto 0 0 0; padding: 3rem 1rem 1rem; margin: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  font-family: "Manrope", var(--font-body); font-weight: 600; font-size: 0.92rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.car-placeholder { position: absolute; inset: 0; display: grid; place-content: center; gap: 0.6rem; text-align: center; padding: 1rem; }
.car-placeholder strong { font-family: "Big Shoulders Display", var(--font-display); font-weight: 900; font-size: 2rem; text-transform: uppercase; color: var(--orange); line-height: 1; }
.car-placeholder span { font-size: 3rem; }
/* arrows: quiet white discs with a hairline ring, turning navy on hover (no bounce) */
.car-btn {
  position: absolute; top: 50%; z-index: 2; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; border: 0;
  background: var(--white); color: var(--navy); font-size: 1.8rem; line-height: 1; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(37, 53, 90, 0.14), 0 10px 24px rgba(19, 29, 53, 0.18);
  transition: background-color .25s var(--ease-out-soft), color .25s var(--ease-out-soft);
}
.car-btn:hover { background: var(--navy); color: var(--white); }
.car-prev { left: -22px; }
.car-next { right: -22px; }
.car-dots { display: flex; justify-content: center; gap: 8px; margin-top: 0.4rem; }
.car-dots button { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: rgba(37,53,90,0.2); cursor: pointer; transition: width .3s var(--ease-out-soft), background .3s; }
.car-dots button.active { width: 24px; background: var(--orange); }

/* Careers */
/* ===== Careers: dark like Platforms, starting with a hard stop under the cream highlights section =====
   Type as in Platforms and About: Big Shoulders Display for headings, Manrope for everything else; cards are quiet
   glass panels on the navy. */
.scene-careers {
  position: relative; overflow: hidden; isolation: isolate; color: var(--text-mid);
  background: linear-gradient(180deg, #0b1428 0%, var(--env-base) 55%, var(--env-void) 100%);
  margin-top: -1px;
}
.scene-careers .eyebrow {
  font-family: "Manrope", var(--font-body); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.22em; margin-bottom: 1rem;
}
.scene-careers h2 {
  margin: 0; color: var(--hero-text, #f6f3ee);
  font-family: "Big Shoulders Display", var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.8rem, 5.2vw, 4.25rem); line-height: 0.95; letter-spacing: 0.01em;
}
.scene-careers .lead {
  margin: 0.9rem 0 0; color: var(--text-mid);
  font-family: "Manrope", var(--font-body); font-weight: 500; font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.65;
}
.scene-careers .sub-head {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 1rem; color: var(--hero-text, #f6f3ee);
  font-family: "Big Shoulders Display", var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: 0.02em;
}
.scene-careers .small { margin: 1.25rem 0 0; color: var(--text-low); font-family: "Manrope", var(--font-body); }
.scene-careers .small a { color: var(--orange); text-underline-offset: 3px; }
.scene-careers .small a:hover { color: #f2843b; }

.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2rem; }
.perk {
  display: flex; flex-direction: column; gap: 0.35rem; padding: 1.5rem 1.4rem; border-radius: 18px;
  background: rgba(255, 255, 255, 0.045); box-shadow: inset 0 0 0 1px rgba(246, 243, 238, 0.09);
}
/* a short orange rule over each perk title */
.perk::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--orange); margin-bottom: 0.6rem; }
.perk strong {
  color: var(--hero-text, #f6f3ee);
  font-family: "Big Shoulders Display", var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1; text-transform: uppercase;
}
.perk span { color: var(--text-mid); font-family: "Manrope", var(--font-body); font-weight: 500; font-size: 0.96rem; }
.roles { display: grid; gap: 0.75rem; }
.role {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.4rem;
  border-radius: 14px; background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 4px 0 0 var(--orange), inset 0 0 0 1px rgba(246, 243, 238, 0.09);
  transition: background-color .25s var(--ease-out-soft);
}
.role:hover { background: rgba(255, 255, 255, 0.07); }
.role h4 {
  color: var(--hero-text, #f6f3ee);
  font-family: "Big Shoulders Display", var(--font-display); font-weight: 800; font-size: 1.4rem; letter-spacing: 0.02em;
}
.role p { margin: 0.2rem 0 0; color: var(--text-mid); font-family: "Manrope", var(--font-body); font-weight: 500; font-size: 0.9rem; }
/* the same orange tracked-caps pill as Apply Now in the header */
.role .role-cta {
  flex: none; height: 2.6rem; padding: 0 1.3rem; border: 0; border-radius: 999px; background: var(--orange); color: #fff;
  font-family: "Manrope", var(--font-body); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background-color .25s var(--ease-out-soft);
}
.role .role-cta:hover { transform: none; background: #f2843b; }
/* "Don't see your role?": a dashed panel under the roles that opens the Apply Direct popup */
.apply-direct {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.75rem;
  padding: 1.15rem 1.4rem; border-radius: 14px; border: 1.5px dashed rgba(246, 243, 238, 0.22);
}
.apply-direct h4 {
  color: var(--hero-text, #f6f3ee);
  font-family: "Big Shoulders Display", var(--font-display); font-weight: 800; font-size: 1.4rem; letter-spacing: 0.02em;
}
.apply-direct p { margin: 0.2rem 0 0; color: var(--text-mid); font-family: "Manrope", var(--font-body); font-weight: 500; font-size: 0.9rem; }
/* outlined, so the orange Apply on Indeed pills above stay the main actions */
.apply-direct-btn {
  flex: none; height: 2.6rem; padding: 0 1.3rem; border: 1.5px solid var(--orange); border-radius: 999px;
  background: transparent; color: var(--orange);
  font-family: "Manrope", var(--font-body); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background-color .25s var(--ease-out-soft), color .25s var(--ease-out-soft);
}
.apply-direct-btn:hover { transform: none; background: var(--orange); color: #fff; }

/* Apply and Contact forms (both in popups) */
.apply-form { background: var(--cream); border-radius: var(--radius); padding: clamp(1.25rem, 4vw, 2rem); display: grid; gap: 1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.apply-form label { display: grid; gap: 0.35rem; font-weight: 600; font-size: 0.92rem; color: var(--navy); }
.apply-form input, .apply-form select, .apply-form textarea {
  font: inherit; font-weight: 400; color: var(--ink); padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--white); width: 100%;
}
.apply-form input:focus, .apply-form select:focus, .apply-form textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232, 119, 46, 0.2); }
.apply-form button { justify-self: start; }
.form-status { margin: 0; font-weight: 600; color: var(--navy); }

/* Footer: on the site's cream, below the dark Careers section with the orange rule between them.
   Brand badge + link columns + contact, with a bottom bar. Big Shoulders Display headings, Manrope text. */
.footer {
  background: var(--cream); color: #4a5266; padding: clamp(2rem, 4vw, 2.75rem) 0 1rem;
  border-top: 3px solid var(--orange); font-family: "Manrope", var(--font-body); font-weight: 500; font-size: 0.9rem;
  line-height: 1.5;
}
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1.4fr; gap: 1.5rem 2rem; }
.footer h3 {
  margin: 0 0 0.6rem; color: var(--navy);
  font-family: "Big Shoulders Display", var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.1em;
}
.footer p { margin: 0; }
.footer a { color: #4a5266; text-decoration: none; transition: color .15s; }
.footer a:hover { color: var(--orange); }
/* badge with the social icons beside it */
.footer-brand { display: flex; align-items: center; gap: 1rem; align-self: start; }
.footer-brand img { width: 76px; }
.footer-social { display: flex; gap: 0.5rem; }
.footer-social a {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy); color: var(--white); transition: background .15s;
}
.footer-social a:hover { background: var(--orange); color: var(--white); }
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }
.footer-col { display: flex; flex-direction: column; gap: 0.35rem; }
/* Contact Us as the same orange tracked-caps pill as Apply Now in the header */
.footer-contact .btn {
  align-self: flex-start; margin-top: 0.3rem; height: 2.3rem; padding: 0 1.1rem; border: 0; box-shadow: none;
  font-family: "Manrope", var(--font-body); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.14em;
}
.footer-contact .btn:hover { transform: none; background: #f2843b; }
.footer-email { color: var(--navy) !important; font-weight: 700; }
.footer-email:hover { color: var(--orange) !important; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.5rem; padding-top: 0.9rem; border-top: 1px solid var(--line);
  font-size: 0.8rem; color: #6b7183;
}
.back-top { font-weight: 700; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; }
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand, .footer-contact { grid-column: 1 / -1; }
}
/* phones: the three link lists stay side by side, in smaller type */
@media (max-width: 560px) {
  .footer-grid { gap: 1.25rem 0.75rem; grid-template-columns: repeat(3, auto); justify-content: space-between; }
  .footer-col { font-size: 0.82rem; }
  .footer-col a { white-space: nowrap; }
  .footer h3 { font-size: 0.95rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}

/* hidden spam trap for Netlify Forms */
.hp { position: absolute; left: -9999px; }

/* Contact Us and Apply Direct popups */
.contact-dialog {
  width: min(600px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto;
  border: 0; border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--white); color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.contact-dialog::backdrop { background: rgba(10, 17, 34, 0.7); backdrop-filter: blur(3px); }
.contact-dialog[open] { animation: dialog-in .25s ease-out; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.contact-dialog h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.contact-dialog .apply-form { margin-top: 1.25rem; background: var(--cream); }
.dialog-close {
  position: absolute; top: 0.75rem; right: 0.9rem; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--cream); color: var(--navy); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.dialog-close:hover { background: var(--orange); color: var(--white); }

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .platform-grid { grid-template-columns: 1fr; max-width: 560px; }
  .about-grid { grid-template-columns: 1fr; }
  .about-badge img { max-width: 220px; }
  .car-slide { flex-basis: calc((100% - 20px) / 2); }
  .car-prev { left: -8px; }
  .car-next { right: -8px; }
}
@media (max-width: 760px) {
  :root { --nav-h: 60px; }
  .nav-logo img { height: 28px; }
  .nav-toggle { display: block; }
  /* the menu: a dark, blurred panel dropping from under the bar, links on hairline rows, the CTA full width */
  .nav-links {
    position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.25rem 24px 1.5rem; display: none;
    background: rgba(8, 13, 26, 0.96);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(246, 243, 238, 0.07), 0 18px 40px rgba(2, 4, 9, 0.5);
  }
  .nav-links.open { display: flex; }
  .nav-links a:not(.nav-cta) { padding: 1rem 0; font-size: 0.82rem; box-shadow: inset 0 -1px 0 rgba(246, 243, 238, 0.07); }
  .nav-links a:not(.nav-cta)::after { display: none; }
  .nav-cta { justify-content: center; height: 3rem; margin-top: 1.25rem; font-size: 0.78rem; }
  .perks, .field-row { grid-template-columns: 1fr; }
  .role, .apply-direct { flex-direction: column; align-items: flex-start; }
  .car-slide { flex-basis: 82%; }
  .car-btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}