/* ===========================================================
   HOOPQUEENS — revamped site stylesheet
   Light-dominant (Wolverine-style): white default sections,
   black sections, photo-background sections.
   Stephenson Media red accent · Inter
   =========================================================== */

/* ABC Diatype (Wolverine's typeface) is a licensed Dinamo font and cannot be
   embedded freely — Inter is used as the closest free neo-grotesque substitute,
   applied as a single family for body + headings to match the reference. */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,500&display=swap');

:root {
  --ink: #16171a;          /* primary dark text on light */
  --charcoal: #2a2c31;
  --slate: #5b606b;        /* muted text on light */
  --mist: #9aa0ad;         /* muted text on dark */
  --paper: #f5f4f1;        /* light grey panel */
  --paper2: #ffffff;       /* white card */
  --line: #e4e5e9;         /* light border */
  --line-strong: #c9ccd2;
  --line-dark: rgba(255,255,255,.14); /* border on dark */
  --black: #0b0b0c;        /* dark sections */
  --black2: #131316;
  --white: #ffffff;
  --accent: #ff3131;       /* Stephenson / MACH1 brand red */
  --accent-deep: #d4140f;  /* deeper red */
  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --r: 14px;
  --hero-inset: clamp(8px, 1vw, 14px);   /* white frame around hero media */
  --hero-radius: clamp(18px, 1.8vw, 30px);
  --bar-gutter: clamp(18px, 2.6vw, 42px); /* navbar edge gutter — hero content aligns to it */
  --ease-morph: cubic-bezier(.215, .61, .355, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
html, body { max-width: 100%; }
/* Lenis smooth-scroll support */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- Futuristic atmosphere ---------- */
::selection { background: var(--accent); color: #ffffff; }
html { scrollbar-color: rgba(255,128,48,.65) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,128,48,.55); border-radius: 10px;
  border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* tabular figures for any engineered number readouts */
.stat .num, .score-nums, .standing .num, .standing .pct, .fixture .date,
[data-count], .tl-item .yr, .j-year { font-variant-numeric: tabular-nums; }

/* scroll-progress bar (filled by JS) */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 300;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent) 60%, #ff8a7a);
  box-shadow: 0 0 14px rgba(255,128,48,.7); transition: width .12s linear; pointer-events: none; }

/* fine film grain over the whole page for a premium, cinematic surface */
body::after { content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .scroll-progress { transition: none; } }

h1, h2, h3, h4, .display {
  font-family: 'Inter', sans-serif;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1, h2, .display { letter-spacing: -0.035em; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
/* full-width variant: content aligns to the navbar gutter, like the hero */
.wrap--full { max-width: none; padding-inline: var(--bar-gutter); }

.eyebrow {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 14.4px;
  font-weight: 700;
  color: var(--accent);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 10px 20px; border-radius: 100px;
  border: 1.5px solid var(--accent); background: var(--accent); color: #ffffff;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
/* flat colour change on hover — no sheen, no glow */
.btn:hover { transform: translateY(-2px); background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
/* pulsating orange glow (used on the Buy tickets CTA) */
.btn--pulse { animation: btnPulse 1.9s ease-in-out infinite; }
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,128,48,.45); }
  50% { box-shadow: 0 0 24px 5px rgba(255,128,48,.7); }
}
@media (prefers-reduced-motion: reduce) { .btn--pulse { animation: none; } }
/* ghost adapts to context: dark text on light by default */
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
/* light button for use on dark / photo / hero backgrounds */
.btn--light { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--light:hover { background: var(--accent); color: #ffffff; border-color: var(--accent); }
/* ghost on dark/photo/hero/page-hero → light outline */
.section--dark .btn--ghost, .section--photo .btn--ghost, .hero .btn--ghost, .page-hero .btn--ghost {
  color: var(--white); border-color: rgba(255,255,255,.45);
}
.section--dark .btn--ghost:hover, .section--photo .btn--ghost:hover, .hero .btn--ghost:hover, .page-hero .btn--ghost:hover {
  background: var(--white); color: var(--ink); border-color: var(--white);
}
.arrow { transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Header (pill morph) ----------
   Header sits over a photo hero or black page-hero, so its text is white
   at the top; once scrolled it collapses into a dark pill (text stays white). */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; justify-content: center;
  /* tighter edge gutter so the bar runs nearly full-bleed, like the reference */
  padding: 24px var(--bar-gutter) 0;
  pointer-events: none;
  transition: padding .45s var(--ease-morph);
}
.site-header > * { pointer-events: auto; }
.header-inner {
  position: relative; flex: 1; max-width: 100vw; /* full-width bar; 100vw keeps the pill morph animatable */
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 6px 2px;
  transition: max-width .55s var(--ease-morph), padding .55s var(--ease-morph);
}
.header-pill {
  position: absolute; inset: 0; z-index: -1; border-radius: 12px;
  background: rgba(14,14,14,.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.06);
  opacity: 0; transform: scaleX(.965);
  transition: opacity .4s var(--ease-morph), transform .55s var(--ease-morph);
}
.site-header.scrolled { padding-top: 14px; }
/* pill width is computed by script.js (--pill-max) so the logo→first-tab gap
   exactly equals the gap between tabs; 705px is the no-JS fallback */
.site-header.scrolled .header-inner { max-width: var(--pill-max, 705px); padding: 9px 20px; gap: 20px; }
.site-header.scrolled .header-pill { opacity: 1; transform: none;
  box-shadow: 0 20px 50px -22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }

/* brandmark: main landscape wordmark only. It stays put on scroll. */
.brandmark { display: flex; align-items: center; transition: none; }
.logo-word { height: 42px; width: auto; max-width: 600px; opacity: 1;
  transition: height .45s var(--ease-morph); }
/* on scroll the wordmark simply shrinks a touch to sit in the pill */
.site-header.scrolled .logo-word { height: 34px; }

.nav { display: flex; align-items: center; gap: 26px; transition: gap .45s var(--ease-morph); }
.site-header.scrolled .nav { gap: 20px; }
.nav a {
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 15px;
  text-transform: none; letter-spacing: 0; white-space: nowrap;
  color: var(--white); position: relative; padding: 4px 0;
}
.nav a::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--accent); transition: width .25s ease; }
.nav a:hover::after, .nav a.active::after { width: 100%; }
/* active tab: the orange line draws in left-to-right on load */
.nav a.active::after { animation: navDraw .55s var(--ease-morph) .35s both; }
@keyframes navDraw { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .nav a.active::after { animation: none; width: 100%; } }
/* nav CTA: HoopQueens-orange pill, black label, real padding.
   High specificity so it beats the `.nav a` link styles. */
.nav a.nav-cta {
  margin-left: 6px;
  background: var(--accent);
  border: 1.5px solid var(--accent);
  color: #151515;
  padding: 8px 18px;
  border-radius: 100px;
  font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .05em;
  transition: opacity .3s ease, background .25s ease, color .25s ease, transform .25s ease;
}
.nav a.nav-cta::after { content: none; }
.nav a.nav-cta:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; transform: translateY(-2px); }
.site-header.scrolled .nav-cta { display: none; }

.menu-toggle { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; }
.menu-toggle span { width: 26px; height: 2px; background: var(--white); display: block; transition: .3s; }

/* ---------- Mobile drawer ---------- */
.drawer {
  position: fixed; inset: 0; z-index: 9500; background: var(--black); color: var(--white);
  display: flex; flex-direction: column; padding: 28px var(--gutter);
  transform: translateX(100%); transition: transform .4s cubic-bezier(.7,0,.2,1);
}
.drawer.open { transform: translateX(0); }
.drawer-top { display: flex; justify-content: space-between; align-items: center; }
.drawer-top img { height: 22px; width: auto; }
.drawer-close { background: none; border: 0; color: var(--white); font-size: 30px; cursor: pointer; line-height: 1; }
.drawer nav { display: flex; flex-direction: column; gap: 6px; margin-top: 48px; }
.drawer nav a {
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: clamp(30px, 9vw, 52px);
  letter-spacing: -0.02em; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12);
  text-transform: uppercase;
}
.drawer nav a:hover { color: var(--accent); }
.drawer-foot { margin-top: auto; color: var(--mist); font-size: 14px; display: flex; gap: 22px; flex-wrap: wrap; }
.drawer-foot a { color: var(--mist); }
.drawer-foot a:hover { color: var(--white); }

/* ---------- Hero (photo background, inset white frame + rounded) ---------- */
.hero {
  position: relative;
  margin: var(--hero-inset);
  min-height: calc(100vh - (var(--hero-inset) * 2));
  display: flex; align-items: flex-end;
  color: var(--white); overflow: hidden;
  border-radius: var(--hero-radius);
}
/* home hero + ticker share one viewport-tall frame, so the ticker sits at the
   bottom of the first screen the visitor sees — every breakpoint */
.hero-frame { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.hero-frame .hero { flex: 1 1 auto; min-height: 0; }
/* white gap below the ticker that matches the inset above the hero */
.hero-frame .ticker-band { margin-bottom: var(--hero-inset); }
/* on mobile, show the parallax "movement" section above "who we are" */
@media (max-width: 760px) {
  .mobile-swap { display: flex; flex-direction: column; }
  .mobile-swap .parallax-field { order: -1; }
}
/* keep the two hero CTAs on one line on small screens */
@media (max-width: 560px) {
  .hero-cta { flex-wrap: nowrap; gap: 8px; }
  .hero-cta .btn { flex: 0 1 auto; padding: 9px 13px; font-size: 11px; letter-spacing: .02em; white-space: nowrap; }
  .hero-cta .btn .arrow { margin-left: 2px; }
}
@media (max-width: 380px) {
  .hero-cta .btn { padding: 9px 11px; font-size: 10.5px; }
  .hero-cta .btn .arrow { display: none; }
}
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__bg img, .hero__bg video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: heroZoom 20s var(--ease-morph) forwards; filter: grayscale(1); }
@keyframes heroZoom { from { transform: scale(1.12); } to { transform: scale(1.0); } }
@media (prefers-reduced-motion: reduce) { .hero__bg img, .hero__bg video { animation: none; transform: none; } }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,8,8,.5) 0%, rgba(8,8,8,.2) 35%, rgba(8,8,8,.85) 100%); }
/* hero content spans the full bar width: text flush-left with the navbar logo,
   buttons (in .hero__row) flush-right with the navbar tabs/Shop button.
   The hero box is inset by --hero-inset, so subtract it from the gutter. */
.hero__inner {
  width: 100%; max-width: none;
  padding-inline: calc(var(--bar-gutter) - var(--hero-inset));
  padding-bottom: clamp(52px, 8.5vh, 120px); padding-top: 120px;
  margin: 0;
}
.hero .eyebrow { margin-bottom: 18px; display: block; }
.hero h1 { font-size: clamp(52px, 11vw, 150px); font-weight: 900; text-transform: none; letter-spacing: -0.04em; line-height: .9; max-width: 16ch; }
.hero h1 .em { color: var(--accent);
  background: linear-gradient(110deg, var(--accent-deep), var(--accent) 45%, #ff9a8a);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-top: 34px; }
.hero__lead { max-width: 520px; font-size: clamp(16px, 1.5vw, 18px); color: rgba(255,255,255,.9); }
.hero__badge {
  position: absolute; top: 120px; right: var(--gutter);
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.25); border-radius: 100px; padding: 10px 18px;
  font-size: 12px; font-family: 'Inter', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
}
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(255,49,49,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(255,49,49,.6);} 70%{box-shadow:0 0 0 12px rgba(255,128,48,0);} 100%{box-shadow:0 0 0 0 rgba(255,128,48,0);} }

/* ---------- Section primitives ---------- */
section { position: relative; }
.section { padding-block: clamp(64px, 10vw, 130px); background: var(--white); /* opaque so the fixed footer cap never shows through */ }
.section--paper { background: var(--paper); }
.section--dark { background: var(--black); color: var(--white); }
/* photo background section — framed like the hero: white inset + rounded corners */
.section--photo {
  color: var(--white); background-size: cover; background-position: center;
  position: relative; isolation: isolate;
  margin: var(--hero-inset);
  border-radius: var(--hero-radius);
  overflow: hidden;
}
.section--photo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(8,8,8,.66); }

.section-head { max-width: 820px; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(34px, 5.8vw, 78px); text-transform: uppercase; letter-spacing: -0.04em; }
.section-head p { margin-top: 18px; font-size: clamp(16px, 1.5vw, 19px); color: var(--slate); }
.section--dark .section-head p, .section--photo .section-head p { color: var(--mist); }

.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.split img { border-radius: var(--r); width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* ---------- Reveal animations (per-section variants) ---------- */
.reveal { opacity: 0; transform: translateY(34px); filter: blur(7px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1), filter .7s ease; }
.reveal.in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .reveal { filter: none; } }
/* slide in from the sides */
.reveal--left { transform: translateX(-64px); }
.reveal--right { transform: translateX(64px); }
/* scale up into place */
.reveal--zoom { transform: scale(.88) translateY(24px); }
/* long rise from below */
.reveal--up-big { transform: translateY(96px); }
/* bouncy pop (logos, small cards) */
.reveal--pop { transform: scale(.55); transition: opacity .5s ease, transform .7s cubic-bezier(.34,1.56,.64,1); }
/* editorial wipe — DISABLED (was hiding headlines in some browsers);
   falls back to the standard fade-up reveal */
.reveal--clip { transform: translateY(34px); }

/* ---------- Team / portfolio grid ---------- */
.brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.brand-card {
  position: relative; aspect-ratio: 3/4; border-radius: var(--r); overflow: hidden;
  display: flex; align-items: flex-end; color: var(--white); isolation: isolate;
  background: var(--paper); border: 1px solid var(--line);
}
.brand-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s ease; }
.brand-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.85)); }
.brand-card:hover img { transform: scale(1.07); }
.brand-card .meta { padding: 18px; width: 100%; }
.brand-card .name { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.01em; text-transform: uppercase; }
.brand-card .cat { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); font-weight: 700; }
.brand-card .plus { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.4); display: grid; place-items: center; font-size: 18px; transition: .3s; z-index: 1; }
.brand-card:hover .plus { background: var(--accent); border-color: var(--accent); color: #ffffff; transform: rotate(90deg); }

/* team crest card — black background so the team logos (dark-bg variants) read */
.crest-card { background: var(--black); border: 1px solid var(--line-dark); border-radius: var(--r);
  aspect-ratio: 1/1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 26px; transition: .3s; }
.crest-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 30px 50px -40px rgba(0,0,0,.4); }
.crest-card img { height: clamp(118px, 13vw, 162px); width: auto; object-fit: contain; transition: transform .35s ease; }
.crest-card .name { font-family: 'Inter', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 19px; color: var(--white); }
/* on a dark section the crests float free — no card box */
.section--dark .crest-card { background: transparent; border-color: transparent; box-shadow: none; padding: 14px; }
.section--dark .crest-card:hover { border-color: transparent; box-shadow: none; transform: none; }
.section--dark .crest-card:hover img { transform: scale(1.07); }

/* ---------- Parallax photo field (Wolverine "portfolio" style) ----------
   Scattered photos drifting at different speeds behind a big centred headline. */
.parallax-field {
  position: relative; background: var(--white);
  min-height: 112vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding-block: 9vh;
}
.parallax-field .pimg {
  position: absolute; border-radius: 5px; object-fit: cover;
  will-change: transform;
}
/* white dissolve zones at the section's top & bottom — photos drifting through
   them fade in/out like the reference; sits above the photos, below the text */
