/* ==========================================================================
   FitnessBlackBelt — base.css
   Global design system: tokens, reset, typography, buttons, header, footer,
   shared components, motion primitives and utilities.
   Loaded by every page BEFORE that page's own stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Animatable custom properties (@property)
   -------------------------------------------------------------------------- */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@property --glow {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}
@property --shimmer {
  syntax: '<percentage>';
  initial-value: -120%;
  inherits: false;
}
/* Progress value for .ring — registered so the conic sweep can animate */
@property --p {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- Surfaces --- */
  --bg:            #0A0806;
  --bg-2:          #100D09;
  --surface:       #17130D;
  --surface-2:     #201A11;
  --surface-3:     #2C2418;

  /* --- Lines & veils --- */
  --line:          rgba(255, 255, 255, 0.075);
  --line-strong:   rgba(255, 255, 255, 0.14);
  --veil:          rgba(10, 8, 6, 0.72);

  /* --- Type --- */
  --text:          #F7F3EA;
  --text-soft:     #D8D0BC;
  --muted:         #A69B82;
  --dim:           #7A7160;

  /* --- Brand — metallic gold.
     Ramp runs deep bronze (700) through the signature metallic gold (500)
     to a pale leaf (200). Relative lightness matches the ramp it replaced,
     so every contrast pairing across the site still holds. --- */
  --brand:         #8A6912;
  --brand-700:     #6E5410;
  --brand-600:     #A98418;
  --brand-500:     #C9A227;
  --brand-400:     #D9B441;
  --brand-300:     #E7CB74;
  --brand-200:     #F2E1AC;

  /* --- Championship highlight — the bright end of the same gold family.
     Used sparingly, only where credibility needs to peak. --- */
  --gold:          #F0DCA0;
  --gold-soft:     #FBF3DC;
  --gold-deep:     #BE9522;

  /* Ink for anything sitting on a gold fill */
  --on-brand:      #1A1206;

  /* --- Semantic --- */
  --ok:            #34D399;
  --warn:          #F97316;

  /* --- Gradients --- */
  /* Kept inside the metallic range so dark ink stays legible across the whole
     sweep — white on gold measures only 2.4:1 and fails outright. */
  --grad-brand:    linear-gradient(135deg, var(--brand-300) 0%, var(--brand-500) 50%, var(--brand-600) 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(201, 162, 39, 0.16), rgba(138, 105, 18, 0.04));
  --grad-text:     linear-gradient(180deg, #FFFFFF 0%, #E8DCB8 100%);
  --grad-gold:     linear-gradient(135deg, var(--gold-soft), var(--gold) 45%, var(--gold-deep));

  /* --- Shadows / glow --- */
  --shadow-sm:     0 1px 2px rgba(0,0,0,.4);
  --shadow-md:     0 12px 32px -12px rgba(0,0,0,.7);
  --shadow-lg:     0 40px 80px -32px rgba(0,0,0,.85);
  --glow-brand:    0 0 0 1px rgba(217,180,65,.18), 0 24px 64px -20px rgba(138,105,18,.28);
  --glow-brand-lg: 0 0 120px -20px rgba(169,132,24,.3);

  /* --- Radii --- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* --- Typefaces ---
     Display  : Bricolage Grotesque — editorial grotesque with real character,
                reads authoritative rather than generic-gym-bold.
     Body     : Plus Jakarta Sans — warm geometric, high legibility at length.
     Mono     : JetBrains Mono — every label, stat and chart axis. This is what
                gives the page its "precision instrument" feel.
     Accent   : Fraunces italic — pull quotes only, used sparingly. */
  --font-display: 'Bricolage Grotesque', 'Sora', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-accent:  'Fraunces', Georgia, serif;

  /* --- Layout --- */
  --container: 1200px;
  --container-wide: 1440px;
  --container-text: 720px;          /* comfortable reading measure */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 76px;

  /* --- Vertical rhythm — deliberately generous, the page should breathe --- */
  --space-section: clamp(6rem, 12vw, 12rem);
  --space-block:   clamp(3rem, 6vw, 5.5rem);
  --space-head:    clamp(3rem, 6vw, 5rem);

  /* --- Fluid type scale --- */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  --fs-md:   clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --fs-lg:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-xl:   clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-2xl:  clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);
  --fs-3xl:  clamp(2.25rem, 1.7rem + 2.7vw, 3.75rem);
  --fs-4xl:  clamp(2.75rem, 1.9rem + 4.2vw, 5.25rem);
  --fs-5xl:  clamp(3.25rem, 2rem + 6vw, 7rem);

  /* --- Motion --- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur:      340ms;
  --dur-slow: 700ms;

  /* --- Grain (SVG noise data-uri) --- */
  --grain: 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  font-feature-settings: 'kern', 'liga';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100svh;
}

/* Global grain veil — sits above the page, ignores pointer events. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--grain);
  opacity: .16;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 9999;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

::selection { background: var(--brand-500); color: var(--on-brand); }

:focus-visible {
  outline: 2px solid var(--brand-300);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--brand-600), var(--brand-700));
  border-radius: 99px;
  border: 3px solid var(--bg-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-500); }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-4xl); font-weight: 750; }
h2 { font-size: var(--fs-3xl); font-weight: 700; }
h3 { font-size: var(--fs-xl); letter-spacing: -0.022em; line-height: 1.22; }
h4 { font-size: var(--fs-lg); letter-spacing: -0.016em; line-height: 1.3; }

p { text-wrap: pretty; max-width: 68ch; }

strong, b { font-weight: 650; color: var(--text); }

/* Serif italic accent — pull quotes and emphasis only, never body copy */
.serif {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: -0.012em;
}

/* Monospace label — the workhorse for eyebrows, stats and chart axes */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Gradient-filled display text */
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-text {
  background: linear-gradient(120deg, var(--brand-200), var(--brand-400) 60%, var(--brand-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gold-text {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  font-size: var(--fs-md);
  color: var(--text-soft);
  line-height: 1.7;
  max-width: 62ch;
}

.muted { color: var(--muted); }
.dim   { color: var(--dim); }

/* --------------------------------------------------------------------------
   5. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 880px; }

.section {
  position: relative;
  padding-block: var(--space-section);
  /* The header is sticky and 76px tall, so anything scrolled to by script or
     by anchor lands underneath it without this. scroll-padding-top on <html>
     covers anchor jumps only. */
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.section--tight { padding-block: var(--space-block); }
.section--flush-top { padding-top: 0; }

/* Hairline that separates major movements without adding a heavy border */
.section--ruled { border-top: 1px solid var(--line); }

/* Hairline divider that fades at the edges */
.rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent);
}

/* --------------------------------------------------------------------------
   6. Eyebrow / section heading kit
   -------------------------------------------------------------------------- */
/* Eyebrow — a monospace index label with a leading marker. Reads like a
   spec sheet rather than a marketing kicker, which suits the audience. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-300);
  margin-bottom: 1.4rem;
}
.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 1px;
  background: var(--brand-400);
  box-shadow: 0 0 10px rgba(217,180,65,0.52);
  rotate: 45deg;
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--gold::before { background: var(--gold); box-shadow: 0 0 10px rgba(240,220,160,0.45); }

/* Section heading block — capped measure keeps lines short and scannable */
.section-head {
  max-width: 640px;
  margin-bottom: var(--space-head);
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lede { margin-inline: auto; }
.section-head p { margin-top: 1.35rem; }
.section-head h2 { letter-spacing: -0.034em; }

/* Wide variant: heading left, supporting copy right — breaks the endless
   centred-stack rhythm and cuts perceived text density. */
.section-head--split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  max-width: none;
  align-items: end;
}
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 1.15fr .85fr; }
  .section-head--split p { margin-top: 0; }
}

