/* ============================================================================
   theme-parity.css — LSL full-parity design, sourced from the roofing Astro
   template's src/styles/theme.css (single source of truth). Engine-only
   components (.iq, drawer accordions, gallery, before/after, header top-bar,
   combos/guides) are added in the ENGINE EXTENSIONS section at the bottom.
   Loaded only for clients with template_parity:true (gated via .t-parity).
   ============================================================================ */
/* ============================================================================
   THEME TOKENS — brand-agnostic structural stylesheet (PURE CSS).
   This file is imported as a plain stylesheet by BaseLayout.astro. The :root
   block below holds STATIC FALLBACK values for every brand token. Per-client
   brand colors + fonts are injected at render time by BaseLayout.astro's
   `define:vars` (an inline <style> that sets the same custom properties on the
   document), which OVERRIDES these fallbacks. So: reskin the whole site by
   swapping client.json (brand.*) — never this file. These fallbacks exist only
   so the site still renders sanely if a token is ever missing from the record.
   Structure / layout / component styling below is shared and brand-agnostic.
   ============================================================================ */
:root {
  /* ---- COLOR (static fallbacks; overridden per-client via define:vars) ---- */
  --color-ink:           #0F1F33;
  --color-ink-soft:      #18293D;
  --color-slate:         #14283F;
  --color-paper:         #F2F5F8;
  --color-paper-alt:     #E5EAEF;
  --color-paper-card:    #FBFCFD;
  --color-accent:        #B3232A;
  --color-accent-ink:    #8E1A20;
  --color-urgent:        #A6151B;
  --color-urgent-ink:    #80100F;
  --color-rating:        #8F5E0D;
  --color-success:       #2C6E40;
  --color-text:          #19242F;
  --color-text-muted:    #57646F;
  --color-line:          #CBD4D9;
  --color-line-strong:   #A4B1BA;
  --color-on-dark:       #F0F3F4;
  --color-on-dark-muted: #92A3B0;
  --color-on-dark-line:  #2B3947;
  --color-highlight-on-dark: #F0A39B;
  --ink-rgb:             15,31,51;

  /* ---- TYPE (static fallbacks; overridden per-client via define:vars) ----- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
:root {
  --fs-h1:   clamp(2.1rem, 1.1rem + 3.3vw, 3.4rem);
  --fs-h2:   clamp(1.6rem, 1.05rem + 1.9vw, 2.35rem);
  --fs-h3:   clamp(1.2rem, 1rem + 1vw, 1.55rem);
  --fs-lead: clamp(1.06rem, 0.96rem + 0.6vw, 1.28rem);
  --fs-body: clamp(1rem, 0.97rem + 0.18vw, 1.075rem);
  --fs-sm:   0.875rem;
  --fs-xs:   0.78rem;
  --fs-mono: 0.74rem;
  --lh-tight: 0.98;
  --lh-snug:  1.16;
  --lh-body:  1.62;
  --track-mono: 0.14em;

  /* ---- SPACE / SHAPE ------------------------------------------------------ */
  --space-1: 8px;  --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 48px; --space-6: 64px; --space-7: 88px; --space-8: 112px;
  --section-y: clamp(56px, 8vw, 120px);
  --container: 1280px;
  --gutter: clamp(18px, 5vw, 48px);
  --radius-sm: 2px;
  --radius:    3px;
  --radius-lg: 4px;
  --radius-pill: 2px;
  --shadow-sm: 0 1px 0 var(--color-line);
  --shadow:    8px 8px 0 rgba(var(--ink-rgb),.06);
  --shadow-lg: 14px 14px 0 rgba(var(--ink-rgb),.10);
  --bar-h: 64px;
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ============================================================================
   RESET / 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);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-paper);
  background-image:
    radial-gradient(rgba(var(--ink-rgb),.018) 1px, transparent 1px);
  background-size: 4px 4px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
/* SAFETY NET: an <svg> carrying only a viewBox has NO intrinsic size, so it
   stretches to fill its container (a 200px+ "icon" on mobile). Give every icon a
   sane default size; any specific rule or inline style overrides this. */
svg { width: 20px; height: 20px; flex: none; }

/* SAFETY NET: component lists are layout containers, not prose. Without this they
   inherit the browser's 40px indent and bullet/number markers, which shows up as
   a stray left gutter and doubled numbering on mobile. Prose lists inside
   .content-body deliberately keep their markers (see below). */
:where(.steps, .urgent__steps, .crew-vetting, .risk-list, .finalcta__assure,
       .hublinks, .svc ul, .guarantee ul, .credcard ul, .priceanchor .rows,
       .area__cities, .footer ul, .toc__list, .poplist__list, .pagination__pages) {
  list-style: none;
  padding: 0;
  margin: 0;
}
:where(.steps, .urgent__steps, .crew-vetting, .risk-list, .finalcta__assure) > li { list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-tight); font-weight: 800; letter-spacing: -0.025em; color: var(--color-ink); text-wrap: balance; }
/* 0.98 is right for a one-line display headline; a wrapped h2 (common on phones)
   needs breathing room or the lines visually collide. */
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: 1.06; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.018em; }
p { text-wrap: pretty; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

.mono, .eyebrow, .svc__partner, .wizard__steplabel,
.gproject__meta .sub, .stat span, .magnet__cover .k, .ba__lbl,
.iq__sq, .disclosure, .priceanchor .disc {
  font-family: var(--font-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  background: var(--color-ink); color: var(--color-paper); padding: 12px 18px;
  border-radius: var(--radius-sm); font-weight: 700; text-decoration: none;
  font-family: var(--font-mono); font-size: var(--fs-sm);
  transition: top .15s var(--ease);
}
.skip-link:focus { top: 12px; }

/* Visible to assistive tech only — for labels that must exist in the a11y tree
   but not on screen (e.g. an otherwise-empty table header cell). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-radius: 0; }
.on-dark :focus-visible, .section--dark :focus-visible { outline-color: var(--color-highlight-on-dark); }

/* ============================================================================
   LAYOUT PRIMITIVES
   ============================================================================ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section--surface { background: var(--color-paper-alt); }
.section--alt { background: var(--color-ink); color: var(--color-on-dark); }
.section--alt h2, .section--alt h3 { color: #fff; }
.section--dark { background: var(--color-slate); color: var(--color-on-dark); }
.section--dark h2, .section--dark h3 { color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: var(--fs-mono); color: var(--color-accent);
}
.eyebrow::before { content: ""; width: 9px; height: 9px; background: currentColor; display: inline-block; transform: translateY(-1px); }
.section--dark .eyebrow, .section--alt .eyebrow, .on-dark .eyebrow { color: var(--color-highlight-on-dark); }

.section-head { max-width: 760px; margin-bottom: var(--space-5); }
.section-head h2 { margin-top: 16px; }
.section-head p { color: var(--color-text-muted); font-size: var(--fs-lead); margin-top: 16px; max-width: 60ch; }
.section--dark .section-head p, .section--alt .section-head p { color: var(--color-on-dark-muted); }
.muted { color: var(--color-text-muted); }
.section-head::after { content: none; }

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn {
  --btn-bg: var(--color-accent); --btn-fg: #fff; --btn-hover: var(--color-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 15px 26px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; letter-spacing: -0.01em;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 0; border-radius: var(--radius-sm);
  text-decoration: none;
  /* Buttons WRAP by default. Their labels come from the industry pack, which is
     free to say "Get a free asphalt shingle roofing estimate" — a nowrap button
     with a label like that forces its grid track wider than the column and
     overflows the page at 320px. Only the header pill opts back into nowrap. */
  white-space: normal; text-wrap: balance; max-width: 100%;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.btn:hover { background: var(--btn-hover); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn--lg { min-height: 62px; padding: 19px 34px; font-size: 1.12rem; }
.btn--urgent { --btn-bg: var(--color-urgent); --btn-hover: var(--color-ink); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--color-ink); --btn-hover: var(--color-ink);
  box-shadow: inset 0 0 0 2px var(--color-ink-soft);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--color-ink); }
.on-dark .btn--ghost, .section--dark .btn--ghost, .section--alt .btn--ghost {
  --btn-fg: #fff; box-shadow: inset 0 0 0 2px rgba(240,243,244,.36);
}
.on-dark .btn--ghost:hover { box-shadow: inset 0 0 0 2px #fff; background: rgba(255,255,255,.06); }
.btn--block { width: 100%; }
.btn .ico { width: 20px; height: 20px; flex: none; }

.tel {
  display: inline-flex; align-items: center; gap: 11px; text-decoration: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: 800; color: inherit; letter-spacing: -0.01em;
}
/* size ANY svg in a .tel link — the markup's phone icons carry no .ico class */
.tel svg, .tel .ico { width: 22px; height: 22px; color: var(--color-accent); flex: none; }
.tel small { display: block; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 2px; }
.on-dark .tel svg, .section--dark .tel svg { color: var(--color-highlight-on-dark); }
.on-dark .tel small { color: var(--color-on-dark-muted); }

.stars { display: inline-flex; gap: 2px; color: var(--color-rating); }
.stars svg { width: 17px; height: 17px; }
.rating-strip { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; color: inherit; }
.rating-strip b { font-family: var(--font-display); font-weight: 800; }
.rating-strip .gmark { font-weight: 800; color: var(--color-accent); }

/* ============================================================================
   TOP BAR + HEADER — pinned together as one sticky unit
   ============================================================================ */
.site-header { position: sticky; top: 0; z-index: 50; }
.topbar { background: var(--color-ink); color: var(--color-on-dark); border-bottom: 1px solid var(--color-on-dark-line); }
.topbar__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; }
.topbar__socials { display: flex; align-items: center; gap: 8px; }
.topbar__socials a {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: #fff; color: var(--color-ink);
  display: grid; place-items: center;
  transition: background .12s var(--ease), transform .12s var(--ease);
}
.topbar__socials a:hover { background: var(--color-on-dark); transform: translateY(-1px); }
.topbar__socials svg { width: 17px; height: 17px; }
.topbar__call {
  display: none; width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: #fff; color: var(--color-ink); place-items: center;
}
.topbar__call svg { width: 20px; height: 20px; }

/* ============================================================================
   STICKY HEADER
   ============================================================================ */
.header {
  /* backdrop-filter creates a stacking context, so the open .nav__menu (z-index:60)
     is trapped inside the header's context. The engine emits a bare
     <header class="header"> (no .site-header wrapper), so the header sits at the
     body level as a sibling of .hero (position:relative) — and a positioned hero
     would paint OVER the header context, hiding the dropdown. z-index:50 lifts the
     header context ABOVE the hero and stays BELOW the mobile .drawer (z-index:80)
     and .bottombar (70) so the drawer overlay still covers the header when open.
     position:sticky pins the header to the top on scroll (mobile + desktop). */
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--color-paper) 90%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--color-line-strong);
}
/* The header bar must fit brand + nav + phone + CTA at ANY width down to the
   992 hamburger breakpoint, so its spacing and type are fluid rather than fixed,
   and the brand is allowed to shrink (min-width:0) instead of forcing overflow. */
.header__bar { display: flex; align-items: center; gap: clamp(10px, 1.1vw, 16px); min-height: 76px; }
.brand { display: flex; align-items: center; gap: clamp(9px, .8vw, 13px); text-decoration: none; color: var(--color-ink); flex: 0 1 auto; min-width: 0; }
.brand__mark {
  width: clamp(38px, 3.2vw, 46px); height: clamp(38px, 3.2vw, 46px); border-radius: 2px; flex: none;
  background: var(--color-ink); color: var(--color-paper);
  display: grid; place-items: center; position: relative;
}
.brand__mark::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--color-accent); }
.brand__mark svg { width: 26px; height: 26px; }
.brand__name { font-family: var(--font-display); font-weight: 900; font-size: clamp(.98rem, .55vw + .78rem, 1.2rem); letter-spacing: -0.03em; line-height: 1; text-transform: uppercase; min-width: 0; }
.brand__name small { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: .14em; color: var(--color-text-muted); margin-top: 5px; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav a { text-decoration: none; color: var(--color-text); font-weight: 600; font-size: clamp(.85rem, .32vw + .73rem, .95rem); padding: 9px clamp(7px, .78vw, 13px); border-radius: 0; white-space: nowrap; position: relative; }
.nav a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform .18s var(--ease); }
.nav a:hover { color: var(--color-ink); }
.nav a:hover::after { transform: scaleX(1); }
/* Active top-level item reuses the hover treatment (ink colour + accent underline). */
.nav a[aria-current="page"] { color: var(--color-ink); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav__group > .nav__toggle[aria-current="page"] { color: var(--color-ink); }
.nav__group > .nav__toggle[aria-current="page"]::after { transform: scaleX(1); }
.header__actions { display: flex; align-items: center; gap: clamp(8px, .9vw, 16px); flex: none; }
.header .tel { font-size: clamp(.95rem, .42vw + .78rem, 1.15rem); }
/* The one button that must not wrap: it sits in a single-line header row and its
   label is a fixed, short string ("Free Estimate"), never pack-supplied prose. */
.btn--header { min-height: 48px; padding: 12px clamp(14px, 1.3vw, 24px); font-size: clamp(.9rem, .28vw + .82rem, 1.02rem); white-space: nowrap; }
/* Header credential widget — a self-contained pill badge in the header actions */
.header__widget {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  background: var(--color-paper-card);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; line-height: 1;
  color: var(--color-text-muted); white-space: nowrap;
  /* Allow the widget to shrink on narrow screens so a real (longer) license
     number truncates gracefully instead of overflowing the top bar. */
  min-width: 0;
}
.header__widget svg { width: 15px; height: 15px; color: var(--color-success); flex: none; }
.header__widget span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.header__widget b { color: var(--color-ink); font-weight: 700; }
.hamburger { display: none; width: 48px; height: 48px; border: 1px solid var(--color-line-strong); background: var(--color-paper-card); border-radius: 2px; place-items: center; color: var(--color-ink); }
.hamburger svg { width: 24px; height: 24px; }

/* Closed drawer is display:none (not visibility:hidden) so its links leave the
   rendered + accessible tree. allow-discrete defers the flip to none until the
   close transition finishes; @starting-style animates the open. */
.drawer {
  position: fixed; inset: 0; z-index: 80;
  display: none;
  transition-property: display;
  transition-duration: .28s;
  transition-behavior: allow-discrete;
}
.drawer[aria-hidden="false"] { display: block; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(var(--ink-rgb),.55); opacity: 0; transition: opacity .25s var(--ease); }
.drawer[aria-hidden="false"] .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(86vw, 360px);
  background: var(--color-paper); border-left: 3px solid var(--color-accent); padding: 22px;
  display: flex; flex-direction: column; gap: 8px; transform: translateX(100%);
  transition: transform .28s var(--ease); overflow-y: auto;
}
.drawer[aria-hidden="false"] .drawer__panel { transform: none; }
@starting-style {
  .drawer[aria-hidden="false"] .drawer__scrim { opacity: 0; }
  .drawer[aria-hidden="false"] .drawer__panel { transform: translateX(100%); }
}
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.drawer__close { width: 44px; height: 44px; border: 1px solid var(--color-line-strong); background: var(--color-paper-card); border-radius: 2px; display: grid; place-items: center; }
.drawer__close svg { width: 22px; height: 22px; }
.drawer nav { display: flex; flex-direction: column; }
.drawer nav a { text-decoration: none; color: var(--color-ink); font-weight: 700; font-family: var(--font-display); padding: 15px 4px; border-bottom: 1px solid var(--color-line); text-transform: uppercase; letter-spacing: -0.01em; }
@media (prefers-reduced-motion: reduce) { .drawer__scrim, .drawer__panel { transition: none; } }

