/* T-AV — Home page specific styles */

/* ===== HERO =====
   Layered atmosphere:
     1. base canvas (Abyss)
     2. ribbon-cloud waveform rendered by the HeroWaves canvas
        component (see pages/Home.jsx)
     3. dot-grid pattern (left-mid, the original brand texture)
*/
.home-hero {
  position: relative;
  padding: 96px 0 48px;
  overflow: hidden;
  isolation: isolate;
}
/* Container for the canvas-rendered ribbon-cloud waveform. The
   canvas itself is centered as a 78%-tall band; horizontal vignettes
   fade the cloud into the canvas at the left and right edges so the
   waveform never touches the page sides. The actual motion is driven
   by JS inside HeroWaves (pages/Home.jsx); the canvas honors
   prefers-reduced-motion internally (one static frame). */
.home-hero__waves {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: -2;
  overflow: hidden;
}
.home-hero__waves::before,
.home-hero__waves::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 18%; z-index: 2;
  pointer-events: none;
}
.home-hero__waves::before {
  left: 0;
  background: linear-gradient(to right, var(--abyss) 0%, rgba(0,0,0,0) 100%);
}
.home-hero__waves::after {
  right: 0;
  background: linear-gradient(to left, var(--abyss) 0%, rgba(0,0,0,0) 100%);
}
.home-hero__waves-canvas {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 78%;
  display: block;
}
.home-hero__dots {
  position: absolute; inset: 0; pointer-events: none;
  z-index: -1;
  background-image: radial-gradient(rgba(184, 179, 176, 0.10) 1px, transparent 1px);
  background-size: var(--dot-size, 22px) var(--dot-size, 22px);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 25% 50%, black 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 60% 70% at 25% 50%, black 30%, transparent 80%);
}
.home-hero__inner {
  position: relative;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px;
  align-items: center;
}
.home-hero__overline {
  font-family: var(--font-display); font-weight: 500; font-size: 12px;
  letter-spacing: 2.0px; text-transform: uppercase;
  color: var(--steel); margin-bottom: 28px;
  display: inline-flex; align-items: center; gap: 12px;
  animation: hero-stagger 380ms var(--ease-out) both;
  animation-delay: 0ms;
}
.home-hero__overline::before {
  content: ""; width: 32px; height: 1px;
  background: var(--tav-green);
}
.home-hero__title {
  font-family: var(--font-display);
  font-size: clamp(44px, 7.8vw, 132px);
  font-weight: 300; line-height: 0.94;
  letter-spacing: -2.4px;
  color: var(--snow);
  margin: 0 0 36px;
  text-wrap: balance;
  /* Narrow-condensed width to let theatrical headline sit larger
     without breaking the line. Funnel Display variable wdth axis (75-100). */
  font-variation-settings: "wdth" 88;
  animation: hero-stagger 520ms var(--ease-out) both;
  animation-delay: 60ms;
}
.home-hero__title .accent {
  /* Cross-family accent: the headline is Funnel Display, the accent word
     drops to Funnel Sans italic for a real italic (Funnel Display has no
     italic axis on Google Fonts). The single-word family switch reads as
     emphasis, not interruption. */
  display: inline-block;
  color: var(--tav-green-light);
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -3.2px;
}
.home-hero__sub {
  font-family: var(--font-body); font-size: 18px; line-height: 1.55;
  color: var(--parchment); max-width: 540px;
  margin: 0 0 36px;
  animation: hero-stagger 400ms var(--ease-out) both;
  animation-delay: 140ms;
}
.home-hero__cta-row {
  display: flex; gap: 14px; flex-wrap: wrap;
  align-items: center;
  animation: hero-stagger 400ms var(--ease-out) both;
  animation-delay: 200ms;
}