/* Shown only when scripting is off. Every form on the site is submitted by
   JavaScript, so without it the visitor needs to be told plainly rather than
   left to post a form that goes nowhere. */
.form-noscript {
  margin-bottom: 1.5rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--warn, #C9A227);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background: rgba(201,162,39,.08);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-soft);
}
.form-noscript a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 1.85rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--btn-fg);
  /* -webkit-text-fill-color is an INHERITED property, and the gradient-text
     utilities above set it transparent to let a background show through the
     glyphs. A button rendered anywhere beneath one of those inherits the
     transparency and its label turns into a see-through cut-out — gold
     showing through the letters on a gold fill. Pin it back to the real
     colour so a button is never at the mercy of its ancestors. */
  -webkit-text-fill-color: currentColor;
  background: var(--btn-bg);
  border-radius: var(--r-pill);
  isolation: isolate;
  overflow: hidden;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }

.btn svg { width: 1.1em; height: 1.1em; flex: none; transition: transform var(--dur) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

/* Primary — brand gradient with animated sheen */
.btn--primary {
  --btn-fg: #000000;
  background: var(--grad-brand);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 14px 34px -14px rgba(169,132,24,0.59);
}

/* Black, stated as a literal on the button AND on everything inside it.
   Three separate things could otherwise lighten this label on its gold fill:
   `color: var(--btn-fg)` falls back to the INHERITED colour if the custom
   property does not resolve; -webkit-text-fill-color is inherited and the
   gradient-text utilities set it transparent; and a nested <span> or <svg>
   picks up whichever of those won. Naming the colour outright on both the
   element and its descendants closes all three. */
.btn--primary,
.btn--primary * {
  color: #000000;
  -webkit-text-fill-color: #000000;
}
.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%);
  transform: translateX(var(--shimmer));
  transition: --shimmer 900ms var(--ease-out);
}
.btn--primary:hover {
  --shimmer: 120%;
  box-shadow: 0 1px 0 rgba(255,255,255,.24) inset, 0 22px 48px -16px rgba(201,162,39,0.65);
}

/* Ghost — hairline outline that fills on hover */
.btn--ghost {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(231,203,116,.5);
  box-shadow: 0 14px 34px -18px rgba(217,180,65,0.45);
}

/* White — the high-contrast secondary that sits beside the violet primary */
.btn--white {
  --btn-fg: #0C0A07;
  background: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 14px 34px -18px rgba(0,0,0,.9);
}
.btn--white:hover {
  background: #F7F2E6;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 20px 44px -20px rgba(231,203,116,0.39);
}

/* Outline — quiet tertiary, used for the header's secondary action */
.btn--outline {
  background: transparent;
  border: 1px solid var(--line-strong);
}
.btn--outline:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); }

/* Gold — reserved for enrollment / high-intent moments */
.btn--gold {
  --btn-fg: #1A1206;
  background: var(--grad-gold);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 14px 34px -16px rgba(240,220,160,0.45);
}
.btn--gold:hover { box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 22px 46px -18px rgba(240,220,160,0.55); }

/* Link-style button with animated underline */
.btn--link {
  padding: .4rem 0;
  background: none;
  border-radius: 0;
  color: var(--brand-300);
  overflow: visible;
}
.btn--link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}
.btn--link:hover { transform: none; color: var(--brand-200); }
.btn--link:hover::after { transform: scaleX(1); transform-origin: left; }

.btn--lg { padding: 1.2rem 2.4rem; font-size: var(--fs-base); }
.btn--sm { padding: .7rem 1.3rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  align-items: center;
}
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   8. Pills, chips, badges
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem 1rem .45rem .7rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-soft);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  backdrop-filter: blur(10px);
}
.pill__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(52,211,153,.18);
  animation: pulse-dot 2.4s var(--ease-in-out) infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(52,211,153,.18); }
  50%      { box-shadow: 0 0 0 6px rgba(52,211,153,.05); }
}

/* Drives the conic border sweep on featured cards (--angle is an @property) */
@keyframes spin-ring { to { --angle: 360deg; } }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  background: rgba(217,180,65,.14);
  color: var(--brand-200);
  border: 1px solid rgba(217,180,65,.28);
}
.badge--gold {
  background: rgba(240,220,160,.12);
  color: var(--gold-soft);
  border-color: rgba(240,220,160,.3);
}

/* --------------------------------------------------------------------------
   9. Card shell (extended by page stylesheets)
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: linear-gradient(165deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
/* Top hairline highlight */
.card::before {
  content: '';
  position: absolute;
  inset-inline: 12%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,203,116,.55), transparent);
  opacity: .55;
}
.card:hover {
  border-color: rgba(217,180,65,.3);
  box-shadow: var(--shadow-lg);
}

/* Cursor-tracking spotlight (coords set by JS) */
.card--spot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
              rgba(217,180,65,.13), transparent 65%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
  pointer-events: none;
}
.card--spot:hover::after { opacity: 1; }

/* --------------------------------------------------------------------------
   9b. PANEL — the primary content container across the site.
   A notched, cornered surface rather than a plain rounded rectangle. The
   clipped corner + corner ticks are what stop these reading as generic cards.
   -------------------------------------------------------------------------- */
.panel {
  --notch: 26px;
  position: relative;
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
  background:
    linear-gradient(168deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.012) 42%, rgba(255,255,255,.004) 100%),
    var(--surface);
  /* top-left square, bottom-right notched — a deliberate, engineered silhouette */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
/* Hairline border. Drawn as an inset ring on a clipped overlay rather than a
   real border, because `border` can't follow the notched silhouette — and an
   outset backdrop can't either, since clip-path also clips the pseudo. */
.panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  clip-path: inherit;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow var(--dur) var(--ease-out);
}
.panel > * { position: relative; z-index: 1; }
.panel:hover { transform: translateY(-4px); }
.panel:hover::before { box-shadow: inset 0 0 0 1px rgba(217,180,65,.42); }

/* Accent rule that draws across the top edge on hover */
.panel__rule {
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-600) 60%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 620ms var(--ease-out);
}
.panel:hover .panel__rule { transform: scaleX(1); }

/* Oversized ghost index numeral, bled into the corner */
.panel__index {
  position: absolute;
  top: clamp(.85rem, 2vw, 1.35rem);
  right: clamp(1rem, 2.2vw, 1.6rem);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--dim);
}
.panel__ghost {
  position: absolute;
  right: -.06em;
  bottom: -.28em;
  font-family: var(--font-display);
  font-size: clamp(5rem, 11vw, 9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.07em;
  color: rgba(255,255,255,.028);
  pointer-events: none;
  user-select: none;
}

.panel--brand {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(201,162,39,.24), transparent 58%),
    linear-gradient(168deg, rgba(255,255,255,.05), rgba(255,255,255,.008)),
    var(--surface-2);
}
.panel--brand::before { box-shadow: inset 0 0 0 1px rgba(217,180,65,.4); }

.panel--gold {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(240,220,160,.14), transparent 58%),
    linear-gradient(168deg, rgba(255,255,255,.04), rgba(255,255,255,.006)),
    var(--surface);
}
.panel--gold::before { box-shadow: inset 0 0 0 1px rgba(240,220,160,.34); }
.panel--gold:hover::before { box-shadow: inset 0 0 0 1px rgba(240,220,160,.6); }

/* Flush variant — no notch, for grids that need to tile cleanly */
.panel--flush { clip-path: none; border-radius: var(--r-md); }
.panel--flush::before { border-radius: var(--r-md); }

/* --------------------------------------------------------------------------
   9c. STAT — a mono-labelled figure. Used in every stat band on the site.
   -------------------------------------------------------------------------- */
.stat { display: grid; gap: .5rem; }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 750;
  line-height: .95;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(165deg, #fff 20%, var(--brand-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__value--gold { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; }
.stat__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}

/* Stat band — hairline-divided row, no boxes. Much quieter than cards. */
.stat-band {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 760px) { .stat-band { grid-template-columns: repeat(4, 1fr); } }
.stat-band > * + * {
  position: relative;
}
@media (min-width: 760px) {
  .stat-band > * + *::before {
    content: '';
    position: absolute;
    left: clamp(-1.5rem, -2vw, -.875rem);
    top: 0; bottom: 0;
    width: 1px;
    background: var(--line);
  }
}

/* --------------------------------------------------------------------------
   9d. INFOGRAPHIC PRIMITIVES
   -------------------------------------------------------------------------- */

/* --- Radial progress ring (conic-gradient, --p is 0–100) --- */
.ring {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--size, 120px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    conic-gradient(var(--ring-color, var(--brand-400)) calc(var(--p, 0) * 1%), rgba(255,255,255,.06) 0);
  transition: --p 1.2s var(--ease-out);
}
.ring::before {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--bg);
}
.ring__value {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.ring__value sup { font-size: .5em; top: -.5em; }
.ring--gold { --ring-color: var(--gold); }

/* Ring + caption pairing — used on the homepage and the programs page */
.ringwrap { display: grid; justify-items: center; gap: .85rem; text-align: center; }
.ringwrap .mono { font-size: 10px; color: var(--muted); line-height: 1.4; }

/* --- Horizontal meter with a mono scale --- */
.meter { display: grid; gap: .55rem; }
.meter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.meter__head b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.meter__track {
  height: 5px;
  border-radius: 99px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.meter__fill {
  display: block;
  height: 100%;
  width: var(--p, 50%);
  border-radius: 99px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-300));
  box-shadow: 0 0 14px rgba(217,180,65,0.36);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease-out) var(--delay, 0ms);
}
.is-visible .meter__fill,
.meter.is-visible .meter__fill { transform: scaleX(1); }
.meter--gold .meter__fill { background: var(--grad-gold); box-shadow: 0 0 14px rgba(240,220,160,0.29); }

/* --- Week grid heatmap: proves "built around your calendar" visually --- */
.weekgrid { display: grid; gap: .5rem; }
.weekgrid__row {
  display: grid;
  grid-template-columns: 54px repeat(7, 1fr);
  gap: 4px;
  align-items: center;
}
.weekgrid__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
}
/* Day-of-week header strip */
.weekgrid__day {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255,255,255,.26);
}
.weekgrid__cell {
  aspect-ratio: 1;
  border-radius: 4px;
  background: rgba(255,255,255,.045);
  border: 1px solid transparent;
}
.weekgrid__cell[data-load='1'] { background: rgba(217,180,65,.24); border-color: rgba(217,180,65,.28); }
.weekgrid__cell[data-load='2'] { background: rgba(217,180,65,.5);  border-color: rgba(231,203,116,.4); }
.weekgrid__cell[data-load='3'] { background: var(--brand-500); border-color: rgba(242,225,172,.55); box-shadow: 0 0 12px rgba(201,162,39,0.36); }
.weekgrid__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.25rem;
  margin-top: .8rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
}
.weekgrid__legend span { display: inline-flex; align-items: center; gap: .45rem; }
.weekgrid__legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* --- Comparison ladder: three tiers as ascending bars --- */
.ladder {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.75rem, 2vw, 1.25rem);
  align-items: end;
  height: clamp(150px, 22vw, 210px);
}
.ladder__step {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  text-align: center;
}
.ladder__bar {
  height: var(--h, 50%);
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, rgba(217,180,65,.5), rgba(217,180,65,.08));
  border: 1px solid rgba(217,180,65,.28);
  border-bottom: 0;
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 800ms var(--ease-out) var(--delay, 0ms);
}
.is-visible .ladder__bar { transform: scaleY(1); }
.ladder__step--peak .ladder__bar {
  background: var(--grad-brand);
  border-color: rgba(242,225,172,.5);
  box-shadow: 0 0 34px -6px rgba(201,162,39,0.52);
}
.ladder__meta {
  margin-top: .6rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
}
.ladder__meta b { display: block; color: var(--text-soft); font-weight: 600; }

/* --------------------------------------------------------------------------
   9d-2. SLIDER — single-row carousel.
   --edge, --per and --slide-w are written by JS so the first slide lines up
   with the page container while the rest bleed off the viewport edge.
   -------------------------------------------------------------------------- */
.slider {
  --slide-gap: clamp(1rem, 2vw, 1.5rem);
  --per: 1;
  position: relative;
}