/* ============================================================================
   HERO
   ============================================================================ */
.hero { position: relative; background: var(--color-slate); color: var(--color-on-dark); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 14px;
  background-image: repeating-linear-gradient(90deg, var(--color-on-dark-line) 0 1px, transparent 1px 28px);
  opacity: .5; pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; right: -8%; top: -10%; width: 46%; height: 120%;
  background: linear-gradient(180deg, transparent, transparent);
  border-left: 1px solid var(--color-on-dark-line); transform: skewX(-12deg); opacity: .35; pointer-events: none;
}
.hero__grid {
  display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(28px, 4vw, 64px);
  align-items: center; padding-block: clamp(40px, 5vw, 80px); position: relative; z-index: 1;
}
/* Photo-less hero (blog posts + archive, and every ContentShell page): one
   column, so the headline is not squeezed into half the width with dead space
   beside it. Copy is capped so display type stays readable on wide screens. */
.hero__grid--solo { grid-template-columns: 1fr; }
.hero__grid--solo .hero__copy { max-width: 62ch; }

/* Editorial hero used by every page except the homepage: breadcrumbs -> H1 -> lead.
   The H1 tops out at 57px and the lead at 19px; both scale down fluidly. */
.hero--page .hero__grid { padding-block: clamp(36px, 4.5vw, 72px); }
.hero--page .hero__copy { max-width: 1040px; }
.hero--page h1 { margin-top: 6px; font-size: clamp(2.05rem, 1.05rem + 3.3vw, 3.5625rem); }
.hero__lead { margin-top: 20px; max-width: 68ch; color: var(--color-on-dark-muted); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.65; }

/* Breadcrumb trail — fed by the same array as the BreadcrumbList JSON-LD, so the
   visible trail and the structured data can never drift apart. */
/* Breadcrumb: the engine markup is <a> + <span class="sep">/</span> (not ol/li),
   so style the nav flex row directly — spaced items + room before the H1 below. */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: clamp(18px, 2.4vw, 28px); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-on-dark-muted); }
.crumbs a { color: var(--color-on-dark-muted); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs .sep { color: var(--color-on-dark-muted); font-weight: 500; }
.crumbs [aria-current="page"] { color: var(--color-highlight-on-dark); }

/* Cred chips beneath the editorial hero. (The cover photo moved INTO the hero as
   its background; the answer card is homepage-only.) */
.page-intro { padding-block: clamp(28px, 3.5vw, 48px) 0; }
.page-intro__creds { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__angle {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px;
  background: transparent; border: 1px solid var(--color-on-dark-line);
  padding: 7px 13px; border-radius: 2px; font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-on-dark-muted);
}
.hero__angle b { color: var(--color-highlight-on-dark); font-weight: 700; }
.hero h1 { font-size: var(--fs-h1); color: #fff; font-weight: 900; letter-spacing: -0.035em; }
.hero h1 .hl { color: var(--color-highlight-on-dark); }
/* breathing room between the split hero H1 and the short intro paragraph below it */
.hero--split .hero__copy > h1 + p { margin-top: 22px; color: var(--color-on-dark-muted); max-width: 54ch; }
.hero__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; }
.hero__promise {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  padding: 11px 16px; border-radius: 2px; background: transparent;
  border: 1px solid var(--color-on-dark-line); font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-on-dark);
}
.hero__promise .pulse { width: 9px; height: 9px; border-radius: 50%; background: #4FB477; flex: none; box-shadow: 0 0 0 0 rgba(79,180,119,.6); animation: pulse 2.2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(79,180,119,0); } 100% { box-shadow: 0 0 0 0 rgba(79,180,119,0); } }
@media (prefers-reduced-motion: reduce) { .hero__promise .pulse { animation: none; } }

/* ---- Homepage hero: full-bleed photo + scrim, lead form in the right column --
   The background is an <img> (not a CSS background) so it stays the LCP element
   and can be prioritised. The scrim keeps text contrast independent of the photo. */
/* Full-bleed hero photo + scrim. An <img> (not a CSS background) so it stays the
   LCP element and can be prioritised. The scrim keeps text contrast independent
   of whatever photo a client supplies. Used by the homepage and by any PageHero
   given a `bg`. */
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg,
    rgba(var(--ink-rgb), .94) 0%,
    rgba(var(--ink-rgb), .88) 38%,
    rgba(var(--ink-rgb), .62) 100%);
}
/* interior heroes run copy the full width, so hold the scrim a touch stronger */
.hero--page .hero__scrim {
  background: linear-gradient(90deg,
    rgba(var(--ink-rgb), .95) 0%,
    rgba(var(--ink-rgb), .90) 48%,
    rgba(var(--ink-rgb), .72) 100%);
}
/* a hero carrying a photo needs a little more vertical room */
.hero--page.hero--bg .hero__grid { padding-block: clamp(48px, 5.5vw, 92px); }
.hero--home .hero__grid {
  position: relative; z-index: 1;
  grid-template-columns: 1.12fr .88fr;
  align-items: center;
  padding-block: clamp(44px, 5.5vw, 96px);
}
.hero--home .hero__copy { max-width: 680px; }
.hero--home .hero__angle { text-transform: uppercase; }
/* slightly smaller than the global display size so the headline sits on 2 lines
   beside the form rather than pushing the CTA row below the fold */
.hero--home h1 { margin-top: 4px; font-size: clamp(2.2rem, 1rem + 3.9vw, 4rem); }
.hero__tagline { font-size: var(--fs-lead); color: var(--color-on-dark-muted); margin-top: 18px; }
.hero--home .answer { margin-top: 26px; }
/* the short-answer block reads at 16px on the homepage hero */
.hero--home .answer { font-size: 1rem; }
/* phone + promise sit on ONE line on desktop; the pill shrinks rather than wrapping
   the row (min-width:0 lets its text reflow inside the pill if space gets tight). */
.hero--home .hero__cta-row { flex-wrap: nowrap; align-items: center; gap: 20px; }
.hero--home .hero__promise { margin-top: 0; min-width: 0; }
.hero__form { position: relative; z-index: 1; min-width: 0; }
.hero__form .wizard { box-shadow: var(--shadow-lg); }

/* ============================================================================
   TRUST BADGE BAR
   ============================================================================ */
.trustbar { background: var(--color-ink); color: var(--color-on-dark); position: relative; }
/* crisp full-bleed crimson accent stripe under the credential bar */
.trustbar::after { content: ""; display: block; height: 3px; background: var(--color-accent); }
/* align the track to the same container + gutter as the partner strip above */
.trustbar__track { display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.trustbar__track::-webkit-scrollbar { display: none; }
.badge { display: flex; align-items: center; gap: 13px; padding: 22px 28px; flex: 1 0 auto; position: relative; scroll-snap-align: start; white-space: nowrap; }
.badge:first-child { padding-left: 0; }
/* inset, vertically-centered divider instead of a full-height right border */
.badge:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 34px; background: var(--color-on-dark-line); }
.badge .em { width: 40px; height: 40px; border-radius: 2px; background: rgba(240,163,155,.10); box-shadow: inset 0 0 0 1px rgba(240,163,155,.32); display: grid; place-items: center; color: var(--color-highlight-on-dark); flex: none; }
.badge .em svg { width: 23px; height: 23px; }
.badge b { font-family: var(--font-display); font-weight: 800; line-height: 1.05; display: block; font-size: 1rem; }
.badge span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-on-dark-muted); }
/* strengthen the label/sub hierarchy on navy by targeting the sub specifically */
.badge b + span { display: block; margin-top: 4px; color: #A7B4BF; letter-spacing: .09em; }
/* badges share the row equally on desktop; below that they scroll with a fade hint */
@media (min-width: 720px) { .badge { flex: 1 1 0; white-space: normal; } }
@media (max-width: 719px) { .trustbar::before { content: ""; position: absolute; top: 0; right: 0; bottom: 3px; width: 44px; pointer-events: none; z-index: 1; background: linear-gradient(to right, transparent, var(--color-ink)); } }
.container--bleed { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ============================================================================
   STORM / INSURANCE LANE
   ============================================================================ */
.urgent { background: var(--color-urgent-ink); color: #fff; position: relative; overflow: hidden; }
.urgent::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(0,0,0,.14) 0 2px, transparent 2px 22px); pointer-events: none; }
.urgent__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px,4vw,60px); align-items: center; }
.urgent__tag { display: inline-flex; align-items: center; gap: 9px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.28); color: #FFD9D5; padding: 8px 14px; border-radius: 2px; font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-mono); letter-spacing: .08em; text-transform: uppercase; }
.urgent__tag svg { width: 16px; height: 16px; }
.urgent h2 { color: #fff; margin: 18px 0; }
.urgent p { color: #FBDEDB; max-width: 54ch; }
.urgent__steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.urgent__steps li { list-style: none; display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.18); padding: 9px 13px; border-radius: 2px; font-size: var(--fs-sm); font-weight: 600; }
.urgent__steps svg { width: 15px; height: 15px; color: #FFB38C; }
.urgent__card { background: var(--color-ink); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg); padding: 26px; text-align: center; }
.urgent__card .big { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; margin-bottom: 8px; color: #fff; }
.urgent__card .btn { margin-top: 16px; }
.urgent__card small { display: block; margin-top: 14px; color: #E7B7B7; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .04em; text-transform: uppercase; }

/* ============================================================================
   HOW IT WORKS / 3-STEP
   ============================================================================ */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; counter-reset: step; border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); overflow: hidden; }
.step { position: relative; background: var(--color-paper-card); padding: 32px 28px; counter-increment: step; border-right: 1px solid var(--color-line-strong); }
.step:last-child { border-right: 0; }
.step__n { font-family: var(--font-mono); font-weight: 700; font-size: 2.4rem; color: var(--color-line-strong); letter-spacing: -0.02em; line-height: 1; display: block; }
.step__n::before { content: counter(step, decimal-leading-zero); }
.step .em { width: 54px; height: 54px; border-radius: 2px; background: var(--color-ink); display: grid; place-items: center; color: var(--color-highlight-on-dark); margin: 18px 0 16px; }
.step .em svg { width: 30px; height: 30px; }
.step h3 { margin-bottom: 9px; }
.step p { color: var(--color-text-muted); font-size: var(--fs-sm); }
.step__connector { display: none; }
.howitworks__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 2px; background: transparent; box-shadow: inset 0 0 0 1px var(--color-line-strong); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--color-ink); }
.chip svg { width: 15px; height: 15px; color: var(--color-success); }

/* ============================================================================
   SERVICES SHOWCASE
   ============================================================================ */
.services { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-3); }
.svc { background: var(--color-paper-card); border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); }
.svc:hover { border-color: var(--color-ink); box-shadow: var(--shadow); transform: translate(-3px,-3px); }
.svc__media { position: relative; height: 196px; border-bottom: 1px solid var(--color-line-strong); }
.svc__photo { width: 100%; height: 100%; object-fit: cover; }
.svc__tag { position: absolute; top: 12px; left: 12px; background: var(--color-ink); color: #fff; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: 6px 11px; border-radius: 2px; }
.svc--feature { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.svc__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.svc__body h3 { margin-bottom: 4px; }
.svc__partner { font-size: 10px; font-weight: 600; color: var(--color-accent); margin-bottom: 14px; }
.svc ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 9px; margin: 4px 0 20px; }
.svc ul li { display: flex; gap: 9px; font-size: var(--fs-sm); color: var(--color-text-muted); }
.svc ul svg { width: 17px; height: 17px; color: var(--color-success); flex: none; margin-top: 2px; }
.svc__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; color: var(--color-ink); text-decoration: none; border-top: 1px solid var(--color-line); padding-top: 16px; }
.svc__cta svg { width: 17px; height: 17px; color: var(--color-accent); transition: transform .15s var(--ease); }
.svc:hover .svc__cta svg { transform: translateX(5px); }

/* ============================================================================
   SOCIAL PROOF / PROOF WALL
   ============================================================================ */
