.os-story {
    position: relative;
    width: 100%;
    overflow: clip;
}

.os-story .os-hero + .os-moving {
    margin-top: clamp(-125px, -10vh, -80px);
}

/* ---------------- Hero ---------------- */
.os-hero {
    --hero-bg: transparent;
    --hero-panel: #ffffff;
    --hero-text: #0b0b0b;
    --hero-media-top: clamp(28px, 4.5vh, 64px);
    --hero-media-left: clamp(10px, 1.9vw, 36px);
    --hero-image-width: min(36vw, 560px);
    --hero-image-height: clamp(400px, 38vw, 560px);
    --hero-panel-offset: 54px;
    --hero-panel-overlap: clamp(42px, 3.5vw, 56px);
    --hero-copy-gap: 150px;
    position: relative;
    width: 100%;
    height: 102vh;
    min-height: 720px;
    background: var(--hero-bg);
    isolation: isolate;
}

.os-hero__stage {
    position: sticky;
    top: 0;
    width: 100%;
    min-height: 640px;
    height: 100vh;
    max-width: 1920px;
    overflow: visible;
}

.os-hero__media,
.os-hero__panel {
    position: absolute;
    backface-visibility: hidden;
    will-change: transform, opacity, clip-path;
}

.os-hero__media {
    z-index: 2;
    left: var(--hero-media-left);
    top: var(--hero-media-top);
    width: var(--hero-image-width);
    height: var(--hero-image-height);
    overflow: hidden;
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translate3d(0, 150px, 0) scale(.985);
    transition:
        clip-path 1.6s cubic-bezier(.16, 1, .3, 1),
        transform 1.7s cubic-bezier(.16, 1, .3, 1),
        opacity 1s ease;
}

.os-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.05);
    transition: transform 2.4s cubic-bezier(.16, 1, .3, 1);
}

.os-hero__panel {
    z-index: 1;
    left: calc(var(--hero-media-left) + var(--hero-image-width) - var(--hero-panel-overlap));
    right: 0;
    top: calc(var(--hero-media-top) + var(--hero-panel-offset));
    width: auto;
    height: auto;
    min-height: calc(var(--hero-image-height) + 4px);
    background: var(--hero-panel);
    color: var(--hero-text);
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, -150px, 0);
    transition:
        clip-path 1.7s cubic-bezier(.16, 1, .3, 1),
        transform 1.8s cubic-bezier(.16, 1, .3, 1),
        opacity 1s ease;
}

.os-hero__copy {
    position: relative;
    z-index: 2;
    width: min(100%, 690px);
    margin-left: 0;
    padding: clamp(46px, 4.8vw, 76px) clamp(40px, 4vw, 68px) clamp(50px, 5vw, 82px) calc(var(--hero-panel-overlap) + var(--hero-copy-gap));
}

.os-hero__title {
    margin: 0 0 clamp(44px, 5.5vh, 72px);
    font-family: 'ABC Arizona Flare', serif;
    font-size: clamp(44px, 3.8vw, 64px);
    font-weight: 300;
    line-height: .98;
    letter-spacing: -0.045em;
    color: var(--hero-text);
}

.os-hero__title-line {
    display: block;
    overflow: hidden;
    padding-bottom: .09em;
    margin-bottom: -.09em;
    white-space: nowrap;
}

.os-hero__title-line > span {
    display: block;
    opacity: 0;
    transform: translate3d(0, 125%, 0) rotate(.5deg);
    transition: transform 1.15s cubic-bezier(.16, 1, .3, 1), opacity .85s ease;
}

.os-hero__title-line.is-visible > span {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0);
}

.os-hero__content {
    margin-top: 25px;
    max-width: 690px;
    font-size: clamp(15px, 1vw, 17px);
    line-height: 1.58;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, 34px, 0);
    filter: blur(3px);
    transition:
        opacity 1s ease,
        clip-path 1.25s cubic-bezier(.16, 1, .3, 1),
        transform 1.25s cubic-bezier(.16, 1, .3, 1),
        filter .9s ease;
}