.slider__viewport {
  overflow: hidden;
  touch-action: pan-y;                 /* horizontal drag is ours, vertical scroll isn't */
  cursor: grab;
}
.slider.is-dragging .slider__viewport { cursor: grabbing; }

.slider__track {
  display: flex;
  gap: var(--slide-gap);
  margin: 0;
  padding: .5rem 0 1.25rem;
  list-style: none;
  transition: transform 720ms var(--ease-out);
}
.slider.is-dragging .slider__track { transition: none; }

.slide { flex: 0 0 var(--slide-w, 300px); display: flex; }
.slide > * {
  width: 100%;
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
/* Slides outside the current window recede — the movement reads as depth */
.slide.is-out > * { opacity: .34; transform: scale(.96); }

.slider__bar {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.slider__count {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
}
.slider__count b { color: var(--text); font-weight: 600; }

.slider__rail {
  flex: 1;
  height: 2px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.slider__fill {
  display: block;
  height: 100%;
  width: 33%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-200));
  box-shadow: 0 0 12px rgba(217,180,65,0.36);
  transition: width 640ms var(--ease-out);
}

.slider__nav { display: flex; gap: .6rem; flex: none; }
.slider__btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  font: inherit;
  color: var(--text-soft);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  cursor: pointer;
  transition:
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-spring);
}
.slider__btn svg { width: 18px; height: 18px; }
.slider__btn:hover {
  color: #FFFFFF;
  background: rgba(201,162,39,.2);
  border-color: rgba(217,180,65,.6);
  transform: translateY(-2px);
}
.slider__btn:active { transform: translateY(0) scale(.94); }

@media (prefers-reduced-motion: reduce) {
  .slider__track { transition: none; }
  .slide.is-out > * { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   9d-3. VIDEO WALL
   Nothing is fetched until someone chooses to watch — the clips are large and
   a preload would wreck the page. The tile therefore paints its own placeholder
   rather than waiting on the browser to decode a poster frame, which on a slow
   connection it never does.
   -------------------------------------------------------------------------- */
.vidwall {
  display: grid;
  gap: clamp(.6rem, 1.2vw, .9rem);
  align-items: start;
}
@media (min-width: 620px)  { .vidwall { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .vidwall { grid-template-columns: repeat(4, 1fr); } }

.vid {
  position: relative;
  margin: 0;
  /* --tile sets the shape of the card, independent of the source file.
     Square on the homepage, 4:3 for the landscape clips on programs. */
  aspect-ratio: var(--tile, 1);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000000;
  border: 1px solid var(--line-strong);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.vid:hover { transform: translateY(-4px); border-color: rgba(217,180,65,.45); }

/* Facade — covers the element until frames are genuinely rendering, so no
   device ever shows the browser's own grey placeholder. */
.vid::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Gradients only. This used to end in an opaque var(--surface) fill, which
     was the tile's placeholder back when there was no poster — it would now
     paint straight over the cover image. The poster is the placeholder, so
     what remains is just the gold tint and sheen that sit on top of it. */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(169,132,24,.2), transparent 62%),
    linear-gradient(168deg, rgba(255,255,255,.055), rgba(255,255,255,.01));
  transition: opacity 320ms var(--ease-out);
}
.vid.is-started::before { opacity: 0; }

.vid__el {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  /* --zoom crops padding baked into a source file. 1 = untouched. */
  transform: scale(var(--zoom, 1));
  background: #000000;
  /* Visible from the start so the poster frame shows through. Before
     posters existed this sat at 0 to hide an unloaded black element;
     the poster is now that placeholder. */
  opacity: 1;
  transition: opacity 320ms var(--ease-out);
}
.vid.is-started .vid__el { opacity: 1; }   /* kept: harmless once the default is 1 */

/* Cover image as a real <img> rather than the <video>'s poster attribute.
   iOS Safari and the Android in-app webviews (Instagram, Facebook) do not
   apply object-fit to a poster, so a clip whose source is 16:9 or 9:16 was
   letterboxed inside the square tile with white or black bands top and
   bottom. object-fit on an <img> is honoured everywhere. */
.vid__poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transform: scale(var(--zoom, 1));
  transition: opacity 320ms var(--ease-out);
}
/* Once frames are rendering the poster has done its job. Kept in the layout
   (not display:none) so nothing reflows at the moment playback starts. */
.vid.is-started .vid__poster { opacity: 0; pointer-events: none; }

.vid__play {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(10,8,6,.25), transparent 70%),
    linear-gradient(180deg, transparent 40%, rgba(10,8,6,.78) 100%);
  transition: opacity 280ms var(--ease-out), visibility 0s linear 280ms;
}
.vid.is-playing .vid__play { opacity: 0; visibility: hidden; pointer-events: none; }

.vid__play span {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  color: var(--on-brand);
  background: var(--grad-brand);
  box-shadow: 0 10px 28px -12px rgba(169,132,24,.55);
  transition: transform var(--dur) var(--ease-spring);
}
.vid__play svg { width: 21px; height: 21px; margin-left: 3px; }
.vid:hover .vid__play span { transform: scale(1.08); }
.vid__play:focus-visible { outline: 2px solid var(--brand-200); outline-offset: -4px; }

.vid.is-loading .vid__play span { animation: vid-wait 1.1s var(--ease-in-out) infinite; }
@keyframes vid-wait {
  50% { transform: scale(.88); opacity: .6; }
}

/* The clip could not be fetched or decoded. Say so — an idle-looking card
   with a working play button is the one state that reads as "fine". */
.vid.is-failed .vid__play span { animation: none; opacity: .4; }
.vid.is-failed .vid__time { color: var(--warn); border-color: var(--warn); }

.vid__time {
  position: absolute;
  z-index: 3;
  right: .7rem;
  top: .7rem;
  padding: .25rem .5rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--text-soft);
  background: rgba(10,8,6,.72);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
}

.vid__cap {
  position: absolute;
  z-index: 4;
  left: 1rem;
  right: 1rem;
  bottom: .9rem;
  display: grid;
  gap: .2rem;
  pointer-events: none;
  transition: opacity 280ms var(--ease-out);
}
.vid.is-started .vid__cap { opacity: 0; }
.vid__cap .mono {
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--gold);
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.vid__cap strong {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  /* The scrim below is a gradient, so how dark it is under any given word
     depends on the frame. A shadow makes the text independent of that. */
  text-shadow: 0 1px 4px rgba(0,0,0,.95), 0 0 14px rgba(0,0,0,.6);
}

/* A caption needs its own floor of contrast: the play button's scrim is
   hidden with the button once the clip is running, and on a bright frame
   the gradient alone was not enough. */
.vid__cap::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -1rem;
  right: -1rem;
  top: -2.5rem;
  bottom: -.9rem;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(10,8,6,.55) 42%,
    rgba(10,8,6,.92) 100%);
}

