/* ============================================================================
   Lumirex v1 — Reference template design system  (skinned: ROOFING / Redpoint)
   ----------------------------------------------------------------------------
   STRUCTURE + IDENTITY come from TEMPLATE_SPEC.md. CRAFT (this file) is the
   impeccable skill's call. Re-skinning a sibling niche = change the variables
   in :root below + the Tailwind theme map. Nothing else should need to move.

   QUALITY-ELEVATED KIT (2026-06 preview) — changes vs the shipped kit are
   marked [QE]. Rationale lives in _system/_audit/QUALITY_ELEVATION.md and the
   numeric law in _system/CRAFT_STANDARDS.md.
   ============================================================================ */

/* ---- 1. SKIN VARIABLES (the only things that change per client) ---------- */
:root {
  /* The six skin variables (TEMPLATE_SPEC §1) — values from content.json.skin.
     Color strategy: ONE bright accent on a clean COOL-NEUTRAL black/white/grey base.
     There is exactly ONE accent value; every other accent token is derived from it. */
  --accent:        #D81E2C;   /* clean bright red — the ONE accent (buttons, words, numbers, stars, icons, dividers, outlines) */
  --base:          #0A0A0B;   /* clean cool true near-black — dark sections, footer */
  --surface:       #FFFFFF;   /* pure white — light background */

  --font-display:  'Barlow Condensed', system-ui, sans-serif;  /* BOLD CAPS lead of cadence */
  --font-accent:   'Barlow Condensed', system-ui, sans-serif;  /* counter-phrase: same sans, accent color */
  --font-body:     'Barlow', system-ui, sans-serif;            /* body */
  /* --service-layout: cards  (handled in markup, recorded for reference) */

  /* ---- Derived craft tokens — all computed FROM --accent (no second color) ---- */
  --accent-deep:   color-mix(in srgb, var(--accent) 84%, #000);   /* pressed / deepened red (hover) */
  --accent-bright: #F0414D;   /* [QE] brighter sibling of --accent for accent TEXT on the dark
                                 base — the raw accent is ~3.9:1 on near-black (fails small-text
                                 AA); this clears ~5.2:1. Every niche sets its own (pest #1FB389,
                                 tree #F59E0B). */
  --accent-tint:   color-mix(in srgb, var(--accent) 10%, transparent); /* faint accent wash */
  --on-accent:     #FFFFFF;                 /* text on accent fills */

  --base-raised:   #16171B;                 /* raised surface on dark sections */
  --base-line:     rgba(255, 255, 255, 0.12);
  --base-line-2:   rgba(255, 255, 255, 0.06);

  --surface-2:     #F4F5F7;                 /* cool neutral grey alternating band */
  --hairline:      #E5E7EB;                 /* cool light borders */

  --ink:           #0E0F12;                 /* primary text on light (cool near-black) */
  --ink-soft:      #565D6B;                 /* cool grey muted text on light */
  --paper:         #FFFFFF;                 /* primary text on dark */
  --paper-soft:    #9CA3AF;                 /* cool grey muted text on dark */

  --radius:        6px;                      /* clean, modern */
  --radius-lg:     12px;

  /* [QE] layered shadow ramp — same cool-dark hue, 2–3 layers at low alpha instead of one
     fat blur; resting shadows read as soft real light (benchmark: Hugo Builders card stack). */
  --shadow-sm:     0 1px 2px rgba(10,12,18,.05), 0 2px 6px rgba(10,12,18,.05), 0 6px 18px rgba(10,12,18,.06);
  --shadow-md:     0 2px 4px rgba(10,12,18,.06), 0 8px 18px rgba(10,12,18,.08), 0 20px 44px -16px rgba(10,12,18,.22);
  --shadow-lg:     0 4px 10px rgba(10,12,18,.07), 0 18px 40px -10px rgba(10,12,18,.18), 0 44px 88px -24px rgba(10,12,18,.40);
  --shadow-accent: 0 10px 28px -8px color-mix(in srgb, var(--accent) 38%, transparent); /* [QE] primary-CTA hover */

  --ease:          cubic-bezier(.22,1,.36,1);   /* ease-out-quint */
  --ease-soft:     cubic-bezier(.32,.72,0,1);

  --maxw:          1240px;
  --gutter:        clamp(1.25rem, 5vw, 4rem);

  /* [QE] fluid type scale dialed DOWN to the sibling band (pest/tree already run here; the
     premium benchmark h2 band is 48–59px desktop — the old 4.6rem/73px h2 shouted). */
  --fs-eyebrow:    clamp(.82rem, .78rem + .18vw, .9rem);
  --fs-body:       clamp(1rem, .97rem + .16vw, 1.06rem);
  --fs-lead:       clamp(1.14rem, 1.04rem + .48vw, 1.42rem);
  --fs-h3:         clamp(1.3rem, 1.08rem + .95vw, 1.78rem);
  --fs-h2:         clamp(2.15rem, 1.55rem + 2.7vw, 3.7rem);
  --fs-h1:         clamp(2.7rem, 1.7rem + 4.6vw, 5.4rem);
  --fs-mega:       clamp(3.4rem, 1.6rem + 8vw, 8.5rem);
}

/* ---- 2. BASE ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  /* 1.5, NOT 1.6 — deliberate, do not "correct" this.
     This file declared 1.6, but every shipped page also loaded the Tailwind Play
     CDN, which injects Preflight into <head> at RUNTIME — i.e. after this
     stylesheet — and Preflight's `body { line-height: inherit }` (inheriting its
     own `html { line-height: 1.5 }`) won on source order. So every site has
     actually rendered at 1.5 since launch; the 1.6 here never took effect.
     The CDN was removed 2026-07-22 (it generated nothing — zero Tailwind
     utilities in the markup — and its inline config script was the only thing
     blocking a nonce-free CSP). Pinning 1.5 here keeps delivered sites
     pixel-identical to what clients already approved. Changing it to 1.6 is a
     real design change: ~1.5px more leading per line, ~0.9% taller pages. */
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

/* Lists carry no markers or indent by default — every list here is a layout
   container (.process-grid, .services-grid, .layers__list), never prose.
   This USED to come from Tailwind Preflight, which the Play CDN injected as a
   side effect. The CDN was removed (it generated nothing — the design uses zero
   Tailwind utilities) so the reset it silently provided has to be explicit.
   Without this, `<ol class="process-grid">` regains decimal markers and ~40px of
   padding-inline-start. NOTE: the byte-fidelity gate compares HTML, not pixels,
   so it does NOT protect this — verify visually if you touch it.
   The rest of Preflight was already covered above (box-sizing, margin, img/video,
   a, button) and headings are set explicitly by .page-hero h1 / .cta-band h2. */
ol, ul { list-style: none; padding: 0; }

p { text-wrap: pretty; }                /* [QE] no orphan words in paragraphs */
em { font-style: normal; font-weight: 600; }  /* [QE] DNA guard: no italic anywhere — emphasis = weight */

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.dark-section :focus-visible { outline-color: var(--paper); }

.skip-link {
  position: absolute; left: 1rem; top: -100%;
  background: var(--accent); color: var(--on-accent);
  padding: .7rem 1.1rem; border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; z-index: 200;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---- 3. LAYOUT HELPERS --------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* [QE] section rhythm has three weights — identical padding on every section is the
   looped-component tell. Assign by importance: compact (dense strips: reviews, faq, social),
   default, climax (the conversion moment: contact). Benchmark band: 85–150px desktop. */
.section          { padding-block: clamp(4rem, 3rem + 5vw, 7.5rem); }
.section--compact { padding-block: clamp(3rem, 2.4rem + 3vw, 5.25rem); }
.section--climax  { padding-block: clamp(5rem, 4rem + 7vw, 9.5rem); }
.section--tight   { padding-block: clamp(3rem, 2.4rem + 3vw, 5rem); }  /* legacy alias */
.dark-section { background: var(--base); color: var(--paper); }
.alt-section  { background: var(--surface-2); }
/* [QE] the one engineered seam device — a 1px accent pinstripe at ~24%, used ONCE per page
   on a light→light handoff (benchmark: Capstone's section pinstripe). */
.section-seam { border-top: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); }

/* ---- 4. TYPOGRAPHY: the headline cadence (signature device, §2) ---------- */
/* BOLD CAPS STATEMENT.  +  bold condensed counter-phrase in the accent color
   (modern two-tone — NO serif, NO italic).
   [QE] the counter-phrase steps DOWN to .64em of the lead. Same-size two-tone made the
   accent line outweigh the message (hierarchy inverted, accent at max volume on every
   section). The step keeps the locked two-tone identity and restores hierarchy. */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;        /* [QE] was .26em — beyond the caps range (.05–.12em + display
                                   licence); .18em keeps the airiness without the gaps */
  color: var(--accent);
  display: inline-block;
}
.dark-section .eyebrow { color: var(--accent-bright); }

.cadence {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-h2);
  line-height: .96;
  letter-spacing: -.022em;      /* [QE] display sizes want −2 to −2.5%; −.01em read loose at 59px */
  color: var(--ink);
  text-wrap: balance;
}
.dark-section .cadence { color: var(--paper); }
.cadence .accent {
  display: block;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.012em;      /* [QE] smaller size, slightly relaxed tracking */
  font-size: .64em;             /* [QE] the size step — see header note */
  line-height: 1.04;
  color: var(--accent);
  margin-top: .3em;
}
.dark-section .cadence .accent { color: var(--accent-bright); }
.cadence--inline .accent { display: inline; font-size: 1em; }