.parallax-field::before, .parallax-field::after {
  content: ''; position: absolute; left: 0; right: 0; height: 13vh;
  z-index: 1; pointer-events: none;
}
.parallax-field::before { top: 0; background: linear-gradient(180deg, #fff 8%, rgba(255,255,255,0) 100%); }
.parallax-field::after { bottom: 0; background: linear-gradient(0deg, #fff 8%, rgba(255,255,255,0) 100%); }
.pf-content { position: relative; z-index: 2; text-align: center; max-width: 1180px; padding-inline: var(--gutter); }
.pf-content h2 { font-size: clamp(48px, 8.4vw, 124px); letter-spacing: -.035em; line-height: .96; }
.pf-content .eyebrow { margin-bottom: 18px; display: block; }
.pf-content .btn { margin-top: 34px; }
@media (max-width: 760px) {
  .parallax-field { min-height: 110vh; contain: paint; }
  /* GPU-composite each photo + smooth out sub-pixel transforms on touch screens */
  .parallax-field .pimg { border-radius: 7px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
  .parallax-field .pimg.pimg--xs { display: none; }
  /* mobile rebalance: with the two mid-flank fillers hidden, the scatter leaned
     right — pull the right-side photos inward so the weight feels centred */
  .parallax-field .pimg:nth-of-type(3) { left: 34% !important; }   /* top centre  */
  .parallax-field .pimg:nth-of-type(4) { left: 52% !important; }   /* top right-centre */
  .parallax-field .pimg:nth-of-type(5) { left: 79% !important; }   /* top right  */
  .parallax-field .pimg:nth-of-type(7) { left: 75% !important; }   /* big mid-right anchor */
  .parallax-field .pimg:nth-of-type(13) { left: 71% !important; }  /* lower right */
  .parallax-field .pimg:nth-of-type(14) { left: 84% !important; }  /* lower far-right */
}

/* ---------- Keyword ticker (under hero) — slim, modern, minimal ---------- */
.ticker-band { background: var(--black); overflow: hidden; position: relative; isolation: isolate;
  border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.ticker-track { display: flex; align-items: center; width: max-content; gap: clamp(26px, 3.4vw, 58px);
  padding-block: clamp(12px, 1.2vw, 16px); animation: ticker 40s linear infinite; }
.ticker-band:hover .ticker-track { animation-play-state: paused; }
/* athletic, scoreboard-style type: heavier weight, tighter tracking */
.ticker-track .kw { font-family: 'Inter', sans-serif; font-weight: 800; text-transform: uppercase;
  letter-spacing: .14em; font-size: clamp(10px, 1.05vw, 13.5px); color: rgba(255,255,255,.55);
  white-space: nowrap; transition: color .3s ease; }
.ticker-track .kw.accent { color: var(--accent); }
.ticker-band:hover .ticker-track .kw { color: rgba(255,255,255,.68); }
.ticker-band:hover .ticker-track .kw.accent { color: var(--accent); }
/* floating orange basketball icon as the separator — no tile/background */
.ticker-track .sep { flex: none; display: inline-flex; align-items: center; color: var(--accent);
  font-size: clamp(13px, 1.35vw, 16px); line-height: 1; opacity: .92; }
.ticker-track .sep i { display: block; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; padding-block: 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display: flex; gap: 16px; width: max-content; animation: scroll-x 52s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track img { height: clamp(280px, 30vw, 400px); width: clamp(230px, 24vw, 325px); object-fit: cover; border-radius: 12px; flex: none; }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
/* single-line variant: stats spread edge to edge; last one flush right (aligns with navbar Shop button) */
/* single line of stats: spread edge-to-edge, extra space only at the row's
   far left/right (section padding) — not between the stats themselves */
.stats--row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px 28px; }
.stats--row .stat:last-child { text-align: right; }
.stats--row .stat .num { font-size: clamp(34px, 4.6vw, 64px); }
.stat .num { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(40px, 5.5vw, 72px); letter-spacing: -0.03em; color: var(--accent); }
.stat .lbl { color: var(--slate); font-size: 14px; text-transform: uppercase; letter-spacing: .12em; margin-top: 4px; }
.section--dark .stat .lbl, .section--photo .stat .lbl { color: var(--mist); }

/* ---------- Band / CTA ---------- */
.band { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; border-radius: var(--r); overflow: hidden; }
.band__text { background: var(--accent); color: #ffffff; padding: clamp(34px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.band__text h2 { font-size: clamp(30px, 4vw, 52px); text-transform: uppercase; }
.band__img img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }

/* ---------- Scores / results table ---------- */
.scores { display: grid; gap: 12px; }
.score-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px;
  background: var(--black2); border: 1px solid var(--line-dark); border-radius: var(--r);
  padding: 18px 22px; transition: .25s; box-shadow: 0 18px 40px -34px rgba(0,0,0,.35);
}
.score-row:hover { border-color: var(--accent); }
.score-team { display: flex; align-items: center; gap: 14px; min-width: 0; }
.score-team.away { justify-content: flex-end; text-align: right; }
.score-team img { height: 46px; width: 46px; object-fit: contain; flex: none; }
.score-team .tn { font-family: 'Inter', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 16px; color: var(--white); }
.score-mid { text-align: center; }
.score-nums { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(22px, 3vw, 32px); letter-spacing: .02em; white-space: nowrap; color: var(--white); }
.score-nums .win { color: var(--accent); }
.score-date { font-size: 11px; color: var(--mist); text-transform: uppercase; letter-spacing: .12em; margin-top: 2px; }
/* score rows on dark sections */
.section--dark .score-row { background: var(--black2); border-color: var(--line-dark); box-shadow: none; }
.section--dark .score-team .tn, .section--dark .score-nums { color: var(--white); }
.section--dark .score-date { color: var(--mist); }

/* ===== 2026 FIXTURE CARDS (dynamic schedule) ===== */
.fixtures { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.fixture { position: relative; display: flex; flex-direction: column; min-height: 188px;
  background: var(--black2); border: 1px solid var(--line-dark); border-radius: var(--r);
  padding: 22px 20px 18px; overflow: hidden; transition: transform .35s var(--ease-morph), border-color .25s, box-shadow .35s; }
.fixture:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 32px 52px -38px rgba(0,0,0,.55); }
.fixture .gn { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mist); font-weight: 700; }
.fixture .date { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(30px, 3.6vw, 46px); line-height: .92; letter-spacing: -.02em; color: var(--white); margin-top: 14px; }
.fixture .date .mo { display: block; font-size: 12px; letter-spacing: .2em; color: var(--mist); font-weight: 700; margin-bottom: 6px; }
.fixture .day { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-top: 8px; }
.fixture .meta { font-size: clamp(12.5px, 1.2vw, 14px); font-weight: 600; color: rgba(255,255,255,.88); text-transform: uppercase; letter-spacing: .06em; margin-top: auto; padding-top: 14px; }
.fixture--final { background: linear-gradient(155deg, var(--accent), var(--accent-deep)); border-color: transparent; }
.fixture--final .gn, .fixture--final .day, .fixture--final .date .mo, .fixture--final .meta { color: rgba(255,255,255,.92); }
.fixture--final .date { color: #fff; }
.fixture--final:hover { box-shadow: 0 32px 58px -34px rgba(235,90,0,.6); }
.fixture--final .crown { position: absolute; top: 16px; right: 16px; font-size: 18px; opacity: .9; }
/* clickable ticket cards */
a.fixture { text-decoration: none; cursor: pointer; }
.fixture__tix { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--accent); color: #0a0a0a;
  font-family: 'Inter', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  font-size: 11.5px; line-height: 1;
  box-shadow: 0 6px 18px rgba(255,128,48,.28);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease; }
.fixture__tix .arrow { transition: transform .25s ease; }
a.fixture:hover .fixture__tix { background: var(--accent-deep); color: #fff;
  transform: translateY(-2px); box-shadow: 0 10px 26px rgba(235,90,0,.4); }
a.fixture:hover .fixture__tix .arrow { transform: translateX(4px); }

/* ===== STANDINGS TABLE (dynamic) ===== */
.standings { display: grid; gap: 10px; }
.standings-head, .standing { display: grid;
  grid-template-columns: 44px minmax(0,1fr) 52px 52px 56px minmax(110px,1.1fr); align-items: center; gap: 16px; }
.standings-head { padding: 0 22px 4px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); font-weight: 700; }
.standings-head .c { text-align: center; }
.standing { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 15px 22px;
  transition: transform .25s var(--ease-morph), border-color .25s, box-shadow .25s; }
.standing:hover { border-color: var(--accent); transform: translateX(5px); box-shadow: 0 20px 38px -34px rgba(0,0,0,.3); }
.standing--lead { border-color: var(--accent); box-shadow: 0 20px 40px -34px rgba(235,90,0,.45); }
.standing .rank { display: flex; align-items: center; gap: 7px; font-family: 'Inter', sans-serif; font-weight: 900; font-size: 22px; color: var(--mist); }
.standing--lead .rank { color: var(--accent); }
.standing .team { display: flex; align-items: center; gap: 14px; min-width: 0; }
.standing .team img { height: 42px; width: 42px; object-fit: contain; flex: none; }
.standing .team .tn { font-family: 'Inter', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 16px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.standing .num { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 18px; color: var(--ink); text-align: center; }
.standing .num.l { color: var(--mist); }
.standing .pct { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 18px; color: var(--accent); text-align: center; }
.standing .winbar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.standing .winbar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); border-radius: 99px; transition: width 1.1s var(--ease-morph); }
.reveal.in .winbar span, .standing.in .winbar span { width: var(--w, 0); }

/* ---------- News ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.news-card { display: flex; flex-direction: column; gap: 14px; }
.news-card .thumb { aspect-ratio: 16/11; border-radius: var(--r); overflow: hidden; background: var(--paper); }
.news-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.news-card:hover .thumb img { transform: scale(1.05); }
.news-card .tag { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.news-card h3 { font-size: 21px; font-weight: 700; color: var(--ink); }
.news-card p { color: var(--slate); font-size: 15px; }
.news-card .news-more { margin-top: 4px; font-family: 'Inter', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: 12.5px; color: var(--accent); display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; }
.news-card .news-more .arrow { transition: transform .25s ease; }
.news-card:hover .news-more .arrow { transform: translateX(4px); }
.section--dark .news-card .news-more { color: var(--accent); }
.section--dark .news-card h3 { color: var(--white); }
.section--dark .news-card p { color: var(--mist); }

/* ---------- Partner logo strip (dark section; 5×2 like the reference) ----------
   Logos keep their natural proportions: wide wordmarks capped by width, tall
   crests capped by height. Grey by default, full colour on hover. */
.partners { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(56px, 7vw, 110px) 24px; align-items: center; justify-items: center; }
.partners img {
  height: auto; object-fit: contain;
  opacity: .75; filter: grayscale(1) brightness(1.7); transition: .3s;
  /* per-logo viewport-relative widths (matching thehoopqueens.com) set inline in the HTML */
}
.partners img:hover { opacity: 1; filter: none; }

/* partner logo marquee — single-line infinite loop, grayscale → colour on hover */
.partner-marquee { overflow: hidden; position: relative; isolation: isolate;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.partner-track { display: flex; align-items: center; gap: clamp(46px, 6.5vw, 104px);
  width: max-content; padding-block: 8px; animation: scroll-x 42s linear infinite; }
.partner-marquee:hover .partner-track { animation-play-state: paused; }
/* per-logo optical height (set inline via --lh) so wordmarks and crests
   read at a balanced visual size instead of a single uniform height */
.partner-track img { height: calc(var(--lh, 40) * 1.72px); width: auto; flex: none; object-fit: contain;
  opacity: .72; filter: grayscale(1) brightness(1.7);
  transition: opacity .3s ease, filter .3s ease, transform .3s ease; }
.partner-track img:hover { opacity: 1; filter: none; transform: scale(1.08); }
@media (max-width: 760px) { .partner-track img { height: calc(var(--lh, 40) * 1.08px); } }
@media (prefers-reduced-motion: reduce) {
  .partner-track { animation: none; flex-wrap: wrap; justify-content: center; }
}

/* ---------- Values / list cards ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.vcard { border: 1px solid var(--line); border-radius: var(--r); padding: 30px; background: var(--white); transition: .3s; }
.vcard:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 30px 50px -40px rgba(0,0,0,.4); }
.vcard .ico { width: 48px; height: 48px; border-radius: 12px; background: rgba(255,128,48,.12);
  border: 1px solid rgba(255,128,48,.22); display: grid; place-items: center;
  color: var(--accent); font-size: 25px; line-height: 1; margin-bottom: 18px; transition: .3s; }
.vcard:hover .ico { background: rgba(255,128,48,.18); }
.vcard .ico i { display: block; }
.vcard h3 { font-size: 20px; margin-bottom: 8px; text-transform: uppercase; color: var(--ink); }
.vcard p { color: var(--slate); font-size: 15px; }
.section--dark .vcard { background: var(--black2); border-color: var(--line-dark); }
.section--dark .vcard h3 { color: var(--white); }
.section--dark .vcard p { color: var(--mist); }

/* ---------- Team grid ---------- */
.team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 1.8vw, 28px); }
.team-card { display: flex; flex-direction: column; text-align: center; }
.team-card .portrait { width: 75%; margin-inline: auto; aspect-ratio: 4/5; border-radius: var(--r); overflow: hidden; background: var(--paper); }
.team-card .portrait img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.team-card:hover .portrait img { transform: scale(1.04); }
.team-card .nm { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: -.01em; margin-top: 16px; }
.team-card .role { color: var(--accent); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-top: 4px; }

/* founder award logos — full content width, evenly distributed */
.award-row { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-top: 26px; }
.award-row a { display: inline-flex; align-items: center; }
.award-row img { height: 50px; width: auto; max-width: none; flex: none; object-fit: contain;
  opacity: .85; filter: grayscale(1) brightness(1.7); transition: .3s; }
.award-row a:hover img { opacity: 1; filter: none; }

/* values word strip (rotating-concept line) — fits on one line, scales to width */
.word-strip { display: flex; flex-wrap: nowrap; white-space: nowrap; align-items: center;
  gap: clamp(8px, 1.4vw, 22px); font-family: 'Inter', sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(11px, 2.05vw, 27px); line-height: 1.1; }
.word-strip span { color: var(--ink); flex: none; }
.word-strip span.alt { color: var(--accent); }
@media (max-width: 540px) {
  .word-strip { flex-wrap: wrap; white-space: normal; justify-content: center; font-size: 16px; gap: 8px 16px; }
}

/* ---------- Timeline ---------- */
.timeline { display: grid; gap: 0; }
.tl-item { display: grid; grid-template-columns: 160px 1fr; gap: 30px; padding: 30px 0; border-top: 1px solid var(--line); }
.tl-item .yr { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(28px, 4vw, 46px); color: var(--accent); }
.tl-item h3 { font-size: 22px; margin-bottom: 6px; text-transform: uppercase; color: var(--ink); }
.tl-item p { color: var(--slate); max-width: 620px; }
.section--dark .tl-item { border-color: var(--line-dark); }
.section--dark .tl-item h3 { color: var(--white); }
.section--dark .tl-item p { color: var(--mist); }

/* ---------- Journey (sticky scroll-progress timeline) ---------- */
.journey-grid { display: grid; grid-template-columns: 0.85fr 44px 1.25fr; gap: clamp(14px, 2.6vw, 44px); align-items: start; }
.journey-head { position: sticky; top: 24vh; align-self: start; }
.journey-head h2 { font-size: clamp(30px, 4.4vw, 62px); text-transform: uppercase; line-height: 1.05; }
.journey-head .eyebrow { margin-bottom: 16px; }

.journey-track { position: relative; align-self: stretch; }
.journey-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: var(--line); border-radius: 2px; overflow: hidden; }
.journey-line-fill { position: absolute; left: 0; top: 0; width: 100%; height: var(--jprog, 0%); background: var(--accent); transition: height .15s linear; }
.journey-dot { position: sticky; top: 46vh; width: 20px; height: 20px; margin: 0 auto; border-radius: 50%;
  border: 2px solid var(--accent); background: var(--paper); display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(245,244,241,1); }
.journey-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transition: transform .3s ease; }

.journey-items { display: grid; gap: clamp(56px, 11vh, 150px); padding-block: 6vh; }
.j-item { display: grid; grid-template-columns: minmax(78px, auto) 1fr; gap: clamp(16px, 2.2vw, 36px);
  opacity: .3; transform: translateY(14px); transition: opacity .55s ease, transform .55s var(--ease-morph); }
.j-item.active { opacity: 1; transform: none; }
.j-year { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(30px, 4vw, 54px); letter-spacing: -.03em; line-height: 1; color: var(--mist); transition: color .5s ease; }
.j-item.active .j-year { color: var(--accent); }
.j-body h3 { font-size: clamp(18px, 1.6vw, 22px); text-transform: uppercase; margin-bottom: 8px; }
.j-body p { color: var(--slate); max-width: 560px; font-size: 16px; }

@media (max-width: 860px) {
  .journey-grid { grid-template-columns: 1fr; gap: 28px; }
  .journey-head { position: static; }
  .journey-track { display: none; }
  .journey-items { padding-block: 0; gap: 38px; }
  .j-item { opacity: 1; transform: none; }
  .j-item.dim-static { opacity: 1; }
}

/* ---------- FAQ accordion ---------- */
.faq { border-top: 1px solid var(--line); max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 4px; font-family: 'Inter', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
  font-size: clamp(16px, 1.7vw, 21px); color: var(--ink); transition: color .25s ease; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary::after { content: '+'; flex: none; font-weight: 400; font-size: 30px; line-height: 1; color: var(--accent); transition: transform .3s var(--ease-morph); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-a { padding: 0 4px 26px; max-width: 720px; }
.faq-a p { color: var(--slate); font-size: 16px; line-height: 1.6; }
.section--dark .faq { border-color: var(--line-dark); }
.section--dark .faq-item { border-color: var(--line-dark); }
.section--dark .faq-item summary { color: var(--white); }
.section--dark .faq-a p { color: var(--mist); }

/* ---------- Jobs ---------- */
.job { display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 20px; align-items: center; padding: 24px 0; border-top: 1px solid var(--line); transition: .25s; }
.job:hover { padding-inline: 12px; background: var(--paper); }
.job h3 { font-size: 20px; text-transform: uppercase; color: var(--ink); }
.job .meta { color: var(--slate); font-size: 14px; }
.job .go { font-family: 'Inter', sans-serif; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; font-size: 14px; }

/* ---------- Footer (always dark) ---------- */
.site-footer { background: var(--black); color: var(--mist); padding-block: 70px 36px; }
.footer-cta { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-cta h2 { color: var(--white); font-size: clamp(28px, 4vw, 52px); max-width: 680px; text-transform: uppercase; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-block: 48px; }
.footer-grid h4 { color: var(--white); font-family: 'Inter', sans-serif; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.footer-grid a { display: block; padding: 6px 0; color: var(--mist); font-size: 15px; }
.footer-grid a:hover { color: var(--accent); }
.footer-grid p { color: var(--mist); }
.footer-logo { height: 26px; width: auto; margin-bottom: 16px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; }
.footer-bottom .links { display: flex; gap: 22px; flex-wrap: wrap; }

/* ---------- Footer cap (Wolverine-style) ----------
   Below the footer: full-width photo in a rounded white frame with the
   landscape logo | divider | secondary mark centred over it. */
.footer-cap-wrap { position: relative; }
.footer-cap {
  position: relative;
  margin: var(--hero-inset);
  border-radius: var(--hero-radius);
  overflow: hidden; isolation: isolate;
  /* full-width landscape rectangle at every screen size — width fills the row,
     height derives from a flat cinematic ratio (no max-height, which would
     otherwise force the width to shrink) */
  width: auto; aspect-ratio: 5 / 2;
  display: flex; align-items: center; justify-content: center;
}
.footer-cap__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.footer-cap::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(8,8,8,.45); }
.footer-cap__logos { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 38px); padding-inline: var(--gutter); }
.footer-cap__logos .fc-word { height: clamp(48px, 8.5vw, 130px); width: auto; }
.footer-cap__logos .fc-divider { width: 2.5px; height: clamp(50px, 8.6vw, 132px); background: rgba(255,255,255,.55); flex: none; }
.footer-cap__logos .fc-mark { height: clamp(64px, 11vw, 168px); width: auto; }

/* ---------- Page hero (inner pages, dark) — inset white frame + rounded, like the home hero ---------- */
.page-hero {
  margin: var(--hero-inset);
  border-radius: var(--hero-radius);
  padding: 170px var(--gutter) clamp(60px, 8vw, 110px);
  background: var(--black); color: var(--white);
  position: relative; overflow: hidden;
}
.page-hero .wrap { padding-inline: 0; position: relative; z-index: 1; }
/* slow, clean Ken Burns zoom on photo page-heroes — the ::before inherits each
   page's inline background image and gently scales in and out */
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: inherit; background-size: cover; background-position: center;
  transform: scale(1.06); animation: heroKenBurns 14s ease-in-out infinite alternate; will-change: transform; }
@keyframes heroKenBurns { from { transform: scale(1.06); } to { transform: scale(1.22); } }
.page-hero h1 { font-size: clamp(44px, 9vw, 120px); text-transform: uppercase; font-weight: 900; }
.page-hero p { color: rgba(255,255,255,.9); max-width: 640px; margin-top: 22px; font-size: clamp(16px, 1.6vw, 20px); }

/* ---------- Testimonial cards (community voices) ---------- */
.tcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; display: flex; flex-direction: column; gap: 14px; transition: .3s; }
.tcard:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 30px 50px -40px rgba(0,0,0,.4); }
.tcard .mk { color: var(--accent); font-family: 'Inter', sans-serif; font-weight: 900; font-size: 44px; line-height: .4; }
.tcard .q { font-family: 'Inter', sans-serif; font-weight: 700; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.32; letter-spacing: -.01em; color: var(--ink); }
.tcard .by { color: var(--accent); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin-top: auto; }

