/* ============================================================
   Centre 360 · Round 2 v2 shared stylesheet
   Source of truth: docs/design-system-v2/index.html
   Token names + component classes carried over wholesale.
   Mobile-first responsive priority. WCAG 2.1 AA baseline.
   ============================================================ */

/* ============================================================
   1. TOKENS - Midnight Civic + Civic Fame gradient
   ============================================================ */
:root {
    /* Surface */
    --surface-base: oklch(13% 0.025 268);
    --surface-raise: oklch(17% 0.030 268);
    --surface-mark: oklch(10% 0.022 268);
    --surface-elev: oklch(20% 0.034 268);
    /* Ink */
    --ink-primary: oklch(97% 0.012 220);
    --ink-soft: oklch(97% 0.012 220 / 0.72);
    --ink-quiet: oklch(97% 0.012 220 / 0.50);
    --ink-faint: oklch(97% 0.012 220 / 0.30);
    --hairline: oklch(97% 0.012 220 / 0.10);
    /* Gold accents - exact DCAS hex */
    --gold-accent: #E4D578;
    --gold-soft: rgb(228 213 120 / 0.55);
    --gold-faint: rgb(228 213 120 / 0.18);
    --gold-bright: oklch(91% 0.13 92);
    --gold-cta: #DDA559;
    --gold-cta-border: #A87E3A;
    /* Cyan accent - scarce, max one per page */
    --cyan-cta: #38AAD4;
    --cyan-cta-border: #2A8AB0;
    /* Civic Fame gradient */
    --gradient-civic-gold: linear-gradient(90deg, #DDA559 0%, #E4D578 50%, #DDA559 100%);
    --gradient-civic-gold-diag: linear-gradient(135deg, #DDA559 0%, #E4D578 50%, #DDA559 100%);
    /* Typography */
    --serif-display: "Poiret One", serif;
    --serif-quote: "Cormorant Garamond", Georgia, serif;
    --sans: "DM Sans", -apple-system, system-ui, sans-serif;
    --nyc-font: "Noto Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
    --fs-h1: 80px;
    --fs-h2: 45px;
    --fs-h3: 28px;
    --fs-h4: 20px;
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-label: 11px;
    --lh-tight: 1.0;
    --lh-snug: 1.15;
    --lh-base: 1.55;
    /* Spacing scale (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;
    /* Container */
    --container-max: 1280px;
    --section-py: 96px;
    --card-panel-max: 432px;
    --card-overlap: -160px;
    --container-px: 32px;
    --header-h: 64px;
    /* Borders */
    --radius: 0;
    --radius-input: 2px;
    --border-cta: 1px solid var(--gold-cta-border);
    --border-cta-cyan: 1px solid var(--cyan-cta-border);
    /* Elevation */
    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.32), 0 1px 1px oklch(0% 0 0 / 0.22);
    --shadow-md: 0 4px 10px oklch(0% 0 0 / 0.36), 0 2px 4px oklch(0% 0 0 / 0.22);
    --shadow-lg: 0 14px 28px oklch(0% 0 0 / 0.42), 0 10px 18px oklch(0% 0 0 / 0.26);
    --shadow-gold: 0 0 0 1px var(--gold-soft), 0 10px 26px rgb(228 213 120 / 0.18);
    /* Motion */
    --t-fast: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    --t-medium: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    --t-slow: 2s cubic-bezier(0.22, 1, 0.36, 1);
    /* NYC chrome */
    --nyc-bg: #000;
    --nyc-fg: #fff;
    --nyc-fg-muted: #ccc;
    --nyc-divider: rgba(255, 255, 255, 0.15);
}

@media (max-width: 768px) {
    :root {
        --fs-h1: 32px;
        --fs-h2: 28px;
        --fs-h3: 22px;
        --section-py: 64px;
        --container-px: 20px;
        --card-overlap: -80px;
    }
}

/* ============================================================
   2. RESET
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--surface-base);
    color: var(--ink-primary);
    font-family: var(--sans);
    font-weight: 300;
    font-size: var(--fs-body);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, video {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
}

button {
    font: inherit;
    cursor: pointer;
}

/* Skip-link */
.sr-only-focusable {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

    .sr-only-focusable:focus {
        position: fixed;
        left: 8px;
        top: 8px;
        z-index: 999;
        background: var(--gold-accent);
        color: var(--surface-base);
        padding: 10px 16px;
        font-family: var(--sans);
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
    }

:focus-visible {
    outline: 2px solid var(--gold-accent);
    outline-offset: 3px;
}

/* ============================================================
   3. NYC CITY-WIDE CHROME (top row)
   ============================================================ */
.nyc-citywide {
    background: var(--nyc-bg);
    color: var(--nyc-fg);
    font-family: var(--nyc-font);
    border-bottom: 1px solid var(--nyc-divider);
}

.nyc-citywide__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 36px;
}

.nyc-citywide__logo {
    display: inline-flex;
    align-items: center;
    color: var(--nyc-fg);
    padding: 12px 0;
    text-decoration: none;
}

    .nyc-citywide__logo:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 4px;
    }

.nyc-citywide__nav {
    display: flex;
    align-items: center;
    gap: 32px;
    flex: 1;
    font-size: 15px;
    font-weight: 500;
}

    .nyc-citywide__nav a {
        color: var(--nyc-fg);
        text-decoration: none;
        padding: 6px 0;
        transition: color var(--t-fast);
    }

        .nyc-citywide__nav a:hover {
            color: var(--nyc-fg-muted);
        }

.nyc-citywide__utils {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.nyc-citywide__search {
    background: #fff;
    color: #000;
    border: 0;
    border-radius: 999px;
    padding: 6px 16px 6px 12px;
    font-family: var(--nyc-font);
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--t-fast);
}

    .nyc-citywide__search:hover {
        background: #ebebeb;
    }

    .nyc-citywide__search svg {
        width: 14px;
        height: 14px;
    }

.nyc-citywide__lang {
    background: transparent;
    border: 0;
    color: var(--nyc-fg);
    font-family: var(--nyc-font);
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px;
    transition: color var(--t-fast);
}

    .nyc-citywide__lang:hover {
        color: var(--nyc-fg-muted);
    }

.nyc-citywide__lang-icon {
    display: inline-flex;
    align-items: center;
    color: oklch(75% 0.10 85);
    font-family: var(--nyc-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

    .nyc-citywide__lang-icon::before {
        content: "文A";
        letter-spacing: -1px;
    }

@media (max-width: 880px) {
    .nyc-citywide__nav {
        display: none;
    }

    .nyc-citywide__inner {
        gap: 16px;
    }
}

@media (max-width: 540px) {
    .nyc-citywide__search span {
        display: none;
    }

    .nyc-citywide__search {
        padding: 6px 10px;
    }
}

/* ============================================================
   4. NYC SUB-PROPERTY HEADER (sticky)
   ============================================================ */
.nyc-header {
    background: oklch(10% 0.022 268 / 0.75);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    color: var(--nyc-fg);
    font-family: var(--nyc-font);
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--nyc-divider);
}

.nyc-header__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.nyc-home-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: var(--nyc-fg);
    text-decoration: none;
    padding: 4px 0;
}

    .nyc-home-link:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 4px;
    }