.lead { font-size: var(--fs-lead); line-height: 1.4; color: var(--ink-soft); max-width: 46ch; }
.dark-section .lead { color: var(--paper-soft); line-height: 1.45; }  /* [QE] light-on-dark breathes more */
p { max-width: 70ch; }

.section-head { margin-bottom: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); }
.section-head .eyebrow { margin-bottom: 1rem; }
/* [QE] head row variant: heading left, meta/link right (the reviews head, generalized) */
.section-head--row { display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 1.5rem; }

/* ---- 5. BUTTONS: dual-tone invert on hover (interaction 1, §3) ----------- */
.btn {
  --btn-fg: var(--ink);
  --btn-bg: transparent;
  --btn-bd: var(--ink);
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1;
  padding: 1.05rem 1.7rem;
  min-height: 48px;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .28s var(--ease), color .28s var(--ease),
              border-color .28s var(--ease), transform .28s var(--ease),
              box-shadow .28s var(--ease);
}
.btn .btn-arrow { transition: transform .28s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }
/* [QE] the press — a 60ms scale-down on :active. Cheapest "engineered" signal there is. */
.btn:active { transform: translateY(1px) scale(.985); transition-duration: .06s; }

/* Primary: solid accent at rest -> inverts to outline on hover */
.btn--primary {
  --btn-fg: var(--on-accent);
  --btn-bg: var(--accent);
  --btn-bd: var(--accent);
}
.btn--primary:hover {
  --btn-fg: var(--accent);
  --btn-bg: transparent;
  box-shadow: var(--shadow-accent);   /* [QE] accent-tinted hover shadow (one-accent rule: derived) */
}
/* Ghost: outline at rest -> fills solid on hover */
.btn--ghost { --btn-fg: var(--ink); --btn-bg: transparent; --btn-bd: var(--ink); }
.btn--ghost:hover { --btn-fg: var(--surface); --btn-bg: var(--ink); }

