/* ============================================================================
   Boothes Mobile Mechanics — design system
   Montserrat 900 display / 500 italic eyebrow, charcoal + brand red (#E8000A).
   Diagonal geometry echoes the slanted "M" in the BM mark; the brushed-steel
   panel and the tiled BM watermark come straight off the brand board.
   ========================================================================== */

/* ── tokens ───────────────────────────────────────────────────────────────── */
:root {
  --red:      #E8000A;
  --red-hi:   #FF2A33;
  --red-lo:   #B00008;
  --red-ink:  #3B0003;

  --ink:      #0C0C0D;
  --char:     #161719;
  --char-hi:  #202226;
  --char-top: #2B2D33;

  --steel:    #8E9299;
  --steel-hi: #C9CCD1;

  --paper:    #F4F3F1;
  --paper-2:  #E7E6E3;
  --paper-3:  #D7D5D1;

  --on-dark:      #F2F1EF;
  --on-dark-mute: rgba(242,241,239,.68);
  --on-dark-dim:  rgba(242,241,239,.42);
  --on-light:      #232326;
  --on-light-mute: #5E5E63;

  --hair-dark:  rgba(255,255,255,.10);
  --hair-light: rgba(20,20,22,.12);

  --ff: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* spacing scale — 4pt derived, used everywhere instead of ad-hoc values */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 2.75rem; --s8: 3.5rem;
  --s9: 5rem;    --s10: 7rem;   --s11: 9rem;

  --gut: 1.25rem;          /* page gutter */
  --wide: 82.5rem;         /* 1320px content max */
  --skew: 2.5rem;          /* diagonal offset for clipped panels */

  --sh-1: 0 1px 2px rgba(12,12,13,.10), 0 2px 8px rgba(12,12,13,.06);
  --sh-2: 0 2px 6px rgba(12,12,13,.10), 0 12px 28px -8px rgba(12,12,13,.18);
  --sh-red: 0 2px 6px rgba(176,0,8,.18), 0 14px 34px -10px rgba(176,0,8,.34);

  --ease: cubic-bezier(.22,.68,.32,1);
  --spring: cubic-bezier(.34,1.42,.5,1);

  /* Brand panel. Below the desktop breakpoint the wedge shows the BM mark
     (2:1); from 64rem it shows the full wordmark (4.7:1). The logo drives the
     width, so the paper wedge always fits it exactly. --wrap-inset is how far
     the centred container already sits from the left edge, so the header rows
     only reserve the part of the panel that actually sticks out past it. */
  --logo-w:     6.5rem;
  --brand-skew: clamp(1.125rem, 2.4vw, 3.25rem);
  --brand-w:    calc(var(--gut) + var(--logo-w) + var(--brand-skew) + .625rem);
  --hdr-wide:   110rem;
  --wrap-inset: max(0px, (100vw - var(--hdr-wide)) / 2);
  --brand-clear: calc(var(--brand-w) + 1.25rem - var(--wrap-inset));
}

@media (min-width: 48rem)  { :root { --gut: 2rem; --skew: 4rem; } }
@media (min-width: 64rem)  { :root { --gut: 2.5rem; --skew: 5.5rem; --logo-w: clamp(13rem, 17vw, 21rem); } }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--ff);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg, iframe { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4, h5 { margin: 0; line-height: 1.05; }
p, figure, figcaption, blockquote, dl, dd, dt, fieldset { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--red-hi);
  outline-offset: 3px;
  border-radius: 2px;
}

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

/* ── layout primitives ────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 52rem; }
.wrap--mid { max-width: 66rem; }

.sec { position: relative; padding-block: var(--s9); }
@media (min-width: 64rem) { .sec { padding-block: var(--s10); } }
.sec--tight { padding-block: var(--s8); }
.sec--flush-b { padding-bottom: 0; }

.sec--dark  { background: var(--char); color: var(--on-dark); }
.sec--ink   { background: var(--ink);  color: var(--on-dark); }
.sec--light { background: var(--paper); color: var(--on-light); }
.sec--light-2 { background: var(--paper-2); color: var(--on-light); }

/* ── textures ─────────────────────────────────────────────────────────────── */
/* fine diagonal hatch — the mill-finish look on the brand board's steel panels */
.tex-hatch::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(135deg,
    rgba(255,255,255,.030) 0 1px, transparent 1px 8px);
}
.tex-hatch > * { position: relative; z-index: 1; }

/* BM mark tiled as a watermark — light sections */
.tex-mark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("../images/brand-mark-tile.png");
  background-size: 11rem auto;
  background-repeat: repeat;
  background-position: 2rem 1.5rem;
  opacity: .035;
}
.tex-mark > * { position: relative; z-index: 1; }

/* the same tile in white on charcoal — the pattern board, used on the footer */
.tex-markdark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("../images/brand-mark-bm-white.png");
  background-size: 9rem auto;
  background-repeat: repeat;
  background-position: 1rem 1rem;
  opacity: .035;
}
.tex-markdark > * { position: relative; z-index: 1; }

/* brushed steel — the diagonal metal plate on the brand board, one band only */
.tex-steel {
  background:
    linear-gradient(135deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,.05) 52%, rgba(255,255,255,0) 74%, rgba(255,255,255,.06) 100%),
    linear-gradient(135deg, #34363C 0%, #1D1E22 38%, #26282D 58%, #121316 100%);
}
.tex-steel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(135deg, rgba(0,0,0,.18) 0 1px, transparent 1px 11px);
}
.tex-steel > * { position: relative; z-index: 1; }

/* grain — breaks up flat fills, 1 inline svg, no extra request */
.tex-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .30;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

/* red rule that opens most section headers */
.rule {
  display: block; width: 3.25rem; height: 3px; background: var(--red);
  border: 0; margin: 0 0 var(--s4);
}

