:root {
  --navy-deep: #07203f;
  --navy: #0A2F5C;
  --navy-mid: #0d4b8c;
  --blue: #1878D0;
  --sky: #7FCDF2;
  --pale: #DCF0FB;
  --gold: #E9B96B;
  --white: #ffffff;

  --font-script: 'Kaushan Script', cursive;
  --font-display: 'Archivo', sans-serif;
  --font-body: 'Figtree', system-ui, sans-serif;

  --container-max: 1200px; /* shared content-column width — every section's inner wrapper uses this, so all sections' left/right edges align. Narrower elements (the quote form, the FAQ list) get their own max-width nested inside it for readability, not a different container width. */
  --text-max: 68ch; /* ~60-75 characters per line */

  /* ================= Spacing scale =================
     4px steps. Use ONLY these ten values anywhere a margin, padding or
     gap is set — never an arbitrary number. In practice the page mostly
     runs on six of them: 8 (tight/heading-attach), 12 (small internal
     gaps), 16 (heading-above / list gaps), 24 (card-grid gaps / content
     transitions), 32 (bigger content transitions), and the fluid
     section-level trio below. 4/48/64/96/128 cover the remaining edge
     cases (footer-script attach, button/section fluid range). */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  /* Section-level rhythm — fluid, roughly halves on mobile vs desktop.
     --section-pad-y: major sections (48-64 mobile -> 96-128 desktop).
     --subsection-pad-y: the seam between two adjacent same-background
     sections that read as one continuous block (24-32 mobile -> 64 desktop).
     --container-pad-x: side gutters (16-24 mobile -> 24-48 desktop). */
  --section-pad-y: clamp(var(--space-48), 10vw, var(--space-128));
  --subsection-pad-y: clamp(var(--space-24), 5vw, var(--space-64));
  --container-pad-x: clamp(var(--space-16), 4vw, var(--space-48));

  /* Button heights (component sizing, not spacing rhythm): lg for
     primary CTAs, md for in-form step actions, sm for compact inline
     actions (header call button, callouts). */
  --btn-h-lg: 52px;
  --btn-h-md: 48px;
  --btn-h-sm: 44px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--pale);
}

body {
  font-family: var(--font-body);
  color: var(--navy);
  overflow-x: hidden;
}

a { color: var(--blue); text-decoration: none; }

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

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Type + heading/paragraph rhythm ----------
   Heading rule: the gap ABOVE a heading (separating it from whatever
   precedes it) runs ~2x the gap BELOW it (attaching it to its own
   content) — done here via eyebrow's own bottom-margin (the "above"
   gap) paired with section-title's bottom-margin (the "below" gap).
   Margins are bottom-only throughout this file; gap is used instead
   wherever the parent is already flex/grid. */
.eyebrow {
  margin: 0 0 var(--space-16);
  font: 700 13px var(--font-display);
  letter-spacing: .14em;
  color: var(--blue);
  text-transform: uppercase;
}
.eyebrow-sky { color: var(--sky); }
.eyebrow-muted { color: rgba(10,47,92,.5); }

.section-title {
  margin: 0 0 var(--space-8);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(27px, 1.2vw + 21px, 36px);
  line-height: 1.15; /* heading line-height: 1.1-1.25 */
  letter-spacing: -.02em;
  color: var(--navy);
  text-wrap: balance;
}
.section-title-light { color: var(--white); }

.section-copy {
  margin: 0 0 var(--space-32);
  max-width: var(--text-max);
  font-size: clamp(14px, .3vw + 13px, 16px);
  line-height: 1.55; /* body line-height: 1.5-1.65 */
  color: rgba(10,47,92,.7);
}

.script-accent {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--sky);
}
.script-accent-blue { color: var(--blue); }

.script-line {
  margin: 0 0 var(--space-8);
  font-family: var(--font-script);
  font-size: 26px;
  line-height: 1.1;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-body);
  border: 0;
}

.wave {
  display: block;
  width: 100%;
  position: relative;
}
.wave path { fill: var(--pale); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: var(--space-12) var(--container-pad-x);
  background: rgba(7,32,63,.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(127,205,242,.18);
}

/* Bar itself is full-bleed (background spans the viewport); this wrapper
   keeps the logo/call-button pairing from spreading apart on very wide
   screens, matching every other section's -inner centering pattern. */
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-8);
  max-width: var(--container-max);
  margin: 0 auto;
}

.logo { display: flex; align-items: center; }
.logo-img { height: 40px; width: auto; display: block; }

.header-actions { display: flex; align-items: center; gap: var(--space-8); }

.btn-call {
  gap: var(--space-4);
  padding: 0 var(--space-16);
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy-deep);
  font: 700 12px var(--font-body);
  min-height: var(--btn-h-sm);
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-8);
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-toggle .bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
}
.menu-toggle .bar-accent { width: 13px; background: var(--sky); }

/* Nav now lives inside .site-header-inner (between logo and
   header-actions) so it can sit inline with the logo on wide screens.
   On narrow screens it drops to its own full-width row below them.
   flex-basis: 100% would only size it to 100% of the flex container's
   OWN width (358px on a 390px screen with 16px padding either side) —
   margins shift a flex item's position but don't add back width the
   way they do for a block element, so the negative margin alone left
   a gap on the right instead of reaching the true edge. Setting an
   explicit width (100% plus the padding being cancelled) and
   flex-shrink: 0 (so the browser doesn't shrink it back down to fit
   the container) gives it the right size before the negative margin
   repositions it. */
.mobile-menu {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: calc(100% + var(--container-pad-x) * 2);
  order: 3;
  /* Bottom margin cancels .site-header's own bottom padding the same
     way the side margins cancel its side padding — otherwise that
     12px strip shows the header's translucent, blurred background
     (blended with whatever's scrolled behind it) instead of the
     menu's solid one. */
  margin: 0 calc(-1 * var(--container-pad-x)) calc(-1 * var(--space-12));
  background: var(--navy-deep);
  border-bottom: 1px solid rgba(127,205,242,.18);
}
.mobile-menu a {
  padding: var(--space-16) var(--container-pad-x);
  color: var(--pale);
  font: 600 14px var(--font-body);
  border-top: 1px solid rgba(127,205,242,.1);
}
.mobile-menu a[aria-current="page"] {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(178deg, var(--navy) 0%, var(--navy-mid) 46%, var(--blue) 100%);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .5;
  background: radial-gradient(120% 60% at 82% 8%, rgba(127,205,242,.45), transparent 60%);
}

.hero-particles { position: absolute; inset: 0; }
.mist-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(220,240,251,.8);
  animation: amcRise 8s ease-in infinite;
}
.d1 { left: 18%; bottom: 120px; width: 9px; height: 9px; animation-duration: 7s; }
.d2 { left: 44%; bottom: 90px; width: 6px; height: 6px; animation-duration: 9s; animation-delay: 1.4s; opacity: .75; }
.d3 { left: 68%; bottom: 140px; width: 11px; height: 11px; animation-duration: 8s; animation-delay: 2.6s; opacity: .6; }
.d4 { left: 83%; bottom: 60px; width: 5px; height: 5px; animation-duration: 6.5s; animation-delay: .7s; opacity: .85; }

@keyframes amcRise {
  0% { transform: translate3d(0,30px,0) scale(.7); opacity: 0; }
  25% { opacity: .55; }
  100% { transform: translate3d(14px,-150px,0) scale(1.3); opacity: 0; }
}
@keyframes amcDrift {
  0% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(-18px,10px,0); }
  100% { transform: translate3d(0,0,0); }
}

/* Centering applies on both pages (matches every other section's -inner
   pattern now that the page background is full-bleed); the two-column
   flex layout below is opt-in via .hero-split. */
.hero-inner {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 34px 22px 0;
  box-sizing: border-box;
}

/* Fluid two-column hero: wraps to a single stacked column automatically
   once the copy column and media item can't both fit at their minimum
   width — no fixed breakpoint number needed. Opt-in via .hero-split
   (both pages now use it) because it depends on the hero's text content
   being grouped into a .hero-copy-col wrapper alongside the media item. */
