/* ==========================================================================
   Apex Evergreen Pharma — Homepage Styles
   --------------------------------------------------------------------------
   Section-specific styles for the homepage. Consumes tokens from
   design-system.css and builds on global.css. Load AFTER both of those.

   Sections (in order):
     1. Hero
     2. Stats
     3. Capabilities
   Shared homepage components:
     - .node-divider  connective gold orbital-node motif between sections
     - .media-frame   elegant labelled image/video placeholder
     - .reveal        generic scroll fade+rise (JS toggles .is-visible)
   ========================================================================== */

/* ==========================================================================
   SHARED — GENERIC SCROLL REVEAL
   Any element with .reveal starts faded + lowered; JS adds .is-visible when
   it enters view. Calm, consistent with the card cascade.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   SHARED — CONNECTIVE NODE DIVIDER
   A small gold orbital node (dot + thin ring) flanked by fading gold rules,
   placed at section boundaries so the page reads as one designed object.
   Background modifier matches the section it visually joins, so the colour
   switch happens cleanly at the divider's top edge.
   ========================================================================== */
.node-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  padding-block: var(--space-2xl);
}
.node-divider--cream {
  background-color: var(--color-cream);
}
.node-divider--forest {
  background-color: var(--color-forest);
}
/* Fading hairline rules on either side of the node. */
.node-divider::before,
.node-divider::after {
  content: "";
  height: 1px;
  width: clamp(48px, 14vw, 180px);
  background: linear-gradient(
    to right,
    transparent,
    rgba(201, 169, 74, 0.45)
  );
}
.node-divider::after {
  transform: scaleX(-1); /* mirror so the fade points outward on both sides */
}
.node-divider__mark {
  display: inline-flex;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.node-divider__mark svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.node-mark__ring {
  stroke: var(--color-gold);
  stroke-width: 1.25;
  opacity: 0.7;
}
.node-mark__core {
  fill: var(--color-gold);
}
/* Gentle breathing pulse on the node core — subtle, brand-like. */
@keyframes node-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
.node-divider__mark svg { transform-box: fill-box; transform-origin: center; }
.node-mark__core {
  transform-box: fill-box;
  transform-origin: center;
  animation: node-pulse 3.2s var(--ease) infinite;
}

/* ==========================================================================
   SHARED — MEDIA FRAME (labelled image / video placeholder)
   A refined framed area: thin gold border, rounded corners, subtle tone,
   gold corner ticks, a centred orbital-node icon, a kicker, and a caption
   describing the real media to drop in later.
   ========================================================================== */
.media-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(201, 169, 74, 0.35);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
}
/* Aspect ratios */
.media-frame--portrait { aspect-ratio: 4 / 5; }
.media-frame--wide     { aspect-ratio: 16 / 9; }

/* Context tones */
.media-frame--light {
  /* On the cream stats section: a soft evergreen wash. */
  background:
    linear-gradient(
      160deg,
      rgba(30, 58, 42, 0.08),
      rgba(201, 169, 74, 0.05)
    ),
    var(--color-cream);
}
.media-frame--dark {
  /* On the forest capabilities section: a faint evergreen lift. */
  background:
    linear-gradient(
      160deg,
      rgba(30, 58, 42, 0.55),
      rgba(12, 26, 18, 0.35)
    );
}

/* Gold corner ticks — make the frame read as deliberate, not a grey box. */
.media-frame::before,
.media-frame::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-gold);
  opacity: 0.6;
  z-index: 1;
}
.media-frame::before {
  top: var(--space-md);
  left: var(--space-md);
  border-right: 0;
  border-bottom: 0;
}
.media-frame::after {
  bottom: var(--space-md);
  right: var(--space-md);
  border-left: 0;
  border-top: 0;
}

/* Live video filling the frame — absolutely positioned so it covers the whole
   area, clipped to the frame's rounded corners (overflow: hidden) and sitting
   BELOW the gold corner brackets (::before/::after are z-index 1). */
.media-frame__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
}

.media-frame__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xl);
  max-width: 44ch;
}
.media-frame__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-xs);
}
.media-frame__icon svg { width: 100%; height: 100%; overflow: visible; }
.media-frame__icon .cap-icon__ring { stroke: var(--color-gold); stroke-width: 1.25; opacity: 0.8; }
.media-frame__icon .cap-icon__core,
.media-frame__icon .cap-icon__sats circle { fill: var(--color-gold); }

