/* ==========================================================================
   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;

  /* the fixed mobile call bar sits on top of everything */
  --callbar: 66px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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;
  padding-bottom: var(--callbar);      /* clear the fixed call bar */
}

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; }
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;
}
.site-head__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 74px;
}
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand img { width: 132px; }          /* logo source is 336px - never exceed 200 */

.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: 46px; height: 42px;
  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);
}
/* Texas requires the TCEQ registration number to be displayed on the truck
   itself, so setting it as a stencilled plate under the headline is how this
   credential actually appears in the trade. */
.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;
}

/* the phone number, set like lettering on the side of a tank */
.callout { margin-bottom: 1.6rem; }
.callout__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.35rem;
}
.callout__num {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 12vw, 5.2rem);
  line-height: 0.9;
  letter-spacing: 0.005em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.callout__num:hover { color: #FFD9DC; }
.callout__note {
  font-size: 0.98rem;
  color: #B7C8D8;
  margin-top: 0.6rem;
}

.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; }

/* --------------------------------------------------------------- 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;
  padding-block: 2.75rem 2rem;
  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; bottom: 0;
  z-index: 100;
  background: var(--red);
  border-top: 2px solid var(--red-deep);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}
.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; }
.callbar svg { width: 1.05em; height: 1.05em; fill: currentColor; }

/* ------------------------------------------------------------ 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; }

  body { padding-bottom: 0; }
  .callbar { display: none; }
  .burger  { display: none; }
  .menu    { display: none !important; }

  .nav { display: flex; gap: 1.7rem; align-items: center; }
  .head-call {
    display: inline-flex;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.35rem;
    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;
    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; }
  .callout__num { font-size: clamp(3rem, 4.2vw, 3.9rem); }

  .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); }
  .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; }
  body { padding-bottom: 0; }
}