.hero-split .hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-48);
  padding: var(--section-pad-y) var(--container-pad-x) 0;
}
.hero-split .hero-copy-col { flex: 1 1 340px; min-width: 0; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border-radius: 999px;
  border: 1px solid rgba(233,185,107,.55);
  background: rgba(233,185,107,.12);
  font: 700 12px var(--font-display);
  letter-spacing: .12em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 var(--space-32);
}
.badge-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

.hero-title {
  margin: 0 0 var(--space-16);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 3vw + 22px, 60px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--white);
  text-wrap: balance;
}
.hero-title .script-accent { font-size: clamp(44px, 3.4vw + 24px, 68px); margin-right: var(--space-12); }

.hero-copy {
  margin: 0 0 var(--space-24);
  max-width: var(--text-max);
  font-size: clamp(14.5px, .4vw + 13px, 17px);
  line-height: 1.55;
  color: rgba(220,240,251,.86);
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-12); margin: 0 0 var(--space-24); }
.hero-ctas .btn { flex: 1 1 200px; }
/* Home hero only: the standard 52px .btn-primary/.btn-outline height
   reads oversized here — drop to the 44px mobile tap-target size. */
.hero-ctas-compact .btn { min-height: var(--btn-h-sm); }
/* Home hero only: stack the CTAs on small phones instead of wrapping
   two half-width buttons; row layout resumes once there's room.
   In the column, the 200px flex-basis would apply to height — reset it
   so buttons hug their min-height and stretch to full width instead. */
.hero-split .hero-ctas { flex-direction: column; }
.hero-split .hero-ctas .btn { flex: none; width: 100%; }
@media (min-width: 480px) {
  .hero-split .hero-ctas { flex-direction: row; }
  .hero-split .hero-ctas .btn { flex: 1 1 200px; width: auto; }
}

.btn-primary {
  min-height: var(--btn-h-lg);
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy-deep);
  font: 700 15px var(--font-body);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.btn-outline {
  min-height: var(--btn-h-lg);
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.5);
  color: var(--white);
  font: 600 15px var(--font-body);
}

.hero-mascot-row {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin: 0;
  padding: 0 0 var(--space-24);
}
.hero-mascot {
  flex: none;
  width: 140px;
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
}
.hero-mascot-copy { flex: 1; }
.hero-mascot-copy .script-line { color: var(--white); text-shadow: 0 3px 10px rgba(0,0,0,.3); }
.hero-phone { margin: 0; font: 700 15px var(--font-display); letter-spacing: .04em; color: var(--gold); }

.wave-hero { display: block; margin-bottom: -2px; }
.wave-hero path { fill: var(--pale); }

/* ---------- Trusted logos ---------- */
.trusted { background: var(--pale); padding: var(--subsection-pad-y) 0; }
.trusted-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad-x); box-sizing: border-box; }
.trusted-inner .eyebrow { margin: 0 0 var(--space-24); }

/* Continuous logo marquee: the track holds the logo list 4 times back
   to back and animates from -25% to 0%, i.e. exactly one set's width
   — since every copy is identical, the loop point is invisible. Full
   bleed (outside .trusted-inner's max-width) so logos scroll edge to
   edge rather than looking boxed into the centered content column.
   Four copies (not two) so the track is always at least 3 set-widths
   wide even on very wide monitors — with only two, the track could
   run out of content and briefly show blank space before looping;
   see the width math in the .logo-marquee-set comment below. */
.logo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}
.logo-marquee-track {
  display: flex;
  width: max-content;
  animation: logo-marquee 45s linear infinite;
}
/* With N identical copies in the track animating by exactly one
   copy-width per cycle, the viewport never runs out of content as
   long as its width doesn't exceed (N-1) copy-widths. At this size
   each copy is roughly ~2100px wide, so 4 copies stay safe up to
   ~6300px of viewport width — comfortably past any real screen. */
.logo-marquee-set {
  display: flex;
  align-items: center;
  flex: none;
  gap: var(--space-48);
  padding-right: var(--space-48);
}
.logo-marquee img { height: 80px; width: auto; flex: none; object-fit: contain; opacity: .8; }

@keyframes logo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; }
}

/* ---------- Services ---------- */
.services { background: var(--white); }
/* flow-root so .section-copy's own bottom margin can't collapse through
   this zero-padding edge and expose the body's pale background behind
   both sections in the gap before .solutions. */
.services-inner { padding: var(--section-pad-y) var(--container-pad-x) 0; max-width: var(--container-max); margin: 0 auto; box-sizing: border-box; display: flow-root; }
.services-inner .section-copy { margin-bottom: 0; }
.learn-more { display: inline-block; margin: 0; font-family: var(--font-body); font-weight: 700; font-size: clamp(13px, 1vw, 15px); color: var(--blue); }

/* ---------- Premium systems ---------- */
.premium { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--navy), #125da6); }
/* Hairline-seam fix (confirmed Safari-specific, doesn't reproduce in
   Chromium): a matching stroke alone isn't always enough — scaling the
   SVG up slightly and letting the parent's overflow:hidden crop the
   excess pushes whatever artifact sits at the SVG's own rendered edge
   outside the visible box, without removing any of the actual fill. */
.wave-premium-top { transform: scale(1.05); }
.wave-premium-top path { fill: var(--white); stroke: var(--white); stroke-width: 3px; }
.wave-premium-bottom { display: block; margin-bottom: -2px; transform: scale(1.05); }
.wave-premium-bottom path { fill: var(--white); stroke: var(--white); stroke-width: 3px; }
.premium-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--section-pad-y) var(--container-pad-x); position: relative; overflow: hidden; }
.premium-inner .section-title { margin-bottom: var(--space-32); }
.premium-photo { width: 100%; aspect-ratio: 16 / 9; max-height: 520px; object-fit: cover; object-position: top; border-radius: 22px; position: relative; margin-bottom: var(--space-32); }
/* auto-fit alone lets two 240px cards fit on wider phones, orphaning
   the third card alone in its own row with empty space beside it —
   force one column below 640px, same auto-fit behavior above it. */
.premium-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-16); margin: 0; position: relative; }
@media (min-width: 640px) {
  .premium-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
.premium-card {
  padding: var(--space-24);
  border-radius: 18px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(127,205,242,.22);
}
.premium-card h3 { margin: 0 0 var(--space-8); font: 700 18px var(--font-body); color: var(--white); }
.premium-card p { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(220,240,251,.78); }

/* Full-bleed horizontal scroller (same principle as .logo-marquee, which is
   a sibling of its section's max-width wrapper rather than nested inside
   it) — on viewports wider than --container-max, the row would otherwise
   be boxed into that centered column and the last card would look cut off
   well before the actual screen edge. Shared by commercial.html's
   testimonial photo rows. */
.scroll-row {
  display: flex;
  gap: var(--space-12);
  overflow-x: auto;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: var(--space-4) var(--container-pad-x) var(--space-16);
  box-sizing: border-box;
  scrollbar-width: none;
}
.scroll-row::-webkit-scrollbar { display: none; }
.scroll-row img { width: clamp(200px, 18vw, 260px); height: clamp(150px, 15vw, 220px); flex: none; object-fit: cover; border-radius: 18px; }

/* ---------- Proof / reviews ---------- */
.proof { background: var(--white); }
.proof-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--section-pad-y) 0 var(--subsection-pad-y); }
.proof-head { padding: 0 var(--container-pad-x); }

/* Bento grid: a fixed 4-row-tall strip built from repeating 4-column
   blocks, scrolling horizontally — more blocks just extend the scroll.
   Every tile's exact grid-column/grid-row is set inline per block (see
   index.html) so the two large photos always land in a block's opposite
   corners and never sit side by side. Bleeds past the viewport's right
   edge only (mirroring .scroll-row's full-bleed math on one side) so
   the strip still teases more content to scroll to, while its left edge
   stays aligned with the rest of the page's content column. */
