/* =========================================================================
   Titan Tow & Repair — design system
   Original stylesheet. Single file, no framework, no build step, ~30KB
   uncompressed so it inlines or ships in one request either way.
   ========================================================================= */

/* ---------- fonts -------------------------------------------------------
   Self-hosted so there is no third-party connection on the critical path.
   Run `npm run assets` to populate /fonts. If the files are absent the
   fallback stack below keeps the page readable and correctly proportioned. */

@font-face {
  font-family: 'Instrument Sans';
  src: url('fonts/instrument-sans.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Sans';
  src: url('fonts/ibm-plex-sans.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Sans';
  src: url('fonts/ibm-plex-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

/* ---------- tokens ----------------------------------------------------- */

:root {
  /* surface + ink */
  --concrete: #f1f2ef;
  --white: #ffffff;
  --asphalt: #15181b;
  --steel: #59636b;
  --line: #dcdfd9;
  --line-soft: #c9cec6;
  --surface-sunk: #dde1da;
  --photo-bg: #2a3036;

  /* brand */
  --green: #2fa14d;
  --green-btn: #1b7a38;
  --green-btn-hov: #12602a;
  --green-ink: #177033;
  --green-deep: #0c3218;
  --amber: #f0a227;

  /* Accessible variants. --green on --green-deep measures 4.26:1 and
     --steel on --footer-bg measures 3.13:1 — both under the 4.5:1 WCAG AA
     floor for body-size text. These are the same hues, lifted just far
     enough to pass, and are used only where those pairings occur. */
  --green-on-dark: #3cb45b;
  --ink-on-footer: #78838d;

  /* text tones on light */
  --ink-1: #3a4249;
  --ink-2: #4a5259;
  --ink-3: #525a61;

  /* text tones on dark */
  --ink-inv-1: #c3cad0;
  --ink-inv-2: #b6bec4;
  --ink-inv-3: #aeb7bd;
  --ink-field-1: #d6dcd3;
  --ink-field-2: #c6d0c8;

  --footer-bg: #0d0f11;
  --footer-line: #232b32;

  /* fluid type — min at 360px, max at ~1400px */
  --fs-xs: clamp(12.5px, 0.3vw + 11.6px, 13.5px);
  --fs-sm: clamp(13.5px, 0.34vw + 12.5px, 14.5px);
  --fs-base: clamp(14.5px, 0.44vw + 13.3px, 16px);
  --fs-md: clamp(15.5px, 0.52vw + 14.1px, 17.5px);
  --fs-lg: clamp(16.5px, 0.72vw + 14.6px, 19px);
  --fs-xl: clamp(18px, 1.05vw + 15.2px, 22px);
  --fs-h3: clamp(17.5px, 1.1vw + 14.6px, 22px);
  --fs-h2: clamp(27px, 3.3vw + 14px, 48px);
  --fs-h1: clamp(30px, 3.04vw + 20.3px, 66px);

  --pad: clamp(20px, 5vw, 64px);
  --sec-y: clamp(58px, 7vw, 96px);
  --r: 7px;
  --hdr: 112px;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  --font-d: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --font-b: 'Plex Sans', 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
}

/* ---------- reset ------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr) + 12px);
}
body {
  margin: 0;
  background: var(--concrete);
  color: var(--asphalt);
  font-family: var(--font-b);
  font-size: var(--fs-base);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,
svg,
video {
  max-width: 100%;
  display: block;
}
img {
  height: auto;
  background: var(--surface-sunk);
}
figure {
  margin: 0;
}
a {
  color: var(--green-ink);
  text-underline-offset: 3px;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
p {
  margin: 0 0 1em;
}
p:last-child {
  margin-bottom: 0;
}
button {
  font: inherit;
  cursor: pointer;
}
:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- type ------------------------------------------------------- */

.d {
  font-family: var(--font-d);
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 0.97;
  text-wrap: balance;
  margin: 0;
}
h1.d {
  font-size: var(--fs-h1);
}
h2.d {
  font-size: var(--fs-h2);
}
h3.d {
  font-size: var(--fs-h3);
  font-variation-settings: 'wdth' 96, 'wght' 700;
  line-height: 1.12;
  letter-spacing: -0.024em;
}
.cond {
  font-variation-settings: 'wdth' 75, 'wght' 700;
  font-stretch: 75%;
  text-transform: uppercase;
  letter-spacing: -0.018em;
  line-height: 0.86;
}
.lede {
  font-size: var(--fs-lg);
  color: var(--ink-1);
  max-width: 52ch;
}
.inv .lede,
.close .lede {
  color: var(--ink-inv-1);
}
.eyebrow {
  font-family: var(--font-d);
  font-variation-settings: 'wdth' 90, 'wght' 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-ink);
  display: block;
  margin-bottom: 14px;
}
.inv .eyebrow,
.field .eyebrow,
.close .eyebrow {
  color: var(--green-on-dark);
}

/* Photo-filled section headings. The gradient darkens the photo so the letter
   forms stay legible; @supports keeps solid ink for engines that cannot clip. */
.d.fill,
.d.fill-b {
  color: var(--asphalt);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .d.fill,
  .d.fill-b {
    background-image: linear-gradient(rgba(13, 16, 18, 0.66), rgba(13, 16, 18, 0.66)),
      var(--fill-img, url('img/web/wrecker-s-400.webp'));
    background-size: auto, 118%;
    background-position: 0 0, 44% 40%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .d.fill-b {
    --fill-img: url('img/web/flatbed-container-400.webp');
    background-size: auto, 112%;
    background-position: 0 0, 48% 44%;
  }
}

/* ---------- layout ----------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--pad);
}
.sec {
  padding-block: var(--sec-y);
}
.sec-alt {
  background: var(--white);
}
.sec-head {
  max-width: 68ch;
  margin-bottom: clamp(30px, 3.6vw, 52px);
}
.sec-head.mid {
  margin-inline: auto;
  text-align: center;
}
.sec-head .lede {
  margin-top: 18px;
}
.sec-head.mid .lede {
  margin-inline: auto;
}
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--asphalt);
  color: var(--white);
  padding: 12px 18px;
  z-index: 200;
  border-radius: 0 0 var(--r) 0;
}
.skip:focus {
  left: 0;
}

/* ---------- header ----------------------------------------------------- */

header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(241, 242, 239, 0.94);
  /* -webkit- prefix is still required by iOS Safari — a large share of
     "truck broken down" traffic. The rgba background is near-opaque, so the
     unprefixed-only version degrades quietly rather than breaking. */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hd {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--hdr);
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}
.logo img {
  height: 78px;
  width: auto;
  background: none;
  transition: transform 0.28s var(--ease);
}
.logo:hover img {
  transform: scale(1.05);
}
.logo-txt {
  font-family: var(--font-d);
  font-variation-settings: 'wdth' 80, 'wght' 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.92;
  font-size: 20px;
  display: none;
}
.logo-txt small {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--steel);
  font-variation-settings: 'wdth' 100, 'wght' 600;
}
nav.main {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 26px);
}
nav.main a {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--asphalt);
  text-decoration: none;
  padding: 6px 0;
  position: relative;
}
nav.main a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.28s var(--ease);
}
nav.main a:hover::after,
nav.main a[aria-current='page']::after {
  transform: scaleX(1);
}
.navcta {
  display: flex;
  gap: 10px;
  align-items: center;
}
.burger {
  display: none;
  width: 46px;
  height: 42px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: transparent;
  position: relative;
}
.burger span,
.burger span::before,
.burger span::after {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--asphalt);
  content: '';
  transition: transform 0.28s var(--ease), top 0.2s, bottom 0.2s, background 0.2s;
}
.burger span {
  top: 50%;
  margin-top: -1px;
}
.burger span::before {
  top: -7px;
  left: 0;
  right: 0;
}
.burger span::after {
  bottom: -7px;
  left: 0;
  right: 0;
}
header.open .burger span {
  background: transparent;
}
header.open .burger span::before {
  top: 0;
  transform: rotate(45deg);
}
header.open .burger span::after {
  bottom: 0;
  transform: rotate(-45deg);
}

