/* =====================================================================
   NINK LIGHTING - app.css
   Visual foundation, DESIGN-SYSTEM.md v2. Navy (deep, cold-blue near-
   black) is the primary dark family; Brass remains the sole warm accent,
   reading as light against a cooler field. Paper stays the light family.
   ===================================================================== */

/* ---- 1. Design tokens ---- */
:root {
    /* Navy family (DESIGN-SYSTEM.md §1.1) - primary dark, cold-blue undertone */
    --navy:   #05070D;
    --navy-2: #0A101E;
    --navy-3: #101A2E;

    /* Brass accent (unchanged - DESIGN-SYSTEM.md §1.1) */
    --brass:        #C99A46;
    --brass-bright: #E7BE6A;
    --brass-deep:   #8A6329; /* darkened from #A67C34 - the lighter value read at ~3.6:1 on Paper, failing WCAG AA (4.5:1) for the small eyebrow/label/price text that uses it; this value holds the same brass hue at ~5:1 */

    /* Light reading surfaces (unchanged) */
    --paper:   #FBF8F2;
    --paper-2: #F1EADD;

    /* Text */
    --text:            #1B1710;
    --text-muted:      #6E6555;
    --text-invert:     #F4EEE2;
    --text-invert-mut: #B9AE97;

    /* Lines */
    --line:      #E4DBC9;
    --line-dark: rgba(231, 190, 106, 0.16);

    /* Supporting tokens (DESIGN-SYSTEM.md §1.2) - gaps for tactile UI */
    --glass-panel:  rgba(5, 7, 13, 0.7);
    --glass-border: rgba(231, 190, 106, 0.18);
    --track-recess: inset 0 2px 4px rgba(0, 0, 0, 0.35);
    --glow-brass:   rgba(231, 190, 106, 0.5);
    --success-light:     #7FA66B;
    --attention-light:   #C97B46;
    --unavailable-light: #8A8275;

    /* Type families (DESIGN-SYSTEM.md §2.1) */
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body:    "Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

    /* Type ramp (DESIGN-SYSTEM.md §2.2) - sizes only; each level's weight/
       line-height/family lives on its utility class in §1c below. */
    --fs-display-xl: clamp(2.75rem, 2vw + 2.25rem, 6rem);     /* ~44px → 96px */
    --fs-display-l:  clamp(2.1rem, 1.6vw + 1.7rem, 3.5rem);   /* ~34px → 56px */
    --fs-display-m:  clamp(1.75rem, 1.2vw + 1.4rem, 2.5rem);  /* ~28px → 40px */
    --fs-heading:    clamp(1.25rem, 0.4vw + 1.15rem, 1.5rem); /* 20px → 24px */
    --fs-body:       1rem;      /* 16px */
    --fs-body-lg:    1.125rem;  /* 18px, desktop-only long-form variant */
    --fs-meta:       0.8125rem; /* ~13px */
    --fs-interface:  0.9375rem; /* ~15px */

    /* Spacing scale (DESIGN-SYSTEM.md §3.2) - 8px base unit */
    --sp-4:   0.25rem;
    --sp-8:   0.5rem;
    --sp-12:  0.75rem;
    --sp-16:  1rem;
    --sp-24:  1.5rem;
    --sp-32:  2rem;
    --sp-48:  3rem;
    --sp-64:  4rem;
    --sp-96:  6rem;
    --sp-128: 8rem;
    --sp-192: 12rem;

    /* Legacy spacing aliases (kept so existing layouts don't shift until
       each page is rebuilt) - all now resolve onto the §3.2 scale above.
       Only --space-4 nudges (40px → 48px) to land back on-scale. */
    --space-1: var(--sp-8);
    --space-2: var(--sp-16);
    --space-3: var(--sp-24);
    --space-4: var(--sp-48);
    --space-5: var(--sp-64);
    --space-6: var(--sp-96);
    --space-7: var(--sp-128);

    --radius:    14px;
    --radius-sm: 9px;
    --radius-lg: 26px;
    --maxw:      1140px;
    --maxw-wide: 1320px;

    --shadow: 0 18px 50px -24px rgba(5, 7, 13, 0.55);

    /* Tactile Layer - neumorphic surface tokens (DESIGN-SYSTEM.md §4.1).
       Genuine dual shadow-based neumorphism (the spec's preferred method
       where box-shadow is available, over the border-approximation
       fallback) - one raised/pressed pair per surface family (Paper-based
       light Tactile surfaces, Navy-based dark ones). */
    --neu-base:      var(--paper-2);
    --neu-base-dark: var(--navy-2);
    --neu-raised:        6px 6px 14px rgba(5, 7, 13, 0.10), -6px -6px 14px rgba(255, 255, 255, 0.65);
    --neu-raised-dark:   6px 6px 14px rgba(0, 0, 0, 0.4), -6px -6px 14px rgba(255, 255, 255, 0.03);
    --neu-pressed:       inset 3px 3px 8px rgba(5, 7, 13, 0.14), inset -3px -3px 8px rgba(255, 255, 255, 0.55);
    --neu-pressed-dark:  inset 3px 3px 8px rgba(0, 0, 0, 0.45), inset -3px -3px 8px rgba(255, 255, 255, 0.02);

    /* Kept as aliases - nothing referenced these yet, but avoid a second
       naming scheme for the same technique. */
    --shadow-tactile-out: var(--neu-raised);
    --shadow-tactile-in:  var(--neu-pressed);
    --shadow-tactile-out-dark: var(--neu-raised-dark);
    --shadow-tactile-in-dark:  var(--neu-pressed-dark);

    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---- 1b. Icons ---- */
.icon { width: 1.2em; height: 1.2em; flex: none; }
.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.6em; height: 1.6em; }

/* ---- 2. Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Backstop, not a fix in itself - any element that genuinely
       overflows should still be found and corrected at the source. */
    overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }

a { color: inherit; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-2);
}

p { margin: 0 0 var(--space-2); }

.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--navy);
    color: var(--text-invert);
    padding: 0.6rem 1rem;
    z-index: 100;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; border-radius: 6px; }

:focus-visible {
    outline: 2px solid var(--brass-deep);
    outline-offset: 2px;
}

/* ---- 3. Brand mark ---- */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: -0.01em;
    color: var(--text);
}
.brand__mark {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--brass-bright), var(--brass-deep) 70%);
    box-shadow: 0 0 0 4px rgba(201, 154, 70, 0.15), 0 0 14px 2px rgba(231, 190, 106, 0.4);
    flex: none;
}
.brand__word { font-weight: 600; }
.brand__word-thin { font-weight: 400; color: var(--text-muted); }
/* .brand--footer sits on the dark navy footer, where --text-muted (tuned
   for Paper backgrounds) fails contrast - use the footer's own light-on-dark
   muted token instead. */
.brand--footer .brand__word-thin { color: var(--text-invert-mut); }
/* Admin-uploaded full logo image (site_logo()) - replaces the mark+word
   pair entirely when set, same slot, same baseline. */
.brand__logo-img { display: block; height: 28px; width: auto; }

/* ---- 4. Header / nav (DESIGN-SYSTEM.md §7) ---- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 70;
    border-bottom: 1px solid var(--line);
    isolation: isolate;
}
/* The blur lives on a pseudo-element, not .site-header itself, because
   backdrop-filter on an ancestor creates a new containing block for
   position:fixed descendants - which broke the full-screen menu overlay
   (it was sizing to the header's box instead of the viewport). */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: saturate(1.2) blur(8px);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 70px;
}

/* Float-then-solidify - hero pages only (header.php's $heroFloat flag).
   Starts fully transparent over the hero photo/video; a scroll listener
   (app.js) adds .is-solid once the user scrolls past the hero. */
.site-header--float {
    position: fixed; top: 0; left: 0; right: 0;
    background: transparent; border-bottom-color: transparent;
    transition: background 250ms var(--ease), border-color 250ms ease;
}
.site-header--float::before { content: none; }
.site-header--float .brand,
.site-header--float .brand__word-thin,
.site-header--float .menu-toggle { color: var(--text-invert); }
.site-header--float .brand__word-thin { opacity: 0.7; }
.site-header--float.is-solid { background: var(--navy); border-bottom-color: var(--glass-border); }

/* Nav bar cluster - glow pill + three-stroke icon read as one grouped
   control on the right side of the header (Fix 2). Gap kept tight on
   purpose so the two feel adjacent, not like separate nav rows. */
.nav-bar { display: flex; align-items: center; gap: 10px; }

/* Floating glow nav pill - a fixed dark surface regardless of float/
   solid header state, so it never needs its own float-mode colour flip. */
.glow-pill {
    position: relative; isolation: isolate;
    display: flex; align-items: center; gap: 2px;
    background: var(--navy-2); border-radius: 9999px; padding: 4px;
}
/* Ambient backlight the pill quietly gives off, not a spotlight onto the
   page below it - centered on the pill in both axes, sized close to the
   pill's own footprint (inset expands evenly on all four sides, so it
   scales with whatever the pill's actual rendered size is), and behind
   the pill's own surface in stacking order. */
.glow-pill__glow {
    position: absolute; z-index: -1;
    inset: -16px;
    border-radius: inherit;
    background: radial-gradient(ellipse at center, rgba(231, 190, 106, 0.2), transparent 70%);
    pointer-events: none;
}
.glow-pill__item {
    display: flex; align-items: center; gap: 7px;
    padding: 10px 14px; border-radius: 9999px;
    text-decoration: none; color: #8892A3;
    font-family: var(--font-body); font-weight: 500; font-size: var(--fs-interface);
    white-space: nowrap;
    transition: background 150ms ease, color 150ms ease;
}
.glow-pill__item .icon { width: 1rem; height: 1rem; color: #8892A3; flex: none; transition: color 150ms ease; }
.glow-pill__item:not(.is-active):hover { color: var(--paper); }
.glow-pill__item:not(.is-active):hover .icon { color: var(--paper); }
.glow-pill__item.is-active { background: #111E24; }
.glow-pill__item.is-active .icon { color: var(--brass-bright); }
.glow-pill__item.is-active span { color: var(--paper); font-weight: 600; }

/* Below phone width, the header is logo-only (§7 "v4, corrected: quick-
   access bottom bar") - the quick-nav pill moves out entirely, replaced
   by .bottom-nav below (fixed to the viewport bottom, not fighting the
   logo for header width). .menu-toggle gets the same treatment further
   down, right after its own definition - it must come after that rule
   in source order or the later rule wins the cascade and silently
   un-hides it regardless of this media query. */
@media (max-width: 640px) {
    .glow-pill { display: none; }
}

@media (max-width: 420px) {
    .brand { font-size: 1.05rem; }
}

/* Fixed bottom nav (mobile only, §7 "v4, corrected: quick-access bottom
   bar") - hidden entirely above 640px, where the desktop glow pill +
   header menu icon (both restored above 640px by the media query above)
   remain the primary nav. */
.bottom-nav {
    display: none;
}
@media (max-width: 640px) {
    .bottom-nav {
        display: flex; align-items: stretch; justify-content: space-around;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        background: var(--navy-2); border-top: 1px solid var(--glass-border);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }
    /* Bottom-nav height varies with env(safe-area-inset-bottom), so this
       can't be a fixed px value - measured live via JS instead (see
       app.js) and written to this custom property, same technique
       .qe-popup's 100dvh fix relies on for "the real visible viewport"
       being unknowable from CSS alone on iOS Safari. */
    body { padding-bottom: var(--bottom-nav-height, 64px); }
}
.bottom-nav__item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; flex: 1; min-width: 0; padding: 4px 2px;
    text-decoration: none; background: none; border: none; cursor: pointer;
    color: #8892A3; font-family: var(--font-body); font-weight: 500; font-size: 0.68rem;
    letter-spacing: 0.01em;
}
.bottom-nav__item .icon { width: 1.3rem; height: 1.3rem; color: #5c6577; }
.bottom-nav__item.is-active { color: var(--paper); }
.bottom-nav__item.is-active .icon { color: var(--brass-bright); }
.bottom-nav__menu-bars {
    display: flex; flex-direction: column; align-items: stretch; justify-content: center;
    gap: 4px; width: 1.3rem; height: 1.3rem;
}
.bottom-nav__menu-bars span { display: block; width: 100%; height: 1.5px; background: #5c6577; border-radius: 1px; }
.bottom-nav__item--menu.is-active .bottom-nav__menu-bars span { background: var(--brass-bright); }

/* Three-stroke menu icon - the single menu affordance, desktop and
   mobile, dark and light surfaces (§7). Never morphs into an ×; the
   full-screen overlay it opens carries its own close control. */
.menu-toggle {
    display: inline-flex; flex-direction: column; align-items: stretch; justify-content: center;
    gap: 5px; width: 28px; height: 24px; padding: 0; border: none; background: none;
    color: var(--text); cursor: pointer;
    transition: color 120ms ease-out;
}
.menu-toggle:hover { color: var(--brass-bright); }
.menu-toggle__bar { display: block; width: 100%; height: 1.5px; background: currentColor; border-radius: 1px; }
@media (max-width: 640px) {
    .menu-toggle { display: none; }
}

/* Nav drawer - right-anchored, ~50% width, dark neumorphic surface only
   (DESIGN-SYSTEM.md §7, corrected). Never covers the full screen - the
   remaining page stays visible behind a dimmed scrim, not a takeover. */
.nav-drawer-scrim {
    position: fixed; inset: 0; z-index: 79;
    background: rgba(2, 3, 7, 0.5);
    opacity: 0; visibility: hidden;
    transition: opacity 220ms ease;
}
.nav-drawer-scrim.is-open { opacity: 1; visibility: visible; }

.nav-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
    width: 50%; min-width: 320px; max-width: 720px;
    background: var(--navy-2); color: var(--text-invert);
    display: flex; flex-direction: column;
    padding: var(--sp-24) var(--sp-24) var(--sp-32);
    box-shadow: -24px 0 60px -24px rgba(0, 0, 0, 0.6);
    transform: translateX(100%);
    transition: transform 280ms var(--ease);
    overflow-y: auto;
}
.nav-drawer.is-open { transform: translateX(0); }

.nav-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-32); }
.nav-drawer__logo { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-invert); }
.nav-drawer__logo-img { display: block; height: 24px; width: auto; }
.nav-drawer__close {
    width: 40px; height: 40px; border-radius: var(--radius-sm);
    background: none; border: none; color: var(--text-invert-mut); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.nav-drawer__close:hover { color: var(--text-invert); background: var(--navy-3); }

.nav-drawer__links { display: flex; flex-direction: column; gap: 4px; }
.nav-drawer__item {
    display: flex; align-items: center; gap: var(--sp-16);
    width: 100%; padding: 11px var(--sp-16); border-radius: 14px;
    text-decoration: none; color: #8892A3;
    transition: color 150ms ease;
}
.nav-drawer__item:hover { color: #B7BECB; }
.nav-drawer__item .icon { color: #5C6577; width: 1.15rem; height: 1.15rem; flex: none; transition: color 150ms ease; }
.nav-drawer__item:hover .icon { color: #7A8494; }
.nav-drawer__item span { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-interface); }

/* Only the active item gets the raised pill - dark-variant neumorphism,
   dual highlight (top-left) / shadow (bottom-right), per §4.1. */
.nav-drawer__item.is-active {
    background: #111E24;
    box-shadow: var(--neu-raised-dark);
}
.nav-drawer__item.is-active:hover { color: #8892A3; }
.nav-drawer__item.is-active .icon { color: var(--brass-bright); }
.nav-drawer__item.is-active span { color: var(--paper); font-weight: 600; }

.nav-drawer__cta { margin-top: var(--sp-24); justify-content: center; }
body:has(.nav-drawer.is-open) { overflow: hidden; }

@media (max-width: 640px) {
    .nav-drawer { width: 78%; min-width: 0; }
}

/* ---- 5. Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.98rem;
    padding: 0.8rem 1.4rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn--brass {
    background: var(--brass);
    color: var(--navy);
    box-shadow: 0 10px 30px -12px rgba(201, 154, 70, 0.7);
}
.btn--brass:hover { background: var(--brass-bright); transform: translateY(-2px); }
.btn--ghost {
    background: transparent;
    color: var(--text-invert);
    border-color: var(--line-dark);
}
.btn--ghost:hover { border-color: var(--brass); color: var(--brass-bright); }
.btn--dark {
    background: var(--navy);
    color: var(--text-invert);
}
.btn--dark:hover { background: var(--navy-3); transform: translateY(-2px); }
.btn--outline {
    background: transparent;
    color: var(--text);
    border-color: var(--line);
}
.btn--outline:hover { border-color: var(--brass); color: var(--brass-deep); }
.btn--sm { padding: 0.55rem 0.95rem; font-size: 0.9rem; }

/* ---- 6. Home hero - Dwell-exact (VISUAL-DIRECTION.md §2 v4) ----
   Full-bleed; logo/nav are the global floating header (§4), not part of
   this markup. Navy/SVG-bloom is the fallback when no admin image has
   been uploaded (DESIGN-SYSTEM.md §13A). ---- */
.dwell-hero__media {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 86vh;
    background: var(--navy);
    color: var(--text-invert);
}
.dwell-hero__media--fallback::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(ellipse 60% 55% at 28% 42%, rgba(231, 190, 106, 0.22), transparent 68%);
}
.dwell-hero__bg {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover;
}
.dwell-hero__inner {
    position: relative; z-index: 1;
    max-width: var(--maxw-wide);
    margin-inline: auto;
    min-height: 86vh;
    padding: 140px 40px 120px;
    display: flex; flex-direction: column; justify-content: center;
}
.dwell-hero__step {
    position: absolute; top: 140px; left: 40px;
    display: flex; align-items: center; gap: var(--sp-12);
    font-family: var(--font-body); font-weight: 500; font-size: var(--fs-meta);
    letter-spacing: 0.1em; color: var(--text-invert-mut);
}
.dwell-hero__step-line { width: 56px; height: 1px; background: var(--text-invert-mut); }
/* Fix 3 - nudged down from the container's true centre (top padding above
   is taller than bottom, to clear the floating nav) so the block doesn't
   read as crowded against the top of the hero. */
/* display:flex + gap here is deliberate, not cosmetic: the shared
   .display-xl utility class carries `margin: 0` (a correct reset for its
   other uses) and, because it's declared later in the file, silently
   cancelled a margin-bottom set here previously - computed gap measured
   0px despite the rule existing. Flex `gap` can't be zeroed out by an
   unrelated class on a child the same way, so it's the robust fix, not
   just a different way to write the same thing. */
.dwell-hero__content {
    max-width: 620px; margin-top: var(--sp-32);
    display: flex; flex-direction: column; gap: 2rem;
}
.dwell-hero__headline { color: var(--text-invert); margin: 0; }
.dwell-hero__actions { display: flex; align-items: center; gap: var(--sp-24); flex-wrap: wrap; }
.dwell-hero__explore { color: var(--text-invert); }

.dwell-hero__play-wrap {
    position: absolute; top: 50%; right: 8%; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-12);
    z-index: 1;
}
.dwell-hero__play {
    width: 80px; height: 80px; border-radius: 50%; cursor: pointer;
    background: var(--glass-panel); border: 1px solid var(--glass-border); backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center; color: var(--paper);
    transition: transform 150ms var(--ease);
}
.dwell-hero__play:hover { transform: scale(1.05); }
.dwell-hero__play-icon { width: 1.6rem; height: 1.6rem; }
.dwell-hero__play-caption {
    font-family: var(--font-body); font-weight: 500; font-size: var(--fs-meta);
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-invert-mut);
}
.dwell-hero__video {
    position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover;
    display: none; /* static image is the permanent default state */
}
.dwell-hero__video.is-playing { display: block; }

.dwell-hero__rail {
    position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
    writing-mode: vertical-rl;
    display: flex; align-items: center; gap: var(--sp-16);
    font-family: var(--font-body); font-weight: 500; font-size: var(--fs-meta);
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-invert-mut);
    z-index: 1;
}
.dwell-hero__rail a { color: inherit; text-decoration: none; }
.dwell-hero__rail a:hover { color: var(--brass-bright); }
.dwell-hero__rail-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; flex: none; }

