/* ==========================================================================
   OnePump Septic Service
   Palette is sampled from the client's logo. Display face is a condensed
   grotesque set like truck vinyl - the lettering vernacular of the subject's
   own world. The phone number is treated as display type, because on this
   site the phone number is the product.
   ========================================================================== */

:root {
  /* colour */
  --navy:        #0C3050;
  --navy-deep:   #08223A;
  --navy-ink:    #061726;
  --cream:       #F7F5F1;
  --cream-deep:  #EDE8DF;
  --red:         #B5202A;
  --red-deep:    #8A1922;
  --steel:       #7E9CB8;
  --white:       #FFFFFF;
  --text:        #17293B;
  --muted:       #5B6C7D;
  --muted-light: #A8BACB;
  --line:        #DFDACF;
  --line-dark:   #1D4066;

  /* type */
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body:    "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* rhythm */
  --gutter: 20px;
  --max:    1180px;
  --radius: 4px;

  /* Height of the call bar's button row - the bar is this plus the iPhone home
     indicator's safe area beneath it. That inset used to resolve to 0 because
     the viewport meta lacked viewport-fit=cover; once that was fixed the bar
     grew by the inset, so the row came down from 66px to keep the whole thing
     the size it looks like it should be. The inset itself has to stay - it
     keeps the buttons clear of the home indicator. */
  --callbar: 44px;
  /* How far the call bar hangs below the viewport bottom - see .callbar.
     Not a pixel value on purpose. This browser's reported viewport height was
     measured swinging 631px -> 792px as its toolbars collapse, so any fixed
     figure can be outrun by a taller phone or a bigger toolbar; a first
     attempt at 130px was. Half the screen cannot be. vh resolves against the
     largest viewport, so it doesn't move when the toolbars do. */
  --bar-drop: 50vh;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--white); }

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

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

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
  color: var(--navy);
}

h1 { font-size: clamp(2.5rem, 8.5vw, 4.6rem); font-weight: 800; }
/* Drops the trailing phrase of a headline onto its own line, instead of
   letting the wrap point land mid-phrase. The nowrap keeps that phrase in one
   piece, but only once there's room for it — h1 has a 40px floor, so below
   ~340px the phrase is wider than the gutters allow and forcing it on one
   line would scroll the page sideways. */
.h1-tail { display: block; }
@media (min-width: 360px) {
  .h1-tail { white-space: nowrap; }
}
h2 { font-size: clamp(1.95rem, 5.5vw, 3.1rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.5rem); letter-spacing: 0.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: #fff; padding: 12px 18px; z-index: 200;
}
.skip:focus { left: 8px; top: 8px; }

