/* ================================================
   FONT FALLBACK METRICS

   The webfonts load with display=swap, so the first paint uses the
   local fallback and then reflows when Inter / Barlow Condensed
   arrive. Barlow Condensed is a *condensed* face carrying the largest
   text on the page, so against a default sans the mismatch — and the
   resulting shift — is large.

   These two faces re-shape the local fallback to match the real font's
   metrics, so the swap happens without moving anything. Numbers are the
   published metrics for each family; they are not free parameters —
   changing the webfont means recalculating them.
================================================ */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Helvetica Neue'), local('Arial'), local('sans-serif');
  ascent-override: 90.20%;
  descent-override: 22.48%;
  line-gap-override: 0.00%;
  size-adjust: 107.40%;
}
@font-face {
  font-family: 'Barlow Condensed Fallback';
  src: local('Arial Narrow'), local('Helvetica Neue'), local('Arial');
  ascent-override: 105.19%;
  descent-override: 21.04%;
  line-gap-override: 0.00%;
  size-adjust: 87.94%;
}

/* ================================================
   TOKENS
================================================ */
:root {
  --bg-0:    #061110;
  --bg-1:    #0a1514;
  --bg-2:    #0f1d1b;
  --bg-grad: radial-gradient(ellipse 90% 60% at 50% 0%, #0c2926 0%, #061110 60%);

  --glass:        rgba(255,255,255,0.045);
  --glass-strong: rgba(255,255,255,0.075);
  --glass-nav:    rgba(9,24,22,0.6);

  --red:    #0c7268;
  --red-l:  #2dbcab;
  --red-d:  #074d46;
  --red-glow: rgba(18,148,136,.5);

  /* desaturated brass complement — used sparingly */
  --gold:   #d6a24a;

  --t1: #F6F0F0;
  --t2: #B7A6A7;
  --t3: #80706F;

  --border:    rgba(255,255,255,0.08);
  --border-s:  rgba(255,255,255,0.14);
  --border-r:  rgba(18,148,136,0.32);

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -20px rgba(0,0,0,.55);
  --shadow-hover: 0 1px 0 rgba(255,255,255,.06) inset, 0 36px 80px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(18,148,136,.18);

  --display: 'Barlow Condensed', 'Barlow Condensed Fallback', sans-serif;
  --body:    'Inter', 'Inter Fallback', sans-serif;

  --ease: cubic-bezier(.2,.7,.2,1);
  /* ease-out-quint: settles hard at the end, no overshoot. Used where
     something travels a visible distance (the services menu marker). */
  --ease-out: cubic-bezier(.22,1,.36,1);
}

/* ================================================
   BASE
================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-0);
  color: var(--t1);
  font-family: var(--body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* Selection */
::selection { background: var(--red); color: #fff; }

/* Focus */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================
   LAYOUT UTILITIES
================================================ */
.wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 20px;
  padding: 7px 14px 7px 12px;
  background: rgba(18,148,136,.08);
  border: 1px solid rgba(18,148,136,.22);
  border-radius: var(--r-pill);
}
.chip::before {
  content: '';
  display: block;
  width: 6px; height: 6px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--red-glow);
}
.chip.center { margin-left: auto; margin-right: auto; }

.h1 {
  font-family: var(--display);
  font-size: clamp(56px, 9vw, 108px);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.025em;
}
.h2 {
  font-family: var(--display);
  font-size: clamp(38px, 5.4vw, 64px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.02em;
}
.h2 span, .h1 span {
  background: linear-gradient(135deg, var(--red-l) 0%, var(--red) 60%, var(--red-d) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  font-size: clamp(16px, 1.4vw, 18.5px);
  color: var(--t2);
  line-height: 1.72;
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  will-change: transform;
}
.btn-r {
  background: linear-gradient(180deg, var(--red) 0%, var(--red-d) 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 12px 32px -8px var(--red-glow);
}
.btn-r:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 18px 44px -10px var(--red-glow);
}
.btn-ghost {
  background: var(--glass);
  color: var(--t1);
  border: 1px solid var(--border-s);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.btn-ghost:hover {
  background: var(--glass-strong);
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
}
.btn-lg { padding: 18px 34px; font-size: 16px; }

/* SCROLL REVEAL */
.js .rev {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js .rev.in { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }

/* ================================================
   GLASS NAVIGATION (floating pill)
================================================ */
#hdr {
  position: fixed;
  top: 16px;
  left: 0; right: 0;
  z-index: 200;
  padding: 0 22px;
  transition: top .4s var(--ease);
}
#hdr .hdr-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 14px 10px 18px;
  border-radius: var(--r-pill);
  background: var(--glass-nav);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 0 0 1px rgba(0,0,0,.2),
    0 24px 60px -20px rgba(0,0,0,.6);
  transition: background .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease);
}
#hdr.on .hdr-inner {
  background: rgba(9,24,22,0.75);
  border-color: rgba(255,255,255,.12);
}
#hdr.on { top: 10px; }

/* glossy reflection top edge */
#hdr .hdr-inner::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 50%;
  border-radius: var(--r-pill) var(--r-pill) 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 100%);
  pointer-events: none;
}
#hdr .hdr-inner { position: relative; }

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  position: relative;
  z-index: 1;
}
/* The truck mark is line art, so it needs more room than the old solid badge
   did before the detail turns to mush — 46px in the header, larger in the
   footer where there is space for it. */
.logo-bolt {
  width: 46px; height: 46px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 6px 14px rgba(18,148,136,.35));
}
.logo-bolt img,
.logo-bolt svg { width: 100%; height: 100%; object-fit: contain; }
.logo-bolt.lg { width: 60px; height: 60px; }
.logo-copy { line-height: 1.15; }
.logo-name {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .02em;
}
.logo-name span { color: var(--red-l); }
.logo-sub {
  font-size: 10px;
  font-weight: 600;
  color: var(--t3);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; }
.nav-links {
  display: flex;
  gap: 4px;
  list-style: none;
  padding: 4px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.05);
}
.nav-links a {
  display: block;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--t2);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover {
  color: var(--t1);
  background: rgba(255,255,255,.05);
}
.nav-call {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44px is the WCAG 2.5.5 / Apple HIG minimum tap target. This button
     measured 49x33 on mobile before, which failed on height. */
  min-height: 44px;
  min-width: 44px;
  gap: 8px;
  background: linear-gradient(180deg, var(--red) 0%, var(--red-d) 100%);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 8px 22px -6px var(--red-glow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  cursor: pointer;
}
.nav-call:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 12px 30px -8px var(--red-glow);
}
.nav-call svg { width: 13px; height: 13px; }

.nav-fb {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--t1);
  background: var(--glass);
  border: 1px solid var(--border-s);
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.nav-fb:hover {
  transform: translateY(-1px);
  background: rgba(18,148,136,.16);
  border-color: rgba(18,148,136,.45);
  color: var(--red-l);
}
.nav-fb svg { width: 18px; height: 18px; }

/* The menu button on a phone. The three bars are 24px tall together, so the
   padding is what carries it to a 44px target; without it this is the
   smallest thing on the page to hit and it is the one every mobile visitor
   reaches for first. */
.hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 44px; height: 44px;
  padding: 0;
  border-radius: 12px;
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--t1); border-radius: 2px; }

