/* ==========================================================================
   LOOPING v2 — Photo-led design. Pure white body, cyan/magenta accents only.
   Modern interaction polish (big type, hovers, smooth motion).
   ========================================================================== */

:root {
    --black: #000000;
    --black-soft: #0a0a0a;
    --black-card: #0e0e0e;
    --black-elev: #161616;
    --white: #ffffff;
    --off-white: #f5f5f5;
    --gray-300: #a3a3a3;
    --gray-400: #8e8e8e;
    --gray-500: #737373;
    --gray-700: #404040;
    --gray-800: #1f1f1f;
    --gray-900: #141414;

    --cyan: #00FFFF;
    --magenta: #FF0086;

    --max-width: 1280px;
    --section-pad-y: clamp(80px, 12vh, 160px);
    --section-pad-x: clamp(24px, 5vw, 80px);

    --font: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ==========================================================================
       TYPOGRAPHY SCALE — single source of truth for all heading & text sizes.
       Locked tokens. Any new section MUST use these tokens, not hardcoded values.
       Older sections have also been brought in line.
       Exceptions: .hero-reveal-title (the 90px typewriter lines on the two
       cinematic feature sections) and .hero-reveal-greetings (decorative flying
       greeting words) are intentionally outside this system.
       ========================================================================== */

    /* H1 — page-level / section headings. 88px, weight 600.
       Used by: .section-title, .ilm-hero-title, .policy-title, .cta-hero-title,
       .pixel-headline, .edu-redefined-headline, .ilm-explainer-headline,
       .you-choose-headline */
    --h1: clamp(43px, 5.5vw, 88px);
    --h1-weight: 600;
    --h1-line: 1.05;
    --h1-tracking: -0.025em;

    /* H2 — scroll-moment / slide panel headings. 64px, weight 600.
       Used by: .scroll-moment-text h3, .h-scroll-panel-text h3 */
    --h2: clamp(30px, 4.5vw, 60px);
    --h2-weight: 600;
    --h2-line: 1.1;
    --h2-tracking: -0.025em;

    /* H3 — cyan subheadings (the SUBHEADING tier, smaller than subsection
       headings). The H3-class panel headings on edu-redefined/you-choose/
       ilm-explainer pages are conceptually subsection headings and use --h2,
       not --h3, despite their CSS class name including "heading".
       Used by: .acm-split-text h3, .two-col-text h3, .cta-strip h3,
       .h-scroll-panel-text h4 (cyan tagline under slide h3 — "Same scenario.
       Every learner. Every barrier removed." etc) */
    --h3: clamp(22px, 1.8vw, 32px);
    --h3-weight: 600;
    --h3-line: 1.2;
    --h3-tracking: -0.01em;

    /* H4 — small headers, mini-feature labels. Used by: feature h5s, env-card h3 */
    --h4: clamp(18px, 1.6vw, 22px);
    --h4-weight: 600;
    --h4-line: 1.3;
    --h4-tracking: -0.01em;

    /* Lede — large body intro paragraphs. Used by: .section-lede */
    --lede: clamp(18px, 1.5vw, 22px);
    --lede-line: 1.65;

    /* Body — standard paragraph. 22px everywhere. */
    --body: 22px;
    --body-large: 22px;
    --body-line: 2;

    /* Small — footnotes, captions, meta */
    --small: 14px;
    --tiny: 12px;

    /* Eyebrow — the cyan pill above titles */
    --eyebrow: 13px;
    --eyebrow-tracking: 0.22em;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--black);
}

body {
    font-family: var(--font);
    font-weight: 400;
    color: var(--white);
    background: var(--black);
    line-height: 2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    font-size: 16px;
}

a {
    color: inherit;
    text-decoration: none;
}

::selection {
    background: var(--cyan);
    color: var(--black);
}

img, video {
    display: block;
    max-width: 100%;
}

/* Accent words only — no gradient text */
.cyan { color: var(--cyan); }
.magenta { color: var(--magenta); }
.muted { color: var(--gray-500); }
.muted-small { font-size: 0.7em; }
.dim { color: var(--gray-300); }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    background: rgba(0, 0, 0, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.2s ease;
}

.nav-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 14px var(--section-pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
}

.nav-logo-img {
    height: 46px;
    width: auto;
    display: block;
    max-width: 100%;
}

/* Hamburger button — hidden on desktop, shown on mobile */
.nav-hamburger {
    display: none;
    background: transparent;
    border: 0;
    padding: 8px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.nav-hamburger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--white);
    border-radius: 1px;
    transition: background 0.2s ease;
}

.nav-hamburger:hover span {
    background: var(--cyan);
}

/* Mobile full-screen menu overlay */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: var(--black);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

.nav-overlay.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0s;
}

.nav-overlay-close {
    position: absolute;
    top: 14px;
    right: 18px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-overlay-close span {
    position: absolute;
    width: 24px;
    height: 1.5px;
    background: var(--white);
    border-radius: 1px;
    transition: background 0.2s ease;
}

.nav-overlay-close span:first-child { transform: rotate(45deg); }
.nav-overlay-close span:last-child { transform: rotate(-45deg); }

.nav-overlay-close:hover span {
    background: var(--cyan);
}

.nav-overlay-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.nav-overlay-links a {
    font-size: 28px;
    font-weight: 500;
    color: var(--white);
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
}

.nav-overlay-links a:hover {
    color: var(--cyan);
}

.nav-overlay-cta {
    margin-top: 16px;
    padding: 14px 32px;
    background: var(--white);
    color: var(--black) !important;
    border-radius: 999px;
    font-size: 18px !important;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.nav-overlay-cta:hover {
    background: var(--cyan);
}

@media (max-width: 900px) {
    .nav-inner { padding: 6px var(--section-pad-x); }
    .nav-logo-img { height: 24px; }
    /* Hide desktop nav links + CTA on mobile, show hamburger instead.
       Use !important to override any specificity issues with .nav-cta etc. */
    .nav-links,
    .nav-links a,
    .nav-cta { display: none !important; }
    .nav-hamburger { display: flex; }
    /* Shrink hero action buttons on mobile */
    .hero-actions .btn {
        padding: 10px 18px;
        font-size: 12px;
    }
    /* Hero on mobile: content centred vertically (so it aligns with the tunnel
       vanishing point in the video). Tall enough that the marquee below sits
       just out of view on first paint.
       !important needed because the base .hero rule appears LATER in source order. */
    .hero {
        min-height: 92vh !important;
        padding-top: 60px !important;
        padding-bottom: 40px !important;
        justify-content: center !important;
    }
    .hero-inner {
        transform: none !important;
        padding-top: 0 !important;
    }
    .hero-logo-mark {
        width: 70%;
        max-width: 480px;
        margin: -12px auto 140px;
    }
    /* Pull the tagline + "Converged" stack up three hairs total */
    .hero-tagline {
        margin-top: -12px;
    }
    /* Push the Start Looping / How to Loop buttons down via padding to avoid margin collapse */
    .hero-actions {
        padding-top: 24px;
    }
}
@media (max-width: 600px) {
    .nav-logo-img { height: 22px; }
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 36px;
    font-size: 14px;
    font-weight: 500;
}

.nav-links a {
    color: var(--gray-300);
    transition: color 0.2s ease;
    position: relative;
}

.nav-links a:hover {
    color: var(--white);
}

.nav-cta {
    background: var(--white);
    color: var(--black) !important;
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 600;
    transition: all 0.25s ease;
    border: 1px solid var(--white);
}

.nav-cta:hover {
    background: var(--cyan);
    border-color: var(--cyan);
    color: var(--black) !important;
    transform: translateY(-1px);
}

@media (max-width: 900px) {
    .nav-links { gap: 16px; }
    .nav-links a:not(.nav-cta) { display: none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding-top: 50px;
    padding-bottom: 0;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.6;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.8) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 35%, transparent 65%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
    pointer-events: none;
}

.hero-inner {
    position: relative;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--section-pad-x);
    width: 100%;
    z-index: 2;
    text-align: center;
    /* Shift content up so logo aligns with tunnel vanishing point (~40-45% from top) */
    transform: translateY(-8vh);
}

@media (max-width: 900px) {
    .hero-inner {
        transform: none;
    }
}

/* PAGE HERO — used on non-homepage pages (FAQ, How to Loop, ILMs, Start Looping).
   Shorter than the main hero, no video, no centred-on-screen pull-up. Uses the
   token system for h1 sizing so it's consistent across all pages. */
.hero.hero-page {
    min-height: 50vh;
    padding-top: 120px;
    padding-bottom: 60px;
}

.hero-overlay.hero-overlay-page {
    background:
        radial-gradient(ellipse 70% 50% at 50% 50%, rgba(0,255,255,0.08), transparent 60%),
        radial-gradient(ellipse 70% 50% at 80% 80%, rgba(255,0,134,0.08), transparent 60%);
}

.hero.hero-page .hero-inner {
    transform: none;
}

/* Hero H1 wrapper — the whole "Immersive Learning. Performance Evidence.
   Converged." line is semantically ONE h1 for screen readers. The visual
   layout (tagline above, big "Converged" below) is preserved by making the
   two inner spans display: block and inheriting the existing tagline/word
   styling from their classes. The h1 element itself adds no visual styling —
   it's just a semantic wrapper. */
.hero-h1 {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin: 0;
    color: inherit;
}

.hero-h1 .hero-tagline,
.hero-h1 .hero-title-word {
    display: block;
}

.hero-tagline {
    font-size: clamp(15px, 2.2vw, 28px);
    font-weight: 600;
    color: var(--white);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    animation: fadeUp 0.8s 0.1s both ease-out;
    white-space: nowrap;
}

.hero-tagline .accent {
    font-weight: 600;
}

.hero-title-word {
    font-size: clamp(20px, 2.5vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    color: var(--white);
    animation: fadeUp 0.8s 0.25s both ease-out;
    letter-spacing: -0.015em;
}

.hero-logo-mark {
    margin: 0px auto 28px;
    max-width: 720px;
    width: 88%;
}

.hero-logo-mark img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 32px rgba(0, 255, 255, 0.15));
}

@keyframes glow {
    0%, 100% { filter: drop-shadow(0 0 32px rgba(0, 255, 255, 0.15)); }
    50% { filter: drop-shadow(0 0 48px rgba(255, 0, 134, 0.18)); }
}

.hero-sub {
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 500;
    color: var(--white);
    max-width: 720px;
    margin: 0 auto 40px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    animation: fadeUp 0.8s 0.5s both ease-out;
    opacity: 1;
}

.hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeUp 0.8s 0.65s both ease-out;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 28px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 999px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 0.25s ease;
    line-height: 1;
}

.btn-primary {
    background: var(--white);
    color: var(--black);
    border-color: var(--white);
}

.btn-primary:hover {
    background: var(--cyan);
    border-color: var(--cyan);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -10px rgba(0, 255, 255, 0.5);
    color: var(--black);
}

/* Full-width button — used for form submit buttons inside .form-card */
.btn.btn-block {
    width: 100%;
    justify-content: center;
}

.btn-ghost {
    background: transparent;
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-ghost:hover {
    border-color: var(--cyan);
    color: var(--cyan);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -10px rgba(0, 255, 255, 0.3);
}

/* Arrow that slides on hover (apply to any .btn) */
.btn .arrow,
.btn::after {
    transition: transform 0.25s ease;
    display: inline-block;
}

.btn:hover .arrow {
    transform: translateX(4px);
}

.btn-magenta {
    background: var(--magenta);
    color: var(--white);
    border-color: var(--magenta);
}

.btn-magenta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -10px rgba(255, 0, 134, 0.5);
    color: var(--white);
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section {
    position: relative;
    padding: clamp(80px, 12vh, 140px) 0;
}

.section-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--section-pad-x);
}

/* Subtle alternating section backgrounds so the page doesn't feel like one black sheet */
.section.tint {
    background:
        radial-gradient(ellipse 100% 50% at 50% 0%, rgba(0, 255, 255, 0.025), transparent 60%),
        radial-gradient(ellipse 100% 50% at 50% 100%, rgba(255, 0, 134, 0.02), transparent 60%),
        var(--black);
}

/* Subtle gradient line divider — use sparingly between key sections */
.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gray-800) 20%, var(--gray-800) 80%, transparent);
    margin: 0 var(--section-pad-x);
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
}

/* Spaced variant — generous breathing room above and below for major section transitions */
.divider-spaced {
    margin-top: clamp(80px, 12vh, 160px);
    margin-bottom: clamp(80px, 12vh, 160px);
}

.section-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 24px;
    padding: 8px 16px;
    border: 1px solid rgba(0, 255, 255, 0.25);
    border-radius: 999px;
    background: rgba(0, 255, 255, 0.04);
}

.section-title {
    font-size: var(--h1);
    font-weight: var(--h1-weight);
    line-height: var(--h1-line);
    letter-spacing: var(--h1-tracking);
    margin-bottom: 28px;
    color: var(--white);
}

.section-lede {
    font-size: var(--body-large);
    color: var(--white);
    max-width: 760px;
    line-height: var(--body-line);
    margin-bottom: 56px;
    font-weight: 400;
    opacity: 0.92;
}

/* Centred variants — used on standard (non-cinematic) section headings
   that need to be horizontally centred. Use these instead of inline styles. */
.section-eyebrow-centered {
    display: block;
    text-align: center;
}

.section-title-centered {
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 16px;
}

.section-lede-centered {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 48px;
}

/* Inline cyan link used inside body copy (e.g. "Don't see yours? Let's talk.") */
.inline-link {
    color: var(--cyan);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.inline-link:hover {
    opacity: 0.85;
}

/* ==========================================================================
   EDUCATION REDEFINED (text + photo split)
   ========================================================================== */
.split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: start;
    padding-top: 24px;
}

.split-photo {
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4/5;
    background: var(--black-card);
    box-shadow: 0 30px 80px -30px rgba(0, 255, 255, 0.15);
}

.split-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.split-text .section-eyebrow {
    margin-bottom: 24px;
}

.split-text .section-title {
    font-size: clamp(32px, 3.4vw, 48px);
    line-height: 1.15;
    margin-bottom: 32px;
}

.split-text p {
    font-size: 18px;
    line-height: 2;
    color: var(--white);
    margin-bottom: 20px;
    font-weight: 400;
    opacity: 0.92;
}

.split-text p strong {
    color: var(--cyan);
    font-weight: 600;
    opacity: 1;
}

@media (max-width: 900px) {
    .split {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .split-photo {
        aspect-ratio: 4/5;
        max-width: 520px;
        margin: 0 auto;
    }
}

/* ==========================================================================
   3-COL VIDEO FEATURES — also serves as the header section above the
   .scroll-moment sticky video stack on mobile. The .section.tint above them
   already has its own padding; trim the gap below it on mobile so the first
   sticky video sits closer to the header rather than 100px+ of empty space.
   ========================================================================== */
.video-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.video-card {
    background: var(--black-card);
    border: 1px solid var(--gray-800);
    border-radius: 20px;
    padding: 36px 32px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.video-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.video-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 255, 255, 0.3);
    background: var(--black-elev);
}

.video-card:hover::before {
    opacity: 1;
}

.video-card h3 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    margin-bottom: 20px;
    text-align: center;
}

.video-card .video-wrap {
    aspect-ratio: 1;
    background: var(--black);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
}

.video-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-card p {
    font-size: 15px;
    line-height: 2;
    color: var(--white);
    font-weight: 400;
    opacity: 0.88;
}

@media (max-width: 900px) {
    .video-features { grid-template-columns: 1fr; }
    /* Tighten the gap between "Powered by AI..." header and the first sticky video below it */
    .section.tint {
        padding-bottom: clamp(24px, 4vh, 40px);
    }
}

/* ==========================================================================
   FEATURE CAROUSEL (Inclusive / Accessible — slow auto-rotate)
   ========================================================================== */
.feature-carousel {
    position: relative;
    border: 1px solid var(--gray-800);
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 25% 30%, rgba(0, 255, 255, 0.05), transparent 50%),
        radial-gradient(circle at 75% 70%, rgba(255, 0, 134, 0.05), transparent 50%),
        var(--black-card);
    min-height: 500px;
}

.feature-carousel-track {
    position: relative;
    min-height: 500px;
}

.feature-carousel-slide {
    position: absolute;
    inset: 0;
    padding: 80px 72px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.feature-carousel-slide.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.feature-carousel-slide h3 {
    font-size: clamp(32px, 3.5vw, 48px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--white);
}

.feature-carousel-slide h4 {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 24px;
    color: var(--cyan);
}

.feature-carousel-slide p {
    font-size: 17px;
    line-height: 2;
    color: var(--white);
    margin-bottom: 14px;
    font-weight: 400;
    max-width: 720px;
    opacity: 0.92;
}

.feature-carousel-slide ul {
    margin-top: 16px;
    padding-left: 0;
    list-style: none;
}

.feature-carousel-slide li {
    padding-left: 28px;
    position: relative;
    font-size: 16px;
    line-height: 2;
    color: var(--white);
    margin-bottom: 6px;
}

.feature-carousel-slide li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 16px;
    height: 1.5px;
    background: var(--cyan);
}

.feature-carousel-slide .accent-line {
    color: var(--cyan);
    font-weight: 600;
}

.feature-carousel-dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 5;
}

.feature-carousel-dot {
    width: 32px;
    height: 4px;
    border-radius: 4px;
    border: none;
    background: var(--gray-800);
    cursor: pointer;
    transition: all 0.4s ease;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.feature-carousel-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--cyan);
    box-shadow: 0 0 12px var(--cyan);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0s linear;
}

.feature-carousel-dot.active::after {
    transform: scaleX(1);
    transition: transform 5s linear;
}

@media (max-width: 900px) {
    .feature-carousel-slide {
        padding: 56px 32px 80px;
    }
}

/* ==========================================================================
   ACM TEASER (home)
   ========================================================================== */
.acm-teaser {
    border-radius: 28px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--gray-800);
    background:
        radial-gradient(circle at 20% 50%, rgba(0, 255, 255, 0.08), transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 0, 134, 0.08), transparent 50%),
        var(--black-card);
    padding: 80px 64px;
    text-align: center;
}

.acm-teaser h3 {
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    color: var(--white);
}

.acm-teaser p {
    font-size: 17px;
    line-height: 2;
    color: var(--white);
    max-width: 640px;
    margin: 0 auto 36px;
    font-weight: 400;
    opacity: 0.9;
}

@media (max-width: 600px) {
    .acm-teaser { padding: 56px 28px; }
}

/* ==========================================================================
   ACM SPLIT (home) — image left, text right
   ========================================================================== */
.acm-split {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 72px;
    align-items: center;
}

.acm-split-visual {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: var(--black-card);
    box-shadow:
        0 30px 80px -20px rgba(0, 255, 255, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

.acm-split-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.35), transparent 40%, transparent 60%, rgba(255, 0, 134, 0.35));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

.acm-split-visual img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
}

.acm-split-text .section-eyebrow {
    margin-bottom: 24px;
}

