/* =====================================================================
   THE ILLUMINATION — Dallas Holiday Lighting Experts
   Palette and type are the client brand deck, unchanged:
   charcoal / ivory / champagne, Playfair Display + Montserrat.

   Direction : an estate at night, presented as a lighting designer's
               portfolio — not a services page with pictures on it.
   Metaphor  : warm light on architecture in winter dark. Every accent in
               this page behaves like a LIGHT SOURCE (it pools, blooms,
               falls off, ignites); the ground never does.
   Tone      : still / warm / exacting
   Signature : a real string of lights threads the document, and its bulbs
               ignite in sequence as each swag scrolls into view. Second
               gesture: photographs and the manifesto do not fade in — they
               WARM UP, dim to lit, the way a filament does.

   ACCESSIBILITY — the one deliberate deviation from the deck: champagne
   #C8A96A is 8.08:1 on charcoal but only 2.06:1 on ivory, so the deck's
   champagne-on-ivory eyebrows would be unreadable. Champagne is kept
   exactly as given on dark; on light grounds text uses --champagne-dp
   #7D5E1D (5.52:1 ivory / 4.62:1 warm). Every pairing computed, not judged.
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
    /* deck, verbatim */
    --charcoal:  #11161C;
    --deep-gray: #2A2F36;
    --ivory:     #F7F5F0;
    --champagne: #C8A96A;
    --warm:      #E7E1D6;

    /* derived, contrast-checked */
    --charcoal-2:   #141A21;
    --charcoal-3:   #1A212A;
    --champagne-dp: #7D5E1D;
    --champagne-ln: #A8873F;
    --champagne-lt: #E8C88A;
    --hot:          #FFF0D0;

    --ivory-mute: rgba(247, 245, 240, .70);
    --ink-soft:   #4A525C;

    --line-dk:      rgba(247, 245, 240, .13);
    --line-dk-soft: rgba(247, 245, 240, .07);
    --line-lt:      rgba(17, 22, 28, .15);
    --line-lt-soft: rgba(17, 22, 28, .075);

    /* Type trio with roles (design-method Phase 2). Playfair+Montserrat was the
       client deck's SUGGESTION; it is also the most-generated dark/gold combo there
       is, which is exactly why the page read as templated. Palette is unchanged. */
    --f-disp: 'Fraunces', 'Iowan Old Style', Georgia, serif;       /* display, 300 */
    --f-grot: 'Bricolage Grotesque', 'Archivo', Helvetica, sans-serif; /* voice, 800 */
    --f-mono: 'Spline Sans Mono', ui-monospace, Menlo, Consolas, monospace; /* labels */
    --f-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    --ease:   cubic-bezier(.16, 1, .3, 1);
    --ease-x: cubic-bezier(.7, 0, .18, 1);

    --shell: 1280px;
    --gut:   clamp(20px, 4.5vw, 58px);
    --rail:  74px;
    /* How far the credential plate rides up onto the hero photograph. The hero
       ADDS this to its own bottom padding, so clearance above the plate is
       guaranteed by construction. Previously the lift was width-based and the
       hero padding height-based, so on any wide-but-short screen the plate
       landed on top of the CTA buttons. */
    --creds-lift: clamp(44px, 4.6vw, 74px);
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0; background: var(--charcoal); color: var(--ivory);
    font-family: var(--f-sans); font-weight: 400; font-size: 16px; line-height: 1.6;
    overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); }

.skip { position: absolute; left: -999px; top: 0; z-index: 9999; background: var(--champagne); color: var(--charcoal); padding: 12px 18px; }
.skip:focus { left: var(--gut); top: 12px; }

::selection { background: var(--champagne); color: var(--charcoal); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--charcoal); }
::-webkit-scrollbar-thumb { background: var(--deep-gray); }
::-webkit-scrollbar-thumb:hover { background: var(--champagne-dp); }
:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }
.on-light :focus-visible { outline-color: var(--champagne-dp); }