/* Below the 4-column breakpoint each tile is half or full viewport width, so
   the card grows but the caption did not — 14px title and 10px kicker read as
   fine print on a phone. Sized to the card it sits on. */
@media (max-width: 999px) {
  .vid__cap { left: 1.1rem; right: 1.1rem; bottom: 1.1rem; gap: .3rem; }
  .vid__cap .mono { font-size: 11px; }
  .vid__cap strong { font-size: var(--fs-base); }
  .vid__cap::before { top: -3rem; bottom: -1.1rem; }
}
@media (max-width: 619px) {
  .vid__cap strong { font-size: clamp(1.0625rem, 1rem + 1vw, 1.25rem); }
}

@media (prefers-reduced-motion: reduce) {
  .vid, .vid__play span { transition: none; }
}

/* --------------------------------------------------------------------------
   9e. MEDIA — art-directed image slots.
   Every image on the site goes through one of these so photography arrives
   already toned to the brand. Swap the <img src> and nothing else changes.
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--r-md);
  isolation: isolate;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 40%);
}
/* Violet duotone wash + bottom scrim so any photo sits on-brand */
.media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 45%, rgba(10,8,6,.82) 100%),
    linear-gradient(145deg, rgba(138,105,18,.4) 0%, transparent 58%);
  pointer-events: none;
}
.media--plain::after { background: linear-gradient(180deg, transparent 55%, rgba(10,8,6,.7) 100%); }
.media--notch {
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
}
.media--ratio-4-5 { aspect-ratio: 4 / 5; }
.media--ratio-3-4 { aspect-ratio: 3 / 4; }
.media--ratio-1-1 { aspect-ratio: 1; }
.media--ratio-16-9 { aspect-ratio: 16 / 9; }
.media--ratio-3-2 { aspect-ratio: 3 / 2; }

/* Caption chip pinned inside the frame */
.media__tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .75rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-soft);
  background: rgba(16,13,9,.7);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  backdrop-filter: blur(12px);
}

/* Placeholder shown until real photography is dropped in */
.media--slot {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 13px, rgba(255,255,255,.02) 13px 14px),
    linear-gradient(165deg, var(--surface-2), var(--bg-2));
  border: 1px dashed rgba(255,255,255,.13);
}
.media--slot::after { display: none; }
.media__slot-note {
  display: grid;
  justify-items: center;
  gap: .5rem;
  padding: 1.25rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  line-height: 1.7;
}
.media__slot-note svg { width: 26px; height: 26px; opacity: .5; }
.media__slot-note b { color: var(--muted); font-weight: 500; }

/* --------------------------------------------------------------------------
   10. Decorative backgrounds
   -------------------------------------------------------------------------- */
/* Soft aurora blob */
.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}
.aurora--brand { background: radial-gradient(circle, rgba(169,132,24,0.17), transparent 70%); }
.aurora--violet { background: radial-gradient(circle, rgba(217,180,65,0.12), transparent 70%); }
.aurora--gold  { background: radial-gradient(circle, rgba(240,220,160,.22), transparent 70%); }

/* Faint technical grid */
.grid-veil {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 20%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}

/* Section top/bottom fade into the page background */
.fade-edge-t::before,
.fade-edge-b::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 160px;
  pointer-events: none;
  z-index: 1;
}
.fade-edge-t::before { top: 0; background: linear-gradient(var(--bg), transparent); }
.fade-edge-b::after { bottom: 0; background: linear-gradient(transparent, var(--bg)); }

/* Anything that must sit above decoration */
.layer { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   11. Scroll progress bar
   -------------------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--brand-600), var(--brand-300), var(--gold));
  z-index: 1200;
  will-change: transform;
}
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: grow-progress linear;
    animation-timeline: scroll(root block);
  }
  @keyframes grow-progress { to { transform: scaleX(1); } }
}

/* --------------------------------------------------------------------------
   12. Site header — the first element on every page
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              backdrop-filter var(--dur);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(11, 9, 7, 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
}

/* Three-track grid so the nav pill stays optically centred regardless of
   how wide the brand lockup or the action buttons get. */
.header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  height: var(--header-h);
  transition: height var(--dur) var(--ease-out);
}
.site-header.is-stuck .header__inner { height: 68px; }