/* ── type ─────────────────────────────────────────────────────────────────── */
.eyebrow {
  display: flex; align-items: center; gap: var(--s3);
  font-size: .8125rem; font-weight: 600; font-style: italic;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--red); margin-bottom: 1.125rem;
}
.eyebrow::before {
  content: ""; width: 2.25rem; height: 2px; background: currentColor; flex: none;
}
.eyebrow--plain::before { display: none; }
.eyebrow--steel { color: var(--steel-hi); }
.sec--light .eyebrow, .sec--light-2 .eyebrow { color: var(--red-lo); }

.dsp {
  font-weight: 900; text-transform: uppercase;
  letter-spacing: -.022em; line-height: .99;
  font-size: clamp(2rem, 7vw, 3.25rem);
}
.dsp--xl { font-size: clamp(2.35rem, 9.5vw, 4.75rem); line-height: 1.02; }
.dsp--lg { font-size: clamp(2.1rem, 8vw, 3.75rem); }
.dsp--sm { font-size: clamp(1.5rem, 4.6vw, 2.125rem); letter-spacing: -.015em; }
.dsp em  { font-style: normal; color: var(--red); }
.dsp .thin {
  display: inline-block; font-weight: 500; font-style: italic;
  text-transform: none; letter-spacing: -.01em;
}

.sub {
  font-weight: 500; font-style: italic;
  font-size: clamp(1.05rem, 2.7vw, 1.5rem);
  line-height: 1.3; letter-spacing: -.005em;
}

.lede { font-size: 1.0625rem; line-height: 1.75; color: var(--on-dark-mute); }
.sec--light .lede, .sec--light-2 .lede { color: var(--on-light-mute); }
.lede + .lede { margin-top: var(--s4); }
.lede strong { color: var(--on-dark); font-weight: 700; }
.sec--light .lede strong, .sec--light-2 .lede strong { color: var(--on-light); }
.lede--wide { max-width: 42rem; }

.head-stack > * + * { margin-top: var(--s4); }

/* ── buttons ──────────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--red);
  --btn-fg: #fff;
  position: relative; display: inline-flex; align-items: center; gap: .625rem;
  padding: .9375rem 1.625rem;
  font-family: inherit; font-size: .875rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 0; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, calc(100% - .75rem) 100%, 0 100%);
  transition: transform .28s var(--spring), background-color .2s var(--ease), box-shadow .28s var(--ease), color .2s var(--ease);
  will-change: transform;
}
.btn:hover   { background: var(--red-hi); transform: translateY(-2px); box-shadow: var(--sh-red); }
.btn:active  { transform: translateY(0) scale(.985); background: var(--red-lo); }
.btn svg     { flex: none; }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--on-dark);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.30);
  clip-path: none;
}
.btn--ghost:hover  { background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 2px rgba(255,255,255,.62); }
.btn--ghost:active { background: rgba(255,255,255,.05); }

.btn--dark {
  --btn-bg: var(--ink); --btn-fg: #fff;
}
.btn--dark:hover { background: var(--char-top); }

.btn--outline-dark {
  --btn-bg: transparent; --btn-fg: var(--on-light);
  box-shadow: inset 0 0 0 2px rgba(20,20,22,.22); clip-path: none;
}
.btn--outline-dark:hover  { background: rgba(20,20,22,.06); box-shadow: inset 0 0 0 2px rgba(20,20,22,.55); transform: translateY(-2px); }
.btn--outline-dark:active { background: rgba(20,20,22,.03); transform: none; }

.btn--sm { padding: .6875rem 1.125rem; font-size: .75rem; }
.btn--wide { width: 100%; justify-content: center; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* text link with sliding arrow */
.tlink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8125rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--red); padding-block: .25rem;
  transition: color .2s var(--ease);
}
.tlink svg { transition: transform .3s var(--spring); }
.tlink:hover { color: var(--red-hi); }
.tlink:hover svg { transform: translateX(4px); }
.tlink:active svg { transform: translateX(1px); }
.sec--light .tlink, .sec--light-2 .tlink { color: var(--red-lo); }
.sec--light .tlink:hover { color: var(--red); }

/* ── header: utility strip + nav ──────────────────────────────────────────── */
/*
  Layout, left to right:
    utility strip   [brand wedge] mobile + Google chips ......... info · socials
    nav row         [brand wedge] nav links .......... phone · Get a quote
  The wedge is out of flow, so both rows reserve --brand-clear on the left and
  then simply space-between their two groups.
*/
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: var(--ink);
}
.hdr__util {
  background: #000; border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: .8125rem;
}
.hdr__util-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); min-height: 2.375rem; padding-block: .3125rem;
  max-width: var(--hdr-wide);
  padding-left: max(var(--gut), var(--brand-clear));
}
/* Hidden wherever the nav is collapsed to a burger: the strip costs more header
   height than the information is worth on a phone or tablet, and the phone
   number is already in the sticky bottom call bar at those widths. */
@media (max-width: 63.99rem) { .hdr__util { display: none; } }