/* On dark sections the ghost flips to light ink */
.dark-section .btn--ghost,
.btn--ghost-light { --btn-fg: var(--paper); --btn-bd: var(--paper-soft); }
.dark-section .btn--ghost:hover,
.btn--ghost-light:hover { --btn-fg: var(--base); --btn-bg: var(--paper); --btn-bd: var(--paper); }

.btn--sm { font-size: .9rem; padding: .7rem 1.15rem; min-height: 42px; }

/* text link with sliding arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; font-size: .92rem;
  color: var(--accent);
}
.link-arrow svg { transition: transform .28s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ============================================================================
   6. HEADER  (fixed, transparent over hero -> solid on scroll — Block 1)
   ============================================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease), backdrop-filter .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: 84px;
}
.brand { display: inline-flex; align-items: center; gap: .7rem; min-width: 0;
  max-width: min(52vw, 380px); }            /* fixed container; JS shrinks + stacks the name to fit */
.brand__mark { height: 38px; width: auto; }
.brand__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.45rem; letter-spacing: .01em; text-transform: uppercase;
  color: var(--paper); line-height: 1.02; transition: color .35s var(--ease);
  display: block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-wrap: balance;
}
.brand__name .dot { color: var(--accent); }
@media (max-width: 860px) { .brand { max-width: 64vw; } }

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2.1rem); }
.nav__link {
  font-family: var(--font-display); font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em; font-size: .96rem;
  color: var(--paper); position: relative; padding-block: .4rem;
  transition: color .25s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__link::after { background: var(--accent-bright); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--accent-bright); }

/* scrolled state — solid DARK bar (modern; keeps the white logo visible) */
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--base) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--base-line);
  box-shadow: 0 10px 34px -22px rgba(0,0,0,.7);
  height: auto;
}
.site-header.is-scrolled .site-header__inner { height: 72px; transition: height .35s var(--ease); }

/* On interior (non-hero) pages / thank-you the header starts solid + dark */
.site-header.header--solid {
  position: sticky;
  background: var(--base);
  border-bottom-color: var(--base-line);
}

/* mobile nav toggle */
.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px;
  align-items: center; justify-content: center; background: none; border: none; }
.nav-toggle span { width: 24px; height: 2px; background: var(--paper); transition: .3s var(--ease); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; inset: 84px 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--base); padding: 1rem var(--gutter) 2.5rem;
    border-bottom: 1px solid var(--base-line);
    transform: translateY(-120%); transition: transform .4s var(--ease);
    box-shadow: var(--shadow-lg); max-height: calc(100vh - 84px); overflow:auto;
  }
  .nav.is-open { transform: translateY(0); }
  .nav__link { color: var(--paper); width: 100%; padding: 1rem 0; font-size: 1.2rem;
    border-bottom: 1px solid var(--base-line); }
  .nav__link::after { display: none; }
  .nav .btn { margin-top: 1.4rem; width: 100%; justify-content: center; }
  .nav-open { overflow: hidden; }
}

/* ============================================================================
   7. HERO (Block 1) — full-bleed video + scrim + logo + CTA + scroll cue
   ============================================================================ */
.hero { position: relative; min-height: 100svh; display: flex; isolation: isolate;
  color: var(--paper); }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* [QE] eased multi-stop scrim — no visible gradient edge, more video mid-frame, dark anchors
   only where text/UI lives (top: header, bottom: CTAs + cue). */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(10,12,18,.58) 0%,
      rgba(10,12,18,.42) 11%,
      rgba(10,12,18,.27) 24%,
      rgba(10,12,18,.16) 38%,
      rgba(10,12,18,.13) 52%,
      rgba(10,12,18,.22) 68%,
      rgba(10,12,18,.48) 84%,
      rgba(10,12,18,.86) 100%),
    radial-gradient(120% 80% at 50% 18%, transparent 40%, rgba(10,12,18,.35) 100%);
}
/* Hero content — CENTERED + minimal (Hugo restraint): logo + one line + buttons */
.hero__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding-block: clamp(7rem, 6rem + 6vw, 9rem);
}
/* Text wordmark — a fixed-size container. JS shrinks the font AND lets the name wrap onto
   multiple lines so any business name fills the same box (short = big 1 line, long = smaller stack). */