/* film grain — keeps large dark fields from banding, reads as photographic */
body::before {
    content: ""; position: fixed; inset: 0; z-index: 997; pointer-events: none; opacity: .42;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* ---------- 3. THE SWAG (signature) ---------- */
.swag { position: relative; width: 100%; height: clamp(44px, 5.6vw, 78px); pointer-events: none; }
.swag svg { width: 100%; height: 100%; display: block; overflow: visible; }
.swag-wire { fill: none; stroke: rgba(247, 245, 240, .2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.swag-drop { stroke: rgba(247, 245, 240, .18); stroke-width: 1; vector-effect: non-scaling-stroke; }
.swag .halo, .swag .spill { opacity: 0; }
.swag .core { fill: #3A3730; }
.swag.lit .core  { animation: coreOn .8s var(--ease) forwards;  animation-delay: var(--d, 0s); }
.swag.lit .halo  { animation: haloOn .9s var(--ease) forwards;  animation-delay: var(--d, 0s); }
.swag.lit .spill { animation: spillOn 1.2s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes coreOn  { to { fill: var(--hot); } }
@keyframes haloOn  { to { opacity: .8; } }
@keyframes spillOn { to { opacity: 1; } }
/* one ambient system on the page, and it is the object the design is named for */
.swag--hero.lit .halo {
    animation: haloOn .9s var(--ease) forwards, breathe 6s ease-in-out infinite;
    animation-delay: var(--d, 0s), calc(var(--d, 0s) + 1.1s);
}
@keyframes breathe { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
/* Without JS the .lit class never arrives, so the strings would hang unlit.
   The page must be complete without JavaScript — light them by default there. */
html:not(.js) .swag .core { fill: var(--hot); }
html:not(.js) .swag .halo { opacity: .8; }
html:not(.js) .swag .spill { opacity: 1; }

/* ---------- 4. SEAL ---------- */
.seal { position: relative; width: clamp(104px, 11vw, 146px); aspect-ratio: 1; flex: none; }
.seal svg { width: 100%; height: 100%; animation: spin 26s linear infinite; }
.seal-ring { fill: none; stroke: var(--line-dk); }
.seal-t { fill: var(--champagne); font-family: var(--f-sans); font-size: 11.6px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
.seal-star {
    position: absolute; inset: 0; margin: auto; width: 15px; height: 15px; background: var(--champagne);
    clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 5. TYPE ---------- */
/* Chapter label: mono cue number + rule + name. Mono at small sizes needs big
   tracking (typography doc: 8.5px wants ~.22em+). */
.eyebrow {
    display: flex; align-items: baseline; gap: 13px;
    font-family: var(--f-mono); font-size: 10.5px; font-weight: 400;
    letter-spacing: .26em; text-transform: uppercase; color: var(--champagne);
}
.eyebrow .cue { flex: none; opacity: .95; }
.eyebrow .cue-r { flex: none; width: clamp(26px, 4vw, 54px); height: 1px; background: currentColor; opacity: .42; transform: translateY(-3px); }
.on-light .eyebrow { color: var(--champagne-dp); }
.eyebrow--c { justify-content: center; }

.star { display: block; color: var(--champagne); }
.on-light .star { color: var(--champagne-ln); }
.star svg { width: 100%; height: 100%; fill: currentColor; }

/* THE SIGNATURE — every heading collides a heavy grotesque with a light italic
   serif. Repeated in every section so it reads as a system, not a stunt. */
.disp { line-height: 1.02; }
.disp .grot {
    font-family: var(--f-grot); font-weight: 800; text-transform: uppercase;
    letter-spacing: -.028em; color: inherit;
}
.disp .ser {
    font-family: var(--f-disp); font-weight: 300; font-style: italic;
    letter-spacing: -.005em; text-transform: none; color: var(--champagne);
}
.on-light .disp .ser { color: var(--champagne-dp); }
/* one word per page may be outlined — used once, in the CTA */
.disp .out {
    -webkit-text-stroke: 1.5px var(--champagne); -webkit-text-fill-color: transparent;
    color: transparent;
}
.disp em { font-family: var(--f-disp); font-weight: 300; font-style: italic; color: var(--champagne); }
.on-light .disp em { color: var(--champagne-dp); }

.h2 { font-size: clamp(30px, 4.9vw, 64px); }
.lede { font-family: var(--f-sans); font-size: clamp(15px, 1.15vw, 17px); font-weight: 300; color: var(--ivory-mute); line-height: 1.78; max-width: 46ch; text-wrap: pretty; }
.on-light .lede { color: var(--ink-soft); }

/* oversized index numeral — structure, not decoration */
.idx { font-family: var(--f-mono); font-weight: 400; line-height: .8; font-size: clamp(40px, 5.6vw, 88px); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: rgba(200, 169, 106, .22); }
.on-light .idx { color: rgba(17, 22, 28, .11); }

/* ---------- 6. LEFT RAIL ---------- */
.rail {
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail); z-index: 400;
    display: none; align-items: center; justify-content: center;
    border-right: 1px solid var(--line-dk-soft); pointer-events: none;
}
.rail-t {
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: var(--f-mono); font-size: 10px; font-weight: 400; letter-spacing: .38em; text-transform: uppercase;
    color: rgba(247, 245, 240, .34); white-space: nowrap;
}
.rail-prog { position: absolute; right: -1px; top: 0; width: 1px; background: var(--champagne); height: 0; }
@media (min-width: 1220px) {
    .rail { display: flex; }
    body { padding-left: var(--rail); }
}

/* ---------- 7. NAV ---------- */
.topbar { background: var(--charcoal); border-bottom: 1px solid var(--line-dk-soft); font-family: var(--f-mono); font-size: 9.5px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: rgba(247, 245, 240, .46); }
.topbar-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px var(--gut); }
.topbar-in span:nth-child(2) { display: none; }
@media (min-width: 860px) { .topbar-in span:nth-child(2) { display: inline; } }

.nav { position: sticky; top: 0; z-index: 500; background: rgba(17, 22, 28, .92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-dk-soft); }
.nav-in { display: flex; align-items: center; gap: 26px; padding: 15px var(--gut); }

.brand { display: flex; flex-direction: column; line-height: 1; width: max-content; max-width: 100%; }
.brand-1 { font-family: var(--f-disp); font-size: clamp(16px, 1.6vw, 20px); letter-spacing: .01em; display: flex; align-items: flex-start; gap: 4px; }
.brand-1 .star { width: 8px; height: 8px; margin-top: 1px; }
.brand-rule { height: 1px; background: var(--champagne); opacity: .5; margin: 5px 0 4px; }
.brand-2 { font-size: 8px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--champagne); }

.nav-links { display: flex; gap: 28px; margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; }
.nav-links a { color: rgba(247, 245, 240, .7); position: relative; padding: 6px 0; transition: color .3s var(--ease); }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--champagne); transition: width .45s var(--ease); }
@media (hover: hover) { .nav-links a:hover { color: var(--ivory); } .nav-links a:hover::after { width: 100%; } }

.nav-cta { font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; background: var(--champagne); color: var(--charcoal); padding: 13px 22px; white-space: nowrap; transition: background .3s var(--ease), transform .3s var(--ease); }
@media (hover: hover) { .nav-cta:hover { background: var(--champagne-lt); transform: translateY(-1px); } }

.burger { display: none; flex-direction: column; gap: 5px; width: 24px; margin-left: auto; }
.burger i { display: block; height: 1.4px; background: var(--ivory); }

.mnav { display: none; position: fixed; inset: 0 0 0 auto; width: min(340px, 87vw); height: 100vh; background: var(--charcoal-2); z-index: 600; overflow-y: auto; border-left: 1px solid var(--line-dk-soft); }
.mnav.open, .mnav.closing { display: block; }
.mnav.open { animation: mnavIn .45s var(--ease-x) forwards; }
.mnav.closing { animation: mnavOut .38s var(--ease-x) forwards; }
@keyframes mnavIn { from { transform: translateX(101%); } to { transform: translateX(0); } }
@keyframes mnavOut { from { transform: translateX(0); } to { transform: translateX(101%); } }
.mnav-in { display: flex; flex-direction: column; padding: 92px 30px 40px; }
.mnav-in > a { padding: 17px 0; border-bottom: 1px solid var(--line-dk-soft); font-family: var(--f-disp); font-size: 21px; }
.mnav-cta { margin-top: 26px; text-align: center; background: var(--champagne); color: var(--charcoal) !important; font-family: var(--f-sans) !important; font-size: 10.5px !important; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding: 16px; border-bottom: none !important; }
@media (max-width: 1020px) { .nav-links, .nav-cta { display: none; } .burger { display: flex; } }

/* ---------- 8. BUTTONS ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; padding: 18px 34px; position: relative; overflow: hidden; transition: transform .4s var(--ease), color .3s var(--ease), border-color .35s var(--ease); }
.btn > * { position: relative; z-index: 1; }
.btn .ar { transition: transform .4s var(--ease); }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } .btn:hover .ar { transform: translateX(5px); } }
.btn-gold { background: var(--champagne); color: var(--charcoal); }
.btn-gold::before { content: ""; position: absolute; inset: 0; background: var(--champagne-lt); transform: translateX(-101%); transition: transform .55s var(--ease); }
@media (hover: hover) { .btn-gold:hover::before { transform: translateX(0); } }
.btn-out { border: 1px solid rgba(247, 245, 240, .3); color: var(--ivory); }
.btn-out::before { content: ""; position: absolute; inset: 0; background: var(--champagne); transform: translateX(-101%); transition: transform .55s var(--ease); }
@media (hover: hover) { .btn-out:hover { color: var(--charcoal); border-color: var(--champagne); } .btn-out:hover::before { transform: translateX(0); } }
.btn-dark { background: var(--charcoal); color: var(--ivory); }
.btn-dark::before { content: ""; position: absolute; inset: 0; background: var(--champagne-dp); transform: translateX(-101%); transition: transform .55s var(--ease); }
@media (hover: hover) { .btn-dark:hover::before { transform: translateX(0); } }

/* ---------- 9. REVEALS ---------- */
.ro { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.ro.in { opacity: 1; transform: none; }
.ro.d1 { transition-delay: .09s; } .ro.d2 { transition-delay: .18s; }
.ro.d3 { transition-delay: .27s; } .ro.d4 { transition-delay: .36s; }
html:not(.js) .ro { opacity: 1; transform: none; }

/* photographs WARM UP rather than fade — dim and cool, then lit */
.warm { filter: brightness(.34) saturate(.55) contrast(1.04); transition: filter 1.8s var(--ease); }
.warm.in { filter: none; }
html:not(.js) .warm { filter: none; }

/* ---------- 10. HERO ---------- */
.hero { position: relative; overflow: hidden; background: var(--charcoal); }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }
/* The colonnade photograph is already deep black on the left, so the scrim only
   has to seat the type — a heavy one would flatten the very light the page is
   about. Far lighter than the gradient this replaced. */
.hero-media::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(9,12,17,.93) 0%, rgba(9,12,17,.84) 26%, rgba(9,12,17,.52) 45%, rgba(9,12,17,.13) 64%, rgba(9,12,17,.05) 100%),
        linear-gradient(to top, rgba(9,12,17,.80) 0%, rgba(9,12,17,.06) 38%, rgba(9,12,17,.42) 100%);
}
.hero-swag { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
.hero-in {
    position: relative; z-index: 3;
    padding-top: clamp(78px, 13vh, 156px);
    /* reserve the plate's lift PLUS a real gap, so the CTAs are never covered */
    padding-bottom: calc(clamp(34px, 4vh, 58px) + var(--creds-lift));
    min-height: clamp(540px, 84vh, 880px);
    display: flex; flex-direction: column; justify-content: center;
}
/* No ch-based cap here: `ch` resolves against the BODY font, not the display
   font, so it throttled the H1 to a fraction of the width it needs and the
   masked lines were clipped. The headline is limited by its clamp; only the
   lede needs a measure. */
.hero-copy { max-width: 100%; }

/* The wide scrim is a diagonal tuned for a landscape crop. On a phone the copy
   sits directly over the lit facade, so the narrow scrim leans vertical and
   darker — text contrast must never depend on which part of a photo is behind it. */
@media (max-width: 760px) {
    .hero-media::after {
        background:
            linear-gradient(to bottom, rgba(17,22,28,.72) 0%, rgba(17,22,28,.48) 26%, rgba(17,22,28,.80) 68%, rgba(17,22,28,.95) 100%),
            linear-gradient(90deg, rgba(17,22,28,.78) 0%, rgba(17,22,28,.20) 100%);
    }
    .hero-in { min-height: clamp(460px, 68vh, 640px); }
}

.hero-h1 { margin: 26px 0 0; }
.hero-h1 .ln { display: block; overflow: hidden; padding: .075em 0; }
/* masked lines must never wrap — a wrapped line is clipped by its own mask */
.hero-h1 .ln > span {
    display: block; white-space: nowrap; transform: translateY(115%);
    animation: lnUp 1.15s var(--ease) forwards;
    font-family: var(--f-disp); font-weight: 300; letter-spacing: -.014em;
    font-size: clamp(30px, 4.35vw, 62px); line-height: 1.14;
}
.hero-h1 .ln:nth-child(1) > span { animation-delay: .16s; }
.hero-h1 .ln:nth-child(2) > span { animation-delay: .27s; }
.hero-h1 .ln:nth-child(3) > span { animation-delay: .38s; }
@keyframes lnUp { to { transform: translateY(0); } }

.hero-eb {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--f-mono); font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--champagne);
    opacity: 0; animation: fadeUp .9s var(--ease) .42s forwards;
}
.hero-eb-r { width: clamp(34px, 5vw, 74px); height: 1px; background: currentColor; opacity: .6; flex: none; }
.hero-eb .star { width: 13px; height: 13px; flex: none; }
.hero-lede { margin-top: 26px; max-width: 46ch; opacity: 0; animation: fadeUp 1s var(--ease) .66s forwards; }
.hero-acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; opacity: 0; animation: fadeUp 1s var(--ease) .8s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 620px) { .hero-acts .btn { flex: 1 1 100%; } }

