/* ==========================================================================
   Desert Glass Guy
   Industrial signage aesthetic. Black, red, concrete, bone.
   One dark theme with a single deliberate light band (why / family / insurance).
   ========================================================================== */

:root {
  --ink:        #0b0b0d;
  --ink-2:      #131317;
  --ink-3:      #1c1c22;
  --steel:      #2a2a31;
  --concrete:   #7d8288;
  --concrete-2: #a7abb0;
  --bone:       #f3f1ed;
  --bone-2:     #e6e2db;
  --white:      #ffffff;

  --red:        #d1232a;
  --red-hot:    #ea2f37;
  --red-deep:   #96161c;
  /* Small red text on ink. --red-hot lands at 3.8:1 there, under the 4.5:1
     floor for body-size type; this lifts it past 5:1 without going pink. */
  --red-text:   #f0454c;

  /* Muted ink for copy on the light band. Three steps, nothing in between. */
  --ink-soft:   #45484c;   /* body copy on bone */
  --ink-mute:   #55585c;   /* small print, hints, ledes on bone */
  --ink-label:  #3d4044;   /* form labels */
  /* Hairlines on dark surfaces. One value; the old per-section hexes drifted. */
  --line:       #24242b;
  --line-2:     #34343c;   /* control borders that need to read as an edge */

  --shadow-sm:  0 2px 8px rgba(0,0,0,.18);
  --shadow-md:  0 14px 40px rgba(0,0,0,.28);
  --shadow-lg:  0 30px 80px rgba(0,0,0,.45);

  --wrap:       1220px;
  --gut:        clamp(20px, 5vw, 56px);
  --sec:        clamp(72px, 9vw, 128px);
  --sec-s:      clamp(44px, 6vw, 72px);  /* bands: trust, team, footer */

  --f-display:  'Anton', 'Barlow Condensed', Impact, sans-serif;
  --f-cond:     'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-body:     'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Sub-heading scale. Section titles are .shead__title; everything below them
     snaps to one of these three so the page reads as one type system. */
  --t-h3-display: clamp(1.7rem, 3vw, 2.3rem);    /* Anton: in-section statements (why subhead, family lead, card name) */
  --t-h3-big:   clamp(1.6rem, 2.4vw, 2rem);       /* condensed: featured card titles, safety titles */
  --t-h3-name:  clamp(1.5rem, 2.3vw, 1.85rem);   /* Anton: names and captions */
  --t-h3-card:  1.5rem;                           /* condensed: service card titles */
  --t-h3-label: 1.32rem;                          /* condensed: trust, steps, area lockup */
  --t-line:     clamp(1.1rem, 1.6vw, 1.28rem);    /* condensed statement lines: checks, call lines, team intro */
  --t-lede:     clamp(1.2rem, 1.9vw, 1.5rem);     /* condensed lede under a section title */
  --t-motto:    clamp(1rem, 1.4vw, 1.12rem);      /* the tagline wherever it is quoted */
  --t-label:    .9rem;                            /* small uppercase labels */
  --t-sm:       .97rem;                           /* card and caption body copy */
  --t-fine:     .88rem;                           /* small print: hints, errors, figcaptions, legal */
  /* Three trackings. Wide for small labels, tight for condensed headings,
     one middle value for UI chrome (nav, buttons, bars). */
  --track-label: .1em;
  --track-head:  .04em;
  --track-ui:    .06em;

  /* The sign in the header. The sticky header is this wide, plus padding. */
  --brand-w:    clamp(160px, 16vw, 200px);
  /* Sticky header height: the sign (637x291) at --brand-w, the bar's padding
     and the red rule. Anchored jumps clear exactly this. The script measures
     the real bar and overwrites --hdr-h, so this calc is the no-JS fallback and
     must keep describing the same parts. */
  --hdr-pad:    10px;
  --hdr-rule:   3px;
  --hdr-h:      calc(var(--brand-w) * 291 / 637 + 2 * var(--hdr-pad) + var(--hdr-rule));
  --stripe-h:   8px;

  --ease:       cubic-bezier(.2,.7,.3,1);
}

/* Self-hosted (latin subset, SIL OFL). No third-party request on the render
   path, and the files can be preloaded so the swap happens before first paint
   on a warm connection. */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/anton-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/barlow-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-700.woff2') format('woff2'); }

* { box-sizing: border-box; }

/* A jump lands a section's top edge under the header's red rule; the heading
   then sits a full --sec below it, the same air it has on the page. Air added
   here would show a strip of the previous section under the rule instead, so
   the edge is tucked 2px under it: scroll positions round to whole pixels and
   a 0.5px sliver of the section before was showing on some jumps. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) - 2px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: clamp(16px, 1.05vw, 17.5px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Anton ships one weight. Headings default to bold, so the browser was
   synthesising a fake 700 over the real 400: thicker strokes, filled-in
   counters, colour fringing. Ask for the weight that exists and refuse the
   synthesis; the condensed headings set their own 700 (a real face). */
h1, h2, h3 { margin: 0; line-height: .98; letter-spacing: -.01em; font-weight: 400; font-synthesis: none; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

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

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--red); color: #fff; padding: 12px 20px;
  font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-ui);
}
.skip-link:focus { left: 8px; top: 8px; }

.nowrap { white-space: nowrap; }

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

/* ---------- SVG icons ---------- */
.ico { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }

/* ---------- Hazard stripe ---------- */
.stripe {
  height: var(--stripe-h);
  background: repeating-linear-gradient(
    -45deg,
    var(--red) 0 16px,
    var(--ink) 16px 32px
  );
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: var(--track-ui);
  text-decoration: none;
  line-height: 1.2;           /* <a> and <button> otherwise size differently */
  padding: .78em 1.5em;
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn--call {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  box-shadow: 0 4px 0 0 var(--red-deep);
}
/* Hover lifts the red only as far as white text stays above 4.5:1 (--red-hot lands at 4.2) */
.btn--call:hover { background: #d92830; border-color: #d92830; }
.btn--call:active { box-shadow: 0 1px 0 0 var(--red-deep); transform: translateY(3px); }
/* Red outline is invisible on red surfaces */
.btn--call:focus-visible, .callbar:focus-visible { outline-color: #fff; }
/* Submit while the request is in flight: no second tap, no lift, no press */
.btn[disabled], .btn[aria-busy="true"] {
  opacity: .72; cursor: progress; pointer-events: none;
  transform: none; box-shadow: 0 4px 0 0 var(--red-deep);
}

.btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.55);
}
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.btn--ghost:active { transform: translateY(1px); }

/* In-copy links share one underline so the six call-outs read as one family */
.svc__foot a, .why__call a, .ins__copy a, .quote__mail, .thanks__alt a {
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}

.btn--lg { font-size: 1.12rem; padding: .95em 1.9em; }
.btn--block { width: 100%; }

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.topbar {
  background: var(--ink);
  color: var(--concrete-2);
  font-family: var(--f-cond);
  font-size: .92rem;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.topbar__in {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
  padding-block: 9px;
}
.topbar__item { display: inline-flex; align-items: center; gap: .45em; }
.topbar__item--strong { color: var(--red-text); font-weight: 700; }
.topbar__sep { width: 4px; height: 4px; background: var(--red); transform: rotate(45deg); }
@media (max-width: 720px) { .topbar__sep { display: none; } .topbar__in { gap: 6px 14px; font-size: .82rem; } }
/* Phones: three items wrapped to two lines and pushed the hero down 28px.
   The trust bar under the hero repeats the insurance line, so it goes. */
@media (max-width: 560px) {
  .topbar__item:last-child { display: none; }
  /* The two survivors summed to exactly the available width at 375 and still
     wrapped to a second line. Tighter gap + step down keeps them on one. */
  .topbar__in { gap: 4px 12px; font-size: .8rem; }
}
/* Narrowest phones (320, 360): even tightened, both items wrap. Keep the
   locator only - "we come to you" is repeated in the hero immediately below. */
@media (max-width: 374px) { .topbar__item--strong { display: none; } }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink-2);
  border-bottom: var(--hdr-rule) solid var(--red);
  transition: box-shadow .25s var(--ease);
}
.header.is-stuck { box-shadow: 0 10px 30px rgba(0,0,0,.4); }

.header__in {
  display: flex; align-items: center; gap: clamp(14px, 3vw, 40px);
  padding-block: var(--hdr-pad);
}
.brand {
  flex: none;
  line-height: 0;
  display: flex;
  align-items: center;
  padding-right: 12px;
}
/* The client's original sign, unmodified. Capped at 200px so the sticky
   header stays near 115px on desktop and under 100px on phones. */
.brand img {
  width: var(--brand-w);
  height: auto;
}

.nav {
  display: flex; gap: clamp(14px, 2vw, 30px);
  margin-left: auto;
  font-family: var(--f-cond); font-weight: 600;
  font-size: 1.02rem; text-transform: uppercase; letter-spacing: var(--track-ui);
}
.nav a {
  color: var(--concrete-2); text-decoration: none;
  padding: 6px 0; position: relative;
  white-space: nowrap;
  transition: color .18s var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after { transform: scaleX(1); }

.header__call { flex: none; }
@media (max-width: 1080px) { .nav { display: none; } .header__call { margin-left: auto; } }
@media (max-width: 560px) { .header__call-txt { display: none; } .header__call { padding: .8em .95em; } }

.burger {
  display: none;
  flex: none;
  width: 46px; height: 44px;
  background: transparent; border: 2px solid var(--line-2); border-radius: 2px;
  cursor: pointer;
  padding: 10px 11px;
  flex-direction: column; justify-content: space-between;
}
.burger:hover { border-color: var(--concrete); }
.burger span { display: block; height: 2px; background: #fff; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.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); }
@media (max-width: 1080px) { .burger { display: flex; } }

.mobilenav[hidden] { display: none; }
@media (min-width: 1081px) { .mobilenav { display: none !important; } }
.mobilenav {
  background: var(--ink);
  border-top: 1px solid var(--line);
  padding: 8px var(--gut) 20px;
  display: flex; flex-direction: column;
}
.mobilenav a {
  font-family: var(--f-cond); font-weight: 600; font-size: 1.25rem;
  text-transform: uppercase; letter-spacing: var(--track-ui);
  color: var(--bone); text-decoration: none;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  transition: color .18s var(--ease);
}
.mobilenav a:hover, .mobilenav a:focus-visible { color: #fff; }
.mobilenav a:active { color: var(--red-text); }
.mobilenav a:last-child { border-bottom: 0; color: var(--red-text); }
.mobilenav a:last-child:hover, .mobilenav a:last-child:focus-visible { color: var(--red-hot); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; background: var(--ink); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: stretch;
  min-height: clamp(460px, 54vh, 620px);
}

.hero__copy {
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(48px, 6vw, 88px);
  padding-right: clamp(28px, 4vw, 60px);
  padding-left: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
}

.hero__media { position: relative; overflow: hidden; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 52% 46%;
  display: block;
}
/* Blend the photo into the copy panel so the split does not read as a hard seam */
.hero__media::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    var(--ink) 0%,
    rgba(11,11,13,.75) 6%,
    rgba(11,11,13,.28) 16%,
    transparent 30%);
}

@media (min-width: 1500px) {
  .hero__grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); }
}

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  /* 4:3 of the full width, capped at 58vh. Set as a height, not aspect-ratio +
     max-height: when the cap bit (a 900x800 window, a short tablet) the ratio
     transferred the cap to the width and the photo shrank to 620px, leaving a
     dark hole down the right of the hero. */
  .hero__media { order: -1; height: min(58vh, 75vw); }
  .hero__media img { object-position: 52% 42%; }
  .hero__media::before {
    background: linear-gradient(to bottom, transparent 52%, rgba(11,11,13,.72) 82%, var(--ink) 100%);
  }
  .hero__copy {
    padding: clamp(20px, 5vw, 34px) var(--gut) clamp(40px, 8vw, 56px);
  }
}

