/* ==========================================================================
   EVA — Red Light Therapy | About Page Stylesheet
   Author : IT Geeks
   File   : about.css  (about.html only — loaded after style.css/responsive.css)
   Note   : Page-scoped. Every token comes from :root in style.css; nothing
            here is redefined. Breakpoints live at the foot of this file so
            the page stays self-contained and can be dropped or replaced
            without touching the global sheets.
   ========================================================================== */

/* ==========================================================================
   00. PAGE SCALE
   --------------------------------------------------------------------------
   Every full-height panel on this page answers to one number, so the hero,
   the two pinned panels and the single-screen sections all share a rhythm.
   720px is the figure .hero already uses on the home page.
   ========================================================================== */
.page-about {
    /* where a pinned panel parks: centred on screens taller than it, flush to
       the top on shorter ones. about.js reads this back, so the two cannot
       disagree about where the pin begins. */
    --panel-top: max(0px, calc((100vh - var(--panel-h)) / 2));

    /* The hero headline sits between --font-h1 and --font-h2. Deriving it
       from --font-h1 rather than hard-coding pixels means it rides the type
       scale responsive.css already rebuilds at every breakpoint, instead of
       needing four hand-maintained overrides that drift out of step. */
    --font-hero: clamp(30px, calc(var(--font-h1) * 0.58), 64px);

    /* The manifesto runs from the page's own pearl down into lilac, and the
       origin section below picks that exact colour back up — the same trick
       --gradient-pink-to-lilac plays on the home page, so the two sections
       meet without a seam. Page-scoped: the shared tokens are untouched. */
    --gradient-to-lilac: linear-gradient(180deg,
        var(--color-bg) 0%,
        #FAF6FD 44%,
        #F3ECFB 74%,
        #EBE1F9 100%);
    --gradient-lilac-out: linear-gradient(180deg,
        #EBE1F9 0%,
        #F6F2FD 46%,
        #FDFBF9 100%);

    /* the arch: fully round at the top, square at the foot. Declared once and
       worn by both hero frames, so the pair cannot drift out of shape. */
    --arch: 50% 50% var(--radius-xl) var(--radius-xl) / 34% 34% var(--radius-xl) var(--radius-xl);

    --panel-h: 720px;
    /* a panel never grows past the screen it is shown on, or a pinned one
       would hide its own bottom edge on a short laptop */
    --panel-fit: min(100vh, var(--panel-h));
}

/* ==========================================================================
   01. READING RAIL — a hairline that fills with scroll progress
   ========================================================================== */
.read-rail {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: calc(var(--z-header) + 1);
    width: 100%;
    height: 2px;
    background-color: transparent;
    pointer-events: none;
}

.read-rail-fill {
    display: block;
    width: 100%;
    height: 100%;
    background-image: var(--gradient-line);
    /* written from JS as a 0 → 1 scalar */
    transform: scaleX(var(--read, 0));
    transform-origin: left center;
}

/* ==========================================================================
   02. HERO
   ========================================================================== */
.about-hero {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    /* clears the absolutely-positioned header — tied to its height so the
       two cannot drift apart when the header changes, exactly as .hero does */
    min-height: var(--panel-h);
    padding: calc(var(--header-height) + var(--space-16)) var(--gutter-width) var(--space-28);
    background-image: var(--gradient-pearl);
    position: relative;
    /* NOT overflow:hidden — that was clipping the arch's 64px drop shadow
       flat against the section's bottom edge. The glow was the only thing
       that needed containing, and it clips itself now. Box shadows are ink
       overflow, never layout overflow, so nothing here can scroll. */
}

.about-hero-glow {
    display: block;
    position: absolute;
    inset: 0;
    /* clips its own bleed rather than making the whole section clip */
    overflow: hidden;
    pointer-events: none;
}

.about-hero-glow::before {
    content: "";
    display: block;
    position: absolute;
    top: -20%;
    right: -10%;
    width: 70vw;
    height: 70vw;
    max-width: 900px;
    max-height: 900px;
    background-image: var(--gradient-glow);
}

.about-hero-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-80);
    width: 100%;
    max-width: var(--container-width);
    position: relative;
    z-index: var(--z-base);
}

.about-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-20);
    flex: 1 1 52%;
}

/* ---------- the kinetic headline ---------- */
.kinetic {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* deliberately below --font-h1: at 104px the three lines alone ate a
       720px panel, leaving nothing for the lead, the buttons or the meta */
    font-size: var(--font-hero);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tighter);
}

/* each line is a window; the inner span is what actually travels */
.kinetic-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.06em;
}

