/* ==========================================================================
   Dark Sky Construction — shared design system
   Loaded by every page. Edit here, not in the page files.

   Direction: a humanist sans for the company's voice, a warm serif for the
   customers'. Storm-navy grounds, ember orange as the only sharp accent.
   ========================================================================== */

/* Variable, latin subset, optical-size axis pinned at 12 and the weight axis
   clipped to 400-800 — the only weights this site uses. That is what keeps it
   to 28KB. Asking for a weight outside that range clamps rather than
   synthesising (see font-synthesis-weight on body), so if you ever need a 300
   or a 900, rebuild the subset instead of adding a rule for it. */
@font-face{
  font-family:'Nunito Sans';
  src:url('../fonts/nunito-sans.woff2') format('woff2-variations');
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Newsreader';
  src:url('../fonts/newsreader.woff2') format('woff2-variations');
  font-weight:400 500; font-style:normal; font-display:swap;
}
/* Metric-matched fallback for the font-display:swap window. Arial (and the
   Liberation/Nimbus clones that stand in for it on Linux) scaled so its
   x-height and line box match Nunito Sans, so the page does not reflow when
   the real font arrives. Numbers are measured, not guessed: Nunito Sans sits
   at x-height .486em against Arial's .5283em, hence 92%; the overrides are the
   Nunito Sans typo metrics divided by that same 92%. Recompute if the subset
   is ever rebuilt. */
@font-face{
  font-family:'Nunito Sans Fallback';
  src:local('Arial'),local('Helvetica'),local('Liberation Sans'),local('Nimbus Sans');
  size-adjust:92.0%;
  ascent-override:109.9%; descent-override:38.4%; line-gap-override:0%;
}

:root{
  /* brand — measured off the logo artwork, see assets/logo/ */
  --ember:#FF5500;
  --solar:#FF8B00;
  --gold:#FFE500;
  --teal:#00A79C;
  --deep:#000E93;
  /* ember is only 2.9:1 on light grounds; this is the text-safe darkening */
  --ember-ink:#C43C00;
  --ember-rgb:255,85,0;

  /* dark grounds */
  --night:#070C16;
  --storm:#0B1322;
  --storm-2:#111F38;
  /* Opaque equivalent of the .step card — storm with a 4% white wash and grain
     over it. Dark cards on a LIGHT section need a solid colour, and full storm
     reads as a hole punched in the page. Match .step and they read as one set. */
  --slate:#171F2E;
  --hairline:rgba(255,255,255,.10);
  --hairline-2:rgba(255,255,255,.06);

  /* light grounds */
  --paper:#F5F7FA;
  --card:#FFFFFF;
  --warm:#FFF4EA;
  --ink:#0F1726;
  --muted:#59637A;
  --line:#E3E8F1;
  /* A deliberately stronger edge for cards that sit on a white ground, where
     --line is too close to the background to read as an edge at all. */
  --line-strong:#CFD8E8;

  --ok:#2F8F5B;

  --display:'Nunito Sans','Nunito Sans Fallback',system-ui,sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;

  --wrap:1200px;
  /* Small radii on purpose. The partner site runs 12-24px plus full pills; this
     one stays rectangular so the two read as related, not identical. */
  --r:8px;       /* cards */
  --r-sm:5px;    /* inputs and small chips */
  --r-lg:10px;   /* large panels — forms, region cards */
  --r-pill:6px;  /* buttons and badges: softened corners, never a capsule */

  /* One resting shadow for every card on the site. Two layers: a tight one for
     the crease at the edge, a wide soft one for lift. Hover states override it.
     Keep the negative spread smaller than half the blur, or the card paints over
     its own shadow at the sides and only a sliver shows below. */
  --shadow-card:0 1px 3px rgba(15,23,38,.07),0 12px 28px -10px rgba(15,23,38,.24);

  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:120px;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  /* 18px, not the 17px Archivo ran at. Nunito Sans has a 7.6% smaller x-height
     (.486em against .526em), so matched px sizes read visibly smaller. This is
     the compensation for running text; UI chrome sized in rem is left alone,
     because its caps are the part you read and those got slightly taller. */
  font-family:var(--display);font-size:18px;line-height:1.62;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img,svg,canvas{display:block;max-width:100%;}
p{margin:0;}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.06;text-wrap:balance;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;}
:focus-visible{outline:3px solid var(--solar);outline-offset:3px;border-radius:4px;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.section{padding:clamp(60px,8vw,110px) 0;}
.section-dark{background:var(--storm);color:#E8EEF9;position:relative;}
/* Same two-colour scheme as the CTA, mirrored: light on the left, dark on the
   right, against the CTA's 195deg. Consecutive dark sections then lean opposite
   ways instead of repeating one flat wash. Modifier rather than a change to
   .section-dark, which also carries the stats strip and the region #area band.
   Must stay after .section-dark — same specificity, so source order decides. */
.section-grad{background:linear-gradient(165deg,var(--storm-2),var(--night));}
.section-warm{background:var(--paper);}
.section-white{background:var(--card);}

/* atmosphere — fine grain so the big dark fields aren't flat digital black */
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- type -------------------------------------------------------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ember-ink);margin:0;
}
.section-dark .eyebrow,.hero .eyebrow{color:var(--solar);}
/* small tag above a heading — squared off, not the partner site's capsule */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px 5px 10px;border-radius:var(--r-pill);
  background:rgba(var(--ember-rgb),.13);border:1px solid rgba(var(--ember-rgb),.30);
  color:var(--solar);font-size:.7rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}