/* Cold-load only: 5-element cascade ~260ms total. ease-out, translateY(10px → 0). */
@keyframes hero-stagger {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Right side: live status panel */
/* Status panel — live readout with row-by-row stagger reveal.
   Tightened: starts at 0ms, ~40ms per row, 7 rows finish in ~280ms.
   Brand pitch is "cues fire on the same clock" — the panel locks fast.
*/
.status-panel {
  background: var(--carbon);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  font-family: var(--font-mono);
  position: relative;
  overflow: hidden;
  animation: panel-rise .55s var(--ease-out) both;
}
.status-panel__row {
  animation: row-in 320ms var(--ease-out) both;
}
.status-panel__row:nth-child(1) { animation-delay: 0ms; }
.status-panel__row:nth-child(2) { animation-delay: 40ms; }
.status-panel__row:nth-child(3) { animation-delay: 80ms; }
.status-panel__row:nth-child(4) { animation-delay: 120ms; }
.status-panel__row:nth-child(5) { animation-delay: 160ms; }
.status-panel__row:nth-child(6) { animation-delay: 200ms; }
.status-panel__row:nth-child(7) { animation-delay: 240ms; }
@keyframes row-in {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: none; }
}
/* Panel rise: opacity + translateY + small blur — Jakub's full enter
   recipe, scoped to the hero status panel only (not the shared .reveal
   token, which stays opacity+translateY across the whole site). The
   small blur gives the panel a "materializing into the dark canvas"
   feel that matches the cinematic register. Motion audit 2026-05-25 —
   Jakub Opportunity. */
@keyframes panel-rise {
  from { opacity: 0; transform: translateY(8px); filter: blur(3px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}

/* Stats counters — fade-up on load, tightened stagger */
.home-stats__cell { animation: cell-up 420ms var(--ease-out) both; }
.home-stats__cell:nth-child(1) { animation-delay: 0ms; }
.home-stats__cell:nth-child(2) { animation-delay: 60ms; }
.home-stats__cell:nth-child(3) { animation-delay: 120ms; }
.home-stats__cell:nth-child(4) { animation-delay: 180ms; }
@keyframes cell-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* Scan rail: one-shot on first viewport intersection (see HomePage
   IntersectionObserver). Default state is hidden off the left edge;
   .is-armed plays a single 1.6s pass and holds at translateX(100%) with
   opacity 0 so nothing lingers. Replaces the prior infinite 4s loop
   (motion audit 2026-05-25 finding #3). */
.status-panel::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tav-green), transparent);
  transform: translateX(-100%);
  opacity: 0;
}
.status-panel.is-armed::before {
  animation: status-scan 1.6s linear forwards;
}
@keyframes status-scan {
  0%   { transform: translateX(-100%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
.status-panel__row {
  display: flex; justify-content: space-between;
  padding: 10px 0;
  font-size: 12px;
  border-bottom: 1px dashed rgba(79, 93, 117, 0.25);
  letter-spacing: 0.6px;
}
.status-panel__row:last-child { border: 0; }
.status-panel__row .label { color: var(--steel); text-transform: uppercase; letter-spacing: 1.4px; }
.status-panel__row .value { color: var(--snow); }
.status-panel__row .value .dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tav-green);
  filter: drop-shadow(0 0 4px var(--tav-green));
  margin-right: 6px;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.status-panel__head {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--steel);
  letter-spacing: 2px; text-transform: uppercase;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--charcoal-warm);
  margin-bottom: 6px;
}
.status-panel__head .right { color: var(--tav-green-light); }

/* =====================================================================
   Numbers block — one decisive metric, supporting lines as paragraph.
   Deliberately NOT a 4-up grid (that's an absolute-ban shape).
   The zero is theatrical-large; the rest is engineered-small.
   ===================================================================== */
.hero-metric {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--border);
}
.hero-metric__num {
  font-family: var(--font-display);
  font-size: clamp(180px, 28vw, 400px);
  font-weight: 300;
  line-height: 0.86;
  letter-spacing: -16px;
  color: var(--tav-green-light);
  font-variation-settings: "wdth" 92;
  font-feature-settings: "tnum";
  /* Lift slightly so the descender doesn't hit the baseline border */
  margin-bottom: -12px;
}
.hero-metric__body {
  display: flex; flex-direction: column;
  gap: 18px;
  padding-bottom: 24px;
  max-width: 540px;
}
.hero-metric__label {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 400; line-height: 1.0;
  letter-spacing: -0.8px;
  color: var(--snow);
  font-variation-settings: "wdth" 96;
}
.hero-metric__note {
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  color: var(--parchment);
  margin: 0;
  max-width: 56ch;
}