.media-frame__kicker {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.media-frame__caption {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
}
.media-frame--light .media-frame__caption { color: var(--color-text-muted-light); }
.media-frame--dark .media-frame__caption  { color: var(--color-text-muted-dark); }

/* ==========================================================================
   1. HERO
   Full-viewport cinematic opener with background-video slot, forest overlay,
   left-aligned layered content, staggered entrance, and a scroll cue.
   ========================================================================== */

.hero {
  position: relative;
  /* Fill the viewport. Header is fixed & translucent, so the hero sits
     underneath it and spans the full height for an edge-to-edge feel. */
  min-height: 100vh;
  min-height: 100svh; /* better on mobile browsers with dynamic toolbars */
  display: flex;
  align-items: center; /* vertically centre the content */
  overflow: hidden;
  /* Solid fallback while there is no video (and behind a video that has
     transparent letterboxing or is still loading). */
  background-color: var(--color-forest);
  color: var(--color-text-light);
}

/* ---- Background media layer -------------------------------------------- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* The video covers the whole hero. Hidden visually until a real source is
   present; the forest fallback on .hero shows through in the meantime. */
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---- Forest gradient overlay ------------------------------------------
   Darker at the bottom (where the text and buttons sit), lighter at the top,
   so content stays readable over any video. Pure design-system greens. */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* BARE-MINIMUM scrim — the footage plays essentially at full vividness.
     Only a soft strip behind the left-aligned text and the faintest top/bottom
     whisper (top for the nav, bottom for the buttons) remain. */
  background:
    linear-gradient(
      to right,
      rgba(12, 26, 18, 0.42) 0%,
      rgba(12, 26, 18, 0.20) 30%,
      rgba(12, 26, 18, 0.04) 52%,
      rgba(12, 26, 18, 0) 66%
    ),
    linear-gradient(
      to bottom,
      rgba(12, 26, 18, 0.16) 0%,
      rgba(12, 26, 18, 0) 22%,
      rgba(12, 26, 18, 0) 78%,
      rgba(12, 26, 18, 0.14) 100%
    );
}
/* The left scrim now lives in the main background; keep the pseudo inert. */
.hero__overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
}

/* ---- Content layer ----------------------------------------------------- */
.hero__inner {
  position: relative;
  z-index: 2;
  /* Clear the fixed header, then breathe. */
  padding-top: calc(var(--header-height) + var(--space-2xl));
  padding-bottom: var(--space-3xl);
}

.hero__content {
  max-width: 60ch;
  /* Minimal legibility aid now that the overlay is bare-minimum. */
  text-shadow: 0 1px 3px rgba(12, 26, 18, 0.7), 0 2px 16px rgba(12, 26, 18, 0.5);
}
/* Buttons render on their own solid/outline surfaces — no shadow needed. */
.hero__actions { text-shadow: none; }

.hero__eyebrow {
  /* .eyebrow gives colour/spacing; brighten to gold on this dark surface. */
  color: var(--color-gold);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  /* Large and confident — scales fluidly across viewports. */
  font-size: clamp(2.75rem, 6.5vw + 1rem, 6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
  text-wrap: balance;
}

.hero__subtitle {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.05rem, 1vw + 0.85rem, 1.4rem);
  line-height: 1.6;
  /* Brighter than plain muted-dark so it reads confidently, but still a
     secondary tone — the light weight keeps it from competing with the
     headline. Mixed from design-system tokens (no hardcoded colour). */
  color: color-mix(in srgb, var(--color-text-light) 80%, var(--color-text-muted-dark) 20%);
  max-width: 54ch;
  margin-bottom: var(--space-xl);
}

/* ---- Action buttons ---- */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
/* Over the dark hero video the outline button needs the brighter gold
   (the global default is the deeper gold meant for light surfaces). */
.hero__actions .btn-secondary { color: var(--color-gold); }
.hero__actions .btn-secondary:hover { color: var(--color-forest); }

/* ---- Scroll cue --------------------------------------------------------
   Minimal thin line + chevron, centred at the bottom, gently looping. */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-xl);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-light);
  text-decoration: none;
}
.hero__scroll-label {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted-dark);
}
/* Thin vertical line with a travelling gold segment. */
.hero__scroll-line {
  position: relative;
  width: 1px;
  height: 54px;
  background: rgba(245, 240, 228, 0.22); /* faint cream track */
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 40%;
  background: var(--color-gold);
  animation: hero-scroll-travel 2.4s var(--ease) infinite;
}

@keyframes hero-scroll-travel {
  0%   { transform: translateY(-100%); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(250%); opacity: 0; }
}

/* ==========================================================================
   ENTRANCE ANIMATION
   Elements start slightly down + transparent; the .is-ready class on .hero
   (added by home.js after load) transitions them into place. Per-element
   delays create the calm, refined stagger.
   ========================================================================== */