.util-group { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.util-group--left { gap: .5rem; flex: none; }
.util-group--right { margin-left: auto; }

.util-item {
  display: inline-flex; align-items: center; gap: .4375rem;
  color: var(--on-dark-mute); font-weight: 500; white-space: nowrap;
}
.util-item svg { flex: none; color: var(--red); }
a.util-item { transition: color .2s var(--ease); }
a.util-item:hover { color: #fff; }

/* Progressive disclosure — each item only appears once there is room for it
   beside the brand wedge and the two chips. */
.util-addr, .util-hours, .util-mail { display: none; }
@media (min-width: 64rem)  { .util-addr  { display: inline-flex; } }
@media (min-width: 78rem)  { .util-hours { display: inline-flex; } }
@media (min-width: 108rem) { .util-mail  { display: inline-flex; } }

/* chips — "we come to you" and Google, tucked in beside the logo */
.rchip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .1875rem .625rem .1875rem .375rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .25s var(--spring);
}
.rchip:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.28); transform: translateY(-1px); }
.rchip:active { transform: none; }
.rchip__stars { display: inline-flex; gap: 1px; color: #FFB300; }
.rchip__ico { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; color: var(--red); }
.rchip--mobile { border-color: rgba(232,0,10,.45); }
.rchip__txt { font-size: .6875rem; font-weight: 800; color: #fff; letter-spacing: .04em; text-transform: uppercase; }
/* Below 88rem the chips keep their marks but drop the wordmark, or the strip
   runs past the viewport. The mobile chip keeps its text — it is the message. */
@media (max-width: 87.99rem) { .rchip:not(.rchip--mobile) .rchip__txt { display: none; } }

.util-social { display: inline-flex; gap: .375rem; }
.util-social a {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; background: var(--red); color: #fff;
  transition: background-color .2s var(--ease), transform .25s var(--spring);
}
.util-social a:hover { background: #fff; color: var(--ink); transform: translateY(-2px); }
.util-social a:active { transform: none; }

/* main nav row */
.hdr__main { position: relative; background: var(--char-top); }
.hdr__main::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 8px);
}
.hdr__main::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--red);
}
.hdr__main-in {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: var(--s4);
  min-height: 3.75rem;
  max-width: var(--hdr-wide);
  padding-left: max(var(--gut), var(--brand-clear));
}
@media (min-width: 64rem) { .hdr__main-in { min-height: 4.75rem; } }

/* The angled paper panel. Absolutely positioned against .hdr (the sticky
   header) so it stays welded to the left edge of the viewport at every width,
   and runs the full height of the header — stopping 3px short so the red rule
   reads edge to edge underneath it. */
.brand {
  position: absolute; left: 0; top: 0; bottom: 3px; z-index: 5;
  display: flex; align-items: center;
  width: var(--brand-w);
  padding: .5rem var(--brand-skew) .5rem var(--gut);
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--brand-skew)) 100%, 0 100%);
  transition: filter .25s var(--ease);
}
.brand img {
  width: 100%; height: auto; max-height: 100%;
  object-fit: contain; object-position: left center;
}
.brand__logo { display: none; }
@media (min-width: 64rem) { .brand__logo { display: block; } .brand__mark { display: none; } }
.brand:hover { filter: brightness(1.04); }

/* nav links sit hard against the logo; phone + CTA hold the right edge */
.nav { display: none; margin-right: auto; align-items: center; gap: .125rem; }
@media (min-width: 64rem) { .nav { display: flex; } }

