/* Insign specific overrides */

/* ============================================================
   Background architecture — deliberately two layers only.

   1. body::before  the page's single base: navy + starfield, painted
                    once as a fixed layer behind everything.
   2. .hero-video   the presentation video, INSIDE the hero, masked so it
                    fades to transparency at the hero's bottom edge.

   Sections no longer repaint the base to "cover" a fixed video — the
   video scrolls away with its own section, so nothing needs hiding.
   ============================================================ */
:root {
    /* one vertical rhythm AND one content rail for every section on this
       page — the eyebrows are left-aligned, so they only line up with each
       other if every section's content box is the same width */
    --sec-y: clamp(6rem, 14vh, 10rem);
    --sec-max: 1200px;
}

body {
    background: var(--navy-900);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(rgba(5, 7, 15, 0.65), rgba(5, 7, 15, 0.65)),
        var(--navy-900) url('../assets/images/background.webp') center / cover no-repeat;
}

.case {
    position: static;
    /* the hero owns the space under the fixed nav so the video can start
       at y=0 — otherwise main's padding leaves a bare strip above it */
    padding-top: 0;
}

/* every top-level section shares one gutter + rhythm
   (.character-intro is nested inside .overview-panel, so it inherits the
   gutter from there — adding it here would double the inset) */
.overview-panel,
.product-showcase,
.minds-section,
.casa-section,
.conclusion {
    padding-inline: var(--gutter);
}

/* Redefined facts to sit below title */
.case__facts--left {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.case__facts--left dt {
    font-family: var(--font-display);
    font-size: .95rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--steel-500);
}

.case__facts--left dd {
    margin-top: .3rem;
    font-size: 1rem;
    color: var(--white);
}

@media (max-width: 768px) {
    .case__facts--left {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-4);
    }
}

/* Large Intro Typography */
.intro-large {
    font-family: var(--font-body);
    font-size: clamp(1.7rem, 3.2vw, 2.5rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--white);
    max-width: 40ch;
    margin: 0 auto;
    padding-top: clamp(2rem, 8vh, 6rem);
}

.intro-large strong {
    color: var(--yellow);
    font-weight: 500;
}

/* ============================================================
   Shared typography (homepage vibe: Handjet + yellow accents)
   ============================================================ */
.section-eyebrow {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--yellow);
    margin-bottom: 1.2rem;
    text-align: left;
}

.section-eyebrow::after {
    content: '';
    display: block;
    width: 34px;
    height: 2px;
    background: var(--yellow);
    margin: .7rem 0 0;
    opacity: .7;
}

.opener {
    position: relative;
    z-index: 2;
    max-width: var(--sec-max);
    margin: clamp(8rem, 18vh, 13rem) auto 0;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 0;
}

.opener-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.6rem, 6.5vw, 4.6rem);
    line-height: 1.04;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--white);
}

.opener-title em {
    font-style: normal;
    color: var(--yellow);
}

.lead {
    font-family: var(--font-body);
    font-size: clamp(1.02rem, 1.4vw, 1.25rem);
    line-height: 1.75;
    color: var(--steel-300);
    max-width: 58ch;
    margin: 1.6rem auto 0;
}

.lead strong {
    color: var(--white);
}

/* emphasis reads as a highlight, never an underline (underline = link) */
.hl {
    color: var(--navy-950, #05070F);
    /* gradient layer resists Android force-dark dimming (stays true yellow) */
    background: linear-gradient(var(--yellow), var(--yellow));
    padding: .04em .22em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.lead--center {
    text-align: center;
}

.section-head {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: var(--sec-max);
    margin: 0 auto clamp(3rem, 8vh, 5rem);
    padding: 0;
}

/* ============================================================
   Reveal-on-scroll

   Driven by IntersectionObserver, not a scroll position. A ScrollTrigger
   keyed to "element top passes 84% of the viewport" can never fire for the
   LAST elements on the page — once you hit the bottom of the document their
   top is still below that line, so they stayed invisible forever. That is
   why the closing "next project" links never appeared.
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {

    .reveal,
    .reveal.is-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================================
   Hero — full viewport, video inside it, fading out at the bottom
   ============================================================ */
.hero-viewport {
    position: relative;
    z-index: 1;
    /* creates the stacking context the video sits behind */
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    margin-inline: 0;
    padding: calc(var(--nav-h) + var(--space-4)) var(--gutter) clamp(4rem, 12vh, 7rem);
}

.hero-viewport__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--sec-max);
    margin-inline: auto;
}

.hero-video {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    /* the fade the whole layer cake used to fake: video simply dissolves
       into the base background before the next section starts */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, .55) 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, .55) 78%, transparent 100%);
}

.hero-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .8;
}

/* left scrim so the hero text stays readable over the video —
   only reaches ~60% across, the rest of the frame stays clean */
.hero-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
            rgba(0, 0, 0, .72) 0%,
            rgba(0, 0, 0, .42) 32%,
            transparent 60%);
}

/* On small screens the cover-crop would cut the video to a vertical
   sliver — show it whole instead: uncropped 16:9 block up top, text
   below it. */