.hero__title {
  font-family: var(--f-display);
  font-size: clamp(2.9rem, 5.6vw, 5.9rem);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin: 0 0 18px;
}
.hero__title .line { display: block; }
.hero__title em { font-style: normal; color: var(--red-hot); }

/* The motto stays under the headline but steps back a size, so the line that
   says what the business actually does is the next thing the eye lands on. */
.hero__tag { margin-bottom: 22px; }

/* The tagline is quoted four times (hero, family, footer, thanks). One
   setting: condensed, a red rule down the left, the size and tracking of a
   label rather than a headline. Colour follows the surface it sits on. */
.motto {
  font-family: var(--f-cond);
  font-size: var(--t-motto);
  font-weight: 600;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: var(--track-ui);
  color: var(--concrete-2);
  border-left: 4px solid var(--red);
  padding-left: 14px;
  max-width: 34ch;
}
.hero__sub {
  color: #cfd2d5;
  max-width: 46ch;
  font-size: clamp(1rem, 1.35vw, 1.1rem);
  margin-bottom: 30px;
}
.hero__sub strong {
  display: block;
  color: #fff;
  font-weight: 600;
  font-size: 1.12em;
  margin-bottom: 4px;
}
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
/* Phones: the pair wraps anyway, so let each button take its own full row */
@media (max-width: 560px) { .hero__cta .btn { flex: 1 1 auto; } }

.hero .stripe { position: absolute; left: 0; right: 0; bottom: 0; }

/* ---------- Eyebrows / section heads ---------- */
.eyebrow {
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--red-text);
  margin: 0 0 12px;
}

.shead { max-width: 780px; margin-bottom: clamp(36px, 5vw, 62px); }
.shead--center { margin-inline: auto; text-align: center; }
.shead__title {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  text-transform: uppercase;
}
/* One lede for every section: a condensed spoken line straight under the
   title, 14px below it. Why and Insurance used to open with a body paragraph
   sitting a full header-margin under the title while Services and Work had
   this line at 18px; now every section head is title + lede, same gap. */
.shead__lede {
  margin-top: 14px;
  font-family: var(--f-cond);
  font-weight: 600;
  font-size: var(--t-lede);
  line-height: 1.3;
  color: var(--ink);
  max-width: 50ch;
  text-wrap: pretty;
}
.shead--center .shead__lede { margin-inline: auto; }
.section--dark .shead__lede, .section--ink .shead__lede { color: var(--bone-2); }

/* ---------- Section shells ---------- */
.section { padding-block: var(--sec); position: relative; }
.section--bone { background: var(--bone); color: var(--ink); }
.section--dark { background: var(--ink); color: var(--bone); }
.section--dark .shead__title { color: #fff; }
.section--ink { background: var(--ink-2); color: var(--bone); }
.section--ink .shead__title { color: #fff; }

/* Same-tone neighbours share one breath: a colour change separates sections on
   its own, but two sections on the same background double their padding into
   dead space. Each side gives up half, so the join is one --sec of paper, the
   same breath either side of a colour edge gets. Halving only the second one
   left 1.5 breaths of unbroken bone between Why and Family and the centred
   title floated. The second section also pulls its anchor up by the half it
   gave back, so a nav jump still lands its heading a full --sec under the
   header like every other section (the strip above it is the same paper). */
.section--bone:has(+ .section--bone) { padding-bottom: calc(var(--sec) * .5); }
.section--bone + .section--bone {
  padding-top: calc(var(--sec) * .5);
  scroll-margin-top: calc(var(--sec) * .5);
}
/* Insurance is bone-after-bone in the markup, but the tinted team band sits
   between them, so it gets the full breath a colour change earns. */
#insurance { padding-top: var(--sec); scroll-margin-top: 0; }

/* Faint grid texture on dark sections */
.section--dark::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 75%);
}
.section--dark > .wrap { position: relative; }

/* ==========================================================================
   TRUST BAR
   ========================================================================== */
.trust {
  background: var(--ink-2);
  color: var(--bone);
  border-bottom: 1px solid var(--line);
  padding-block: var(--sec-s);
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(24px, 3.4vw, 44px);
}
/* Tablet widths fit three across and orphan the fourth; two by two instead */
@media (max-width: 1180px) and (min-width: 641px) { .trust__grid { grid-template-columns: 1fr 1fr; } }
.trust__item { border-top: 3px solid var(--red); padding-top: 18px; }
.trust__ico { width: 32px; height: 32px; fill: var(--red-hot); margin-bottom: 12px; }
.trust__item h3 {
  font-family: var(--f-cond);
  font-size: var(--t-h3-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-head);
  color: #fff;
  margin-bottom: 8px;
}
.trust__item p { color: var(--concrete-2); font-size: var(--t-sm); line-height: 1.6; }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.svc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
}
.svc__card {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
/* No hover treatment: the cards are not links, and a lift or a photo zoom
   promised a click that went nowhere. */
.svc__img { aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
.svc__img img { width: 100%; height: 100%; object-fit: cover; }

.svc__body { padding: 22px 24px 26px; }
.svc__body h3 {
  font-family: var(--f-cond);
  font-size: var(--t-h3-card); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--track-head);
  color: #fff; margin-bottom: 10px;
}
.svc__body p { color: var(--concrete-2); font-size: var(--t-sm); }

/* Featured card: auto glass, the everyday job, gets the widest cell */
.svc__card--wide { grid-column: span 2; flex-direction: row; }
.svc__card--wide .svc__img { flex: 1.15; aspect-ratio: auto; min-height: 300px; }
.svc__card--wide .svc__body {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(24px, 3vw, 40px);
}
.svc__card--wide .svc__body h3 { font-size: var(--t-h3-big); }

/* Custom glass closes the grid as a full width banner */
.svc__card--banner { grid-column: 1 / -1; flex-direction: row-reverse; max-height: 360px; }
.svc__card--banner .svc__img { flex: 1; aspect-ratio: auto; min-height: 260px; }
.svc__card--banner .svc__img img { object-position: 50% 60%; }
.svc__card--banner .svc__body {
  flex: 1.3;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(24px, 3.4vw, 44px);
  border-left: 4px solid var(--red);
}
.svc__card--banner .svc__body h3 { font-size: var(--t-h3-big); }

@media (max-width: 940px) {
  .svc { grid-template-columns: 1fr 1fr; }
  .svc__card--wide { grid-column: 1 / -1; }
}
/* Phones: six stacked poster cards ran 3,000px. Every card becomes one row,
   thumbnail beside the words, so the list reads in two screens and the call
   line under it is reachable. */
@media (max-width: 640px) {
  .svc { grid-template-columns: 1fr; gap: 12px; }
  .svc__card, .svc__card--wide, .svc__card--banner { flex-direction: row; max-height: none; }
  .svc__img, .svc__card--wide .svc__img, .svc__card--banner .svc__img {
    flex: none; width: 38%; aspect-ratio: auto; min-height: 150px;
  }
  .svc__body, .svc__card--wide .svc__body, .svc__card--banner .svc__body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 16px 18px;
  }
  .svc__body h3, .svc__card--wide .svc__body h3, .svc__card--banner .svc__body h3 { font-size: 1.25rem; margin-bottom: 6px; }
  .svc__body p { font-size: .94rem; line-height: 1.5; }
}