.kinetic-inner {
    display: block;
    transform: translateY(105%);
    opacity: 0;
    transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

.kinetic.is-in .kinetic-inner {
    transform: translateY(0);
    opacity: 1;
}

/* the lines follow one another rather than arriving together */
.kinetic-line:nth-child(2) .kinetic-inner {
    transition-delay: 0.12s;
}

.kinetic-line:nth-child(3) .kinetic-inner {
    transition-delay: 0.24s;
}

.kinetic em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--fw-light);
    color: var(--color-rose-gold-deep);
}

.about-hero-lead {
    max-width: 46ch;
}

.about-hero-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-16);
}

/* ---------- the founded / home / status strip ---------- */
.about-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-40);
    width: 100%;
    padding-top: var(--space-20);
    border-top: var(--border-thin) solid var(--color-line);
}

.about-meta-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.about-meta dt {
    font-size: var(--font-11);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-widest);
    text-transform: var(--tt-uppercase);
    color: var(--color-muted);
}

.about-meta dd {
    /* Gloock, not Cormorant: every display numeral on the site — the hero
       stat, the orbit values, the price — is set in the heading face */
    font-family: var(--font-heading);
    font-size: var(--font-display-sm);
    line-height: var(--lh-tight);
    color: var(--color-heading);
}

/* ---------- the portrait, its inset and the turning seal ---------- */
.about-hero-figure {
    display: block;
    flex: 1 1 48%;
    position: relative;
    align-self: stretch;
    min-height: 520px;
}

.about-hero-frame {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 78%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--arch);
    box-shadow: var(--shadow-lg);
    will-change: transform;
}

.about-hero-frame img,
.about-hero-inset img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--color-porcelain);
}

.about-hero-inset {
    display: block;
    position: absolute;
    /* hangs past the foot of the arch rather than tucking inside it */
    bottom: -7%;
    left: 0;
    width: 44%;
    /* the same 4:5 the arch frame carries — the arch's radii are percentages,
       so on a square they described a visibly flatter curve than on the big
       frame. Matching the ratio is what makes the two shapes identical. */
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: var(--border-thick) solid var(--color-white);
    border-radius: var(--arch);
    box-shadow: var(--shadow-md);
    will-change: transform;
}

.about-hero-seal {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 6%;
    bottom: 8%;
    width: 116px;
    height: 116px;
    border-radius: var(--radius-circle);
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
}

.about-hero-seal svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* the ring of type turns slowly and forever */
    animation: seal-turn 18s linear infinite;
}

.about-hero-seal text {
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wider);
    text-transform: var(--tt-uppercase);
    fill: var(--color-rose-gold);
}

.about-hero-seal i {
    font-size: var(--icon-lg);
    color: var(--color-rose-gold-deep);
}

@keyframes seal-turn {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   03. MANIFESTO — words lit one at a time by scroll position
   ========================================================================== */
.manifesto {
    display: block;
    width: 100%;
    /* the lilac arrives over the last third, so it reads as the section
       turning rather than as a line at the very bottom */
    background-image: var(--gradient-to-lilac);
}

/* the tall viewport is the scroll budget the sticky panel spends */
.manifesto-viewport {
    display: block;
    position: relative;
    width: 100%;
    /* the panel, plus the scroll it spends lighting the sentence */
    height: calc(var(--panel-fit) + 160vh);
}

.manifesto-sticky {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: var(--panel-top);
    width: 100%;
    height: var(--panel-fit);
    padding: 0 var(--gutter-width);
}

.manifesto-sticky .container {
    align-items: center;
    gap: var(--space-40);
}

.manifesto-text {
    font-family: var(--font-heading);
    /* the page's centrepiece: at --font-h3 it read smaller than the section
       headings on either side of it, which inverted the hierarchy */
    font-size: var(--font-h2);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    text-align: center;
    text-wrap: balance;
    color: var(--color-heading);
}

/* only once JS has split the words does the text start out dimmed —
   without script, or with motion reduced, the paragraph just reads */
.manifesto-text.is-split .m-word {
    color: var(--color-line);
    transition: color 0.28s ease;
}

.manifesto-text.is-split .m-word.is-lit {
    color: var(--color-heading);
}

.manifesto-text .m-word {
    display: inline-block;
    white-space: pre;
}

/* ==========================================================================
   04. ORIGIN — pinned section, horizontal rail
   ========================================================================== */
.origin {
    display: block;
    width: 100%;
    /* starts on the exact lilac the manifesto ended on */
    background-image: var(--gradient-lilac-out);
}

.origin-viewport {
    display: block;
    position: relative;
    width: 100%;
    /* JS overwrites this with the exact travel the rail needs */
    height: 320vh;
}

.origin-sticky {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-28);
    position: sticky;
    top: var(--panel-top);
    width: 100%;
    height: var(--panel-fit);
    /* The stuck header floats over this panel, so the head has to clear it —
       but the panel already parks --panel-top down the screen, and that
       offset is clearance the padding does not need to pay for again. On a
       tall screen this hands ~100px straight to the photographs; on a short
       one, where --panel-top is 0, it falls back to the full header height. */
    padding: max(var(--space-24), calc(var(--header-height) - var(--panel-top))) 0 var(--space-32);
    overflow: hidden;
}