.nav__link, .nav__trigger {
  position: relative;
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .625rem var(--nav-pad, .6875rem);
  font-family: inherit; font-size: var(--nav-fs, .9375rem); font-weight: 600; font-style: italic;
  letter-spacing: .01em; text-transform: uppercase;
  color: var(--on-dark); background: none; border: 0; cursor: pointer;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav__link::after, .nav__trigger::after {
  content: ""; position: absolute; left: var(--nav-pad, .6875rem); right: var(--nav-pad, .6875rem); bottom: .3125rem;
  height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__link:hover, .nav__trigger:hover { color: #fff; }
.nav__link:hover::after, .nav__trigger:hover::after,
.nav__item--open .nav__trigger::after { transform: scaleX(1); }
.nav__link[aria-current="page"], .nav__trigger[aria-current="page"] { color: var(--red); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__caret { transition: transform .28s var(--ease); }
.nav__item--open .nav__caret { transform: rotate(180deg); }

.nav__item { position: relative; }
.nav__panel {
  position: absolute; top: calc(100% + .5rem); left: 0; min-width: 14.5rem;
  padding: .375rem; background: var(--ink);
  border: 1px solid var(--hair-dark); border-top: 3px solid var(--red);
  box-shadow: 0 18px 44px -12px rgba(0,0,0,.75);
  opacity: 0; visibility: hidden; transform: translateY(-.5rem);
  transition: opacity .22s var(--ease), transform .26s var(--ease), visibility .22s;
}
.nav__item--open .nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__panel a {
  display: block; padding: .625rem .875rem;
  font-size: .875rem; font-weight: 600; color: var(--on-dark-mute);
  transition: color .18s var(--ease), background-color .18s var(--ease), padding-left .22s var(--ease);
}
.nav__panel a:hover { color: #fff; background: rgba(232,0,10,.16); padding-left: 1.125rem; }
.nav__panel a:active { background: rgba(232,0,10,.28); }
.nav__panel a[aria-current="page"] { color: var(--red-hi); }

/* right-hand cluster: phone then Get a quote */
.hdr__actions { display: none; align-items: center; gap: .75rem; flex: none; }
@media (min-width: 64rem) { .hdr__actions { display: flex; } }

.hdr__tel {
  display: inline-flex; align-items: center; gap: .5rem;
  color: #fff; font-weight: 800; font-size: .9375rem; letter-spacing: .01em;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.hdr__tel-ico {
  display: grid; place-items: center; width: 2rem; height: 2rem; flex: none;
  border-radius: 50%; color: var(--red);
  background: rgba(232,0,10,.14); border: 1px solid rgba(232,0,10,.34);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .25s var(--spring);
}
.hdr__tel:hover { color: var(--red-hi); }
.hdr__tel:hover .hdr__tel-ico { background: var(--red); color: #fff; transform: translateY(-2px); }
.hdr__tel:active .hdr__tel-ico { transform: none; }
/* in the tight band the number collapses to just its button */
@media (max-width: 81.99rem) { .hdr__tel-txt { display: none; } }

/* nav density phases — the wedge takes ~240px, so the links tuck in until
   the viewport has slack again */
@media (min-width: 64rem) and (max-width: 74.99rem) {
  .nav { --nav-pad: .3125rem; --nav-fs: .8125rem; }
  .hdr__actions { gap: .5rem; }
  .hdr__cta { padding-inline: .875rem; }
}
@media (min-width: 75rem) and (max-width: 87.99rem) {
  .nav { --nav-pad: .5rem; --nav-fs: .875rem; }
}

/* burger */
.burger {
  margin-left: auto; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; background: none; border: 0; cursor: pointer;
  color: var(--on-dark);
}
@media (min-width: 64rem) { .burger { display: none; } }
.burger span {
  display: block; width: 1.375rem; height: 2px; background: currentColor;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 95;
  background: var(--ink);
  padding: var(--s5) var(--gut) var(--s8);
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-1rem);
  transition: opacity .25s var(--ease), transform .3s var(--ease), visibility .25s;
}
.drawer[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s6); }
.drawer__top img { width: 11rem; }
.drawer__close {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  background: none; border: 1px solid var(--hair-dark); color: var(--on-dark); cursor: pointer;
  transition: background-color .2s var(--ease);
}
.drawer__close:hover { background: rgba(255,255,255,.08); }
.drawer a, .drawer summary {
  display: block; padding: .875rem 0;
  font-size: 1.125rem; font-weight: 800; font-style: italic; text-transform: uppercase;
  border-bottom: 1px solid var(--hair-dark);
}
.drawer details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.drawer details > summary::-webkit-details-marker { display: none; }
.drawer details > summary::after {
  content: ""; width: .5rem; height: .5rem; margin-right: .25rem;
  border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
.drawer details[open] > summary::after { transform: rotate(-135deg); }
.drawer details a { padding-left: var(--s4); font-size: .9375rem; font-weight: 600; font-style: normal; text-transform: none; color: var(--on-dark-mute); }
.drawer details a:hover { color: #fff; }
.drawer a[aria-current="page"] { color: var(--red-hi); }
.drawer__foot { margin-top: var(--s6); display: grid; gap: var(--s3); }
.drawer__foot a { border: 0; padding: 0; }

/* ── hero (home) ──────────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 34rem; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); }
@media (min-width: 64rem) { .hero { min-height: min(46rem, calc(100vh - 7rem)); } }
.hero__media { position: absolute; inset: 0; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(12,12,13,.95) 0%, rgba(12,12,13,.72) 34%, rgba(12,12,13,.42) 68%, rgba(12,12,13,.66) 100%),
    linear-gradient(95deg, rgba(12,12,13,.80) 0%, rgba(12,12,13,.42) 44%, rgba(12,12,13,.12) 74%),
    radial-gradient(120% 90% at 12% 100%, rgba(232,0,10,.22) 0%, transparent 60%);
}
.hero__in { position: relative; z-index: 2; width: 100%; padding-block: var(--s8) var(--s8); }
@media (min-width: 64rem) { .hero__in { padding-block: var(--s10) var(--s9); } }
.hero__copy { max-width: 46rem; }
.hero .eyebrow { margin-bottom: 1.5rem; text-shadow: 0 1px 14px rgba(0,0,0,.8); }
.hero .dsp { text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.hero .sub { color: var(--on-dark); margin-top: var(--s3); text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.hero__btns { margin-top: var(--s6); }

/* social-proof cluster under the hero buttons */
.proof { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s6); flex-wrap: wrap; }
.proof__faces { display: flex; }
.proof__faces img, .proof__faces span {
  width: 2.375rem; height: 2.375rem; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--paper); margin-left: -.625rem; background: var(--char-hi);
}
.proof__faces span { display: grid; place-items: center; font-size: .8125rem; font-weight: 900; color: #fff; background: var(--red); }
.proof__faces img:first-child, .proof__faces span:first-child { margin-left: 0; }
.proof__txt { font-size: .875rem; line-height: 1.35; color: var(--on-dark-mute); }
.proof__txt b { display: block; font-size: 1.0625rem; font-weight: 900; color: #fff; letter-spacing: -.01em; }

/* ── page hero (sub pages) ────────────────────────────────────────────────── */
.phero { position: relative; overflow: hidden; background: var(--ink); }
.phero__media { position: absolute; inset: 0; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; }
.phero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(12,12,13,.94) 0%, rgba(12,12,13,.78) 46%, rgba(12,12,13,.38) 100%),
    linear-gradient(to top, rgba(12,12,13,.55), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 1px, transparent 1px 8px);
}
.phero__in { position: relative; z-index: 2; padding-block: var(--s8); }
@media (min-width: 64rem) { .phero__in { padding-block: var(--s9) var(--s9); } }
.phero__copy { max-width: 44rem; }
.phero .lede { margin-top: var(--s4); max-width: 36rem; }
.crumbs {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-dark-dim); margin-bottom: var(--s4);
}
.crumbs a { transition: color .18s var(--ease); }
.crumbs a:hover { color: var(--red); }
.crumbs span { color: var(--red); }

/* ── split section: diagonal image / copy, alternating ────────────────────── */
.split { position: relative; background: var(--char); overflow: clip; }
.split__grid { display: grid; }
@media (min-width: 62rem) { .split__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } }

.split__media { position: relative; overflow: hidden; min-height: 17rem; }
@media (min-width: 62rem) { .split__media { min-height: 34rem; } }
.split__media img {
  position: absolute; inset: -8% 0; width: 100%; height: 116%;
  object-fit: cover;
  transform: translate3d(0, var(--px, 0px), 0);
  will-change: transform;
}
.split__media::after {           /* colour treatment layer */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(232,0,10,.14), rgba(12,12,13,.55));
  mix-blend-mode: multiply;
}
@media (min-width: 62rem) {
  .split--left  .split__media { clip-path: polygon(0 0, 100% 0, calc(100% - var(--skew)) 100%, 0 100%); }
  .split--right .split__media { clip-path: polygon(var(--skew) 0, 100% 0, 100% 100%, 0 100%); grid-column: 2; grid-row: 1; }
  .split--right .split__body  { grid-column: 1; grid-row: 1; }
}

.split__body { position: relative; padding: var(--s8) 0; display: flex; align-items: center; }
@media (min-width: 62rem) {
  .split__body { padding: var(--s9) 0; }
  .split--left  .split__body { padding-left: var(--s7); }
  .split--right .split__body { padding-right: var(--s7); }
}
.split__inner { width: 100%; max-width: 34rem; }
.split--right .split__inner { margin-left: auto; }
@media (max-width: 61.99rem) {
  .split__body { padding-inline: var(--gut); }
  .split__inner { max-width: none; }
}
@media (min-width: 62rem) {
  .split--left  .split__body { padding-right: var(--gut); }
  .split--right .split__body { padding-left: var(--gut); }
  .split--left  .split__inner { padding-right: var(--s5); }
}
.split--flip { background: var(--char-hi); }

/* sticky copy for tall stacked splits */
@media (min-width: 62rem) {
  .split--sticky .split__body { align-items: flex-start; }
  .split--sticky .split__inner { position: sticky; top: 8.5rem; }
}

/* tick list */
.ticks { display: grid; gap: .625rem; margin-top: var(--s5); }
.ticks li { display: flex; align-items: flex-start; gap: .625rem; font-size: .9375rem; font-weight: 600; }
.ticks svg { flex: none; margin-top: .1875rem; color: var(--red); }

/* ── trust bar ────────────────────────────────────────────────────────────── */
/* Sits directly under the hero: the BM badge, the makes scrolling in the
   middle, the one headline figure on the right. */
.trust { position: relative; background: var(--ink); padding-block: var(--s5); overflow: hidden; }
@media (max-width: 47.99rem) { .trust { padding-block: var(--s4) var(--s5); } }
/* Mobile: badge and figure sit side by side, marquee spans the row beneath.
   From 48rem it flattens to one row — badge, marquee, figure. */
.trust__in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s4);
  align-items: center;
}
.trust__badge { order: 1; }
.trust__stat  { order: 2; }
.trust__marq  { order: 3; min-width: 0; grid-column: 1 / -1; }
@media (min-width: 48rem) {
  .trust__in { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s5); }
  .trust__marq  { order: 2; grid-column: auto; }
  .trust__stat  { order: 3; }
}