.nyc-home-link__dcas {
    display: inline-block;
    font-family: var(--nyc-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: #fff;
    flex-shrink: 0;
    white-space: nowrap;
    text-align: left;
}

@media (max-width: 760px) {
    .nyc-home-link__dcas {
        display: none;
    }
}

.nyc-home-link__sep {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

@media (max-width: 760px) {
    .nyc-home-link__sep {
        display: none;
    }
}

.nyc-home-link__logo {
    display: block;
    height: 56px;
    width: auto;
    flex-shrink: 0;
}

@media (max-width: 540px) {
    .nyc-home-link__logo {
        height: 44px;
    }
}

.nyc-home-link__divider {
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--nyc-font);
    font-size: 14px;
    margin: 0 4px;
}

.nyc-home-link__subtitle {
    font-family: var(--nyc-font);
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.01em;
}

@media (max-width: 540px) {
    .nyc-home-link__divider, .nyc-home-link__subtitle {
        display: none;
    }
}

/* Nav */
.nyc-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-family: var(--nyc-font);
    font-size: 15px;
    font-weight: 500;
}

    .nyc-nav a {
        position: relative;
        color: var(--nyc-fg);
        text-decoration: none;
        padding: 8px 0;
        transition: color var(--t-fast);
    }

        .nyc-nav a::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 2px;
            height: 1px;
            background: currentColor;
            transform: scaleX(0);
            transform-origin: left center;
            transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
        }

        .nyc-nav a:hover::after,
        .nyc-nav a:focus-visible::after {
            transform: scaleX(1);
        }

        .nyc-nav a[aria-current="page"] {
            color: var(--gold-accent);
        }

            .nyc-nav a[aria-current="page"]::after {
                transform: scaleX(1);
                transform-origin: left center;
                transition: none;
            }

        .nyc-nav a:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 2px;
        }

.nyc-menu-btn {
    background: transparent;
    color: var(--nyc-fg);
    border: 0;
    padding: 12px;
    font-family: var(--nyc-font);
    font-size: 15px;
    display: none;
    align-items: center;
    gap: 6px;
}

.nyc-menu-icon {
    display: inline-block;
    width: 18px;
    height: 14px;
    position: relative;
}

    .nyc-menu-icon::before, .nyc-menu-icon::after, .nyc-menu-icon span {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--nyc-fg);
    }

    .nyc-menu-icon::before {
        top: 0;
    }

    .nyc-menu-icon span {
        top: 6px;
        display: block;
    }

    .nyc-menu-icon::after {
        bottom: 0;
    }

@media (max-width: 880px) {
    .nyc-nav {
        display: none;
    }

    .nyc-menu-btn {
        display: inline-flex;
    }
}

/* Mobile sheet (toggled by chrome.js) */
.nyc-mobile-sheet {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--surface-mark);
    z-index: 100;
    padding: 80px 32px 32px;
    flex-direction: column;
    gap: 8px;
}

    .nyc-mobile-sheet[aria-hidden="false"] {
        display: flex;
    }

    .nyc-mobile-sheet a {
        color: var(--ink-primary);
        text-decoration: none;
        font-family: var(--nyc-font);
        font-size: 22px;
        font-weight: 500;
        padding: 18px 0;
        border-bottom: 1px solid var(--hairline);
    }

        .nyc-mobile-sheet a[aria-current="page"] {
            color: var(--gold-accent);
        }

.nyc-mobile-sheet__close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: transparent;
    border: 0;
    color: var(--ink-primary);
    font-size: 28px;
    padding: 6px 12px;
}

/* Brand-360 textmark (legacy fallback) */
.brand-360 {
    font-family: var(--serif-display);
    font-weight: 400;
    font-size: 26px;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    display: inline-flex;
    align-items: baseline;
    gap: 0.18em;
}

.brand-360__num {
    color: var(--gold-accent);
    font-weight: 600;
}

@media (max-width: 540px) {
    .brand-360 {
        font-size: 22px;
    }
}

/* ============================================================
   5. PAGE FRAME
   ============================================================ */
main {
    display: flow-root;
}

.page {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-10) var(--container-px);
}

@media (max-width: 768px) {
    .page {
        padding: var(--space-8) var(--container-px);
    }
}

/* Full-bleed section utility */
.full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ============================================================
   6. HERO - full-bleed video / image bg
   ============================================================ */
.hero {
    position: relative;
    width: 100%;
    margin-top: -64px;
    padding-top: 64px;
    min-height: calc(100vh - 56px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: var(--surface-mark);
}

.hero-video, .hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 0;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, oklch(13% 0.025 268 / 0.78) 100%), radial-gradient(ellipse 95% 100% at 60% 50%, transparent 25%, oklch(13% 0.025 268 / 0.18) 55%, oklch(13% 0.025 268 / 0.55) 100%);
    z-index: 1;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: var(--container-max);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--container-px) var(--space-9);
}

    .hero-content > * {
        max-width: 820px;
    }

@media (max-width: 768px) {
    /* Bump top padding past the NycCitywide + sticky NycHeader stack so
     the hero eyebrow clears the header band on initial paint instead of
     tucking 8px under it. Header height ≈ 64px; the extra ~16px shifts
     content into view without pushing the Reserve CTA below the fold. */
    .hero {
        min-height: calc(100vh - 56px);
        padding-top: 80px;
    }

    .hero-content {
        padding-bottom: var(--space-7);
    }
}

@media (min-width: 1024px) {
    .hero-content > * {
        max-width: 920px;
    }
}

.hero-eyebrow {
    display: inline-block;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold-accent);
    padding: 5px 0;
    border-top: 1px solid var(--gold-soft);
    border-bottom: 1px solid var(--gold-soft);
    margin-bottom: var(--space-6);
}