.dwell-hero__strip {
    background: var(--paper); color: var(--text);
    display: flex; align-items: stretch;
}
.dwell-hero__teaser {
    flex: 1; display: flex; flex-direction: column; gap: 0.35rem; justify-content: center;
    padding: var(--sp-32); text-decoration: none; color: inherit;
}
.dwell-hero__teaser-label { color: var(--text-muted); margin: 0; }
.dwell-hero__teaser-link { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-interface); }
.dwell-hero__teaser:hover .dwell-hero__teaser-link { color: var(--brass-deep); }
.dwell-hero__divider { width: 1px; background: var(--line); }
.dwell-hero__arrows { display: flex; align-items: center; padding-inline: var(--sp-32); color: var(--text-muted); }

@media (max-width: 900px) {
    .dwell-hero__rail { display: none; }
    .dwell-hero__play-wrap { right: 6%; }
    .dwell-hero__play { width: 60px; height: 60px; }
    .dwell-hero__play-icon { width: 1.2rem; height: 1.2rem; }
}
@media (max-width: 640px) {
    .dwell-hero__media { min-height: 78vh; }
    .dwell-hero__inner { min-height: 78vh; padding: 110px 20px 90px; }
    .dwell-hero__content { margin-top: var(--sp-16); }
    .dwell-hero__step { top: 110px; left: 20px; }
    .dwell-hero__play-wrap { top: auto; bottom: 32px; right: 20px; transform: none; }
    .dwell-hero__strip { flex-direction: column; }
    .dwell-hero__divider { width: auto; height: 1px; }
    .dwell-hero__arrows { display: none; }
}

/* ---- 6b. Brand statement (About/Brand Intro) ---- */
.brand-statement { max-width: 900px; }
.brand-statement__lead { color: var(--text-muted); margin-top: var(--sp-24); max-width: 56ch; }

/* ---- 6c. Room link list ("Light Every Room") ---- */
.room-link-list { list-style: none; padding: 0; margin: var(--sp-24) 0 0; display: flex; flex-direction: column; gap: 0.65rem; }
.room-link-list .btn-t3 { color: var(--text); font-size: var(--fs-heading); font-family: var(--font-display); font-weight: 400; }

/* ---- 6d. Horizontal borderless carousel (fixture-type row) ---- */
.carousel {
    display: flex; gap: var(--sp-24); overflow-x: auto; padding-bottom: var(--sp-8);
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    /* Without this, iOS Safari lets a swipe that reaches this strip's
       edge "chain" into scrolling the page itself sideways instead of
       stopping - the actual cause of the header appearing to drag
       along, not a real document-width overflow. */
    overscroll-behavior-x: contain;
}
.carousel__item { flex: 0 0 auto; width: 180px; scroll-snap-align: start; text-decoration: none; color: inherit; }
.carousel__item .scene { margin-bottom: var(--sp-12); transition: transform 200ms var(--ease); }
.carousel__item:hover .scene { transform: translateY(-3px); }
.carousel__item:hover .carousel__label { color: var(--brass-deep); }
.carousel__label { display: block; color: var(--text); transition: color 150ms ease-out; }

/* ---- 6e. Featured Lighting Experience - dark quote-CTA band ---- */
.quote-band__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-32); }
.quote-band__quote { max-width: 20ch; color: var(--text-invert); font-style: italic; margin: 0; }

/* ---- 6f. Projects preview - dark asymmetric teaser grid ---- */
.project-teaser-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--space-3); }
.project-teaser-grid .project-teaser--lg { grid-row: span 1; }
.project-teaser { text-decoration: none; color: var(--text-invert); display: flex; flex-direction: column; gap: var(--sp-12); }
.project-teaser .scene { aspect-ratio: 4/3; }
.project-teaser--lg .scene { aspect-ratio: 16/11; }
.project-teaser__title { font-family: var(--font-display); font-size: var(--fs-heading); }
.project-teaser:hover .project-teaser__title { color: var(--brass-bright); }
@media (max-width: 900px) { .project-teaser-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .project-teaser-grid { grid-template-columns: 1fr; } }

/* ---- 6g. Stat row / callout (§6.3 - max once per page) ---- */
.stat-row { display: flex; align-items: center; gap: var(--sp-64); flex-wrap: wrap; }
.stat-callout { display: flex; flex-direction: column; gap: 0.3rem; flex: none; }
.stat-callout__number { color: var(--brass-deep); }
.stat-callout__label { color: var(--text-muted); }
.stat-row__note { color: var(--text-muted); }
@media (max-width: 640px) { .stat-row { gap: var(--sp-24); } }

/* ---- 7. Generic section ---- */
.section { padding-block: clamp(3.5rem, 8vw, var(--space-6)); }
.section--paper2 { background: var(--paper-2); }
.section--dusk {
    background: var(--navy-2);
    color: var(--text-invert);
}
.section__head {
    max-width: 640px;
    margin-bottom: var(--space-4);
}
.section__eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass-deep);
    font-weight: 600;
    margin-bottom: var(--space-1);
}
.section--dusk .section__eyebrow { color: var(--brass-bright); }
.section__title { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.section__intro { color: var(--text-muted); font-size: 1.08rem; }
.section--dusk .section__intro { color: var(--text-invert-mut); }

/* ---- 8. Steps (a real ordered process, so numbering earns its place) ---- */
.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    counter-reset: step;
}
.step {
    background: var(--navy-3);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
    padding: var(--space-3);
}
.step__num {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--brass-bright);
    display: block;
    margin-bottom: var(--space-1);
}
.step__title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
    color: var(--text-invert);
}
.step__body { color: var(--text-invert-mut); font-size: 0.96rem; margin: 0; }

/* ---- 9. Feature cards ---- */
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}
.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-3);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.08rem;
    margin-bottom: 0.4rem;
}
.card__body { color: var(--text-muted); font-size: 0.98rem; margin: 0; }

/* ---- 10. Audience chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--text);
}

/* ---- 11. Callout band ---- */
.callout {
    background: var(--navy);
    color: var(--text-invert);
    border-radius: var(--radius);
    padding: clamp(2rem, 5vw, var(--space-5));
    text-align: center;
}
.callout__title { font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--text-invert); }
.callout__lead { color: var(--text-invert-mut); max-width: 560px; margin-inline: auto; margin-bottom: var(--space-3); }

/* ---- 12. Simple prose page ---- */
.page-head {
    background: var(--navy);
    color: var(--text-invert);
    padding-block: clamp(3rem, 8vw, 5rem);
}
.page-head__title { font-size: clamp(2rem, 5vw, 3rem); color: var(--text-invert); }
.page-head__lead { color: var(--text-invert-mut); max-width: 620px; }
.prose { max-width: 680px; }
.prose h2 { font-size: 1.5rem; margin-top: var(--space-4); }
.prose p { color: var(--text-muted); }
.prose ul { color: var(--text-muted); padding-left: 1.2rem; }
.prose li { margin-bottom: 0.4rem; }

/* ---- 13. Contact cards ---- */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.contact-card {
    display: block;
    text-decoration: none;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-3);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.contact-card:hover { border-color: var(--brass); transform: translateY(-2px); }
.contact-card__label { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-deep); font-weight: 600; }
.contact-card__value { font-family: var(--font-display); font-size: 1.25rem; margin-top: 0.3rem; }

/* ---- 14. Health / status ---- */
.status-list { list-style: none; padding: 0; max-width: 480px; }
.status-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 0.6rem;
    background: var(--paper);
}
.badge { font-weight: 700; font-size: 0.85rem; padding: 0.25rem 0.7rem; border-radius: 999px; }
.badge--ok   { background: #E7F3E4; color: #2C6B2C; }
.badge--fail { background: #F6E2DE; color: #9A3527; }

/* ---- 15. Admin (login + placeholder dashboard) ---- */
.auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--navy);
    color: var(--text-invert);
    padding: 1.25rem;
}
.auth__card {
    width: 100%;
    max-width: 400px;
    background: var(--navy-2);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
    padding: var(--space-4);
}
.auth__brand { justify-content: center; margin-bottom: var(--space-3); color: var(--text-invert); }
.auth__title { text-align: center; font-size: 1.5rem; color: var(--text-invert); }
.field { margin-bottom: var(--space-2); }
.field label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--text-invert-mut); }
.field input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-dark);
    background: var(--navy-3);
    color: var(--text-invert);
    font: inherit;
}
.field input:focus-visible { outline-color: var(--brass); border-color: var(--brass); }
.auth__error {
    background: rgba(154, 53, 39, 0.22);
    border: 1px solid rgba(246, 226, 222, 0.25);
    color: #F3D8D2;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    margin-bottom: var(--space-2);
}
.btn--block { width: 100%; justify-content: center; }

.admin-shell { min-height: 70vh; }
.admin-note {
    background: var(--paper-2);
    border: 1px dashed var(--brass);
    border-radius: var(--radius);
    padding: var(--space-3);
    color: var(--text-muted);
}

/* =====================================================================
   ---- 16. Global footer (DESIGN-SYSTEM.md §19-20) ----
   Full site-wide replacement, used identically on every page. Bands
   alternate Navy 2 (SEO block, Book-a-Meeting band) and near-black Navy
   (link grid, bottom bar) for subtle internal contrast (§19 Tokens).
   ===================================================================== */
.site-footer { margin-top: var(--space-5); color: var(--text-invert); }

/* 1. SEO content block - quiet, muted, present for crawlability. */
.footer-seo { background: var(--navy-2); padding-block: var(--sp-16); }
.footer-seo p { margin: 0; max-width: 70ch; font-size: var(--fs-meta); color: var(--text-invert-mut); }

/* 2. Four-column link grid */
.site-footer {
    background: var(--navy);
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: var(--space-4);
    padding-block: var(--space-4);
}
.brand--footer { color: var(--text-invert); margin-bottom: var(--space-2); }
.site-footer__line { color: var(--text-invert-mut); max-width: 46ch; font-size: 0.96rem; }
.site-footer__heading { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-meta); letter-spacing: 0.02em; text-transform: uppercase; color: var(--brass-bright); margin-bottom: var(--space-2); }
.site-footer__col a { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; font-size: var(--fs-interface); color: var(--text-invert-mut); padding: 0.28rem 0; }
.site-footer__col a:hover { color: var(--brass-bright); }

/* 3. Registration line - smallest type on the page, present for legal
   completeness, not meant to draw attention. */
.site-footer__reg-wrap { border-top: 1px solid var(--line-dark); }
.site-footer__reg { margin: 0; padding-block: var(--sp-12); font-size: 0.7rem; color: var(--text-invert-mut); opacity: 0.85; }
.site-footer__reg a { color: var(--text-invert-mut); text-decoration: underline; text-underline-offset: 2px; }
.site-footer__reg a:hover { color: var(--brass-bright); }

/* 4. Book a Meeting/Appointment band */
.footer-meet { background: var(--navy-2); }
.footer-meet__inner { padding-block: var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); text-align: center; }
.footer-meet__eyebrow { margin: 0; font-size: var(--fs-meta); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-invert-mut); }

.meeting-selector { display: flex; gap: var(--sp-16); margin-top: var(--sp-8); flex-wrap: wrap; justify-content: center; }
.meeting-selector[hidden] { display: none; }
.meeting-method {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    width: 200px; background: var(--paper-2); box-shadow: var(--neu-raised); border: none; cursor: pointer;
    border-radius: var(--radius-sm); padding: var(--sp-20) var(--sp-16);
    font-family: var(--font-body); color: var(--text); transition: box-shadow 150ms ease;
}
.meeting-method:hover { box-shadow: var(--neu-pressed); }
.meeting-method.is-selected { box-shadow: var(--neu-pressed); }
.meeting-method__icon { width: 1.6rem; height: 1.6rem; color: var(--brass-deep); }
.meeting-method__name { font-family: var(--font-display); font-size: 1.05rem; }
.meeting-method__tagline { font-size: 0.82rem; color: var(--text-muted); }

/* Booking request form (IMPLEMENTATION-INDEX.md §5.2) - reuses
   .qe-form-field/.qe-form-row as-is (the input's own light background
   already reads fine on the dark band), only the label colour needs a
   light-on-dark override here. */
.meeting-form { max-width: 440px; margin: var(--sp-20) auto 0; text-align: left; }
.meeting-form[hidden] { display: none; }
.meeting-form .qe-form-field label { color: var(--text-invert-mut); }
.meeting-form > button { width: 100%; margin-top: 0.25rem; }

/* 5. Bottom bar */
.site-footer__base {
    background: var(--navy);
    border-top: 1px solid var(--line-dark);
    padding-block: var(--space-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-invert-mut);
    font-size: 0.86rem;
    flex-wrap: wrap;
}
.site-footer__base p { margin: 0; }
.site-footer__social { display: flex; align-items: center; gap: var(--sp-16); }
.site-footer__social a { color: var(--text-invert-mut); display: flex; }
.site-footer__social a:hover { color: var(--brass-bright); }

/* ---- 17. Utilities ---- */
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.center { text-align: center; }

/* ---- 18. Responsive ---- */
@media (max-width: 900px) {
    .steps { grid-template-columns: repeat(2, 1fr); }
    .cards, .contact-grid { grid-template-columns: 1fr 1fr; }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
    .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
    .steps, .cards, .contact-grid, .site-footer__grid { grid-template-columns: 1fr; }
    .meeting-selector { flex-direction: column; align-items: center; }
    .meeting-method { width: 100%; max-width: 280px; }
    .site-footer__base { flex-direction: column; align-items: flex-start; }
}

/* ---- 20. Section helpers added in catalogue phase ---- */
.section--tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
.section__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.section__title--sm { font-size: clamp(1.3rem, 3vw, 1.7rem); }
.page-head--slim { padding-block: clamp(2.2rem, 6vw, 3.6rem); }
.page-head__eyebrow { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-bright); font-weight: 600; margin-bottom: 0.5rem; }
.visually-hidden, .product-card__cta.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- 21. Product grid + card (DESIGN-SYSTEM.md §6.1 - borderless) ---- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}
.product-card {
    display: flex;
    flex-direction: column;
    position: relative;
}
.product-card__media {
    display: block;
    aspect-ratio: 4 / 5;
    background: var(--navy);
    overflow: hidden;
    border-radius: var(--radius-sm);
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.03); }
.product-card__noimg, .product-gallery__noimg {
    display: block; width: 100%; height: 100%;
    background:
        radial-gradient(circle at 50% 38%, rgba(231,190,106,0.34), transparent 60%),
        var(--navy);
}
.product-card__body { display: flex; flex-direction: column; gap: 0.3rem; padding-top: var(--sp-16); }
.product-card__name { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-heading); line-height: 1.3; margin: 0; }
.product-card__name a { text-decoration: none; color: var(--text); }
.product-card__name a:hover { color: var(--brass-deep); }
.product-card__cat { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-meta); letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.product-card__price-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.15rem; }
.product-card__price { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-interface); color: var(--text); }
.product-card__price--quote { color: var(--brass-deep); }

/* Action set - always visible (not hover-revealed), real button chrome
   so "View" and "Add to Plan" read as actions at rest, not loose text. */
.product-card__actions { display: flex; gap: 0.6rem; margin-top: 0.65rem; }
.product-card__actions .btn-t3 {
    flex: 1; justify-content: center; text-align: center;
    padding: 0.5rem 0.75rem; border-radius: var(--radius-sm);
    font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.02em;
    border: 1px solid var(--line); transition: background 150ms ease, border-color 150ms ease;
}
.product-card__actions .btn-t3::after { content: none; }
.product-card__actions .btn-t3:first-child { color: var(--text); }
.product-card__actions .btn-t3:first-child:hover { background: var(--paper-2); border-color: var(--text-muted); }
.product-card__actions .btn-t3[data-add-to-plan] { background: var(--brass); border-color: var(--brass); color: var(--navy); }
.product-card__actions .btn-t3[data-add-to-plan]:hover { background: var(--brass-deep); border-color: var(--brass-deep); }
/* Toggled state - a second click removes it, so the button itself should
   read as "click to undo," not a second identical primary CTA. */
