/* Shared wireframe stylesheet — clean blue/white system */

:root{
  --paper: #ffffff;
  --paper-2: #f4f6fb;
  --paper-3: #e8edf6;
  --ink: #0c1834;            /* deep navy */
  --ink-2: #1f2a4a;
  --ink-3: #4f5b7a;
  --ink-4: #8a93ad;
  --accent-warm: #1d4ed8;    /* primary blue */
  --accent-blue: #2563eb;    /* bright cobalt */
  --accent-gold: #0e7490;    /* teal */
  --accent-green: #3b82f6;   /* signal blue */
  --line: #d8dee9;
  --card-radius: 6px;
}

/* Fonts */
.f-hand{ font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: -0.01em; }
.f-marker{ font-family: 'Newsreader', Georgia, serif; font-style: italic; }
.f-mono{ font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
.f-sans{ font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
.f-serif{ font-family: 'Newsreader', Georgia, 'Times New Roman', serif; }

/* Wireframe primitives */
.wf{
  background: var(--paper);
  color: var(--ink);
  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
}

.box{
  border: 1.4px solid var(--ink);
  border-radius: var(--card-radius);
  background: var(--paper);
}
.box-dashed{
  border: 1.4px dashed var(--ink-3);
  border-radius: var(--card-radius);
}
.box-light{
  border: 1.2px solid var(--line);
  border-radius: var(--card-radius);
}

/* Placeholder image slot */
.img-slot{
  background-color: var(--paper-2);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 8px,
    rgba(29,78,216,0.07) 8px 9px
  );
  border: 1.2px solid var(--line);
  border-radius: var(--card-radius);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-align: center;
  position: relative;
  white-space: pre-line;
}

/* Tag / chip */
.chip{
  display: inline-flex; align-items:center;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10.5px;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--paper-2);
  color: var(--ink-2);
  white-space: nowrap;
}

/* Underline accent */
.scribble-under{
  border-bottom: 3px solid var(--accent-warm);
  padding-bottom: 0.05em;
}

.arrow-right::after{
  content: '→';
  margin-left: 0.4em;
}