/* ---------- buttons ---------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 19px;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.24s, color 0.24s, transform 0.28s var(--ease), box-shadow 0.28s;
  white-space: nowrap;
}
.btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.28s var(--ease);
}
.btn:hover svg {
  transform: translateX(3px);
}
.btn-p {
  background: var(--green-btn);
  color: var(--white);
}
.btn-p:hover {
  background: var(--green-btn-hov);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -12px rgba(27, 122, 56, 0.9);
}
.btn-s {
  border-color: var(--asphalt);
  color: var(--asphalt);
}
.btn-s:hover {
  background: var(--asphalt);
  color: var(--white);
  transform: translateY(-2px);
}
.inv .btn-s,
.close .btn-s,
.field .btn-s {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
}
.inv .btn-s:hover,
.close .btn-s:hover,
.field .btn-s:hover {
  background: var(--white);
  color: var(--asphalt);
}
.btn-l {
  background: var(--white);
  color: var(--asphalt);
}
.btn-l:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.7);
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.clink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--green-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(23, 112, 51, 0.32);
  padding-bottom: 2px;
  transition: gap 0.24s var(--ease), border-color 0.24s;
}
.clink svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.clink:hover {
  gap: 11px;
  border-color: var(--green-ink);
}
.inv .clink,
.close .clink,
.field .clink {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.35);
}

/* ---------- hero ------------------------------------------------------- */