/* founder letter signature */
.letter-sig { margin-top: 26px; font-weight: 700; letter-spacing: .04em; color: #fff; font-size: 15px; }

/* ---------- Editorial pull-quote (cinematic, emotional) ---------- */
.pullquote-section { text-align: center; padding-block: clamp(100px, 16vw, 220px); }
.pullquote-section .eyebrow { color: var(--accent); }
.pullquote-text { font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(34px, 6.6vw, 96px); line-height: 1.0; text-transform: uppercase;
  max-width: 16ch; margin: 22px auto 0; color: #fff; }
.pullquote-text .em { color: var(--accent);
  background: linear-gradient(110deg, var(--accent-deep), var(--accent) 45%, #ff9a8a);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pullquote-mark { font-family: 'Inter', sans-serif; font-weight: 900; color: var(--accent);
  font-size: clamp(48px, 7vw, 96px); line-height: .6; display: block; margin-bottom: 8px; }
.pullquote-cite { margin-top: clamp(26px, 4vw, 44px); font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); font-style: normal; }

/* founder voice quote — emotional accent inside a bio block */
.founder-quote { font-family: 'Inter', sans-serif; font-weight: 700; color: #fff;
  font-size: clamp(20px, 2.1vw, 28px); line-height: 1.25; letter-spacing: -.01em;
  margin-top: 26px; padding-left: 22px; border-left: 3px solid var(--accent); }

/* ---------- Misc ---------- */
.lead-xl { font-size: clamp(22px, 3vw, 40px); font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -.02em; line-height: 1.18; color: var(--ink); }
.section--dark .lead-xl, .section--photo .lead-xl { color: var(--white); }
.muted { color: var(--slate); }
.section--dark .muted, .section--photo .muted { color: var(--mist); }

/* ===========================================================
   FUTURISTIC OVERHAUL — depth glow, glass spotlight, edge light
   =========================================================== */

/* dark sections: clean flat black (orange corner flare + grid removed) */
.section--dark { isolation: isolate; overflow: hidden; }
.section--dark::before { display: none; }
.section--dark > * { position: relative; z-index: 1; }
.page-hero::after { display: none; }

/* glassy edge-light on dark cards */
.section--dark .vcard, .fixture, .score-row, .crest-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 40px -34px rgba(0,0,0,.5);
}

/* ---- Cursor spotlight (class added by JS to cards) ---- */
.spotlight::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  z-index: 4; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(190px circle at var(--mx, 50%) var(--my, 50%), rgba(255,128,48,.16), transparent 60%);
}
.spotlight:hover::after { opacity: 1; }
/* on dark cards the spotlight glows a touch brighter */
.section--dark .spotlight::after, .fixture.spotlight::after {
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(255,128,48,.22), transparent 60%);
}
@media (prefers-reduced-motion: reduce) {
  .spotlight::after { display: none; }
  .section--dark::before, .page-hero::after { background-image: none; }
  .page-hero::before { animation: none; }
}

/* ===========================================================
   CINEMATIC LAYER — load curtain, aurora, glow cursor, mask reveal
   =========================================================== */

/* --- Branded load curtain (markup injected at top of <body>) --- */
.preloader {
  position: fixed; inset: 0; z-index: 10000; background: var(--black);
  display: grid; place-items: center; overflow: hidden;
  transition: transform .9s var(--ease-morph) .25s, opacity .6s ease .45s;
}
.preloader::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 45%, rgba(255,128,48,.16), transparent 70%);
}
.preloader.done { transform: translateY(-100%); opacity: 0; }
.preloader__inner { display: inline-flex; flex-direction: column; align-items: stretch; gap: 18px; position: relative; width: max-content; }
.preloader__mark { height: clamp(34px, 5.5vw, 52px); width: auto; max-width: 78vw;
  filter: drop-shadow(0 0 26px rgba(255,128,48,.4)); animation: plPulse 1.5s ease-in-out infinite; }
.preloader__bar { width: 100%; height: 2px; background: rgba(255,255,255,.16); border-radius: 3px; overflow: hidden; }
.preloader__bar span { display: block; height: 100%; width: 42%; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: plLoad 1.15s var(--ease-morph) infinite; }
.preloader__word { font-family: 'Inter', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: .42em; font-size: 11px; color: rgba(255,255,255,.55); padding-left: .42em; }
@keyframes plPulse { 0%,100% { opacity: .65; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }
@keyframes plLoad { 0% { transform: translateX(-130%); } 100% { transform: translateX(320%); } }
/* no-JS / safety fallback: auto-clear the curtain even if JS never fires */
.preloader { animation: plSafety 0s linear 3.2s forwards; }
@keyframes plSafety { to { transform: translateY(-100%); opacity: 0; visibility: hidden; } }

/* ===========================================================
   FIRST-LOAD INTRO — minimal 3D: the main wordmark rotates in slowly and
   smoothly on a perspective axis with extruded depth, then gives a gentle
   3D float so the depth is clearly readable. Plays once per visit.
   =========================================================== */
.intro { position: fixed; inset: 0; z-index: 10001; background: var(--black);
  display: flex; align-items: center; justify-content: center;
  padding-inline: 24px; opacity: 1; transition: opacity .7s ease; perspective: 1100px; }
.intro.exit { opacity: 0; transition: opacity .45s cubic-bezier(.16,1,.3,1); }
.intro__mark { height: clamp(44px, 8vw, 100px); width: auto; opacity: 0; transform-style: preserve-3d;
  transform: rotateY(-66deg) rotateX(4deg) scale(.9);
  /* stacked accent-deep shadows fake an extruded 3D edge on the flat wordmark */
  filter: drop-shadow(2px 2px 0 rgba(235,90,0,.6)) drop-shadow(4px 4px 0 rgba(235,90,0,.36))
          drop-shadow(6px 6px 0 rgba(235,90,0,.18)) drop-shadow(0 18px 30px rgba(0,0,0,.55));
  /* one continuous, decelerating rotation — no mid stop, so the spin reads seamless */
  animation: introMark 1.5s cubic-bezier(.16, .72, .3, 1) .05s 1 forwards; }
@keyframes introMark {
  0%   { opacity: 0; transform: rotateY(-66deg) rotateX(4deg) scale(.9); }
  22%  { opacity: 1; }
  58%  { transform: rotateY(11deg) rotateX(-2deg) scale(1); }
  100% { opacity: 1; transform: rotateY(-11deg) rotateX(2deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .intro__mark { animation: none; opacity: 1; transform: none; } }

/* --- Aurora removed: dark sections stay clean flat black --- */
.aurora { display: none !important; }
.aurora--legacy { position: absolute; inset: -25%; z-index: 0; pointer-events: none; overflow: hidden;
  filter: blur(64px); opacity: .55; }
.aurora::before, .aurora::after { content: ''; position: absolute; border-radius: 50%; }
.aurora::before { width: 48%; height: 64%; left: 60%; top: -12%;
  background: radial-gradient(circle, rgba(255,128,48,.55), transparent 64%); animation: auroraA 17s ease-in-out infinite; }
.aurora::after { width: 42%; height: 58%; left: -12%; top: 58%;
  background: radial-gradient(circle, rgba(235,90,0,.42), transparent 64%); animation: auroraB 22s ease-in-out infinite; }
@keyframes auroraA { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-8%,6%,0) scale(1.18); } }
@keyframes auroraB { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(10%,-7%,0) scale(1.22); } }

/* --- Trailing cursor: flat orange circle (desktop; element injected by JS) --- */
.cursor-glow { position: fixed; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%;
  pointer-events: none; z-index: 9997; opacity: 0; transform: translate(-50%, -50%);
  background: var(--accent);
  transition: width .25s ease, height .25s ease, opacity .35s ease; will-change: transform; }
.cursor-glow.show { opacity: 1; }
.cursor-glow.hot { width: 40px; height: 40px; opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  .preloader__mark, .preloader__bar span { animation: none; }
  .aurora { display: none; }
  .cursor-glow { display: none; }
}