.proof-bento {
  display: grid;
  grid-template-rows: repeat(4, clamp(168px, 15vw, 190px));
  grid-auto-columns: clamp(120px, 13vw, 170px);
  gap: var(--space-12);
  overflow-x: auto;
  margin-right: calc(-50vw + 50%);
  padding: var(--space-32) var(--container-pad-x) var(--space-16);
  box-sizing: border-box;
  scrollbar-width: none;
}
.proof-bento::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  .proof-bento { gap: var(--space-16); }
}

.proof-bento img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 18px; }

.review-card {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: var(--space-16);
  border-radius: 18px;
  background: var(--pale);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-8);
  overflow: hidden;
}
.review-card .stars { margin: 0; font: 700 12px var(--font-body); color: var(--gold); letter-spacing: .1em; }
.review-card .review-quote { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(10,47,92,.72); }
.review-author { margin: 0; font: 700 12px var(--font-body); color: var(--navy); }
.review-author span { font-weight: 500; color: rgba(10,47,92,.6); }

/* Navy tile: used on at most one quote per block, always kept off any
   tile it's adjacent to (see index.html placement) so no two same-color
   tiles ever touch. */
.review-navy { background: var(--navy); }
.review-navy .review-quote { color: rgba(220,240,251,.82); }
.review-navy .review-author { color: var(--white); }
.review-navy .review-author span { color: rgba(220,240,251,.65); }

/* Gold tile: reserved for the one number/result per block that matters
   most (rating, temperature drop, turnaround) — never used on a quote. */
.stat-card {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: var(--space-16);
  border-radius: 18px;
  background: var(--gold);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-4);
}
.stat-num { font: 800 clamp(28px, 1.6vw + 22px, 40px) var(--font-display); color: var(--navy-deep); line-height: 1.1; }
.stat-label { font: 700 14px var(--font-body); color: var(--navy-deep); }

/* ---------- Solutions ---------- */
.solutions { background: var(--white); }
.solutions-inner {
  padding: var(--space-24) var(--container-pad-x) var(--section-pad-y);
  max-width: var(--container-max);
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.solutions-row {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: var(--space-24);
}
@media (min-width: 640px) {
  .solutions-row-2, .solutions-row-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .solutions-row-3 { grid-template-columns: repeat(3, 1fr); }
}
.solution-card { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; }
.solution-navy { background: var(--navy); }
.solution-blue { background: var(--blue); }
.solution-card img { width: 100%; height: clamp(240px, 22vw, 340px); object-fit: cover; }
.solution-photo-fan { object-position: center 35%; }
.solution-body { flex: 1 1 auto; padding: var(--space-24); }
.solution-body h3 { margin: 0 0 var(--space-8); font: 800 20px var(--font-display); color: var(--white); }
.solution-body p { margin: 0 0 var(--space-12); font-size: 14px; line-height: 1.55; }
.solution-navy p { color: rgba(220,240,251,.8); }
.solution-blue p { color: rgba(255,255,255,.85); }

.check-list { list-style: none; margin: 0 0 var(--space-16); padding: 0; display: grid; gap: var(--space-8); font-size: 12.5px; color: var(--pale); }
.check-list li { position: relative; padding-left: 13px; }
.check-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.check-list-dark { color: var(--white); }

.learn-more-light { color: var(--sky); font-size: 12.5px; }
.learn-more-dark { color: var(--navy-deep); font-size: 12.5px; }

/* ---------- Service area ---------- */
.service-area { position: relative; background: var(--pale); }
.wave-service-top path { fill: var(--pale); }
.service-area-inner { max-width: var(--container-max); margin: 0 auto; padding: calc(var(--section-pad-y) - var(--space-32)) var(--container-pad-x); box-sizing: border-box; }
.service-area-inner .section-title { font-size: clamp(30px, 1.6vw + 22px, 40px); line-height: 1.15; letter-spacing: -.025em; }
.service-area-inner .script-accent-blue { font-size: clamp(36px, 2vw + 24px, 46px); }
.service-area-copy { margin: 0 0 var(--space-32); max-width: var(--text-max); font-size: 15px; line-height: 1.5; color: var(--navy); font-weight: 500; }
.service-area-mascot { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto var(--space-24); }
.service-area-content { display: flex; flex-direction: column; gap: var(--space-32); }

.virtual-callout {
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
  margin: 0 0 var(--space-32);
  padding: var(--space-16) var(--space-24);
  border-radius: 16px;
  background: var(--white);
}
.callout-bar { width: 6px; align-self: stretch; border-radius: 3px; background: var(--gold); flex: none; }
.virtual-callout p { margin: 0 0 var(--space-12); font-size: 14px; line-height: 1.5; color: rgba(10,47,92,.72); }

.btn-callout {
  display: inline-flex;
  align-items: center;
  min-height: var(--btn-h-sm);
  margin: 0;
  padding: 0 var(--space-16);
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font: 700 12.5px var(--font-body);
}

.chip-list {
  list-style: none;
  margin: 0 0 var(--space-32);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.chip-list li {
  padding: var(--space-8) var(--space-12);
  border-radius: 999px;
  background: var(--white);
  border: 1px solid rgba(10,47,92,.08);
  font: 600 11.5px var(--font-body);
  color: var(--navy);
}

.service-area-note { margin: 0 0 var(--space-24); font-size: 14px; line-height: 1.55; color: rgba(10,47,92,.65); }

/* ---------- Quote form ---------- */
.quote { position: relative; background: linear-gradient(180deg, var(--blue), var(--navy)); overflow: hidden; }
/* Safari-seam fix (same as .wave-premium-top/.wave-com-how-top): scale
   the wave up and stroke it in its own fill color so anti-aliasing at
   the SVG edge doesn't show a hairline gap against the section above.
   .quote's overflow:hidden crops the excess. */
.wave-quote-top { transform: scale(1.05); }
.wave-quote-top path { fill: var(--pale); stroke: var(--pale); stroke-width: 3px; }
.quote-particles .mist-dot { background: rgba(220,240,251,.6); }
.quote-particles .d5 { left: 12%; bottom: 200px; width: 8px; height: 8px; animation-duration: 8s; animation-delay: .4s; }
.quote-particles .d6 { left: 76%; bottom: 260px; width: 6px; height: 6px; animation-duration: 10s; animation-delay: 2s; opacity: .55; }

.quote-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--section-pad-y) var(--container-pad-x); box-sizing: border-box; position: relative; }

.quote-grid { display: flex; flex-direction: column; gap: var(--space-24); }
.quote-photo { width: 100%; max-width: 560px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; margin: 0 auto; }
.quote-wizard .quote-photo { max-width: 760px; }

.progress-bar { display: flex; gap: var(--space-8); max-width: 560px; margin: 0 auto var(--space-24); }
.quote-wizard .progress-bar { max-width: 760px; }

/* Keep the heading block the same readable width as the form card
   beneath it, so the quote section reads as one aligned column even
   though .quote-inner itself now shares the site-wide container width. */
.quote-inner .eyebrow,
.quote-inner .section-title {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.quote-inner .section-title {
  margin-bottom: var(--space-32);
}
.quote-wizard .quote-inner .eyebrow,
.quote-wizard .quote-inner .section-title {
  max-width: 760px;
}
.progress-seg { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); transition: background .2s; }
.progress-seg.active { background: var(--gold); }

.quote-form {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-24);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 14px 34px rgba(0,0,0,.2);
}
.quote-wizard .quote-form { max-width: 760px; }
.quote-step h3 { margin: 0 0 var(--space-8); font: 700 17px var(--font-body); color: var(--navy); }
.quote-step-copy { margin: 0 0 var(--space-16); font-size: 14px; line-height: 1.5; color: rgba(10,47,92,.65); }