@media (max-width: 768px) {
    .hero-viewport {
        min-height: 0;
        justify-content: flex-start;
        padding: 0 0 clamp(3rem, 8vh, 5rem);
    }

    .hero-video {
        position: relative;
        inset: auto;
        z-index: 0;
        margin-top: var(--nav-h);
        aspect-ratio: 16 / 9;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .hero-video video {
        opacity: 1;
    }

    /* text sits below the video now — no scrim needed */
    .hero-video::after {
        content: none;
    }

    .hero-viewport__inner {
        padding: var(--space-4) var(--gutter) 0;
    }

    /* pin the mute toggle to the video's bottom-right corner
       (video height = 100vw * 9/16) */
    .hero-mute-btn {
        bottom: auto;
        top: calc(var(--nav-h) + 56.25vw - 60px);
    }
}

/* Mute Button */
.hero-mute-btn {
    position: absolute;
    bottom: clamp(2rem, 5vh, 4rem);
    /* Safely at the bottom of the hero */
    right: var(--gutter);
    z-index: 20;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-mute-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.hero-mute-btn.is-muted {
    opacity: 0.7;
}

/* Overview panel — blueprint grid on a masked layer, so the pattern
   fades in and out instead of stopping on the section line */
.overview-panel {
    position: relative;
    overflow: hidden;
    padding-block: var(--sec-y);
}

.overview-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(169, 188, 212, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(169, 188, 212, .07) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
}

/* Darkening overlay removed so the new background.webp is visible */
/* subtle light rays drifting across a section */
.light-rays {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    opacity: .6;
}

.light-rays::before {
    content: '';
    position: absolute;
    inset: -10% -60%;
    background:
        /* Ray 1: Left, faint */
        linear-gradient(108deg, transparent 20%, rgba(154, 164, 171, 0.03) 25%, transparent 30%),
        /* Ray 2: Middle-left, bright */
        linear-gradient(112deg, transparent 44%, rgba(154, 164, 171, 0.09) 47%, transparent 56%),
        /* Ray 3: Middle-right, medium */
        linear-gradient(104deg, transparent 60%, rgba(183, 212, 220, 0.06) 65%, transparent 70%),
        /* Ray 4: Right, very faint */
        linear-gradient(110deg, transparent 78%, rgba(183, 212, 220, 0.02) 82%, transparent 86%);
    animation: raysDrift 26s linear infinite;
}

.light-rays--slow::before {
    animation-duration: 40s;
}

@keyframes raysDrift {
    0% {
        transform: translateX(-12%);
    }

    50% {
        transform: translateX(12%);
    }

    100% {
        transform: translateX(-12%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .light-rays::before {
        animation: none;
    }
}

/* Pure CSS Floating Bubbles modeled after WebGL bubbles */
.css-bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 150vh;
    z-index: 1;
    pointer-events: none;
}

.css-bubbles span {
    position: absolute;
    bottom: -100px;
    border-radius: 50%;
    /* Soft focus like underwater WebGL */
    animation: floatUp 12s infinite linear;
}

/* section offscreen → its bubble layer stops burning frames */
.css-bubbles.is-paused span {
    animation-play-state: paused;
}

@keyframes floatUp {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: var(--max-opacity, 0.8);
    }

    90% {
        opacity: var(--max-opacity, 0.8);
    }

    100% {
        transform: translateY(-120vh) translateX(var(--drift, 30px));
        opacity: 0;
    }
}

.overview-panel__inner {
    position: relative;
    z-index: 2;
    /* Keeps text above bubbles */
    max-width: var(--sec-max);
    margin: 0 auto;
    text-align: center;
}

/* ============================================================
   Product Showcase
   ============================================================ */
.product-showcase {
    position: relative;
    /* NO isolation here: mix-blend-mode needs the page's base layer as its
       backdrop. Isolating made the section its own stacking context, so the
       video had nothing to blend into and fell back to looking unblended. */
    overflow: hidden;
    padding-block: var(--sec-y);
    /* transparent at both edges: merges into the base with no seam,
       so no section mask and no negative margins are needed */
    background: linear-gradient(180deg,
            rgba(9, 12, 22, 0) 0%,
            rgba(9, 12, 22, .45) 16%,
            rgba(9, 12, 22, .45) 84%,
            rgba(9, 12, 22, 0) 100%);
}

.product-showcase__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--sec-max);
    margin-inline: auto;
}

.product-showcase .opener {
    min-height: unset;
    max-width: none;
    margin: 0 0 clamp(3rem, 8vh, 5rem);
    padding: 0;
}

/* ============================================================
   Character Intro
   ============================================================ */
/* Nested inside .overview-panel: no background, no bubbles and no gutter of
   its own — it uses the panel's, which is exactly the point. */
.character-intro {
    position: relative;
    padding-top: clamp(3rem, 8vh, 5rem);
    pointer-events: none;
}

