/* A cinematic establishing shot. The camera settles once and remains still. */
.hero-cinematic {
    background: var(--brand-navy);
    color: var(--brand-neutral);
    padding-block: clamp(56px, 6vw, 80px);
    isolation: isolate;
}
.hero-cinematic .hero-landscape {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}
.hero-landscape img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
}
/* A contrast scrim protects the copy without flattening the photograph. */
.hero-cinematic::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand-navy) 97%, transparent) 0%,
        color-mix(in srgb, var(--brand-navy) 90%, transparent) 33%,
        color-mix(in srgb, var(--brand-navy) 35%, transparent) 61%, transparent 82%);
}
.hero-cinematic .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 40px;
    min-height: 520px;
}
.hero-cinematic .hero-copy { gap: 20px; }
.hero-cinematic .hero-copy > :not(h1) { max-width: 590px; }
.hero-cinematic .hero-copy h1 { color: var(--brand-neutral); font-size: clamp(2.35rem, 3.65vw, 3.5rem); font-weight: 650; letter-spacing: -.055em; }
.hero-cinematic .hero-title-line { display: block; }
@media (min-width: 900px) {
    .hero-cinematic .hero-title-line { white-space: nowrap; }
}
.hero-cinematic .hero-copy .overline { color: var(--brand-neutral); opacity: .85; }
.hero-cinematic .hero-copy .lead,
.hero-cinematic .hero-checks li { color: var(--brand-neutral); }
.hero-cinematic .hero-copy .lead { font-size: 1.25rem; line-height: 1.6; max-width: 45ch; }
.hero-cinematic .hero-description { color: var(--brand-neutral); font-size: 1rem; line-height: 1.7; max-width: 56ch; opacity: .9; }
.hero-cinematic .hero-footnote { color: var(--brand-neutral); opacity: .85; font-size: .875rem; line-height: 1.6; max-width: 58ch; }
.hero-cinematic .hero-checks { border-color: color-mix(in srgb, var(--brand-neutral) 25%, transparent); }
.hero-cinematic .hero-checks li { font-size: .8125rem; }
.hero-cinematic .hero-checks li i { color: var(--brand-neutral); }
.hero-cinematic .hero-actions .btn-secondary {
    color: var(--brand-neutral);
    background: color-mix(in srgb, var(--brand-navy) 45%, transparent);
    border-color: color-mix(in srgb, var(--brand-neutral) 50%, transparent);
    backdrop-filter: blur(8px);
}
.hero-cinematic .hero-actions .btn-secondary:hover { background: var(--brand-navy); }
@media (prefers-reduced-motion: no-preference) {
    .hero-cinematic.cinema-arrived .hero-landscape img { animation: coast-arrive 5.5s cubic-bezier(.2,.65,.25,1) both; }
}
@keyframes coast-arrive { from { transform: scale(1.1) translateX(-1.5%); } to { transform: scale(1) translateX(0); } }
@media (max-width: 1024px) {
    .hero-cinematic .hero-grid { padding: 0; gap: 28px; }
}
@media (max-width: 700px) {
    .hero-cinematic .hero-copy .overline,
    .hero-cinematic .hero-copy h1,
    .hero-cinematic .hero-copy .lead,
    .hero-cinematic .hero-description,
    .hero-cinematic .hero-footnote {
        margin-inline: auto;
        text-align: center;
    }
    .hero-cinematic .hero-copy .overline { justify-content: center; }
    .hero-cinematic { padding-block: 44px 48px; }
    .hero-cinematic .hero-grid { grid-template-columns: 1fr; gap: 0; min-height: 0; }
    .hero-cinematic .hero-landscape img { object-position: 65% center; }
    .hero-cinematic::after { background: linear-gradient(180deg, color-mix(in srgb, var(--brand-navy) 96%, transparent), color-mix(in srgb, var(--brand-navy) 83%, transparent) 65%, color-mix(in srgb, var(--brand-navy) 78%, transparent)); }
    .hero-cinematic .hero-copy h1 { font-size: clamp(2.2rem, 9.8vw, 3.5rem); line-height: 1.12; }
    .hero-cinematic .hero-copy .lead { font-size: 1.125rem; line-height: 1.6; }
    .hero-cinematic .hero-description { font-size: .9375rem; line-height: 1.65; }
    .hero-cinematic .hero-actions { width: 100%; flex-direction: column; gap: 12px; }
    /* In a column, the desktop width basis would become the button height. */
    .hero-cinematic .hero-actions .btn { flex-basis: auto; width: 100%; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-cinematic .hero-landscape img { animation: none; transition: none; }
}