/* Legacy .home-stats kept as the four-cell grid for any other surface
   that still references it; unused on home now but kept for compatibility
   in case a tweaks variant restores it. */
.home-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 56px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.home-stats__cell { display: flex; flex-direction: column; gap: 8px; }
.home-stats__num {
  font-family: var(--font-display);
  font-size: 56px; font-weight: 300; line-height: 1;
  color: var(--snow); letter-spacing: -1.5px;
}
.home-stats__num .small { font-size: 28px; color: var(--tav-green-light); margin-left: 2px; }
.home-stats__lbl {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  color: var(--steel);
  letter-spacing: 2.0px; text-transform: uppercase;
}

@media (max-width: 720px) {
  .hero-metric { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .hero-metric__num { font-size: clamp(140px, 36vw, 200px); letter-spacing: -6px; margin-bottom: 0; }
}

/* ===== STORY (11 BEATS) ===== */
.story {
  position: relative;
  /* `padding-top` longhand, not the `padding` shorthand: `.story` is
     co-classed with `.container-wide`, and a shorthand here would clobber
     its `0 40px` side gutters (and the responsive `0 20px`), making beats
     01-08 run 80px wider than every other section on the site. Longhand
     sets only the top, so all beats keep the site's single content width. */
  padding-top: 56px;
}
.story__intro {
  font-family: var(--font-display); font-weight: 500; font-size: 12px;
  color: var(--steel); letter-spacing: 2.0px;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-bottom: 24px;
  border-bottom: 1px dashed rgba(79, 93, 117, 0.4);
  display: flex; justify-content: space-between;
}
.story__intro .right { color: var(--tav-green-light); }

/* Each beat is a sticky-driven section */
.beat {
  position: relative;
  /* Long enough to have a meaningful pin */
  min-height: 140vh;
}
/* ===== Tweak modes ===== */

/* Scroll choreography — in-flow disables sticky pin; sticky-pin keeps default */
body.choreo-in-flow .beat { min-height: auto; }
body.choreo-in-flow .beat__sticky {
  position: static; height: auto; padding: 56px 0;
}

/* Hero variant — cinematic widens copy column, drops status panel */
body.hero-cinematic .home-hero { padding: 132px 0 64px; }
body.hero-cinematic .home-hero__inner { grid-template-columns: 1fr; }
body.hero-cinematic .home-hero__title { font-size: clamp(48px, 8vw, 112px); max-width: 14ch; }
body.hero-cinematic .status-panel { display: none; }

/* Spec-sheet variant — denser, mono-leaning, panel emphasised */
body.hero-spec-sheet .home-hero { padding: 80px 0 32px; }
body.hero-spec-sheet .home-hero__title {
  font-size: clamp(32px, 4.4vw, 56px);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.4px;
}
body.hero-spec-sheet .home-hero__inner { grid-template-columns: 1fr 1.1fr; }
body.hero-spec-sheet .status-panel { border-color: var(--tav-green); }

/* Show / hide live status panel toggle */
body.no-status-panel .status-panel { display: none; }
body.no-status-panel .home-hero__inner { grid-template-columns: 1fr; }

.beat__sticky {
  position: sticky; top: 64px;
  height: calc(100vh - 64px);
  display: flex; align-items: center;
  padding: 64px 0;
}
.beat__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
  width: 100%;
}
.beat__inner.reverse { grid-template-columns: 0.95fr 1.05fr; }
.beat__inner.reverse .beat__visual { order: 2; }
.beat__inner.reverse .beat__text { order: 1; }

.beat__visual {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--carbon);
  overflow: hidden;
  aspect-ratio: 8 / 5;
  width: 100%;
  /* Peak-handoff fade: only Beats 07 + 08 add .is-leaving when their
     scroll-progress crosses 0.85 (see Beat() in pages/Home.jsx). The
     transition is declared on every beat so the property is animatable,
     but only the peak beats ever receive the class. Motion audit
     2026-05-25 — Jhey Opportunity. */
  transition: opacity 220ms var(--ease-out);
}
.beat__visual.featured { border: 2px solid var(--tav-green); }
.beat__visual.is-leaving { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) {
  .beat__visual { transition: none; }
  .beat__visual.is-leaving { opacity: 1; }
}