.svc__foot {
  margin-top: clamp(30px, 4vw, 46px);
  font-family: var(--f-cond);
  font-weight: 600;
  font-size: var(--t-line);
  text-transform: uppercase;
  letter-spacing: var(--track-head);
  color: var(--concrete-2);
  text-align: center;
}
.svc__foot a {
  color: var(--red-text); white-space: nowrap;
  /* Enlarge the touch target without moving the line */
  display: inline-block; padding-block: 10px; margin-block: -10px;
}
.svc__foot a:hover { color: #fff; }

/* ==========================================================================
   SAFETY / QUALITY
   ========================================================================== */
/* A band, like Trust: the same --sec-s both sides, plus the hazard stripe's
   height at the bottom so the copy clears the stripe by the same amount it
   clears the top edge. It used to inherit a half --sec on top and a full one
   below, which sat the copy high in the band. */
.safety { padding-block: var(--sec-s) calc(var(--sec-s) + var(--stripe-h)); }
.safety__in {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
}
@media (max-width: 860px) { .safety__in { grid-template-columns: 1fr; } }
.safety__col { border-top: 3px solid var(--red); padding-top: 26px; }
.safety__col .eyebrow { color: var(--red-text); }
.safety__title {
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: var(--t-h3-big);
  line-height: 1.12;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.safety__col p { color: var(--concrete-2); }
.safety .stripe { position: absolute; left: 0; right: 0; bottom: 0; }

/* ==========================================================================
   WHY US
   ========================================================================== */
.why {
  display: grid;
  grid-template-columns: 1.25fr .85fr;
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) {
  .why { grid-template-columns: 1fr; }
  /* Stacked, a full-width 2:3 portrait ran 1,080px tall on a tablet */
  .why__fig { max-width: 480px; }
}

.why__copy p { color: var(--ink-soft); }
.why__subhead {
  font-family: var(--f-display);
  font-size: var(--t-h3-display);
  text-transform: uppercase;
  margin: 34px 0 18px;
}
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.checks li {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-cond);
  font-size: var(--t-line);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-head);
  padding: 12px 0;
  border-bottom: 1px solid var(--bone-2);
}
.checks li::before {
  content: '';
  width: 22px; height: 22px; flex: none;
  background: var(--red);
  clip-path: polygon(14% 47%, 0 61%, 39% 100%, 100% 22%, 86% 8%, 39% 71%);
}

/* In-flow act point: the long light band otherwise runs three screens with the
   number only in the sticky header. */
.why__call {
  margin-top: 26px;
  font-family: var(--f-cond);
  font-size: var(--t-line);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-head);
  color: var(--ink);
}
.why__call a {
  color: var(--red); white-space: nowrap;
  display: inline-block; padding-block: 10px; margin-block: -10px;
}
.why__call a:hover { color: var(--red-deep); }

.why__fig {
  --frame-off: 16px;
  margin: 0;
  position: relative;
  border: 10px solid var(--ink);
  box-shadow: var(--shadow-md);
}
.why__fig::after {
  content: ''; position: absolute; inset: -10px;
  border: 2px solid var(--red);
  transform: translate(var(--frame-off), var(--frame-off));
  pointer-events: none;
}
/* Stacked, the figure is the last thing in the section, so it reserves the
   room its offset frame needs instead of letting the frame bleed into the
   section padding and up against the Family title. */
@media (max-width: 900px) { .why__fig { margin-bottom: calc(var(--frame-off) + 2px); } }
.why__fig img { position: relative; z-index: 1; }
.why__fig figcaption {
  background: var(--ink); color: var(--concrete-2);
  font-family: var(--f-cond); text-transform: uppercase;
  letter-spacing: var(--track-head); font-size: var(--t-fine);
  padding: 12px 2px 2px;
  text-align: center;
}

/* ==========================================================================
   FAMILY
   ========================================================================== */