.quote-fields { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-12); margin: 0 0 var(--space-12); }
.quote-fields input,
.quote-fields select,
.quote-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(10,47,92,.18);
  border-radius: 12px;
  padding: 0 var(--space-16);
  font: 400 14px var(--font-body);
  color: var(--navy);
  background: #f6fafd;
}
.quote-fields select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(10,47,92,.45)' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-16) center; background-size: 14px; padding-right: var(--space-32); }
.quote-fields select:invalid { color: rgba(10,47,92,.5); }
.quote-form textarea { min-height: 80px; padding: var(--space-12) var(--space-16); resize: none; margin: 0 0 var(--space-16); }

.upload-drop {
  display: block;
  border: 1.5px dashed rgba(24,120,208,.45);
  border-radius: 16px;
  background: #f2f9fe;
  padding: var(--space-24);
  text-align: center;
  cursor: pointer;
  margin: 0 0 var(--space-12);
}
.upload-title { display: flex; align-items: center; justify-content: center; gap: var(--space-8); margin: 0 0 var(--space-8); font: 700 14px var(--font-body); color: var(--navy-mid); }
.upload-icon { flex: none; }
.upload-hint { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(10,47,92,.6); }

/* Selected-files state: replaces the drop zone once images are chosen. */
.upload-files { margin: 0 0 var(--space-12); }
.upload-list { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.upload-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16);
  border: 1.5px solid rgba(24,120,208,.25);
  border-radius: 12px;
  background: #f2f9fe;
  font-size: 14px;
  color: var(--navy);
}
.upload-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-remove {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: rgba(10,47,92,.6);
  cursor: pointer;
}
.upload-more {
  display: inline-flex;
  align-items: center;
  min-height: var(--btn-h-sm);
  font: 700 14px var(--font-body);
  color: var(--blue);
  cursor: pointer;
}

.quote-confirm {
  display: flex;
  gap: var(--space-16);
  align-items: center;
  padding: var(--space-16);
  border-radius: 16px;
  background: var(--pale);
}
.quote-confirm img { width: 64px; flex: none; }
.script-line-small { font-size: 19px; color: var(--navy); }

.quote-success h3 { margin: 0 0 var(--space-8); font: 700 17px var(--font-body); color: var(--navy); }
.quote-error { margin: var(--space-16) 0 0; font-size: 13.5px; line-height: 1.5; color: #b42318; }

/* quote-actions is a fixed sibling of several mutually-exclusive
   [hidden]-toggled steps, so we can't know in advance which one
   precedes it to give a bottom-margin to — margin-top here is a
   deliberate, documented exception to the bottom-margin-only rule. */
.quote-actions { display: flex; gap: var(--space-12); margin-top: var(--space-16); }
.btn-back {
  flex: none;
  min-height: var(--btn-h-md);
  padding: 0 var(--space-16);
  border-radius: 13px;
  border: 1.5px solid rgba(10,47,92,.2);
  background: var(--white);
  font: 600 14px var(--font-body);
  color: var(--navy);
}
.btn-next {
  flex: 1;
  min-height: var(--btn-h-md);
  border-radius: 13px;
  background: var(--gold);
  font: 700 14.5px var(--font-body);
  color: var(--navy-deep);
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); padding: var(--section-pad-y) var(--container-pad-x); text-align: center; }
.footer-script { margin: 0 0 var(--space-8); font-family: var(--font-script); font-size: 40px; line-height: 1.1; color: var(--white); }
.footer-state { margin: 0 0 var(--space-24); font: 800 26px var(--font-display); letter-spacing: .06em; color: var(--gold); }
.footer-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-16) var(--space-24); margin: 0 0 var(--space-24); font-size: 13px; color: rgba(220,240,251,.8); }
.footer-contact a { color: var(--sky); }
.footer-contact-item { display: flex; align-items: center; gap: var(--space-8); }
.footer-contact-icon { flex: none; color: var(--sky); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-24); justify-content: center; margin: 0 0 var(--space-24); font: 600 13px var(--font-body); }
.footer-links a { color: var(--sky); text-decoration: underline; text-decoration-color: rgba(127,205,242,.4); text-underline-offset: 3px; }
.footer-social { display: flex; flex-basis: 100%; gap: var(--space-12); justify-content: center; margin: 0; }
.footer-social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(127,205,242,.35);
  display: flex; align-items: center; justify-content: center;
  color: var(--sky);
}

@media (prefers-reduced-motion: reduce) {
  .mist-dot { animation: none; }
}

/* ================= Residential page ================= */

.res-hero-media {
  flex: 1 1 300px;
  min-width: 0;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(127,205,242,.22);
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}
.res-video-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  background: linear-gradient(150deg, #123f75, #1a5a9e 55%, #2679c4);
}
.res-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.res-video-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at 50% 40%, rgba(255,255,255,.1), transparent 70%);
  z-index: 0;
}
.res-video-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7,32,63,.85) 0%, rgba(7,32,63,0) 42%);
  z-index: 0;
  pointer-events: none;
}
.res-video-frame.is-playing::before,
.res-video-frame.is-playing::after,
.res-video-frame.is-playing .res-play-btn,
.res-video-frame.is-playing .res-video-caption,
.res-video-frame.is-playing .res-video-badge {
  display: none;
}
.res-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  border: 0;
  cursor: pointer;
  padding: 0;
  z-index: 2;
}
.res-video-caption {
  position: absolute;
  left: var(--space-16); right: var(--space-16); bottom: var(--space-16);
  z-index: 2;
}
.res-video-caption strong {
  display: block;
  margin: 0 0 var(--space-4);
  font: 700 13.5px var(--font-body);
  color: var(--white);
}
.res-video-caption span {
  display: block;
  margin: 0;
  font-size: 11px;
  color: rgba(220,240,251,.75);
}
.res-video-badge {
  position: absolute;
  top: var(--space-12); right: var(--space-12);
  padding: var(--space-4) var(--space-8);
  border-radius: 999px;
  background: rgba(7,32,63,.6);
  font: 700 9.5px var(--font-display);
  letter-spacing: .06em;
  color: var(--white);
  z-index: 2;
}

.res-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin: 0;
}
.res-trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font: 600 10.5px var(--font-body);
  color: rgba(220,240,251,.8);
}
.res-trust-rating { color: var(--gold); }

.res-intro { background: var(--pale); }
.res-intro-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--section-pad-y) var(--container-pad-x) 0; box-sizing: border-box; }
.res-intro .section-title { font-size: clamp(26px, 1.6vw + 18px, 34px); line-height: 1.2; }
.res-intro p { margin: 0; max-width: var(--text-max); font-size: 14.5px; line-height: 1.6; color: rgba(10,47,92,.7); }

.res-grid-wrap { background: var(--pale); }
/* Explicit column counts (1 / 2 / 4) rather than a fluid auto-fit —
   the checkerboard color order below depends on knowing exactly how
   many columns are showing at a given width; a continuous auto-fit
   would drift through in-between column counts (and an orphaned
   3-column state) where the pattern can't stay correct. */
.res-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--subsection-pad-y) var(--container-pad-x) var(--section-pad-y);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}
@media (min-width: 560px) {
  .res-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .res-grid { grid-template-columns: repeat(4, 1fr); }
}
.res-grid-item { border-radius: 18px; padding: var(--space-16); }
.res-grid-item.light { background: var(--white); color: var(--blue); }
.res-grid-item.dark { background: var(--navy); color: var(--sky); }
.res-grid-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-16);
}
.res-grid-item.light .res-grid-icon { background: var(--pale); }
.res-grid-item.dark .res-grid-icon { background: rgba(255,255,255,.12); }
.res-grid-item h3 { margin: 0 0 var(--space-8); font: 700 13.5px var(--font-body); line-height: 1.25; }
.res-grid-item.light h3 { color: var(--navy); }
.res-grid-item.dark h3 { color: var(--white); }
.res-grid-item p { margin: 0; font-size: 14px; line-height: 1.5; }
.res-grid-item.light p { color: rgba(10,47,92,.65); }
.res-grid-item.dark p { color: rgba(220,240,251,.75); }