/* ================================================
   HERO
================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 160px 0 120px;
  overflow: hidden;
  background: radial-gradient(ellipse 90% 60% at 50% 0%, #0c2926 0%, var(--bg-0) 65%);
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
/* Truck photo, dimmed and faded into the page so copy stays readable */
.hero-photo {
  position: absolute;
  inset: 0;
  /* AVIF/WebP/JPEG derivatives are generated by scripts/optimize-hero.mjs
     (npm run images) and committed to static/. image-set() selects by
     declared type, so every entry here must actually exist on disk —
     otherwise that browser gets no background at all rather than a
     fallback. Re-run the script before removing or renaming any of them.

     Three widths because this is a full-bleed background: a phone has no
     use for the 1500px file. The preload links in base.njk mirror these
     breakpoints and must be kept in step with them. */
  background: image-set(
      url('/hero-trailer-1500.avif') type('image/avif'),
      url('/hero-trailer-1500.webp') type('image/webp'),
      url('/hero-trailer.jpg') type('image/jpeg')
    ) center 32% / cover no-repeat;
  opacity: .30;
  filter: grayscale(.12) contrast(1.05) brightness(.86);
  transform: scale(1.04);
}
@media (max-width: 1024px) {
  .hero-photo {
    background-image: image-set(
      url('/hero-trailer-1024.avif') type('image/avif'),
      url('/hero-trailer-1024.webp') type('image/webp'),
      url('/hero-trailer.jpg') type('image/jpeg')
    );
  }
}
@media (max-width: 640px) {
  .hero-photo {
    background-image: image-set(
      url('/hero-trailer-640.avif') type('image/avif'),
      url('/hero-trailer-640.webp') type('image/webp'),
      url('/hero-trailer.jpg') type('image/jpeg')
    );
  }
}
.hero-photo-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,17,15,.62) 0%, rgba(6,17,15,.5) 32%, rgba(6,17,15,.82) 78%, var(--bg-0) 100%),
    linear-gradient(90deg, rgba(6,17,15,.78) 0%, rgba(6,17,15,.32) 55%, rgba(6,17,15,.55) 100%),
    radial-gradient(ellipse 70% 60% at 30% 38%, rgba(140,12,15,.22) 0%, transparent 60%);
}
.hbg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(18,148,136,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,148,136,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 100%);
}
.hbg-glow1 {
  position: absolute;
  top: -10%; left: 40%; transform: translateX(-50%);
  width: 1100px; height: 800px;
  background: radial-gradient(ellipse, rgba(18,148,136,.18) 0%, transparent 60%);
  filter: blur(20px);
  animation: drift 18s ease-in-out infinite alternate;
}
.hbg-glow2 {
  position: absolute;
  bottom: -20%; right: -10%;
  width: 700px; height: 700px;
  background: radial-gradient(ellipse, rgba(56,196,182,.08) 0%, transparent 60%);
  filter: blur(20px);
  animation: drift 22s ease-in-out infinite alternate-reverse;
}
@keyframes drift {
  0%   { transform: translate(-50%, 0) rotate(0); }
  100% { transform: translate(-44%, -3%) rotate(8deg); }
}
.bolt-bg {
  position: absolute;
  opacity: .04;
  pointer-events: none;
  color: var(--red);
}
.bolt-bg.b1 { top: 8%; right: 4%; transform: rotate(12deg); animation: breathe 6s ease-in-out infinite; }
.bolt-bg.b2 { bottom: 4%; left: -1%; transform: rotate(-8deg); animation: breathe 6s ease-in-out infinite 2.5s; }
@keyframes breathe { 0%,100% { opacity: .03; } 50% { opacity: .08; } }

.hero-body {
  position: relative;
  z-index: 1;
  max-width: 880px;
}
.hero-brand {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 27px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--t1);
  line-height: 1;
  margin-bottom: 20px;
  animation: fade-up .8s var(--ease) both;
}
.hero-brand span { color: var(--red-l); }
.avail-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--glass);
  border: 1px solid var(--border-s);
  border-radius: var(--r-pill);
  padding: 8px 16px 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t1);
  margin-bottom: 32px;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  animation: fade-up .8s var(--ease) both;
}
.avail-dot {
  width: 7px; height: 7px;
  background: #2dbcab;
  border-radius: 50%;
  box-shadow: 0 0 10px #2dbcab;
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.hero-title {
  animation: fade-up .9s var(--ease) .08s both;
  margin-bottom: 26px;
}
.hero-title .und {
  position: relative;
  background: linear-gradient(135deg, var(--red-l) 0%, var(--red) 60%, var(--red-d) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.hero-title .und::after {
  content: '';
  position: absolute;
  bottom: 4%; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  opacity: .55;
  border-radius: 2px;
}
/* Keyword/geography line inside the H1 — carries the search signal
   without disturbing the display slogan above it. */
/* Beats the `.h1 span` gradient-text rule — this line stays plain. */
.hero-title .hero-h1-sub {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  display: block;
  /* The h1 above runs line-height .92, so its text box is tighter than the
     glyphs and a fixed 18px read as almost touching. Scaled with the
     heading instead. */
  margin-top: clamp(22px, 2.6vw, 34px);
  max-width: 620px;
  font-family: var(--body);
  /* Sized to hold this sentence on one line for the whole width the hero runs
     as two columns. The left column is (wrap - 56) / 2, so it is narrowest at
     1025px, and the clamp floor is what that width will take. Bumped back up
     at 1024 and below, where the column goes full width and the line has room
     again. */
  font-size: clamp(13.5px, 1.32vw, 16.5px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--t2);
}
.hero-lead {
  max-width: 640px;
  margin-bottom: 44px;
  animation: fade-up .9s var(--ease) .18s both;
}
/* Buttons on their own line under both hero columns, then the proof row
   centred on the full page width beneath them. The stats are deliberately
   NOT beside the buttons: four of them plus three buttons overflow the
   1184px wrap, and centring them across the whole page gives them room to
   be read at size. */
.hero-footrow {
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
  z-index: 1;
  margin-top: 30px;
}
.hero-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  animation: fade-up .9s var(--ease) .28s both;
}
.cta-pair { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-review svg { flex-shrink: 0; }
.hero-call {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, var(--red) 0%, var(--red-d) 100%);
  color: #fff;
  padding: 18px 32px;
  border-radius: var(--r-pill);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 18px 44px -10px var(--red-glow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  cursor: pointer;
}
.hero-call:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 26px 60px -10px var(--red-glow);
}
.hero-call svg { width: 19px; height: 19px; }

/* Four across, centred on the page under the buttons. Each column is the
   same width so the numerals and their labels line up as a set rather than
   drifting with the length of each word. */
.hero-stats {
  display: grid;
  /* The rules are grid items too, so the tracks alternate stat, rule, stat. */
  grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;
  align-items: center;
  justify-items: center;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  gap: 28px;
  text-align: center;
  animation: fade-up .9s var(--ease) .38s both;
}
.hs-divider {
  width: 1px;
  height: 46px;
  justify-self: center;
  background: linear-gradient(180deg, transparent, var(--border-s), transparent);
}
.hs-num {
  font-family: var(--display);
  font-size: clamp(38px, 4vw, 52px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff 0%, #aaa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hs-num.r {
  background: linear-gradient(180deg, var(--red-l) 0%, var(--red-d) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hs-lbl { font-size: 12px; font-weight: 500; color: var(--t3); margin-top: 6px; letter-spacing: .04em; }
.hs-link { display: block; text-decoration: none; transition: transform .2s var(--ease); }
.hs-link:hover { transform: translateY(-2px); }
.hs-link:hover .hs-lbl { color: var(--red-l); }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ================================================
   HERO TWO-COLUMN LAYOUT
================================================ */
.hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Row gap is 0 because the brand line carries its own margin-bottom; the
     two columns below it start on the same grid line either way. */
  column-gap: 56px;
  row-gap: 0;
  align-items: center;
  position: relative;
  z-index: 1;
  width: 100%;
}
/* Row one, spanning both columns. */
.hero-layout > .hero-brand { grid-column: 1 / -1; }
.hero-body { max-width: none; position: static; }

/* Hero quick-quote card */
.hero-qcard {
  background: rgba(9,24,22,0.6);
  border: 1px solid var(--border-s);
  border-radius: var(--r-xl);
  padding: 34px 28px;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 32px 72px -24px rgba(0,0,0,.7);
  animation: fade-up .9s var(--ease) .42s both;
  position: relative;
  overflow: hidden;
  top: -76px;
  left: 10px;
}
.hero-qcard::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(18,148,136,.1), transparent 55%);
  pointer-events: none;
}
/* ================================================
   TRUST BAR (glass strip)
================================================ */
.trust-bar {
  position: relative;
  padding: 0 22px;
  margin-top: -40px;
  z-index: 5;
}
.trust-inner {
  max-width: 1240px;
  margin: 0 auto;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
/* Seven equal cells on one line. It used to be a wrapping flex row, and
   seven items that each demanded 200px wrapped six-then-one: a full row of
   rules and a single stranded item centred underneath. Fixed tracks make
   every cell the same width and every rule land on a track edge.
   The negative margin pushes the last column's right rule and the last
   row's bottom rule past .trust-inner's overflow clip, so the dividers stay
   between cells and never draw on the outside edge. */
.trust-list {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin: 0 -1px -1px 0;
}
.trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 17px 8px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
  text-align: center;
}
.trust-item .ti {
  display: flex;
  align-items: center;
  color: var(--red);
}
.trust-item .ti svg { flex-shrink: 0; }
/* Seven tracks only while seven labels genuinely fit on one line each. Below
   that it steps 4, then 2, then 1. Seven is prime, so at every step but the
   first the last item spans two tracks; that is what keeps the final row
   full instead of ending in a hole. */
@media (max-width: 1219px) {
  .trust-list { grid-template-columns: repeat(4, 1fr); }
  .trust-item:last-child { grid-column: span 2; }
}
@media (max-width: 760px) {
  .trust-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .trust-list { grid-template-columns: 1fr; }
  .trust-item:last-child { grid-column: auto; }
}

/* ================================================
   SECTION HEADER
================================================ */
.sec-hdr { text-align: center; margin-bottom: 72px; max-width: 720px; margin-left: auto; margin-right: auto; }
.sec-hdr .lead { margin-top: 18px; }

section.padded { padding: 140px 0; position: relative; }
section.padded.bg-1 { background: linear-gradient(180deg, transparent, rgba(255,255,255,.02), transparent); }

/* ================================================
   SERVICES
================================================ */
.services { padding: 80px 0; position: relative; }
.services::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 80px;
  background: linear-gradient(var(--red), transparent);
}
/* ------------------------------------------------
   SERVICES SWITCH
   Three trades, one group visible at a time. The markup is three headed
   groups; the script adds .is-tabs and this turns them into a tablist.
------------------------------------------------ */
.svc-menu {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 6px;
  margin-bottom: 40px;
  border: 1px solid var(--border);
  border-radius: calc(var(--r-lg) + 6px);
  background: rgba(255,255,255,.028);
}
/* The moving block behind the active trade. One element the script slides,
   rather than a background that pops from item to item. */
.svc-menu-glow {
  position: absolute;
  top: 0; left: 0;
  border-radius: var(--r-lg);
  background: rgba(18,148,136,.16);
  border: 1px solid rgba(18,148,136,.42);
  box-shadow: 0 10px 30px -14px var(--red-glow);
  opacity: 0;
  pointer-events: none;
  will-change: transform, width, height;
}
.is-tabs .svc-menu-glow { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .svc-menu-glow { transition: transform .46s var(--ease-out), width .46s var(--ease-out), height .46s var(--ease-out), opacity .3s var(--ease); }
}
.svc-menu-item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 22px;
  border-radius: var(--r-lg);
  text-decoration: none;
  transition: color .3s var(--ease), background .3s var(--ease);
}
.svc-menu-name {
  font-family: var(--display);
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--t2);
  transition: color .3s var(--ease);
}
.svc-menu-meta {
  font-size: 12.5px;
  font-weight: 500;
  /* --t3 measures 4.07:1 on the page background, under the 4.5:1 body-text
     floor. --t2 is 8.2:1 and this line is doing real work: it is how you
     tell the three trades apart before you click one. */
  color: var(--t2);
  transition: color .3s var(--ease);
}
.svc-menu-item:hover .svc-menu-name { color: var(--t1); }
.svc-menu-item.is-on .svc-menu-name { color: var(--t1); }
.svc-menu-item.is-on .svc-menu-meta { color: var(--red-l); }
.svc-menu-item:focus-visible { outline: 2px solid var(--red-l); outline-offset: 2px; }
/* Before the script runs the groups are stacked and each keeps its heading.
   Once tabs are on the trade name lives in the menu, so the heading goes to
   screen readers only rather than being repeated on screen. */