.fam {
  display: grid;
  grid-template-columns: 1fr 1.05fr .78fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
/* Same breakpoint as .people below, so the family and team blocks reflow together */
@media (max-width: 1080px) { .fam { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .fam { grid-template-columns: 1fr; } }

.fam__hero, .fam__side { margin: 0; }
.fam__hero img, .fam__side img {
  width: 100%;
  border-radius: 2px;
  box-shadow: var(--shadow-md);
}
.fam__hero { position: relative; }
.fam__hero::before {
  content: ''; position: absolute; left: -14px; top: -14px; bottom: -14px; width: 6px;
  background: var(--red);
}
.fam__side { margin-top: 40px; }

/* The girls' photo carries its own caption block: name, then the client's
   words about them. With the caption it is now the tallest column, and the
   grid's vertical centering floats the parents' photo and copy beside it. */
.fam__side-cap {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 2px solid var(--bone-2);
}
.fam__side-cap h3 {
  font-family: var(--f-display);
  font-size: var(--t-h3-name);
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}
.fam__side-cap p { color: var(--ink-soft); font-size: var(--t-sm); margin: 0; }

/* Below the three-up grid the girls drop under the parents as a photo + text
   row, so the caption never has to squeeze into a narrow column. */
@media (max-width: 1080px) {
  .fam__side {
    grid-column: 1 / -1;
    margin-top: 6px;
    display: grid;
    grid-template-columns: 1fr minmax(180px, 300px);
    gap: clamp(18px, 3vw, 30px);
    align-items: center;
  }
  /* Photo on the right: the parents' photo above and the three team rows
     below all sit photo-left, so this row breaks the run. */
  .fam__side picture { order: 2; }
  .fam__side-cap { margin-top: 0; padding-top: 0; border-top: 0; }
}
@media (max-width: 560px) {
  .fam__side { grid-template-columns: 1fr; }
  .fam__side picture { order: 0; }
  .fam__side-cap { margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--bone-2); }
}

.fam__lead {
  font-family: var(--f-display);
  font-size: var(--t-h3-display);
  text-transform: uppercase;
  line-height: 1.02;
  margin-bottom: 20px;
}
.fam__copy p { color: var(--ink-soft); }
.fam__sign { color: var(--ink); margin-top: 26px; }

/* ---------- Team: group shot, then one card per person ---------- */
/* The three bios are the heaviest block in the light band, so they get a room
   of their own: a full-bleed tint that runs to the bottom edge of the section.
   The family grid above keeps its air and the insurance section that follows
   starts against a visible edge instead of more of the same paper. */
#family { padding-bottom: 0; }
.team {
  margin-top: clamp(48px, 6.5vw, 88px);
  padding-block: var(--sec-s) clamp(56px, 7vw, 96px);
  background: var(--bone-2);
}
.team__intro {
  margin-bottom: 22px;
  font-family: var(--f-cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-head);
  font-size: var(--t-line);
  text-align: center;
  color: var(--ink);
}
/* The three of them together, cropped to a wide band so the section does not
   grow by a full portrait before the individual cards start. */
.team__group {
  margin: 0 0 clamp(22px, 3vw, 34px);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.team__group img {
  width: 100%;
  aspect-ratio: 2.4 / 1;
  object-fit: cover;
  object-position: 50% 15%;
}
@media (max-width: 640px) { .team__group img { aspect-ratio: 4 / 3; object-position: 50% 14%; } }

.people {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.8vw, 36px);
}
.person { display: grid; grid-template-columns: 1fr; align-content: start; }
.person__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 8%;
  border-radius: 2px;
  box-shadow: var(--shadow-sm);
}
.person__head {
  margin-top: 18px;
  padding-left: 14px;
  border-left: 4px solid var(--red);
}
.person__name {
  font-family: var(--f-display);
  font-size: var(--t-h3-name);
  text-transform: uppercase;
  color: var(--ink);
}
.person__role {
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  /* Brand red lands at 4.1:1 on the tinted band; the deep red clears 6:1 */
  color: var(--red-deep);
  margin: 4px 0 0;
}
.person__bio { margin: 14px 0 0; color: var(--ink-soft); font-size: var(--t-sm); }

/* Tablet: three columns squeeze the bios to 25 characters a line, so each
   person becomes a row instead: portrait left, name and bio beside it. */
@media (max-width: 1080px) {
  .people { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 40px); }
  .person {
    grid-template-columns: minmax(150px, 190px) 1fr;
    /* The portrait spans both rows and is taller than the name block. With
       two auto rows the grid split its extra height between them and the bio
       dropped to the portrait's bottom edge, leaving a hole under the name.
       Give the spare height to the bio row only. */
    grid-template-rows: auto 1fr;
    column-gap: clamp(20px, 3vw, 30px);
    align-items: start;
  }
  /* The grid item is the <picture>, not the img inside it. Spanning the img
     did nothing and the bio fell to the row under the portrait. */
  .person > picture { grid-row: 1 / span 2; }
  .person__head { margin-top: 0; }
  .person__bio { grid-column: 2; margin-top: 12px; }
}
/* Phones: portrait beside the name, bio under both. Three stacked 4:5
   portraits at full phone width would be 1,300px of scrolling on their own. */
@media (max-width: 560px) {
  .people { gap: 30px; }
  .person {
    grid-template-columns: 124px 1fr;
    grid-template-rows: auto;
    column-gap: 18px;
    align-items: center;
  }
  .person > picture { grid-row: auto; }
  .person__photo { aspect-ratio: 3 / 4; }
  .person__bio { grid-column: 1 / -1; margin-top: 14px; }
}

/* ==========================================================================
   INSURANCE
   ========================================================================== */
.ins {
  display: grid; grid-template-columns: 1.06fr .94fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .ins { grid-template-columns: 1fr; } }
.ins__copy p { color: var(--ink-soft); }
.ins__copy a { color: var(--red); font-weight: 600; transition: color .18s var(--ease); }
.ins__copy a:hover { color: var(--red-deep); }
.ins__copy .ins__help {
  border-left: 4px solid var(--red);
  padding: 4px 0 4px 16px;
  color: var(--ink);
}
.ins__help strong { font-family: var(--f-cond); font-size: 1.12em; text-transform: uppercase; letter-spacing: var(--track-head); }
/* In-copy links: enlarge the touch target past 44px without moving the line */
.ins__help a, .ins__cash a { white-space: nowrap; display: inline-block; padding-block: 10px; margin-block: -10px; }

/* Styled as a physical business card: the surface is a generated blank card
   (paper grain, red edge stripe, spot gloss) and every word on it stays live
   HTML, so the phone number is real text - selectable, tappable, and readable
   by screen readers. Nothing here is baked into the image. */