.hero__animate {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
}
.hero.is-ready .hero__animate {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger: eyebrow -> title -> subtitle -> buttons */
.hero.is-ready .hero__eyebrow  { transition-delay: 0.15s; }
.hero.is-ready .hero__title    { transition-delay: 0.35s; }
.hero.is-ready .hero__subtitle { transition-delay: 0.60s; }
.hero.is-ready .hero__actions  { transition-delay: 0.85s; }

/* Scroll cue fades in last. */
.hero__scroll.hero__animate { transition-delay: 0s; }
.hero.is-ready .hero__scroll { transition-delay: 1.15s; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 640px) {
  /* MOBILE HERO — instead of a cropped/zoomed full-bleed video, show the WHOLE
     16:9 video (hero.mp4 is 2560x1440) as an elegant banner, with the content
     stacked below it on the forest surface. The header sits over a slim forest
     strip at the very top so the nav stays legible. Desktop/tablet (>640px)
     keep the full-viewport cover hero — completely unchanged. */
  .hero {
    display: block;
    min-height: 0;
    padding-top: var(--header-height); /* banner sits cleanly below the header */
  }
  .hero__media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;   /* reserves the banner height (no layout shift) */
    background-color: var(--color-forest);
  }
  .hero__video {
    /* contain guarantees the WHOLE landscape video is visible with no
       cropping; any hairline gap is forest-coloured and invisible. */
    object-fit: contain;
    object-position: center;
  }
  /* Soft fade from the banner into the forest content below (no heavy scrim). */
  .hero__overlay {
    background: linear-gradient(
      to bottom,
      rgba(12, 26, 18, 0) 62%,
      var(--color-forest) 100%
    );
  }
  .hero__inner {
    position: relative;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-2xl);
  }
  /* Content now sits on forest, not over the video — no text-shadow needed. */
  .hero__content { text-shadow: none; }
  .hero__subtitle {
    margin-bottom: var(--space-lg);
  }
  /* Buttons stack and go full-width for comfortable tapping. */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
  .hero__actions .btn {
    width: 100%;
  }
  /* Scroll cue is redundant in the stacked layout. */
  .hero__scroll {
    display: none;
  }
}

/* ==========================================================================
   REDUCED MOTION
   Show everything immediately, no entrance transition, no looping cue.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero__animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero__scroll-line::after {
    animation: none;
    /* Keep a static gold hint instead of a loop. */
    height: 100%;
    opacity: 0.5;
  }
}

/* ==========================================================================
   2. CREDIBILITY / STATISTICS STRIP
   Light cream surface. Four items separated by thin dividers; numbers count
   up on scroll into view; the fourth item shows accreditation badges.
   ========================================================================== */

.stats {
  background-color: var(--color-cream);
  color: var(--color-ink);
  /* Top is tight because the cream node-divider above already breathes;
     generous bottom before the next boundary. */
  padding-block: var(--space-md) var(--space-2xl);
}

/* ---- Two-column top: intro heading beside the facility photo ---- */
.stats__top {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-2xl);
  align-items: center;
  margin-bottom: var(--space-2xl);
}

/* ---- Intro (understated) ---- */
.stats__intro {
  max-width: 42ch;
}

/* Portrait facility-photo placeholder occupying the right column. */
.stats__media {
  width: 100%;
}
.stats__intro-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.5vw + 0.75rem, 2.25rem);
  line-height: 1.2;
  color: var(--color-ink);
}

/* ---- Row of four ----
   Desktop: 4 across. Tablet: 2x2. Mobile: stacked. Dividers sit between
   items using left borders that are switched off at row/column starts. */
.stats__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stats__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-xl);
  /* Thin, subtle divider line between items. */
  border-left: 1px solid var(--color-cream-dark);
}
/* First item in each desktop row has no divider on its left. */
.stats__item:first-child {
  border-left: 0;
  padding-left: 0;
}

/* ---- Big numbers ---- */
.stats__number {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3.25rem, 6vw + 1rem, 5.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-evergreen);
  font-variant-numeric: tabular-nums; /* keeps width steady while counting */
}

/* ---- Small labels (shared by all four items) ---- */
.stats__label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--color-text-muted-light);
}

/* ---- Fourth item: credential badges ---- */
.stats__item--creds {
  justify-content: flex-start;
}
.stats__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  /* Roughly align the badge cluster with the baseline mass of the numbers. */
  margin-bottom: var(--space-xs);
}
.stats__badge {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-gold-deep);
  border: 1px solid var(--color-gold);
  background-color: transparent;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  white-space: nowrap;
}

/* ---- Entrance for badges (staggered fade/slide) ---- */
.stats__badge {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.stats.is-visible .stats__badge {
  opacity: 1;
  transform: translateY(0);
}
.stats.is-visible .stats__badge:nth-child(1) { transition-delay: 0.05s; }
.stats.is-visible .stats__badge:nth-child(2) { transition-delay: 0.15s; }
.stats.is-visible .stats__badge:nth-child(3) { transition-delay: 0.25s; }
.stats.is-visible .stats__badge:nth-child(4) { transition-delay: 0.35s; }

/* ==========================================================================
   RESPONSIVE — stats
   ========================================================================== */

/* Tablet: stack the intro/photo top into one column. */
@media (max-width: 900px) {
  .stats__top {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  /* Cap the portrait height so it doesn't dominate when full-width. */
  .stats__media {
    max-width: 460px;
  }
}

/* Tablet: 2 x 2 grid. Reset dividers so only inner edges show a line. */
@media (max-width: 900px) {
  .stats__row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-xl);
  }
  .stats__item {
    padding: var(--space-sm) var(--space-lg);
  }
  /* Left column (items 1 & 3) drops its divider + left padding. */
  .stats__item:nth-child(2n + 1) {
    border-left: 0;
    padding-left: 0;
  }
  /* Restore the divider on item 3 that :first-child had removed. */
  .stats__item:nth-child(2n) {
    border-left: 1px solid var(--color-cream-dark);
  }
}