/* At exactly 2 columns, the cards' natural dark/light/dark/light order
   (which checkerboards correctly at 1 column and at 4) produces two
   solid-color columns instead of a checkerboard, since row 2 repeats
   row 1's pattern instead of inverting it. Swap the 3rd and 4th
   card's presentation (background, icon, text, and icon color via
   currentColor) only in this range so row 2 reads light/dark. */
@media (min-width: 560px) and (max-width: 899px) {
  .res-grid-item.dark:nth-child(3) { background: var(--white); color: var(--blue); }
  .res-grid-item.dark:nth-child(3) .res-grid-icon { background: var(--pale); }
  .res-grid-item.dark:nth-child(3) h3 { color: var(--navy); }
  .res-grid-item.dark:nth-child(3) p { color: rgba(10,47,92,.65); }

  .res-grid-item.light:nth-child(4) { background: var(--navy); color: var(--sky); }
  .res-grid-item.light:nth-child(4) .res-grid-icon { background: rgba(255,255,255,.12); }
  .res-grid-item.light:nth-child(4) h3 { color: var(--white); }
  .res-grid-item.light:nth-child(4) p { color: rgba(220,240,251,.75); }
}

.res-process {
  position: relative;
  background-color: var(--white);
}
.res-process-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--section-pad-y) var(--container-pad-x);
  box-sizing: border-box;
  text-align: center;
}
.res-process .section-title { text-align: center; color: var(--navy); }
/* .section-copy's max-width has no auto margin by default (the home
   page uses it in a left-aligned section, where that's correct) —
   center it explicitly here since this section is centered. */
.res-process .section-copy { margin: 0 auto var(--space-32); }

.res-process-cta {
  width: fit-content;
  margin: 0 auto var(--space-48);
  padding: 0 var(--space-32);
  border-radius: 999px;
}

.res-process-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  text-align: left;
}
@media (min-width: 700px) {
  .res-process-cards { grid-template-columns: repeat(3, 1fr); }
}
.res-process-card {
  background: var(--navy);
  border-radius: 22px;
  padding: var(--space-32) var(--space-24);
}
.res-process-num {
  display: block;
  font: 800 64px var(--font-display);
  line-height: 1;
  color: var(--gold);
  margin: 0 0 var(--space-24);
}
.res-process-card h3 { margin: 0 0 var(--space-8); font: 700 19px var(--font-body); color: var(--white); }
.res-process-card p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(220,240,251,.8); }

/* ---------- Residential — case studies ---------- */
.res-spot { background: var(--navy); }
.res-spot-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--section-pad-y) var(--container-pad-x); box-sizing: border-box; }
.res-spot-inner .section-title { margin-bottom: var(--space-32); }

.res-spot-list { display: grid; gap: var(--space-48); }
.res-spot-case { display: grid; gap: var(--space-24); padding-top: var(--space-48); border-top: 1px solid rgba(127,205,242,.2); }
.res-spot-case:first-child { padding-top: 0; border-top: 0; }
.res-spot-subhead + .res-spot-case { padding-top: 0; border-top: 0; }
.res-spot-inner .res-spot-subhead { margin-bottom: 0; }
@media (min-width: 700px) {
  .res-spot-case { grid-template-columns: repeat(2, 1fr); align-items: start; gap: var(--space-32); }
}

.res-spot-photo { border-radius: 22px; overflow: hidden; aspect-ratio: 4/3; background: var(--pale); margin-bottom: var(--space-12); }
.res-spot-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 899px) {
  .res-spot-photo img { cursor: zoom-in; }
}

.res-spot-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-12); }
.res-spot-thumb { padding: 0; box-sizing: border-box; border: 3px solid transparent; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; cursor: pointer; background: var(--pale); opacity: .75; }
.res-spot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.res-spot-thumb.is-active { border-color: var(--sky); opacity: 1; }

.res-spot-content { display: flex; flex-direction: column; gap: var(--space-16); padding-top: var(--space-8); }
.res-spot-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap; }
.res-spot-place { margin: 0; font: 700 13px var(--font-display); letter-spacing: .14em; color: var(--sky); text-transform: uppercase; }
.res-spot-stars { font: 700 15px var(--font-body); color: var(--gold); letter-spacing: .12em; }
.res-spot-quote { margin: 0; font: 600 20px/1.55 var(--font-body); color: var(--white); text-wrap: pretty; }
.res-spot-quote-sm { font-size: 14px; line-height: 1.65; }
.res-spot-name { margin: 0; font: 700 15px var(--font-body); color: var(--gold); }

/* Long review: clamped with a Read more toggle on mobile only; shown in
   full (and the toggle hidden) from 900px up. */
.res-spot-quote-clamp:not(.is-expanded) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}
.res-read-more {
  align-self: flex-start;
  margin: calc(-1 * var(--space-8)) 0 0;
  padding: var(--space-8) 0;
  border: 0;
  background: none;
  font: 700 14px var(--font-body);
  color: var(--sky);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (min-width: 900px) {
  .res-spot-quote-clamp:not(.is-expanded) { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
  .res-read-more { display: none; }
}

/* ---------- Residential — customization ---------- */
.res-custom { background: #F2F8FC; }
.res-custom-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--section-pad-y) var(--container-pad-x); box-sizing: border-box; }

.res-custom-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-24) var(--space-64); flex-wrap: wrap; margin-bottom: var(--space-48); }
.res-custom-dek { margin: 0; flex: 1 1 320px; }

.res-custom-group { margin-bottom: var(--space-48); }
.res-custom-group-head { display: flex; align-items: baseline; gap: var(--space-16); margin-bottom: var(--space-16); padding-bottom: var(--space-12); border-bottom: 1px solid rgba(10,47,92,.14); }
.res-custom-num { font: 800 14px var(--font-display); color: var(--blue); }
.res-custom-group-title { margin: 0; font: 800 20px var(--font-display); letter-spacing: -.01em; color: var(--navy); }