.character-intro__inner {
    position: relative;
    z-index: 2;
    /* wide enough that the highlighted note never wraps one word per
       line on a phone — 74vw squeezed it into a cramped word-stack */
    width: min(34ch, 88vw);
    margin-left: auto;
    margin-right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.character-intro__img {
    width: var(--cup-size, 64px);
    height: auto;
    margin-bottom: 1rem;
    animation: cupFloat 7s infinite ease-in-out;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3));
}

@keyframes cupFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* the cup's note reads as selected text: the highlight lives on an
   inline <mark>, so each line's box hugs its own words */
.character-intro__inner p {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.8;
    margin: 0;
}

.character-intro__inner mark {
    color: var(--navy-950, #05070F);
    /* gradient layer resists Android force-dark dimming (stays true yellow) */
    background: linear-gradient(var(--yellow), var(--yellow));
    padding: .12em .3em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.showcase-bg-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    mix-blend-mode: luminosity;
    opacity: 0.3;
    /* the video dissolves into the base at both edges instead of ending
       on a hard line */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
}

.showcase-bg-wrapper video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.showcase-container {
    position: relative;
    z-index: 2;
    width: 100%;
    display: grid;
    /* thumbs shrink with the viewport instead of pinning 120px */
    grid-template-columns: clamp(76px, 9vw, 120px) 1fr;
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
}

/* Thumbnails */
.showcase-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    z-index: 50;
    pointer-events: auto;
}

.thumbnail {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.4s var(--ease-out);
    opacity: 0.5;
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

.thumbnail:hover {
    opacity: 0.85;
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-3px) scale(1.04);
}

.thumbnail:active {
    transform: translateY(-1px) scale(.98);
}

.thumbnail.active {
    opacity: 1;
    border-color: var(--yellow);
    background: rgba(247, 255, 0, 0.05);
    transform: scale(1.05);
}

/* Main Viewer — views are stacked in a grid cell instead of absolutely
   positioned, so the container keeps its height at every breakpoint and
   the notes never lose their anchor. */
.showcase-main {
    position: relative;
    width: 100%;
    display: grid;
}

.showcase-view {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.8s ease-out, visibility 0.8s;
}

.showcase-view.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* THE fix for the drifting dots: this box is always exactly 16/9 — the
   same frame the note coordinates were authored against — and it is the
   positioning ancestor for every note, at every viewport width. */
.showcase-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.showcase-glasses {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* Let clicks pass to hotspots if they overlap */
}

/* warm product-stage: soft beige spotlight behind the renders (they were
   shot on beige — this gives them their light back) + floor shadow */
.showcase-glasses::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 48%;
    width: 78%;
    height: 82%;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(213, 202, 191, .16), rgba(213, 202, 191, .05) 55%, transparent 75%);
    filter: blur(6px);
}

.showcase-glasses::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 4%;
    width: 55%;
    height: 9%;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent 75%);
    filter: blur(12px);
    animation: shadowFloat 6s infinite ease-in-out;
}

/* the push-to-talk render fills its canvas more than the others —
   bring it down to the same perceived size (scale the wrapper: the img
   itself carries the float animation's transform) */
#view-left .showcase-glasses {
    transform: scale(.8);
}

/* Floating Illusion */
.frame {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Since container is exactly 16/9, this fills it perfectly */
    pointer-events: none;
}

@keyframes floatSmart {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-32px);
    }
}

@keyframes shadowFloat {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translateX(-50%) scale(0.7);
        opacity: 0.3;
    }
}

.frame-1 {
    animation: floatSmart 6s infinite ease-in-out;
}

/* frame-2 is no longer needed but kept for safety if referenced */
.frame-2 {
    display: none;
}

/* ============================================================
   Showcase Notes — dot pops, line grows out of it, text lands.
   Same language as the homepage teacup annotations.
   Geometry per note via --lw (horizontal run) and --lv (vertical run).
   ============================================================ */
.showcase-note {
    position: absolute;
    z-index: 100;
    pointer-events: none;
}

.note-dot {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 12px;
    height: 12px;
    background: var(--yellow);
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(247, 255, 0, 0.65);
    transform: scale(0);
    transition: transform .3s var(--ease-out);
}

.dot-only .note-dot {
    transition-delay: .9s;
}

.seg-h {
    position: absolute;
    top: -1px;
    height: 2px;
    width: var(--lw);
    background: var(--yellow);
    opacity: .85;
    transform: scaleX(0);
    transition: transform .35s ease .18s;
}

.seg-v {
    position: absolute;
    width: 2px;
    height: var(--lv);
    background: var(--yellow);
    opacity: .85;
    transform: scaleY(0);
    transition: transform .3s ease .5s;
}

.note-content {
    position: absolute;
    /* one knob: the offsets below derive from it, so shrinking the label
       at a breakpoint keeps it centred on its line */
    --nw: 250px;
    width: var(--nw);
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .45s ease .75s, transform .45s ease .75s;
}

.note-content h4 {
    font-family: var(--font-display);
    color: var(--yellow);
    text-transform: uppercase;
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    letter-spacing: .05em;
    margin-bottom: .45rem;
    font-weight: 500;
    line-height: 1.1;
}