/* fill to the actual stat count (3, 4, or more) instead of a fixed 4 columns, so
   an empty 4th cell never appears when rating stats are gated off */
.proof__stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; margin-bottom: var(--space-5); border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); overflow: hidden; }
.stat { background: var(--color-paper-card); padding: 26px 24px; border-right: 1px solid var(--color-line-strong); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.5rem,3.4vw,2.3rem); color: var(--color-ink); letter-spacing: -0.04em; line-height: 1.02; }
.stat span { font-size: 10px; color: var(--color-text-muted); display: block; margin-top: 8px; }
.proof__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-4); align-items: start; }
.tlist { display: grid; gap: var(--space-2); }
.tcard { background: var(--color-paper-card); border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); padding: 26px; }
.tcard blockquote { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; line-height: 1.45; color: var(--color-ink); letter-spacing: -0.015em; }
.tcard .em { width: 44px; height: 44px; border-radius: 2px; background: var(--color-ink); color: var(--color-highlight-on-dark); display: grid; place-items: center; margin-bottom: 16px; }
.tcard .em svg { width: 26px; height: 26px; }
.tcard__who { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-line); }
.tcard__who b { font-family: var(--font-display); display: block; line-height: 1.1; font-weight: 800; }
.tcard__who span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.tcard__verified { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-success); font-weight: 600; }
.tcard__verified svg { width: 15px; height: 15px; }
.proof__side { display: grid; gap: var(--space-2); position: sticky; top: 96px; }
/* No-reviews state: the .tlist column is absent, so the inline grid-template on
   .proof__grid leaves a lonely narrow centered column. Detect it self-scoped via
   :has() and stretch to one full-width track, then lay video + map out two-up.
   The !important beats the inline (non-important) style on .proof__grid. */
.proof__grid:not(:has(.tlist)) { grid-template-columns: 1fr !important; justify-content: stretch !important; }
.proof__grid:not(:has(.tlist)) .proof__side { grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: start; position: static; }
@media (max-width: 767px) { .proof__grid:not(:has(.tlist)) .proof__side { grid-template-columns: 1fr; gap: var(--space-2); } }
.proofcard { border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); overflow: hidden; }
.proofcard__media { position: relative; height: 224px; }
.proofcard__media img { width: 100%; height: 100%; object-fit: cover; }
.proofcard__cap { position: absolute; left: 14px; bottom: 14px; color: #fff; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.credcard { border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-paper-card); padding: 22px; }
.credcard h3 { font-size: 1.1rem; margin-bottom: 14px; }
.credcard ul { list-style: none; padding: 0; display: grid; gap: 11px; }
.credcard ul li { display: flex; gap: 10px; font-size: var(--fs-sm); font-weight: 600; align-items: center; }
.credcard ul svg { width: 18px; height: 18px; color: var(--color-success); flex: none; }

/* ============================================================================
   MEET THE OWNER / CREW
   ============================================================================ */
.owner { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px,4vw,64px); align-items: center; }
.owner__photo-wrap { position: relative; }
.owner__photo { width: 100%; height: clamp(340px,38vw,480px); border-radius: var(--radius-lg); border: 1px solid var(--color-line-strong); object-fit: cover; }
.owner__since { position: absolute; right: -14px; top: 22px; background: var(--color-accent); color: #fff; border-radius: 2px; padding: 14px 18px; text-align: center; }
.owner__since b { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; display: block; line-height: 1; }
.owner__since span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.owner h2 { margin: 16px 0 18px; }
.owner__sign { font-family: var(--font-display); font-weight: 800; color: var(--color-ink); margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-line); }
.owner__sign span { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 4px; }
.crew-vetting { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 22px; }
.crew-vetting li { list-style: none; display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: var(--fs-sm); }
.crew-vetting svg { width: 20px; height: 20px; color: var(--color-success); flex: none; }

/* ============================================================================
   RECENT WORK GALLERY (single-image grid — no fabricated before/after)
   ============================================================================ */
.work-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-3); }
.wproject { background: var(--color-paper-card); border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); overflow: hidden; }
.wproject__media { height: 240px; }
.wproject__media img { width: 100%; height: 100%; object-fit: cover; }
.wproject__meta { padding: 17px 18px; }
.wproject__meta .loc { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-family: var(--font-display); letter-spacing: -0.01em; }
.wproject__meta .loc svg { width: 16px; height: 16px; color: var(--color-accent); }
.wproject__meta .sub { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 10px; color: var(--color-text-muted); font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }

/* ============================================================================
   COMPARISON + PRICE ANCHOR
   ============================================================================ */
.compare__wrap { display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--space-4); align-items: start; }
/* Wide tables scroll inside their own container instead of pushing the page
   sideways. Focusable + labelled so keyboard users can reach the scroll area. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; }
.table-scroll:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.table-scroll .ctable { min-width: 520px; }
.ctable { width: 100%; border-collapse: collapse; background: var(--color-paper-card); border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); overflow: hidden; }
.ctable th, .ctable td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--color-line); }
.ctable thead th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.ctable thead th.us { background: var(--color-ink); color: #fff; }
.ctable thead th.them { color: var(--color-text-muted); }
.ctable td.us { background: color-mix(in srgb, var(--color-accent) 8%, var(--color-paper-card)); font-weight: 700; }
.ctable td .yes { color: var(--color-success); font-weight: 800; }
.ctable td .no { color: #A33126; font-weight: 700; }
.ctable tbody tr:last-child td { border-bottom: 0; }
.ctable td:first-child, .ctable th:first-child { font-weight: 700; }
/* Compare table → stacked comparison cards on phones (responsive, no horizontal scroll) */
@media (max-width: 600px) {
  #compare .ctable { min-width: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
  #compare .ctable thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
  #compare .ctable tbody, #compare .ctable tr, #compare .ctable td { display: block; width: auto; }
  #compare .ctable tr { border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); background: var(--color-paper-card); margin-bottom: 14px; overflow: hidden; }
  #compare .ctable tbody tr:last-child { margin-bottom: 0; }
  #compare .ctable td { display: flex; justify-content: space-between; align-items: center; gap: 18px; text-align: right; padding: 11px 16px; border-bottom: 1px solid var(--color-line); }
  #compare .ctable tbody tr td:last-child { border-bottom: 0; }
  #compare .ctable td:first-child { display: block; text-align: left; background: var(--color-ink); color: #fff; font-weight: 700; padding: 12px 16px; }
  #compare .ctable td.us { background: color-mix(in srgb, var(--color-accent) 8%, var(--color-paper-card)); }
  #compare .ctable td[data-label]::before { content: attr(data-label); font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 600; text-align: left; }
}
.priceanchor { background: var(--color-ink); color: #fff; border-radius: var(--radius-lg); padding: 30px; position: sticky; top: 96px; border-top: 4px solid var(--color-accent); }
.priceanchor .eyebrow { color: var(--color-highlight-on-dark); }
.priceanchor .range { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.7rem,4vw,2.3rem); letter-spacing: -0.03em; margin: 14px 0 4px; }
.priceanchor .range small { font-family: var(--font-mono); font-size: .85rem; color: var(--color-on-dark-muted); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.priceanchor p { color: var(--color-on-dark-muted); font-size: var(--fs-sm); margin: 14px 0 20px; }
.priceanchor .rows { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; }
.priceanchor .rows li { list-style: none; display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-sm); border-bottom: 1px solid var(--color-on-dark-line); padding-bottom: 8px; }
.priceanchor .rows li b { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .04em; white-space: nowrap; }
.priceanchor .disc { font-size: 10px; color: var(--color-on-dark-muted); margin-top: 16px; letter-spacing: .04em; }

/* ============================================================================
   FINANCING BAND
   ============================================================================ */
.financing { background: var(--color-slate); color: #fff; border-radius: var(--radius-lg); padding: clamp(30px,4vw,52px); position: relative; overflow: hidden; border: 1px solid var(--color-on-dark-line); }
.financing::before { content: ""; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background: var(--color-accent); }
.financing__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px,4vw,52px); align-items: start; }
.financing .seasonal { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--color-on-dark-line); padding: 8px 14px; border-radius: 2px; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--color-on-dark-muted); }
.financing h2 { color: #fff; margin: 18px 0; }
.financing .pay { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem,4.5vw,2.7rem); letter-spacing: -0.04em; }
.financing .pay small { font-family: var(--font-mono); font-size: 1rem; color: var(--color-on-dark-muted); font-weight: 500; letter-spacing: .02em; text-transform: none; }
.financing .ppline { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-weight: 600; }
.financing .ppline svg { width: 18px; height: 18px; color: #6FE39A; flex: none; }
.financing__checks { margin-top: 26px; gap: 14px; }
.financing__checks li { font-size: 1.02rem; }
.financing__checks .ico { color: #6FE39A; flex: none; margin-top: 2px; }
.financing__card { background: var(--color-paper-card); color: var(--color-text); border-radius: var(--radius-lg); padding: 28px; }
.financing__card h3 { margin-bottom: 6px; }
.financing__card p { color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: 20px; }
.financing__card .btn { width: 100%; }
.lender-logos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.lender-logos .lg { height: 34px; min-width: 78px; padding: 0 14px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--color-line-strong); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 10px; color: var(--color-text-muted); letter-spacing: .08em; }
.disclosure { font-size: 10px; color: var(--color-text-muted); margin-top: 16px; line-height: 1.55; letter-spacing: .02em; text-transform: none; }

/* ============================================================================
   WHY US / RISK BLOCK
   ============================================================================ */
.whyus__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,60px); align-items: start; }
.risk-list { display: grid; gap: 0; border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); overflow: hidden; }
.risk-list li { list-style: none; display: grid; grid-template-columns: auto 1fr; gap: 16px; background: var(--color-paper-card); border-bottom: 1px solid var(--color-line-strong); padding: 20px 22px; }
.risk-list li:last-child { border-bottom: 0; }
.risk-list .x { width: 36px; height: 36px; border-radius: 2px; background: var(--color-ink); color: var(--color-highlight-on-dark); display: grid; place-items: center; flex: none; }
.risk-list .x svg { width: 20px; height: 20px; }
.risk-list b { font-family: var(--font-display); display: block; margin-bottom: 3px; font-weight: 800; }
.risk-list p { font-size: var(--fs-sm); color: var(--color-text-muted); }
.guarantee { background: var(--color-ink); color: #fff; border-radius: var(--radius-lg); padding: 32px; position: sticky; top: 96px; border-top: 4px solid var(--color-accent); }
.guarantee .seal { width: 80px; height: 80px; border-radius: 2px; background: transparent; box-shadow: inset 0 0 0 1px var(--color-on-dark-line); display: grid; place-items: center; color: var(--color-highlight-on-dark); margin-bottom: 20px; }
.guarantee .seal svg { width: 44px; height: 44px; }
.guarantee h3 { color: #fff; }
.guarantee p { color: var(--color-on-dark-muted); font-size: var(--fs-sm); margin: 12px 0 20px; }
.guarantee ul { list-style: none; padding: 0; display: grid; gap: 11px; }
.guarantee ul li { display: flex; gap: 10px; font-size: var(--fs-sm); font-weight: 600; }
.guarantee ul svg { width: 18px; height: 18px; color: #6FE39A; flex: none; }

/* ============================================================================
   SERVICE AREA
   ============================================================================ */
/* --- #area "Where we work" band: center the head, stretch the grid so the map
   fills the column, and lay the towns out as a real 2-col grid. All scoped to
   #area so the shared .section-head / .ilinks classes are untouched elsewhere. */
#area .section-head { max-width: 720px; margin-inline: auto; text-align: center; }
#area .section-head .eyebrow { justify-content: center; }
#area .section-head p { margin-inline: auto; }

.area__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,60px); align-items: stretch; }
/* Truthful abstract placeholder: an abstract grid field with a soft accent glow,
   a dashed service radius, and a pin. NO fabricated streets or place labels. */
.area__map {
  position: relative; height: auto; min-height: clamp(400px, 40vw, 560px);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); overflow: hidden;
  background:
    radial-gradient(130% 95% at 50% 6%, rgba(var(--ink-rgb),.06), transparent 62%),
    radial-gradient(460px 320px at 50% 46%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 70%),
    repeating-linear-gradient(0deg,#E6EBED,#E6EBED 27px,#D5DDE1 27px,#D5DDE1 28px),
    repeating-linear-gradient(90deg,#E6EBED,#E6EBED 35px,#D5DDE1 35px,#D5DDE1 36px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 22px 44px -30px rgba(var(--ink-rgb),.4);
}
.area__radius {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
  width: min(62%, 360px); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px dashed var(--color-accent);
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 70%);
}
.area__radius::after {
  content: ""; position: absolute; inset: 18%; border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.area__pin { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-100%); color: var(--color-accent); }
.area__pin svg { width: 46px; height: 46px; filter: drop-shadow(0 6px 6px rgba(0,0,0,.28)); }
.area__pin::before {
  content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  width: 26px; height: 8px; border-radius: 50%; background: rgba(var(--ink-rgb),.28); filter: blur(2px);
}
.area__pin::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translate(-50%,55%);
  width: 14px; height: 14px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 28%, transparent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 45%, transparent);
  animation: area-pulse 2.4s var(--ease) infinite;
}
@keyframes area-pulse {
  70%  { box-shadow: 0 0 0 20px color-mix(in srgb, var(--color-accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .area__pin::after { animation: none; } }

.area__cities { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: clamp(16px,2vw,28px); row-gap: 4px; margin: 0; padding: 0; }
.area__cities li { list-style: none; margin: 0; break-inside: avoid; }
.area__cities a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin-inline: -10px; border-radius: var(--radius-sm); text-decoration: none; color: var(--color-text); font-weight: 600; font-size: .95rem; line-height: 1.2; transition: color .14s var(--ease), background .14s var(--ease); }
.area__cities a:hover { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
.area__cities svg { width: 20px; height: 20px; padding: 3px; flex: none; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); border-radius: 50%; }
.hublinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hublinks a { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--color-ink); text-decoration: none; padding: 9px 14px; box-shadow: inset 0 0 0 1px var(--color-line-strong); border-radius: 2px; }
.hublinks a:hover { box-shadow: inset 0 0 0 1px var(--color-ink); }

/* ============================================================================
   LEAD MAGNET
   ============================================================================ */
.magnet { background: var(--color-paper-card); border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); padding: clamp(28px,4vw,48px); display: grid; grid-template-columns: auto 1fr auto; gap: clamp(20px,3vw,44px); align-items: center; }
.magnet__cover { width: 132px; height: 172px; border-radius: 2px; background: var(--color-ink); color: #fff; padding: 18px 15px; display: flex; flex-direction: column; justify-content: space-between; flex: none; border-bottom: 4px solid var(--color-accent); }
.magnet__cover .k { font-size: 10px; letter-spacing: .12em; color: var(--color-highlight-on-dark); font-weight: 600; }
.magnet__cover b { font-family: var(--font-display); font-weight: 900; font-size: 1.15rem; line-height: 1.08; letter-spacing: -0.02em; }
.magnet__cover .pg { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-on-dark-muted); }
.magnet h3 { margin-bottom: 9px; }
.magnet p { color: var(--color-text-muted); font-size: var(--fs-sm); max-width: 48ch; }
.magnet__form { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; max-width: 430px; margin-top: 18px; }
.magnet__form input { flex: 1 1 180px; min-width: 0; min-height: 54px; padding: 12px 16px; border: 1px solid var(--color-line-strong); border-radius: 2px; font-size: 1rem; font-family: inherit; background: var(--color-paper); }
.magnet__form input:focus { border-color: var(--color-accent); outline: none; box-shadow: inset 0 0 0 1px var(--color-accent); }