/* ---------- Timed promo popup ---------- */
.promo-pop { position: fixed; inset: 0; z-index: 10002; display: none; align-items: center; justify-content: center; padding: 24px; }
.promo-pop.open { display: flex; }
.promo-pop__backdrop { position: absolute; inset: 0; background: rgba(8,8,8,.72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.promo-pop__inner { position: relative; z-index: 1; max-width: 94vw; max-height: 75vh;
  animation: promoIn .5s var(--ease-morph); }
.promo-pop__inner img { height: 75vh; width: auto; max-width: 94vw; max-height: 75vh; object-fit: contain;
  border-radius: 16px; display: block; box-shadow: 0 40px 90px -30px rgba(0,0,0,.65); }
.promo-pop__close { position: absolute; top: -16px; right: -16px; width: 42px; height: 42px; border-radius: 50%;
  border: none; background: var(--accent); color: #ffffff; font-size: 26px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 8px 26px -6px rgba(0,0,0,.5);
  transition: transform .2s ease, background .2s ease, color .2s ease; }
.promo-pop__close:hover { background: var(--accent-deep); color: #fff; transform: scale(1.08); }
@keyframes promoIn { from { opacity: 0; transform: scale(.9) translateY(12px); } to { opacity: 1; transform: none; } }
/* phones: shrink the popup image ~15% so it sits more comfortably */
@media (max-width: 760px) {
  .promo-pop__inner { max-height: 64vh; }
  .promo-pop__inner img { height: 64vh; max-height: 64vh; }
}
@media (max-width: 480px) { .promo-pop__close { top: -12px; right: -8px; width: 38px; height: 38px; font-size: 23px; } }

/* ===========================================================
   MOBILE APP-STYLE BOTTOM TAB BAR — slides up after the hero frame.
   Phones only; floats over content like a native app's tab bar.
   =========================================================== */
.app-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  display: none; align-items: flex-end; justify-content: space-around; gap: 2px;
  padding: 9px 8px calc(9px + env(safe-area-inset-bottom, 0px));
  background: rgba(13,13,13,.9); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border-top: 1px solid rgba(255,255,255,.1); box-shadow: 0 -12px 34px rgba(0,0,0,.42);
  transform: translateY(135%); transition: transform .42s cubic-bezier(.22,.85,.3,1); }
.app-tabbar.show { transform: translateY(0); }
.app-tabbar .tab { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none; color: rgba(255,255,255,.6);
  font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 0; transition: color .2s ease; -webkit-tap-highlight-color: transparent; }
.app-tabbar .tab i { font-size: 22px; line-height: 1; }
.app-tabbar .tab:active { color: #fff; }
.app-tabbar .tab.active { color: #fff; }
/* center "Tickets" — raised FAB-style action button */
.app-tabbar .tab--cta { color: var(--accent); font-weight: 800; }
.app-tabbar .tab--cta i { display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-top: -26px; border-radius: 50%;
  background: linear-gradient(150deg, var(--accent), var(--accent-deep)); color: #0f0f0f; font-size: 25px;
  box-shadow: 0 8px 22px rgba(235,90,0,.5); border: 3px solid rgba(13,13,13,.92); }
.app-tabbar .tab--cta:active i { transform: scale(.94); }
@media (max-width: 760px) { .app-tabbar { display: flex; } }
@media (prefers-reduced-motion: reduce) { .app-tabbar { transition: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid, .cards-3 { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .partners { grid-template-columns: repeat(3, 1fr); gap: 48px 28px; }
}
@media (max-width: 1080px) {
  .nav { display: none; }
  .menu-toggle { display: flex; }
  /* tablet: each game becomes one tidy horizontal row (like the championship) */
  .fixtures { grid-template-columns: 1fr; gap: 12px; }
  .fixture { min-height: 0; flex-direction: row; align-items: center; flex-wrap: wrap;
    gap: 4px 22px; padding: 18px 24px; }
  .fixture .gn { flex: 0 0 auto; min-width: 124px; }
  .fixture .date { margin-top: 0; display: flex; align-items: baseline; gap: 8px;
    font-size: clamp(24px, 5vw, 32px); min-width: 118px; }
  .fixture .date .mo { display: inline; margin: 0; font-size: 12px; }
  .fixture .day { margin-top: 0; flex: 0 0 auto; }
  .fixture .meta { margin-top: 0; padding-top: 0; margin-left: auto; text-align: right; }
  .fixture__tix { flex-basis: 100%; margin-top: 8px; align-self: flex-start; }
  .fixture--final { min-height: 0; }
}
@media (max-width: 760px) {
  .split, .band { grid-template-columns: 1fr; }
  .news-grid, .cards-3, .team-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }   /* keep stats two columns on phones */
  .footer-cta { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .tl-item, .job { grid-template-columns: 1fr; gap: 8px; }
  .job .go { justify-self: start; }
  .hero__badge { display: none; }
  .partners { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
  .partners img { width: auto !important; max-height: 64px; max-width: 70%; }
  .score-row { padding: 14px; gap: 10px; }
  .score-team img { height: 36px; width: 36px; }
  .fixtures { grid-template-columns: 1fr 1fr; }
  /* compact standings: hide L + win-share, keep rank/team/W/PCT */
  .standings-head, .standing { grid-template-columns: 32px minmax(0,1fr) 40px 52px; gap: 10px; }
  .standings-head span:nth-child(4), .standings-head span:nth-child(6),
  .standing .num.l, .standing .winbar { display: none; }
  .standing { padding: 13px 16px; }
  .standing .team img { height: 34px; width: 34px; }
  .standing .team .tn { font-size: 14px; }
}

/* ===========================================================
   RESPONSIVE HARDENING — tablet + mobile (navbar, overflow, motion)
   =========================================================== */

/* --- Tablet (≤1024): lighten the heaviest effects for smoother scroll --- */
@media (max-width: 1024px) {
  .aurora { filter: blur(48px); opacity: .42; }
  .cursor-glow { display: none; }            /* touch/hybrid: no trailing cursor */
  .journey-head { top: 18vh; }
  .section-head { margin-bottom: 44px; }
}

/* --- Below the desktop nav: brandmark fits the hamburger row cleanly --- */
@media (max-width: 1080px) {
  .site-header { padding-top: 18px; }
  .logo-word { height: 34px; }
  .logo-mark { height: 46px; }
  .logo-divider { height: 38px; }
  /* the pill morph is a desktop flourish — keep the wordmark steady on small screens */
  .site-header.scrolled .header-inner { max-width: none; padding: 9px 16px; }
  .site-header.scrolled .logo-word { max-width: 600px; opacity: 1; }
  .site-header.scrolled .logo-divider { width: 1.5px; opacity: .45; }
  .site-header.scrolled .brandmark { gap: 14px; }
  .menu-toggle { position: relative; z-index: 2; }
}

/* --- Tablet portrait & large phones (≤860) --- */
@media (max-width: 860px) {
  .parallax-field { min-height: 92vh; }
  .stats--row { gap: 26px 24px; }
  .stats--row .stat:last-child { text-align: left; }   /* avoid lone right-aligned stat when wrapped */
  .footer-bottom { justify-content: flex-start; }
}

/* --- Phones (≤760): tighten hero, drop the secondary mark, calm motion --- */
@media (max-width: 760px) {
  .hero__inner { padding-top: 92px; padding-bottom: 44px; }
  .hero h1 { font-size: clamp(32px, 9.5vw, 58px); }
  .hero__row { margin-top: 26px; }
  /* show only the wordmark in the header — guarantees no overflow */
  .logo-divider, .logo-mark { display: none; }
  .logo-word { height: 30px; }
  .site-header.scrolled .logo-word { max-width: 600px; opacity: 1; }
  /* aurora's big blur is costly on phones; the depth-glow already carries the mood */
  .aurora { display: none; }
  .reveal { filter: blur(4px); }              /* lighter focus-in on small GPUs */
  .scroll-progress { height: 2px; }
}

/* --- Small phones (≤520) --- */
@media (max-width: 520px) {
  .hero h1 { font-size: clamp(26px, 9.5vw, 44px); }
  .page-hero { padding-top: 130px; }
  .page-hero h1 { font-size: clamp(38px, 13vw, 64px); }
  .section-head h2 { font-size: clamp(30px, 9vw, 48px); }
  /* footer stays two columns on phones; brand block spans the top */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .btn { font-size: 13px; padding: 10px 18px; }
  .preloader__mark { height: 40px; }
}

/* --- Phones: schedule cards distributed across the full card width — label +
   day on the top row at opposite ends, big date + venue on the second row --- */
@media (max-width: 600px) {
  .fixtures { grid-template-columns: 1fr; gap: 12px; }
  .fixture { display: grid; grid-template-columns: 1fr auto;
    grid-template-areas: "gn day" "date meta";
    align-items: center; row-gap: 16px; column-gap: 14px;
    min-height: 0; padding: 22px 22px; }
  .fixture .gn { grid-area: gn; min-width: 0; }
  .fixture .day { grid-area: day; justify-self: end; margin: 0; }
  .fixture .date { grid-area: date; margin: 0; display: flex; align-items: baseline; gap: 8px;
    font-size: clamp(30px, 9vw, 42px); line-height: 1; }
  .fixture .date .mo { display: inline; margin: 0; font-size: 13px; }
  .fixture .meta { grid-area: meta; justify-self: end; text-align: right; margin: 0; padding: 0; }
  .fixture__tix { grid-column: 1 / -1; justify-self: start; margin-top: 10px; }
  .fixture--final .crown { display: none; }
}

/* --- Phones: Our Impact stats in a clean 2-column grid --- */
@media (max-width: 700px) {
  .stats--row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 18px; }
  .stats--row .stat, .stats--row .stat:last-child { text-align: left; }
}

/* --- Phones: About founder section stacks (photo over text), and the
   "As featured in" row centers with the logos beneath the label --- */
@media (max-width: 760px) {
  .founder-split { grid-template-columns: 1fr !important; }
  .founder-split img { aspect-ratio: 3 / 2 !important; object-fit: cover; object-position: center 18%; }
  /* centered "As featured in" label, with all three logos on one line beneath */
  .award-row { justify-content: center; gap: 16px; flex-wrap: wrap; }
  .award-row > span { flex-basis: 100%; text-align: center; margin: 0 0 6px; }
  .award-row a { flex: 0 0 auto; }
  .award-row a:nth-of-type(1) img { height: 42px !important; }   /* Forbes */
  .award-row a:nth-of-type(2) img { height: 58px !important; }   /* Uninterrupted */
  .award-row a:nth-of-type(3) img { height: 40px !important; }   /* Women of Influence+ */
}

/* --- Phones: Our Journey gets an orange scroll-fill line between the year
   and the description (the desktop centre line is hidden here) --- */
@media (max-width: 600px) {
  .journey-items { position: relative; }
  .j-item { grid-template-columns: 78px 1fr; column-gap: 22px; }
  .j-year { font-size: 30px; }
  .journey-items::before { content: ''; position: absolute; top: 6px; bottom: 6px; left: 88px;
    width: 2px; background: var(--line-strong); border-radius: 2px; }
  .journey-items::after { content: ''; position: absolute; top: 6px; left: 88px; width: 2px;
    height: var(--jprog, 0%); max-height: calc(100% - 12px); background: var(--accent);
    border-radius: 2px; box-shadow: 0 0 10px rgba(255,128,48,.55); transition: height .15s linear; }
}

/* ===========================================================
   STEPHENSON MEDIA — additions
   =========================================================== */

/* per-page accent overrides */
body.brand-hype   { --accent: #2ec5ff; --accent-deep: #0e8fd6; }
body.brand-mach1  { --accent: #ff3131; --accent-deep: #d4140f; }
body.brand-savr   { --accent: #ffab2e; --accent-deep: #e2820a; }

/* brand wordmark in the navbar / footer */
.logo-word, .footer-logo, .fc-word { filter: none; }
.brandmark .logo-word { height: 34px; width: auto; }
.footer-logo { height: 40px; width: auto; margin-bottom: 18px; }

/* sub-brand lockup shown above hero headlines */
.brand-lockup { width: clamp(180px, 22vw, 300px); height: auto; margin-bottom: 14px; filter: brightness(0) invert(1); }

/* SERVICES — 5-up card row */
.svc-grid { display: grid; gap: 14px; grid-template-columns: repeat(5, 1fr); }
.svc {
  background: var(--black2); border: 1px solid var(--line-dark); border-radius: var(--r);
  padding: 26px 22px 22px; color: var(--white); display: flex; flex-direction: column; gap: 12px;
  transition: transform .3s var(--ease-morph), border-color .3s ease, background .3s ease;
}
.svc:hover { transform: translateY(-6px); border-color: var(--accent); }
.svc__tag { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.svc h3 { font-size: clamp(19px, 1.6vw, 24px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; text-transform: uppercase; }
.svc p { font-size: 13.5px; line-height: 1.55; color: var(--mist); flex: 1; }
.svc__cta { margin-top: 6px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--white); display: inline-flex; gap: 8px; align-items: center; }
.svc:hover .svc__cta { color: var(--accent); }
.svc--feature { background: var(--accent); border-color: var(--accent); }
.svc--feature .svc__tag, .svc--feature p, .svc--feature .svc__cta { color: #fff; opacity: .96; }
.svc--feature:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
@media (max-width: 1080px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .svc-grid { grid-template-columns: 1fr; } }

/* WHO WE SERVICE — photo tiles */
.serve-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); }
.serve {
  position: relative; border-radius: var(--r); overflow: hidden; min-height: 380px;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; color: #fff; isolation: isolate;
}
.serve img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform .7s var(--ease-morph); filter: grayscale(1) contrast(1.05); }
.serve::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.9) 100%); }
.serve:hover img { transform: scale(1.06); filter: grayscale(0); }
.serve .cat { position: absolute; top: 20px; left: 24px; text-shadow: 0 2px 10px rgba(0,0,0,.85); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.serve h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: 1; }
.serve p { margin-top: 10px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.78); }
@media (max-width: 1080px) { .serve-grid { grid-template-columns: repeat(2, 1fr); } .serve { min-height: 320px; } }
@media (max-width: 560px)  { .serve-grid { grid-template-columns: 1fr; } }

/* client logo grid (static, replaces marquee where a grid reads better) */
.client-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: center; }
.client-grid img { height: 92px; width: 100%; object-fit: contain; opacity: .68;
  filter: brightness(0) invert(1);
  transition: opacity .3s ease, transform .3s ease; padding: 14px 12px; }
.client-grid img:hover { opacity: 1; transform: translateY(-3px); }
@media (max-width: 900px) { .client-grid { grid-template-columns: repeat(3, 1fr); } }

/* INQUIRY FORM */
.inquiry { display: grid; grid-template-columns: 1.05fr .95fr; gap: 0; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line-dark); background: var(--black2); }
.inquiry__media { position: relative; min-height: 100%; }
.inquiry__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inquiry__form { padding: clamp(28px, 4vw, 52px); color: #fff; display: flex; flex-direction: column; gap: 14px; }
.inquiry__form h2 { font-size: clamp(28px, 3.4vw, 46px); text-transform: uppercase; letter-spacing: -.025em; line-height: .98; }
.inquiry__form > p { color: var(--mist); font-size: 14.5px; max-width: 48ch; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.field input, .field select, .field textarea {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); border-radius: 10px;
  padding: 13px 15px; color: #fff; font-family: 'Inter', sans-serif; font-size: 14.5px; width: 100%;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,.08); }
.field select option { background: #131316; }
.form-note { font-size: 12px; color: var(--mist); }
@media (max-width: 900px) { .inquiry { grid-template-columns: 1fr; } .inquiry__media { min-height: 240px; } .frow { grid-template-columns: 1fr; } }

/* sub-brand pick-a-lane cards on the home page */
.lane-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lane { position: relative; overflow: hidden; border-radius: var(--r); min-height: 460px; display: flex;
  flex-direction: column; justify-content: flex-end; padding: 30px; color: #fff; isolation: isolate; }
.lane img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  filter: grayscale(1) contrast(1.08); transition: transform .8s var(--ease-morph), filter .5s ease; }
.lane::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.55) 50%, rgba(0,0,0,.92)); }
.lane:hover img.bg { transform: scale(1.07); filter: grayscale(0) contrast(1.02); }
.lane .mark { width: clamp(130px, 50%, 210px); height: auto; margin-bottom: 14px; filter: brightness(0) invert(1); }
.lane h3 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; }
.lane p { margin-top: 8px; font-size: 14px; color: rgba(255,255,255,.8); max-width: 34ch; }
.lane .go { margin-top: 18px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  display: inline-flex; gap: 8px; align-items: center; }
.lane:hover .go { color: var(--accent); }
@media (max-width: 980px) { .lane-grid { grid-template-columns: 1fr; } .lane { min-height: 340px; } }

/* utility */
.stack-24 > * + * { margin-top: 24px; }
.center-head { text-align: center; margin-inline: auto; }

/* ==========================================================================
   ELEVATION LAYER — same wireframe, higher craft
   Editorial display type (Archivo italic, matching the Stephenson wordmark),
   monospace metadata, film grain, sweep-fill buttons, indexed section heads.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,75..125,100..900;1,75..125,100..900&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --display:'Archivo','Inter',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --e:cubic-bezier(.16,1,.3,1);
  --rule-d:rgba(255,255,255,.13);
  --rule-l:rgba(0,0,0,.12);
}

/* ---- display typography ------------------------------------------------ */
h1, h2, h3,
.hero h1, .section-head h2, .footer-cta h2, .svc h3, .serve h3, .lane h3,
.inquiry__form h2, .vcard h3, .band__text h2{
  font-family:var(--display);
  font-style:italic;
  text-transform:uppercase;
  font-variation-settings:'wght' 800,'wdth' 92;
  letter-spacing:-.035em;
  line-height:.86;
  text-wrap:balance;
}
.hero h1{ font-size:clamp(44px,9.4vw,152px); }
.section-head h2, .footer-cta h2{ font-size:clamp(36px,6.4vw,104px); }
.hero h1 .em{ -webkit-text-fill-color:initial; background:none; color:var(--accent); }
h3{ line-height:.94; }
.svc h3, .lane h3, .serve h3{ font-variation-settings:'wght' 800,'wdth' 90; }

/* metadata voice */
.eyebrow, .stat .lbl, .svc__tag, .svc__cta, .serve .cat, .lane .go,
.btn, .nav a, .nav a.nav-cta, .footer-bottom, .field label, .form-note,
.footer-grid h4, .fixture .day{
  font-family:var(--mono) !important;
  font-weight:400 !important;
  letter-spacing:.15em !important;
  text-transform:uppercase;
}
.eyebrow{ font-size:11px; }
.btn{ font-size:11px; }
.nav a{ font-size:11px; }
body{ font-family:'Inter',system-ui,sans-serif; }
p, .hero__lead, .lede{ font-family:'Inter',sans-serif; }

/* stat numbers pick up the display italic */
.stat .num{ font-family:var(--display); font-style:italic; font-variation-settings:'wght' 800,'wdth' 88;
  letter-spacing:-.04em; line-height:.88; }

/* ---- film grain -------------------------------------------------------- */
.grain{
  position:fixed; inset:-120%; z-index:9999; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 1.1s steps(3) infinite;
}
@keyframes grainShift{ 0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)} }

/* ---- cursor ------------------------------------------------------------ */
.cursor{ position:fixed; top:0; left:0; z-index:9990; pointer-events:none; mix-blend-mode:difference;
  width:11px; height:11px; border-radius:50%; background:#fff; transform:translate(-50%,-50%);
  transition:width .35s var(--e), height .35s var(--e); }
body.cursor-lg .cursor{ width:64px; height:64px; }
@media (hover:none){ .cursor{ display:none } }

/* ---- buttons: sweep fill ---------------------------------------------- */
.btn{ position:relative; isolation:isolate; overflow:hidden; border-radius:100px;
  padding:15px 26px; transition:color .4s var(--e), transform .4s var(--e); }
.btn::after{ content:""; position:absolute; inset:0; z-index:-1; background:#fff; border-radius:inherit;
  transform:translateY(101%); transition:transform .5s var(--e); }
.btn:hover{ color:#000 !important; background:var(--accent) !important; border-color:var(--accent) !important; transform:translateY(-2px); }
.btn:hover::after{ transform:translateY(0); }
.btn--ghost::after{ background:#fff; }
.btn .arrow{ transition:transform .4s var(--e); display:inline-block; }
.btn:hover .arrow{ transform:translateX(4px); }

/* ---- indexed section heads -------------------------------------------- */
.section-head .eyebrow{ display:inline-flex; align-items:center; gap:12px; color:var(--accent); }
.section-head .eyebrow::before{ content:attr(data-i); font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; color:var(--accent); opacity:.75; }
.section-head .eyebrow::after{ content:""; width:clamp(22px,4vw,64px); height:1px; background:currentColor; opacity:.5; }

/* ---- hero refinements -------------------------------------------------- */
.hero__badge{ font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; }
.hero__lead{ max-width:52ch; }
.hero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.12) 34%,rgba(0,0,0,.5) 72%,rgba(0,0,0,.92)); }
.hero-frame .ticker-band{ border-top:1px solid var(--rule-d); }
.ticker-track .kw{ font-family:var(--display); font-style:italic; text-transform:uppercase;
  font-variation-settings:'wght' 700,'wdth' 88; letter-spacing:-.01em; }

/* line-by-line headline reveal */
.line{ display:block; overflow:hidden; }
.line > span{ display:block; transform:translateY(104%); transition:transform 1s var(--e); }
.is-in .line > span, .reveal.in-view .line > span{ transform:translateY(0); }
.line:nth-child(2) > span{ transition-delay:.09s }
.line:nth-child(3) > span{ transition-delay:.18s }

/* ---- service cards ----------------------------------------------------- */
.svc{ border-radius:0; border-color:var(--rule-d); background:var(--black2); overflow:hidden; position:relative; }
.svc::before{ content:""; position:absolute; inset:0; z-index:0; background:var(--accent);
  transform:scaleY(0); transform-origin:bottom; transition:transform .55s var(--e); }
.svc > *{ position:relative; z-index:1; }
.svc:hover::before{ transform:scaleY(1); }
.svc:hover{ transform:translateY(-4px); border-color:var(--accent); }
.svc:hover .svc__tag, .svc:hover p, .svc:hover .svc__cta{ color:#fff; }
.svc--feature::before{ transform:scaleY(1); background:var(--accent); }
.svc--feature:hover::before{ background:var(--accent-deep); }
.svc-grid{ gap:1px; background:var(--rule-d); border:1px solid var(--rule-d); }

/* ---- who-we-service tiles --------------------------------------------- */
.serve-grid{ gap:1px; }
.serve{ border-radius:0; }
.serve .cat{ font-family:var(--mono); font-size:10.5px; }

/* ---- division lanes ---------------------------------------------------- */
.lane-grid{ gap:1px; }
.lane{ border-radius:0; }
.lane .mark{ margin-bottom:auto; }
.lane h3{ margin-top:22px; }

/* ---- stats strip ------------------------------------------------------- */
.stats--row{ border-top:1px solid var(--rule-d); display:grid; grid-template-columns:repeat(5,1fr); gap:0; }
.stats--row .stat{ padding:clamp(22px,3vw,44px) clamp(10px,1.6vw,24px); border-right:1px solid var(--rule-d); text-align:left; }
.stats--row .stat:last-child{ border-right:0; }
.stat .lbl{ font-size:10.5px; margin-top:12px; color:var(--mist); }
@media (max-width:900px){
  .stats--row{ grid-template-columns:repeat(2,1fr) }
  .stats--row .stat{ border-bottom:1px solid var(--rule-d) }
  .stats--row .stat:nth-child(2n){ border-right:0 }
}

/* ---- client wall ------------------------------------------------------- */
.client-grid{ gap:0; border-top:1px solid var(--rule-d); border-left:1px solid var(--rule-d); }
.client-grid img{ border-right:1px solid var(--rule-d); border-bottom:1px solid var(--rule-d);
  padding:clamp(16px,2vw,30px); height:clamp(92px,9vw,132px); opacity:.5; }
.client-grid img:hover{ opacity:1; transform:scale(1.05); }

/* ---- photo band / quote ------------------------------------------------ */
.section--photo blockquote{ font-family:var(--display) !important; font-style:italic !important;
  font-variation-settings:'wght' 500,'wdth' 100; text-transform:none !important;
  font-size:clamp(21px,2.9vw,44px) !important; line-height:1.12 !important; letter-spacing:-.025em !important; }

/* ---- inquiry ----------------------------------------------------------- */
.inquiry{ border-radius:0; border-color:var(--rule-d); }
.field input, .field select, .field textarea{ border-radius:0; background:transparent;
  border:0; border-bottom:1px solid var(--rule-d); padding:12px 0; }
.field input:focus, .field select:focus, .field textarea:focus{ background:transparent; border-color:var(--accent); }
.field label{ font-size:10.5px; }

/* ---- footer ------------------------------------------------------------ */
.site-footer{ background:var(--black); }
.footer-grid h4{ font-size:10.5px; color:var(--mist); }
.ftr-word{ display:block; width:100%; text-align:center; background:var(--black); padding-block:clamp(6px,1vw,14px); margin:0;
  font-family:var(--display); font-style:italic; text-transform:uppercase;
  font-variation-settings:'wght' 900,'wdth' 82; font-size:clamp(24px,10.6vw,182px); line-height:.8;
  letter-spacing:-.045em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.26);
  white-space:nowrap; overflow:hidden; }

/* ---- nav --------------------------------------------------------------- */
.site-header .nav a{ position:relative; }
.nav a.is-active{ color:var(--accent); }

/* ---- misc -------------------------------------------------------------- */
.brand-card{ border-radius:0; }
.marquee__track img{ filter:grayscale(1) contrast(1.06); transition:filter .5s ease; }
.marquee__track img:hover{ filter:grayscale(0); }
@media (prefers-reduced-motion:reduce){ .grain{ display:none } .line > span{ transform:none !important } }