/* Mobile: single column, stacked with horizontal dividers instead. */
@media (max-width: 560px) {
  .stats__row {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .stats__item {
    border-left: 0 !important;
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--color-cream-dark);
  }
  .stats__item:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

/* ---- Reduced motion: no badge transition (numbers handled in JS) ---- */
@media (prefers-reduced-motion: reduce) {
  .stats__badge {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   3. CAPABILITIES / DOSAGE FORMS
   Dark forest surface. Section header + responsive 12-card grid. Cards
   cascade in on scroll via the .cap.is-visible class (JS toggles it).
   ========================================================================== */

.cap {
  /* .surface-dark already sets forest bg + light text. Top is tight because
     the forest node-divider above already breathes. */
  padding-block: var(--space-lg) var(--space-2xl);
}

/* Wide cinematic b-roll placeholder below the card grid. */
.cap__banner {
  margin-top: var(--space-2xl);
}

/* ---- Section header ---- */
.cap__header {
  max-width: 52ch;
  margin-bottom: var(--space-2xl);
}
.cap__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.5vw + 0.75rem, 3rem);
  line-height: 1.12;
  color: var(--color-text-light);
  margin-bottom: var(--space-md);
}
.cap__intro {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 0.6vw + 0.9rem, 1.15rem);
  line-height: 1.6;
  color: var(--color-text-muted-dark);
  max-width: 60ch;
}

/* ---- Editorial list (not boxes): mobile-first single column; column-flow
   into 2 then 3 columns on larger screens. Items are separated by thin gold
   divider lines, with a hover accent — airy and premium, no card boxes. ---- */
.cap__grid {
  display: grid;
  grid-template-columns: 1fr; /* mobile: single column */
  column-gap: var(--space-2xl);
}

/* ---- List item (reuses .cap-card markup, restyled as an editorial row) ---- */
.cap-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon title"
    "desc desc"
    "tag  tag";
  column-gap: var(--space-md);
  row-gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
  border-top: 1px solid rgba(201, 169, 74, 0.14); /* the thin divider */
  transition: transform var(--transition), border-color var(--transition);
}
.cap-card:first-child { border-top: 0; }

/* Thin gold left-accent that reveals on hover. */
.cap-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 2px;
  background: var(--color-gold);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--transition);
}
.cap-card:hover {
  border-top-color: rgba(201, 169, 74, 0.45);
}
.cap-card:hover::before { transform: scaleY(1); }

/* ---- Icon: gold orbital node (smaller, inline with the title) ---- */
.cap-card__icon {
  grid-area: icon;
  align-self: center;
  display: inline-flex;
  width: 30px;
  height: 30px;
  margin: 0;
}
.cap-card__icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cap-icon__ring {
  stroke: var(--color-gold);
  stroke-width: 1.25;
  opacity: 0.75;
  transition: opacity var(--transition);
}
.cap-icon__core,
.cap-icon__sats circle {
  fill: var(--color-gold);
}
.cap-icon__sats circle {
  opacity: 0.9;
}
/* Subtle per-item variation of the satellite ring. */
.cap-icon__sats {
  transform-box: view-box;
  transform-origin: 24px 24px;
}
.cap-card:nth-child(odd)  .cap-icon__sats { transform: rotate(0deg); }
.cap-card:nth-child(even) .cap-icon__sats { transform: rotate(45deg); }
.cap-card:hover .cap-icon__ring { opacity: 1; }

/* ---- Text ---- */
.cap-card__title {
  grid-area: title;
  align-self: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--color-text-light);
  margin: 0;
  transition: color var(--transition);
}
.cap-card:hover .cap-card__title { color: var(--color-gold); }
.cap-card__desc {
  grid-area: desc;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-muted-dark);
  margin: 0;
  max-width: 46ch;
}