.acm-split-text h3 {
    font-size: clamp(28px, 3.4vw, 48px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    color: var(--white);
}

.acm-split-text p {
    font-size: 17px;
    line-height: 2;
    color: var(--white);
    margin-bottom: 32px;
    font-weight: 400;
    opacity: 0.9;
}

@media (max-width: 900px) {
    .acm-split {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

@media (max-width: 600px) {
    .acm-split { gap: 36px; }
}

/* ==========================================================================
   ACM PAGE - Big diagram display
   ========================================================================== */
.acm-hero-img {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: block;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 255, 255, 0.08);
}

.acm-compact {
    max-width: 900px;
    margin: 0 auto;
    display: block;
    border-radius: 16px;
}

/* ==========================================================================
   CAROUSEL (for ACM page)
   ========================================================================== */
.carousel {
    position: relative;
    padding: 80px 0;
    text-align: center;
}

.carousel-track {
    position: relative;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
    padding: 0 60px;
}

.carousel-slide.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.carousel-slide h3 {
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    max-width: 1000px;
}

.carousel-slide p {
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 2;
    color: var(--gray-300);
    max-width: 700px;
    font-weight: 300;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid var(--gray-700);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.carousel-dot.active {
    background: var(--cyan);
    border-color: var(--cyan);
    box-shadow: 0 0 12px var(--cyan);
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--gray-800);
    color: var(--white);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.carousel-arrow:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

.carousel-arrow.prev { left: 0; }
.carousel-arrow.next { right: 0; }

@media (max-width: 600px) {
    .carousel-arrow.prev { left: 8px; }
    .carousel-arrow.next { right: 8px; }
}

/* ==========================================================================
   COMPLIANCE / EVIDENCE GRID
   ========================================================================== */
.compliance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.compliance-card {
    background: var(--black-card);
    border: 1px solid var(--gray-800);
    border-radius: 16px;
    padding: 36px 32px;
    transition: all 0.3s ease;
}

.compliance-card:hover {
    border-color: var(--magenta);
    transform: translateY(-4px);
}

.compliance-card h4 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
}

.compliance-card p {
    font-size: 15px;
    line-height: 2;
    color: var(--gray-300);
    font-weight: 300;
}

@media (max-width: 900px) {
    .compliance-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MAPPING FRAMEWORKS (placeholder for future content)
   ========================================================================== */
.frameworks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 48px;
}

.framework-pill {
    border: 1px solid var(--gray-800);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    background: var(--black-card);
    transition: all 0.25s ease;
}

.framework-pill:hover {
    border-color: var(--cyan);
    background: var(--black-elev);
    transform: translateY(-2px);
}

.framework-pill .code {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--cyan);
    margin-bottom: 6px;
    display: block;
}

.framework-pill .name {
    font-size: 14px;
    color: var(--gray-300);
    line-height: 1.4;
    font-weight: 300;
}

/* ==========================================================================
   GET IN THE LOOP / CTA SECTION
   ========================================================================== */
.cta-strip {
    padding: 80px 0;
    text-align: center;
    background:
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0, 255, 255, 0.04), transparent 70%),
        var(--black);
    position: relative;
}

.cta-strip::before,
.cta-strip::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gray-800), transparent);
}

.cta-strip::before { top: 0; }
.cta-strip::after { bottom: 0; }

.cta-strip h3 {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 20px;
}

.cta-strip p {
    font-size: 16px;
    color: var(--white);
    max-width: 620px;
    margin: 0 auto 32px;
    line-height: 2;
    font-weight: 400;
    opacity: 0.9;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
    background: var(--black);
    padding: 80px 0 40px;
    border-top: 1px solid var(--gray-800);
}

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--section-pad-x);
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--gray-800);
}

.footer-brand-img {
    height: 56px;
    width: auto;
    margin-bottom: 20px;
}

.footer-tagline {
    font-size: 15px;
    color: var(--gray-300);
    margin-bottom: 24px;
    line-height: 1.6;
    font-weight: 300;
}

.footer-contact {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-contact a {
    font-size: 14px;
    color: var(--gray-300);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: color 0.2s ease;
}

.footer-contact a:hover {
    color: var(--cyan);
}

.footer-contact .icon {
    color: var(--cyan);
    width: 16px;
    flex-shrink: 0;
}

.footer-socials {
    display: flex;
    gap: 10px;
}

.footer-socials a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--black-card);
    border: 1px solid var(--gray-800);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-300);
    transition: all 0.2s ease;
}

.footer-socials a:hover {
    border-color: var(--cyan);
    color: var(--cyan);
    transform: translateY(-2px);
}

.footer-col h5 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 20px;
}

.footer-col ul {
    list-style: none;
}

.footer-col li {
    margin-bottom: 12px;
}

.footer-col a {
    font-size: 14px;
    color: var(--gray-300);
    transition: color 0.2s ease;
    font-weight: 300;
}

.footer-col a:hover {
    color: var(--cyan);
}

/* EduGrowth member badge — sits underneath the Legal column in the footer. */
.footer-edugrowth {
    display: inline-flex;
    align-items: center;
    margin-top: 28px;
    opacity: 0.65;
    transition: opacity 0.25s ease;
}

.footer-edugrowth:hover {
    opacity: 1;
}

.footer-edugrowth img {
    height: 64px;
    width: auto;
}

@media (max-width: 900px) {
    .footer-edugrowth img {
        height: 56px;
    }
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: var(--gray-500);
    font-weight: 300;
}

.footer-bottom .meta {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-bottom .meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.footer-bottom .meta-label {
    color: var(--magenta);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
}

@media (max-width: 900px) {
    /* MOBILE FOOTER — three stacked sections:
       1. Brand block (logo, tagline, contact, socials) full width — untouched
       2. Platform column (heading + 5 vertical links) with EduGrowth badge below
       3. Compliance/Accessibility/Contact/Privacy/Terms/Refund as a single
          horizontal separator-divided row */
    .footer {
        padding: 56px 0 28px;
    }
    .footer-top {
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding-bottom: 28px;
    }
    .footer-brand {
        width: 100%;
    }
    .footer-brand-img {
        height: 48px;
        margin-bottom: 14px;
    }
    .footer-tagline {
        font-size: 14px;
        margin-bottom: 16px;
    }

    /* Row 2: Platform column — vertical list of 5 links + EduGrowth badge below */
    .footer-col {
        margin: 0;
        width: 100%;
    }
    .footer-col:nth-of-type(1) h5 {
        font-size: 13px;
        margin-bottom: 12px;
    }
    .footer-col:nth-of-type(1) ul {
        display: block;
        padding: 0;
        margin: 0 0 20px 0;
        list-style: none;
    }
    .footer-col:nth-of-type(1) li {
        font-size: 14px;
        margin-bottom: 8px;
    }

    /* EduGrowth badge styled above via order:50 — keep this block empty
       to avoid duplicate rules. */

    /* Row 3: Company column (Compliance, Accessibility, Contact) +
       Legal column (Privacy Policy, Terms of Use, Refund Policy)
       all become one inline horizontal row with · separators.
       Use display:inline on the wrapper divs so the two ULs share a single
       text line. The EduGrowth badge inside Legal is a separate element
       that we re-anchor with display:block to sit on its own row above
       this inline link row. */
    /* Row 3: Make all 3 footer-col wrappers true flex children that share
       one row via flex-wrap. Hide all headings except Platform's. Inline
       the Company + Legal lists. The EduGrowth badge gets its own row above
       via order. */
    .footer-col:nth-of-type(2),
    .footer-col:nth-of-type(3) {
        display: block;
        width: 100%;
        margin: 0;
        order: 60;
    }
    /* Force Company + Legal lists onto the SAME visual row by negative
       margin pulling Legal up under Company. Both are width:100% blocks
       but the contents inside flow as inline so they wrap as one paragraph. */
    .footer-col:nth-of-type(3) {
        margin-top: -8px;
    }
    .footer-col:nth-of-type(3) ul {
        display: inline !important;
    }
    .footer-col:nth-of-type(3) li {
        display: inline !important;
    }
    /* Prefix Legal list with a separator so it visually continues from
       Company's last item. */
    .footer-col:nth-of-type(3) ul::before {
        content: "·";
        margin: 0 8px;
        color: var(--gray-600);
    }
    /* EduGrowth badge */
    .footer-edugrowth {
        display: block;
        order: 50;
        margin: 0 0 16px 0;
        max-width: 120px;
    }
    .footer-edugrowth img {
        max-width: 100%;
        height: auto;
        display: block;
    }
    .footer-col:nth-of-type(2) h5,
    .footer-col:nth-of-type(3) h5 {
        display: none;
    }
    .footer-col:nth-of-type(2) ul,
    .footer-col:nth-of-type(3) ul {
        display: inline;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .footer-col:nth-of-type(2) li,
    .footer-col:nth-of-type(3) li {
        display: inline;
        margin: 0;
    }
    .footer-col:nth-of-type(2) li::after {
        content: "·";
        margin: 0 8px;
        color: var(--gray-600);
    }
    .footer-col:nth-of-type(3) li:not(:last-child)::after {
        content: "·";
        margin: 0 8px;
        color: var(--gray-600);
    }
    .footer-col:nth-of-type(2) a,
    .footer-col:nth-of-type(3) a {
        font-size: 12px;
        color: var(--gray-400);
    }
}

@media (max-width: 600px) {
    .footer-col:nth-of-type(2) a,
    .footer-col:nth-of-type(3) a {
        font-size: 11px;
    }
    .footer-col:nth-of-type(2) li::after,
    .footer-col:nth-of-type(3) li:not(:last-child)::after {
        margin: 0 6px;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        font-size: 11px;
    }
}

/* ==========================================================================
   POLICY PAGES (legal / docs — shared system)
   ========================================================================== */
.policy-page {
    padding-top: 140px;
    padding-bottom: 120px;
    min-height: 100vh;
    position: relative;
}

/* Subtle ambient glow at the top of legal pages so they don't feel sterile */
.policy-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60vh;
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0, 255, 255, 0.04), transparent 70%),
        radial-gradient(ellipse 40% 30% at 80% 20%, rgba(255, 0, 134, 0.03), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.policy-inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 var(--section-pad-x);
    position: relative;
    z-index: 1;
}

.policy-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 20px;
    padding: 8px 16px;
    border: 1px solid rgba(0, 255, 255, 0.25);
    border-radius: 999px;
    background: rgba(0, 255, 255, 0.04);
}

.policy-title {
    font-size: var(--h1);
    font-weight: var(--h1-weight);
    letter-spacing: var(--h1-tracking);
    line-height: var(--h1-line);
    margin-bottom: 16px;
    color: var(--white);
}

.policy-updated {
    font-size: 14px;
    color: var(--gray-500);
    margin-bottom: 64px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--gray-800);
}

.policy-content {
    font-size: 16px;
    line-height: 2;
    color: var(--gray-300);
}

.policy-content h2 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-top: 64px;
    margin-bottom: 20px;
    color: var(--cyan);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-800);
}

.policy-content h2:first-child { margin-top: 0; }

.policy-content h3 {
    font-size: 18px;
    font-weight: 600;
    margin-top: 36px;
    margin-bottom: 14px;
    color: var(--white);
}

.policy-content h4 {
    font-size: 16px;
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 10px;
    color: var(--white);
}

.policy-content p {
    font-size: 16px;
    line-height: 2;
    color: var(--gray-300);
    margin-bottom: 18px;
    font-weight: 400;
}

.policy-content ul, .policy-content ol {
    margin: 0 0 24px 0;
    padding-left: 0;
    list-style: none;
}

.policy-content li {
    font-size: 16px;
    line-height: 2;
    color: var(--gray-300);
    margin-bottom: 10px;
    font-weight: 400;
    padding-left: 24px;
    position: relative;
}

.policy-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 10px;
    height: 1.5px;
    background: var(--cyan);
}

.policy-content ol {
    counter-reset: policy-list;
}

.policy-content ol li {
    counter-increment: policy-list;
    padding-left: 32px;
}

.policy-content ol li::before {
    content: counter(policy-list);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--cyan);
    line-height: 1.8;
}

.policy-content a {
    color: var(--cyan);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.2s ease;
}

.policy-content a:hover {
    color: var(--magenta);
}

.policy-content strong {
    color: var(--white);
    font-weight: 600;
}

.policy-content hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    margin: 64px 0;
}

/* Contact / highlight callouts inside legal pages */
.policy-content .policy-contact {
    margin: 32px 0;
    padding: 24px 28px;
    background: rgba(0, 255, 255, 0.04);
    border: 1px solid rgba(0, 255, 255, 0.18);
    border-radius: 12px;
}

.policy-content .policy-contact h3 {
    margin-top: 0;
    color: var(--cyan);
    font-size: 16px;
    letter-spacing: 0.02em;
}

.policy-content .policy-contact h3:not(:last-child) {
    margin-bottom: 4px;
}

.policy-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-300);
    transition: color 0.2s ease;
}

.policy-back:hover { color: var(--cyan); }

@media (max-width: 600px) {
    .policy-page {
        padding-top: 120px;
        padding-bottom: 80px;
    }
    .policy-content h2 { font-size: 20px; }
    .policy-content h3 { font-size: 17px; }
}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq-list {
    margin-top: 64px;
    border-top: 1px solid var(--gray-800);
}

.faq-item {
    border-bottom: 1px solid var(--gray-800);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 0;
    cursor: pointer;
    font-size: 17px;
    font-weight: 500;
    color: var(--white);
    list-style: none;
    transition: color 0.2s ease;
}

.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { color: var(--cyan); }

.faq-question::after {
    content: '+';
    font-size: 28px;
    font-weight: 300;
    color: var(--cyan);
    transition: transform 0.3s ease;
    margin-left: 24px;
    flex-shrink: 0;
}

details[open] .faq-question::after { content: '−'; }

.faq-answer {
    padding: 0 0 28px;
    font-size: 15px;
    line-height: 2;
    color: var(--gray-300);
    font-weight: 300;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

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

.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.slide-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.scale-in.visible {
    opacity: 1;
    transform: scale(1);
}

/* Stagger delays for grids */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.15s; }
.stagger-3 { transition-delay: 0.25s; }
.stagger-4 { transition-delay: 0.35s; }

/* Animated underline (for section titles or links) */
.anim-underline {
    position: relative;
    display: inline-block;
}

.anim-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--cyan), var(--magenta));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.anim-underline.visible::after,
.anim-underline.always::after {
    transform: scaleX(1);
}

/* Nav link hover underline */
.nav-links a:not(.nav-cta)::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    background: var(--cyan);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.nav-links a:not(.nav-cta):hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ==========================================================================
   MARQUEE (word reel)
   ========================================================================== */
.marquee {
    overflow: hidden;
    padding: 20px 0;
    border-top: 1px solid var(--gray-800);
    border-bottom: 1px solid var(--gray-800);
    position: relative;
    background: var(--black);
    mask-image: linear-gradient(90deg, transparent, white 6%, white 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, white 6%, white 94%, transparent);
}

.marquee-track {
    display: flex;
    gap: 56px;
    width: max-content;
    animation: marqueeScroll 55s linear infinite;
    will-change: transform;
}

.marquee-track:hover {
    animation-play-state: paused;
}

.marquee-item {
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500);
    white-space: nowrap;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 56px;
}

.marquee-item::after {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
    flex-shrink: 0;
}

.marquee-item:hover {
    color: var(--white);
}

.marquee-item.cyan-word { color: var(--cyan); }
.marquee-item.magenta-word { color: var(--magenta); }

/* ==========================================================================
   SCROLL PROGRESS BAR (top of page)
   ========================================================================== */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cyan), var(--magenta));
    z-index: 200;
    width: 0;
    transition: width 0.1s linear;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* ==========================================================================
   GLOW PULSE ON CARDS
   ========================================================================== */
.video-card,
.compliance-card,
.framework-pill,
.feature-2col > div {
    position: relative;
}

.video-card::after,
.compliance-card::after,
.framework-pill::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, transparent, transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: background 0.5s ease;
}

.video-card:hover::after {
    background: linear-gradient(135deg, var(--cyan), transparent 50%, var(--magenta));
}

.compliance-card:hover::after {
    background: linear-gradient(135deg, var(--magenta), transparent 50%, var(--cyan));
}

.framework-pill:hover::after {
    background: linear-gradient(135deg, var(--cyan), transparent);
}

/* ==========================================================================
   HERO BUTTON ARROW MOTION
   ========================================================================== */
.btn-arrow {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:hover .btn-arrow {
    transform: translateX(6px);
}

/* ==========================================================================
   LOGO (hero) — no float, just gentle glow
   ========================================================================== */
.hero-logo-mark img {
    animation: glow 6s ease-in-out 1.5s infinite;
}

/* ==========================================================================
   INCLUSIVE CYAN TEXT
   ========================================================================== */

.no-dash li {
    padding-left: 0;
}

.no-dash li::before {
    display: none;
}

.no-dash .cyan {
    font-weight: 600;
}

/* ==========================================================================
   UNDERLINE ANIMATIONS
   ========================================================================== */

.anim-underline {
    padding-bottom: 4px;
}

.anim-underline::after {
    bottom: 0 !important;
}

/* When .anim-underline is the LAST child of its heading (i.e. the underlined
   phrase ends with the heading's final punctuation), the 100% width stops
   exactly at the full stop — which looks shorter than the underlines that
   sit mid-heading with text after them. Extend slightly past the punctuation
   so it matches the visual length of mid-heading underlines. */
.section-title > .anim-underline:last-child::after,
.section-title > span:last-child > .anim-underline:last-child::after,
.hero-reveal-line-2 > .anim-underline:last-child::after {
    width: calc(100% + 0.7em);
}

.section-title {
    line-height: 1.25;
}

/* ==========================================================================
   SCROLL-PINNED FEATURE SECTION
   Sticky pin + scroll-driven slide change. Apple-style.
   ========================================================================== */
.scroll-pin {
    position: relative;
}

.scroll-pin-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.scroll-pin-header .section-title {
    margin-bottom: 0;
    font-size: clamp(32px, 4.5vw, 60px);
}

.scroll-pin-stage {
    position: relative;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--section-pad-x);
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
}

.scroll-pin-card {
    width: 100%;
    border: 1px solid var(--gray-800);
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 25% 30%, rgba(0, 255, 255, 0.05), transparent 50%),
        radial-gradient(circle at 75% 70%, rgba(255, 0, 134, 0.05), transparent 50%),
        var(--black-card);
    position: relative;
    min-height: 480px;
}

.scroll-pin-slide {
    position: absolute;
    inset: 0;
    padding: 60px 64px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

.scroll-pin-slide.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.scroll-pin-slide-text h3 {
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 20px;
    color: var(--white);
    min-height: 2.3em;
}

.scroll-pin-slide-text h4 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 24px;
    color: var(--cyan);
    min-height: 56px;
}

.scroll-pin-slide-text p {
    font-size: 17px;
    line-height: 2;
    color: var(--white);
    margin-bottom: 14px;
    opacity: 0.92;
}

.scroll-pin-slide-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-content: start;
}

.scroll-pin-feature {
    border: 1px solid var(--gray-800);
    border-radius: 14px;
    padding: 24px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.02);
}

.scroll-pin-feature:hover {
    border-color: var(--cyan);
    background: rgba(0, 255, 255, 0.04);
    transform: translateY(-2px);
}

.scroll-pin-feature h5 {
    font-size: 15px;
    font-weight: 600;
    color: var(--cyan);
    margin-bottom: 8px;
    letter-spacing: -0.005em;
}

.scroll-pin-feature p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--white);
    margin-bottom: 0;
    opacity: 0.85;
    font-weight: 400;
}

.scroll-pin-dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 5;
    padding: 12px 20px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--gray-800);
}

.scroll-pin-dot {
    width: 28px;
    height: 4px;
    border-radius: 4px;
    background: var(--gray-700);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-pin-dot.active {
    background: var(--cyan);
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.6);
    width: 40px;
}

.scroll-pin-dot.completed {
    background: var(--cyan);
    opacity: 0.4;
}

@media (max-width: 900px) {
    .scroll-pin-slide {
        grid-template-columns: 1fr;
        padding: 48px 32px;
        gap: 32px;
    }
    .scroll-pin-slide-features {
        grid-template-columns: 1fr;
    }
    .scroll-pin-card { min-height: 600px; }
}

/* ==========================================================================
   CTA — Compact (small strip variant, not full hero-sized section)
   ========================================================================== */
.cta-strip.cta-compact {
    padding: 48px 0;
}
.cta-strip.cta-compact h3 {
    font-size: clamp(22px, 2.4vw, 32px);
    margin-bottom: 8px;
}
.cta-strip.cta-compact p {
    font-size: 15px;
    margin-bottom: 22px;
    opacity: 0.8;
}

/* ==========================================================================
   STEPPED TITLE (line two indented underneath)
   ========================================================================== */
.section-title.stepped {
    display: inline-block;
    text-align: left;
}
.section-title.stepped .stepped-row-1,
.section-title.stepped .stepped-row-2 {
    display: block;
}
.section-title.stepped .stepped-row-2 {
    padding-left: 2.5em;
}
.scroll-pin-header {
    text-align: left;
    max-width: var(--max-width);
    margin: 0 auto 48px;
    width: 100%;
    padding: 80px var(--section-pad-x) 0;
}
.scroll-pin-header .section-eyebrow {
    margin-bottom: 24px;
}

/* ==========================================================================
   EQUAL-HEIGHT FEATURE TILES — fixed height, hard clip on overflow
   ========================================================================== */