.hero {
  padding-block: clamp(38px, 5vw, 78px) clamp(46px, 6vw, 84px);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  gap: clamp(28px, 3vw, 40px);
  align-items: center;
}
.hero-txt .lede {
  margin: 22px 0 30px;
  max-width: 44ch;
}
.hero h1 .l2 {
  display: block;
}
.plate {
  position: relative;
  z-index: 2;
  transform: rotate(-2.4deg);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 34px 70px -28px rgba(21, 24, 27, 0.55);
  background: var(--photo-bg);
}
.plate img {
  width: 100%;
  height: clamp(300px, 28vw, 560px);
  object-fit: cover;
  object-position: 52% 50%;
  transition: transform 1.2s var(--ease);
}
.plate:hover img {
  transform: scale(1.03);
}

/* AEO: the direct-answer block. Deliberately the first prose an extractor
   meets after the H1, 40–60 words, self-contained, no pronouns pointing
   back at the heading. */
.answer {
  /* Top rule rather than a left tab: the reference's whole border vocabulary
     is horizontal (.klist li, .step, .strip, .marquee all use border-top), so
     this sits inside the theme instead of importing a different idiom. */
  border-top: 2px solid var(--asphalt);
  padding: 20px 0 0;
  font-size: var(--fs-md);
  color: var(--ink-1);
  max-width: 74ch;
  position: relative;
}
.answer::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 64px;
  height: 2px;
  background: var(--green);
}
.answer strong {
  color: var(--asphalt);
}

/* ---------- tapered dark band + stat strip ----------------------------- */

.taper {
  position: relative;
  background: var(--asphalt);
  color: var(--white);
  clip-path: polygon(0 46px, 100% 0, 100% 100%, 0 100%);
  margin-top: -46px;
  padding-block: clamp(64px, 7vw, 100px) clamp(38px, 4vw, 58px);
}
.taper::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--green);
  transform: rotate(-1.35deg);
  transform-origin: 0 0;
}
.inv h2.d,
.inv h3.d,
.inv .d {
  color: var(--white);
}
.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.strip > div {
  padding: 30px 26px 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}
.strip > div:first-child {
  padding-left: 0;
}
.strip > div:last-child {
  border-right: 0;
  padding-right: 0;
}
.strip .k {
  font-family: var(--font-d);
  font-variation-settings: 'wdth' 96, 'wght' 700;
  font-size: var(--fs-xl);
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.05;
  display: block;
  white-space: nowrap;
}
.strip .k.amb {
  color: var(--amber);
}
.strip p {
  margin: 9px 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-inv-2);
  max-width: 26ch;
}