.hero__wordmark {
  display: block; margin: 0 auto 1.3rem; max-width: min(92vw, 760px);
  white-space: normal; overflow-wrap: anywhere; text-wrap: balance;
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.02em; line-height: .9;
  font-size: clamp(3.4rem, 1.8rem + 7.5vw, 8rem);   /* responsive cap; JS scales down to fit the box */
  color: var(--paper);
  text-shadow: 0 6px 40px rgba(10,12,18,.5);
}
.hero__wordmark .dot { color: var(--accent); }
.hero__line {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.25rem, 1rem + 1.05vw, 1.85rem);
  color: var(--paper); max-width: 30ch; line-height: 1.18; letter-spacing: .005em;
  text-shadow: 0 1px 20px rgba(10,12,18,.55);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.1rem; justify-content: center; }
.hero .btn--ghost { --btn-fg: var(--paper); --btn-bd: rgba(255,255,255,.5); }
.hero .btn--ghost:hover { --btn-fg: var(--base); --btn-bg: var(--paper); --btn-bd: var(--paper); }

/* scroll cue — Hugo-style chevron that gently bounces up/down, bottom-center */
.scroll-cue {
  position: absolute; left: 50%; bottom: 1.9rem; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .6rem;
  color: var(--paper); font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .32em; font-size: .66rem; font-weight: 600;
  opacity: .9;
}
.scroll-cue__chev { animation: cueBounce 1.8s var(--ease-soft) infinite; }
@keyframes cueBounce { 0%,100% { transform: translateY(-3px); opacity:.65 } 50% { transform: translateY(5px); opacity:1 } }
@media (prefers-reduced-motion: reduce) { .scroll-cue__chev { animation: none; } }

/* ============================================================================
   8. MARQUEE (Block 2) — infinite-scroll service-keyword band
   ============================================================================ */
.marquee {
  background: var(--base); color: var(--paper);
  border-block: 1px solid var(--base-line);
  overflow: hidden; padding-block: 1.05rem;
}
.marquee__track { display: flex; width: max-content; gap: 0;
  animation: marquee 38s linear infinite; will-change: transform; }
.marquee__item {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .14em; font-size: .98rem; padding-inline: 1.6rem; white-space: nowrap;
}
.marquee__item::after { content: "•"; color: var(--accent-bright); margin-left: 3.2rem; font-size: .7em; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
}

/* ============================================================================
   9. IDENTITY band (Block 3)
   ============================================================================ */
.identity { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2.5rem,5vw,5.5rem);
  align-items: center; }
.identity__body { margin-block: 1.5rem 2rem; font-size: var(--fs-lead); line-height: 1.5;
  color: var(--ink-soft); max-width: 48ch; }
.stat-row { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 3vw, 3rem); margin-bottom: 2.2rem;
  border-top: 1px solid var(--hairline); padding-top: 1.8rem; }
.stat { display: flex; flex-direction: column; }
.stat__value { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem,1.4rem + 1.8vw,2.9rem);
  line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums; }   /* [QE] stats are figures — tabular */
.stat__label { font-size: .86rem; color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: .1em; margin-top: .5rem; font-family: var(--font-display); font-weight: 500; }
.identity__media { position: relative; }
.identity__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); }
.identity__media::after { /* thin accent frame, offset */
  content:""; position:absolute; inset: 14px -14px -14px 14px; border:1.5px solid var(--accent);
  border-radius: var(--radius-lg); z-index:-1; }
@media (max-width: 820px){ .identity{ grid-template-columns:1fr; } .identity__media{ order:-1; } }

/* ============================================================================
   10. IMAGE-HOVER device (interaction 2, §3) — used by services + gallery
   ============================================================================ */
.media-hover {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--base-raised);
}
.media-hover img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease); }
.media-hover::after { /* thin accent outline, drawn on hover */
  content:""; position:absolute; inset:0; border:2px solid var(--accent);
  border-radius: var(--radius-lg); opacity:0; transition: opacity .35s var(--ease);
  pointer-events:none; z-index:3;
}
.media-hover__label {
  position:absolute; left:1rem; bottom:1rem; z-index:4;
  display:inline-flex; align-items:center; gap:.45em;
  font-family: var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; font-size:.82rem; color: var(--on-accent);
  background: var(--accent); padding:.5rem .8rem; border-radius: var(--radius);
  opacity:0; transform: translateY(10px); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.media-hover:hover img, .media-hover:focus-visible img { transform: scale(1.045); }
.media-hover:hover, .media-hover:focus-visible { transform: translateY(-4px); }
.media-hover { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.media-hover:hover, .media-hover:focus-visible { box-shadow: var(--shadow-md); }
.media-hover:hover::after, .media-hover:focus-visible::after { opacity:1; }
.media-hover:hover .media-hover__label, .media-hover:focus-visible .media-hover__label {
  opacity:1; transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .media-hover img, .media-hover, .media-hover__label { transition: opacity .2s linear; }
  .media-hover:hover img { transform:none; }
  .media-hover:hover { transform:none; }
  .media-hover__label { transform:none; }
}

/* ============================================================================
   11. SERVICES (Block 4) — cards layout
   ============================================================================ */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px,1fr)); gap: 1.4rem; }
.svc-card { display:flex; flex-direction:column; }
.svc-card .media-hover { aspect-ratio: 4/3; margin-bottom: 1.25rem; }
.svc-card__title { font-family: var(--font-display); font-weight:700; text-transform:uppercase;
  font-size: var(--fs-h3); line-height:1; color: var(--ink); text-wrap: balance; }
.svc-card__tags { font-size: .82rem; color: var(--accent); font-family: var(--font-display);
  font-weight:500; letter-spacing:.04em; margin-top:.6rem; text-transform:uppercase; }
