html,
      body {
        margin: 0;
        background: #13193b; /* hero navy — no white flash */
      }
      /* ---- Loading screen (static, pre-bundle) ----
         Lives in index.html so it paints with the HTML, before any JS. The app
         hides/removes it via window.__showcaseLoader (see the boot script below
         and Hero.jsx); it never re-renders it. */
      .hero__loading {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #13193b; /* hero navy */
        color: #f8f9f9; /* matches the card fill in the wheel SVG */
        font-family:
          "PP Neue Montreal",
          system-ui,
          -apple-system,
          sans-serif;
        transition: opacity 0.5s ease;
      }
      .hero__loading.is-hiding {
        opacity: 0;
        pointer-events: none;
      }
      .loading-wheel {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
      }
      .loading-wheel__svg {
        display: block;
        line-height: 0;
      }
      .loading-wheel__svg svg {
        display: block;
        width: clamp(88px, 12vw, 132px);
        height: auto;
        overflow: visible;
      }
      /* One shared loop (3.2s — keep in sync with loopMs in the boot script):
         14 × 0.2s steps (6.25% each) build the ring card by card in DESCENDING
         order (card_13 first … card_1 last), a 0.4s hold at full, then every lit
         card fades out together and the loop restarts. card_14 is the anchor
         (the first card in the sequence) and never animates. */
      .loading-wheel__svg g[id^="card_"]:not([id="card_14"]) {
        animation-duration: 3.2s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
        will-change: opacity;
      }
      .loading-wheel__svg g[id="card_13"] {
        animation-name: loading-card-13;
      }
      @keyframes loading-card-13 {
        0%,
        6.25% {
          opacity: 0;
        }
        12.5%,
        94% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      .loading-wheel__svg g[id="card_12"] {
        animation-name: loading-card-12;
      }
      @keyframes loading-card-12 {
        0%,
        12.5% {
          opacity: 0;
        }
        18.75%,
        94% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      .loading-wheel__svg g[id="card_11"] {
        animation-name: loading-card-11;
      }
      @keyframes loading-card-11 {
        0%,
        18.75% {
          opacity: 0;
        }
        25%,
        94% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      .loading-wheel__svg g[id="card_10"] {
        animation-name: loading-card-10;
      }
      @keyframes loading-card-10 {
        0%,
        25% {
          opacity: 0;
        }
        31.25%,
        94% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      .loading-wheel__svg g[id="card_9"] {
        animation-name: loading-card-9;
      }
      @keyframes loading-card-9 {
        0%,
        31.25% {
          opacity: 0;
        }
        37.5%,
        94% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      .loading-wheel__svg g[id="card_8"] {
        animation-name: loading-card-8;
      }
      @keyframes loading-card-8 {
        0%,
        37.5% {
          opacity: 0;
        }
        43.75%,
        94% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      .loading-wheel__svg g[id="card_7"] {
        animation-name: loading-card-7;
      }
      @keyframes loading-card-7 {
        0%,
        43.75% {
          opacity: 0;
        }
        50%,
        94% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      .loading-wheel__svg g[id="card_6"] {
        animation-name: loading-card-6;
      }
      @keyframes loading-card-6 {
        0%,
        50% {
          opacity: 0;
        }
        56.25%,
        94% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      .loading-wheel__svg g[id="card_5"] {
        animation-name: loading-card-5;
      }
      @keyframes loading-card-5 {
        0%,
        56.25% {
          opacity: 0;
        }
        62.5%,
        94% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      .loading-wheel__svg g[id="card_4"] {
        animation-name: loading-card-4;
      }
      @keyframes loading-card-4 {
        0%,
        62.5% {
          opacity: 0;
        }
        68.75%,
        94% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      .loading-wheel__svg g[id="card_3"] {
        animation-name: loading-card-3;
      }
      @keyframes loading-card-3 {
        0%,
        68.75% {
          opacity: 0;
        }
        75%,
        94% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      .loading-wheel__svg g[id="card_2"] {
        animation-name: loading-card-2;
      }
      @keyframes loading-card-2 {
        0%,
        75% {
          opacity: 0;
        }
        81.25%,
        94% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      .loading-wheel__svg g[id="card_1"] {
        animation-name: loading-card-1;
      }
      @keyframes loading-card-1 {
        0%,
        81.25% {
          opacity: 0;
        }
        87.5%,
        94% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      /* "Loading..." — the second and third periods tick on in sequence on a
         1.6s loop (half the wheel loop, so both reset on the same beat). */
      .loading-wheel__text {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        line-height: 1;
      }
      .loading-wheel__dot {
        animation: loading-dot-2 1.6s step-end infinite;
      }
      .loading-wheel__dot--3 {
        animation-name: loading-dot-3;
      }
      @keyframes loading-dot-2 {
        0% {
          opacity: 0;
        }
        33.34%,
        100% {
          opacity: 1;
        }
      }
      @keyframes loading-dot-3 {
        0% {
          opacity: 0;
        }
        66.67%,
        100% {
          opacity: 1;
        }
      }
      /* Failure state (bundle failed to load / app never mounted): swap the wheel
         for a plain message. Toggled by window.__showcaseLoader.fail(). */
      .loading-wheel__error {
        display: none;
        margin: 0;
        padding: 32px;
        max-width: 36ch;
        text-align: center;
        font-size: clamp(1rem, 1.3vw, 1.2rem);
        line-height: 1.45;
        color: rgba(245, 245, 247, 0.85);
      }
      .hero__loading.is-failed .loading-wheel {
        display: none;
      }
      .hero__loading.is-failed .loading-wheel__error {
        display: block;
      }
      @media (prefers-reduced-motion: reduce) {
        /* No per-card build-up: show the full ring and rotate the whole wheel
           slowly instead. The "Loading..." dots keep ticking (step changes, no
           motion). */
        .loading-wheel__svg g[id^="card_"] {
          animation: none;
          opacity: 1;
        }
        /* (.loading-wheel__spin + .loading-wheel__dot are exempted from the
           global reduced-motion animation reset in src/styles/global.css.) */
        .loading-wheel__spin {
          animation: loading-wheel-spin 12s linear infinite;
          transform-origin: 50% 50%;
        }
      }
      @keyframes loading-wheel-spin {
        to {
          transform: rotate(360deg);
        }
      }
      /* Keep the hero pieces hidden until the app positions/reveals them (GSAP
         sets inline opacity/visibility, which overrides these). Prevents the
         unstyled "all taglines stacked top-left" flash. */
      #root .hero__lockup,
      #root .hero__taglines p,
      #root .hero__bottom,
      #root .hero__video-line,
      #root .hero__mark-big,
      #root .hero__white,
      #root .hero__scrim,
      #root .hero__cell {
        opacity: 0;
      }
      /* No-JS gate (body <noscript>): the whole experience is a client-rendered
         React app, so with scripting off show the lockup + a plain message on the
         hero navy instead of an empty page. Fixed + high z so it also covers the
         build-time <noscript id="seo-fallback"> copy (kept beneath for crawlers). */
      .nojs-gate {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 28px;
        padding: 32px;
        box-sizing: border-box;
        background: #13193b;
        color: #fff;
        text-align: center;
        font-family:
          "PP Neue Montreal",
          system-ui,
          -apple-system,
          sans-serif;
      }
      .nojs-gate svg {
        display: block;
        width: min(72vw, 320px);
        height: auto;
      }
      .nojs-gate p {
        margin: 0;
        max-width: 34ch;
        font-size: clamp(1rem, 1.3vw, 1.2rem);
        line-height: 1.45;
        color: rgba(245, 245, 247, 0.85);
      }
      .nojs-gate a {
        color: #fff;
        text-decoration: underline;
        text-underline-offset: 0.15em;
      }