.origin-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
    width: 100%;
    max-width: var(--container-width);
    padding: 0 var(--gutter-width);
    margin-inline: auto;
}

.origin-head h2 {
    /* the same --font-h2 as every other section heading on the site;
       one line at this size costs the panel no more than two did at h4 */
    font-size: var(--font-h2);
    white-space: nowrap;
}

/* below this it no longer fits on one line, and wrapping beats overflowing */
@media (max-width: 992px) {
    .origin-head h2 {
        white-space: normal;
    }
}

.origin-head em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--fw-light);
    color: var(--color-rose-gold-deep);
}

.origin-head p {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    color: var(--color-muted);
}

/* the gesture differs by breakpoint, so the instruction has to as well */
.origin-hint-swipe {
    display: none;
}

.origin-head i {
    /* a small nudge, so the arrow reads as an instruction */
    animation: nudge-x 1.6s ease-in-out infinite;
}

@keyframes nudge-x {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6px); }
}

.origin-rail {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--grid-gap);
    padding: 0 var(--gutter-width);
    width: max-content;
    /* the rail takes whatever the panel has left after the head, and the
       cards divide it up — so the years fit any panel height without a
       single hard-coded card height to keep in step */
    flex: 1 1 auto;
    min-height: 0;
    will-change: transform;
}

.origin-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
    flex: 0 0 auto;
    width: 400px;
    min-height: 0;
    padding: var(--space-28);
    background-color: var(--color-white);
    border: var(--border-thin) solid var(--color-line-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.origin-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-6px);
}

.origin-year {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    font-family: var(--font-heading);
    font-size: var(--font-display-sm);
    line-height: var(--lh-tight);
    color: var(--color-rose-gold-deep);
}

.origin-card h3 {
    font-size: var(--font-h5);
}

.origin-card p {
    font-size: var(--font-14);
}

.origin-card em {
    font-style: italic;
    color: var(--color-rose-gold-deep);
}

.origin-figure {
    display: block;
    width: 100%;
    margin-top: auto;
    /* no fixed ratio: the image is the card's shock absorber, taking every
       pixel the copy above it did not need */
    flex: 1 1 auto;
    min-height: 180px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-porcelain);
}

.origin-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.origin-card.is-now {
    justify-content: center;
    background-image: var(--gradient-champagne);
    border-color: transparent;
}

.origin-card.is-now .origin-year {
    color: var(--color-ink);
}

/* ==========================================================================
   05. PRINCIPLES — sticky stack
   ========================================================================== */
.principles {
    background-color: var(--color-bg);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
    width: 100%;
}

.stack-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-48);
    /* each card parks a little lower than the one before, so the stack
       fans out and every card underneath keeps a visible edge */
    position: sticky;
    top: calc(var(--header-height) + var(--space-16) + (var(--i) * 22px));
    padding: var(--space-48);
    background-color: var(--color-white);
    border: var(--border-thin) solid var(--color-line-soft);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
    /* JS shrinks each card as the next one arrives over it */
    transform: scale(var(--scale, 1));
    transform-origin: center top;
    will-change: transform;
}

.stack-card:nth-child(2) { background-color: var(--color-porcelain); }
.stack-card:nth-child(3) { background-color: var(--color-blush-tint); }
.stack-card:nth-child(4) { background-image: var(--gradient-champagne); }

.stack-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-16);
    flex: 1 1 58%;
}

.stack-index {
    font-family: var(--font-heading);
    font-size: var(--font-display-sm);
    line-height: var(--lh-tight);
    color: var(--color-rose-gold-deep);
}

.stack-card h3 {
    font-size: var(--font-h4);
}

.stack-card p {
    max-width: 52ch;
}

.stack-card em {
    font-style: italic;
    color: var(--color-rose-gold-deep);
}

.stack-tag {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-16);
    font-size: var(--font-12);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    color: var(--color-ink);
    background-color: rgba(255, 255, 255, 0.7);
    border: var(--border-thin) solid var(--color-line);
    border-radius: var(--radius-pill);
}