.scroll-pin-slide-features {
    grid-auto-rows: 180px;
}
.scroll-pin-feature {
    display: flex;
    flex-direction: column;
    height: 180px;
    overflow: hidden;
}
.scroll-pin-feature p {
    overflow: hidden;
}
.scroll-pin-card {
    height: 480px;
    min-height: 480px;
    max-height: 480px;
}

/* ACM CINEMATIC — immersive image background with overlaid text */
/* ==========================================================================
   ACM CINEMATIC — scroll-driven sticky-pinned reveal.
   Section is 450vh tall (long runway, but only 100vh visible at any time).
   The .acm-cinematic-sticky child is position: sticky; top: 0; height: 100vh
   so the whole visual stays pinned while the user scrolls through the runway.
   The diagram image is the full background, the header sits on the left,
   and the right-side content is JS-driven to translateY from 60vh up to 0
   as scroll progress goes from 0 to ~75%.
   ========================================================================== */
.acm-cinematic-section {
    position: relative;
    height: 450vh;
    padding: 0;
}

.acm-cinematic-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    /* Push the header down so the fixed nav (~60px) doesn't cover the eyebrow */
    padding-top: 72px;
    box-sizing: border-box;
}

.acm-cinematic-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.acm-cinematic-bg picture {
    display: block;
    width: 100%;
    height: 100%;
}

.acm-cinematic-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: saturate(1.1) brightness(0.7);
    opacity: 0.85;
}

.acm-cinematic-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.7) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.5) 100%);
}

/* The stage holds both columns on top of the image. Header goes at the TOP
   (top-left), and the right-side content scrolls up from below into its
   final right-side position. Stage spans the full viewport width — image
   fills edge to edge underneath. */
.acm-cinematic-stage {
    position: relative;
    z-index: 3;
    height: 100%;
    width: 100%;
    padding: clamp(16px, 2vh, 28px) clamp(40px, 5vw, 80px) clamp(60px, 8vh, 100px);
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0;
}

.acm-cinematic-header {
    text-align: left;
    align-self: start;
}

.acm-cinematic-header .section-eyebrow {
    margin-bottom: 24px;
}

.acm-cinematic-header .section-title {
    margin-bottom: 0;
    white-space: nowrap;
}

.acm-cinematic-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Anchor to bottom so the button is always visible regardless of viewport
       height. Content stacks upward from there. */
    justify-content: flex-end;
    text-align: right;
    padding-bottom: clamp(20px, 4vh, 60px);
}

/* The block below the subheading — paragraph, BAM lines, button. This is what
   slides up from below once the subheading letters have landed. */
.acm-cinematic-content-below {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    will-change: transform, opacity;
    transform: translateY(60vh);
    opacity: 0;
}

.acm-cinematic-content > * {
    max-width: 640px;
}

.acm-cinematic-content h3 {
    font-size: var(--h1);
    font-weight: var(--h1-weight);
    line-height: 1.15;
    letter-spacing: var(--h1-tracking);
    margin-bottom: 16px;
    color: var(--white);
}

.acm-cinematic-content h3.acm-cinematic-subheading {
    font-size: var(--h2);
    font-weight: var(--h2-weight);
    line-height: var(--h2-line);
    letter-spacing: var(--h2-tracking);
    margin-bottom: 28px;
    color: var(--white);
}

/* Each LETTER of the subheading is its own inline-block so we can transform
   it independently (drop, loop, settle) without affecting the line layout.
   Each .acm-line is display: block so the three lines stack vertically. */
/* The full-stop inside the cyan dynamic line stays white — matches the other
   period-on-section-title pattern used elsewhere on the page. */
.acm-cinematic-subheading .acm-line.cyan .acm-period,
.acm-cinematic-subheading .acm-line.cyan .acm-period .acm-char {
    color: var(--white) !important;
}

.acm-cinematic-subheading .acm-line {
    display: block;
}

.acm-cinematic-subheading .acm-char {
    display: inline-block;
    transform-origin: center center;
    will-change: transform, opacity;
}

.acm-cinematic-content p {
    font-size: var(--body-large);
    line-height: var(--body-line);
    color: var(--white);
    margin-bottom: 28px;
    font-weight: 400;
    opacity: 0.92;
    max-width: 640px;
}

/* The three "Every X" lines — visually distinct from the lead paragraph */
.acm-cinematic-list {
    font-weight: 500 !important;
    color: var(--cyan) !important;
    opacity: 1 !important;
}

/* DESKTOP sequenced reveal — BAM lines and the button start hidden inside the
   sliding content block. Once the block has slid into place, the section gets
   .bam-revealed and these elements fade in one after another (line 1 first,
   then line 2, then line 3, then the button). Matches the mobile sequence so
   the rhythm is consistent across devices. */
.acm-cinematic-section .acm-bam-line,
.acm-cinematic-section .acm-cinematic-btn-wrap {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.acm-cinematic-section.bam-revealed .acm-bam-line {
    opacity: 1;
    transform: translateY(0);
}
.acm-cinematic-section.bam-revealed .acm-bam-line[data-bam="0"] { transition-delay: 0s; }
.acm-cinematic-section.bam-revealed .acm-bam-line[data-bam="1"] { transition-delay: 0.4s; }
.acm-cinematic-section.bam-revealed .acm-bam-line[data-bam="2"] { transition-delay: 0.8s; }

.acm-cinematic-section.bam-revealed .acm-cinematic-btn-wrap {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.2s;
}

/* MOBILE-only ACM CINEMATIC. Edit here to change mobile.
   Independent from desktop — hard-walled. */
@media (max-width: 900px) {
    /* ACM cinematic on mobile uses the same scroll-driven sticky pin as desktop —
       full-viewport image background, header pinned, subheading letters animate,
       content slides up from below. Layout becomes single-column. */

    /* Fixed scroll runway in pixels — same on every phone regardless of
       viewport height. 1400px gives enough room for the letter animation
       plus the BAM/button reveal without leaving empty space at the end.
       Was 220vh which gave taller phones extra trailing gap. */
    .acm-cinematic-section {
        height: 1400px;
    }

    /* Tighten the top padding on the sticky — mobile nav is shorter but we
       still need to clear it so the eyebrow doesn't slip underneath. */
    .acm-cinematic-sticky {
        padding-top: 40px;
    }

    .acm-cinematic-bg img {
        /* Portrait version is used on mobile (via <picture> source).
           Use 'contain' not 'cover' — the image keeps its natural aspect
           ratio and shows the full composition on every phone, just bigger
           or smaller depending on screen size. No cropping, no per-device
           tweaking. Object-position: top center so the image hugs the top
           and any extra height is at the bottom (where the BAM/button area is
           and can absorb the empty space gracefully). */
        object-fit: contain;
        object-position: center top;
        filter: saturate(1) brightness(0.55);
        opacity: 0.75;
    }

    .acm-cinematic-overlay {
        /* Stronger overlay on mobile so the busy diagram doesn't compete with
           the BAM text — darker top + bottom, lighter middle. */
        background:
            linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 35%, rgba(0,0,0,0.2) 65%, rgba(0,0,0,0.55) 100%);
    }

    .acm-cinematic-stage {
        grid-template-rows: auto 1fr;
        gap: 0;
        padding: 24px 24px 48px;
    }

    .acm-cinematic-header {
        text-align: left;
    }

    /* On iPhone-width viewports the underline of "Forget linear learning." sits
       right against the image / subheading below it. Give it breathing room.
       Also allow wrapping since the heading is wider on mobile. */
    .acm-cinematic-header .section-title {
        white-space: normal;
        margin-bottom: 16px;
    }

    .acm-cinematic-content {
        /* Anchor subheading to the TOP of the content area on mobile — otherwise
           justify-content: center (inherited from desktop) makes the gap between
           the header and the subheading grow huge on taller phones (Nothing Phone)
           and stay small on shorter ones (iPhone). Top-anchored = consistent. */
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
    }

    .acm-cinematic-content-below {
        /* BAM lines + button align to the RIGHT on mobile — the right side of
           the portrait diagram image is less busy (magenta dots/swirl side)
           than the left (heavy cyan blue swirl), so cyan BAM text reads more
           clearly there.
           Also reset the desktop base transform that hides the block at
           translateY(60vh) — mobile doesn't slide it up as a whole. */
        align-items: flex-end;
        text-align: right;
        transform: none !important;
        opacity: 1 !important;
    }

    /* Hide the long paragraph on mobile — keeps the cleaner: subheading → BAM
       lines → button sequence. The paragraph is too busy on a small screen
       on top of the diagram image. */
    .acm-cinematic-para {
        display: none !important;
    }

    /* BAM lines on mobile: white text (not cyan) so they read clearly on top
       of the busy diagram. The list paragraph wrapper already styles them —
       just override the inherited cyan from .acm-cinematic-list. */
    .acm-cinematic-list,
    .acm-bam-line {
        color: var(--white) !important;
    }

    /* BAM lines and button start hidden — once the section gets .bam-revealed
       (toggled by JS after the letter animation completes), each line transitions
       in on a staggered delay so they appear one after another automatically. */
    .acm-bam-line {
        opacity: 0;
        display: inline-block;
        transform: translateY(16px);
        transition: opacity 0.5s ease, transform 0.5s ease;
        will-change: opacity, transform;
    }

    .acm-cinematic-btn-wrap {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.5s ease, transform 0.5s ease;
        will-change: opacity, transform;
    }

    .acm-cinematic-section.bam-revealed .acm-bam-line {
        opacity: 1;
        transform: translateY(0);
    }
    .acm-cinematic-section.bam-revealed .acm-bam-line[data-bam="0"] { transition-delay: 0s; }
    .acm-cinematic-section.bam-revealed .acm-bam-line[data-bam="1"] { transition-delay: 0.4s; }
    .acm-cinematic-section.bam-revealed .acm-bam-line[data-bam="2"] { transition-delay: 0.8s; }

    .acm-cinematic-section.bam-revealed .acm-cinematic-btn-wrap {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 1.2s;
    }

    /* Push the button down on mobile so it has more breathing room from the
       last BAM line above it. */
    .acm-cinematic-btn-wrap {
        margin-top: 44px;
    }

    /* Kill hardcoded <br> tags inside the FIRST paragraph only — desktop column was wide
       enough to hold those manual breaks, on mobile they leave awkward orphan lines.
       Letting the paragraph reflow naturally gives a much cleaner read.
       The cyan "Every X" list KEEPS its <br>s because those lines are intentional. */
    .acm-cinematic-content p:not(.acm-cinematic-list) br {
        display: none;
    }

    /* Mobile: per-letter animation runs the same as desktop. */

    /* Subheading ("Looping is fluid, adaptive, and dynamic.") — keeps token sizing
       (--h2). Only tweaking margin-bottom for tighter mobile spacing. */
    .acm-cinematic-content h3.acm-cinematic-subheading {
        margin-bottom: 20px;
    }

    /* Body paragraphs — drop from 22px/line 2 (44px line-height!) to 18px/line 1.7,
       matching the mobile pattern used in scroll-moment-text and edu-redefined-panel. */
    .acm-cinematic-content p {
        font-size: 18px;
        line-height: 1.7;
        margin-bottom: 20px;
        max-width: none;
    }

    /* The cyan "Every X" list paragraph — keep cyan accent, tighter spacing for the
       three short lines so they read as a stanza rather than three big blocks. */
    .acm-cinematic-content p.acm-cinematic-list {
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 28px;
    }
}

/* ==========================================================================
   ILM EXPLAINER — "So what's an ILM, anyway?"
   Sticky pinned mapping framework diagram on the right, multi-panel scrolling
   explanation on the left. Modelled on .edu-redefined from the home page so
   the page rhythm stays consistent.
   NOTE: do NOT use overflow:hidden on the .ilm-explainer container — it kills
   position:sticky on the pinned column.
   ========================================================================== */
.ilm-explainer {
    position: relative;
    background: var(--black);
}

.ilm-explainer::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 45% at 80% 25%, rgba(0, 255, 255, 0.05), transparent 70%),
        radial-gradient(ellipse 60% 45% at 20% 80%, rgba(255, 0, 134, 0.05), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.ilm-explainer-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    align-items: start;
    gap: 0;
}

.ilm-explainer-scroll {
    padding: clamp(80px, 12vh, 160px) clamp(40px, 5vw, 96px) clamp(200px, 50vh, 440px);
    display: flex;
    flex-direction: column;
    gap: clamp(64px, 10vh, 128px);
    min-height: 240vh;
}

.ilm-explainer-scroll .section-eyebrow {
    align-self: flex-start;
    margin-bottom: 0;
}

.ilm-explainer-scroll .section-eyebrow + .ilm-explainer-panel {
    margin-top: clamp(-32px, -2vh, -16px);
}

.ilm-explainer-headline {
    font-size: var(--h1);
    font-weight: var(--h1-weight);
    line-height: var(--h1-line);
    letter-spacing: var(--h1-tracking);
    color: var(--white);
    margin: 0;
}

/* Subsection heading — cyan, h3 size on desktop, bumped on mobile for hierarchy.
   HTML tag stays h3 for accessibility. */
.ilm-explainer-panel-heading {
    font-size: var(--h3);
    font-weight: var(--h3-weight);
    line-height: var(--h3-line);
    letter-spacing: var(--h3-tracking);
    color: var(--cyan);
    margin: 0 0 20px;
}

.ilm-explainer-panel p {
    font-size: var(--body-large);
    line-height: var(--body-line);
    color: var(--white);
    font-weight: 400;
    opacity: 0.92;
    margin: 0 0 16px;
}

.ilm-explainer-panel p:last-child {
    margin-bottom: 0;
}

.ilm-explainer-panel p strong {
    color: var(--white);
    font-weight: 600;
    opacity: 1;
}

.ilm-explainer-payoff {
    margin-top: 24px !important;
    font-size: var(--h4) !important;
    opacity: 1 !important;
    line-height: 1.3 !important;
}

.ilm-explainer-pin {
    position: sticky;
    top: 8vh;
    height: 84vh;
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vw, 60px);
}

.ilm-explainer-diagram {
    width: 100%;
    aspect-ratio: 1;
    max-height: 100%;
    border-radius: 24px;
    overflow: hidden;
    background: var(--black);
    box-shadow:
        0 30px 80px -30px rgba(0, 255, 255, 0.25),
        0 30px 80px -30px rgba(255, 0, 134, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ilm-explainer-diagram img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 900px) {
    .ilm-explainer-grid {
        grid-template-columns: 1fr;
    }

    .ilm-explainer-pin {
        position: relative;
        top: auto;
        height: auto;
        order: -1;
        padding: clamp(40px, 8vw, 64px) clamp(24px, 5vw, 40px) 0;
    }

    .ilm-explainer-diagram {
        max-width: 520px;
        margin: 0 auto;
    }

    .ilm-explainer-scroll {
        min-height: auto;
        padding: clamp(48px, 8vw, 64px) clamp(24px, 5vw, 40px) clamp(64px, 10vw, 96px);
        gap: clamp(40px, 6vw, 64px);
    }

    /* Mobile: bump panel heading from h3 token (~22px) to be more prominent.
       Genuine breakpoint-specific design choice — the token is for desktop
       where 22-26px is correct; mobile needs more weight in the hierarchy. */
    .ilm-explainer-panel-heading {
        font-size: 30px;
    }
}

/* ==========================================================================
   EDUCATION REDEFINED — left pinned image + headline, right scrolling panels
   ========================================================================== */
.edu-redefined {
    position: relative;
    background: var(--black);
}

.edu-redefined-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
    gap: 0;
}

.edu-redefined-pin {
    position: sticky;
    top: 6vh;
    height: 88vh;
    overflow: hidden;
}

.edu-redefined-image {
    position: relative;
    width: 100%;
    height: 100%;
}

.edu-redefined-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.edu-redefined-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%);
    display: flex;
    align-items: center;
    padding: clamp(40px, 6vw, 80px);
}

.edu-redefined-headline {
    font-size: var(--h1);
    font-weight: var(--h1-weight);
    line-height: var(--h1-line);
    letter-spacing: var(--h1-tracking);
    color: var(--white);
}

.edu-redefined-headline span {
    display: block;
    margin-bottom: 0.5em;
}

.edu-redefined-headline span:last-child {
    margin-bottom: 0;
}

.edu-redefined-scroll {
    padding: clamp(60px, 10vh, 120px) clamp(40px, 5vw, 96px) clamp(200px, 50vh, 440px);
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 5vh, 64px);
    min-height: 250vh;
}

.edu-redefined-scroll .section-eyebrow {
    margin-bottom: 0;
    align-self: flex-start;
}

.edu-redefined-scroll .section-eyebrow + .edu-redefined-panel {
    margin-top: clamp(-32px, -2vh, -16px);
}

.edu-redefined-panel p {
    font-size: var(--body-large);
    line-height: var(--body-line);
    color: var(--white);
    font-weight: 400;
    opacity: 0.92;
    margin: 0;
}

/* Subheading — uses --h3 token. */
.edu-redefined-panel-heading {
    font-size: var(--h3);
    font-weight: var(--h3-weight);
    line-height: var(--h3-line);
    letter-spacing: var(--h3-tracking);
    color: var(--cyan);
    margin: 0 0 16px;
}

/* ==========================================================================
   SCROLL MOMENTS — video pinned, text scrolls past, alternating sides
   ========================================================================== */
.scroll-moment {
    position: relative;
    background: var(--black);
}

.scroll-moment {
    margin-bottom: 0;
}

.scroll-moment:last-of-type {
    margin-bottom: 0;
}

.scroll-moment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 0;
}

.scroll-moment-grid::after {
    content: '';
    grid-column: 1 / -1;
    grid-row: 2;
    height: clamp(500px, 90vh, 900px);
}

.scroll-moment-media {
    position: sticky;
    top: 8vh;
    align-self: start;
    height: 84vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vw, 60px);
}

.scroll-moment-media-frame {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 24px;
    overflow: hidden;
    background: var(--black-card);
    border: 1px solid var(--gray-800);
    box-shadow: 0 30px 80px -30px rgba(0, 255, 255, 0.2);
    max-height: 100%;
}

.scroll-moment-media-frame video,
.scroll-moment-media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.scroll-moment-text {
    padding: clamp(240px, 42vh, 480px) clamp(40px, 5vw, 96px) clamp(200px, 45vh, 440px);
    min-height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: sticky;
    top: 8vh;
    align-self: start;
}

.scroll-moment-text h3 {
    font-size: var(--h2);
    font-weight: var(--h2-weight);
    line-height: var(--h2-line);
    letter-spacing: var(--h2-tracking);
    color: var(--white);
    margin-bottom: 24px;
}

.scroll-moment-text p {
    font-size: var(--body-large);
    line-height: var(--body-line);
    color: var(--white);
    font-weight: 400;
    opacity: 0.92;
    margin: 0;
}

/* Side flip: text on right — reorder grid items */
.scroll-moment-text-right .scroll-moment-media {
    grid-column: 1;
    grid-row: 1;
}
.scroll-moment-text-right .scroll-moment-text {
    grid-column: 2;
    grid-row: 1;
}

/* Side flip: text on left (default) */
.scroll-moment-text-left .scroll-moment-text {
    grid-column: 1;
    grid-row: 1;
}
.scroll-moment-text-left .scroll-moment-media {
    grid-column: 2;
    grid-row: 1;
}