/* ============================================================================
   FAQ ACCORDION
   ============================================================================ */
.faq { max-width: 880px; margin-inline: auto; margin-top: clamp(20px, 3vw, 34px); border-top: 1px solid var(--color-line-strong); }
.faq__item { border-bottom: 1px solid var(--color-line-strong); }
.faq__q { width: 100%; background: none; border: 0; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 4px; font-family: var(--font-display); font-weight: 800; font-size: 1.14rem; color: var(--color-ink); letter-spacing: -0.02em; }
.faq__q .pm { width: 30px; height: 30px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--color-line-strong); display: grid; place-items: center; flex: none; transition: background .15s var(--ease); }
.faq__q .pm svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.faq__q[aria-expanded="true"] .pm { background: var(--color-accent); box-shadow: none; color: #fff; }
.faq__q[aria-expanded="true"] .pm svg { transform: rotate(45deg); }
.faq__a { overflow: hidden; max-height: 0; transition: max-height .3s var(--ease); }
.faq__a-inner { padding: 0 4px 26px; color: var(--color-text-muted); max-width: 72ch; }
@media (prefers-reduced-motion: reduce) { .faq__a { transition: none; } }

/* ============================================================================
   FINAL CTA + MULTI-STEP FORM
   ============================================================================ */
.finalcta { background: var(--color-slate); color: #fff; }
.finalcta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,68px); align-items: center; }
.finalcta h2 { color: #fff; }
.finalcta__sub { color: var(--color-on-dark-muted); font-size: var(--fs-lead); margin: 18px 0 26px; }
.finalcta__assure { display: grid; gap: 12px; margin-top: 24px; }
.finalcta__assure li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.finalcta__assure svg { width: 20px; height: 20px; color: #6FE39A; flex: none; }
.finalcta__phone { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--color-on-dark-line); }
.finalcta__cta { display: grid; gap: 14px; align-content: center; }
.finalcta__note { color: var(--color-on-dark-muted); font-size: var(--fs-sm); text-align: center; }
.finalcta__phone .or { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--color-on-dark-muted); margin-bottom: 12px; }

.wizard { background: var(--color-paper-card); color: var(--color-text); border-radius: var(--radius-lg); padding: clamp(24px,3vw,34px); border-top: 4px solid var(--color-accent); }
.wizard__progress { display: flex; align-items: center; gap: 6px; margin-bottom: 24px; }
.wizard__progress .seg { height: 5px; flex: 1; border-radius: 0; background: var(--color-line); overflow: hidden; }
.wizard__progress .seg.done span, .wizard__progress .seg.active span { display: block; height: 100%; background: var(--color-accent); width: 100%; }
.wizard__step { display: none; }
.wizard__step.active { display: block; animation: fadein .25s var(--ease); }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wizard__step.active { animation: none; } }
.wizard__steplabel { font-size: var(--fs-mono); font-weight: 600; color: var(--color-accent); }
.wizard__step :is(h2,h3) { font-size: var(--fs-h3); line-height: var(--lh-snug); margin: 8px 0 20px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { display: flex; align-items: center; gap: 12px; padding: 16px; box-shadow: inset 0 0 0 1px var(--color-line-strong); border: 0; border-radius: 2px; background: var(--color-paper); text-align: left; font-family: var(--font-display); font-weight: 700; transition: box-shadow .12s var(--ease), background .12s var(--ease); }
.tile:hover { box-shadow: inset 0 0 0 2px var(--color-accent); }
.tile .em { width: 40px; height: 40px; border-radius: 2px; background: var(--color-ink); display: grid; place-items: center; color: var(--color-highlight-on-dark); flex: none; }
.tile .em svg { width: 23px; height: 23px; }
.tile.selected { box-shadow: inset 0 0 0 2px var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, var(--color-paper)); }
.field { margin-bottom: 14px; }
.field label { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 7px; color: var(--color-text-muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--color-line-strong); border-radius: 2px; font-size: 1rem; font-family: inherit; background: var(--color-paper); color: var(--color-text); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-accent); background: #fff; outline: none; box-shadow: inset 0 0 0 1px var(--color-accent); }
.field select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5763' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.wizard__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.wizard__back { background: none; border: 0; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; padding: 12px 0; }
.wizard__back:hover { color: var(--color-ink); }
.wizard__trust { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 16px; font-size: var(--fs-xs); color: var(--color-text-muted); }
.wizard__trust svg { width: 15px; height: 15px; color: var(--color-success); }
.wizard__done { text-align: center; padding: 20px 0; }
.wizard__done .check { width: 64px; height: 64px; border-radius: 2px; background: var(--color-success); color: #fff; display: grid; place-items: center; margin: 0 auto 18px; }
.wizard__done .check svg { width: 36px; height: 36px; }

/* ============================================================================
   FOOTER
   ============================================================================ */
.footer { background: var(--color-ink); color: var(--color-on-dark-muted); padding-block: var(--space-6) calc(var(--bar-h) + 40px); }
/* minmax(0,…) lets tracks shrink below their content's min-content width, so a
   long link or nowrap button can never push the grid past the viewport. */
.footer__grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr); gap: var(--space-4); }
.footer__grid > * { min-width: 0; }
/* Footer column titles are <h2> for a valid heading order (they sit inside the
   contentinfo landmark), but are styled as small mono labels, not display type. */
.footer__h { font-family: var(--font-mono); color: #fff; font-size: 10px; font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.footer a { color: var(--color-on-dark-muted); text-decoration: none; }
.footer a:hover { color: #fff; }
.footer ul { list-style: none; padding: 0; display: grid; gap: 10px; font-size: var(--fs-sm); }
.footer__nap { font-size: var(--fs-sm); line-height: 1.75; }
/* The phone number is a primary tap target — give it a >=24px hit area (WCAG 2.5.8). */
.footer__nap a { display: inline-block; padding-block: 4px; }
.footer__nap b { color: #fff; font-family: var(--font-display); font-size: 1.12rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; }
.footer__social { display: flex; gap: 8px; margin-top: 18px; }
.footer__social a { width: 40px; height: 40px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--color-on-dark-line); display: grid; place-items: center; }
.footer__social svg { width: 20px; height: 20px; }
.footer__bottom { border-top: 1px solid var(--color-on-dark-line); margin-top: var(--space-5); padding-top: var(--space-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 10px; letter-spacing: .02em; }
.footer__disc { max-width: 72ch; line-height: 1.6; }

/* ============================================================================
   STICKY BOTTOM BAR (mobile)
   ============================================================================ */
.bottombar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none;
  max-width: 100vw; overflow: hidden;
  grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: var(--color-ink); padding-bottom: env(safe-area-inset-bottom);
  transition: transform .25s var(--ease);
}
.bottombar a { min-width: 0; min-height: var(--bar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: .84rem; color: #fff; border-right: 1px solid rgba(255,255,255,.14); }
.bottombar a:last-child { border-right: 0; }
.bottombar a svg { width: 20px; height: 20px; }
.bottombar .bb-call { background: var(--color-urgent); }
.bottombar .bb-quote { background: var(--color-accent); }
.bottombar small { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; opacity: .85; font-weight: 500; }

/* ============================================================================
   BLOG — archive grid, cards, pagination
   ============================================================================ */
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-3); }

.bcard { background: var(--color-paper-card); border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); }
.bcard:hover { border-color: var(--color-ink); box-shadow: var(--shadow); transform: translate(-3px,-3px); }
.bcard__media { display: block; height: 200px; border-bottom: 1px solid var(--color-line-strong); }
.bcard__media img { width: 100%; height: 100%; object-fit: cover; }
.bcard__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.bcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bcard__tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, transparent); padding: 5px 9px; border-radius: 2px; }
.bcard__title { font-size: 1.16rem; line-height: var(--lh-snug); margin-bottom: 8px; }
/* block + padding so the card's primary link clears the 24x24 tap target minimum */
.bcard__title a { display: block; text-decoration: none; padding-block: 3px; }
.bcard__title a:hover { color: var(--color-accent); }
.bcard__desc { color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: 18px; }
.bcard__meta { margin-top: auto; display: flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--color-line); font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }

.pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: var(--space-5); flex-wrap: wrap; }
.pagination__pages { display: flex; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0; }
.pagination__page { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; text-decoration: none; font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-sm); color: var(--color-ink); border-radius: 2px; box-shadow: inset 0 0 0 1px var(--color-line-strong); }
.pagination__page:hover { box-shadow: inset 0 0 0 2px var(--color-ink); }
.pagination__page.is-current { background: var(--color-accent); color: #fff; box-shadow: none; }
.pagination__arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-sm); color: var(--color-ink); border-radius: 2px; box-shadow: inset 0 0 0 1px var(--color-line-strong); }
.pagination__arrow:hover { box-shadow: inset 0 0 0 2px var(--color-ink); }
.pagination__arrow svg { width: 17px; height: 17px; }
.pagination__arrow.is-disabled { opacity: .4; pointer-events: none; }

/* ============================================================================
   BLOG — single post (content + sidebar)
   ============================================================================ */
.post__layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: clamp(28px,4vw,60px); align-items: start; }
.post { min-width: 0; }
.post__cover { width: 100%; height: clamp(220px, 32vw, 440px); object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--color-line-strong); }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.post__meta b { color: var(--color-ink); font-weight: 700; }
.post__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
/* offset in-page TOC jumps so headings clear the sticky header */
.content-body :is(h2,h3) { scroll-margin-top: 150px; }

.toc { background: var(--color-paper-alt); border: 1px solid var(--color-line-strong); border-left: 4px solid var(--color-accent); border-radius: var(--radius); padding: 22px 24px; margin: 28px 0 34px; }
.toc__title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--color-accent); margin: 0 0 14px; }
.toc__list { list-style: none; padding: 0; margin: 0; counter-reset: toc; display: grid; gap: 9px; }
.toc__item a { color: var(--color-text); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); border-bottom: 1px solid transparent; }
.toc__item a:hover { color: var(--color-accent); border-bottom-color: currentColor; }
.toc__item--h3 { padding-left: 18px; }
.toc__item--h3 a { font-weight: 500; color: var(--color-text-muted); }

.authorbio { display: flex; gap: 20px; align-items: flex-start; margin-top: 36px; padding: 26px; background: var(--color-paper-card); border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); border-top: 4px solid var(--color-accent); }
.authorbio__photo { width: 96px; height: 96px; border-radius: 2px; object-fit: cover; flex: none; border: 1px solid var(--color-line-strong); }
.authorbio__initials { width: 96px; height: 96px; border-radius: 2px; flex: none; display: grid; place-items: center; background: var(--color-ink); color: var(--color-highlight-on-dark); font-family: var(--font-display); font-weight: 900; font-size: 1.9rem; letter-spacing: -0.02em; }
.authorbio__body { min-width: 0; }
.authorbio__eyebrow { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); font-weight: 600; }
.authorbio__name { display: block; font-family: var(--font-display); font-weight: 900; font-size: 1.2rem; letter-spacing: -0.02em; color: var(--color-ink); margin-top: 6px; }
.authorbio__title { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 4px; }
.authorbio__text { margin-top: 12px; color: var(--color-text-muted); font-size: var(--fs-sm); }

.post__side { position: sticky; top: 150px; display: grid; gap: var(--space-2); }
.poplist { background: var(--color-paper-card); border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); padding: 24px; }
.poplist__title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--color-accent); margin: 0 0 18px; }
.poplist__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.poplist__item { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.poplist__rank { font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; color: var(--color-line-strong); line-height: 1.25; }
.poplist__body { min-width: 0; }
.poplist__link { display: block; font-family: var(--font-display); font-weight: 800; font-size: .98rem; line-height: var(--lh-snug); letter-spacing: -0.015em; color: var(--color-ink); text-decoration: none; }
.poplist__link:hover { color: var(--color-accent); }
.poplist__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }

/* ============================================================================
   CONTACT PAGE — form + NAP card
   ============================================================================ */