.hero-h1 {
    margin: 0 0 var(--space-5);
    font-family: var(--serif-display);
    font-weight: 400;
    font-size: clamp(48px, 8vw, var(--fs-h1));
    line-height: var(--lh-tight);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.h-stroke {
    -webkit-text-stroke-width: calc(1em / 14);
    -webkit-text-stroke-color: currentColor;
    paint-order: stroke fill;
}

.hero-lede {
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 65ch;
}

.hero-meta {
    margin-top: var(--space-6);
    font-family: var(--mono);
    font-size: 15px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

    .hero-meta strong {
        color: var(--gold-accent);
        font-weight: 700;
        margin-right: 6px;
    }

.hero-actions {
    margin-top: var(--space-6);
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* ============================================================
   7. SECTION + TYPOGRAPHY
   ============================================================ */
section.ds {
    padding: var(--section-py) 0;
    border-top: 1px solid var(--hairline);
    scroll-margin-top: 80px;
}

    section.ds:first-child {
        border-top: 0;
    }

.section-head {
    margin-bottom: var(--space-7);
    max-width: 800px;
}

.section-h2 {
    margin: 0 0 var(--space-3);
    font-family: var(--sans);
    font-weight: 700;
    font-size: clamp(28px, 4vw, var(--fs-h2));
    text-transform: uppercase;
    letter-spacing: -0.005em;
    line-height: 1.05;
    /* Wins over site.css's legacy `h1, h2 { color: navy }` rule, which
     would otherwise resolve dark-on-dark on Centre 360 surfaces. */
    color: var(--ink-primary);
}

.section-h2--display {
    font-family: var(--serif-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: var(--lh-tight);
    /* Same legacy-h2 override; used standalone on Privacy without the base class. */
    color: var(--ink-primary);
}

.section-intro {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 65ch;
}

.section-pull {
    font-family: var(--serif-quote);
    font-style: italic;
    font-size: 22px;
    line-height: 1.5;
    color: var(--ink-primary);
    max-width: 60ch;
    margin: 0;
}

.sub-h3 {
    margin: var(--space-7) 0 var(--space-4);
    font-family: var(--sans);
    font-weight: 700;
    font-size: var(--fs-h3);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--gold-accent);
}

.divider-gold {
    width: 96px;
    height: 1px;
    background: var(--gradient-civic-gold);
    margin: var(--space-5) 0;
}

.divider-gold--center {
    margin-left: auto;
    margin-right: auto;
}

.divider-gold--wide {
    width: 100%;
}

/* ============================================================
   8. BUTTONS
   ============================================================ */
[hidden] {
    display: none !important;
}

.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    background: var(--gold-cta);
    background-image: var(--gradient-civic-gold);
    color: var(--surface-base);
    border: var(--border-cta);
    border-radius: var(--radius);
    padding: 12px 22px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

    .btn-cta:hover, .btn-cta:focus-visible {
        background: transparent;
        background-image: none;
        color: var(--gold-accent);
        border-color: var(--gold-accent);
    }

    .btn-cta:focus-visible {
        outline: 2px solid var(--gold-accent);
        outline-offset: 3px;
    }

    .btn-cta:disabled, .btn-cta[aria-disabled="true"] {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }

.btn-cta-cyan {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    background: var(--cyan-cta);
    color: var(--surface-base);
    border: var(--border-cta-cyan);
    border-radius: var(--radius);
    padding: 12px 22px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

    .btn-cta-cyan:hover, .btn-cta-cyan:focus-visible {
        background: transparent;
        color: var(--cyan-cta);
        border-color: var(--cyan-cta);
    }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    background: transparent;
    color: var(--gold-accent);
    border: 1px solid var(--gold-soft);
    border-radius: var(--radius);
    padding: 12px 22px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

    .btn-ghost:hover, .btn-ghost:focus-visible {
        color: var(--gold-bright);
        background: oklch(91% 0.13 92 / 0.08);
        border-color: var(--gold-accent);
    }

    /* Shared shimmer for surface buttons (cta / cta-cyan / ghost).
   ::before is an absolutely-positioned sweep band parked off-screen;
   it slides across once on hover. Low-alpha gold band so it brightens
   the gradient on .btn-cta and reads as a soft gold pass on the
   transparent .btn-ghost without requiring blend-mode tricks. */
    .btn-cta::before,
    .btn-cta-cyan::before,
    .btn-ghost::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background-image: linear-gradient(105deg, transparent 38%, oklch(91% 0.13 92 / 0.5) 50%, transparent 62%);
        background-size: 220% 100%;
        background-position: 220% 0;
        background-repeat: no-repeat;
        pointer-events: none;
    }

    .btn-cta:hover::before, .btn-cta:focus-visible::before,
    .btn-cta-cyan:hover::before, .btn-cta-cyan:focus-visible::before,
    .btn-ghost:hover::before, .btn-ghost:focus-visible::before {
        animation: btn-surface-sweep 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
    }

@keyframes btn-surface-sweep {
    from {
        background-position: 220% 0;
    }

    to {
        background-position: -120% 0;
    }
}
/* Icon slide on hover — direction depends on icon position.
   Trailing icons (typical: forward chevrons / arrows) slide right.
   Leading icons (back arrows on Previous buttons) slide left.
   :first-child / :last-child positions resolve direction without
   any class hooks in the markup. */
.btn-cta svg, .btn-cta i,
.btn-cta-cyan svg, .btn-cta-cyan i,
.btn-ghost svg, .btn-ghost i,
.btn-quiet svg, .btn-quiet i {
    transition: transform var(--t-fast);
}
/* Trailing icon (right side of text) → slides right.
   SVG icons aren't gated by :only-child because per CSS spec a
   text-node-only sibling doesn't disqualify :only-child — an
   inline SVG next to button text IS :only-child even though
   visually it's paired with text. Bare svg position rule is safe
   because SVG icons in this codebase always appear with text. */
.btn-cta:hover svg:last-child, .btn-cta:focus-visible svg:last-child,
.btn-cta-cyan:hover svg:last-child, .btn-cta-cyan:focus-visible svg:last-child,
.btn-ghost:hover svg:last-child, .btn-ghost:focus-visible svg:last-child,
.btn-quiet:hover svg:last-child, .btn-quiet:focus-visible svg:last-child,
.btn-cta:hover i:last-child:not(:only-child), .btn-cta:focus-visible i:last-child:not(:only-child),
.btn-cta-cyan:hover i:last-child:not(:only-child), .btn-cta-cyan:focus-visible i:last-child:not(:only-child),
.btn-ghost:hover i:last-child:not(:only-child), .btn-ghost:focus-visible i:last-child:not(:only-child),
.btn-quiet:hover i:last-child:not(:only-child), .btn-quiet:focus-visible i:last-child:not(:only-child) {
    transform: translateX(4px);
}
/* Leading icon (left side of text) → slides left. */
.btn-cta:hover svg:first-child:not(:last-child), .btn-cta:focus-visible svg:first-child:not(:last-child),
.btn-cta-cyan:hover svg:first-child:not(:last-child), .btn-cta-cyan:focus-visible svg:first-child:not(:last-child),
.btn-ghost:hover svg:first-child:not(:last-child), .btn-ghost:focus-visible svg:first-child:not(:last-child),
.btn-quiet:hover svg:first-child:not(:last-child), .btn-quiet:focus-visible svg:first-child:not(:last-child),
.btn-cta:hover i:first-child:not(:only-child), .btn-cta:focus-visible i:first-child:not(:only-child),
.btn-cta-cyan:hover i:first-child:not(:only-child), .btn-cta-cyan:focus-visible i:first-child:not(:only-child),
.btn-ghost:hover i:first-child:not(:only-child), .btn-ghost:focus-visible i:first-child:not(:only-child),
.btn-quiet:hover i:first-child:not(:only-child), .btn-quiet:focus-visible i:first-child:not(:only-child) {
    transform: translateX(-4px);
}
/* Icon-only buttons: animate by icon class so chevron-left / arrow-left
   slide left and chevron-right / arrow-right slide right. */
.btn-cta:hover i.bi-chevron-right:only-child, .btn-cta:focus-visible i.bi-chevron-right:only-child,
.btn-cta:hover i.bi-arrow-right:only-child, .btn-cta:focus-visible i.bi-arrow-right:only-child,
.btn-cta-cyan:hover i.bi-chevron-right:only-child, .btn-cta-cyan:focus-visible i.bi-chevron-right:only-child,
.btn-cta-cyan:hover i.bi-arrow-right:only-child, .btn-cta-cyan:focus-visible i.bi-arrow-right:only-child,
.btn-ghost:hover i.bi-chevron-right:only-child, .btn-ghost:focus-visible i.bi-chevron-right:only-child,
.btn-ghost:hover i.bi-arrow-right:only-child, .btn-ghost:focus-visible i.bi-arrow-right:only-child {
    transform: translateX(3px);
}

.btn-cta:hover i.bi-chevron-left:only-child, .btn-cta:focus-visible i.bi-chevron-left:only-child,
.btn-cta:hover i.bi-arrow-left:only-child, .btn-cta:focus-visible i.bi-arrow-left:only-child,
.btn-cta-cyan:hover i.bi-chevron-left:only-child, .btn-cta-cyan:focus-visible i.bi-chevron-left:only-child,
.btn-cta-cyan:hover i.bi-arrow-left:only-child, .btn-cta-cyan:focus-visible i.bi-arrow-left:only-child,
.btn-ghost:hover i.bi-chevron-left:only-child, .btn-ghost:focus-visible i.bi-chevron-left:only-child,
.btn-ghost:hover i.bi-arrow-left:only-child, .btn-ghost:focus-visible i.bi-arrow-left:only-child {
    transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
    .btn-cta::before, .btn-cta-cyan::before, .btn-ghost::before {
        display: none;
    }

    .btn-cta svg, .btn-cta i,
    .btn-cta-cyan svg, .btn-cta-cyan i,
    .btn-ghost svg, .btn-ghost i,
    .btn-quiet svg, .btn-quiet i {
        transition: none;
        transform: none !important;
    }
}

/* Press feedback — every pressable surface gets a subtle scale-down
   on :active so the interaction reads as tactile. Same 160ms ease-out
   regardless of variant for cohesion. .btn-quiet uses a tiny scale
   because the link-style button has no visible surface to compress.
   Color/border/background transitions use default `ease` per Emil's
   easing rule (color is not spatial movement); transform keeps the
   custom out-quart curve to match the rest of the system. */
.btn-cta, .btn-cta-cyan, .btn-ghost {
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

    .btn-cta:active, .btn-cta-cyan:active, .btn-ghost:active {
        transform: scale(0.97);
    }

.btn-quiet:active {
    transform: scale(0.985);
}

@media (prefers-reduced-motion: reduce) {
    .btn-cta:active, .btn-cta-cyan:active,
    .btn-ghost:active, .btn-quiet:active {
        transform: none;
    }
}

.btn-quiet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    width: max-content;
    max-width: 100%;
    background-color: transparent;
    color: var(--gold-accent);
    border: 0;
    padding: 8px 0;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    /* Two stacked layers, both clipped to the text shape — same pattern as
     the eyebrow shimmer. Base = currentColor so the existing hover color
     switch (gold-accent → gold-bright) still applies. Sweep band is parked
     off-screen at rest; hover triggers a single sweep across the text. */
    background-image: linear-gradient(105deg, transparent 38%, oklch(98% 0.18 92) 50%, transparent 62%), linear-gradient(currentColor, currentColor);
    background-size: 220% 100%, 100% 100%;
    background-position: 220% 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: color var(--t-fast);
}
    /* Underscore: solid currentColor base + a bright near-white
   catchlight band parked off-screen left at rest. On hover both
   fire at once — scaleX(0)→scaleX(1) draws the line (180ms),
   background-position sweeps the catchlight along it over 800ms.
   The shimmer outlasts the draw so it stays perceptible.
   2px height (vs 1px) is needed for the moving catchlight to be
   visible at all — sub-pixel brightness deltas on a 1px line are
   invisible to the eye. */
    /* Underscore: solid currentColor base + bright catchlight band
   that sweeps across on hover. Background-position math: with
   bg-size 200%, position 150% parks the catchlight at element
   x=-0.5w (off-screen left), and position -50% parks it at
   element x=1.5w (off-screen right). Going 150% → -50% sweeps
   the catchlight from left to right, fully off both edges at
   the endpoints. 2px height needed for the moving catchlight to
   be visible; 1px is sub-pixel-imperceptible. */
    .btn-quiet::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background-color: currentColor;
        background-image: linear-gradient(90deg, transparent 40%, oklch(99% 0.02 92) 50%, transparent 60%);
        background-size: 200% 100%;
        background-repeat: no-repeat;
        background-position: 150% 0;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform var(--t-fast);
    }

    .btn-quiet:hover::after, .btn-quiet:focus-visible::after {
        transform: scaleX(1);
        animation: btn-quiet-underline-shimmer 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

@keyframes btn-quiet-underline-shimmer {
    from {
        background-position: 150% 0;
    }

    to {
        background-position: -50% 0;
    }
}

.btn-quiet:hover, .btn-quiet:focus-visible {
    color: var(--gold-accent);
    animation: btn-quiet-sweep 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}

    .btn-quiet:hover svg, .btn-quiet:focus-visible svg {
        transform: translateX(4px);
    }

@keyframes btn-quiet-sweep {
    from {
        background-position: 220% 0, 0 0;
    }

    to {
        background-position: -120% 0, 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-quiet svg {
        transition: none;
    }

    .btn-quiet:hover svg, .btn-quiet:focus-visible svg {
        transform: none;
    }

    .btn-quiet:hover, .btn-quiet:focus-visible {
        animation: none;
    }

        .btn-quiet:hover::after, .btn-quiet:focus-visible::after {
            animation: none;
        }
}

/* ============================================================
   9. FRAME A - Beaux-Arts corner pieces
   ============================================================ */
.frame-a {
    position: relative;
    padding: 18px;
    display: block;
}

    .frame-a .corner {
        position: absolute;
        width: 56px;
        height: 56px;
        border: 1.5px solid var(--gold-accent);
        opacity: 0.6;
        transition: width var(--t-medium), height var(--t-medium), opacity var(--t-medium);
        pointer-events: none;
    }

        .frame-a .corner.tl {
            top: 0;
            left: 0;
            border-right: 0;
            border-bottom: 0;
        }

        .frame-a .corner.tr {
            top: 0;
            right: 0;
            border-left: 0;
            border-bottom: 0;
        }

        .frame-a .corner.bl {
            bottom: 0;
            left: 0;
            border-right: 0;
            border-top: 0;
        }

        .frame-a .corner.br {
            bottom: 0;
            right: 0;
            border-left: 0;
            border-top: 0;
        }

    .frame-a:hover .corner, .frame-a:focus-within .corner {
        width: calc(100% - 36px);
        height: calc(100% - 36px);
        opacity: 1;
    }

/* ============================================================
   10. FRAME B - corner-trace
   ============================================================ */
.frame-trace {
    position: relative;
    padding: 18px;
    display: block;
}

    .frame-trace .dot {
        position: absolute;
        width: 8px;
        height: 8px;
        background: var(--gold-accent);
        transform: rotate(45deg);
        transition: background var(--t-fast), transform var(--t-medium);
        pointer-events: none;
    }

        .frame-trace .dot.tl {
            top: 14px;
            left: 14px;
        }

        .frame-trace .dot.tr {
            top: 14px;
            right: 14px;
        }

        .frame-trace .dot.bl {
            bottom: 14px;
            left: 14px;
        }

        .frame-trace .dot.br {
            bottom: 14px;
            right: 14px;
        }

    .frame-trace .trace {
        position: absolute;
        background: var(--gold-accent);
        transition: transform var(--t-medium), opacity var(--t-medium);
        opacity: 0;
        pointer-events: none;
    }

        .frame-trace .trace.tl-h, .frame-trace .trace.tr-h,
        .frame-trace .trace.bl-h, .frame-trace .trace.br-h {
            height: 2px;
            width: calc(50% - 17px);
            transform: scaleX(0);
        }

        .frame-trace .trace.tl-v, .frame-trace .trace.tr-v,
        .frame-trace .trace.bl-v, .frame-trace .trace.br-v {
            width: 2px;
            height: calc(50% - 17px);
            transform: scaleY(0);
        }

        .frame-trace .trace.tl-h {
            top: 17px;
            left: 17px;
            transform-origin: left center;
        }

        .frame-trace .trace.tr-h {
            top: 17px;
            right: 17px;
            transform-origin: right center;
        }

        .frame-trace .trace.bl-h {
            bottom: 17px;
            left: 17px;
            transform-origin: left center;
        }

        .frame-trace .trace.br-h {
            bottom: 17px;
            right: 17px;
            transform-origin: right center;
        }

        .frame-trace .trace.tl-v {
            top: 17px;
            left: 17px;
            transform-origin: center top;
        }

        .frame-trace .trace.tr-v {
            top: 17px;
            right: 17px;
            transform-origin: center top;
        }

        .frame-trace .trace.bl-v {
            bottom: 17px;
            left: 17px;
            transform-origin: center bottom;
        }

        .frame-trace .trace.br-v {
            bottom: 17px;
            right: 17px;
            transform-origin: center bottom;
        }

    .frame-trace:hover .trace, .frame-trace:focus-within .trace {
        opacity: 1;
    }

        .frame-trace:hover .trace.tl-h, .frame-trace:hover .trace.tr-h,
        .frame-trace:hover .trace.bl-h, .frame-trace:hover .trace.br-h,
        .frame-trace:focus-within .trace.tl-h, .frame-trace:focus-within .trace.tr-h,
        .frame-trace:focus-within .trace.bl-h, .frame-trace:focus-within .trace.br-h {
            transform: scaleX(1);
        }

        .frame-trace:hover .trace.tl-v, .frame-trace:hover .trace.tr-v,
        .frame-trace:hover .trace.bl-v, .frame-trace:hover .trace.br-v,
        .frame-trace:focus-within .trace.tl-v, .frame-trace:focus-within .trace.tr-v,
        .frame-trace:focus-within .trace.bl-v, .frame-trace:focus-within .trace.br-v {
            transform: scaleY(1);
        }

    .frame-trace:hover .dot, .frame-trace:focus-within .dot {
        background: var(--gold-bright);
        transform: rotate(135deg);
    }

/* Frame media slot used by em-cards */
.frame-media {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    background: var(--surface-mark);
}

    .frame-media > img,
    .frame-media > video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.frame-media__chip {
    position: absolute;
    bottom: 16px;
    left: 18px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: oklch(13% 0.025 268 / 0.8);
    background: oklch(85% 0.12 88 / 0.92);
    padding: 4px 8px;
    z-index: 2;
}

.frame-media__chip--right {
    left: auto;
    right: 18px;
}

.frame-media__chip--top {
    bottom: auto;
    top: 16px;
}

/* Hover shimmer over em-card media — positional sweep over the photo only.
   The empty 18px padding ring between photo and frame border stays untouched;
   the gold border pieces (corners / traces / dots) get a synced brightness
   pulse below so the whole frame feels lit at the same moment. */
.em-card .frame-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 34%, oklch(90% 0.14 88 / 0.34) 50%, transparent 66%);
    background-repeat: no-repeat;
    background-size: 220% 100%;
    background-position: 220% 0;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: overlay;
}

.em-card:hover .frame-media::after,
.em-card:focus-within .frame-media::after {
    opacity: 1;
    animation: frame-media-shimmer 2.6s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}

@keyframes frame-media-shimmer {
    from {
        background-position: 220% 0;
    }

    to {
        background-position: -120% 0;
    }
}

/* Border-piece glow synced with the photo sheen. Corners (Frame A) are
   L-shape borders on a transparent box — only animate border-color.
   Dots + traces (Frame B) are solid shapes — animate background-color. */
.em-card:hover .frame-a .corner,
.em-card:focus-within .frame-a .corner {
    animation: frame-corner-glow 2.6s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}

.em-card:hover .frame-trace .dot,
.em-card:focus-within .frame-trace .dot,
.em-card:hover .frame-trace .trace,
.em-card:focus-within .frame-trace .trace {
    animation: frame-trace-glow 2.6s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}
/* Brief highlight pulse at the 50% midpoint of the sheen so the border
   reads as gold-accent at rest and only flashes brighter for ~200ms as
   the shimmer passes — mirrors the eyebrow border-strip behaviour. */
@keyframes frame-corner-glow {
    0%, 42%, 58%, 100% {
        border-color: var(--gold-accent);
        filter: none;
    }

    50% {
        border-color: var(--gold-bright);
        filter: drop-shadow(0 0 4px oklch(91% 0.13 92 / 0.45));
    }
}

@keyframes frame-trace-glow {
    0%, 42%, 58%, 100% {
        background-color: var(--gold-accent);
        filter: none;
    }

    50% {
        background-color: var(--gold-bright);
        filter: drop-shadow(0 0 4px oklch(91% 0.13 92 / 0.45));
    }
}

/* ============================================================
   11. ELEVATED-MOMENTS CARDS
   ============================================================ */
.em-card {
    max-width: 720px;
    position: relative;
}

    .em-card .frame-a,
    .em-card .frame-trace {
        width: 100%;
        padding: 18px;
    }

    .em-card:hover .frame-a .corner,
    .em-card:focus-within .frame-a .corner {
        width: calc(100% - 36px);
        height: calc(100% - 36px);
        opacity: 1;
    }

    .em-card:hover .frame-trace .trace,
    .em-card:focus-within .frame-trace .trace {
        opacity: 1;
    }

        .em-card:hover .frame-trace .trace.tl-h, .em-card:hover .frame-trace .trace.tr-h,
        .em-card:hover .frame-trace .trace.bl-h, .em-card:hover .frame-trace .trace.br-h,
        .em-card:focus-within .frame-trace .trace.tl-h, .em-card:focus-within .frame-trace .trace.tr-h,
        .em-card:focus-within .frame-trace .trace.bl-h, .em-card:focus-within .frame-trace .trace.br-h {
            transform: scaleX(1);
        }

        .em-card:hover .frame-trace .trace.tl-v, .em-card:hover .frame-trace .trace.tr-v,
        .em-card:hover .frame-trace .trace.bl-v, .em-card:hover .frame-trace .trace.br-v,
        .em-card:focus-within .frame-trace .trace.tl-v, .em-card:focus-within .frame-trace .trace.tr-v,
        .em-card:focus-within .frame-trace .trace.bl-v, .em-card:focus-within .frame-trace .trace.br-v {
            transform: scaleY(1);
        }

    .em-card:hover .frame-trace .dot,
    .em-card:focus-within .frame-trace .dot {
        transform: rotate(135deg);
        background: var(--gold-bright);
    }

.em-content {
    margin-top: var(--card-overlap);
    margin-left: var(--space-5);
    padding: var(--space-6);
    max-width: var(--card-panel-max);
    background: oklch(13% 0.025 268 / 0.85);
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--gold-faint);
}

.em-card-h3 {
    margin: 0 0 var(--space-2);
    font-family: var(--sans);
    font-weight: 700;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--gold-accent);
}