.note-content p {
    font-size: .85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}

/* --- directions: where the line travels from the dot */
.dir-ru .seg-h {
    left: 0;
    transform-origin: left center;
}

.dir-ru .seg-v {
    left: calc(var(--lw) - 2px);
    top: calc(-1 * var(--lv));
    transform-origin: bottom center;
}

.dir-ru .note-content {
    left: calc(var(--lw) - var(--nw) / 2);
    bottom: calc(var(--lv) + 14px);
}

.dir-rd .seg-h {
    left: 0;
    transform-origin: left center;
}

.dir-rd .seg-v {
    left: calc(var(--lw) - 2px);
    top: 0;
    transform-origin: top center;
}

.dir-rd .note-content {
    left: calc(var(--lw) - var(--nw) / 2);
    top: calc(var(--lv) + 14px);
}

.dir-lu .seg-h {
    right: 0;
    transform-origin: right center;
}

.dir-lu .seg-v {
    left: calc(-1 * var(--lw));
    top: calc(-1 * var(--lv));
    transform-origin: bottom center;
}

.dir-lu .note-content {
    left: calc(-1 * var(--lw) - var(--nw) / 2);
    bottom: calc(var(--lv) + 14px);
}

.dir-ld .seg-h {
    right: 0;
    transform-origin: right center;
}

.dir-ld .seg-v {
    left: calc(-1 * var(--lw));
    top: 0;
    transform-origin: top center;
}

.dir-ld .note-content {
    left: calc(-1 * var(--lw) - var(--nw) / 2);
    top: calc(var(--lv) + 14px);
}

/* --- play the sequence when the view is active (and section on screen) */
.product-showcase:not(.is-armed) .showcase-view.active .note-dot {
    transform: scale(1);
}

.product-showcase:not(.is-armed) .showcase-view.active .seg-h {
    transform: scaleX(1);
}

.product-showcase:not(.is-armed) .showcase-view.active .seg-v {
    transform: scaleY(1);
}

.product-showcase:not(.is-armed) .showcase-view.active .note-content {
    opacity: 1;
    transform: translateY(0);
}

/* second annotation of a view starts a beat later — matched by sibling
   order, so it survives any change to the stage markup */
.showcase-note + .showcase-note .note-dot {
    transition-delay: .55s;
}

.showcase-note + .showcase-note .seg-h {
    transition-delay: .73s;
}

.showcase-note + .showcase-note .seg-v {
    transition-delay: 1.05s;
}

.showcase-note + .showcase-note .note-content {
    transition-delay: 1.3s;
}

/* idle pulse on the dots once landed */
@keyframes dotPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(247, 255, 0, .5);
    }

    70% {
        box-shadow: 0 0 0 14px rgba(247, 255, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(247, 255, 0, 0);
    }
}

.product-showcase:not(.is-armed) .showcase-view.active .note-dot {
    animation: dotPulse 2.4s 1.4s infinite;
}

.showcase-hint {
    text-align: center;
    font-family: var(--font-display);
    font-size: .95rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--steel-500);
    margin-top: 2rem;
}

/* numbered badges: hidden on desktop (lines do the pointing),
   visible on mobile so the legend maps back to the render */
.note-num {
    display: none;
    position: absolute;
    top: -22px;
    left: 4px;
    font-family: var(--font-display);
    font-size: .85rem;
    font-weight: 700;
    color: var(--navy-900);
    background: var(--yellow);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    line-height: 18px;
    text-align: center;
}

.showcase-note .note-num::before {
    content: '1';
}

.showcase-note + .showcase-note .note-num::before {
    content: '2';
}

/* mobile legend replaces the floating notes */
.showcase-legend {
    display: none;
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
    text-align: left;
    counter-reset: legend;
}

.showcase-legend li {
    margin-bottom: 1rem;
    counter-increment: legend;
    position: relative;
    padding-left: 2rem;
}

.showcase-legend li::before {
    content: counter(legend);
    position: absolute;
    left: 0;
    top: .1rem;
    font-family: var(--font-display);
    font-size: .85rem;
    font-weight: 700;
    color: var(--navy-900);
    background: var(--yellow);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    line-height: 20px;
    text-align: center;
}

.showcase-legend h4 {
    font-family: var(--font-display);
    color: var(--yellow);
    text-transform: uppercase;
    font-size: 1.15rem;
    letter-spacing: .05em;
    margin-bottom: .2rem;
    font-weight: 500;
}

.showcase-legend p {
    font-size: .9rem;
    color: var(--steel-300);
    margin: 0;
}

/* ============================================================
   Responsive — showcase
   ============================================================ */
/* mid range: the labels still fit beside the render, but only if they
   give up some width first */
@media (max-width: 1200px) {
    .note-content {
        --nw: 190px;
    }

    .note-content p {
        font-size: .8rem;
    }
}

/* below this the floating labels can't sit beside the render at all:
   dots + numbered badges stay on the glasses, the legend carries the text */