.os-hero__content.is-visible {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

.os-hero__content > *:first-child { margin-top: 0; }
.os-hero__content > *:last-child { margin-bottom: 0; }

.os-hero__logo-wrap {
    position: absolute;
    z-index: 4;
    top: var(--hero-media-top);
    left: calc(var(--hero-media-left) + var(--hero-image-width));
    width: clamp(75px, 6.25vw, 118px);
    opacity: 0;
    filter: blur(5px);
    transform: translate3d(-50%, -42%, 0) scale(.72) rotate(-7deg);
    transform-origin: 50% 50%;
    transition: opacity .85s ease, transform 1.15s cubic-bezier(.16, 1, .3, 1), filter .9s ease;
}

.os-hero__logo-wrap.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(-50%, -18%, 0) scale(1) rotate(0);
}

.os-hero__logo {
    display: block;
    width: 100%;
    height: auto;
}

.os-hero.is-media-visible .os-hero__media {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0) scale(1);
}

.os-hero.is-media-visible .os-hero__image { transform: scale(1); }

.os-hero.is-panel-visible .os-hero__panel {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
}

/* -------------- Moving section -------------- */
.os-moving {
    --os-moving-sticky-offset: 90px;
    position: relative;
    width: 100%;
    height: 150vh;
    min-height: 900px;
    background: transparent;
    isolation: isolate;
}

.os-moving__stage {
    position: sticky;
    top: var(--os-moving-sticky-offset);
    min-height: 680px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(30px, 4vh, 50px);
    overflow: hidden;
    padding: clamp(38px, 4vh, 96px) 24px clamp(24px, 4vh, 48px);
}

.os-moving__headline {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: .22em;
    margin: 0;
    font-family: 'ABC Arizona Flare', serif;
    font-size: clamp(40px, 4vw, 68px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.035em;
    color: inherit;
}

.os-moving__word {
    display: inline-block;
    opacity: 0;
    will-change: transform, opacity, filter;
}

.os-moving__word--moving,
.os-moving__word--as {
    color: #ffffff;
    transform: translate3d(-90px, 0, 0);
    transition: transform 1.35s cubic-bezier(.16, 1, .3, 1), opacity .9s ease;
}

.os-moving__word--one {
    color: var(--theme-palette-color-1);
    transform: translate3d(0, 0, 0) scale(.45);
    filter: blur(8px);
    transform-origin: 50% 50%;
    transition: transform 1.45s cubic-bezier(.16, 1, .3, 1), opacity .9s ease, filter 1.1s ease;
}

.os-moving__word.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

.os-moving__video-wrap {
    position: relative;
    width: min(72.5vw, 975px);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, 44px, 0) scale(.82);
    transform-origin: 50% 55%;
    will-change: transform, opacity;
    transition: opacity .9s ease;
}

.os-moving__video-wrap.is-visible { opacity: 1; }

.os-moving__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #111;
    cursor: pointer;
}

.os-moving__play {
    position: absolute;
    inset: 50% auto auto 50%;
    width: clamp(54px, 5vw, 76px);
    height: clamp(54px, 5vw, 76px);
    border: 3px solid #fff;
    border-radius: 50%;
    background: rgba(0, 0, 0, .12);
    backdrop-filter: blur(3px);
    transform: translate(-50%, -50%) scale(1);
    cursor: pointer;
    transition: opacity .3s ease, transform .35s cubic-bezier(.16, 1, .3, 1), background-color .3s ease;
}

.os-moving__play:hover {
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(0, 0, 0, .24);
}

.os-moving__play.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.86);
}

.os-moving__play-icon {
    position: absolute;
    left: 52%;
    top: 50%;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #fff;
    transform: translate(-42%, -50%);
}

/* -------- Snapshot section -------- */
.os-snapshot {
    position: relative;
    width: 100%;
    background: transparent;
    color: #fff;
    isolation: isolate;
}

.os-snapshot__stage {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: minmax(100px, 160px) minmax(280px, 460px) minmax(180px, 320px) minmax(180px, 280px);
    align-items: center;
    gap: clamp(20px, 2.2vw, 34px);
    padding: clamp(32px, 4vh, 60px) clamp(24px, 3.2vw, 48px);
    overflow: hidden;
}

.os-snapshot__year,
.os-snapshot__image-wrap,
.os-snapshot__content,
.os-snapshot__stat {
    opacity: 0;
    will-change: transform, opacity;
}

.os-snapshot__year,
.os-snapshot__image-wrap,
.os-snapshot__content {
    transform: translate3d(-80px, 0, 0);
    transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), opacity .8s ease;
}

.os-snapshot__stat {
    transform: translate3d(0, -36px, 0);
    transition: transform .95s cubic-bezier(.16, 1, .3, 1), opacity .75s ease;
}