.svc-panel + .svc-panel { margin-top: 56px; }
.svc-panel-h {
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  margin-bottom: 22px;
}
.is-tabs .svc-panel + .svc-panel { margin-top: 0; }
.is-tabs .svc-panel-h {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.svc-panel[hidden] { display: none; }

/* Flex, not grid: a trade can have 3 services or 11, and a leftover row has
   to look deliberate either way. Rows are thirds, and a short final row
   centres under the one above instead of leaving a hole on the right. */
.svc-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.svc-card { flex: 0 1 calc((100% - 32px) / 3); }
@media (max-width: 1000px) { .svc-card { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 640px)  { .svc-card { flex-basis: 100%; } }

@media (prefers-reduced-motion: no-preference) {
  .svc-panel.is-in .svc-card { animation: svc-card-in .5s var(--ease-out) both; animation-delay: 300ms; }
  .svc-panel.is-in .svc-card:nth-child(1) { animation-delay: 0ms; }
  .svc-panel.is-in .svc-card:nth-child(2) { animation-delay: 40ms; }
  .svc-panel.is-in .svc-card:nth-child(3) { animation-delay: 80ms; }
  .svc-panel.is-in .svc-card:nth-child(4) { animation-delay: 110ms; }
  .svc-panel.is-in .svc-card:nth-child(5) { animation-delay: 150ms; }
  .svc-panel.is-in .svc-card:nth-child(6) { animation-delay: 190ms; }
  .svc-panel.is-in .svc-card:nth-child(7) { animation-delay: 220ms; }
  .svc-panel.is-in .svc-card:nth-child(8) { animation-delay: 260ms; }
}
@keyframes svc-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .svc-menu { grid-template-columns: 1fr; margin-bottom: 30px; }
  .svc-menu-item { padding: 15px 18px; }
}
.svc-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.svc-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--r-lg);
  padding: 1px;
  background: linear-gradient(135deg, rgba(18,148,136,.45), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.svc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(18,148,136,.09), transparent 55%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.svc-card:hover {
  transform: translateY(-6px);
  background: var(--glass-strong);
  border-color: rgba(255,255,255,.12);
  box-shadow: var(--shadow-hover);
}
.svc-card:hover::before { opacity: 1; }
.svc-card:hover::after  { opacity: 1; }
.svc-icon {
  width: 52px; height: 52px;
  background: rgba(18,148,136,.1);
  border: 1px solid rgba(18,148,136,.22);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--red);
  margin-bottom: 22px;
  transition: background .3s var(--ease), border-color .3s var(--ease);
  position: relative;
  z-index: 1;
}
.svc-card:hover .svc-icon {
  background: rgba(18,148,136,.18);
  border-color: rgba(18,148,136,.45);
}
.svc-name {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  color: var(--t1);
  margin-bottom: 10px;
  letter-spacing: .01em;
  position: relative;
  z-index: 1;
}
.svc-desc {
  font-size: 14px;
  color: var(--t2);
  line-height: 1.7;
  position: relative;
  z-index: 1;
}
.svc-tag {
  position: absolute;
  top: 22px; right: 22px;
  z-index: 1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  color: var(--t3);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
}
.svc-tag.wash { color: var(--red-l); background: rgba(18,148,136,.1); border-color: rgba(18,148,136,.3); }

/* ================================================
   ABOUT / WHY US
================================================ */
.about {
  padding: 60px 0 100px;
  position: relative;
  overflow: hidden;
  background: var(--bg-1);
}
.about::before {
  content: '';
  position: absolute;
  top: 50%; right: -200px; transform: translateY(-50%);
  width: 700px; height: 700px;
  background: radial-gradient(ellipse, rgba(18,148,136,.07) 0%, transparent 65%);
  pointer-events: none;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: stretch;
  position: relative;
  z-index: 1;
}
.about-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.about-lead { max-width: 520px; margin-top: 18px; margin-bottom: 44px; }
.features { display: flex; flex-direction: column; gap: 24px; }
.feat {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px;
  border-radius: var(--r);
  background: var(--glass);
  border: 1px solid var(--border);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.feat:hover {
  background: var(--glass-strong);
  border-color: var(--border-s);
  transform: translateX(4px);
}
.feat-icon {
  width: 44px; height: 44px;
  background: rgba(18,148,136,.1);
  border: 1px solid rgba(18,148,136,.22);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--red);
  flex-shrink: 0;
}
.feat-copy h3, .feat-copy h4 { font-size: 16px; font-weight: 700; color: var(--t1); margin-bottom: 4px; }
.feat-copy p  { font-size: 14px; color: var(--t2); line-height: 1.65; }

.mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.mosaic-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 30px 22px;
  text-align: center;
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
}
.mosaic-card.wide {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(18,148,136,.12) 0%, rgba(18,148,136,.04) 100%);
  border-color: rgba(18,148,136,.3);
}
.mosaic-card.wide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(18,148,136,.25), transparent 60%);
  pointer-events: none;
}
.mosaic-card:hover {
  border-color: var(--border-r);
  transform: translateY(-4px);
  background: var(--glass-strong);
}
.mosaic-icon { display: flex; justify-content: center; margin-bottom: 12px; position: relative; z-index: 1; }
.mosaic-num {
  font-family: var(--display);
  font-size: 54px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, var(--red-l) 0%, var(--red-d) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  z-index: 1;
}
.mosaic-lbl {
  font-size: 13px;
  color: var(--t2);
  font-weight: 500;
  margin-top: 8px;
  position: relative;
  z-index: 1;
}
.mosaic-card.wide .mosaic-num { font-size: 68px; }

