/* ============================================================
   Cakesmash Media — site.css
   Brand: locked palette per CLAUDE.md (Royal #0e4382, Coral #e3405b)
   Fonts: Gloock (display, Apr 27) + DM Sans (body) + Satoshi (statement callouts) + Cormorant Garamond (legacy fallback only)
   Mobile-first, no framework, single stylesheet.
   ============================================================ */

/* ---------- Scroll-reveal — eased fade + lift on viewport enter ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Satoshi — for editorial statement callouts (Fontshare, free) */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap');

/* ---------- Design tokens ---------- */
:root {
  /* Primary */
  --cs-royal:        #0e4382;
  --cs-navy-mid:     #2A3F7E;
  --cs-navy-light:   #3A5299;
  --cs-midnight:     #0A0F1E;
  /* Atmospheric gradient (hero only) */
  --cs-gradient: linear-gradient(135deg, #C84B6E 0%, #A83D6B 25%, #7A3080 50%, #4A2A7A 75%, #2A2060 100%);
  /* Accents */
  --cs-coral:        #e3405b;     /* UNIFIED 2026-04-27 — was #E05C3A orange, retired. Now points to the same accent red as text. Buttons, dividers, logo shatter all read as one brand red. */
  --cs-coral-light:  #ee5a73;     /* lighter variant of accent red for hover (was #F07A56 orange) */
  --cs-teal:         #4AB8A0;     /* Framework callouts, P.U.L.S.E. UI moments, page chrome — NOT for text highlights */
  --cs-text-highlight: #22dde0;   /* LOCKED 2026-04-28 — site-wide font highlight teal. Italic display pull-quotes, eyebrows, any text-accent that should "pop" against dark gradient. Supersedes --cs-teal for ALL font-color use. */
  --cs-bleeding:     #e3405b;     /* legacy — collapsed to accent red */
  --cs-accent-text:  #e3405b;     /* LOCKED 2026-04-27 — accent text color */
  /* Neutrals */
  --cs-white:        #FFFFFF;
  --cs-offwhite:     #F0EDE8;
  --cs-warmgray:     #B0AAA8;
  --cs-nearblack:    #1A1A1A;
  --cs-line:         rgba(255, 255, 255, 0.12);
  --cs-line-dark:    #E5E2DD;

  /* Type */
  --font-display:   'Gloock', 'Cormorant Garamond', Georgia, serif;   /* Gloock locked Apr 27 — bold didone authority for h1/h2/h3. Cormorant kept as fallback only. */
  --font-body:      'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-statement: 'Satoshi', 'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Spacing scale (rem) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Containers */
  --container-max: 1240px;
  --container-narrow: 880px;
  --container-text: 680px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--cs-nearblack);
  background: var(--cs-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video, picture { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; font: inherit; cursor: pointer; color: inherit; }
ul, ol { list-style: none; }

/* ---------- Typography ---------- */
.font-display   { font-family: var(--font-display); }
.font-body      { font-family: var(--font-body); }
.font-statement { font-family: var(--font-statement); }

/* Statement callout — for tagline/pull-quote moments
   (used in place of italic Cormorant for short emphatic lines).
   Upright sans, medium-bold weight, tracked tight.
   Default color = accent red (the brand "punctuation note") so callouts pop on dark/warm bgs.
   Override inline (color:var(--cs-teal), color:#fff) only on rare exceptions. */
.statement {
  font-family: var(--font-statement);
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--cs-accent-text);
}
.statement--strong { font-weight: 700; }
.statement--lg     { font-size: 1.65rem; }
.statement--md     { font-size: 1.4rem; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; letter-spacing: -0.012em; text-wrap: balance; }   /* Gloock is single-weight (400). Tight kerning matches the audition treatment. text-wrap: balance kills orphans globally — no more two-word last lines. */
h1 { font-size: clamp(2.25rem, 5.5vw, 4.5rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.65rem); }
h4 { font-size: 1.125rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cs-accent-text);
  margin-bottom: var(--s-3);
}
p { margin-bottom: var(--s-4); }
p.lead { font-size: 1.15rem; line-height: 1.55; }

/* ---------- Layout containers ---------- */
.container        { max-width: var(--container-max);    margin: 0 auto; padding: 0 var(--s-5); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--s-5); }
.container-text   { max-width: var(--container-text);   margin: 0 auto; padding: 0 var(--s-5); }

.section          { padding: var(--s-9) 0; }
.section-tight    { padding: var(--s-7) 0; }
.section-dark     { background: var(--cs-midnight); color: var(--cs-white); }
.section-royal    { background: var(--cs-royal);   color: var(--cs-white); }
.section-cream    { background: var(--cs-offwhite); color: var(--cs-nearblack); }
.section-gradient { background: var(--cs-gradient); color: var(--cs-white); }