.product-card__actions .btn-t3[data-add-to-plan].is-added,
[data-add-to-plan].is-added.btn-t2--navy {
    background: transparent; border-color: var(--text-muted); color: var(--text-muted);
}
.product-card__actions .btn-t3[data-add-to-plan].is-added:hover,
[data-add-to-plan].is-added.btn-t2--navy:hover { border-color: #9A3527; color: #9A3527; background: rgba(154, 53, 39, 0.06); }

/* Availability - a 6px dot, never a badge/pill (§6.1) */
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.status-dot--ok    { background: var(--success-light); }
.status-dot--muted { background: var(--attention-light); }
.status-dot--off   { background: var(--unavailable-light); }

.price { font-family: var(--font-display); font-size: 1.12rem; color: var(--text); }
.price--lg { font-size: 1.7rem; }

/* Product detail's availability indicator - same status-dot component and
   colours as product cards (§6.1), just paired with a visible label since
   a detail page's single copy warrants more than a bare dot. */
.availability-tag { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; font-weight: 500; color: var(--text-muted); }

/* ---- 22. Catalogue toolbar + filters + pagination ---- */
.catalogue-toolbar { display: flex; gap: var(--space-2); align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--space-3); }
.catalogue-search { display: flex; gap: 0.5rem; flex: 1; min-width: 260px; }
.catalogue-search input {
    flex: 1; padding: 0.7rem 0.9rem; font: inherit;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--text);
}
.catalogue-search input:focus-visible { border-color: var(--brass); outline-color: var(--brass); }
.catalogue-sort select {
    padding: 0.7rem 0.9rem; font: inherit; border: 1px solid var(--line);
    border-radius: var(--radius-sm); background: var(--paper); color: var(--text); cursor: pointer;
}
.catalogue-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: var(--space-2); }
.catalogue-filters__label { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-right: 0.3rem; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    text-decoration: none; font-size: 0.9rem; font-weight: 500;
    padding: 0.42rem 0.85rem; border-radius: 999px;
    border: 1px solid var(--line); background: var(--paper); color: var(--text-muted);
    transition: border-color 0.15s ease, color 0.15s ease;
}
.filter-chip .icon { width: 1em; height: 1em; }
.filter-chip:hover { border-color: var(--brass); color: var(--text); }
.filter-chip.is-active { background: var(--navy); color: var(--text-invert); border-color: var(--navy); }
.filter-chip__count { font-size: 0.76rem; opacity: 0.7; }
.catalogue-count { color: var(--text-muted); font-size: 0.94rem; margin-bottom: var(--space-2); }
/* Shop filter checkboxes apply in place (shop-filters.js) - a brief dim
   while the swap is in flight is the only feedback, never a layout
   shift or scroll. */
#shopResults.is-loading { opacity: 0.55; transition: opacity 120ms ease; pointer-events: none; }

.empty-state { text-align: center; padding: var(--space-5) var(--space-2); border: 1px dashed var(--line); border-radius: var(--radius); }
.empty-state p { color: var(--text-muted); margin-bottom: var(--space-2); }

.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }
.pagination__link { text-decoration: none; font-weight: 600; color: var(--text); padding: 0.55rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.pagination__link:hover { border-color: var(--brass); color: var(--brass-deep); }
.pagination__status { color: var(--text-muted); font-size: 0.92rem; }

/* ---- 23. Breadcrumb ---- */
.breadcrumb { border-bottom: 1px solid var(--line); background: var(--paper); }
.breadcrumb .wrap { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; padding-block: 0.85rem; font-size: 0.9rem; color: var(--text-muted); }
.breadcrumb a { text-decoration: none; color: var(--text-muted); }
.breadcrumb a:hover { color: var(--brass-deep); }

/* ---- 24. Product detail ---- */
.product-detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-4); align-items: start; }
.product-gallery__main {
    aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden;
    background: var(--navy); border: 1px solid var(--line);
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumbs { display: flex; gap: 0.6rem; margin-top: 0.7rem; flex-wrap: wrap; }
.product-gallery__thumb {
    width: 68px; height: 68px; padding: 0; cursor: pointer;
    border-radius: var(--radius-sm); overflow: hidden;
    border: 2px solid var(--line); background: var(--navy);
    transition: border-color 120ms ease-out;
}
.product-gallery__thumb:hover { border-color: var(--brass-deep); }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumb.is-active { border-color: var(--brass); }

.product-info__cat { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-deep); font-weight: 600; }
.product-info__title { font-size: clamp(1.7rem, 4vw, 2.5rem); margin: 0.4rem 0 var(--space-2); }
.product-info__meta { display: flex; align-items: center; gap: 0.9rem; margin-bottom: var(--space-2); flex-wrap: wrap; }
.product-info__lead { color: var(--text-muted); font-size: 1.05rem; }
.product-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: var(--space-2) 0; }
.product-note { color: var(--text-muted); font-size: 0.9rem; background: var(--paper-2); border-left: 3px solid var(--brass); padding: 0.75rem 0.9rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.plan-feedback { min-height: 1.2em; font-size: 0.92rem; font-weight: 600; color: var(--brass-deep); }
.plan-feedback a { color: inherit; text-decoration: underline; }
.product-spaces { margin-top: var(--space-3); }
.product-spaces__label { display: block; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 0.5rem; }
.chips--sm .chip { font-size: 0.86rem; padding: 0.35rem 0.75rem; }

.product-lower { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-4); align-items: start; }
.spec-list { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.spec-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); }
.spec-row:last-child { border-bottom: 0; }
.spec-row dt { color: var(--text-muted); font-weight: 500; margin: 0; }
.spec-row dd { margin: 0; font-weight: 600; text-align: right; }

/* ---- 25. Mobile navigation ----
   The three-stroke icon + full-screen .site-menu overlay (§4) is already
   the same mechanism on every viewport - no separate mobile-only nav
   pattern needed here. Only fine-tune spacing for small screens. */
@media (max-width: 480px) {
    .site-menu__links { gap: var(--sp-24); }
}

/* ---- 26. Responsive: catalogue + product ---- */
@media (max-width: 900px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .product-detail { grid-template-columns: 1fr; }
    .product-lower { grid-template-columns: 1fr; }
    .hero--split .hero-grid { grid-template-columns: 1fr; gap: var(--space-3); }
    .hero--split .hero__eyebrow, .hero--split .hero__title, .hero--split .hero__lead { text-align: center; margin-inline: auto; }
    .hero--split .hero__lead { max-width: 52ch; }
    .hero--split .hero__actions { justify-content: center; }
    .hero__scene { aspect-ratio: 4 / 3; max-width: 340px; margin-inline: auto; }
}
@media (max-width: 560px) {
    /* VISUAL-DIRECTION.md §7 "Mobile product grid: 2 columns, not 1" -
       stays at the 2-up grid from the 900px breakpoint above at every
       supported width, never collapses to a single column. */
    .product-grid { gap: var(--sp-12); }
    .catalogue-toolbar { flex-direction: column; align-items: stretch; }
    .catalogue-sort select { width: 100%; }
}

/* ---- 27. Motion preference ---- */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---- 28. Quotation builder ---- */
.qb { max-width: 720px; margin-inline: auto; }
.qb-error { background: #F6E2DE; color: #9A3527; padding: 0.75rem 1rem; border-radius: var(--radius-sm); margin-bottom: var(--space-2); }
.qb-notice { background: rgba(201,154,70,0.12); border: 1px solid var(--line); color: var(--text); padding: 0.75rem 1rem; border-radius: var(--radius-sm); margin-bottom: var(--space-2); font-size: 0.94rem; }
.qb-notice strong { color: var(--brass-deep); }
.qb-progress { height: 4px; background: var(--line); border-radius: 4px; margin-bottom: 0.5rem; overflow: hidden; }
.qb-progress__bar { height: 100%; background: var(--brass); border-radius: 4px; transition: width 0.3s ease; }
.qb-steps-label { font-size: 0.82rem; color: var(--text-muted); margin-bottom: var(--space-3); }
.qb-question { font-family: var(--font-display); font-size: clamp(1.4rem, 3.5vw, 1.9rem); margin-bottom: var(--space-2); }
.qb-hint { color: var(--text-muted); margin-bottom: var(--space-3); }
.qb-label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.35rem; }
.qb-optional { font-weight: 400; color: var(--text-muted); }
.required { color: #9A3527; }

.qb-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-3); }
.qb-option {
    display: flex; flex-direction: column; gap: 0.25rem;
    text-align: left; padding: var(--space-2); border: 2px solid var(--line);
    border-radius: var(--radius); background: var(--paper); cursor: pointer;
    font: inherit; color: var(--text); transition: border-color 0.15s ease;
}
.qb-option:hover { border-color: var(--brass); }
.qb-option.is-active { border-color: var(--brass); background: rgba(201,154,70,0.06); }
.qb-option strong { font-size: 1.05rem; }
.qb-option span { font-size: 0.9rem; color: var(--text-muted); }

.qb-sub { margin-bottom: var(--space-3); }
.qb-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.qb-chip {
    padding: 0.48rem 0.9rem; border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper); color: var(--text); font: inherit; font-size: 0.92rem;
    cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.qb-chip:hover { border-color: var(--brass); }
.qb-chip.is-active { border-color: var(--brass); background: var(--brass); color: var(--navy); font-weight: 600; }

.qb-next { margin-top: var(--space-2); }
.qb-next:disabled { opacity: 0.4; pointer-events: none; }
.qb-row { display: flex; gap: 0.8rem; margin-top: var(--space-3); flex-wrap: wrap; }

/* Spaces */
.qb-space-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-3); }
.qb-space-row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
    padding: 0.65rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
    margin-bottom: 0.5rem; background: var(--paper-2);
}
.qb-space-row__name { font-weight: 600; }
.qb-space-row__qty { color: var(--brass-deep); }
.qb-space-row__controls { display: flex; gap: 0.4rem; align-items: center; }
.qb-remove { background: none; border: none; color: #9A3527; font: inherit; font-size: 0.85rem; cursor: pointer; font-weight: 600; transition: color 120ms ease-out; }
.qb-remove:hover { color: #7A2A1D; text-decoration: underline; }

/* Space tabs */
.qb-space-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--space-3); }
.qb-tab {
    padding: 0.42rem 0.8rem; border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper); font: inherit; font-size: 0.85rem; cursor: pointer;
    transition: border-color 120ms ease-out;
}
.qb-tab:hover { border-color: var(--brass); }
.qb-tab.is-active { background: var(--navy); color: var(--text-invert); border-color: var(--navy); }

/* Adder */
.qb-select, .qb-input {
    width: 100%; padding: 0.65rem 0.85rem; font: inherit;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--paper); color: var(--text);
}
.qb-select:focus, .qb-input:focus { border-color: var(--brass); outline-color: var(--brass); }
.qb-adder > div { margin-bottom: var(--space-2); }
.qb-adder__qty { display: flex; align-items: flex-end; gap: 0.7rem; flex-wrap: wrap; }
.qb-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.qb-qty__btn {
    width: 40px; height: 40px; border: none; background: var(--paper-2);
    font: inherit; font-size: 1.2rem; cursor: pointer; color: var(--text);
}
.qb-qty__btn:hover { background: var(--line); }
.qb-qty__input { width: 52px; height: 40px; border: none; text-align: center; font: inherit; background: var(--paper); color: var(--text); }
.qb-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Product search results */
.qb-product-results { max-height: 240px; overflow-y: auto; }
.qb-product-result {
    display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
    width: 100%; text-align: left; padding: 0.6rem 0.8rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--paper); font: inherit; cursor: pointer;
    margin-top: 0.4rem; transition: border-color 0.15s ease;
}
.qb-product-result:hover { border-color: var(--brass); }
.qb-product-result__price { color: var(--brass-deep); font-weight: 600; white-space: nowrap; }

/* Items list */
.qb-items-ul { list-style: none; padding: 0; margin: var(--space-2) 0 0; }
.qb-item-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line);
}
.qb-remove-item { background: none; border: none; color: #9A3527; font-size: 1.1rem; cursor: pointer; margin-left: 0.6rem; transition: color 120ms ease-out; }
.qb-remove-item:hover { color: #7A2A1D; }

/* Summary */
.qb-summary { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); background: var(--paper-2); margin-bottom: var(--space-2); }
.qb-summary__project { margin-bottom: var(--space-2); }
.qb-summary__space { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin: var(--space-2) 0 0.4rem; }
.qb-summary__space:first-child { margin-top: 0; }
.qb-summary__list { list-style: none; padding: 0; margin: 0; }
.qb-summary__list li { padding: 0.3rem 0; color: var(--text-muted); border-bottom: 1px solid var(--line); }
.qb-summary__total { margin-top: var(--space-2); font-size: 1.15rem; font-family: var(--font-display); }
.qb-disclaimer {
    background: var(--paper-2); border-left: 3px solid var(--brass); padding: 0.75rem 0.9rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-muted); font-size: 0.9rem;
    margin-bottom: var(--space-2);
}

/* Customer form */
.qb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-2); }
.field--full { grid-column: 1 / -1; }
.qb-form-grid .field label { color: var(--text-muted); }
.qb-form-grid .field input, .qb-form-grid .field textarea {
    width: 100%; padding: 0.65rem 0.85rem; font: inherit;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--paper); color: var(--text);
}
.qb-form-grid .field input:focus, .qb-form-grid .field textarea:focus { border-color: var(--brass); outline-color: var(--brass); }
.qb-form-grid .field textarea { resize: vertical; }

/* Confirmation page */
.quote-ref {
    display: inline-block; font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--brass-bright); background: var(--navy-3); padding: 0.6rem 1.4rem;
    border-radius: var(--radius-sm); margin-top: var(--space-2);
}
.confirm-box {
    background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
    padding: var(--space-3); margin-bottom: var(--space-3);
}
.confirm-box p { margin: 0 0 0.4rem; }
.quote-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-2); }
.quote-table th, .quote-table td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--line); font-size: 0.94rem; }
.quote-table th { font-weight: 600; background: var(--paper-2); }
.quote-table .right { text-align: right; }
.quote-table tfoot td { border-top: 2px solid var(--brass); font-size: 1.05rem; }
.text-muted { color: var(--text-muted); }
.confirm-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: var(--space-3); }

@media (max-width: 560px) {
    .qb-options { grid-template-columns: 1fr; }
    .qb-form-grid { grid-template-columns: 1fr; }
    .qb-adder__qty { flex-direction: column; align-items: stretch; }
    .quote-table th:nth-child(2), .quote-table td:nth-child(2) { display: none; }
}

/* ---- Room visualization (Lighting Plan Builder, step 3) ----
   Simplified, not photorealistic, per UI-REFERENCE.md §25 - a floor-plan
   style illustration that gains a badge per lighting item added to the
   active space. Priority is clarity and responsiveness, not realism. */
.qb-room {
    display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
    background: var(--navy-2); border-radius: var(--radius); padding: var(--space-2);
    margin-bottom: var(--space-3); color: var(--text-invert);
}
.qb-room__scene { position: relative; width: 130px; height: 92px; flex: none; color: var(--line-dark); }
.qb-room__floorplan { width: 100%; height: 100%; }
.qb-room__icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--brass-bright); }
.qb-room__icon .icon { width: 1.7rem; height: 1.7rem; }
.qb-room__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; flex: 1; min-width: 160px; }
.qb-room__badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--navy-3); border: 1px solid var(--line-dark); color: var(--brass-bright);
    animation: qbBadgeIn 0.2s var(--ease);
}
.qb-room__badge .icon { width: 1rem; height: 1rem; }
.qb-room__empty { color: var(--text-invert-mut); font-size: 0.88rem; }
@keyframes qbBadgeIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---- Persistent plan summary bar ---- */
.qb-plan-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--navy); color: var(--text-invert);
    padding: 0.85rem 1.25rem; padding-bottom: max(0.85rem, env(safe-area-inset-bottom));
    box-shadow: 0 -12px 30px -16px rgba(0,0,0,0.5);
    font-size: 0.94rem; text-align: center;
}
.qb-plan-bar strong { color: var(--brass-bright); }
.qb-plan-bar[hidden] { display: none; }
body.has-plan-bar { padding-bottom: 60px; }

/* =====================================================================
   ---- 29. Editorial components ----
   No product photography exists yet (docs/CONTEXT.md - placeholder SVGs
   only), so imagery throughout the redesign is replaced by ".scene": a
   dark architectural panel carrying a single icon and the same light-bloom
   glow used in the hero. It reads as intentional illustration, not a
   missing photo, and keeps "lighting is part of the interface" (UI-REF §4.4)
   true even where a real photo will eventually go.
   ===================================================================== */
.scene {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--navy-2);
    border-radius: var(--radius);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scene::before {
    content: "";
    position: absolute;
    top: -20%; left: 50%;
    width: 140%; height: 90%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(231,190,106,0.28) 0%, rgba(201,154,70,0.1) 38%, transparent 68%);
    z-index: -1;
    pointer-events: none;
}
.scene__icon { width: 26%; height: 26%; color: var(--brass-bright); opacity: 0.92; }
.scene--tall { aspect-ratio: 3 / 4; }
.scene--square { aspect-ratio: 1 / 1; }
.scene--wide { aspect-ratio: 16 / 9; }
.scene__tag {
    position: absolute; left: var(--space-2); bottom: var(--space-2);
    font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-invert-mut); font-weight: 600;
}

/* Space photo variant (DESIGN-SYSTEM.md §5.7A) - the admin-uploaded dusk
   space photo (space_image(), §13A) replaces the icon+glow illustration
   once one exists for the active space. background-position is set
   inline per space (focal point). The amber glow swaps for a dark
   bottom-weighted scrim so marker dots/badges/category chips overlaid
   on top stay legible against a real photo the way they never needed to
   against the flat illustration. */