/* (The .beat--peak compositional override has been removed. Beat 08
   "Show Live" carries its peak signal through the visual content itself
   (multi-layer animated SVG), not through a different grid shape.
   All beats now share the same composition rhythm.) */
.beat-svg {
  display: block; width: 100%; height: 100%;
}
.beat__text { display: flex; flex-direction: column; gap: 22px; }
.beat__num {
  font-family: var(--font-display); font-weight: 500; font-size: 13px;
  color: var(--tav-green-light); letter-spacing: 2.0px;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 14px;
}
.beat__num::before {
  content: ""; width: 36px; height: 1px; background: var(--tav-green);
}
.beat__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 300; line-height: 1.0;
  letter-spacing: -1.0px;
  color: var(--snow);
  margin: 0; text-wrap: balance;
}
.beat__title .accent { color: var(--tav-green-light); font-family: var(--font-body); font-style: italic; }
.beat__copy {
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  color: var(--parchment); max-width: 480px; margin: 0;
}
.beat__meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 4px;
}
.beat__meta .chip {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  color: var(--steel); letter-spacing: 2.0px;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--carbon);
  padding: 6px 12px; border-radius: 9999px;
}

/* Per-beat link to the corresponding What We Do service detail page.
   Sits below the meta chips on beats 02-06 (the five technical
   disciplines). Inherits .btn-link styling (teal-light text, arrow
   translates on hover); this rule just sets the top spacing so the
   CTA reads as paired with the beat copy, not floating. */
.beat__cta { margin-top: 12px; }

/* Story progress dots (left rail) */
.story__rail {
  position: fixed;
  left: 24px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px;
  z-index: 30;
  opacity: 0; pointer-events: none;
  transition: opacity 300ms var(--ease-out);
}
.story__rail.is-visible { opacity: 1; pointer-events: auto; }
.story__rail .tick {
  width: 18px; height: 2px; background: var(--charcoal-warm);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out),
              width var(--dur-hover) var(--ease-out);
}
.story__rail .tick.is-active { background: var(--tav-green); width: 28px; }
@media (hover: hover) and (pointer: fine) {
  .story__rail .tick:hover { background: var(--tav-green-light); }
}
.story__rail-num {
  font-family: var(--font-display); font-weight: 500; font-size: 10px;
  color: var(--steel); letter-spacing: 2.2px;
  margin-bottom: 4px;
}

/* Beat 9 — Instagram strip */
.ig-strip {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  margin-top: 32px;
}
.ig-tile {
  aspect-ratio: 1; background: var(--carbon-raised);
  border: 1px solid var(--border); border-radius: 4px;
  position: relative; overflow: hidden;
  transition: transform 250ms var(--ease-out),
              border-color 250ms var(--ease-out),
              box-shadow 250ms var(--ease-out);
}
.ig-tile .teaser-card__svg, .ig-tile svg {
  transition: transform 350ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ig-tile:hover {
    border-color: var(--tav-green);
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 10px 24px -16px rgba(62,140,132,0.45);
  }
  .ig-tile:hover .teaser-card__svg,
  .ig-tile:hover svg { transform: scale(1.04); }
}
/* Photo tiles (when the inner element is an <img> instead of an SVG) */
.ig-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 350ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ig-tile:hover img { transform: scale(1.04); }
}
.ig-tile__caption {
  position: absolute; bottom: 6px; left: 8px;
  font-family: var(--font-display); font-weight: 500; font-size: 9px;
  color: var(--snow); letter-spacing: 2.4px;
  text-transform: uppercase;
}