@media (max-width: 900px) {
    .scroll-moment-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    /* Mobile: video sticks at the top as a proper rounded card with cyan glow.
       Solid black background on the sticky container so scrolling text behind
       it doesn't bleed through. Wider card (only 12px side padding) so body text
       below feels aligned with it. */
    /* Mobile: video sticks below the nav as a rounded card with cyan glow.
       The sticky container has top padding equal to the nav height so the area
       above the card (between nav and card) is solid black — nothing scrolls past it. */
    /* Mobile: video sticks below the nav as a rounded card with cyan glow.
       The sticky container has top padding equal to the nav height so the area
       above the card (between nav and card) is solid black — nothing scrolls past it.
       A soft fade gradient at the bottom edge so text scrolling underneath fades
       out gracefully instead of being abruptly cut off. */
    .scroll-moment-text-left .scroll-moment-media,
    .scroll-moment-text-right .scroll-moment-media {
        grid-column: 1;
        grid-row: 1;
        position: sticky;
        top: 0;
        height: auto;
        padding: 40px 12px 0;
        background: var(--black);
        z-index: 2;
    }
    .scroll-moment-text-left .scroll-moment-text,
    .scroll-moment-text-right .scroll-moment-text {
        grid-column: 1;
        grid-row: 2;
        position: relative;
        top: auto;
        height: auto;
        /* Match the card's 12px side padding so video + text feel aligned.
           Big top + bottom padding adds vertical runway so the moment lasts
           a real scroll instead of flying past on one swipe. */
        padding: 88px 12px 70vh;
        min-height: auto;
    }
    /* Keep the rounded-square video card with cyan glow — just sized for mobile */
    .scroll-moment-media-frame {
        max-width: 100%;
        width: 100%;
        aspect-ratio: 1;
        margin: 0 auto;
        border-radius: 20px;
        border: 1px solid var(--gray-800);
        box-shadow: 0 20px 50px -20px rgba(0, 255, 255, 0.25);
    }
    .scroll-moment-text h3 {
        margin-bottom: 16px;
    }
    .scroll-moment-text p {
        font-size: 18px;
        line-height: 1.7;
    }
    /* Remove the spacer pseudo on mobile since we're not doing the long pin anymore */
    .scroll-moment-grid::after {
        display: none;
    }
}

.edu-redefined-panel p strong {
    color: var(--cyan);
    font-weight: 600;
    opacity: 1;
}

@media (max-width: 900px) {
    .edu-redefined-grid {
        grid-template-columns: 1fr;
    }
    /* Mobile: keep the image sticky (Apple-style) so it stays pinned
       while the text panels scroll past underneath. Wrap as a rounded card
       with cyan glow, with solid black background so text underneath doesn't bleed through. */
    .edu-redefined-pin {
        position: sticky;
        top: 0;
        height: auto;
        padding: 40px 12px 0;
        background: var(--black);
        z-index: 2;
        overflow: visible;
    }
    .edu-redefined-image {
        aspect-ratio: 1;
        height: auto;
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid var(--gray-800);
        box-shadow: 0 20px 50px -20px rgba(0, 255, 255, 0.25);
    }
    .edu-redefined-overlay {
        padding: clamp(20px, 5vw, 32px);
    }
    .edu-redefined-scroll {
        padding: 48px 24px 80px;
        gap: 40px;
        min-height: auto;
    }
    .edu-redefined-panel p {
        font-size: 18px;
        line-height: 1.7;
    }
}

/* ==========================================================================
   HERO REVEAL — cinematic heading for "Built for everyone" section
   Line 1 types on, line 2 flies in big → small. Triggers when section enters view.
   ========================================================================== */
.hero-reveal {
    position: relative;
    background: var(--black);
    height: 200vh; /* gives the typing/fly-in room to play out as user scrolls */
}

.hero-reveal-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-reveal-inner {
    max-width: 1800px;
    width: 100%;
    padding: 0 var(--section-pad-x);
    text-align: left;
}

.hero-reveal-lang .hero-reveal-inner {
    padding-left: clamp(60px, 10vw, 160px);
    position: relative;
    z-index: 3;
}

.hero-reveal-eyebrow {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    margin-bottom: 32px;
}

.hero-reveal.in-view .hero-reveal-eyebrow {
    opacity: 1;
    transform: translateY(0);
}

.hero-reveal-title {
    font-size: clamp(44px, 6.5vw, 90px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.03em;
    color: var(--white);
    margin: 0;
}

.hero-reveal-line-1,
.hero-reveal-line-2 {
    display: block;
}

.hero-reveal-line-1 {
    margin-bottom: 0.4em;
}

.hero-reveal-line-2 {
    padding-left: 3.9em;
    opacity: 0;
    transform: scale(8) translateZ(0);
    transform-origin: center center;
    transition:
        opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: blur(24px);
}

.hero-reveal.line-2-active .hero-reveal-line-2 {
    opacity: 1;
    transform: scale(1) translateZ(0);
    filter: blur(0);
    transition:
        opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.4s ease-out;
    animation: bam-flash 0.6s ease-out;
}

@keyframes bam-flash {
    0%   { text-shadow: 0 0 0 rgba(0, 255, 255, 0); }
    40%  { text-shadow: 0 0 60px rgba(0, 255, 255, 0.8), 0 0 120px rgba(255, 0, 134, 0.4); }
    100% { text-shadow: 0 0 0 rgba(0, 255, 255, 0); }
}

.hero-reveal-line-2 .anim-underline::after {
    transform: scaleX(0);
}

.hero-reveal.line-2-active .hero-reveal-line-2 .anim-underline::after {
    transform: scaleX(1);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}

/* Typed text cursor */
.typed-cursor {
    display: inline-block;
    color: var(--cyan);
    font-weight: 300;
    animation: cursor-blink 1s steps(2, end) infinite;
    margin-left: 4px;
    opacity: 0;
}

.hero-reveal.in-view .typed-cursor {
    opacity: 1;
}

.hero-reveal.line-1-complete .typed-cursor {
    opacity: 0;
    animation: none;
}

@keyframes cursor-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

@media (max-width: 900px) {
    .hero-reveal-title { font-size: clamp(56px, 16vw, 92px); line-height: 1.05; }
    .hero-reveal-line-2 { padding-left: 0; }
    /* On mobile, the reveal section uses the FULL height of the screen.
       Eyebrow pinned near the top, both lines spread out with generous gaps
       so it reads as a real page section instead of a cramped little block. */
    .hero-reveal-sticky {
        align-items: stretch;
        justify-content: flex-start;
        padding: 80px 0 60px;
    }
    .hero-reveal-inner {
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: 100%;
    }
    .hero-reveal-title {
        margin-top: auto;
        margin-bottom: auto;
        width: 100%;
    }
    /* Force "Inclusive by design." to wrap to 3 lines by constraining width.
       Same constraint also affects "Accessible from anywhere." so they balance. */
    .hero-reveal-line-1,
    .hero-reveal-line-2 {
        max-width: 6.5ch;
    }
    .hero-reveal-line-1 {
        margin-bottom: 12vh;
    }
}

/* ==========================================================================
   HERO REVEAL #2 — "Lifelike characters. / In any language."
   Greetings sweep onto screen from off-canvas, land, then drift gently.
   ========================================================================== */
.hero-reveal-lang {
    height: 550vh; /* extended runway so the underline has time to draw before the section releases */
}

.hero-reveal-lang .hero-reveal-inner {
    position: relative;
    z-index: 3;
}

/* NPC video — walks across the right side of the screen toward the heading.
   Flipped horizontally so she walks RIGHT to LEFT (toward the heading on the left).
   NOTE: overflow is VISIBLE (not hidden) so the sit video can be positioned
   anywhere on the page, including outside the wrapper's right-half-of-screen box.

   Position rules are split:
   - DESKTOP position lives in @media (min-width: 901px) below.
   - MOBILE position lives in @media (max-width: 900px) further down.
   Only the universal (non-positional) properties live on the base rule. */
/* NPCs (walking + sitting) start INVISIBLE. They only fade in once the
   typewriter has finished typing "Lifelike characters." — i.e. once the
   section has the .line-1-complete class. Stops the sitting NPC from
   appearing mid-air on letters that haven't been typed yet, and stops the
   walking NPC from being visible before the section content is even visible. */
.hero-reveal-lang .hero-reveal-npc,
.hero-reveal-lang .hero-reveal-npc-sit {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.hero-reveal-lang.line-1-complete .hero-reveal-npc,
.hero-reveal-lang.line-1-complete .hero-reveal-npc-sit {
    opacity: 1;
}

.hero-reveal-npc {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
}

/* DESKTOP-only position for intro NPC. Edit here to move on desktop. */
@media (min-width: 901px) {
    .hero-reveal-npc {
        top: calc(50% - 90px);
        right: -130%;
        width: 50%;
        height: 90%;
        transform: translateY(9%);
    }
}

.hero-reveal-npc video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    /* Scale the video up so the NPC visually fills more of the frame.
       Crops the empty transparent padding around her.
       Origin is LEFT center so she scales toward the left edge of the screen,
       not extending off the right side. */
    transform: scale(7);
    transform-origin: right center;
    transition: opacity 0.6s ease;
}

/* Intro starts visible, loop starts hidden. JS swaps them when intro ends. */
.hero-reveal-npc-intro {
    opacity: 1;
    z-index: 2;
}

.hero-reveal-npc-loop {
    opacity: 0;
    z-index: 1;
}

.hero-reveal-npc.intro-finished .hero-reveal-npc-intro {
    opacity: 0;
    z-index: 1;
}

.hero-reveal-npc.intro-finished .hero-reveal-npc-loop {
    opacity: 1;
    z-index: 2;
}

/* Sit NPC — perches on a letter in the "Lifelike characters." heading.
   Positioned absolutely against .hero-reveal-line-1 (set to position:relative below).
   --npc-x controls horizontal offset from the left edge of the line.
   --npc-y-desktop / --npc-y-mobile control the vertical drop via translateY. */
.hero-reveal-line-1 {
    position: relative;
    overflow: visible;
}

.hero-reveal-npc-sit {
    position: absolute;
    left: var(--npc-x, -245px);
    bottom: 0;
    width: 1200px;
    height: 675px;
    object-fit: contain;
    object-position: center center;
    z-index: 4;
    pointer-events: none;
    transform-origin: 50% 60%;
    transform: scale(0.80) translateY(var(--npc-y-desktop, 5%));
}

@media (max-width: 900px) {
    .hero-reveal-npc-sit {
        left: var(--npc-x-mobile, 75px);
        /* Much bigger container + bigger scale so the size difference is visible. */
        width: 1200px;
        height: 675px;
        transform-origin: 50% 100%;
        transform: scale(1.8) translateY(var(--npc-y-mobile, 31.2%));
    }
}

/* MOBILE-only position for intro NPC. Edit here to move on mobile. */
@media (max-width: 900px) {
    .hero-reveal-npc {
        width: 115%;
        height: 95%;
        top: auto;
        right: -32%;
        bottom: -3.2%;
        transform: none;
        opacity: 1;
    }
}

.hero-reveal-greetings {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.hero-reveal-greetings .hr-greeting {
    position: absolute;
    white-space: nowrap;
    font-family: var(--font);
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--cyan), var(--magenta));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
    opacity: 0;
    transition:
        opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Each greeting: landed position is set here. Starting (off-screen) transform
   defined per-greeting below. When .arrived class is added (via JS), greeting
   flies in to landed position with a gentle, drifting ease. */

/* ==========================================================================
   GREETINGS — DESKTOP positions (min-width: 901px only).
   Wrapped in a min-width media query so these CANNOT leak into mobile.
   To adjust DESKTOP positions, edit values inside this block.
   Mobile positions are defined separately further down in the file.
   ========================================================================== */
@media (min-width: 901px) {
    .hero-reveal-greetings .hrg1 { /* Hello — upper left */
        font-size: clamp(40px, 5.5vw, 96px);
        top: 12%;
        left: 4%;
        transform: translate(-40vw, -15vh) rotate(-3deg);
    }
    .hero-reveal-greetings .hrg2 { /* 你好 — upper right */
        font-size: clamp(52px, 7vw, 128px);
        top: 6%;
        right: 6%;
        transform: translate(40vw, -18vh) rotate(2deg);
    }
    .hero-reveal-greetings .hrg3 { /* Hola — mid left */
        font-size: clamp(36px, 5vw, 88px);
        top: 42%;
        left: 2%;
        transform: translate(-45vw, 0) rotate(2deg);
    }
    .hero-reveal-greetings .hrg4 { /* مرحبا — mid right */
        font-size: clamp(44px, 6vw, 108px);
        top: 28%;
        right: 3%;
        transform: translate(45vw, 0) rotate(-2deg);
    }
    .hero-reveal-greetings .hrg5 { /* Bonjour — upper right of centre */
        font-size: clamp(30px, 4.5vw, 76px);
        top: 22%;
        right: 26%;
        transform: translate(25vw, -10vh) rotate(-2deg);
    }
    .hero-reveal-greetings .hrg6 { /* こんにちは — mid-left of centre */
        font-size: clamp(26px, 4vw, 64px);
        top: 56%;
        left: 22%;
        transform: translate(-25vw, 12vh) rotate(2deg);
    }
    .hero-reveal-greetings .hrg7 { /* 안녕하세요 — lower middle */
        font-size: clamp(32px, 4.5vw, 80px);
        bottom: 24%;
        right: 28%;
        transform: translate(20vw, 20vh) rotate(2deg);
    }
    .hero-reveal-greetings .hrg8 { /* Ciao — upper-middle left */
        font-size: clamp(28px, 4vw, 68px);
        top: 30%;
        left: 18%;
        transform: translate(-20vw, -5vh) rotate(-2deg);
    }
    .hero-reveal-greetings .hrg9 { /* Hallo — bottom left */
        font-size: clamp(34px, 5vw, 84px);
        bottom: 16%;
        left: 8%;
        transform: translate(-30vw, 20vh) rotate(-3deg);
    }
    .hero-reveal-greetings .hrg10 { /* Olá — bottom right of centre */
        font-size: clamp(30px, 4.5vw, 72px);
        bottom: 10%;
        right: 18%;
        transform: translate(25vw, 18vh) rotate(2deg);
    }
    .hero-reveal-greetings .hrg11 { /* Привет — upper-middle right */
        font-size: clamp(38px, 5.5vw, 92px);
        top: 20%;
        left: 36%;
        transform: translate(0, -30vh) rotate(0deg);
    }
    .hero-reveal-greetings .hrg12 { /* नमस्ते — mid centre */
        font-size: clamp(36px, 5vw, 88px);
        top: 50%;
        right: 12%;
        transform: translate(30vw, 5vh) rotate(-2deg);
    }
    .hero-reveal-greetings .hrg13 { /* Sawubona — lower left of centre */
        font-size: clamp(28px, 4vw, 64px);
        bottom: 10%;
        left: 20%;
        transform: translate(-15vw, 22vh) rotate(-2deg);
    }
    .hero-reveal-greetings .hrg14 { /* Selamat — lower right edge */
        font-size: clamp(30px, 4.5vw, 72px);
        bottom: 6%;
        right: 36%;
        transform: translate(0, 30vh) rotate(2deg);
    }
    .hero-reveal-greetings .hrg15 { /* Γειά σου — upper left of centre */
        font-size: clamp(32px, 4.5vw, 76px);
        top: 8%;
        left: 32%;
        transform: translate(-15vw, -25vh) rotate(-2deg);
    }
}

/* ==========================================================================
   GREETINGS — MOBILE positions (max-width: 900px only).
   These match what is currently rendering on mobile (perfect, do not touch).
   To adjust MOBILE positions, edit values inside this block.
   ========================================================================== */
@media (max-width: 900px) {
    .hero-reveal-greetings .hrg1 {
        font-size: clamp(40px, 5.5vw, 96px);
        top: 12%;
        left: 4%;
        transform: translate(-40vw, -15vh) rotate(-3deg);
    }
    .hero-reveal-greetings .hrg2 {
        font-size: clamp(52px, 7vw, 128px);
        top: 10%;
        right: 6%;
        transform: translate(40vw, -18vh) rotate(2deg);
    }
    .hero-reveal-greetings .hrg3 {
        font-size: clamp(36px, 5vw, 88px);
        top: 42%;
        left: 2%;
        transform: translate(-45vw, 0) rotate(2deg);
    }
    .hero-reveal-greetings .hrg4 {
        font-size: clamp(44px, 6vw, 108px);
        top: 28%;
        right: 3%;
        transform: translate(45vw, 0) rotate(-2deg);
    }
    .hero-reveal-greetings .hrg5 {
        font-size: clamp(30px, 4.5vw, 76px);
        top: 24%;
        right: 26%;
        transform: translate(25vw, -10vh) rotate(-2deg);
    }
    .hero-reveal-greetings .hrg6 {
        font-size: clamp(26px, 4vw, 64px);
        top: 56%;
        left: 16%;
        transform: translate(-25vw, 12vh) rotate(2deg);
    }
    .hero-reveal-greetings .hrg7 {
        font-size: clamp(32px, 4.5vw, 80px);
        bottom: 26%;
        right: 10%;
        transform: translate(20vw, 20vh) rotate(2deg);
    }
    .hero-reveal-greetings .hrg8 {
        font-size: clamp(28px, 4vw, 68px);
        top: 30%;
        left: 18%;
        transform: translate(-20vw, -5vh) rotate(-2deg);
    }
    .hero-reveal-greetings .hrg9 {
        font-size: clamp(34px, 5vw, 84px);
        bottom: 22%;
        left: 8%;
        transform: translate(-30vw, 20vh) rotate(-3deg);
    }
    .hero-reveal-greetings .hrg10 {
        font-size: clamp(30px, 4.5vw, 72px);
        bottom: 10%;
        right: 18%;
        transform: translate(25vw, 18vh) rotate(2deg);
    }
    .hero-reveal-greetings .hrg11 {
        font-size: clamp(38px, 5.5vw, 92px);
        top: 18%;
        left: 30%;
        transform: translate(0, -30vh) rotate(0deg);
    }
    .hero-reveal-greetings .hrg12 {
        font-size: clamp(36px, 5vw, 88px);
        top: 55%;
        right: 8%;
        transform: translate(30vw, 5vh) rotate(-2deg);
    }
    .hero-reveal-greetings .hrg13 {
        font-size: clamp(28px, 4vw, 64px);
        bottom: 50%;
        left: 40%;
        transform: translate(-15vw, 22vh) rotate(-2deg);
    }
    .hero-reveal-greetings .hrg14 {
        font-size: clamp(30px, 4.5vw, 72px);
        bottom: 10%;
        right: 50%;
        transform: translate(0, 30vh) rotate(2deg);
    }
    .hero-reveal-greetings .hrg15 {
        font-size: clamp(32px, 4.5vw, 76px);
        top: 4%;
        left: 32%;
        transform: translate(-15vw, -25vh) rotate(-2deg);
    }
}

/* When a greeting is marked .arrived, it flies into place and starts drifting */
.hero-reveal-greetings .hr-greeting.arrived {
    opacity: 0.32;
    transform: translate(0, 0) rotate(0deg);
}

/* After arriving, pick up gentle drift (animation starts after the fly-in transition completes) */
.hero-reveal-greetings .hrg1.arrived  { animation: drift1 8s ease-in-out 1.8s infinite alternate; }
.hero-reveal-greetings .hrg2.arrived  { animation: drift2 10s ease-in-out 1.8s infinite alternate; }
.hero-reveal-greetings .hrg3.arrived  { animation: drift2 9s ease-in-out 1.8s infinite alternate-reverse; }
.hero-reveal-greetings .hrg4.arrived  { animation: drift2 11s ease-in-out 1.8s infinite alternate; }
.hero-reveal-greetings .hrg5.arrived  { animation: drift2 12s ease-in-out 1.8s infinite alternate-reverse; }
.hero-reveal-greetings .hrg6.arrived  { animation: drift1 10s ease-in-out 1.8s infinite alternate; }
.hero-reveal-greetings .hrg7.arrived  { animation: drift1 11s ease-in-out 1.8s infinite alternate-reverse; }
.hero-reveal-greetings .hrg8.arrived  { animation: drift2 9s ease-in-out 1.8s infinite alternate; }
.hero-reveal-greetings .hrg9.arrived  { animation: drift1 11s ease-in-out 1.8s infinite alternate; }
.hero-reveal-greetings .hrg10.arrived { animation: drift2 10s ease-in-out 1.8s infinite alternate-reverse; }
.hero-reveal-greetings .hrg11.arrived { animation: drift1 9s ease-in-out 1.8s infinite alternate; }
.hero-reveal-greetings .hrg12.arrived { animation: drift2 12s ease-in-out 1.8s infinite alternate; }
.hero-reveal-greetings .hrg13.arrived { animation: drift1 10s ease-in-out 1.8s infinite alternate-reverse; }
.hero-reveal-greetings .hrg14.arrived { animation: drift2 11s ease-in-out 1.8s infinite alternate; }
.hero-reveal-greetings .hrg15.arrived { animation: drift1 8s ease-in-out 1.8s infinite alternate-reverse; }

/* Suppress the BAM flash on the second reveal — we want gentler arrival */
.hero-reveal-lang.line-2-active .hero-reveal-line-2 {
    animation: none;
}

/* Override the BAM scale/blur transform on second reveal's line 2 —
   container stays in place; each word reveals individually below */
.hero-reveal-lang .hero-reveal-line-2 {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
}

.hero-reveal-lang .reveal-word {
    display: inline-block;
    opacity: 0;
    transform: scale(1.6) translateY(20px);
    transform-origin: center bottom;
    filter: blur(14px);
    transition:
        opacity 0.9s cubic-bezier(0.22, 1.4, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1.4, 0.36, 1),
        filter 0.6s ease-out,
        text-shadow 0.5s ease-out;
}

/* Stagger each word as line-2 activates — each word lands with a cyan glow flash that fades */
.hero-reveal-lang.line-2-active .reveal-word:nth-child(1) {
    transition-delay: 0s;
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
    animation: word-glow 1.2s ease-out 0s 1;
}
.hero-reveal-lang.line-2-active .reveal-word:nth-child(2) {
    transition-delay: 0.7s;
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
    animation: word-glow 1.2s ease-out 0.7s 1;
}
.hero-reveal-lang.line-2-active .reveal-word:nth-child(3) {
    transition-delay: 1.4s;
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
    animation: word-glow 1.2s ease-out 1.4s 1;
}

@keyframes word-glow {
    0%   { text-shadow: 0 0 0 rgba(0, 255, 255, 0); }
    30%  { text-shadow: 0 0 40px rgba(0, 255, 255, 0.9), 0 0 80px rgba(255, 0, 134, 0.5); }
    100% { text-shadow: 0 0 0 rgba(0, 255, 255, 0); }
}

/* Underline draws AFTER all words have landed — quick + tight so it completes within the section runway */
.hero-reveal-lang.line-2-active .hero-reveal-line-2 .anim-underline::after {
    transform: scaleX(1);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.8s;
}

@media (max-width: 900px) {
    .hero-reveal-greetings .hr-greeting { font-size: 28px !important; }
}

/* ==========================================================================
   HORIZONTAL SCROLL FEATURE SECTION (4-panel: Inclusive / Accessible / Multilingual / Lifelike)
   Native horizontal swipe with scroll-snap. Section pins via tall outer + sticky inner.
   ========================================================================== */
.h-scroll {
    position: relative;
    background: var(--black);
    margin-top: clamp(60px, 10vh, 120px); /* clear gap from previous section */
    height: 200vh; /* gives the sticky inner room to hold while user swipes */
}

.h-scroll-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.h-scroll-header-outer {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: clamp(80px, 12vh, 140px) var(--section-pad-x) clamp(40px, 5vh, 64px);
    text-align: left;
}

.h-scroll-header-outer .section-eyebrow {
    margin-bottom: 24px;
}

.h-scroll-header-outer .section-title {
    margin-bottom: 0;
    font-size: clamp(36px, 5vw, 72px);
}

.h-scroll-header {
    /* legacy — unused now that header is outside the sticky wrapper */
    display: none;
}

.h-scroll-track-wrap {
    flex: 1;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    position: relative;
    /* hide scrollbar visually but keep functionality */
    scrollbar-width: none;
}
.h-scroll-track-wrap::-webkit-scrollbar { display: none; }

.h-scroll-track {
    display: flex;
    height: 100%;
    width: max-content;
}

.h-scroll-panel {
    width: 100vw;
    height: 100%;
    flex-shrink: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(40px, 6vh, 80px) clamp(60px, 6vw, 120px);
    position: relative;
    overflow: hidden;
}

/* Subtle vertical divider between panels for clear separation */
.h-scroll-panel + .h-scroll-panel::before {
    content: '';
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--gray-800) 30%, var(--gray-800) 70%, transparent);
    opacity: 0.6;
}