.stack-card-figure {
    display: block;
    flex: 1 1 42%;
    /* 4:3 rather than square: a square figure pushed the card past a 720px
       screen at desktop widths, and the stack needs a card to fit one */
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: var(--color-black);
}

.stack-card-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   06. NUMBERS
   ========================================================================== */
.numbers,
.gallery,
.closing {
    min-height: var(--panel-h);
    align-items: center;
}

/* the shelves sit 2px into the neighbours so no sliver of black shows at
   either seam; the section clips that overhang rather than bleeding it */
.numbers {
    overflow: hidden;
}

/* the clip sits beside the figures rather than above them — stacked, a
   16:9 video and five cells could not share a 720px panel */
.numbers-layout {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--grid-gap);
    width: 100%;
}

.numbers-media {
    display: block;
    flex: 1 1 44%;
    /* no aspect-ratio: it takes its height from the grid beside it, and the
       footage is cropped to fill rather than letterboxed on the black */
    min-height: 0;
    overflow: hidden;
    background-color: #0B0B0B;
    border: var(--border-thin) solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
}

.numbers-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.numbers-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--grid-gap-sm);
    flex: 1 1 56%;
}

.number-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
    /* two to a row, so five cells make 2 + 2 + 1 */
    flex: 1 1 calc(50% - var(--grid-gap-sm));
    min-width: 180px;
    padding: var(--space-24) var(--space-20);
    text-align: center;
    /* a solid fill, not a translucent one — at 4% white the diode field read
       straight through the cells and they stopped looking like cards */
    background-color: #0B0B0B;
    border: var(--border-thin) solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    transition: background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.number-cell.is-wide {
    flex-basis: 100%;
}

.number-cell:hover {
    background-color: #151515;
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-4px);
}

.number-value {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-6);
    font-family: var(--font-heading);
    /* --font-display-lg, the same weight the price carries on the home page;
       --font-display-xl left these five cells shouting past the heading */
    font-size: var(--font-display-lg);
    line-height: var(--lh-tight);
    color: var(--color-champagne);
}

.number-value span {
    font-family: var(--font-body);
    font-size: var(--font-12);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    color: var(--color-text-invert);
}

.number-label {
    font-size: var(--font-13);
    line-height: var(--lh-base);
    color: rgba(239, 231, 222, 0.7);
}

/* ==========================================================================
   07. GALLERY — two rows drifting, skewed by scroll velocity
   ========================================================================== */
/* .section is a flex ROW centring a single container. This one carries a
   second child — the drift band — so it has to stack them instead, or the
   band lands beside the heading rather than under it. */
.gallery {
    flex-direction: column;
    align-items: center;
}

.gallery .container {
    gap: var(--space-40);
}

.drift {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap-sm);
    /* full bleed: it reaches back out through the section's gutters */
    width: calc(100% + (var(--gutter-width) * 2));
    margin-inline: calc(-1 * var(--gutter-width));
    padding-top: var(--space-80);
    overflow: hidden;
    /* the whole band leans into the scroll, then settles */
    transform: skewY(var(--skew, 0deg));
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.drift-row {
    display: flex;
    flex-direction: row;
    /* the same gap as inside a track, so the seam where the track meets its
       clone is spaced like every other join and the loop is invisible */
    gap: var(--grid-gap-sm);
    width: 100%;
    overflow: hidden;
}

.drift-track {
    display: flex;
    flex-direction: row;
    gap: var(--grid-gap-sm);
    width: max-content;
    will-change: transform;
}

.drift-item {
    display: block;
    flex: 0 0 auto;
    /* sized so one row, its heading and the section's padding land on
       --panel-h; two rows of these could not fit a 720px screen */
    width: 328px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-porcelain);
}

.drift-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.drift-item:hover img {
    transform: scale(1.06);
}

/* ==========================================================================
   08. CLOSING
   ========================================================================== */
.closing {
    background-image: var(--gradient-fade-pink);
}

.closing-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-20);
    width: 100%;
    padding: var(--space-80) var(--space-48);
    text-align: center;
    background-color: var(--color-white);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
}

.closing-card h2 {
    font-size: var(--font-h2);
}

.closing-card .text-lead {
    max-width: 56ch;
}

.closing-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
    padding-top: var(--space-12);
}

/* ==========================================================================
   09. RESPONSIVE — page-scoped breakpoints
   ========================================================================== */