/* ---- Tag (the internal card divider is no longer needed) ---- */
.cap-card__foot {
  grid-area: tag;
  margin: 0;
}
.cap-card__divider { display: none; }
.cap-card__tag {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* ---- Scroll-reveal cascade (staggered per item) ---- */
.cap-card {
  opacity: 0;
  transform: translateY(24px);
}
.cap.is-visible .cap-card {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease),
    border-color var(--transition),
    color var(--transition);
}
/* Hover lift must win over the revealed transform (higher specificity). */
.cap.is-visible .cap-card:hover { transform: translateX(6px); }
.cap.is-visible .cap-card:nth-child(1)  { transition-delay: 0.00s; }
.cap.is-visible .cap-card:nth-child(2)  { transition-delay: 0.05s; }
.cap.is-visible .cap-card:nth-child(3)  { transition-delay: 0.10s; }
.cap.is-visible .cap-card:nth-child(4)  { transition-delay: 0.15s; }
.cap.is-visible .cap-card:nth-child(5)  { transition-delay: 0.20s; }
.cap.is-visible .cap-card:nth-child(6)  { transition-delay: 0.25s; }
.cap.is-visible .cap-card:nth-child(7)  { transition-delay: 0.30s; }
.cap.is-visible .cap-card:nth-child(8)  { transition-delay: 0.35s; }
.cap.is-visible .cap-card:nth-child(9)  { transition-delay: 0.40s; }
.cap.is-visible .cap-card:nth-child(10) { transition-delay: 0.45s; }
.cap.is-visible .cap-card:nth-child(11) { transition-delay: 0.50s; }
.cap.is-visible .cap-card:nth-child(12) { transition-delay: 0.55s; }

/* ==========================================================================
   RESPONSIVE — capabilities editorial list
   Column-flow so each column is its own vertical list; the top item of each
   column drops its divider so lines only appear BETWEEN items.
   ========================================================================== */
/* Tablet: 2 columns × 6 rows (items 1-6 | 7-12). */
@media (min-width: 640px) {
  .cap__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
  }
  .cap-card:nth-child(6n + 1) { border-top: 0; }
}
/* Desktop: 3 columns × 4 rows (items 1-4 | 5-8 | 9-12). */
@media (min-width: 980px) {
  .cap__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, auto);
  }
  /* Restore the divider on the tablet column-tops, then remove it on the
     desktop column-tops (items 1, 5, 9). */
  .cap-card:nth-child(6n + 1) { border-top: 1px solid rgba(201, 169, 74, 0.14); }
  .cap-card:nth-child(4n + 1) { border-top: 0; }
}

/* ---- Reduced motion: show all items immediately, no hover shift ---- */
@media (prefers-reduced-motion: reduce) {
  .cap-card {
    opacity: 1 !important;
    transform: none !important;
  }
  .cap.is-visible .cap-card,
  .cap.is-visible .cap-card:hover {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   2b. FLAG CONVEYOR BELT
   Continuous right-to-left marquee of market flags on the forest surface
   (flows from the cream stats above into the dark capabilities below). Flags
   are injected + duplicated by js/home.js so the -50% translate loops
   seamlessly. Reduced motion -> a static, centred wrap of flags.
   ========================================================================== */
.flag-belt {
  background-color: var(--color-forest);
  color: var(--color-text-light);
  padding-block: var(--space-2xl) var(--space-3xl);
  overflow: hidden;
}
.flag-belt__eyebrow {
  display: block;
  text-align: center;
  color: var(--color-gold);
  margin-bottom: var(--space-lg);
}

/* Full-width viewport with soft fade-out edges via a gradient mask. */
.flag-belt__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

/* The scrolling row — two identical halves; translate -50% loops seamlessly. */
.flag-belt__track {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  width: max-content;
  animation: flag-belt-scroll 55s linear infinite;
}
.flag-belt__viewport:hover .flag-belt__track {
  animation-play-state: paused;
}

@keyframes flag-belt-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Individual flags. */
.flag {
  flex-shrink: 0;
  display: inline-flex;
}
.flag__img {
  display: block;
  height: 52px;
  width: auto;
  border-radius: 5px;
  border: 1px solid rgba(245, 240, 228, 0.16);
  box-shadow: 0 3px 12px rgba(12, 26, 18, 0.4);
}

/* ---- Reduced motion: no scroll — a static, centred wrap of flags ---- */
@media (prefers-reduced-motion: reduce) {
  .flag-belt__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .flag-belt__track,
  .flag-belt__track.is-static {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--space-md);
    padding-inline: clamp(1.25rem, 5vw, 3rem);
  }
}

/* ==========================================================================
   4. QUALITY & COMPLIANCE — "The Gold Standard"
   Deepest forest ("vault") surface. Left-aligned header with the signature
   italic-sage second line, then four premium credential cards. Cards cascade
   in via .quality.is-visible (JS toggles it).
   ========================================================================== */

.quality {
  background-color: var(--color-forest);
  color: var(--color-text-light);
  /* Top tight — the forest node-divider above already breathes. */
  padding-block: var(--space-lg) var(--space-2xl);
}

/* ---- Section header ---- */
.quality__header {
  max-width: 60ch;
  margin-bottom: var(--space-2xl);
}
.quality__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 4.5vw + 0.75rem, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
}
/* Signature brand moment: italic, lighter sage green. */
.quality__title-accent {
  font-style: italic;
  font-weight: 500;
  color: var(--color-sage-light);
}
.quality__intro {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 0.6vw + 0.9rem, 1.15rem);
  line-height: 1.6;
  color: var(--color-text-muted-dark);
  max-width: 62ch;
}