/* credential plate — the one element that crosses a section boundary */
/* Rides UP onto the hero photograph. It sits outside .hero precisely so the
   hero's overflow:hidden cannot clip the overhang — that was slicing the plate
   in half. z-index keeps it above the band that follows. */
.creds {
    position: relative; z-index: 5;
    margin-top: calc(var(--creds-lift) * -1);
    margin-bottom: clamp(40px, 4.8vw, 68px);
    opacity: 0; animation: fadeUp 1s var(--ease) .98s forwards;
}
.creds-in {
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: rgba(16, 21, 27, .93); backdrop-filter: blur(6px);
    border: 1px solid var(--line-dk); box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
}
.cr { padding: clamp(18px, 2.1vw, 26px) clamp(11px, 1.5vw, 22px); border-left: 1px solid var(--line-dk-soft); display: flex; flex-direction: column; gap: 6px; }
.cr:first-child { border-left: none; }
.cr-i { display: block; width: 24px; height: 24px; color: var(--champagne); margin-bottom: 2px; }
.cr-i svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
/* Filled icons carry fill="currentColor" as an ATTRIBUTE, and a CSS `fill:none`
   beats a presentation attribute — which drew the star with neither fill nor
   stroke, i.e. invisible. Restore the fill in CSS, not just drop the stroke. */