/* ---------- ≤ 1200px : the hero tightens, cards narrow ---------- */
@media (max-width: 1200px) {
    .about-hero-inner {
        gap: var(--space-48);
    }

    .about-hero-figure {
        min-height: 540px;
    }

    .stack-card {
        gap: var(--space-32);
        padding: var(--space-32);
    }

}

/* ---------- ≤ 992px : hero and stack go to one column ---------- */
@media (max-width: 992px) {
    .about-hero {
        padding: calc(var(--header-height) + var(--space-24)) var(--gutter-width) var(--space-96);
    }

    .about-hero-inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-64);
    }

    .about-hero-figure {
        min-height: 460px;
    }

    .about-hero-frame {
        width: 72%;
    }

    .about-hero-inset {
        width: 42%;
    }

    .stack-card {
        flex-direction: column;
        gap: var(--space-24);
    }

    .stack-card-figure {
        aspect-ratio: 16 / 9;
    }

    .origin-card {
        width: 360px;
    }

}

/* ---------- ≤ 768px : the pinned sections stand down ----------
   Pinning costs a phone a lot of scroll for little reward, and a
   horizontal rail driven by vertical scroll fights the platform's own
   gesture. Both become ordinary flow: the manifesto simply reads, and
   the years become a swipeable row like the rest of the site. */
@media (max-width: 768px) {
    .kinetic {
        letter-spacing: var(--ls-tight);
    }

    .about-hero-figure {
        min-height: 380px;
    }

    .about-meta {
        gap: var(--space-28);
    }

    .about-hero-seal {
        width: 88px;
        height: 88px;
    }

    /* ---------- manifesto: no pin, no dimming ---------- */
    .manifesto-viewport {
        height: auto;
    }

    .manifesto-sticky {
        position: static;
        height: auto;
        padding: var(--section-padding-y) var(--gutter-width);
    }

    /* ---------- origin: a swipeable row, not a pinned rail ---------- */
    .origin-viewport {
        height: auto !important;
    }

    .origin-sticky {
        position: static;
        height: auto;
        padding: var(--section-padding-y) 0;
        overflow: visible;
    }

    .origin-rail {
        width: 100%;
        gap: var(--grid-gap-sm);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter-width);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        transform: none !important;
    }

    .origin-rail::-webkit-scrollbar {
        display: none;
    }

    .origin-hint-scroll {
        display: none;
    }

    .origin-hint-swipe {
        display: inline;
    }

    .origin-card {
        width: clamp(260px, 82vw, 340px);
        padding: var(--space-24);
        scroll-snap-align: start;
    }

    /* ---------- stack: plain cards, nothing sticky ---------- */
    .stack-card {
        position: static;
        padding: var(--space-24);
        border-radius: var(--radius-xl);
        transform: none !important;
    }

    /* 56px shelves eat a 390px screen the way they never do a 1440px one, and
       they were leaving the heading 2px of clearance. Same curve, shorter. */
    .numbers .shelf__wave {
        height: 36px;
        -webkit-mask-size: 1440px 36px;
        mask-size: 1440px 36px;
    }

    .numbers-layout {
        flex-direction: column;
    }

    .numbers-media {
        flex: 0 0 auto;
        /* wider than 16:9 on a phone, where the clip and five stacked cells
           were together pushing the section 57px past --panel-h */
        aspect-ratio: 2 / 1;
    }

    .numbers-grid {
        gap: var(--space-12);
    }

    .number-cell {
        min-width: 140px;
        padding: var(--space-16) var(--space-12);
    }

    .drift {
        padding-top: var(--space-48);
    }

    .drift-item {
        width: 220px;
    }

    .drift {
        transform: none;
    }

    .closing-card {
        padding: var(--space-48) var(--space-24);
    }

}

/* ---------- ≤ 480px ---------- */
@media (max-width: 480px) {
    .about-hero-figure {
        min-height: 320px;
    }

    .about-hero-actions .btn,
    .closing-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .drift-item {
        width: 170px;
    }
}

/* ---------- reduced motion : nothing travels on its own ---------- */
@media (prefers-reduced-motion: reduce) {
    .kinetic-inner {
        transform: none;
        opacity: 1;
        transition: none;
    }

    .about-hero-seal svg,
    .origin-head i {
        animation: none;
    }

    .drift {
        transform: none;
    }

    .manifesto-viewport,
    .origin-viewport {
        height: auto !important;
    }

    .manifesto-sticky,
    .origin-sticky {
        position: static;
        height: auto;
        padding-block: var(--section-padding-y);
    }

    .origin-rail {
        width: 100%;
        overflow-x: auto;
        transform: none !important;
    }

    .stack-card {
        position: static;
        transform: none !important;
    }
}