.h-scroll-panel-inner {
    max-width: var(--max-width);
    width: 100%;
    /* FIXED HEIGHT — every panel is the same size regardless of content.
       If text doesn't fit, the text gets edited. The container doesn't move. */
    height: clamp(640px, 82vh, 820px);
    position: relative;
    z-index: 1;
    padding: clamp(40px, 5vh, 72px) clamp(32px, 4vw, 64px);
    border: 1px solid var(--gray-800);
    border-radius: 24px;
    background: rgba(14, 14, 14, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        0 30px 80px -30px rgba(0, 255, 255, 0.18),
        0 0 60px -20px rgba(255, 0, 134, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.h-scroll-panel-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.25), transparent 35%, transparent 65%, rgba(255, 0, 134, 0.25));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 3;
}

/* Motif is now an underlay/accent — absolutely positioned, BEHIND text and feature boxes */
.h-scroll-panel-motif {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    opacity: 0.18;
    filter: blur(0.5px);
}

.h-scroll-panel-text {
    max-width: 100%;
    width: 100%;
    position: relative;
    z-index: 2;
}

.h-scroll-panel-text > p {
    max-width: 880px;
}

.h-scroll-panel-text h3 {
    font-size: var(--h2);
    font-weight: var(--h2-weight);
    line-height: var(--h2-line);
    letter-spacing: var(--h2-tracking);
    margin-bottom: 20px;
    color: var(--white);
}

.h-scroll-panel-text h4 {
    font-size: var(--h3);
    font-weight: var(--h3-weight);
    line-height: var(--h3-line);
    letter-spacing: var(--h3-tracking);
    margin-bottom: 28px;
    color: var(--cyan);
}

.h-scroll-panel-text > p {
    font-size: var(--body-large);
    line-height: var(--body-line);
    color: var(--white);
    margin-bottom: 36px;
    opacity: 0.92;
    max-width: 720px;
}

.h-scroll-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px;
    gap: 18px;
    width: 100%;
    max-width: 100%;
}

.h-scroll-feature {
    border: 1px solid var(--gray-800);
    border-radius: 14px;
    padding: 24px 22px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 220px;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.h-scroll-feature:hover {
    border-color: var(--cyan);
    background: rgba(0, 255, 255, 0.04);
    transform: translateY(-2px);
}

.h-scroll-feature h5 {
    font-size: 20px;
    font-weight: 600;
    color: var(--cyan);
    margin-bottom: 10px;
    letter-spacing: -0.005em;
    line-height: 1.3;
}

.h-scroll-feature p {
    font-size: 18px;
    line-height: 2;
    color: var(--white);
    margin-bottom: 0;
    opacity: 0.92;
    font-weight: 400;
}

.h-scroll-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--gray-800);
    cursor: pointer;
}

.h-scroll-dot {
    width: 28px;
    height: 4px;
    border-radius: 4px;
    background: var(--gray-700);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.h-scroll-dot.active {
    background: var(--cyan);
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.6);
    width: 40px;
}

.h-scroll-dot.completed {
    background: var(--cyan);
    opacity: 0.4;
}

/* ==========================================================================
   MOTIFS — SVG/text accents per panel
   Float in when the panel is active.
   ========================================================================== */
.motif {
    width: 100%;
    height: auto;
    opacity: 1; /* shown via parent .h-scroll-panel-motif opacity */
}

/* Position each motif differently for visual variety */
/* First h-scroll section (Inclusive / Accessible) */
#hScroll .h-scroll-panel[data-panel="0"] .h-scroll-panel-motif {
    top: 0%;
    right: 4%;
    left: auto;
    transform: none;
    width: 32vw;
    max-width: 460px;
    opacity: 0.22;
}
#hScroll .h-scroll-panel[data-panel="1"] .h-scroll-panel-motif {
    top: 0;
    right: 6%;
    left: auto;
    transform: none;
    width: 32vw;
    max-width: 435px;
    opacity: 0.22;
}

/* Second h-scroll section (Lifelike / Multilingual) */
#hScrollLang .h-scroll-panel[data-panel="0"] .h-scroll-panel-motif {
    top: 0%;
    right: 4%;
    left: auto;
    transform: none;
    width: 32vw;
    max-width: 460px;
    opacity: 0.28;
}
#hScrollLang .h-scroll-panel[data-panel="1"] .h-scroll-panel-motif {
    top: 6%;
    right: 4%;
    left: auto;
    transform: none;
    width: 32vw;
    max-width: 460px;
    opacity: 0.28;
}

/* Legacy rules (no longer used after section restructure but kept harmless) */
.h-scroll-panel[data-panel="2"] .h-scroll-panel-motif,
.h-scroll-panel[data-panel="3"] .h-scroll-panel-motif {
    /* superseded by section-scoped rules above */
}

.motif-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    display: block;
}

/* Infinity loop — slow continuous rotation while active */
.motif-infinity {
    max-width: 100%;
}

.motif-infinity {
    animation: motif-float 8s ease-in-out infinite alternate;
}

@keyframes motif-float {
    from { transform: translateY(-12px) rotate(-1deg); }
    to   { transform: translateY(12px) rotate(1deg); }
}

/* Rings (Inclusive by Design) — the three interlocking rings rotate slowly
   to match the energy of the other motifs in this section. */
.motif-rings {
    max-width: 100%;
}

.motif-rings g {
    transform-origin: 200px 200px;
    animation: motif-spin 40s linear infinite;
}

/* Globe — slow rotation */
.motif-globe {
    max-width: 100%;
}

.motif-globe g {
    transform-origin: 200px 200px;
    animation: motif-spin 60s linear infinite;
}

@keyframes motif-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Multilingual greetings — layered translucent text */
.motif-greetings {
    position: relative;
    width: 100%;
    height: 100%;
    font-family: var(--font);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.motif-greetings .greeting {
    position: absolute;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--cyan), var(--magenta));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
}

.motif-greetings .g1 {
    font-size: clamp(56px, 8vw, 140px);
    top: 17%;
    left: 1%;
    animation: drift1 8s ease-in-out infinite alternate;
}
.motif-greetings .g2 {
    font-size: clamp(80px, 10vw, 180px);
    top: 30%;
    right: 6%;
    animation: drift2 10s ease-in-out infinite alternate;
}
.motif-greetings .g3 {
    font-size: clamp(48px, 7vw, 120px);
    bottom: 18%;
    left: 10%;
    animation: drift2 9s ease-in-out infinite alternate-reverse;
}
.motif-greetings .g4 {
    font-size: clamp(64px, 9vw, 160px);
    bottom: 8%;
    right: 18%;
    animation: drift2 11s ease-in-out infinite alternate;
}
.motif-greetings .g5 {
    font-size: clamp(40px, 6vw, 96px);
    top: 17%;
    right: 33%;
    animation: drift2 12s ease-in-out infinite alternate-reverse;
}
.motif-greetings .g6 {
    font-size: clamp(36px, 5vw, 84px);
    top: 40%;
    left: 28%;
    animation: drift1 10s ease-in-out infinite alternate;
}
.motif-greetings .g7 {
    font-size: clamp(44px, 6vw, 100px);
    top: -2%;
    right: 18%;
    animation: drift1 11s ease-in-out infinite alternate-reverse;
}
.motif-greetings .g8 {
    font-size: clamp(40px, 5.5vw, 92px);
    top: 15%;
    right: 2%;
    animation: drift2 9s ease-in-out infinite alternate;
}

@keyframes drift1 {
    from { transform: translateY(-6px) translateX(-4px); }
    to   { transform: translateY(6px) translateX(4px); }
}
@keyframes drift2 {
    from { transform: translateY(8px) translateX(6px); }
    to   { transform: translateY(-8px) translateX(-6px); }
}

/* Soundwave / equaliser — bars pulse when active */
.motif-soundwave {
    max-width: 100%;
}

.motif-soundwave .bar {
    transform-origin: center;
    animation: bar-pulse 1.2s ease-in-out infinite alternate;
}
.motif-soundwave .b1  { animation-delay: 0.0s;  }
.motif-soundwave .b2  { animation-delay: 0.1s;  }
.motif-soundwave .b3  { animation-delay: 0.18s; }
.motif-soundwave .b4  { animation-delay: 0.05s; }
.motif-soundwave .b5  { animation-delay: 0.22s; }
.motif-soundwave .b6  { animation-delay: 0.12s; }
.motif-soundwave .b7  { animation-delay: 0.28s; }
.motif-soundwave .b8  { animation-delay: 0.07s; }
.motif-soundwave .b9  { animation-delay: 0.20s; }
.motif-soundwave .b10 { animation-delay: 0.15s; }
.motif-soundwave .b11 { animation-delay: 0.25s; }
.motif-soundwave .b12 { animation-delay: 0.10s; }

@keyframes bar-pulse {
    from { transform: scaleY(0.5); }
    to   { transform: scaleY(1.05); }
}

/* Mobile fallback — keep horizontal swipe (it's native touch) but adjust sizing.
   Headings (h3, h4) inherit from --h2 / --h3 tokens — no font-size override needed. */
@media (max-width: 900px) {
    .h-scroll-header .section-title { font-size: clamp(24px, 5.5vw, 36px); }
    .h-scroll-panel { padding: 0 24px 80px; }
    .h-scroll-panel-text > p { font-size: 16px; }
    .h-scroll-features { grid-template-columns: 1fr 1fr; }
    .h-scroll-feature { padding: 16px 18px; }
    .h-scroll-feature h5 { font-size: 14px; }
    .h-scroll-feature p { font-size: 12.5px; }
}

@media (max-width: 600px) {
    .h-scroll-features { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FORMS (start-looping page) — dark card with cyan-bordered inputs
   ========================================================================== */
.form-card {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(40px, 5vw, 64px);
    border: 1px solid var(--gray-800);
    border-radius: 24px;
    background:
        radial-gradient(circle at 20% 0%, rgba(0, 255, 255, 0.04), transparent 60%),
        radial-gradient(circle at 80% 100%, rgba(255, 0, 134, 0.04), transparent 60%),
        var(--black-card);
    position: relative;
    overflow: hidden;
}

.form-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.25), transparent 40%, transparent 60%, rgba(255, 0, 134, 0.25));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.form-card h3 {
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    color: var(--white);
}

.form-card > p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--gray-300);
    margin-bottom: 32px;
}

.form-field {
    margin-bottom: 24px;
}

.form-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 10px;
    letter-spacing: 0.01em;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 400;
    color: var(--white);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--gray-800);
    border-radius: 10px;
    transition: all 0.2s ease;
    line-height: 1.5;
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--cyan);
    background: rgba(0, 255, 255, 0.03);
    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.1);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--gray-500);
}

.form-field textarea {
    min-height: 120px;
    resize: vertical;
}

/* Checkbox / radio options grid */
.form-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.form-options label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 400;
    color: var(--white);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--gray-800);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 0;
    letter-spacing: 0;
}

.form-options label:hover {
    border-color: var(--cyan);
    background: rgba(0, 255, 255, 0.04);
}

.form-options input[type="checkbox"],
.form-options input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--cyan);
    cursor: pointer;
    flex-shrink: 0;
}

.form-options label:has(input:checked) {
    border-color: var(--cyan);
    background: rgba(0, 255, 255, 0.08);
}

@media (max-width: 600px) {
    .form-options { grid-template-columns: 1fr; }
}

/* Form submit message (success / error) */
.form-message {
    margin-top: 20px;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    display: none;
}

.form-message.success {
    display: block;
    background: rgba(0, 255, 255, 0.08);
    border: 1px solid rgba(0, 255, 255, 0.25);
    color: var(--cyan);
}

.form-message.error {
    display: block;
    background: rgba(255, 0, 134, 0.08);
    border: 1px solid rgba(255, 0, 134, 0.25);
    color: var(--magenta);
}

/* ==========================================================================
   CONTACT GRID (start-looping page)
   ========================================================================== */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}

.contact-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 32px 28px;
    background: var(--black-card);
    border: 1px solid var(--gray-800);
    border-radius: 16px;
    transition: all 0.3s ease;
    text-align: left;
}

.contact-card:hover {
    border-color: var(--cyan);
    background: var(--black-elev);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -20px rgba(0, 255, 255, 0.25);
}

.contact-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cyan);
}

.contact-value {
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 500;
    color: var(--white);
    letter-spacing: -0.01em;
    word-break: break-word;
}

@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ILM PAGE — Two-column comparison block (Ready-to-Use vs Custom)
   ========================================================================== */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 24px;
}

.two-col-text {
    padding: 40px 36px;
    background: var(--black-card);
    border: 1px solid var(--gray-800);
    border-radius: 20px;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.two-col-text::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), transparent 50%, rgba(255, 0, 134, 0.2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.two-col-text:hover::before { opacity: 1; }
.two-col-text:hover {
    transform: translateY(-4px);
    background: var(--black-elev);
}

.two-col-text h3 {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 20px;
    line-height: 1.2;
}

.two-col-text p {
    font-size: 16px;
    line-height: 2;
    color: var(--gray-300);
    margin-bottom: 16px;
    font-weight: 400;
}

.two-col-text p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .two-col { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ILM PAGE — Environment cards grid
   ========================================================================== */
.env-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 24px;
}

.env-card {
    padding: 36px 32px;
    background: var(--black-card);
    border: 1px solid var(--gray-800);
    border-radius: 20px;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.env-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, transparent, transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: background 0.4s ease;
}

.env-card:hover {
    transform: translateY(-6px);
    background: var(--black-elev);
    border-color: rgba(0, 255, 255, 0.3);
}

.env-card:hover::after {
    background: linear-gradient(135deg, var(--cyan), transparent 50%, var(--magenta));
}

.env-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 16px;
    padding: 6px 12px;
    border: 1px solid rgba(0, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(0, 255, 255, 0.04);
}

.env-card h3 {
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin-bottom: 16px;
    color: var(--white);
}

.env-card p {
    font-size: 15px;
    line-height: 2;
    color: var(--gray-300);
    font-weight: 400;
    margin: 0;
}

@media (max-width: 900px) {
    .env-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ILM PAGE — "Still teaching like it's 1980?" hero pixelated moment
   ========================================================================== */
.hero-1980 {
    position: relative;
    background: var(--black);
    padding: clamp(100px, 16vh, 180px) 0 clamp(80px, 12vh, 140px);
    overflow: hidden;
    text-align: center;
}

.hero-1980::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0, 255, 255, 0.06), transparent 70%),
        radial-gradient(ellipse 50% 40% at 30% 80%, rgba(255, 0, 134, 0.04), transparent 70%);
    pointer-events: none;
}

.hero-1980-inner {
    position: relative;
    z-index: 2;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--section-pad-x);
}

.hero-1980-title {
    font-size: clamp(40px, 7vw, 112px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--white);
    margin: 0 auto;
    max-width: 1400px;
}

.pixel-1980 {
    font-family: 'VT323', 'Courier New', monospace;
    font-weight: 400;
    color: var(--cyan);
    text-shadow:
        0 0 6px var(--cyan),
        2px 0 0 var(--magenta),
        -2px 0 0 var(--cyan),
        0 0 24px rgba(0, 255, 255, 0.6);
    letter-spacing: 0.04em;
    display: inline-block;
    animation: pixel-flicker 4s ease-in-out infinite;
    font-size: 1.05em;
    vertical-align: baseline;
}

@keyframes pixel-flicker {
    0%, 100% { opacity: 1; text-shadow: 0 0 6px var(--cyan), 2px 0 0 var(--magenta), -2px 0 0 var(--cyan), 0 0 24px rgba(0, 255, 255, 0.6); }
    45% { opacity: 1; }
    47% { opacity: 0.6; text-shadow: 0 0 0 var(--cyan); }
    49% { opacity: 1; text-shadow: 0 0 6px var(--cyan), 2px 0 0 var(--magenta), -2px 0 0 var(--cyan), 0 0 24px rgba(0, 255, 255, 0.6); }
    93% { opacity: 1; }
    94% { opacity: 0.7; }
    96% { opacity: 1; }
}

.hero-1980-sub {
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    color: var(--gray-300);
    margin-top: 32px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* ==========================================================================
   ILM PAGE — "You Choose" sticky-left, scrolling-right section
   Reuses edu-redefined pattern
   ========================================================================== */
.you-choose {
    position: relative;
    background: var(--black);
}

.you-choose-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: start;
    gap: 0;
}