.scene--photo {
    background-size: cover;
    background-repeat: no-repeat;
}
.scene--photo::before {
    top: 0; left: 0; width: 100%; height: 100%; transform: none;
    background: linear-gradient(180deg, rgba(5,7,13,0.05) 0%, rgba(5,7,13,0.15) 55%, rgba(5,7,13,0.55) 100%);
}

/* Asymmetric editorial split (image/scene + text) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__eyebrow { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-deep); font-weight: 600; margin-bottom: var(--space-1); }
.split__title { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.split__body { color: var(--text-muted); font-size: 1.05rem; }
.section--dusk .split__body { color: var(--text-invert-mut); }
.section--dusk .split__eyebrow { color: var(--brass-bright); }

/* Service cards */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.service-card {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: var(--space-3); display: flex; flex-direction: column; gap: 0.6rem;
    transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.service-card__icon {
    width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); background: var(--paper-2); color: var(--brass-deep);
}
.service-card__icon .icon { width: 1.4em; height: 1.4em; }
.service-card__name { font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; margin: 0; }
.service-card__for { font-size: 0.86rem; color: var(--brass-deep); font-weight: 600; }
.service-card__summary { color: var(--text-muted); font-size: 0.95rem; margin: 0; }
.service-card__process {
    margin-top: auto; padding-top: 0.6rem; border-top: 1px solid var(--line);
    color: var(--text-muted); font-size: 0.88rem;
}
.service-card__process strong { color: var(--text); display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.3rem; }

/* Project cards */
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.project-grid--feature .project-card:first-child .scene { aspect-ratio: 3 / 4; }
.project-card { text-decoration: none; color: inherit; display: block; }
.project-card__tag { font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-deep); font-weight: 600; margin: var(--space-2) 0 0.3rem; }
.project-card__title { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 0.25rem; transition: color 0.15s ease; }
.project-card:hover .project-card__title { color: var(--brass-deep); }
.project-card__space { color: var(--text-muted); font-size: 0.9rem; margin: 0; }
.project-note {
    display: inline-block; margin-top: var(--space-2); font-size: 0.82rem; color: var(--text-muted);
    background: var(--paper-2); border-radius: 999px; padding: 0.3rem 0.8rem;
}

/* Article cards */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.article-card { text-decoration: none; color: inherit; display: block; }
.article-card__cat { font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-deep); font-weight: 600; margin: var(--space-2) 0 0.3rem; }
.article-card__title { font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 0.4rem; transition: color 0.15s ease; }
.article-card:hover .article-card__title { color: var(--brass-deep); }
.article-card__excerpt { color: var(--text-muted); font-size: 0.92rem; margin: 0; }

/* Trust list - real process facts, not invented stats (UI-REF §46) */
.trust-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); }
.trust-item { display: flex; gap: 0.7rem; align-items: flex-start; }
.trust-item .icon { color: var(--brass-bright); margin-top: 0.15rem; }
.trust-item__body { color: var(--text-invert-mut); font-size: 0.95rem; margin: 0; }
.trust-item__body strong { color: var(--text-invert); display: block; font-size: 1rem; margin-bottom: 0.15rem; font-weight: 600; }

/* Category discovery (editorial, staggered - not a uniform grid) */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.cat-tile {
    position: relative; text-decoration: none; color: var(--text-invert);
    border-radius: var(--radius); overflow: hidden; isolation: isolate;
    aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: flex-end;
    padding: var(--space-2); background: var(--navy-2);
    transition: transform 0.18s var(--ease);
}
.cat-tile:nth-child(3n+2) { aspect-ratio: 1 / 1.35; }
.cat-tile::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(231,190,106,0.3), transparent 60%);
    z-index: -1;
}
.cat-tile:hover { transform: translateY(-3px); }
.cat-tile .icon { width: 2rem; height: 2rem; color: var(--brass-bright); margin-bottom: 0.6rem; }
.cat-tile__name { font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; }
.cat-tile__count { font-size: 0.8rem; color: var(--text-invert-mut); }

/* Space discovery row (horizontal, tappable) */
.space-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); }
.space-tile {
    text-decoration: none; color: var(--text); text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    padding: var(--space-2) 0.5rem; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper); transition: border-color 0.15s ease, transform 0.15s var(--ease);
}
.space-tile:hover { border-color: var(--brass); transform: translateY(-2px); }
.space-tile .icon { width: 1.8rem; height: 1.8rem; color: var(--brass-deep); }
.space-tile__name { font-size: 0.88rem; font-weight: 600; }

@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; gap: var(--space-3); }
    .split--reverse .split__media { order: 0; }
    .service-grid, .project-grid, .article-grid { grid-template-columns: 1fr 1fr; }
    .cat-grid { grid-template-columns: repeat(3, 1fr); }
    .space-grid { grid-template-columns: repeat(3, 1fr); }
    .trust-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .service-grid, .project-grid, .article-grid { grid-template-columns: 1fr; }
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .space-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   ---- 30. DESIGN SYSTEM v2 - foundation (IMPLEMENTATION-INDEX Stage 1) ----
   Tokens only, applied here as reusable primitives: type ramp, button
   tiers 1–3, segmented control, icon-key controls, neumorphic surfaces
   (DESIGN-SYSTEM.md §1–§5). Page-specific components built from these
   primitives (hero slider §5.6, quotation popups §5.7–§5.8) are built in
   their own stages, not here.
   ===================================================================== */

/* ---- 30.1 Typography ramp (§2.2) - presentational classes, decoupled
   from heading level per §14's SEO rule: visual size and semantic <h1>–
   <h6> level are independent. Apply the class that matches the intended
   size to whichever tag is correct for document structure. ---- */
.display-xl {
    font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display-xl);
    line-height: 1.05; letter-spacing: -0.01em; margin: 0;
}
.display-l {
    font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-l);
    line-height: 1.1; letter-spacing: -0.01em; margin: 0;
}
.display-m {
    font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-m);
    line-height: 1.15; margin: 0;
}
.text-heading {
    font-family: var(--font-body); font-weight: 600; font-size: var(--fs-heading);
    line-height: 1.3; margin: 0;
}
.text-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: 1.6; }
.text-body--lg { font-size: var(--fs-body-lg); }
.text-meta {
    font-family: var(--font-body); font-weight: 500; font-size: var(--fs-meta);
    line-height: 1.4; letter-spacing: 0.02em; text-transform: uppercase;
}
.text-interface { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-interface); line-height: 1.3; }

/* Reading measure (§2.3) - cap body columns, never exceed ~70ch */
.measure { max-width: 640px; }

/* ---- 30.2 Buttons - Tier 1 (§5.1) ----
   Reserved for one true commitment moment per screen (§12's 4-moment
   sitewide budget). Two approved forms. ---- */

/* 1A - Dimmer/Toggle CTA */
.btn-t1-dimmer {
    display: inline-flex; align-items: center; gap: var(--sp-16);
    background: none; border: none; padding: 0; cursor: pointer; font: inherit;
    color: var(--text-invert);
}
.btn-t1-dimmer__label { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-interface); }
.btn-t1-dimmer__track {
    position: relative; height: 56px; min-width: 200px; border-radius: 999px;
    background: var(--navy-2); box-shadow: var(--track-recess);
    display: flex; align-items: center; padding: 0 6px;
}
.btn-t1-dimmer__handle {
    width: 44px; height: 44px; border-radius: 50%; background: var(--brass);
    box-shadow: 0 0 0 4px rgba(201, 154, 70, 0.12), 0 0 24px 4px var(--glow-brass);
    transition: transform 200ms var(--ease), background 200ms ease, box-shadow 300ms ease;
    margin-right: auto;
}
.btn-t1-dimmer:hover .btn-t1-dimmer__handle,
.btn-t1-dimmer:focus-visible .btn-t1-dimmer__handle {
    transform: translateX(calc(100% + 12px));
    background: var(--brass-bright);
    box-shadow: 0 0 0 4px rgba(231, 190, 106, 0.16), 0 0 40px 8px var(--glow-brass);
}

/* 1B - Glass Panel CTA */
.btn-t1-glass {
    display: inline-flex; align-items: center; gap: var(--sp-12);
    background: var(--glass-panel); backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border); border-radius: 16px;
    padding: var(--sp-16) var(--sp-24); cursor: pointer;
    font-family: var(--font-body); font-weight: 600; font-size: var(--fs-interface);
    color: var(--paper); text-decoration: none;
    transition: transform 120ms var(--ease), box-shadow 120ms ease, border-color 120ms ease;
}
.btn-t1-glass__dot {
    width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: var(--brass); box-shadow: 0 0 16px 4px var(--glow-brass);
}
.btn-t1-glass:hover { transform: translateY(-2px); border-color: rgba(231, 190, 106, 0.32); }
.btn-t1-glass:active { transform: scale(0.97); }

/* ---- 30.3 Buttons - Tier 2 (§5.2) - standard, catalogue/forms/secondary ---- */
.btn-t2 {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
    min-height: 44px; padding: var(--sp-12) var(--sp-24); border-radius: 8px;
    font-family: var(--font-body); font-weight: 600; font-size: var(--fs-interface);
    text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
    transition: background 120ms ease, border-color 120ms ease;
}
.btn-t2--brass { background: var(--brass); color: var(--navy); }
.btn-t2--brass:hover { background: var(--brass-deep); }
.btn-t2:disabled { background: var(--paper-2); color: var(--text-muted); cursor: not-allowed; opacity: 0.7; }
.btn-t2:disabled:hover { background: var(--paper-2); }
.btn-t2--navy { background: var(--navy); color: var(--text-invert); }
.btn-t2--navy:hover { background: var(--navy-3); }
.btn-t2--outline { background: transparent; border-color: currentColor; }
.btn-t2--outline:hover { background: rgba(201, 154, 70, 0.08); }

/* ---- 30.4 Buttons - Tier 3 (§5.3) - text links, no container ---- */
.btn-t3 {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--font-body); font-weight: 500; font-size: var(--fs-interface);
    color: currentColor; text-decoration: none; background: none; border: none;
    cursor: pointer; padding: 0; position: relative;
}
.btn-t3::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
    background: currentColor; transition: right 150ms ease;
}
.btn-t3:hover::after { right: 0; }

/* ---- 30.5 Segmented control / pills (§5.4) ---- */
.segmented { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--paper-2); }
.segmented--dark { background: var(--navy-2); }
.segmented__item {
    border: none; background: transparent; cursor: pointer; font: inherit;
    font-family: var(--font-body); font-weight: 500; font-size: var(--fs-interface);
    color: var(--text-muted); padding: 0.5rem 1rem; border-radius: 8px;
    transition: color 120ms ease, background 120ms ease;
}
.segmented--dark .segmented__item { color: var(--text-invert-mut); }
.segmented__item:hover { color: var(--text); }
.segmented--dark .segmented__item:hover { color: var(--text-invert); }
.segmented__item.is-active { background: var(--navy); color: var(--text-invert); }
.segmented--dark .segmented__item.is-active { background: var(--paper); color: var(--text); }

/* ---- 30.6 Icon-key controls (§5.5) - tool panels, quantity steppers ---- */
.icon-keys { display: flex; flex-direction: column; gap: var(--sp-8); }
.icon-keys--row { flex-direction: row; }
.icon-key {
    width: 40px; height: 40px; border-radius: 8px; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: var(--glass-panel); color: var(--paper);
    transition: background 120ms ease-out, color 120ms ease-out;
}
.icon-key:hover { background: var(--navy-3); color: var(--brass-bright); }
.icon-key--light { background: var(--navy-3); }
.icon-key .icon { width: 1.1rem; height: 1.1rem; }

/* ---- 30.7 Neumorphic (Tactile Layer) surface utilities (§4.1) ----
   Applies only to Tactile Layer surfaces (pickers, popups, tool-belts,
   steppers) - never to catalogue grids, cards, or nav/footer chrome. ---- */
.neu-surface { background: var(--neu-base); border-radius: var(--radius); }
.neu-surface--dark { background: var(--neu-base-dark); }
.neu-raised { box-shadow: var(--neu-raised); }
.neu-raised--dark { box-shadow: var(--neu-raised-dark); }
.neu-pressed { box-shadow: var(--neu-pressed); }
.neu-pressed--dark { box-shadow: var(--neu-pressed-dark); }
.neu-recessed { box-shadow: var(--neu-pressed); } /* same technique, applied to containing tracks */
.neu-recessed--dark { box-shadow: var(--neu-pressed-dark); }

/* =====================================================================
   ---- 31. How It Works - space-slider hero, process row, why-grid ----
   DESIGN-SYSTEM.md §5.6, IMPLEMENTATION-INDEX.md §2.2.
   ===================================================================== */
.space-slider__viewport {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: 58vh; background: var(--navy); color: var(--text-invert);
}
.space-slider__media {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 450ms ease;
}
.space-slider__media.is-active { opacity: 1; }
.space-slider__media--fallback {
    background-image: radial-gradient(ellipse 60% 55% at 30% 40%, rgba(231, 190, 106, 0.22), transparent 68%) !important;
}
.space-slider__inner {
    position: relative; z-index: 1;
    max-width: var(--maxw-wide); margin-inline: auto;
    min-height: 58vh;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 120px 40px 80px;
}
.space-slider__headline { color: var(--text-invert); max-width: 480px; margin-bottom: var(--sp-24); }
.btn-t2--slider { min-height: 40px; height: 40px; padding: 0 var(--sp-24); }
.space-slider__dots {
    position: absolute; bottom: var(--sp-24); left: 50%; transform: translateX(-50%);
    display: flex; gap: 10px; z-index: 1;
}
.space-slider__dot {
    width: 6px; height: 6px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
    background: rgba(251, 248, 242, 0.4);
    transition: background 120ms ease-out;
}
.space-slider__dot:not(.is-active):hover { background: rgba(251, 248, 242, 0.7); }
.space-slider__dot.is-active { background: var(--brass); }

.space-slider__tabs { display: flex; background: var(--paper); }
.space-slider__tabs button {
    flex: 1; background: none; border: none; cursor: pointer;
    font-family: var(--font-body); font-weight: 500; font-size: var(--fs-interface);
    color: var(--brass-deep); padding: var(--sp-16) var(--sp-8);
    border-top: 2px solid transparent; transition: color 150ms ease, border-color 150ms ease;
}
.space-slider__tabs button:hover { color: var(--text); }
.space-slider__tabs button.is-active { color: var(--text); border-top-color: var(--brass); }

@media (max-width: 640px) {
    .space-slider__viewport, .space-slider__inner { min-height: 40vh; }
    .space-slider__inner { padding: 100px 20px 56px; }
    .space-slider__tabs { flex-wrap: wrap; }
    .space-slider__tabs button { flex: 0 0 50%; font-size: var(--fs-meta); }
}

/* Process row - 6 steps, numbered, exact order */
.process-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.process-card { display: flex; flex-direction: column; gap: 0.5rem; }
.process-card__num { color: var(--brass-deep); }
.process-card__icon { display: block; width: 2rem; height: 2rem; color: var(--brass); margin: 0.25rem 0; }
.process-card__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-heading); margin: 0; }
.process-card__body { color: var(--text-muted); margin: 0; }
@media (max-width: 900px) { .process-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process-row { grid-template-columns: 1fr; } }

/* Why Choose Nink - 4 icons max */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.why-item { display: flex; flex-direction: column; gap: 0.5rem; }
.why-item__icon { display: block; width: 2rem; height: 2rem; color: var(--brass-bright); margin-bottom: 0.25rem; }
.why-item__title { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-heading); color: var(--text-invert); margin: 0; }
.why-item__body { color: var(--text-invert-mut); margin: 0; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   ---- 32. Shop - overlap wordmark hero, filter sidebar, carousel ----
   IMPLEMENTATION-INDEX.md §2.3. ---- */
.shop-hero {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: 34vh; display: flex; align-items: center;
    background: var(--navy);
}
.shop-hero--fallback::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(ellipse 60% 60% at 60% 40%, rgba(231, 190, 106, 0.2), transparent 68%);
}
.shop-hero__bg {
    position: absolute; inset: 0; z-index: -3;
    width: 100%; height: 100%; object-fit: cover;
}
/* Autoplaying ambient loop - sits over the static image, which stays in
   the DOM underneath as the poster/reduced-motion fallback rather than
   being replaced by it. */
.shop-hero__video {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
    .shop-hero__video { display: none; }
}
/* Keeps the oversized wordmark legible over a moving video the same way
   it's legible over the static image - independent of how bright or
   busy any given uploaded frame is. */
.shop-hero__scrim {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(5, 7, 13, 0.32), rgba(5, 7, 13, 0.5));
}
.shop-hero__wordmark { color: var(--text-invert); margin: 0; font-size: clamp(4rem, 14vw, 10rem); }

.shop-layout { display: grid; grid-template-columns: 268px 1fr; gap: var(--space-4); align-items: start; }

/* Desktop: the results pane is its own bounded, independently-scrollable
   column, matching the filter sidebar's sticky/contained treatment
   exactly (same top/height) so the two form one fixed two-pane view.
   Scrolling the mouse over the grid scrolls THIS pane's own content
   first; only once its own content runs out does the page underneath
   (recommendations/CTA/footer) start scrolling. This also means
   checking a filter never changes the outer page's height/scroll -
   fewer or more results only affects content inside this pane, so nothing
   below ever shifts and "the whole screen" stays inert on every click. */
.shop-main {
    position: sticky; top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}

/* ---- Filter sidebar - always-visible left column, sticky while the grid
   scrolls beside it. Cream/Paper, matching the page (not the dark Navy
   family used elsewhere on the site). ---- */