/* the badge is fixed to the left — deliberately not part of the marquee */
.trust__badge {
  display: flex; align-items: center; gap: var(--s3); flex: none;
  position: relative; min-width: 0;
  transition: transform .3s var(--spring);
}
.trust__badge img {
  height: 2.25rem; width: auto; flex: none;
  filter: drop-shadow(0 4px 14px rgba(232,0,10,.35));
}
@media (min-width: 62rem) { .trust__badge img { height: 2.75rem; } }
.trust__badge:hover { transform: translateY(-2px); }
.trust__badge:active { transform: none; }
.trust__badge-txt {
  display: block; line-height: 1.25;
  font-size: .75rem; font-weight: 600; color: var(--on-dark-mute);
  max-width: 8rem;
}
@media (min-width: 75rem) { .trust__badge-txt { font-size: .8125rem; max-width: 9.5rem; } }
.trust__badge-txt b {
  display: block; font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: .1em; font-size: .625rem;
  color: var(--red-hi); margin-bottom: .125rem;
}
/* the label only disappears in the band where the bar is horizontal but tight */
@media (min-width: 48rem) and (max-width: 74.99rem) { .trust__badge-txt { display: none; } }
@media (min-width: 48rem) {
  .trust__badge { padding-right: var(--s5); }
  .trust__badge::after {
    content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 3.25rem;
    background: linear-gradient(to bottom, transparent, var(--hair-dark) 22%, var(--hair-dark) 78%, transparent);
  }
}

.trust__lbl {
  font-size: .6875rem; font-weight: 800; font-style: italic; letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-dark-dim);
  margin-bottom: var(--s3);
}
.trust__marq .trust__lbl { text-align: center; }

/* the number */
.trust__stat {
  position: relative;
  display: block; text-align: right; padding-left: var(--s5);
}
.trust__stat::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 2.75rem;
  background: linear-gradient(to bottom, transparent, var(--hair-dark) 22%, var(--hair-dark) 78%, transparent);
}
@media (min-width: 48rem) {
  .trust__stat { padding-left: var(--s6); }
  .trust__stat::before { height: 3.25rem; }
}
.trust__n {
  display: inline-flex; align-items: baseline;
  /* the phone floor is low so the figure fits beside the badge on one row */
  font-size: clamp(2rem, 6vw, 4.25rem); font-weight: 900; letter-spacing: -.035em;
  line-height: 1; color: var(--red);
  font-variant-numeric: tabular-nums;
}
.trust__suf { font-size: .42em; font-weight: 800; color: var(--on-dark); margin-left: .1em; }
.trust__lbl--stat {
  display: block; margin: 0; margin-top: .375rem;
  /* tight enough to stay on one line in the narrow phone column */
  font-size: .6875rem; letter-spacing: .07em; font-style: normal;
  white-space: nowrap; color: var(--on-dark-mute);
}
@media (min-width: 48rem) {
  .trust__lbl--stat { font-size: .75rem; letter-spacing: .12em; }
}

/* ── marquee ──────────────────────────────────────────────────────────────── */
.marq {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 90%, transparent);
}
.marq__track {
  display: flex; width: max-content;
  animation: marq 48s linear infinite;
  will-change: transform;
}
.marq:hover .marq__track,
.marq:focus-within .marq__track { animation-play-state: paused; }
.marq__run { display: flex; align-items: center; }
.marq__item {
  display: grid; place-items: center; flex: none;
  padding-inline: clamp(1.25rem, 3vw, 2.75rem);
}
.marq__item img {
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .62;
  transition: opacity .25s var(--ease), transform .3s var(--spring);
}
/* text wordmarks — no logo files to license, nothing to flatten to white */
.marq__item--txt {
  font-size: 1.0625rem; font-weight: 800; font-style: italic; text-transform: uppercase;
  letter-spacing: .08em; color: rgba(242,241,239,.5); white-space: nowrap;
  padding-inline: clamp(1rem, 2.4vw, 2.25rem);
}
a.marq__item:hover img { opacity: 1; transform: translateY(-2px); }
a.marq__item:active img { transform: none; }
@keyframes marq { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) {
  .marq__track { animation: none; }
  .marq__item img { transition: none; }
}