.you-choose-pin {
    position: sticky;
    top: 80px;
    height: calc(100vh - 80px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(40px, 6vw, 80px);
    background:
        radial-gradient(circle at 30% 40%, rgba(0, 255, 255, 0.08), transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(255, 0, 134, 0.08), transparent 60%),
        var(--black);
}

.you-choose-headline {
    font-size: var(--h1);
    font-weight: var(--h1-weight);
    line-height: var(--h1-line);
    letter-spacing: var(--h1-tracking);
    color: var(--white);
}

.you-choose-headline > span {
    display: block;
    margin-bottom: 0.3em;
}

/* Gap between the two thoughts: "You choose the setting." and "We customise the delivery." */
.you-choose-headline > span:nth-child(2) {
    margin-bottom: 1.2em;
}

.you-choose-headline > span:last-child {
    margin-bottom: 0;
}

.you-choose-scroll {
    padding: clamp(60px, 10vh, 120px) clamp(40px, 5vw, 96px) clamp(200px, 50vh, 440px);
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 5vh, 64px);
    min-height: 250vh;
}

.you-choose-scroll .section-eyebrow {
    margin-bottom: 0;
    align-self: flex-start;
}

.you-choose-scroll .section-eyebrow + .you-choose-panel {
    margin-top: clamp(-32px, -2vh, -16px);
}

/* Subsection heading — cyan, h3 size on desktop, bumped on mobile for hierarchy. */
.you-choose-panel-heading {
    font-size: var(--h3);
    font-weight: var(--h3-weight);
    line-height: var(--h3-line);
    letter-spacing: var(--h3-tracking);
    color: var(--cyan);
    margin: 0 0 16px;
}

.you-choose-panel p {
    font-size: var(--body-large);
    line-height: var(--body-line);
    color: var(--white);
    font-weight: 400;
    opacity: 0.92;
    margin: 0 0 16px;
}

.you-choose-panel p:last-child { margin-bottom: 0; }

.you-choose-panel p strong {
    color: var(--cyan);
    font-weight: 600;
    opacity: 1;
}

@media (max-width: 900px) {
    .you-choose-grid {
        grid-template-columns: 1fr;
    }
    .you-choose-pin {
        position: relative;
        height: 50vh;
    }
    .you-choose-scroll {
        padding: 64px 32px;
        gap: 48px;
        min-height: auto;
    }
    .you-choose-headline {
        font-size: clamp(32px, 7vw, 56px);
    }

    /* Mobile: bump panel heading from h3 token (~22px) to be more prominent. */
    .you-choose-panel-heading {
        font-size: 30px;
    }
}

/* ==========================================================================
   ILM PAGE — Closing CTA (proper hero-sized, not strip)
   ========================================================================== */
.cta-hero {
    position: relative;
    padding: clamp(120px, 18vh, 200px) 0;
    background: var(--black);
    text-align: center;
    overflow: hidden;
}

.cta-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% 50%, rgba(0, 255, 255, 0.06), transparent 65%),
        radial-gradient(ellipse 50% 40% at 30% 70%, rgba(255, 0, 134, 0.05), transparent 70%);
    pointer-events: none;
}

.cta-hero-inner {
    position: relative;
    z-index: 2;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--section-pad-x);
}

.cta-hero-title {
    font-size: var(--h1);
    font-weight: var(--h1-weight);
    line-height: var(--h1-line);
    letter-spacing: var(--h1-tracking);
    color: var(--white);
    margin: 0 0 32px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.cta-hero-lede {
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 2;
    color: var(--white);
    max-width: 760px;
    margin: 0 auto 48px;
    opacity: 0.92;
}

/* ==========================================================================
   ILM PAGE — HERO (proper full-height, eyebrow + ILM title + lede + footnote + buttons)
   ========================================================================== */
.ilm-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    /* Top padding only needs to clear the fixed nav (~80px) plus a touch of breathing room;
       bottom padding stays generous to separate from the next section. */
    padding: clamp(80px, 10vh, 120px) 0 clamp(80px, 12vh, 140px);
    background: var(--black);
}

/* Asterisk shrunk relative to surrounding text so it reads as a footnote marker, not part of the word. */
.ilm-asterisk {
    font-size: 0.65em;
    vertical-align: super;
    color: var(--cyan);
    margin-left: 1px;
}

.ilm-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 20% 30%, rgba(0, 255, 255, 0.12), transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 70%, rgba(255, 0, 134, 0.12), transparent 60%),
        radial-gradient(ellipse 50% 40% at 50% 50%, rgba(0, 255, 255, 0.04), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* CRT-style scanline overlay for ambient atmosphere */
.ilm-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 3px,
        rgba(0, 255, 255, 0.015) 3px,
        rgba(0, 255, 255, 0.015) 4px
    );
    pointer-events: none;
    z-index: 1;
}

/* Ambient drifting orbs — adds movement and atmosphere */
.ilm-hero-ambient {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.ilm-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    will-change: transform;
}

.ilm-hero-orb-1 {
    width: 420px;
    height: 420px;
    top: 10%;
    left: 8%;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.45), transparent 70%);
    animation: ilm-orb-drift-a 18s ease-in-out infinite alternate;
}

.ilm-hero-orb-2 {
    width: 360px;
    height: 360px;
    bottom: 12%;
    right: 10%;
    background: radial-gradient(circle, rgba(255, 0, 134, 0.4), transparent 70%);
    animation: ilm-orb-drift-b 22s ease-in-out infinite alternate;
}

.ilm-hero-orb-3 {
    width: 280px;
    height: 280px;
    top: 55%;
    left: 18%;
    background: radial-gradient(circle, rgba(255, 0, 134, 0.28), transparent 70%);
    animation: ilm-orb-drift-a 26s ease-in-out infinite alternate-reverse;
}

.ilm-hero-orb-4 {
    width: 320px;
    height: 320px;
    top: 18%;
    right: 22%;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.3), transparent 70%);
    animation: ilm-orb-drift-b 20s ease-in-out infinite alternate-reverse;
}

@keyframes ilm-orb-drift-a {
    from { transform: translate(-20px, -10px) scale(1); }
    to   { transform: translate(30px, 20px) scale(1.1); }
}

@keyframes ilm-orb-drift-b {
    from { transform: translate(20px, 10px) scale(1.05); }
    to   { transform: translate(-30px, -20px) scale(0.95); }
}

.ilm-hero-inner {
    position: relative;
    z-index: 2;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--section-pad-x);
    width: 100%;
    text-align: left;
    /* Nudge content up so it doesn't sit dead-centre — feels more balanced visually,
       matches the home hero's transform pattern. */
    transform: translateY(-4vh);
}

.ilm-hero-eyebrow {
    margin-bottom: 32px;
}

.ilm-hero-title {
    font-size: var(--h1);
    font-weight: var(--h1-weight);
    line-height: var(--h1-line);
    letter-spacing: var(--h1-tracking);
    color: var(--white);
    margin: 0 0 32px;
    max-width: none;
    text-align: left;
}

.ilm-hero-title-line {
    display: block;
}

.ilm-hero-title .ilm-cap {
    color: var(--magenta);
}

.ilm-hero-lede {
    font-size: var(--body-large);
    line-height: var(--body-line);
    color: var(--white);
    max-width: 900px;
    margin: 0 0 12px;
    opacity: 0.9;
    text-align: left;
}

.ilm-hero-footnote {
    font-size: clamp(12px, 0.85vw, 14px);
    font-style: italic;
    color: var(--cyan);
    margin: 0 0 40px;
    opacity: 0.85;
    text-align: left;
}

.ilm-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

@media (max-width: 600px) {
    .ilm-hero-orb { filter: blur(40px); }
    .ilm-hero-orb-1, .ilm-hero-orb-4 { width: 240px; height: 240px; }
    .ilm-hero-orb-2, .ilm-hero-orb-3 { width: 200px; height: 200px; }
}

/* ==========================================================================
   ILM PAGE — PRESS START GATE
   Sticky-pinned arcade screen. Character walks in from the LEFT and pushes
   the Press Start button into place. If user idles, character jumps with a
   pixel speech bubble. Click required to continue (unlocks audio + scrolls).
   ========================================================================== */
.press-start-gate {
    position: relative;
    background: var(--black);
    /* Tall outer so the sticky inner stays pinned long enough for the rope-drag animation
       to play out over multiple scroll inputs (not just one wheel notch). */
    height: 360vh;
}

.press-start-gate-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 var(--section-pad-x);
}

.press-start-gate-sticky::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0, 255, 255, 0.08), transparent 70%),
        radial-gradient(ellipse 40% 30% at 30% 70%, rgba(255, 0, 134, 0.05), transparent 70%);
    pointer-events: none;
}

.press-start-gate-sticky::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 3px,
        rgba(0, 255, 255, 0.02) 3px,
        rgba(0, 255, 255, 0.02) 4px
    );
    pointer-events: none;
}

.press-start-stage {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Button wrapper — holds the SVG pixel-art border + the inner button.
   Sits inside the push-group; doesn't translate independently. */
.press-start-btn-wrap {
    position: relative;
    display: inline-block;
    z-index: 3;
}

/* The pixel-art SVG border sits behind the button, sized to its full bounds */
.press-start-btn-border {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    filter: drop-shadow(0 0 18px rgba(0, 255, 255, 0.5));
    transition: filter 0.3s ease;
}

/* When pushed-in is on the push-group, the button's border pulses */
.press-start-push-group.pushed-in .press-start-btn-border {
    animation: press-start-border-pulse 1.4s steps(2) infinite;
}

@keyframes press-start-border-pulse {
    0%, 49%   { filter: drop-shadow(0 0 18px rgba(0, 255, 255, 0.5)); }
    50%, 100% { filter: drop-shadow(0 0 24px rgba(255, 0, 134, 0.6)); }
}

/* The actual button — pure inner content, transparent so the SVG border shows through */
.press-start-btn {
    position: relative;
    z-index: 2;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(20px, 2.8vw, 36px);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--black);
    border: 0;
    border-radius: 0;
    padding: clamp(22px, 3.2vh, 36px) clamp(40px, 5.5vw, 72px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: clamp(16px, 2vw, 24px);
    transition: color 0.2s ease, background 0.2s ease;
    text-shadow: 0 0 12px rgba(0, 255, 255, 0.6);
    /* Margin pushes button content INSIDE the SVG pixel border */
    margin: 8px;
}

.press-start-push-group.pushed-in .press-start-btn:hover {
    background: rgba(0, 255, 255, 0.08);
    color: var(--cyan);
}

.press-start-push-group.pushed-in .press-start-btn:active {
    background: rgba(0, 255, 255, 0.12);
}

.press-start-label {
    position: relative;
}

.press-start-blink {
    color: var(--magenta);
    font-size: 0.7em;
    animation: press-start-blink 1s steps(2) infinite;
    text-shadow: 0 0 8px rgba(255, 0, 134, 0.8);
}

/* Old animation (no longer used — kept harmless in case other elements reference it) */
@keyframes press-start-pulse {
    0%, 100% { transform: scale(1); }
}

@keyframes press-start-blink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Push group — flex row containing character + button.
   The character has negative margin so he overlaps the button's left edge.
   The whole group is what translates left/right as user scrolls. */
.press-start-push-group {
    display: inline-flex;
    align-items: center;
    transform: translateX(-60vw);
    opacity: 0;
    transition:
        transform 0.4s ease-out,
        opacity 0.4s ease-out;
    z-index: 3;
    position: relative;
}

.press-start-push-group.pushed-in {
    transform: translateX(0);
    opacity: 1;
}

/* The 8-bit character — sits as the first flex item, overlapping the button via negative margin. */
.press-start-character {
    width: clamp(70px, 8vw, 115px);
    height: clamp(72px, 9vw, 120px);
    /* Negative margin pulls the button leftward so character's right edge (hands)
       visually overlaps the button's left edge. */
    margin-right: -10px;
    position: relative;
    z-index: 4;
    flex-shrink: 0;
}

.press-start-character svg {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Pushing wobble */
.press-start-character.pushing {
    animation: press-start-push 0.5s steps(2) infinite;
}

@keyframes press-start-push {
    0%, 100% { transform: translateY(0) translateX(0); }
    50%      { transform: translateY(-2px) translateX(1px); }
}

/* Idle jumping */
.press-start-character.idle-jumping {
    animation: press-start-idle-jump 0.7s ease-in-out infinite;
}

@keyframes press-start-idle-jump {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-24px); }
}

/* Speech bubble — positioned above the centre of the stage where the push-group sits when home.
   Stays in the stage so it doesn't move with the push group's translation. */
.press-start-bubble {
    position: absolute;
    /* Anchored above the centre of the button area */
    bottom: 60%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    z-index: 5;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(11px, 1.2vw, 16px);
    color: var(--black);
    background: var(--white);
    padding: 14px 20px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 3px solid var(--black);
    box-shadow:
        4px 4px 0 var(--cyan),
        8px 8px 0 var(--magenta);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
}

.press-start-bubble.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    animation: bubble-wiggle 0.5s ease-in-out infinite alternate;
}

@keyframes bubble-wiggle {
    from { transform: translateX(-50%) translateY(0) rotate(-1deg); }
    to   { transform: translateX(-50%) translateY(-4px) rotate(1deg); }
}

/* Speech bubble tail (downward pointer towards character) */
.press-start-bubble-tail {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 14px solid var(--white);
}

.press-start-bubble-tail::before {
    content: '';
    position: absolute;
    left: -13px;
    top: -14px;
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 17px solid var(--black);
    z-index: -1;
}

/* Activated state — fade the push group */
.press-start-gate.activated .press-start-push-group {
    animation: none;
    opacity: 0.4;
    pointer-events: none;
}

.press-start-gate.activated .press-start-btn-border {
    filter: grayscale(1) opacity(0.5);
    animation: none;
}

.press-start-gate.activated .press-start-btn {
    color: var(--gray-500);
    cursor: default;
}

.press-start-gate.activated .press-start-blink { display: none; }
.press-start-gate.activated .press-start-bubble { display: none; }
.press-start-gate.activated .press-start-character { opacity: 0.5; }

@media (max-width: 600px) {
    .press-start-gate { height: 300vh; }
    .press-start-bubble { font-size: 10px; padding: 10px 14px; }
}

/* ==========================================================================
   ILM PAGE — "Still teaching like it's 1980?" 8-BIT PIXEL SCROLL SECTION
   Sticky pinned scroll animation. Pixel character walks across, stops at each
   digit slot, hammers/points to summon a pixel rain that builds the digit,
   then at the end gets squished by a falling "2026".
   ========================================================================== */
.pixel-scene {
    position: relative;
    background: var(--black);
    height: 700vh; /* generous runway so each phase has room to breathe */
}

.pixel-scene-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 var(--section-pad-x);
}

/* CRT scanline overlay for retro vibes */
.pixel-scene-sticky::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 3px,
        rgba(0, 255, 255, 0.025) 3px,
        rgba(0, 255, 255, 0.025) 4px
    );
    pointer-events: none;
    z-index: 10;
}

/* Subtle ambient glow */
.pixel-scene-sticky::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 50%, rgba(0, 255, 255, 0.05), transparent 70%),
        radial-gradient(ellipse 60% 40% at 30% 70%, rgba(255, 0, 134, 0.04), transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.pixel-stage {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1600px;
    height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(48px, 8vh, 96px);
}

/* The intro sentence — NORMAL site typography, large */
.pixel-headline {
    font-family: var(--font);
    font-size: var(--h1);
    font-weight: var(--h1-weight);
    line-height: var(--h1-line);
    letter-spacing: var(--h1-tracking);
    text-align: center;
    color: var(--white);
    margin: 0;
    max-width: 1200px;
}

/* The big pixel digits area — 1980 builds here */
.pixel-digits-stage {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: clamp(180px, 26vh, 280px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(10px, 1.6vw, 24px);
}

/* Each pixel digit container — chunky retro size */
.pixel-digit {
    position: relative;
    width: clamp(60px, 8vw, 130px);
    height: clamp(105px, 14vw, 225px);
    overflow: visible;
}

.pixel-digit-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    display: block;
}

/* Individual pixel rects — start above the digit, drop into place SLOWLY */
.pixel-digit-svg rect {
    fill: var(--cyan);
    opacity: 0;
    transform: translateY(-600px);
    transition:
        opacity 0.35s ease-out,
        transform 1.2s cubic-bezier(0.5, 0.05, 0.7, 1);
    transform-box: fill-box;
    transform-origin: center;
}

.pixel-digit.rained rect {
    opacity: 1;
    transform: translateY(0);
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.8));
}

/* Stagger pixel drops — slower, more deliberate cascade */
.pixel-digit-svg rect:nth-child(7n+1)  { transition-delay: 0.00s; }
.pixel-digit-svg rect:nth-child(7n+2)  { transition-delay: 0.12s; }
.pixel-digit-svg rect:nth-child(7n+3)  { transition-delay: 0.24s; }
.pixel-digit-svg rect:nth-child(7n+4)  { transition-delay: 0.36s; }
.pixel-digit-svg rect:nth-child(7n+5)  { transition-delay: 0.48s; }
.pixel-digit-svg rect:nth-child(7n+6)  { transition-delay: 0.60s; }
.pixel-digit-svg rect:nth-child(7n)    { transition-delay: 0.72s; }

/* Question mark — TWO-PHASE animation:
   1) DROPS straight down from above into its proper upright position next to "0"
   2) TIPS OVER sideways and falls onto the character, squashing him
*/
.pixel-question {
    position: absolute;
    width: clamp(60px, 8vw, 130px);
    height: clamp(105px, 14vw, 225px);
    overflow: visible;
    /* Resting position: sits to the right of the 0, bottom-aligned */
    bottom: 0;
    right: -2%;
    left: auto;
    z-index: 6;
    pointer-events: none;
    /* Start above its resting position */
    opacity: 0;
    transform: translateY(-200%) rotate(0deg);
    /* Pivot from bottom-RIGHT corner so when it tips, it falls LEFT toward the character */
    transform-origin: bottom right;
    transition:
        opacity 0.3s ease,
        transform 0.9s cubic-bezier(0.5, 0.05, 0.7, 1);
}