@media (max-width: 900px) {
    .showcase-container {
        grid-template-columns: 1fr;
    }

    .showcase-thumbnails {
        flex-direction: row;
        justify-content: center;
        order: 2;
    }

    .thumbnail {
        width: clamp(56px, 16vw, 72px);
    }

    /* stacking views in a grid cell keeps the stage's 16/9 box intact,
       so the note percentages stay true — no display:none swap needed */
    .showcase-legend {
        display: block;
    }

    .showcase-note .seg-h,
    .showcase-note .seg-v,
    .showcase-note .note-content {
        display: none;
    }

    /* the numbered badge IS the marker on mobile — showing the plain
       dot next to it read as two competing dots */
    .showcase-note .note-dot {
        display: none;
    }

    .note-num {
        display: block;
        /* sit centred on the anchor point the dot used to mark */
        top: -9px;
        left: -9px;
    }
}

/* ============================================================
   Three Minds Section
   ============================================================ */
/* full-bleed by default — `main` has no horizontal padding, so the old
   negative margins pushed this past the viewport edge and created the
   horizontal scroll */
.deep-water {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: linear-gradient(to bottom, transparent 0%, rgba(9, 12, 16, 0.8) 40vh, rgb(4 5 7 / 95%) 100%);
}

/* grid on its own masked layer — fades in after the showcase and out
   before the page ends, no hard pattern edges */
.deep-water::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(169, 188, 212, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(169, 188, 212, .06) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 94%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 94%, transparent 100%);
}

.deep-water-fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.deep-water-fx .light-rays,
.deep-water-fx .css-bubbles {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 100vh;
    width: 100%;
    opacity: 1;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15vh, black calc(100% - 15vh), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15vh, black calc(100% - 15vh), transparent 100%);
}

.minds-section {
    position: relative;
    z-index: 2;
    padding-block: var(--sec-y);
    text-align: center;
    max-width: var(--sec-max);
    margin: 0 auto;
    width: 100%;
}

.minds-header {
    margin-bottom: 4rem;
}

.minds-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 5rem);
    line-height: 1.1;
    letter-spacing: 0.02em;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.minds-title-light {
    color: var(--white);
}

.minds-title-dark {
    color: rgba(255, 255, 255, 0.3);
}

.minds-subtitle {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    max-width: 600px;
    margin: 0 auto;
}

/* the invitation — this line is the section's call to action */
.minds-choose {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(1.6rem, 3.2vw, 1.6rem);
    letter-spacing: .03em;
    text-transform: none;
    color: var(--white);
    max-width: 22ch;
    margin: 1.6rem auto 0;
    line-height: 1.15;
}

.minds-choose em {
    font-style: normal;
    color: var(--yellow);
}

.minds-accordion {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 0 1rem;
    height: 45vh;
    min-height: 400px;
    max-width: 860px;
    margin: 0 auto;
    perspective: 1000px;
}

.mind-accordion-item {
    position: relative;
    flex: 1;
    border-radius: 24px;
    overflow: hidden;
    background: rgba(15, 15, 20, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    transition: flex 0.6s var(--ease-out), border-color 0.5s ease, box-shadow 0.5s ease, border-radius 0.6s var(--ease-out);
    cursor: pointer;
    /* idle float uses the `translate` property so the JS tilt can own
       `transform` without the two fighting */
    will-change: translate, transform;
}

/* idle cards drift on their own clocks; the open one holds still */
@media (prefers-reduced-motion: no-preference) {
    .mind-accordion-item:not(.is-expanded) {
        animation: mindDrift var(--drift-t, 7s) ease-in-out var(--drift-d, 0s) infinite alternate;
    }

    .mind-accordion-item:nth-child(1) { --drift-t: 7.2s; --drift-d: -2.4s; }
    .mind-accordion-item:nth-child(2) { --drift-t: 6.1s; --drift-d: -4.8s; }
    .mind-accordion-item:nth-child(3) { --drift-t: 8s;   --drift-d: -1.1s; }

    @keyframes mindDrift {
        from { translate: 0 -6px; }
        to   { translate: 0 6px; }
    }
}

.mind-float {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Active expanded state */
.mind-accordion-item.is-expanded {
    flex: 3;
    cursor: default;
    border-color: rgba(255, 255, 255, 0.25);
    border-top-color: rgba(255, 255, 255, 0.45);
    border-radius: 16px;
    box-shadow: 
        0 24px 60px rgba(0, 0, 0, 0.6), 
        inset 0 0 60px rgba(255, 255, 255, 0.05);
}

.mind-accordion-item.is-expanded .mind-overlay {
    border-radius: 16px;
}

/* the ghost state is opacity + filter, NOT a blend-mode: blend modes
   switch in one frame, these two dissolve — hover melts in over .9s */
.mind-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .38;
    filter: saturate(.35) brightness(1.25) contrast(.85) blur(1.5px);
    transition: opacity .9s ease, filter .9s ease;
}

.mind-accordion-item.is-expanded .mind-video {
    opacity: 1;
    filter: none;
}

.mind-overlay {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: 
        /* Soft atmospheric gradient */
        linear-gradient(to top, rgba(8, 10, 15, 0.9) 0%, rgba(8, 10, 15, 0.5) 40%, rgba(8, 10, 15, 0.1) 100%);
    /* Delicate beveling to sell the physical acrylic edge */
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.15),
        inset 0 -1px 1px rgba(255, 255, 255, 0.02),
        inset 1px 0 1px rgba(255, 255, 255, 0.03),
        inset -1px 0 1px rgba(255, 255, 255, 0.03);
    transition: border-radius 0.6s var(--ease-out), background 0.5s ease;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

/* Atmospheric depth-of-field blur on edges */
.mind-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, transparent 15%, black 80%);
    mask-image: radial-gradient(ellipse at 50% 40%, transparent 15%, black 80%);
    z-index: -1;
    transition: backdrop-filter 0.5s ease;
}