.os-snapshot__year.is-visible,
.os-snapshot__image-wrap.is-visible,
.os-snapshot__content.is-visible,
.os-snapshot__stat.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.os-snapshot__year-number {
    font-family: 'ABC Arizona Flare', serif;
    font-size: clamp(42px, 4vw, 72px);
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 8px;
}

.os-snapshot__year-label {
    font-size: 16px;
    line-height: 1.4;
    opacity: .8;
}

.os-snapshot__image-wrap {
    width: 100%;
    max-width: 460px;
}

.os-snapshot__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.os-snapshot__content {
    font-size: 16px;
    line-height: 1.55;
    max-width: 300px;
}

.os-snapshot__content > *:first-child { margin-top: 0; }
.os-snapshot__content > *:last-child { margin-bottom: 0; }

.os-snapshot__stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-self: center;
}

.os-snapshot__stat-value {
    font-family: 'ABC Arizona Flare', serif;
    font-size: clamp(28px, 2.2vw, 48px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--theme-palette-color-1);
    margin-bottom: 4px;
}

.os-snapshot__stat-label {
    font-size: 15px;
    line-height: 1.45;
    opacity: .85;
}

@media (max-width: 1200px) {
    .os-hero {
        --hero-image-width: min(40vw, 520px);
        --hero-image-height: clamp(380px, 40vw, 520px);
        --hero-panel-offset: 54px;
        --hero-panel-overlap: 44px;
        --hero-copy-gap: 90px;
        height: 118vh;
        min-height: 820px;
    }

    .os-hero__copy {
        width: min(100%, 630px);
        padding-left: calc(var(--hero-panel-overlap) + var(--hero-copy-gap));
        padding-right: 42px;
    }

    .os-moving {
        height: 140vh;
        min-height: 820px;
    }

    .os-moving__headline { font-size: clamp(36px, 6vw, 56px); }
    .os-moving__video-wrap { width: min(78vw, 720px); }

    .os-snapshot__stage {
        grid-template-columns: 120px minmax(240px, 1fr) minmax(180px, .9fr);
        grid-template-areas:
            'year image stats'
            'year content stats';
        align-items: start;
        padding-top: 80px;
    }

    .os-snapshot__year { grid-area: year; }
    .os-snapshot__image-wrap { grid-area: image; }
    .os-snapshot__content { grid-area: content; max-width: 100%; }
    .os-snapshot__stats { grid-area: stats; }
}

