/* ── 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;
            opacity: 0;
            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; transform: translateY(110%); }
        #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;
            opacity: 0;
            text-shadow: 0 2px 16px rgba(8,9,64,0.6);
        }
        #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;
            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);
        }