.mind-accordion-item.is-expanded .mind-overlay::before {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Faint moving reflection across the acrylic */
@keyframes acrylicReflection {
    0% { transform: translateX(-150%) skewX(-30deg); }
    20% { transform: translateX(150%) skewX(-30deg); }
    100% { transform: translateX(150%) skewX(-30deg); }
}

.mind-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.01) 35%, 
        rgba(255, 255, 255, 0.08) 50%, 
        rgba(255, 255, 255, 0.01) 65%, 
        transparent 100%);
    z-index: 5;
    pointer-events: none;
    animation: acrylicReflection 10s cubic-bezier(0.25, 1, 0.5, 1) infinite;
    opacity: 0.2;
    transition: opacity 0.5s ease;
}

.mind-accordion-item:hover .mind-overlay::after,
.mind-accordion-item.is-expanded .mind-overlay::after {
    opacity: 1;
}

.mind-content {
    position: relative;
    z-index: 10;
    padding: 2rem;
    padding-top: 4rem;
}

/* Soft white bloom behind typography */
.mind-content::before {
    content: '';
    position: absolute;
    inset: 0;
    top: 20%;
    z-index: -1;
    background: radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.mind-accordion-item.is-expanded .mind-content::before {
    opacity: 0.8;
}

.mind-name {
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--white);
    margin-bottom: 0;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: margin-bottom 0.5s ease, font-size 0.5s ease;
}

/* collapsed columns are narrow: the name has to fit them, not the
   expanded card ("Giacomo" was clipping) */
.mind-accordion-item:not(.is-expanded) .mind-name {
    font-size: clamp(1.2rem, 2.1vw, 1.9rem);
}

.mind-accordion-item:not(.is-expanded) .mind-tag {
    font-size: .68rem;
    letter-spacing: .12em;
}

.mind-accordion-item.is-expanded .mind-name {
    margin-bottom: 1rem;
}

/* Hidden details and avatar */
.mind-details,
.mind-avatar {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    position: absolute;
    /* Take out of flow when not expanded */
    visibility: hidden;
}

.mind-accordion-item.is-expanded .mind-details,
.mind-accordion-item.is-expanded .mind-avatar {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
    visibility: visible;
}

/* Details transition delays */
.mind-accordion-item.is-expanded .mind-details {
    transition-delay: 0.2s;
}

.mind-accordion-item.is-expanded .mind-avatar {
    transition-delay: 0.3s;
}

.mind-details p {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--white);
    margin: 0.25rem 0;
    letter-spacing: 0.05em;
}

.mind-details span {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: 0.25rem;
}

.mind-avatar {
    margin-top: 1.5rem;
}

