/* =========================================================
   FINARCH — shared page hero
   ========================================================= */

.fa-hero-std,
.fa-hero-std * { box-sizing: border-box; }

.fa-hero-std,
.fa-hero-scale {
    --fa-hero-copy-w: min(100%, 54ch, 58%);
    --fa-hero-title-max: 72px;
    --fa-hero-title-ramp: 20.3px + 4.36vw;
    --fa-hero-title-vh: 12vh;
    --fa-hero-fs-title: clamp(34px, min(var(--fa-hero-title-ramp), var(--fa-hero-title-vh)), var(--fa-hero-title-max));
    --fa-hero-fs-eyebrow: clamp(10.5px, 7.35px + .35vw, 14px);
    --fa-hero-fs-lede: clamp(14px, 8.6px + .6vw, 20px);
    --fa-hero-gap-title: clamp(14px, 2.4vh, 26px);
    --fa-hero-gap-lede: clamp(18px, 3vh, 32px);
    --fa-hero-gap-block: clamp(24px, 4vh, 42px);
    --fa-hero-pad-top: calc(var(--fa-nav-h, 86px) + clamp(28px, 6vh, 96px));
    --fa-hero-pad-bottom: clamp(32px, 6vh, 80px);
}

/* ---------- frame ---------- */

.fa-hero-std {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* svh first stops mobile browsers counting the collapsing URL bar. */
    min-height: 100vh;
    min-height: 100svh;
    padding: var(--fa-hero-pad-top) var(--fa-gutter, clamp(20px, 4.5vw, 72px)) var(--fa-hero-pad-bottom);
    color: #ffffff;
    line-height: normal;
}

/* ---------- background ---------- */

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

/* Full-bleed from the very top, so the header sits over the photo. */
.fa-hero-std__photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--fa-hero-photo-pos, 62% center);
}

.fa-hero-std__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.fa-hero-std__scrim--side {
    background: linear-gradient(90deg,
            rgba(26, 9, 15, .92) 0%,
            rgba(30, 11, 18, .74) 30%,
            rgba(35, 13, 21, .36) 52%,
            rgba(35, 13, 21, 0) 72%);
}

.fa-hero-std__scrim--top {
    background: linear-gradient(180deg,
            rgba(26, 11, 18, .5) 0%,
            rgba(26, 11, 18, 0) 26%,
            rgba(26, 11, 18, 0) 100%);
}

/* ---------- copy ---------- */

.fa-hero-std__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--fa-shell, 1560px);
    margin: 0 auto;
}

.fa-hero-std__copy {
    min-width: 0;
    max-width: var(--fa-hero-copy-w);
}

/* ---------- shared pieces ---------- */

.fa-hero-std .fa-hero-std__eyebrow {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: var(--fa-hero-fs-eyebrow);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
}

.fa-hero-std .fa-hero-std__title {
    margin: var(--fa-hero-gap-title) 0 0;
    font-family: var(--font-primary, 'Inter', system-ui, sans-serif);
    font-size: var(--fa-hero-fs-title);
    font-weight: 600;
    line-height: .94;
    letter-spacing: -.045em;
    color: #ffffff;
    overflow-wrap: break-word;
}

.fa-hero-std .fa-hero-std__lede {
    margin: var(--fa-hero-gap-lede) 0 0;
    font-size: var(--fa-hero-fs-lede);
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    text-wrap: pretty;
    overflow-wrap: break-word;
}

/* ---------- responsive ---------- */

@media (max-width: 1179.98px) {
    .fa-hero-std { --fa-hero-photo-pos: 68% center; }
}

@media (max-width: 899.98px) {
    .fa-hero-std,
    .fa-hero-scale {
        --fa-hero-copy-w: 100%;
        --fa-hero-photo-pos: var(--fa-hero-photo-pos-sm, 72% center);
    }

    .fa-hero-std__scrim--side {
        background: linear-gradient(180deg,
                rgba(24, 9, 15, .88) 0%,
                rgba(28, 10, 17, .66) 44%,
                rgba(26, 10, 16, .8) 100%);
    }

    .fa-hero-std__scrim--top {
        background: linear-gradient(180deg,
                rgba(24, 10, 16, .62) 0%,
                rgba(24, 10, 16, 0) 30%);
    }
}