/* ---------- cards ------------------------------------------------------ */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 31px);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 21px);
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 31px);
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.34s var(--ease), box-shadow 0.34s var(--ease), border-color 0.3s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -26px rgba(21, 24, 27, 0.55);
  border-color: var(--line-soft);
}
.card > figure {
  overflow: hidden;
  background: var(--photo-bg);
}
.card > figure img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.card:hover > figure img {
  transform: scale(1.045);
}
.card-b {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.card-b p {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  flex: 1;
  margin: 0;
}
.card-b .clink {
  align-self: flex-start;
  margin-top: 4px;
}
.sec-alt .card {
  background: var(--concrete);
}

/* ---------- icon lists ------------------------------------------------- */

.klist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px) clamp(20px, 3vw, 44px);
}
.klist-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.klist li {
  border-top: 1px solid var(--line-soft);
  padding-top: 18px;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
  transition: border-color 0.3s;
}
.klist li:hover {
  border-top-color: var(--asphalt);
}
.inv .klist li,
.field .klist li {
  border-top-color: rgba(255, 255, 255, 0.22);
}
.field .klist li:hover {
  border-top-color: var(--white);
}
.klist b {
  font-family: var(--font-d);
  font-variation-settings: 'wdth' 96, 'wght' 700;
  font-size: var(--fs-md);
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 3px;
}
.inv .klist b,
.field .klist b {
  color: var(--white);
}
.klist .s {
  color: var(--ink-2);
  font-size: var(--fs-sm);
}
.inv .klist .s {
  color: var(--ink-inv-2);
}
.field .klist .s {
  color: var(--ink-field-2);
}
.tile {
  width: 48px;
  height: 48px;
  border-radius: var(--r);
  background: rgba(47, 161, 77, 0.13);
  display: grid;
  place-items: center;
  transition: transform 0.3s var(--ease), background 0.3s;
}
.tile svg {
  width: 24px;
  height: 24px;
  stroke: var(--green-ink);
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.inv .tile,
.field .tile {
  background: rgba(255, 255, 255, 0.14);
}
.inv .tile svg,
.field .tile svg {
  stroke: var(--white);
}
.klist li:hover .tile {
  transform: translateY(-3px) rotate(-4deg);
  background: rgba(47, 161, 77, 0.24);
}
.field .klist li:hover .tile {
  background: rgba(255, 255, 255, 0.24);
}

/* ---------- split / bleed band ----------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(26px, 4vw, 64px);
  align-items: center;
}
.stack {
  display: grid;
  gap: 16px;
}
.stack img {
  border-radius: var(--r);
  width: 100%;
  object-fit: cover;
  background: var(--photo-bg);
}
.stack .s1 {
  height: clamp(180px, 20vw, 272px);
}
.stack .s2 {
  height: clamp(130px, 14vw, 182px);
}

/* ---------- green field band ------------------------------------------- */

.field {
  background: var(--green-deep);
  color: var(--ink-field-1);
  position: relative;
  overflow: hidden;
  padding-block: clamp(58px, 7vw, 104px);
  --photoW: clamp(240px, 36vw, 560px);
}
.field::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--green);
  clip-path: polygon(54% 0, 100% 0, 100% 44%, 74% 0);
  z-index: 1;
}
.field::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: var(--green);
}
.field .wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max(0px, calc(var(--photoW) - max(0px, (100vw - 1240px) / 2) + 40px));
}
.field .wrap > * {
  grid-column: 1;
  max-width: 100%;
}
.field h2 {
  color: var(--white);
  max-width: 16ch;
}
.field .lede {
  color: var(--ink-field-1);
  margin-top: 20px;
}
.field .klist {
  margin-top: clamp(28px, 3vw, 42px);
}
.field .cta-row {
  margin-top: 30px;
}
.field-photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: var(--photoW);
  z-index: 0;
  overflow: hidden;
  margin: 0;
}
.field-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 34% 52%;
  filter: saturate(0.85) contrast(1.05);
}
.field-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--green-deep) 0%, rgba(12, 50, 24, 0.9) 30%, rgba(12, 50, 24, 0.5) 100%);
}

/* ---------- steps ------------------------------------------------------ */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 31px);
}
.step {
  border-top: 2px solid var(--asphalt);
  padding-top: 20px;
}
.step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.step .n {
  font-family: var(--font-d);
  font-variation-settings: 'wdth' 75, 'wght' 700;
  font-size: clamp(38px, 3.4vw, 52px);
  line-height: 0.8;
  color: var(--green);
  display: block;
  transition: transform 0.3s var(--ease);
}
.step:hover .n {
  transform: translateY(-3px);
}
.step .tile {
  width: 52px;
  height: 52px;
}
.step .tile svg {
  width: 26px;
  height: 26px;
}
.step:hover .tile {
  transform: translateY(-3px) rotate(4deg);
  background: rgba(47, 161, 77, 0.24);
}
.step p {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  margin: 8px 0 0;
}

/* ---------- coverage + marquee ----------------------------------------- */

.cover {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.towns {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.towns a,
.towns span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 100px;
  background: var(--white);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--asphalt);
  text-decoration: none;
  transition: background 0.24s, color 0.24s, transform 0.24s var(--ease), border-color 0.24s;
}
.towns a::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.towns a:hover {
  background: var(--asphalt);
  border-color: var(--asphalt);
  color: var(--white);
  transform: translateY(-2px);
}
.towns span {
  color: var(--ink-3);
  font-weight: 400;
  background: transparent;
}
.marquee {
  margin-top: clamp(32px, 4vw, 52px);
  overflow: hidden;
  position: relative;
  padding-block: 14px;
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: townscroll 42s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}
.marquee a {
  font-family: var(--font-d);
  font-variation-settings: 'wdth' 82, 'wght' 700;
  text-transform: uppercase;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  color: var(--steel);
  text-decoration: none;
  padding-inline: 20px;
  white-space: nowrap;
  transition: color 0.24s;
}
.marquee a:hover {
  color: var(--green-ink);
}
.marquee .dot {
  color: var(--green);
}
@keyframes townscroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---------- find us ---------------------------------------------------- */

