:root {
        --brand-black: #0a0a0a;
        --brand-white: #ffffff;
        --brand-accent: #ffe000;
        --brand-muted: rgba(255, 255, 255, 0.65);
        --font-display: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
        --font-body: "Google Sans Flex", system-ui, sans-serif;
      }

      html,
      body {
        margin: 0;
        padding: 0;
        min-height: 100%;
        background: #000;
      }
      body {
        overflow-x: hidden;
      }

      /* ---------- a11y ---------- */
      .skip-link {
        position: fixed;
        top: -100px;
        left: 1rem;
        z-index: 1000;
        background: #ffe000;
        color: #000;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 0.85rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-decoration: none;
        padding: 0.7rem 1.2rem;
        transition: top 0.2s ease;
      }
      .skip-link:focus-visible {
        top: 1rem;
      }
      .hud button:focus-visible,
      .contact-panel input:focus-visible,
      .contact-panel textarea:focus-visible,
      .contact-panel button:focus-visible {
        outline: 2px solid #ffe000;
        outline-offset: 3px;
      }

      .sr-mirror {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
      }

      /* ---------- white storybook intro: dark chrome ---------- */
      body.light-intro .scroll-hint {
        color: #0a0a0a;
      }
      body.light-intro .hud .nav-links li button {
        color: #0a0a0a;
      }
      body.light-intro .wm-mark .lg-ad path {
        stroke: #0a0a0a;
      }
      body.light-intro .wm-mark .lg-art path,
      body.light-intro .wm-script {
        fill: #0a0a0a;
      }
      body.light-intro .hud .topnav {
        background: linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0.65) 0%,
          transparent 100%
        );
      }
      body.light-intro .hud .hamburger span {
        background: #0a0a0a;
      }

      /* ---------- 3D canvas ---------- */
      .scene {
        position: fixed;
        inset: 0;
        display: block;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        background: #000;
        z-index: 0;
      }

      /* ---------- loader / failure ---------- */
      .loader {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background: #000;
        color: #fff;
        z-index: 10;
        font-family: var(--font-display);
        animation: loaderFade 0.4s ease-out;
      }
      .loader[hidden] {
        display: none;
      }
      .loader-mark {
        width: clamp(7rem, 18vw, 11rem);
        opacity: 0.9;
        animation: pulse 1.6s ease-in-out infinite;
      }
      .loader-mark svg {
        display: block;
        width: 100%;
        height: auto;
        fill: #ffffff;
      }
      .loader small {
        font-family: var(--font-body);
        letter-spacing: 0.2em;
        text-transform: uppercase;
        font-size: 0.8rem;
        opacity: 0.7;
      }
      @keyframes pulse {
        0%,
        100% {
          opacity: 0.4;
        }
        50% {
          opacity: 1;
        }
      }
      @keyframes loaderFade {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      /* ---------- scroll hint ---------- */
      .scroll-hint {
        position: fixed;
        bottom: 2.25rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.35rem;
        color: rgba(255, 255, 255, 0.85);
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 0.7rem;
        letter-spacing: 0.35em;
        text-transform: uppercase;
        z-index: 50;
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.4s ease;
      }
      .scroll-hint svg {
        animation: hintBob 1.5s ease-in-out infinite;
      }
      @keyframes hintBob {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(6px);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .scroll-hint svg {
          animation: none;
        }
      }

      /* ---------- journey progress ---------- */
      .journey-bar {
        position: fixed;
        left: 0;
        bottom: 0;
        height: 3px;
        width: 0%;
        background: #ffe000;
        z-index: 95;
        pointer-events: none;
      }
      body.light-intro .journey-bar {
        background: #0a0a0a;
      }

      /* ---------- HUD root ---------- */
      .hud {
        position: fixed;
        inset: 0;
        z-index: 100;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.6s ease;
        font-family: var(--font-display);
        color: #fff;
      }
      .hud.revealed {
        opacity: 1;
      }
      /* returning visitors get the menu from the very first screen */
      .hud.returning {
        opacity: 1;
      }
      /* returning visitors: FAB + footer visible immediately */
      .fab,
      .footer {
        transition:
          opacity 0.5s ease,
          visibility 0.5s ease;
      }
      .hud button {
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
        padding: 0;
      }

      /* ---------- top nav ---------- */
      .topnav {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        gap: 1.2rem;
        padding: 1.25rem 1.75rem;
        pointer-events: auto;
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.7) 0%,
          transparent 100%
        );
      }
      .wordmark {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.45s ease;
        cursor: pointer;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }
      .wm-mark {
        width: 4.6rem;
        height: auto;
        display: block;
      }
      .wm-mark .lg-ad path {
        fill: none;
        stroke: #ffffff;
        stroke-width: 1.6;
      }
      .wm-mark .lg-art path {
        fill: #ffffff;
      }
      .wm-script {
        width: 3.2rem;
        height: auto;
        margin-top: 0.22rem;
        margin-left: 34%;
        fill: #ffffff;
        opacity: 0.92;
      }
      .nav-links {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 1.2rem;
      }
      .nav-links li button {
        font-weight: 600;
        font-family: var(--font-display);
        font-size: 0.8rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.75);
        transition: color 0.2s;
      }
      .nav-links li button:hover {
        color: #fff;
      }
      .hud .cta-btn,
      .cta-btn {
        font-weight: 700;
        font-family: var(--font-display);
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #000;
        background: #fff;
        border: 1px solid #fff;
        padding: 0.5rem 1.1rem;
        cursor: pointer;
        transition:
          background 0.2s,
          color 0.2s;
        white-space: nowrap;
      }
      .hud .cta-btn,
      .cta-btn {
        background: #fff;
        color: #000;
      }
      .hud .cta-btn:hover,
      .cta-btn:hover {
        background: transparent;
        color: #fff;
      }
      .hamburger {
        display: none;
        flex-direction: column;
        gap: 5px;
        padding: 4px;
        cursor: pointer;
        pointer-events: auto;
      }
      .hamburger span {
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
      }

      body.docked .hud .wordmark {
        opacity: 1;
        pointer-events: auto;
      }

      /* ---------- mobile menu ---------- */
      .mobile-menu {
        position: absolute;
        top: 4rem;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.95);
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 1rem 2rem;
        pointer-events: auto;
        z-index: 200;
      }
      .mobile-menu[hidden] {
        display: none;
      }
      .mobile-menu button {
        font-weight: 600;
        font-family: var(--font-display);
        font-size: 1rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #fff;
        padding: 0.85rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        text-align: left;
        cursor: pointer;
      }
      .mobile-menu .cta-btn {
        margin-top: 1rem;
        text-align: center;
        border-bottom: none;
        color: #000;
      }

      /* ---------- FAB ---------- */
      .fab {
        font-weight: 700;
        position: absolute;
        bottom: 5.5rem;
        right: 1.75rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: #fff;
        color: #000;
        padding: 0.65rem 1.1rem;
        font-family: var(--font-display);
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        cursor: pointer;
        pointer-events: auto;
        transition:
          background 0.2s,
          color 0.2s;
        border: 1px solid #fff;
      }
      .fab:hover {
        background: transparent;
        color: #fff;
      }

      /* ---------- footer ---------- */
      .footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        pointer-events: auto;
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.75) 0%,
          transparent 100%
        );
        padding: 1.25rem 2rem 1rem;
      }
      .footer-inner {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.75rem 1.5rem;
      }
      .social-icons {
        display: flex;
        gap: 1rem;
      }
      .social-icons a {
        color: rgba(255, 255, 255, 0.6);
        transition: color 0.2s;
        display: flex;
        align-items: center;
      }
      .social-icons a:hover {
        color: #fff;
      }
      .footer-contact {
        font-weight: 400;
        font-family: var(--font-display);
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        color: rgba(255, 255, 255, 0.6);
      }
      .footer-contact a {
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        transition: color 0.2s;
      }
      .footer-contact a:hover {
        color: #fff;
      }
      .footer-legal {
        font-weight: 400;
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 1rem;
        font-family: var(--font-display);
        font-size: 0.65rem;
        letter-spacing: 0.08em;
        color: var(--brand-muted);
      }
      .footer-legal span {
        white-space: nowrap;
      }
      .link-btn {
        color: var(--brand-muted);
        font-family: inherit;
        font-size: inherit;
        letter-spacing: inherit;
        text-decoration: underline;
        text-underline-offset: 3px;
        cursor: pointer;
        transition: color 0.2s;
      }
      .link-btn:hover {
        color: #fff;
      }

      /* ---------- modals / panels ---------- */
      .modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.65);
        z-index: 500;
        cursor: pointer;
      }
      .modal-backdrop[hidden] {
        display: none;
      }
      .close-btn {
        position: absolute;
        top: 1.1rem;
        right: 1.25rem;
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        transition: color 0.2s;
        line-height: 1;
        background: none;
        border: none;
        padding: 0;
        font-family: inherit;
      }
      .close-btn:hover {
        color: #fff;
      }

      .contact-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(420px, 100vw);
        background: #0a0a0a;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 600;
        overflow-y: auto;
        padding: 2.5rem 2rem 2rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        color: #fff;
        font-family: var(--font-display);
      }
      .contact-panel[hidden] {
        display: none;
      }
      .panel-title {
        font-weight: 700;
        font-family: var(--font-display);
        font-size: 1.5rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #fff;
        margin: 0;
        line-height: 1.2;
      }
      .panel-sub {
        font-family: var(--font-body);
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.45);
        margin: 0;
        letter-spacing: 0.05em;
      }
      .direct-links {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      .direct-link {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        color: rgba(255, 255, 255, 0.75);
        text-decoration: none;
        font-family: var(--font-body);
        font-size: 0.85rem;
        letter-spacing: 0.06em;
        padding: 0.4rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        transition: color 0.2s;
      }
      .direct-link:hover {
        color: #fff;
      }
      .divider {
        border: none;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        margin: 0.5rem 0;
      }
      .contact-panel form {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
      }
      .honeypot {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
      }
      .field {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
      }
      .field label {
        font-family: var(--font-body);
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
      }
      .req {
        color: rgba(255, 100, 100, 0.9);
      }
      .optional {
        color: rgba(255, 255, 255, 0.3);
        font-size: 0.65rem;
        text-transform: none;
        letter-spacing: 0;
      }
      .field input,
      .field textarea {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #fff;
        font-family: var(--font-body);
        font-size: 0.875rem;
        padding: 0.6rem 0.75rem;
        outline: none;
        resize: vertical;
        transition: border-color 0.2s;
      }
      .field input:focus,
      .field textarea:focus {
        border-color: rgba(255, 255, 255, 0.5);
      }
      .field input::placeholder,
      .field textarea::placeholder {
        color: rgba(255, 255, 255, 0.2);
      }
      .form-error {
        font-family: var(--font-body);
        font-size: 0.8rem;
        color: rgba(255, 100, 100, 0.9);
        margin: 0;
      }
      .form-success {
        font-family: var(--font-body);
        font-size: 0.85rem;
        color: rgba(100, 255, 180, 0.9);
        margin: 0;
      }
      .submit-btn {
        font-weight: 700;
        font-family: var(--font-display);
        font-size: 0.8rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #000;
        background: #fff;
        border: 1px solid #fff;
        padding: 0.75rem 1.5rem;
        cursor: pointer;
        transition:
          background 0.2s,
          color 0.2s;
        align-self: flex-start;
      }
      .submit-btn:hover:not(:disabled) {
        background: transparent;
        color: #fff;
      }
      .submit-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      .legal-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(640px, 90vw);
        max-height: 80vh;
        background: #0a0a0a;
        border: 1px solid rgba(255, 255, 255, 0.15);
        z-index: 600;
        overflow-y: auto;
        padding: 2.5rem 2rem 2rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        color: #fff;
      }
      .legal-modal[hidden] {
        display: none;
      }
      .legal-modal h2 {
        font-weight: 700;
        font-family: var(--font-display);
        font-size: 1.25rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #fff;
        margin: 0;
      }
      .legal-copy {
        font-family: var(--font-body);
        font-size: 0.82rem;
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.6);
        white-space: pre-wrap;
        margin: 0;
        overflow-wrap: break-word;
      }

      /* ---------- crawlable SEO layer ---------- */
      .seo-layer {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      @media (max-width: 768px) {
        .nav-links,
        .topnav .cta-btn {
          display: none;
        }
        .hamburger {
          display: flex;
        }
        .fab span {
          display: none;
        }
        .fab {
          padding: 0.75rem;
        }
        .footer-inner {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.5rem;
        }
        .footer-legal {
          margin-left: 0;
          flex-wrap: wrap;
        }
      }
    

      /* ---------- brand tokens usage / chapter pill ---------- */
      .chapter-pill {
        position: absolute;
        top: 5.25rem;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.65rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--brand-muted);
        background: rgba(0, 0, 0, 0.45);
        border: 1px solid rgba(255, 255, 255, 0.12);
        padding: 0.35rem 0.75rem;
        pointer-events: none;
        z-index: 110;
        white-space: nowrap;
      }
      body.light-intro .chapter-pill {
        color: #0a0a0a;
        background: rgba(255, 255, 255, 0.72);
        border-color: rgba(0, 0, 0, 0.08);
      }
      /* once the story resolves into the site, the nav's active state is the
         wayfinding — the pill would collide with each stage's 3D eyebrow */
      .hud.revealed .chapter-pill {
        display: none;
      }
      .nav-links li button.active,
      .mobile-menu button.active {
        color: var(--brand-accent);
      }

      /* ---------- skip link discoverable ---------- */
      .skip-link {
        top: auto;
        bottom: 1.25rem;
        right: 1.25rem;
        left: auto;
        opacity: 0;
        pointer-events: none;
        z-index: 120;
      }
      .skip-link.skip-link--visible,
      .skip-link:focus-visible {
        opacity: 1;
        pointer-events: auto;
        top: auto;
      }

      /* ---------- loader progress ---------- */
      .loader-status {
        font-family: var(--font-body);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-size: 0.72rem;
        opacity: 0.7;
        margin-top: 1rem;
      }
      .loader-bar {
        width: min(14rem, 50vw);
        height: 3px;
        background: rgba(255, 255, 255, 0.15);
        margin-top: 0.65rem;
        overflow: hidden;
      }
      .loader-bar-fill {
        height: 100%;
        width: 0%;
        background: var(--brand-accent);
        transition: width 0.35s ease;
      }

      /* ---------- failure screen ---------- */
      .failure-screen {
        position: fixed;
        inset: 0;
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--brand-black);
        color: var(--brand-white);
        padding: 2rem;
      }
      .failure-screen[hidden] { display: none; }
      .failure-inner {
        max-width: 28rem;
        text-align: center;
        font-family: var(--font-display);
      }
      .failure-inner h2 {
        margin: 0 0 0.75rem;
        font-size: 1.4rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .failure-inner p { color: var(--brand-muted); font-family: var(--font-body); line-height: 1.6; }
      .failure-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.25rem; }
      .failure-actions button, .failure-actions a {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 0.72rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 0.65rem 1.1rem;
        border: 1px solid var(--brand-white);
        background: var(--brand-white);
        color: var(--brand-black);
        text-decoration: none;
        cursor: pointer;
      }
      .failure-actions .btn-ghost { background: transparent; color: var(--brand-white); }

      /* ---------- standard 2D view ---------- */
      body.standard-view .scene,
      body.standard-view .scroll-hint,
      body.standard-view .journey-bar { visibility: hidden; }
      body.standard-view .hud { opacity: 1; pointer-events: auto; }
      body.standard-view .wordmark { opacity: 1; pointer-events: auto; }
      #standardView {
        display: none;
        position: relative;
        z-index: 20;
        background: var(--brand-black);
        color: var(--brand-white);
        min-height: 100vh;
        padding: 6rem 1.5rem 4rem;
        font-family: var(--font-body);
      }
      body.standard-view #standardView { display: block; }
      .std-inner { max-width: 56rem; margin: 0 auto; }
      .std-hero h1 {
        font-family: var(--font-display);
        font-size: clamp(2rem, 5vw, 3rem);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin: 0 0 0.5rem;
      }
      .std-hero p { color: var(--brand-muted); font-size: 1.05rem; line-height: 1.65; }
      .std-section { margin-top: 3rem; }
      .std-section h2 {
        font-family: var(--font-display);
        font-size: 1.1rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--brand-accent);
        margin: 0 0 1rem;
      }
      .std-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
      .std-card {
        border: 1px solid rgba(255,255,255,0.12);
        padding: 1rem;
        background: rgba(255,255,255,0.03);
      }
      .std-card h3 { font-family: var(--font-display); margin: 0 0 0.5rem; font-size: 0.95rem; letter-spacing: 0.06em; }
      .std-card p { margin: 0; color: var(--brand-muted); font-size: 0.88rem; line-height: 1.55; }
      .std-quote { border-left: 3px solid var(--brand-accent); padding-left: 1rem; margin-bottom: 1.25rem; }
      .std-quote blockquote { margin: 0; font-style: italic; color: rgba(255,255,255,0.85); }
      .std-quote cite { display: block; margin-top: 0.5rem; font-size: 0.8rem; color: var(--brand-muted); font-style: normal; }
      .std-cta-row { margin-top: 2.5rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
      .std-banner {
        background: rgba(255,224,0,0.12);
        border: 1px solid rgba(255,224,0,0.35);
        padding: 0.75rem 1rem;
        margin-bottom: 1.5rem;
        font-size: 0.85rem;
      }

      /* ---------- hint chips ---------- */
      .hint-chip {
        position: fixed;
        bottom: 7rem;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.72);
        border: 1px solid rgba(255,255,255,0.15);
        color: var(--brand-white);
        font-family: var(--font-display);
        font-size: 0.68rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        padding: 0.5rem 0.9rem;
        z-index: 105;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.4s ease;
      }
      .hint-chip.visible { opacity: 1; }

      /* ---------- contact panel enhancements ---------- */
      .contact-panel {
        transform: translateX(100%);
        transition: transform 0.35s ease;
      }
      .contact-panel.open { transform: translateX(0); }
      .panel-trust {
        font-family: var(--font-body);
        font-size: 0.78rem;
        color: var(--brand-accent);
        margin: 0;
      }
      .panel-privacy-note {
        font-family: var(--font-body);
        font-size: 0.72rem;
        color: var(--brand-muted);
        margin: 0;
      }
      .panel-photo {
        width: 100%;
        height: 8rem;
        object-fit: cover;
        border: 1px solid rgba(255,255,255,0.1);
        background: rgba(255,255,255,0.04);
        display: block;
      }
      .legal-prose {
        font-family: var(--font-body);
        font-size: 0.82rem;
        line-height: 1.7;
        color: var(--brand-muted);
        white-space: pre-wrap;
        margin: 0;
      }

      /* ---------- mobile menu backdrop ---------- */
      #menuBackdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        z-index: 150;
      }
      #menuBackdrop[hidden] { display: none; }
      body.menu-open { overflow: hidden; }

      /* ---------- lite toggle + toast ---------- */
      .lite-toggle {
        font-family: var(--font-display);
        font-size: 0.62rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--brand-muted);
        background: none;
        border: 1px solid rgba(255,255,255,0.2);
        padding: 0.3rem 0.55rem;
        cursor: pointer;
      }
      .lite-toggle.active { color: var(--brand-accent); border-color: var(--brand-accent); }
      .toast {
        position: fixed;
        bottom: 1.25rem;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.9);
        border: 1px solid rgba(255,255,255,0.15);
        color: var(--brand-white);
        font-family: var(--font-body);
        font-size: 0.8rem;
        padding: 0.6rem 1rem;
        z-index: 700;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
      }
      .toast.show { opacity: 1; }

      /* ---------- FAB tooltip ---------- */
      .fab { position: absolute; }
      .fab-wrap { position: absolute; bottom: 5.5rem; right: 1.75rem; z-index: 110; }
      .fab-tooltip {
        position: absolute;
        right: calc(100% + 0.5rem);
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0,0,0,0.85);
        color: var(--brand-white);
        font-family: var(--font-display);
        font-size: 0.62rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 0.4rem 0.6rem;
        white-space: nowrap;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
      }
      .fab-tooltip.show { opacity: 1; }
      .sr-only {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
      }

      /* ---------- light-intro CTA contrast ---------- */
      body.light-intro .cta-btn,
      body.light-intro .fab {
        background: var(--brand-black);
        color: var(--brand-white);
        border-color: var(--brand-black);
      }
      body.light-intro .cta-btn:hover,
      body.light-intro .fab:hover {
        background: transparent;
        color: var(--brand-black);
      }

      /* ---------- touch + focus ---------- */
      .scene { touch-action: none; }
      .hamburger:focus-visible,
      .mobile-menu button:focus-visible,
      .fab:focus-visible,
      .lite-toggle:focus-visible,
      .link-btn:focus-visible {
        outline: 2px solid var(--brand-accent);
        outline-offset: 3px;
      }
      .mobile-menu .cta-btn {
        background: var(--brand-white);
        color: var(--brand-black);
        border: 1px solid var(--brand-white);
        text-align: center;
      }
      .mobile-menu .cta-btn:hover { background: transparent; color: var(--brand-white); }

      /* ---------- client logo strip ---------- */
      .client-logo-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem 1.25rem;
        align-items: center;
        opacity: 0.55;
      }
      .client-logo-strip img { height: 1.4rem; width: auto; filter: grayscale(1); }

      .footer-contact .address { display: block; margin-top: 0.15rem; }

      @media (max-width: 768px) {
        .chapter-pill { display: none; }
        .fab-wrap { bottom: 5.5rem; right: 1.25rem; }
        .fab-tooltip { display: none; }
      }

      /* ============================================================ HUD 5.0
         Ultra-minimal corner-marks chrome. The viewport is framed by four thin
         registration brackets (viewfinder language). Only the essentials sit in
         the corners: the ADART mark (top-left), a quiet MENU key (top-right), a
         live section index (bottom-left), the skip/standard escape (bottom-right).
         Everything else lives in a full-bleed typographic menu takeover.
         Monochrome + signal yellow, hairline language, clamp() responsive. */

      :root {
        --pad-x: clamp(1.1rem, 3.5vw, 2.6rem);
        --pad-y: clamp(0.95rem, 2.8vh, 1.7rem);
        --cm-inset: clamp(0.65rem, 1.7vw, 1.15rem);
        --ink: #ffffff;
        --ink-dim: rgba(255, 255, 255, 0.55);
        --hairline: rgba(255, 255, 255, 0.22);
        --accent: #ffe000;
        --ease: cubic-bezier(0.22, 1, 0.36, 1);
      }
      .dashline {
        height: 1px;
        background: repeating-linear-gradient(
          90deg,
          var(--hairline) 0 3px,
          transparent 3px 7px
        );
      }

      /* journey progress: hairline at the very top */
      .journey-bar {
        bottom: auto;
        top: 0;
        height: 2px;
        background: var(--accent);
        box-shadow: 0 0 10px rgba(255, 224, 0, 0.5);
        z-index: 130;
      }
      body.light-intro .journey-bar { background: #0a0a0a; }

      /* ---------- corner registration marks (viewfinder frame) ---------- */
      .corner-marks {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 118;
        opacity: 0;
        transition: opacity 0.9s var(--ease);
      }
      .hud.revealed .corner-marks { opacity: 1; }
      .corner-marks i {
        position: absolute;
        width: clamp(16px, 2.3vw, 26px);
        height: clamp(16px, 2.3vw, 26px);
        border: 0 solid var(--hairline);
      }
      .corner-marks .cm-tl { top: var(--cm-inset); left: var(--cm-inset); border-top-width: 1px; border-left-width: 1px; }
      .corner-marks .cm-tr { top: var(--cm-inset); right: var(--cm-inset); border-top-width: 1px; border-right-width: 1px; }
      .corner-marks .cm-bl { bottom: var(--cm-inset); left: var(--cm-inset); border-bottom-width: 1px; border-left-width: 1px; }
      .corner-marks .cm-br { bottom: var(--cm-inset); right: var(--cm-inset); border-bottom-width: 1px; border-right-width: 1px; }
      /* a single signal-yellow accent tick on the top-left corner */
      .corner-marks .cm-tl::after {
        content: "";
        position: absolute;
        top: -1px; left: -1px;
        width: 5px; height: 5px;
        background: var(--accent);
      }
      body.light-intro .corner-marks i { border-color: rgba(10, 10, 10, 0.28); }

      /* ---------- top nav: just the mark + a MENU key ---------- */
      .topnav {
        padding: var(--pad-y) var(--pad-x);
        background: none;
        border-bottom: none;
        gap: 1rem;
        align-items: center;
      }
      body.docked .topnav,
      body.light-intro .hud .topnav {
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-bottom-color: transparent;
      }
      .wordmark { padding-top: 0; display: inline-flex; align-items: center; }
      .wm-mark { width: clamp(3.2rem, 4.4vw, 4.1rem); }
      /* HUD logo is the ADART mark only — the script wordmark belongs to the
         3D reveal + the 3D finale bookend, never the chrome */
      .wm-script { display: none !important; }
      .hud .wm-script { display: none !important; }

      /* desktop nav row retired — navigation lives in the MENU takeover only */
      .nav-links { display: none !important; }
      /* top-bar CTA pill retired — the CTA lives in the menu + the 3D finale */
      .topnav > .cta-btn { display: none !important; }

      /* ---------- quiet MENU key (always present, top-right) ---------- */
      .hamburger {
        position: relative;
        display: inline-flex;
        margin-left: auto;
        width: auto;
        height: auto;
        flex-direction: row;
        align-items: center;
        gap: 0.55rem;
        border: none;
        border-radius: 0;
        padding: 0.15rem 0;
        background: none;
      }
      .hamburger::after {
        content: "MENU";
        font-family: var(--font-display);
        font-size: 0.64rem;
        font-weight: 700;
        letter-spacing: 0.24em;
        color: #fff;
        order: 2;
      }
      body.menu-open .hamburger::after { content: "CLOSE"; }
      .hamburger span.bars {
        position: relative;
        width: 17px;
        height: 9px;
        display: block;
        background: none;
        order: 1;
        flex: none;
      }
      .hamburger span.bars i {
        position: absolute;
        left: 0;
        width: 17px;
        height: 1.5px;
        background: #fff;
        transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
      }
      .hamburger span.bars i:nth-child(1) { top: 0; }
      .hamburger span.bars i:nth-child(2) { top: 3.7px; }
      .hamburger span.bars i:nth-child(3) { top: 7.4px; }
      body.menu-open .hamburger span.bars i:nth-child(1) { transform: translateY(3.7px) rotate(45deg); }
      body.menu-open .hamburger span.bars i:nth-child(2) { opacity: 0; }
      body.menu-open .hamburger span.bars i:nth-child(3) { transform: translateY(-3.7px) rotate(-45deg); }
      .hamburger:hover span.bars i { background: var(--accent); }
      .hamburger:hover::after { color: var(--accent); }
      body.light-intro .hamburger::after { color: #0a0a0a; }
      body.light-intro .hamburger span.bars i { background: #0a0a0a; }

      /* ---------- live section index (bottom-left) ---------- */
      .chapter-pill {
        display: none;
        position: fixed;
        top: auto;
        right: auto;
        left: var(--pad-x);
        bottom: var(--pad-y);
        transform: none;
        margin: 0;
        padding: 0;
        background: none;
        border: none;
        border-radius: 0;
        font-family: var(--font-display);
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        color: rgba(255, 255, 255, 0.6);
        z-index: 122;
        white-space: nowrap;
      }
      .chapter-pill .idx-accent { color: var(--accent); }
      .hud.revealed .chapter-pill { display: block; }
      body.light-intro .chapter-pill { color: rgba(10, 10, 10, 0.6); }

      /* ---------- full-bleed MENU takeover ---------- */
      .mobile-menu {
        position: fixed;
        inset: 0;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100%;
        height: 100%;
        background: #08080a;
        display: grid;
        grid-template-rows: 1fr auto;
        gap: 0;
        padding: clamp(5rem, 12vh, 8rem) var(--pad-x) var(--pad-y);
        border: none;
        overflow: hidden;
        z-index: 205;
      }
      .mobile-menu[hidden] { display: none; }
      .mobile-menu::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(120% 80% at 100% 0%, rgba(255, 224, 0, 0.08), transparent 60%),
          repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 46px);
        pointer-events: none;
      }
      /* menu corner brackets echo the chrome */
      .mobile-menu::after {
        content: "";
        position: absolute;
        top: var(--cm-inset); right: var(--cm-inset);
        width: 26px; height: 26px;
        border-top: 1px solid var(--hairline);
        border-right: 1px solid var(--hairline);
        pointer-events: none;
      }
      .mobile-menu .menu-links {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.1rem;
      }
      .mobile-menu button {
        position: relative;
        display: flex;
        align-items: baseline;
        gap: 1rem;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: clamp(2.4rem, 9vw, 5.5rem);
        line-height: 1.04;
        letter-spacing: 0.01em;
        text-transform: uppercase;
        color: #fff;
        padding: 0.2rem 0;
        border: none;
        text-align: left;
        transition: color 0.25s var(--ease), transform 0.35s var(--ease), opacity 0.25s var(--ease);
        opacity: 0;
        transform: translateY(28px);
      }
      body.menu-open .mobile-menu button {
        opacity: 1;
        transform: translateY(0);
      }
      body.menu-open .mobile-menu button:nth-child(1) { transition-delay: 0.06s; }
      body.menu-open .mobile-menu button:nth-child(2) { transition-delay: 0.12s; }
      body.menu-open .mobile-menu button:nth-child(3) { transition-delay: 0.18s; }
      body.menu-open .mobile-menu button:nth-child(4) { transition-delay: 0.24s; }
      body.menu-open .mobile-menu button:nth-child(5) { transition-delay: 0.30s; }
      .mobile-menu .menu-links button .nav-idx {
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        color: var(--accent);
        transform: translateY(-0.9em);
        opacity: 0.9;
      }
      .mobile-menu .menu-links button:hover {
        color: var(--accent);
        transform: translateX(0.5rem);
      }
      .mobile-menu .cta-btn {
        align-self: flex-start;
        margin-top: 1.5rem;
        position: relative;
        border-radius: 999px;
        font-family: var(--font-display);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        padding: 0.85rem 1.5rem 0.85rem 2.3rem;
        color: #000;
        background: var(--accent);
        border: 1px solid var(--accent);
        transition: transform 0.2s var(--ease);
      }
      .mobile-menu .cta-btn::before {
        content: "";
        position: absolute;
        left: 0.95rem; top: 50%;
        width: 0.4rem; height: 0.4rem;
        margin-top: -0.2rem;
        border-radius: 999px;
        background: #000;
      }
      .mobile-menu .cta-btn:hover { transform: translateY(-2px); }
      /* menu foot: live contact + socials (injected) */
      .menu-foot {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1rem 2rem;
        position: relative;
        padding-top: 1.1rem;
      }
      .menu-foot::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 1px;
        background: repeating-linear-gradient(90deg, var(--hairline) 0 3px, transparent 3px 7px);
      }
      .menu-foot .mf-col { display: flex; flex-direction: column; gap: 0.35rem; }
      .menu-foot .mf-label {
        font-family: var(--font-display);
        font-size: 0.58rem;
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--ink-dim);
      }
      .menu-foot a {
        color: #fff;
        text-decoration: none;
        font-family: var(--font-body);
        font-size: clamp(0.85rem, 2.5vw, 1.05rem);
        letter-spacing: 0.02em;
        transition: color 0.2s var(--ease);
      }
      .menu-foot a:hover { color: var(--accent); }
      .menu-foot .mf-socials { display: flex; gap: 1.1rem; }
      .menu-foot .mf-socials a {
        font-family: var(--font-display);
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      /* right-edge chapter rail + floating CTA: removed per brief */
      .chapter-rail,
      .fab-wrap,
      .fab { display: none !important; }

      /* ---------- scroll hint: bottom-centre micro row (intro only) ---------- */
      .scroll-hint {
        left: 50%;
        bottom: var(--pad-y);
        transform: translateX(-50%);
        flex-direction: row;
        align-items: center;
        gap: 0.55rem;
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.3em;
        color: rgba(255, 255, 255, 0.78);
      }
      .scroll-hint svg { width: 13px; height: 13px; }
      body.light-intro .scroll-hint { color: #0a0a0a; }

      /* ---------- footer: finale-only, hairline ---------- */
      .hud .footer {
        transform: translateY(108%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.7s var(--ease), opacity 0.5s ease;
        background: none;
        padding: 1rem var(--pad-x) calc(var(--pad-y) * 0.85);
      }
      .hud .footer::before {
        content: "";
        display: block;
        height: 1px;
        margin-bottom: 0.85rem;
        background: repeating-linear-gradient(90deg, var(--hairline) 0 3px, transparent 3px 7px);
      }
      body.finale .hud .footer { transform: translateY(0); opacity: 1; pointer-events: auto; }
      .footer-inner { gap: 0.6rem 1.4rem; }
      .social-icons { gap: 0.85rem; }
      .social-icons a { color: rgba(255, 255, 255, 0.5); }
      .social-icons svg { width: 15px; height: 15px; }
      .footer-contact { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; }
      .footer-contact .address { display: inline; margin: 0 0 0 0.6rem; opacity: 0.7; }
      .footer-legal { font-size: 0.58rem; letter-spacing: 0.1em; gap: 0.9rem; }
      .client-logo-strip { display: none; }
      .lite-toggle {
        border: 1px dashed rgba(255, 255, 255, 0.3);
        border-radius: 999px;
        padding: 0.3rem 0.7rem;
        font-size: 0.55rem;
        letter-spacing: 0.14em;
      }
      .lite-toggle.active { color: var(--accent); border-color: var(--accent); }
      .link-btn {
        text-decoration: none;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.35);
        padding-bottom: 1px;
      }
      .link-btn:hover { color: #fff; border-bottom-color: #fff; }

      /* ---------- hint chip ---------- */
      .hint-chip {
        bottom: calc(var(--pad-y) + 3rem);
        border: 1px dashed rgba(255, 255, 255, 0.35);
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.6);
        font-size: 0.6rem;
        letter-spacing: 0.18em;
        padding: 0.5rem 1rem 0.5rem 1.7rem;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
      }
      .hint-chip::before {
        content: "";
        position: absolute;
        left: 0.8rem; top: 50%;
        width: 0.34rem; height: 0.34rem;
        margin-top: -0.17rem;
        border-radius: 999px;
        background: var(--accent);
      }

      .skip-link {
        bottom: var(--pad-y);
        right: var(--pad-x);
        border-radius: 999px;
        padding: 0.6rem 1.1rem;
      }

      /* ---------- loader ---------- */
      .loader-status { font-size: 0.6rem; letter-spacing: 0.3em; opacity: 0.6; }
      .loader-bar { height: 1px; background: rgba(255, 255, 255, 0.12); }
      .loader-mark { width: clamp(5.5rem, 13vw, 8rem); }

      /* ---------- panels ---------- */
      .divider {
        border: none;
        height: 1px;
        background: repeating-linear-gradient(90deg, var(--hairline) 0 3px, transparent 3px 7px);
      }
      .submit-btn { border-radius: 999px; padding: 0.75rem 1.7rem; }
      .contact-panel { border-left: 1px dashed rgba(255, 255, 255, 0.18); }
      .legal-modal { border: 1px dashed rgba(255, 255, 255, 0.25); }
      .toast {
        border: 1px dashed rgba(255, 255, 255, 0.25);
        border-radius: 999px;
        padding: 0.55rem 1.2rem;
      }

      /* ---------- focus ---------- */
      .hud button:focus-visible,
      .hamburger:focus-visible,
      .mobile-menu button:focus-visible,
      .lite-toggle:focus-visible,
      .link-btn:focus-visible,
      .contact-panel input:focus-visible,
      .contact-panel textarea:focus-visible,
      .contact-panel button:focus-visible {
        outline: 1px dashed var(--accent);
        outline-offset: 3px;
      }

      /* ---------- responsive ---------- */
      @media (max-width: 768px) {
        .scroll-hint { font-size: 0.55rem; }
        .chapter-pill { font-size: 0.55rem; letter-spacing: 0.18em; }
        .footer-inner { flex-direction: column; align-items: flex-start; gap: 0.55rem; }
        .footer-legal { margin-left: 0; flex-wrap: wrap; gap: 0.6rem 0.9rem; }
      }
      @media (prefers-reduced-motion: reduce) {
        .mobile-menu button { transition: none; opacity: 1; transform: none; }
      }

      /* ============================================================ MOBILE PASS
         Touch hardening + notch safe-areas + iOS input-zoom prevention. */
      html { -webkit-text-size-adjust: 100%; }
      html, body {
        overscroll-behavior: none;            /* no pull-to-refresh fighting the scroll */
        -webkit-tap-highlight-color: transparent;
      }
      /* respect notches / rounded corners for the floating chrome */
      .topnav {
        padding-top: max(var(--pad-y), env(safe-area-inset-top));
        padding-left: max(var(--pad-x), env(safe-area-inset-left));
        padding-right: max(var(--pad-x), env(safe-area-inset-right));
      }
      .corner-marks .cm-tl, .corner-marks .cm-tr { top: max(var(--cm-inset), env(safe-area-inset-top)); }
      .corner-marks .cm-tl, .corner-marks .cm-bl { left: max(var(--cm-inset), env(safe-area-inset-left)); }
      .corner-marks .cm-tr, .corner-marks .cm-br { right: max(var(--cm-inset), env(safe-area-inset-right)); }
      .corner-marks .cm-bl, .corner-marks .cm-br { bottom: max(var(--cm-inset), env(safe-area-inset-bottom)); }
      .scroll-hint { bottom: max(var(--pad-y), env(safe-area-inset-bottom)); }
      .chapter-pill {
        left: max(var(--pad-x), env(safe-area-inset-left));
        bottom: max(var(--pad-y), env(safe-area-inset-bottom));
      }
      .skip-link {
        right: max(var(--pad-x), env(safe-area-inset-right));
        bottom: max(var(--pad-y), env(safe-area-inset-bottom));
      }
      .hud .footer { padding-bottom: max(calc(var(--pad-y) * 0.85), env(safe-area-inset-bottom)); }
      .mobile-menu { padding-bottom: max(var(--pad-y), env(safe-area-inset-bottom)); }
      /* momentum + contained scrolling inside panels */
      .contact-panel, .legal-modal, .mobile-menu {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }
      @media (max-width: 768px) {
        /* inputs must be >=16px or iOS auto-zooms the page on focus */
        .field input, .field textarea { font-size: 16px; }
        .contact-panel {
          width: 100vw;
          padding: 2rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
        }
        .panel-title { font-size: 1.3rem; }
        .mobile-menu button { font-size: clamp(2rem, 11vw, 3.4rem); }
        .menu-foot a { font-size: 0.95rem; }
        .hint-chip { font-size: 0.56rem; }
      }
      /* short landscape phones: keep the full-screen menu usable */
      @media (max-height: 460px) {
        .mobile-menu { padding-top: 3.6rem; grid-template-rows: 1fr auto; }
        .mobile-menu button { font-size: clamp(1.3rem, 7vw, 2rem); padding: 0.4rem 0; }
        .mobile-menu .cta-btn { margin-top: 0.8rem; }
      }
      @media (prefers-reduced-motion: reduce) {
        * { scroll-behavior: auto; }
      }