/* Beat 8 — Showcase teaser cards */
.showcase-teaser {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-top: 32px;
}
.teaser-card {
  aspect-ratio: 4/3;
  background: var(--carbon);
  border: 1px solid var(--border);
  border-radius: 8px;
  position: relative; overflow: hidden;
  cursor: pointer;
  transition: border-color 250ms var(--ease-out),
              transform 250ms var(--ease-out),
              box-shadow 250ms var(--ease-out);
}
/* Option D: home Beat 10 uses 3 hero photos at portrait aspect — the
   trio reads as deliberate "front door" shots, not thumbnails. The
   /showcase masonry is untouched and keeps its native aspect ratios. */
.showcase-teaser .teaser-card {
  aspect-ratio: 4/5;
}
.teaser-card .teaser-card__svg {
  transition: transform 400ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .teaser-card:hover {
    border-color: var(--tav-green); transform: translateY(-3px);
    box-shadow: 0 14px 32px -22px rgba(62,140,132,0.55);
  }
  .teaser-card:hover .teaser-card__svg { transform: scale(1.04); }
}
.teaser-card__svg { width: 100%; height: 100%; display: block; }

/* Real-photo variant (Home Beat 10): renders an <img> instead of an
   SVG, with a bottom-gradient scrim so the caption stays legible
   against any photograph. Mirrors the masonry overlay pattern from
   the /showcase page. The photo also desaturates slightly at rest
   (saturate 0.85 → 1 on hover) so the row reads cohesive with the
   dark canvas before the eye lands on a single card. */
.teaser-card__img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
  /* Hard desaturation at rest; the ::before teal overlay does the tinting
     so all six cards read as a unified teal-toned set rather than six raw
     photographs. Hover restores saturation. */
  filter: saturate(0.4);
  transition: filter 400ms var(--ease-out),
              transform 400ms var(--ease-out);
}
.teaser-card--photo::before {
  /* Light teal cast that fades on hover. Stacks above the static img and
     below the ::after scrim and z-index:1 caption — exactly the layering
     we want without a JSX change. */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: oklch(0.72 0.060 200 / 0.6);
  transition: opacity 400ms var(--ease-out);
}
.teaser-card--photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, rgba(5,5,7,0.82) 100%);
}
@media (hover: hover) and (pointer: fine) {
  .teaser-card--photo:hover .teaser-card__img {
    filter: saturate(1); transform: scale(1.04);
  }
  .teaser-card--photo:hover::before {
    opacity: 0;
  }
}

.teaser-card__caption {
  position: absolute; left: 14px; bottom: 14px; right: 14px;
  display: flex; justify-content: space-between; align-items: end;
  z-index: 1; /* sits above .teaser-card--photo::after gradient */
  gap: 12px;
}
.teaser-card__caption .title {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  color: var(--snow);
}
.teaser-card__caption .meta {
  font-family: var(--font-display); font-weight: 500; font-size: 10px;
  color: var(--parchment); letter-spacing: 2.2px;
  text-transform: uppercase; flex-shrink: 0;
}

/* =====================================================================
   Partners — replaces the 12-tile identical-card-grid (absolute ban)
   with a typographic statement and a horizontal wrap of named partners.
   Each partner is a small chip with a teal status-dot signaling "still
   active." Reads as a roster, not a logo wall.
   ===================================================================== */
.partners {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  /* No padding: Beat 11's `.section` wrapper owns the vertical rhythm on
     both sides (matching Beats 09/10), so the marquee sits flush inside
     the section's clamp() padding like every other beat's content. A
     bottom padding here would stack on the section padding and push
     Beat 12 off the inter-beat rhythm. */
}
/* Lead column of the partners beat — stacks the `.beat__num` label and
   the `.beat__title` headline with the same 22px rhythm as `.beat__text`,
   so Beat 11 reads as a uniform beat. (The old `.partners__statement`
   headline — condensed, h3, its own size — was retired here; Beat 11 now
   uses the shared `.beat__title` like every other beat.) */
.partners__lead {
  display: flex; flex-direction: column; gap: 22px;
}
/* When the partners section uses the marquee, the right column doesn't
   need a constrained grid — let the marquee span its allotted column
   and breathe vertically. */
.partners.partners--marquee { align-items: stretch; }
.partners.partners--marquee .partner-marquee { width: 100%; }