.findus {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: stretch;
}
.mapwrap {
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-sunk);
  min-height: 340px;
}
.mapwrap iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  display: block;
}
.mapfacade {
  min-height: 340px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: clamp(24px, 3vw, 36px);
  background: repeating-linear-gradient(
      45deg,
      transparent 0 14px,
      rgba(89, 99, 107, 0.055) 14px 15px
    ),
    var(--surface-sunk);
}
.mapfacade .s {
  font-size: var(--fs-sm);
  color: var(--steel);
  margin: 0;
}
.mapfacade .tiny {
  font-size: var(--fs-xs);
  max-width: 46ch;
}
.findcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sec-alt .findcard {
  background: var(--concrete);
}
.findrow {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 12px;
  padding-block: 12px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.findrow dt {
  color: var(--steel);
  font-weight: 600;
}
.findrow dd {
  margin: 0;
  color: var(--asphalt);
}
.findrow dd a {
  color: var(--green-ink);
  font-weight: 600;
  text-decoration: none;
}
.findrow dd a:hover {
  text-decoration: underline;
}
.dirbtns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}
.addr {
  font-style: normal;
  font-family: var(--font-d);
  font-variation-settings: 'wdth' 96, 'wght' 700;
  font-size: var(--fs-md);
  line-height: 1.35;
  letter-spacing: -0.02em;
}

/* ---------- fleet units ------------------------------------------------ */

.unit {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--white);
  transition: transform 0.34s var(--ease), box-shadow 0.34s var(--ease);
}
.sec-alt .unit {
  background: var(--concrete);
}
.unit:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 36px -24px rgba(21, 24, 27, 0.5);
}
.unit img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: var(--photo-bg);
}
.unit-b {
  padding: 18px 20px 22px;
}
.unit-b p {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  margin: 8px 0 0;
}

/* ---------- reviews ---------------------------------------------------- */

.proof {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(22px, 3vw, 46px);
  align-items: center;
}
.score {
  text-align: center;
}
.score b {
  font-family: var(--font-d);
  font-variation-settings: 'wdth' 82, 'wght' 700;
  font-size: clamp(52px, 6vw, 88px);
  line-height: 0.86;
  display: block;
  letter-spacing: -0.04em;
}
.score .s {
  font-size: var(--fs-sm);
  color: var(--steel);
  display: block;
  margin-top: 6px;
}
.stars {
  color: var(--amber);
  letter-spacing: 3px;
  font-size: 18px;
  line-height: 1;
  margin-top: 10px;
}
.quotes-wrap {
  margin-top: clamp(34px, 4vw, 54px);
}
.quotes {
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  scrollbar-width: thin;
}
.rev {
  flex: 0 0 min(400px, 84vw);
  scroll-snap-align: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sec-alt .rev {
  background: var(--concrete);
}
.rev-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rev-top img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 44px;
}
.rev-who b {
  display: block;
  font-size: var(--fs-sm);
}
.rev-who span {
  font-size: var(--fs-xs);
  color: var(--steel);
}
.rev p {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  flex: 1;
  margin: 0;
}
.rev .stars {
  margin: 0;
  font-size: 14px;
}
.qnav {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}
.qbtn {
  width: 42px;
  height: 42px;
  border-radius: var(--r);
  border: 1px solid var(--line-soft);
  background: transparent;
  display: grid;
  place-items: center;
  transition: background 0.24s, color 0.24s, transform 0.24s var(--ease);
}
.qbtn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.qbtn:hover {
  background: var(--asphalt);
  color: var(--white);
}
.qhint {
  font-size: var(--fs-xs);
  color: var(--steel);
  margin-left: auto;
}

/* ---------- FAQ -------------------------------------------------------- */

.faq {
  max-width: 860px;
  margin-inline: auto;
}
.faq details {
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 14px 22px 0;
  font-family: var(--font-d);
  font-variation-settings: 'wdth' 96, 'wght' 700;
  font-size: var(--fs-h3);
  letter-spacing: -0.017em;
  transition: color 0.24s;
}
/* The question text slides right on hover. Done with transform on the label
   rather than padding on the <summary>: identical result (the icon is
   margin-left:auto so it never moved anyway), but it runs on the compositor
   instead of forcing a layout pass on every frame. */