/* ================================================
   REVIEWS
================================================ */
.reviews { padding: 60px 0 120px; }
.rev-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 28px;
  margin-bottom: 64px;
}
.g-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 26px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
  text-decoration: none;
}
.g-badge:hover {
  background: var(--glass-strong);
  border-color: var(--border-r);
  transform: translateY(-2px);
}
.g-num {
  font-family: var(--display);
  font-size: 44px; font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #e9bd66 0%, #c08a32 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.g-stars { font-size: 15px; color: var(--gold); letter-spacing: 2px; margin: 3px 0 1px; }
.g-cnt { font-size: 12px; color: var(--t3); }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 18px;
}
.rc {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
}
.rc::before {
  content: '"';
  position: absolute;
  top: -28px; right: 18px;
  font-family: var(--display);
  font-size: 160px;
  color: rgba(18,148,136,.1);
  line-height: 1;
  pointer-events: none;
}
.rc:hover {
  background: var(--glass-strong);
  border-color: var(--border-r);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.rc.star { border-color: rgba(18,148,136,.32); background: linear-gradient(135deg, rgba(18,148,136,.05), rgba(18,148,136,.01)); }
.rc-stars { color: var(--gold); font-size: 13px; letter-spacing: 2px; margin-bottom: 14px; position: relative; z-index: 1; }
.rc-body {
  font-size: 14.5px;
  color: var(--t2);
  line-height: 1.72;
  flex: 1;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}
.rc-author { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.rc-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(18,148,136,.25), rgba(18,148,136,.1));
  border: 1px solid rgba(18,148,136,.32);
  color: var(--red);
  font-family: var(--display);
  font-size: 15px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rc-name { font-size: 14px; font-weight: 700; color: var(--t1); }
.rc-meta { font-size: 12px; color: var(--t3); margin-top: 2px; }

/* ================================================
   EMERGENCY BAND
================================================ */
.emg {
  padding: 88px 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #071512 0%, #0a2e29 55%, #071512 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.emg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 25% 50%, rgba(18,148,136,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 50%, rgba(56,196,182,.08) 0%, transparent 55%);
}
.emg::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(18,148,136,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,148,136,.06) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 50% 70% at 50% 50%, black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 50% 50%, black 20%, transparent 100%);
  opacity: .6;
}
.emg-inner {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.emg-text h2 {
  font-family: var(--display);
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 900;
  letter-spacing: -.015em;
  margin-bottom: 10px;
  line-height: 1.02;
}
.emg-text p { font-size: 17px; color: var(--t2); }
.emg-phone {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, var(--red) 0%, var(--red-d) 100%);
  color: #fff;
  padding: 20px 38px;
  border-radius: var(--r-pill);
  font-size: 24px; font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 22px 50px -10px var(--red-glow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.emg-phone:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 30px 70px -10px var(--red-glow);
}
.emg-phone svg { width: 22px; height: 22px; }

/* ================================================
   SERVICE AREA
================================================ */
.area { padding: 140px 0; position: relative; background: var(--bg-1); }
.area-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.area-desc { margin-top: 18px; margin-bottom: 36px; max-width: 500px; }
.cities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.city-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 10px;
  /* 11px a side lands these on 44px tall. Half of them are links to town
     pages and they are thumbed on a phone. */
  padding: 11px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--t2);
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.city-pill:hover { border-color: var(--border-r); color: var(--t1); background: var(--glass-strong); }
.city-pip { width: 6px; height: 6px; background: var(--red); border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px var(--red-glow); }
.city-pill.home { border-color: rgba(18,148,136,.4); color: var(--red); font-weight: 700; background: rgba(18,148,136,.06); }
/* Towns with a dedicated page render as <a>. The arrow marks them as
   somewhere to go, so a linked pill reads differently from a plain one. */
a.city-pill { text-decoration: none; }
a.city-pill::after {
  content: "";
  width: 5px; height: 5px;
  margin-left: 2px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
a.city-pill:hover { border-color: var(--border-r); }
a.city-pill:hover::after { opacity: 1; transform: rotate(45deg) translate(1px, -1px); }
/* The hub link closes the grid off — it belongs to all three columns, not one. */
.city-pill.all { grid-column: 1 / -1; justify-content: center; font-weight: 700; color: var(--red-l); }

.radar-wrap {
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  min-height: 460px;
}
.radar-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(18,148,136,.08), transparent 70%);
  pointer-events: none;
}
.radar-scene { position: relative; width: 360px; height: 360px; }
.ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(18,148,136,.14);
}
.ring-1 { width: 110px; height: 110px; }
.ring-2 { width: 190px; height: 190px; border-color: rgba(18,148,136,.1); }
.ring-3 { width: 280px; height: 280px; border-color: rgba(18,148,136,.06); }
.ring-4 { width: 360px; height: 360px; border-color: rgba(18,148,136,.03); }
.radar-sweep {
  position: absolute;
  top: 50%; left: 50%;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(18,148,136,.06) 50deg, rgba(18,148,136,.18) 90deg, transparent 90deg);
  animation: spin 4s linear infinite;
}
@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.radar-pin {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px;
  background: rgba(18,148,136,.18);
  border: 2px solid var(--red);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  box-shadow: 0 0 30px rgba(18,148,136,.5);
}
.city-dot {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  z-index: 3;
}
.dot-pip {
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
  animation: pulse-pip 2s ease-in-out infinite;
}
.dot-pip.home { width: 11px; height: 11px; box-shadow: 0 0 12px rgba(18,148,136,.7); }
.dot-lbl { font-size: 9.5px; font-weight: 600; color: var(--t2); white-space: nowrap; letter-spacing: .05em; }
@keyframes pulse-pip {
  0%,100% { box-shadow: 0 0 0 0 rgba(18,148,136,.5); }
  50%      { box-shadow: 0 0 0 6px rgba(18,148,136,0); }
}

/* ================================================
   CONTACT / QUOTE
================================================ */
.contact { padding: 140px 0; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.contact-lead { margin-top: 18px; max-width: 460px; }
.cinfo { display: flex; flex-direction: column; gap: 14px; margin-top: 40px; }
.ci {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.ci:hover { background: var(--glass-strong); border-color: var(--border-s); }
.ci-icon {
  width: 44px; height: 44px;
  background: rgba(18,148,136,.1);
  border: 1px solid rgba(18,148,136,.22);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ci-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--t3); margin-bottom: 3px; }
.ci-val { font-size: 15px; font-weight: 700; color: var(--t1); }
.ci-val a { color: var(--red); transition: color .2s; }
.ci-val a:hover { color: var(--red-l); }

.form-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 40px;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.form-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(18,148,136,.08), transparent 50%);
  pointer-events: none;
}
/* Every "Get a Free Quote" button on the site lands here, and the header is
   fixed — without this the top of the card parks underneath it. */
#quote { scroll-margin-top: 112px; }

/* The hero's short form. .hero-qcard is already the glass panel, so this one
   drops its own background, border and padding: a card inside a card stacks
   two sets of 40px padding and reads as a box someone forgot to close. */