/* ---- Grid: 4 / 2 / 1 ---- */
.quality__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

/* ---- Credential card ---- */
.cred-card {
  display: flex;
  flex-direction: column;
  height: 100%; /* equal heights within the row */
  padding: var(--space-lg);
  border-radius: var(--radius);
  /* Barely-perceptible lift over the deep forest, with a faint gold frame. */
  background-color: rgba(30, 58, 42, 0.22); /* --color-evergreen @ ~22% */
  border: 1px solid rgba(201, 169, 74, 0.18);
  transition:
    transform var(--transition),
    border-color var(--transition),
    background-color var(--transition),
    box-shadow var(--transition);
}
.cred-card:hover {
  transform: translateY(-5px);
  background-color: rgba(30, 58, 42, 0.38);
  border-color: rgba(201, 169, 74, 0.5);
  box-shadow: 0 18px 44px rgba(12, 26, 18, 0.5);
}

/* Thin gold accent rule above the acronym — understated prestige detail. */
.cred-card__rule {
  display: block;
  width: 32px;
  height: 2px;
  background-color: var(--color-gold);
  margin-bottom: var(--space-md);
  transition: width var(--transition);
}
.cred-card:hover .cred-card__rule {
  width: 48px;
}

/* Large gold acronym headline. */
.cred-card__acronym {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.5vw + 1.25rem, 2.25rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-gold);
  margin-bottom: var(--space-xs);
}
.cred-card__subtitle {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--color-text-light);
  margin-bottom: var(--space-md);
}
.cred-card__desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted-dark);
  margin-top: auto; /* keep desc anchored, subtitle spacing consistent */
}

/* ---- Scroll-reveal cascade ---- */
.cred-card {
  opacity: 0;
  transform: translateY(28px);
}
.quality.is-visible .cred-card {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease),
    border-color var(--transition),
    background-color var(--transition),
    box-shadow var(--transition);
}
.quality.is-visible .cred-card:nth-child(1) { transition-delay: 0.10s; }
.quality.is-visible .cred-card:nth-child(2) { transition-delay: 0.20s; }
.quality.is-visible .cred-card:nth-child(3) { transition-delay: 0.30s; }
.quality.is-visible .cred-card:nth-child(4) { transition-delay: 0.40s; }

/* ==========================================================================
   RESPONSIVE — quality
   ========================================================================== */
@media (max-width: 900px) {
  .quality__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .quality__grid {
    grid-template-columns: 1fr;
  }
  /* Anchor descriptions naturally when stacked (no equal-height row). */
  .cred-card__desc { margin-top: 0; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .cred-card {
    opacity: 1 !important;
    transform: none !important;
  }
  .quality.is-visible .cred-card {
    transition: none !important;
  }
}

/* ==========================================================================
   5. PCV-13 FLAGSHIP — the emotional peak
   Full-bleed cinematic section with its own background-media slot, a dark
   forest overlay for legibility, a centred content column, and a slower,
   grander staggered entrance (.flagship.is-visible toggled by JS).
   ========================================================================== */

.flagship {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Tall, dedicated moment — near-viewport but never cramped on short screens. */
  min-height: 88vh;
  padding-block: var(--space-3xl);
  background-color: var(--color-forest);
  color: var(--color-text-light);
}

/* ---- Background media layer ---- */
.flagship__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Real <video>/<img> (when added) should cover the whole section. */
.flagship__video,
.flagship__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---- No overlay — the flagship footage plays at full vividness. Text
   legibility comes from a minimal forest-toned text-shadow instead. ---- */

/* ---- Content ---- */
.flagship__inner {
  position: relative;
  z-index: 2;
}
.flagship__content {
  max-width: 62ch;
  /* Minimal legibility aid over the raw footage (no darkening layer). */
  text-shadow: 0 1px 3px rgba(12, 26, 18, 0.75), 0 2px 18px rgba(12, 26, 18, 0.55);
}
/* The solid-gold badge needs no shadow (forest text on gold). */
.flagship__badge { text-shadow: none; }

/* Badge — a mark of distinction */
.flagship__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  margin-bottom: var(--space-lg);
  background-color: var(--color-gold);
  color: var(--color-forest);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.flagship__badge-mark {
  display: inline-flex;
  width: 16px;
  height: 16px;
}
.flagship__badge-mark svg { width: 100%; height: 100%; overflow: visible; }
/* Node inside the badge uses forest tones to read on gold. */
.flagship__badge-mark .node-mark__ring { stroke: var(--color-forest); opacity: 0.8; }
.flagship__badge-mark .node-mark__core { fill: var(--color-forest); animation: none; }

/* Headline — very large and commanding */
.flagship__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 5.5vw + 1rem, 5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
  text-wrap: balance;
}