.faq summary .q {
  display: block;
  transition: transform 0.3s var(--ease);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: var(--green);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.3s var(--ease);
}
.faq summary:hover .q,
.faq details[open] summary .q {
  transform: translateX(18px);
}
.faq summary:hover::before,
.faq details[open] summary::before {
  transform: scaleY(1);
}
.faq details[open] summary {
  color: var(--green-ink);
}
.faq .ic {
  flex: 0 0 44px;
  height: 44px;
  border-radius: var(--r);
  background: var(--asphalt);
  display: grid;
  place-items: center;
  margin-left: auto;
  transition: background 0.25s, transform 0.35s var(--ease);
}
.faq .ic svg {
  width: 19px;
  height: 19px;
  stroke: var(--white);
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
}
.faq details[open] .ic {
  background: var(--green-btn);
  transform: rotate(90deg);
}
.faq details[open] .ic svg line:last-child {
  transform: scaleY(0);
  transform-origin: center;
}
.faq .ans {
  padding: 0 60px 26px 18px;
  color: var(--ink-2);
  max-width: 72ch;
}

/* ---------- blog ------------------------------------------------------- */

.meta {
  font-family: var(--font-d);
  font-variation-settings: 'wdth' 90, 'wght' 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-ink);
}
.card-b h2 a {
  color: inherit;
  text-decoration: none;
}
.card:hover .card-b h2 a {
  color: var(--green-ink);
}
.postmeta {
  margin-top: 22px;
  font-size: var(--fs-sm);
  color: var(--steel);
}
article .prose {
  max-width: 68ch;
}
article .prose p {
  font-size: var(--fs-md);
}

/* ---------- prose (city + service body copy) --------------------------- */

.prose {
  max-width: 72ch;
}
.prose h2 {
  margin-top: clamp(34px, 4vw, 52px);
  margin-bottom: 16px;
}
.prose h3 {
  margin-top: clamp(24px, 3vw, 34px);
  margin-bottom: 10px;
}
.prose > :first-child {
  margin-top: 0;
}
.prose p,
.prose li {
  color: var(--ink-2);
}
.prose ul {
  list-style: disc;
  padding-left: 22px;
  margin: 0 0 1em;
}
.prose ul li {
  margin-bottom: 8px;
}
.prose a {
  font-weight: 600;
}

/* facts table — dense, extractable, the shape answer engines quote */
.facts {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin: 24px 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.sec-alt .facts {
  background: var(--concrete);
}
.facts caption {
  text-align: left;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  padding-bottom: 10px;
  font-weight: 600;
}
.facts th,
.facts td {
  text-align: left;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  vertical-align: top;
}
.facts tr:first-child th,
.facts tr:first-child td {
  border-top: 0;
}
.facts th {
  color: var(--steel);
  font-weight: 600;
  width: 38%;
  white-space: nowrap;
}

/* ---------- breadcrumbs ------------------------------------------------ */

.crumbs {
  padding-top: 22px;
  font-size: var(--fs-xs);
  color: var(--steel);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.crumbs li::after {
  content: '/';
  margin-left: 8px;
  color: var(--line-soft);
}
.crumbs li:last-child::after {
  content: '';
}
.crumbs a {
  color: var(--steel);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--green-ink);
  text-decoration: underline;
}

/* ---------- page hero (interior pages) --------------------------------- */

.phero {
  padding-block: clamp(26px, 3vw, 44px) clamp(34px, 4vw, 56px);
}
.phero .lede {
  margin-top: 20px;
}
.phero .cta-row {
  margin-top: 28px;
}
.phero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(26px, 3.5vw, 48px);
  align-items: center;
}
.phero-photo {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--photo-bg);
  box-shadow: 0 28px 56px -30px rgba(21, 24, 27, 0.5);
}
.phero-photo img {
  width: 100%;
  height: clamp(240px, 26vw, 420px);
  object-fit: cover;
}

/* ---------- closing CTA + footer --------------------------------------- */

.close {
  background: var(--asphalt);
  color: var(--white);
  padding-block: clamp(60px, 7.5vw, 104px) clamp(52px, 6vw, 80px);
}
.close h2 {
  color: var(--white);
}
.close .lede {
  margin: 20px 0 30px;
}
.close-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.dial {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r);
  padding: clamp(22px, 3vw, 32px);
  display: grid;
  gap: 14px;
}
.dial .num {
  font-family: var(--font-d);
  font-variation-settings: 'wdth' 88, 'wght' 700;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.03em;
  color: var(--white);
  text-decoration: none;
  line-height: 1;
}
.dial .num:hover {
  color: var(--green);
}
.dial .s {
  font-size: var(--fs-sm);
  color: var(--ink-inv-2);
}