.res-custom-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--space-24); }
.res-custom-card { background: var(--white); border-radius: 20px; overflow: hidden; box-shadow: 0 6px 24px rgba(10,47,92,.07); }
.res-custom-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.res-custom-card-img-top { object-position: top; }
.res-custom-card-body { padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-12); }
.res-custom-card-title { margin: 0; font: 700 20px var(--font-body); color: var(--navy); }
.res-custom-card-body p:not(.res-custom-card-title) { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(10,47,92,.72); }
.res-custom-tags { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.res-custom-tag { padding: 6px 13px; border-radius: 999px; background: var(--pale); font: 600 12px var(--font-body); color: var(--navy); }

.res-custom-cta { display: flex; flex-direction: column; gap: var(--space-16); align-items: center; text-align: center; border-radius: 22px; padding: var(--space-32) var(--space-24); background: var(--navy); }
.res-custom-cta-title { margin: 0; font: 800 22px var(--font-display); letter-spacing: -.01em; color: var(--white); }
.res-custom-cta-copy p:not(.res-custom-cta-title) { margin: var(--space-4) 0 0; font-size: 15px; color: rgba(220,240,251,.85); }
.res-custom-cta .btn { width: fit-content; padding: 0 var(--space-32); }
@media (min-width: 700px) {
  .res-custom-cta { flex-direction: row; justify-content: space-between; text-align: left; padding: var(--space-24) var(--space-32); }
  .res-custom-cta .btn { flex: none; }
}

.res-faq { background: var(--pale); }
.res-faq-inner { max-width: 760px; margin: 0 auto; padding: var(--section-pad-y) var(--container-pad-x); box-sizing: border-box; }
.res-faq-grid { display: flex; flex-direction: column; gap: var(--space-32); }
.res-faq-mascot { width: 100%; max-width: 200px; height: auto; margin: 0 auto; display: block; }
.res-faq-list { margin-top: var(--space-32); }

@media (min-width: 900px) {
  .res-faq-split .res-faq-inner { max-width: var(--container-max); }
  .res-faq-grid {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    align-items: start;
    gap: var(--space-48);
  }
  .res-faq-mascot { max-width: 100%; margin: 0; }
}
.res-faq-item {
  padding: var(--space-24) 0;
  border-top: 1px solid rgba(10,47,92,.15);
  display: flex;
  gap: var(--space-16);
  align-items: baseline;
}
.res-faq-num { font: 800 22px var(--font-display); color: rgba(10,47,92,.22); flex: none; width: 26px; }
.res-faq-content { flex: 1; }
.res-faq-question {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.res-faq-item h3 { margin: 0; font: 700 14.5px var(--font-body); color: var(--navy); }
.res-faq-answer-wrap { margin-top: var(--space-8); }
.res-faq-answer { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(10,47,92,.68); }
.res-faq-chevron { flex: none; margin-top: var(--space-4); transition: transform .2s ease; }
.res-faq-question[aria-expanded="true"] .res-faq-chevron { transform: rotate(180deg); }

.btn-block { width: 100%; }

/* ================= Commercial page ================= */

.btn-navy {
  min-height: var(--btn-h-lg);
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font: 700 15px var(--font-body);
}

/* ---------- Hero (full-bleed photo, not the split video hero) ---------- */
.com-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(480px, 40vw + 388px, 720px);
  display: flex;
  flex-direction: column;
}
/* The shared .wave-hero is pale-filled because on the home/residential
   pages the section right after the hero is pale — here it's white
   (.com-perform), so the wave needs to hand off to white instead. */
.com-hero .wave-hero path { fill: var(--white); stroke: var(--white); stroke-width: 3px; }
.com-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 30%;
}
.com-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,32,63,.55) 0%, rgba(7,32,63,.5) 40%, rgba(7,32,63,.7) 65%, rgba(7,32,63,.94) 100%);
}
.com-hero-inner {
  position: relative;
  max-width: var(--container-max);
  width: 100%;
  margin: auto auto 0;
  padding: 0 var(--container-pad-x) var(--space-32);
  box-sizing: border-box;
}
.com-hero-stat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  border-radius: 999px;
  background: rgba(233,185,107,.92);
  margin: 0 0 var(--space-16);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--navy-deep);
}
.com-hero-stat-num { font: 800 20px var(--font-display); color: var(--navy-deep); }
.com-hero-title {
  margin: 0 0 var(--space-16);
  max-width: 780px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 4vw + 14px, 56px);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--white);
  text-wrap: pretty;
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
}
.com-hero-title .script-accent { font-size: clamp(36px, 4.4vw + 14px, 62px); margin-right: var(--space-12); }
.com-hero-copy {
  margin: 0 0 var(--space-24);
  max-width: 520px;
  font-size: clamp(13.5px, .6vw + 12px, 17px);
  line-height: 1.6;
  color: rgba(220,240,251,.88);
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.com-hero .hero-ctas { max-width: 480px; }
/* Stacked full-width on small phones (matching the home/residential
   hero); one equal-width row once there's room. */
.com-hero .hero-ctas { flex-direction: column; }
.com-hero .hero-ctas .btn { flex: none; width: 100%; }
@media (min-width: 480px) {
  .com-hero .hero-ctas { flex-direction: row; }
  .com-hero .hero-ctas .btn { flex: 1; width: auto; }
}

/* ---------- Built to perform ---------- */
.com-perform { background: var(--white); }
.com-perform-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--section-pad-y) var(--container-pad-x) 0; box-sizing: border-box; }
.com-perform-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}
@media (min-width: 560px) {
  .com-perform-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .com-perform-grid { grid-template-columns: repeat(4, 1fr); }
}
.com-perform-card { padding: clamp(16px, 2vw + 8px, 24px); border-radius: 20px; background: var(--pale); }
.com-perform-card h3 { margin: 0 0 var(--space-8); font: 700 clamp(14px, .5vw + 12px, 17px) var(--font-body); color: var(--navy); }
.com-perform-card p { margin: 0; font-size: clamp(12px, .3vw + 10.5px, 14px); line-height: 1.55; color: rgba(10,47,92,.68); }

/* ---------- Virtual estimate callout ---------- */
.com-virtual { background: var(--white); }
.com-virtual-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--subsection-pad-y) var(--container-pad-x); box-sizing: border-box; }
.com-virtual-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-8);
  padding: var(--space-32) var(--space-24);
  border-radius: 24px;
  background: var(--pale);
}
/* height:auto is required here — the img's width/height HTML attributes
   (used to reserve layout space before load) map to a real `height`
   declaration in the browser's UA stylesheet, and with no author height
   rule that attribute value wins outright, stretching the image once
   width alone is scaled down. The negative margin pulls the mascot up
   past the card's own top padding so it pokes into the white section
   above it, matching the design (desktop has no such overlap). */
.com-virtual-mascot { width: 100%; max-width: 200px; height: auto; margin: calc(-1 * var(--space-64)) 0 0; }
.com-virtual-title { margin: 0; font: 700 20px var(--font-body); color: var(--navy); }
.com-virtual-copy p:not(.com-virtual-title) { margin: 0 0 var(--space-16); max-width: 380px; font-size: 14px; line-height: 1.55; color: rgba(10,47,92,.68); }
@media (min-width: 900px) {
  .com-virtual-card { flex-direction: row; text-align: left; align-items: center; gap: var(--space-32); padding: var(--space-32) var(--space-48); }
  .com-virtual-mascot { max-width: 210px; flex: none; margin: 0; }
  .com-virtual-copy p:not(.com-virtual-title) { max-width: 460px; }
  /* .btn-navy has no padding of its own — it's meant to stretch to fill
     a block/flex parent. The design keeps this one compact on desktop
     rather than stretching it to the paragraph's width. */
  .com-virtual-copy .btn { width: fit-content; padding: 0 var(--space-32); }
}

/* ---------- How it works ---------- */
.com-how { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--navy), #125da6); }
/* The hairline-seam fix used elsewhere (margin-bottom:-2px alone) isn't
   enough here — against this section's gradient, the stretched SVG's own
   anti-aliased edge shows as a visible line regardless of overlap. A
   stroke matching the fill (same trick the original mockup used) paints
   over the seam pixels directly. */
/* Reported in Safari specifically: a seam right at the SVG's own
   rendered-box edge, not the shape's curve (the stroke trick above
   didn't fully resolve it there). Scaling the SVG up slightly and
   letting the parent's overflow:hidden crop the excess pushes that
   edge — and whatever artifact sits on it — outside the visible box,
   without removing any of the actual white fill (which the "crop a
   couple pixels" idea alone would have exposed the gradient behind). */
.wave-com-how-top { transform: scale(1.05); }
.wave-com-how-top path { fill: var(--white); stroke: var(--white); stroke-width: 3px; }
.wave-com-how-bottom { display: block; margin-bottom: -2px; }
.wave-com-how-bottom path { fill: var(--white); stroke: var(--white); stroke-width: 3px; }
.com-how-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-8) var(--container-pad-x) var(--section-pad-y); box-sizing: border-box; }
.com-how .section-title { margin-bottom: var(--space-32); font-size: clamp(27px, 1.6vw + 21px, 44px); }
.com-how-steps { display: grid; grid-template-columns: 1fr; gap: var(--space-16); }
@media (min-width: 900px) {
  .com-how-steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-32); }
}
.com-how-step { display: flex; gap: var(--space-16); align-items: flex-start; }
.com-how-num {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(127,205,242,.4);
  display: flex; align-items: center; justify-content: center;
  font: 700 14px var(--font-display);
  color: var(--white);
}
.com-how-step h3 { margin: 0; font: 700 15px var(--font-body); color: var(--white); }
.com-how-step p { margin: var(--space-4) 0 0; font-size: 13px; line-height: 1.5; color: rgba(220,240,251,.78); }