/* ── "why mobile" band ────────────────────────────────────────────────────── */
/* The only brushed-steel panel on the site, so the mobile promise reads as a badge. */
.why {
  position: relative; overflow: hidden;
  padding-block: var(--s9);
  border-block: 1px solid rgba(255,255,255,.09);
}
.why__in {
  position: relative; z-index: 1;
  display: grid; gap: var(--s7); align-items: center;
}
@media (min-width: 62rem) {
  .why__in { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: var(--s8); }
}
.why .ticks svg { color: var(--red-hi); }

.why__badge {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s4);
}
.why__badge img {
  width: clamp(11rem, 26vw, 19rem); height: auto;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.6)) drop-shadow(0 0 24px rgba(232,0,10,.22));
}
.why__badge-txt {
  font-size: .8125rem; font-weight: 600; line-height: 1.55;
  letter-spacing: .03em; color: var(--on-dark-mute);
}
.why__badge-txt b {
  display: block; color: #fff; font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: .1em; font-size: .75rem;
  margin-bottom: .25rem;
}

/* ── card grid (services / areas / posts) ─────────────────────────────────── */
/* minmax(0,…) everywhere — a bare 1fr takes its min-content floor from the
   longest word inside a padded card and pushes the row past the viewport. */
.grid { display: grid; gap: var(--s4); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 34rem) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 40rem) {
  .grid--2, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .grid { gap: var(--s5); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* photo tile with italic label */
.tile {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--char-hi);
  box-shadow: var(--sh-2);
}
.tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s var(--ease);
}
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,12,13,.95) 0%, rgba(12,12,13,.78) 26%, rgba(12,12,13,.28) 62%, rgba(12,12,13,.05) 100%);
}
.tile:hover img { transform: scale(1.06); }
.tile:active img { transform: scale(1.02); }
.tile__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: var(--s5) var(--s4) var(--s4); }
.tile__k {
  font-size: .6875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red-hi); margin-bottom: .375rem;
}
.tile__t {
  font-size: 1.1875rem; font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: -.01em; color: #fff;
}
.tile__d { margin-top: .375rem; font-size: .875rem; color: var(--on-dark-mute); }
.tile__go {
  position: absolute; top: var(--s4); right: var(--s4); z-index: 2;
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  background: var(--red); color: #fff;
  opacity: 0; transform: translateY(-.375rem);
  transition: opacity .25s var(--ease), transform .3s var(--spring);
}
.tile:hover .tile__go, .tile:focus-visible .tile__go { opacity: 1; transform: none; }

/* flat panel card on dark */
.panel {
  position: relative; padding: var(--s5);
  background: var(--char-hi); border-left: 3px solid var(--red);
  box-shadow: var(--sh-2);
  transition: transform .3s var(--ease), background-color .25s var(--ease);
}
a.panel:hover { transform: translateY(-3px); background: var(--char-top); }
a.panel:active { transform: none; }
.panel__ico { color: var(--red); margin-bottom: var(--s3); }
.panel__t { font-size: 1.0625rem; font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; }
.panel__d { margin-top: .5rem; font-size: .9375rem; color: var(--on-dark-mute); line-height: 1.65; }
.panel__price {
  margin-top: var(--s4); font-size: .75rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--red);
}

/* steel variant — used on the why-mobile page */
.panel--steel { border-left-color: var(--steel-hi); }
.panel--steel .panel__ico { color: var(--steel-hi); }

/* light variant */
.panel--light { background: #fff; border-left-color: var(--red); color: var(--on-light); }
.panel--light .panel__d { color: var(--on-light-mute); }
a.panel--light:hover { background: #fff; box-shadow: 0 4px 10px rgba(12,12,13,.08), 0 18px 40px -14px rgba(12,12,13,.22); }

/* ── numbered process ─────────────────────────────────────────────────────── */
.steps { display: grid; gap: var(--s5); counter-reset: step; }
@media (min-width: 62rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } }
.steps--stack { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62rem) { .steps--stack { grid-template-columns: minmax(0, 1fr); } }
.step { position: relative; padding-top: 3.75rem; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; top: 0; left: 0;
  font-size: 3rem; font-weight: 900; line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(232,0,10,.55);
}
.step__t { font-size: 1.125rem; font-weight: 800; text-transform: uppercase; }
.step__d { margin-top: .625rem; font-size: .9375rem; color: var(--on-dark-mute); line-height: 1.7; }
.sec--light .step__d { color: var(--on-light-mute); }

/* ── service list (repairs / maintenance pages) ───────────────────────────── */
.slist { border-top: 1px solid var(--hair-dark); }
.slist__row {
  display: grid; gap: var(--s3); align-items: center;
  grid-template-columns: 1fr auto;
  padding: var(--s5) 0; border-bottom: 1px solid var(--hair-dark);
  transition: background-color .25s var(--ease), padding-left .3s var(--ease);
}
.slist__row:hover { background: rgba(255,255,255,.03); padding-left: var(--s4); }
.slist__n {
  font-size: .75rem; font-weight: 800; letter-spacing: .12em; color: var(--red);
  margin-bottom: .375rem;
}
.slist__t { font-size: 1.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.slist__d { margin-top: .5rem; font-size: .9375rem; color: var(--on-dark-mute); max-width: 44rem; line-height: 1.7; }
.sec--light .slist { border-color: var(--hair-light); }
.sec--light .slist__row { border-color: var(--hair-light); }
.sec--light .slist__row:hover { background: rgba(20,20,22,.035); }
.sec--light .slist__d { color: var(--on-light-mute); }

/* ── reviews ──────────────────────────────────────────────────────────────── */
.rev-lead { display: grid; gap: var(--s5); align-items: stretch; }
@media (min-width: 62rem) { .rev-lead { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s7); align-items: center; } }
.rev-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: var(--s5); background: #fff; color: var(--on-light);
  box-shadow: var(--sh-2);
}
.rev-card--dark { background: var(--char-hi); color: var(--on-dark); box-shadow: none; border: 1px solid var(--hair-dark); }
.rev-card__t { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: .75rem; }
.rev-card__b { font-size: .9375rem; line-height: 1.75; color: var(--on-light-mute); }
.rev-card--dark .rev-card__b { color: var(--on-dark-mute); }
.rev-card__b::before { content: "“"; }
.rev-card__b::after { content: "”"; }
.rev-card__f {
  display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: var(--s4);
  border-top: 1px solid var(--hair-light);
}
.rev-card--dark .rev-card__f { border-color: var(--hair-dark); }
.rev-card__av {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--paper-3);
}
.rev-card__av--ph {
  display: grid; place-items: center; font-weight: 900; font-size: 1rem;
  background: var(--red); color: #fff;
}
.rev-card__nm { font-size: .875rem; font-weight: 800; letter-spacing: -.005em; }
.rev-card__meta { display: flex; align-items: center; gap: .375rem; margin-top: .125rem; }
.rev-card__src { margin-left: auto; flex: none; }
.stars { display: inline-flex; gap: 1px; color: #FFB300; }

.rev-photo { position: relative; overflow: hidden; box-shadow: var(--sh-2); }
.rev-photo img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.rev-photo::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 4px var(--red); }

