/* ── HERO ── */
        #hero {
            position: relative; height: 100svh;
            min-height: 560px;
            display: flex; align-items: center; justify-content: center;
            overflow: hidden; background: var(--blue-dark);
        }
        #hero-canvas {
            position: absolute; inset: 0;
            width: 100%; height: 100%;
            pointer-events: none; z-index: 2;
        }
        #hero-media {
            position: absolute; inset: -10% 0 0;
            width: 100%; height: 120%;
            object-fit: cover; opacity: 0.62;
            will-change: transform;
        }
        #hero-overlay {
            position: absolute; inset: 0; z-index: 1;
            background: linear-gradient(to bottom, rgba(8,9,64,0.32) 0%, transparent 45%, rgba(8,9,64,0.68) 100%);
        }
        #hero-content {
            position: relative; z-index: 10;
            text-align: center;
            padding: 0 20px;
            width: 100%;
        }
        #hero-eyebrow {
            display: block;
            font-family: 'Cormorant Garamond', serif;
            font-size: 10px; letter-spacing: 0.45em;
            color: rgba(232,212,160,0.75);
            text-transform: uppercase; margin-bottom: 24px;
            text-shadow: 0 1px 12px rgba(8,9,64,0.6);
        }
        @media (min-width: 768px) { #hero-eyebrow { font-size: 11px; letter-spacing: 0.55em; margin-bottom: 36px; } }
        #hero-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(58px, 16vw, 172px);
            font-weight: 300; letter-spacing: 0.06em;
            color: white; line-height: 0.88;
            text-transform: uppercase;
            margin: 0 0 28px;
            text-shadow: 0 2px 28px rgba(8,9,64,0.55);
        }
        @media (min-width: 768px) { #hero-title { letter-spacing: 0.08em; margin-bottom: 40px; } }
        .hw { display: block; overflow: hidden; }
        .hwi { display: block; }
        .js .hwi { transform: translateY(60%); }
        #hero-sub {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(13px, 3.5vw, 20px);
            font-style: italic; font-weight: 300;
            color: rgba(255,255,255,0.62);
            letter-spacing: 0.04em;
            max-width: 420px; margin: 0 auto;
            text-shadow: 0 2px 16px rgba(8,9,64,0.6);
        }
        #hero-cta {
            display: flex; flex-direction: column; align-items: center;
            gap: 14px; margin-top: 36px;
        }
        @media (min-width: 560px) { #hero-cta { flex-direction: row; justify-content: center; gap: 16px; } }
        #hero-cta .fcta-btn { padding: 16px 34px; font-size: 0.66rem; }
        .hero-next-import {
            display: block;
            font-family: 'Prompt', sans-serif;
            font-size: 11px; letter-spacing: 0.04em; font-weight: 400;
            color: rgba(197,160,89,0.85);
            text-shadow: 0 1px 12px rgba(8,9,64,0.6);
            margin: 18px 0 0;
        }
        .hero-next-import:empty { display: none; }
        #hero-scroll {
            position: absolute; bottom: max(32px, env(safe-area-inset-bottom, 32px));
            left: 50%; transform: translateX(-50%);
            display: flex; flex-direction: column; align-items: center; gap: 8px;
        }
        /* Progressive enhancement: these start hidden/translated only once js/head.js
           confirms JS is running (and hasn't errored) — see css/base.css for .fu/.cri. */
        .js #hero-eyebrow,
        .js #hero-sub,
        .js #hero-cta,
        .js .hero-next-import,
        .js #hero-scroll {
            opacity: 0;
        }
        #hero-scroll span {
            font-family: 'Cormorant Garamond', serif;
            font-size: 9px; letter-spacing: 0.4em;
            color: rgba(255,255,255,0.22); text-transform: uppercase;
        }
        #hero-scroll-line {
            width: 1px; height: 40px;
            background: linear-gradient(to bottom, rgba(197,160,89,0.6), transparent);
            position: relative; overflow: hidden;
        }
        #hero-scroll-line::after {
            content: ''; position: absolute; left: 0; top: -40px;
            width: 1px; height: 40px;
            background: linear-gradient(to bottom, transparent, var(--gold), transparent);
            animation: hsRunner 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
        }
        @media (prefers-reduced-motion: reduce) {
            #hero-scroll-line::after { animation: none; display: none; }
        }
        @keyframes hsRunner {
            0%   { top: -40px; }
            65%  { top: 40px; }
            100% { top: 40px; }
        }