.form-card.form-quick {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.form-card.form-quick::before { content: none; }
/* The short form's title carries the same-day line as well as the ask, so it
   runs longer than the one on the full form and needs to set on two even
   lines rather than one long one and an orphan. */
.form-quick .form-ttl {
  font-size: clamp(21px, 2vw, 25px);
  line-height: 1.2;
  text-wrap: balance;
  margin-bottom: 7px;
}
.form-more { margin-top: 10px; }
.form-more a {
  color: var(--red-l);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(45,188,171,.3);
  padding-bottom: 1px;
}
.form-more a:hover { border-bottom-color: var(--red-l); }
.form-ttl {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: -.01em;
  position: relative;
}
.form-sub {
  font-size: 13px;
  color: var(--t2);
  margin-bottom: 30px;
  position: relative;
}
.fgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  position: relative;
}
.fg { display: flex; flex-direction: column; gap: 6px; }
.fg.full { grid-column: 1 / -1; }
.fg label { font-size: 11.5px; font-weight: 700; color: var(--t2); text-transform: uppercase; letter-spacing: .08em; }
.fg input, .fg select, .fg textarea {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 13px 15px;
  color: var(--t1);
  font-family: var(--body);
  font-size: 14px;
  outline: none;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  width: 100%;
}
.fg select option { background: var(--bg-2); color: var(--t1); }
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color: rgba(18,148,136,.5);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px rgba(18,148,136,.12);
}
.fg input::placeholder, .fg textarea::placeholder { color: var(--t3); }
.fg textarea { resize: vertical; min-height: 110px; }
.fsub {
  width: 100%;
  margin-top: 8px;
  background: linear-gradient(180deg, var(--red) 0%, var(--red-d) 100%);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  padding: 16px;
  font-family: var(--body);
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 14px 36px -10px var(--red-glow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.fsub:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 22px 50px -10px var(--red-glow);
}

/* ================================================
   FOOTER
================================================ */
.footer {
  background: rgba(0,0,0,.3);
  border-top: 1px solid var(--border);
  padding: 80px 0 32px;
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translate(-50%, -50%);
  width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  opacity: .5;
}
.footer-cols {
  display: grid;
  /* Brand block plus four link columns: Services, Junk Removal,
     Service Area, Contact. Auto-fit keeps it from crushing when the
     sub-service or location lists grow. */
  grid-template-columns: 1.7fr repeat(4, minmax(140px, 1fr));
  gap: 40px;
  margin-bottom: 52px;
}
@media (max-width: 1100px) {
  .footer-cols { grid-template-columns: 1fr 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px; }
}
.footer-brand p { font-size: 14px; color: var(--t2); line-height: 1.72; margin-top: 18px; max-width: 290px; }
.footer-fb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 10px 18px 10px 14px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--t1);
  background: var(--glass);
  border: 1px solid var(--border-s);
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.footer-fb:hover {
  transform: translateY(-1px);
  background: rgba(18,148,136,.16);
  border-color: rgba(18,148,136,.45);
  color: var(--red-l);
}
.footer-fb svg { width: 17px; height: 17px; }
.fcol h3.fcol-h,
.fcol h4 {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--t1); margin-bottom: 18px;
}
.flinks { display: flex; flex-direction: column; gap: 11px; list-style: none; }
.flinks a { font-size: 14px; color: var(--t2); transition: color .2s; }
.flinks a:hover { color: var(--t1); }
.flinks li { font-size: 14px; color: var(--t2); }
.footer-btm {
  border-top: 1px solid var(--border);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-btm p { font-size: 13px; color: var(--t3); }
.footer-btm p a { color: var(--t2); text-decoration: underline; text-underline-offset: 2px; }
.footer-btm p a:hover { color: var(--red-l); }
.badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge {
  background: rgba(18,148,136,.1);
  border: 1px solid rgba(18,148,136,.28);
  color: var(--red);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em;
}

/* ================================================
   MOBILE STICKY CTA
================================================ */
.sticky-bar {
  display: none;
  position: fixed;
  inset: auto 10px 10px 10px;
  z-index: 150;
  background: var(--glass-nav);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid var(--border-s);
  border-radius: var(--r-pill);
  padding: 8px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.7);
}
.sticky-bar-inner { display: flex; gap: 8px; }
.sticky-bar a {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 700;
}
.sb-call { background: linear-gradient(180deg, var(--red-l), var(--red)); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.2) inset; }
.sb-quote { background: rgba(255,255,255,.07); color: var(--t1); border: 1px solid var(--border); }

/* ================================================
   MOBILE MENU
================================================ */
.mobile-menu {
  position: fixed;
  inset: 70px 16px auto 16px;
  z-index: 199;
  background: var(--glass-nav);
  border: 1px solid var(--border-s);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
}
.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.mobile-menu ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.mobile-menu a {
  display: block;
  padding: 14px 16px;
  border-radius: var(--r);
  font-size: 15px;
  font-weight: 600;
  color: var(--t1);
  transition: background .2s var(--ease);
}
.mobile-menu a:hover { background: rgba(255,255,255,.05); }

/* ================================================
   RESPONSIVE
================================================ */
@media (max-width: 1024px) {
  .about-grid, .area-grid, .contact-grid { grid-template-columns: 1fr; gap: 56px; }
  /* One column: brand, copy, then the card. The brand keeps its own
     margin-bottom, so the row gap only has to separate copy from card. */
  .hero-layout { grid-template-columns: 1fr; row-gap: 44px; }
  /* One column from here down, so the sub-line has the full width to sit on
     and can go back to a comfortable reading size. */
  .hero-title .hero-h1-sub { font-size: 16px; }
  .hero-layout > .hero-brand { margin-bottom: -20px; }
  /* Reset the manual desktop positioning offsets so the card stacks cleanly */
  .hero-qcard { top: 0; left: 0; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
}
@media (max-width: 768px) {
  .wrap { padding: 0 20px; }
  #hdr { padding: 0 14px; }
  #hdr .hdr-inner { padding: 8px 8px 8px 14px; }
  .logo-copy { display: block; }
  .logo-name { font-size: 16px; }
  .logo-sub { font-size: 9px; }
  .nav-call span.hide-sm { display: none; }
  .hero { padding: 140px 0 100px; }
  .hero-footrow { gap: 30px; }
  /* Four numerals will not read across a phone, so the proof folds to two
     columns and the rules between them go. */
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 22px 18px; max-width: 420px; }
  .hs-divider { display: none; }
  /* Tighten hero card padding on mobile. The fields inside collapse to one
     column with the rest of .fgrid, further down this same block. */
  .hero-qcard { padding: 28px 22px; }
  .rev-hdr { flex-direction: column; align-items: flex-start; }
  .emg-inner { flex-direction: column; text-align: center; }
  .emg-phone { width: 100%; justify-content: center; }
  .cities { grid-template-columns: 1fr 1fr; }
  .fgrid { grid-template-columns: 1fr; }
  .fg.full { grid-column: 1; }
  .footer-cols { grid-template-columns: 1fr; gap: 36px; }
  .footer-btm { flex-direction: column; text-align: center; }
  .sticky-bar { display: block; }
  body { padding-bottom: 88px; }
  .form-card { padding: 28px; }
  .services, .about, .reviews, .area, .contact { padding: 100px 0; }
}
/* ================================================
   WORK GALLERY
================================================ */
.work { padding: 80px 0; position: relative; }
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 16px;
}
.work-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-2);
  aspect-ratio: 3 / 4;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.work-card.feature { aspect-ratio: 3 / 4; }
.work-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-r);
  box-shadow: var(--shadow-hover);
}
.work-card picture { display: block; width: 100%; height: 100%; }
.work-card img,
.work-card video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.work-card:hover picture img,
.work-card:hover img,
.work-card:hover video { transform: scale(1.04); }
.work-cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 46px 18px 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(transparent, rgba(5,18,15,.9));
  pointer-events: none;
}
.work-cap svg { color: var(--red-l); flex-shrink: 0; }
@media (max-width: 768px) {
  .work { padding: 100px 0; }
  /* Below tablet width the grid becomes a horizontal, scroll-snapping strip
     instead of stacked rows — JS in base.njk nudges it along on its own,
     and a swipe or drag takes over from there. Bleeds to the viewport edge
     past .wrap's own padding so the next card visibly peeks in. */
  .work-grid {
    display: flex;
    grid-template-columns: unset;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -20px;
    padding: 4px 20px 10px;
  }
  .work-grid::-webkit-scrollbar { display: none; }
  /* Applied by the autoplay script in base.njk while it's actively driving
     the strip — scroll-snap fights a per-frame scrollLeft nudge, snapping
     it straight back to the nearest card on every tick. Snapping returns
     the instant a touch, drag or wheel pauses the drift, so a manual swipe
     still settles on a card. */
  .work-grid.is-autoplay { scroll-snap-type: none; }
  .work-card, .work-card.feature {
    flex: 0 0 74vw;
    max-width: 300px;
    aspect-ratio: 3 / 4;
    scroll-snap-align: center;
  }
}