/* Brand lockup */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  flex: none;
}
.brand__mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  /* logo art is white-on-black — screen blend drops the black box out */
  mix-blend-mode: screen;
  filter: contrast(1.15);
  transition: transform var(--dur) var(--ease-spring);
}
.brand:hover .brand__mark { transform: rotate(-12deg) scale(1.06); }
.brand__text {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}
.brand__text em {
  font-style: normal;
  background: linear-gradient(100deg, var(--brand-300), var(--brand-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Primary nav — a floating glass pill with a solid white active segment */
.nav { display: none; justify-self: center; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 30px -18px rgba(0,0,0,.9);
}
.nav__link {
  position: relative;
  display: block;
  padding: .6rem 1.05rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--muted);
  border-radius: var(--r-pill);
  transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.nav__link:hover { color: #fff; background: rgba(255,255,255,.07); }

/* Six items now that Success Stories is in the row, and two of them are long.
   Between the 1024px point where the desktop nav switches on and roughly
   1280px the row would otherwise push the header actions off the edge, so it
   gives back horizontal padding instead of overflowing. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav__link { padding: .55rem .7rem; font-size: var(--fs-xs); }
}
.nav__link.is-active {
  color: #0C0A07;
  font-weight: 600;
  background: #fff;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.8);
}

.header__actions { display: flex; align-items: center; gap: .55rem; flex: none; }
.header__cta { display: none; }

/* Hamburger */
.nav-toggle {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  transition: background-color var(--dur), border-color var(--dur);
}
.nav-toggle:hover { background: rgba(255,255,255,.07); }
.nav-toggle__box { width: 18px; height: 12px; position: relative; }
.nav-toggle__box span {
  position: absolute;
  left: 0;
  height: 1.5px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out), width var(--dur);
}
.nav-toggle__box span:nth-child(1) { top: 0; }
.nav-toggle__box span:nth-child(2) { top: 5px; width: 70%; }
.nav-toggle__box span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded='true'] .nav-toggle__box span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__box span:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__box span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  align-content: center;
  padding: calc(var(--header-h) + 3rem) var(--gutter) 3rem;
  background: linear-gradient(170deg, #0C0A07 0%, #14100A 60%, #0A0806 100%);
  clip-path: circle(0% at calc(100% - 44px) 60px);
  transition: clip-path 640ms var(--ease-out), visibility 640ms;
  visibility: hidden;
  overflow-y: auto;
}
.mobile-nav.is-open {
  clip-path: circle(150% at calc(100% - 44px) 60px);
  visibility: visible;
}
.mobile-nav__list { display: grid; gap: .35rem; }
.mobile-nav__list li {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.mobile-nav.is-open .mobile-nav__list li { opacity: 1; transform: none; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(1) { transition-delay: 180ms; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(2) { transition-delay: 235ms; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(3) { transition-delay: 290ms; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(4) { transition-delay: 345ms; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(5) { transition-delay: 400ms; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(6) { transition-delay: 455ms; }
.mobile-nav.is-open .mobile-nav__foot { transition-delay: 520ms; opacity: 1; transform: none; }

.mobile-nav__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .7rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  transition: color var(--dur), padding-left var(--dur) var(--ease-out);
}
.mobile-nav__link:hover, .mobile-nav__link.is-active { color: var(--brand-300); padding-left: .5rem; }
.mobile-nav__link i {
  font-family: var(--font-display);
  font-style: normal;
  font-size: .75rem;
  font-weight: 500;
  color: var(--dim);
  letter-spacing: .1em;
}
.mobile-nav__foot {
  margin-top: 2.5rem;
  display: grid;
  gap: 1rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}

body.nav-open { overflow: hidden; }

@media (min-width: 1024px) {
  .nav { display: block; }
  .header__cta { display: inline-flex; }
  .nav-toggle { display: none; }
}

/* --------------------------------------------------------------------------
   13. PAGE HERO — shared across every page
   Left: eyebrow pill, oversized headline, lede, action pair, credential strip.
   Right: a portrait medallion centred inside concentric orbit rings, lit by a
   violet bloom, with floating glass stat cards overlapping it.
   Page stylesheets only override content-specific bits.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.25rem, 5vw, 4rem) clamp(3rem, 7vw, 5.5rem);
}

/* --- Background: bloom + faint grid --- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero__bloom {
  position: absolute;
  top: 46%;
  left: 74%;
  width: min(74vw, 1000px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(201,162,39,0.13) 0%,
              rgba(110, 84, 16, 0.15) 36%,
              rgba(110, 84, 16, 0.08) 56%,
              transparent 70%);
  filter: blur(30px);
}
/* Secondary cool bloom on the copy side keeps the left from going flat */
.hero__bloom--alt {
  top: 78%;
  left: 8%;
  width: min(46vw, 560px);
  background: radial-gradient(circle, rgba(138,105,18,.17), transparent 68%);
}

/* --- Layout --- */
.hero__inner {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 1000px) {
  .hero__inner { grid-template-columns: 1.04fr 0.96fr; gap: clamp(2rem, 4vw, 4rem); }
}

/* --- Copy column --- */
.hero__copy { min-width: 0; order: 1; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1rem .45rem .65rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-soft);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  backdrop-filter: blur(12px);
}
.hero__eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(52,211,153,.18);
  animation: pulse-dot 2.4s var(--ease-in-out) infinite;
  flex: none;
}
.hero__eyebrow svg { width: 14px; height: 14px; color: var(--gold); flex: none; }

.hero__title {
  margin-top: 1.5rem;
  font-size: clamp(2.15rem, 4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.038em;
  text-wrap: balance;
}
.hero__lede {
  margin-top: 1.5rem;
  max-width: 46ch;
  font-size: var(--fs-md);
  color: var(--text-soft);
  line-height: 1.65;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* --- Credential strip under the copy --- */
.hero__strip { margin-top: clamp(2.5rem, 5vw, 4rem); }
.hero__strip-label {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1.15rem;
}
.hero__strip-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem clamp(1.25rem, 3vw, 2.25rem);
}
.hero__strip-items li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,.5);
  transition: color var(--dur) var(--ease-out);
}
.hero__strip-items li:hover { color: rgba(255,255,255,.9); }
.hero__strip-items svg { width: 16px; height: 16px; flex: none; opacity: .75; }
.hero__strip-items li em {
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

/* --- Visual column --- */
.hero__visual {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 540px);
  aspect-ratio: 1;
  justify-self: center;
}

/* Concentric orbit rings */
.hero__orbit { position: absolute; inset: 0; display: grid; place-items: center; }
.hero__orbit span {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.07);
}
.hero__orbit span:nth-child(1) { width: 100%; height: 100%; }
.hero__orbit span:nth-child(2) {
  width: 84%; height: 84%;
  border-color: rgba(231,203,116,.18);
}
.hero__orbit span:nth-child(3) { width: 66%; height: 66%; border-color: rgba(255,255,255,.05); }

/* Accent dot fixed at the top of the middle ring */
.hero__orbit span:nth-child(2)::after {
  content: '';
  position: absolute;
  top: -4px; left: 50%;
  width: 7px; height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--brand-200);
  box-shadow: 0 0 14px 3px rgba(217,180,65,0.59);
}

/* Portrait medallion */
.hero__subject {
  position: relative;
  z-index: 2;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(231,203,116,.25);
  box-shadow:
    0 0 0 10px rgba(217,180,65,0.1),
    0 0 0 11px rgba(255,255,255,.03),
    0 44px 90px -34px rgba(0,0,0,.95),
    0 0 130px -24px rgba(169,132,24,0.49);
}
.hero__subject img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
  filter: contrast(1.08) saturate(.92);
}
.hero__subject::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 52%, rgba(10,8,6,.7) 100%),
    linear-gradient(140deg, rgba(138,105,18,.34) 0%, transparent 55%);
  pointer-events: none;
}

/* Floating glass stat cards */
.hero__card {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1.05rem;
  background: rgba(22, 18, 12, 0.74);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow: 0 24px 50px -24px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.06) inset;
}
.hero__card strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
}
.hero__card span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.hero__card > svg {
  width: 34px; height: 34px;
  padding: 8px;
  flex: none;
  border-radius: 11px;
  color: var(--brand-300);
  background: rgba(217,180,65,.14);
  border: 1px solid rgba(217,180,65,.24);
}
.hero__card--gold > svg {
  color: var(--gold);
  background: rgba(240,220,160,.13);
  border-color: rgba(240,220,160,.26);
}

/* Offsets stay small so the cards overlap the medallion rather than
   escaping the column — the hero clips overflow, so they must not reach
   the container edge at the 1000px breakpoint. */
/* Offsets stay small so the cards overlap the medallion rather than
   escaping the column — the hero clips overflow, so they must not reach
   the container edge at the 1000px breakpoint. */
.hero__card--a { top: 8%;    left: -2%; }
.hero__card--b { top: 47%;   left: -6%; }
.hero__card--c { bottom: 7%; right: -3%; }