.svc-card__desc { color: var(--ink-soft); margin-top:.7rem; font-size:1rem; line-height:1.5; flex:1; }
.svc-card__link { margin-top:1.1rem; }

/* ============================================================================
   12. GALLERY (Block 5) — weighted landscape grid (fits 16:9 sources)
   [QE] one featured tile (2×2) + always-visible micro-captions. Six equal cells
   with hover icons is the stock-plugin look; a weighted grid + captions implies
   someone looked at the photos. Captions double as local-SEO text.
   ============================================================================ */
.bento { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.tile { display:flex; flex-direction:column; gap:.7rem; margin:0; min-width:0; }
.tile .media-hover { aspect-ratio: 3/2; }
.tile--featured { grid-column: span 2; grid-row: span 2; }
.tile--featured .media-hover { flex:1; aspect-ratio:auto; min-height:0; }
.tile__cap { font-size:.88rem; color: var(--ink-soft); line-height:1.35; }
.tile__cap strong { font-family: var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.07em; font-size:.8rem; color: var(--ink); margin-right:.45em; }
/* legacy tile classes neutralized — kept for old markup */
.t-tall, .t-wide, .t-square, .t-bigsquare { grid-column: auto; grid-row: auto; }
.bento > .media-hover { aspect-ratio: 3/2; }   /* legacy direct-child markup still renders */
@media (max-width: 880px){ .bento{ grid-template-columns: repeat(2,1fr); }
  .tile--featured { grid-column: span 2; grid-row: auto; }
  .tile--featured .media-hover { aspect-ratio: 3/2; } }
@media (max-width: 540px){ .bento{ grid-template-columns: 1fr; }
  .tile--featured { grid-column: auto; } }
.gallery__foot { margin-top: 2.6rem; display:flex; justify-content:center; }

/* ============================================================================
   13. PROCESS timeline (optional block)
   ============================================================================ */
.process-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(1.2rem,2.5vw,2.4rem); }
.process-step { position:relative; padding-top:2.4rem; }
.process-step::before { content:""; position:absolute; top:.55rem; left:0; right:0; height:1px;
  background: var(--base-line); }
.process-step::after { content:""; position:absolute; top:calc(.55rem - 4px); left:0; width:9px; height:9px;
  background: var(--accent-bright); border-radius:50%; }
.process-step__n { font-family: var(--font-display); font-weight:800; font-size: clamp(1.8rem,1.4rem + 1.2vw,2.6rem);
  line-height:1; color: var(--accent-bright); font-variant-numeric: tabular-nums; }
.process-step__title { font-family: var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.02em; font-size:1.3rem; margin-top:.6rem; color: var(--paper); }
.process-step__desc { color: var(--paper-soft); margin-top:.6rem; font-size:.98rem; line-height:1.55; }
@media (max-width: 820px){ .process-grid{ grid-template-columns: repeat(2,1fr); row-gap:2.6rem;} }
@media (max-width: 460px){ .process-grid{ grid-template-columns: 1fr; } }

/* ============================================================================
   14. BEFORE / AFTER (optional block) — drag/keyboard slider
   ============================================================================ */
.ba-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 1.8rem; }
.ba { display:flex; flex-direction:column; gap:1rem; }
.ba__stage {
  --pos: 50%;
  position:relative; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow-md); user-select:none; touch-action: pan-y;
}
.ba__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba__after { clip-path: inset(0 0 0 var(--pos)); }
.ba__tag { position:absolute; top:.8rem; z-index:4; font-family:var(--font-display); font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; padding:.35rem .7rem; border-radius:3px;
  background: rgba(10,12,18,.72); color: var(--paper); backdrop-filter: blur(2px); }
.ba__tag--before{ left:.8rem; } .ba__tag--after{ right:.8rem; background: var(--accent); color: var(--on-accent); }
.ba__divider { position:absolute; top:0; bottom:0; left: var(--pos); width:2px; background: var(--accent);
  z-index:5; transform: translateX(-1px); }
.ba__handle { position:absolute; top:50%; left: var(--pos); z-index:6; width:44px; height:44px;
  transform: translate(-50%,-50%); border-radius:50%; background: var(--accent); color: var(--on-accent);
  display:grid; place-items:center; box-shadow: var(--shadow-md); }
.ba__range { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:7; }
.ba__range:focus-visible + .ba__handle { outline:3px solid var(--paper); outline-offset:2px; }
.ba__label { font-size:.95rem; color: var(--ink-soft); }

/* ============================================================================
   15. WHY-US (Block 6) — dark numbered reasons + cert badge
   ============================================================================ */
.why-grid { display:grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2.5rem,5vw,5rem); align-items:start; }
.reasons { display:grid; gap: 0; }
.reason { display:grid; grid-template-columns: auto 1fr; gap: 1.4rem; padding-block: 1.7rem;
  border-top: 1px solid var(--base-line); }
.reason:last-child { border-bottom: 1px solid var(--base-line); }
.reason__n { font-family: var(--font-display); font-weight:800; font-size: 1.6rem; color: var(--accent-bright);
  line-height:1.2; font-variant-numeric: tabular-nums; }
.reason__title { font-family: var(--font-display); font-weight:600; text-transform:uppercase;
  font-size:1.4rem; letter-spacing:.01em; color: var(--paper); line-height:1.05; }