/* ------------------------------------------------------------- layout */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: 3.75rem; }
.band--tight { padding-block: 2.75rem; }
.band--cream { background: var(--cream); }
.band--navy  { background: var(--navy); color: #E6EDF4; }
/* h1 must be in here too - the inner pages put their page title in a navy band,
   and without it the heading renders navy on navy and disappears */
.band--navy h1, .band--navy h2, .band--navy h3 { color: #fff; }

.lede {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 62ch;
}
.band--navy .lede { color: var(--muted-light); }

/* section heading block */
.eyebrow {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.85rem;
  color: var(--red);
  margin: 0 0 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--line);
  max-width: 90px;
}
.band--navy .eyebrow { color: var(--steel); }
.band--navy .eyebrow::after { background: var(--line-dark); }

.head { margin-bottom: 2.25rem; }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.15rem;
  line-height: 1;
  padding: 1rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--call { background: var(--red); color: #fff; border-color: var(--red); }
.btn--call:hover { background: var(--red-deep); border-color: var(--red-deep); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--light { background: #fff; color: var(--navy); border-color: #fff; }
.btn--light:hover { background: var(--cream); border-color: var(--cream); }
.btn--wide { width: 100%; }

.btn svg { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }

/* -------------------------------------------------------------- header */
.site-head {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 60;
}
/* fills the gap revealed above the sticky header on rubber-band overscroll */
.site-head::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: 100vh;
  background: var(--white);
  pointer-events: none;
}
.site-head__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 62px;
}
/* Logo and current-page label travel together, so `space-between` on the row
   still puts the nav and phone number where they were. */
.head-left { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.head-page {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.8rem;
  line-height: 1.1;
  color: var(--steel);
  padding-left: 0.85rem;
  border-left: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
/* The logo is all but square (336x320), so its width sets the height of the
   whole header. Keeping the bar compact means keeping this small - but not so
   small the "SEPTIC SERVICE" lettering stops being readable. Source is 336px
   wide; never exceed 200. */
.brand img { width: 76px; }

.nav { display: none; }
.nav a {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 1.02rem;
  color: var(--navy);
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--red); }

.head-call { display: none; }

.burger {
  appearance: none;
  background: none;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  width: 44px; height: 40px;
  display: grid; place-items: center;
  cursor: pointer;
  flex: none;
}
.burger span, .burger span::before, .burger span::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: var(--navy);
  position: relative;
}
.burger span::before { position: absolute; top: -6px; }
.burger span::after  { position: absolute; top: 6px; }

.menu {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--white);
  padding-block: 0.75rem 1.25rem;
}
.menu.is-open { display: block; }
.menu a {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 1.2rem;
  color: var(--navy);
  text-decoration: none;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.menu a:last-of-type { border-bottom: 0; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  background: var(--navy-deep);
  color: #fff;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
/* Keep the type legible without burying the trucks - they are the thing the
   client is actually known for, and the photo is doing sales work. */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,23,38,.82) 0%, rgba(6,23,38,.62) 38%, rgba(6,23,38,.90) 100%);
}
.hero__in {
  position: relative;
  padding-block: 3.25rem 3.5rem;
}
.hero h1 {
  color: #fff;
  max-width: 13ch;
  margin-bottom: 0.5em;
  text-shadow: 0 2px 18px rgba(4,16,28,.5);
}
/* The registration number has to be displayed on the truck itself, so setting
   it as a stencilled plate is how this credential actually appears in the
   trade. It sits below the town: "Victoria, TX" is the search term and earns
   the position directly under the headline. */
.hero__lic {
  display: block;
  width: fit-content;
  font-size: 0.24em;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1;
  color: #D2E1EE;
  border: 2px solid rgba(255, 255, 255, .38);
  border-radius: 3px;
  padding: 0.62em 0.85em 0.55em;
  margin-top: 0.85em;
}
.hero h1 em {
  font-style: normal;
  color: #fff;
  display: block;
  width: fit-content;
  font-size: 0.52em;
  margin-top: 0.42em;
  /* the town is the search term - underline it in truck red */
  box-shadow: inset 0 -0.16em 0 var(--red);
}
.hero__sub {
  font-size: 1.12rem;
  color: #C7D6E4;
  max-width: 46ch;
  margin-bottom: 2rem;
}
/* .hero__sub is the last child of .hero__copy, so the global
   `p:last-child { margin-bottom: 0 }` cancels the margin above. On mobile the
   panel stacks directly underneath, so the gap has to come from the panel. */
.hero__panel { margin-top: 2.25rem; }

/* The hero panel used to be built around a huge phone number. That number is
   in the header on every page, so the panel now leads with the two actions
   and the label and note just frame them. */
.panel__label {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.8rem;
  color: var(--steel);
  margin-bottom: 0.75rem;
}
.panel__note {
  font-size: 0.98rem;
  color: #B7C8D8;
  margin-top: 1rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* trust strip under the hero */
.trust {
  background: var(--navy-ink);
  color: #C9D8E6;
  border-top: 1px solid rgba(255,255,255,.09);
}
.trust ul {
  list-style: none;
  margin: 0; padding: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.92rem;
}
.trust li { display: flex; align-items: center; gap: 0.5rem; }
.trust li::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--red);
  border-radius: 50%;
  flex: none;
}