.ins__card {
  position: relative;
  color: #fff;
  padding: clamp(26px, 3.2vw, 38px) clamp(26px, 3.4vw, 40px) clamp(28px, 3.4vw, 40px) clamp(34px, 4vw, 48px);
  margin: 30px 0;
  border-radius: 10px;
  overflow: hidden;            /* CSS owns the corner radius, not the image */
  background-color: var(--ink);
  background-image: url('images/card-surface.webp');
  /* cover, pinned to the left edge: the red stripe stays flush at every width
     and the paper grain never stretches, whatever aspect the card takes */
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 18px 34px -12px rgba(0,0,0,.75),
    0 40px 70px -30px rgba(0,0,0,.65);
  transform: rotate(-0.5deg);
}
@media (prefers-reduced-motion: reduce) {
  .ins__card { transform: none; }
}
.ins__copy .ins__card-label {
  font-family: var(--f-cond); text-transform: uppercase;
  letter-spacing: var(--track-label); font-size: var(--t-label); color: var(--bone);
  margin-bottom: 8px;
}
.ins__copy .ins__card-name {
  font-family: var(--f-display);
  font-size: var(--t-h3-display);
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 2px;
}
.ins__card-phone { margin: 0; }
.ins__card-phone a {
  font-family: var(--f-display);
  font-size: var(--t-h3-display);
  color: var(--red-hot);
  text-decoration: none;
  letter-spacing: .01em;
  display: inline-block; padding-block: 4px; margin-block: -4px;
}
.ins__card-phone a:hover { color: #fff; }

.steps { list-style: none; margin: 0; padding: 0; }
.steps__i {
  display: flex; gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--bone-2);
}
.steps__i:first-child { border-top: 1px solid var(--bone-2); }
.steps__n {
  flex: none;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--ink); color: #fff;
  font-family: var(--f-display); font-size: 1.5rem;
  border-radius: 2px;
}
.steps__i:nth-child(3) .steps__n { background: var(--red); }
.steps__i h3 {
  font-family: var(--f-cond); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--track-head);
  font-size: var(--t-h3-label); margin-bottom: 6px;
}
.steps__i p { color: var(--ink-mute); font-size: var(--t-sm); }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(200px, 22vw, 290px);
  gap: 14px;
}
/* Eight photos: four across or two across, never three with an orphan row */
@media (max-width: 900px) { .gal { grid-template-columns: 1fr 1fr; grid-auto-rows: 230px; } }
.gal__i {
  margin: 0; position: relative; overflow: hidden;
  border-radius: 2px; background: #000;
}
/* Phones: two across at a shorter row. One-up, eight photos ran 1,800px. */
@media (max-width: 640px) { .gal { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; gap: 10px; } }
@media (max-width: 640px) { .gal__i figcaption { font-size: .82rem; padding: 26px 10px 10px; } }

.gal__i img { width: 100%; height: 100%; object-fit: cover; }
.gal__i:last-child img { object-position: 50% 18%; }
.gal__i figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 16px 14px;
  font-family: var(--f-cond); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--track-head);
  font-size: .95rem; color: #fff;
  /* Holds .8 alpha through the text zone so a bright photo behind the caption
     still leaves white type above 4.5:1 */
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.8) 48%, transparent 100%);
}
/* Not a lightbox, so no hover zoom or frame: nothing here opens. */

/* ==========================================================================
   QUOTE  (heading + call, the form, and the service-area lockup)
   One grid, three children. Desktop: copy top-left, area lockup bottom-left
   sitting on the desert horizon, form spanning the right. Phones: copy, form,
   then the area lockup as the closing line, so the form stays the focus.
   ========================================================================== */
.quote {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "copy form"
    "area form";
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: clamp(40px, 5vw, 64px);
  align-items: start;
}
.quote__copy { grid-area: copy; }
.quote .form { grid-area: form; }
.quote .shead { margin-bottom: clamp(28px, 3.4vw, 40px); }
.quote__note { margin-top: 22px; font-size: var(--t-sm); color: var(--concrete-2); }
.quote__mail {
  color: var(--red-text); font-weight: 600;
  overflow-wrap: anywhere;
  display: inline-block; padding-block: 10px; margin-block: -10px;
}
.quote__mail:hover { color: #fff; }

/* Service-area lockup. Desktop: the state outline stacked over its line, at
   the foot of the left column, on the desert horizon. Tablet: side by side.
   Phone: centred under the form. */
.areamini {
  grid-area: area;
  align-self: end;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  /* Hold the block to the copy's measure so the map can centre over the text
     rather than over the whole column, which would push it off to the right. */
  max-width: 40ch;
}
.areamini__map {
  position: relative;
  margin: 0 auto;
  width: clamp(176px, 15vw, 208px);
  aspect-ratio: 600 / 700;
}
.areamini__map img { width: 100%; height: 100%; display: block; }
/* Flat state outline, coloured here rather than in the file: bone face over a
   hard red offset, the same offset language as the call button. The <img> is
   the fallback for anything without CSS masks. */
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
  .areamini__map img { visibility: hidden; }
  .areamini__map::before, .areamini__map::after {
    content: ''; position: absolute; inset: 0;
    -webkit-mask: url('images/az-map.svg') center / contain no-repeat;
    mask: url('images/az-map.svg') center / contain no-repeat;
  }
  .areamini__map::before { background: var(--red); transform: translate(6px, 6px); }
  .areamini__map::after  { background: var(--bone); }
}
.areamini__copy { max-width: none; }
.areamini__title {
  font-family: var(--f-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-head);
  font-size: clamp(var(--t-h3-label), 2vw, 1.45rem);
  line-height: 1.05;
  color: #fff;
  margin-bottom: 8px;
}
.areamini__copy p { color: var(--concrete-2); font-size: var(--t-sm); margin: 0; }

@media (max-width: 900px) {
  .quote {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "copy" "form" "area";
  }
  .areamini {
    align-self: auto;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 36px);
    max-width: none;
  }
  .areamini__map { margin: 0; }
  .areamini__map { width: clamp(140px, 22vw, 170px); }
  .areamini__copy { max-width: 48ch; }
}
@media (max-width: 560px) {
  .areamini { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; }
  .areamini__map { width: clamp(120px, 34vw, 150px); margin: 0 auto; }
  .areamini__copy { max-width: 34ch; }
}