.rev-rail { display: grid; gap: var(--s4); margin-top: var(--s6); }
@media (min-width: 48rem) { .rev-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .rev-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--hair-light); }
.faq details { border-bottom: 1px solid var(--hair-light); }
.faq summary {
  display: flex; align-items: flex-start; gap: var(--s4); justify-content: space-between;
  padding: var(--s5) 0; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em;
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--red-lo); }
.faq__ico { position: relative; flex: none; width: 1.25rem; height: 1.25rem; margin-top: .25rem; }
.faq__ico::before, .faq__ico::after {
  content: ""; position: absolute; background: var(--red); border-radius: 1px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.faq__ico::before { left: 0; right: 0; top: calc(50% - 1px); height: 2px; }
.faq__ico::after  { top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; }
.faq details[open] .faq__ico::after { transform: scaleY(0); opacity: 0; }
.faq__a { padding: 0 0 var(--s5); max-width: 52rem; font-size: .9375rem; line-height: 1.8; color: var(--on-light-mute); }
.sec--dark .faq, .sec--dark .faq details { border-color: var(--hair-dark); }
.sec--dark .faq__a { color: var(--on-dark-mute); }
.sec--dark .faq summary:hover { color: var(--red-hi); }

/* ── spec table / chips (contact + area pages) ────────────────────────────── */
.spec-table { display: grid; gap: 0; border-top: 1px solid var(--hair-dark); }
.spec-table div {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: .8125rem 0; border-bottom: 1px solid var(--hair-dark); font-size: .9375rem;
}
.spec-table dt { color: var(--on-dark-mute); font-weight: 500; }
.spec-table dd { margin: 0; font-weight: 700; text-align: right; }
.sec--light .spec-table, .sec--light .spec-table div { border-color: var(--hair-light); }
.sec--light .spec-table dt { color: var(--on-light-mute); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--s4); }
.chips li {
  padding: .375rem .75rem; font-size: .8125rem; font-weight: 600;
  background: rgba(255,255,255,.06); border-left: 2px solid var(--red);
}
.sec--light .chips li { background: rgba(20,20,22,.05); }

/* ── form embed / native form ─────────────────────────────────────────────── */
.formbox {
  position: relative; background: #fff; box-shadow: var(--sh-2);
  padding: .5rem;
}
.formbox--dark { background: var(--char-hi); border: 1px solid var(--hair-dark); box-shadow: none; }
.formbox iframe { width: 100%; border: 0; display: block; min-height: 40rem; }
.formbox--short iframe { min-height: 32rem; }
.formbox--tall iframe { min-height: 52rem; }

/* the plain HTML fallback — styled to sit in the same box the GHL form will */
.fform { padding: var(--s5) var(--s4) var(--s4); color: var(--on-light); }
.formbox--dark .fform { color: var(--on-dark); }
.fform__grid { display: grid; gap: var(--s4); }
@media (min-width: 40rem) { .fform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fform .field--full { grid-column: 1 / -1; } }
.fform .field { display: grid; gap: .375rem; }
.fform .field > span {
  font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-light-mute);
}
.formbox--dark .fform .field > span { color: var(--on-dark-dim); }
.fform input, .fform textarea {
  appearance: none; width: 100%; font-family: inherit; font-size: .9375rem; font-weight: 500;
  padding: .75rem .875rem; color: var(--on-light); background: var(--paper);
  border: 1px solid var(--hair-light); border-radius: 0;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.fform textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }
.formbox--dark .fform input, .formbox--dark .fform textarea { color: var(--on-dark); background: var(--ink); border-color: var(--hair-dark); }
.fform input::placeholder, .fform textarea::placeholder { color: rgba(94,94,99,.7); }
.formbox--dark .fform input::placeholder, .formbox--dark .fform textarea::placeholder { color: var(--on-dark-dim); }
.fform input:focus, .fform textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(232,0,10,.16); }
.fform .btn { margin-top: var(--s5); }
.fform__fine { margin-top: var(--s4); font-size: .8125rem; line-height: 1.6; color: var(--on-light-mute); }
.formbox--dark .fform__fine { color: var(--on-dark-mute); }
.fform__fine a { color: var(--red); font-weight: 700; }