.mind-avatar p {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--white);
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.avatar-box {
    width: 100px;
    height: 100px;
    border: 1px dashed rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-box::after {
    content: 'IMAGE PENDING';
    font-family: var(--font-body);
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   Horizontal Journey — image strip, titles only, faded edges
   so the scroll affordance is obvious.
   ============================================================ */
.journey-container {
    margin-top: 3.5rem;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    display: none;
}

.journey-container.is-visible {
    opacity: 1;
    transform: translateY(0);
    display: block;
}

.journey-scroll-wrapper {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    /* `overflow-x: auto` forces `overflow-y` to auto too, so the vertical
       padding has to leave room for the focused card's scale — otherwise
       its title and caption get clipped (worst on tablet, where the cards
       are widest). */
    padding-block: clamp(3rem, 8vh, 5rem);
    padding-inline: calc(50% - min(16vw, 200px));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
    /* fade to transparent at both ends — "there is more, scroll" */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.journey-scroll-wrapper:active {
    cursor: grabbing;
}

.journey-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.journey-step {
    flex: 0 0 auto;
    width: min(32vw, 400px);
    scroll-snap-align: center;
    margin: 0;
    user-select: none;
    display: flex;
    flex-direction: column;
    /* slower and gentler: the old .5s at a 1.35/0.85 delta snapped */
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1),
        opacity .8s ease,
        filter .8s ease;
    will-change: transform, opacity;
}

/* focus effect: the centered card pops out visually without shifting layout.
   Scale kept modest so the title lands at the same optical size as a
   .casa-card heading. */
.journey-step.is-focus {
    transform: scale(1.15) !important;
    z-index: 10;
}

/* unfocused steps get the kid-card ghost treatment: washed toward
   glass (bright, desaturated, soft blur) instead of dimmed to black */
.journey-step.is-away {
    transform: scale(0.94) !important;
    opacity: .45;
    filter: saturate(.35) brightness(1.25) contrast(.85) blur(1.5px);
    z-index: 1;
}

.journey-step.is-focus .journey-step-img {
    border-color: rgba(247, 255, 0, .35);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 0 34px rgba(247, 255, 0, .1);
}

.journey-step.is-focus .journey-step-desc {
    opacity: 1;
    transform: translateY(0);
}

.journey-step-img {
    width: 100%;
    aspect-ratio: 1.9 / 1;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    pointer-events: none;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    transition: border-color .35s ease, box-shadow .35s ease;
}

.journey-step-cap {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    margin-bottom: .7rem;
    text-align: left;
}

.journey-step-desc {
    margin-top: 1.2rem;
    font-family: var(--font-body);
    font-size: .95rem;
    line-height: 1.6;
    color: var(--steel-300);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .35s ease, transform .35s ease;
    text-align: center;
}

.journey-step.is-focus .journey-step-desc {
    opacity: 1;
    transform: translateY(0);
}

    /* yellow progress line under the strip, same language as the home scrolly */
    .journey-progress {
        height: 2px;
        background: rgba(255, 255, 255, .15);
        margin: 1rem 8vw 0;
    }

    .journey-progress span {
        display: block;
        height: 100%;
        width: 0;
        background: var(--yellow);
        transition: width .15s linear;
    }

    .journey-step-num {
        font-family: var(--font-display);
        font-size: 1.05rem;
        color: var(--yellow);
        letter-spacing: .1em;
    }

    /* same declared size as .casa-card h3 — with the focus scale now at
       1.15 the two read at the same weight on screen */
    .journey-step-title {
        font-family: var(--font-display);
        font-size: clamp(1.3rem, 1.8vw, 1.6rem);
        font-weight: 500;
        color: var(--white);
        letter-spacing: .05em;
        text-transform: uppercase;
        line-height: 1.15;
    }

    .journey-drag-hint {
        text-align: center;
        font-family: var(--font-display);
        font-size: .85rem;
        letter-spacing: .25em;
        text-transform: uppercase;
        color: var(--steel-500);
        margin-top: .4rem;
    }

    /* ============================================================
   Minds — color on hover, glow, video plays on click
   ============================================================ */
.mind-accordion-item:hover .mind-video {
    opacity: 1;
    filter: none;
}

.mind-accordion-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
    border-top-color: rgba(255, 255, 255, 0.35);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.55), 
        inset 0 0 40px rgba(255, 255, 255, 0.03);
}

.mind-tag {
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--steel-300);
    margin-top: .2rem;
}