/* Body — brightened muted tone for readability on the cinematic backdrop */
.flagship__body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.05rem, 0.8vw + 0.9rem, 1.3rem);
  line-height: 1.7;
  color: color-mix(in srgb, var(--color-text-light) 72%, var(--color-text-muted-dark) 28%);
  max-width: 64ch;
  margin-bottom: var(--space-md);
}
/* Emphasised key figures */
.flagship__figure {
  color: var(--color-gold);
  font-weight: 600;
}
/* Italic species name in a subtle sage tint */
.flagship__species {
  font-style: italic;
  color: var(--color-sage-light);
}

/* Emphasised closing line — set apart, larger, off-white */
.flagship__imperative {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 1.6vw + 1rem, 2rem);
  line-height: 1.25;
  color: var(--color-text-light);
  margin-bottom: var(--space-xl);
}

/* ---- Staggered entrance — slower/grander than the rest of the page ---- */
.flagship__animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  will-change: opacity, transform;
}
.flagship.is-visible .flagship__animate {
  opacity: 1;
  transform: translateY(0);
}
.flagship.is-visible .flagship__badge      { transition-delay: 0.15s; }
.flagship.is-visible .flagship__title      { transition-delay: 0.40s; }
.flagship.is-visible .flagship__body       { transition-delay: 0.65s; }
.flagship.is-visible .flagship__imperative { transition-delay: 0.90s; }
.flagship.is-visible .flagship__actions    { transition-delay: 1.15s; }

/* ==========================================================================
   RESPONSIVE — flagship
   ========================================================================== */
@media (max-width: 640px) {
  /* MOBILE FLAGSHIP — show the WHOLE 16:9 video (4th.mp4 is 1920x1080) as a
     banner, with the content stacked below on the forest surface. No cropping
     or heavy overlay. Desktop/tablet (>640px) keep the full-bleed cover
     treatment — completely unchanged. */
  .flagship {
    display: block;
    min-height: 0;
    padding-block: 0 var(--space-2xl);
  }
  .flagship__media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;   /* reserves the banner height (no layout shift) */
    background-color: var(--color-forest);
  }
  .flagship__video {
    /* contain guarantees the WHOLE landscape video is visible — no crop. */
    object-fit: contain;
    object-position: center;
  }
  .flagship__inner {
    padding-top: var(--space-xl);
  }
  /* Content now sits on forest, not over the video — no text-shadow needed. */
  .flagship__content { text-shadow: none; }
  .flagship__actions .btn {
    width: 100%;
  }
}

/* ---- Reduced motion: reveal immediately ---- */
@media (prefers-reduced-motion: reduce) {
  .flagship__animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   6. GLOBAL PRESENCE (teaser)
   Light cream surface. Header, then a two-part layout: a wide world-map
   placeholder (larger share) beside a refined regions list (smaller share),
   with a CTA. Region rows cascade in on scroll (generic .reveal).
   ========================================================================== */

.global {
  background-color: var(--color-cream);
  color: var(--color-ink);
  /* Top tight — the cream node-divider above already breathes. */
  padding-block: var(--space-md) var(--space-2xl);
}

/* ---- Header ---- */
.global__header {
  max-width: 60ch;
  margin-bottom: var(--space-2xl);
}
.global__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.5vw + 0.75rem, 3rem);
  line-height: 1.12;
  color: var(--color-ink);
  margin-bottom: var(--space-md);
}
.global__intro {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 0.6vw + 0.9rem, 1.15rem);
  line-height: 1.6;
  color: var(--color-text-muted-light);
  max-width: 62ch;
}

/* ---- Two-part layout ---- */
.global__layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr; /* map ~60% / regions ~40% */
  gap: var(--space-2xl);
  align-items: start;
}
.global__map {
  width: 100%;
}

/* ---- Regions list ---- */
.global__regions {
  display: flex;
  flex-direction: column;
}
.region-list {
  display: flex;
  flex-direction: column;
}
.region {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-cream-dark);
}
.region:first-child {
  border-top: 0;
  padding-top: 0;
}
/* Small gold orbital-node dot marker beside each region name. */
.region__mark {
  position: relative;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: 0.5rem; /* nudge to align with the name baseline */
  border-radius: 50%;
  background-color: var(--color-gold);
}
.region__mark::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  opacity: 0.4;
}
.region__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--color-ink);
  margin-bottom: 0.15rem;
}
.region__markets {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-muted-light);
}

/* CTA sits below the regions list. */
.global__cta {
  margin-top: var(--space-xl);
  align-self: flex-start;
}

/* ---- Region row reveal cascade (generic .reveal + per-row delay) ---- */
.region.reveal:nth-child(1) { transition-delay: 0.05s; }
.region.reveal:nth-child(2) { transition-delay: 0.12s; }
.region.reveal:nth-child(3) { transition-delay: 0.19s; }
.region.reveal:nth-child(4) { transition-delay: 0.26s; }
.region.reveal:nth-child(5) { transition-delay: 0.33s; }
.region.reveal:nth-child(6) { transition-delay: 0.40s; }