.cr-i svg[fill="currentColor"] { fill: currentColor; stroke: none; }
.cr-n { font-family: var(--f-mono); font-size: clamp(17px, 1.8vw, 24px); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.05; color: var(--champagne); }
.cr-l { font-family: var(--f-mono); font-size: 9px; font-weight: 400; letter-spacing: .17em; text-transform: uppercase; color: rgba(247, 245, 240, .5); line-height: 1.6; }

/* Five across gets cramped well before the tablet breakpoint. */
@media (max-width: 1100px) {
    .creds-in { grid-template-columns: repeat(3, 1fr); }
    .cr:nth-child(4) { border-left: none; }
    .cr:nth-child(n+4) { border-top: 1px solid var(--line-dk-soft); }
}
@media (max-width: 720px) {
    .creds-in { grid-template-columns: 1fr 1fr; }
    .cr { border-left: 1px solid var(--line-dk-soft); border-top: 1px solid var(--line-dk-soft); }
    .cr:nth-child(odd) { border-left: none; }
    .cr:nth-child(-n+2) { border-top: none; }
    /* odd count — the last item takes the full width rather than sitting half-empty */
    .cr:last-child:nth-child(odd) { grid-column: 1 / -1; border-left: none; }
}

/* ---------- 11. BANDS ---------- */
.band { padding: clamp(84px, 12vh, 168px) 0; position: relative; }
.band-light { background: var(--ivory); color: var(--charcoal); }
.band-pad-top { padding-top: clamp(120px, 16vh, 220px); }

/* ---------- 12. MANIFESTO (words ignite) ---------- */
.mani-grid { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: end; }
@media (min-width: 940px) { .mani-grid { grid-template-columns: 1fr auto; gap: 64px; } }
.mani-q { font-family: var(--f-disp); font-size: clamp(25px, 3.9vw, 54px); line-height: 1.22; letter-spacing: -.01em; max-width: 21ch; }
.mani-q .w { opacity: .17; transition: opacity .7s var(--ease); display: inline-block; }
.mani-q.lit .w { opacity: 1; }
.mani-q em { font-style: italic; color: var(--champagne); }
html:not(.js) .mani-q .w { opacity: 1; }
.mani-attr { margin-top: 32px; display: flex; align-items: center; gap: 14px; font-family: var(--f-mono); font-size: 9.5px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: rgba(247, 245, 240, .45); }
.mani-attr::before { content: ""; width: 40px; height: 1px; background: var(--champagne); opacity: .55; flex: none; }

/* ---------- 13. WORK — figure furniture ----------
   The grid itself lives in section 23; only the plate, frame and caption
   chrome are defined here. (The superseded two-piece grid was removed — its
   .wk--a/.wk--b selectors no longer matched any markup and its column
   template was fighting the current one.) */
.wk-fig, .wk { position: relative; }

/* ---------- 14. PROCESS — a ledger, not four equal columns ---------- */
.proc { border-top: 1px solid var(--line-lt); }
.pstep { display: grid; grid-template-columns: auto 1fr; gap: 16px 24px; padding: clamp(30px, 4vw, 54px) 0; border-bottom: 1px solid var(--line-lt-soft); position: relative; }
@media (min-width: 860px) { .pstep { grid-template-columns: clamp(90px, 11vw, 168px) minmax(0, 26ch) 1fr; align-items: start; gap: 44px; } }
.pstep-n { line-height: .8; }
.pstep-h { font-family: var(--f-grot); font-weight: 700; text-transform: uppercase; letter-spacing: -.015em; font-size: clamp(17px, 1.65vw, 23px); line-height: 1.16; }
.pstep-i { display: block; width: 30px; height: 30px; color: var(--champagne-ln); margin-bottom: 14px; }
.pstep-i svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.pstep-d { font-size: 14.5px; font-weight: 300; color: var(--ink-soft); line-height: 1.85; max-width: 46ch; }
.pstep-rule { position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--champagne-ln); transition: width 1.6s var(--ease); }
.pstep.in .pstep-rule { width: 100%; }

/* ---------- 15. SERVICES — ruled rows, table-of-contents ----------
   Four tracks: cue number / title / description / circled arrow. The row is a
   single hover GESTURE — indent, champagne wash sweeping in, arrow inverting
   and rotating — all on the one curve, triggered by the row itself. */
.svc { border-top: 2px solid var(--champagne-dp); }
.svc-row {
    display: grid; grid-template-columns: clamp(46px, 5vw, 78px) minmax(0, 1.05fr) minmax(0, 1.25fr) auto;
    align-items: center; gap: clamp(14px, 2.2vw, 34px);
    padding: clamp(22px, 2.8vw, 36px) 0;
    border-bottom: 1px solid var(--line-dk-soft);
    position: relative; overflow: hidden; transition: padding-left .55s var(--ease);
}
.svc-row::before {
    content: ""; position: absolute; inset: -1px 0; z-index: 0;
    background: linear-gradient(90deg, rgba(200,169,106,.13), rgba(200,169,106,.03) 46%, transparent 72%);
    transform: translateX(-101%); transition: transform .6s var(--ease);
}
.svc-row > * { position: relative; z-index: 1; }