/* ---------- Spaces we cool ---------- */
.com-spaces { background: var(--white); }
.com-spaces-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--subsection-pad-y) var(--container-pad-x); box-sizing: border-box; }
.com-spaces-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-12); }
@media (min-width: 900px) {
  .com-spaces-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-16); }
}
.com-space-card { position: relative; border-radius: 20px; overflow: hidden; height: clamp(150px, 20vw, 280px); }
.com-space-card img { width: 100%; height: 100%; object-fit: cover; }
.com-space-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(7,32,63,.75));
}
.com-space-card span {
  position: absolute;
  left: var(--space-12); bottom: var(--space-12);
  font: 700 14px var(--font-body);
  color: var(--white);
  z-index: 1;
}

/* ---------- CTA banner ---------- */
.com-banner { background: var(--white); }
.com-banner-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad-x) var(--section-pad-y); box-sizing: border-box; }
.com-banner-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  text-align: center;
  align-items: center;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  padding: var(--space-32) var(--space-24);
}
.com-banner-card h2 { margin: 0 0 var(--space-8); font: 800 24px var(--font-display); color: var(--white); }
.com-banner-card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(220,240,251,.85); }
/* .btn-primary carries no horizontal padding of its own — it normally
   gets its width from a stretching flex parent (e.g. .hero-ctas). This
   card's align-items:center instead shrink-wraps it to bare text, so
   it needs the same explicit padding .res-process-cta already uses for
   the same standalone-button situation. */
.com-banner-card .btn { width: fit-content; padding: 0 var(--space-32); }
@media (min-width: 900px) {
  .com-banner-card { flex-direction: row; justify-content: space-between; text-align: left; padding: var(--space-48) var(--space-64); }
  .com-banner-card h2 { font-size: 32px; }
  .com-banner-card p { max-width: 560px; font-size: 15.5px; }
  .com-banner-card .btn { flex: none; }
}

/* ---------- Project spotlight ---------- */
.com-spotlight { background: var(--white); }
.com-spotlight-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--section-pad-y) var(--container-pad-x) 0; box-sizing: border-box; }
.com-spotlight-inner .section-title { font-size: clamp(27px, 1.4vw + 21px, 40px); }
.com-spotlight-inner .section-copy { margin-bottom: 0; }

.com-testimonials { background: var(--white); }
/* Same-background seam with .com-spotlight right above — subsection-pad-y
   (not section-pad-y) so the two read as one continuous block. */
.com-testimonials-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--subsection-pad-y) var(--container-pad-x) var(--section-pad-y);
  box-sizing: border-box;
  display: grid;
  gap: var(--space-48);
}
.com-testimonial { border-top: 1px solid rgba(10,47,92,.13); padding-top: var(--space-32); }
.com-testimonial:first-child { border-top: 0; padding-top: 0; }
.com-testimonial-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); margin: 0 0 var(--space-32); }
.com-testimonial-logo { height: clamp(64px, 5vw + 46px, 84px); width: auto; margin: 0; flex: none; object-fit: contain; }
.com-testimonial-text { flex: 1; min-width: 0; }
.com-testimonial-category { margin: 0 0 var(--space-8); font-size: 13px; color: rgba(10,47,92,.55); }
.com-testimonial-photos img {
  scroll-snap-align: start;
  flex: none;
  width: 78%;
  height: 280px;
  object-fit: cover;
  border-radius: 20px;
}
/* The row is full-bleed (see .scroll-row). --row-inset is the distance
   from the screen edge to the text column above (the centered
   container's margin plus its side padding), so the first photo lines
   up with that text and swipe-snapping stops on the same line. */
.com-testimonial-photos {
  --row-inset: calc(max(0px, (100vw - var(--container-max)) / 2) + var(--container-pad-x));
  scroll-snap-type: x mandatory;
  padding: 0 var(--row-inset) var(--space-16);
  scroll-padding-inline: var(--row-inset);
}
.com-testimonial-copy { margin: 0; max-width: 640px; font-size: 14px; line-height: 1.65; color: rgba(10,47,92,.7); }
.com-testimonial-copy-full { display: none; }

@media (max-width: 899px) {
  .com-testimonials-inner { padding-top: var(--space-64); }
  .com-testimonial-photos img { cursor: zoom-in; }
}

@media (min-width: 900px) {
  .com-testimonial-photos img { width: 44%; height: 340px; border-radius: 22px; }
  .com-testimonial-header { flex-direction: row; align-items: flex-start; gap: var(--space-48); }
  .com-testimonial-copy-full { display: block; }
  .com-testimonial-copy-short { display: none; }
}

/* ---------- Google reviews ---------- */
.com-reviews { background: var(--white); }
.com-reviews-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad-x) var(--section-pad-y); box-sizing: border-box; }

.com-reviews-card {
  display: grid;
  gap: var(--space-32);
  align-items: center;
  border-radius: 24px;
  background: #F2F8FC;
  padding: var(--space-32) var(--space-24);
}
@media (min-width: 900px) {
  .com-reviews-card { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--space-64); padding: var(--space-64); }
}

.com-reviews-col { display: flex; flex-direction: column; gap: var(--space-16); }
.com-reviews-rating { display: flex; align-items: baseline; gap: var(--space-12); }
.com-reviews-score { font: 800 clamp(52px, 4vw + 28px, 80px)/1 var(--font-display); letter-spacing: -.03em; color: var(--navy); }
.com-reviews-stars { font: 700 20px var(--font-body); color: var(--gold); letter-spacing: .1em; }
.com-reviews-heading { margin: 0; font-size: clamp(24px, 1.4vw + 18px, 30px); line-height: 1.15; }
.com-reviews-cta { width: fit-content; padding: 0 var(--space-24); margin-top: var(--space-4); }

.com-reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--space-24); }
.com-reviews-item { background: var(--white); border-radius: 22px; padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-16); box-shadow: 0 6px 24px rgba(10,47,92,.07); }
.com-reviews-item-stars { font: 700 14px var(--font-body); color: var(--gold); letter-spacing: .1em; }
.com-reviews-quote { margin: 0; font: 600 16px/1.55 var(--font-body); color: var(--navy); text-wrap: pretty; }
.com-reviews-name { margin: auto 0 0; font: 700 14px var(--font-body); color: var(--navy); }
.com-reviews-name span { font-weight: 500; color: rgba(10,47,92,.6); }

/* ---------- FAQ (commercial variant — white bg, no numbers, +/- icon,
   first question open by default; reuses .res-faq's structure/spacing) ---------- */
.com-faq { background: var(--white); }
.com-faq .res-faq-inner { max-width: var(--container-max); }
.com-faq-grid { display: flex; flex-direction: column; gap: var(--space-32); }
.com-faq-photo { width: 100%; max-width: 560px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; margin: 0 auto; }
.com-faq .section-title { font-size: clamp(27px, 1.4vw + 21px, 40px); }
.com-faq .res-faq-num { display: none; }
.com-faq .res-faq-chevron { display: none; }
.com-faq .res-faq-question::after {
  flex: none;
  margin-top: var(--space-4);
  font-size: 18px;
  color: var(--blue);
  content: '+';
}
.com-faq .res-faq-question[aria-expanded="true"]::after { content: '\2212'; }

@media (min-width: 900px) {
  .com-faq-grid {
    display: grid;
    grid-template-columns: minmax(260px, 420px) 1fr;
    align-items: center;
    gap: var(--space-48);
  }
  .com-faq-photo { max-width: none; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; }
}

/* ---------- Estimate form (2-step quote form reused on this page) ---------- */
.com-estimate .section-title { font-size: clamp(27px, 1.4vw + 21px, 40px); }
.com-estimate-copy {
  max-width: 560px;
  margin: 0 auto var(--space-24);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(220,240,251,.85);
  text-align: center;
}
.quote-wizard .com-estimate-copy { max-width: 760px; }

/* ================= Wide screens (900px+) =================
   Nearly everything above is already fluid (clamp() type scale,
   var(--container-pad-x) padding, minmax()/auto-fit grids, flex-wrap
   layouts) and needs no breakpoint — it scales continuously with the
   viewport. The one thing that genuinely needs a discrete switch is
   the nav: a touch hamburger menu below this width, an always-visible
   row above it. Shared by both pages. */