@media (max-width: 900px) {
    .os-hero {
        height: 122vh;
        min-height: 780px;
        --hero-panel-offset: 60px;
        --hero-panel-overlap: 28px;
        --hero-copy-gap: 70px;
    }

    .os-hero__stage { min-height: 640px; }
    .os-hero__media {
        left: 16px;
        width: min(52vw, 420px);
        height: min(52vw, 420px);
    }
    .os-hero__panel {
        left: calc(16px + min(52vw, 420px) - var(--hero-panel-overlap));
        right: 16px;
        min-height: calc(min(52vw, 420px) + 18px);
    }
    .os-hero__copy {
        width: 100%;
        padding-top: 44px;
        padding-right: 30px;
        padding-bottom: 44px;
        padding-left: calc(var(--hero-panel-overlap) + var(--hero-copy-gap));
    }
    .os-hero__title { font-size: clamp(40px, 4.4vw, 58px); }

    .os-moving {
        height: 136vh;
        min-height: 780px;
    }

    .os-snapshot {
        height: auto;
        min-height: 0;
        padding: 40px 0;
    }

    .os-snapshot__stage {
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
        grid-template-columns: 1fr;
        grid-template-areas: none;
        gap: 22px;
        padding: 20px 20px 0;
    }

    .os-snapshot__year,
    .os-snapshot__image-wrap,
    .os-snapshot__content,
    .os-snapshot__stats {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    /* On phones the sections should flow naturally. The desktop negative overlap
       and sticky pin were allowing Moving as One to sit over the hero above. */
    .os-story .os-hero + .os-moving { margin-top: 0; }

    .os-hero {
        height: 122vh;
        min-height: 760px;
        --hero-media-top: 20px;
        --hero-panel-offset: 44px;
        --hero-panel-overlap: 18px;
        --hero-copy-gap: 24px;
    }

    .os-hero__stage { min-height: 620px; }
    .os-hero__media {
        left: 14px;
        right: 14px;
        width: auto;
        height: 48vh;
        min-height: 330px;
    }
    .os-hero__panel {
        left: 14px;
        right: 14px;
        top: calc(var(--hero-media-top) + 44vh);
        bottom: auto;
        width: auto;
        height: auto;
        min-height: 0;
    }
    .os-hero__copy {
        width: 100%;
        padding: 76px 24px 38px;
    }
    .os-hero__title {
        font-size: clamp(38px, 11.2vw, 58px);
        margin-bottom: 28px;
    }
    .os-hero__title-line { white-space: normal; }
    .os-hero__logo-wrap {
        top: var(--hero-media-top);
        left: calc(100% - 14px);
        width: clamp(78px, 22vw, 102px);
    }

    .os-moving {
        --os-moving-sticky-offset: 0px;
        height: auto;
        min-height: 0;
        padding: 42px 0 38px;
    }
    .os-moving__stage {
        position: relative;
        top: auto;
        min-height: 0;
        gap: 26px;
        padding: 0 18px;
        overflow: visible;
    }
    .os-moving__headline {
        font-size: clamp(32px, 9.5vw, 44px);
        gap: .14em;
        width: 100%;
    }
    .os-moving__video-wrap {
        width: 100%;
        max-width: none;
        margin-inline: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .os-hero,
    .os-moving,
    .os-snapshot {
        height: auto;
        min-height: 0;
    }

    .os-hero__stage,
    .os-moving__stage,
    .os-snapshot__stage {
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
    }

    .os-hero *, .os-moving *, .os-snapshot * {
        transition-duration: .001ms !important;
        transition-delay: 0ms !important;
        animation-duration: .001ms !important;
        animation-delay: 0ms !important;
    }

    .os-hero__media,
    .os-hero__panel,
    .os-hero__title-line > span,
    .os-hero__content,
    .os-hero__logo-wrap,
    .os-moving__word,
    .os-moving__video-wrap,
    .os-snapshot__year,
    .os-snapshot__image-wrap,
    .os-snapshot__content,
    .os-snapshot__stat {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        filter: none !important;
    }
}


/* -------- Become a Centalion -------- */
.os-become {
    position: relative;
    width: 100%;
    padding: 0;
    overflow: visible;
}

.os-become__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: clamp(8px, .9vw, 14px);
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
}

.os-become__text {
    display: inline-block;
    flex: 0 0 auto;
    font-family: 'ABC Arizona Flare', serif;
    font-size: clamp(36px, 4vw, 50px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.045em;
    color: #0b0b0b;
    opacity: 0;
    transform: translate3d(-90px, 0, 0);
    will-change: transform, opacity;
    transition:
        transform 1.35s cubic-bezier(.16, 1, .3, 1),
        opacity .9s ease;
}

.os-become__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--os-become-logo-width, clamp(190px, 22vw, 340px));
    height: auto;
    opacity: 0;
    filter: blur(8px);
    transform: scale(.45);
    transform-origin: 50% 50%;
    will-change: transform, opacity, filter;
    transition:
        transform 1.45s .12s cubic-bezier(.16, 1, .3, 1),
        opacity .9s .12s ease,
        filter 1.1s .12s ease;
}