.reason__desc { color: var(--paper-soft); margin-top:.5rem; font-size:1rem; line-height:1.55; max-width:46ch; }
.cert-badge { position: sticky; top: 110px; background: var(--base-raised); border:1px solid var(--base-line);
  border-radius: var(--radius-lg); padding: 2rem; text-align:center; }
.cert-badge img { width: 120px; height:120px; object-fit:contain; margin:0 auto 1.2rem; }
.cert-badge__title { font-family: var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:1.3rem; color: var(--paper); line-height:1.05; }
.cert-badge__note { color: var(--accent-bright); font-family:var(--font-display); font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; margin-top:.7rem; }
@media (max-width: 820px){ .why-grid{ grid-template-columns:1fr; } .cert-badge{ position:static; } }

/* ============================================================================
   16. REVIEWS (Block 7)
   ============================================================================ */
.reviews-head { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1.5rem; }
.reviews-summary { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em;
  font-size:.9rem; color: var(--ink-soft); display:inline-flex; align-items:center; gap:.5rem;
  font-variant-numeric: tabular-nums; }
.reviews-summary .star{ color: var(--accent); }
.reviews-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap:1.4rem; margin-top:1rem; }
.review { background: var(--surface); border:1px solid var(--hairline); border-radius: var(--radius-lg);
  padding: 1.9rem; display:flex; flex-direction:column; box-shadow: var(--shadow-sm); }
.alt-section .review { background:#fff; }
.review__stars { display:flex; gap:.15rem; color: var(--accent); margin-bottom:1rem; }
/* [QE] hanging open-quote: the glyph sits in the margin so the letterforms align (typeset, not
   rendered). Quote size up a step so the words, not the chrome, carry the card. */
.review__text { font-size:1.12rem; line-height:1.55; color: var(--ink); flex:1; text-indent:-.42em; }
.review__text::before { content:"\201C"; }
.review__author { margin-top:1.4rem; font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color: var(--ink); }
.review__source { font-size:.8rem; color: var(--ink-soft); margin-top:.2rem; display:flex; align-items:center; gap:.35rem; }
.reviews-foot { margin-top:2.4rem; }

/* ============================================================================
   17. SOCIAL FEED (optional block) — vertical video tiles
   ============================================================================ */
.social-head { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1rem; }
.social-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:1.2rem; margin-top:1.5rem; }
.social-tile { position:relative; aspect-ratio:9/16; border-radius: var(--radius-lg); overflow:hidden;
  background: var(--base-raised); box-shadow: var(--shadow-md); }
.social-tile video, .social-tile img { width:100%; height:100%; object-fit:cover; }
.social-tile__scrim { position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,12,18,.7),transparent 45%); }
.social-tile__label { position:absolute; left:.9rem; right:.9rem; bottom:.9rem; color:var(--paper);
  font-family:var(--font-display); font-weight:500; text-transform:uppercase; letter-spacing:.06em; font-size:.82rem; }
.social-tile__play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:54px; height:54px;
  border-radius:50%; background: color-mix(in srgb, var(--accent) 95%, transparent); /* [QE] was a hardcoded accent literal — the re-skin trap, now var-driven */
  display:grid; place-items:center; color:var(--on-accent); }

/* ============================================================================
   18. FAQ (Block 8) — accordion
   ============================================================================ */
.faq-wrap { max-width: 820px; margin-inline:auto; }
.faq { border-top:1px solid var(--hairline); }
.faq:last-child { border-bottom:1px solid var(--hairline); }
.faq__q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  text-align:left; background:none; border:none; padding: 1.5rem 0;
  font-family:var(--font-display); font-weight:600; font-size: clamp(1.15rem,1rem + .6vw,1.5rem);
  text-transform:uppercase; letter-spacing:.005em; color: var(--ink); }
.faq__icon { flex:0 0 auto; width:26px; height:26px; position:relative; }
.faq__icon::before, .faq__icon::after { content:""; position:absolute; background: var(--accent);
  transition: transform .3s var(--ease); }
.faq__icon::before { top:50%; left:0; right:0; height:2px; transform:translateY(-50%); }
.faq__icon::after { left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%); }
.faq[aria-expanded="true"] .faq__icon::after,
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translateX(-50%) scaleY(0); }
.faq__a { display:grid; grid-template-rows:0fr; transition: grid-template-rows .35s var(--ease); }
.faq__a > div { overflow:hidden; }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows:1fr; }
.faq__a p { color: var(--ink-soft); padding-bottom: 1.5rem; font-size:1.05rem; line-height:1.6; max-width:70ch; }
@media (prefers-reduced-motion: reduce){ .faq__a{ transition:none; } .faq__icon::before,.faq__icon::after{transition:none;} }

/* ============================================================================
   19. CONTACT + CTA band + FOOTER (Block 9)
   ============================================================================ */
.cta-band { background: var(--accent); color: var(--on-accent); }
.cta-band__inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:2rem;
  padding-block: clamp(2.5rem,2rem + 3vw,4rem); }
.cta-band h2 { font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size: clamp(2rem,1.4rem + 2.6vw,3.4rem); line-height:.92; letter-spacing:-.018em; }
.cta-band h2 .accent { font-family:var(--font-display); font-style:normal; font-weight:800;
  text-transform:uppercase; display:block; color:var(--on-accent); opacity:.78;
  font-size:.64em; line-height:1.04; margin-top:.28em; letter-spacing:-.01em; }  /* [QE] counter step */