.svc-n { font-family: var(--f-mono); font-size: clamp(11px, 1.05vw, 13px); color: var(--champagne); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.svc-t {
    font-family: var(--f-grot); font-weight: 800; text-transform: uppercase;
    letter-spacing: -.022em; line-height: 1.04;
    font-size: clamp(19px, 2.5vw, 34px); transition: color .4s var(--ease);
}
.svc-d { font-family: var(--f-sans); font-weight: 300; font-size: clamp(13px, 1.05vw, 15px); line-height: 1.72; color: var(--ivory-mute); max-width: 44ch; }
.svc-ar {
    width: clamp(38px, 3.4vw, 48px); aspect-ratio: 1; border-radius: 50%;
    border: 1px solid var(--line-dk); display: grid; place-items: center; flex: none;
    transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.svc-ar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

@media (hover: hover) {
    .svc-row:hover { padding-left: clamp(12px, 1.8vw, 28px); }
    .svc-row:hover::before { transform: translateX(0); }
    .svc-row:hover .svc-t { color: var(--champagne); }
    .svc-row:hover .svc-ar { background: var(--champagne); color: var(--charcoal); border-color: var(--champagne); transform: rotate(-45deg); }
}
.svc-row:focus-visible .svc-t { color: var(--champagne); }

/* the description column is the first thing to go — title + arrow survive */
@media (max-width: 900px) {
    .svc-row { grid-template-columns: clamp(38px, 6vw, 54px) 1fr auto; }
    .svc-d { display: none; }
}
@media (max-width: 560px) {
    .svc-row { grid-template-columns: 34px 1fr; }
    .svc-ar { display: none; }
}

/* ---------- 16. CTA ---------- */
.cta { position: relative; overflow: hidden; padding: clamp(20px, 3vh, 40px) 0 clamp(84px, 12vh, 150px); background: var(--charcoal); }
/* CTA gets a photograph — the bookend to the hero. Same asset family (the
   lit-tree work render), a different frame from the hero so it reads as a
   return, not a repeat. Text is centered and spans the section's full height
   here, unlike the hero's left-aligned copy, so the scrim is a flat vertical
   gradient rather than the hero's side-weighted one. */
.cta-media { position: absolute; inset: 0; z-index: 0; }
.cta-media img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 62%; }
.cta-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(17,22,28,.92) 0%, rgba(17,22,28,.80) 45%, rgba(17,22,28,.93) 100%);
}
.cta::before { content: ""; position: absolute; left: 50%; top: 0; width: min(1100px, 130%); height: 100%; z-index: 1; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 8%, rgba(200,169,106,.20), transparent 60%); }
/* scoped, not the shared .swag rule — other sections don't have a photo layer to clear */
.cta .swag { position: relative; z-index: 2; }
.cta-in { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; text-align: center; }
.cta-in .lede { margin: 22px auto 0; }
.cta-in .btn { margin-top: 36px; }