/* Stacked card — icon + title on top, a small chart beneath */
.hero__card--col { flex-direction: column; align-items: stretch; gap: .65rem; }
.hero__card-top { display: flex; align-items: center; gap: .6rem; }
.hero__card--col .hero__bars {
  height: 36px;
  align-self: stretch;
  justify-content: space-between;
  gap: 4px;
}
.hero__card--col .hero__bars i { flex: 1; width: auto; }

/* Avatar cluster (proof-in-numbers card) */
.hero__faces { display: flex; align-items: center; }
.hero__faces span {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  color: var(--brand-200);
  background: linear-gradient(150deg, rgba(217,180,65,.5), rgba(138,105,18,.3));
  border: 2px solid #16130D;
  margin-left: -9px;
}
.hero__faces span:first-child { margin-left: 0; }

/* Mini bar chart (progress card) */
.hero__bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 30px;
  flex: none;
}
.hero__bars i {
  width: 5px;
  height: var(--h);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-200), var(--brand-600));
}

/* --- Responsive --- */
@media (max-width: 999px) {
  .hero__inner { text-align: left; }
  .hero__visual { width: min(100%, 440px); order: 2; }
  .hero__card--a { left: 0; }
  .hero__card--b { left: -2%; }
  .hero__card--c { right: 0; }
}
@media (max-width: 560px) {
  .hero__card { padding: .6rem .8rem; gap: .55rem; border-radius: 13px; }
  .hero__card > svg { width: 27px; height: 27px; padding: 6px; border-radius: 9px; }
  .hero__card strong { font-size: var(--fs-xs); }
  .hero__card span { font-size: 10px; }
  .hero__card--b { display: none; }   /* keep the portrait readable on small screens */
  .hero__bars { height: 22px; }
}

/* --- Compact variant: no portrait, centred copy (used where a face would
   distract, e.g. dense utility pages) --- */
.hero--centered .hero__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.hero--centered .hero__lede { margin-inline: auto; }
.hero--centered .hero__actions { justify-content: center; }
.hero--centered .hero__strip-items { justify-content: center; }
.hero--centered .hero__bloom { left: 50%; top: 30%; }

/* --------------------------------------------------------------------------
   14. Marquee (credential ticker)
   -------------------------------------------------------------------------- */
.marquee {
  --mq-gap: 3.5rem;
  position: relative;
  display: flex;
  gap: var(--mq-gap);
  overflow: hidden;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__group {
  display: flex;
  align-items: center;
  gap: var(--mq-gap);
  flex: none;
  min-width: 100%;
  animation: marquee var(--mq-speed, 42s) linear infinite;
}
.marquee:hover .marquee__group { animation-play-state: paused; }
.marquee--reverse .marquee__group { animation-direction: reverse; }
/* The extra --mq-gap keeps the clone landing exactly where the original
   started, so the loop has no visible seam. */
@keyframes marquee { to { transform: translateX(calc(-100% - var(--mq-gap))); } }

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--text-soft);
  white-space: nowrap;
}
.marquee__item svg { width: 17px; height: 17px; color: var(--brand-400); flex: none; }
.marquee__item--gold svg { color: var(--gold); }
.marquee__sep { color: var(--dim); font-size: 1.4rem; line-height: 1; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, #0B0907, #070605);
  border-top: 1px solid var(--line);
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: min(600px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-400), transparent);
}

.footer__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 720px) {
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 1.8fr 1fr 1fr 1.6fr; }
  .footer__brand { grid-column: auto; }
}

.footer__brand { max-width: 360px; }
.footer__brand .brand { margin-bottom: 1.25rem; }
.footer__brand p { color: var(--muted); font-size: var(--fs-sm); }

.footer__creds {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1.4rem;
}
.footer__cred {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .3rem .65rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.02);
}

.footer__col h5 {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1.15rem;
}
.footer__col ul { display: grid; gap: .7rem; }
.footer__col a {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  transition: color var(--dur), transform var(--dur) var(--ease-out);
  display: inline-block;
}
.footer__col a:hover { color: var(--brand-300); transform: translateX(4px); }

.footer__cta-col p { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 1.25rem; }

.socials { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .7rem; margin-top: 1.5rem; }
.social {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(255,255,255,.02);
  transition: all var(--dur) var(--ease-out);
}
.social svg { width: 22px; height: 22px; }

/* Brand marks carry their own colours so each platform is recognisable at a
   glance; the chip stays neutral until hover, when it picks up a tint from
   the brand it links to. */
.social--linkedin:hover  { border-color: rgba(10,102,194,.55); background: rgba(10,102,194,.16); }
.social--instagram:hover { border-color: rgba(214,41,118,.55); background: rgba(214,41,118,.15); }

/* The labelled variant on the contact page keeps the mark slightly smaller so
   the icon and its word stay optically balanced. */
.socials--labelled .social svg { width: 19px; height: 19px; }

/* ══ Footer contact block ════════════════════════════════════════════════
   The two networks and the support address read as one short list rather
   than a square button sitting next to a long pill. Every row shares the
   same height, the same icon gutter and the same edge, so the column has a
   single left rhythm; the address closes the list under a hairline instead
   of floating loose beneath the icons. */

.site-footer .socials {
  display: grid;
  gap: .4rem;
  margin-top: 1.5rem;
}

.site-footer .socials .social {
  width: 100%;
  height: auto;
  min-height: 46px;
  display: grid;
  grid-template-columns: 26px 1fr;
  /* the base chip rule sets place-items:center, which would centre the label
     in its track instead of seating it against the icon gutter */
  place-items: center start;
  gap: .75rem;
  padding: .55rem .9rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: linear-gradient(168deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  transition: border-color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}

.site-footer .social svg { width: 22px; height: 22px; justify-self: center; }

.site-footer .social__label,
.site-footer .social__handle {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--dur) var(--ease-out);
}

/* The handle is a name, so it keeps the mono face the site uses for data. */
.site-footer .social__handle {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

/* Rows shift right rather than lifting — a list reads better nudged along
   its own axis than bouncing upward. */
.site-footer .socials .social:hover,
.site-footer .socials .social:focus-visible {
  transform: translateX(3px);
  border-color: rgba(217,180,65,.34);
  background: linear-gradient(168deg, rgba(201,162,39,.12), rgba(201,162,39,.03));
}

.site-footer .socials .social:hover .social__label,
.site-footer .socials .social:hover .social__handle,
.site-footer .socials .social:focus-visible .social__label,
.site-footer .socials .social:focus-visible .social__handle { color: var(--brand-200); }

.site-footer .social--linkedin:hover  { border-color: rgba(10,102,194,.5);
  background: linear-gradient(168deg, rgba(10,102,194,.16), rgba(10,102,194,.04)); }
.site-footer .social--instagram:hover { border-color: rgba(214,41,118,.5);
  background: linear-gradient(168deg, rgba(214,41,118,.15), rgba(214,41,118,.04)); }

/* Address block. The label/value pairing is the same wherever it appears —
   footer and contact sidebar both — so the typography and the gap that keeps
   them apart are unscoped. Only the divider above it is footer chrome. */
.social-email {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .45rem;
}

/* In the footer it sits on the same left edge as the rows above, set apart by
   a hairline so the list has a close rather than trailing off. */
.site-footer .social-email {
  margin-top: .55rem;
  padding-top: .85rem;
  border-top: 1px solid var(--line);
}

/* "Email" is a label for what follows, so it gets the colon that reads it
   as one — without one the two ran together as "Emailinfo@…". */
.social-email__k::after { content: ':'; }

.social-email__k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}

