/* ==========================================================================
   HHB CORE LLC
   main.css - tokens, base, components

   Palette note: the brief proposed navy/coral/amber, none of which appear in
   the HHB CORE mark. The mark is bronze-gold (#C0903C, 39% of its opaque
   pixels), black and grey. The palette below is built from the mark instead,
   and every foreground/background pair used for text has been checked to
   WCAG 2.1 AA. Raw brand gold measures 2.88:1 on white, so it is used for
   fills, rules and the mark only -- never as text on a light surface. The
   darkened --gold-ink (6.35:1 on white) carries gold-coloured text on light.
   ========================================================================== */

:root {
    /* ink */
    --ink:        #16181C;   /* 17.8:1 on white */
    --ink-2:      #22252B;   /* elevated dark surface */
    --ink-3:      #2E3238;   /* hairlines on dark */

    /* brand */
    --gold:       #C0903C;   /* from the mark; fills and rules */
    --gold-lt:    #DCAE58;   /* 8.7:1 on --ink; text on dark */
    --gold-ink:   #7A5A1E;   /* 6.35:1 on white; text on light */

    /* neutrals */
    --paper:      #FFFFFF;
    --bone:       #F6F4F0;   /* warm section ground */
    --bone-2:     #EDE9E2;
    --body:       #3A3F47;   /* 10.6:1 on white */
    --muted:      #5A6069;   /* 6.34:1 on white */
    --muted-dk:   #AEB3BC;   /* 7.3:1 on --ink-2 */
    --line:       #E2DDD5;

    /* status */
    --green:      #1E7A4B;  --green-dk:  #6FD39B;
    --amber:      #8A5A00;  --amber-dk:  #F0C46A;
    --red:        #A33A3A;  --red-dk:    #F09A9A;

    /* type */
    --display: "Playfair Display", "Iowan Old Style", Georgia, serif;
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* space + shape */
    --gap: clamp(1rem, 2.5vw, 1.75rem);
    --radius: 14px;
    --radius-lg: 22px;
    --shadow: 0 1px 2px rgba(22,24,28,.06), 0 8px 28px rgba(22,24,28,.08);
    --shadow-lg: 0 2px 6px rgba(22,24,28,.08), 0 24px 60px rgba(22,24,28,.16);
    --nav-h: 68px;

    --ease: cubic-bezier(.22,.61,.36,1);
    --dur: .5s;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--sans);
    font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
    line-height: 1.65;
    color: var(--body);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
    border-radius: 4px;
}
/* Visually hidden but announced by assistive technology. */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Skip link -- first tab stop on every page. */
.skip {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    background: var(--ink); color: #fff; padding: .85rem 1.25rem;
    border-radius: 0 0 var(--radius) 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- type ---------- */
h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.12;
    color: var(--ink);
    letter-spacing: -.015em;
    text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 1.5rem + 4.2vw, 4.5rem); }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.6vw, 3rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.6rem); }
p { text-wrap: pretty; }
.lede { font-size: clamp(1.06rem, 1rem + .4vw, 1.28rem); line-height: 1.6; }

.label {
    font-family: var(--sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-ink);      /* 6.35:1 on white, 5.78:1 on bone */
    display: block;
    margin-bottom: .85rem;
}
.on-dark .label, .dark .label { color: var(--gold-lt); }   /* 8.7:1 on ink */