/* ---------- 17. CONTACT ---------- */
.cgrid { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 70px); }
@media (min-width: 980px) { .cgrid { grid-template-columns: .88fr 1.12fr; } }
.cinfo { margin-top: 32px; border-top: 1px solid var(--line-lt); }
.ci-row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line-lt-soft); }
.ci-k { font-family: var(--f-mono); font-size: 9.5px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.ci-v { font-family: var(--f-disp); font-size: 16.5px; text-align: right; }
.ci-v a { border-bottom: 1px solid rgba(125, 94, 29, .38); }
@media (hover: hover) { .ci-v a:hover { color: var(--champagne-dp); } }

/* ---------- 18. FORM ---------- */
.qsheet { background: var(--warm); padding: clamp(24px, 3.2vw, 42px); border: 1px solid var(--line-lt); position: relative; }
.qf-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-mono); font-size: 9.5px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: var(--champagne-dp); padding-bottom: 16px; border-bottom: 1px solid var(--line-lt); margin-bottom: 26px; }
.qf-head .star { width: 11px; height: 11px; }
.qf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.qf-f--full { grid-column: 1 / -1; }
.qf-f { display: flex; flex-direction: column; gap: 8px; }
.qf-l { font-family: var(--f-mono); font-size: 9.5px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.req { color: var(--champagne-dp); }
.qf-i { font-family: var(--f-sans); font-weight: 400; font-size: 15px; background: transparent; border: none; border-bottom: 1px solid var(--line-lt); padding: 10px 2px; color: var(--charcoal); transition: border-color .3s var(--ease); }
.qf-i:focus { outline: none; border-bottom-color: var(--champagne-dp); }
textarea.qf-i { resize: vertical; min-height: 76px; }
.qf-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.qf-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qf-chips label { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: 10px 15px; border: 1px solid var(--line-lt); cursor: pointer; transition: all .3s var(--ease); }
.qf-chips input:checked + label { background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); }
@media (hover: hover) { .qf-chips label:hover { border-color: var(--champagne-dp); color: var(--champagne-dp); } }
.qf-chips input:focus-visible + label { outline: 2px solid var(--champagne-dp); outline-offset: 2px; }
.qf-cap { margin-top: 24px; display: flex; align-items: flex-end; gap: 16px; }
.qf-q { font-family: var(--f-disp); font-size: 21px; padding-bottom: 9px; white-space: nowrap; }
.qf-cap .qf-f { flex: 1; max-width: 130px; }
.qf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 30px; }
.qf-note { font-size: 9.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.qf-msg p { margin-top: 16px; font-size: 14.5px; }
.qf-msg .error { color: #8C2F1C; }
.qf-msg .success { color: #1E4D34; }
.qf-done { text-align: center; padding: 36px 10px; }
.qd-seal { width: 96px; height: 96px; margin: 0 auto 22px; border-radius: 50%; border: 1px solid var(--champagne-dp); display: grid; place-items: center; font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne-dp); line-height: 1.7; }
.qf-done h3 { font-family: var(--f-disp); font-size: 27px; font-weight: 400; }
.qf-done p { margin-top: 12px; color: var(--ink-soft); }

/* ---------- 19. FOOTER ---------- */
.foot { background: var(--charcoal); padding: clamp(56px, 8vh, 90px) 0 0; border-top: 1px solid var(--line-dk-soft); }
.foot-in { display: grid; grid-template-columns: 1.4fr .75fr .95fr 1.1fr; gap: 42px; padding-bottom: 48px; border-bottom: 1px solid var(--line-dk-soft); }
.foot-brand p { margin-top: 20px; max-width: 32ch; font-size: 13.5px; font-weight: 300; color: var(--ivory-mute); line-height: 1.85; }
.foot-col { display: flex; flex-direction: column; gap: 11px; font-size: 13.5px; font-weight: 300; color: var(--ivory-mute); }
.foot-h { font-family: var(--f-mono); font-size: 9.5px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: var(--champagne); margin-bottom: 6px; }
@media (hover: hover) { .foot-col a:hover { color: var(--champagne); } }
.foot-cta { border: 1px solid var(--line-dk); padding: 26px; text-align: center; }
.foot-cta-h { font-family: var(--f-disp); font-size: 18px; }
.foot-cta p { margin-top: 8px; font-size: 12.5px; font-weight: 300; color: var(--ivory-mute); }
.foot-cta .btn { margin-top: 18px; width: 100%; padding: 15px 18px; }
.foot-cta-tel { display: block; margin-top: 13px; font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ivory-mute); }
@media (hover: hover) { .foot-cta-tel:hover { color: var(--champagne); } }
.colophon { opacity: .72; letter-spacing: .13em; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 22px 0; font-family: var(--f-mono); font-size: 9.5px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: rgba(247, 245, 240, .34); }
@media (hover: hover) { .foot-top:hover { color: var(--champagne); } }
@media (max-width: 940px) { .foot-in { grid-template-columns: 1fr 1fr; } .foot-brand, .foot-cta { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot-in { grid-template-columns: 1fr; } }

/* ---------- 20. GATES ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; }
    .ro, .hero-lede, .hero-acts, .hero-eb, .creds { opacity: 1 !important; transform: none !important; }
    .hero-h1 .ln > span { transform: none !important; }
    .warm { filter: none !important; }
    .mani-q .w { opacity: 1 !important; }
    .swag .core { fill: var(--hot); }
    .swag .halo { opacity: .62; }
    .pstep .pstep-rule { width: 100%; }
    .seal svg { animation: none; }
}

/* ---------- 21. INCLUDED STRIP (the white-glove promise, visualised) ---------- */
.incl { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line-dk); margin-top: clamp(44px, 6vw, 76px); }
.incl-i { padding: clamp(22px, 2.6vw, 34px) clamp(10px, 1.4vw, 22px); border-left: 1px solid var(--line-dk-soft); display: flex; flex-direction: column; gap: 12px; }
.incl-i:first-child { border-left: none; padding-left: 0; }
.incl-ico { display: block; width: 26px; height: 26px; color: var(--champagne); }
.incl-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.incl-n { font-family: var(--f-grot); font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(13.5px, 1.2vw, 16px); }
.incl-d { font-family: var(--f-mono); font-size: 9.5px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: rgba(247, 245, 240, .45); line-height: 1.6; }
@media (max-width: 900px) {
    .incl { grid-template-columns: repeat(2, 1fr); }
    .incl-i { border-top: 1px solid var(--line-dk-soft); }
    .incl-i:nth-child(odd) { border-left: none; padding-left: 0; }
    .incl-i:nth-child(1), .incl-i:nth-child(2) { border-top: none; }
    .incl-i:last-child { grid-column: 1 / -1; }
}


/* ---------- 23. TESTIMONIALS ---------- */
.tst-flag { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; padding: 7px 13px; border: 1px dashed var(--champagne-dp); font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne-dp); }
.tst-grid { display: grid; grid-template-columns: 1fr; gap: clamp(26px, 3.4vw, 44px); }
@media (min-width: 900px) { .tst-grid { grid-template-columns: 1.24fr .76fr; align-items: start; } }
.tst-side { display: grid; gap: clamp(22px, 2.6vw, 32px); }

.tst { position: relative; padding-top: 34px; }
.tst::before {
    content: "\201C"; position: absolute; top: -14px; left: -6px;
    font-family: var(--f-disp); font-style: italic; font-size: 132px; line-height: 1;
    color: var(--champagne-ln); opacity: .5;
}
.tst-q { font-family: var(--f-disp); line-height: 1.4; }
.tst--lead .tst-q { font-size: clamp(21px, 2.5vw, 33px); }
.tst--sm .tst-q { font-size: clamp(15.5px, 1.4vw, 18px); line-height: 1.6; }
.tst-by { margin-top: 20px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tst-name { font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.tst-meta { font-size: 9.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.tst-stars { display: flex; gap: 4px; margin-bottom: 14px; }
.tst-stars .star { width: 15px; height: 15px; }

/* ---------- 24. SERVICE AREAS ---------- */
.area-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 26px; margin-bottom: clamp(32px, 4vw, 52px); }
.areas { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line-dk); }
.area {
    padding: clamp(26px, 3vw, 42px) clamp(10px, 1.4vw, 20px); border-left: 1px solid var(--line-dk-soft);
    display: flex; flex-direction: column; gap: 14px; position: relative; transition: background .5s var(--ease);
}
.area:first-child { border-left: none; padding-left: 0; }
.area-pin { display: block; width: 22px; height: 22px; color: var(--champagne); }
.area-pin svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.area-n { font-family: var(--f-disp); font-size: clamp(17px, 1.9vw, 26px); line-height: 1.14; }
@media (hover: hover) { .area:hover { background: var(--charcoal-3); } }
@media (max-width: 860px) {
    .areas { grid-template-columns: 1fr 1fr; }
    .area { border-top: 1px solid var(--line-dk-soft); }
    .area:nth-child(odd) { border-left: none; padding-left: 0; }
    .area:nth-child(1), .area:nth-child(2) { border-top: none; }
    .area:last-child { grid-column: 1 / -1; }
}

/* ---------- 25. FAQ ---------- */
/* Dark ground now (rhythm fix — was the second light band in a row right
   before Contact); tokens below are the dark-ground pair, not the
   --lt / --ink-soft / -dp / -ln light-ground ones the section used before. */
.faq { border-top: 1px solid var(--line-dk); }
.faq-i { border-bottom: 1px solid var(--line-dk-soft); }
.faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: clamp(20px, 2.4vw, 30px) 0; text-align: left;
    font-family: var(--f-disp); font-size: clamp(17px, 1.8vw, 24px); line-height: 1.3;
    transition: color .35s var(--ease);
}
@media (hover: hover) { .faq-q:hover { color: var(--champagne); } }
.faq-t { display: block; width: 22px; height: 22px; flex: none; color: var(--champagne); transition: transform .45s var(--ease); }
.faq-t svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.faq-i.open .faq-t { transform: rotate(135deg); }
.faq-a { overflow: hidden; height: 0; }
.faq-a-in { padding: 0 0 clamp(22px, 2.6vw, 32px); font-size: 15px; font-weight: 300; line-height: 1.85; color: var(--ivory-mute); max-width: 68ch; }
html:not(.js) .faq-a { height: auto; }