/* ---- THE METHOD band --------------------------------------------------- */
.method-band{ padding-block:clamp(56px,8vw,110px); border-top:1px solid var(--rule-d); }
.method{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(16px,2vw,26px); max-width:1000px; margin-inline:auto; }
.method h2{ font-size:clamp(30px,5.2vw,84px); }
.method .eyebrow::after{ display:none; }

/* ---- packages ---------------------------------------------------------- */
.pkg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule-d);
  border:1px solid var(--rule-d); margin-top:clamp(28px,4vw,52px); }
.pkg{ background:var(--black2); padding:clamp(26px,3vw,44px); display:flex; flex-direction:column; gap:14px; position:relative; }
.pkg__n{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--accent); }
.pkg h3{ font-size:clamp(26px,2.8vw,44px); }
.pkg__who{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mist); }
.pkg__list{ list-style:none; margin-top:8px; display:flex; flex-direction:column; gap:9px; flex:1; }
.pkg__list li{ font-size:14px; color:var(--mist); padding-left:20px; position:relative; line-height:1.5; }
.pkg__list li::before{ content:""; position:absolute; left:0; top:9px; width:9px; height:1px; background:var(--accent); }
.pkg .btn{ align-self:flex-start; margin-top:10px; }
.pkg--feature{ background:var(--black); box-shadow:inset 0 0 0 1px var(--accent); }
.pkg--feature .pkg__n::after{ content:" · most popular"; color:var(--mist); }
@media (max-width:980px){ .pkg-grid{ grid-template-columns:1fr; } }

/* headings must never be permanently clipped by their reveal mask */
.section-head h2 .line, .footer-cta h2 .line{ padding-bottom:.08em; }
.method h2{ padding-bottom:.06em; }
.hero h1{ padding-bottom:.06em; }

/* Headings never depend on the fade observer — the masked-line rise supplies
   the motion, so the text itself is always painted. Guarantees no page can
   ever ship an invisible headline if an observer misses. */
.section-head h2.reveal, .footer-cta h2.reveal, .method h2.reveal, .hero h1.reveal{
  opacity:1 !important; transform:none !important;
}

/* ---- responsive corrections (QA pass: 1440 / 1180 / 834 / 390 / 320) ---- */

/* blockquote attribution was overflowing on phones: it inherits the quote's
   negative tracking and can't wrap mid-token */
.section--photo blockquote span{
  letter-spacing:.1em !important; overflow-wrap:anywhere; word-break:break-word;
  max-width:100%; display:block;
}
.section--photo blockquote{ max-width:100% !important; overflow-wrap:break-word; }

/* the full-bleed wrapper's triple gutter blew past 320px viewports */
@media (max-width:560px){
  .wrap--full{ padding-inline:var(--gutter) !important; }
  .section--dark .wrap--full{ padding-inline:var(--gutter) !important; }
  .stats--row{ grid-template-columns:1fr; }
  .stats--row .stat{ border-right:0; text-align:left; }
  .client-grid{ grid-template-columns:repeat(2,1fr); }
}

/* no legible text below 11px */
.footer-bottom, .footer-bottom span, .footer-bottom a,
.form-note, .field label, .svc__tag, .serve .cat, .stat .lbl,
.ticker-track .kw, .eyebrow{ font-size:11px !important; }
.ticker-track .kw{ font-size:clamp(13px,1.4vw,20px) !important; }

/* tablet: five-across service cards and stats need to breathe */
@media (max-width:1080px) and (min-width:761px){
  .svc-grid{ grid-template-columns:repeat(3,1fr); }
  .svc-grid > *:nth-child(4), .svc-grid > *:nth-child(5){ grid-column:span 1; }
  .stats--row{ grid-template-columns:repeat(3,1fr); }
  .stats--row .stat:nth-child(3n){ border-right:0; }
  .serve-grid{ grid-template-columns:repeat(2,1fr); }
  .client-grid{ grid-template-columns:repeat(4,1fr); }
}

/* hero: keep the badge inside the frame on narrow screens */
@media (max-width:760px){
  .hero__badge{ max-width:calc(100vw - var(--gutter) * 2); white-space:normal; line-height:1.35; }
  .brand-lockup{ max-width:62vw; }
  .method h2{ font-size:clamp(28px,8.6vw,44px); }
}

/* nothing may cause a horizontal scrollbar */
body, .section, .wrap, .hero-frame{ max-width:100%; }
.hero__inner, .section-head{ min-width:0; }

/* mobile tab bar labels were 9.5px — below the legibility floor */
.app-tabbar .tab span{ font-size:10.5px !important; letter-spacing:.04em; }

/* reveal--right/left must never leave a resting horizontal offset */
.reveal--left, .reveal--right{ will-change:transform, opacity; }
.section--photo blockquote.reveal--right{ max-width:min(780px, 100%) !important; }

/* tablet: the fifth service card fills the trailing gap instead of leaving a hole */
@media (max-width:1080px) and (min-width:761px){
  .svc-grid > *:nth-child(5){ grid-column:span 2; }
}

/* ==========================================================================
   HERO PHONE MOCKUP — per Alex's page-1 design: a device on the right of the
   hero playing the vertical reel, with a play affordance.
   ========================================================================== */
.hero__inner{ position:relative; }
.hero-with-phone .hero__inner{
  display:grid; grid-template-columns:minmax(0,1fr) clamp(230px,23vw,320px);
  gap:clamp(24px,4vw,64px); align-items:end;
}
.hero-with-phone .hero__copy{ min-width:0; }

.phone{
  position:relative; width:100%; aspect-ratio:9/19.2; justify-self:end;
  border-radius:clamp(26px,2.6vw,42px); background:#0a0a0b; padding:clamp(7px,.72vw,11px);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.22), 0 46px 90px -30px rgba(0,0,0,.85),
             inset 0 0 0 1px rgba(255,255,255,.08);
  margin-bottom:clamp(4px,1vw,14px);
  transform:none;
  transition:transform .8s var(--e);
}
.phone:hover{ transform:translateY(-8px); }
.phone__screen{
  position:relative; width:100%; height:100%; overflow:hidden;
  border-radius:clamp(20px,2vw,33px); background:#000;
}
.phone__screen video, .phone__screen img{ width:100%; height:100%; object-fit:cover; }
/* dynamic island */
.phone::before{
  content:""; position:absolute; top:clamp(13px,1.3vw,20px); left:50%; transform:translateX(-50%);
  width:30%; height:clamp(15px,1.5vw,23px); background:#0a0a0b; border-radius:100px; z-index:3;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
/* side buttons */
.phone::after{
  content:""; position:absolute; right:-2px; top:26%; width:2px; height:12%;
  background:rgba(255,255,255,.3); border-radius:2px;
}
.phone__play{
  position:absolute; inset:0; margin:auto; width:clamp(46px,4.4vw,62px); height:clamp(46px,4.4vw,62px);
  display:grid; place-items:center; border-radius:50%; z-index:2;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px rgba(255,255,255,.4); transition:transform .4s var(--e), background .4s ease;
}
.phone__play::before{
  content:""; width:0; height:0; margin-left:4px;
  border-left:clamp(13px,1.2vw,17px) solid #fff;
  border-top:clamp(8px,.75vw,11px) solid transparent;
  border-bottom:clamp(8px,.75vw,11px) solid transparent;
}
.phone:hover .phone__play{ transform:scale(1.08); background:rgba(255,255,255,.26); }
.phone__label{
  position:absolute; left:0; right:0; bottom:clamp(12px,1.4vw,20px); z-index:2; text-align:center;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.82); text-shadow:0 2px 10px rgba(0,0,0,.8);
}

/* the phone would crowd the headline on tablet and below */
@media (max-width:1080px){
  .hero-with-phone .hero__inner{ grid-template-columns:minmax(0,1fr) clamp(190px,26vw,240px); }
}
@media (max-width:900px){
  .hero-with-phone .hero__inner{ display:block; }
  .phone{ display:none; }
}

/* device sizing: never let the phone run past the fold, and keep it visible on
   tablets (his design shows it beside the headline) until the column is too
   narrow to carry both */
.phone{ height:min(64vh, 600px); width:auto; aspect-ratio:9/19.2; }
.hero-with-phone .hero__inner{ grid-template-columns:minmax(0,1fr) auto; }
@media (max-width:1080px) and (min-width:701px){
  .phone{ height:min(48vh, 420px); }
  .hero.hero-with-phone h1{ font-size:clamp(38px,6.4vw,72px); }
}
@media (max-width:900px){
  .hero-with-phone .hero__inner{ display:grid; }
  .phone{ display:block; }
}
@media (max-width:700px){
  .hero-with-phone .hero__inner{ display:block; }
  .phone{ display:none; }
}

/* ==========================================================================
   DENSITY + PER-VIEWPORT POLISH (audit pass)
   ========================================================================== */

/* -- global rhythm: kill the dead air between sections -------------------- */
.section{ padding-block:clamp(52px,6.2vw,100px); }
.section--dark + .section--dark{ padding-top:clamp(40px,4.5vw,72px); }
.method-band{ padding-block:clamp(44px,5vw,78px); }
.method h2{ font-size:clamp(25px,3.7vw,58px); max-width:1050px; }
.footer-cta{ padding-block:clamp(8px,1.4vw,20px) clamp(26px,3vw,44px); }
.site-footer{ padding-top:clamp(40px,4.5vw,70px); }
.section-head{ margin-bottom:clamp(24px,3vw,44px); }
.section-head p:last-child{ margin-bottom:0; }

/* -- desktop (≥1181px): widescreen composition ---------------------------- */
@media (min-width:1181px){
  .hero__lead{ max-width:46ch; }
  .svc p{ font-size:13px; }
  .lane{ min-height:500px; }
  .serve{ min-height:400px; }
  .inquiry__media{ min-height:560px; }
}

/* -- tablet (701–1080px): two-column reading, calmer scale ---------------- */
@media (max-width:1080px) and (min-width:701px){
  .section{ padding-block:clamp(44px,6vw,72px); }
  .section-head h2, .footer-cta h2{ font-size:clamp(34px,6vw,72px); }
  .method h2{ font-size:clamp(24px,4.4vw,44px); }
  .stat b, .stat .num{ font-size:clamp(28px,4.6vw,52px); }
  .lane{ min-height:340px; }
  .serve{ min-height:300px; }
  .footer-grid{ grid-template-columns:1.2fr 1fr 1fr; gap:clamp(18px,3vw,34px); }
  .footer-grid > div:first-child{ grid-column:1 / -1; }
  .client-grid img{ height:clamp(78px,10vw,104px); }
}

/* -- phone (≤700px): compact, thumb-first --------------------------------- */
@media (max-width:700px){
  .section{ padding-block:clamp(40px,11vw,56px); }
  .section-head{ margin-bottom:22px; }
  .section-head h2, .footer-cta h2{ font-size:clamp(32px,10.4vw,44px); }
  .hero h1{ font-size:clamp(40px,11.4vw,56px); }
  .method h2{ font-size:clamp(22px,7vw,32px); }
  /* stats: tight 2-up card grid instead of a tall single column */
  .stats--row{ grid-template-columns:1fr 1fr; }
  .stats--row .stat{ padding:16px 12px 14px; border-bottom:1px solid var(--rule-d); border-right:1px solid var(--rule-d); }
  .stats--row .stat:nth-child(2n){ border-right:0; }
  .stats--row .stat:last-child:nth-child(odd){ grid-column:1 / -1; border-right:0; }
  .stat b, .stat .num{ font-size:clamp(26px,8.4vw,36px); }
  .stat .lbl, .stats--row .stat .lbl{ margin-top:6px; font-size:10px !important; }
  .lane{ min-height:300px; padding:20px; }
  .serve{ min-height:280px; padding:20px; }
  .svc{ padding:20px 18px 18px; }
  .pkg{ padding:22px 18px; }
  .inquiry__media{ min-height:200px; }
  .inquiry__form{ padding:24px 18px 26px; }
  .footer-grid{ gap:18px; }
  .footer-grid > div{ min-width:0; }
  .ftr-word{ -webkit-text-stroke-width:.6px; }
  .marquee__track img, .mq-img__t img{ height:clamp(150px,44vw,210px); }
}

/* phone floats above the CTA row, not level with it */
.phone{ height:min(56vh, 540px); margin-bottom:clamp(84px, 12vh, 150px); }
@media (max-width:1080px) and (min-width:701px){
  .phone{ height:min(44vh, 400px); margin-bottom:clamp(64px, 9vh, 110px); }
}

/* ==========================================================================
   FINAL POLISH — footer CTA composition + legibility floor
   ========================================================================== */

/* footer CTA: button rides with the headline instead of floating across a void */
.footer-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(20px,2.4vw,32px); }
.footer-cta h2{ max-width:16ch; }
.footer-cta .btn{ font-size:12px; padding:17px 30px; }

/* legibility floor: nothing under 12px for reading text, 11px for dense meta */
.eyebrow{ font-size:12px !important; }
.btn, .nav a, .hdr__cta{ font-size:12px !important; }
.footer-bottom, .footer-bottom span, .footer-bottom a{ font-size:12px !important; }
.form-note{ font-size:12.5px !important; }
.field label{ font-size:11.5px !important; }
.stat .lbl, .stats--row .stat .lbl{ font-size:11.5px !important; }
.svc__tag, .serve .cat, .lane .go, .svc__cta{ font-size:11.5px !important; }
.footer-grid h4{ font-size:11.5px !important; }
.pkg__n, .pkg__who{ font-size:11.5px !important; }
.hero__badge{ font-size:11.5px; }
.phone__label{ font-size:11px; }
.app-tabbar .tab span{ font-size:11px !important; }
.idx__n{ font-size:12px; }
.ticker-track .kw{ font-size:clamp(14px,1.5vw,21px) !important; }
.svc p{ font-size:14px; }
.tile p, .serve p{ font-size:13.5px; }
.pkg__list li{ font-size:14.5px; }
.footer-grid a, .footer-grid p{ font-size:15px; }
.drawer-foot a{ font-size:13px; }
@media (max-width:700px){
  .stat .lbl, .stats--row .stat .lbl{ font-size:11px !important; }
}

/* hero side column: phone with its CTAs directly beneath it */
.hero__side{ display:flex; flex-direction:column; align-items:center; gap:clamp(16px,2vw,24px); justify-self:end; }
.hero__side .phone{ margin-bottom:0; height:min(52vh,500px); }
.hero__side .hero-cta{ justify-content:center; }
.hero-with-phone .hero__inner{ align-items:end; }
.hero-with-phone .hero__copy{ padding-bottom:clamp(10px,1.6vw,22px); }
@media (max-width:1080px) and (min-width:701px){
  .hero__side .phone{ height:min(40vh,380px); margin-bottom:0; }
}
@media (max-width:700px){
  .hero__side{ width:100%; align-items:flex-start; margin-top:18px; }
  .hero__side .phone{ display:none; }
  .hero__side .hero-cta{ justify-content:flex-start; }
}

/* hero side column must clear the fold */
.hero__side .phone{ height:min(44vh,440px); }
@media (max-width:1080px) and (min-width:701px){ .hero__side .phone{ height:min(36vh,340px); } }

/* navbar wordmark: 50% larger while the header is static over the hero,
   easing back to pill size once scrolled */
.brandmark .logo-word{ height:51px; transition:height .45s var(--e); }
.site-header.scrolled .brandmark .logo-word{ height:34px; }

/* footer wordmark 50% larger */
.footer-logo{ height:60px !important; }

/* hero with device: keep the whole composition inside the fold */
.hero.hero-with-phone h1{ font-size:clamp(40px,8.2vw,124px); }

/* intro: mark 50% larger again */
.intro__mark{ height:clamp(68px,12.1vw,154px); }

/* keep the with-device hero inside one viewport: the long headline was
   wrapping to five lines and pushing the fold */
.hero.hero-with-phone h1{ font-size:clamp(38px,7vw,104px); }

/* ultra-wide (≥1500px): scale the composition up, close the dead middle */
@media (min-width:1500px){
  .hero.hero-with-phone .hero__inner{ max-width:var(--maxw); }
  .hero.hero-with-phone h1{ font-size:clamp(104px,7.6vw,150px); }
  .hero__side .phone{ height:min(58vh,620px); }
  .hero__lead{ font-size:18px; max-width:50ch; }
  .btn{ font-size:13px !important; padding:18px 32px; }
  .hero__badge{ font-size:12px; }
  .eyebrow{ font-size:13px !important; }
  .phone__label{ font-size:12px; }
  .wrap{ --gutter:clamp(32px,4vw,80px); }
}

.preloader__mark{ height:clamp(68px,12.1vw,154px) !important; width:auto; }

/* hero composition: original spacing, columns locked to a shared baseline */
.hero-with-phone .hero__inner{
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(32px,5vw,96px);
  align-items:end;
}
.hero__side{ justify-self:end; align-items:center; gap:clamp(14px,1.6vw,22px); }
.hero__side .hero-cta{ justify-content:center; width:100%; }
.hero-with-phone .hero__copy{ padding-bottom:0; }
.hero-with-phone .hero__row{ margin-bottom:0; }

/* ============ HERO SPACING — measured pass ============ */
/* big desktop: widen the hero shell so the composition fills the frame */
@media (min-width:1500px){
  .hero.hero-with-phone .hero__inner{ max-width:1560px; }
  .hero.hero-with-phone h1{ font-size:clamp(96px,5.7vw,116px); }
  .hero__side .phone{ height:min(56vh,560px); }
  .hero-with-phone .hero__inner{ gap:clamp(48px,6vw,120px); }
}
/* tablet: consistent device-to-button gap */
@media (max-width:1080px) and (min-width:701px){
  .hero__side{ gap:18px; }
}