/* ---------- layout ---------- */
.container { width: min(1200px, 100% - clamp(2rem, 6vw, 5rem)); margin-inline: auto; }
.container-narrow { width: min(760px, 100% - clamp(2rem, 6vw, 5rem)); margin-inline: auto; }
.section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.section-tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.dark { background: var(--ink); color: #E7E4DE; }
.dark h1, .dark h2, .dark h3 { color: #fff; }
.bone { background: var(--bone); }
.center { text-align: center; }
.stack > * + * { margin-top: 1.1rem; }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head.center { margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .95rem 1.7rem;
    border-radius: 999px;
    border: 1.5px solid transparent;
    font-weight: 600; font-size: .975rem;
    text-decoration: none; cursor: pointer;
    transition: transform .18s var(--ease), background-color .18s var(--ease),
                border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn i { font-size: .9em; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* gold fill, ink text -- 6.17:1 */
.btn-primary { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn-primary:hover { background: var(--gold-lt); border-color: var(--gold-lt); box-shadow: 0 10px 26px rgba(192,144,60,.32); }

/* ink fill, white text -- 17.8:1 */
.btn-ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ink:hover { background: var(--ink-2); box-shadow: var(--shadow); }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.on-dark .btn-outline, .dark .btn-outline { color: #fff; border-color: rgba(255,255,255,.55); }
.on-dark .btn-outline:hover, .dark .btn-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

.btn-lg { padding: 1.1rem 2.1rem; font-size: 1.04rem; }
.btn-block { width: 100%; justify-content: center; }

.link-arrow {
    display: inline-flex; align-items: center; gap: .45rem;
    font-weight: 600; color: var(--gold-ink); text-decoration: none;
    border-bottom: 1.5px solid transparent; transition: border-color .2s;
}
.link-arrow:hover { border-bottom-color: currentColor; }
.link-arrow i { transition: transform .2s var(--ease); }
.link-arrow:hover i { transform: translateX(3px); }

/* ==========================================================================
   navigation
   ========================================================================== */
.topbar {
    background: var(--ink);
    color: var(--muted-dk);
    font-size: .82rem;
    padding: .45rem 0;
}
.topbar .container { display: flex; gap: 1.25rem; justify-content: space-between; flex-wrap: wrap; }
.topbar a { color: #E7E4DE; text-decoration: none; font-weight: 500; }
.topbar a:hover { color: var(--gold-lt); text-decoration: underline; }
.topbar span { display: inline-flex; align-items: center; gap: .45rem; }

.nav {
    position: sticky; top: 0; z-index: 900;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.nav.scrolled { box-shadow: 0 6px 30px rgba(22,24,28,.10); background: rgba(255,255,255,.95); }
.nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; min-height: var(--nav-h);
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
.brand img { height: 44px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.06; }
.brand-name { font-family: var(--display); font-weight: 900; font-size: 1.16rem; color: var(--ink); letter-spacing: .01em; }
.brand-sub { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

.nav-links { display: flex; align-items: center; gap: .35rem; list-style: none; padding: 0; }
.nav-links > li { position: relative; }
.nav-links a {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .6rem .85rem; border-radius: 8px;
    text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--body);
    transition: background-color .18s, color .18s;
}
.nav-links a:hover { background: var(--bone-2); color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.nav-links a[aria-current="page"]::after {
    content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .28rem;
    height: 2px; background: var(--gold); border-radius: 2px;
}

/* units dropdown */
.has-menu > button {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .6rem .85rem; border-radius: 8px;
    background: none; border: 0; cursor: pointer;
    font-weight: 500; font-size: .95rem; color: var(--body);
}
.has-menu > button:hover { background: var(--bone-2); color: var(--ink); }
.has-menu > button i { font-size: .7em; transition: transform .2s var(--ease); }
.has-menu[data-open="true"] > button i { transform: rotate(180deg); }
.menu {
    position: absolute; top: calc(100% + .5rem); left: 0;
    min-width: 310px; padding: .5rem;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    list-style: none; margin: 0;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
}
.has-menu[data-open="true"] .menu {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear 0s;
}
.menu a { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .85rem; border-radius: 9px; }
.menu a:hover { background: var(--bone); }
.menu .m-name { font-weight: 700; color: var(--ink); font-size: .97rem; }
.menu .m-meta { font-size: .8rem; color: var(--muted); font-weight: 500; }

/* hamburger */
.burger {
    display: none; width: 44px; height: 44px;
    align-items: center; justify-content: center;
    background: none; border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
}
.burger span { display: block; width: 19px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: background .2s; }
.burger span::before, .burger span::after {
    content: ""; position: absolute; left: 0; width: 19px; height: 2px;
    background: var(--ink); border-radius: 2px; transition: transform .28s var(--ease), top .2s;
}
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.mobile-menu {
    position: fixed; inset: 0; z-index: 950;
    background: var(--ink); color: #fff;
    padding: 5.5rem clamp(1.5rem, 6vw, 3rem) 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .34s var(--ease);
    visibility: hidden;
}
.mobile-menu[data-open="true"] { transform: translateX(0); visibility: visible; }
.mobile-menu ul { list-style: none; padding: 0; }
.mobile-menu > ul > li { border-bottom: 1px solid var(--ink-3); }
.mobile-menu a, .mobile-menu .mm-head {
    display: block; padding: 1.05rem .25rem; color: #fff;
    text-decoration: none; font-size: 1.15rem; font-weight: 600;
    font-family: var(--display);
}
.mobile-menu .mm-sub { list-style: none; padding: 0 0 .75rem .9rem; }
.mobile-menu .mm-sub a { font-family: var(--sans); font-size: .98rem; font-weight: 500; padding: .55rem .25rem; color: #D8D4CC; }
.mobile-menu .mm-sub .m-meta { display: block; font-size: .8rem; color: var(--muted-dk); font-weight: 400; }
.mobile-close { position: absolute; top: 1.1rem; right: clamp(1.5rem, 6vw, 3rem); width: 44px; height: 44px; border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; cursor: pointer; }
.mobile-cta { margin-top: 1.75rem; display: grid; gap: .75rem; }

/* ==========================================================================
   hero
   ========================================================================== */
.hero { position: relative; isolation: isolate; color: #fff; display: grid; align-items: end; overflow: hidden; }
.hero-full { min-height: min(88vh, 780px); }
.hero-short { min-height: min(46vh, 420px); }
.hero-media { position: absolute; inset: 0; z-index: -2; }
/* The <picture> wrapper needs an explicit height of its own: a percentage
   height on the <img> resolves against <picture>, not against .hero-media, so
   without this the image falls back to its intrinsic height and overflows the
   hero -- covering the first heading of the following section. */
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---- hero video ----------------------------------------------------------
   Sits above the poster still inside .hero-media and fades in only once it is
   actually playing (main.js adds .playing). Until then, and for anyone the
   clip never plays for, the poster underneath is what shows -- so the hero is
   never an empty black rectangle. */
.hero-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .8s var(--ease);
    pointer-events: none;
}
.hero-video.playing { opacity: 1; }

.hero-video-toggle {
    position: absolute; right: 1rem; bottom: 1rem; z-index: 4;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem .9rem;
    border-radius: 999px;
    background: rgba(22, 24, 28, .62);
    border: 1px solid rgba(255, 255, 255, .32);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: #fff; font-size: .8rem; font-weight: 600;
    cursor: pointer;
    transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.hero-video-toggle:hover { background: rgba(22, 24, 28, .82); border-color: #fff; }
/* The label is for screen readers and wide screens; the icon carries it on
   narrow ones, where the accessible name still comes from the hidden text. */
.hero-video-toggle .toggle-text { white-space: nowrap; }
.hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(180deg, rgba(22,24,28,.62) 0%, rgba(22,24,28,.34) 38%, rgba(22,24,28,.90) 100%),
        linear-gradient(100deg, rgba(22,24,28,.55) 0%, rgba(22,24,28,0) 62%);
}
.hero-gradient { background: linear-gradient(135deg, var(--ink) 0%, #3A2E18 58%, var(--gold-ink) 130%); }
.hero-gradient::after { display: none; }
.hero-body { padding: clamp(3rem, 9vw, 6rem) 0 clamp(2.5rem, 6vw, 4.5rem); position: relative; }
.hero h1 { color: #fff; max-width: 16ch; }
.hero .lede { color: #E7E4DE; max-width: 46ch; margin-top: 1.25rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

.eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .45rem 1rem; border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.28);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: #fff; margin-bottom: 1.35rem;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-lt); }

.hero-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; list-style: none; padding: 0; }
.hero-tags li {
    padding: .4rem .9rem; border-radius: 999px; font-size: .84rem; font-weight: 600;
    background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.24); color: #fff;
}

.scroll-cue {
    position: absolute; left: 50%; bottom: 1.4rem; translate: -50% 0;
    color: rgba(255,255,255,.8); font-size: 1.1rem;
    animation: bob 2.4s ease-in-out infinite;
}

/* photo credit chip for licensed imagery */
.credit {
    position: absolute; right: .75rem; bottom: .7rem; z-index: 3;
    font-size: .68rem; line-height: 1.35; color: rgba(255,255,255,.82);
    background: rgba(22,24,28,.6); backdrop-filter: blur(6px);
    padding: .3rem .6rem; border-radius: 6px; max-width: 22rem;
}
.credit a { color: inherit; }

/* Must come after .credit: both are single-class selectors, so source order
   decides. Declared earlier it loses, and the label ends up tucked behind the
   pause control at the same corner. Sits one row above the toggle. */
.hero-credit { right: 1rem; bottom: 4.1rem; max-width: min(20rem, 60vw); }

/* ==========================================================================
   marquee
   ========================================================================== */
.marquee {
    background: var(--ink); color: #fff;
    border-block: 1px solid var(--ink-3);
    padding: .85rem 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee ul { display: flex; align-items: center; gap: 2.5rem; list-style: none; padding: 0 1.25rem; margin: 0; }
.marquee li {
    display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap;
    font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.marquee li i { color: var(--gold-lt); font-size: .7em; }

/* ==========================================================================
   cards + grids
   ========================================================================== */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split-wide { grid-template-columns: 1.05fr .95fr; }

.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3vw, 2.15rem);
    box-shadow: var(--shadow);
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--gold); }
/* On dark grounds a translucent panel is legible; on white it is not, so the
   brief's glassmorphism cards are solid-on-light and glass-on-dark only. */
.dark .card, .card-dark {
    background: var(--ink-2);
    border-color: var(--ink-3);
    box-shadow: none;
    color: #E7E4DE;
}
.dark .card:hover, .card-dark:hover { border-color: var(--gold); background: #262A31; }
.card h3 { margin-bottom: .55rem; }
.card p { color: var(--muted); }
.dark .card p, .card-dark p { color: var(--muted-dk); }

.icon-badge {
    width: 46px; height: 46px; border-radius: 12px;
    display: grid; place-items: center; margin-bottom: 1.1rem;
    background: linear-gradient(140deg, var(--gold), #A87C2E);
    color: var(--ink); font-size: 1.15rem;
}
.card-dark .icon-badge, .dark .icon-badge { color: var(--ink); }

/* stat tiles */
.stat {
    display: grid; gap: .2rem;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border-radius: var(--radius);
    background: var(--paper); border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.stat-n { font-family: var(--display); font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); font-weight: 900; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.stat-l { font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stat-note { font-size: .8rem; color: var(--muted); }

/* checklist */
.checklist { list-style: none; padding: 0; display: grid; gap: .6rem; }
.checklist li { display: flex; align-items: flex-start; gap: .7rem; }
.checklist i { color: var(--gold-ink); margin-top: .3rem; font-size: .85rem; flex-shrink: 0; }
.dark .checklist i { color: var(--gold-lt); }

/* amenity list */
.amenities { list-style: none; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(3, 1fr); }
.amenities li {
    display: flex; align-items: flex-start; gap: .85rem;
    padding: 1rem 1.1rem; border-radius: var(--radius);
    background: var(--paper); border: 1px solid var(--line);
    font-size: .95rem; font-weight: 500; color: var(--ink);
    transition: border-color .2s, transform .2s var(--ease);
}
.amenities li:hover { border-color: var(--gold); transform: translateY(-2px); }
.amenities i { color: var(--gold-ink); font-size: 1rem; margin-top: .2rem; flex-shrink: 0; }
.amenities .proof { font-size: .74rem; color: var(--muted); font-weight: 500; display: block; margin-top: .15rem; }

/* ==========================================================================
   unit cards
   ========================================================================== */
.unit-row {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    gap: clamp(1rem, 3vw, 2.25rem);
    padding: clamp(1.25rem, 2.5vw, 1.85rem) clamp(1.35rem, 3vw, 2.15rem);
    background: var(--paper); border: 1px solid var(--line);
    border-left: 4px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color .25s, transform .25s var(--ease), box-shadow .25s var(--ease);
}
.unit-row:hover { border-left-color: var(--gold); transform: translateX(4px); box-shadow: var(--shadow); }
.unit-row .u-name { font-family: var(--display); font-size: 1.5rem; font-weight: 900; color: var(--ink); }
.unit-row .u-sum { color: var(--muted); font-size: .93rem; margin-top: .2rem; }
.unit-row .u-go { color: var(--gold-ink); font-weight: 600; display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.unit-row:hover .u-go i { transform: translateX(3px); }
.unit-row .u-go i { transition: transform .2s var(--ease); }

.pill {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .35rem .8rem; border-radius: 999px;
    font-size: .8rem; font-weight: 700; white-space: nowrap;
    border: 1px solid currentColor;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-green { color: var(--green); background: #EAF6EF; }
.pill-amber { color: var(--amber); background: #FBF2E0; }
.pill-red   { color: var(--red);   background: #FBECEC; }
.on-dark .pill-green, .dark .pill-green { color: var(--green-dk); background: rgba(111,211,155,.12); }
.on-dark .pill-amber, .dark .pill-amber { color: var(--amber-dk); background: rgba(240,196,106,.12); }
.on-dark .pill-red,   .dark .pill-red   { color: var(--red-dk);   background: rgba(240,154,154,.12); }
.hero .pill { border-color: rgba(255,255,255,.4); backdrop-filter: blur(8px); }

/* ==========================================================================
   gallery
   ========================================================================== */
/* Multi-column masonry: the source set mixes 4:3 landscape and 3:4 portrait,
   and the brief's fixed `aspect-ratio: 4/3` + `object-fit: cover` crops the
   portrait frames -- the spa shower, the patio doors, the appliances -- to
   about 44% of their height. Columns preserve every frame intact. */
.gallery { columns: 3; column-gap: var(--gap); }
.gallery figure { break-inside: avoid; margin: 0 0 var(--gap); }
.gallery button {
    display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
    background: none; border-radius: var(--radius); overflow: hidden;
    position: relative; line-height: 0;
}
.gallery img { width: 100%; height: auto; transition: transform .5s var(--ease); }
.gallery button::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(22,24,28,.78) 0%, rgba(22,24,28,0) 46%);
    opacity: 0; transition: opacity .28s;
}
.gallery button:hover img, .gallery button:focus-visible img { transform: scale(1.045); }
.gallery button:hover::after, .gallery button:focus-visible::after { opacity: 1; }
.gallery figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 1rem 1.1rem; color: #fff; font-weight: 600; font-size: .9rem;
    text-align: left; line-height: 1.35;
    opacity: 0; transform: translateY(6px);
    transition: opacity .28s, transform .28s var(--ease);
}
.gallery button:hover figcaption, .gallery button:focus-visible figcaption { opacity: 1; transform: translateY(0); }

/* Decorative card imagery (campus, styling inspiration): normalised to a
   single aspect ratio so the rows align. Cropping is acceptable here because
   these frames are illustrative -- unlike the unit gallery above, where every
   photograph is evidence and is shown whole. */
.media-card { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; }
.dark .media-card { background: var(--ink-2); border-color: var(--ink-3); }
.media-card picture { display: block; }
.media-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.media-card figcaption { padding: .85rem 1rem; font-size: .87rem; color: var(--muted); }
.dark .media-card figcaption { color: var(--muted-dk); }
.media-card .note { display: block; font-size: .73rem; margin-top: .15rem; opacity: .85; }

/* lightbox */
.lightbox {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(12,13,15,.95);
    display: grid; grid-template-rows: auto 1fr auto;
    padding: 1rem;
    opacity: 0; visibility: hidden;
    /* visibility flips instantly when opening (0s delay) and only after the
       fade when closing. Transitioning visibility over the full duration
       leaves the dialog computed-hidden on the frame it opens, which makes
       the close button unfocusable and strands keyboard users on <body>. */
    transition: opacity .28s var(--ease), visibility 0s linear .28s;
}
.lightbox[data-open="true"] {
    opacity: 1; visibility: visible;
    transition: opacity .28s var(--ease), visibility 0s linear 0s;
}
.lightbox-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: #E7E4DE; }
.lightbox-count { font-size: .85rem; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.lightbox-stage { display: grid; place-items: center; min-height: 0; position: relative; }
.lightbox-stage img {
    max-width: min(1200px, 100%); max-height: 100%;
    width: auto; height: auto; object-fit: contain;
    border-radius: 10px;
    transition: opacity .22s;
}
.lightbox-stage img.swapping { opacity: 0; }
.lightbox-cap { text-align: center; color: #E7E4DE; padding: .9rem 1rem .4rem; font-size: .95rem; font-weight: 500; }
.lb-btn {
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
    color: #fff; cursor: pointer; display: grid; place-items: center;
    transition: background .2s, transform .2s var(--ease);
}
.lb-btn:hover { background: rgba(255,255,255,.2); transform: scale(1.06); }
.lb-prev, .lb-next { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; }
.lb-prev { left: .25rem; } .lb-next { right: .25rem; }

/* ==========================================================================
   timeline
   ========================================================================== */
.timeline { list-style: none; padding: 0; display: grid; gap: 0; counter-reset: step; }
.timeline li { display: grid; grid-template-columns: 56px 1fr; gap: 1.35rem; padding-bottom: 2.25rem; position: relative; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
    counter-increment: step; content: counter(step);
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--gold); color: var(--ink);
    font-weight: 800; font-family: var(--display); font-size: 1.15rem;
    z-index: 1;
}
.timeline li:not(:last-child)::after {
    content: ""; position: absolute; left: 23px; top: 46px; bottom: 6px;
    width: 2px; background: var(--ink-3);
    transform-origin: top; transform: scaleY(0);
    transition: transform .7s var(--ease) .15s;
}
.timeline li.in::after { transform: scaleY(1); }
.timeline h3 { color: #fff; margin-bottom: .3rem; }
.timeline p { color: var(--muted-dk); }

/* ==========================================================================
   forms
   ========================================================================== */
.field { display: grid; gap: .4rem; margin-bottom: 1.15rem; }
.field label { font-size: .87rem; font-weight: 600; color: var(--ink); }
.field .req { color: var(--red); }
.field input, .field select, .field textarea {
    width: 100%; padding: .8rem .95rem;
    border: 1.5px solid var(--line); border-radius: 10px;
    background: var(--paper); color: var(--ink);
    transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(192,144,60,.22);
}
.field .hint { font-size: .8rem; color: var(--muted); }
.field .err { font-size: .82rem; color: var(--red); font-weight: 600; display: none; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--red); }
.field[data-invalid="true"] .err { display: block; }
/* honeypot -- off-screen rather than display:none so bots that check
   computed style still fill it in */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.alert {
    display: flex; gap: .8rem; align-items: flex-start;
    padding: 1rem 1.2rem; border-radius: var(--radius);
    border: 1px solid; margin-bottom: 1.75rem; font-weight: 500;
}
.alert i { margin-top: .2rem; }
.alert-success { color: var(--green); background: #EAF6EF; border-color: #B9E0CB; }
.alert-error   { color: var(--red);   background: #FBECEC; border-color: #EFC9C9; }

/* ==========================================================================
   contact / info cards
   ========================================================================== */
.info-card { display: flex; gap: 1rem; padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.info-card .icon-badge { margin-bottom: 0; width: 42px; height: 42px; flex-shrink: 0; }
.info-card h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.info-card p, .info-card a { color: var(--muted); font-size: .93rem; }
.info-card a { color: var(--gold-ink); font-weight: 600; text-decoration: none; }
.info-card a:hover { text-decoration: underline; }
.contact-big {
    display: flex; flex-wrap: wrap; gap: 1rem;
    padding: 1.35rem 1.5rem; border-radius: var(--radius);
    background: var(--ink); color: #fff; align-items: center; justify-content: space-between;
}
.contact-big .cb-n { font-family: var(--display); font-size: clamp(1.5rem,1.1rem+1.6vw,2.1rem); font-weight: 900; color: #fff; text-decoration: none; display: block; }
.contact-big .cb-n:hover { color: var(--gold-lt); }
.contact-big .cb-l { font-size: .76rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted-dk); font-weight: 700; }

.map-embed { border: 0; width: 100%; height: 420px; border-radius: var(--radius-lg); display: block; filter: saturate(.92); }

/* ==========================================================================
   footer
   ========================================================================== */
.footer { background: #101216; color: #C9C5BD; padding: clamp(3rem,6vw,4.5rem) 0 0; }
.footer::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin-bottom: clamp(3rem,6vw,4.5rem); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.3fr; gap: clamp(2rem,5vw,3.5rem); }
.footer h4 { color: #fff; font-family: var(--sans); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.15rem; font-weight: 700; }
.footer ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.footer a { color: #C9C5BD; text-decoration: none; }
.footer a:hover { color: var(--gold-lt); text-decoration: underline; }
.footer .f-brand img { height: 58px; width: auto; margin-bottom: 1rem; }
.footer .f-tag { font-style: italic; color: #A9A49B; max-width: 30ch; }
.footer .f-line { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .8rem; font-size: .93rem; }
.footer .f-line i { color: var(--gold); margin-top: .25rem; width: 1rem; text-align: center; flex-shrink: 0; }
.footer-bottom {
    margin-top: clamp(2.5rem,5vw,3.5rem); padding: 1.5rem 0;
    border-top: 1px solid #23262B;
    display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
    font-size: .84rem; color: #8E8A82;
}
.eho { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: #A9A49B; margin-top: 1.25rem; }
.eho svg { flex-shrink: 0; }

/* ==========================================================================
   scroll animation + motion preferences
   ========================================================================== */
/* Guarded by .js on <html>: with JavaScript unavailable the initial hidden
   state never applies, so content is visible rather than permanently
   opacity:0 -- which is what the brief's rule would have produced. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.js .reveal.slide-l { transform: translateX(-34px); }
.js .reveal.slide-r { transform: translateX(34px); }
.js .reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .07s } .d2 { transition-delay: .14s } .d3 { transition-delay: .21s }
.d4 { transition-delay: .28s } .d5 { transition-delay: .35s } .d6 { transition-delay: .42s }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/*  The brief put `animation: pulseGlow 2s infinite` on every primary button
    and defined no reduced-motion behaviour anywhere. Perpetual motion in the
    periphery is an accessibility problem, so there is no idle pulse, and all
    motion stops for anyone who has asked their OS to reduce it.  */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .js .reveal { opacity: 1 !important; transform: none !important; }
    .marquee-track { animation: none; }
    .scroll-cue { animation: none; }
    .timeline li::after { transform: scaleY(1) !important; }
    /* The video is never auto-started under reduced motion (main.js checks
       the same query), but if the visitor opts in via the toggle it should
       appear without an extra fade on top of the motion they just allowed. */
    .hero-video { transition: none; }
}

@media print {
    .nav, .topbar, .mobile-menu, .marquee, .scroll-cue, .lightbox, .hero-actions { display: none !important; }
    .hero { min-height: auto; color: var(--ink); }
    .hero::after { display: none; }
    body { color: #000; }
}