footer {
  background: var(--footer-bg);
  color: var(--ink-inv-3);
  padding-block: clamp(44px, 5vw, 60px) 32px;
  font-size: var(--fs-sm);
}
.fgrid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: clamp(24px, 3vw, 40px);
}
footer h3 {
  font-family: var(--font-d);
  font-variation-settings: 'wdth' 84, 'wght' 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--fs-xs);
  color: var(--white);
  margin: 0 0 14px;
}
.fcol ul li {
  margin-bottom: 9px;
}
footer a {
  color: var(--ink-inv-3);
  text-decoration: none;
  transition: color 0.22s;
}
footer a:hover {
  color: var(--white);
}
footer .logo img {
  height: 96px;
}
footer address {
  font-style: normal;
  line-height: 1.7;
}
.fbar {
  border-top: 1px solid var(--footer-line);
  margin-top: clamp(30px, 4vw, 44px);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--ink-on-footer);
}
.fbar nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* ---------- mobile call bar -------------------------------------------- */

.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  background: rgba(21, 24, 27, 0.97);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
}
.callbar a {
  flex: 1;
  justify-content: center;
  padding-block: 13px;
}

/* ---------- responsive -------------------------------------------------- */

@media (max-width: 1080px) {
  .fgrid {
    grid-template-columns: 1fr 1fr;
  }
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  :root {
    --hdr: 84px;
  }
  .logo img {
    height: 60px;
  }
  .burger {
    display: block;
    order: 3;
  }
  nav.main {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--concrete);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--pad) 20px;
    box-shadow: 0 22px 34px -26px rgba(0, 0, 0, 0.5);
  }
  header.open nav.main {
    display: flex;
  }
  nav.main a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-md);
  }
  nav.main a::after {
    display: none;
  }
  .navcta .btn-s {
    display: none;
  }
  .hero-grid,
  .split,
  .cover,
  .findus,
  .close-grid,
  .phero-grid,
  .proof {
    grid-template-columns: minmax(0, 1fr);
  }
  .proof {
    justify-items: start;
    gap: 20px;
  }
  .score {
    text-align: left;
  }
  .plate {
    transform: none;
    order: -1;
  }
  .hero .plate img {
    height: clamp(220px, 44vw, 330px);
  }
  .grid-3,
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .field .wrap {
    grid-template-columns: minmax(0, 1fr);
  }
  .field-photo {
    display: none;
  }
  .strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .strip > div:nth-child(2) {
    border-right: 0;
    padding-right: 0;
  }
  .strip > div:nth-child(3) {
    padding-left: 0;
  }
  .callbar {
    display: flex;
  }
  body {
    padding-bottom: 72px;
  }
}