.em-card-body {
    margin: 0 0 var(--space-3);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
}

.em-card__eyebrow {
    /* tightens .hero-eyebrow margin inside timeline cards */
    margin-bottom: var(--space-3);
}

.em-card--right .em-content {
    margin-left: auto;
    margin-right: var(--space-5);
}

.em-card--caption .em-content {
    margin-top: -64px;
    margin-left: 0;
    padding: var(--space-4) var(--space-5);
    max-width: 75%;
    background: oklch(13% 0.025 268 / 0.92);
}

    .em-card--caption .em-content .em-card-body {
        margin-bottom: 0;
    }

.em-card--portrait .frame-media {
    aspect-ratio: 4 / 5;
}

.em-card--portrait .em-content {
    margin-top: var(--space-5);
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    background: transparent;
    padding: var(--space-4) 0 0;
}

.em-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-7);
    margin-top: var(--space-6);
}

    .em-card-grid .em-card {
        max-width: 100%;
    }

        .em-card-grid .em-card .em-content {
            max-width: 92%;
        }

@media (max-width: 760px) {
    .em-card-grid {
        gap: var(--space-6);
    }

    .em-content {
        padding: var(--space-5);
    }
}

/* Scroll-reveal sweep variant */
.em-card--reveal-sweep .frame-media {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s cubic-bezier(0.7, 0, 0.3, 1);
}

