/* Hero section. Slides crossfade behind a fixed multi-layer scrim, so headline legibility never depends on which photo is showing.
   Tune the scrim through the --hero-scrim-* values rather than editing the gradients. */

.hero {
    --hero-ink: 11, 10, 8;
    --hero-scrim-core: 0.66;
    --hero-scrim-top: 0.68;
    --hero-scrim-bottom: 0.92;
    --hero-scrim-flat: 0.2;

    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding-block: calc(var(--header-h) + var(--space-6)) var(--space-7);
    overflow: hidden;
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--bg);
}

.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
    filter: saturate(0.72) brightness(0.94) contrast(1.04);
}

.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(
            ellipse 82% 62% at 50% 46%,
            rgba(var(--hero-ink), var(--hero-scrim-core)) 0%,
            rgba(var(--hero-ink), calc(var(--hero-scrim-core) * 0.72)) 42%,
            rgba(var(--hero-ink), calc(var(--hero-scrim-core) * 0.28)) 70%,
            rgba(var(--hero-ink), 0) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(var(--hero-ink), var(--hero-scrim-top)) 0%,
            rgba(var(--hero-ink), 0) 24%
        ),
        linear-gradient(
            to top,
            rgba(var(--hero-ink), var(--hero-scrim-bottom)) 0%,
            rgba(var(--hero-ink), calc(var(--hero-scrim-bottom) * 0.68)) 7%,
            rgba(var(--hero-ink), 0) 27%
        ),
        rgba(var(--hero-ink), var(--hero-scrim-flat));
}

.hero__inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-7) * 1.25);
}

.hero__copy {
    max-width: min(48rem, 100%);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    text-align: center;
}

.hero__title {
    max-width: 16ch;
    font-size: clamp(2.5rem, 5.6vw, 4.25rem);
    font-weight: var(--fw-bold);
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: var(--fg);
}

.hero__lede {
    max-width: 52ch;
    margin-inline: auto;
    text-wrap: balance;
    font-size: var(--text-md);
    line-height: var(--lh-body);
    color: var(--fg);
}

.hero__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-self: stretch;
    gap: var(--space-3) var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(217, 177, 98, 0.32);
}

.hero__stat {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-1);
}

.hero__stat dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--fw-semibold);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--accent);
}

.hero__stat dt {
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    color: var(--fg);
}

.hero__simple {
    display: none;
}

.hero__search {
    width: 70%;
    min-width: 38rem;
    max-width: calc(100% - (var(--gutter) * 2));
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: stretch;
    background: var(--surface);
    border: none;
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.hero__field {
    display: flex;
    align-items: center;
    padding-inline: var(--space-4);
    border-right: 1px solid var(--line);
}

.hero__field:first-of-type {
    padding-left: var(--space-6);
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}

.hero__field:has(select:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: -3px;
}

.hero__field select:focus-visible {
    outline: none;
}

.hero__submit:focus-visible {
    outline-offset: -4px;
}

.hero__field select {
    appearance: none;
    width: 100%;
    min-height: 4.5rem;
    padding: 0 var(--space-5) 0 var(--space-3);
    background: transparent
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b665c' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E")
        no-repeat right center / 18px;
    border: 0;
    font-size: var(--text-md);
    color: var(--fg);
    cursor: pointer;
    text-overflow: ellipsis;
}

.hero__field select option {
    background: var(--surface);
    color: var(--fg);
}

.hero__submit {
    min-height: 4.5rem;
    padding: 0 var(--space-7);
    background: var(--accent);
    border: 0;
    color: var(--on-accent);
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
    transition: background var(--dur-fast) var(--ease-out);
}

.hero__submit:hover {
    background: var(--accent-hover);
}

.hero__submit:active {
    background: var(--accent-press);
}

@media (max-width: 1080px) {
    .hero__search {
        width: auto;
        min-width: 0;
        margin-inline: var(--gutter);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-radius: var(--radius-lg);
    }

    .hero__field:first-of-type {
        padding-left: var(--space-5);
        border-radius: 0;
    }

    .hero__field:nth-child(2) {
        border-right: 0;
    }

    .hero__submit {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .hero {
        --hero-scrim-flat: 0.3;

        min-height: 100svh;
    }

    /* On phones the three dropdowns become one plain field with a search button. */
    .hero__search {
        grid-template-columns: minmax(0, 1fr);
        border-radius: var(--radius-pill);
    }

    .hero__field,
    .hero__submit {
        display: none;
    }

    .hero__simple {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
    }

    .hero__simple input {
        flex: 1 1 auto;
        min-width: 0;
        min-height: var(--tap-min);
        padding: 0;
        background: transparent;
        border: 0;
        font-size: var(--text-base);
        color: var(--fg);
    }

    .hero__simple input::placeholder {
        color: var(--fg-dim);
    }

    .hero__simple input::-webkit-search-cancel-button {
        display: none;
    }

    .hero__simple-go {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: var(--tap-min);
        height: var(--tap-min);
        background: var(--accent);
        border: 0;
        border-radius: var(--radius-pill);
        color: var(--on-accent);
    }

    .hero__simple-go svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
    }

    .hero__copy {
        max-width: none;
    }
}



@media (prefers-reduced-motion: no-preference) {
    .hero__title,
    .hero__lede,
    .hero__stats,
    .hero__search {
        opacity: 0;
        transform: translateY(1.1rem);
        filter: blur(7px);
    }

    .hero.is-visible .hero__title,
    .hero.is-visible .hero__lede,
    .hero.is-visible .hero__stats,
    .hero.is-visible .hero__search {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
        transition:
            opacity 950ms var(--ease-out),
            transform 950ms var(--ease-out),
            filter 950ms var(--ease-out);
    }

    .hero.is-visible .hero__title { transition-delay: 80ms; }
    .hero.is-visible .hero__lede { transition-delay: 240ms; }
    .hero.is-visible .hero__stats { transition-delay: 380ms; }
    .hero.is-visible .hero__search { transition-delay: 520ms; }
}

.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: var(--space-5);
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-left: -1.375rem;
    background: rgba(11, 10, 8, 0.4);
    border: 1px solid rgba(217, 177, 98, 0.5);
    border-radius: var(--radius-pill);
    color: var(--accent);
    text-decoration: none;
    backdrop-filter: blur(10px);
    transition:
        background var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
}

.hero__scroll:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.hero__scroll svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes hero-scroll-cue {
    0%, 70%, 100% {
        transform: translateY(0);
        opacity: 1;
    }

    35% {
        transform: translateY(5px);
        opacity: 0.45;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .hero__scroll svg {
        animation: hero-scroll-cue 2s var(--ease-out) infinite;
    }
}