.shop-filters {
    position: sticky; top: 90px;
    max-height: calc(100vh - 110px);
    background: var(--paper);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.shop-filters__inner {
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding: var(--sp-16) var(--sp-8) var(--space-3);
    display: flex; flex-direction: column; gap: var(--sp-8);
}
.shop-filters__header { padding: 0 var(--sp-8) var(--sp-8); }
.shop-filters__title { font-family: var(--font-body); font-weight: 700; font-size: 1.15rem; color: #1B1710; margin: 0; }

.shop-filters__search {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 0 var(--sp-8);
    padding: 0.6rem 0.8rem;
    background: var(--paper-2);
    border-radius: var(--radius-sm);
    box-shadow: var(--neu-pressed);
}
.shop-filters__search-icon { width: 1rem; height: 1rem; color: #6E6555; flex: none; }
.shop-filters__search input {
    flex: 1; min-width: 0; border: none; background: transparent; outline: none;
    font-family: var(--font-body); font-size: var(--fs-interface); color: #1B1710;
}
.shop-filters__search input::placeholder { color: #6E6555; }

.shop-filters__label {
    margin: var(--sp-8) var(--sp-8) 0; font-size: var(--fs-meta); font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: #6E6555;
}

/* ---- Filter group - independent accordion, multiple may be expanded ---- */
.filter-group { border-radius: var(--radius-sm); }
.filter-group__row {
    width: 100%; display: flex; align-items: center; gap: 0.6rem;
    background: none; border: none; cursor: pointer;
    padding: 0.65rem 0.8rem; border-radius: var(--radius-sm);
    font-family: var(--font-body); text-align: left;
    transition: background 160ms ease;
}
.filter-group__icon { width: 1.05rem; height: 1.05rem; color: #6E6555; flex: none; transition: color 160ms ease; }
.filter-group__label { flex: 1; font-size: var(--fs-interface); font-weight: 500; color: #1B1710; }
.filter-group__badge {
    font-size: var(--fs-meta); font-weight: 600; color: #6E6555;
    background: #EEE4D2; border-radius: 999px; padding: 0.1rem 0.5rem; flex: none;
}
.filter-group__chevron { width: 0.9rem; height: 0.9rem; color: #6E6555; flex: none; transition: color 160ms ease, transform 200ms ease; }

.filter-group.is-expanded .filter-group__row {
    background: #F0E6D2;
    box-shadow: var(--neu-raised);
}
.filter-group.is-expanded .filter-group__icon,
.filter-group.is-expanded .filter-group__chevron { color: var(--brass-deep); }
.filter-group.is-expanded .filter-group__label { font-weight: 600; }
.filter-group.is-expanded .filter-group__chevron { transform: rotate(90deg); }

/* Grid-row trick: animates height smoothly without measuring, no bounce. */
.filter-group__panel {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 200ms ease;
}
.filter-group.is-expanded .filter-group__panel { grid-template-rows: 1fr; }
.filter-group__panel-inner { overflow: hidden; opacity: 0; transition: opacity 200ms ease; }
.filter-group.is-expanded .filter-group__panel-inner { opacity: 1; }

.filter-group__options {
    list-style: none; margin: 0; padding: 0.4rem 0.8rem 0.4rem 2.4rem;
    display: flex; flex-direction: column; gap: 0.35rem;
}
/* .filter-group__options a - the category-switch links used only on a
   category page's own URL (single-select navigation between category
   pages, catalogue.php's isCategoryPage branch). Every other group is
   .filter-option buttons below (real multi-select, DESIGN-SYSTEM.md §18,
   applied in place by shop-filters.js - never a navigation). */
.filter-group__options a,
.filter-option {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    text-decoration: none; color: #6E6555; font-size: var(--fs-interface);
    padding: 0.2rem 0; transition: color 120ms ease;
    background: none; border: none; cursor: pointer; text-align: left;
    font-family: var(--font-body);
}
.filter-group__options a:hover,
.filter-option:hover { color: #1B1710; }
.filter-group__options a.is-active,
.filter-option.is-active { color: var(--brass-deep); font-weight: 600; }
.filter-option--clear { color: #6E6555; font-style: italic; }
.filter-option--clear:hover { color: #1B1710; }
.filter-group__option-label { flex: 1; }
.filter-group__option-count { font-size: var(--fs-meta); color: #6E6555; font-weight: 400; }

/* DESIGN-SYSTEM.md §18 - explicit checkbox on every filter option so
   selection is never signalled by colour/weight alone. Real ARIA
   checkbox buttons (role="checkbox"/aria-checked), independent of the
   group's own expand/collapse header - checking one applies the filter
   in place without navigating or closing the panel. */
.filter-checkbox {
    width: 15px; height: 15px; flex: none; border-radius: 4px;
    border: 1.5px solid var(--paper-2); background: transparent;
    display: flex; align-items: center; justify-content: center;
    transition: background 120ms ease, border-color 120ms ease;
}
.filter-checkbox .icon { width: 11px; height: 11px; color: #FBF8F2; opacity: 0; transition: opacity 120ms ease; }
.filter-option.is-active .filter-checkbox {
    background: var(--brass); border-color: var(--brass);
}
.filter-option.is-active .filter-checkbox .icon { opacity: 1; }

.shop-filters__clear { margin: var(--sp-8) var(--sp-8) 0; align-self: flex-start; }

.product-carousel { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--sp-8); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.product-carousel__item { flex: 0 0 260px; scroll-snap-align: start; }

@media (max-width: 900px) {
    .shop-layout { grid-template-columns: 1fr; }
    .shop-filters {
        position: static; max-height: none;
        box-shadow: var(--neu-raised);
    }
    .shop-filters__inner { max-height: none; overflow-y: visible; }
    /* Mobile keeps one natural page scroll (filters stacked above the
       grid, VISUAL-DIRECTION.md §7) - the bounded two-pane split-scroll
       is a desktop-only refinement. */
    .shop-main { position: static; max-height: none; overflow-y: visible; }
}
@media (max-width: 560px) {
    .product-carousel__item { flex-basis: 220px; }
}

/* =====================================================================
   ---- 33. Our Services - exact Vipp copy (IMPLEMENTATION-INDEX §2.4) ----
   ===================================================================== */
.triptych { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr; gap: 6px; height: 66vh; }
.triptych__panel { position: relative; display: block; overflow: hidden; height: 100%; }
.triptych__panel .scene { width: 100%; height: 100%; border-radius: 0; transition: transform 250ms var(--ease); }
.triptych__panel:hover .scene { transform: scale(1.03); }
.triptych__panel--narrow { display: flex; align-items: flex-end; justify-content: center; }
.triptych__overlay-btn { position: absolute; bottom: var(--space-3); left: 50%; transform: translateX(-50%); text-decoration: none; white-space: nowrap; }

/* display:grid already stretches every .service-tile to the row's tallest
   member by default (align-items:normal resolves to stretch for grid
   items) - the tile backgrounds were never actually uneven. What WAS
   uneven: the "View details" button's vertical position, since nothing
   pinned it to the bottom of the (already flex-column) tile - a longer,
   two-line title simply pushed everything below it down by that extra
   line's height. margin-top:auto on the button consumes the flex
   column's remaining free space above it instead, so the button always
   sits at the same baseline regardless of how many lines the title or
   summary take. */
.service-tiles { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.service-tile { padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--sp-12); }
.service-tile--light { background: var(--paper-2); color: var(--text); }
.service-tile--dark { background: var(--navy); color: var(--text-invert); }
.service-tile__eyebrow { color: var(--brass-deep); }
.service-tile--dark .service-tile__eyebrow { color: var(--brass-bright); }
.service-tile__icon { display: block; width: 2.2rem; height: 2.2rem; color: var(--brass); margin: var(--sp-8) 0; }
.service-tile__name { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-m); margin: 0; }
/* Fraunces' automatic optical-size axis switches to a "display" cut at
   this font-size, whose ampersand is an ornate calligraphic swash -
   legible once you know to expect it, but reads as a broken/stray glyph
   at a glance. Scoped to just this one character (services.php wraps
   only the ampersand in this span) rather than the whole heading -
   disabling optical-sizing on the full title also narrows/widens the
   OTHER letterforms enough to change line-wrapping for titles that
   don't even contain an ampersand. */
.service-tile__amp { font-optical-sizing: none; }
/* "Commercial & Project Supply" (27 characters) wraps to 2 lines at the
   size "Lighting Consultation"/"Residential Lighting" (20-21 characters)
   hold on 1 line. Sized below the largest size that actually renders on
   one line at this tile's real column width (the threshold sits between
   27.76px/28.76px at a 1280px viewport - found by rendering and
   measuring directly at each step, not computed from character counts,
   since font metrics/kerning make a percentage-of-length estimate
   unreliable) with a deliberate safety margin, not the exact edge.
   Checked visually against the other two tiles at this size: it reads
   as a deliberate "long title, proportionally smaller" treatment, not a
   mismatched outlier - the alternative (full size, left to wrap two
   lines) was compared side-by-side and looked like the odd one out in
   the row instead. */
.service-tile__name--compact { font-size: clamp(1.225rem, 0.84vw + 0.98rem, 1.75rem); }
.service-tile__price { color: var(--brass-deep); }
.service-tile--dark .service-tile__price { color: var(--brass-bright); }
.service-tile__summary { color: var(--text-muted); margin: 0 0 var(--sp-8); }
.service-tile--dark .service-tile__summary { color: var(--text-invert-mut); }
.service-tile .btn-t2--outline { margin-top: auto; }
.service-tile--dark .btn-t2--outline { border-color: var(--line-dark); color: var(--text-invert); }
.service-tile--dark .btn-t2--outline:hover { background: rgba(231, 190, 106, 0.1); }

.deep-dive { display: grid; grid-template-columns: 0.85fr 1.15fr; min-height: 60vh; }
.deep-dive__media { position: relative; }
.deep-dive__media .scene { height: 100%; border-radius: 0; }
.deep-dive__content { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-24); padding: var(--space-4) var(--space-4); background: var(--paper-2); }
.deep-dive__content .text-body { max-width: 46ch; color: var(--text-muted); }
.deep-dive__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.project-feed { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-16); }

@media (max-width: 900px) {
    .triptych { height: 50vh; }
    .service-tiles { grid-template-columns: 1fr; }
    .deep-dive { grid-template-columns: 1fr; }
    .deep-dive__media .scene { aspect-ratio: 16/10; height: auto; }
    .project-feed { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .triptych { grid-template-columns: 1fr; height: auto; }
    .triptych__panel { aspect-ratio: 4/3; }
}

/* =====================================================================
   ---- 34. Projects - dark split intro + editorial cards (§2.5) ----
   ===================================================================== */
.projects-intro { display: grid; grid-template-columns: 0.7fr 1fr; min-height: 74vh; background: var(--navy); }
/* Dark background, but doesn't carry .section--dusk - needs the same
   light-on-dark eyebrow color that class would have applied. */
.projects-intro .section__eyebrow { color: var(--brass-bright); }
.projects-intro__text { display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); padding: 140px var(--space-4) var(--space-4); color: var(--text-invert); }
.projects-intro__text .display-l { color: var(--text-invert); }
.projects-intro__thumb { width: 150px; }
.projects-intro__thumb .scene { border-radius: var(--radius-sm); }
.projects-intro__media { position: relative; isolation: isolate; background-size: cover; background-position: center; }
.projects-intro__media--fallback::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(ellipse 60% 60% at 65% 40%, rgba(231, 190, 106, 0.2), transparent 68%);
}

.project-cards { display: flex; flex-direction: column; gap: var(--space-5); }
.editorial-card { display: flex; align-items: stretch; gap: var(--space-4); background: var(--paper-2); border-radius: var(--radius); overflow: hidden; }
.editorial-card--reverse { flex-direction: row-reverse; }
.editorial-card__media { flex: 0 0 42%; }
.editorial-card__media .scene { height: 100%; border-radius: 0; aspect-ratio: auto; }
.editorial-card__body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--space-4); justify-content: center; }
.editorial-card__title { margin: 0; }
.editorial-card__subheading { font-family: var(--font-display); font-style: italic; font-size: var(--fs-heading); color: var(--brass-deep); margin: 0; }
.editorial-card__meta { display: flex; gap: var(--space-4); margin: var(--sp-8) 0; }
.editorial-card__meta dt { color: var(--text-muted); margin: 0 0 0.15rem; }
.editorial-card__meta dd { margin: 0; font-weight: 600; }
.editorial-card__actions { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--sp-8); }
.btn-t2--pill { border-radius: 999px; }

@media (max-width: 900px) {
    .projects-intro { grid-template-columns: 1fr; min-height: auto; }
    .projects-intro__media { min-height: 40vh; }
    .projects-intro__text { padding-top: 110px; }
    .editorial-card, .editorial-card--reverse { flex-direction: column; }
    .editorial-card__media { flex-basis: auto; }
    .editorial-card__media .scene { aspect-ratio: 4/3; }
}

/* =====================================================================
   ---- 35. Request a Quote - entry screen (Stage A) ----
   IMPLEMENTATION-INDEX.md §2.6 / VISUAL-DIRECTION.md §8. 60-30-10:
   full-bleed photo (60%), Paper-white band (30%), Brass accents (10%).
   ===================================================================== */
.qe-hero__media {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: 58vh; display: flex; align-items: flex-end;
    background: var(--navy); color: var(--text-invert);
}
.qe-hero__media--fallback::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(ellipse 60% 55% at 30% 40%, rgba(231, 190, 106, 0.22), transparent 68%);
}
.qe-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
    .qe-hero__bg-video { display: none; }
}
.qe-hero__media::after {
    /* Keeps the overlapping headline legible regardless of the uploaded photo. */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(0deg, rgba(5, 7, 13, 0.55), transparent 55%);
}

.qe-hero__marker {
    position: absolute; left: 28px; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 10px; z-index: 1;
}
.qe-hero__marker-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-invert-mut); }
.qe-hero__marker-dot.is-active { background: var(--brass-bright); box-shadow: 0 0 8px 1px rgba(231, 190, 106, 0.6); }

.qe-hero__content {
    position: relative; z-index: 1;
    max-width: var(--maxw-wide); margin-inline: auto; width: 100%;
    padding: 140px 40px 64px;
}
.qe-hero__headline { color: var(--text-invert); margin: 0 0 0.6rem; }
.qe-hero__subcopy { color: var(--text-invert-mut); max-width: 46ch; margin: 0; font-size: 0.94rem; }

.qe-band { background: var(--paper); border-bottom: 1px solid var(--line); }
.qe-band__inner {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: var(--space-3); padding-block: var(--space-3);
}
.qe-band__side { display: flex; flex-direction: column; gap: 0.6rem; }
.qe-band__side--video { align-items: flex-end; }
.qe-band__pagination { font-size: var(--fs-meta); color: var(--text-muted); letter-spacing: 0.08em; }
.qe-social { display: flex; gap: 0.7rem; }
.qe-social a { color: var(--brass-deep); display: inline-flex; transition: color 120ms ease; }
.qe-social a:hover { color: var(--brass); }

.qe-entry-paths { display: flex; gap: var(--space-3); width: 100%; max-width: 640px; }
.qe-entry-btn {
    flex: 1; display: flex; align-items: flex-start; gap: 0.7rem;
    border: none; border-radius: 8px; padding: 0.85rem 1.1rem; cursor: pointer;
    text-align: left; font-family: var(--font-body); transition: transform 150ms ease, filter 150ms ease;
}
.qe-entry-btn:hover { transform: translateY(-2px); }
.qe-entry-btn--navy { background: var(--navy); color: var(--text-invert); }
.qe-entry-btn--navy:hover { background: var(--navy-3); }
.qe-entry-btn--brass { background: var(--brass); color: var(--navy); }
.qe-entry-btn--brass:hover { background: var(--brass-deep); }
.qe-entry-btn__icon { width: 1.3rem; height: 1.3rem; flex: none; margin-top: 0.15rem; }
.qe-entry-btn__text { display: flex; flex-direction: column; gap: 0.25rem; }
.qe-entry-btn__text strong { font-size: 0.98rem; font-weight: 600; }
.qe-entry-btn__text span { font-size: 0.8rem; opacity: 0.75; font-weight: 400; }

.qe-play {
    position: relative; width: 52px; height: 52px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--navy); cursor: pointer;
    overflow: hidden; flex: none; padding: 0;
}
.qe-play__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qe-play__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.qe-play.is-playing .qe-play__video { display: block; }
.qe-play.is-playing .qe-play__poster,
.qe-play.is-playing .qe-play__icon { opacity: 0; }
.qe-play__icon {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--text-invert); background: rgba(5, 7, 13, 0.28); transition: opacity 150ms ease;
}
.qe-play__icon .icon { width: 1rem; height: 1rem; }

@media (max-width: 900px) {
    .qe-band__inner { grid-template-columns: 1fr; gap: var(--space-2); }
    .qe-band__side { flex-direction: row; align-items: center; justify-content: space-between; }
    .qe-band__side--video { order: -1; justify-content: flex-end; }
    .qe-entry-paths { flex-direction: column; max-width: none; }
    .qe-hero__content { padding: 120px 20px 48px; }
}

/* =====================================================================
   ---- 36. Path A popup - property-type + which-spaces (Stage B) ----
   Paper-family neumorphic Tactile surface (DESIGN-SYSTEM.md §5.7).
   200ms fade only, no slide motion.
   ===================================================================== */
.qe-popup-scrim {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(5, 7, 13, 0.6);
    opacity: 0; transition: opacity 200ms ease;
}
.qe-popup-scrim.is-open { opacity: 1; }

.qe-popup {
    position: fixed; z-index: 201;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(92vw, 640px); max-height: 86vh; overflow-y: auto;
    background: var(--paper-2); border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(5, 7, 13, 0.35);
    opacity: 0; transition: opacity 200ms ease;
}
.qe-popup.is-open { opacity: 1; }

.qe-popup__header {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: var(--sp-16); position: sticky; top: 0; background: var(--paper-2); z-index: 1;
}
.qe-popup__nav-btn {
    width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--paper-2); box-shadow: var(--neu-raised);
    display: flex; align-items: center; justify-content: center; color: var(--text);
    transition: box-shadow 120ms ease;
}
.qe-popup__nav-btn:active { box-shadow: var(--neu-pressed); }
.qe-popup__nav-btn .icon { width: 1rem; height: 1rem; }
.qe-popup__nav-btn[hidden] { visibility: hidden; }
#qePopupBack { justify-self: start; }
#qePopupClose { justify-self: end; }
.qe-popup__steps { display: flex; gap: 8px; justify-self: center; }
.qe-popup__step-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.qe-popup__step-dot.is-active { background: var(--brass); }