.contact__layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: clamp(28px,4vw,60px); align-items: start; }
.contact__form { min-width: 0; }
.contact__aside { display: grid; gap: var(--space-2); position: sticky; top: 150px; }

.cform { display: grid; gap: 16px; }
.cform__row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.cform .field { margin-bottom: 0; }
.cform select,
.cform textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--color-line-strong); border-radius: 2px;
  font-size: 1rem; font-family: inherit; background: var(--color-paper); color: var(--color-text);
}
.cform select { min-height: 52px; }
.cform textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.cform select:focus, .cform textarea:focus { border-color: var(--color-accent); background: #fff; outline: none; box-shadow: inset 0 0 0 1px var(--color-accent); }
.cform__trust { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--color-text-muted); }
.cform__trust svg { width: 15px; height: 15px; color: var(--color-success); }
.cform__done { text-align: center; padding: 40px 20px; background: var(--color-paper-card); border: 1px solid var(--color-line-strong); border-top: 4px solid var(--color-success); border-radius: var(--radius-lg); }
.cform__done .check { width: 64px; height: 64px; border-radius: 2px; background: var(--color-success); color: #fff; display: grid; place-items: center; margin: 0 auto 18px; }
.cform__done .check svg { width: 36px; height: 36px; }

.napcard { background: var(--color-paper-card); border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); border-top: 4px solid var(--color-accent); padding: 26px; }
.napcard--area { border-top-color: var(--color-ink); }
.napcard__title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--color-accent); margin: 0 0 18px; }
.napcard--area .napcard__title { color: var(--color-ink); }
.napcard__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.napcard__k { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 4px; }
.napcard__v { display: block; font-family: var(--font-display); font-weight: 800; color: var(--color-ink); font-style: normal; line-height: 1.4; text-decoration: none; }
a.napcard__v { display: inline-block; padding-block: 2px; }
a.napcard__v:hover { color: var(--color-accent); }
.napcard__note { color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: 14px; }
.napcard__social { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--color-line); }
.napcard__social .footer__social a { box-shadow: inset 0 0 0 1px var(--color-line-strong); color: var(--color-ink); }

/* ============================================================================
   SPLIT SECTION — two-column image + copy (alternating)
   ============================================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media { position: relative; min-width: 0; }
.split__media img { width: 100%; height: clamp(260px, 34vw, 460px); object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--color-line-strong); }
/* scrim behind the caption so it stays legible over a light photo */
.split__media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: linear-gradient(180deg, transparent, rgba(var(--ink-rgb), .78));
  pointer-events: none;
}
.split__media:not(:has(.split__caption))::after { content: none; }
.split__caption {
  position: absolute; left: 16px; bottom: 14px; z-index: 1; color: #fff;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600;
}
.split__body { min-width: 0; }
.split__body .section-head { margin-bottom: 22px; }
.split__body p { color: var(--color-text-muted); margin-bottom: 14px; max-width: 62ch; }
.split__list { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 11px; }
.split__list li { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; font-size: var(--fs-sm); }
.split__list svg { width: 18px; height: 18px; color: var(--color-success); flex: none; margin-top: 2px; }

/* Neighbourhood chips (non-linking — they name areas inside the current city) */
.arealist { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.arealist li {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--color-line-strong);
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; color: var(--color-ink);
}
.arealist svg { width: 14px; height: 14px; color: var(--color-accent); flex: none; }

/* Service page: "what drives the price" factor list */
.pricing__h { font-size: var(--fs-h3); margin-bottom: 18px; }
.factorlist { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--color-line); }
.factorlist li {
  position: relative; padding: 16px 0 16px 30px;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text-muted); font-size: var(--fs-sm); line-height: 1.6;
}
.factorlist li::before {
  content: ""; position: absolute; left: 4px; top: 25px;
  width: 10px; height: 2px; background: var(--color-accent);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
/* Breakpoints: desktop (base) · 992 (tablet landscape) · 767 (tablet portrait)
   · 489 (mobile). Header per breakpoint mirrors the design:
   - desktop  : nav + phone + Free Estimate                 (no hamburger)
   - <=992    : phone + Free Estimate + hamburger            (no nav)
   - <=767    : phone + hamburger                            (no Free Estimate)
   - <=489    : hamburger only; top bar swaps socials -> call */
@media (max-width: 992px) {
  .hero__grid, .urgent__grid, .proof__grid, .owner, .compare__wrap, .financing__grid, .whyus__grid, .area__grid, .finalcta__grid { grid-template-columns: 1fr; }
  .proof__side, .priceanchor, .guarantee { position: static; }
  /* map is full-width once the area grid stacks: drop the tall min-height for a ratio */
  #area .area__map { min-height: 0; aspect-ratio: 16 / 10; }
  .services, .work-grid { grid-template-columns: repeat(2,1fr); }
  /* blog: sidebar drops below the article; cards go 2-up */
  .post__layout { grid-template-columns: 1fr; }
  .post__side { position: static; }
  .contact__layout { grid-template-columns: 1fr; }
  .contact__aside { position: static; }
  /* photo always sits above the copy once stacked, whatever the desktop order */
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .blog-grid { grid-template-columns: repeat(2,1fr); }
  .proof__stats { grid-auto-flow: row; grid-template-columns: repeat(2,1fr); }
  .proof__stats .stat:nth-child(2) { border-right: 0; }
  .proof__stats .stat:nth-child(1), .proof__stats .stat:nth-child(2) { border-bottom: 1px solid var(--color-line-strong); }
  .proof__stats .stat:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  /* footer: 2-col (NAP + Service Area | Services + Guides/CTA) */
  .footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero__copy { order: 1; }
  .hero__form { order: 2; }
  /* Split hero (LSL): keep the address widget BELOW the copy on <=992 so it
     never stacks above the H1; it drops under the "Free inspections..." line. */
  .hero--split .hero__media { order: 2; }
  /* This must out-specify `.hero--home .hero__grid` in the base layer, otherwise
     the hero keeps two columns and .hero's overflow:hidden silently clips the
     lead form off-screen. */
  .hero--home .hero__grid {
    grid-template-columns: 1fr;
    padding-block: clamp(32px, 5vw, 56px);
  }
  .hero--home .hero__copy { max-width: none; }
  .hero--home .hero__cta-row { flex-wrap: wrap; }
  .hero__scrim { background: linear-gradient(180deg, rgba(var(--ink-rgb), .93) 0%, rgba(var(--ink-rgb), .95) 100%); }
  .nav { display: none; }
  /* nav (the margin-inline:auto spacer) is gone, so anchor actions to the right
     — keeps the hamburger flush-right at every width below desktop. */
  .header__actions { margin-left: auto; }
  .hamburger { display: grid; }
  .bottombar { display: grid; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; border-bottom: 1px solid var(--color-line-strong); }
  .step:last-child { border-bottom: 0; }
}
@media (max-width: 767px) {
  .services, .work-grid { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .crew-vetting { grid-template-columns: 1fr; }
  .magnet { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero__cta-row { flex-direction: column; align-items: stretch; }
  .hero__cta-row .btn, .hero__cta-row .tel { width: 100%; }
  .ctable th, .ctable td { padding: 12px 10px; font-size: var(--fs-sm); }
  .blog-grid { grid-template-columns: 1fr; gap: var(--space-2); }
  .cform__row { grid-template-columns: 1fr; }
  .bcard__media { height: 190px; }
  .post__cover { height: clamp(180px, 44vw, 320px); }
  .post__layout { gap: var(--space-4); }
  .header__actions .btn--header { display: none; }
}
@media (max-width: 489px) {
  .footer__grid { grid-template-columns: 1fr; }
  .proof__stats { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .proof__stats .stat:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  .hero__grid { padding-block: 16px 22px; gap: 14px; }
  #area .area__cities { grid-template-columns: 1fr; }
  #area .ilinks__grid { grid-template-columns: 1fr; }
  #area .area__map { aspect-ratio: 4 / 3; }
  .hero h1 { font-size: 2rem; }
  .hero__angle { margin-bottom: 12px; }
  .hero__cta-row { margin-top: 14px; gap: 12px; }
  .hero__promise { margin-top: 12px; }
  .header .tel { display: none; }
  .topbar__socials { display: none; }
  .topbar__call { display: grid; }
  /* smaller brand logo on mobile */
  .brand { gap: 10px; }
  .brand__mark { width: 38px; height: 38px; }
  .brand__mark svg { width: 21px; height: 21px; }
  .brand__name { font-size: 1rem; }
  .brand__name small { font-size: 9px; margin-top: 3px; }
  /* blog: stack the author card, shrink cards, wrap the pagination controls */
  .authorbio { flex-direction: column; gap: 16px; padding: 22px; }
  .authorbio__photo, .authorbio__initials { width: 72px; height: 72px; }
  .authorbio__initials { font-size: 1.5rem; }
  .bcard__media { height: 170px; }
  .bcard__body { padding: 18px; }
  .bcard__title { font-size: 1.06rem; }
  .post__cover { height: 200px; }
  .post__meta { gap: 6px; }
  .poplist { padding: 20px; }
  .pagination { gap: 8px; }
  .pagination__pages { flex-wrap: wrap; justify-content: center; }
  .pagination__arrow span { display: none; }
  .pagination__arrow { padding: 0 12px; }
  .toc { padding: 18px; }
  .toc__item--h3 { padding-left: 12px; }
  /* header is shorter on mobile — tighten the anchor-jump offset to match */
  .content-body :is(h2,h3) { scroll-margin-top: 120px; }
}

/* ============================================================================
   MOTION + PHOTO PLACEHOLDERS
   ============================================================================ */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
[data-reveal].is-in{opacity:1;transform:none;}
.header{transition:background .2s var(--ease),box-shadow .2s var(--ease);}
.header--shrink .header__bar{min-height:60px;}
.header--shrink{box-shadow:0 2px 14px rgba(var(--ink-rgb),.10);}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important;}
}

/* GEO answer block */
.answer { position: relative; margin-top: 22px; max-width: 64ch; background: var(--color-paper-card); color: var(--color-text); border-left: 4px solid var(--color-accent); border-radius: 2px; padding: 20px 24px 18px; font-size: 1.06rem; line-height: 1.6; box-shadow: 8px 8px 0 rgba(var(--ink-rgb),.06); }
/* Answer card opens the article: top-align with the lead-form aside (drop the
   hero-era top margin). Section rhythm below is de-inlined from service.html. */
.page-grid > article > .answer:first-child { margin-top: 0; }
/* on service pages the short-answer card and the spec sheets fill the full
   article column (drop the 64ch reading-width cap the base card carries) */
[data-page^="service"] .page-grid > article > .answer { max-width: none; }
[data-page^="service"] .page-grid > article > .prose { margin-top: clamp(40px, 5vw, 56px); }
[data-page^="service"] .page-grid > article > .answer + .prose { margin-top: clamp(26px, 3vw, 36px); }
[data-page^="service"] .page-grid > article > .spec,
[data-page^="service"] .page-grid > article > .pricetable,
[data-page^="service"] .page-grid > article > .stats,
[data-page^="service"] .page-grid > article > .projgrid,
[data-page^="service"] .page-grid > article > .tgrid { margin-top: 22px; }
[data-page^="service"] .page-grid > article > .checks { margin-top: 20px; grid-template-columns: 1fr 1fr; max-width: 720px; }
[data-page^="service"] .page-grid > article > .muted { margin-top: 16px; max-width: 66ch; }

/* ---- Service Area (location) pages -----------------------------------------
   Same de-inlined body rhythm and full-width short-answer card as service
   pages. The hero deliberately carries NO background image. */
[data-page="location"] .page-grid > article > .answer { max-width: none; }
[data-page="location"] .page-grid > article > .answer + .prose { margin-top: clamp(26px, 3vw, 36px); }
[data-page="location"] .page-grid > article > h2 { margin-top: clamp(44px, 5vw, 56px); }
[data-page="location"] .page-grid > article > .areamap,
[data-page="location"] .page-grid > article > .projgrid,
[data-page="location"] .page-grid > article > .pricetable,
[data-page="location"] .page-grid > article > .tgrid { margin-top: 22px; }
[data-page="location"] .page-grid > article > .stormnote { margin-top: 32px; }
[data-page="location"] .page-grid > article > .section-lead { margin-top: 14px; max-width: 66ch; color: var(--color-ink-soft); }
[data-page="location"] .hoods__note { margin-top: 14px; font-size: var(--fs-sm); }
.proj__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border-radius: var(--radius); border: 1px solid var(--color-line); }

.answer::before { content: "The short answer"; display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent); font-weight: 600; margin-bottom: 10px; }
.answer b { font-family: var(--font-display); font-weight: 800; }
@media (max-width: 560px) { .answer { padding: 16px 18px 14px; font-size: 1rem; } }

/* content / GEO long-form pages */
.content-body { color: var(--color-text); line-height: 1.7; }
.content-body h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.18; margin: 38px 0 14px; color: var(--color-ink); }
.content-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; line-height: 1.25; margin: 26px 0 10px; color: var(--color-ink); }
.content-body p { margin: 0 0 16px; max-width: 70ch; }
.content-body ul, .content-body ol { margin: 0 0 20px; padding-left: 22px; max-width: 70ch; }
.content-body li { margin-bottom: 9px; }
.content-body table { width: 100%; border-collapse: collapse; margin: 18px 0 26px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); overflow: hidden; }
.content-body th, .content-body td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--color-line); font-size: var(--fs-sm); }
.content-body thead th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; background: var(--color-ink); color: #fff; }
.content-body tbody tr:nth-child(even) { background: var(--color-paper-alt); }
.content-body tbody tr:last-child td { border-bottom: 0; }
.content-body .rank { display: inline-grid; place-items: center; width: 30px; height: 30px; background: var(--color-ink); color: #fff; border-radius: 50%; font-family: var(--font-mono); font-weight: 700; margin-right: 10px; }
.content-body .winner { background: color-mix(in srgb, var(--color-success) 7%, var(--color-paper-card)); border: 1px solid var(--color-line-strong); border-left: 4px solid var(--color-success); border-radius: var(--radius-lg); padding: 22px 24px; margin: 20px 0 26px; }
.content-body .slot { background: var(--color-paper-alt); border: 1px dashed var(--color-line-strong); border-radius: var(--radius-lg); padding: 16px 20px; margin: 0 0 12px; color: var(--color-text-muted); }
.content-body .note { background: var(--color-paper-card); border-left: 4px solid var(--color-rating); border-radius: 2px; padding: 16px 20px; margin: 18px 0; font-size: var(--fs-sm); }
.content-body .lender-card { background: var(--color-paper-card); border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); padding: 20px 22px; margin: 14px 0; }
.content-body .disc { font-size: .82rem; color: var(--color-text-muted); margin-top: 18px; }