.badge svg{width:13px;height:13px;flex:none;}
.badge-light{background:var(--warm);border-color:#F7D4B8;color:var(--ember-ink);}

h1,.h1{font-size:clamp(2.5rem,5.6vw,4.4rem);}
h2,.h2{font-size:clamp(1.95rem,3.6vw,2.9rem);}
/* tracks the body bump above — at 1.16rem it was only 3% larger than the new
   18px body, which flattened the card headings into their own paragraphs */
h3,.h3{font-size:1.23rem;}
.accent{color:var(--solar);}
.section-white .accent,.section-warm .accent{color:var(--ember);}
.lead{font-size:clamp(1.1rem,1.5vw,1.28rem);line-height:1.6;color:var(--muted);max-width:62ch;}
.section-dark .lead{color:#A9B7CE;}

.shead{max-width:660px;margin-bottom:clamp(34px,4vw,52px);}
.shead .eyebrow,.shead .badge{margin-bottom:16px;}
.shead .lead{margin-top:15px;}
.shead-center{margin-left:auto;margin-right:auto;text-align:center;}
.shead-center .lead{margin-left:auto;margin-right:auto;}

/* --- buttons ----------------------------------------------------------- */
/* Kept deliberately slim. Ember on a near-black ground already carries all the
   emphasis these need; sizing them up as well reads as shouting. Tight padding
   and a restrained glow — do not inflate. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 16px;border-radius:var(--r-pill);border:1.5px solid transparent;
  font-weight:700;font-size:.9rem;letter-spacing:-.005em;white-space:nowrap;cursor:pointer;
  transition:transform .12s var(--ease),background .18s var(--ease),
             border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.btn svg{width:15px;height:15px;flex:none;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-ember{background:var(--ember);color:#fff;box-shadow:0 4px 12px -6px rgba(var(--ember-rgb),.55);}
.btn-ember:hover{background:#FF6A1F;box-shadow:0 7px 16px -8px rgba(var(--ember-rgb),.7);}
.btn-ghost{border-color:rgba(255,255,255,.28);color:#fff;}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07);}
.btn-ink{background:var(--ink);color:#fff;}
.btn-ink:hover{background:#1B2740;}
.btn-outline{border-color:var(--line);background:var(--card);color:var(--ink);}
.btn-outline:hover{border-color:#C6D0DF;}
.btn-lg{padding:10px 20px;font-size:.95rem;}
.btn-block{width:100%;}

/* --- region switcher (top utility bar) --------------------------------- */
/* The strip and the header travel as one unit. Sticky lives here, on the wrapper,
   so the strip can be tucked out of sight with a transform while the header stays
   pinned to the top of the viewport. --util-h is measured in site.js, because the
   strip wraps to two rows on narrow screens and a hardcoded height would clip it. */
/* Tucking animates the sticky offset, NOT a transform. A transform here would
   make .mast a new backdrop root, and .site-header's backdrop-filter would then
   sample an empty backdrop instead of the page — which falls through to the
   body's near-white --paper and flashes light under the nav on every un-tuck.
   Animating `top` keeps the header's backdrop pointed at real page content. */
.mast{position:sticky;top:0;z-index:60;transition:top .28s var(--ease);}
.mast.tucked{top:calc(-1 * var(--util-h,40px));}
/* At the very top the header goes solid night — darker than the strip above it.
   Everywhere else it keeps the translucent blur, which is what lets content read
   through it. The strip itself never changes; it is opaque --slate throughout. */
.mast.at-top .site-header{background:var(--night);}

/* Always --slate, the same value as the dark cards, and always fully opaque —
   nothing scrolls under this strip, so it has no reason to be see-through. */
.util{background:var(--slate);color:#9DACC4;font-size:.82rem;border-bottom:1px solid var(--hairline-2);}
.util-in{
  max-width:var(--wrap);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.regions{display:flex;align-items:center;gap:2px;flex-wrap:wrap;}
.regions a{
  position:relative;padding:11px 15px;font-weight:600;color:#93A3BC;
  transition:color .16s var(--ease);
}
.regions a:hover{color:#fff;}
.regions a[aria-current="page"]{color:#fff;}
.regions a[aria-current="page"]::after{
  content:"";position:absolute;left:15px;right:15px;bottom:6px;height:2px;
  background:var(--ember);border-radius:2px;
}
.regions .ext::after{content:"↗";font-size:.78em;margin-left:5px;opacity:.75;}
.util-right{display:flex;align-items:center;gap:14px;padding:9px 0;}
.util-right b{color:#fff;font-weight:700;}
.util-tel{color:var(--solar);font-weight:700;white-space:nowrap;}
.util-tel:hover{color:#FFA23A;}

/* --- header ------------------------------------------------------------ */
.site-header{
  /* Darker than the --slate strip above it and ruled on both edges, so the nav
     reads as its own band rather than the lower half of one dark mast.
     position:relative, not sticky — .mast does the sticking now. Still positioned,
     because the open mobile nav hangs off it with position:absolute. */
  position:relative;background:rgba(7,12,22,.92);
  backdrop-filter:saturate(1.4) blur(14px);
  /* border on both edges so the nav reads as its own band rather than the bottom
     of the strip above it */
  border-block:1px solid var(--hairline);
  transition:background-color .28s var(--ease);
}
.header-in{display:flex;align-items:center;gap:22px;padding-top:13px;padding-bottom:13px;}
.brand{display:flex;align-items:center;flex:none;}
/* the lockup carries its own wordmark; padding around it is the clearspace rule */
.brand-logo{width:192px;height:auto;}
.nav{display:flex;align-items:center;gap:5px;margin-left:auto;}
.nav a{
  padding:9px 13px;border-radius:var(--r-sm);color:#C3CEE0;font-weight:600;font-size:.94rem;
  transition:color .16s var(--ease),background .16s var(--ease);
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.07);}
.header-cta{flex:none;}
.header-in .btn{padding:7px 14px;font-size:.85rem;}
.menu-btn{
  display:none;margin-left:auto;background:none;border:1.5px solid rgba(255,255,255,.24);
  color:#fff;width:46px;height:42px;border-radius:var(--r-sm);cursor:pointer;
}
.menu-btn span{display:block;width:18px;height:2px;background:currentColor;margin:3px auto;border-radius:2px;
  transition:transform .2s var(--ease),opacity .2s var(--ease);}
.site-header.open .menu-btn span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.site-header.open .menu-btn span:nth-child(2){opacity:0;}
.site-header.open .menu-btn span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

/* --- hero -------------------------------------------------------------- */
.hero{position:relative;background:var(--storm);color:#EDF2FB;overflow:hidden;}
.hero .sky{position:absolute;inset:0;width:100%;height:100%;}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 85% -15%, rgba(0,167,156,.16), transparent 58%),
    radial-gradient(95% 65% at 12% 118%, rgba(var(--ember-rgb),.30), transparent 62%),
    linear-gradient(180deg, rgba(11,19,34,.25), rgba(11,19,34,.72));
}
/* padding-block, not the shorthand — this element also carries .wrap, and a
   `padding: x 0 y` here would silently drop .wrap's 24px gutter */
/* Both clamps used to pin to their max on anything wider than ~1200px, so every
   desktop got the full 224px and the stats strip fell off the bottom of a laptop. */
.hero-in{position:relative;z-index:2;padding-block:clamp(56px,7.5vw,96px) clamp(48px,6vw,80px);}
.hero h1{color:#fff;margin:20px 0 0;}
.hero .lead{margin-top:20px;color:#BCC9DE;}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px;}
.hero-trust{display:flex;gap:10px 24px;flex-wrap:wrap;margin-top:28px;color:#93A3BC;font-size:.88rem;font-weight:600;}
.hero-trust li{display:flex;align-items:center;gap:8px;}
.hero-trust svg{width:15px;height:15px;color:var(--solar);flex:none;}

/* landing hero puts the estimate form alongside; interior heroes centre */
/* start, not center: the copy column is shorter than the form, and centring it
   dropped the badge ~66px below the form's top edge so nothing in the hero shared
   a horizontal line. Aligned tops give the two columns a common edge. */
.hero-split{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,60px);align-items:start;}
/* the split column is ~700px, so the full-width h1 scale overshoots and breaks badly */
.hero-split h1{font-size:clamp(2.35rem,4.2vw,3.45rem);}
.hero-center{max-width:820px;margin:0 auto;text-align:center;}
.hero-center .lead{margin-left:auto;margin-right:auto;}
.hero-center .hero-cta,.hero-center .hero-trust{justify-content:center;}
.crumb{position:relative;z-index:2;padding-top:16px;font-size:.85rem;color:#8595AF;}
.crumb a:hover{color:#fff;}
.crumb span{opacity:.5;margin:0 7px;}

/* --- cards ------------------------------------------------------------- */
.grid{display:grid;gap:18px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}

/* Light cards get --line-strong, the same edge the review cards use, so every
   card on a light ground reads as one family. The dark modifiers below replace
   this border with --hairline. */
.card{
  background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r);padding:26px 24px;
  box-shadow:var(--shadow-card);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.card-link:hover{transform:translateY(-3px);box-shadow:0 20px 44px -26px rgba(15,23,38,.5);border-color:#CFD8E6;}
.card h3{margin-bottom:9px;}
.card p{color:var(--muted);font-size:.96rem;}
/* Half-width cards are ~570px, which runs the body copy out to ~90 characters.
   Cap the measure so a 2x2 grid still reads like the 3-up one. */
.grid-2 .card p{max-width:60ch;}
.card .ic{
  width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;margin-bottom:17px;
  background:var(--warm);color:var(--ember-ink);
}
.card .ic svg{width:23px;height:23px;}

/* .card-dark is a translucent white wash — it only works over an already-dark
   section, where it reads as a lifted panel. Do not use it on a light ground. */
.card-dark{background:rgba(255,255,255,.045);border-color:var(--hairline);color:#E8EEF9;}
.card-dark h3{color:#fff;}
.card-dark p{color:#A9B7CE;}
.card-dark .ic{background:rgba(var(--ember-rgb),.14);color:var(--solar);}

/* .card-storm is the opposite case: a solid dark card dropped onto a light
   section. Same ink and icon treatment as .card-dark so the two read as one
   family, but opaque, so it holds up over paper. */
.card-storm{background:var(--slate);border-color:var(--hairline);color:#E8EEF9;}
.card-storm h3{color:#fff;}
.card-storm p{color:#A9B7CE;}
.card-storm .ic{background:rgba(var(--ember-rgb),.14);color:var(--solar);}
.card-storm.card-link:hover{box-shadow:0 20px 44px -26px rgba(15,23,38,.7);border-color:rgba(255,255,255,.2);}

/* --- region chooser: the landing page's main routing decision ---------- */
.region-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
/* MN and CO sit on --slate, matching the .step cards. The partner keeps the
   darker storm gradient untouched, so it now reads as a different company on
   colour alone — the badge no longer has to do the work by itself. */
.region{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:var(--slate);border:1px solid var(--hairline);border-radius:var(--r-lg);
  color:#E8EEF9;padding:30px 28px 26px;min-height:290px;box-shadow:var(--shadow-card);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.region:hover{transform:translateY(-4px);box-shadow:0 26px 56px -30px rgba(15,23,38,.55);border-color:rgba(255,255,255,.24);}
/* the state abbreviation, ghosted oversize — a mark that can't be geographically wrong */
.region .abbr{
  position:absolute;top:-16px;right:14px;font-size:7.4rem;font-weight:800;letter-spacing:-.06em;
  color:#fff;opacity:.07;pointer-events:none;user-select:none;line-height:1;
}
.region h3{font-size:1.5rem;margin-bottom:6px;color:#fff;}
.region .where{color:#A9B7CE;font-size:.92rem;}
.region .cities{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:7px;}
.region .cities li{
  background:rgba(255,255,255,.06);border:1px solid var(--hairline);border-radius:var(--r-pill);
  padding:5px 11px;font-size:.83rem;font-weight:600;color:#CBD6E8;
}
.region .go{margin-top:auto;padding-top:22px;display:flex;align-items:center;gap:9px;
  color:var(--solar);font-weight:700;font-size:.95rem;}
.region .go svg{width:16px;height:16px;transition:transform .2s var(--ease);}
.region:hover .go svg{transform:translateX(4px);}
.region-partner{background:linear-gradient(170deg,var(--storm-2),var(--storm));border-color:transparent;}
.region-tag{
  display:inline-block;margin-bottom:14px;padding:5px 11px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.09);border:1px solid var(--hairline);
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9DACC4;
}

/* --- numbered process -------------------------------------------------- */
/* Five steps since the claim walkthrough was split for compliance. A 6-column
   track lets 3-over-2 fill both rows edge to edge; five equal columns leaves the
   copy too narrow to read. */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.steps>li{grid-column:span 2;}
.steps>li:nth-child(4),.steps>li:nth-child(5){grid-column:span 3;}
.step{position:relative;padding:28px 24px 26px;border-radius:var(--r);
  background:rgba(255,255,255,.04);border:1px solid var(--hairline);}
.step .n{
  font-size:.78rem;font-weight:800;letter-spacing:.14em;color:var(--solar);
  font-variant-numeric:tabular-nums;margin-bottom:15px;
}
.step h3{color:#fff;margin-bottom:9px;}
.step p{color:#A9B7CE;font-size:.94rem;line-height:1.55;}

/* --- stats ------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline);
  border-block:1px solid var(--hairline);}
.stat{background:var(--storm);padding:26px 24px;}
.stat b{display:block;font-size:clamp(1.7rem,3vw,2.25rem);font-weight:800;letter-spacing:-.03em;
  color:#fff;font-variant-numeric:tabular-nums;}
.stat b i{font-style:normal;color:var(--solar);}
.stat span{color:#93A3BC;font-size:.85rem;font-weight:600;}

/* --- service area ------------------------------------------------------ */
.area-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.area-col h4{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--solar);
  margin:0 0 14px;font-weight:800;}
.area-col ul{display:flex;flex-wrap:wrap;gap:8px;}
.area-col li{background:rgba(255,255,255,.055);border:1px solid var(--hairline);
  padding:6px 12px;border-radius:var(--r-pill);font-size:.87rem;font-weight:600;color:#CBD6E8;}

/* --- reviews: the customers' voice, set in the serif -------------------- */
.rev-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;
  margin-bottom:clamp(30px,4vw,46px);}
.score{display:flex;align-items:center;gap:15px;}
.score .big{font-size:2.7rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
/* one element, tiled star — keeps 30-odd review blocks from carrying 150 icons */
.stars{
  width:95px;height:17px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='17' viewBox='0 0 24 22'%3E%3Cpath fill='%23FF5500' d='m12 1 3 6.6 7 .8-5.2 4.8 1.4 7L12 16.8 5.8 20.2l1.4-7L2 8.4l7-.8Z'/%3E%3C/svg%3E") repeat-x;
}
.score small{display:block;color:var(--muted);font-size:.88rem;}

.rev-grid{columns:3;column-gap:20px;}
/* White on the white #reviews section, so the card has to earn its edge: a
   border strong enough to actually see, plus the shared card shadow for lift.
   Same treatment as .card — only the section behind them differs. The reviews
   stay light on purpose — the serif reads as a letter, and a letter is on paper. */
.rev{
  break-inside:avoid;margin:0 0 20px;background:var(--card);
  border:1px solid var(--line-strong);border-radius:var(--r);padding:26px 24px;
  box-shadow:var(--shadow-card);
}
.rev blockquote{margin:14px 0 0;font-family:var(--serif);font-size:1.03rem;line-height:1.62;
  color:#26314A;letter-spacing:.001em;}
/* Interior divider stays on the lighter --line: the card edge should always be
   the strongest rule in the card, or the tile stops reading as one object. */
.rev .who{margin-top:18px;padding-top:15px;border-top:1px solid var(--line);
  font-size:.88rem;color:var(--muted);}
.rev .who b{display:block;color:var(--ink);font-weight:700;font-size:.94rem;}
.rev-more{margin-top:26px;display:flex;justify-content:center;}

/* --- faq --------------------------------------------------------------- */
.faq{max-width:820px;margin:0 auto;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-weight:700;font-size:1.04rem;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";position:absolute;right:8px;top:27px;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);}
.faq details p{padding:0 40px 22px 0;color:var(--muted);}

/* --- form -------------------------------------------------------------- */
.form{background:var(--card);border-radius:var(--r-lg);padding:28px;color:var(--ink);
  box-shadow:0 34px 78px -34px rgba(0,0,0,.62);}
.form h3{font-size:1.28rem;margin-bottom:5px;}
.form .fnote{color:var(--muted);font-size:.9rem;margin-bottom:20px;}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:11px;}
.field label{font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#3E4A61;}
.field input,.field select,.field textarea{
  font:inherit;font-size:.98rem;line-height:1.62;padding:11px 13px;border:1.5px solid var(--line);
  border-radius:var(--r-sm);background:#FBFCFE;color:var(--ink);width:100%;
}
/* A native <select> ignores the line-height above and substitutes the browser's own,
   so it renders ~7px shorter than the inputs beside it no matter what padding says.
   appearance:none drops it back to an ordinary box that honours the shared rule.
   That also removes the native chevron, so it is redrawn here as an inline data URI
   — same approach as .grain, so there is still no external request and no build step. */
.field select{
  appearance:none;-webkit-appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2359637A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
/* Inert as things stand: rows="3" in the markup resolves to ~106px, which beats
   this floor. Kept so the box can't collapse if rows is ever lowered. To actually
   shorten the textarea, change rows in the markup — not this value. */
.field textarea{resize:vertical;min-height:64px;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(var(--ember-rgb),.15);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
/* Honeypot. Positioned off-screen rather than display:none — bots increasingly skip
   hidden fields, but they still fill ones that are merely out of view. Nothing here is
   reachable by keyboard (tabindex -1) or announced (aria-hidden on the wrapper). */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
/* Only shown when the send actually fails, and it carries the phone number — a lead
   that can't reach the form must not leave without a way to reach a human. */
.form-err{margin-top:13px;padding:11px 13px;border-radius:var(--r);font-size:.87rem;
  font-weight:600;background:rgba(203,58,42,.09);border:1px solid rgba(203,58,42,.3);color:#9E2B1E;}
.form-err a{color:inherit;text-decoration:underline;}
.btn-block[aria-busy="true"]{opacity:.6;pointer-events:none;}
.form .fine{font-size:.79rem;color:var(--muted);text-align:center;margin-top:13px;}
.thanks{text-align:center;padding:26px 8px;}
.thanks .chk{width:62px;height:62px;border-radius:50%;background:var(--ok);color:#fff;
  display:grid;place-items:center;margin:0 auto 17px;}
.thanks .chk svg{width:30px;height:30px;}
.thanks h3{font-size:1.4rem;margin-bottom:9px;}
.thanks p{color:var(--muted);}

/* --- closing cta ------------------------------------------------------- */
/* 195deg, not 165 — the mirror of it. The region cards sit in the right-hand
   column, and at 165deg the --night end of the gradient landed right under them,
   so a translucent .card-dark had almost nothing to separate itself from. Mirrored,
   the lighter --storm-2 end sits behind the cards instead. */
.cta{background:linear-gradient(195deg,var(--storm-2),var(--night));color:#EDF2FB;
  position:relative;overflow:hidden;}
/* The two region cards run the section's own gradient mirrored — 165deg against
   the section's 195deg, so light sits top-left where the section is dark and dark
   sits bottom-right where the section is light. Opposing diagonals is what
   separates them; a flat wash at this luminance had almost nothing to work with.
   Border is lifted well above --hairline so the card edge stays readable across
   both ends of its own gradient. */
.cta .card-dark{
  background:linear-gradient(165deg,var(--storm-2),var(--night));
  border-color:rgba(255,255,255,.22);
}
.cta-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,60px);align-items:center;
  position:relative;z-index:2;}
/* the lead form was the right column of .cta-in on the region pages. It is out
   until a real handler exists (a form that silently drops a storm-damage lead is
   worse than no form), so the section runs as one centred column rather than
   leaving a dead half-grid. Drop this class when the form comes back. */
.cta-solo{grid-template-columns:minmax(0,760px);justify-content:center;text-align:center;}
.cta-solo ul{display:inline-grid;text-align:left;}
.cta-solo .call-row{justify-content:center;}
.cta h2{color:#fff;}
.cta ul{margin-top:26px;display:grid;gap:13px;}
.cta ul li{display:flex;gap:12px;align-items:flex-start;color:#CBD6E8;font-weight:600;}
.cta ul svg{width:19px;height:19px;color:var(--ok);flex:none;margin-top:2px;}

/* a dialable number plus a quieter secondary link — never a phone number that
   navigates instead of calling */
.call-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.quiet{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.93rem;color:#A9B7CE;}
.quiet svg{width:15px;height:15px;transition:transform .2s var(--ease);}
.quiet:hover{color:#fff;}
.quiet:hover svg{transform:translateX(3px);}

/* --- footer ------------------------------------------------------------ */
.site-footer{background:var(--night);color:#8E9DB6;font-size:.92rem;padding:56px 0 30px;}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;}
.foot-brand .brand-logo{width:216px;margin-bottom:16px;}
.foot-brand p{max-width:36ch;line-height:1.62;}
/* The one email address on the site. Brighter than the surrounding footer text so it
   reads as an action rather than boilerplate, but not ember — the orange belongs to
   the phone buttons, which are still the route we want most people to take. */
.foot-mail{margin-top:14px;}
.foot-mail a{color:#C6D2E4;font-weight:700;}
.foot-mail a:hover{color:#fff;}
.site-footer h4{color:#fff;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;
  margin:0 0 15px;font-weight:800;}
.site-footer ul{display:grid;gap:10px;}
.site-footer a:hover{color:#fff;}
.foot-bottom{margin-top:42px;padding-top:22px;border-top:1px solid var(--hairline-2);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.82rem;}
.foot-note{color:#6B7A94;}

/* --- responsive -------------------------------------------------------- */
@media(max-width:1040px){
  .nav{display:none;}
  .menu-btn{display:block;}
  .site-header.open .nav{
    display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:rgba(9,15,27,.985);border-bottom:1px solid var(--hairline);padding:8px 24px 18px;
  }
  .site-header.open .nav a{padding:14px 4px;border-radius:0;border-bottom:1px solid var(--hairline-2);}
  .header-cta{margin-left:auto;}
  .hero-split{grid-template-columns:1fr;}
  .grid-4,.steps{grid-template-columns:repeat(2,1fr);}
  .steps>li,.steps>li:nth-child(4),.steps>li:nth-child(5){grid-column:auto;}
  .cta-in{grid-template-columns:1fr;}
  .rev-grid{columns:2;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:860px){
  .grid-3,.region-grid,.area-cols{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .region{min-height:0;}
}
@media(max-width:620px){
  body{font-size:16px;}
  .brand-logo{width:158px;}
  .grid-2,.grid-4,.steps{grid-template-columns:1fr;}
  .rev-grid{columns:1;}
  .foot-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .util-in{justify-content:center;}
  .regions{justify-content:center;width:100%;}
  /* the enlarged lockup + a phone button + the menu toggle overflow a phone.
     The same number is already one tap away in the utility bar directly above. */
  .header-cta{display:none;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}

/* --- placeholder content ------------------------------------------------
   Deliberately ugly. Anything wearing this must not reach a live site, so it
   should be impossible to mistake for finished copy at a glance. */
/* box-shadow:none so a placeholder never borrows the lift real cards get —
   .rev gives its cards a shadow, and a polished placeholder is a shipped one. */
.ph{position:relative;border:2px dashed #C9A227;background:#FFFBEB;box-shadow:none;}
.ph::before{
  content:"PLACEHOLDER";position:absolute;top:10px;right:12px;
  font-size:.6rem;font-weight:800;letter-spacing:.14em;color:#8A6D00;
}
.ph blockquote{color:#6B5A16;font-style:italic;}
.ph-note{
  display:flex;gap:12px;align-items:flex-start;margin-top:22px;padding:16px 18px;
  border:2px dashed #C9A227;border-radius:var(--r-sm);background:#FFFBEB;
  color:#6B5A16;font-size:.92rem;font-weight:600;
}