.em-card--reveal-sweep .em-content {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease-out 0.55s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.55s;
}

.em-card--reveal-sweep.is-visible .frame-media {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
}

.em-card--reveal-sweep.is-visible .em-content {
    opacity: 1;
    transform: translateY(0);
}

/* Scroll-reveal iris variant */
.em-card--reveal-iris .frame-media {
    -webkit-clip-path: circle(0% at 50% 50%);
    clip-path: circle(0% at 50% 50%);
    transition: clip-path 1.4s cubic-bezier(0.7, 0, 0.3, 1);
}

.em-card--reveal-iris .em-content {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.8s ease-out 0.65s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.65s;
}

.em-card--reveal-iris.is-visible .frame-media {
    -webkit-clip-path: circle(78% at 50% 50%);
    clip-path: circle(78% at 50% 50%);
}

.em-card--reveal-iris.is-visible .em-content {
    opacity: 1;
    transform: translateY(0);
}

/* Reduced-motion guard for the cinematic reveal variants — strip
   clip-path/translate, keep opacity so the element still fades in. */
@media (prefers-reduced-motion: reduce) {
    .em-card--reveal-sweep .frame-media,
    .em-card--reveal-iris .frame-media {
        -webkit-clip-path: none;
        clip-path: none;
        transition: opacity 200ms ease;
    }

    .em-card--reveal-sweep .em-content,
    .em-card--reveal-iris .em-content {
        transform: none;
        transition: opacity 200ms ease;
    }
}

/* Touch-active mirror of :hover for em-card / frame-a / frame-trace.
   c360-chrome.js toggles .is-touch-active while the element overlaps the
   middle 40% band of the viewport (30% top gap + 40% hitbox + 30% bottom
   gap). Gated to pointers without hover so desktop is unaffected. */