@media (max-width: 480px) {
  /* .hero-ctas is a flex item now, so it sizes to its content unless told
     otherwise — without this the full-width buttons below are only as wide
     as the longest label. */
  .hero-footrow { align-items: stretch; }
  .hero-ctas { width: 100%; flex-direction: column; align-items: stretch; }
  .cta-pair { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-call { justify-content: center; }
  .btn-ghost { justify-content: center; }
}
@media (max-width: 360px) {
  /* Drop the tagline on very small phones so the name + CTAs never crowd */
  .logo-sub { display: none; }
}

/* ================================================
   SERVICE TAG — SPECIALTY VARIANT
================================================ */
.svc-tag.spec { color: var(--red-l); background: rgba(18,148,136,.12); border-color: rgba(18,148,136,.4); }


/* ================================================
   PRICING
================================================ */
.pricing { padding: 20px 0 110px; position: relative; }
.price-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 18px;
  align-items: stretch;
}
.price-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 34px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.price-card.feature {
  background: linear-gradient(150deg, rgba(18,148,136,.13) 0%, rgba(18,148,136,.03) 60%);
  border-color: rgba(18,148,136,.32);
}
.price-card.feature::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(18,148,136,.18), transparent 55%);
  pointer-events: none;
}
.price-ic {
  width: 54px; height: 54px;
  background: rgba(18,148,136,.1);
  border: 1px solid rgba(18,148,136,.24);
  border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  color: var(--red-l);
  margin-bottom: 22px;
  position: relative; z-index: 1;
}
.price-name {
  font-family: var(--display);
  font-size: 24px; font-weight: 800;
  letter-spacing: .01em;
  position: relative; z-index: 1;
}
.price-meta { font-size: 13.5px; color: var(--t2); margin-top: 6px; position: relative; z-index: 1; line-height: 1.6; }
.price-big {
  font-family: var(--display);
  font-size: clamp(48px, 7vw, 68px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--red-l);
  margin: 26px 0 4px;
  position: relative; z-index: 1;
}
.price-big small { font-size: 22px; font-weight: 800; color: var(--t2); }
.price-note {
  margin-top: auto;
  padding-top: 22px;
  font-size: 12.5px;
  color: var(--t3);
  position: relative; z-index: 1;
}
/* Real <table> so the tier pricing is eligible for a table featured snippet. */
.tier-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 22px;
  position: relative; z-index: 1;
}
.tier-table caption {
  caption-side: top;
  text-align: left;
  font-size: 12.5px;
  color: var(--t3);
  padding-bottom: 14px;
}
.tier-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--t3);
  text-align: left;
  padding-bottom: 10px;
}
.tier-table thead th.num { text-align: right; }
.tier-table tbody th,
.tier-table tbody td {
  padding: 13px 0;
  border-top: 1px solid var(--border);
  vertical-align: middle;
  text-align: left;
}
.tier-table tbody th {
  width: 140px;
  padding-right: 18px;
  font-size: 15px; font-weight: 700; color: var(--t1);
  letter-spacing: .01em;
  white-space: nowrap;
}
.tier-table tbody td.cap {
  padding-right: 18px;
  font-size: 12px; color: var(--t3);
}
.tier-table tbody td.cap .tier-bar { margin-top: 8px; max-width: 280px; }
.tier-table tbody td.num {
  width: 72px;
  font-family: var(--display);
  font-size: 22px; font-weight: 800;
  color: var(--t1);
  text-align: right;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.tier-bar {
  height: 9px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.tier-bar i {
  display: block; height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--red-d), var(--red-l));
  box-shadow: 0 0 12px rgba(18,148,136,.4);
}
@media (max-width: 880px) {
  .price-grid { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .tier-table tbody th { width: auto; font-size: 14px; white-space: normal; }
  .tier-table tbody td.cap .tier-bar { display: none; }
  .tier-table tbody td.num { font-size: 19px; }
}

/* ================================================
   HOW IT WORKS
================================================ */
.howto { padding: 20px 0 100px; position: relative; }
.howto-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 16px;
}
.howto-step {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.howto-step:hover { transform: translateY(-4px); border-color: var(--border-r); }
.howto-num {
  display: block;
  font-family: var(--display);
  font-size: 13px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--red-l);
  margin-bottom: 14px;
}
.howto-step h3 { font-size: 18px; font-weight: 700; color: var(--t1); margin-bottom: 10px; }
.howto-step p { font-size: 14.5px; color: var(--t2); line-height: 1.7; }