@media (min-width: 900px) {
  .menu-toggle { display: none; }
  .site-header-inner { flex-wrap: nowrap; }
  .mobile-menu[hidden] { display: flex !important; }
  .mobile-menu {
    flex: 0 1 auto;
    width: auto;
    order: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-8) var(--space-24);
    margin: 0;
    padding: 0;
    background: transparent;
    border-bottom: 0;
  }
  .mobile-menu a { padding: 0; border-top: 0; font: 600 13.5px var(--font-body); }

  /* Homepage hero: the bull + phone number is a mobile-only flourish —
     on desktop the video card carries the hero's second column alone. */
  .hero-mascot-row { display: none; }

  /* Footer: brand pinned bottom-left, contact info as one column on
     the right. Opt-in via .site-footer-wide, used by both pages. */
  .site-footer-wide { text-align: left; }
  .site-footer-wide .footer-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: var(--space-48);
    max-width: var(--container-max);
    margin: 0 auto;
  }
  .site-footer-wide .footer-links {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin-bottom: 0;
  }
  .site-footer-wide .footer-contact {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .site-footer-wide .footer-social {
    flex-basis: auto;
    justify-content: flex-start;
  }

  /* Service area: the mascot sits in its own column to the left of the
     copy on desktop, with the main copy and city list stacked in the
     remaining column instead of side by side. */
  .service-area-grid {
    display: grid;
    grid-template-columns: minmax(260px, 360px) 1fr;
    align-items: center;
    gap: var(--space-48);
  }
  .service-area-mascot { max-width: 100%; margin: 0; }
  .service-area-main .virtual-callout { margin-bottom: 0; }
  .service-area-cities {
    background: var(--white);
    border-radius: 22px;
    padding: var(--space-24);
    box-sizing: border-box;
  }
  .service-area-note { margin-bottom: 0; }

  /* Quote form: one flat set of fields on desktop, not a stepper
     (JS skips the step/progress-bar logic above this width). Step
     numbering/copy and the fieldless "confirm" step are step-wizard
     framing that no longer applies once everything is on one page. */
  .quote-form .quote-step h3,
  .quote-form .quote-step > .quote-step-copy {
    display: none;
  }
  .quote-form .quote-step[data-step="3"] {
    display: none;
  }

  /* Quote form: photo sits to the left of the form/progress-bar column
     on desktop, matching the service-area mascot+copy layout above. */
  .quote-grid {
    display: grid;
    grid-template-columns: minmax(260px, 420px) 1fr;
    align-items: stretch;
    gap: var(--space-48);
  }
  .quote-photo { max-width: none; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; }
}

/* ---------- Image lightbox (mobile only) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
  background: rgba(10,10,15,.92);
  box-sizing: border-box;
}
.lightbox[hidden] { display: none; }
.lightbox-img { max-width: 100%; max-height: 100%; border-radius: 16px; display: block; }
.lightbox-close {
  position: absolute;
  top: var(--space-16);
  right: var(--space-16);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: var(--white);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
@media (min-width: 900px) {
  .lightbox { display: none !important; }
}

/* ================= Interactive states =================
   Hover, pressed (:active) and keyboard focus for every button and link,
   kept together so they stay consistent. Every text/background pair
   below meets WCAG AA (4.5:1) in every state; focus rings meet the 3:1
   non-text minimum against the background they sit on. Kept last so
   these win over same-specificity base rules above. */
.btn,
.res-play-btn,
.lightbox-close,
.menu-toggle,
.upload-drop,
.upload-remove,
.footer-social a {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active,
.res-play-btn:active,
.footer-social a:active { transform: translateY(1px); }
.res-play-btn:active { transform: translate(-50%, calc(-50% + 1px)); }

/* Gold buttons — navy-deep text: 9.0:1 rest, 7.7:1 hover, 6.6:1 pressed. */
.btn-primary:hover, .btn-call:hover, .btn-next:hover, .res-play-btn:hover { background: #DFA955; color: var(--navy-deep); }
.btn-primary:active, .btn-call:active, .btn-next:active, .res-play-btn:active { background: #D39A45; color: var(--navy-deep); }
.btn-next:disabled { cursor: progress; }

/* Outline (on the dark hero) — fills light with navy-deep text: 16.3:1 / 13.9:1. */
.btn-outline:hover { background: var(--white); border-color: var(--white); color: var(--navy-deep); }
.btn-outline:active { background: var(--pale); border-color: var(--pale); color: var(--navy-deep); }

/* Navy buttons — white text: 13.3:1 rest, 8.7:1 hover, 16.3:1 pressed. */
.btn-navy:hover, .btn-callout:hover { background: var(--navy-mid); color: var(--white); }
.btn-navy:active, .btn-callout:active { background: var(--navy-deep); color: var(--white); }

/* Form Back button — navy text: 11.4:1 hover, 10.0:1 pressed. */
.btn-back:hover { background: var(--pale); color: var(--navy); }
.btn-back:active { background: #C4E4F6; color: var(--navy); }

/* Header menu: nav links pale -> sky -> white on navy-deep (all 9:1+). */
.menu-toggle { border-radius: 8px; }
.menu-toggle:hover { background: rgba(255,255,255,.1); }
.menu-toggle:active { background: rgba(255,255,255,.18); }
.mobile-menu a:hover { color: var(--sky); }
.mobile-menu a:active { color: var(--white); }

/* "Learn more" on navy cards — sky 7.6:1, white 13.3:1, gold 7.4:1. */
.learn-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.learn-more-light:hover { color: var(--white); }
.learn-more-light:active { color: var(--gold); }
.res-read-more:hover { color: var(--white); }
.res-read-more:active { color: var(--gold); }

/* FAQ questions — navy-mid 7.5:1 on pale, navy-deep on press. */
.res-faq-question:hover h3 { color: var(--navy-mid); text-decoration: underline; text-underline-offset: 3px; }
.res-faq-question:active h3 { color: var(--navy-deep); }

/* Photo thumbnails (image-only). */
.res-spot-thumb:hover { opacity: 1; }
.res-spot-thumb:active { opacity: .9; }

/* Quote form uploads — text stays navy-mid/navy (7:1+) on the pale fills. */
.upload-drop:hover { background: var(--pale); border-color: var(--blue); }
.upload-drop:active { background: #C4E4F6; border-color: var(--navy-mid); }
.upload-more:hover { color: var(--navy-mid); text-decoration: underline; text-underline-offset: 3px; }
.upload-more:active { color: var(--navy); }
.upload-remove:hover { background: rgba(10,47,92,.08); color: var(--navy); }
.upload-remove:active { background: rgba(10,47,92,.16); color: var(--navy-deep); }

/* Lightbox close — white on the dark overlay: 7.6:1 hover, 5.2:1 pressed. */
.lightbox-close:hover { background: rgba(255,255,255,.3); }
.lightbox-close:active { background: rgba(255,255,255,.4); }

/* Footer (navy-deep) — sky 9.3:1 at rest, white 16.3:1 hover, gold 9.0:1 pressed. */
.footer-links a:hover, .footer-contact a:hover { color: var(--white); text-decoration-color: currentColor; }
.footer-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-links a:active, .footer-contact a:active { color: var(--gold); }
.footer-social a:hover { background: var(--sky); border-color: var(--sky); color: var(--navy-deep); }
.footer-social a:active { background: var(--white); border-color: var(--white); color: var(--navy-deep); }

/* Keyboard focus: blue ring on light backgrounds (4.5:1 vs white),
   white ring inside dark sections, where blue drops below 3:1. */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.site-header :focus-visible,
.hero :focus-visible,
.com-hero :focus-visible,
.solution-card :focus-visible,
.res-spot :focus-visible,
.quote :focus-visible,
.res-custom-cta :focus-visible,
.com-banner-card :focus-visible,
.site-footer :focus-visible,
.lightbox :focus-visible { outline-color: var(--white); }
.quote-form :focus-visible { outline-color: var(--blue); }