.os-become__brand-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.os-become.is-visible .os-become__text {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.os-become.is-visible .os-become__brand {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

@media (max-width: 767px) {
    .os-become__inner {
        gap: 7px;
    }

    .os-become__text {
        font-size: clamp(28px, 8vw, 42px);
    }

    .os-become__brand {
        width: min(var(--os-become-logo-width, 190px), 46vw);
    }
}

@media (prefers-reduced-motion: reduce) {
    .os-become__text,
    .os-become__brand {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}


/* =============================================================
 * Responsive sizing pass — tablet + mobile
 * ============================================================= */

@media (max-width: 1100px) {
    .os-story .os-hero + .os-moving {
        margin-top: clamp(-80px, -7vh, -52px);
    }

    .os-hero {
        --hero-media-left: 20px;
        --hero-image-width: min(43vw, 470px);
        --hero-image-height: clamp(360px, 43vw, 470px);
        --hero-panel-offset: 46px;
        --hero-panel-overlap: 36px;
        --hero-copy-gap: 58px;
        height: 110vh;
        min-height: 760px;
    }

    .os-hero__stage {
        min-height: 680px;
    }

    .os-hero__panel {
        right: 18px;
    }

    .os-hero__copy {
        width: min(100%, 600px);
        padding-top: clamp(38px, 5vw, 56px);
        padding-right: 34px;
        padding-bottom: 44px;
        padding-left: calc(var(--hero-panel-overlap) + var(--hero-copy-gap));
    }

    .os-hero__title {
        font-size: clamp(38px, 4.7vw, 52px);
        margin-bottom: 30px;
    }

    .os-hero__content {
        font-size: 15px;
        line-height: 1.55;
        margin-top: 20px;
    }

    .os-hero__logo-wrap {
        width: clamp(72px, 8vw, 98px);
    }

    .os-moving {
        --os-moving-sticky-offset: 82px;
        height: 145vh;
        min-height: 860px;
    }

    .os-moving__stage {
        min-height: 620px;
        gap: clamp(24px, 3.5vh, 38px);
        padding: clamp(58px, 7vh, 78px) 22px 28px;
    }

    .os-moving__headline {
        font-size: clamp(36px, 5.5vw, 52px);
    }

    .os-moving__video-wrap {
        width: min(90vw, 850px);
    }

    /* Snapshot remains content-led at every breakpoint. */
    .os-snapshot {
        height: auto;
        min-height: 0;
    }

    .os-snapshot__stage {
        height: auto;
        min-height: 0;
        grid-template-columns: 105px minmax(250px, 1.15fr) minmax(190px, .85fr);
        gap: 22px;
        padding: 42px 24px;
    }

    .os-snapshot__year-number {
        font-size: clamp(38px, 5vw, 58px);
    }

    .os-snapshot__image-wrap {
        max-width: 390px;
    }

    .os-snapshot__content {
        font-size: 15px;
        line-height: 1.5;
    }

    .os-snapshot__stat-value {
        font-size: clamp(26px, 3.2vw, 38px);
    }

    .os-snapshot__stat-label,
    .os-snapshot__year-label {
        font-size: 14px;
    }

    .os-become__text {
        font-size: clamp(32px, 4.5vw, 44px);
    }

    .os-become__brand {
        width: min(var(--os-become-logo-width, 280px), 34vw);
    }
}

@media (max-width: 820px) {
    .os-story .os-hero + .os-moving {
        margin-top: -36px;
    }

    .os-hero {
        --hero-media-top: 22px;
        --hero-media-left: 16px;
        --hero-image-width: min(48vw, 360px);
        --hero-image-height: min(48vw, 360px);
        --hero-panel-offset: 38px;
        --hero-panel-overlap: 24px;
        --hero-copy-gap: 32px;
        height: 108vh;
        min-height: 700px;
    }

    .os-hero__stage {
        min-height: 650px;
    }

    .os-hero__panel {
        right: 14px;
        min-height: calc(var(--hero-image-height) + 20px);
    }

    .os-hero__copy {
        width: 100%;
        padding: 38px 28px 38px calc(var(--hero-panel-overlap) + var(--hero-copy-gap));
    }

    .os-hero__title {
        font-size: clamp(34px, 5.5vw, 46px);
        line-height: 1.02;
        margin-bottom: 24px;
    }

    .os-hero__title-line {
        white-space: normal;
    }

    .os-hero__content {
        font-size: 14.5px;
        margin-top: 16px;
    }

    .os-hero__logo-wrap {
        width: clamp(66px, 9vw, 84px);
    }

    .os-moving {
        --os-moving-sticky-offset: 72px;
        height: 138vh;
        min-height: 800px;
    }

    .os-moving__stage {
        min-height: 590px;
        padding: 50px 18px 24px;
    }

    .os-moving__headline {
        font-size: clamp(34px, 7vw, 48px);
    }

    .os-moving__video-wrap {
        width: min(94vw, 760px);
    }

    .os-snapshot {
        padding: 28px 0;
    }

    .os-snapshot__stage {
        position: relative;
        top: auto;
        display: grid;
        grid-template-columns: minmax(92px, 120px) 1fr;
        grid-template-areas:
            'year image'
            'content content'
            'stats stats';
        gap: 22px 20px;
        padding: 20px;
        overflow: visible;
    }

    .os-snapshot__year { grid-area: year; align-self: center; }
    .os-snapshot__image-wrap { grid-area: image; max-width: 100%; }
    .os-snapshot__content { grid-area: content; max-width: 100%; font-size: 16px; }
    .os-snapshot__stats {
        grid-area: stats;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 24px;
        width: 100%;
    }

    .os-snapshot__stat-value {
        font-size: clamp(28px, 5vw, 38px);
    }

    .os-become__inner {
        gap: 8px;
        max-width: 100%;
    }

    .os-become__text {
        font-size: clamp(28px, 5.5vw, 38px);
    }

    .os-become__brand {
        width: min(var(--os-become-logo-width, 230px), 45vw);
    }
}

@media (max-width: 600px) {
    .os-story .os-hero + .os-moving {
        margin-top: 200px;
    }

    /* Mobile hero becomes a tighter vertical composition while retaining reveals. */
    .os-hero {
        --hero-media-top: 14px;
        --hero-media-left: 14px;
        --hero-panel-offset: 0px;
        --hero-panel-overlap: 0px;
        --hero-copy-gap: 0px;
        height: 112vh;
        min-height: 760px;
    }

    .os-hero__stage {
        min-height: 720px;
        height: 100vh;
    }

    .os-hero__media {
        left: 14px;
        right: 14px;
        top: 14px;
        width: auto;
        height: clamp(280px, 58vh, 420px);
        min-height: 0;
    }

    .os-hero__panel {
        left: 14px;
        right: 14px;
        top: calc(14px + clamp(280px, 58vh, 420px) - 14px);
        width: auto;
        min-height: 0;
    }

    .os-hero__copy {
        width: 100%;
        padding: 54px 22px 30px;
    }

    .os-hero__title {
        font-size: clamp(32px, 9.5vw, 46px);
        line-height: 1;
        margin-bottom: 22px;
    }

    .os-hero__content {
        font-size: 14px;
        line-height: 1.5;
        margin-top: 14px;
    }

    .os-hero__logo-wrap {
        top: 14px;
        left: calc(100% - 14px);
        width: clamp(62px, 18vw, 82px);
    }

    .os-moving {
        height: auto;
        min-height: 0;
        padding: 34px 0 0;
    }

    .os-moving__stage {
        position: relative;
        top: auto;
        min-height: 0;
        gap: 24px;
        padding: 24px 14px 30px;
        overflow: visible;
    }

    .os-moving__headline {
        font-size: clamp(32px, 9vw, 44px);
        gap: .15em;
        line-height: 1;
    }

    .os-moving__video-wrap {
        width: 100%;
        max-width: none;
    }

    .os-moving__play {
        width: 54px;
        height: 54px;
        border-width: 2px;
    }

    .os-snapshot {
        padding: 20px 0;
    }

    .os-snapshot__stage {
        grid-template-columns: 1fr;
        grid-template-areas:
            'year'
            'image'
            'content'
            'stats';
        gap: 18px;
        padding: 18px 14px;
    }

    .os-snapshot__year {
        display: flex;
        align-items: baseline;
        gap: 10px;
    }

    .os-snapshot__year-number {
        font-size: clamp(36px, 12vw, 54px);
        margin-bottom: 0;
    }

    .os-snapshot__year-label {
        font-size: 14px;
    }

    .os-snapshot__image-wrap {
        width: 100%;
    }

    .os-snapshot__content {
        font-size: 16px;
        line-height: 1.55;
    }

    .os-snapshot__stats {
        grid-template-columns: 1fr 1fr;
        gap: 18px 14px;
    }

    .os-snapshot__stat-value {
        font-size: clamp(26px, 8vw, 36px);
    }

    .os-snapshot__stat-label {
        font-size: 14px;
    }

    .os-become {
        width: 100%;
        overflow: visible;
    }

    .os-become__inner {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        gap: 6px;
        white-space: nowrap;
    }

    .os-become__text {
        font-size: clamp(24px, 7vw, 34px);
        letter-spacing: -0.035em;
    }

    .os-become__brand {
        width: min(var(--os-become-logo-width, 190px), 52vw);
        max-width: 52vw;
    }
}

@media (max-width: 390px) {
    .os-hero__copy {
        padding-inline: 18px;
    }

    .os-hero__title {
        font-size: clamp(30px, 9.2vw, 38px);
    }

    .os-snapshot__stats {
        grid-template-columns: 1fr;
    }

    .os-become__text {
        font-size: clamp(22px, 6.7vw, 28px);
    }

    .os-become__brand {
        width: min(var(--os-become-logo-width, 165px), 50vw);
        max-width: 50vw;
    }
}