/* ================================================
   FAQ
================================================ */
.faq { padding: 20px 0 110px; position: relative; }
/* No `align-items: start` here on purpose. Grid's default stretch makes both
   cards in a row take the height of the taller one, so the pair reads as a
   matched set instead of two ragged boxes — the answers vary a lot in length.
   A trailing odd card would stretch to fill the row on its own, so the
   :last-child:nth-child(odd) rule below spans it across instead. */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.faq-item {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.faq-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.faq-item:last-child:nth-child(odd) .faq-a { max-width: 90ch; }
.faq-q { font-size: 17px; font-weight: 700; color: var(--t1); line-height: 1.35; margin-bottom: 12px; }
.faq-a { font-size: 14.5px; color: var(--t2); line-height: 1.75; }
.faq-more { margin-top: 36px; text-align: center; font-size: 15px; color: var(--t2); }
.faq-more a { color: var(--red-l); font-weight: 700; text-decoration: none; }
.faq-more a:hover { text-decoration: underline; }
@media (max-width: 820px) { .faq-grid { grid-template-columns: 1fr; } }

/* ================================================
   WORK CARD AS BUTTON + BEFORE/AFTER AFFORDANCES
================================================ */
.work-card {
  appearance: none;
  font-family: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
  width: 100%;
  display: block;
}
.ba-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
  padding: 6px 11px 6px 9px;
  border-radius: var(--r-pill);
  background: rgba(7,18,15,.6);
  border: 1px solid rgba(18,148,136,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ba-badge svg { color: var(--red-l); }
.work-zoom {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(7,18,15,.55);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: scale(.9);
  transition: opacity .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.work-card:hover .work-zoom,
.work-card:focus-visible .work-zoom { opacity: 1; transform: none; }
.work-card:hover .work-zoom { background: var(--red); border-color: transparent; }

/* A single before/after pair on a service page. Same .work-card behaviour and
   the same lightbox, but it shows both shots side by side rather than the
   "after" alone — on a page about one job there is nothing to withhold. */
.ba-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  aspect-ratio: auto;
  max-width: 720px;
  margin: 0 auto;
}
.ba-half { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; }
.ba-half picture { display: block; width: 100%; height: 100%; }
.ba-half img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-pair .lb-tag { z-index: 2; }
.ba-pair .work-cap { justify-content: center; }
/* A grid of single work-cards following a .ba-pair on the same page —
   the pair above needs its own breathing room before the grid starts. */
.ba-pair + .snow-work-grid { margin-top: 36px; }

/* ================================================
   LIGHTBOX (native dialog)
================================================ */
dialog.lb {
  border: none;
  padding: 0;
  background: transparent;
  color: var(--t1);
  /* Center in the viewport (overrides the UA top-anchored modal position) */
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: 980px;
  width: calc(100% - 32px);
  max-height: calc(100vh - 40px);
  overflow: visible;
}
dialog.lb::backdrop {
  background: rgba(4,12,11,.82);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.lb-inner {
  background: var(--bg-1);
  border: 1px solid var(--border-s);
  border-radius: var(--r-xl);
  padding: 22px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.lb-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.lb-title {
  font-family: var(--display);
  font-size: clamp(20px, 3vw, 27px);
  font-weight: 800; letter-spacing: -.01em;
}
.lb-count {
  margin-top: 2px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--t3);
}
.lb-close {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--glass-strong);
  border: 1px solid var(--border-s);
  color: var(--t1); cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.lb-close:hover { background: var(--red); border-color: transparent; transform: rotate(90deg); }
/* One photo at a time in a horizontally snapping track. Swipe and trackpad
   scrolling come free; .lb-nav and the arrow keys just scroll it too. */
.lb-stage { position: relative; }
.lb-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lb-track::-webkit-scrollbar { display: none; }
.lb-track:focus-visible { outline: 2px solid var(--red-l); outline-offset: 4px; border-radius: var(--r); }
.lb-slide {
  flex: 0 0 100%;
  /* No `scroll-snap-stop: always` here. It forces every programmatic scroll to
     stop at the very next snap point, so holding an arrow key leaves the track
     stuck one slide along while the counter has already run ahead. */
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
/* Wraps the photo rather than the slot, so the Before/After tag stays pinned
   to the corner of the image even when a tall shot leaves space either side.
   --lb-ar is the photo's own width/height, written inline by the script: the
   box is then the exact size of the photo before a byte of it has arrived,
   which is what stops the panel resizing under you as you page through. A
   lazily-loaded image reports no intrinsic size at all until it loads, so the
   width/height attributes alone will not hold the space. */
.lb-shot {
  position: relative;
  display: block;
  margin: 0 auto;
  aspect-ratio: var(--lb-ar, 1.3333);
  width: min(100%, calc(var(--lb-ar, 1.3333) * min(70vh, 680px)));
}
.lb-shot picture { display: block; width: 100%; height: 100%; }
.lb-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--bg-2);
}
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(7,18,15,.72);
  border: 1px solid var(--border-s);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .2s var(--ease), opacity .2s var(--ease), border-color .2s var(--ease);
}
.lb-nav.prev { left: -4px; }
.lb-nav.next { right: -4px; }
.lb-nav:hover { background: var(--red); border-color: transparent; }
.lb-nav[disabled] { opacity: .25; cursor: default; }
.lb-nav[disabled]:hover { background: rgba(7,18,15,.72); border-color: var(--border-s); }
.lb-hint {
  margin-top: 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--t3);
}
.lb-tag {
  position: absolute;
  top: 10px; left: 10px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(7,18,15,.66);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lb-tag.after { background: rgba(18,148,136,.85); border-color: transparent; }
.lb-tag.during { background: rgba(214,162,74,.85); border-color: transparent; }
@media (max-width: 640px) {
  .lb-inner { padding: 16px; }
  .lb-nav { width: 38px; height: 38px; }
  .lb-nav.prev { left: -6px; }
  .lb-nav.next { right: -6px; }
  .lb-shot img { max-height: 58vh; }
  .lb-hint { font-size: 11.5px; }
}
@media (prefers-reduced-motion: no-preference) {
  dialog.lb[open] { animation: lb-in .32s var(--ease); }
  dialog.lb[open]::backdrop { animation: lb-bg .32s var(--ease); }
}
@keyframes lb-in { from { opacity: 0; transform: translate(-50%, -50%) translateY(14px) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes lb-bg { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 768px) {
  .pricing { padding: 0 0 90px; }
}


/* ================================================
   SKIP LINK
================================================ */
.skip-link {
  position: absolute;
  left: 50%; top: 8px;
  transform: translate(-50%, -160%);
  z-index: 400;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  transition: transform .2s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ================================================
   NAV — SERVICES DROPDOWN
   Opens on hover and on :focus-within so it works without JS;
   the click/tap path adds .open on top of that.
================================================ */
.nav-links .has-sub { position: relative; }
.nav-sub-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px 9px 16px;
  border: none;
  background: transparent;
  border-radius: var(--r-pill);
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--t2);
  cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-sub-btn svg { transition: transform .25s var(--ease); }
.has-sub:hover .nav-sub-btn,
.has-sub.open .nav-sub-btn,
.has-sub:focus-within .nav-sub-btn { color: var(--t1); background: rgba(255,255,255,.05); }
.has-sub.open .nav-sub-btn svg,
.has-sub:hover .nav-sub-btn svg { transform: rotate(180deg); }

/* Groups the Services dropdown: core services, then junk-removal
   sub-pages, then service areas. Presentational only — aria-hidden. */
.nav-sub-sep {
  height: 1px;
  margin: 6px 10px;
  background: var(--border);
}

.nav-sub {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 268px;
  list-style: none;
  padding: 8px;
  border-radius: var(--r);
  background: rgba(9,24,22,.92);
  border: 1px solid var(--border-s);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 28px 60px -18px rgba(0,0,0,.75);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
/* A hover bridge, so the pointer can cross the 12px gap without it closing. */
.nav-sub::before { content: ''; position: absolute; inset: -14px 0 auto 0; height: 14px; }
.has-sub:hover .nav-sub,
.has-sub.open .nav-sub,
.has-sub:focus-within .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-sub a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--t2);
  white-space: nowrap;
}
.nav-sub a:hover { color: var(--t1); background: rgba(255,255,255,.06); }
.nav-sub a[aria-current="page"] { color: var(--red-l); background: rgba(18,148,136,.1); font-weight: 700; }

.mobile-menu .mm-head {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t3);
  padding: 14px 16px 6px;
}
.mobile-menu .mm-head:first-child { padding-top: 4px; }
.mobile-menu a[aria-current="page"] { color: var(--red-l); }

/* ================================================
   SERVICE TILES AS LINKS
================================================ */
a.svc-card { display: flex; flex-direction: column; }
a.svc-card .svc-desc { flex: 1; }
.svc-go {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red-l);
  opacity: .72;
  transition: opacity .3s var(--ease), gap .3s var(--ease);
}
.svc-go svg { transition: transform .3s var(--ease); }
a.svc-card:hover .svc-go { opacity: 1; gap: 11px; }
a.svc-card:hover .svc-go svg { transform: translateX(2px); }
a.svc-card:focus-visible { outline: 2px solid var(--red-l); outline-offset: 3px; }
.svc-tag.winter { color: #8fd4ff; background: rgba(120,190,240,.1); border-color: rgba(120,190,240,.32); }
.svc-tag.comm   { color: var(--gold); background: rgba(214,162,74,.1); border-color: rgba(214,162,74,.34); }

/* ================================================
   SERVICE PAGE — HERO
================================================ */
.svc-hero {
  position: relative;
  padding: 168px 0 84px;
  overflow: hidden;
  background: radial-gradient(ellipse 90% 70% at 50% 0%, #0c2926 0%, var(--bg-0) 62%);
}
.svc-hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.svc-hero .wrap { position: relative; z-index: 1; }

.crumbs { margin-bottom: 30px; }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  font-size: 12.5px;
  color: var(--t3);
}
.crumbs li + li::before {
  content: '/';
  margin-right: 8px;
  color: var(--t3);
  opacity: .55;
}
.crumbs a { color: var(--t2); transition: color .2s; }
.crumbs a:hover { color: var(--red-l); }
.crumbs span { color: var(--t1); font-weight: 600; }

.svc-hero-body { max-width: 880px; }
.svc-h1 {
  margin: 16px 0 22px;
  font-size: clamp(38px, 5.6vw, 72px);
}
.svc-hero-lead { max-width: 720px; font-size: clamp(16px, 1.5vw, 19px); }
.svc-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 38px;
}
.svc-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  margin-top: 42px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}
.svc-hero-facts li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--t2);
}
.shf-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--red-l);
  background: rgba(18,148,136,.12);
  border: 1px solid rgba(18,148,136,.3);
}

/* ================================================
   SERVICE PAGE — SECTIONS
================================================ */
.svc-sec { padding: 104px 0; position: relative; }
.svc-sec.alt { background: linear-gradient(180deg, transparent, rgba(255,255,255,.018) 22%, rgba(255,255,255,.018) 78%, transparent); }
.svc-faq { padding: 104px 0; }
.cities.centre { max-width: 900px; margin: 0 auto; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) { .cities.centre { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .cities.centre { grid-template-columns: 1fr 1fr; } }

.inc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}
.inc-grid.three { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.inc-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 26px 24px;
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.inc-card:hover { transform: translateY(-4px); border-color: var(--border-r); background: var(--glass-strong); }
.inc-card h3 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--t1);
  margin-bottom: 8px;
}
.inc-card p { font-size: 14px; color: var(--t2); line-height: 1.72; }
.inc-tick, .inc-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  margin-bottom: 16px;
  border-radius: 10px;
  color: var(--red-l);
  background: rgba(18,148,136,.12);
  border: 1px solid rgba(18,148,136,.3);
}
.inc-tick.winter { color: #8fd4ff; background: rgba(120,190,240,.1); border-color: rgba(120,190,240,.3); }
.inc-num {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 900;
}

.note-band {
  margin-top: 34px;
  padding: 28px 30px;
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(18,148,136,.09) 0%, var(--glass) 60%);
  border: 1px solid var(--border-r);
}
.note-band.wide { margin-top: 0; }
.note-band h3 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  color: var(--t1);
  margin-bottom: 10px;
}
.note-band p { font-size: 14.5px; color: var(--t2); line-height: 1.75; max-width: 86ch; }
.note-band .btn { margin-top: 20px; }

.compare { overflow-x: auto; }
.compare-table { min-width: 620px; }
.compare-table thead th:first-child { width: 24%; }
.compare-table tbody td { font-size: 14px; color: var(--t2); vertical-align: top; }
.compare-table tbody th { white-space: normal; }

/* ================================================
   SERVICE PAGE — OTHER SERVICES RAIL
================================================ */
.svc-rail { padding: 104px 0; }
.rail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
}
.rail-card {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--border);
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.rail-card:hover {
  transform: translateY(-6px);
  background: var(--glass-strong);
  border-color: var(--border-r);
  box-shadow: var(--shadow-hover);
}
.rail-card:focus-visible { outline: 2px solid var(--red-l); outline-offset: 3px; }
.rail-card h3 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  color: var(--t1);
  margin-bottom: 10px;
}
.rail-card p { font-size: 14px; color: var(--t2); line-height: 1.7; flex: 1; }
.rail-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--red-l);
  opacity: .8;
  transition: opacity .3s var(--ease), gap .3s var(--ease);
}
.rail-card:hover .rail-go { opacity: 1; gap: 12px; }