/* ---- Header nav dropdowns (Services / Locations) — zero-JS, hover+focus ---- */
/* NOTE: the caret/toggle are handled by the engine-aware .nav__group / .nav__toggle
   block below (rotates .nav__toggle svg on hover + [aria-expanded="true"]); the old
   .nav__drop / .nav__caret rules that were here targeted classes the engine markup
   never emits and have been removed. */
/* A closed menu uses display:none rather than visibility:hidden, so its links are
   removed from the rendered + accessible tree entirely. (With visibility:hidden
   the anchors still occupy boxes, so an audit reading innerText sees links with
   no accessible name.) transition-behavior:allow-discrete keeps the fade in
   modern browsers; older ones just open instantly. */
.nav__menu {
  /* top:100% (no gap) keeps the trigger and menu touching, so the pointer never
     crosses a dead zone that would close the menu mid-hover. overflow:hidden
     clips the full-width footer divider to the card's rounded corners. */
  position: absolute; top: 100%; left: 0; min-width: 258px;
  background: var(--color-paper-card); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); overflow: hidden auto;
  /* cap to the viewport (below the sticky header) and scroll internally, so a long
     city list never runs off-screen with unreachable items. */
  max-height: calc(100vh - 150px); overscroll-behavior: contain;
  box-shadow: 0 18px 44px rgba(var(--ink-rgb),.16); padding: 8px;
  z-index: 60;
  display: none; opacity: 0; transform: translateY(6px);
  transition-property: opacity, transform, display;
  transition-duration: .16s;
  transition-timing-function: var(--ease, ease);
  transition-behavior: allow-discrete;
}
/* Reveal the menu. `.nav__group.open` is the JS state (click + hover-intent +
   keyboard, set by core.js/chrome.js) and is the primary trigger; :hover and
   :focus-within add the pure-CSS + keyboard fallback. */
.nav__group.open .nav__menu,
.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu { display: grid; opacity: 1; transform: translateY(0); }
@starting-style {
  .nav__group.open .nav__menu,
  .nav__group:hover .nav__menu,
  .nav__group:focus-within .nav__menu { opacity: 0; transform: translateY(6px); }
}
/* Each row is a two-column flex: the anchor's own text is the bold name on the
   left, the optional mono meta (.sub — county + state) is pushed to the right.
   The engine markup puts the name as the bare text node in .nav__menu a, so the
   name treatment lives on the anchor itself. */
.nav__menu a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 11px 14px; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  letter-spacing: -.01em; color: var(--color-ink); line-height: 1.15;
  transition: background .14s var(--ease);
}
.nav__menu a::after { display: none; }
.nav__menu a:hover { background: var(--color-paper-alt); color: var(--color-accent); }
/* current-page item in the dropdown: same treatment as hover */
.nav__menu a[aria-current="page"] { background: var(--color-paper-alt); color: var(--color-accent); }
.nav__menu .sub {
  flex: none; align-self: center;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: var(--color-text-muted);
}
/* Full-width divider + accent "All areas →" footer. Negative margins pull the
   top border out to the card edges past the container's 8px padding. The
   `a.nav__all` compound selector outranks `.nav a { color: text }`, which would
   otherwise repaint the accent text dark. justify-content:flex-start keeps the
   arrow tucked beside the label rather than pushed to the far edge. (The engine
   renders the arrow as a &rarr; text char, not a <span>, so the span-slide rules
   below are inert against current markup but kept to match the parity design.) */
.nav__menu a.nav__all {
  justify-content: flex-start; gap: 8px;
  margin: 6px -8px -8px; padding: 14px 14px 13px;
  border-top: 1px solid var(--color-line); border-radius: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: var(--color-accent);
}
.nav__menu a.nav__all span { transition: transform .16s var(--ease); }
.nav__menu a.nav__all:hover { background: var(--color-paper-alt); color: var(--color-accent-ink); }
.nav__menu a.nav__all:hover span { transform: translateX(4px); }

/* ============================ REVIEWS PAGE ============================ */
/* Self-contained, responsive-by-design (auto-fit grid + flex-wrap), so no
   breakpoint overrides are needed. Two hero states share one card system. */
.rvw-hero {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(24px, 5vw, 64px);
  background: var(--color-paper-card); border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 48px);
  text-align: center;
}
.rvw-hero__score { display: grid; gap: 12px; justify-items: center; }
.rvw-hero__num {
  font-family: var(--font-display); font-weight: 800; line-height: .85;
  font-size: clamp(3.4rem, 7vw, 5rem); color: var(--color-ink); letter-spacing: -.02em;
}
.rvw-hero__count {
  font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: .05em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.rvw-hero__cta { display: grid; gap: 12px; justify-items: center; }
.rvw-hero__cta .btn { min-width: 240px; }

/* Partial-fill star bar: a muted base row with a gold row clipped to the exact
   rating percentage on top. Stars are flex:none so clipping never resizes them.
   The rating value is on the parent's aria-label; the stars are decorative. */
.rvw-stars { position: relative; display: inline-flex; }
.rvw-stars__base, .rvw-stars__fill { display: flex; gap: 4px; }
.rvw-stars__base { color: var(--color-line-strong); }
.rvw-stars__fill {
  position: absolute; top: 0; left: 0; height: 100%;
  overflow: hidden; white-space: nowrap; color: var(--color-rating);
}
.rvw-stars svg { width: 30px; height: 30px; flex: none; }

.rvw-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-success);
}
.rvw-badge svg { width: 18px; height: 18px; color: var(--color-success); }

/* Reputation state (no rating yet): seal + copy, left-aligned. */
.rvw-hero--reputation { text-align: left; justify-content: flex-start; gap: clamp(20px, 3vw, 40px); }
.rvw-hero__seal {
  flex: none; display: grid; place-items: center; width: 78px; height: 78px;
  border-radius: 50%; color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-paper-card));
}
.rvw-hero__body { flex: 1 1 320px; }
.rvw-hero--reputation h2 { margin: 8px 0 10px; }
.rvw-hero--reputation p { max-width: 62ch; color: var(--color-text-muted); }
.rvw-hero--reputation .btn { margin-top: 20px; }

/* Trust-card grid — the part that makes it read as a reputation page. */
.rvw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 16px; }
.rvw-card {
  background: var(--color-paper-card); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); padding: 22px;
}
.rvw-card__ico {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px;
  border-radius: 11px; color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-paper-card));
}
.rvw-card__ico svg { width: 22px; height: 22px; }
.rvw-card b { display: block; font-family: var(--font-display); font-size: 1.06rem; color: var(--color-ink); margin-bottom: 5px; }
.rvw-card p { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.5; }


/* ============================================================================
   ENGINE EXTENSIONS — engine-only components not present in the template
   (address widget, header top-bar, drawer accordions, storm/partners/spec/gallery,
   guides, before-after, ctaband, checks, logo variants). Selectors are entirely
   engine-only, so they never override the template design above.
   ============================================================================ */
/* @keyframes pulse + fadein are already defined once earlier (see .hero__promise
   and .wizard__step.active); the identical duplicates that were here are removed. */
@keyframes scan { 0% { top: 6%; } 50% { top: 92%; } 100% { top: 6%; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ssr-pulse { 70% { box-shadow: 0 0 0 8px rgba(79,180,119,0); } 100% { box-shadow: 0 0 0 0 rgba(79,180,119,0); } }

.hero__sub { font-size: var(--fs-lead); color: var(--color-on-dark-muted); margin-top: 22px; max-width: 40ch; }

.hero__trustline { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--color-on-dark-line); }

.hero__media { position: relative; }

.hero--split .hero__media { display: flex; flex-direction: column; }

/* the free-inspection promise pill sits centered directly under the address card */
.hero--split .hero__media .hero__promise { margin-top: 16px; align-self: center; }

.iq__label { font-family: var(--font-display); font-weight: 800; font-size: 1.22rem; letter-spacing: -0.02em; }

.iq__hint { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: 7px; }

.iq__row { display: flex; gap: 0; margin-top: 16px; }

.iq__field { position: relative; flex: 1; }

.iq__field svg.pin { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--color-text-muted); }

/* The address input had no styling of its own (root cause of the unstyled field).
   It is joined to the button on the right: no gap between them, the input keeps
   left-only rounded corners and drops its right border, the button takes the
   right corners. The 44px left padding clears the absolutely-positioned pin. */
.iq input {
  min-height: 54px; width: 100%; padding: 14px 16px 14px 44px;
  border: 1px solid var(--color-line-strong); border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font-size: 1rem; font-family: inherit;
  background: var(--color-paper); color: var(--color-text);
}
.iq input::placeholder { color: var(--color-text-muted); }
.iq input:focus { border-color: var(--color-accent); outline: none; box-shadow: inset 0 0 0 1px var(--color-accent); }

.iq__go { min-height: 54px; width: auto; padding: 0 22px; white-space: nowrap; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.iq__trust { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: var(--fs-xs); color: var(--color-text-muted); letter-spacing: .04em; }

.iq__trust svg { width: 15px; height: 15px; color: var(--color-success); flex: none; }

.iq__state { display: none; }
/* while handing off to the quote page: swap the form for the measuring animation */
.iq[data-state="measuring"] .iq__form { display: none; }
.iq[data-state="measuring"] .iq__measuring { display: block; }

.iq__sat {
  height: 150px; border-radius: 2px; position: relative; overflow: hidden; border: 1px solid var(--color-line-strong);
  background: radial-gradient(120px 80px at 30% 30%, #3a4a30, transparent), radial-gradient(140px 90px at 70% 60%, #46563a, transparent), linear-gradient(135deg,#1B2530,#243140);
}

.iq__scan { position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,transparent,#6FAAF0,transparent); top: 0; animation: scan 1.4s linear infinite; box-shadow: 0 0 12px #6FAAF0; }

.iq__reticle { position: absolute; inset: 24% 30%; border: 1.5px dashed rgba(240,243,244,.7); }

.iq__measuring p { margin-top: 15px; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 9px; }

.iq__measuring p .spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--color-line-strong); border-top-color: var(--color-accent); animation: spin .7s linear infinite; }

@media (prefers-reduced-motion: reduce) { .iq__scan, .iq__measuring p .spin { animation: none; } }

.iq__result .iq__price { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem,5vw,2.6rem); color: var(--color-ink); letter-spacing: -0.03em; }

.iq__result .row { display: flex; gap: 10px; margin-top: 18px; }

.storm { background: var(--color-urgent-ink); color: #fff; position: relative; overflow: hidden; }

.storm::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(0,0,0,.14) 0 2px, transparent 2px 22px); pointer-events: none; }

.storm__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px,4vw,60px); align-items: center; }
/* Collapse to one column on mobile. Defined here (after the base rule) so it
   wins over it — the global grid-collapse block earlier in the file is out-ranked
   by this later same-specificity base rule. */
@media (max-width: 992px) { .storm__grid { grid-template-columns: 1fr; } }

.storm__tag { display: inline-flex; align-items: center; gap: 9px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.28); color: #FFD9D5; padding: 8px 14px; border-radius: 2px; font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-mono); letter-spacing: .08em; text-transform: uppercase; }

.storm__tag svg { width: 16px; height: 16px; }