/* ultra-wide: hero content spans the full frame — headline fills the left,
   device + CTAs pin to the right gutter */
@media (min-width:1500px){
  .hero.hero-with-phone .hero__inner{ max-width:none; }
  .hero-with-phone .hero__inner{ gap:clamp(48px,5vw,110px); }
  .hero.hero-with-phone h1{ font-size:clamp(96px,7.3vw,196px); }
  .hero.hero-with-phone .hero__lead{ font-size:19px; max-width:56ch; }
  .hero__side{ justify-self:end; }
  .hero__side .phone{ height:min(60vh,660px); }
}

/* wide screens: deeper outer margins pull both columns in, closing the centre */
@media (min-width:1500px){
  .hero.hero-with-phone .hero__inner{ padding-inline:clamp(72px,6.6vw,172px); }
}

/* wide screens: tighten the centre — device hugs the inner edge of its column */
@media (min-width:1500px){
  .hero-with-phone .hero__inner{ gap:clamp(32px,2.6vw,56px); }
  .hero__side{ align-items:flex-start; }
  .hero__side .hero-cta{ justify-content:flex-start; }
  .hero.hero-with-phone h1{ font-size:clamp(96px,7.9vw,210px); }
}

/* 1500–1699 needs a slightly smaller headline to stay inside the fold */
@media (min-width:1500px) and (max-width:1919px){
  .hero.hero-with-phone h1{ font-size:clamp(96px,7.1vw,136px); }
}

/* 1500–1999: shorter device so its top clears the location badge */
@media (min-width:1500px) and (max-width:1999px){
  .hero__side .phone{ height:min(52vh,520px); }
}
/* the badge always sits above the device */
.hero__badge{ z-index:4; }

/* CTAs live beside the lead again; the device owns its column and grows */
.hero-with-phone .hero__row{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(20px,3vw,48px); flex-wrap:wrap; }
.hero-with-phone .hero__row .hero-cta{ flex:none; }
.hero__side{ align-items:flex-start; justify-self:end; }
@media (min-width:1500px) and (max-width:1999px){
  .hero__side .phone{ height:min(64vh,640px); }
}
@media (min-width:2000px){
  .hero__side .phone{ height:min(70vh,780px); }
}
@media (min-width:1081px) and (max-width:1499px){
  .hero__side .phone{ height:min(60vh,560px); }
}
@media (max-width:1080px) and (min-width:701px){
  .hero__side .phone{ height:min(44vh,420px); }
}

/* ≥1200: buttons hold their line beside the lead paragraph */
@media (min-width:1200px){
  .hero-with-phone .hero__row{ flex-wrap:nowrap; align-items:flex-end; }
  .hero-with-phone .hero__lead{ flex:1 1 auto; max-width:38ch; }
  .hero-with-phone .hero__row .hero-cta{ flex:0 0 auto; }
}

/* buttons sit right after the copy, not pushed to the column edge */
@media (min-width:1200px){
  .hero-with-phone .hero__row{ justify-content:flex-start; gap:clamp(24px,2.2vw,52px); }
}
/* device heights capped so the top always clears the location badge */
@media (min-width:1081px) and (max-width:1499px){
  .hero__side .phone{ height:min(56vh,490px); }
}
@media (min-width:1500px) and (max-width:1999px){
  .hero__side .phone{ height:min(58vh,565px); }
}

/* ==========================================================================
   MOBILE: colour-on-scroll + horizontal rails
   Touch devices have no hover, so grayscale art never resolved. Cards now
   bloom to full colour as they enter view, and dense grids become swipeable
   rails so sections stay short.
   ========================================================================== */
@media (hover:none), (max-width:760px){

  /* ---- colour blooms in when the card reaches the middle of the screen ---- */
  .lane img.bg, .serve img, .brand-card img, .tile img, .wk img{
    transition:filter .7s var(--e), transform .7s var(--e);
  }
  .lane.in-view img.bg,
  .serve.in-view img,
  .brand-card.in-view img,
  .tile.in-view img,
  .wk.in-view img{ filter:grayscale(0) contrast(1.02); }
  .lane.in-view img.bg{ filter:grayscale(0) contrast(1.02) brightness(.86); }
  .serve.in-view img{ filter:grayscale(0) brightness(.92); }
  /* the moving marquee can't be observed reliably — just show it in colour */
  .marquee__track img{ filter:grayscale(0); }

  /* ---- swipeable rails ------------------------------------------------- */
  .lane-grid, .serve-grid, .svc-grid, .pkg-grid, .brand-grid{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:82%;
    grid-template-columns:none;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gutter);
    padding-inline:var(--gutter);
    margin-inline:calc(var(--gutter) * -1);
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .lane-grid::-webkit-scrollbar, .serve-grid::-webkit-scrollbar,
  .svc-grid::-webkit-scrollbar, .pkg-grid::-webkit-scrollbar,
  .brand-grid::-webkit-scrollbar{ display:none; }

  .lane-grid > *, .serve-grid > *, .svc-grid > *, .pkg-grid > *, .brand-grid > *{
    scroll-snap-align:start; min-width:0;
  }
  /* the 5th service card spanned two columns on tablet — reset inside a rail */
  .svc-grid > *:nth-child(5){ grid-column:auto; }
  .svc-grid{ background:none; border:0; grid-auto-columns:78%; }
  .svc{ border:1px solid var(--rule-d); }
  .lane{ min-height:320px; }
  .serve{ min-height:300px; }
  .pkg-grid{ background:none; border:0; grid-auto-columns:86%; }
  .pkg{ border:1px solid var(--rule-d); }

  /* swipe affordance under each rail */
  .rail-hint{
    display:flex; align-items:center; gap:8px; margin-top:14px;
    font-family:var(--mono); font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--mist);
  }
  .rail-hint i{ display:block; width:26px; height:1px; background:currentColor; opacity:.5; }
  .sec--ink .rail-hint, .section:not(.section--dark) .rail-hint{ color:#7a7a84; }
}
@media (min-width:761px){ .rail-hint{ display:none; } }

/* ==========================================================================
   MOBILE STATS — long figures were overflowing their cells
   ========================================================================== */
@media (max-width:760px){
  .stats--row{ grid-template-columns:1fr 1fr; }
  .stats--row .stat{
    min-width:0; padding:18px 14px 16px;
    border-right:1px solid var(--rule-d); border-bottom:1px solid var(--rule-d);
  }
  .stats--row .stat:nth-child(2n){ border-right:0; }
  .stats--row .stat:last-child:nth-child(odd){ grid-column:1 / -1; border-right:0; }
  .stat .num, .stats--row .stat .num{
    font-size:clamp(19px,6.1vw,30px);
    letter-spacing:-.035em;
    line-height:1;
    white-space:nowrap;
    display:block;
    max-width:100%;
  }
  .stat .lbl, .stats--row .stat .lbl{
    margin-top:8px; font-size:10.5px !important; letter-spacing:.1em !important;
    line-height:1.35; color:var(--mist); word-break:normal; overflow-wrap:anywhere;
  }
}
@media (max-width:400px){
  .stat .num, .stats--row .stat .num{ font-size:clamp(17px,5.6vw,24px); }
  .stats--row .stat{ padding:16px 12px 14px; }
  .stat .lbl, .stats--row .stat .lbl{ font-size:10px !important; letter-spacing:.08em !important; }
}

/* ==========================================================================
   CLIENT WALL — optical balance
   Logos are pre-normalized to white-on-transparent with their internal detail
   intact, so no colour filter is applied. Capping both height and width keeps
   a wide wordmark and a compact crest at similar visual weight.
   ========================================================================== */
.client-grid img{
  filter:none;
  opacity:.72;
  height:clamp(94px,9vw,132px);
  width:100%;
  object-fit:contain;
  object-position:center;
  padding:clamp(20px,2.4vw,34px) clamp(18px,2.6vw,38px);
  transition:opacity .35s ease, transform .45s var(--e);
}
.client-grid img:hover{ opacity:1; transform:scale(1.05); }
/* square-ish crests read bigger than wide wordmarks at the same box height,
   so give the box a little more breathing room on small screens */
@media (max-width:760px){
  .client-grid img{ height:88px; padding:16px 14px; opacity:.8; }
}

/* ==========================================================================
   MOBILE FOOTER — three link columns instead of a long stack
   ========================================================================== */
@media (max-width:760px){
  .footer-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:clamp(12px,3.4vw,20px);
    align-items:start;
  }
  /* brand blurb spans the full row above the columns */
  .footer-grid > div:first-child{ grid-column:1 / -1; margin-bottom:6px; }
  .footer-grid > div:not(:first-child){ min-width:0; }
  .footer-grid h4{ font-size:10px !important; letter-spacing:.1em !important; margin-bottom:10px; }
  .footer-grid a{
    font-size:13px !important; padding-block:5px; line-height:1.35;
    overflow-wrap:anywhere; word-break:normal;
  }
  /* the contact column carries long strings — let it breathe */
  .footer-grid > div:last-child a{ font-size:12.5px !important; }
}
@media (max-width:400px){
  .footer-grid{ gap:10px; }
  .footer-grid a{ font-size:12px !important; }
  .footer-grid > div:last-child a{ font-size:11.5px !important; }
}

/* mobile intro: the vw term collapses on small screens, so the mark was
   pinned at the clamp floor — give phones their own, larger size */
@media (max-width:760px){
  .intro__mark{ height:clamp(98px,25.3vw,129px) !important; }
  .preloader__mark{ height:clamp(98px,25.3vw,129px) !important; }
}

/* ==========================================================================
   CLIENT REVISION LAYER — Alex Stephenson, Aug 12 2026
   Typography swap (upright grotesque in place of the italic display), rounded
   geometry throughout, floating hero gallery, rotating client logo rail,
   multi-select service checkboxes, division hero re-stack.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

:root{
  --display:'Figtree','Inter',system-ui,sans-serif;
  --mono:'Figtree','Inter',system-ui,sans-serif;   /* nav + metadata voice */
  --r:20px;
  --r-lg:28px;
  --r-sm:14px;
}

/* ---- display type: upright, tight, heavy (HoopQueens voice) ------------- */
h1, h2, h3,
.hero h1, .section-head h2, .footer-cta h2, .svc h3, .serve h3, .lane h3,
.inquiry__form h2, .vcard h3, .band__text h2, .fg__head{
  font-family:var(--display);
  font-style:normal !important;
  font-weight:800;
  font-variation-settings:normal;
  letter-spacing:-.03em;
  line-height:.92;
}
.hero h1{ font-size:clamp(40px,8.4vw,132px); letter-spacing:-.035em; }
.section-head h2, .footer-cta h2{ font-size:clamp(34px,5.8vw,92px); }
.ticker-track .kw{ font-family:var(--display); font-style:normal; font-weight:800; letter-spacing:-.01em; }
.stat .num{ font-family:var(--display); font-style:normal !important; font-weight:900;
  font-variation-settings:normal; letter-spacing:-.035em; }

/* metadata / nav voice — same family, spaced caps instead of monospace */
.eyebrow, .stat .lbl, .svc__tag, .svc__cta, .serve .cat, .lane .go,
.btn, .nav a, .nav a.nav-cta, .footer-bottom, .field label, .field__legend,
.form-note, .footer-grid h4, .fixture .day, .hero__badge, .pkg__n, .pkg__who{
  font-family:var(--display) !important;
  font-weight:700 !important;
  letter-spacing:.13em !important;
}
.nav a{ font-size:11.5px; }
.btn{ font-size:11.5px; }

/* testimonial quote — set in the body face, not the display cut */
.section--photo blockquote{
  font-family:'Figtree','Inter',sans-serif !important;
  font-style:normal !important; font-weight:600 !important;
  letter-spacing:-.015em !important; line-height:1.24 !important;
}

/* ---- rounded geometry throughout --------------------------------------- */
.svc, .lane, .serve, .wk, .tcard, .brand-card, .crest-card, .news-card,
.team-card, .pkg, .inquiry, .inquiry__media, .inquiry__media img,
.marquee__track img, .mq-img__t img, .client-grid img, .phone,
.field input, .field select, .field textarea, .lane .bg, .svc__media,
.footer-cap, .hero__badge, .check, .logo-rail{
  border-radius:var(--r) !important;
}
.svc, .lane, .serve, .wk, .inquiry, .footer-cap{ border-radius:var(--r-lg) !important; }
.svc img, .lane img.bg, .serve img, .wk img{ border-radius:inherit; }
.btn, .btn--light, .btn--pulse, .nav-cta, .tab--cta{ border-radius:999px !important; }
.hero-frame, .hero{ border-radius:var(--hero-radius); }

/* ---- stats headline: laid across, not stacked -------------------------- */
.stats-head h2, .section--dark .center-head h2{ max-width:22ch; margin-inline:auto; }
#stats .center-head h2, .stats-band h2{ max-width:none; }
.section--dark .center-head h2{ font-size:clamp(27px,3.5vw,54px); line-height:1.02; letter-spacing:-.025em;
  max-width:min(1120px,92vw); margin-inline:auto; }
.nowrap-head{ white-space:nowrap !important; font-size:clamp(26px,4.6vw,76px) !important;
  opacity:1 !important; transform:none !important; }
@media (max-width:640px){ .nowrap-head{ font-size:clamp(22px,7.4vw,40px) !important; } }

/* ---- photo carousel: slower, and in colour ----------------------------- */
.marquee__track{ animation-duration:132s !important; }
.marquee__track img,
.marquee__track img:hover,
.mq-img__t img{ filter:none !important; }

/* ---- client logo rail: rotating, no squares ---------------------------- */
.logo-rail{ overflow:hidden; position:relative; padding-block:20px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.logo-rail__track{ display:flex; align-items:center; gap:0; width:max-content;
  animation:railLoop 64s linear infinite; will-change:transform;
  backface-visibility:hidden; }
.logo-rail__group{ display:flex; align-items:center; gap:0; flex:none; }
.logo-rail:hover .logo-rail__track{ animation-play-state:paused; }
/* margin (not gap) so each group's width includes its own trailing space —
   that is what makes the -50% wrap point invisible */
.logo-rail__track img{ height:clamp(52px,6vw,86px); width:auto; flex:none;
  object-fit:contain; opacity:.8; background:none; border:0; padding:0;
  margin-right:clamp(38px,5vw,84px); }
@keyframes railLoop{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}

/* ---- service checkboxes ------------------------------------------------ */
.field--checks{ margin-top:4px; }
.field__legend{ display:block; margin-bottom:12px; font-size:11px; text-transform:uppercase; }
.field__hint{ opacity:.55; letter-spacing:.08em !important; }
.check-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; }
.check{ display:flex; align-items:center; gap:11px; cursor:pointer; padding:12px 15px;
  border:1px solid var(--line-dark); background:rgba(255,255,255,.03);
  transition:border-color .25s var(--e), background .25s var(--e); }
.check:hover{ border-color:var(--accent); }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check__box{ width:19px; height:19px; border-radius:6px; flex:none;
  border:1.5px solid var(--line-dark); position:relative; transition:.2s var(--e); }
.check__box::after{ content:""; position:absolute; inset:0; margin:auto; width:5px; height:9px;
  border:2px solid #fff; border-top:0; border-left:0; transform:rotate(45deg) scale(.4);
  opacity:0; transition:.2s var(--e); }
.check input:checked + .check__box{ background:var(--accent); border-color:var(--accent); }
.check input:checked + .check__box::after{ opacity:1; transform:rotate(45deg) scale(1); }
.check input:focus-visible + .check__box{ outline:2px solid var(--accent); outline-offset:3px; }
.check__t{ font-size:13.5px; letter-spacing:0; line-height:1.25; }

/* ---- floating gallery -------------------------------------------------- */
.floatgal{ position:relative; overflow:hidden; background:var(--paper2);
  padding-block:clamp(88px,11vw,190px); isolation:isolate; }
.fg__tiles{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.fg__tile{ position:absolute; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r-sm);
  box-shadow:0 18px 44px rgba(12,12,16,.16);
  /* --py is written by the scroll parallax; the drift animation runs inside a
     wrapper transform so the two never fight each other */
  transform:translate3d(0, var(--py, 0px), 0);
  will-change:transform; }
.fg__tile{ animation:fgDrift var(--dur) ease-in-out var(--d) infinite alternate; }
@keyframes fgDrift{
  0%   { transform:translate3d(calc(var(--dx, 14px) * -1), calc(var(--py,0px) + 10px), 0)
                   rotate(calc(var(--rot) * 1.15)) scale(.985); }
  50%  { transform:translate3d(0, calc(var(--py,0px) - 12px), 0)
                   rotate(calc(var(--rot) * .25)) scale(1.015); }
  100% { transform:translate3d(var(--dx, 14px), calc(var(--py,0px) + 14px), 0)
                   rotate(calc(var(--rot) * -1.1)) scale(.99); }
}
.fg__tile{ transition:box-shadow .5s var(--e); }
.fg__inner{ position:relative; z-index:1; text-align:center; max-width:660px; margin-inline:auto; display:flex;
  flex-direction:column; align-items:center; gap:clamp(16px,1.8vw,26px); }