/* Opt-in mobile layouts that keep the photo readable: the copy is set
   smaller and pinned to the top (--copy-top) or the bottom
   (--copy-bottom), with the scrim only darkening behind it. Pick the
   side away from the photo's subject. */
@media (max-width: 767px) {
    .fa-hero-std--copy-top,
    .fa-hero-std--copy-bottom {
        --fa-hero-fs-title: 28px;
        --fa-hero-fs-lede: 13.5px;
        --fa-hero-fs-eyebrow: 10px;
        --fa-hero-gap-title: 12px;
        --fa-hero-gap-lede: 12px;
        --fa-hero-gap-block: 16px;
    }

    .fa-hero-std--copy-top .fa-hero-std__eyebrow,
    .fa-hero-std--copy-bottom .fa-hero-std__eyebrow { padding: 6px 12px; }

    .fa-hero-std--copy-top .fa-hero-std__lede,
    .fa-hero-std--copy-bottom .fa-hero-std__lede { line-height: 1.55; }

    /* ---------- copy at the top ---------- */

    .fa-hero-std--copy-top {
        align-items: flex-start;
        --fa-hero-pad-top: calc(var(--fa-nav-h, 86px) + 24px);
    }

    .fa-hero-std--copy-top .fa-hero-std__scrim--side {
        background: linear-gradient(180deg,
                rgba(24, 9, 15, .92) 0%,
                rgba(26, 10, 16, .8) 30%,
                rgba(26, 10, 16, .4) 44%,
                rgba(26, 10, 16, 0) 58%,
                rgba(26, 10, 16, 0) 100%);
    }

    .fa-hero-std--copy-top .fa-hero-std__scrim--top { background: none; }

    /* ---------- copy at the bottom ---------- */

    .fa-hero-std--copy-bottom {
        align-items: flex-end;
        --fa-hero-pad-bottom: clamp(32px, 5svh, 48px);
    }

    .fa-hero-std--copy-bottom .fa-hero-std__scrim--side {
        background: linear-gradient(180deg,
                rgba(24, 9, 15, 0) 0%,
                rgba(24, 9, 15, 0) 46%,
                rgba(26, 10, 16, .55) 62%,
                rgba(26, 10, 16, .88) 78%,
                rgba(26, 10, 16, .94) 100%);
    }

    /* Just enough behind the header to keep the logo and menu legible. */
    .fa-hero-std--copy-bottom .fa-hero-std__scrim--top {
        background: linear-gradient(180deg,
                rgba(24, 10, 16, .5) 0%,
                rgba(24, 10, 16, 0) 18%);
    }
}

/* ---------- short viewports ---------- */

@media (min-width: 768px) and (max-height: 860px) {
    .fa-hero-std,
    .fa-hero-scale {
        --fa-hero-title-vh: 8.6vh;
        --fa-hero-gap-title: clamp(10px, 1.8vh, 18px);
        --fa-hero-gap-lede: clamp(13px, 2.3vh, 22px);
        --fa-hero-gap-block: clamp(18px, 3vh, 30px);
        --fa-hero-pad-top: calc(var(--fa-nav-h, 86px) + clamp(18px, 3.4vh, 40px));
        --fa-hero-pad-bottom: clamp(20px, 3.4vh, 40px);
    }
}

/* 1366x768 and the 13" panels below it. */
@media (min-width: 768px) and (max-height: 700px) {
    .fa-hero-std,
    .fa-hero-scale {
        --fa-hero-fs-lede: clamp(14px, 13.2px + .22vw, 17px);
        --fa-hero-gap-lede: clamp(11px, 2vh, 18px);
        --fa-hero-gap-block: clamp(14px, 2.4vh, 24px);
        --fa-hero-pad-top: calc(var(--fa-nav-h, 86px) + clamp(14px, 2.6vh, 28px));
        --fa-hero-pad-bottom: clamp(16px, 2.6vh, 28px);
    }
}