.form {
  background: var(--bone);
  color: var(--ink);
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: 2px;
  border-top: 6px solid var(--red);
  box-shadow: var(--shadow-lg);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Three choices beside a select: give the choices the wider cell so "Not sure"
   never wraps when the form column narrows. */
.form__row--job { grid-template-columns: 1.3fr 1fr; }
@media (max-width: 560px) { .form__row, .form__row--job { grid-template-columns: 1fr; } }

.field { display: block; margin-bottom: 16px; }
.field__label {
  display: block;
  font-family: var(--f-cond); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--track-label);
  font-size: var(--t-label); color: var(--ink-label);
  margin-bottom: 6px;
}
.field__label em { font-style: normal; color: var(--ink-mute); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 2px solid #d5d1ca;
  border-radius: 2px;
  padding: 12px 14px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(209,35,42,.16);
}
.field input::placeholder, .field textarea::placeholder { color: #6b6e72; }
.field__hint { display: block; margin-top: 6px; font-size: var(--t-fine); color: var(--ink-mute); line-height: 1.4; }

/* Two- and three-way choices as a segmented control: one tap, no dropdown to
   open, and the whole cell is the hit area. The radio itself is stretched
   invisibly over its cell so native validation and keyboard focus still work. */
.field--seg { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.field--seg legend {
  display: block; padding: 0;
  font-family: var(--f-cond); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--track-label);
  font-size: var(--t-label); color: var(--ink-label);
  margin-bottom: 6px;
}
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: #fff;
  border: 2px solid #d5d1ca;
  border-radius: 2px;
  overflow: hidden;
  transition: border-color .18s var(--ease);
}
.seg__opt { position: relative; display: block; margin: 0; }
.seg__opt + .seg__opt { border-left: 2px solid #d5d1ca; }
.seg__opt input {
  position: absolute; inset: 0;
  width: 100%; height: 100%; margin: 0;
  opacity: 0;
  cursor: pointer;
}
.seg__opt span {
  display: flex; align-items: center; justify-content: center;
  min-height: 50px;
  padding: 8px 4px;
  font-family: var(--f-cond); font-weight: 700;
  font-size: .98rem; text-transform: uppercase; letter-spacing: var(--track-ui);
  white-space: nowrap;
  color: var(--ink-label);
  text-align: center;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.seg__opt input:hover:not(:checked) + span { background: var(--bone-2); }
.seg__opt input:checked + span { background: var(--ink); color: #fff; }
.seg__opt input:focus-visible + span { box-shadow: inset 0 0 0 3px var(--red); }
.seg:has(input:user-invalid) { border-color: #b3161c; }
.field--seg:has(input:user-invalid) .field__err { display: block; }

/* Inline errors: only after the visitor has tried the field or hit Send, never
   on first paint. Native validation still runs and focuses the first problem. */
.field__err {
  display: none;
  margin-top: 6px;
  font-size: var(--t-fine);
  font-weight: 600;
  color: #b3161c;
}
.field input:user-invalid, .field textarea:user-invalid {
  border-color: #b3161c;
}
.field input:user-invalid ~ .field__err { display: block; }

.form__fine {
  margin-top: 14px; text-align: center;
  font-size: var(--t-fine); color: var(--ink-mute);
}
.hp { position: absolute; left: -9999px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--ink); color: var(--concrete-2); padding-top: var(--sec-s); border-top: 1px solid var(--line); }
.footer__in {
  display: grid;
  grid-template-columns: 1.25fr .8fr .8fr 1.05fr;
  gap: clamp(28px, 3.6vw, 52px);
  padding-bottom: clamp(36px, 4vw, 52px);
}
/* Tablet: two columns. Brand and contact pair on the first row (both short
   identity blocks), the two link lists pair on the second, so a 6-row list
   never sits beside a 3-line brand block with a hole under it. */
@media (max-width: 900px) {
  .footer__in { grid-template-columns: 1fr 1fr; }
  .footer__brand { order: 1; }
  .footer__col { order: 3; }
  .footer__col--contact { order: 2; }
}
/* Phones: brand and contact go full width, the two link columns stay side by side */
@media (max-width: 560px) {
  .footer__in { gap: 32px 18px; }
  .footer__brand, .footer__col--contact { grid-column: 1 / -1; }
  .footer__col--contact { order: 4; }
}

/* The mark is edge-to-edge (no transparent padding), so the 18px below it is
   the real visual gap to the tagline. */
.footer__brand img { width: var(--brand-w); margin-bottom: 18px; }
.footer__tag { color: var(--bone); }
.footer__col h2 {
  font-family: var(--f-cond); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--track-label);
  font-size: var(--t-label); color: #fff; margin-bottom: 14px;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; }
/* 9px padding lifts every link to a 44px row; headings sit 14px above the
   first row so heading-to-text reads as 23px in all four columns. */
.footer__col a { display: inline-block; padding-block: 9px; text-decoration: none; transition: color .18s var(--ease); }
.footer__col a:hover { color: var(--red-text); }

/* Contact column: one grid, one gap, no per-item margins to drift. */
.footer__col--contact { display: grid; grid-template-rows: auto; align-content: start; justify-items: start; gap: 10px; }
.footer__col--contact h2 { margin-bottom: 4px; }
.footer__col--contact p { font-size: var(--t-sm); margin: 0; }
.footer__phone {
  display: block;
  font-family: var(--f-display);
  font-size: 2rem; color: #fff; text-decoration: none;
  line-height: 1.1;
}
.footer__phone:hover { color: var(--red-hot); }
.footer__mail {
  display: inline-block;
  color: var(--bone); text-decoration: none;
  font-weight: 600;
  overflow-wrap: anywhere;
  padding-block: 9px;
  border-bottom: 2px solid var(--red);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.footer__mail:hover { color: var(--red-text); }

/* Beats .footer__col ul (display: grid) so the two networks sit on one row. */
.footer__col .social { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.social a {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 44px; padding-block: 9px;
  font-family: var(--f-cond); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--track-ui); font-size: 1rem;
  color: var(--bone); text-decoration: none;
  transition: color .18s var(--ease);
}
.social a:hover { color: var(--red-text); }
.social .ico { width: 1.3em; height: 1.3em; }

.footer__legal {
  border-top: 1px solid var(--line);
  padding-block: 22px 28px;
  display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
  font-family: var(--f-cond); text-transform: uppercase;
  letter-spacing: var(--track-ui); font-size: var(--t-fine); color: var(--concrete-2);
}
.footer__legal p { margin: 0; }

/* ==========================================================================
   MOBILE CALL BAR
   ========================================================================== */
.callbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  align-items: center; justify-content: center; gap: .6em;
  background: var(--red);
  color: #fff; text-decoration: none;
  font-family: var(--f-cond); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--track-ui);
  font-size: 1.14rem;
  box-sizing: border-box;
  /* The bar's own height stays fixed. Mobile browsers change
     env(safe-area-inset-bottom) as the URL bar collapses during a fast scroll;
     when that value drives padding, the bar visibly stretches mid-scroll.
     Height is pinned here and the inset is added as a separate spacer below,
     so the tappable row never changes size. */
  min-height: 56px;
  padding: 14px 16px;
  box-shadow: 0 -8px 26px rgba(0,0,0,.32);
  /* Keep it on its own compositor layer so momentum scrolling cannot
     re-rasterize (and smear) it frame by frame. */
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout paint;
}
/* Safe-area allowance lives on a pseudo-element, so when the inset changes it
   grows the gap under the bar rather than resizing the bar itself. */
.callbar::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 100%;
  height: env(safe-area-inset-bottom, 0px);
  background: var(--red);
}
.callbar:active { background: var(--red-deep); }
@media (max-width: 760px) {
  .callbar { display: flex; }
  .footer { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   REVEAL
   ========================================================================== */
/* Only hide when JS is confirmed running, so content is never stranded invisible. */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .header, .topbar, .callbar, .hero__media, .stripe, .mobilenav, .hp { display: none; }
  .safety::after, #quote::after, .section--dark::before { display: none; }
  /* Print dialogs default to "background graphics" off. That drops every dark
     surface but keeps the light type set on it, so whole sections printed white
     on white. One ink-on-paper palette for everything, whatever the dialog says. */
  * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
  body { background: #fff !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .btn, .ins__card, .steps__n { border: 1px solid #000 !important; }
}

/* ==========================================================================
   TEXTURE LAYERS
   Generated abstract backgrounds. Both are decorative only, sit behind a heavy
   scrim, and are declared here (not in HTML) so they carry no alt text and are
   skipped by assistive tech. They make no claim about the business.
   ========================================================================== */
.safety { position: relative; isolation: isolate; }
.safety::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image: url('images/tex-glass.webp');
  background-size: cover;
  background-position: center;
  opacity: .30;
  /* fade the texture out at the edges so it reads as depth, not a pasted photo */
  -webkit-mask-image: radial-gradient(ellipse 78% 88% at 50% 45%, #000 32%, transparent 82%);
  mask-image: radial-gradient(ellipse 78% 88% at 50% 45%, #000 32%, transparent 82%);
  pointer-events: none;
}

/* Desert horizon, inherited from the old standalone area section. Sits behind
   the quote block; the section needs a stacking context for it to layer. */
#quote { position: relative; isolation: isolate; }
#quote::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: -1;
  background-image: url('images/tex-desert.webp');
  background-size: cover;
  background-position: center bottom;
  opacity: .45;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
  pointer-events: none;
}

/* ==========================================================================
   GOOGLE REVIEWS
   Sits on bone between the dark gallery and the ink quote block. The score
   strip is a link, so it carries hover/focus states; the cards are not links
   and deliberately have no hover, same rule as the service and gallery tiles.
   ========================================================================== */
/* Title left, score right, bottoms aligned, so the proof reads as part of the
   heading rather than a third beat between it and the cards. The row wraps
   below ~1180px and the score drops under the lede, left-aligned. */
.revs__head {
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: 28px 40px;
  margin-bottom: clamp(36px, 5vw, 62px);
}
.revs__head .shead { margin-bottom: 0; }

/* Same object language as the Arizona map: a bone face over a hard red offset. */
.revs__score {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px 12px 16px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 6px 6px 0 0 var(--red);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.revs__score:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 0 var(--red); }
.revs__score:active { transform: translate(2px, 2px); box-shadow: 4px 4px 0 0 var(--red); }
.revs__num {
  font-family: var(--f-display);
  font-size: var(--t-h3-display);
  line-height: .9;
  letter-spacing: .01em;
}
.revs__col { display: flex; flex-direction: column; gap: 3px; }
.revs__stars { color: var(--red); font-size: 1.05rem; letter-spacing: var(--track-label); line-height: 1; }
.revs__meta {
  font-family: var(--f-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-size: var(--t-label);
  color: var(--ink-soft);
}

/* Two across. Four across put 27 characters on a line and ran the longer
   reviews nine lines deep; two across sets them at a body measure in three or
   four lines, so the four cards land at nearly the same height. */
.revs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  /* Real reviews come in different lengths. Stretching every card to the
     tallest one stranded the short ones' names at the bottom of an empty box,
     so each card sizes to its own content instead. */
  align-items: start;
}
.rev {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px 24px;
  background: #fff;
  border-radius: 2px;
  border-top: 4px solid var(--red);
}
.rev__stars { color: var(--red); font-size: var(--t-sm); letter-spacing: var(--track-label); margin: 0; line-height: 1; }
.rev__text {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 62ch;
  text-wrap: pretty;
}
.rev__who {
  margin: 4px 0 0;
  font-family: var(--f-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-size: var(--t-label);
  color: var(--ink);
}
.revs__more { margin: clamp(24px, 3.5vw, 34px) 0 0; }
.revs__more a {
  font-family: var(--f-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-ui);
  font-size: var(--t-label);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
  /* 44px tap row without moving the line */
  display: inline-block; padding-block: 10px; margin-block: -10px;
  transition: color .18s var(--ease), text-decoration-color .18s var(--ease);
}
.revs__more a:hover { color: var(--red-deep); text-decoration-color: var(--red-deep); }

/* Under 700px two across drops below 30 characters a line; one column, same
   breakpoint the family grid uses. */
@media (max-width: 700px) { .revs { grid-template-columns: 1fr; gap: 14px; } }