.storm h2 { color: #fff; margin: 18px 0; }

.storm p { color: #FBDEDB; max-width: 54ch; }

.storm__steps { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; }

.storm__steps li { list-style: none; display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.18); padding: 9px 13px; border-radius: 2px; font-size: var(--fs-sm); font-weight: 600; }

.storm__steps svg { width: 15px; height: 15px; color: #FFB38C; }

.storm__card { background: var(--color-ink); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg); padding: 26px; text-align: center; }
/* Inner rhythm: the heading/subtext/button all shipped with margin:0, so the
   button sat glued to the subtext. Give them breathing room. */
.storm__card .big { margin-bottom: 6px; }
.storm__card p { margin-bottom: 20px; }

.storm__card small { display: block; margin-top: 14px; color: #E7B7B7; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .04em; text-transform: uppercase; }

.videocard { border-radius: var(--radius-lg); overflow: hidden; position: relative; border: 1px solid var(--color-line-strong); }

/* stable 16:9 frame for both the <video> and the placeholder .ph */
.videocard video.ph, .videocard .ph { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; }

/* lift the caption clear of the native video controls (controls kept as-is) */
.videocard__cap { position: absolute; left: 14px; bottom: 46px; color: #fff; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.7); }

.mapcard { border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-paper-card); }

.mapcard__embed { height: 200px; position: relative; background:
  linear-gradient(0deg, rgba(18,26,35,.03), rgba(18,26,35,.03)),
  repeating-linear-gradient(0deg,#DFE6E9,#DFE6E9 22px,#CCD6DB 22px,#CCD6DB 23px),
  repeating-linear-gradient(90deg,#E6EBED,#E6EBED 30px,#D5DDE1 30px,#D5DDE1 31px); }

.mapcard__embed .needle { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-100%); color: var(--color-accent); }

.mapcard__embed .needle svg { width: 38px; height: 38px; filter: drop-shadow(0 5px 5px rgba(0,0,0,.25)); }

/* No real embed (LSL has no biz.map_embed): read the placeholder as an intentional
   service-area radius graphic — a soft accent ring with the pin centered above it. */
.mapcard__embed::after { content: ""; position: absolute; left: 50%; top: 50%; width: 128px; height: 128px; transform: translate(-50%,-46%); border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--color-accent) 38%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 68%); pointer-events: none; }

.mapcard__foot { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px; border-top: 1px solid var(--color-line); }
/* with no rating strip (rating gated off), center the lone "Read all reviews" link */
.mapcard__foot:not(:has(.rating-strip)) { justify-content: center; }

.mapcard__foot a { color: var(--color-accent); font-weight: 700; text-decoration: none; font-size: var(--fs-sm); }

.gallery__track { display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }

.gallery__track::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) { .gallery__track { scroll-snap-type: none; } }

/* Duplicate minified .ph / .ph::before / .ph::after / .ph .ph__tag block removed:
   the spaced copies below carry identical values, and the minified .ph__tag was
   fully overridden by the later spaced rule (bottom:10px, font-size:10px). */

.checks { list-style: none; padding: 0; display: grid; gap: 12px; }

.checks li { display: flex; gap: 11px; align-items: flex-start; font-weight: 600; }

.checks .ico { width: 19px; height: 19px; color: var(--color-success); margin-top: 4px; }

.on-dark .checks .ico { color: #6FE39A; }

/* Thank-you "what happens next": steps beside a service photo (photo desktop-only). */
.nextsteps { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 52px); align-items: center; }
.nextsteps__main .checks { margin-top: clamp(22px, 3vw, 32px); gap: 18px; }
.nextsteps__main .checks li { font-size: 1.05rem; }
.nextsteps__media { display: none; }
@media (min-width: 840px) {
  .nextsteps { grid-template-columns: 1.05fr .95fr; }
  .nextsteps__media { display: block; }
}
.nextsteps__media img { width: 100%; height: clamp(300px, 30vw, 400px); object-fit: cover; border-radius: var(--radius); border: 1px solid var(--color-line-strong); box-shadow: var(--shadow); display: block; }

.ph { position: relative; background: linear-gradient(135deg,#1C2733 0%,#19242F 46%,#0D141C 100%); overflow: hidden; }

.ph::before { content: ""; position: absolute; inset: 0; opacity: .55; background:
  repeating-linear-gradient(125deg,rgba(240,243,244,.045) 0 2px,transparent 2px 13px),
  radial-gradient(130% 95% at 78% 8%,color-mix(in srgb,var(--color-accent) 32%,transparent),transparent 58%); }

.ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(0deg,rgba(0,0,0,.5),transparent); }

.ph .ph__tag { position: absolute; left: 12px; bottom: 10px; z-index: 1; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(240,243,244,.62); }

/* .nav__toggle svg (was 14px, fully overridden below by the 13px + flex:none rule)
   and .nav__group { position:relative } (subset of the fuller .nav__group rule
   below) are consolidated into their later definitions. */

.phero { background: var(--color-slate); color: var(--color-on-dark); position: relative; overflow: hidden; }

.phero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 14px; background-image: repeating-linear-gradient(90deg, var(--color-on-dark-line) 0 1px, transparent 1px 28px); opacity: .5; pointer-events: none; }

.phero__inner { padding-block: clamp(36px, 5vw, 72px); position: relative; z-index: 1; }

.phero h1 { color: #fff; margin-top: 18px; max-width: 25ch; font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.025em; }

.phero__lead { color: var(--color-on-dark-muted); font-size: var(--fs-lead); margin-top: 16px; max-width: 52ch; }

.phero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px; }
/* Quiet inline trust line (not boxed pills): hairline separators, key token bold white. */
.phero__meta > .phero__chip + .phero__chip { border-left: 1px solid var(--color-on-dark-line); padding-left: 18px; }
/* On mobile the inline separators would indent wrapped chips unevenly — stack them
   left-aligned with no dividers instead. */
@media (max-width: 700px) {
  .phero__meta { flex-direction: column; align-items: flex-start; gap: 12px; }
  .phero__meta > .phero__chip + .phero__chip { border-left: 0; padding-left: 0; }
}

.phero__chip { display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 0; border-radius: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: normal; text-transform: none; color: var(--color-on-dark-muted); }

.phero__chip b { color: #fff; font-weight: 700; }

.phero__chip svg { width: 14px; height: 14px; color: #6FAAF0; }

.phero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: clamp(28px, 4vw, 56px); align-items: start; }

.page-grid > * { min-width: 0; }

.page-aside { position: sticky; top: 96px; }

@media (max-width: 980px) { [data-page^="service"] .page-grid > article > .prose {max-width: 100%;}.page-grid { grid-template-columns: minmax(0, 1fr); } .page-aside { position: static; order: -1; } }

.leadcard { background: var(--color-paper-card); border: 1px solid var(--color-line-strong); border-top: 4px solid var(--color-accent); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }

.leadcard__title { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; }

.leadcard__sub { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: 6px; }

.leadcard form { margin-top: 18px; display: grid; gap: 12px; }

.leadcard__trust { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; font-size: var(--fs-xs); color: var(--color-text-muted); }

.leadcard__or { text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-line); }

.leadcard__tel { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; margin-top: 10px; text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--color-ink); }

.leadcard__done { text-align: center; padding: 20px 0; display: none; }

.leadcard__done p { color: var(--color-text-muted); font-size: var(--fs-sm); margin-top: 8px; }

.leadcard[data-state="done"] form, .leadcard[data-state="done"] .leadcard__sub { display: none; }

.leadcard[data-state="done"] .leadcard__done { display: block; }

.aside-trust { margin-top: 16px; border: 1px solid var(--color-line-strong); border-radius: var(--radius); background: var(--color-paper-card); padding: 18px 20px; }

.aside-trust .checks { gap: 10px; }

.aside-trust .checks li { font-size: var(--fs-sm); }

.prose { max-width: 68ch; }

.prose p { margin-top: 14px; color: var(--color-ink-soft); }

.prose p:first-child { margin-top: 0; }

.prose .lead { font-size: var(--fs-lead); color: var(--color-text); }

.prose h2 { margin-top: 40px; }

.prose h3 { margin-top: 28px; }

.prose ul { margin-top: 14px; padding-left: 22px; }

.prose li { margin-top: 6px; }

.spec { border: 1px solid var(--color-line-strong); border-radius: var(--radius); overflow: hidden; }

.spec__row { display: grid; grid-template-columns: 52px 1fr; gap: 22px; padding: 24px 26px; background: var(--color-paper-card); border-bottom: 1px solid var(--color-line-strong); align-items: start; }

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

.spec__n { font-family: var(--font-mono); font-weight: 700; font-size: 1.6rem; color: var(--color-line-strong); line-height: 1.1; }

.spec__row h3 { font-size: 1.08rem; }

.spec__row p { color: var(--color-text-muted); font-size: var(--fs-sm); line-height: 1.6; margin-top: 7px; }

.spec__row .tag { display: inline-block; margin-left: 8px; vertical-align: 2px; background: var(--color-accent); color: #fff; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 2px; }

.pricetable { border: 1px solid var(--color-line-strong); border-radius: var(--radius); overflow: hidden; }

.pricetable table { width: 100%; border-collapse: collapse; background: var(--color-paper-card); }

.pricetable th { text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-on-dark-muted); background: var(--color-ink); padding: 14px 18px; font-weight: 600; }

.pricetable td { padding: 16px 18px; border-bottom: 1px solid var(--color-line); vertical-align: top; }

.pricetable tr:last-child td { border-bottom: 0; }

.pricetable td b { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }

/* material note renders as a muted subtitle under the bold label, not inline
   (restored from base theme.css — dropped in the parity port) */
.pricetable td .sub { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 4px; }

.pricetable .life { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-muted); white-space: nowrap; }

.pricenote { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: var(--fs-sm); color: var(--color-text-muted); max-width: 70ch; }

/* auto-flow column fits the actual stat count (3 or 4) with no empty cell. */
.stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--color-line-strong); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 600px) {
  .stats { grid-auto-flow: row; grid-template-columns: 1fr; }
  .stats .stat { border-right: 0; border-bottom: 1px solid var(--color-line-strong); }
  .stats .stat:last-child { border-bottom: 0; }
}

.linkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }

.linkcard { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; background: var(--color-paper-card); border: 1px solid var(--color-line-strong); border-radius: var(--radius); padding: 16px 18px; min-height: 60px; transition: border-color .15s var(--ease); }

.linkcard:hover { border-color: var(--color-ink); }

.linkcard b { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
/* .sub must be block or the value jams onto the label (e.g. "Call us(314)..."). */
.linkcard .sub { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 4px; font-weight: 500; }

.linkcard .go { color: var(--color-accent); flex: none; }

.linkcard .go svg { width: 18px; height: 18px; }

.linkcard--static { cursor: default; }

.linkcard--static:hover { border-color: var(--color-line-strong); box-shadow: none; }

.guide-body h2 { margin-top: 44px; }

.guide-body > h2:first-child { margin-top: 0; }

.guide-body p { margin-bottom: 16px; }

.guide-list { list-style: none; margin: 6px 0 28px; padding: 0; display: grid; gap: 11px; }

.guide-list li { display: flex; gap: 11px; align-items: flex-start; }

/* De-inlined from guide.html: the guide article reading width + the FAQ column
   width (guides render two-column via .page-grid, like the service pages). */
.guide-body { max-width: 760px; }

.container.guide-faq { max-width: 820px; }

.ctaband { background: var(--color-slate); color: var(--color-on-dark); position: relative; overflow: hidden; }

.ctaband::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 14px; background-image: repeating-linear-gradient(90deg, var(--color-on-dark-line) 0 1px, transparent 1px 28px); opacity: .5; pointer-events: none; }

.ctaband__inner { padding-block: clamp(44px, 6vw, 80px); display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 4vw, 56px); align-items: center; position: relative; z-index: 1; }

@media (max-width: 860px) { .ctaband__inner { grid-template-columns: 1fr; } }

.ctaband h2 { color: #fff; margin-top: 14px; }

.ctaband p { color: var(--color-on-dark-muted); margin-top: 14px; font-size: var(--fs-lead); max-width: 50ch; }

.ctaband__actions { display: grid; gap: 12px; }

.ctaband__promise { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-on-dark); justify-content: center; }

.drawer__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; font-size: 1.05rem; color: var(--color-ink); }
.drawer__brand { display: inline-flex; align-items: center; }
.drawer__brand .brand__logo { height: 38px; width: auto; }

.pricetable { overflow-x: auto; }

.pricetable table { min-width: 540px; }

/* .phero__inner position/z-index are already set on its padding-block rule above. */

.phero::after { content: ""; position: absolute; right: -6%; top: -12%; width: 42%; height: 130%; border-left: 1px solid var(--color-on-dark-line); transform: skewX(-12deg); opacity: .4; pointer-events: none; }

.pricetable tbody tr:nth-child(even) td { background: var(--color-paper); }

.pricetable tbody tr:hover td { background: color-mix(in srgb, var(--color-accent) 5%, var(--color-paper-card)); }

.linkcard .go svg { transition: transform .15s var(--ease); }

.linkcard:hover { box-shadow: var(--shadow); }

.linkcard:hover .go svg { transform: translateX(3px); }

.spec__row { transition: background .15s var(--ease); }

.spec__row:hover { background: color-mix(in srgb, var(--color-accent) 4%, var(--color-paper-card)); }

.nav__group { position: relative; display: inline-flex; }

.nav__group > .nav__toggle {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background: none; border: 0; box-shadow: none; border-radius: 0;
  font: inherit; font-weight: 600; font-size: .95rem; line-height: inherit;
  color: var(--color-text); padding: 9px; position: relative;
  display: inline-flex; align-items: center; gap: 6px;
}

.nav__group > .nav__toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.nav__group > .nav__toggle::after {
  content: ""; position: absolute; left: 13px; right: 26px; bottom: 4px; height: 2px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform .18s var(--ease);
}

.nav__group:hover > .nav__toggle::after,
.nav__group > .nav__toggle[aria-expanded="true"]::after { transform: scaleX(1); }

.nav__toggle svg { width: 13px; height: 13px; flex: none; transition: transform .18s var(--ease); }

.nav__group:hover .nav__toggle svg,
.nav__group .nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.drawer__acc { border-bottom: 1px solid var(--color-line); }

.drawer__acc-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; background: none; border: 0; padding: 14px 4px; cursor: pointer;
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em;
  font-size: 1rem; color: var(--color-ink); text-align: left;
}

.drawer__acc-toggle svg { width: 18px; height: 18px; flex: none; transition: transform .18s var(--ease); color: var(--color-accent); }

.drawer__acc-panel { padding: 2px 0 12px 12px; }
/* Closed state needs specificity > `.drawer nav {display:flex}` (0,1,1), which
   also matches this <nav> panel and would otherwise keep it permanently open. */
.drawer__acc:not(.open) .drawer__acc-panel { display: none; }

/* Reveal rule was missing (same class-mismatch class of bug as the desktop menu):
   chrome.js toggles `.open` on .drawer__acc, so the panel + chevron key off that. */
.drawer__acc.open .drawer__acc-panel { display: flex; flex-direction: column; }
.drawer__acc.open .drawer__acc-toggle svg { transform: rotate(180deg); }

.drawer__acc-panel a {
  text-decoration: none; color: var(--color-ink-soft); font-weight: 600;
  font-family: var(--font-body); padding: 9px 4px; border-bottom: 0;
  font-size: .95rem;
}

.drawer__acc-panel a:hover { color: var(--color-accent); }