/* ------------------------------------------------------------- urgency */
.urgent {
  background: var(--red);
  color: #fff;
}
.urgent__in {
  padding-block: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.urgent p { margin: 0; }
.urgent strong {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  display: block;
  line-height: 1.05;
}
.urgent a.btn { align-self: flex-start; }

/* ------------------------------------------------------------ services */
.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  border-top: 3px solid var(--navy);
}
.card--lead { border-top-color: var(--red); }
.card h3 { margin-bottom: 0.4rem; }
.card p { color: var(--muted); font-size: 1rem; margin: 0; }

/* The tag sits above the card rather than inside it. In the flow it pushed that
   card's heading down and broke the alignment of every heading across the row.
   It stays inside the <article> in the markup so screen readers still read it
   as belonging to this card. */
.card__tag {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.42rem);
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--red);
}
/* makes room for the tag that now floats above the first card */
.cards--tagged { padding-top: 1.55rem; }
.band--cream .card { background: var(--white); }

/* honest note about what they don't do */
.notdo {
  margin-top: 1.5rem;
  border-left: 3px solid var(--steel);
  padding: 0.9rem 0 0.9rem 1.1rem;
  color: var(--muted);
  font-size: 1rem;
  background: var(--cream);
}
.band--cream .notdo { background: var(--white); }
.notdo strong { color: var(--navy); }

/* ------------------------------------------- SIGNATURE: the county band */
.counties {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
.county {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.05rem 1.15rem 1.15rem;
  display: block;
}
.county__name {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--navy);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.county__name span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.county__towns {
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.5;
}
.county--home { border-color: var(--red); border-width: 2px; }
.county--home .county__name span { color: var(--red); }

/* ------------------------------------------------------------- reasons */
/* Four parallel reasons, not a sequence - so no numbering. A short rule in
   truck red marks each one and stays out of the way. */
.reasons {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
}
.reason { padding-top: 1rem; border-top: 2px solid var(--line-dark); }
.reason::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  background: var(--red);
  margin-bottom: 0.85rem;
}
.reason h3 { margin-bottom: 0.3rem; }
.reason p { margin: 0; color: var(--muted); font-size: 1rem; }
.band--navy .reason p { color: var(--muted-light); }
.band--navy .reason::before { color: var(--steel); }

/* -------------------------------------------------------------- steps */
.steps { counter-reset: s; display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.step {
  border-top: 2px solid var(--line);
  padding-top: 1rem;
}
.step::before {
  counter-increment: s;
  content: "Step " counter(s);
  display: block;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  color: var(--red);
  margin-bottom: 0.45rem;
}
.step h3 { margin-bottom: 0.3rem; }
.step p { margin: 0; color: var(--muted); font-size: 1rem; }

/* Five detailed steps read better stacked than squeezed into columns.
   Numbering is justified here - unlike the "reasons", this really is a
   sequence and the order carries meaning. */
.steps--stack { grid-template-columns: 1fr; gap: 0; }
.steps--stack .step {
  display: grid;
  grid-template-columns: 2.7rem 1fr;
  gap: 0.15rem 1.2rem;
  border-top: 2px solid var(--line);
  padding: 1.5rem 0;
}
.steps--stack .step::before {
  content: counter(s, decimal-leading-zero);
  grid-row: 1 / span 2;
  align-self: start;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--red);
  margin: 0;
  padding-top: 0.15rem;
}
.steps--stack .step p { font-size: 1.05rem; max-width: 68ch; }
.steps--stack .step p strong { color: var(--navy); }

/* ------------------------------------------------------------ reviews */
/* Horizontal scroller. Native overflow + scroll-snap means swipe already works
   on touch; the buttons are for mouse and keyboard. */
.revs { position: relative; }
.revs__track {
  /* Flex, not grid. Percentage grid-auto-columns inside a scroll container makes
     the column width and the scroll range depend on each other, and Chrome
     collapses the scrollable overflow to a few pixels - the track then refuses
     to scroll at all. Flex items with a percentage basis do not have that problem. */
  display: flex;
  /* one review runs three times the length of the others; stretching every card
     to match it leaves big dead gaps, so let each hug its own content */
  align-items: flex-start;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 1rem;
  margin: -4px -4px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--steel) transparent;
}
.revs__track > * { scroll-snap-align: start; flex: 0 0 86%; }
.revs__track::-webkit-scrollbar { height: 8px; }
.revs__track::-webkit-scrollbar-track { background: transparent; }
.revs__track::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}
.revs__track:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }

.revs__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.revs__bar .rating-line { margin-bottom: 0; }

.revs__nav { display: flex; gap: 0.5rem; flex: none; }
.revs__btn {
  appearance: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  color: var(--navy);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.revs__btn:hover:not(:disabled) { background: var(--navy); color: #fff; }
.revs__btn:disabled { opacity: .3; cursor: default; }
.revs__btn svg { width: 18px; height: 18px; fill: currentColor; }

/* legacy grid, still used if a page wants a static row */
.reviews { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.review {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
}
.review__stars { color: var(--red); letter-spacing: 0.12em; font-size: 0.95rem; margin-bottom: 0.6rem; }
.review p { font-size: 1rem; color: var(--text); }
.review cite {
  font-style: normal;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy);
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: 1rem;
}
.rating-line {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy);
  margin-bottom: 1.5rem;
}
.rating-line b { font-size: 1.9rem; font-weight: 800; line-height: 1; }

/* ---------------------------------------------------------------- faq */
.faq { border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 2.2rem 1.1rem 0;
  position: relative;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.18rem;
  letter-spacing: 0.01em;
  color: var(--navy);
  line-height: 1.2;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 4px; top: 1.45rem;
  width: 11px; height: 11px;
  border-right: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.65rem; }
.faq .faq__a { padding-bottom: 1.2rem; color: var(--muted); font-size: 1rem; max-width: 68ch; }

/* ------------------------------------------------------------- figure */
.shot {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.shot img { width: 100%; }
/* Gallery tiles: the photos are a mix of portrait and landscape, so crop them
   to one ratio or the row ends up ragged. */
.shot--tile img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 50%; }
.shot--tile { display: flex; flex-direction: column; }
.shot--tile figcaption { flex: 1; }
.shot figcaption {
  background: var(--white);
  padding: 0.8rem 1rem;
  font-size: 0.92rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.split { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; }
/* Centring only reads well when the two columns are a similar height. Where
   one is much taller - a long form beside a short contact list - centring
   pushes the short column's heading halfway down the page, so line the two
   headings up at the top instead. */
.split--top { align-items: start; }

/* --------------------------------------------------------------- form */
.form { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.35rem; }
.field label {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.85rem;
  color: var(--navy);
}
.field input, .field select, .field textarea {
  font-family: var(--body);
  font-size: 1.0625rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); }
.form__note { font-size: 0.93rem; color: var(--muted); }
.hp { position: absolute; left: -9999px; }

/* contact detail list */
.details { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; }
.details dt, .details__k {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.78rem;
  color: var(--steel);
  margin-bottom: 0.2rem;
}
.details__v { font-size: 1.08rem; }
.details__v a { color: inherit; }
.details__v--big {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: 0.01em;
}
.details__v--big a { text-decoration: none; }

/* -------------------------------------------------------------- footer */
.site-foot {
  background: var(--navy-ink);
  color: #A9BCCE;
  /* The room for the fixed call bar is reserved here rather than on <body>,
     so the footer's own dark background fills it. On body it left a strip of
     bare white page below the footer, which shows as a gap the moment the
     call bar slides out of the way. Also covers the iPhone home indicator,
     which makes the bar taller than --callbar alone. */
  padding-block: 2.75rem calc(2rem + var(--callbar) + env(safe-area-inset-bottom, 0px));
  font-size: 0.98rem;
}
.site-foot a { color: #D6E2EC; }
/* the logo has a pale keyline that halos on dark - it needs a light plate */
.foot-logo {
  background: var(--cream);
  border-radius: 6px;
  padding: 12px 14px;
  display: inline-block;
  margin-bottom: 1.25rem;
}
.foot-logo img { width: 168px; }
.foot-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.foot-grid h4 {
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: 0.09em;
  margin-bottom: 0.8rem;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.foot-bar {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 2rem;
  padding-top: 1.4rem;
  font-size: 0.88rem;
  color: #7E93A6;
  display: grid;
  gap: 0.5rem;
}
.foot-bar a { color: #7E93A6; }

/* ------------------------------------------------ fixed mobile callbar */
.callbar {
  position: fixed;
  left: 0; right: 0;
  z-index: 100;
  background: var(--red);
  border-top: 2px solid var(--red-deep);
  display: flex;
  /* The bar is dropped --bar-drop below the viewport bottom, with the same
     amount added to its padding. The buttons therefore sit exactly where they
     always did, but the bar's red carries on past them.
     Why: some mobile browsers - the Google app is the bad one - leave a strip
     between a fixed bar and the true bottom edge while their own toolbars
     animate, and the page scrolls visibly through it. Chasing that strip with
     viewport maths was tried twice and both attempts misbehaved, so this just
     covers it. When there is no strip the overhang is simply off-screen and
     costs nothing. */
  bottom: calc(-1 * var(--bar-drop));
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--bar-drop));
}
/* fills the gap revealed below the fixed callbar on rubber-band overscroll */
.callbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 100vh;
  background: var(--red);
  pointer-events: none;
}
.callbar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: var(--callbar);
  color: #fff;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.3rem;
}
.callbar a + a {
  border-left: 2px solid var(--red-deep);
  flex: 0 0 34%;
  font-size: 1.15rem;
  position: relative;   /* anchors the divider extension below */
}
/* Carries the divider on down through the bar's overhang to the bottom of the
   screen, instead of stopping at the buttons. Drawn from the button's own left
   edge (left:-2px puts it back over the border, since an absolutely positioned
   child is placed against the padding box, inside that border) so it stays
   lined up whatever width the buttons end up. 100vh so it always runs out. */
.callbar a + a::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 100%;
  width: 2px;
  height: 100vh;
  background: var(--red-deep);
  pointer-events: none;
}
.callbar svg { width: 1.05em; height: 1.05em; fill: currentColor; }

/* Mobile scroll behaviour. Reading down the page, the header is dead weight
   and the contact bar is the useful thing, so the header steps out. Scrolling
   back up is a navigation move, so the header returns and the contact bar
   gets out of the way instead. Near the top both are shown.
   JS only sets these classes below 900px; the guard below is a backstop. */
/* No `will-change: transform` here, deliberately. Promoting a position:fixed
   bottom bar to its own compositor layer makes Chrome on Android/iOS move it
   asynchronously from the page, and while the URL bar is collapsing it strands
   the bar part-way up the screen with page content visible underneath it.
   Letting the browser keep it attached to the viewport costs nothing - the
   transition below is still smooth. */
.site-head { transition: transform 0.28s ease; }
body.nav-down .site-head { transform: translateY(-100%); }

/* Contact bar slides out when scrolling up, back in when scrolling down.
   This uses `translate`, NOT `transform`, on purpose: site.js writes an inline
   `transform` on this element to keep it hugging the real bottom edge, and an
   inline style would beat anything declared here. `translate` is a separate
   property that composes with it, so the two never fight.
   The distance is the bar's visible height rather than 100% - its box carries
   on well below the screen (see --bar-drop), so 100% would fling it several
   hundred px and the slide would read as a flicker. */
.callbar { transition: translate 0.28s ease; }
body.nav-up .callbar {
  translate: 0 calc(var(--callbar) + env(safe-area-inset-bottom, 0px) + 6px);
}

/* The contact bar deliberately does NOT move.
   It used to slide away on scroll-up. Measured on a real iPhone, a fixed
   bottom bar gets stranded part-way up the screen whenever the browser
   animates its own toolbars - the gap underneath tracked
   visualViewport.offsetTop exactly, and it happened in samples where no
   transform of ours was applied at all. Chrome on iOS is the worst for it;
   Safari and Brave recover, Chrome stays wrong. Two attempts to correct the
   position in JS made it worse, so the bar now just stays put. It is the
   thing on this site that earns phone calls - it does not get to be clever. */

@media (min-width: 900px) {
  body.nav-down .site-head { transform: none; }
  body.nav-up .callbar { translate: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-head, .callbar { transition: none; }
}

/* ------------------------------------------------------------ utility */
.stack > * + * { margin-top: 1.1rem; }
.center { text-align: center; }
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ========================================================== breakpoints */
@media (min-width: 600px) {
  .cards    { grid-template-columns: repeat(2, 1fr); }
  .reviews  { grid-template-columns: repeat(2, 1fr); }
  .revs__track > * { flex-basis: 47%; }
  .counties { grid-template-columns: repeat(2, 1fr); }
  .steps    { grid-template-columns: repeat(3, 1fr); }
  /* must follow .steps - same specificity, later rule wins. The five-step
     sequence stays in one column at every width. */
  .steps--stack { grid-template-columns: 1fr; }
  .urgent__in { flex-direction: row; align-items: center; justify-content: space-between; }
  .urgent a.btn { align-self: auto; flex: none; }
  .foot-grid { grid-template-columns: repeat(3, 1fr); }
  .foot-bar { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 900px) {
  :root { --gutter: 32px; --callbar: 0px; }

  .callbar { display: none; }
  .burger  { display: none; }
  .menu    { display: none !important; }

  .site-head__in { min-height: 68px; }
  .brand img { width: 84px; }

  .nav { display: flex; gap: 1.7rem; align-items: center; }
  .head-call {
    display: inline-flex;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: 0.01em;
    color: var(--navy);
    text-decoration: none;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
  }
  .head-call:hover { color: var(--red); }
  .head-call svg { width: 0.95em; height: 0.95em; fill: var(--red); }

  .band { padding-block: 5.5rem; }
  .band--tight { padding-block: 3.25rem; }

  /* on desktop the copy sits left, so darken that side and let the trucks
     stay visible under the panel on the right */
  .hero__media::after {
    background:
      linear-gradient(90deg, rgba(6,23,38,.93) 0%, rgba(6,23,38,.78) 48%, rgba(6,23,38,.52) 100%),
      linear-gradient(180deg, rgba(6,23,38,.30) 0%, rgba(6,23,38,0) 35%, rgba(6,23,38,.50) 100%);
  }
  .hero__in { padding-block: 5.5rem 5rem; display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: center; }
  .hero__copy { grid-column: 1; }
  .hero__panel {
    grid-column: 2;
    margin-top: 0;               /* side by side here, so no stacking gap */
    background: rgba(6,23,38,.55);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius);
    padding: 2rem;
    backdrop-filter: blur(2px);
  }
  .hero__sub { margin-bottom: 0; }

  .cards    { grid-template-columns: repeat(3, 1fr); }
  /* must come after .cards - same specificity, source order decides.
     For rows that only hold two cards, so they fill the width instead of
     leaving an empty third column. */
  .cards--two { grid-template-columns: repeat(2, 1fr); }
  .cards--four { grid-template-columns: repeat(4, 1fr); }
  .counties { grid-template-columns: repeat(4, 1fr); }
  .reasons  { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; }
  .reviews  { grid-template-columns: repeat(3, 1fr); }
  .revs__track > * { flex-basis: 31.7%; }
  .split    { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .split--wide { grid-template-columns: 1.25fr 1fr; }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}

@media (min-width: 1100px) {
  h1 { font-size: 3.75rem; }
}

/* ------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  /* the review track sets scroll-behavior itself, so it needs resetting too -
     otherwise a reduced-motion user still gets an animated sideways scroll */
  html, .revs__track { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------- print */
@media print {
  .callbar, .site-head, .urgent { display: none; }
  .site-foot { padding-block: 2.75rem 2rem; }
}