.mapbox { position: relative; overflow: hidden; box-shadow: var(--sh-2); }
.mapbox iframe { width: 100%; height: 22rem; border: 0; filter: grayscale(.35) contrast(1.05); }

/* ── CTA band ─────────────────────────────────────────────────────────────── */
.cta { position: relative; overflow: hidden; background: var(--ink); }
.cta__bg { position: absolute; inset: 0; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(12,12,13,.95) 0%, rgba(12,12,13,.80) 52%, rgba(176,0,8,.55) 100%);
}
.cta__in {
  position: relative; z-index: 2; padding-block: var(--s8);
  display: grid; gap: var(--s5); align-items: center;
}
@media (min-width: 62rem) {
  .cta__in { grid-template-columns: minmax(0, 1.5fr) auto; gap: var(--s7); padding-block: var(--s9); }
}
.cta .lede { max-width: 38rem; margin-top: var(--s4); }

/* ── footer ───────────────────────────────────────────────────────────────── */
.ftr { position: relative; background: var(--char); color: var(--on-dark); }
.ftr__top { padding-block: var(--s8); }
.ftr__grid { display: grid; gap: var(--s6); }
@media (min-width: 48rem) { .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .ftr__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s6); } }
.ftr__logo { width: 13rem; margin-bottom: var(--s4); }
.ftr h4 {
  font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; margin-bottom: var(--s4); padding-bottom: .5rem;
  position: relative;
}
.ftr h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 1.75rem; height: 2px; background: var(--red); }
.ftr__links { display: grid; gap: .625rem; }
.ftr__links a { font-size: .9375rem; color: var(--on-dark-mute); transition: color .18s var(--ease), transform .22s var(--ease); display: inline-block; }
.ftr__links a:hover { color: #fff; transform: translateX(3px); }
.ftr__hours { display: grid; gap: .5rem; font-size: .875rem; }
.ftr__hours div { display: flex; justify-content: space-between; gap: var(--s4); color: var(--on-dark-mute); }
.ftr__hours b { color: var(--on-dark); font-weight: 600; }
.ftr__hours .closed { color: var(--on-dark-dim); }
.ftr__contact { display: grid; gap: .75rem; font-size: .9375rem; }
.ftr__contact a, .ftr__contact span { display: flex; align-items: flex-start; gap: .625rem; color: var(--on-dark-mute); }
.ftr__contact a { transition: color .18s var(--ease); }
.ftr__contact a:hover { color: #fff; }
.ftr__contact svg { flex: none; margin-top: .25rem; color: var(--red); }
.ftr__social { display: flex; gap: .5rem; margin-top: var(--s4); }
.ftr__social a {
  width: 2.125rem; height: 2.125rem; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255,255,255,.07); color: #fff;
  transition: background-color .2s var(--ease), transform .25s var(--spring);
}
.ftr__social a:hover { background: var(--red); transform: translateY(-2px); }
.ftr__social a:active { transform: none; }
.ftr__bar {
  background: #000; padding-block: var(--s4);
  font-size: .8125rem; color: var(--on-dark-dim);
}
.ftr__bar-in { display: flex; flex-wrap: wrap; gap: .5rem var(--s5); align-items: center; justify-content: space-between; }
.ftr__bar a { transition: color .18s var(--ease); }
.ftr__bar a:hover { color: var(--red-hi); }
.ftr__legal { display: flex; flex-wrap: wrap; gap: var(--s4); }

/* sticky mobile call bar */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ink); border-top: 1px solid var(--hair-dark);
}
@media (min-width: 64rem) { .callbar { display: none; } }
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .875rem .5rem; font-size: .8125rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.callbar a:first-child { background: var(--red); color: #fff; }
.callbar a:first-child:active { background: var(--red-lo); }
.callbar a:last-child { color: var(--on-dark); }
.callbar a:last-child:active { background: var(--char-hi); }
body { padding-bottom: 3.25rem; }
@media (min-width: 64rem) { body { padding-bottom: 0; } }

/* ── reveal on scroll ─────────────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(1.25rem); }
.rv.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .7s var(--ease); }
.rv-d1.in { transition-delay: .07s; }
.rv-d2.in { transition-delay: .14s; }
.rv-d3.in { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  .split__media img { transform: none !important; }
  .btn, .tile img { transition: none; }
}

/* ── prose (blog / policy) ────────────────────────────────────────────────── */
.prose { max-width: 44rem; }
.prose > * + * { margin-top: var(--s4); }
.prose h2 {
  margin-top: var(--s7); font-size: 1.5rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: -.015em;
}
.prose h3 { margin-top: var(--s6); font-size: 1.125rem; font-weight: 800; }
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.8; color: var(--on-light-mute); }
.prose ul { display: grid; gap: .625rem; padding-left: 1.25rem; list-style: disc; }
.prose strong { color: var(--on-light); font-weight: 700; }
.prose a { color: var(--red-lo); text-decoration: underline; text-underline-offset: .2em; }
.prose a:hover { color: var(--red); }
.sec--dark .prose p, .sec--dark .prose li { color: var(--on-dark-mute); }
.sec--dark .prose strong { color: var(--on-dark); }

/* ── misc utilities ───────────────────────────────────────────────────────── */
.center { text-align: center; }
.mt4 { margin-top: var(--s4); } .mt5 { margin-top: var(--s5); }
.mt6 { margin-top: var(--s6); } .mt7 { margin-top: var(--s7); }
.mb5 { margin-bottom: var(--s5); } .mb6 { margin-bottom: var(--s6); }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sec-head { max-width: 44rem; margin-bottom: var(--s7); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head--split { display: grid; gap: var(--s5); max-width: none; align-items: end; }
@media (min-width: 62rem) { .sec-head--split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s8); } }