@media (max-width: 700px) {
  .grid-3,
  .grid-2,
  .steps,
  .klist,
  .klist-3,
  .fgrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .strip {
    grid-template-columns: 1fr;
  }
  .strip > div {
    border-right: 0;
    padding: 22px 0 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .strip > div:first-child {
    border-top: 0;
  }
  .taper {
    clip-path: polygon(0 26px, 100% 0, 100% 100%, 0 100%);
    margin-top: -26px;
  }
  .faq .ans {
    padding: 0 0 24px 18px;
  }
  .findrow {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .facts th {
    width: 42%;
    white-space: normal;
  }
  .card > figure img {
    height: 180px;
  }
}

/* ---------- touch targets ----------------------------------------------
   On a phone every interactive element gets a 44px minimum hit area. This is
   the WCAG 2.5.5 / Lighthouse tap-target threshold, but the real reason is
   the use case: people tap this site one-handed, in the rain, on a shoulder,
   often having just had an accident. A 25px-high link is a miss waiting to
   happen.

   Done with padding and min-height only — no font sizes change, so the visual
   design is untouched. Scoped to coarse pointers and small screens so desktop
   density stays as designed. */

@media (max-width: 960px), (pointer: coarse) {
  .clink,
  .findrow dd a,
  footer a,
  .fbar a,
  address a,
  .maplink {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .towns a,
  .towns span {
    min-height: 44px;
  }
  .burger {
    height: 46px;
  }
  .qbtn {
    width: 46px;
    height: 46px;
  }
  /* Footer link columns: give each row its own comfortable band rather than
     relying on line-height. */
  .fcol ul li {
    margin-bottom: 2px;
  }
  .fcol ul li a {
    padding-block: 8px;
  }
  .fbar nav {
    gap: 8px 20px;
  }
  /* The header phone CTA is the single most important target on the site. */
  .navcta .btn-p {
    min-height: 46px;
  }
  /* The dispatch number in the closing panel. */
  .dial .num {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Short legal and breadcrumb links were failing on width, not height. */
  .fbar nav a,
  .crumbs a {
    padding: 13px 10px;
    margin: -13px -10px;
  }
  .crumbs li {
    display: flex;
    align-items: center;
  }
  /* Inline links that sit mid-sentence or inside a table cell cannot become
     blocks without wrecking the line. Padding plus equal negative margin grows
     the hit area to 44px and shifts no layout. Applied to every phone link
     wherever it appears — those are the ones that must never be missed. */
  a[data-call],
  .facts a,
  .prose a {
    padding-block: 13px;
    margin-block: -13px;
  }
  /* Heading and list links that were a few pixels short. */
  .klist b a,
  .card-b h2 a,
  .card-b h3 a {
    display: inline-block;
    min-height: 44px;
  }
}

@media print {
  header,
  footer,
  .callbar,
  .marquee,
  .mapwrap {
    display: none !important;
  }
  body {
    background: #fff;
    padding: 0;
  }
}

/* ---------- lead form -------------------------------------------------- */
/* Namespaced `lf-` because `.field` and `.fgrid` are already taken by the
   dark feature section above; an unprefixed `.field` here would inherit its
   inverted colours and render white text on white. */

.formcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(24px, 3.4vw, 40px);
}
.sec-alt .formcard {
  background: var(--concrete);
}
.formhead {
  max-width: 62ch;
  margin-bottom: 26px;
}
.formhead h2 {
  margin: 6px 0 10px;
}
.formhead p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.lf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}
.lf-wide {
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
  .lf-grid {
    grid-template-columns: 1fr;
  }
}

.lf-field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lf-field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--asphalt);
}
.lf-field label span[aria-hidden] {
  color: var(--green-ink);
}
.lf-field .opt {
  font-weight: 400;
  color: var(--steel);
}
.lf-field input,
.lf-field select,
.lf-field textarea {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--asphalt);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 12px 13px;
  /* 44px minimum touch target without a media query. */
  min-height: 46px;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lf-field textarea {
  resize: vertical;
  min-height: 108px;
  line-height: 1.55;
}
/* iOS Safari zooms the viewport when a focused control has a font-size below
   16px, and does not zoom back out afterwards — the page is left scrolled
   sideways mid-form. The fluid type scale lands at ~13.8px here, so the
   controls are pinned to 16px on touch devices. Cosmetic on desktop, a broken
   form on a phone. */
@media (pointer: coarse), (max-width: 640px) {
  .lf-field input,
  .lf-field select,
  .lf-field textarea {
    font-size: 16px;
  }
}
.lf-field input:focus-visible,
.lf-field select:focus-visible,
.lf-field textarea:focus-visible {
  outline: none;
  border-color: var(--green-btn);
  box-shadow: 0 0 0 3px rgba(47, 161, 77, 0.22);
}
.lf-field.has-error input,
.lf-field.has-error textarea {
  border-color: #b3261e;
}
.lf-field.has-error.has-error input:focus-visible,
.lf-field.has-error textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.2);
}
.ferr:empty {
  display: none;
}
.ferr {
  font-size: var(--fs-xs);
  color: #b3261e;
}

/* Honeypot. Kept in the layout and merely moved out of sight — display:none
   and visibility:hidden are both trivially detected by the bots this is meant
   to catch, and some autofillers skip them. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formfoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 22px;
}
.fnote {
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.formfoot button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.fstatus {
  margin: 16px 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.fstatus:empty {
  display: none;
}
.fstatus.is-ok {
  color: var(--green-ink);
}
.fstatus.is-bad {
  color: #b3261e;
}

@media print {
  .leadform {
    display: none;
  }
}

/* ---------- closing CTA: the number, and nothing else ------------------- */
/* Same display face and dark section as before, scaled up so it reads as the
   page's terminal action rather than one option among several. Fluid from
   phone to desktop; the ch-based cap keeps it from colliding with the wrap
   edges on a narrow screen. */

.close-num {
  display: block;
  text-align: center;
  font-family: var(--font-d);
  font-variation-settings: 'wdth' 84, 'wght' 800;
  font-size: clamp(38px, 11.5vw, 132px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--white);
  text-decoration: none;
  /* Generous hit area — this is the primary action on a phone. */
  padding-block: clamp(10px, 2vw, 22px);
  transition: color 0.15s ease;
  text-wrap: balance;
}
.close-num:hover,
.close-num:focus-visible {
  color: var(--green);
}
.close-num:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 8px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .close-num {
    transition: none;
  }
}