.qe-popup__body { padding: 0 var(--sp-24) var(--sp-24); }
.qe-popup__panel { display: none; }
.qe-popup__panel.is-active { display: block; }
.qe-popup__title { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 var(--sp-8); }
.qe-popup__hint { color: var(--text-muted); font-size: 0.92rem; margin: 0 0 var(--sp-16); }

.qe-popup__continue {
    width: 100%; margin-top: var(--sp-16); border: none; cursor: pointer;
    background: var(--brass); color: var(--navy); font-weight: 600;
    border-radius: var(--radius-sm); padding: 0.85rem; box-shadow: var(--neu-raised);
    font-family: var(--font-body); font-size: var(--fs-interface);
    transition: background 120ms ease, opacity 120ms ease;
}
.qe-popup__continue:hover:not(:disabled) { background: var(--brass-deep); }
.qe-popup__continue:disabled { opacity: 0.45; cursor: not-allowed; }

.qe-popup__footer { display: flex; gap: var(--sp-12); align-items: center; margin-top: var(--sp-16); }
.qe-popup__back-btn {
    border: none; cursor: pointer; background: var(--paper-2); box-shadow: var(--neu-raised);
    color: var(--text); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-interface);
    border-radius: var(--radius-sm); padding: 0.85rem 1.2rem; flex: none;
}
.qe-popup__back-btn:active { box-shadow: var(--neu-pressed); }
.qe-popup__footer .qe-popup__continue { margin-top: 0; }

/* ---- Property-type step ---- */
.pt-scroll {
    display: flex; gap: var(--sp-12); overflow-x: auto; scroll-snap-type: x mandatory;
    padding: var(--sp-12); border-radius: var(--radius-sm);
    background: var(--paper); box-shadow: var(--neu-pressed);
    overscroll-behavior-x: contain;
}
.pt-btn {
    flex: 0 0 auto; scroll-snap-align: start; min-width: 108px;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    border: none; cursor: pointer; background: var(--paper-2); box-shadow: var(--neu-raised);
    border-radius: var(--radius-sm); padding: var(--sp-12) var(--sp-8);
    font-family: var(--font-body); font-size: 0.82rem; font-weight: 500; color: var(--text);
    transition: box-shadow 150ms ease, color 150ms ease;
}
.pt-btn__icon { width: 1.4rem; height: 1.4rem; color: var(--text-muted); }
.pt-btn.is-selected { box-shadow: var(--neu-pressed); color: var(--brass-deep); font-weight: 600; }
.pt-btn.is-selected .pt-btn__icon { color: var(--brass-deep); }

.pt-preview {
    display: flex; align-items: center; gap: var(--sp-12); margin-top: var(--sp-16);
    background: var(--paper-2); box-shadow: var(--neu-raised);
    border-radius: var(--radius-sm); padding: var(--sp-16); min-height: 76px;
}
.pt-preview__icon {
    flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm);
    background: var(--paper-2); box-shadow: var(--neu-raised);
    display: flex; align-items: center; justify-content: center; color: var(--brass-deep);
    transition: opacity 150ms ease;
}
.pt-preview__icon .icon { width: 1.1rem; height: 1.1rem; }
.pt-preview__desc { margin: 0; color: var(--text-muted); font-size: 0.9rem; transition: opacity 150ms ease; }
.pt-preview__icon.is-fading, .pt-preview__desc.is-fading { opacity: 0; }

/* ---- Which-spaces step ---- */
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--sp-12); }
.ws-tile {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    background: var(--paper-2); box-shadow: var(--neu-raised);
    border-radius: var(--radius-sm); padding: var(--sp-16) var(--sp-8);
    transition: box-shadow 150ms ease;
}
.ws-tile.is-added { box-shadow: var(--neu-pressed); }
.ws-tile__icon { width: 1.4rem; height: 1.4rem; color: var(--text-muted); }
.ws-tile.is-added .ws-tile__icon { color: var(--brass-deep); }
.ws-tile__label { font-size: 0.86rem; font-weight: 500; color: var(--text); text-align: center; }
.ws-tile__control { display: flex; align-items: center; justify-content: center; min-height: 34px; }
.ws-tile__add {
    width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--paper-2); box-shadow: var(--neu-raised); color: var(--brass-deep);
    display: flex; align-items: center; justify-content: center;
}
.ws-tile__add:active { box-shadow: var(--neu-pressed); }
.ws-tile__add .icon { width: 0.85rem; height: 0.85rem; }
.ws-tile__add[hidden] { display: none; }
.ws-tile__stepper { display: flex; align-items: center; gap: 0.5rem; }
.ws-tile__stepper[hidden] { display: none; }
.ws-tile__step-btn {
    width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--paper-2); box-shadow: var(--neu-raised); color: var(--text);
    display: flex; align-items: center; justify-content: center;
}
.ws-tile__step-btn:active { box-shadow: var(--neu-pressed); }
.ws-tile__step-btn .icon { width: 0.7rem; height: 0.7rem; }
.ws-tile__count { min-width: 1.2rem; text-align: center; font-weight: 600; font-size: 0.92rem; }

.ws-summary { margin: var(--sp-16) 0 0; font-size: 0.88rem; color: var(--text-muted); font-weight: 500; }

@media (max-width: 560px) {
    /* 100vh on iOS Safari is the *largest* possible viewport (as if the
       collapsible address bar were already gone), taller than what's
       actually visible - a position:fixed element sized to it renders
       with its bottom (here, the footer/Continue button) below the real
       fold, and since the element is fixed the page can't scroll to
       reveal it. 100dvh tracks the real, current visible viewport;
       100vh stays first as a fallback for browsers without dvh support. */
    .qe-popup {
        width: 100vw; max-height: 100vh; height: 100vh;
        max-height: 100dvh; height: 100dvh;
        border-radius: 0; top: 0; left: 0; transform: none;
    }
}

/* =====================================================================
   ---- 37. Choose your lighting approach - tier selector (Stage C) ----
   VISUAL-DIRECTION.md §11B. Flat/Showroom layer for the scene, neumorphic
   Tactile layer for the card row - same layer boundary as everywhere else.
   ===================================================================== */
/* Fixed floating header (heroFloat) overlaps whatever scrolls to the very
   top of the viewport - scroll-margin-top keeps scrollIntoView() targets
   clear of it, same 90px offset used for Shop's sticky filter sidebar. */
.qe-tiers, #qeSelectionSummary { scroll-margin-top: 90px; }

.qe-tiers__eyebrow {
    font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.1em;
    color: var(--text-muted); margin: 0 0 var(--sp-12);
}
.qe-tiers__scene { position: relative; margin-bottom: var(--space-3); }
.qe-tiers__scene-inner { aspect-ratio: 21 / 9; }
.qe-tiers__scene-badge {
    position: absolute; bottom: var(--sp-16); left: var(--sp-16);
    background: var(--glass-panel); border: 1px solid var(--glass-border); backdrop-filter: blur(8px);
    color: var(--text-invert); font-size: var(--fs-meta); font-weight: 600;
    padding: 0.4rem 0.8rem; border-radius: 999px;
}

.qe-tier-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-16); }
.qe-tier-card {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
    background: var(--paper-2); box-shadow: var(--neu-raised); border: none; cursor: pointer;
    border-radius: var(--radius-sm); padding: var(--sp-16); text-align: left;
    font-family: var(--font-body); transition: box-shadow 150ms ease;
}
.qe-tier-card.is-selected { box-shadow: var(--neu-pressed); }
.qe-tier-card__badge {
    position: absolute; top: -10px; right: var(--sp-12);
    background: var(--brass); color: var(--navy); font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.06em; padding: 0.2rem 0.6rem; border-radius: 999px;
}
.qe-tier-card__radio {
    width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none;
    position: relative;
}
.qe-tier-card.is-selected .qe-tier-card__radio { border-color: var(--brass-deep); }
.qe-tier-card.is-selected .qe-tier-card__radio::after {
    content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--brass-deep);
}
.qe-tier-card__name { font-family: var(--font-display); font-size: 1.15rem; }
.qe-tier-card__tagline { font-size: 0.84rem; color: var(--text-muted); }
.qe-tier-card__price { font-size: 0.8rem; color: var(--brass-deep); font-weight: 600; margin-top: 0.25rem; }

.qe-tiers__description { color: var(--text-muted); margin: var(--space-3) 0 var(--sp-8); font-size: 0.96rem; }
.qe-tiers__includes { margin: 0 0 var(--space-3); padding-left: 1.2rem; color: var(--text); }
.qe-tiers__includes li { margin-bottom: 0.3rem; }

@media (max-width: 720px) {
    .qe-tier-cards { grid-template-columns: 1fr; }
}

/* =====================================================================
   ---- 38. Path B - room selector + product browser (Stage D) ----
   VISUAL-DIRECTION.md §9A. Same popup shell/surface language as Path A.
   ===================================================================== */
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-12); }
.room-tile {
    display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
    background: var(--paper-2); box-shadow: var(--neu-raised); border: none; cursor: pointer;
    border-radius: var(--radius-sm); padding: var(--sp-24) var(--sp-8);
    font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; color: var(--text);
    transition: box-shadow 150ms ease;
}
.room-tile:hover { box-shadow: var(--neu-pressed); }
.room-tile__icon { width: 1.6rem; height: 1.6rem; color: var(--brass-deep); }

.pb-scene { margin-bottom: var(--sp-16); }
.pb-scene-inner { aspect-ratio: 21 / 9; }

.pb-tabs {
    display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: var(--sp-8); margin-bottom: var(--sp-16);
    overscroll-behavior-x: contain;
}
.pb-tab {
    flex: none; border: 1px solid var(--line); background: var(--paper-2); cursor: pointer;
    border-radius: 999px; padding: 0.45rem 1rem; font-family: var(--font-body); font-size: 0.84rem;
    font-weight: 500; color: var(--text-muted); white-space: nowrap; transition: all 120ms ease;
}
.pb-tab:hover { border-color: var(--brass); }
/* Already has a line in the current space's plan (pre-filled or manually
   added) - distinct from .is-active, which marks whichever category is
   currently open in the picker below. Declared before .is-active so the
   "open" state visually wins when a chip is both. */
.pb-tab.is-added { border-color: var(--brass-deep); color: var(--brass-deep); font-weight: 600; }
.pb-tab.is-added::before { content: "✓ "; }
.pb-tab.is-active { background: var(--navy); color: var(--text-invert); border-color: var(--navy); }

.pb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-16); margin-bottom: var(--sp-16); }
.pb-card { display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius-sm); overflow: hidden; }
.pb-card__media { aspect-ratio: 1 / 1; background: var(--navy-2); }
.pb-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pb-card__body { padding: var(--sp-8) 0.2rem; }
.pb-card__name { font-size: 0.86rem; font-weight: 500; margin: 0 0 0.3rem; line-height: 1.3; }
.pb-card__meta { display: flex; align-items: center; gap: 0.4rem; }
.pb-card__price { font-size: 0.82rem; color: var(--text-muted); }
.pb-card__actions { display: flex; align-items: center; justify-content: space-between; padding: 0.2rem; }
.pb-add {
    border: none; cursor: pointer; background: var(--brass); color: var(--navy); font-weight: 600;
    font-size: 0.78rem; padding: 0.4rem 0.7rem; border-radius: var(--radius-sm); font-family: var(--font-body);
    transition: background 120ms ease;
}
.pb-add:hover { background: var(--brass-deep); }
.pb-add.is-added { background: var(--paper-2); color: var(--text-muted); box-shadow: var(--neu-pressed); }

.pb-selection { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--sp-16); min-height: 1px; }
.pb-chip {
    display: inline-flex; align-items: center; gap: 0.5rem; background: var(--paper); border: 1px solid var(--line);
    border-radius: 999px; padding: 0.35rem 0.5rem 0.35rem 0.9rem; font-size: 0.84rem; color: var(--text);
}
.pb-chip button {
    border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 1rem;
    line-height: 1; padding: 0 0.2rem;
}
.pb-chip button:hover { color: var(--danger, #9A3527); }

/* =====================================================================
   ---- 39. Add Lighting working canvas (Stage E) ----
   VISUAL-DIRECTION.md §11, DESIGN-SYSTEM.md §5.7A. All three visual
   layers at once: Architectural (tabs/grid), Showroom (scene), Tactile
   (the add-lighting panel) - the richest composite screen on the site.
   ===================================================================== */
.qe-canvas { scroll-margin-top: 90px; }
.qe-canvas__eyebrow {
    text-align: center; font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.1em;
    color: var(--brass-deep); text-transform: uppercase; margin: 0 0 var(--sp-16);
}
.qe-canvas__header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-12); margin-bottom: var(--sp-16); }
.qe-canvas__tabs { display: flex; gap: 0.6rem; overflow-x: auto; justify-content: center; overscroll-behavior-x: contain; }
.qe-canvas__tab {
    flex: none; font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
    color: var(--text-muted); background: var(--paper-2); border: none; border-radius: 999px;
    padding: 0.4rem 0.9rem; cursor: pointer; transition: background 120ms ease, color 120ms ease;
}
.qe-canvas__tab:hover:not(.is-current) { background: var(--paper); color: var(--text); }
.qe-canvas__tab.is-current { background: var(--brass); color: var(--navy); cursor: default; }
.qe-canvas__tab.is-done { color: var(--brass-deep); }

.qe-canvas__prefill {
    background: rgba(201, 154, 70, 0.12); border: 1px solid var(--line); color: var(--text);
    padding: 0.6rem 1rem; border-radius: var(--radius-sm); font-size: 0.86rem; margin-bottom: var(--sp-16);
}

.qe-canvas__scene { position: relative; }

/* Icon marker + warm glow overlay (DESIGN-SYSTEM.md §5.7A, VISUAL-
   DIRECTION.md §11 v3 "Markers are category icons, not plain dots") -
   full-bleed layer over the scene photo; each .qe-marker is placed at
   its own left/top % (set inline per marker, quote-entry.js's
   markerPosition()), not stacked in a bottom strip. Shared by the Add
   Lighting canvas (#qeCanvasMarkers) and the Live Lighting Plan's space
   switcher (#qePlanMarkers, §12 v2), which additionally makes each
   marker a clickable button that opens a price popover. */
.qe-canvas__markers { position: absolute; inset: 0; z-index: 2; }
.qe-marker {
    position: absolute; transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 0.4rem;
    background: none; border: none; padding: 0; cursor: default; font-family: var(--font-body);
    opacity: 0; animation: qeMarkerIn 200ms ease forwards;
}
button.qe-marker { cursor: pointer; }
.qe-marker.is-leaving { animation: qeMarkerOut 180ms ease forwards; }
@keyframes qeMarkerIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes qeMarkerOut { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } }

/* Soft radial warm glow behind each badge - multiple glows overlap and
   accumulate (mix-blend-mode: screen) as more fixtures are added, per
   the "perceived room brightening" effect §5.7A calls for, without
   touching the underlying photo. */
.qe-marker__glow {
    position: absolute; left: 50%; top: 50%; width: 84px; height: 84px;
    transform: translate(-50%, -50%); border-radius: 50%; z-index: 0; pointer-events: none;
    background: radial-gradient(circle, var(--glow-brass) 0%, rgba(231, 190, 106, 0.18) 45%, transparent 72%);
    mix-blend-mode: screen;
}
.qe-marker__badge {
    position: relative; z-index: 1; flex: none;
    width: 22px; height: 22px; border-radius: 50%; background: var(--brass);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(5, 7, 13, 0.4);
}
.qe-marker__badge .icon { width: 13px; height: 13px; color: var(--navy); }
/* Switches & Sockets - rounded-square ti-plug badge at wall/socket
   height rather than the circular ceiling/task-height badge. */
.qe-marker--square .qe-marker__badge { width: 18px; height: 18px; border-radius: 5px; }
.qe-marker__label {
    position: relative; z-index: 1; white-space: nowrap;
    background: var(--glass-panel); border: 1px solid var(--glass-border); backdrop-filter: blur(8px);
    color: var(--text-invert); font-size: 0.72rem; font-weight: 600; line-height: 1.2;
    padding: 0.25rem 0.6rem; border-radius: 999px;
}
@media (prefers-reduced-motion: reduce) {
    .qe-marker { animation: none; opacity: 1; }
    .qe-marker.is-leaving { animation: none; }
}

.qe-canvas__panel {
    background: var(--paper-2); box-shadow: var(--neu-raised); border-radius: var(--radius-sm);
    padding: var(--sp-24); margin-top: var(--sp-16);
}
.qe-canvas__panel-title { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 0.2rem; }
.qe-canvas__panel-hint { color: var(--text-muted); font-size: 0.86rem; margin: 0 0 var(--sp-16); }

.qe-canvas__product-picker { margin-top: var(--sp-16); }
.qe-canvas__product-row { display: flex; gap: 0.7rem; overflow-x: auto; padding-bottom: var(--sp-8); margin-bottom: var(--sp-8); overscroll-behavior-x: contain; }
.qe-canvas__product-thumb {
    flex: none; width: 84px; display: flex; flex-direction: column; gap: 0.4rem; border: none; cursor: pointer;
    background: var(--paper); border-radius: var(--radius-sm); padding: 0.4rem; text-align: center;
    box-shadow: var(--neu-raised); transition: box-shadow 120ms ease;
}
.qe-canvas__product-thumb.is-selected { box-shadow: var(--neu-pressed); }
.qe-canvas__product-thumb img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 4px; background: var(--navy-2); }
.qe-canvas__product-thumb span { font-size: 0.7rem; color: var(--text); line-height: 1.25; }

.qe-canvas__add-row { display: flex; align-items: center; gap: var(--sp-16); margin-top: var(--sp-16); }
.qe-canvas__stepper { background: var(--paper); border-radius: 999px; padding: 0.3rem 0.7rem; box-shadow: var(--neu-pressed); }
.qe-canvas__add-btn { padding: 0.55rem 1.2rem; }