.ilinks {
  border-block: 1px solid var(--color-line-strong);
  background: var(--color-paper-card);
  padding-block: clamp(36px, 5vw, 64px);
}

.ilinks__head {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--color-ink);
  max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
  margin-bottom: 22px;
}

.ilinks__grid {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}

@media (max-width: 900px) { .ilinks__grid { grid-template-columns: 1fr 1fr; } }

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

/* Inside #area the browse strip sits in a half-width column, so de-band it (no
   full-width border/background/gutter) and drop it to 2-up. Scoped to #area so the
   full-width .ilinks band on service/location pages is unaffected. */
#area .ilinks { border: 0; background: transparent; padding-block: 0; margin-top: clamp(24px,3vw,32px); }
#area .ilinks__head { padding-inline: 0; margin-bottom: 14px; font-size: 1.15rem; }
#area .ilinks__grid { padding-inline: 0; grid-template-columns: repeat(2,1fr); gap: 12px; }
/* 1-up on phones. Needs #area specificity + later source order to beat the rule
   above; the plain `.ilinks__grid` media rule can't (ID out-ranks it). */
@media (max-width: 560px) { #area .ilinks__grid { grid-template-columns: 1fr; } }

/* Card: mono kicker as an overline above the bold name (grid), with the chevron a
   filling-red circular affordance on the right. Accent left-border + hover lift
   preserved. (Applies to all LSL .ilink cards for consistency.) */
.ilink {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
  align-items: center; column-gap: 12px; row-gap: 2px; text-decoration: none;
  background: var(--color-paper); border: 1px solid var(--color-line-strong);
  border-left: 3px solid var(--color-accent); border-radius: var(--radius-sm);
  padding: 14px 16px; transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}

.ilink:hover { border-color: var(--color-accent); transform: translateY(-1px); box-shadow: var(--shadow); }

.ilink__k {
  grid-column: 1; grid-row: 1;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 600; color: var(--color-accent);
  white-space: nowrap;
}

.ilink__l {
  grid-column: 1; grid-row: 2;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em;
  font-size: 1rem; color: var(--color-ink); line-height: 1.25;
}

.ilink__go {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; flex: none;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent);
  transition: background .15s var(--ease), color .15s var(--ease);
}

.ilink__go svg { width: 16px; height: 16px; transform: rotate(-90deg); }

.ilink:hover .ilink__go { background: var(--color-accent); color: #fff; }

.index-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px;
}

@media (max-width: 900px) { .index-grid { grid-template-columns: 1fr 1fr; } }

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

.index-card {
  display: block; text-decoration: none; background: var(--color-paper-card);
  border: 1px solid var(--color-line-strong); border-top: 3px solid var(--color-accent);
  border-radius: var(--radius); padding: 24px; transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}

.index-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.index-card b {
  display: block; font-family: var(--font-display); font-weight: 800;
  letter-spacing: -0.02em; font-size: 1.2rem; color: var(--color-ink);
}
/* .sub must be block so the meta line sits on its own row; without this the
   "View service ->" .go link runs inline right onto the meta (e.g. "MOView area"). */
.index-card .sub { display: block; color: var(--color-text-muted); font-size: var(--fs-sm); margin-top: 8px; }

.index-card .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--color-accent); }

.ph[style*="url("]::before,
.ph[style*="url("]::after { display: none !important; }

.ph[style*="url("] .ph__tag { display: none !important; }

.ph[style*="url("] { background-color: #0D141C; }

.brand__logo { height: 54px; width: auto; display: block; object-fit: contain; }

/* .brand__logo--foot (height:46px) is set on the fuller footer-logo rule below. */

.brand__logo--chip { background: #fff; padding: 9px 13px; border-radius: 8px; box-sizing: content-box; }

.header__top { background: var(--color-ink); color: var(--color-on-dark); }

.header__top-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 50px; flex-wrap: wrap; }

.header__social { display: flex; align-items: center; gap: 12px; }

.header__social a { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--color-ink); display: grid; place-items: center; transition: transform .15s ease, opacity .15s ease; }

.header__social a:hover { transform: translateY(-1px); opacity: .9; }

.header__social svg { width: 20px; height: 20px; }

.header__toplic { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.22); border-radius: 4px; padding: 9px 16px; white-space: nowrap; }

.header__toplic svg { width: 17px; height: 17px; color: var(--color-success); flex: none; }

.header__toplic b { color: #fff; font-weight: 700; }

.header__topcall { display: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--color-ink); place-items: center; }

.header__topcall svg { width: 20px; height: 20px; }

@media (max-width: 560px) { .header--topbar .brand__logo { height: 44px; } }

.gphoto { flex: 0 0 clamp(280px, 42vw, 440px); scroll-snap-align: start; }

.gphoto .ph { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-lg);
  border: 1px solid var(--color-line-strong); box-shadow: 0 18px 44px -22px rgba(18,26,35,.5);
  filter: saturate(1.04) contrast(1.02); }

.gphoto__meta { display: flex; align-items: center; gap: 7px; margin-top: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted); font-weight: 600; }

.gphoto__meta svg { width: 13px; height: 13px; color: var(--color-accent); flex: none; }

/* border-bottom:0 removes the double hairline where this band meets the trust bar */
.partners { background: var(--color-paper-card); border-bottom: 0; }

.partners__inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding-block: 20px; }

.partners__lead { position: relative; padding-right: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 600; flex: none; }
.partners__lead::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 24px; background: var(--color-line); }

/* distribute the partner list full-width to kill the left-loaded dead space */
.partners__list { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-evenly; gap: 0; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }

.partners__list li { position: relative; padding-inline: 22px; display: flex; flex-direction: column; line-height: 1.12; }
.partners__list li:first-child { padding-left: 28px; }
.partners__list li + li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 24px; background: var(--color-line); }

.partners__list b { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; font-size: 1.08rem; color: var(--color-ink); }

.partners__list span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); font-weight: 600; margin-top: 2px; }

/* mobile: center + wrap the strip, drop the vertical dividers (supersedes the old 700px rule) */
@media (max-width: 760px) { .partners__inner { justify-content: center; gap: 14px 22px; } .partners__list { flex: 0 1 auto; justify-content: center; row-gap: 12px; } .partners__list li + li::before, .partners__lead::after { display: none; } }

.brand__logo--foot { height: 46px; margin-bottom: 14px; opacity: .96; }

@media (max-width: 560px) { .brand__logo { height: 38px; } }

.areamap { position: relative; border: 1px solid var(--color-line-strong); border-radius: var(--radius); overflow: hidden; }

.areamap .ph { height: 320px; }

.areamap__frame { width: 100%; height: 340px; border: 0; display: block; }

.hoods { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }

.hood { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--color-line-strong); background: var(--color-paper-card); font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--color-ink); text-decoration: none; }

.stormnote { border: 1px solid var(--color-line-strong); border-left: 4px solid var(--color-urgent); border-radius: var(--radius); background: var(--color-paper-card); padding: 22px 24px; display: grid; gap: 8px; }

.stormnote .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--color-urgent); display: inline-flex; align-items: center; gap: 8px; }

.stormnote .k svg { width: 15px; height: 15px; }

.stormnote p { color: var(--color-text-muted); font-size: var(--fs-sm); max-width: 66ch; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }

.filter { padding: 10px 16px; border-radius: 2px; border: 0; box-shadow: inset 0 0 0 1px var(--color-line-strong); background: var(--color-paper-card); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--color-ink); min-height: 40px; }

.filter[aria-pressed="true"] { background: var(--color-ink); color: #fff; box-shadow: none; }

.rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

@media (max-width: 1000px) { .rgrid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 680px) { .rgrid { grid-template-columns: 1fr; } }

.gcard { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--color-paper-card); border: 1px solid var(--color-line-strong); border-radius: var(--radius); padding: 18px 22px; margin-top: 28px; text-decoration: none; }

.gcard b { font-family: var(--font-display); font-weight: 800; }

.gcard .go { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); font-weight: 600; white-space: nowrap; }

/* Reviews FAQ: questions in one column, a completed-roof photo in the other.
   The photo is decorative on desktop only — hidden on mobile so the accordion
   keeps the full width. */
.faq-split { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 48px); margin-top: clamp(20px, 3vw, 34px); }
.faq-split__main .faq { margin-top: clamp(18px, 2.5vw, 28px); }
.faq-split__media { display: none; }
@media (min-width: 880px) {
  .faq-split { grid-template-columns: 1.5fr 1fr; align-items: start; }
  .faq-split__media { display: block; }
}
.faq-split__media img { width: 100%; height: clamp(260px, 26vw, 340px); object-fit: cover; border-radius: var(--radius); border: 1px solid var(--color-line-strong); display: block; }

/* engine extras — container/mixed-selector rules the auto-extractor skipped */
.iq {
  background: var(--color-paper-card); color: var(--color-text); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 24px; max-width: 470px; border: 1px solid var(--color-line-strong);
  border-top: 4px solid var(--color-accent);
}
/* ----------------------------------------------------------------------------
   These .iq / hero rules were previously trapped inside an unclosed-brace
   malformation (the ".iq__sq, .disclosure, .priceanchor .disc {" selector opened
   with no declarations and three blocks ran unclosed to EOF), so NONE of them
   applied. The malformation is now closed and the widget/hero .iq rules below are
   ENABLED. The empty ".iq__sq, .disclosure, .priceanchor .disc {" selector was
   dropped (those elements are already styled by the mono rule near the top of the
   file), and these exact duplicates were dropped because they already apply
   earlier in this file: .iq__sat, .iq__scan, .iq__reticle, .iq__measuring p,
   .iq__measuring p .spin, .iq__result .iq__price, .iq__result .row.
   ---------------------------------------------------------------------------- */
.hero--split .hero__media .iq { width: 100%; max-width: none; padding: clamp(24px, 3vw, 34px); }
.iq__result .iq__sq { font-size: var(--fs-mono); color: var(--color-text-muted); letter-spacing: .06em; }
/* On phones, stack the address widget: full-width input with the "Get estimate"
   button below it (instead of the joined inline input+button row). */
@media (max-width: 600px) {
  .iq__row { flex-direction: column; gap: 10px; }
  .iq input { border-right: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); }
  .iq__go { width: 100%; border-radius: var(--radius-sm); }
}

/* KEPT INERT ON PURPOSE. The rules below were also trapped in the malformation
   above and do NOT apply today. They are header/footer/nav rules, not widget
   rules, and enabling them would change header/footer/nav rendering (e.g.
   .header__actions gap 18px instead of the current clamp; extra display:none
   breakpoints; a .footer__nap .tel-lg color; and .nav__menu .nav__all, which
   targets a class the markup never emits — the menu uses .nav__menu__all). This
   task changes only the .iq widget, so they stay commented. Reinstating any of
   them is a separate, deliberate decision.
.nav__menu .nav__all { border-top: 1px solid var(--color-line); margin-top: 6px; color: var(--color-accent); font-weight: 700; }
.header__actions { display: flex; align-items: center; gap: 18px; flex: none; }
@media (max-width: 560px) { .header .tel, .header__actions .btn { display: none; } }
.footer__nap .tel-lg { color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
@media (max-width: 640px) { .header__actions .btn { display: none; } }
@media (max-width: 980px) { .header__actions .btn--header { display: none; } }
.header--topbar .header__actions .tel { display: inline-flex; }
.header--topbar .header__actions .btn--header { display: inline-flex; }
.header--topbar .header__actions .btn--header { display: none; }
.header--topbar .header__actions .tel { display: none; }
*/

/* ============================================================================
   De-inlined page styles: about.html + reviews.html. Moved out of inline
   style= attributes; every value is reproduced exactly so rendering is
   unchanged. (Shared templates, so these mirror the same block in theme.css.)
   ============================================================================ */
/* --- About --- */
[data-page="about"] .about-owner { height: 340px; border-radius: var(--radius); border: 1px solid var(--color-line-strong); }
[data-page="about"] .page-grid > article > .prose { margin-top: 28px; }
[data-page="about"] .page-grid > article > h2 { margin-top: 56px; }
[data-page="about"] .page-grid > article > h2#standards { margin-top: 48px; }
[data-page="about"] .page-grid > article > .checks { margin-top: 20px; grid-template-columns: 1fr 1fr; max-width: 720px; }
[data-page="about"] .page-grid > article > .linkgrid { margin-top: 22px; }
[data-page="about"] .page-grid > article > .spec { margin-top: 22px; }
[data-page="contact"] .page-grid > article > .spec { margin-top: 28px; }
[data-page="about"] .about-crew .linkcard { align-items: flex-start; gap: 16px; }
[data-page="about"] .about-crew .linkcard img { width: 88px; height: 88px; flex: 0 0 88px; border-radius: 50%; object-fit: cover; object-position: center top; border: 1px solid var(--color-line-strong); }
[data-page="about"] .about-crew-bio { display: block; margin-top: 8px; line-height: 1.55; }
[data-page="about"] .about-reviews-link { color: #6FAAF0; }
/* --- Reviews --- */
[data-page="reviews"] .reviews-body--empty { padding-bottom: clamp(8px, 1.5vw, 20px); }
[data-page="reviews"] .gcard__info { display: flex; align-items: center; gap: 12px; }
[data-page="reviews"] .reviews-empty { max-width: 640px; margin-inline: auto; text-align: center; padding-block: clamp(4px, 2vw, 28px); }
[data-page="reviews"] .reviews-gmark { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--color-line-strong); background: var(--color-paper-card); box-shadow: var(--shadow-sm); font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; color: var(--color-accent); }
[data-page="reviews"] .reviews-empty h2 { margin-top: 22px; }
[data-page="reviews"] .reviews-empty p { color: var(--color-text-muted); font-size: var(--fs-lead); margin: 16px auto 30px; max-width: 52ch; }