/* Annotation note — now a clean side-tab, not yellow sticky */
.note{
  display:inline-block;
  background: var(--paper-2);
  padding: 6px 12px;
  border-left: 3px solid var(--accent-warm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.5;
  border-radius: 0 4px 4px 0;
}

/* Section label rail */
.sect-label{
  display:flex; align-items:center; gap:10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sect-label::before{
  content:''; width: 28px; height: 1.2px; background: var(--ink-3);
}

/* Nav */
.wf-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px 40px;
  border-bottom: 1px solid var(--line);
}
.wf-logo{
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.wf-navlinks{
  display:flex; gap: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 18px;
  border: 1.4px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  transition: all .2s;
}
.btn-filled{ background: var(--accent-warm); color: var(--paper); border-color: var(--accent-warm); }

@keyframes wobble {
  0%, 100% { transform: rotate(-0.15deg); }
  50% { transform: rotate(0.15deg); }
}

.callout{
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  color: var(--accent-warm);
  font-size: 16px;
  line-height: 1.2;
}

.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ scrollbar-width: none; }


/* ─────────────────────────────────────────────────────────────────
   Mobile pass — collapse 2-col heroes, reduce display headlines,
   stack grids. Targets opt-in helper classes added to inline-styled
   React components so we can override their inline styles without
   refactoring every component. Uses !important sparingly but is
   intentional: inline styles win otherwise.
   ───────────────────────────────────────────────────────────────── */

/* === Tablet and below === */
@media (max-width: 900px) {

  /* Hero pattern (homepage / methodology / services / sectors / about) */
  .h-hero          { padding: 110px 24px 56px !important; }
  .h-hero__grid    { grid-template-columns: 1fr !important; gap: 36px !important; align-items: flex-start !important; }
  .h-hero__title   { font-size: 64px !important; line-height: 1.02 !important; max-width: 100% !important; }
  .h-hero__intro   { font-size: 16px !important; max-width: 100% !important; }
  .h-hero__anim-wrap { height: 280px !important; }

  /* Inline TOC / sector index strip — stack to 2 columns then 1 */
  .h-hero__toc     { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; row-gap: 22px !important; }

  /* Responsive grids */
  .h-grid-4        { grid-template-columns: repeat(2, 1fr) !important; }
  .h-grid-3        { grid-template-columns: 1fr !important; }
  .h-grid-2-1      { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* Generic sections that currently sit at 140px / 64px padding */
  .h-section       { padding: 80px 24px !important; }
  .h-section-tight { padding: 60px 24px !important; }

  /* Homepage globe scene wrapper — stack globe over wordmark.
     The internal SVG keeps its viewBox so it scales fine; this just
     keeps the section from taking 1080×1080 on a phone. */
  .h-hero--homepage { min-height: 78vh !important; height: auto !important; overflow: visible !important; }

  /* Globe + wordmark wrapper — flip out of absolute so it takes
     vertical space and the CTA card flows below it. Otherwise the
     CTA, when set to position:relative, gets the top of the section
     and the globe layer covers it. */
  .h-hero__globe-wrap {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 58vh !important;
    transform: none !important;
  }

  /* Homepage glass CTA card — drop from absolute bottom-right to a
     full-width strip below the wordmark scene. */
  .h-hero__cta-card {
    position: relative !important;
    inset: auto !important;
    margin: 24px 24px 16px !important;
    max-width: none !important;
    right: auto !important; bottom: auto !important;
  }
  .h-hero__scroll-cue { display: none !important; }

  /* Theme toggle — the actually-positioned element is the inner
     [role="group"] div inside .h-hero__toggle (the wrapper is static).
     Tuck it into the gap between nav (~63px tall) and the hero
     padding-top (110px) so it stops overlapping the H1 wrap. */
  .h-hero__toggle [role="group"] {
    top: 74px !important;
    right: 14px !important;
    padding: 2px !important;
  }
  .h-hero__toggle [role="group"] button {
    padding: 4px 9px !important;
    font-size: 9px !important;
    letter-spacing: 0.16em !important;
  }

  /* Sectors page — band 4-up "where AI shows up" grids */
  .h-sec-usecases  { grid-template-columns: repeat(2, 1fr) !important; }
  .h-sec-stages    { grid-template-columns: 1fr !important; gap: 16px !important; }
  .h-sec-split     { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Sector use-case cards: release the height:200 desktop reservation
     and swap the borderLeft (for 4-col layout) for a borderTop hairline
     between stacked rows. */
  .h-sec-usecase-card {
    height: auto !important;
    min-height: 0 !important;
    padding: 22px 20px !important;
    gap: 8px !important;
    border-left: none !important;
    border-top: 1px solid var(--line) !important;
  }
  /* The first card in the grid has no top border (it sits flush with
     the section's own border-top). data-theme="dark" bands use a
     translucent white border instead. */
  .h-sec-usecases > :first-child .h-sec-usecase-card {
    border-top: none !important;
  }
  section[data-theme="dark"] .h-sec-usecase-card {
    border-top-color: rgba(255,255,255,0.16) !important;
  }
  /* On mobile we want the description to NOT push to bottom via
     marginTop:auto since the card has no fixed height anymore. */
  .h-sec-usecase-card > :last-child { margin-top: 0 !important; }

  /* Methodology failures table — strip the rigid 80/280/1fr/200 layout */
  .h-meth-failures-row {
    grid-template-columns: 56px 1fr !important;
    row-gap: 8px !important;
  }
  .h-meth-failures-row > :nth-child(3) {
    grid-column: 1 / -1 !important;
  }
  .h-meth-failures-row > h3 { font-size: 22px !important; }

  /* Homepage cascade animation pinned section — let the diagram size to
     content on mobile and stop being a sticky pin (too cramped). */
  .h-cascade-section { min-height: auto !important; }
  .h-cascade-pin     { position: static !important; height: auto !important; max-height: none !important; }
  .h-cascade-diagram { transform: scale(0.85); transform-origin: top left; }

  /* Side progress indicator (vertical rail) is noisy on mobile */
  .h-side-progress { display: none !important; }

  /* Sectors page sticky side nav also off on mobile */
  .h-sectors-sidenav { display: none !important; }

  /* Top nav bar — replace desktop links + CTA with hamburger that
     opens a drawer. The desktop links can never fit four uppercase
     letter-spaced labels plus a full CTA on a phone, so hide them. */
  .sn-bar { padding: 12px 18px !important; }
  .sn-bar .sn-logo img { height: 42px !important; }
  .sn-nav, .sn-cta { display: none !important; }
  .sn-burger { display: flex !important; }

  /* About bio — stack portrait above text */
  .h-about-bio { grid-template-columns: 1fr !important; gap: 32px !important; }
  .h-about-bio--reversed > :first-child { order: 1 !important; }
  .h-about-bio--reversed > :last-child  { order: 2 !important; }
  .h-about-experience { grid-template-columns: 1fr !important; }
  /* Drop the desktop 3-col borders + minHeight 120 + flex space-between
     gap. The desktop card has FORMER label at top and institution name
     at bottom (justify-content:space-between). On mobile that creates a
     huge empty middle. Switch to flex-start with a small gap, and add
     a consistent bottom hairline between rows. */
  .h-about-experience > * > div {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.18) !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    padding: 22px 18px !important;
    gap: 8px !important;
  }
  .h-about-experience > * > div > div:last-child { margin-top: 0 !important; }
  .h-about-experience > *:last-child > div { border-bottom: none !important; }

  /* Bio portrait caption strip ("01 | FOUNDER & PRESIDENT") duplicates
     the bio text's eyebrow line on mobile (the eyebrow renders right
     below the portrait once stacked). Hide the caption strip — the
     eyebrow already carries the same info. */
  .h-bio-portrait-caption { display: none !important; }

  /* ── Universal mobile padding collapse ─────────────────────────────
     Every themed section on every page gets the same comfortable
     gutter on mobile. Wins over inline 140px/64px because attribute
     selector beats the inline cascade with !important. */
  section[data-theme]:not(.h-hero) {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* ── Universal headline cap ────────────────────────────────────────
     Sub-section h2's are 52–88px on desktop; on mobile they read as
     wall-of-text. Cap with a clamp() so they scale fluidly but never
     exceed 48px. Heroes use h1 (.h-hero__title) which has its own
     rule above. */
  section h2 {
    font-size: clamp(28px, 7vw, 48px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
  }

  /* Animation wrappers — keep the SVG inside fit to the wrapper.
     Several inline SVGs declare height="420" attribute which would
     overflow a 280px wrapper. */
  .h-hero__anim-wrap svg {
    height: 100% !important;
    max-height: 280px !important;
  }

  /* Fixed-height stat cards — release on mobile so content drives. */
  .h-grid-4 .h-stat-card,
  .h-grid-3 .h-stat-card,
  .h-stat-card {
    height: auto !important;
    min-height: 0 !important;
    padding: 24px 22px !important;
  }
  .h-stat-card .h-stat-num { font-size: 64px !important; line-height: 0.95 !important; }

  /* Methodology + sectors 2-column splits stack to one column */
  .h-meth-different,
  .h-svc-essential,
  .h-pull-quote,
  .h-sec-split {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  /* Disable sticky on the right-rail diagrams once stacked */
  .h-meth-different .h-meth-different__rail,
  .h-svc-essential .h-svc-essential__intro {
    position: static !important;
    top: auto !important;
  }
  /* HBR pull-quote: source attribution swaps to left-align underneath */
  .h-pull-quote > *:last-child { text-align: left !important; }

  /* Services stages — drop the rigid 100/1fr/1.4fr layout */
  .h-svc-stages-row {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 32px 0 !important;
  }
  .h-svc-stages-row .h-svc-stages-num { font-size: 48px !important; }

  /* Homepage HomeWhat companies row — 4-up to 2-up */
  .h-home-companies { grid-template-columns: 1fr 1fr !important; }
  .h-home-companies > * { padding-left: 18px !important; }
  .h-home-companies > *:first-child,
  .h-home-companies > *:nth-child(3) {
    padding-left: 0 !important;
    border-left: none !important;
  }

  /* Homepage HomeMethodology stage cards — 3-up to 1-up */
  .h-home-stages { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Homepage Methodology section — kill the 240vh pinned scroll
     narrative on mobile. The desktop sticky inner has height:100vh +
     justify-content:center, and the children (h2, pipeline SVG, the
     three stage cards) total more than 100vh once stacked. With
     justify-content:center the overflow spills ABOVE the sticky
     container, painting methodology content INSIDE the sectors
     section above. Switch to normal flow + hide the desktop-only
     scroll-progress + SVG pipeline; the three stage cards (already
     1-up via h-home-stages) carry the content. */
  .h-home-methodology { min-height: 0 !important; }
  .h-home-methodology__pin {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    justify-content: flex-start !important;
    padding: 0 !important;
  }
  .h-home-methodology__header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 22px !important;
  }
  .h-home-methodology__progress { display: none !important; }
  .h-home-methodology__pipeline { display: none !important; }

  /* Homepage HomeSectors horizontal accordion — flip to a vertical
     stack and show ALL sectors fully on mobile. The horizontal
     "hover-to-expand" pattern doesn't map onto a phone, and the
     vertical hairline collapsed visual is meaningless once rotated.
     Strategy: hide the collapsed visual + absolute footer, force the
     panel content to show always, and let content drive height. */
  .h-sectors-accordion {
    flex-direction: column !important;
    height: auto !important;
    border: none !important;
    gap: 12px !important;
  }
  .h-sectors-accordion > * {
    flex: 1 1 auto !important;
    border: 1px solid var(--line) !important;
    border-radius: 4px !important;
    background: var(--paper-2, #f4f6fb) !important;
    padding: 22px 20px !important;
    min-height: 0 !important;
  }
  /* Hide the collapsed-state vertical hairline + dot visual */
  .h-sectors-accordion .h-sectors-accordion__collapsed-vis { display: none !important; }
  /* Force the panel content visible regardless of active state */
  .h-sectors-accordion .h-sectors-accordion__panel {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    padding-top: 14px !important;
  }
  .h-sectors-accordion .h-sectors-accordion__title { font-size: 28px !important; }
  /* Footer row goes from absolute overlap to inline. Hide the
     duplicate sector-name (panel already shows it) and let the CTA
     sit naturally below the panel. */
  .h-sectors-accordion .h-sectors-accordion__footer {
    min-height: 0 !important;
    margin-top: 14px !important;
  }
  .h-sectors-accordion .h-sectors-accordion__footer-name { display: none !important; }
  .h-sectors-accordion .h-sectors-accordion__footer-cta {
    position: static !important;
    opacity: 1 !important;
  }
  /* Indicator pills below the accordion are noise on mobile */
  .h-sectors-accordion + div { display: none !important; }

  /* Homepage What We Do — eyebrow column + content split */
  .h-home-what {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Homepage Clients stakeholder cards — release the desktop
     min-height reservations and cap the 40pt h3 names. The
     min-heights existed to keep four desktop columns aligned; once
     stacked they trap empty space and cause the overlap the user
     reported. */
  .h-clients-card { min-height: 0 !important; gap: 14px !important; padding: 24px 22px !important; }
  .h-clients-card > * { min-height: 0 !important; }
  .h-clients-card h3 {
    font-size: 30px !important;
    line-height: 1.05 !important;
    min-height: 0 !important;
  }
  .h-clients-card p { min-height: 0 !important; }

  /* Sector band 3-up engagement-stage cards — stack on tablet */
  .h-sec-stages-3 { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Bio credentials grid — clear 2-col borders when stacked */
  .h-bio-creds { grid-template-columns: 1fr !important; }
  .h-bio-creds > * {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--line) !important;
  }
  .h-bio-creds > *:first-child { border-top: none !important; }

  /* Cascade-mode pin: shrink its padding now that the section uses
     mobile-collapse like the others. The CSS classes existed but
     weren't applied — see cascade-mode.jsx. */
  .h-cascade-pin {
    padding: 16px 18px 18px !important;
    top: 64px !important;
  }
  .h-cascade-section .cm-section,
  section.cm-section { min-height: auto !important; }

  /* Cascade-mode header: stack heading + CTA so the "Read the
     methodology" button doesn't hug the right edge of the section
     with `whiteSpace: nowrap`. Button gets its own row, full width. */
  .h-cascade-header {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    align-items: stretch !important;
    margin-bottom: 24px !important;
  }
  .h-cascade-header > a {
    justify-self: stretch !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* Cascade-mode diagram: the desktop layout uses a 880x380 SVG with
     absolutely-positioned pills + outcome card placed by % of the
     container. On mobile the SVG's preserveAspectRatio=meet leaves
     vertical padding inside, while pills are positioned across the
     full container height — so the curves and pills never line up.
     On mobile: hide the SVG and turn pills + outcome into a clean
     vertical list. */
  .h-cascade-diagram {
    transform: none !important;
    max-width: none !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 !important;
  }
  .h-cascade-diagram > svg { display: none !important; }
  .h-cascade-pill {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
    padding: 12px 16px !important;
    background: rgba(29,78,216,0.16) !important;
    border-color: rgba(255,255,255,0.22) !important;
  }
  .h-cascade-outcome {
    position: static !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
    margin-top: 14px !important;
    padding: 22px 20px !important;
    background: rgba(200,50,60,0.12) !important;
  }
}

/* === Phone-only === */
@media (max-width: 540px) {
  .h-hero          { padding: 100px 18px 44px !important; }
  .h-hero__title   { font-size: 44px !important; }
  .h-hero__intro   { font-size: 15px !important; }
  .h-hero__anim-wrap { height: 220px !important; }
  .h-hero__globe-wrap { height: 46vh !important; }
  .h-hero__toc     { grid-template-columns: 1fr !important; }

  .h-grid-4        { grid-template-columns: 1fr !important; }
  .h-section       { padding: 64px 18px !important; }
  .h-section-tight { padding: 48px 18px !important; }

  .h-sec-usecases  { grid-template-columns: 1fr !important; }
  .h-cascade-diagram { transform: scale(0.7); }

  /* Phone-tier universal overrides */
  section[data-theme]:not(.h-hero) {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  section h2 { font-size: clamp(26px, 7vw, 40px) !important; }
  .h-hero__anim-wrap svg { max-height: 220px !important; }
  .h-home-companies { grid-template-columns: 1fr !important; }
  .h-home-companies > * {
    padding-left: 0 !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.18) !important;
    padding-top: 18px !important;
  }
  .h-home-companies > *:first-child { border-top: none !important; padding-top: 0 !important; }
  .h-sectors-accordion .h-sectors-accordion__title { font-size: 26px !important; }
  .h-stat-card .h-stat-num { font-size: 56px !important; }
  .h-clients-card h3 { font-size: 26px !important; }
  .sn-bar { padding: 10px 16px !important; }
  .sn-bar .sn-logo img { height: 38px !important; }
  .sn-drawer { padding: 84px 22px 24px !important; }
  .sn-drawer-link { font-size: 19px !important; padding: 16px 0 !important; }

  /* Footer compacts to vertical stack */
  .h-footer__row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }
  .h-footer__row > nav { flex-wrap: wrap; gap: 16px !important; }
}


/* ─────────────────────────────────────────────────────────────────
   A11y — focus-visible outlines, motion-reduction, skip link.
   ───────────────────────────────────────────────────────────────── */

/* Restore visible focus on interactive elements that opt out of the
   default browser outline (typical for inline-styled React buttons). */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip-to-content link injected by SiteNav. Hidden until focused. */
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: top 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 16px;
  outline: 2px solid var(--accent-warm);
  outline-offset: 3px;
}

/* Motion reduction — for users who request less motion, kill ambient
   animations on hero scenes and the cascade-mode diagram, plus all
   keyframe-based reveals and CSS transitions. The existing global rule
   in each page <head> handles broad strokes (animation-duration: 1ms);
   these are explicit reinforcements for SVG-targeted animations that
   sometimes slip through. */
@media (prefers-reduced-motion: reduce) {
  /* All hero animation containers and their SVG descendants */
  .h-hero__anim-wrap *,
  .h-cascade-section *,
  [data-video-root] * {
    animation: none !important;
    transition: none !important;
  }
  /* Hide the heroCue/scroll bobble; it's pure decoration */
  .h-hero__scroll-cue { animation: none !important; opacity: 0.6 !important; }
}