.minds-subtitle strong {
    color: var(--white);
}



    /* ============================================================
   Casa — pinned horizontal shelf
   ============================================================ */
    .casa-section {
        position: relative;
        z-index: 2;
        max-width: var(--sec-max);
        margin-inline: auto;
        padding-block: var(--sec-y);
    }

    .casa-pin {
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        padding-bottom: 3rem;
    }

    .casa-track {
        display: flex;
        gap: clamp(1.2rem, 3vw, 2.4rem);
        padding: 0 calc(50% - min(22vw, 280px));
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
        cursor: grab;
    }

    .casa-track:active {
        cursor: grabbing;
    }

    .casa-track::-webkit-scrollbar {
        display: none;
    }

    .casa-card {
        flex: 0 0 min(44vw, 560px);
        scroll-snap-align: center;
    }

    .casa-card video {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, .12);
        background: #0a0f1e;
        box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    }

    .casa-card h3 {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: clamp(1.3rem, 1.8vw, 1.6rem);
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--white);
        margin-top: 1.1rem;
        line-height: 1.15;
    }

    .casa-card p {
        color: var(--steel-300);
        font-size: .95rem;
        margin-top: .3rem;
        max-width: 52ch;
    }

    /* arrows + hint: the shelf reads as scrollable at a glance */
    .casa-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.1rem;
        margin-top: 1.6rem;
    }

    .casa-arrow {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        color: var(--steel-300);
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 50%;
        cursor: pointer;
        transition: color .3s, background-color .3s, border-color .3s;
    }

    .casa-arrow:hover {
        color: var(--navy-900);
        background: var(--yellow);
        border-color: var(--yellow);
    }

    .casa-arrow:focus-visible {
        outline: 2px solid var(--yellow);
        outline-offset: 2px;
    }

    .casa-hint {
        font-family: var(--font-display);
        font-size: .85rem;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--steel-500);
    }

    .casa-progress {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.5rem;
        height: 3px;
        background: rgba(255, 255, 255, .15);
    }

    #casaBar {
        display: block;
        height: 100%;
        width: 0;
        background: var(--yellow);
    }

    /* ============================================================
   Conclusion
   ============================================================ */
    .conclusion {
        position: relative;
        z-index: 2;
        overflow: hidden;
        text-align: center;
        padding-block: calc(var(--sec-y) * 1.4) var(--sec-y);
    }

    .conclusion-text {
        font-family: var(--font-body);
        font-weight: 400;
        font-size: clamp(1.7rem, 3.2vw, 2.5rem);
        line-height: 1.5;
        text-transform: none;
        color: var(--white);
        max-width: 40ch;
        margin: 0 auto;
    }

    /* plain emphasis spans go yellow; the .hl highlight must NOT — it needs
       navy text on its yellow block, or the words vanish (yellow-on-yellow) */
    .conclusion-text span:not(.hl) {
        color: var(--yellow);
        font-weight: 500;
    }

    .conclusion-text .hl {
        font-weight: 500;
    }

    .end-links {
        margin-top: 4rem;
        display: flex;
        gap: 2.5rem;
        justify-content: center;
        font-family: var(--font-display);
        font-size: 1.05rem;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .end-links a {
        color: var(--steel-300);
        transition: color .25s ease;
    }

    .end-links a:hover {
        color: var(--navy-950, #05070F);
        background: var(--yellow);
    }

    /* ============================================================
   Responsive — sections
   ============================================================ */
    @media (max-width: 900px) {
        /* stays a row at every size — the three minds sit side by side and
           the journey opens underneath, same as desktop */
        .minds-accordion {
            flex-direction: row;
            gap: .6rem;
            padding-inline: 0;
            height: 38vh;
            min-height: 300px;
        }

        .mind-accordion-item {
            border-radius: 16px;
        }

        .mind-content {
            padding: 1rem .8rem;
            padding-top: 2rem;
        }

        .mind-name {
            font-size: clamp(1.1rem, 4.2vw, 2rem);
        }

        .mind-tag {
            font-size: .62rem;
            letter-spacing: .12em;
        }

        .journey-scroll-wrapper {
            padding-block: clamp(2.5rem, 7vh, 4rem);
            padding-inline: 6vw;
        }

        .journey-step {
            flex: 0 0 80vw;
        }

        .teacher-flow {
            grid-template-columns: 1fr;
        }

        .teacher-media {
            position: sticky;
            top: calc(var(--nav-h, 64px) + .5rem);
            z-index: 5;
            aspect-ratio: 16 / 9;
        }

        .teacher-beats {
            gap: 45vh;
            padding: 10vh 0 20vh;
        }

        .casa-card {
            flex: 0 0 84vw;
        }

        .end-links {
            flex-direction: column;
            gap: 1.2rem;
        }
    }
/* ============================================================
   Phones — the minds row stays a row (three side by side), it just
   gets tighter. The journey still opens underneath it.
   ============================================================ */
@media (max-width: 600px) {

    /* the big statement type floors at 1.7rem via clamp, which is far too
       large once the column is only a few hundred px wide */
    .intro-large,
    .conclusion-text {
        font-size: 1.2rem;
        line-height: 1.55;
    }

    .opener-title,
    .minds-title {
        font-size: clamp(1.9rem, 8vw, 2.6rem);
    }

    .minds-choose {
        font-size: 1.1rem;
    }

    .character-intro__text {
        font-size: .95rem;
    }

    .minds-accordion {
        gap: .4rem;
        height: 34vh;
        min-height: 240px;
    }

    .mind-content {
        padding: .7rem .5rem;
        padding-top: 1.2rem;
    }

    .mind-name {
        font-size: clamp(.95rem, 4.6vw, 1.5rem);
        letter-spacing: 0;
    }

    /* collapsed cards are too narrow for a horizontal label */
    .mind-accordion-item:not(.is-expanded) .mind-name {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        margin-inline: auto;
    }

    .mind-accordion-item:not(.is-expanded) .mind-tag {
        display: none;
    }

    /* the focused card is scaled, and `overflow-x: auto` clips whatever
       that scale pushes past the wrapper — so the card has to be narrow
       enough that 1.15x of it still fits between the paddings */
    .journey-step {
        flex: 0 0 72vw;
    }

    .journey-step.is-focus {
        transform: scale(1.06) !important;
    }

    .journey-scroll-wrapper {
        padding-inline: 12vw;
    }

    .journey-step-img {
        aspect-ratio: 4 / 3;
    }

    .journey-step-cap {
        gap: .5rem;
    }

    .journey-step-title {
        font-size: .95rem;
        letter-spacing: .03em;
    }

    .journey-step-num {
        font-size: .85rem;
    }

    .journey-step-desc {
        font-size: .82rem;
        line-height: 1.5;
        margin-top: .8rem;
    }
}

/* titles and captions wrap instead of being clipped, at every size */
.journey-step-cap {
    flex-wrap: wrap;
}

.journey-step-title,
.journey-step-desc {
    overflow-wrap: break-word;
    hyphens: auto;
}