.qe-canvas__summary-heading { font-size: 0.84rem; font-weight: 600; color: var(--text-muted); margin: var(--sp-24) 0 var(--sp-8); }

@media (max-width: 720px) {
    /* Scoped to #qeCanvas specifically - its header has a 3rd "tabs" child
       that needs to wrap to its own row. #qePlan and #qeSubmit reuse this
       same header class but only have back/title/close (no tabs row), so
       they must keep the original 3-column grid or the 3rd child (close)
       wraps underneath the 1st (back) instead of sitting on the right. */
    #qeCanvas .qe-canvas__header { grid-template-columns: auto auto; }
    .qe-canvas__tabs { order: 3; grid-column: 1 / -1; justify-content: flex-start; }
}

/* =====================================================================
   ---- 40. Live Lighting Plan review (Stage F) ----
   VISUAL-DIRECTION.md §12. Both quotation paths converge here - one of
   the site's 4 budgeted Tier-1 tactile moments (Submit for expert review).
   ===================================================================== */
.qe-plan { scroll-margin-top: 90px; }
.qe-plan__switcher { justify-content: center; margin-bottom: var(--sp-16); }

.qe-plan__popover {
    position: relative; margin-top: -var(--sp-8); margin-bottom: var(--sp-16);
    background: var(--paper-2); box-shadow: var(--neu-raised); border-radius: var(--radius-sm);
    padding: var(--sp-16); display: flex; flex-direction: column; gap: 0.2rem;
}
.qe-plan__popover strong { font-family: var(--font-display); font-size: 1.05rem; }
.qe-plan__popover span { color: var(--text-muted); font-size: 0.86rem; }

.qe-plan__estimate {
    background: var(--paper-2); box-shadow: var(--neu-raised); border-radius: var(--radius-sm);
    padding: var(--sp-24); margin-top: var(--sp-16);
}
.qe-plan__estimate-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-16); }
.qe-plan__estimate-head h3 { font-family: var(--font-display); font-size: 1.1rem; margin: 0; }
.qe-plan__tier-badge {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    background: var(--brass); color: var(--navy); padding: 0.25rem 0.7rem; border-radius: 999px;
}
.qe-plan__rows { display: flex; flex-direction: column; gap: 0.5rem; }
.qe-plan__row { display: flex; justify-content: space-between; font-size: 0.92rem; color: var(--text-muted); }
.qe-plan__row.is-current { color: var(--text); font-weight: 600; }
.qe-plan__total {
    display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--sp-16);
    padding-top: var(--sp-16); border-top: 1px solid var(--line);
    font-family: var(--font-display); font-size: 1.3rem; color: var(--brass-deep); font-weight: 600;
}

.qe-plan__trust { color: var(--text-muted); font-size: 0.86rem; text-align: center; margin: var(--sp-16) 0; }

/* On a Paper/light section (unlike .btn-t1-dimmer's usual dark-band
   placement) - the base component's --text-invert label would be
   near-white on a near-white page, so this variant overrides it. */
.btn-t1-dimmer--full { width: 100%; justify-content: space-between; color: var(--text); }
.btn-t1-dimmer--full .btn-t1-dimmer__track { flex: 1; }

/* =====================================================================
   ---- 41. Submit for Expert Review (Stage G) ----
   VISUAL-DIRECTION.md §12A, DESIGN-SYSTEM.md §5.7C. The one point in the
   flow that's genuinely a form, not a picker/canvas - recessed
   neumorphic fields (inverted from raised buttons), plan recap strip in
   dark Navy, real submission through the existing pipeline.
   ===================================================================== */
.qe-recap {
    background: var(--navy-2); color: var(--text-invert); border-radius: var(--radius-sm);
    padding: var(--sp-16) var(--sp-24); margin-bottom: var(--space-3);
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; font-size: 0.9rem;
}
.qe-recap strong { color: var(--brass-bright); font-family: var(--font-display); font-size: 1.05rem; }

.qe-form-field { margin-bottom: var(--space-2); }
.qe-form-field label {
    display: block; font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem;
}
.qe-form-field input, .qe-form-field textarea {
    width: 100%; border: none; border-radius: var(--radius-sm); background: var(--paper-2);
    box-shadow: var(--neu-pressed); padding: 0.75rem 1rem; font-family: var(--font-body);
    font-size: var(--fs-interface); color: var(--text);
}
.qe-form-field input:focus-visible, .qe-form-field textarea:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.qe-form-field textarea { resize: vertical; }
.qe-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

.qe-contact-method { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.qe-contact-method__option {
    display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
    background: var(--paper-2); box-shadow: var(--neu-raised); border-radius: 999px;
    padding: 0.6rem 1rem; font-size: 0.9rem; color: var(--text); transition: box-shadow 120ms ease;
}
.qe-contact-method__option .icon { width: 1rem; height: 1rem; color: var(--text-muted); }
.qe-contact-method__option input { position: absolute; opacity: 0; width: 0; height: 0; }
.qe-contact-method__option:has(input:checked) { box-shadow: var(--neu-pressed); color: var(--brass-deep); font-weight: 600; }
.qe-contact-method__option:has(input:checked) .icon { color: var(--brass-deep); }
/* The radio itself is visually hidden at 0x0, so a keyboard focus ring on
   it would be invisible - apply it to the visible label wrapper instead. */
.qe-contact-method__option:has(input:focus-visible) { outline: 2px solid var(--brass-deep); outline-offset: 2px; }

.qe-form-error {
    background: #F6E2DE; color: #9A3527; padding: 0.75rem 1rem; border-radius: var(--radius-sm);
    font-size: 0.86rem; margin-bottom: var(--space-2);
}

@media (max-width: 560px) {
    .qe-form-row { grid-template-columns: 1fr; }
}

/* These sections are only ever focused programmatically (moving
   accessibility focus when a new step appears, VISUAL-DIRECTION.md's
   flow has no page navigations to do this automatically) - never a
   real Tab stop, so no visible ring is needed here. */
#qeTiers:focus-visible, #qeCanvas:focus-visible, #qePlan:focus-visible, #qeSubmit:focus-visible { outline: none; }

/* =====================================================================
   ---- 42. Admin shell + sidebar (DESIGN-SYSTEM.md §16) ----
   Phase 2 preview - dark neumorphic nav, reference pattern for admin
   UI generally once the full build starts. Same Navy/Brass tokens and
   neumorphic Tactile Layer technique as the customer-facing quote flow
   (mirrors .nav-drawer's active-pill/scrim/overlay mechanics directly).
   ===================================================================== */
.admin-body { background: var(--paper); }
.admin-shell { display: flex; align-items: flex-start; min-height: 100vh; }

.admin-sidebar-scrim {
    position: fixed; inset: 0; z-index: 89;
    background: rgba(2, 3, 7, 0.5);
    opacity: 0; visibility: hidden;
    transition: opacity 220ms ease;
}
.admin-sidebar-scrim.is-open { opacity: 1; visibility: visible; }

.admin-sidebar {
    flex: none; width: 264px; min-height: 100vh;
    background: var(--navy-2); color: var(--text-invert);
    display: flex; flex-direction: column;
    padding: var(--sp-16) var(--sp-16) var(--sp-24);
    position: sticky; top: 0;
    transition: width 220ms var(--ease);
}

.admin-sidebar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-24); flex: none; }
.admin-sidebar__logo { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.04em; color: var(--text-invert); white-space: nowrap; overflow: hidden; }
.admin-sidebar__logo-img { display: block; height: 24px; width: auto; }
.admin-sidebar__collapse {
    width: 36px; height: 36px; border-radius: var(--radius-sm); flex: none;
    background: none; border: none; color: var(--text-invert-mut); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background 120ms ease, color 120ms ease;
}
.admin-sidebar__collapse .icon { width: 1.1rem; height: 1.1rem; }
.admin-sidebar__collapse:hover { color: var(--text-invert); background: var(--navy-3); }

.admin-sidebar__nav { display: flex; flex-direction: column; gap: 4px; flex: none; margin-bottom: var(--sp-24); }
.admin-sidebar__item {
    display: flex; align-items: center; gap: var(--sp-16);
    width: 100%; padding: 11px 14px; border-radius: 14px;
    text-decoration: none; color: #8892a3;
    transition: color 150ms ease;
}
.admin-sidebar__item:hover { color: #b7bece; }
.admin-sidebar__item .icon { width: 1.15rem; height: 1.15rem; color: #5c6577; flex: none; transition: color 150ms ease; }
.admin-sidebar__item:hover .icon { color: #7a8494; }
.admin-sidebar__item-label { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-interface); white-space: nowrap; overflow: hidden; flex: 1; }
.admin-sidebar__count { font-size: var(--fs-meta); color: #6b7484; font-weight: 500; flex: none; }

/* Only the active item gets the raised pill - dark-variant neumorphism,
   reserved for the active item only (§16.2). */
.admin-sidebar__item.is-active { background: #111E24; box-shadow: var(--neu-raised-dark); }
.admin-sidebar__item.is-active:hover { color: #8892a3; }
.admin-sidebar__item.is-active .icon { color: var(--brass-bright); }
.admin-sidebar__item.is-active .admin-sidebar__item-label { color: var(--paper); font-weight: 600; }

/* ---- Video showcase panel ---- */
.admin-sidebar__video { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.admin-video {
    position: relative; isolation: isolate; overflow: hidden;
    background: rgba(10, 16, 32, 0.7); border-radius: 14px;
    aspect-ratio: 16 / 9; width: 100%;
}
.admin-video__poster, .admin-video__el {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
    .admin-video__el { display: none; }
}
.admin-video__dot {
    position: absolute; top: 10px; right: 10px; width: 6px; height: 6px; border-radius: 50%;
    background: var(--brass-bright); box-shadow: 0 0 6px 1px rgba(231, 190, 106, 0.7);
    animation: adminVideoPulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .admin-video__dot { display: none; }
}
@keyframes adminVideoPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
}
.admin-video__badge {
    position: absolute; top: 10px; left: 10px; z-index: 1;
    background: var(--brass); color: var(--navy); font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.03em; padding: 0.25rem 0.6rem; border-radius: 999px;
}
.admin-video__caption { margin: var(--sp-12) 4px 0; font-size: 0.84rem; color: var(--text-invert-mut); }

/* ---- Collapsed (desktop icon-rail) state ---- */
.admin-sidebar.is-collapsed { width: 76px; }
.admin-sidebar.is-collapsed .admin-sidebar__logo,
.admin-sidebar.is-collapsed .admin-sidebar__item-label,
.admin-sidebar.is-collapsed .admin-sidebar__count,
.admin-sidebar.is-collapsed .admin-sidebar__video { display: none; }
.admin-sidebar.is-collapsed .admin-sidebar__head { justify-content: center; }
.admin-sidebar.is-collapsed .admin-sidebar__item { justify-content: center; padding: 11px; }

/* ---- Admin content + mobile topbar ---- */
.admin-content { flex: 1; min-width: 0; }
.admin-topbar { display: none; padding: var(--sp-12) var(--sp-16); border-bottom: 1px solid var(--line); }
.admin-topbar__menu {
    width: 40px; height: 40px; border-radius: var(--radius-sm);
    background: var(--paper-2); border: none; color: var(--text); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.admin-topbar__menu .icon { width: 1.1rem; height: 1.1rem; }
.admin-main { min-height: 60vh; }

body:has(.admin-sidebar.is-open) { overflow: hidden; }

@media (max-width: 900px) {
    .admin-topbar { display: flex; }
    /* Mobile: the sidebar is never docked - always an off-canvas overlay,
       never covering the full screen (§16.3), max ~50% viewport width. */
    .admin-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 90;
        width: 50%; min-width: 280px; max-width: 420px;
        box-shadow: 24px 0 60px -24px rgba(0, 0, 0, 0.6);
        transform: translateX(-100%);
        transition: transform 280ms var(--ease);
    }
    .admin-sidebar.is-open { transform: translateX(0); }
    .admin-sidebar.is-collapsed { width: 50%; min-width: 280px; max-width: 420px; }
    .admin-sidebar.is-collapsed .admin-sidebar__logo,
    .admin-sidebar.is-collapsed .admin-sidebar__item-label,
    .admin-sidebar.is-collapsed .admin-sidebar__count,
    .admin-sidebar.is-collapsed .admin-sidebar__video { display: block; }
    .admin-sidebar.is-collapsed .admin-sidebar__video { display: flex; flex-direction: column; }
    .admin-sidebar.is-collapsed .admin-sidebar__head { justify-content: space-between; }
    .admin-sidebar.is-collapsed .admin-sidebar__item { justify-content: flex-start; padding: 11px 14px; }
}

/* =====================================================================
   ---- 43. Resume-Quotation badge + "My Quotations" popover ----
   DESIGN-SYSTEM.md §17 / VISUAL-DIRECTION.md §14B. Browser-only, no
   login - see quote-sessions.js.
   ===================================================================== */
.quote-nav-badge {
    position: absolute; top: -4px; right: -4px; z-index: 2;
    min-width: 16px; height: 16px; padding: 0 3px;
    border-radius: 999px; background: var(--navy); border: 1.5px solid var(--brass);
    color: var(--brass); font-size: 0.62rem; font-weight: 700; font-family: var(--font-body);
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.quote-nav-badge[role="button"] { cursor: pointer; }
.quote-nav-badge[role="button"]:hover { background: var(--navy-3); }

.qsp-scrim { position: fixed; inset: 0; z-index: 199; background: transparent; }
.qsp {
    position: absolute; z-index: 200; width: min(92vw, 340px);
    background: var(--paper-2); box-shadow: var(--neu-raised); border-radius: var(--radius);
    padding: var(--sp-16); opacity: 0; animation: qspIn 150ms ease forwards;
}
@keyframes qspIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.qsp__heading { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 var(--sp-12); color: var(--text); }
.qsp__list { display: flex; flex-direction: column; gap: var(--sp-8); margin-bottom: var(--sp-16); }
.qsp__row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12);
    background: var(--paper); border-radius: var(--radius-sm); padding: 0.65rem 0.85rem;
}
.qsp__row-text { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.86rem; }
.qsp__row-text strong { font-weight: 600; color: var(--text); }
.qsp__row-text span { color: var(--text-muted); font-size: 0.78rem; }
.qsp__new { width: 100%; justify-content: center; text-align: center; }

/* ---- Resumed-session "start fresh" strip inside the quote flow ----
   /quote uses the float-then-solidify header ($heroFloat), which is
   position:fixed and transparent so it can sit over the dark hero. The
   strip renders before the hero, as opaque page content rather than a
   hero backdrop, so - unlike the hero - it needs its own clearance to
   avoid sitting underneath the fixed header. */
#qeResumeStripWrap:not([hidden]) { padding-top: calc(70px + var(--sp-16)); }
.qe-resume-strip {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-16);
    background: rgba(201, 154, 70, 0.12); border: 1px solid var(--line); color: var(--text);
    padding: 0.75rem 1rem; border-radius: var(--radius-sm); margin: 0 0 var(--sp-16); font-size: 0.9rem;
}
.qe-resume-strip strong { color: var(--brass-deep); }

/* =====================================================================
   ---- 44. Admin product upload - Bulk Add, Group/Multi-Angle Add,
   Presets (DESIGN-SYSTEM.md §16A) ----
   Mobile-first by requirement: checkbox lists and pill tags sized for
   touch (44px min target), single-column stacking, no dense desktop
   forms. Reuses the Shop filter's .filter-checkbox glyph (§18) and the
   quotation canvas's .pb-tab pill (§11) rather than inventing new
   selection affordances.
   ===================================================================== */
.admin-page { padding-block: var(--space-4); }
.admin-page__head { margin-bottom: var(--space-3); }
.admin-page__title { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 0.35rem; }
.admin-page__lead { color: var(--text-muted); margin: 0; }
.admin-back { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: var(--space-2); }

.admin-notice, .admin-error {
    padding: 0.75rem 1rem; border-radius: var(--radius-sm); margin-bottom: var(--space-3); font-size: 0.92rem;
}
.admin-notice { background: rgba(201,154,70,0.14); color: var(--text); border: 1px solid var(--line); }
.admin-error { background: #F6E2DE; color: #9A3527; }

/* Three-mode entry cards (Single / Bulk / Group) */
.admin-mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.admin-mode-card {
    display: block; background: var(--paper-2); box-shadow: var(--neu-raised); border-radius: var(--radius);
    padding: var(--space-3); text-decoration: none; color: var(--text); transition: box-shadow 150ms ease;
}
.admin-mode-card:hover { box-shadow: var(--neu-pressed); }
.admin-mode-card.is-disabled { opacity: 0.55; pointer-events: none; }
.admin-mode-card__icon { width: 1.7rem; height: 1.7rem; color: var(--brass-deep); margin-bottom: var(--sp-12); }
.admin-mode-card__name { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 0.3rem; }
.admin-mode-card__body { font-size: 0.88rem; color: var(--text-muted); margin: 0; }
.admin-mode-card__badge {
    display: inline-block; margin-top: var(--sp-8); font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted);
}
.admin-presets-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: var(--space-3); }

/* Upload grid - thumbnails + "+" add tile */
.admin-upload-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-12); margin-bottom: var(--space-3); align-items: start; }
.admin-thumb-cell { display: flex; flex-direction: column; gap: 6px; }
.admin-thumb {
    position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden;
    background: var(--paper-2); box-shadow: var(--neu-raised);
}
.admin-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-thumb__remove {
    position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(5,7,13,0.72); color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.admin-thumb__remove .icon { width: 0.85rem; height: 0.85rem; }
.admin-thumb__position {
    position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; padding: 0 5px;
    border-radius: 999px; background: var(--brass); color: var(--navy); font-size: 0.72rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.admin-thumb__move { position: absolute; bottom: 6px; display: flex; gap: 4px; left: 6px; right: 6px; justify-content: space-between; }
.admin-thumb__move button {
    width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(5,7,13,0.72); color: #fff; display: flex; align-items: center; justify-content: center;
}
.admin-thumb__move button .icon { width: 0.8rem; height: 0.8rem; }
.admin-thumb__move button:disabled { opacity: 0.35; cursor: default; }
.admin-thumb__title {
    width: 100%; margin-top: 6px; border: 1px solid var(--line); border-radius: 6px;
    padding: 0.3rem 0.5rem; font-size: 0.78rem; font-family: var(--font-body); background: var(--paper);
}
.admin-upload-add {
    aspect-ratio: 1; border-radius: var(--radius-sm); border: 1.5px dashed var(--line);
    background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 0.4rem; color: var(--text-muted); font-size: 0.8rem; font-family: var(--font-body);
}
.admin-upload-add:hover { border-color: var(--brass); color: var(--brass-deep); }
.admin-upload-add .icon { width: 1.4rem; height: 1.4rem; }
.admin-upload-count { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 var(--space-2); }

/* Either/or: Use a preset vs Write new instead */
.admin-either-or { display: flex; gap: 0.5rem; margin-bottom: var(--space-3); }
.admin-either-or__btn {
    flex: 1; padding: 0.7rem 0.5rem; border-radius: var(--radius-sm); border: 1px solid var(--line);
    background: var(--paper); color: var(--text-muted); font-family: var(--font-body); font-weight: 600;
    font-size: 0.88rem; cursor: pointer; min-height: 44px;
}
.admin-either-or__btn.is-active { background: var(--navy); color: var(--text-invert); border-color: var(--navy); }

.admin-preset-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: var(--space-3); }

/* Checkbox / radio rows (Category, Suitable Space, Light Type) - real
   inputs for a plain HTML form to submit correctly with no JS required;
   Category and Light Type use type=radio under the hood (single-select,
   products.category_id/light_type are single-value columns) but share
   the exact same square-checkbox visual per §16A's "same checkbox
   pattern" instruction - the input type is invisible either way. */
.admin-field { margin-bottom: var(--space-3); }
.admin-field__label {
    display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: var(--sp-8);
}
.admin-check-list { display: flex; flex-direction: column; gap: 0.3rem; }
.admin-check {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.6rem; border-radius: var(--radius-sm);
    min-height: 44px; cursor: pointer; font-size: 0.92rem;
}
.admin-check:hover { background: var(--paper-2); }
.admin-check input {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.admin-check:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 2px; }
.admin-check input:checked ~ .filter-checkbox { background: var(--brass); border-color: var(--brass); }
.admin-check input:checked ~ .filter-checkbox .icon { opacity: 1; }
.admin-check__count { margin-left: auto; font-size: 0.78rem; color: var(--text-muted); }

/* Style pill tags - multi-select, same visual as the quotation canvas's
   category chips (.pb-tab) so "pill tag" reads as one consistent
   component across the whole system, not a second pattern. */
.admin-pill-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.admin-pill { position: relative; }
.admin-pill input {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.admin-pill label {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border-radius: 999px;
    border: 1px solid var(--line); background: var(--paper-2); font-size: 0.86rem; font-weight: 500;
    color: var(--text-muted); cursor: pointer; transition: all 120ms ease;
}
.admin-pill input:checked ~ label { background: var(--navy); color: var(--text-invert); border-color: var(--navy); }
.admin-pill input:focus-visible ~ label { outline: 2px solid var(--brass); outline-offset: 2px; }

.admin-text-input, .admin-textarea, .admin-select {
    width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper);
    padding: 0.65rem 0.8rem; font-family: var(--font-body); font-size: 0.94rem; color: var(--text);
}
.admin-textarea { min-height: 90px; resize: vertical; }
.admin-form-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: var(--space-3); }

