@charset "utf-8";

/* First-screen study: the audience is close enough to share the frame. */
.stage_header {
    left: 0;
    width: 100%;
}
.stage_header .header_center {
    width: auto;
    height: 92px;
    margin: 0 4.2vw;
    border-bottom: 1px solid rgba(245, 247, 248, .28);
}
.stage_header.is-fixed { background: #101112; }
.stage_header.is-fixed .header_center { height: 72px; border-color: transparent; }
.stage_header .nav_body a { color: #f6f7f7; }
.stage_header .nav_body a:hover { color: #cbd5db; }
.stage_header .nav_body a::after { background: #f6f7f7; }
.stage_header :focus-visible,
.stage_hero :focus-visible { outline: 2px solid #f6f7f7; outline-offset: 6px; }

.stage_hero {
    --stage-pan: 0px;
    --stage-rise: 0px;
    position: relative;
    isolation: isolate;
    min-height: 760px;
    min-height: max(720px, 100svh);
    overflow: hidden;
    background: #101112;
    color: #f6f7f7;
}
.stage_scene,
.stage_scene img,
.stage_shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage_scene { max-width: none; transform: translateY(var(--stage-pan)) scale(1.035); }
.stage_scene img { max-width: none; object-fit: cover; object-position: 62% 42%; }
.stage_shade {
    pointer-events: none;
    background: linear-gradient(180deg, rgba(8, 10, 12, .75), transparent 24%, transparent 62%, rgba(8, 10, 12, .94)),
        linear-gradient(90deg, rgba(8, 10, 12, .45), transparent 68%);
}
.stage_heading {
    position: relative;
    width: fit-content;
    max-width: 92%;
    margin-left: 4.2vw;
    padding-top: clamp(162px, 22svh, 255px);
    padding-bottom: 174px;
    transform: translateY(var(--stage-rise));
}
.stage_eyebrow {
    margin-bottom: 26px;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .19em;
    text-transform: uppercase;
}
.stage_eyebrow span { padding-inline: 13px; color: #b4c3cc; }
.stage_heading h1 {
    color: #f6f7f7;
    font-family: var(--font-display);
    font-size: clamp(14rem, 15.8vw, 29rem);
    font-weight: 400;
    line-height: .89;
    letter-spacing: -.045em;
    text-transform: uppercase;
}
.stage_heading h1 span { display: block; }
.stage_heading h1 span:last-child { margin-left: 6vw; }
.stage_caption {
    margin-top: 28px;
    margin-left: 6vw;
    color: #f6f7f7;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -.025em;
}
.stage_bottom {
    position: absolute;
    right: 4.2vw;
    bottom: 30px;
    left: 4.2vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 24px;
    border-top: 1px solid rgba(245, 247, 248, .3);
    padding-top: 22px;
}
.stage_cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    justify-self: start;
    min-height: 52px;
    padding: 0 22px;
    background: #f6f7f7;
    color: #151719;
    font-size: 1.5rem;
    font-weight: 700;
    transition: background .2s ease, gap .2s ease;
}
.stage_cta > span:last-child { font-size: 2.4rem; font-weight: 400; }
.stage_cta:hover { gap: 48px; background: #cbd5db; }
.stage_scroll {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    min-height: 52px;
    font-size: 1.4rem;
}
.stage_scroll > span:last-child { font-size: 2rem; }
.stage_scroll:hover span:first-child,
.stage_concept:hover { text-decoration: underline; text-underline-offset: 5px; }
.stage_concept {
    justify-self: end;
    align-self: center;
    padding-block: 12px;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: #bac0c3;
}

@media (min-width: 1024px) {
    .stage_header nav { right: 4.2vw; height: 92px; }
    .stage_header.is-fixed nav { height: 72px; }
    .stage_header .nav_body ul { gap: clamp(24px, 3vw, 56px); }
    .stage_header .nav_body a { font-size: 1.4rem; letter-spacing: .06em; }
    .stage_header .nav_body li:last-child { margin-left: 36px; }
}
@media (max-width: 1023px) {
    .stage_header .header_center { height: 80px; }
    .stage_header .nav_wrap { width: 88%; }
    .stage_header nav { background: #101214; }
    .stage_header .nav_body { margin-top: 12vh; }
    .stage_header .nav_body a { font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; }
    .stage_header .btn span:not(.screen_out) { width: 26px; background: #f6f7f7; }
    .stage_heading { padding-top: 24svh; }
    .stage_heading h1 { font-size: clamp(12rem, 19vw, 20rem); }
}
@media (max-width: 599px) {
    .stage_header .header_center { margin-inline: 22px; height: 72px; }
    .stage_header .wordmark_name { font-size: 2.4rem; }
    /* Short phones keep the CTA on the first screen; the heading is anchored to the bottom. */
    .stage_hero { min-height: max(540px, 100svh); }
    .stage_scene img { object-position: center 35%; }
    .stage_shade {
        background: linear-gradient(180deg, rgba(8,10,12,.65), transparent 24%, rgba(8,10,12,.1) 43%, rgba(8,10,12,.87) 79%, #101112),
            linear-gradient(90deg, rgba(8,10,12,.15), transparent);
    }
    .stage_heading {
        position: absolute;
        bottom: 167px;
        margin-left: 22px;
        padding: 0;
        max-width: calc(100% - 44px);
    }
    .stage_eyebrow { margin-bottom: 18px; font-size: 1.2rem; letter-spacing: .15em; }
    .stage_eyebrow span { padding-inline: 8px; }
    .stage_heading h1 { font-size: clamp(9rem, 26vw, 15rem); }
    .stage_heading h1 span:last-child { margin-left: 12vw; }
    .stage_caption { margin-top: 19px; margin-left: 12vw; font-size: 1.4rem; }
    .stage_bottom {
        right: 22px;
        bottom: 20px;
        left: 22px;
        grid-template-columns: 1fr auto;
        gap: 9px 16px;
        padding-top: 18px;
    }
    .stage_cta { min-height: 48px; padding-inline: 17px; gap: 20px; font-size: 1.4rem; }
    .stage_scroll { min-height: 48px; font-size: 1.3rem; gap: 10px; }
    .stage_concept { grid-column: 1 / -1; justify-self: start; padding-block: 9px 0; font-size: 1.2rem; }
    .stage_cta, .stage_scroll { white-space: nowrap; }
}
@media (max-width: 359px) {
    .stage_bottom { column-gap: 10px; }
    .stage_cta { padding-inline: 13px; gap: 10px; }
    .stage_scroll { gap: 8px; }
}
/* The mobile menu remains a real navigation surface without scripting. */
@media (max-width: 1023px) {
    html:not(.js) .stage_header { position: relative; background: #101214; }
    html:not(.js) .stage_header .btn,
    html:not(.js) .stage_header .nav_header { display: none; }
    html:not(.js) .stage_header nav { position: static; display: block; opacity: 1; visibility: visible; pointer-events: auto; }
    html:not(.js) .stage_header .nav_wrap { min-height: 0; padding: 12px 0 20px; }
    html:not(.js) .stage_header .nav_body { margin: 0; }
    html:not(.js) .stage_header .nav_body ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }
    html:not(.js) .stage_header .nav_body li { border: 0; }
    html:not(.js) .stage_header .nav_body a { padding-block: 12px; font-family: var(--font-heading); font-size: 1.4rem; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .stage_scene, .stage_heading { transform: none; }
    .stage_cta, .stage_header, .stage_header * { transition: none; }
}