/* Phase 1: dropped into proper upright place next to "0" */
.pixel-question.dropped {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

/* Phase 2: tips over sideways (90 degrees clockwise) — pivots from its bottom-right corner
   so the top swings LEFT and lands flat onto the character */
.pixel-question.tipped {
    opacity: 1;
    transform: translateY(0) rotate(90deg);
    transition: transform 0.7s cubic-bezier(0.6, 0, 0.8, 0.4);
}

.pixel-question rect {
    fill: var(--magenta);
    filter: drop-shadow(0 0 6px rgba(255, 0, 134, 0.8));
}

.pixel-question.tipped rect {
    filter: drop-shadow(0 0 12px rgba(255, 0, 134, 1));
}

/* The 8-bit character — walks across the bottom of the digits stage */
.pixel-character {
    position: absolute;
    bottom: -8px;
    left: -8%;
    width: clamp(60px, 8vw, 110px);
    height: clamp(72px, 10vw, 132px);
    z-index: 5;
    transition: left 0.15s linear;
}

.pixel-character svg {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Walking animation — gentle bob */
.pixel-character.walking {
    animation: pixel-walk-bob 0.32s steps(2) infinite;
}

@keyframes pixel-walk-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* Hammer-jump when summoning a pixel rain */
.pixel-character.hammering {
    animation: pixel-hammer 0.5s ease-out;
}

@keyframes pixel-hammer {
    0%   { transform: translateY(0) rotate(0deg); }
    30%  { transform: translateY(-40px) rotate(-8deg); }
    60%  { transform: translateY(-40px) rotate(8deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* Death — squished flat by the falling 2026 */
.pixel-character.squished {
    transform: scaleY(0.3) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.5, -0.5, 0.5, 1.5);
}

/* Face swap on death */
.pixel-character .face-alive { display: block; }
.pixel-character .face-dead { display: none; }
.pixel-character.squished .face-alive { display: none; }
.pixel-character.squished .face-dead { display: block; }

/* The 2026 "squisher" that falls down from above at the end */
.pixel-squisher {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(200px, 30vw, 500px);
    height: clamp(60px, 8vw, 120px);
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transition: top 0.5s cubic-bezier(0.5, 0, 0.8, 0.5), opacity 0.2s ease;
}

.pixel-squisher.crashing {
    top: calc(100% - 40px);
    opacity: 1;
}

.pixel-squisher svg {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
}

.pixel-squisher rect {
    fill: var(--magenta);
    filter: drop-shadow(0 0 8px rgba(255, 0, 134, 0.8));
}

/* Sub-text below the playground that appears at the end — this is the closing
   statement of the scene, so it deserves real presence (not throwaway caption). */
.pixel-scene-outro {
    margin-top: clamp(24px, 4vh, 48px);
    font-size: clamp(20px, 2vw, 32px);
    font-weight: 500;
    color: var(--white);
    text-align: center;
    max-width: 900px;
    line-height: 1.4;
    letter-spacing: -0.015em;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.pixel-scene-outro.shown {
    opacity: 1;
    transform: translateY(0);
}

/* Hint text — small "keep scrolling" prompt */
.pixel-scroll-hint {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cyan);
    opacity: 0.5;
    animation: pixel-blink 2s steps(2) infinite;
    transition: opacity 0.4s ease;
}

/* Sound toggle button — corner of the pixel scene */
.pixel-sound-toggle {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 20;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 1.5px solid rgba(0, 255, 255, 0.4);
    color: var(--cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0;
}

.pixel-sound-toggle:hover {
    border-color: var(--cyan);
    background: rgba(0, 255, 255, 0.1);
    transform: scale(1.05);
    box-shadow: 0 0 16px rgba(0, 255, 255, 0.3);
}

.pixel-sound-toggle svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.pixel-sound-toggle .icon-muted { display: none; }
.pixel-sound-toggle.muted .icon-on { display: none; }
.pixel-sound-toggle.muted .icon-muted { display: block; }
.pixel-sound-toggle.muted { opacity: 0.6; }

@media (max-width: 600px) {
    .pixel-sound-toggle {
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
}

@keyframes pixel-blink {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 0.2; }
}

@media (max-width: 900px) {
    .pixel-scene { height: 500vh; }
    /* Headline — feature-moment scale, matching the typewriter sections
       ("Inclusive by design.", "Lifelike characters.") so this stands apart
       from regular H1s and reads as a hero moment. */
    .pixel-headline { font-size: clamp(56px, 16vw, 92px); line-height: 1.05; }

    /* Each word of the headline is wrapped in .pixel-word. Words flagged
       .pixel-word-l slide in from the LEFT, .pixel-word-r slide in from
       the RIGHT. Off-screen by default; .in-view (set by IntersectionObserver)
       triggers the slide. Staggered delays so they arrive one after the other. */
    .pixel-word {
        display: inline-block;
        margin-right: 0.25em;
        opacity: 0;
        transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 0.5s ease-out;
    }
    .pixel-word-l { transform: translateX(-100vw); }
    .pixel-word-r { transform: translateX(100vw); }

    .pixel-headline.in-view .pixel-word {
        opacity: 1;
        transform: translateX(0);
    }
    .pixel-headline.in-view .pixel-word:nth-child(1) { transition-delay: 0.05s; }
    .pixel-headline.in-view .pixel-word:nth-child(2) { transition-delay: 0.20s; }
    .pixel-headline.in-view .pixel-word:nth-child(3) { transition-delay: 0.35s; }
    .pixel-headline.in-view .pixel-word:nth-child(4) { transition-delay: 0.50s; }

    /* Shift ONLY the animation (digits + character + question mark) further
       left AND scale it down slightly so the whole scene fits in the viewport
       with room for the question mark to tip. transform-origin: center left
       so the shrink anchors from the left side (not the centre) — otherwise
       scaling re-introduces overflow on the right. */
    .pixel-digits-stage { height: clamp(140px, 20vh, 220px); gap: 6px; transform: translateX(-48px) scale(0.9); transform-origin: center left; }
    .pixel-digit { width: clamp(50px, 13vw, 90px); height: clamp(85px, 22vw, 150px); }
    .pixel-question { width: clamp(50px, 13vw, 90px); height: clamp(85px, 22vw, 150px); }
}

/* ==========================================================================
   ILM PAGE — WIDE INTRO SECTIONS
   Used for "Built with Purpose", "ILM Environments", and "Loop it Your Way"
   intros. Centered, wide-canvas, branded with ambient cyan/magenta glows.
   ========================================================================== */
.ilm-feature-section {
    position: relative;
    padding: clamp(120px, 18vh, 200px) 0;
    background: var(--black);
    overflow: hidden;
    text-align: center;
}

.ilm-feature-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 65% 50% at 50% 0%, rgba(0, 255, 255, 0.04), transparent 65%),
        radial-gradient(ellipse 55% 40% at 50% 100%, rgba(255, 0, 134, 0.04), transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* Variant glows for each section */
.ilm-feature-purpose::before {
    background:
        radial-gradient(ellipse 65% 50% at 30% 30%, rgba(0, 255, 255, 0.05), transparent 65%),
        radial-gradient(ellipse 55% 40% at 70% 70%, rgba(255, 0, 134, 0.04), transparent 65%);
}

.ilm-feature-environments::before {
    background:
        radial-gradient(ellipse 60% 45% at 50% 50%, rgba(0, 255, 255, 0.05), transparent 70%);
}

.ilm-feature-loop::before {
    background:
        radial-gradient(ellipse 60% 45% at 70% 30%, rgba(255, 0, 134, 0.05), transparent 65%),
        radial-gradient(ellipse 55% 40% at 30% 70%, rgba(0, 255, 255, 0.04), transparent 65%);
}

.ilm-feature-inner {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--section-pad-x);
    text-align: center;
}

.ilm-feature-title {
    font-size: var(--h1);
    font-weight: var(--h1-weight);
    line-height: var(--h1-line);
    letter-spacing: var(--h1-tracking);
    color: var(--white);
    margin: 0 auto 32px;
    max-width: 1100px;
}

.ilm-feature-lede {
    font-size: var(--lede);
    line-height: var(--lede-line);
    color: var(--white);
    max-width: 920px;
    margin: 0 auto;
    opacity: 0.92;
}

/* ==========================================================================
   ILM PAGE — MID-PAGE CTA ("Always Building")
   Wider, more present version of the cta-strip pattern.
   ========================================================================== */
.ilm-mid-cta {
    position: relative;
    padding: clamp(100px, 14vh, 160px) 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% 50%, rgba(0, 255, 255, 0.06), transparent 65%),
        radial-gradient(ellipse 50% 40% at 30% 70%, rgba(255, 0, 134, 0.05), transparent 70%),
        var(--black);
    text-align: center;
    overflow: hidden;
}

.ilm-mid-cta::before,
.ilm-mid-cta::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gray-800) 30%, var(--gray-800) 70%, transparent);
}

.ilm-mid-cta::before { top: 0; }
.ilm-mid-cta::after  { bottom: 0; }

.ilm-mid-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--section-pad-x);
    text-align: center;
}

.ilm-mid-cta-inner .section-eyebrow {
    margin-bottom: 32px;
}

.ilm-mid-cta h3 {
    font-size: var(--h2);
    font-weight: var(--h2-weight);
    line-height: var(--h2-line);
    letter-spacing: var(--h2-tracking);
    color: var(--white);
    margin: 0 0 24px;
}

.ilm-mid-cta p {
    font-size: var(--body-large);
    line-height: var(--body-line);
    color: var(--white);
    margin: 0 0 36px auto;
    opacity: 0.9;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 600px) {
    .ilm-mid-cta { padding: 80px 0; }
    .ilm-mid-cta h3 { font-size: clamp(28px, 7vw, 40px); }
}

/* ==========================================================================
   ILM PAGE — widen "You Choose" pin grid to feel more cinematic
   ========================================================================== */
.you-choose-grid {
    grid-template-columns: 1.25fr 1fr;
}

@media (max-width: 900px) {
    .you-choose-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ILM PAGE — enhanced closing CTA hero "Built for Access"
   Add stronger glow, wider type.
   ========================================================================== */
.cta-hero::before {
    background:
        radial-gradient(ellipse 75% 55% at 50% 40%, rgba(0, 255, 255, 0.08), transparent 65%),
        radial-gradient(ellipse 55% 40% at 30% 70%, rgba(255, 0, 134, 0.07), transparent 70%),
        radial-gradient(ellipse 50% 35% at 75% 80%, rgba(0, 255, 255, 0.05), transparent 70%);
}

.cta-hero-inner {
    max-width: 1400px;
}

.cta-hero-title {
    max-width: 1280px;
}

.cta-hero-lede {
    max-width: 880px;
}

/* ==========================================================================
   ENV CAROUSEL — horizontal slide-based environment showcase
   Replaces the long scroll-moment sequence with a swipeable / clickable
   carousel where users can pause, rewind, and scrub the videos using
   native HTML5 video controls. Wider video area, clearer navigation.
   ========================================================================== */
.env-carousel {
    position: relative;
    padding: clamp(60px, 8vh, 100px) 0 clamp(80px, 12vh, 140px);
    background: var(--black);
    overflow: hidden;
}

.env-carousel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0, 255, 255, 0.04), transparent 70%),
        radial-gradient(ellipse 50% 40% at 30% 70%, rgba(255, 0, 134, 0.03), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.env-carousel-inner {
    position: relative;
    z-index: 1;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--section-pad-x);
}

/* The wrap is a fixed-height horizontal-scroll container that shows ONE slide
   at a time. Container queries below give the slides their width. */
.env-carousel-track-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 24px;
    border: 1px solid var(--gray-800);
    background: var(--black-card);
    box-shadow:
        0 30px 80px -30px rgba(0, 255, 255, 0.18),
        0 0 60px -20px rgba(255, 0, 134, 0.08);
    height: clamp(480px, 70vh, 720px);
    /* Establish a containment context so each slide can size itself relative to the wrap */
    container-type: inline-size;
    position: relative;
}

.env-carousel-track-wrap::-webkit-scrollbar { display: none; }

.env-carousel-track {
    display: flex;
    height: 100%;
    /* Track only needs to be as wide as its slides — no extra width */
}

/* Each slide is EXACTLY the wrap's width (one slide visible at a time).
   Using 100cqw means "100% of the container's inline size" — i.e. the wrap. */
.env-slide {
    flex: 0 0 100cqw;
    width: 100cqw;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
    padding: clamp(32px, 4vw, 56px);
    overflow: hidden;
    box-sizing: border-box;
}

.env-slide-media {
    width: 100%;
    height: 100%;
    max-height: 100%;
    background: var(--black);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--gray-800);
    box-shadow: 0 20px 50px -20px rgba(0, 255, 255, 0.15);
    min-height: 0;
    position: relative;
}

/* Poster overlay — sits ON TOP of the video, but ONLY in the area above the
   native controls bar (which is ~40px tall at the bottom of the video). The
   thumbnail is centred within that reduced box via object-fit: contain.
   JS hides this when the video plays so the controls remain clickable. */
.env-poster {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 80px;
    width: 100%;
    height: calc(100% - 80px);
    object-fit: contain;
    object-position: center center;
    background: var(--black);
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.3s ease;
}

.env-poster.hidden {
    opacity: 0;
    pointer-events: none;
}

.env-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: transparent;
    position: relative;
    z-index: 2;
}

.env-slide-text {
    min-width: 0;
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
}

.env-slide-text .section-eyebrow {
    margin-bottom: 20px;
}

.env-slide-text h3 {
    font-size: clamp(28px, 3.6vw, 52px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--white);
    margin: 0 0 20px;
}

.env-slide-text p {
    font-size: clamp(16px, 1.2vw, 19px);
    line-height: 2;
    color: var(--white);
    opacity: 0.92;
    margin: 0;
}

/* PREV / NEXT ARROWS — floating buttons */
.env-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: 1.5px solid var(--gray-800);
    color: var(--white);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0;
}

.env-carousel-arrow:hover {
    border-color: var(--cyan);
    color: var(--cyan);
    background: rgba(0, 255, 255, 0.08);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 0 24px rgba(0, 255, 255, 0.3);
}

.env-carousel-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.env-carousel-arrow svg {
    width: 24px;
    height: 24px;
}

.env-carousel-prev { left: clamp(8px, 2vw, 32px); }
.env-carousel-next { right: clamp(8px, 2vw, 32px); }

/* DOT INDICATORS */
.env-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.env-carousel-dot {
    width: 32px;
    height: 5px;
    border-radius: 4px;
    background: var(--gray-700);
    border: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
}

.env-carousel-dot.active {
    background: var(--cyan);
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.6);
    width: 48px;
}

.env-carousel-dot.completed {
    background: var(--cyan);
    opacity: 0.5;
}

.env-carousel-dot:hover {
    background: var(--cyan);
    opacity: 0.8;
}

/* COUNTER ("3 / 7") */
.env-carousel-counter {
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.env-carousel-counter span {
    color: var(--cyan);
}

@media (max-width: 900px) {
    .env-slide {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 32px;
    }
    .env-slide-media {
        aspect-ratio: 16 / 9;
    }
    .env-carousel-arrow {
        width: 44px;
        height: 44px;
    }
    .env-carousel-arrow svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 600px) {
    .env-carousel-prev { left: 8px; }
    .env-carousel-next { right: 8px; }
    .env-slide-text h3 { font-size: clamp(24px, 7vw, 36px); }
    .env-carousel-dot { width: 24px; }
    .env-carousel-dot.active { width: 36px; }
}

/* ==========================================================================
   PRESS START GATE — ROPE-DRAG TWEAKS
   Minimal overrides on top of V12 press-start CSS to support the new layout
   where the BUTTON sits on the LEFT being dragged, and the CHARACTER sits on
   the RIGHT pulling. Everything else (sticky, button visuals, bubble, scroll
   lock) inherited unchanged.
   ========================================================================== */

/* Push-group becomes a full-stage positioning context (NOT a flex row).
   Button and character are positioned independently inside it by JS so they
   can move at different rates — character walks right, button gets dragged
   along, rope stretches/slackens between them. */
.press-start-push-group {
    display: block;
    position: absolute;
    inset: 0;
    transform: none;
    opacity: 1;
    transition: opacity 0.4s ease-out;
    z-index: 3;
}

.press-start-push-group.pushed-in {
    transform: none;
    opacity: 1;
}

/* Button is absolutely positioned in the push-group. JS sets its translateX.
   Vertically centred on the stage. */
.press-start-push-group .press-start-btn-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Base transform: centred on stage. JS overrides via inline transform when walking. */
    transform: translate(-50%, -50%);
    will-change: transform;
    /* Don't let absolute positioning collapse the natural width — keep "Press Start" on one line */
    white-space: nowrap;
}

.press-start-push-group .press-start-btn {
    white-space: nowrap;
}

/* Character is absolutely positioned in the push-group. JS sets its translateX.
   Vertically aligned to the same baseline as the button. */
.press-start-push-group .press-start-character {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Base transform: centred. JS overrides via inline transform when walking. */
    transform: translate(-50%, -50%);
    /* Cancel V12's negative margin since position is now absolute */
    margin-right: 0;
    margin-left: 0;
    will-change: transform;
    z-index: 4;
}

/* Rope SVG covers the whole stage so JS can draw a path anywhere within it. */
.press-start-rope {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    overflow: visible;
}

.press-start-rope.visible { opacity: 1; }

.press-start-rope path {
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4));
}

/* Walking gait — steady bob */
.press-start-character.walking {
    animation: press-start-walk 0.36s steps(2) infinite;
}

@keyframes press-start-walk {
    0%, 100% { transform: translate(-50%, -50%); }
    50%      { transform: translate(-50%, calc(-50% - 3px)); }
}

/* When the character is walking, the bob keyframe takes over the transform.
   But JS needs to override the X position too — so the JS sets a CSS variable
   that the keyframe reads. */
.press-start-character {
    --char-tx: -50%;
}

.press-start-character.walking {
    animation: press-start-walk-tx 0.36s steps(2) infinite;
}

@keyframes press-start-walk-tx {
    0%, 100% { transform: translate(var(--char-tx), -50%); }
    50%      { transform: translate(var(--char-tx), calc(-50% - 3px)); }
}

/* ==========================================================================
   404 PAGE — uh-oh, you got squished
   Reuses the chunky 8-bit character from the ILM page in dead state.
   Big pixel "404" digits using the same pattern as the ILM page's "1980".
   ========================================================================== */
.error-404 {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(120px, 16vh, 180px) var(--section-pad-x) clamp(80px, 12vh, 140px);
    background: var(--black);
    overflow: hidden;
    text-align: center;
}

.error-404::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 40%, rgba(0, 255, 255, 0.06), transparent 70%),
        radial-gradient(ellipse 50% 40% at 30% 70%, rgba(255, 0, 134, 0.05), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.error-404::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 3px,
        rgba(0, 255, 255, 0.02) 3px,
        rgba(0, 255, 255, 0.02) 4px
    );
    pointer-events: none;
    z-index: 1;
}

.error-404-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(40px, 6vh, 64px);
}

/* The pixel "404" digits with squished character on top of the middle "0" */
.error-404-stage {
    position: relative;
    width: 100%;
    max-width: 720px;
    height: clamp(180px, 28vh, 280px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(10px, 1.6vw, 24px);
}

.error-404-digit {
    position: relative;
    width: clamp(60px, 9vw, 130px);
    height: clamp(105px, 16vw, 225px);
    overflow: visible;
}

.error-404-digit svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    display: block;
}

.error-404-digit svg rect {
    fill: var(--cyan);
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.8));
    animation: error-404-flicker 4s ease-in-out infinite;
}

/* Middle digit (the "0") is magenta + has the squished character on top */
.error-404-digit-mid svg rect {
    fill: var(--magenta);
    filter: drop-shadow(0 0 6px rgba(255, 0, 134, 0.8));
}

@keyframes error-404-flicker {
    0%, 100% { opacity: 1; }
    45% { opacity: 1; }
    47% { opacity: 0.6; }
    49% { opacity: 1; }
}

/* The dead pixel character — takes the place of the 0 in 404, standing upright between the two 4s */
.error-404-character {
    position: relative;
    width: clamp(80px, 11vw, 160px);
    height: clamp(105px, 16vw, 225px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
}

.error-404-character svg {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 0 12px rgba(255, 0, 134, 0.8));
}

/* Uh-oh message */
.error-404-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 720px;
}

.error-404-title {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(28px, 5vw, 64px);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--white);
    margin: 0;
    text-shadow:
        0 0 6px var(--cyan),
        2px 0 0 var(--magenta),
        -2px 0 0 var(--cyan),
        0 0 24px rgba(0, 255, 255, 0.6);
    animation: pixel-flicker 4s ease-in-out infinite;
}

.error-404-sub {
    font-size: var(--lede);
    line-height: var(--lede-line);
    color: var(--white);
    max-width: 640px;
    opacity: 0.92;
    margin: 0;
}

.error-404-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 12px;
}

@media (max-width: 600px) {
    .error-404-stage { gap: 6px; }
    .error-404-digit { width: clamp(50px, 14vw, 80px); height: clamp(85px, 24vw, 140px); }
    .error-404-character { width: clamp(70px, 16vw, 100px); height: clamp(80px, 20vw, 120px); }
    .error-404-title { font-size: clamp(22px, 7vw, 36px); }
}

/* ==========================================================================
   UNDER CONSTRUCTION PAGE — chunky guy holding a pixel sign on a pole
   Same vibe as the ILM press-start gate and 404 page. Reusable template.
   ========================================================================== */
.uc-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(120px, 16vh, 180px) var(--section-pad-x) clamp(80px, 12vh, 140px);
    background: var(--black);
    overflow: hidden;
    text-align: center;
}

.uc-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 40%, rgba(0, 255, 255, 0.06), transparent 70%),
        radial-gradient(ellipse 50% 40% at 30% 70%, rgba(255, 0, 134, 0.05), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.uc-page::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 3px,
        rgba(0, 255, 255, 0.02) 3px,
        rgba(0, 255, 255, 0.02) 4px
    );
    pointer-events: none;
    z-index: 1;
}

.uc-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(40px, 6vh, 64px);
}

/* Stage that holds the character + sign assembly */
.uc-stage {
    position: relative;
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Soft idle bob so the whole assembly feels alive */
    animation: uc-bob 2.6s ease-in-out infinite alternate;
}

@keyframes uc-bob {
    from { transform: translateY(-4px); }
    to   { transform: translateY(4px); }
}

/* The sign on a stick — sign on top, pole going down to the character */
.uc-sign {
    position: relative;
    background: var(--white);
    border: 4px solid var(--black);
    box-shadow:
        6px 6px 0 var(--cyan),
        12px 12px 0 var(--magenta);
    padding: clamp(20px, 3vh, 32px) clamp(28px, 5vw, 56px);
    margin-bottom: 0;
    font-family: 'Press Start 2P', monospace;
    color: var(--black);
    text-align: center;
    z-index: 3;
    min-width: clamp(280px, 50vw, 440px);
    transform: rotate(-2deg);
}