.fg__head{ font-size:clamp(30px,4.3vw,68px); max-width:13ch; line-height:.98; }
.fg__head em{ font-style:normal; color:var(--accent); }
.floatgal .eyebrow{ color:var(--accent); }
.fg__note{ max-width:400px; }
.fg__note-label{ display:block; font-family:var(--display); font-weight:700; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:7px; }
.fg__note p{ font-size:14.5px; line-height:1.5; color:var(--slate); }
@media (max-width:900px){
  /* phones: tiles live in the left and right margins, staggered top to bottom
     and partly off-canvas, so the copy column stays completely clear */
  .floatgal{ padding-top:clamp(104px,26vw,160px) !important; padding-bottom:clamp(205px,52vw,280px) !important; }
  .fg__head{ font-size:clamp(24px,6.6vw,38px); max-width:13ch; }
  .fg__inner{ padding-inline:clamp(16px,5vw,36px); }
  .fg__tile{ display:none !important; top:auto !important; bottom:auto !important;
    left:auto !important; right:auto !important;
    width:clamp(58px,18.5vw,96px) !important;
    --dx:5px !important;                 /* short drift so nothing walks off-canvas */
    box-shadow:0 12px 30px rgba(12,12,16,.18); }

  /* upper pair each side — beside the headline, where the copy column is narrow */
  .fg__tile:nth-child(1) { display:block !important; left:2%  !important; top:5%  !important; }
  .fg__tile:nth-child(2) { display:block !important; left:1% !important; top:26% !important; }
  .fg__tile:nth-child(7) { display:block !important; right:2%  !important; top:1%  !important; }
  .fg__tile:nth-child(8) { display:block !important; right:1% !important; top:22% !important; }

  /* lower band — the copy runs full width down here, so these sit under it */
  .fg__tile:nth-child(3) { display:block !important; left:2%  !important; bottom:14px !important; }
  .fg__tile:nth-child(6) { display:block !important; left:24%  !important; bottom:36px !important; }
  .fg__tile:nth-child(11){ display:block !important; left:54%  !important; bottom:6px  !important; }
  .fg__tile:nth-child(12){ display:block !important; right:3% !important; bottom:30px !important; }

  .fg__tiles{
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image:linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  }
  .floatgal::after{ height:clamp(26px,6vw,48px); }
}
@media (prefers-reduced-motion:reduce){ .fg__tile{ animation:none; } }