.cta-band .btn { --btn-fg: var(--accent); --btn-bg: var(--on-accent); --btn-bd: var(--on-accent); }
.cta-band .btn:hover { --btn-fg: var(--on-accent); --btn-bg: transparent; --btn-bd: var(--on-accent); }

.contact-grid { display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2.5rem,5vw,5rem); align-items:start; }
.contact-info p { color: var(--paper-soft); margin-block:1.2rem 2rem; font-size: var(--fs-lead); line-height:1.55; }
.contact-line { display:flex; align-items:center; gap:.9rem; padding-block:.85rem; border-top:1px solid var(--base-line);
  color: var(--paper); }
.contact-line:last-child{ border-bottom:1px solid var(--base-line); }
.contact-line svg{ color: var(--accent-bright); flex:0 0 auto; }
.contact-line a{ color: var(--paper); }
.contact-line a:hover{ color: var(--accent-bright); }
.contact-line__big { font-family:var(--font-display); font-weight:600; font-size:1.4rem;
  font-variant-numeric: tabular-nums; }

/* form */
.form { background: var(--base-raised); border:1px solid var(--base-line); border-radius: var(--radius-lg);
  padding: clamp(1.6rem,1.2rem + 1.5vw,2.6rem); }
.field { margin-bottom: 1.1rem; }
.field--row { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field label { display:block; font-family:var(--font-display); font-weight:500; text-transform:uppercase;
  letter-spacing:.08em; font-size:.8rem; color: var(--paper); margin-bottom:.5rem; }
.field label .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width:100%; background: rgba(255,255,255,.05); border:1.5px solid var(--base-line);
  border-radius: var(--radius); color: var(--paper); padding:.85rem .9rem; font-family: var(--font-body);
  font-size:1rem; transition: border-color .25s var(--ease), background .25s var(--ease),
  box-shadow .25s var(--ease); }
.field input::placeholder, .field textarea::placeholder { color: var(--paper-soft); opacity:.7; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color: var(--accent); background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }  /* [QE] visible focus ring */
/* [QE] select chevron drawn with two gradients in the accent VAR — kills the hardcoded-hex
   data-URI that every re-skin had to hand-edit (the documented gotcha). */
.field select { appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent-bright) 50%),
    linear-gradient(135deg, var(--accent-bright) 50%, transparent 50%);
  background-position: calc(100% - 1.45rem) 50%, calc(100% - 1rem) 50%;
  background-size: .45rem .45rem, .45rem .45rem;
  background-repeat: no-repeat; padding-right: 2.6rem; }