.social-email__v {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  word-break: break-word;
  transition: color .18s ease;
}

/* The address is a mailto link, so it needs an affordance on intent without
   carrying a permanent underline that would fight the quiet close above. */
a.social-email__v:hover,
a.social-email__v:focus-visible {
  color: var(--brand-300);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Phones get a single wide column, so the two networks sit side by side with
   a real gap between them and the address takes the row underneath. Above
   this the footer splits into narrow columns where a stacked list fits far
   better than two chips squeezed together. */
@media (max-width: 719px) {
  .site-footer .socials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* a full 1rem between the two chips so the handle never reads as though
       it belongs to the LinkedIn box next to it */
    gap: .6rem 1rem;
  }

  .site-footer .socials .social {
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
    grid-template-columns: 22px auto;
    gap: .5rem;
    padding: .55rem .8rem;
  }

  .site-footer .social__label,
  .site-footer .social__handle { overflow: visible; text-overflow: clip; }

  /* the address always starts its own row */
  .site-footer .social-email { flex-basis: 100%; }
}

/* Very narrow phones: let a long handle wrap to its own line rather than
   forcing the two chips to overlap. */
@media (max-width: 359px) {
  .site-footer .socials .social { flex-basis: 100%; }
}




.social:hover {
  color: #fff;
  border-color: rgba(217,180,65,.5);
  background: rgba(217,180,65,.14);
  transform: translateY(-3px);
}

/* Labelled variant — used where the link is the point, not decoration */
.socials--labelled .social {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1rem .6rem .8rem;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .05em;
  color: var(--text-soft);
}

/* The address is not a pill, so it takes the row under the networks instead of
   trailing the last one and wrapping mid-address. */
.socials--labelled .social-email {
  flex-basis: 100%;
  margin-top: .4rem;
}

.footer__disclaimer {
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--dim);
  max-width: 92ch;
}

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem 0 2rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--dim);
}
.footer__bar nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer__bar a:hover { color: var(--text-soft); }

/* Oversized watermark wordmark */
.footer__watermark {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 15vw, 13rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: .8;
  text-align: center;
  color: transparent;
  background: linear-gradient(180deg, rgba(217,180,65,.16), rgba(217,180,65,0) 78%);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  pointer-events: none;
  margin-bottom: -.12em;
  padding-inline: var(--gutter);
  white-space: nowrap;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   16b. Sticky conversion bar (mobile / tablet)
   Injected by main.js on every page except checkout.
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(13, 11, 8, 0.86);
  backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid var(--line-strong);
  transform: translateY(115%);
  transition: transform 520ms var(--ease-out);
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta__copy { flex: 1; min-width: 0; }
.sticky-cta__copy strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1.2;
}
.sticky-cta__copy span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-cta .btn { flex: none; }

@media (min-width: 1024px) { .sticky-cta { display: none; } }


/* --------------------------------------------------------------------------
   17. Reveal-on-scroll primitives
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal-left  { opacity: 0; transform: translateX(-32px); }
.reveal-right { opacity: 0; transform: translateX(32px); }
.reveal-left, .reveal-right {
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.reveal-left.is-visible, .reveal-right.is-visible { opacity: 1; transform: none; }

.reveal-scale {
  opacity: 0;
  transform: scale(.94);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.reveal-scale.is-visible { opacity: 1; transform: none; }

/* Word-by-word headline reveal (spans injected by JS).
   The mask wrapper must be inline-block — as a block it would force every
   word onto its own line. Bottom padding keeps descenders from clipping. */
.split-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .08em;
}
.split-word {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 900ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 42ms);
}
.is-visible .split-word { transform: none; }

/* --------------------------------------------------------------------------
   17b. Lightbox (injected by about.js / success-stories.js)
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.5rem, 2vw, 1.5rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(7, 6, 5, 0.94);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms var(--ease-out), visibility 300ms;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__stage {
  display: grid;
  place-items: center;
  max-height: 88svh;
}
.lightbox__stage img {
  max-width: 100%;
  max-height: 88svh;
  width: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg), 0 0 120px -40px rgba(169,132,24,0.59);
  transform: scale(.96);
  transition: transform 420ms var(--ease-out);
}
.lightbox.is-open .lightbox__stage img { transform: none; }

.lightbox__close,
.lightbox__nav {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  color: var(--text-soft);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-strong);
  transition: background-color var(--dur), color var(--dur), transform var(--dur) var(--ease-out);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(217,180,65,.22); color: #fff; transform: scale(1.08); }
.lightbox__close svg, .lightbox__nav svg { width: 20px; height: 20px; }

.lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  z-index: 2;
}

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 2000;
  padding: .8rem 1.3rem;
  background: var(--brand-500);
  color: var(--on-brand);
  border-radius: 0 0 10px 10px;
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: 0; }

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-6 { margin-top: 3rem; }
.nowrap { white-space: nowrap; }

/* Checkmark / dash used in feature lists & tables */
.tick { color: var(--brand-300); }
.tick--gold { color: var(--gold); }
.dash { color: var(--dim); }

/* --------------------------------------------------------------------------
   19. Legal / disclaimer note block
   -------------------------------------------------------------------------- */
.notice {
  position: relative;
  padding: 1.25rem 1.5rem 1.25rem 3.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.015);
  font-size: var(--fs-xs);
  line-height: 1.75;
  color: var(--muted);
}
.notice::before {
  content: '';
  position: absolute;
  left: 1.25rem;
  top: 1.45rem;
  width: 16px; height: 16px;
  background: currentColor;
  color: var(--brand-400);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}
.notice strong { color: var(--text-soft); }

/* --------------------------------------------------------------------------
   20. Motion / accessibility preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; }
  .split-word { transform: none; }
  .marquee__group { animation: none; }
}

/* View Transitions (progressive enhancement for page-to-page navigation) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 260ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in 380ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(8px); } }

/* Print */
@media print {
  body::after, .site-header, .mobile-nav, .scroll-progress { display: none !important; }
  body { background: #fff; color: #000; }
}