/* ---- division hero: lockup up top-left, headline nearer mid-height ------ */
.hero .brand-lockup{
  position:absolute;
  top:clamp(84px,8.4vw,124px);
  left:var(--bar-gutter);
  width:auto !important;
  height:clamp(26px,2.6vw,40px) !important;
  margin:0 !important;
  z-index:3;
}
@media (max-width:900px){ .hero .brand-lockup{ top:74px; height:24px !important; } }
/* headline sits nearer the middle of the screen now the lockup floats out */
.hero__inner{ align-items:center; }
.hero__copy{ justify-content:center; }
.brand-hype .hero h1 .em{
  background:linear-gradient(96deg,#7fe0ff 0%,#19b7ff 46%,#0a6ff2 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.brand-mach1 .hero h1 .em{
  background:linear-gradient(96deg,#ff7a6b 0%,#ff3131 48%,#c1090b 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.brand-savr .hero h1 .em{
  background:linear-gradient(96deg,#ffd08a 0%,#ffa02e 48%,#e2700a 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* card grids: separate tiles so each rounded corner reads (was a hairline table) */
.svc-grid{ gap:12px !important; background:none !important; border:0 !important; }
.svc{ border:1px solid var(--rule-d) !important; }
.lane-grid{ gap:14px; }

/* ==========================================================================
   SEAMLESS SECTION SEAMS — a light/dark boundary starts in the outgoing
   section's colour and dissolves into its own inside the top padding, so the
   two bands melt together instead of butting up as a hard horizontal line.
   Painted as a background layer (not an overlay) so section overflow:hidden
   and content stacking never interfere.
   ========================================================================== */
:root{ --seam:clamp(46px,6.6vw,104px); }

/* light → dark */
.section:not(.section--dark):not(.section--photo) + .section--dark,
.floatgal + .section--dark,
.section:not(.section--dark):not(.section--photo) + .site-footer{
  background-image:linear-gradient(180deg,
    #ffffff 0,
    rgba(255,255,255,.72) calc(var(--seam) * .3),
    rgba(255,255,255,.26) calc(var(--seam) * .62),
    rgba(255,255,255,0) var(--seam));
}
/* dark → light */
.section--dark + .section:not(.section--dark):not(.section--photo),
.section--dark + .floatgal{
  background-image:linear-gradient(180deg,
    #0b0b0c 0,
    rgba(11,11,12,.72) calc(var(--seam) * .3),
    rgba(11,11,12,.26) calc(var(--seam) * .62),
    rgba(11,11,12,0) var(--seam));
}
/* keep the incoming section's first line clear of the blend */
.section:not(.section--dark):not(.section--photo) + .section--dark,
.floatgal + .section--dark,
.section--dark + .section:not(.section--dark):not(.section--photo),
.section--dark + .floatgal,
.section:not(.section--dark):not(.section--photo) + .site-footer{
  background-repeat:no-repeat;
  padding-top:calc(var(--seam) + clamp(30px,3.4vw,52px));
}

/* ---- floating gallery: tiles dissolve at the edges, no guillotine cut ---- */
.fg__tiles{
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, #000 9%, #000 84%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image:
    linear-gradient(180deg, transparent 0, #000 9%, #000 84%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.floatgal{ padding-bottom:clamp(112px,13vw,220px); }
.floatgal::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:clamp(90px,10vw,180px); pointer-events:none; z-index:1;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 78%);
}

/* ---- more air between tiles ------------------------------------------- */
.svc-grid{ gap:clamp(14px,1.5vw,22px) !important; }
.lane-grid{ gap:clamp(16px,1.8vw,26px) !important; }
.serve-grid{ gap:clamp(16px,1.8vw,26px) !important; }
.wk-grid, .work-grid, .gal-grid{ gap:clamp(16px,1.8vw,26px) !important; }
.pkg-grid{ gap:clamp(16px,1.8vw,26px) !important; }
.stats--row{ gap:clamp(10px,1.4vw,22px); }

/* ---- indexed section labels: legible, not decorative ------------------- */
.section-head .eyebrow{
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:.11em !important;
  color:var(--ink);
  opacity:1;
  display:inline-flex; align-items:center; gap:10px;
}
.section--dark .section-head .eyebrow,
.section--photo .section-head .eyebrow{ color:rgba(255,255,255,.94); }
.section-head .eyebrow::before{
  font-size:13px !important;
  font-weight:800 !important;
  color:var(--accent);
  opacity:1;
}
.section-head .eyebrow::after{ opacity:.5; }
.floatgal .eyebrow, .inquiry__form .eyebrow{
  font-size:13px !important; font-weight:800 !important; letter-spacing:.11em !important;
}
@media (max-width:640px){ .section-head .eyebrow, .section-head .eyebrow::before{ font-size:12px !important; } }

/* ==========================================================================
   ROUND 2 — Alex Stephenson, Aug 24 2026
   House accent moves from red to yellow, gradient headline, solid phone,
   colour client wall, larger scroll-driven gallery, division tweaks.
   ========================================================================== */

/* ---- house accent: yellow (sampled from the SM footer frame, brightened
   for screen legibility). Division pages keep their own accent. ---------- */
body:not(.brand-hype):not(.brand-mach1):not(.brand-savr){
  --accent:#ffc400;
  --accent-deep:#e0a500;
}
/* yellow on white needs a darker ink for small text to stay readable */
body:not(.brand-hype):not(.brand-mach1):not(.brand-savr) .section:not(.section--dark):not(.section--photo) .eyebrow,
body:not(.brand-hype):not(.brand-mach1):not(.brand-savr) .floatgal .eyebrow,
body:not(.brand-hype):not(.brand-mach1):not(.brand-savr) .section:not(.section--dark) .svc__tag,
body:not(.brand-hype):not(.brand-mach1):not(.brand-savr) .section:not(.section--dark) .lane .go{
  color:#a97c00;
}
body:not(.brand-hype):not(.brand-mach1):not(.brand-savr) .btn,
body:not(.brand-hype):not(.brand-mach1):not(.brand-savr) .btn--pulse{ color:#1b1500; }
body:not(.brand-hype):not(.brand-mach1):not(.brand-savr) .svc--feature{ color:#1b1500; }
body:not(.brand-hype):not(.brand-mach1):not(.brand-savr) .svc--feature .svc__tag,
body:not(.brand-hype):not(.brand-mach1):not(.brand-savr) .svc--feature p,
body:not(.brand-hype):not(.brand-mach1):not(.brand-savr) .svc--feature .svc__cta{ color:#1b1500 !important; }

/* ---- home hero headline: gradient first line, solid white second ------- */
.hero h1 .em{
  background:linear-gradient(96deg,#fff0a8 0%,#ffc400 42%,#f0a500 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
body:not(.brand-hype):not(.brand-mach1):not(.brand-savr) .hero h1{ color:#fff; }

/* ---- iPhone: solid device, not an outline ----------------------------- */
.phone{
  background:linear-gradient(160deg,#3a3d42 0%,#101114 22%,#0a0b0d 60%,#26282d 100%);
  border:0 !important;
  padding:9px;
  border-radius:clamp(34px,3.4vw,52px) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.10),
    0 2px 0 0 rgba(255,255,255,.16) inset,
    0 34px 80px rgba(0,0,0,.62),
    0 10px 26px rgba(0,0,0,.45);
}
.phone__screen{
  border-radius:clamp(27px,2.7vw,43px) !important;
  overflow:hidden; background:#000; position:relative; height:100%;
  box-shadow:0 0 0 1px rgba(0,0,0,.9) inset;
}
/* dynamic island */
.phone::before{
  content:""; position:absolute; z-index:3;
  top:19px; left:50%; transform:translateX(-50%);
  width:31%; height:22px; border-radius:999px;
  background:#000; box-shadow:0 0 0 1px rgba(255,255,255,.05);
  border:0;
}
/* side button + volume rockers */
.phone::after{
  content:""; position:absolute; z-index:2; right:-2px; top:27%;
  width:2px; height:56px; border-radius:2px;
  background:linear-gradient(180deg,#4a4d53,#2a2c31);
  border:0; transform:none; opacity:1;
}

/* ---- stats: no interior rules, numbers on one baseline ---------------- */
/* Alex R2: 'delete the middle gray divider line' */
.stats--row{ border-top:0 !important; }
.stats--row .stat{ border-right:0 !important; display:flex; flex-direction:column;
  justify-content:flex-start; align-items:flex-start; }
/* labels reserve two lines so every number shares one baseline */
.stats--row .stat .lbl{ min-height:2.7em; }
.stats--row .stat .num{ display:block; line-height:1; margin:0; }
.stats--row .stat .lbl{ margin-top:10px; }
@media (min-width:761px){
  .stats--row{ align-items:start; }
  .stats--row .stat .num{ font-size:clamp(30px,4.1vw,58px) !important; }
}

/* ---- photo carousel: slower again ------------------------------------- */
.marquee__track{ animation-duration:260s !important; }

/* ---- client wall in colour -------------------------------------------- */
.logo-rail__track img{
  background:#fff;
  border-radius:16px;
  padding:clamp(12px,1.4vw,20px) clamp(16px,1.9vw,26px);
  opacity:1;
  height:clamp(64px,7vw,104px);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}

/* ---- floating gallery: bigger tiles, HQ-style scroll drift ------------- */
.fg__tile{ box-shadow:0 22px 54px rgba(12,12,16,.19); }
.floatgal{ padding-block:clamp(104px,13vw,220px); }

/* ---- division pages ---------------------------------------------------- */
/* the giant division wordmark reads italic like the rest of the display type */
.brand-hype .fc-word, .brand-mach1 .fc-word, .brand-savr .fc-word,
.brand-hype .fg__head em, .brand-mach1 .fg__head em, .brand-savr .fg__head em{
  transform:skewX(-9deg);
}
.em--ital{ font-style:italic !important; display:inline-block; transform:skewX(-6deg); }
.about .em--ital, .em--ital{
  background:linear-gradient(96deg,#fff0a8 0%,#ffc400 44%,#f0a500 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
/* CTA glow: neutral white instead of the orange bloom */
.btn--pulse{ box-shadow:0 0 0 0 rgba(255,255,255,.34) !important; }
.btn--pulse:hover{ box-shadow:0 0 0 14px rgba(255,255,255,0) !important; }
@keyframes btnPulse{
  0%  { box-shadow:0 0 0 0 rgba(255,255,255,.34); }
  70% { box-shadow:0 0 0 16px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}

/* the division "The Method" gallery carries a longer statement than the home
   one — give it a wider measure so it never stacks into six lines */
.fg__head{ font-size:clamp(30px,3.7vw,60px) !important; max-width:17ch !important; }
@media (max-width:900px){ .fg__head{ font-size:clamp(25px,6.6vw,38px) !important; max-width:15ch !important; } }

/* light-on-light photos in the gallery need an edge or they read as blanks */
.fg__tile{
  box-shadow:0 22px 54px rgba(12,12,16,.19), 0 0 0 1px rgba(14,14,18,.09);
  background:#eceae6;
}

/* ---- About: founder block --------------------------------------------- */
.founder{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,72px); align-items:center; }
.founder__media{ border-radius:var(--r-lg); overflow:hidden; background:#15161a;
  box-shadow:0 30px 70px rgba(0,0,0,.45); }
.founder__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; display:block; }
.founder__copy h2{ font-size:clamp(30px,3.6vw,58px); }
.founder__copy p{ max-width:52ch; }
.founder__name{ margin-top:22px; font-family:var(--display); font-weight:800;
  font-size:17px; letter-spacing:.02em; color:var(--white); }
.founder__name span{ display:block; margin-top:5px; font-size:11px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--accent); }
@media (max-width:860px){
  .founder{ grid-template-columns:1fr; gap:26px; }
  .founder__media img{ aspect-ratio:3/2; }
}

/* ==========================================================================
   CLIENT LOGOS — cut out on transparency, one uniform grey, true colour on
   hover. No chip behind them. Applies to every logo wall on the site.
   ========================================================================== */
.logo-rail__track img{
  background:none !important; box-shadow:none !important;
  padding:0 !important; border-radius:0 !important; margin-right:0 !important;
  height:auto !important; opacity:1 !important;
}
.logo-rail__group{ align-items:center; }

/* one optical box per mark so wide wordmarks and square crests read alike */
.logo-rail__track .logo{
  position:relative; flex:none; display:block;
  width:clamp(112px,12vw,178px);
  height:clamp(48px,5.4vw,78px);
  margin-right:clamp(30px,3.6vw,64px);
  background:none; box-shadow:none;
}
.logo-rail__track .logo img{
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
  object-fit:contain; display:block;
  transition:opacity .4s var(--ease-out);
}
.logo-rail__track .logo .logo__g{ opacity:.92 !important; }
.logo-rail__track .logo .logo__c{ opacity:0 !important; }
.logo-rail__track .logo:hover .logo__g{ opacity:0 !important; }
.logo-rail__track .logo:hover .logo__c{ opacity:1 !important; }

/* touch devices have no hover — the marks stay in the uniform grey */
@media (hover:none){
  .logo-rail__track .logo .logo__g{ opacity:.9 !important; }
  .logo-rail__track .logo .logo__c{ opacity:0 !important; }
}

/* ==========================================================================
   SAVR — forest green, so the restaurant division no longer reads as the
   same amber/yellow family as the Stephenson house pages.
   ========================================================================== */
body.brand-savr{ --accent:#2e7d4f; --accent-deep:#1c5533; }
/* forest green is dark: on black sections lift it so it stays legible */
body.brand-savr .section--dark .eyebrow,
body.brand-savr .section--dark .svc__tag,
body.brand-savr .section--dark .lane .go,
body.brand-savr .section--dark .stat .num,
body.brand-savr .section--photo .eyebrow,
body.brand-savr .footer-grid h4,
body.brand-savr .founder__name span,
body.brand-savr .section-head .eyebrow::before{ color:#5fce8f; }
body.brand-savr .btn:not(.btn--light):not(.btn--ghost),
body.brand-savr .btn--pulse{ color:#fff; }
body.brand-savr .btn--light{ color:#14251c; }
body.brand-savr .svc--feature{ color:#fff; }
body.brand-savr .svc--feature .svc__tag,
body.brand-savr .svc--feature p,
body.brand-savr .svc--feature .svc__cta{ color:rgba(255,255,255,.92) !important; }
.brand-savr .hero h1 .em{
  /* the shorthand carries an implicit background-clip:border-box, and with
     !important it beats a plain background-clip:text — so flag both */
  background-image:linear-gradient(96deg,#9ff0bf 0%,#3fae6c 46%,#1c5533 100%) !important;
  background-color:transparent !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}

/* ==========================================================================
   Gradient headline words were clipping their final glyph — the background
   box ends flush with the inline box, so the overhang of a D/R/. got cut.
   ========================================================================== */
.hero h1 .em, .fg__head em, .em--ital{
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  padding-right:.08em; margin-right:-.08em;
  padding-bottom:.06em; margin-bottom:-.06em;
}
.hero h1{ overflow:visible; }
.hero h1 .em{ display:inline; }

/* seam gradients must start at the border edge, not inside it — otherwise a
   1px strip of the raw background colour shows through as a hairline */
.section:not(.section--dark):not(.section--photo) + .section--dark,
.floatgal + .section--dark,
.section--dark + .section:not(.section--dark):not(.section--photo),
.section--dark + .floatgal,
.section:not(.section--dark):not(.section--photo) + .site-footer{
  background-origin:border-box;
  background-clip:border-box;
}

/* ==========================================================================
   Ghost / outline buttons: the dark-ink rule for the yellow accent is only
   meant for FILLED buttons. Outline buttons on dark keep white type.
   ========================================================================== */
body:not(.brand-hype):not(.brand-mach1):not(.brand-savr) .btn--ghost,
body:not(.brand-hype):not(.brand-mach1):not(.brand-savr) .section--dark .btn--ghost,
body:not(.brand-hype):not(.brand-mach1):not(.brand-savr) .pkg .btn,
body:not(.brand-hype):not(.brand-mach1):not(.brand-savr) .hero .btn--ghost{
  color:#fff !important;
  border-color:rgba(255,255,255,.42) !important;
  background:transparent !important;
}
body:not(.brand-hype):not(.brand-mach1):not(.brand-savr) .btn--ghost:hover,
body:not(.brand-hype):not(.brand-mach1):not(.brand-savr) .pkg .btn:hover{
  color:#1b1500 !important; background:var(--accent) !important;
  border-color:var(--accent) !important;
}
/* ghost buttons on light sections stay dark ink on a light ground */
body:not(.brand-hype):not(.brand-mach1):not(.brand-savr) .section:not(.section--dark):not(.section--photo) .btn--ghost{
  color:var(--ink) !important; border-color:var(--line-strong) !important;
}

/* packages: drop the grey panel behind the cards — separate tiles, no plate */
.pkg-grid{ background:none !important; border:0 !important; gap:clamp(14px,1.5vw,22px) !important; }
.pkg{ border:1px solid var(--rule-d); border-radius:var(--r-lg); }

/* ==========================================================================
   Mobile: the division lockup sits BESIDE the Stephenson mark on the header
   line, not stacked underneath it. Offsets are measured off the header pill
   (18px inset + 75px mark) so the two read as one lockup pair.
   ========================================================================== */
@media (max-width:900px){
  .hero .brand-lockup{
    top:29px !important;
    left:calc(var(--bar-gutter) + 86px) !important;
    height:26px !important;
    width:auto !important;
    max-width:calc(100vw - var(--bar-gutter) - 190px) !important;
    object-fit:contain; object-position:left center;
  }
}
@media (max-width:380px){
  .hero .brand-lockup{
    left:calc(var(--bar-gutter) + 78px) !important;
    height:22px !important;
    top:31px !important;
  }
}

/* ==========================================================================
   Mobile chrome: the fixed tab bar must not sit on top of the last section,
   the drawer must clear the browser UI, and the drawer mark matches the
   navbar mark.
   ========================================================================== */
:root{ --tabbar-h:75px; }

@media (max-width:900px){
  /* reserve the tab bar's height below the footer cap, in the cap's own black
     so the bar never overlaps the artwork */
  .footer-cap-wrap{
    background:var(--black);
    padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  }
  /* pages that end on the footer rather than the cap get the same clearance */
  .site-footer{ padding-bottom:calc(28px + var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }

  /* drawer: scrollable, and its foot clears the browser bar / home indicator */
  .drawer{
    top:0; left:0; right:0; bottom:auto;
    height:100dvh; max-height:100dvh;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:calc(58px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior:contain;
  }
  .drawer nav{ margin-top:34px; }
  .drawer-foot{ padding-top:26px; padding-bottom:12px; }
  /* the drawer mark reads at the same size as the one in the navbar */
  .drawer-top img{ height:51px !important; width:auto; }
}

@media (max-width:900px){
  /* keep the whole drawer on one screen on short phones */
  .drawer-foot{ gap:10px 18px; font-size:12.5px; }
  .drawer-foot a{ white-space:nowrap; }
}
@media (max-width:900px){
  .drawer{ padding-top:20px; }
  .drawer nav{ margin-top:14px !important; gap:0; }
  .drawer nav a{ padding-block:9px; font-size:clamp(21px,6.2vw,28px); }
}

/* ==========================================================================
   REFINEMENT LAYER — a craft pass over the existing wireframe. Nothing moves;
   the type, spacing, depth, motion and detail all get sharpened.
   ========================================================================== */

/* ---- 1. motion language: one easing family, calmer distances ------------ */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.32,.72,0,1);
  --shadow-1:0 1px 2px rgba(10,10,14,.05), 0 4px 12px rgba(10,10,14,.05);
  --shadow-2:0 2px 6px rgba(10,10,14,.07), 0 12px 32px rgba(10,10,14,.09);
  --shadow-3:0 6px 18px rgba(10,10,14,.10), 0 28px 64px rgba(10,10,14,.14);
  --hair-l:rgba(16,17,20,.09);
  --hair-d:rgba(255,255,255,.10);
}

/* the difference-blend cursor reads as a stray dot in 2026 — retire it and
   let the pointer be the pointer */
.cursor, .cursor-glow{ display:none !important; }
/* grain stays, but at a whisper rather than a texture */
.grain{ opacity:.028 !important; }

/* ---- 2. typography: optical sizing and a tighter rag ------------------- */
html{ -webkit-text-size-adjust:100%; font-variant-ligatures:common-ligatures; }
h1, h2, h3, .fg__head{ text-wrap:balance; }
p, .hero__lead, .lede, .fg__note p{ text-wrap:pretty; }

.hero h1, .section-head h2, .footer-cta h2, .fg__head{
  letter-spacing:-.035em;
  line-height:.94;
}
.hero__lead, .lede{ font-size:clamp(15px,1.12vw,17.5px); line-height:1.62; letter-spacing:-.006em; }
.section-head p, .svc p, .serve p, .lane p, .fg__note p{ letter-spacing:-.005em; }
p{ color:var(--slate); }
.section--dark p, .section--photo p{ color:rgba(255,255,255,.66); }

/* eyebrows: smaller, wider, quieter — the heading should carry the weight */
.section-head .eyebrow{
  font-size:11.5px !important; letter-spacing:.19em !important;
  opacity:.92;
}
.section-head .eyebrow::before{ font-size:11.5px !important; opacity:.9; }

/* numbers align in columns like a table, not like prose */
.stat .num, .pkg__price, .tl-item .yr, .j-year{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

/* ---- 3. surfaces: lower-contrast hairlines, layered shadow -------------- */
.svc, .lane, .serve, .wk, .tcard, .pkg, .inquiry, .check, .brand-card{
  border-color:var(--hair-d) !important;
  box-shadow:var(--shadow-1);
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out),
             border-color .4s var(--ease-out), background-color .4s var(--ease-out);
}
.section:not(.section--dark) .svc,
.section:not(.section--dark) .serve,
.section:not(.section--dark) .wk,
.section:not(.section--dark) .tcard{ border-color:var(--hair-l) !important; }

/* a card should rise, not jump */
.svc:hover, .lane:hover, .serve:hover, .wk:hover, .pkg:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-3);
  border-color:rgba(255,255,255,.2) !important;
}
.section:not(.section--dark) .svc:hover,
.section:not(.section--dark) .serve:hover,
.section:not(.section--dark) .wk:hover{ border-color:rgba(16,17,20,.16) !important; }

/* imagery inside cards drifts rather than snaps */
.svc img, .lane img.bg, .serve img, .wk img, .inquiry__media img{
  transition:transform 1.1s var(--ease-out), filter .7s var(--ease-out);
}
.svc:hover img, .lane:hover img.bg, .serve:hover img, .wk:hover img{ transform:scale(1.045); }

/* ---- 4. buttons: crisper geometry, a real press ------------------------- */
.btn{
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
             background-color .3s var(--ease-out), color .3s var(--ease-out),
             border-color .3s var(--ease-out);
  will-change:transform;
}
.btn:hover{ transform:translateY(-1.5px); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn .arrow{ display:inline-block; transition:transform .34s var(--ease-out); }
.btn:hover .arrow, .svc:hover .svc__cta .arrow, .lane:hover .go .arrow{ transform:translateX(4px); }

/* ---- 5. links: an underline that draws itself -------------------------- */
.footer-grid a, .drawer-foot a, .footer-bottom .links a{
  position:relative; transition:color .3s var(--ease-out);
}
.footer-grid a::after, .drawer-foot a::after, .footer-bottom .links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .42s var(--ease-out);
}
.footer-grid a:hover::after, .drawer-foot a:hover::after,
.footer-bottom .links a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---- 6. header: a thinner, glassier bar -------------------------------- */
.site-header .header-inner{
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 10px 34px rgba(0,0,0,.30);
}
.nav a{ position:relative; }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1.5px;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.nav a:hover::after, .nav a.is-active::after{ transform:scaleX(1); transform-origin:left; }

/* ---- 7. selection, focus and scrollbar -------------------------------- */
::selection{ background:var(--accent); color:#12100a; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
@supports (scrollbar-width: thin){
  html{ scrollbar-width:thin; scrollbar-color:rgba(140,140,150,.5) transparent; }
}

/* ---- 8. reveals: shorter travel, softer curve -------------------------- */
.reveal{ transition:opacity .7s var(--ease-out), transform .8s var(--ease-out) !important; }
.reveal--up-big{ transform:translateY(26px); }
.reveal--pop{ transform:scale(.97); }
.reveal--left{ transform:translateX(-22px); }
.reveal--right{ transform:translateX(22px); }
.reveal.in, .reveal.is-in{ transform:none !important; }

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

/* ---- 9. photo tiles: scrims so type holds on light frames -------------- */
.serve{ position:relative; isolation:isolate; }
.serve::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,8,10,.55) 0%, rgba(8,8,10,0) 26%),
    linear-gradient(0deg,  rgba(8,8,10,.86) 0%, rgba(8,8,10,.34) 38%, rgba(8,8,10,0) 62%);
}
.serve > *{ position:relative; z-index:2; }
.serve img{ z-index:0; }
.serve .cat{ text-shadow:0 1px 10px rgba(0,0,0,.5); }

/* ---- 10. form fields: quiet by default, decisive on focus ------------- */
.field input, .field select, .field textarea{
  background:rgba(255,255,255,.035);
  border:1px solid var(--hair-d);
  padding:13px 15px;
  transition:border-color .3s var(--ease-out), background-color .3s var(--ease-out),
             box-shadow .3s var(--ease-out);
}
.field input:hover, .field select:hover, .field textarea:hover{
  border-color:rgba(255,255,255,.2);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:rgba(255,255,255,.055);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field label, .field__legend{ opacity:.72; }

/* ---- 11. the ticker reads as a quiet rule, not a shout ---------------- */
.ticker-band{ border-top:1px solid var(--hair-d); border-bottom:1px solid var(--hair-d); }
.ticker-track .kw{ opacity:.9; }

/* ---- 12. the phone gets a soft ambient bloom -------------------------- */
.hero__side{ position:relative; }
.hero__side::before{
  content:""; position:absolute; z-index:-1; inset:14% -12% -6% -12%;
  background:radial-gradient(60% 55% at 50% 55%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%);
  filter:blur(26px); opacity:.55; pointer-events:none;
}

/* honeypot field — visible to bots, never to people */
.inquiry__form .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ==========================================================================
   ROUND 3 — Alex, 27 Aug. Every rule here is additive and scoped; nothing
   above this line was edited, so the earlier rounds cannot regress.
   ========================================================================== */

/* B1 — stat blocks: number centred over its label, every breakpoint --------- */
.stats--row .stat,
.stats--row .stat:last-child,
.stats--row .stat:nth-child(2n),
.stats--row .stat:nth-child(3n){ text-align:center !important; }
.stats--row .stat .num,
.stats--row .stat .lbl{ text-align:center !important; margin-inline:auto; }
.stats--row{ align-items:start; }

/* B2 — "Trusted across ..." was overflowing its 820px box to the right, which
   read as off-centre. Give it room to sit on one line, and let it wrap
   balanced (still centred) when it genuinely cannot. --------------------- */
.section--dark .center-head h2.nowrap-head,
.nowrap-head{
  white-space:normal !important;
  max-width:min(1280px,94vw) !important;
  margin-inline:auto !important;
  text-align:center !important;
  text-wrap:balance;
}

/* B3 — client logos in full colour, always (Alex's call, no chip) ---------- */
.logo-rail__track .logo .logo__g{ opacity:0 !important; }
.logo-rail__track .logo .logo__c{ opacity:1 !important; }
.logo-rail__track .logo:hover .logo__g{ opacity:0 !important; }
.logo-rail__track .logo:hover .logo__c{ opacity:1 !important; }
@media (hover:none){
  .logo-rail__track .logo .logo__g{ opacity:0 !important; }
  .logo-rail__track .logo .logo__c{ opacity:1 !important; }
}

/* B4 — About hero: drop the italic on "Three", keep the gradient ----------- */
.about .hero h1 .em--ital,
.hero h1 .em--ital{ font-style:normal !important; transform:none !important; }

/* B5 — About founder block: air between eyebrow, heading and paragraph ----- */
.founder__copy .eyebrow{ margin-bottom:clamp(14px,1.5vw,22px) !important; }
.founder__copy h2{ margin-bottom:clamp(18px,2vw,30px) !important; }
.founder__copy h2 + p{ margin-top:0 !important; }

/* B6 — The Method headline reads across fewer lines ----------------------- */
.fg__inner{ max-width:min(880px,62vw) !important; }
.fg__head{ font-size:clamp(31px,3.6vw,58px) !important; max-width:none !important; }
@media (max-width:900px){
  .fg__inner{ max-width:none !important; }
  .fg__head{ font-size:clamp(26px,6.6vw,38px) !important; max-width:none !important; }
}

/* B7 — more floating images, and larger ----------------------------------- */
.fg__tile{ box-shadow:0 26px 62px rgba(12,12,16,.22); }

/* B8 — SAVR accent: vivid orange, deep enough to stay clear of house yellow  */
body.brand-savr{ --accent:#ff6a1a; --accent-deep:#c74400; }
body.brand-savr .section--dark .eyebrow,
body.brand-savr .section--dark .svc__tag,
body.brand-savr .section--dark .lane .go,
body.brand-savr .section--dark .stat .num,
body.brand-savr .section--photo .eyebrow,
body.brand-savr .footer-grid h4,
body.brand-savr .founder__name span,
body.brand-savr .section-head .eyebrow::before{ color:#ff8c47 !important; }
body.brand-savr .btn:not(.btn--light):not(.btn--ghost),
body.brand-savr .btn--pulse{ color:#fff !important; }
body.brand-savr .btn--light{ color:#2a1408 !important; }
.brand-savr .hero h1 .em{
  background-image:linear-gradient(96deg,#ffbc8a 0%,#ff7a2e 46%,#c74400 100%) !important;
  background-color:transparent !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}

/* B9 — loading screen: same animation, glow moved from orange/red to the
   house vivid yellow ----------------------------------------------------- */
.preloader::before{
  background:radial-gradient(60% 60% at 50% 45%, rgba(255,196,0,.18), transparent 70%) !important;
}
.preloader__mark{ filter:drop-shadow(0 0 26px rgba(255,196,0,.42)) !important; }
.intro__mark{
  filter:drop-shadow(2px 2px 0 rgba(224,165,0,.6)) drop-shadow(4px 4px 0 rgba(224,165,0,.36))
         drop-shadow(6px 6px 0 rgba(224,165,0,.18)) drop-shadow(0 18px 30px rgba(0,0,0,.55)) !important;
}

/* B7 (mobile) — the tile order changed when the desktop set grew from 12 to
   16, so the phone layout re-picks by the new indices. Slightly larger than
   round 2, still inside the margins with a short drift. -------------------- */
@media (max-width:900px){
  .fg__tile{ display:none !important;
    width:clamp(66px,20.5vw,112px) !important;
    top:auto !important; bottom:auto !important; left:auto !important; right:auto !important;
    --dx:5px !important; }
  /* upper pairs, beside the headline */
  .fg__tile:nth-child(1) { display:block !important; left:2%  !important; top:4%  !important; }
  .fg__tile:nth-child(2) { display:block !important; left:1%  !important; top:25% !important; }
  .fg__tile:nth-child(9) { display:block !important; right:2% !important; top:1%  !important; }
  .fg__tile:nth-child(10){ display:block !important; right:1% !important; top:22% !important; }
  /* lower band, under the full-width copy */
  .fg__tile:nth-child(5) { display:block !important; left:2%  !important; bottom:14px !important; }
  .fg__tile:nth-child(7) { display:block !important; left:26% !important; bottom:40px !important; }
  .fg__tile:nth-child(13){ display:block !important; left:53% !important; bottom:6px  !important; }
  .fg__tile:nth-child(15){ display:block !important; right:3% !important; bottom:32px !important; }
}

/* the round-2 phone picks (3,6,8,11,12) were chosen for the old 12-tile
   ordering; retire them so only the round-3 eight show ------------------- */
@media (max-width:900px){
  .fg__tile:nth-child(3),
  .fg__tile:nth-child(6),
  .fg__tile:nth-child(8),
  .fg__tile:nth-child(11),
  .fg__tile:nth-child(12){ display:none !important; }
  .fg__tile:nth-child(1), .fg__tile:nth-child(2),
  .fg__tile:nth-child(5), .fg__tile:nth-child(7),
  .fg__tile:nth-child(9), .fg__tile:nth-child(10),
  .fg__tile:nth-child(13),.fg__tile:nth-child(15){ display:block !important; }
}

/* B1 follow-up — once the cells are centred, an over-wide number spills into
   its neighbours (and the last one into the page edge). Size the row so the
   widest figure fits inside its own column. -------------------------------- */
@media (min-width:901px){
  .stats--row .stat .num{ font-size:clamp(24px,2.55vw,44px) !important; letter-spacing:-.02em; }
  .stats--row .stat{ padding-inline:clamp(6px,0.9vw,16px) !important; }
}

/* B6/B7 (mobile) — the wider headline and the larger tiles collided. Pull the
   upper tiles partly off-canvas and give the copy column its own width back,
   so nothing sits on top of the text. ------------------------------------- */
@media (max-width:900px){
  .fg__head{ max-width:15ch !important; margin-inline:auto; }
  .fg__tile{ width:clamp(62px,19vw,104px) !important; }
  .fg__tile:nth-child(1) { left:-6% !important; top:3%  !important; }
  .fg__tile:nth-child(2) { left:-4% !important; top:22% !important; }
  .fg__tile:nth-child(9) { right:-6% !important; top:1%  !important; }
  .fg__tile:nth-child(10){ right:-4% !important; top:20% !important; }
  .fg__tile:nth-child(5) { left:-4% !important; bottom:14px !important; }
  .fg__tile:nth-child(7) { left:24% !important; bottom:44px !important; }
  .fg__tile:nth-child(13){ left:52% !important; bottom:8px  !important; }
  .fg__tile:nth-child(15){ right:-4% !important; bottom:30px !important; }
}