.field textarea { resize:vertical; min-height:120px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #ff7a6b; }
.form-error { color:#ff8b7d; font-size:.85rem; margin-top:.4rem; min-height:1em; }
.form .btn { width:100%; justify-content:center; margin-top:.5rem; }
.form .btn { --btn-fg: var(--on-accent); --btn-bg: var(--accent); --btn-bd: var(--accent); }
.form .btn:hover { --btn-fg: var(--accent); --btn-bg: transparent; }
.hp-field { position:absolute; left:-9999px; }

/* footer */
.site-footer { background: var(--base); color: var(--paper); border-top:1px solid var(--base-line); }
/* [QE] four columns incl. the spec'd CONTACT column (phone is the #1 contractor conversion
   device — it belongs in the footer); padding trimmed (7rem of air around four links read
   empty, not generous). */
.footer-grid { display:grid; grid-template-columns: 1.3fr .9fr 1fr 1.1fr; gap: clamp(2rem,3.5vw,4rem);
  padding-top: clamp(3.5rem,3rem + 3vw,5.5rem); padding-bottom: clamp(3.5rem,3rem + 3vw,5.5rem); }
.footer__brand .brand__name{ color: var(--paper); font-size:1.7rem; }
.footer__tag { color: var(--paper-soft); margin-top:1rem; max-width:32ch; }
.footer__heading { font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; font-size:.82rem; color: var(--accent-bright); margin-bottom:1.2rem; }
.footer__links { display:flex; flex-direction:column; gap:.7rem; }
.footer__links a, .footer__links span { color: var(--paper-soft); transition: color .2s var(--ease); }
.footer__links a:hover { color: var(--paper); }
.footer__phone { font-family:var(--font-display); font-weight:700; font-size:1.35rem;
  color: var(--paper) !important; font-variant-numeric: tabular-nums; }
.footer__phone:hover { color: var(--accent-bright) !important; }
.footer-bar { border-top:1px solid var(--base-line); margin-top: clamp(1.5rem,1rem + 2vw,3rem);
  padding-block: clamp(2rem,1.5rem + 1.5vw,2.75rem); display:flex;
  justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-bar p, .footer-bar a { color: var(--paper-soft); font-size:.85rem; }
.footer-bar a:hover { color: var(--paper); }
.footer-legal { display:flex; gap:1.5rem; }
@media (max-width: 960px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer__brand{ grid-column:1/-1; } }
@media (max-width: 760px){ .contact-grid{ grid-template-columns:1fr; } .field--row{ grid-template-columns:1fr; } }

/* ---- generic page header (interior pages) ------------------------------- */
.page-hero { background: var(--base); color: var(--paper); padding-top: clamp(8rem,7rem + 5vw,11rem);
  padding-bottom: clamp(3rem,2.4rem + 3vw,5rem); position:relative; overflow:hidden; }
.page-hero .eyebrow{ color: var(--accent-bright); }
.page-hero h1 { font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size: var(--fs-h2); line-height:.96; letter-spacing:-.022em; margin-top:.9rem; color:var(--paper);
  text-wrap: balance; }
.page-hero h1 .accent{ font-family:var(--font-display); font-style:normal; font-weight:800; text-transform:uppercase;
  color:var(--accent-bright); display:block; font-size:.64em; line-height:1.04; margin-top:.3em;
  letter-spacing:-.012em; }  /* [QE] counter step on interior pages too */
.page-hero p { color: var(--paper-soft); font-size: var(--fs-lead); margin-top:1.2rem; max-width:52ch; }
.breadcrumb { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em; font-size:.78rem;
  color: var(--paper-soft); margin-bottom:1.2rem; }
.breadcrumb a:hover{ color: var(--accent-bright); }

/* prose for legal pages */
.prose { max-width: 760px; }
.prose h2 { font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:1.6rem;
  margin-top:2.5rem; margin-bottom:.8rem; color:var(--ink); }
.prose p, .prose li { color: var(--ink-soft); margin-bottom:1rem; line-height:1.7; }
.prose ul { padding-left:1.2rem; } .prose li{ margin-bottom:.5rem; }
.prose a { color: var(--accent); text-decoration:underline; text-underline-offset:3px; }

/* thank-you */
.confirm { min-height: 80svh; display:grid; place-items:center; text-align:center; }
.confirm__icon { width:84px; height:84px; border-radius:50%; background: var(--accent-tint);
  display:grid; place-items:center; margin:0 auto 1.8rem; color: var(--accent); }

/* ============================================================================
   20. SIGNATURE — "What goes into your roof" (roofing's unique section)
   [QE/NEW] Five-layer roof system as a stacked-plane diagram: decking → ice &
   water → underlayment → shingle → ridge vent, drawn bottom-up in ONE accent at
   stepped intensity (no second hue — the system rule). Restrained tier: one
   IntersectionObserver reveal (planes rise in sequence), guarded in site.js,
   static under reduced-motion / no-JS.
   ============================================================================ */
.signature .lead { margin-top: 1.1rem; }
.layers { display:grid; grid-template-columns: .92fr 1.08fr; gap: clamp(2.5rem,5vw,5.5rem);
  align-items:center; }
.layers__vis { border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 40px 70px -30px rgba(0,0,0,.65); }
.signature__img { display:block; width:100%; height:auto; object-fit:cover; aspect-ratio:3/2; }
.layers__list { list-style:none; padding:0; margin:0; }
.layers__list li { display:grid; grid-template-columns: auto 1fr; gap:1.2rem; padding-block:1.05rem;
  border-top:1px solid var(--base-line); }
.layers__list li:last-child { border-bottom:1px solid var(--base-line); }
.layers__n { font-family:var(--font-display); font-weight:800; font-size:1.25rem;
  color: var(--accent-bright); line-height:1.3; font-variant-numeric: tabular-nums; }
.layers__title { font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  font-size:1.12rem; letter-spacing:.015em; color: var(--paper); line-height:1.1; }
.layers__desc { color: var(--paper-soft); margin-top:.35rem; font-size:.95rem; line-height:1.55; max-width:46ch; }
/* reveal: hidden ONLY when JS has signalled it will animate (body.js-anim) */
body.js-anim .signature .layer { opacity:0; transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms); }
body.js-anim .signature.is-in .layer { opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  body.js-anim .signature .layer { opacity:1; transform:none; transition:none; }
}
@media (max-width: 820px){ .layers { grid-template-columns: 1fr; } }


/* ============================================================================
   LAST — CSP modifier classes (must stay at the END of this file)
   ============================================================================
   Source order is load-bearing here. These replaced inline `style=` attributes,
   which beat every class rule by specificity. As plain single-class selectors
   they only win by coming LAST — e.g. .wrap--narrow must override .wrap's
   max-width, and .section-head--tight must override .section-head's
   margin-bottom. Move this block earlier and those silently stop applying.
   ========================================================================= */
/* ---- CSP: former inline style= attributes ---------------------------------
   These 15 rules replace the 91 inline `style=` attributes the markup used to
   carry (2026-07-22). They exist so the published CSP can be a clean
   `style-src 'self'` with no `style-src-attr 'unsafe-inline'` escape hatch.
   Values are copied VERBATIM from the attributes they replaced — this was a
   mechanical extraction, not a restyle, and the rendering is pixel-identical.
   If you add a new one-off style, add a class here; do not reintroduce a
   `style=` attribute or the CSP will block it. */
.svc-card__title--lg   { font-size: 1.5rem; }
.footer__tag--fine     { font-size: .82rem; margin-top: 1.2rem; }
.dot--accent           { color: var(--accent); }
.btn--spaced           { margin-top: 1.5rem; }
.btn--spaced-lg        { margin-top: 2rem; }
.cadence--spaced       { margin-top: 1rem; }
.section-head--center  { text-align: center; }
.section-head--tight   { margin-bottom: 1rem; }
.section-head--flush   { margin-bottom: 0; }
.prose-note            { color: var(--ink-soft); margin-top: 1rem; }
.stat-row--plain       { border: none; justify-content: space-between; padding-top: 0; }
.wrap--narrow          { max-width: 640px; }
.lead--centered        { margin: 1.5rem auto 0; }
.btn-row               { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }