/* ==========================================================================
   plumbing-bold-emergency  ·  style.css
   --------------------------------------------------------------------------
   Static HTML + CSS + a little vanilla JS. No build step, no framework.
   All colour, type and shape decisions live in tokens.css; this file only
   spends them. Sections:

     1.  Base and resets
     2.  Browser surfaces (selection, scrollbar, caret, focus)
     3.  Typography
     4.  Layout primitives (container, section, grids, splits)
     5.  Buttons and links
     6.  Icons
     7.  Top bar, header, navigation
     8.  Heroes and page heads
     9.  Call card + proof bar
     10. Cards (info, triage, interactive service cards, quotes, stats)
     11. Steps timeline
     12. Media figures and photo frames
     13. Chips, tags, table, FAQ, checklist, key-value list
     14. Forms
     15. CTA band, footer, mobile call bar
     16. Motion (reveal, entrance, reduced motion)
     17. Utilities
   ========================================================================== */


/* 1. Base and resets ====================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored section headings land clear of the sticky header. */
  scroll-padding-top: calc(var(--t-header-h) + 24px);
}

body {
  margin: 0;
  font-family: var(--t-font-body);
  font-size: 1.0625rem;
  line-height: var(--a-lh);
  color: var(--t-body);
  background: var(--a-white);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

p { margin: 0 0 var(--a-4); }

ul, ol { margin: 0; padding: 0; }

/* Cross-document fade between pages where the browser supports it.
   Pure CSS, zero JS, ignored everywhere else. */
@view-transition { navigation: auto; }


/* 2. Browser surfaces ===================================================== */

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

.on-dark ::selection,
.on-dark::selection {
  background: var(--t-flare);
  color: var(--t-ink);
}

input, textarea, select { caret-color: var(--t-red); }

/* Scrollbar themed from the palette; WebKit + the standard property. */
html {
  scrollbar-color: var(--t-ink-3) var(--t-paper);
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--t-paper); }
::-webkit-scrollbar-thumb {
  background: var(--t-ink-3);
  border-radius: 6px;
  border: 3px solid var(--t-paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--t-ink-2); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--t-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible { outline-color: var(--t-focus-dark); }


/* 3. Typography =========================================================== */

h1, h2, h3, h4 {
  font-family: var(--t-font-head);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: .002em;
  color: var(--t-ink);
  margin: 0 0 var(--a-4);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.75rem, 1.9rem + 3.6vw, 4.375rem);
}

h2 {
  font-size: clamp(2rem, 1.55rem + 2.4vw, 3.25rem);
}

h3 {
  font-size: clamp(1.35rem, 1.2rem + .8vw, 1.75rem);
  line-height: 1.12;
}

.lede {
  font-size: clamp(1.125rem, 1.05rem + .4vw, 1.3125rem);
  line-height: 1.55;
  max-width: 60ch;
}

.on-dark h1, .on-dark h2, .on-dark h3 { color: #fff; }
.on-dark { color: var(--t-on-dark); }
.on-dark p { color: var(--t-on-dark); }

a {
  color: var(--t-red-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color .18s ease, color .18s ease;
}
a:hover { text-decoration-color: currentColor; }

strong { color: var(--t-ink); font-weight: 600; }
.on-dark strong { color: #fff; }


/* 4. Layout primitives ==================================================== */

.container {
  width: 100%;
  max-width: var(--a-container);
  margin-inline: auto;
  padding-inline: var(--a-gutter);
}

.section { padding-block: clamp(4rem, 3rem + 4vw, 6.5rem); }

.section--tint { background: var(--t-paper); }

.on-dark { background: var(--t-ink); }

.section__head {
  max-width: 62ch;
  margin-bottom: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
}
.section__head > p:last-child { margin-bottom: 0; }

.grid {
  display: grid;
  gap: var(--a-6);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  align-items: center;
}
.split--wide-text { grid-template-columns: 1.25fr 1fr; }

@media (max-width: 1023px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 719px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .split, .split--wide-text { grid-template-columns: 1fr; }
}


/* 5. Buttons and links ==================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  font-family: var(--t-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  padding: .95rem 1.5rem;
  border-radius: var(--t-r-ctrl);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2, .7, .3, 1),
              box-shadow .18s ease,
              background-color .18s ease,
              border-color .18s ease,
              color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .06s; }

.btn--call {
  background: var(--t-red);
  color: #fff;
  box-shadow: 0 2px 6px rgba(200, 30, 15, .25), 0 8px 22px rgba(200, 30, 15, .18);
}
.btn--call:hover {
  background: var(--t-red-dark);
  box-shadow: 0 4px 10px rgba(200, 30, 15, .28), 0 14px 30px rgba(200, 30, 15, .22);
}

.btn--dark {
  background: var(--t-ink);
  color: #fff;
}
.btn--dark:hover { background: var(--t-ink-2); box-shadow: var(--t-shadow-lg); }

.btn--outline {
  border-color: var(--t-ink);
  color: var(--t-ink);
  background: transparent;
}
.btn--outline:hover { background: var(--t-ink); color: #fff; }

.btn--ghost {
  border-color: rgba(255, 255, 255, .32);
  color: #fff;
  background: rgba(255, 255, 255, .04);
}
.btn--ghost:hover {
  border-color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .09);
}

/* Arrow inside any button or arrow-link nudges on hover. */
.btn .icon, .link-arrow .icon {
  transition: transform .18s cubic-bezier(.2, .7, .3, 1);
}
.btn:hover .icon--arrow-slide,
.link-arrow:hover .icon { transform: translateX(4px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  color: var(--t-red-deep);
  text-decoration: none;
}
.link-arrow:hover { color: var(--t-red-dark); }
.on-dark .link-arrow { color: var(--t-flare); }

/* Big condensed phone number used in page heads. */
.tel-display {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--t-font-head);
  font-weight: 700;
  font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-decoration: none;
  transition: color .18s ease;
}
.tel-display:hover { color: var(--t-flare); }
.tel-display .icon { color: var(--t-flare); }

.tel-inline { font-weight: 600; white-space: nowrap; }


/* 6. Icons ================================================================ */

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 18px; height: 18px; stroke-width: 2; }
.icon--lg { width: 32px; height: 32px; stroke-width: 1.6; }

.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--t-r-ctrl);
  background: var(--t-red-tint);
  color: var(--t-red-deep);
  margin-bottom: var(--a-4);
}


/* 7. Top bar, header, navigation ========================================= */

.topbar {
  background: var(--t-ink);
  color: var(--t-on-dark);
  font-size: .875rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-4);
  min-height: 42px;
  padding-block: 6px;
}
.topbar__note { margin: 0; }
.topbar__note strong { color: #fff; }
.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.topbar__link:hover { color: var(--t-flare); }
.topbar__link .icon { color: var(--t-flare); }

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--a-white);
  border-bottom: 1px solid var(--t-line);
  transition: box-shadow .25s ease;
}
.header.is-stuck { box-shadow: var(--t-shadow-lg); }

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--a-6);
  height: var(--t-header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  margin-right: auto;
}
.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--t-r-ctrl);
  background: var(--t-red);
  color: #fff;
  transition: transform .18s cubic-bezier(.2, .7, .3, 1);
}
.brand:hover .brand__mark { transform: rotate(-6deg); }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--t-font-head);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: .01em;
  color: var(--t-ink);
}
.brand__tag {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--t-red-deep);
}

.nav__list {
  display: flex;
  gap: .25rem;
  list-style: none;
}
.nav__link {
  display: inline-block;
  padding: .55rem .8rem;
  font-weight: 500;
  color: var(--t-ink);
  text-decoration: none;
  border-radius: var(--t-r-ctrl);
  position: relative;
  transition: background-color .16s ease, color .16s ease;
}
.nav__link:hover { background: var(--t-paper); }
.nav__link[aria-current="page"] { font-weight: 600; }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: .2rem;
  height: 2.5px;
  border-radius: 2px;
  background: var(--t-red);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--t-line);
  border-radius: var(--t-r-ctrl);
  background: var(--a-white);
  color: var(--t-ink);
  cursor: pointer;
}
.nav-toggle .icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; }

@media (max-width: 959px) {
  .topbar__note {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-toggle { display: inline-flex; }
  .header__cta { display: none; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--a-white);
    border-bottom: 1px solid var(--t-line);
    box-shadow: var(--t-shadow-lg);
    padding: var(--a-4) var(--a-gutter) var(--a-6);
    display: none;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; gap: .125rem; }
  .nav__link { display: block; font-size: 1.125rem; padding: .8rem .8rem; }
  .nav__link[aria-current="page"]::after { bottom: .45rem; }
}

@media (max-width: 599px) {
  .topbar__note { display: none; }
  .topbar__inner { justify-content: center; }
}


/* 8. Heroes and page heads =============================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 2rem + 3vw, 5rem);
  align-items: center;
}

.hero__lede { margin-block: var(--a-6) var(--a-8); }

/* The hero photo fills the whole right column rather than floating small
   in the corner of the ink. */
.hero .media {
  height: 100%;
  min-height: 400px;
}
.hero .media.media--43 { aspect-ratio: auto; }

@media (max-width: 959px) {
  .hero .media { min-height: 0; }
  .hero .media.media--43 { aspect-ratio: 3 / 2; }
}

/* Faint pipe schematic in the ink, drawn not photographed. */
.hero__deco {
  position: absolute;
  right: -60px;
  top: -80px;
  width: 520px;
  height: 520px;
  color: var(--t-ink-3);
  opacity: .5;
  pointer-events: none;
}

/* Emergency page: the photo is the hero. Scrim keeps AA contrast over it. */
.hero--photo { isolation: isolate; }
.hero--photo .hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero--photo .hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(78deg,
      rgba(11, 20, 36, .97) 0%,
      rgba(11, 20, 36, .88) 46%,
      rgba(11, 20, 36, .55) 74%,
      rgba(11, 20, 36, .35) 100%);
}

/* Interior page head: compact ink band. */
.pagehead {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2.25rem + 3vw, 4.5rem);
}
.pagehead .lede { margin-bottom: var(--a-6); }
.pagehead .hero__deco { opacity: .35; }

.crumbs { margin-bottom: var(--a-6); font-size: .9375rem; }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  list-style: none;
}
.crumbs li { color: var(--t-on-dark-soft); }
.crumbs li + li::before {
  content: "/";
  margin-right: .375rem;
  color: var(--t-ink-3);
}
.crumbs a { color: var(--t-on-dark); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-4);
}

/* Anchor pill navigation: the strip under the services page head. */
.anchor-nav {
  background: var(--a-white);
  border-bottom: 1px solid var(--t-line);
}
.anchor-nav ul {
  display: flex;
  gap: .5rem;
  list-style: none;
  padding-block: var(--a-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.anchor-nav a {
  display: inline-block;
  white-space: nowrap;
  padding: .5rem 1.05rem;
  border: 1.5px solid var(--t-line);
  border-radius: var(--a-radius-pill);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--t-ink);
  text-decoration: none;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.anchor-nav a:hover {
  border-color: var(--t-ink);
  background: var(--t-ink);
  color: #fff;
}

/* Service groups on the services page. */
.svc-group { margin-bottom: clamp(3.5rem, 3rem + 2.5vw, 5.5rem); }
.svc-group:last-child { margin-bottom: 0; }
.svc-group__head {
  display: flex;
  align-items: center;
  gap: var(--a-4);
  margin-bottom: var(--a-4);
}
.svc-group__head .icon-tile { margin-bottom: 0; flex: none; }
.svc-group__head h2 { margin-bottom: 0; }
.svc-group > .lede { max-width: 62ch; }

/* A media cell that fills its grid track alongside taller cards. */
.media--fill {
  height: 100%;
  min-height: 260px;
}

@media (max-width: 959px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__deco { display: none; }
}


/* 9. Call card + proof bar =============================================== */

.callcard {
  position: relative;
  background: var(--a-white);
  color: var(--t-body);
  border-radius: var(--t-r-panel);
  box-shadow: var(--t-shadow-lg);
  padding: var(--a-8);
  overflow: hidden;
}
/* The hazard stripe: one of its three sanctioned appearances. */
.callcard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  background: var(--t-hazard);
}
.callcard p { color: var(--t-body); }

.callcard__label {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 600;
  color: var(--t-ink);
  margin-bottom: var(--a-3);
}

.pulse {
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 50%;
  background: var(--t-red);
  box-shadow: 0 0 0 0 rgba(200, 30, 15, .45);
  animation: pulse 2.2s cubic-bezier(.3, 0, .4, 1) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(200, 30, 15, .45); }
  70%  { box-shadow: 0 0 0 12px rgba(200, 30, 15, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 30, 15, 0); }
}

.callcard__number {
  display: block;
  font-family: var(--t-font-head);
  font-weight: 700;
  font-size: clamp(2.75rem, 2.3rem + 2.4vw, 4rem);
  line-height: 1;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: var(--t-red);
  text-decoration: none;
  margin-bottom: var(--a-3);
  transition: color .18s ease;
}
.callcard__number:hover { color: var(--t-red-dark); }

.callcard__sub { font-size: .9375rem; margin-bottom: var(--a-6); }

.callcard__split {
  display: grid;
  gap: var(--a-3);
  border-top: 1px solid var(--t-line);
  padding-top: var(--a-6);
}
.callcard__row {
  display: flex;
  gap: .75rem;
  margin: 0;
  font-size: .9375rem;
}
.callcard__row .icon { color: var(--t-red-deep); margin-top: 2px; }

/* Proof bar: the four assurances as a strip directly under the hero. */
.proofbar {
  background: var(--a-white);
  border-bottom: 1px solid var(--t-line);
}
.assurances {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
}
.assurances li {
  display: flex;
  gap: .7rem;
  padding: var(--a-6) var(--a-4);
  font-size: .9375rem;
  line-height: 1.45;
}
.assurances li + li { border-left: 1px solid var(--t-line); }
.assurances .icon {
  color: var(--t-red-deep);
  margin-top: 2px;
}

@media (max-width: 1023px) {
  .assurances { grid-template-columns: 1fr 1fr; }
  .assurances li:nth-child(odd) { border-left: none; }
  .assurances li:nth-child(n+3) { border-top: 1px solid var(--t-line); }
}
@media (max-width: 599px) {
  .assurances { grid-template-columns: 1fr; }
  .assurances li { border-left: none !important; padding-block: var(--a-4); }
  .assurances li + li { border-top: 1px solid var(--t-line); }
}


/* 10. Cards =============================================================== */

.card {
  background: var(--a-white);
  border: 1px solid var(--t-line);
  border-radius: var(--t-r-panel);
  padding: var(--a-8);
  box-shadow: var(--t-shadow);
}
.section--tint .card { border-color: transparent; }
.card > :last-child { margin-bottom: 0; }
.card h3 { margin-bottom: var(--a-3); }

/* Triage cards: the "do this first" line is the point of the card. */
.card--action { display: flex; flex-direction: column; }
.card--action .card__do {
  margin-top: auto;
  padding: var(--a-3) var(--a-4);
  background: var(--t-red-tint);
  border-radius: var(--t-r-ctrl);
  font-size: .9375rem;
  margin-bottom: var(--a-4);
}
.card--action .link-arrow { font-size: .9375rem; }

/* Interactive service cards. The whole card is the link; hover and focus
   lift it, zoom the photo and reveal the detail line. The detail line
   always occupies space so nothing shifts. */
.svc-card {
  --lift: 0px;
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--a-white);
  border: 1px solid var(--t-line);
  border-radius: var(--t-r-panel);
  overflow: hidden;
  text-decoration: none;
  color: var(--t-body);
  box-shadow: var(--t-shadow);
  transform: perspective(900px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
}
.svc-card:hover,
.svc-card:focus-visible {
  --lift: -6px;
  box-shadow: var(--t-shadow-lg);
}
.svc-card:focus-visible { outline-offset: 4px; }

.svc-card__media {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--t-ink-2);   /* graceful fallback if the photo is missing */
  color: var(--t-on-dark);
}
.svc-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.svc-card:hover .svc-card__media img,
.svc-card:focus-visible .svc-card__media img { transform: scale(1.06); }

.svc-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--a-6);
}
.svc-card__body h3 { margin-bottom: var(--a-2); }
.svc-card__body p { font-size: .9689rem; margin-bottom: var(--a-4); }

.svc-card__more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--t-red-deep);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s cubic-bezier(.2, .7, .3, 1);
}
.svc-card:hover .svc-card__more,
.svc-card:focus-visible .svc-card__more {
  opacity: 1;
  transform: none;
}
.svc-card__more .icon { transition: transform .18s cubic-bezier(.2, .7, .3, 1); }
.svc-card:hover .svc-card__more .icon { transform: translateX(4px); }

/* Touch screens have no hover: the detail line simply stays visible. */
@media (hover: none) {
  .svc-card__more { opacity: 1; transform: none; }
}

/* Featured card: the emergency route, ink with flare. */
.svc-card--featured {
  background: var(--t-ink);
  border-color: var(--t-ink);
  color: var(--t-on-dark);
  justify-content: flex-end;
}
.svc-card--featured h3 { color: #fff; }
.svc-card--featured .svc-card__body { padding: var(--a-8); }
.svc-card--featured .svc-card__body p { color: var(--t-on-dark); }
.svc-card--featured .icon-tile {
  background: rgba(255, 106, 60, .14);
  color: var(--t-flare);
}
.svc-card--featured .svc-card__more { color: var(--t-flare); }

/* Quote cards: slots for real reviews. */
.quote-card {
  margin: 0;
  background: var(--a-white);
  border: 1px solid var(--t-line);
  border-radius: var(--t-r-panel);
  padding: var(--a-8);
  box-shadow: var(--t-shadow);
  display: flex;
  flex-direction: column;
}
.quote-card::before {
  content: "\201C";
  font-family: var(--t-font-head);
  font-weight: 700;
  font-size: 3.5rem;
  line-height: .6;
  color: var(--t-red);
  display: block;
  margin-bottom: var(--a-4);
}
.quote-card blockquote {
  margin: 0 0 var(--a-6);
  font-size: 1.0625rem;
  color: var(--t-ink);
}
.quote-card figcaption {
  margin-top: auto;
  font-weight: 600;
  color: var(--t-ink);
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

.placeholder-note {
  display: inline-block;
  align-self: flex-start;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--t-red-deep);
  background: var(--t-red-tint);
  border: 1px dashed color-mix(in srgb, var(--t-red) 45%, transparent);
  border-radius: var(--a-radius-pill);
  padding: .2rem .7rem;
}

/* Stats: big condensed numerals, counted up by site.js. */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--a-6);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
  border-bottom: 1px solid var(--t-ink-3);
}
.stat__value {
  font-family: var(--t-font-head);
  font-weight: 700;
  font-size: clamp(2.75rem, 2.2rem + 2.6vw, 4.25rem);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: .1em;
}
.stat__value .stat__suffix { color: var(--t-flare); }
.stat__label {
  margin: var(--a-2) 0 0;
  font-size: .9375rem;
  color: var(--t-on-dark-soft);
}

@media (max-width: 1023px) {
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: var(--a-8); }
}
@media (max-width: 479px) {
  .stats { grid-template-columns: 1fr 1fr; }
}


/* 11. Steps timeline ====================================================== */

.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--a-8) var(--a-6);
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-top: var(--a-6);
}
/* The connecting line... */
.steps li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: calc(-1 * var(--a-6));
  height: 2px;
  background: var(--t-ink-3);
}
.steps li:last-child::before { right: 0; }
/* ...and the numbered node on it. */
.steps li::after {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -19px;
  left: 0;
  font-family: var(--t-font-head);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--t-flare);
  background: var(--t-ink);
  padding: .45rem .6rem .35rem 0;
}
.steps h3 { font-size: 1.375rem; margin-bottom: var(--a-2); }
.steps p { font-size: .9689rem; margin: 0; }

@media (max-width: 1023px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .steps li:nth-child(2)::before { right: 0; }
}
@media (max-width: 599px) {
  .steps { grid-template-columns: 1fr; }
  .steps li::before { right: 0; }
}


/* 12. Media figures and photo frames ===================================== */

/* Every photo sits in a .media figure with an ink background, a fixed
   aspect ratio and object-fit cover, so a missing or slow image never
   shifts layout and always leaves a presentable coloured panel with the
   alt text readable inside it. site.js adds .is-missing on error. */
.media {
  position: relative;
  margin: 0;
  border-radius: var(--t-r-panel);
  overflow: hidden;
  background: var(--t-ink-2);
  color: var(--t-on-dark);
  box-shadow: var(--t-shadow);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* If the file 404s, the alt text renders on the ink panel. */
  font-size: .9375rem;
  line-height: 1.5;
  padding: var(--a-4);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media--43 { aspect-ratio: 4 / 3; }
.media--32 { aspect-ratio: 3 / 2; }
.media--45 { aspect-ratio: 4 / 5; }
.media--169 { aspect-ratio: 16 / 9; }
.media.is-missing::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 106, 60, .12), transparent 55%),
    var(--t-ink-2);
  z-index: -1;
}

/* Framed photo: the offset red outline is the print-shop registration mark
   of the brand. Used on split-section photos. */
.photo-frame { position: relative; }
.photo-frame::before {
  content: "";
  position: absolute;
  inset: 18px -14px -14px 18px;
  border: 2px solid color-mix(in srgb, var(--t-red) 55%, transparent);
  border-radius: var(--t-r-panel);
  pointer-events: none;
}
.on-dark .photo-frame::before {
  border-color: color-mix(in srgb, var(--t-flare) 55%, transparent);
}

@media (max-width: 719px) {
  .photo-frame::before { inset: 12px -8px -8px 12px; }
  .split .photo-frame { order: -1; }  /* photo above text when stacked */
}


/* 13. Chips, tags, table, FAQ, checklist, key-value list ================= */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  list-style: none;
}
.chips li {
  padding: .45rem 1.05rem;
  background: var(--a-white);
  border: 1px solid var(--t-line);
  border-radius: var(--a-radius-pill);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--t-ink);
}
.section:not(.section--tint) .chips li { background: var(--t-paper); border-color: transparent; }

.tag {
  display: inline-block;
  font-weight: 600;
  font-size: .875rem;
  line-height: 1;
  padding: .5rem .95rem;
  border-radius: var(--a-radius-pill);
  white-space: nowrap;
}
.tag--now { background: var(--t-red); color: #fff; }
.tag--soon { background: var(--t-ink); color: #fff; }

.table-wrap {
  background: var(--a-white);
  border: 1px solid var(--t-line);
  border-radius: var(--t-r-panel);
  box-shadow: var(--t-shadow);
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
caption {
  caption-side: bottom;
  text-align: left;
  padding: var(--a-4) var(--a-6);
  font-size: .875rem;
  color: var(--t-body);
  border-top: 1px solid var(--t-line);
}
thead th {
  font-family: var(--t-font-head);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: .015em;
  text-align: left;
  color: #fff;
  background: var(--t-ink);
  padding: var(--a-4) var(--a-6);
}
tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--t-ink);
  padding: var(--a-4) var(--a-6);
}
tbody td { padding: var(--a-4) var(--a-6); text-align: right; }
tbody tr + tr { border-top: 1px solid var(--t-line); }
tbody tr:hover { background: color-mix(in srgb, var(--t-paper) 60%, transparent); }

/* FAQ */
.faq {
  max-width: 780px;
  display: grid;
  gap: var(--a-3);
}
.faq details {
  background: var(--a-white);
  border: 1px solid var(--t-line);
  border-radius: var(--t-r-panel);
  box-shadow: var(--t-shadow);
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-4);
  padding: var(--a-4) var(--a-6);
  font-family: var(--t-font-head);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--t-ink);
  transition: color .16s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 2.5px solid var(--t-red);
  border-bottom: 2.5px solid var(--t-red);
  transform: rotate(45deg);
  transition: transform .25s cubic-bezier(.2, .7, .3, 1);
  margin-top: -4px;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq summary:hover { color: var(--t-red-deep); }
.faq details p {
  padding: 0 var(--a-6) var(--a-6);
  margin: 0;
}
.faq details[open] p { animation: faq-in .3s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Checklist (about page: what we will not do) */
.checklist {
  list-style: none;
  display: grid;
  gap: var(--a-4);
}
.checklist li {
  display: flex;
  gap: .8rem;
  background: var(--t-ink-2);
  border: 1px solid var(--t-ink-3);
  border-radius: var(--t-r-panel);
  padding: var(--a-4) var(--a-6);
}
.checklist .icon { color: var(--t-flare); margin-top: 3px; }

/* Service inclusion lists inside cards */
.svc-list {
  list-style: none;
  display: grid;
  gap: .55rem;
  margin-top: var(--a-4);
}
.svc-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .9689rem;
}
.svc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .55rem;
  height: .3rem;
  border-left: 2px solid var(--t-red);
  border-bottom: 2px solid var(--t-red);
  transform: rotate(-45deg);
}

/* Key-value contact list */
.kv {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--a-6);
}
.kv > div {
  border-top: 2px solid var(--t-ink);
  padding-top: var(--a-3);
}
.kv dt {
  font-family: var(--t-font-head);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: .015em;
  color: var(--t-ink);
  margin-bottom: .25rem;
}
.kv dd { margin: 0; font-size: .9689rem; }

@media (max-width: 479px) {
  .kv { grid-template-columns: 1fr; }
}


/* 14. Forms =============================================================== */

.form-shell {
  background: var(--a-white);
  border: 1px solid var(--t-line);
  border-radius: var(--t-r-panel);
  box-shadow: var(--t-shadow);
  padding: var(--a-8);
}

.form-status:empty { display: none; }
.form-status {
  margin-bottom: var(--a-4);
  padding: var(--a-3) var(--a-4);
  border-radius: var(--t-r-ctrl);
  background: var(--t-red-tint);
  color: var(--t-red-deep);
  font-weight: 500;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--a-6) var(--a-4);
}
.field--full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: .45rem; }
.field label,
.fieldset__legend {
  font-weight: 600;
  font-size: .9689rem;
  color: var(--t-ink);
}
.req { color: var(--t-red-deep); }

.field input,
.field select,
.field textarea {
  font: inherit;
  color: var(--t-ink);
  width: 100%;
  padding: .8rem .95rem;
  background: var(--a-white);
  border: 1.5px solid var(--t-line);
  border-radius: var(--t-r-ctrl);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field input::placeholder,
.field textarea::placeholder { color: #7A8494; }  /* 4.6:1 on white */
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #B9B6AC; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--t-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-focus) 22%, transparent);
}
.field textarea { min-height: 150px; resize: vertical; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230B1424' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  padding-right: 2.6rem;
}

.hint { font-size: .875rem; color: #6A7486; }

.radio-set { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.radio-row { display: flex; flex-wrap: wrap; gap: .625rem; }
.radio-row label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1.05rem;
  border: 1.5px solid var(--t-line);
  border-radius: var(--a-radius-pill);
  font-weight: 500;
  font-size: .9689rem;
  color: var(--t-ink);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
.radio-row label:hover { border-color: var(--t-ink); }
.radio-row input { accent-color: var(--t-red); width: 1.05rem; height: 1.05rem; }
.radio-row label:has(input:checked) {
  border-color: var(--t-red);
  background: var(--t-red-tint);
}

.form__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--a-6);
  margin-top: var(--a-8);
}
.form__note { margin: 0; font-size: .875rem; max-width: 42ch; color: #6A7486; }

@media (max-width: 599px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-shell { padding: var(--a-6); }
}

/* Map panel: a designed placeholder, not an apology. */
.map-panel {
  position: relative;
  border-radius: var(--t-r-panel);
  overflow: hidden;
  background:
    linear-gradient(rgba(19, 32, 58, .94), rgba(19, 32, 58, .94)),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(255, 255, 255, .05) 46px 47px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255, 255, 255, .05) 46px 47px),
    var(--t-ink-2);
  background-blend-mode: normal;
  color: var(--t-on-dark);
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--a-8);
}
.map-panel__inner { max-width: 46ch; }
.map-panel .icon { margin-inline: auto; color: var(--t-flare); width: 40px; height: 40px; }
.map-panel h3 { color: #fff; margin-top: var(--a-4); }
.map-panel p { color: var(--t-on-dark); }


/* 15. CTA band, footer, mobile call bar ================================== */

.cta-band {
  position: relative;
  padding-block: clamp(3.5rem, 2.75rem + 3vw, 5.5rem);
}
/* Hazard stripe, sanctioned appearance two of three. */
.cta-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  background: var(--t-hazard);
}
.cta-band__inner {
  display: grid;
  grid-template-columns: 1.2fr auto;
  gap: var(--a-8);
  align-items: center;
}

/* Photo variant: the van behind the closing band on the emergency page. */
.cta-band--photo { isolation: isolate; overflow: hidden; }
.cta-band--photo .cta-band__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.cta-band--photo .cta-band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-band--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(11, 20, 36, .88);
}
.cta-band__number {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  font-family: var(--t-font-head);
  font-weight: 700;
  font-size: clamp(2.5rem, 2rem + 2.6vw, 3.75rem);
  line-height: 1;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-decoration: none;
  margin-bottom: var(--a-4);
  transition: color .18s ease;
}
.cta-band__number:hover { color: var(--t-flare); }
.cta-band__number .icon { color: var(--t-flare); width: 36px; height: 36px; }

@media (max-width: 959px) {
  .cta-band__inner { grid-template-columns: 1fr; }
}

.footer {
  background: var(--t-ink);
  color: var(--t-on-dark);
  padding-block: clamp(3rem, 2.5rem + 2vw, 4.5rem) 0;
  border-top: 1px solid var(--t-ink-3);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--a-8);
  padding-bottom: var(--a-12);
}
.footer h2 {
  font-family: var(--t-font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--a-4);
}
.footer__brand p { font-size: .9375rem; margin-top: var(--a-4); }
.footer__brand .brand__name { color: #fff; }
.footer__list {
  list-style: none;
  display: grid;
  gap: .55rem;
  font-size: .9689rem;
}
.footer__list a,
.footer__contact a {
  color: var(--t-on-dark);
  text-decoration: none;
}
.footer__list a:hover,
.footer__contact a:hover { color: #fff; text-decoration: underline; }
.footer__contact {
  list-style: none;
  display: grid;
  gap: var(--a-4);
  font-size: .9375rem;
}
.footer__contact li { display: flex; gap: .7rem; }
.footer__contact .icon { color: var(--t-flare); margin-top: 3px; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--a-2) var(--a-6);
  padding-block: var(--a-6);
  border-top: 1px solid var(--t-ink-3);
  font-size: .875rem;
  color: var(--t-on-dark-soft);
}

@media (max-width: 1023px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px) {
  .footer__grid { grid-template-columns: 1fr; gap: var(--a-8); }
}

/* Mobile call bar: fixed, small screens only. Hazard appearance three. */
.callbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  gap: var(--a-3);
  padding: .7rem var(--a-gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: var(--t-ink);
  border-top: 3px solid transparent;
  border-image: var(--t-hazard) 3;
}
.callbar .btn--call { flex: 1; }
.callbar__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  border: 1.5px solid var(--t-ink-3);
  border-radius: var(--t-r-ctrl);
  color: #fff;
  text-decoration: none;
  transition: border-color .16s ease;
}
.callbar__secondary:hover { border-color: var(--t-flare); color: var(--t-flare); }

@media (max-width: 719px) {
  .callbar { display: flex; }
  body { padding-bottom: 76px; }  /* keeps the footer clear of the fixed bar */
}


/* 16. Motion ============================================================== */

/* Scroll reveal. site.js adds .js-reveal to <html> only when
   IntersectionObserver exists AND the user has not asked for reduced
   motion, so content is never hidden without JS. Transform + opacity only:
   no layout is ever moved. */
.js-reveal .rv {
  opacity: 0;
  transform: translateY(18px);
}
.js-reveal .rv.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .7s cubic-bezier(.2, .7, .3, 1),
    transform .7s cubic-bezier(.2, .7, .3, 1);
  transition-delay: var(--rv-delay, 0ms);
}

/* Hero entrance on load: one authored moment, CSS only. */
@media (prefers-reduced-motion: no-preference) {
  .hero__inner > * {
    animation: rise-in .8s cubic-bezier(.2, .7, .3, 1) both;
  }
  .hero__inner > *:nth-child(2) { animation-delay: .12s; }
  @keyframes rise-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pulse { animation: none; }
  .faq details[open] p { animation: none; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* 17. Utilities =========================================================== */

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--a-4);
  z-index: 100;
  background: var(--t-ink);
  color: #fff;
  font-weight: 600;
  padding: .8rem 1.2rem;
  border-radius: 0 0 var(--t-r-ctrl) var(--t-r-ctrl);
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; }

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

.mt-6 { margin-top: var(--a-6); }
.mt-8 { margin-top: var(--a-8); }
.mb-0 { margin-bottom: 0; }
.text-navy { color: var(--t-ink); }