/* footer service-area line */
.foot-areas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 20px 0 0; font-size: 12.5px; font-weight: 300; color: var(--ivory-mute); }
.foot-areas span:not(.foot-h) { position: relative; }
.foot-areas span:not(.foot-h):not(:last-child)::after { content: ""; position: absolute; right: -12px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--champagne); opacity: .55; }

/* ---------- 26. ATMOSPHERE LAYERS ----------
   Depth is what separated this from a flat page. A screen-blended bokeh plate
   sits in FRONT of the hero photograph so near-field light reads closer than
   the facade, and a soft glow wash pools behind the closing call to action. */
/* The screen-blended bokeh overlay was removed: on top of an already-sharp
   photograph it read as smudge rather than depth, and soft-focus haze is the
   opposite of the clean look this brand needs. Atmosphere now comes from the
   photography itself and from the light strings. */

/* ---------- 27. FULL-BLEED LIGHT BAND ---------- */
.lightband { position: relative; overflow: hidden; height: clamp(220px, 34vh, 420px); background: var(--charcoal); }
.lightband img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; will-change: transform; }
/* The top and bottom stops must reach the page ground exactly, or the band
   shows a visible seam against the charcoal section above it. */
.lightband::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(to bottom, rgba(17,22,28,1) 0%, rgba(17,22,28,.55) 12%, rgba(17,22,28,.06) 42%, rgba(17,22,28,.62) 82%, rgba(17,22,28,1) 100%),
        linear-gradient(90deg, rgba(17,22,28,.6) 0%, rgba(17,22,28,0) 38%, rgba(17,22,28,0) 62%, rgba(17,22,28,.6) 100%);
}

/* ---------- 28. CTA GLOW WASH ---------- */
.cta::after {
    content: ""; position: absolute; left: 50%; top: -8%; width: min(1200px, 140%); height: 116%;
    transform: translateX(-50%); z-index: 0; pointer-events: none;
    background-image: url("../img/atmos-glow.webp"); background-size: cover; background-position: center;
    mix-blend-mode: screen; opacity: .3;
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 72%);
    mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 72%);
}
.cta-in { position: relative; z-index: 2; }

/* =====================================================================
   21. TICKER — inverted marquee, the energy break after the hero
   ===================================================================== */
.ticker {
    background: var(--charcoal-3); overflow: hidden; white-space: nowrap;
    border-top: 2px solid var(--champagne-dp); border-bottom: 2px solid var(--champagne-dp);
    padding: 15px 0;
}
.tk-track { display: inline-flex; width: max-content; animation: tkRun 34s linear infinite; }
.ticker:hover .tk-track { animation-play-state: paused; }
.tk-seg { display: inline-flex; align-items: center; }
@keyframes tkRun { to { transform: translateX(-50%); } }
.tk-g { font-family: var(--f-grot); font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; font-size: 15px; padding: 0 20px; color: var(--ivory); }
.tk-s { font-family: var(--f-disp); font-weight: 300; font-style: italic; font-size: 19px; padding: 0 20px; color: var(--champagne); }
.tk-x { color: var(--champagne-dp); font-size: 7px; }

/* =====================================================================
   22. INVERTED BAND — the ONE per page. Pinstripe + corner glow +
   dotted-leader rows (leaders beat key/value columns, which wrap badly).
   ===================================================================== */