/* Collapses at 960px to match `.beat__inner` (Beats 09/10), so the whole
   09-11 story-arc series drops to one column at the same breakpoint. */
@media (max-width: 960px) {
  .partners { grid-template-columns: 1fr; gap: 32px; }
}

/* =====================================================================
   Final CTA, the ONE Drenched moment on the page.
   Saturated teal background, near-black type, single primary action.
   Asymmetric: oversize headline left-aligned, body and CTA bottom-right.
   The visitor leaves remembering one color and one sentence.
   ===================================================================== */
.home-cta {
  position: relative;
  /* Mirror `.section`'s top padding so the Beat 11 -> Beat 12 boundary
     tracks the same ~205px inter-beat rhythm as 09->10 and 10->11. */
  margin: clamp(64px, 8vw, 120px) 0 0;
  padding: clamp(80px, 12vw, 160px) clamp(40px, 6vw, 96px);
  background: oklch(0.58 0.075 195);
  color: oklch(0.14 0.012 195);
  overflow: hidden;
  isolation: isolate;
}
/* Faint grid pattern in deeper teal so the surface reads as engineered,
   not flat poster. Compositor-only background. */
.home-cta::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(to right, oklch(0.50 0.085 195 / 0.40) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.50 0.085 195 / 0.40) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 20% 50%, black 30%, transparent 90%);
  mask-image: radial-gradient(ellipse 90% 70% at 20% 50%, black 30%, transparent 90%);
}
.home-cta__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
  max-width: 1440px;
  margin: 0 auto;
}
.home-cta__divider {
  font-family: var(--font-display); font-weight: 500; font-size: 12px;
  letter-spacing: 2.0px; text-transform: uppercase;
  color: oklch(0.18 0.014 195);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 32px;
}
.home-cta__divider::before {
  content: ""; width: 32px; height: 1px;
  background: oklch(0.18 0.014 195);
}
.home-cta__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 9vw, 144px);
  font-weight: 300; line-height: 0.92;
  letter-spacing: -3px;
  color: oklch(0.10 0.014 195);
  margin: 0;
  text-wrap: balance;
  font-variation-settings: "wdth" 92;
}
.home-cta__title em {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
}
.home-cta__right {
  display: flex; flex-direction: column;
  gap: 24px;
  padding-bottom: 12px;
}
.home-cta__sub {
  font-family: var(--font-body); font-size: 18px; line-height: 1.5;
  color: oklch(0.18 0.014 195);
  max-width: 380px;
  margin: 0;
}
/* Inverted button: near-black on teal, snow text. The brand's only
   inverted CTA. Earned by the drench. */
.home-cta__btn {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
  padding: 16px 22px;
  background: oklch(0.10 0.014 195);
  color: oklch(0.96 0.005 200);
  border: 0; border-radius: 6px;
  cursor: pointer;
  transition: transform var(--dur-hover) var(--ease-out),
              background var(--dur-hover) var(--ease-out);
}
.home-cta__btn svg { transition: transform var(--dur-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .home-cta__btn:hover {
    background: oklch(0.06 0.012 195);
    transform: translateY(-1px);
  }
  .home-cta__btn:hover svg { transform: translateX(3px); }
}
.home-cta__btn:active {
  transform: scale(0.97);
  transition-duration: var(--dur-press);
}

@media (max-width: 880px) {
  .home-cta__grid { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .home-cta__title { font-size: clamp(40px, 11vw, 80px); letter-spacing: -1.8px; }
}

@media (max-width: 960px) {
  .home-hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .home-stats { grid-template-columns: 1fr 1fr; gap: 28px; padding: 36px 0; }
  .home-stats__num { font-size: 42px; }
  .beat { min-height: auto; }
  .beat__sticky { position: static; height: auto; padding: 48px 0; }
  .beat__inner, .beat__inner.reverse { grid-template-columns: 1fr; gap: 24px; }
  .beat__inner.reverse .beat__visual { order: 1; }
  .beat__inner.reverse .beat__text { order: 2; }
  .ig-strip { grid-template-columns: repeat(3, 1fr); }
  .showcase-teaser { grid-template-columns: 1fr; }
  .story__rail { display: none; }
}