@media (hover: none) {
    .frame-a.is-touch-active .corner {
        width: calc(100% - 36px);
        height: calc(100% - 36px);
        opacity: 1;
    }

    .frame-trace.is-touch-active .trace {
        opacity: 1;
    }

        .frame-trace.is-touch-active .trace.tl-h,
        .frame-trace.is-touch-active .trace.tr-h,
        .frame-trace.is-touch-active .trace.bl-h,
        .frame-trace.is-touch-active .trace.br-h {
            transform: scaleX(1);
        }

        .frame-trace.is-touch-active .trace.tl-v,
        .frame-trace.is-touch-active .trace.tr-v,
        .frame-trace.is-touch-active .trace.bl-v,
        .frame-trace.is-touch-active .trace.br-v {
            transform: scaleY(1);
        }

    .frame-trace.is-touch-active .dot {
        background: var(--gold-bright);
        transform: rotate(135deg);
    }

    .em-card.is-touch-active .frame-media::after {
        opacity: 1;
        animation: frame-media-shimmer 2.6s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
    }

    .em-card.is-touch-active .frame-a .corner {
        width: calc(100% - 36px);
        height: calc(100% - 36px);
        opacity: 1;
        animation: frame-corner-glow 2.6s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
    }

    .em-card.is-touch-active .frame-trace .trace {
        opacity: 1;
    }

        .em-card.is-touch-active .frame-trace .trace.tl-h,
        .em-card.is-touch-active .frame-trace .trace.tr-h,
        .em-card.is-touch-active .frame-trace .trace.bl-h,
        .em-card.is-touch-active .frame-trace .trace.br-h {
            transform: scaleX(1);
        }

        .em-card.is-touch-active .frame-trace .trace.tl-v,
        .em-card.is-touch-active .frame-trace .trace.tr-v,
        .em-card.is-touch-active .frame-trace .trace.bl-v,
        .em-card.is-touch-active .frame-trace .trace.br-v {
            transform: scaleY(1);
        }

    .em-card.is-touch-active .frame-trace .dot,
    .em-card.is-touch-active .frame-trace .trace {
        animation: frame-trace-glow 2.6s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
    }

    .em-card.is-touch-active .frame-trace .dot {
        transform: rotate(135deg);
        background: var(--gold-bright);
    }
}

/* ============================================================
   12. SCROLL-REVEAL utility
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

    .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .reveal[data-delay="1"] {
        transition-delay: 0.08s;
    }

    .reveal[data-delay="2"] {
        transition-delay: 0.16s;
    }

    .reveal[data-delay="3"] {
        transition-delay: 0.24s;
    }

    .reveal[data-delay="4"] {
        transition-delay: 0.32s;
    }

    .reveal[data-delay="5"] {
        transition-delay: 0.40s;
    }

/* ============================================================
   13. SUBTLE BACKGROUNDS (animated SVG + CSS patterns)
   ============================================================ */
.bg-host {
    position: relative;
    overflow: hidden;
    background: var(--surface-base);
}

    .bg-host > .bg-layer {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
    }

    .bg-host > * {
        position: relative;
        z-index: 1;
    }

/* Threadwork - pinstripe weave, slow pan */
.bg-threads {
    background: repeating-linear-gradient(45deg, transparent 0 18px, oklch(75% 0.10 85 / 0.10) 18px 19px, transparent 19px 38px, oklch(75% 0.10 85 / 0.06) 38px 39px), repeating-linear-gradient(-45deg, transparent 0 22px, oklch(75% 0.10 85 / 0.05) 22px 23px);
    background-size: 180px 180px, 220px 220px;
    animation: bg-threads-pan 36s linear infinite;
}

@keyframes bg-threads-pan {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 180px 180px, -220px 220px;
    }
}

/* Gilded grid - dot grid, slow opacity breathe */
.bg-grid-dots {
    background-image: radial-gradient(circle, oklch(75% 0.10 85 / 0.55) 1px, transparent 1.6px);
    background-size: 28px 28px;
    background-position: 0 0;
    /* linear, not ease-in-out — ease-in-out on an infinite loop creates
     a perceptible pause-at-the-top at the seam where the loop restarts. */
    animation: bg-grid-fade 9s linear infinite;
}

@keyframes bg-grid-fade {
    0%, 100% {
        opacity: 0.20;
    }

    50% {
        opacity: 0.50;
    }
}

/* Radial breath - ripple rings from center */
.bg-pulse__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 1px solid oklch(75% 0.10 85 / 0.6);
    border-radius: 50%;
    transform-origin: center;
    animation: bg-pulse-out 7s ease-out infinite;
}

    .bg-pulse__ring:nth-child(2) {
        animation-delay: -2.4s;
    }

    .bg-pulse__ring:nth-child(3) {
        animation-delay: -4.7s;
    }

@keyframes bg-pulse-out {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }

    20% {
        opacity: 0.7;
    }

    100% {
        transform: scale(8);
        opacity: 0;
    }
}

/* Civic laurel - centered watermark */
.bg-laurel svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--gold-accent);
    animation: bg-laurel-breathe 10s ease-in-out infinite;
}

@keyframes bg-laurel-breathe {
    0%, 100% {
        opacity: 0.16;
    }

    50% {
        opacity: 0.40;
    }
}

/* Civic swirls - counter-rotating ring slats */
.bg-swirl svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.bg-swirl .ring-inner rect,
.bg-swirl .ring-outer rect {
    fill: var(--gold-accent);
}

.bg-swirl .ring-inner {
    transform-origin: center;
    transform-box: fill-box;
    animation: bg-swirl-spin-cw 54s linear infinite, bg-swirl-breathe 9s ease-in-out infinite;
}

.bg-swirl .ring-outer {
    transform-origin: center;
    transform-box: fill-box;
    animation: bg-swirl-spin-ccw 78s linear infinite, bg-swirl-breathe 9s ease-in-out infinite;
}

@keyframes bg-swirl-spin-cw {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}

@keyframes bg-swirl-spin-ccw {
    from {
        rotate: 0deg;
    }

    to {
        rotate: -360deg;
    }
}

@keyframes bg-swirl-breathe {
    0%, 100% {
        opacity: 0.14;
    }

    50% {
        opacity: 0.38;
    }
}

.bg-swirl--single svg {
    transform: scale(2.4);
    transform-origin: center;
}

/* DCAS source swirl PNG (static) */
.bg-dcas-swirl {
    background-color: var(--surface-base);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.35;
}

/* Photo background overlay (text-readable) */
.bg-photo {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1.04);
    animation: bg-photo-drift 24s ease-in-out infinite alternate;
}

@keyframes bg-photo-drift {
    from {
        transform: scale(1.04) translateY(0);
    }

    to {
        transform: scale(1.08) translateY(-8px);
    }
}

.bg-photo-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, oklch(13% 0.025 268 / 0.5) 0%, oklch(13% 0.025 268 / 0.88) 100%);
}

.bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
   14. INPUTS (booking flow uses 2px radius exception)
   ============================================================ */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-accent);
}

.field-input, .field-select, .field-textarea {
    padding: 12px 14px;
    min-height: 44px;
    background: var(--surface-base);
    border: 1px solid var(--ink-faint);
    border-radius: var(--radius-input);
    color: var(--ink-primary);
    font-family: var(--sans);
    font-size: 16px;
    transition: border-color var(--t-fast);
}

.field-textarea {
    min-height: 88px;
}

@media (max-width: 600px) {
    .field-input, .field-select {
        min-height: 48px;
        padding: 14px;
    }

    .field-label {
        font-size: 11px;
    }
}

.field-input:focus-visible, .field-select:focus-visible, .field-textarea:focus-visible {
    outline: 2px solid var(--gold-accent);
    outline-offset: 2px;
    border-color: var(--gold-accent);
}

.field-help {
    margin: 4px 0 0;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink-quiet);
}

.field-error {
    color: oklch(75% 0.16 25);
    font-size: 13px;
    margin-top: 4px;
}

/* Themed form-error banner. Used by the booking wizard when submit fails
   client-side validation. Replaces the Bootstrap .alert-danger pink card
   so the message reads as part of the dark gold-accent wizard surface. */
.form-banner-error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: oklch(22% 0.04 25 / 0.45);
    border: 1px solid oklch(55% 0.14 25 / 0.55);
    border-left: 3px solid oklch(65% 0.18 25);
    color: oklch(90% 0.04 25);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
}

    .form-banner-error .bi {
        color: oklch(72% 0.18 25);
        font-size: 18px;
        line-height: 1;
        flex-shrink: 0;
        margin-top: 1px;
    }