.admin-preset-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--paper-2); border-radius: var(--radius-sm); padding: var(--sp-12) var(--sp-16);
}
.admin-preset-row__name { font-weight: 600; }
.admin-preset-row__meta { font-size: 0.8rem; color: var(--text-muted); }
.admin-preset-row__actions { display: flex; gap: 0.5rem; flex: none; }

/* Dashboard home stat cards. */
.admin-dashboard-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-12); margin-bottom: var(--space-3); }
.admin-stat-card {
    background: var(--paper-2); border-radius: var(--radius-sm); padding: var(--sp-16);
    display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit;
    box-shadow: var(--neu-raised); transition: box-shadow 120ms ease;
}
.admin-stat-card:hover { box-shadow: var(--neu-pressed); }
.admin-stat-card__number { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; color: var(--navy); }
.admin-stat-card__label { font-size: 0.8rem; color: var(--text-muted); }

/* Quotation/Lead Management (IMPLEMENTATION-INDEX.md §5.2) - status pill
   reuses the same tone vocabulary as availability_tone()/.status-dot. */
.quote-status-pill {
    display: inline-block; font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 2px 9px; border-radius: 999px; vertical-align: middle; margin-left: 0.5rem;
}
.quote-status-pill--ok    { background: rgba(127,166,107,0.16); color: #4d6a3d; }
.quote-status-pill--muted { background: rgba(201,123,70,0.16); color: #8a5730; }
.quote-status-pill--off   { background: rgba(138,130,117,0.18); color: #6b6459; }

/* Read-only annotated scene grid - reuses .scene/.qe-canvas__markers/
   .qe-marker as-is (see AdminQuoteController::buildScenes()). */
.quote-scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-16); }
.quote-scene__label { font-size: 0.82rem; font-weight: 600; margin: 0 0 6px; }

/* Admin sub-navigation tabs - groups sidebar items that outgrew a single
   destination (Products: Add Products / Categories / Spaces / Tiers). */
.admin-subnav { display: flex; gap: 0.25rem; margin-bottom: var(--space-3); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.admin-subnav__item {
    padding: 0.55rem 0.9rem; font-size: 0.88rem; font-weight: 500; color: var(--text-muted);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.admin-subnav__item:hover { color: var(--text); }
.admin-subnav__item.is-active { color: var(--navy); border-bottom-color: var(--brass); font-weight: 600; }

/* Reusable admin media-field widget - embeddable in any admin screen
   (IMPLEMENTATION-INDEX.md §5.1 "Media management"). */
.admin-media-list { display: flex; flex-direction: column; gap: var(--space-3); }
.admin-media-field {
    background: var(--paper-2); border-radius: var(--radius-sm);
    padding: var(--sp-16); box-shadow: var(--neu-raised);
}
.admin-media-field__head { margin-bottom: var(--sp-12); }
.admin-media-field__title { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 0.2rem; }
.admin-media-field__help { font-size: 0.82rem; color: var(--text-muted); margin: 0; }
.admin-media-field__preview {
    position: relative; width: 100%; max-width: 320px; aspect-ratio: 16/9;
    border-radius: var(--radius-sm); overflow: hidden; background: var(--navy);
    display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-12);
}
.admin-media-field__preview img,
.admin-media-field__preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-media-field__fallback .icon { width: 1.6rem; height: 1.6rem; color: var(--text-invert-mut); }
.admin-media-field__row { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; margin-bottom: var(--space-2); }
.admin-media-field__row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-items: start; }
.admin-media-field__row .admin-field { margin-bottom: 0; flex: 1 1 220px; }
.admin-media-field__remove { flex: none; white-space: nowrap; padding-bottom: 0.6rem; }

@media (max-width: 720px) {
    .admin-mode-grid { grid-template-columns: 1fr; }
    .admin-upload-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-media-field__row--split { grid-template-columns: 1fr; }
}

.admin-field__hint { font-weight: 400; color: var(--text-muted); font-size: 0.82em; }

/* =====================================================================
   Campaign Landing Pages (DESIGN-SYSTEM.md §22) - the public-facing
   page. Deliberately its own component family: full-bleed video/image
   background (no separate solid-colour section), a scoped red-glass
   headline highlight (the one sanctioned exception to the site's
   single-accent Brass rule - must never be reused elsewhere), and
   Glass Panel form fields that let the background stay visible through
   them. Rendered by View::renderBare(), so this page has no shared
   header.php/footer.php nav at all - every rule needed lives here.
   ===================================================================== */
.campaign-page {
    position: relative; min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column;
    overflow: hidden; background: var(--navy);
}

.campaign-bg { position: fixed; inset: 0; z-index: 0; background: var(--navy); }
.campaign-bg__media { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Bottom-up vignette layered over the media (not a separate flat-colour
   section) - keeps the form legible without a hard boundary line. */
.campaign-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(5,7,13,0.88) 0%, rgba(5,7,13,0.45) 40%, rgba(5,7,13,0.08) 70%, transparent 100%);
}

.campaign-topbar {
    position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-2) var(--space-3);
}
.campaign-topbar__logo { display: flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.campaign-topbar__logo img { height: 28px; width: auto; display: block; }
.campaign-topbar__logo span { font-family: var(--font-display); font-weight: 600; color: var(--text-invert); font-size: 1rem; }
.campaign-close {
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(5,7,13,0.4); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(251,248,242,0.22); color: var(--text-invert); cursor: pointer; flex: none;
}
.campaign-close .icon { width: 18px; height: 18px; }
.campaign-close:hover { background: rgba(5,7,13,0.6); }

.campaign-content {
    position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column;
    justify-content: flex-end; padding: var(--space-3);
    padding-bottom: var(--space-2);
}
.campaign-eyebrow {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--brass-bright); margin: 0 0 var(--space-2); text-align: center;
}
.campaign-headline-wrap { display: flex; justify-content: center; margin: 0 0 var(--space-2); }
.campaign-headline {
    display: inline-block; max-width: 92vw;
    font-family: var(--font-display); font-weight: 600; color: var(--text-invert);
    font-size: clamp(1.15rem, 6.2vw, 3.2rem); line-height: 1.15;
    white-space: nowrap; margin: 0; text-align: center;
}
.campaign-headline--highlighted {
    padding: 0.32em 0.75em; border-radius: 999px;
    background: color-mix(in srgb, var(--campaign-highlight, transparent) 7%, transparent);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(251,248,242,0.22);
}
.campaign-desc { max-width: 46ch; margin: 0 auto var(--space-2); text-align: center; color: var(--text-invert-mut); font-size: 0.95rem; }
.campaign-offer {
    display: block; text-align: center; margin: 0 auto var(--space-3);
    color: var(--brass-bright); font-weight: 600; font-size: 0.95rem;
}

.campaign-form { max-width: 420px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: var(--space-2); }
.campaign-field {
    width: 100%; padding: 0.85rem 1rem; border-radius: var(--radius-sm);
    background: rgba(5,7,13,0.38); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(251,248,242,0.25); color: var(--text-invert);
    font-family: var(--font-body); font-size: 0.95rem;
}
.campaign-field::placeholder { color: rgba(244,238,226,0.6); }
.campaign-field:focus { outline: 2px solid var(--brass); outline-offset: 1px; }
.campaign-form .btn-t2 { width: 100%; text-align: center; justify-content: center; }
.campaign-error { color: #FFB4A8; background: rgba(154,53,39,0.25); border: 1px solid rgba(154,53,39,0.5); border-radius: var(--radius-sm); padding: 0.6rem 0.9rem; font-size: 0.88rem; margin: 0 auto var(--space-2); max-width: 420px; text-align: center; }
.campaign-thankyou { max-width: 420px; margin: 0 auto; text-align: center; color: var(--text-invert); }
.campaign-thankyou h2 { font-family: var(--font-display); margin: 0 0 0.4rem; }
.campaign-thankyou p { color: var(--text-invert-mut); margin: 0; }

.campaign-preview-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 3; text-align: center;
    background: var(--brass); color: var(--navy); font-size: 0.8rem; font-weight: 600; padding: 0.4rem;
}

@media (max-width: 480px) {
    .campaign-content { padding: var(--space-2); }
    .campaign-headline { font-size: clamp(1.05rem, 7.8vw, 2rem); }
}

@media (prefers-reduced-motion: reduce) {
    .campaign-bg__media[data-video] { display: none; }
}

/* =====================================================================
   Internal Website Analytics dashboard (DESIGN-SYSTEM.md §23). Same
   dark neumorphic Navy/Brass admin system as the rest of the panel -
   reuses .admin-stat-card/.admin-dashboard-stats as-is, adds a Brass
   emphasis modifier plus the ranked-list/device-bar components this
   screen specifically needs.
   ===================================================================== */
.admin-stat-card--brass {
    background: var(--navy); box-shadow: none; border: 1px solid var(--brass);
}
.admin-stat-card--brass .admin-stat-card__number { color: var(--brass-bright); }
.admin-stat-card--brass .admin-stat-card__label { color: var(--text-invert-mut); }

.analytics-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.analytics-range-form { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.analytics-range-form input[type="date"] { padding: 0.4rem 0.6rem; }
.analytics-campaign-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    background: var(--navy); color: var(--text-invert); border-radius: var(--radius-sm);
    padding: var(--sp-12) var(--sp-16); margin-bottom: var(--space-3);
}
.analytics-campaign-banner strong { color: var(--brass-bright); }
.analytics-campaign-banner a { color: var(--text-invert-mut); }

.analytics-section { background: var(--paper-2); border-radius: var(--radius-sm); padding: var(--sp-16); box-shadow: var(--neu-raised); margin-bottom: var(--space-3); }
.analytics-section__title { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 var(--sp-12); }

.analytics-rank-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.75rem; border-radius: 6px; margin-bottom: 4px; overflow: hidden; }
.analytics-rank-row__fill { position: absolute; inset: 0; background: var(--paper); border-radius: 6px; z-index: 0; transform-origin: left; }
.analytics-rank-row__label, .analytics-rank-row__value { position: relative; z-index: 1; font-size: 0.88rem; }
.analytics-rank-row__label { color: var(--navy); font-weight: 500; }
.analytics-rank-row__value { color: var(--text-muted); white-space: nowrap; }
.analytics-empty { color: var(--text-muted); font-size: 0.88rem; }

.analytics-device-bar { display: flex; height: 28px; border-radius: 999px; overflow: hidden; margin-bottom: var(--sp-12); background: var(--paper); }
.analytics-device-bar__seg { height: 100%; }
.analytics-device-bar__seg--mobile  { background: var(--brass); }
.analytics-device-bar__seg--tablet  { background: var(--brass-deep); }
.analytics-device-bar__seg--desktop { background: var(--navy); }
.analytics-device-legend { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: 0.85rem; color: var(--text-muted); }
.analytics-device-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.analytics-device-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.analytics-device-legend .dot--mobile  { background: var(--brass); }
.analytics-device-legend .dot--tablet  { background: var(--brass-deep); }
.analytics-device-legend .dot--desktop { background: var(--navy); }

.analytics-conversion { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: baseline; }
.analytics-conversion__rate { font-family: var(--font-display); font-size: 2.4rem; color: var(--brass-deep); font-weight: 600; }
.analytics-conversion__detail { color: var(--text-muted); font-size: 0.9rem; }

@media (max-width: 720px) {
    .analytics-grid-2 { grid-template-columns: 1fr !important; }
}

/* Sitewide loading state (public/assets/js/loading-bar.js) - injected
   into <html>, not templated, so it works identically on every page
   including the bare Campaign page. */
.loading-bar {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999;
    background: linear-gradient(90deg, var(--brass-deep), var(--brass-bright));
    opacity: 0; pointer-events: none;
}
button.is-loading { opacity: 0.75; cursor: wait; }

@media (prefers-reduced-motion: reduce) {
    .loading-bar { transition: none !important; }
}

/* Cookie consent banner (public/assets/js/cookie-consent.js) - fixed,
   unobtrusive, sits below the loading bar's z-index since the two never
   need to compete for the same visual space. */
.cookie-banner {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
    background: var(--navy); color: var(--text-invert);
    box-shadow: 0 -4px 24px rgba(5, 7, 13, 0.25);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
    max-width: 1100px; margin: 0 auto; padding: var(--sp-16) var(--space-2);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap;
}
.cookie-banner__text { margin: 0; font-size: 0.85rem; color: var(--text-invert-mut); max-width: 60ch; }
.cookie-banner__text a { color: var(--brass-bright); }
.cookie-banner__actions { display: flex; gap: 0.6rem; flex: none; }
.cookie-banner .btn-t3 { color: var(--text-invert-mut); }
.cookie-banner .btn-t3:hover { color: var(--text-invert); }

@media (max-width: 560px) {
    .cookie-banner__inner { flex-direction: column; align-items: stretch; }
    .cookie-banner__actions { justify-content: flex-end; }
}

/* FAQ page - native <details>/<summary> accordion, no JS needed. */
.faq-groups { display: flex; flex-direction: column; gap: var(--space-4); max-width: 760px; margin: 0 auto; }
.faq-group__title { margin: 0 0 var(--space-2); }
.faq-list { display: flex; flex-direction: column; gap: var(--sp-8); }
.faq-item { background: var(--paper-2); border-radius: var(--radius-sm); padding: 0 var(--sp-16); }
.faq-item__question {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12);
    padding: var(--sp-16) 0; cursor: pointer; font-weight: 500; list-style: none;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__chevron { width: 1.1rem; height: 1.1rem; flex: none; color: var(--text-muted); transition: transform 180ms ease; }
.faq-item[open] .faq-item__chevron { transform: rotate(180deg); }
.faq-item__answer { margin: 0 0 var(--sp-16); color: var(--text-muted); }

/* Custom 404 page - a grid of helpful destinations instead of one bare
   "back to home" link. */
.error-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-12); }
.error-link {
    display: flex; align-items: flex-start; gap: var(--sp-12); padding: var(--sp-16);
    background: var(--paper-2); border-radius: var(--radius-sm); box-shadow: var(--neu-raised);
    text-decoration: none; color: inherit; transition: box-shadow 120ms ease;
}
.error-link:hover { box-shadow: var(--neu-pressed); }
.error-link .icon { width: 1.4rem; height: 1.4rem; color: var(--brass-deep); flex: none; margin-top: 0.15rem; }
.error-link span { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.88rem; color: var(--text-muted); }
.error-link strong { color: var(--text); font-weight: 600; font-size: 0.98rem; }