/* ---------- Header / nav ---------- */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0;
  transition:
    transform 0.35s ease-out,
    opacity 0.3s ease-out,
    background 0.25s ease-out;
}
.nav-wrap { margin-top: -8px; }
.site-header.solid {
  position: sticky;
  background: rgba(10, 15, 30, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Headroom: floats fixed at top once scrolled past hero,
   slides up + fades on scroll-down, slides back in on scroll-up */
.site-header.is-floating {
  position: fixed;
  background: linear-gradient(180deg,
    rgba(10, 15, 30, 0.95) 0%,
    rgba(10, 15, 30, 0.88) 45%,
    rgba(10, 15, 30, 0.55) 75%,
    rgba(10, 15, 30, 0) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 1;
}
.site-header.is-floating.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: opacity 0.2s ease-out; }
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
.nav-logo img { height: 92px; width: auto; }
.nav-links {
  display: none;
  align-items: center;
  gap: var(--s-6);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.nav-links a {
  color: var(--cs-text-highlight);   /* Apr 28 — unified to site-wide highlight teal #22dde0 (was #378eaf medium teal-blue) */
  opacity: 1;
  transition: opacity 0.2s, color 0.2s;
}
.nav-links a:hover { opacity: 1; color: var(--cs-accent-text); }
.nav-links a.active { opacity: 1; border-bottom: 2px solid #ec496a; padding-bottom: 4px; }
.nav-social {
  display: none;
  align-items: center;
  gap: var(--s-4);
}
.nav-social a {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cs-white); opacity: 0.7;
  transition: opacity 0.2s;
}
.nav-social a:hover { opacity: 1; }
.nav-social svg { width: 20px; height: 20px; fill: currentColor; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  color: var(--cs-white);
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: currentColor; transition: transform 0.25s; }

@media (min-width: 880px) {
  .nav-toggle { display: none; }
  .nav-links, .nav-social { display: inline-flex; }
}

/* Mobile nav drawer */
.nav-mobile {
  position: fixed;
  inset: 0;
  background: var(--cs-midnight);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  z-index: 200;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.nav-mobile.open { opacity: 1; visibility: visible; }
.nav-mobile a {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--cs-white);
}
.nav-mobile a:hover { color: var(--cs-accent-text); }
.nav-mobile-close {
  position: absolute; top: var(--s-5); right: var(--s-5);
  font-size: 2rem; color: var(--cs-white);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 16px 32px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn-outline-white { color: var(--cs-white); }
.btn-outline-white:hover { background: var(--cs-white); color: var(--cs-royal); border-color: var(--cs-white); }
.btn-solid-royal { background: var(--cs-royal); color: var(--cs-white); border-color: var(--cs-royal); }
.btn-solid-royal:hover { background: var(--cs-coral); border-color: var(--cs-coral); }
.btn-solid-coral { background: var(--cs-coral); color: var(--cs-white); border-color: var(--cs-coral); }
.btn-solid-coral:hover { background: var(--cs-royal); border-color: var(--cs-royal); }

/* ---------- Hero (Grade 1 gradient + looping video) ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(180deg, #c93558 0%, #3261C4 60%, #3B001A 100%);
  color: var(--cs-white);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--s-9) var(--s-5) var(--s-8);
  overflow: hidden;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  opacity: 0.42;
  z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.3) 6%, rgba(0,0,0,0.7) 12%, #000 18%, #000 70%, rgba(0,0,0,0.6) 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.3) 6%, rgba(0,0,0,0.7) 12%, #000 18%, #000 70%, rgba(0,0,0,0.6) 88%, transparent 100%);
}
/* keep .hero-bg for fallback if video fails to load */
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.55;
  mix-blend-mode: overlay;
}
.hero--vitals .hero-bg {
  transform-origin: 50% 50%;
  animation: kenBurnsVitalsHero 36s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenBurnsVitalsHero {
  0%   { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.18) translate(2%, -1.5%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero--vitals .hero-bg { animation: none; transform: scale(1.04); }
}
.hero-content {
  position: relative;
  max-width: 920px;
  z-index: 3;
}

/* ============================================================
   CONTINUOUS GRADIENT SYSTEM
   Every section starts where the previous ends.
   No hard cuts anywhere on the page.
   ============================================================ */

/* Each section gets position:relative so ::before overlay works */
.section, .section-tight, .site-footer { position: relative; }

/* Reusable top-bleed overlay — fades previous section color into this one */
.gb-reel     { background: linear-gradient(180deg, #3B001A 0%, #2a0a25 22%, #18112e 50%, #1a1f50 82%, #1d2a6a 100%); color: var(--cs-white); }   /* picks up hero's maroon close, descends through deep plum to navy — meets gb-stats seamlessly */
.gb-stats    { background: linear-gradient(180deg, #1d2a6a 0%, #2e44a8 12%, #456CF9 35%, #3261C4 70%, #1a1a3e 100%); color: var(--cs-white); }   /* starts at gb-reel's navy close, ramps into bright cobalt, descends to deep navy at the bottom seam */
.gb-wound    { background: transparent; color: var(--cs-white); }
.gb-stagnate { background: transparent; color: var(--cs-white); }

/* Wound + Stagnate share a single full-bleed cinematic image background.
   Image lives behind both sections, fades out before the diagnosis cards. */
.wound-stage {
  position: relative;
  background: linear-gradient(180deg, #1a1a3e 0%, #15205a 50%, #1f3275 80%, #2A3F7E 100%);
  isolation: isolate;
  overflow: hidden;
}
.wound-stage::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('../assets/empty-lobby1.jpg?v=3') center top / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.06) 8%, rgba(0,0,0,0.16) 17%, rgba(0,0,0,0.32) 26%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.8) 43%, rgba(0,0,0,0.95) 48%, #000 52%, #000 70%, rgba(0,0,0,0.65) 80%, rgba(0,0,0,0.32) 88%, rgba(0,0,0,0.08) 94%, transparent 98%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.06) 8%, rgba(0,0,0,0.16) 17%, rgba(0,0,0,0.32) 26%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.8) 43%, rgba(0,0,0,0.95) 48%, #000 52%, #000 70%, rgba(0,0,0,0.65) 80%, rgba(0,0,0,0.32) 88%, rgba(0,0,0,0.08) 94%, transparent 98%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  transform-origin: 50% 45%;
  animation: cs-wound-kenburns 32s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes cs-wound-kenburns {
  0%   { transform: scale(1.0) translate(0, 0); }
  100% { transform: scale(1.10) translate(1%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
  .wound-stage::before { animation: none; transform: none; }
}
.wound-stage::after {
  /* dark legibility scrim — lets text breathe over the image without
     drowning the cake-on-operating-table imagery */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(8, 13, 48, 0.18) 0%,
    rgba(8, 13, 48, 0.28) 35%,
    rgba(8, 13, 48, 0.32) 60%,
    rgba(8, 13, 48, 0.15) 85%,
    rgba(8, 13, 48, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
.wound-stage > section { position: relative; z-index: 1; }

/* Director-close strip — closes the wound-stage with the "meet the director" beat,
   anchored to the section as deliberate punctuation, not an orphan button. */
.director-close {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: var(--s-9);
  padding-top: var(--s-7);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.director-close::before {
  content: '';
  display: block;
  width: 88px;
  height: 1px;
  background: #22dde0;
  opacity: 0.7;
  margin: 0 auto var(--s-6);
}
.director-close-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  line-height: 1.35;
  color: var(--cs-text-highlight);
  margin: 0 0 var(--s-5);
  letter-spacing: -0.005em;
}
.gb-pulse    { background: linear-gradient(180deg, #2A3F7E 0%, #2a2a6a 25%, #2d1a5a 55%, #43127f 100%); color: var(--cs-white); }

/* Home PULSE rows — quick scroll-triggered entry: letter slides in from left
   with blur-to-crisp, title fades in from the right with a subtle slide. */
.gb-pulse .two-col > div:first-child {
  opacity: 0;
  transform: translateX(-40px);
  filter: blur(14px);
  transition:
    opacity 0.55s ease-out,
    transform 0.55s cubic-bezier(0.18, 0.78, 0.22, 1),
    filter 0.55s ease-out;
  will-change: opacity, transform, filter;
}
.gb-pulse .two-col h3 {
  opacity: 0;
  transform: translateX(22px);
  transition:
    opacity 0.55s ease-out 0.12s,
    transform 0.55s cubic-bezier(0.18, 0.78, 0.22, 1) 0.12s;
  will-change: opacity, transform;
}
.gb-pulse .two-col.is-visible > div:first-child {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}
.gb-pulse .two-col.is-visible h3 {
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .gb-pulse .two-col > div:first-child,
  .gb-pulse .two-col h3 {
    opacity: 1; transform: none; filter: none; transition: none;
  }
}

/* PULSE rungs — letter cell paired with title+body, drop-cap rhythm */
.pulse-rungs {
  max-width: 880px;
  margin: 0 auto;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .pulse-rungs.diagnosis-grid {
    grid-template-columns: 1fr;
  }
}
.pulse-rungs .two-col {
  gap: var(--s-5);
  align-items: start;
  margin-bottom: var(--s-6);
}
@media (min-width: 880px) {
  .pulse-rungs .two-col {
    grid-template-columns: 120px 1fr;
    gap: var(--s-6);
  }
}
.pulse-rung-letter {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 7vw, 6.5rem);
  font-weight: 700;
  color: var(--cs-accent-text);
  line-height: 0.9;
  text-align: center;
}
.pulse-rungs .two-col h3 {
  margin-top: 0;
}

.gb-vitals   { background: linear-gradient(180deg, #43127f 0%, #8b1a60 35%, #c23a60 65%, #FD456A 100%); color: var(--cs-white); }
.gb-disrupt  { background: linear-gradient(180deg, #FD456A 0%, #8B2D6E 30%, #3261C4 68%, #1A2090 100%); color: var(--cs-white); }

/* ---------- Tastefully Disruptive: BTS film strip ---------- */
.bts-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  max-width: 1180px;
  margin: var(--s-7) auto 0;
}
@media (min-width: 768px) {
  .bts-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
  }
}
.bts-frame {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 4px;
  background: #0a0a0a;
  box-shadow:
    0 22px 44px -16px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}
.bts-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s ease-out;
}
.bts-frame:hover img {
  transform: scale(1.04);
}
.bts-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.32) 100%);
  pointer-events: none;
}
.bts-frame--beauty img    { object-position: center 50%; }
.bts-frame--portrait img  { object-position: center 30%; }
.bts-frame--tub img       { object-position: center 25%; }
.gb-cta      { background: linear-gradient(180deg, #1A2090 0%, #2a1560 50%, #3B001A 100%); color: var(--cs-white); }
.gb-footer   { background: linear-gradient(180deg, #3B001A 0%, #1A0010 60%, #0a0008 100%); color: var(--cs-warmgray); }

/* ============================================================
   PER-PAGE GRADIENT REGISTERS
   Each page leans on a different subset of the locked palette.
   Same chassis, different cinematographic register.
   ============================================================ */

/* ---- Solutions: Royal + Teal cool/systematic ----
   Phases 1–2: cool register.
   Phases 3–5 form the atmospheric arc that spans ACROSS sections (approach → peak → resolve)
   — same shape as the homepage gb-pulse → gb-vitals → gb-disrupt arc. */
.gb-sol-p   { background: linear-gradient(180deg, #1d5cc8 0%, #0e4382 100%); color: var(--cs-white); }   /* Picks up hero's bright cobalt seam and darkens into Royal to meet gb-sol-u */
.gb-sol-u   { background: linear-gradient(180deg, #0e4382 0%, #2A3F7E 55%, #1A2D5E 100%); color: var(--cs-white); }
.gb-sol-l   { background: linear-gradient(180deg, #1A2D5E 0%, #2A2060 50%, #4A2A7A 100%); color: var(--cs-white); }       /* APPROACH — cool deepens into indigo */
.gb-sol-s   { background: linear-gradient(180deg, #4A2A7A 0%, #7A3080 35%, #C84B6E 75%, #A83D6B 100%); color: var(--cs-white); } /* PEAK — indigo → plum → coral-magenta → rose */
.gb-sol-e   { background: linear-gradient(180deg, #A83D6B 0%, #4A2A7A 35%, #2A3F7E 70%, #0e4382 100%); color: var(--cs-white); } /* RESOLVE — rose back through indigo to royal */
.gb-sol-cta { position: relative; background: linear-gradient(180deg, #0e4382 0%, #2a1560 45%, #2a0820 75%, #3B001A 100%); color: var(--cs-white); overflow: hidden; padding: 18rem 0; }   /* Royal → indigo → dark plum → maroon at footer seam (matches gb-footer's #3B001A top) */
.cta-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.28;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.cta-content { position: relative; z-index: 2; }

/* ---- About: warm-lean — atmospheric arc spans hero → origin → pedigree → problem ----
   Hero (homepage default) ends at #3B001A. Origin picks up there and BUILDS to coral peak.
   Pedigree continues the peak resolving through plum to indigo. Problem closes the arc to royal.
   Cream values is the intentional intermission. CTA ends at #3B001A to match footer's start. */
.gb-about-origin    { background: linear-gradient(180deg, #3B001A 0%, #6A1F3A 30%, #C84B6E 75%, #A83D6B 100%); color: var(--cs-white); } /* BUILD — maroon deepens into coral peak */
.gb-about-pedigree  { position: relative; background: linear-gradient(180deg, #A83D6B 0%, #7A3080 50%, #4A2A7A 100%); color: var(--cs-white); overflow: hidden; padding: 14rem 0 12rem; }   /* PEAK CONTINUES + RESOLVE BEGINS — Kyle-berlin photo overlays at low opacity, masked top/bottom for full-bleed dissolve. Tall padding so cover-crop reveals more of the image vertically */
.gb-about-pedigree::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../assets/yonka-set.jpg') center / cover no-repeat;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.gb-about-pedigree > * { position: relative; z-index: 1; }
.gb-about-problem   { background: linear-gradient(180deg, #4A2A7A 0%, #2A2060 50%, #0e4382 100%); color: var(--cs-white); }                /* RESOLVE COMPLETES */
.gb-about-problem h2 { text-wrap: balance; max-width: 24ch; margin-left: auto; margin-right: auto; }
.gb-about-values    { position: relative; background: linear-gradient(180deg, #0e4382 0%, #1a2090 50%, #0e4382 100%); color: var(--cs-white); overflow: hidden; }   /* continuous royal-blue band; Stats Full image overlays at low opacity, blurred, masked top/bottom */
.gb-about-values::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../assets/Stats Full.jpg') center / cover no-repeat;
  opacity: 0.18;
  filter: blur(3px);
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.gb-about-values > * { position: relative; z-index: 1; }
.gb-about-values h2,
.gb-about-values h2.text-royal,
.gb-about-values p { color: var(--cs-white); }
.gb-about-values .values-row h3 { color: #22dde0; }
.gb-about-stats     { position: relative; background: linear-gradient(180deg, #0e4382 0%, #3A5299 50%, #1A2090 100%); color: var(--cs-white); overflow: hidden; }   /* swells brighter in the middle (cobalt-leaning) so the numbers sit in their own pocket of light, then descends into deeper navy at the bottom */
.gb-about-stats::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 55% at 50% 55%, rgba(69, 108, 249, 0.22) 0%, rgba(69, 108, 249, 0.08) 45%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
.gb-about-stats > * { position: relative; z-index: 1; }
.gb-about-cta       { background: linear-gradient(180deg, #2A3F7E 0%, #2a1560 35%, #5A1F36 70%, #3B001A 100%); color: var(--cs-white); }   /* CLOSE — navy → indigo → maroon, lands at footer's #3B001A */

/* ---- Vitals Audit: clinical/diagnostic — coral pulse moments on a Royal/Midnight bed ---- */
.gb-va-scrutiny    { background: linear-gradient(180deg, #2A2060 0%, #1A2090 50%, #0e4382 100%); color: var(--cs-white); }   /* deep indigo continues from hero, descending through blue to royal */
.gb-va-pre         { background: linear-gradient(180deg, #0e4382 0%, #2A3F7E 30%, #6A2D5E 60%, #9A3658 85%, #7A2A48 100%); color: var(--cs-white); }   /* royal → bright pink peak at 85% → dusks back to a muted rose at the seam, so the boundary isn't a saturated stripe */
.gb-va-checks      { position: relative; background: linear-gradient(180deg, #7A2A48 0%, #8a3258 18%, #7A2A48 38%, #4a1838 60%, #1a0c20 82%, #0A0F1E 100%); color: var(--cs-white); overflow: hidden; padding-bottom: 16rem; }   /* smooth descent — no dark dip. Peaks gently at 18%, returns to seam color at 38%, then fades cleanly through plum-shadow to midnight */
.gb-va-checks::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../assets/doctor_cake1.jpg') center / cover no-repeat;
  opacity: 0.38;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 8%, rgba(0,0,0,0.4) 18%, #000 32%, #000 78%, transparent 97%);
          mask-image: linear-gradient(180deg, transparent 0%, transparent 8%, rgba(0,0,0,0.4) 18%, #000 32%, #000 78%, transparent 97%);
}
.gb-va-checks > * { position: relative; z-index: 1; }
.gb-va-prescription { position: relative; background: var(--cs-midnight); color: var(--cs-white); overflow: hidden; padding: 14rem 0 12rem; }   /* dark base + Spotlight image — long dark fade-in at top, generous breathing room overall */
.gb-va-prescription::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../assets/Spotlight.jpeg') center / cover no-repeat;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 88%, transparent 100%);
  transform-origin: 50% 50%;
  animation: kenBurnsPrescription 32s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenBurnsPrescription {
  0%   { transform: scale(1.02) translate(0, 0); }
  100% { transform: scale(1.16) translate(-2.5%, -1.5%); }
}
@media (prefers-reduced-motion: reduce) {
  .gb-va-prescription::before { animation: none; transform: scale(1.02); }
}
.gb-va-prescription > * { position: relative; z-index: 1; }
.gb-va-prescription h2,
.gb-va-prescription h2.text-royal { color: var(--cs-white); }
.gb-va-prescription .lead,
.gb-va-prescription p { color: var(--cs-white); }
.gb-va-prescription h2 { margin-bottom: 6rem; }   /* push body copy below the bright surgical-light bokeh in the Spotlight image */
.gb-va-reserved    { background: linear-gradient(180deg, #0A0F1E 0%, #1a2090 45%, #0e4382 70%, #0A0F1E 100%); color: var(--cs-white); }   /* midnight → royal swell → midnight — meets prescription bleed at top, footer at bottom */
.gb-va-reserved h2 { text-wrap: balance; max-width: 26ch; margin-left: auto; margin-right: auto; }

/* ---- Contact: light/invitational — breath, no atmospheric ---- */
.gb-contact-direct { position: relative; background: linear-gradient(180deg, #4a3580 0%, #6a3580 18%, #8a3580 35%, #6a2d70 55%, #3a2660 78%, #2A3F7E 100%); color: var(--cs-white); overflow: hidden; padding: 14rem 0 12rem; }   /* meets hero's indigo close at the top (no rose seam), warm plum moment lives MID-section where the CS-banner image sits, descends through indigo to navy at gb-footer-light. Tall padding for breathing room */
.gb-contact-direct .eyebrow { color: var(--cs-teal) !important; }   /* teal counterpoint — cuts through both blue and plum sides of the gradient */
.gb-contact-direct h2,
.gb-contact-direct h2.text-royal,
.gb-contact-direct .lead,
.gb-contact-direct p { color: var(--cs-white); }
.gb-contact-direct::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../assets/CS-banner.jpg') center / cover no-repeat;
  opacity: 0.42;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  transform-origin: 50% 55%;
  animation: cs-kenburns 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes cs-kenburns {
  0%   { transform: scale(1.05) translate(-1.2%, 0.6%); }
  100% { transform: scale(1.22) translate(2.4%, -1.8%); }
}
@media (prefers-reduced-motion: reduce) {
  .gb-contact-direct::before { animation: none; transform: none; }
}
.gb-contact-direct > * { position: relative; z-index: 1; }

/* ---- Cool footer variant — for pages that resolve to midnight, not maroon ---- */
.gb-footer-cool { background: linear-gradient(180deg, #0A0F1E 0%, #06081a 60%, #0a0008 100%); color: var(--cs-warmgray); }

/* ---- Light footer variant — for Contact (cream → midnight resolve) ---- */
.gb-footer-light { background: linear-gradient(180deg, #2A3F7E 0%, #0A0F1E 60%, #0a0008 100%); color: var(--cs-warmgray); }

/* ============================================================
   HERO REGISTER MODIFIERS
   Override the default warm coral/blue/maroon hero per page mood.
   ============================================================ */
.hero--solutions {
  background: linear-gradient(180deg,
    #c93558 0%,    /* Rich coral pop — homepage anchor color */
    #a83048 14%,   /* Coral deepens */
    #7a3060 28%,   /* Warm plum bridge — coral fading toward purple */
    #4A2A7A 45%,   /* Brand indigo — saturated rich purple */
    #2a4098 62%,   /* Indigo-to-blue handoff */
    #1a52b0 80%,   /* Saturated blue rising */
    #1d5cc8 100%); /* Bright rich cobalt at the seam — gb-sol-p picks up here */
}
.hero--vitals {
  background: linear-gradient(180deg, #c23a60 0%, #A83D6B 30%, #7A3080 60%, #2A2060 100%);
  /* Darker pink coral at the top (#c23a60 dark rose, was #FD456A), descending through rose → plum → deep indigo.
     The warm peak ARRIVES at the top of the page and gradually fades over the next 2 sections (scrutiny, pre). */
}
.hero--contact {
  background: linear-gradient(180deg, #0e4382 0%, #2A3F7E 30%, #3a3080 65%, #4a3580 100%);
  /* Royal → indigo close — meets gb-contact-direct at indigo (no rose band at the seam) */
}
.hero--about {
  background: linear-gradient(180deg, #0A0F1E 0%, #2A2060 50%, #3B001A 100%);
  padding-top: 13rem;   /* push eyebrow well below the menu bar on tall viewports */
  /* Cinematic dark — midnight → indigo → maroon. Pairs with the looping face/tech video overlay
     and lands at #3B001A to match gb-about-origin's top color (no seam at section boundary). */
}

/* ============================================================
   PAGE-SPECIFIC ACCENT HOOKS
   Where teal earns its keep on Solutions, where coral pulses on Vitals.
   ============================================================ */

/* Solutions: the giant phase letters */
.phase-letter {
  font-family: var(--font-display);
  font-size: clamp(7rem, 16vw, 13rem);
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
.phase-letter--coral { color: var(--cs-accent-text); }
.phase-letter--teal  { color: var(--cs-teal); }

/* Solutions: phase visual (image/video supporting each phase) */
.phase-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6);
}
.phase-visual img,
.phase-visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.phase-visual .phase-letter-overlay {
  position: absolute;
  top: 1.25rem;
  left: 1.75rem;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 6.5vw, 5.5rem);
  font-weight: 700;
  line-height: 0.9;
  color: var(--cs-accent-text);
  text-shadow: 0 4px 24px rgba(0,0,0,0.6);
  z-index: 2;
  pointer-events: none;
}
.phase-visual .phase-letter-overlay--teal { color: var(--cs-text-highlight); }

/* Solutions: inline media (image or video) inside a phase column, native aspect ratio preserved */
.phase-inline-image,
.phase-inline-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,0.55);
}

/* Modifier: uniform blur + overlay blend — for videos where unreadable AI-generated text
   should NOT be legible across the whole frame */
.phase-inline-video--overlay-blur {
  filter: blur(2px);
  mix-blend-mode: overlay;
  opacity: 0.95;
}

/* Modifier: softened opacity — for atmospheric video moments that don't need to be punchy/crisp */
.phase-inline-video--soft {
  opacity: 0.85;
}

/* Wrapper: gradient blur — left half of video is blurred (under the giant phase letter),
   fading into sharp focus toward the right. Used on Phase 5 so the slop AI dashboard text
   only renders unreadable on the side covered by the letter. */
.phase-video-blur-mask {
  position: relative;
  width: 100%;
  display: block;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,0.55);
  mix-blend-mode: overlay;
  opacity: 0.95;
}
.phase-video-blur-mask video {
  width: 100%;
  height: auto;
  display: block;
}
.phase-video-blur-mask::after {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mask-image: linear-gradient(to right, black 0%, black 32%, transparent 68%);
  -webkit-mask-image: linear-gradient(to right, black 0%, black 32%, transparent 68%);
  pointer-events: none;
}
/* Reverse layout (e.g. Phase 2): blur the RIGHT half so it falls under the right-column letter */
.three-col-phase--reverse .phase-video-blur-mask::after {
  mask-image: linear-gradient(to left, black 0%, black 32%, transparent 68%);
  -webkit-mask-image: linear-gradient(to left, black 0%, black 32%, transparent 68%);
}

/* Solutions: 3-column phase layout — letter overlapping media | media | text.
   Media spans the first two grid columns at native aspect ratio (so it reads large/cinematic);
   the giant phase letter sits on top of column 1, overlapping the left portion of the media. */
.three-col-phase {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: center;
}
@media (min-width: 1024px) {
  .three-col-phase {
    grid-template-columns: 0.8fr 1.4fr 1.5fr;
    gap: var(--s-8);
    align-items: center;
  }
  .three-col-phase--reverse {
    grid-template-columns: 1.5fr 1.4fr 0.8fr;
  }
  /* Media spans cols 1-2 (standard) so it reads ~60% page width */
  .three-col-phase > .phase-inline-image,
  .three-col-phase > .phase-inline-video,
  .three-col-phase > .phase-video-blur-mask {
    grid-column: 1 / span 2;
    grid-row: 1;
    z-index: 1;
  }
  /* Letter overlays col 1, on top of media */
  .three-col-phase > .phase-letter {
    grid-column: 1;
    grid-row: 1;
    z-index: 2;
    text-shadow: 0 4px 32px rgba(0,0,0,0.5);
  }
  /* Reverse: media spans cols 2-3, letter overlays col 3 */
  .three-col-phase--reverse > .phase-inline-image,
  .three-col-phase--reverse > .phase-inline-video,
  .three-col-phase--reverse > .phase-video-blur-mask {
    grid-column: 2 / span 2;
  }
  .three-col-phase--reverse > .phase-letter {
    grid-column: 3;
  }
}

/* ---- Scroll-triggered phase animations (P.U.L.S.E.) ----
   Letters: defocus float-in, big blur → sharp.
   Titles: blurry fade-in slid from the left, then settle into a slow rightward breath.
   Trigger: .is-visible class added by IntersectionObserver in solutions.html. */
.phase-letter,
.gb-sol-p h2, .gb-sol-u h2, .gb-sol-l h2, .gb-sol-s h2, .gb-sol-e h2 {
  opacity: 0;
  will-change: opacity, filter, transform;
}
.phase-letter {
  filter: blur(56px);
  transform: scale(0.82) translateY(36px);
  transition:
    opacity 1.6s ease-out,
    filter 1.6s ease-out,
    transform 1.6s cubic-bezier(0.18, 0.78, 0.22, 1);
}
.section.gb-sol-p h2, .section.gb-sol-u h2, .section.gb-sol-l h2, .section.gb-sol-s h2, .section.gb-sol-e h2 {
  filter: blur(24px);
  transform: translateX(-34px);
  transform-origin: left center;
  transition:
    opacity 1.3s ease-out 1s,
    filter 1.3s ease-out 1s,
    transform 1.3s cubic-bezier(0.18, 0.78, 0.22, 1) 1s;
}
.phase-letter.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: scale(1) translateY(0);
  animation: cs-phase-letter-bloom 9s ease-in-out 1.8s infinite alternate;
}
.section.gb-sol-p h2.is-visible, .section.gb-sol-u h2.is-visible,
.section.gb-sol-l h2.is-visible, .section.gb-sol-s h2.is-visible,
.section.gb-sol-e h2.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: scaleX(1);
  animation: cs-phase-title-breath 7s ease-in-out 2.3s infinite;
}
@keyframes cs-phase-title-breath {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(1.035); }
}
@keyframes cs-phase-letter-bloom {
  0%   { transform: scale(1) translateY(0); }
  100% { transform: scale(1.07) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .phase-letter,
  .gb-sol-p h2, .gb-sol-u h2, .gb-sol-l h2, .gb-sol-s h2, .gb-sol-e h2 {
    opacity: 1; filter: none; transform: none;
    transition: none; animation: none;
  }
}
.phase-letter--white { color: var(--cs-white); text-shadow: 0 4px 30px rgba(0,0,0,0.35); }

/* Solutions: teal-tinted callouts in body copy (the P.U.L.S.E. callouts the brand spec'd for) */
.text-teal { color: var(--cs-teal); }
.callout-teal strong { color: var(--cs-teal); letter-spacing: 0.03em; }

/* Vitals Audit: 2x2 grid for the four diagnostic checks (vs 3-up homepage diagnosis-grid) */
.va-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 880px) {
  .va-grid { grid-template-columns: 1fr 1fr; }
}

/* Vitals Audit: the diagnostic check cards on the dark "monitor" section */
.va-check-card {
  background: rgba(10, 15, 30, 0.62);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border: 1px solid rgba(74, 184, 160, 0.18);
  border-left: 3px solid var(--cs-coral);
  padding: var(--s-6);
  border-radius: 4px;
}
.va-check-card .label {
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cs-teal); margin-bottom: var(--s-3); display: block;
}
.va-check-card h3 { color: var(--cs-accent-text); margin-bottom: var(--s-3); font-size: 1.4rem; }

/* About: the values list (light cream section, royal labels, hairline rules) */
.values-list { display: grid; grid-template-columns: 1fr; gap: 0; }
.values-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--cs-line-dark);
  align-items: start;
}
.values-row:last-child { border-bottom: 0; }
.values-row h3 {
  color: var(--cs-royal);
  font-size: 1.4rem;
  margin: 0;
}
.values-row p { margin: 0; }
@media (min-width: 720px) {
  .values-row { grid-template-columns: 240px 1fr; gap: var(--s-7); }
}

.hero h1 {
  margin-bottom: var(--s-5);
  line-height: 1.05;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transform-origin: left center;
  animation: cs-hero-h1-breath 18s ease-in-out infinite;
  will-change: transform;
}
@keyframes cs-hero-h1-breath {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(1.022); }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 { animation: none; }
}

/* Subtle left-anchored breath on a single body line (e.g. "I founded Cakesmash Media to close it.") */
.cs-breath-line {
  display: inline-block;
  transform-origin: left center;
  animation: cs-breath-line 11s ease-in-out 0.5s infinite;
  will-change: transform;
}
@keyframes cs-breath-line {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(1.028); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-breath-line { animation: none; }
}

/* Widen home hero so the long lead paragraph breathes */
.hero--home .hero-content { max-width: 1120px; }
.hero--home p.lead { max-width: 980px; font-size: 1.32rem; line-height: 1.55; }
.hero--home .hero-video { opacity: 0.32; }
.hero--solutions .hero-video { opacity: 0.22; }

/* Home hero h1 — selective defocus: surrounding phrases blur softly,
   "World-Class." and "Marketing" stay crisp as the focal points.
   Inline-block is required for filter to apply per-span. */
.h1-defocus {
  display: inline-block;
  filter: blur(0);
  opacity: 1;
  animation: cs-h1-defocus 4s ease-in 0.4s forwards;
  will-change: filter, opacity;
}
@keyframes cs-h1-defocus {
  0%   { filter: blur(0);   opacity: 1; }
  100% { filter: blur(3px); opacity: 0.82; }
}
@media (prefers-reduced-motion: reduce) {
  .h1-defocus { filter: none; opacity: 1; animation: none; }
}

/* Home hero brand-promise callout — italic Cormorant pull-quote in coral,
   distinct from the body lead above it. The page's punctum line. */
.hero p.hero-callout {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: #22dde0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  max-width: 980px;
  margin: var(--s-7) auto var(--s-7);
  padding-top: var(--s-5);
  position: relative;
  opacity: 1;
}
.hero p.hero-callout::before {
  content: '';
  display: block;
  width: 72px;
  height: 1px;
  background: #22dde0;
  opacity: 0.7;
  margin: 0 auto var(--s-5);
}

/* Widen about hero so "We don't make content." stays on its line */
.hero--about .hero-content { max-width: 1080px; }

/* Widen solutions hero so "Precision in every frame..." stays on its line */
.hero--solutions .hero-content { max-width: 1100px; }

/* "We hand you a diagnosis." — pull-quote register: italic display,
   bracketed by hairlines, given air. Specific to the solutions hero. */
.hero--solutions .statement.statement--lg {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin-top: var(--s-6);
  margin-bottom: var(--s-7);
  position: relative;
  padding: var(--s-5) 0;
}
.hero--solutions .statement.statement--lg::before,
.hero--solutions .statement.statement--lg::after {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
  background: var(--cs-teal);
  opacity: 0.7;
  margin: 0 auto;
}
.hero--solutions .statement.statement--lg::before { margin-bottom: var(--s-5); }
.hero--solutions .statement.statement--lg::after  { margin-top: var(--s-5); }

/* About — Problem section: widen container so h2 + statement breathe;
   keep body paragraphs at readable 680px */
.gb-about-problem .container-text { max-width: 1080px; }
.gb-about-problem .container-text > p:not(.statement) {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* About — statement callout fade-in on scroll */
.gb-about-problem .statement {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.95s ease-out,
    transform 0.95s cubic-bezier(0.18, 0.78, 0.22, 1);
  will-change: opacity, transform;
}
.gb-about-problem .statement.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* About — Five Disciplines: each row hinges down from the top edge,
   staggered top-to-bottom. Quick. */
.values-list { perspective: 1200px; }
.values-row {
  opacity: 0;
  transform: rotateX(-78deg);
  transform-origin: 50% 0;
  transition:
    opacity 0.55s ease-out,
    transform 0.65s cubic-bezier(0.2, 1.15, 0.35, 1);
  will-change: opacity, transform;
}
.values-row.is-visible {
  opacity: 1;
  transform: rotateX(0);
}
.values-row:nth-child(1).is-visible { transition-delay: 0s; }
.values-row:nth-child(2).is-visible { transition-delay: 0.1s; }
.values-row:nth-child(3).is-visible { transition-delay: 0.2s; }
.values-row:nth-child(4).is-visible { transition-delay: 0.3s; }
.values-row:nth-child(5).is-visible { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .values-row { opacity: 1; transform: none; transition: none; }
}

/* About — Stats: staggered rise + count-up pairing */
.stats-bar .stat {
  opacity: 0;
  transform: translateY(40px) scale(0.94);
  transition:
    opacity 0.85s ease-out,
    transform 0.85s cubic-bezier(0.18, 0.78, 0.22, 1);
  will-change: opacity, transform;
}
.stats-bar .stat.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.stats-bar .stat:nth-child(1) { transition-delay: 0s; }
.stats-bar .stat:nth-child(2) { transition-delay: 0.14s; }
.stats-bar .stat:nth-child(3) { transition-delay: 0.28s; }
.stats-bar .stat:nth-child(4) { transition-delay: 0.42s; }
@media (prefers-reduced-motion: reduce) {
  .gb-about-problem .statement,
  .stats-bar .stat { opacity: 1; transform: none; transition: none; }
}

/* Section-title scroll fade-in — applies to non-solutions sections;
   solutions h2s have higher-specificity rules above and keep their dramatic blur entry. */
.section h2 {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.95s ease-out,
    transform 0.95s cubic-bezier(0.18, 0.78, 0.22, 1);
  will-change: opacity, transform;
}
.section h2.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .section h2 { opacity: 1; transform: none; transition: none; }
}
.hero p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: var(--s-6);
  opacity: 0.95;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}
.micro { font-size: 0.85rem; opacity: 0.75; margin-bottom: 0; letter-spacing: 0.04em; }
.hero .micro { margin-top: var(--s-5); }

/* ---------- Stats bar ---------- */
.stats-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  padding: var(--s-7) 0;
}
@media (min-width: 720px) { .stats-bar { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; }
.stat-num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--cs-offwhite);
  line-height: 1;
  margin-bottom: var(--s-2);
}
.stat-label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* ---------- Diagnosis cards ---------- */
.diagnosis-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  margin-top: var(--s-7);
}
@media (min-width: 880px) { .diagnosis-grid { grid-template-columns: repeat(3, 1fr); } }
.diagnosis-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cs-line);
  padding: var(--s-6);
  border-radius: 4px;
}
.diagnosis-card h3 { color: var(--cs-accent-text); margin-bottom: var(--s-2); font-size: 1.5rem; }
.diagnosis-card .label {
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cs-warmgray); margin-bottom: var(--s-4); display: block;
}
.diagnosis-card .fix {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--cs-line);
  font-size: 0.95rem;
}
.diagnosis-card .fix strong { color: var(--cs-teal); letter-spacing: 0.08em; }

/* ---------- Two-column section ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: center;
}
@media (min-width: 880px) { .two-col { grid-template-columns: 1fr 1fr; gap: var(--s-9); } }
.two-col-image img { width: 100%; border-radius: 4px; }

/* ---------- Video embed ---------- */
.video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border-radius: 4px;
}
.video-wrap iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ---------- Reel stage (autoplay-muted-loop bg + click-to-open) ---------- */
.reel-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
}
.reel-stage:focus-visible { box-shadow: 0 0 0 3px rgba(34, 221, 224, 0.55); }
.reel-bg, .reel-bg iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  pointer-events: none;
}
/* Vimeo's background mode preserves aspect — scale the iframe so it covers
   the stage at any window width without showing letterbox bars */
.reel-bg iframe {
  transform: scale(1.02);
  transform-origin: center;
}
.reel-play {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.42) 100%);
  color: #fff;
  transition: background 0.3s ease-out;
  pointer-events: none;
}
.reel-stage:hover .reel-play { background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.55) 100%); }
.reel-play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px; height: 88px;
  border: 2px solid rgba(255,255,255,0.92);
  border-radius: 50%;
  font-size: 1.6rem;
  padding-left: 8px;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2), background 0.3s ease-out;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.reel-stage:hover .reel-play-icon { transform: scale(1.08); background: rgba(255,255,255,0.14); }
.reel-play-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.92;
}

/* ---------- Reel modal (full controls Vimeo on click) ---------- */
.reel-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: var(--s-5);
  opacity: 0;
  transition: opacity 0.25s ease-out;
}
.reel-modal.is-open { display: flex; opacity: 1; }
.reel-modal-frame {
  position: relative;
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 16 / 9;
  background: #000;
}
.reel-modal-frame iframe { width: 100%; height: 100%; border: 0; }
.reel-modal-close {
  position: absolute;
  top: var(--s-4); right: var(--s-4);
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 2.2rem;
  cursor: pointer;
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: 0.85;
  transition: opacity 0.2s ease-out;
}
.reel-modal-close:hover { opacity: 1; }

/* ---------- Form ---------- */
.contact-form {
  max-width: 580px;
  margin: var(--s-7) auto 0;
  display: grid;
  gap: var(--s-4);
}
.contact-form label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cs-warmgray);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--cs-line);
  border-radius: 4px;
  color: var(--cs-white);
  transition: border-color 0.2s, background 0.2s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--cs-coral);
  background: rgba(255, 255, 255, 0.08);
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form button { justify-self: start; }

/* ---------- Let's Smash full-bleed video section ---------- */
.smash-section {
  position: relative;
  height: 85vh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1A2090;
}
.smash-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.65;
}
.smash-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #1A2090 0%, transparent 30%, transparent 70%, #1A2090 100%);
  z-index: 1;
}
.smash-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--s-5);
}
.smash-text {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-style: italic;
  font-weight: 600;
  color: #e3405b;
  text-shadow: 0 4px 30px rgba(0,0,0,0.55);
  letter-spacing: -0.01em;
  margin: 0;
}

/* ---------- Footer ---------- */
.site-footer {
  color: var(--cs-warmgray);
  padding: var(--s-7) 0 var(--s-5);
}
.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-8);
}
.footer-left { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
.footer-logo { height: 96px; width: auto; display: block; margin-left: -20px; }
.footer-centre {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.footer-tagline {
  font-family: var(--font-display);
  color: var(--cs-accent-text);
  font-size: 1.55rem;
  letter-spacing: -0.012em;
  line-height: 1.25;
  margin: 0;
}
.footer-subline {
  font-size: 0.8rem;
  color: var(--cs-warmgray);
  letter-spacing: 0.04em;
  margin: 0;
  opacity: 0.65;
}
.footer-nav { display: flex; flex-direction: column; gap: var(--s-3); }
.footer-nav a {
  font-size: 0.82rem;
  font-weight: 500;
  color: #3261C4;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.footer-nav a:hover { color: var(--cs-accent-text); }
.footer-social {
  display: flex;
  gap: var(--s-5);
}
.footer-social a {
  width: 26px; height: 26px;
  color: var(--cs-white);
  opacity: 0.75;
  transition: opacity 0.2s, color 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.footer-social a:hover { opacity: 1; color: var(--cs-accent-text); }
.footer-social svg { width: 22px; height: 22px; fill: currentColor; }
.footer-location {
  font-size: 0.78rem;
  color: var(--cs-accent-text);
  letter-spacing: 0.02em;
  margin: 0;
}
.footer-pulse {
  flex-shrink: 0;
  width: 182px;
  align-self: center;
}
.footer-pulse svg { width: 100%; height: auto; }
.footer-bottom {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--cs-warmgray);
  opacity: 0.5;
}
.footer-bottom a { color: inherit; transition: opacity 0.2s; }
.footer-bottom a:hover { opacity: 1; }
.footer-copy { margin-left: auto; }

@media (max-width: 760px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .footer-centre { text-align: left; }
  .footer-pulse  { display: none; }
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.text-coral  { color: var(--cs-accent-text); }   /* legacy class name kept for compat — now uses accent-text */
.text-accent { color: var(--cs-accent-text); }
.text-royal  { color: var(--cs-royal); }
.italic      { font-style: italic; }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-6 { margin-bottom: var(--s-6); }
.divider {
  width: 60px; height: 2px;
  background: var(--cs-coral);
  margin: var(--s-5) auto;
}
.bleeding { color: var(--cs-accent-text); font-style: italic; }