/* ============================================================
   15. STATS / DATA STRIP
   ============================================================ */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.stat {
    padding: var(--space-6) var(--space-5);
    border-right: 1px solid var(--hairline);
    position: relative;
}

    .stat:last-child {
        border-right: 0;
    }

@media (max-width: 760px) {
    .stat {
        border-right: 0;
        border-bottom: 1px solid var(--hairline);
    }

        .stat:last-child {
            border-bottom: 0;
        }
}

.stat__num {
    font-family: var(--serif-display);
    font-weight: 400;
    font-size: clamp(48px, 7vw, 80px);
    line-height: 1;
    color: var(--ink-primary);
    display: block;
}

    .stat__num em {
        font-family: var(--serif-quote);
        font-style: italic;
        font-size: 0.5em;
        color: var(--gold-warm, var(--gold-accent));
        margin-left: 4px;
    }

.stat__label {
    display: block;
    margin-top: var(--space-3);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold-accent);
}

.stat::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 64px;
    height: 1px;
    background: var(--gradient-civic-gold);
}

/* ============================================================
   16. INFO TRIO (Location / Hours / What to Know)
   ============================================================ */
.info-trio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    margin-top: var(--space-7);
}

.info-cell {
    padding: var(--space-7) var(--space-6);
    background: var(--surface-raise);
}

.info-cell__icon {
    width: 36px;
    height: 36px;
    margin-bottom: var(--space-4);
    color: var(--gold-accent);
}

.info-cell__eyebrow {
    /* tightens .hero-eyebrow margin inside info cells */
    margin-bottom: var(--space-4);
}

.info-cell__title {
    margin: 0 0 var(--space-3);
    font-family: var(--sans);
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-primary);
}

.info-cell__body {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink-soft);
}

    .info-cell__body strong {
        color: var(--ink-primary);
        font-weight: 500;
    }

.info-cell__list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.8;
    color: var(--ink-soft);
}

    .info-cell__list li {
        display: flex;
        gap: 10px;
    }

        .info-cell__list li::before {
            content: "·";
            color: var(--gold-accent);
            font-weight: 700;
        }

/* ============================================================
   17. FOOTER - canonical designsystem.nyc.gov pattern
       Block 1 (.c360-footer) = agency: stacked logo + 2 link cols + social
       Block 2 (.nyc-footer)  = "More on nyc.gov": 3 link cols + HR + ©
   ============================================================ */
.c360-footer {
    background: var(--surface-mark);
    border-top: 1px solid var(--hairline);
    color: var(--ink-primary);
    font-family: var(--nyc-font);
    padding: 56px 24px;
}

.c360-footer__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

@media (max-width: 880px) {
    .c360-footer__inner {
        grid-template-columns: 1fr 1fr;
    }

    .c360-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .c360-footer__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.c360-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    max-width: 100%;
}

.c360-footer__logos {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.c360-footer__logo-sep {
    width: 1px;
    height: 80px;
    background: var(--hairline);
    flex-shrink: 0;
}

.c360-footer__logo {
    display: block;
    height: 120px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.c360-footer__dcas-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

.c360-footer__dcas-text {
    display: inline-block;
    font-family: var(--nyc-font);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--ink-primary);
    text-transform: none;
}

.c360-footer__dcas-link:hover .c360-footer__dcas-text,
.c360-footer__dcas-link:focus-visible .c360-footer__dcas-text {
    color: var(--gold-accent);
}

@media (max-width: 540px) {
    .c360-footer__logo {
        height: 88px;
    }

    .c360-footer__logo-sep {
        height: 60px;
    }

    .c360-footer__logos {
        gap: 18px;
    }

    .c360-footer__dcas-text {
        font-size: 15px;
    }
}

.c360-footer__col-title {
    display: block;
    font-family: var(--nyc-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink-primary);
    margin-bottom: 16px;
}

.c360-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .c360-footer ul li {
        margin-bottom: 10px;
    }

.c360-footer a {
    position: relative;
    color: var(--ink-primary);
    font-family: var(--nyc-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    padding: 2px 0;
    transition: color var(--t-fast);
}
/* Underline transition matches header .nyc-nav a::after pattern. Scoped to
   column-link <a> in <li> so logo/social/dcas anchors don't get the underline. */
.c360-footer ul a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.c360-footer ul a:hover::after,
.c360-footer ul a:focus-visible::after {
    transform: scaleX(1);
}

.c360-footer a:hover,
.c360-footer a:focus-visible {
    color: var(--gold-accent);
}

.c360-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 4px;
}

    .c360-footer__social a {
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--ink-primary);
    }

        .c360-footer__social a:hover,
        .c360-footer__social a:focus-visible {
            color: var(--gold-accent);
        }

    .c360-footer__social svg {
        width: 22px;
        height: 22px;
        display: block;
    }

/* Block 2: canonical "More on nyc.gov" */
.nyc-footer {
    background: var(--nyc-bg);
    color: var(--nyc-fg);
    font-family: var(--nyc-font);
    padding: 56px 24px 40px;
}

.nyc-footer__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