/* ==========================================================================
   RESPONSIVE — global presence
   ========================================================================== */
@media (max-width: 900px) {
  .global__layout {
    grid-template-columns: 1fr; /* stack: map on top, regions below */
    gap: var(--space-xl);
  }
}
@media (max-width: 560px) {
  .global__cta {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   7. CLOSING CALL-TO-ACTION — "Partner with us" (finale)
   Deep forest surface flowing into the dark footer. Centred closing
   statement, three route cards, and a primary CTA. Staggered entrance via
   .closing.is-visible (JS toggles it).
   ========================================================================== */

.closing {
  position: relative;
  overflow: hidden;
  background-color: var(--color-forest);
  color: var(--color-text-light);
  /* Spacious, deliberate finale. Tight top — forest divider breathes above. */
  padding-block: var(--space-2xl) var(--space-3xl);
}

/* Optional future background image sits behind this overlay. */
.closing__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.closing__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(
      120% 90% at 50% 0%,
      rgba(201, 169, 74, 0.08) 0%,
      rgba(201, 169, 74, 0) 55%
    ),
    linear-gradient(
      to bottom,
      rgba(12, 26, 18, 0.85),
      rgba(12, 26, 18, 0.95)
    );
}

.closing__inner {
  position: relative;
  z-index: 1;
}

/* ---- Centred closing header ---- */
.closing__header {
  max-width: 40ch;
  margin-inline: auto;
  margin-bottom: var(--space-2xl);
  text-align: center;
}
.closing__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 4.5vw + 0.75rem, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
  text-wrap: balance;
}
.closing__intro {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 0.7vw + 0.9rem, 1.2rem);
  line-height: 1.6;
  /* Brightened muted tone for readability on the dark backdrop. */
  color: color-mix(in srgb, var(--color-text-light) 70%, var(--color-text-muted-dark) 30%);
  max-width: 56ch;
  margin-inline: auto;
}

/* ---- Three paths ---- */
.closing__paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}
.path-card {
  display: flex;
  flex-direction: column;
  height: 100%; /* equal heights within the row */
  padding: var(--space-lg);
  border-radius: var(--radius);
  background-color: rgba(30, 58, 42, 0.3); /* faint evergreen lift */
  border: 1px solid rgba(201, 169, 74, 0.16);
  transition:
    transform var(--transition),
    border-color var(--transition),
    background-color var(--transition),
    box-shadow var(--transition);
}
.path-card:hover {
  transform: translateY(-6px);
  background-color: rgba(30, 58, 42, 0.5);
  border-color: rgba(201, 169, 74, 0.45);
  box-shadow: 0 18px 44px rgba(12, 26, 18, 0.5);
}
.path-card__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-md);
}
.path-card__icon svg { width: 100%; height: 100%; overflow: visible; }
.path-card__icon .cap-icon__ring { stroke: var(--color-gold); stroke-width: 1.25; opacity: 0.75; }
.path-card__icon .cap-icon__core,
.path-card__icon .cap-icon__sats circle { fill: var(--color-gold); }
.path-card:hover .cap-icon__ring { opacity: 1; }

.path-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--color-text-light);
  margin-bottom: var(--space-sm);
}
.path-card__desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-muted-dark);
  margin-bottom: var(--space-lg);
}
/* Gold arrow link, pinned to the bottom of the card. */
.path-card__link {
  margin-top: auto;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-gold);
  transition: color var(--transition);
}
.path-card__arrow {
  display: inline-block;
  margin-left: 0.25rem;
  transition: transform var(--transition);
}
.path-card__link:hover {
  color: var(--color-gold);
}
.path-card__link:hover .path-card__arrow {
  transform: translateX(4px);
}

/* ---- Primary CTA ---- */
.closing__cta {
  text-align: center;
}

/* ---- Staggered entrance ---- */
.closing__animate {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: opacity, transform;
}
.closing.is-visible .closing__animate {
  opacity: 1;
  transform: translateY(0);
}
.closing.is-visible .closing__header .eyebrow { transition-delay: 0.10s; }
.closing.is-visible .closing__title           { transition-delay: 0.22s; }
.closing.is-visible .closing__intro           { transition-delay: 0.34s; }
.closing.is-visible .path-card:nth-child(1)   { transition-delay: 0.46s; }
.closing.is-visible .path-card:nth-child(2)   { transition-delay: 0.56s; }
.closing.is-visible .path-card:nth-child(3)   { transition-delay: 0.66s; }
.closing.is-visible .closing__cta             { transition-delay: 0.80s; }

/* ==========================================================================
   RESPONSIVE — closing
   ========================================================================== */
@media (max-width: 860px) {
  .closing__paths {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
    margin-bottom: var(--space-2xl);
  }
}
@media (max-width: 560px) {
  .closing__cta .btn {
    width: 100%;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .closing__animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}