.uc-sign-title {
    font-size: clamp(14px, 2vw, 22px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 14px;
    color: var(--black);
    line-height: 1.3;
}

.uc-sign-sub {
    font-family: var(--font);
    font-size: clamp(12px, 1vw, 15px);
    font-weight: 500;
    line-height: 1.5;
    color: var(--black);
    opacity: 0.75;
    letter-spacing: 0;
    text-transform: none;
}

/* Pole — a cyan pixel-art vertical bar connecting the sign to the character */
.uc-pole {
    width: 14px;
    height: clamp(40px, 8vh, 80px);
    background: var(--cyan);
    box-shadow:
        0 0 12px rgba(0, 255, 255, 0.6),
        inset -3px 0 0 rgba(0, 0, 0, 0.25);
    margin-top: -4px; /* tuck slightly behind the sign's bottom border */
    z-index: 2;
}

/* The character — reuse the chunky 8-bit guy. Standing, alive, holding the pole up */
.uc-character {
    width: clamp(140px, 20vw, 240px);
    height: clamp(175px, 25vw, 300px);
    margin-top: -6px; /* pole tucks into his hand area */
    z-index: 3;
    position: relative;
}

.uc-character svg {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 0 12px rgba(255, 0, 134, 0.6));
}

/* The message below */
.uc-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 900px;
}

.uc-title {
    font-size: var(--h1);
    font-weight: var(--h1-weight);
    line-height: var(--h1-line);
    letter-spacing: var(--h1-tracking);
    color: var(--white);
    margin: 0;
    white-space: nowrap;
}

.uc-sub {
    font-size: var(--lede);
    line-height: var(--lede-line);
    color: var(--white);
    max-width: 580px;
    opacity: 0.92;
    margin: 0;
}

.uc-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 12px;
}

@media (max-width: 600px) {
    .uc-sign { min-width: 240px; padding: 18px 24px; }
    .uc-character { width: 120px; height: 150px; }
    .uc-pole { height: 40px; }
    .uc-title { font-size: clamp(28px, 9vw, 44px); }
}

/* ==========================================================================
   STAY IN THE LOOP — homepage email capture form
   Two-column layout: text + heading on left, form on right.
   Wider container, proper heading hierarchy, brand-aligned.
   ========================================================================== */
.stay-in-loop {
    position: relative;
    /* Top padding 0: the preceding .section heading provides the lead-in spacing.
       Bottom padding stays generous to separate from the next section. */
    padding: 0 0 clamp(80px, 12vh, 140px);
    background: var(--black);
    overflow: hidden;
}

.stay-in-loop::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 40% at 20% 50%, rgba(0, 255, 255, 0.05), transparent 65%),
        radial-gradient(ellipse 40% 35% at 80% 50%, rgba(255, 0, 134, 0.04), transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.stay-in-loop-inner {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 72px) clamp(36px, 5vw, 64px);
    border: 1px solid var(--gray-800);
    border-radius: 24px;
    background:
        radial-gradient(circle at 20% 0%, rgba(0, 255, 255, 0.04), transparent 60%),
        radial-gradient(circle at 80% 100%, rgba(255, 0, 134, 0.04), transparent 60%),
        var(--black-card);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 6vw, 80px);
    align-items: center;
}

.stay-in-loop-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.25), transparent 40%, transparent 60%, rgba(255, 0, 134, 0.25));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.stay-in-loop-text {
    text-align: left;
}

.stay-in-loop-text .section-eyebrow {
    margin-bottom: 24px;
}

.stay-in-loop-title {
    font-size: var(--h2);
    font-weight: var(--h2-weight);
    line-height: var(--h2-line);
    letter-spacing: var(--h2-tracking);
    color: var(--white);
    margin: 0 0 20px;
}

.stay-in-loop-lede {
    font-size: var(--body-large);
    line-height: 1.55;
    color: var(--white);
    opacity: 0.88;
    margin: 0;
}

.stay-in-loop-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
}

.stay-in-loop-form .form-field {
    margin-bottom: 0;
}

/* Checkbox row — inline, no bordered box. Just the checkbox + label sitting naturally. */
.stay-in-loop-consent {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
    color: var(--white);
    cursor: pointer;
    padding: 4px 0;
    background: none;
    border: none;
    border-radius: 0;
    transition: color 0.2s ease;
    align-self: flex-start;
}

.stay-in-loop-consent:hover {
    color: var(--cyan);
}

.stay-in-loop-consent input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--cyan);
    cursor: pointer;
    flex-shrink: 0;
}

.stay-in-loop-submit {
    align-self: flex-start;
    margin-top: 8px;
    min-width: 180px;
    justify-content: center;
}

@media (max-width: 900px) {
    .stay-in-loop {
        padding: 0 0 clamp(48px, 8vh, 80px);
    }
    .stay-in-loop-inner {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: clamp(28px, 5vw, 40px) clamp(20px, 5vw, 28px);
        margin: 0 16px;
        max-width: calc(100% - 32px);
    }
    /* Left-align everything on mobile — matches the rest of the page and reads
       as more professional than the centred marketing-landing-page look. */
    .stay-in-loop-text { text-align: left; }
    .stay-in-loop-text .section-eyebrow,
    .stay-in-loop-consent,
    .stay-in-loop-submit { align-self: flex-start; }
    /* The "Stay in the Loop" headline section above the form has the full
       .section padding (80-140px top/bottom) which on mobile creates a huge
       gap. Tighten the bottom padding so the form sits closer to its heading. */
    .section:has(+ .stay-in-loop) {
        padding-bottom: clamp(24px, 4vh, 40px);
    }
}

@media (max-width: 600px) {
    .stay-in-loop-submit { width: 100%; }
}

/* Honeypot field — hidden from real users, visible to dumb auto-filling bots.
   Using clip + position absolute so screen readers also skip it. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Form message (errors below the form) */
.stay-in-loop-form .form-message {
    min-height: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--magenta);
    margin-top: 4px;
    text-align: left;
}

.stay-in-loop-form .form-message:empty {
    display: none;
}

/* Success state — replaces the entire form after submission */
.stay-in-loop-success {
    text-align: center;
    padding: 16px 0;
    animation: fadeInUp 0.5s ease-out;
}

.stay-in-loop-success .success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--cyan);
    color: var(--black);
    font-size: 28px;
    font-weight: 700;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
}

.stay-in-loop-success h3 {
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 600;
    color: var(--white);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}

.stay-in-loop-success p {
    font-size: 16px;
    line-height: 1.5;
    color: var(--white);
    opacity: 0.85;
    margin: 0;
}

/* When a tinted section is immediately followed by a scroll-moment (the
   "Powered by AI..." heading → Adaptive AI video case), trim its bottom
   padding so the heading visually connects to the first video card below
   instead of feeling disconnected. */
.section.tint:has(+ .scroll-moment) {
    padding-bottom: clamp(20px, 3vh, 40px);
}

/* ==========================================================================
   STACKED SECTION TITLE
   Use on any .section-title where you want each sentence on its own line
   with the same breathing room as .edu-redefined-headline. Wrap each
   sentence in a span. The anim-underline span keeps its underline animation
   regardless of the block treatment.
   ========================================================================== */
.section-title-stacked span {
    display: block;
    margin-bottom: 0.5em;
}

.section-title-stacked span:last-child {
    margin-bottom: 0;
}

/* anim-underline span in stacked titles. Inline-block so the span only takes
   the text width; the ::after extends slightly past the text for that
   characteristic "finger or two past" underline look. */
.section-title-stacked span.anim-underline {
    display: inline-block;
}

.section-title-stacked span.anim-underline::after {
    width: calc(100% + 0.7em);
}

@media (max-width: 900px) {
    /* Normalise the lang hero-reveal's inner padding on mobile so its text
       and eyebrow align with the rest of the site (left edge at standard
       section padding), matching the first hero-reveal ("Inclusive by design"). */
    .hero-reveal-lang .hero-reveal-inner {
        padding-left: var(--section-pad-x);
        padding-right: var(--section-pad-x);
    }

    /* The "Realistic. Responsive. Universal." eyebrow is longer than other
       eyebrows and wraps to 2 lines on mobile. Shrink it slightly so it fits
       on one line. Only affects this specific section's eyebrow. */
    .hero-reveal-lang .hero-reveal-eyebrow {
        font-size: 12.5px;
        letter-spacing: 0.08em;
    }

    /* iOS Safari can render a solid background behind WebM videos with alpha
       on mobile, hiding the transparency. Force transparent background and
       mix-blend-mode so the alpha channel renders correctly. */
    .hero-reveal-npc,
    .hero-reveal-npc video,
    .hero-reveal-npc-sit {
        background: transparent !important;
        background-color: transparent !important;
    }

    /* The cyan->magenta underline on the giant hero-reveal lines sits too
       high on mobile because of the large line-height. Pull it BELOW the
       text baseline so it tucks under properly (not cutting through the y
       of "any"), and extend it a touch wider so it looks more confident. */
    .hero-reveal-title .anim-underline {
        padding-right: 0.15em;
    }
    .hero-reveal-title .anim-underline::after {
        bottom: -0.1em !important;
        height: 5px !important;
        width: 105% !important;
    }

    /* The lang hero-reveal ("in any language") needs the underline a touch
       lower than the first hero-reveal because of how the words sit. */
    .hero-reveal-lang .hero-reveal-title .anim-underline::after {
        bottom: -0.14em !important;
    }

    /* Tighten the gap between Multilingual Delivery and the ACM section
       on mobile. The h-scroll track height (above) was the main culprit; these
       just keep the divider + ACM header tight so they don't add back what we
       trimmed. */
    .divider-spaced {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .acm-cinematic-header {
        padding-top: 0 !important;
        padding-bottom: clamp(12px, 2vh, 20px) !important;
    }

    /* "The Assessment Convergence Model™" eyebrow on mobile — fixed font size,
       force one line. Scale via font-size, not letter-spacing, so it looks the
       same on every phone. */
    .acm-cinematic-header .section-eyebrow {
        font-size: 11px;
        letter-spacing: 0.16em;
        padding: 7px 14px;
        white-space: nowrap;
    }

    /* Layer the NPC videos ABOVE the language greetings on mobile so
       the characters appear in front of the floating greeting words.
       The greetings live in .hero-reveal-greetings (sibling of NPC inside
       .hero-reveal-sticky), and each .hr-greeting span uses transform/filter
       creating its own stacking context. Need isolation + high z-index. */
    .hero-reveal-lang {
        isolation: isolate;
    }
    .hero-reveal-lang .hero-reveal-greetings {
        z-index: 1;
    }
    .hero-reveal-lang .hero-reveal-greetings .hr-greeting {
        z-index: 1 !important;
    }
    .hero-reveal-lang .hero-reveal-inner {
        position: relative;
        z-index: 2;
    }
    .hero-reveal-lang .hero-reveal-npc,
    .hero-reveal-lang .hero-reveal-npc-sit {
        position: absolute !important;
        z-index: 100 !important;
        isolation: isolate;
    }
}

/* Pause/play toggle for the desktop panel-level h-scroll auto-advance.
   Sits inside .h-scroll-dots next to the dot indicators on desktop.
   Hidden on mobile via the media query override above. */
.h-scroll-panel-pause {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 12px;
    padding: 0;
    border: 1px solid var(--gray-700);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: var(--cyan);
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
}
.h-scroll-panel-pause:hover,
.h-scroll-panel-pause:focus-visible {
    border-color: var(--cyan);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.45);
    outline: none;
}
.h-scroll-panel-pause.paused {
    background: rgba(0, 255, 255, 0.12);
    border-color: var(--cyan);
}
.h-scroll-dots {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   H-SCROLL ON MOBILE — Sticky header + horizontal feature carousel
   The heading, subhead, paragraph and motif stay sticky at the top of the
   viewport. Below them, the 4 features are a single-card-wide horizontal
   scroll-snap carousel — user swipes sideways to see each feature, with
   dots underneath showing position. Vertical scroll moves on to the next
   panel (Accessible from Anywhere) which has its own sticky header + carousel.

   Uses !important because base h-scroll rules appear LATER in source order.
   ========================================================================== */
@media (max-width: 900px) {
    .h-scroll {
        position: relative !important;
        height: auto !important;
        margin-top: 0 !important;
        padding-top: 100vh !important;
        max-width: 100vw !important;
        background: var(--black) !important;
    }

    .h-scroll-sticky {
        position: static !important;
        height: auto !important;
        display: block !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .h-scroll-track-wrap {
        overflow: visible !important;
        scroll-snap-type: none !important;
        position: static !important;
    }

    /* TRACK height = panel-0 runway + panel-1 runway. Each panel is sticky
       at top:0 and its content extent (which may exceed 100vh on small
       screens with the carousel + dots) determines how far you scroll
       before panel 1 starts overlapping. 400vh = 200vh per panel of effective
       runway, which gives breathing room for the full panel content to be
       visible at the top before the next panel slides over. Tune this single
       number up/down if you want more/less time per panel. */
    .h-scroll-track {
        position: static !important;
        width: 100% !important;
        height: 480vh !important;
        min-height: 0 !important;
        display: block !important;
    }

    /* Each panel is sticky at top:0. height:auto lets the panel grow to fit
       its content (heading + cards + dots) on small screens so nothing
       gets clipped at the bottom. min-height:100vh ensures it always covers
       the viewport even when content is short. The sticky runway comes from
       the TRACK's 400vh, not from inflating each panel's own padding. */
    .h-scroll-panel {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100vh !important;
        padding: 64px 0 24px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        background: var(--black) !important;
        z-index: 1 !important;
    }

    /* Last panel keeps the same sticky behaviour — runway is in the track,
       not in panel padding. No special override needed. */

    /* Second panel sits above first in z-order so it covers when it scrolls up */
    .h-scroll-panel + .h-scroll-panel {
        z-index: 2 !important;
    }

    .h-scroll-panel + .h-scroll-panel {
        margin-top: 0 !important;
        z-index: 2 !important;
    }

    .h-scroll-panel + .h-scroll-panel::before {
        display: none !important;
    }

    /* Strip card chrome. No padding-bottom here — runway comes from the
       features carousel below being given vertical breathing room so that
       the sticky header has room to stick while the user reads/swipes.
       Visible gap between panels stays tight because there's no empty
       padding tacked onto the bottom. */
    .h-scroll-panel-inner {
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        display: block !important;
        overflow: visible !important;
    }

    .h-scroll-panel-inner::before {
        display: none !important;
    }

    /* Panel-text is just a static heading block at the top of each panel —
       no longer sticky itself, because the whole panel is sticky now.
       Smaller top padding because the parent panel provides 64px above
       for the nav clearance. */
    .h-scroll-panel-text {
        position: static !important;
        z-index: 2 !important;
        background: var(--black) !important;
        padding: 12px 24px 20px !important;
        max-width: 100vw !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    .h-scroll-panel-text > h3 {
        font-size: clamp(36px, 8.5vw, 48px) !important;
        font-weight: 600 !important;
        line-height: 1.1 !important;
        color: var(--white) !important;
        margin: 0 0 16px !important;
        text-align: left !important;
        opacity: 1 !important;
        transform: none !important;
        position: static !important;
    }

    .h-scroll-panel-text > h4 {
        font-size: clamp(22px, 5.5vw, 28px) !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        color: var(--cyan) !important;
        margin: 16px 0 12px !important;
        text-align: left !important;
        opacity: 1 !important;
        transform: none !important;
        position: static !important;
    }

    .h-scroll-panel-text > p {
        font-size: 18px !important;
        line-height: 1.7 !important;
        color: var(--white) !important;
        opacity: 0.92 !important;
        margin: 0 !important;
        text-align: left !important;
        transform: none !important;
        position: static !important;
        padding: 0 !important;
    }

    /* The motif sits as a subtle background watermark behind the sticky text.
       right: 0 + width capped + can't exceed parent so it won't bleed past
       the viewport edge and cause horizontal page scroll. */
    .h-scroll-panel-motif {
        position: absolute !important;
        top: 15% !important;
        right: 12px !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        width: 240px !important;
        max-width: 60vw !important;
        height: 240px !important;
        opacity: 0.18 !important;
        pointer-events: none !important;
        z-index: 1 !important;
        margin: 0 !important;
    }

    .h-scroll-panel-motif svg.motif {
        width: 100% !important;
        height: 100% !important;
    }

    /* Features container becomes a horizontal scroll-snap carousel.
       Margin-top pushes the cards down from the heading block so the content
       fills the panel's viewport height instead of all crowding at the top. */
    .h-scroll-features {
        display: flex !important;
        flex-direction: row !important;
        grid-template-columns: none !important;
        gap: 8px !important;
        padding: 24px 8px !important;
        margin: clamp(8px, 1.5vh, 20px) 0 0 !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        overscroll-behavior-x: contain !important;
    }

    .h-scroll-features::-webkit-scrollbar {
        display: none !important;
    }

    /* Each feature card snaps and is roughly 1 card wide.
       justify-content: flex-start so all text aligns to the TOP of every card,
       not centered — keeps the heading position consistent as you swipe between
       cards (otherwise short-content cards center, long-content cards top-align,
       making the heading appear to jump up and down between slides). */
    .h-scroll-feature {
        flex: 0 0 calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        scroll-snap-align: center !important;
        padding: 32px 28px !important;
        border: 1px solid var(--gray-800) !important;
        border-radius: 20px !important;
        background: rgba(0, 0, 0, 0.55) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        box-shadow: 0 20px 50px -20px rgba(0, 255, 255, 0.3) !important;
        opacity: 1 !important;
        transform: none !important;
        position: static !important;
        min-height: 200px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        pointer-events: auto !important;
    }

    .h-scroll-feature h5 {
        font-size: 22px !important;
        font-weight: 600 !important;
        color: var(--cyan) !important;
        margin: 0 0 14px !important;
        line-height: 1.3 !important;
    }

    .h-scroll-feature p {
        font-size: 18px !important;
        line-height: 1.7 !important;
        color: var(--white) !important;
        opacity: 0.92 !important;
        margin: 0 !important;
    }

    /* Per-panel feature dots (built by JS, one set per panel) */
    .h-scroll-feature-dots {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 0 16px !important;
    }

    /* INDIVIDUAL MOTIF POSITIONS ON MOBILE
       These override the shared .h-scroll-panel-motif rule above for specific
       panels only. Tweak `top` value to move up (smaller %) / down (larger %).
       Desktop is completely unaffected because they're inside max-width: 900px.
       Default position is 50% (vertically centered) — same as the shared rule.
       Change the numbers below to reposition each motif independently. */

    /* Lifelike characters — two figures — tweak `top` to reposition.
       Lower % moves it up. Try 35%, 30%, 25% etc. */
    #hScrollLang .h-scroll-panel[data-panel="0"] .h-scroll-panel-motif {
        top: 14% !important;
    }

    /* Multilingual delivery — speech bubbles — tweak `top` to reposition.
       Higher % moves it down. Try 60%, 65%, 70% etc. */
    #hScrollLang .h-scroll-panel[data-panel="1"] .h-scroll-panel-motif {
        top: 20% !important;
    }

    /* Pause/play toggle next to the panel-level dots on mobile (no-op since
       desktop pause button isn't shown on mobile, but kept here for safety) */
    .h-scroll-panel-pause {
        display: none !important;
    }

    /* Pause/play toggle next to the dots */
    .h-scroll-feature-pause {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        margin-left: 6px;
        padding: 0;
        border: 1px solid var(--gray-700);
        border-radius: 50%;
        background: transparent;
        color: var(--cyan);
        cursor: pointer;
        transition: all 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .h-scroll-feature-pause:hover,
    .h-scroll-feature-pause:focus-visible {
        border-color: var(--cyan);
        box-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
        outline: none;
    }
    .h-scroll-feature-pause.paused {
        background: rgba(0, 255, 255, 0.1);
        border-color: var(--cyan);
    }

    .h-scroll-feature-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--gray-700);
        transition: all 0.25s ease;
    }

    .h-scroll-feature-dot.active {
        background: var(--cyan);
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
        transform: scale(1.2);
    }

    /* Hide the original 2-panel dots on mobile (they're for desktop swipe) */
    .h-scroll-dots {
        display: none !important;
    }
}