/* ================================================
   FORMS — LABELS, HINTS, ERRORS
================================================ */
.req-star { color: var(--red-l); margin-left: 2px; }
.req-note {
  margin-left: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--t3);
  text-transform: none;
}
.fg-hint {
  font-size: 12px;
  line-height: 1.55;
  color: var(--t3);
  margin-top: -1px;
}
.fg-hint.warn { color: var(--gold); }
.fg-hint.centre { text-align: center; margin-top: 12px; }
.fg-hint a { color: var(--red-l); font-weight: 700; }
.fg-err, .opt-err {
  font-size: 12.5px;
  font-weight: 600;
  color: #ff8f8f;
  min-height: 0;
}
.fg-err:empty, .opt-err:empty { display: none; }
.fg.has-err input, .fg.has-err select, .fg.has-err textarea {
  border-color: rgba(239,68,68,.6);
  background: rgba(239,68,68,.05);
}
.form-status { font-size: 13px; font-weight: 600; margin-top: 12px; text-align: center; }
.form-status:empty { display: none; }
.form-status.bad { color: #ff8f8f; }
.form-status.good { color: #6ee7a8; }
.form-status a { color: inherit; text-decoration: underline; }

/* ================================================
   FORMS — CHECKBOX / RADIO OPTION PILLS
================================================ */
fieldset.optset { border: none; padding: 0; margin: 0; min-width: 0; }
fieldset.optset legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.opt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.opt-grid.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .opt-grid, .opt-grid.two { grid-template-columns: 1fr; } }

.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  /* 13px of vertical padding puts a single-line option at 44px, the smallest
     a finger should have to hit. These are the first controls a phone
     visitor touches, so they are worth the extra two pixels a side. */
  padding: 13px 13px;
  min-height: 44px;
  border-radius: 11px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.opt:hover { border-color: var(--border-s); background: rgba(255,255,255,.055); }
/* The real control stays in the layout (so focus and click targets are real)
   but is invisible — .opt-tick is what you actually see. */
.opt input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.opt-tick {
  position: relative;
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--border-s);
  background: rgba(255,255,255,.04);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.opt-tick.round { border-radius: 50%; }
.opt-tick::after {
  content: '';
  position: absolute;
  left: 5px; top: 1.5px;
  width: 5px; height: 9.5px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.4);
  opacity: 0;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.opt-tick.round::after {
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  border: none;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%) scale(.4);
}
.opt-txt { font-size: 13.5px; font-weight: 600; color: var(--t2); line-height: 1.35; }
.opt input:checked ~ .opt-tick { background: var(--red); border-color: var(--red-l); }
.opt input:checked ~ .opt-tick::after { opacity: 1; transform: rotate(45deg) scale(1); }
.opt input:checked ~ .opt-tick.round::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.opt input:checked ~ .opt-txt { color: var(--t1); }
.opt:has(input:checked) { border-color: var(--border-r); background: rgba(18,148,136,.09); }
.opt input:focus-visible ~ .opt-tick { box-shadow: 0 0 0 3px rgba(18,148,136,.3); }
fieldset.optset.has-err .opt { border-color: rgba(239,68,68,.45); }

/* ================================================
   FORMS — CONDITIONAL WINTER PANEL
================================================ */
.winter-panel {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 24px 22px;
  border-radius: var(--r);
  background: linear-gradient(150deg, rgba(120,190,240,.07) 0%, rgba(255,255,255,.02) 60%);
  border: 1px solid rgba(120,190,240,.26);
}
.winter-panel[hidden] { display: none; }
.winter-panel.just-shown { animation: winter-in .38s var(--ease) both; }
@keyframes winter-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.winter-head { display: flex; gap: 13px; align-items: flex-start; }
/* Was an <h3>. These label a conditional group of form fields rather than
   starting a document section, and as headings they sat before the page's
   first <h2> — an H1 -> H3 skip on every page that renders a quote form.
   Same look, no longer part of the heading outline. */
.winter-head .winter-h {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 800;
  color: var(--t1);
  margin-bottom: 3px;
}
.winter-head p:not(.winter-h) { font-size: 12.5px; color: var(--t2); line-height: 1.6; }
.winter-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 10px;
  color: #8fd4ff;
  background: rgba(120,190,240,.12);
  border: 1px solid rgba(120,190,240,.3);
}
.winter-panel fieldset.optset legend { color: #a9ddff; }

/* ================================================
   FORMS — PHOTO UPLOAD
================================================ */
.filedrop {
  position: relative;
  border: 1.5px dashed var(--border-s);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.filedrop:hover, .filedrop.over { border-color: rgba(18,148,136,.55); background: rgba(18,148,136,.06); }
.filedrop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}
.filedrop-face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 16px;
  color: var(--t2);
  pointer-events: none;
  flex-wrap: wrap;
}
.filedrop-face b { font-size: 13.5px; font-weight: 700; color: var(--t1); }
.filedrop-face em { font-size: 12.5px; font-style: normal; color: var(--t3); }
.filedrop.busy .filedrop-face { opacity: .5; }
.filedrop input[type="file"]:focus-visible { outline: 2px solid var(--red-l); outline-offset: 2px; }

.file-list { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.file-list:empty { display: none; }
.file-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--border);
}
.file-list img {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 7px;
  object-fit: cover;
}
.fl-name {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--t2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fl-size { font-size: 11.5px; color: var(--t3); flex-shrink: 0; }
.fl-x {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: var(--t2);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.fl-x:hover { background: rgba(239,68,68,.25); color: #fff; }

/* ================================================
   HERO CARD HOSTING THE SHARED FORM
   The macro brings its own .form-card chrome; inside the hero card
   that would be a panel inside a panel, so it gets stripped back.
================================================ */
.hero-qcard { padding: 34px 28px; }
.hero-qcard .form-card {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}
.hero-qcard .form-card::before { display: none; }
.hero-qcard .form-ttl { font-size: 26px; }
.hero-qcard .form-sub { margin-bottom: 22px; }

@media (max-width: 768px) {
  .svc-hero { padding: 140px 0 68px; }
  .svc-sec, .svc-faq, .svc-rail { padding: 78px 0; }
  .note-band { padding: 24px 22px; }
  .hero-qcard { padding: 28px 22px; }
}

/* The hero card now carries the full quote form, so it is much taller than
   the old five-field version. Centring it against the copy column and
   floating it up 76px both stop making sense at that height. */
.hero-layout { align-items: start; }
.hero-qcard { top: 0; left: 0; }

/* The option pills are <label>s inside a .fg, so the uppercase field-label
   rule catches them. Put them back to sentence case. */
.fg label.opt, .form-card label.opt, .hero-qcard label.opt {
  text-transform: none;
  letter-spacing: 0;
  font-size: inherit;
  font-weight: 400;
  color: inherit;
}

/* ================================================
   COMMERCIAL CONDITIONAL PANEL
   Same shape as the residential winter block, brass-tinted so the two are
   distinguishable when a customer ticks both snow services at once.
================================================ */
.winter-panel.comm {
  background: linear-gradient(150deg, rgba(214,162,74,.07) 0%, rgba(255,255,255,.02) 60%);
  border-color: rgba(214,162,74,.26);
}
.winter-panel.comm fieldset.optset legend { color: #e0c48d; }
.winter-ic.comm {
  color: var(--gold);
  background: rgba(214,162,74,.12);
  border-color: rgba(214,162,74,.3);
}
.winter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .winter-row { grid-template-columns: 1fr; } }

/* ================================================
   LEGAL / PROSE PAGES (privacy policy, etc.)
================================================ */
.legal-hero {
  padding: 148px 0 40px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-grad);
}
.legal-hero .crumbs { margin-bottom: 22px; }
.legal-hero .h1 { font-size: clamp(34px, 5vw, 56px); margin-bottom: 10px; }
.legal-updated { font-size: 13.5px; color: var(--t3); }

.legal-body {
  padding: 56px 0 96px;
}
.legal-prose {
  max-width: 760px;
  color: var(--t2);
  font-size: 15.5px;
  line-height: 1.75;
}
.legal-prose h2 {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  color: var(--t1);
  margin: 40px 0 14px;
}
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose p { margin-bottom: 16px; }
.legal-prose ul {
  margin: 0 0 16px;
  padding-left: 22px;
}
.legal-prose li { margin-bottom: 8px; }
.legal-prose li::marker { color: var(--red); }
.legal-prose strong { color: var(--t1); font-weight: 700; }
.legal-prose a { color: var(--red-l); text-decoration: underline; text-underline-offset: 2px; }
.legal-prose a:hover { color: var(--t1); }