@media (max-width: 880px) {
    .nyc-footer__inner {
        grid-template-columns: 1fr 1fr;
    }

    .nyc-footer__heading {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .nyc-footer__inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.nyc-footer__heading {
    font-family: var(--nyc-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--nyc-fg);
    margin: 0;
}

.nyc-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .nyc-footer ul li {
        margin-bottom: 12px;
    }

.nyc-footer a {
    color: var(--nyc-fg);
    font-family: var(--nyc-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    transition: color var(--t-fast);
}

    .nyc-footer a:hover,
    .nyc-footer a:focus-visible {
        color: var(--gold-accent);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

.nyc-footer__legal {
    grid-column: 1 / -1;
    margin-top: 8px;
}

    .nyc-footer__legal hr {
        border: 0;
        border-top: 1px solid var(--nyc-divider);
        margin: 0 0 20px;
    }

    .nyc-footer__legal p {
        margin: 0;
        font-size: 13px;
        line-height: 1.6;
        color: var(--nyc-fg);
        opacity: 0.85;
    }

/* ============================================================
   18. PULL QUOTE
   ============================================================ */
.pull {
    padding: var(--space-7) 0;
    border-top: 1px solid var(--gold-soft);
    border-bottom: 1px solid var(--gold-soft);
    max-width: 720px;
}

.pull-q {
    margin: 0 0 var(--space-3);
    font-family: var(--serif-quote);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.3;
    color: var(--ink-primary);
}

.pull-attr {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: oklch(75% 0.10 85 / 0.75);
}

/* ============================================================
   19. SECTION WITH PHOTO BACKGROUND
   ============================================================ */
.section--photo {
    position: relative;
    padding: var(--space-10) var(--container-px);
    overflow: hidden;
}

    .section--photo .section-photo-inner {
        position: relative;
        z-index: 2;
        max-width: var(--container-max);
        margin: 0 auto;
    }

@media (max-width: 768px) {
    .section--photo {
        padding: var(--space-8) var(--container-px);
    }
}

/* Big Civic Fame gradient divider strip (decorative section break) */
.gradient-strip {
    height: 3px;
    background: var(--gradient-civic-gold);
    width: 100%;
}

/* ============================================================
   20. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        transition-duration: 0.001s !important;
    }

    .reveal, .em-card--reveal-sweep .em-content, .em-card--reveal-iris .em-content {
        opacity: 1 !important;
        transform: none !important;
    }

    .em-card--reveal-sweep .frame-media, .em-card--reveal-iris .frame-media {
        -webkit-clip-path: none !important;
        clip-path: none !important;
    }

    .em-card .frame-a::after,
    .em-card .frame-trace::after,
    .frame-trace--flush::after {
        opacity: 0 !important;
        animation: none !important;
    }

    .bg-threads, .bg-grid-dots, .bg-laurel svg, .bg-pulse__ring,
    .bg-swirl .ring-inner, .bg-swirl .ring-outer, .bg-photo {
        animation: none !important;
    }

    .bg-swirl .ring-inner, .bg-swirl .ring-outer {
        opacity: 0.28 !important;
    }

    .bg-laurel svg {
        opacity: 0.30 !important;
    }

    .bg-pulse__ring {
        transform: scale(3) !important;
        opacity: 0.3 !important;
    }
    /* Show the poster frame as a static image instead of hiding the element
     entirely — keeps the hero visually complete for reduced-motion users. */
    .hero-video {
        animation: none !important;
    }
}

/* ============================================================
   DOWNSTREAM OVERRIDES (do not remove during design-source refresh)
   These rules adapt the verbatim design system to client-repo
   integration realities. Re-apply after any c360.css refresh from
   designs/_shared/styles.css.
   ============================================================ */

/* btn-quiet defaults to align-self: flex-start so it doesn't stretch in
   vertical column flex contexts. But when btn-quiet sits next to btn-cta
   in a horizontal action row, that flex-start makes the link cling to the
   top of the row instead of vertically centering with the CTA. Adjacent
   sibling selectors target the row case without affecting vertical stacks. */
.btn-cta + .btn-quiet,
.btn-quiet + .btn-cta,
form > .btn-quiet,
.hero-actions .btn-quiet {
    align-self: center;
}

/* frame-trace variant: zero padding + dots/traces snap to the panel border.
   Use when wrapping a self-bordered content panel (e.g. reservation summary)
   where the default 18px breathing room creates an unwanted internal gap. */
.frame-trace--flush {
    padding: 0;
}

    .frame-trace--flush .dot.tl {
        top: -4px;
        left: -4px;
    }

    .frame-trace--flush .dot.tr {
        top: -4px;
        right: -4px;
    }

    .frame-trace--flush .dot.bl {
        bottom: -4px;
        left: -4px;
    }

    .frame-trace--flush .dot.br {
        bottom: -4px;
        right: -4px;
    }

    .frame-trace--flush .trace.tl-h,
    .frame-trace--flush .trace.tr-h,
    .frame-trace--flush .trace.bl-h,
    .frame-trace--flush .trace.br-h {
        width: calc(50% - 4px);
    }

    .frame-trace--flush .trace.tl-v,
    .frame-trace--flush .trace.tr-v,
    .frame-trace--flush .trace.bl-v,
    .frame-trace--flush .trace.br-v {
        height: calc(50% - 4px);
    }

    .frame-trace--flush .trace.tl-h {
        top: -1px;
        left: 4px;
    }

    .frame-trace--flush .trace.tr-h {
        top: -1px;
        right: 4px;
    }

    .frame-trace--flush .trace.bl-h {
        bottom: -1px;
        left: 4px;
    }

    .frame-trace--flush .trace.br-h {
        bottom: -1px;
        right: 4px;
    }

    .frame-trace--flush .trace.tl-v {
        top: 4px;
        left: -1px;
    }

    .frame-trace--flush .trace.tr-v {
        top: 4px;
        right: -1px;
    }

    .frame-trace--flush .trace.bl-v {
        bottom: 4px;
        left: -1px;
    }

    .frame-trace--flush .trace.br-v {
        bottom: 4px;
        right: -1px;
    }

    /* Hover shimmer for frame-trace--flush — diagonal gold sheen sweeps across the
   wrapped panel on hover/focus. Mirrors the Frame A loading-sheen pattern from
   Design System v2. Shimmer is placed on the inner panel (e.g., .summary) so the
   panel's existing overflow: hidden clips it without affecting the corner dots
   that intentionally overflow the frame. */
    .frame-trace--flush .summary,
    .frame-trace--flush > [class*="summary"] {
        position: relative;
    }

        .frame-trace--flush .summary::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(115deg, transparent 25%, rgba(228, 213, 120, 0.22) 50%, transparent 75%);
            transform: translateX(-110%);
            transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
            pointer-events: none;
            z-index: 4;
            mix-blend-mode: screen;
        }

    .frame-trace--flush:hover .summary::after,
    .frame-trace--flush:focus-within .summary::after {
        transform: translateX(110%);
    }

@media (prefers-reduced-motion: reduce) {
    .frame-trace--flush .summary::after {
        transition: none;
    }

    .frame-trace--flush:hover .summary::after,
    .frame-trace--flush:focus-within .summary::after {
        transform: translateX(-110%);
    }
}

/* Outer sheen on .frame-trace--flush so the border traces + dots shimmer
   in sync with the inner .summary sheen. Background-position style so the
   pseudo stays contained even though the wrapper has overflow: visible. */
.frame-trace--flush::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 25%, rgba(228, 213, 120, 0.22) 50%, transparent 75%);
    background-repeat: no-repeat;
    background-size: 220% 100%;
    background-position: 220% 0;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: screen;
}

.frame-trace--flush:hover::after,
.frame-trace--flush:focus-within::after {
    opacity: 1;
    animation: frame-trace-flush-shimmer 1.1s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}

@keyframes frame-trace-flush-shimmer {
    from {
        background-position: 220% 0;
    }

    to {
        background-position: -120% 0;
    }
}

/* ============================================================
   Eyebrow shimmer — subtle gold sweep on the TEXT and the BORDER
   LINES only, never the empty padding between. Loops every 10s.

   Two layers:
   1. Element background = animated gold gradient clipped to the text
      shape via `background-clip: text` + `-webkit-text-fill-color:
      transparent`. The gradient is only visible where character pixels
      are — padding gap stays untouched.
   2. ::before / ::after = 1px sheen strips overlaying the top + bottom
      border lines with `mix-blend-mode: screen` so the border brightens
      as the sweep passes. Strips are only attached to the three eyebrow
      classes that actually have borders.
   ============================================================ */
.hero-eyebrow,
.crown__eyebrow,
.hunt-finish__eyebrow,
.hunt-group__compass,
.details-modal__eyebrow {
    position: relative;
    /* Two stacked layers, both clipped to the text shape:
     1) animated bright sweep band (parked off-screen at rest)
     2) solid gold-accent base — keeps the text visible at all times */
    background-image: linear-gradient(105deg, transparent 38%, oklch(98% 0.18 92) 50%, transparent 62%), linear-gradient(var(--gold-accent), var(--gold-accent));
    background-size: 220% 100%, 100% 100%;
    background-position: 220% 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: eyebrow-shimmer 10s linear infinite;
}

    /* Border-line sheen strips for bordered eyebrows only. */
    .hero-eyebrow::before,
    .hero-eyebrow::after,
    .crown__eyebrow::before,
    .crown__eyebrow::after,
    .hunt-finish__eyebrow::before,
    .hunt-finish__eyebrow::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        background-image: linear-gradient(105deg, transparent 38%, oklch(98% 0.18 92 / 0.85) 50%, transparent 62%);
        background-size: 220% 100%;
        background-position: 220% 0;
        background-repeat: no-repeat;
        pointer-events: none;
        mix-blend-mode: screen;
        animation: eyebrow-shimmer 10s linear infinite;
    }

    .hero-eyebrow::before,
    .crown__eyebrow::before,
    .hunt-finish__eyebrow::before {
        top: 0;
    }

    .hero-eyebrow::after,
    .crown__eyebrow::after,
    .hunt-finish__eyebrow::after {
        bottom: 0;
    }

@keyframes eyebrow-shimmer {
    /* Animate the first bg-position (sweep band) only; second value (base)
     stays at 0 0 so the gold-accent base layer never moves. */
    0% {
        background-position: 220% 0, 0 0;
    }

    10% {
        background-position: -120% 0, 0 0;
    }

    10.01% {
        background-position: 220% 0, 0 0;
    }

    100% {
        background-position: 220% 0, 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-eyebrow,
    .crown__eyebrow,
    .hunt-finish__eyebrow,
    .hunt-group__compass,
    .details-modal__eyebrow,
    .hero-eyebrow::before,
    .hero-eyebrow::after,
    .crown__eyebrow::before,
    .crown__eyebrow::after,
    .hunt-finish__eyebrow::before,
    .hunt-finish__eyebrow::after {
        animation: none;
    }
}