.inv { background: var(--champagne-dp); color: var(--ivory); position: relative; overflow: hidden; }
.inv::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(45deg, rgba(247,245,240,.035) 0 1px, transparent 1px 11px);
}
.inv::after {
    content: ""; position: absolute; right: -10%; top: -30%; width: 60%; height: 120%;
    pointer-events: none; background: radial-gradient(ellipse at 60% 40%, rgba(255,240,208,.16), transparent 62%);
}
.inv .shell { position: relative; z-index: 1; }
.inv .eyebrow { color: rgba(255, 246, 226, .92); }
.inv .disp .ser { color: #FFF0D0; }
.inv-head { margin-bottom: clamp(32px, 4.4vw, 56px); }

.inv-rows { border-top: 1px solid rgba(255, 246, 226, .26); }
.inv-row {
    display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 14px;
    padding: clamp(15px, 1.9vw, 23px) 0; border-bottom: 1px solid rgba(255, 246, 226, .16);
}
.inv-k { font-family: var(--f-grot); font-weight: 700; text-transform: uppercase; letter-spacing: -.008em; font-size: clamp(14px, 1.5vw, 20px); }
.inv-lead { border-bottom: 1px dotted rgba(255, 246, 226, .45); transform: translateY(-4px); min-width: 20px; }
.inv-v { font-family: var(--f-disp); font-weight: 300; font-style: italic; font-size: clamp(14px, 1.35vw, 18px); color: rgba(255, 248, 232, .93); text-align: right; max-width: 46ch; }
@media (max-width: 620px) {
    .inv-row { grid-template-columns: 1fr; gap: 5px; }
    .inv-lead { display: none; }
    .inv-v { text-align: left; }
}

/* =====================================================================
   23. WORK GALLERY — 2-col staircase; images sit slightly desaturated and
   resolve to full colour on hover; the caption rule draws across.
   ===================================================================== */
.work { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 74px); }
@media (min-width: 860px) {
    .work { grid-template-columns: 1fr 1fr; align-items: start; }
    /* Staircase kept, but halved: at the old offset the section ran 2,283px for
       four images, which is more scroll than four photographs earn. */
    .work .wk:nth-child(2) { margin-top: clamp(26px, 3.4vw, 58px); }
    .work .wk:nth-child(4) { margin-top: clamp(26px, 3.4vw, 58px); }
}
/* landscape pieces sit shorter than the portraits so rows don't tower */
.work .wk:nth-child(odd) .wk-frame  { aspect-ratio: 4 / 3; }
.work .wk:nth-child(even) .wk-frame { aspect-ratio: 4 / 5; }
.wk-frame { max-height: 62vh; }
.wk-frame { position: relative; overflow: hidden; background: var(--charcoal-3); }
.wk-frame img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: grayscale(.2) sepia(.08) brightness(.96);
    transition: transform 1.3s var(--ease), filter 1.1s var(--ease);
}
@media (hover: hover) {
    .wk:hover .wk-frame img { transform: scale(1.035); filter: none; }
    .wk:hover .wk-rule { width: 100%; }
}
.wk-cap { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 12px; margin-top: 18px; position: relative; padding-top: 14px; }
.wk-rule { position: absolute; top: 0; left: 0; height: 2px; width: 34px; background: var(--champagne); transition: width .7s var(--ease); }
.wk-txt { display: flex; flex-direction: column; gap: 5px; }
.wk-t { font-family: var(--f-grot); font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(14px, 1.35vw, 18px); }
.work-note { margin-top: clamp(30px, 4vw, 48px); font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(247, 245, 240, .38); }

/* =====================================================================
   25. CHAPTER INDICATOR — reads each section's own cue label
   ===================================================================== */
.chap {
    position: fixed; left: calc(var(--rail) + 18px); bottom: 20px; z-index: 420;
    display: none; align-items: center; gap: 9px; padding: 8px 14px;
    border: 1px solid var(--line-dk); background: rgba(17, 22, 28, .82); backdrop-filter: blur(8px);
    font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--champagne); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.chap.on { opacity: 1; transform: none; }
@media (min-width: 1220px) and (pointer: fine) { .chap { display: flex; } }

/* =====================================================================
   26. PEEK CARD — chases the cursor over service rows (desktop only)
   ===================================================================== */
.peek {
    position: fixed; top: 0; left: 0; z-index: 620; width: 214px; padding: 15px 17px;
    background: var(--champagne); color: var(--charcoal); pointer-events: none;
    opacity: 0; transform: translate(-50%, -50%) scale(.94); transition: opacity .35s var(--ease), transform .35s var(--ease);
    display: none;
}
.peek.on { opacity: 1; }
.peek-i { font-family: var(--f-mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; opacity: .72; }
.peek-t { font-family: var(--f-grot); font-weight: 700; text-transform: uppercase; font-size: 15px; line-height: 1.15; margin-top: 6px; }
@media (min-width: 1100px) and (pointer: fine) { .peek { display: block; } }

/* ---------- 28. AUDIT FIXES ---------- */
/* What happens after submit — the one place a reader most wants reassurance. */
.qf-next { flex: 1 1 100%; font-size: 13px; font-weight: 300; color: var(--ink-soft); line-height: 1.6; }

/* Reviews heading becomes a link only when a real listing URL exists. */
.rev-link { text-decoration: none; }
.rev-ar { font-size: .5em; vertical-align: super; color: var(--champagne-dp); }
@media (hover: hover) { .rev-link:hover .ser { text-decoration: underline; text-underline-offset: .12em; } }

/* Ghost numerals read as deliberate on dark but as a printing fault on ivory.
   One perceptual weight across both grounds. */
.on-light .idx { color: rgba(17, 22, 28, .18); }

/* Form labels at 9.5px were below comfortable reading size for fields someone
   has to fill in; tracking eases off as the size goes up. */
.qf-l { font-size: 11px; letter-spacing: .14em; }

/* Process: the title track was narrow enough to force three-line headings while
   the description column had slack. */
@media (min-width: 860px) {
    .pstep { grid-template-columns: clamp(80px, 9vw, 132px) minmax(0, 20ch) 1fr; gap: 38px; }
}

/* Why Us: the most commercially unusual promise led the list but was typeset
   identically to the least. */
.inv-row:first-child .inv-k { font-size: clamp(16px, 1.9vw, 25px); }
.inv-row:first-child .inv-v { font-size: clamp(15px, 1.5vw, 20px); }

/* Services needed an exit; the section ended in dead space. */
.svc-foot { margin-top: clamp(28px, 3.6vw, 46px); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.svc-foot .btn { flex: none; }
.svc-foot-n { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(247,245,240,.42); }

/* ---------- 29. FOOTER SOCIAL + LEGAL ---------- */
.foot-social { display: flex; gap: 10px; margin-top: 18px; }
.foot-social a {
    width: 34px; height: 34px; border: 1px solid var(--line-dk); border-radius: 50%;
    display: grid; place-items: center; color: var(--ivory-mute);
    transition: color .35s var(--ease), border-color .35s var(--ease);
}
.foot-social svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .foot-social a:hover { color: var(--champagne); border-color: var(--champagne); } }
.foot-legal { display: flex; gap: 18px; }
@media (hover: hover) { .foot-legal a:hover { color: var(--champagne); } }