/* ============================================================
   RTT — Rent-A-Toilet · Design draft v5 (rtt-mockup)
   ROUND 5, per Bashō Jul 31: the GCHS chassis IS the design
   template — fixed transparent→white header, gradient photo
   heroes with a quote form card in every hero, soft-shadow
   rounded cards, framed images with an offset red accent,
   gradient dark bands (NO photos behind text — photos live in
   heroes and framed slots only), reveal animations — recast in
   RTT's red (#D5282A, logo-first) with FFC/CFR-style glossy red
   buttons. Type: Archivo display + Plus Jakarta Sans body
   (GCHS polish, not GCHS's serif — no GLS build is cloned).
   ============================================================ */

:root {
  --red: #d5282a;          /* logo ink — BRAND-KIT §1.2 */
  --red-deep: #bb1215;     /* favicon ink — red text on tinted bands, hover */
  --red-dark: #8a061e;     /* shaded equipment red — pressed */
  --red-soft: #ff8a8a;     /* red accents on dark bands (AA-safe) */
  --ink: #14161a;          /* near-black */
  --charcoal: #23262c;     /* dark band top */
  --charcoal-deep: #17191d;/* dark band bottom / footer */
  --slate: #4a5158;        /* body text */
  --paper: #fafaf8;
  --mist: #f3f1ee;         /* warm light band */
  --line: #e4e0da;
  --white: #ffffff;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif;
  --maxw: 1160px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(20, 22, 26, 0.05), 0 8px 28px rgba(20, 22, 26, 0.08);
  --shadow-lift: 0 2px 4px rgba(20, 22, 26, 0.08), 0 14px 40px rgba(20, 22, 26, 0.16);
  /* the glossy red — one definition, shared by .btn-red and the mobile CALL button.
     WCAG AA: the white label only ever sits on the LIGHTEST stop, so the top stop
     governs. The old top stop (#ee5254) measured 3.52:1 and failed everywhere.
     Starting the ramp at brand red --red #d5282a measures 5.04:1 — the same fix
     already proven on the mobile CALL button and the calculator mode toggle.
     Hover lifts to #db2b2e (4.78:1), still clear of the 4.5 floor.
     Do not lighten either top stop without re-measuring. */
  --grad-red: linear-gradient(180deg, #d5282a 0%, #c11f22 55%, #a5141a 100%);
  --grad-red-hover: linear-gradient(180deg, #db2b2e 0%, #cb2427 55%, #af171d 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--slate);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.12;
  text-wrap: balance;
  letter-spacing: -0.015em;
}
p, li { text-wrap: pretty; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--red-deep); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Eyebrow + tide rule (signature) ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-deep);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 3px;
  background: var(--red);
  border-radius: 2px;
  flex: none;
}
.on-dark .eyebrow, .section-dark .eyebrow, .hero .eyebrow { color: var(--red-soft); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.25s ease, box-shadow 0.25s ease;
  padding: 14px 0;
}
.site-header .container {
  max-width: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.brand img { height: 44px; width: auto; max-width: none; transition: opacity 0.2s; }
.brand .logo-dark { display: none; }

.main-nav { display: flex; align-items: center; gap: 24px; }
.main-nav a {
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.88);
  transition: color 0.15s;
  white-space: nowrap;
}
@media (max-width: 1330px) {
  .main-nav { gap: 16px; }
  .main-nav a { font-size: 0.84rem; }
  .brand img { height: 38px; }
}
.main-nav a:hover { color: var(--white); }
.main-nav a[aria-current="page"] {
  color: var(--white);
  border-bottom: 2px solid var(--red);
  padding-bottom: 3px;
}
.nav-phone {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.98rem !important;
}

.site-header.scrolled {
  background: var(--white);
  box-shadow: 0 1px 0 var(--line), 0 6px 24px rgba(20, 22, 26, 0.08);
  padding: 10px 0;
}
.site-header.scrolled .brand .logo-light { display: none; }
.site-header.scrolled .brand .logo-dark { display: block; }
.site-header.scrolled .main-nav a { color: var(--ink); }
.site-header.scrolled .main-nav a:hover { color: var(--red-deep); }
.site-header.scrolled .main-nav a[aria-current="page"] { color: var(--red-deep); }

/* ---------- Buttons (FFC/CFR-style gloss, RTT red) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius);
  padding: 15px 28px;
  border: 2px solid transparent;
  cursor: pointer;
  line-height: 1.2;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-red {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: var(--grad-red);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -2px 5px rgba(90, 4, 8, 0.35),
    0 8px 22px rgba(187, 18, 21, 0.3);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}
/* the sheen: a skewed light streak that sweeps, then rests.
   ⚠️ THE ALPHA IS AN ACCESSIBILITY CONSTRAINT, NOT A TASTE SETTING.
   The streak passes straight over the label, and a white-on-white glyph is
   unchanged by a white overlay — so the sheen only ever lifts the BACKGROUND
   under the text, which is exactly what WCAG measures. At the old 0.45 the peak
   composited to rgb(232,137,138) = 2.51:1. That is unfixable by darkening the
   button: 0.45 white over pure BLACK is still only 4.76:1, so no base colour
   passes at that alpha. Nor does re-stacking help, for the white-on-white
   reason above. The alpha itself is the only lever.
   0.094 is the break-even over --red #d5282a; 0.08 is the shipped value and
   measures 4.58:1 at the peak. Raising it re-breaks every red button on the
   site. Re-measure if you touch it. */
.btn-red::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -75%;
  width: 38%;
  height: 160%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transform: skewX(-18deg);
  animation: red-sheen 7.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes red-sheen { 0% { left: -75%; } 26%, 100% { left: 140%; } }
.btn-red:hover {
  background: var(--grad-red-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 5px rgba(90, 4, 8, 0.3),
    0 12px 30px rgba(187, 18, 21, 0.38);
}
.btn-outline-light { border-color: rgba(255, 255, 255, 0.55); color: var(--white); background: transparent; }
.btn-outline-light:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); box-shadow: none; }
.btn-outline-red { border-color: var(--red); color: var(--red-deep); background: transparent; }
.btn-outline-red:hover { background: #fdf3f3; box-shadow: none; }
/* buttons keep their own text color even under .section-dark a / .cta-band a
   and under the scrolled-header nav recolor */
.btn.btn-red, .site-header .main-nav .btn.btn-red, .site-header.scrolled .main-nav .btn.btn-red { color: var(--white); }
.btn.btn-outline-red { color: var(--red-deep); }
.btn.btn-outline-light { color: var(--white); }
.btn-white { background: var(--white); color: var(--ink); box-shadow: var(--shadow-card); }
.btn-sm { padding: 10px 18px; font-size: 0.875rem; }
@media (prefers-reduced-motion: reduce) { .btn-red::after { animation: none; opacity: 0; } }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  position: relative;
  z-index: 130; flex: 0 0 auto; }
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: var(--white);
  transition: transform 0.2s, background 0.2s;
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before { top: -7px; left: 0; }
.nav-toggle span::after { top: 7px; left: 0; }
.site-header.scrolled .nav-toggle span,
.site-header.scrolled .nav-toggle span::before,
.site-header.scrolled .nav-toggle span::after { background: var(--ink); }
body.nav-open .nav-toggle span { background: transparent !important; }
body.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); background: var(--white); }
body.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); background: var(--white); }

/* ---------- Hero (photo bg + ink scrim, GCHS recipe) ---------- */
.hero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--white);
  overflow: hidden;
  padding: 150px 0 0;
}
.hero--home {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.93) 0%, rgba(23, 25, 30, 0.78) 48%, rgba(16, 17, 21, 0.93) 100%),
    url("/assets/img/hero-units-row.webp");
  background-position: center, center 60%;
}
/* Oct 19: row of five units (ledger L013, 559 decals). On phones the hero is ~1,500px tall
   (the form sits inside it), so cover would blow a 4:3 photo up 2x into mush. Instead the
   photo is pinned to the top 1,000px at its own scale and fades into the ink below. */
@media (max-width: 860px) {
  .hero--home {
    background-color: #101115;
    background-image:
      linear-gradient(180deg, rgba(16, 17, 21, 0.8) 0, rgba(16, 17, 21, 0.8) 60%, rgba(16, 17, 21, 0.94) 85%, #101115 100%),
      url("/assets/img/hero-units-row.webp");
    background-size: 100% 1000px, auto 1000px;
    background-position: 0 0, 50% 0;
    background-repeat: no-repeat;
  }
}
.hero--restrooms {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/band-valley.webp");
  background-position: center, center 55%;
}
.hero--calc {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/trailer-residence.webp");
  background-position: center, 65% 55%;
}
/* ⛔ band-yard.webp is WITHDRAWN from every surface (Aug 16): it shows two
   identifiable people and there is no consent on record. It was wired into five
   hero classes from this file — /contact-us/, /about-us/, Kings County, the
   Modesto city page and the government lane — so pulling it here pulls it
   everywhere at once. Each replacement below is picked to satisfy the yard map,
   not merely to fill the slot. Do not reinstate band-yard without a signed release. */
.hero--contact {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/trailer-3st-wide.webp");
  background-position: center, center 45%;
}
.hero h1 {
  color: var(--white);
  font-size: clamp(2.3rem, 4.6vw, 3.4rem);
  max-width: 18ch;
  margin-bottom: 22px;
}
.hero h1 em { font-style: normal; color: var(--red-soft); }
.hero .lede {
  max-width: 54ch;
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 30px;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 72px; }
.hero-inner { position: relative; z-index: 2; }
.hero-split { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 56px; align-items: center; }
.hero-split .hero-ctas { margin-bottom: 0; }
.hero-split-copy { padding-bottom: 64px; }

/* Quote form card — in the hero of every page */
.hero-form {
  background: var(--white);
  border-radius: var(--radius);
  border-top: 4px solid var(--red);
  box-shadow: var(--shadow-lift);
  padding: 30px 30px 24px;
  color: var(--ink);
  max-width: 480px;
  width: 100%;
  justify-self: end;
  margin-bottom: 64px;
}
.hero-form h2 {
  font-size: 1.35rem;
  margin-bottom: 6px;
}
.hero-form .hf-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.12;
  text-wrap: balance;
  letter-spacing: -0.015em;
  font-size: 1.35rem;
  margin-bottom: 6px;
}
.hero-form .hf-sub { font-size: 0.9rem; color: var(--slate); margin-bottom: 18px; }
.hero-form .btn { width: 100%; margin-top: 16px; }
.hero-form .hf-alt { font-size: 0.85rem; color: var(--slate); margin-top: 12px; text-align: center; }
.hero-form .hf-alt a { font-weight: 700; color: var(--ink); text-decoration: none; }
.hero-form .hf-alt a:hover { color: var(--red-deep); }
.hero-form .form-note { margin-top: 10px; text-align: center; }

/* Form fields (GCHS pattern — min-width:0 stops grid slip-off) */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 0.8rem; font-weight: 700; color: var(--ink); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 0.95rem;
  border: 1px solid #c9c4bc;
  border-radius: 6px;
  padding: 11px 12px;
  color: var(--ink);
  background: var(--white);
  min-width: 0;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--red); }
.form-note { font-size: 0.78rem; color: var(--slate); }

/* Horizon line + stat strip */
.horizon {
  position: relative;
  border-top: 2px solid var(--red);
  background: rgba(16, 17, 21, 0.55);
  backdrop-filter: blur(4px);
}
/* Columns are derived from the number of .stat children rather than hard-coded, so a strip
   with three stats spreads evenly instead of leaving a dead fourth column. Restoring a
   removed stat needs no CSS change. */
.stat-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  padding: 28px 0 24px;
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  color: var(--white);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 8px;
}
.stat span {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* Compact interior hero */
.hero.hero-interior { padding-top: 132px; }
.hero.hero-interior .hero-split-copy { padding-bottom: 56px; }
.hero.hero-interior .hero-form { margin-bottom: 56px; }

/* ---------- Sections ---------- */
.section { padding: 92px 0; }
.section-mist { background: var(--mist); position: relative; }
.section-mist::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(20, 22, 26, 0.045) 1.4px, transparent 1.5px);
  background-size: 26px 26px;
}
.section-mist > * { position: relative; z-index: 1; }
.section-dark {
  background: linear-gradient(180deg, var(--charcoal), var(--charcoal-deep));
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  overflow: hidden;
}
.section-dark > * { position: relative; z-index: 1; }
.section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark a { color: var(--red-soft); }

.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(1.85rem, 3.3vw, 2.55rem); margin-bottom: 16px; }
.section-head p { font-size: 1.08rem; }

/* Split + framed images (offset red accent) */
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }
.split-copy h2 { font-size: clamp(1.85rem, 3.2vw, 2.5rem); margin-bottom: 18px; }
.split-copy p + p { margin-top: 16px; }
.framed { position: relative; border-radius: var(--radius); }
.framed img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: var(--pos, center); border-radius: var(--radius); box-shadow: var(--shadow-lift); }
.framed::after {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 2px solid var(--red);
  border-radius: var(--radius);
  z-index: -1;
}
.framed.framed-tall img { aspect-ratio: 3 / 4; }
.framed.framed-43 img { aspect-ratio: 4 / 3; }
.framed.framed-wide img { aspect-ratio: 16 / 9; }
.framed .photo-tag {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(16, 17, 21, 0.78); color: rgba(255, 255, 255, 0.92);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em;
  padding: 5px 12px; border-radius: 100px; backdrop-filter: blur(3px);
}

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card h3 { font-size: 1.3rem; margin: 16px 0 10px; }
.card p { font-size: 0.97rem; }

/* Photo-topped cards (services, yards) */
.photo-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.photo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.photo-card .pc-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.photo-card .pc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.photo-card .pc-photo .photo-tag {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(16, 17, 21, 0.78); color: rgba(255, 255, 255, 0.92);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em;
  padding: 4px 11px; border-radius: 100px;
}
.photo-card .pc-body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.photo-card h3 { font-size: 1.32rem; }
.photo-card p { font-size: 0.96rem; color: var(--slate); }
.pc-link { font-weight: 700; font-size: 0.92rem; color: var(--red-deep); text-decoration: none; margin-top: auto; }
.photo-card:hover .pc-link { text-decoration: underline; }

/* Yard cards */
.yard-city { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; color: var(--ink); }
.yard-role { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); margin: 2px 0 10px; }
.yard-phone {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--red-deep);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 10px;
}
.yard-phone:hover { color: var(--red-dark); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--white);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.chip small { color: var(--slate); font-weight: 500; }
.section-mist .chip { background: var(--white); }
.chips-lg .chip { padding: 9px 18px; font-size: 0.9rem; }

/* ---------- Q&A ledger ---------- */
.qa-block { border-top: 1px solid var(--line); padding: 56px 0; }
.qa-block:first-of-type { border-top: 0; padding-top: 0; }
.qa-grid { display: grid; grid-template-columns: 300px 1fr; gap: 56px; }
.qa-q h2, .qa-q h3 { font-size: clamp(1.35rem, 2.3vw, 1.8rem); position: relative; padding-top: 16px; }
.qa-q h2::before, .qa-q h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 3px;
  background: var(--red);
  border-radius: 2px;
}
.qa-a > p + p { margin-top: 14px; }

/* Checklists (red checks) */
.checklist { list-style: none; }
.checklist li { position: relative; padding: 7px 0 7px 34px; font-size: 1rem; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--red);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center / contain no-repeat;
}
.checklist li b { color: var(--ink); }
.section-dark .checklist li::before { background: var(--red-soft); }

/* Numbered steps */
.steps { list-style: none; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 10px 0 10px 56px; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--red);
  color: var(--red-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps li b { color: var(--ink); }

/* Step cards (dispatch story) */
.step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
/* Three-step variant. Must live here, not inline: an inline grid-template-columns
   outranks the responsive rules below and strands the last card off-screen. */
.step-grid--3 { grid-template-columns: repeat(3, 1fr); }
.step-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-top: 3px solid var(--red);
  padding: 26px 24px;
  box-shadow: var(--shadow-card);
}
.step-card .step-num { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; color: var(--red); line-height: 1; display: block; margin-bottom: 10px; }
.step-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.step-card p { font-size: 0.92rem; }

/* ---------- Data table (fleet specs) ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 12px; border-radius: var(--radius); }
.data-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow-card); font-size: 0.96rem; min-width: 640px; }
.data-table th { background: var(--ink); color: #fff; text-align: left; padding: 12px 16px; font-family: var(--font-body); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em; }
.data-table td { padding: 13px 16px; border-top: 1px solid var(--line); color: var(--ink); vertical-align: top; }
.data-table td:first-child { font-weight: 700; white-space: nowrap; }
.data-table tr:nth-child(even) td { background: #fcfbf9; }
.data-table .num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--red-deep); white-space: nowrap; }
.table-caption { font-size: 0.82rem; color: var(--slate); margin-top: 12px; max-width: 76ch; }
@media (max-width: 700px) {
  /* Mobile header fit (round 6c): at 390 the row needed 403px in 342px, so the
     hamburger was being flex-collapsed to zero and there was no mobile menu at all.
     Tighter padding + gap + a shorter mark makes brand, CTA and toggle all fit. */
  .site-header .container { padding-left: 16px; padding-right: 16px; gap: 12px; }
  .brand img { height: 24px; }
 .data-table { font-size: 0.86rem; } .data-table th, .data-table td { padding: 9px 11px; } }

/* Media thumb row */
.media-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; }
.media-row figure { min-width: 0; }
.media-row .m-frame { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-card); background: var(--white); }
.media-row .m-frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.media-row .m-frame--contain img { object-fit: contain; padding: 8px; background: var(--white); }
.media-row figcaption { font-size: 0.82rem; color: var(--slate); padding: 10px 4px 0; line-height: 1.45; }

/* ---------- Proof ledger (dark band, NO photo) ---------- */
.pe { border-top: 1px solid rgba(255, 255, 255, 0.14); margin-bottom: 30px; }
.pe-row {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 16px 48px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.pe-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-soft);
  display: block;
  margin-bottom: 6px;
}
.pe-label--ans { color: rgba(255, 255, 255, 0.6); }
.pe-pain p { color: rgba(255, 255, 255, 0.78); font-size: 1rem; }
.pe-answer p { color: var(--white); font-size: 1rem; font-weight: 500; }
.pe-quote {
  display: inline-block;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 10px 16px;
  margin-top: 12px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
}
.pe-quote cite {
  display: block;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* WCAG AA: 0.5 alpha measured 4.48:1 on the dark band, a hair under 4.5. */
  color: rgba(255, 255, 255, 0.56);
  margin-top: 4px;
}
.counter-line { border-left: 3px solid var(--red); padding: 6px 0 6px 24px; max-width: 800px; }
.counter-line p { font-size: 1.15rem; color: var(--white); font-weight: 600; }

/* Review record cards */
.review-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.review-cell {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-top: 3px solid var(--red);
  padding: 24px 24px 20px;
  box-shadow: var(--shadow-card);
}
.review-cell .rv-fig {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.3rem;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.review-cell .rv-fig span { font-size: 1.2rem; color: var(--slate); font-weight: 700; }
.review-cell .rv-label { display: block; font-weight: 700; font-size: 0.95rem; color: var(--ink); margin-top: 10px; }
.review-cell .rv-src { display: block; font-size: 0.84rem; color: var(--slate); margin-top: 2px; }

/* ---------- Calculator ---------- */
.calc-wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: start; }
.calc {
  background: var(--white);
  border-radius: var(--radius);
  border-top: 4px solid var(--red);
  box-shadow: var(--shadow-lift);
  padding: 30px;
  color: var(--ink);
}
.calc-modes { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; background: var(--mist); border-radius: 100px; padding: 4px; width: max-content; }
.calc-mode {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 9px 22px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: var(--slate);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.calc-mode[aria-pressed="true"] {
  /* WCAG AA: 14.4px/700 white label needs 4.5:1. The old top stop (#ee5254)
     measured 3.52:1. Starting the ramp at brand red --red #d5282a puts the
     lightest pixel at 5.04:1. */
  background: linear-gradient(180deg, #d5282a 0%, #c11f22 55%, #a5141a 100%);
  color: var(--white);
  box-shadow: 0 3px 10px rgba(187, 18, 21, 0.35);
}
.calc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 6px; }
.calc-fields[hidden] { display: none; }
.calc-fields .form-field.full { grid-column: 1 / -1; }
.calc-check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.93rem; font-weight: 600; color: var(--ink); padding-top: 6px; grid-column: 1 / -1; }
.calc-check input { width: 18px; height: 18px; accent-color: var(--red); margin-top: 2px; flex: none; }
.calc-result { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; }
.calc-headline { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.calc-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--red-deep);
  font-variant-numeric: tabular-nums;
}
.calc-num-label { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.calc-lines { margin: 12px 0 0; border-top: 1px solid var(--line); list-style: none; }
.calc-lines li {
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; color: var(--slate);
}
.calc-lines li strong { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-prov { font-size: 0.78rem; color: var(--slate); margin-top: 12px; line-height: 1.55; }
.calc-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.calc-side .framed { margin-bottom: 22px; }
.section-dark .calc-side-note { color: rgba(255, 255, 255, 0.72); font-size: 0.95rem; max-width: 44ch; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(180deg, var(--charcoal), var(--charcoal-deep));
  color: var(--white);
  text-align: center;
  padding: 84px 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--red);
  z-index: 2;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--white); font-size: clamp(1.85rem, 3.3vw, 2.55rem); margin-bottom: 16px; }
.cta-band p { max-width: 62ch; margin: 0 auto 30px; color: rgba(255, 255, 255, 0.8); }
.cta-band .hero-ctas { justify-content: center; margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--charcoal-deep);
  color: rgba(255, 255, 255, 0.72);
  padding: 68px 0 34px;
  font-size: 0.92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1.2fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer img.footer-logo { height: 42px; width: auto; flex: none; max-width: none; margin-bottom: 18px; }
.site-footer h4 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.site-footer .yard-tel { color: var(--white); font-weight: 700; font-variant-numeric: tabular-nums; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}
/* Legal links, third child of the footer-bottom bar: copyright | legal | GLS
   wordmark. Kept a <ul> so the pair reads as one set to a screen reader, but
   laid out horizontally and stripped of the stacked-list margin .site-footer li
   otherwise applies. They inherit .site-footer a (rgba 255/.72 on --charcoal-deep,
   measured 9.53:1) rather than the .footer-bottom 0.5 white around them (5.23:1),
   so the links stay brighter than the copyright text beside them. Both pass AA. */
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-footer .footer-legal li { margin-bottom: 0; }

/* GLS footer credit — house standard: wordmark only, linked, muted on dark */
.gls-credit { display: inline-block; line-height: 0; vertical-align: middle; }
.gls-credit img { height: 26px; width: auto; opacity: 0.55; transition: opacity 0.18s ease; }
.gls-credit:hover img { opacity: 0.9; }
.gls-credit:focus-visible { outline: 2px solid var(--red-soft); outline-offset: 3px; }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card, .photo-card { transition: none; }
}

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

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .main-nav a:not(.btn) { display: none; }
  .nav-toggle { display: block; }
  body.nav-open .main-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    position: fixed;
    inset: 0;
    background: var(--charcoal-deep);
    padding: 110px 32px 40px;
    z-index: 120;
  }
  body.nav-open .main-nav a:not(.btn) {
    display: block;
    color: var(--white);
    font-size: 1.35rem;
    font-family: var(--font-display);
    font-weight: 600;
    padding: 10px 0;
  }
  body.nav-open .main-nav a[aria-current="page"] { border-bottom-color: var(--red); }
  body.nav-open .site-header .main-nav a:not(.btn),
  body.nav-open .site-header.scrolled .main-nav a:not(.btn) { color: var(--white); }
  body.nav-open .main-nav .nav-cta { margin-top: 18px; }
  body.nav-open { overflow: hidden; }
  .hero-split { grid-template-columns: 1fr; gap: 40px; }
  .hero-form { justify-self: stretch; max-width: 560px; }
  .hero-split-copy { padding-bottom: 0; }
  .qa-grid { grid-template-columns: 1fr; gap: 20px; }
  .calc-wrap { grid-template-columns: 1fr; }
  .calc-side { display: none; }
  .step-grid { grid-template-columns: 1fr 1fr; }
  .review-strip { grid-template-columns: 1fr 1fr; }
  .stat-strip { gap: 16px 8px; }
}

@media (max-width: 700px) {
  .section { padding: 60px 0; }
  .hero { padding-top: 116px; }
  .hero.hero-interior { padding-top: 108px; }
  .hero-ctas .btn { width: 100%; }
  .hero-ctas { margin-bottom: 48px; }
  .hero-form { padding: 24px 18px 20px; margin-bottom: 48px; }
  .stat-strip { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); gap: 20px 8px; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .framed::after { inset: 12px -12px -12px 12px; }
  .card-grid { grid-template-columns: 1fr; }
  .step-grid { grid-template-columns: 1fr; }
  .review-strip { grid-template-columns: 1fr; gap: 14px; }
  .media-row { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .calc-fields { grid-template-columns: 1fr; }
  .calc { padding: 22px 16px; }
  .calc-num { font-size: 2.7rem; }
  .pe-row { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .qa-block { padding: 44px 0; }
  .brand img { height: 24px; }   /* 24 x 6.863 = 165px. Brand + CTA + hamburger must total <= 358 at 390. */
}

/* ============================================================
   v5.1 — Bashō's live-review pass: FAQ accordions, the review
   record, spec cards (dense tables retired), map frame.
   ============================================================ */

/* ---------- FAQ accordion ---------- */
.acc-list { max-width: 880px; }
.acc {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
  overflow: hidden;
}
.acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--red-deep); }
.acc-icon { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #faeaea; position: relative; transition: background 0.2s ease; }
.acc-icon::before, .acc-icon::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--red-deep); border-radius: 2px; }
.acc-icon::before { width: 12px; height: 2px; }
.acc-icon::after { width: 2px; height: 12px; transition: transform 0.2s ease; }
.acc[open] .acc-icon { background: var(--red); }
.acc[open] .acc-icon::before, .acc[open] .acc-icon::after { background: #fff; }
.acc[open] .acc-icon::after { transform: scaleY(0); }
.acc-body { padding: 0 24px 22px; color: var(--slate); max-width: 76ch; }
.acc-body p + p { margin-top: 12px; }

/* ---------- The record (review band) ---------- */
.review-hero { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-bottom: 42px; }
.rh-score {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 5.2rem;
  line-height: 0.9;
  color: var(--red-deep);
  font-variant-numeric: tabular-nums;
}
.rh-stars { display: flex; gap: 6px; }
.rh-stars svg { width: 34px; height: 34px; display: block; }
.rh-sub { font-size: 1.04rem; color: var(--slate); max-width: 36ch; }
.rh-sub b { color: var(--ink); }
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-bottom: 40px; }
.quote-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-top: 4px solid var(--red);
  padding: 26px 26px 22px;
  box-shadow: var(--shadow-card);
}
.quote-card .q-mark { font-family: Georgia, serif; font-weight: 700; font-size: 3.2rem; line-height: 0.5; color: var(--red); display: block; margin-bottom: 16px; }
.quote-card blockquote { font-size: 1.03rem; color: var(--ink); font-weight: 500; font-style: italic; }
.quote-card cite { display: block; font-style: normal; margin-top: 16px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }

/* ---------- Spec cards (the dense tables are retired) ---------- */
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.spec-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 20px;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.spec-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.sc-photo { display: block; margin: -26px -26px 20px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: var(--mist, #f1f3f5); }
.sc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transition: transform 0.3s ease; }
.spec-card:hover .sc-photo img { transform: scale(1.03); }
.sc-photo--pending { text-decoration: none; display: flex; align-items: center; justify-content: center; border-bottom: 1px dashed var(--line); }
.sc-photo--pending span { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.sc-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.sc-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.sc-head h3 { font-size: 1.22rem; }
.sc-head p { font-size: 0.88rem; color: var(--slate); margin-top: 2px; }
.sc-specs { border-top: 1px solid var(--line); }
.sc-specs > div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.sc-specs > div:last-child { border-bottom: 0; }
.sc-specs dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.sc-specs dd { font-size: 0.97rem; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- Map ---------- */
.map-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  margin-top: 44px;
}
.map-frame iframe { display: block; width: 100%; height: 420px; border: 0; }

@media (max-width: 1080px) {
  .spec-grid, .quote-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .spec-grid, .quote-grid { grid-template-columns: 1fr; }
  .rh-score { font-size: 3.8rem; }
  .rh-stars svg { width: 26px; height: 26px; }
  .map-frame iframe { height: 320px; }
}

/* ---------- Product tiles (clear products, his photos) ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tile {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.tile .t-photo { aspect-ratio: 1 / 1; overflow: hidden; }
.tile .t-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.tile .t-body { padding: 16px 18px 18px; }
.tile h3 { font-size: 1.02rem; margin-bottom: 3px; }
.tile p { font-size: 0.85rem; color: var(--slate); line-height: 1.5; }
@media (max-width: 1080px) { .tile-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .tile-grid { grid-template-columns: 1fr 1fr; gap: 14px; } .tile .t-body { padding: 12px 14px 14px; } }

/* ---- Round 5.2 (Edison's Aug-3 asks) ---------------------------------- */

/* Emergency / after-hours band — his verbatim ask, sits under the hero */
.alert-band {
  background: linear-gradient(180deg, var(--red) 0%, var(--red-deep) 100%);
  color: var(--white);
  border-top: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 18px rgba(138,6,30,.28);
}
.alert-inner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 20px; text-align: center; flex-wrap: wrap; }
.alert-icon { font-size: 1.15rem; line-height: 1; }
.alert-band p { margin: 0; font-size: .98rem; letter-spacing: .01em; }
.alert-band a { color: var(--white); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.alert-band a:hover { color: #ffd9d9; }

/* 7-Point service grid — 4 + 3 on desktop */
.spec-grid--seven { grid-template-columns: repeat(4, 1fr); }
.spec-grid--seven .spec-card:nth-child(n+5) { grid-column: span 1; }
@media (min-width: 981px) {
  .spec-grid--seven .spec-card:nth-child(5) { grid-column: 1 / 2; }
}
@media (max-width: 980px) { .spec-grid--seven { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .spec-grid--seven { grid-template-columns: 1fr; } }

/* Pricing shell slots — visibly pending Edison's numbers */
.price-slot { font-weight: 700; color: var(--red-deep); }

/* Cascade pin (the §1.4 trap, third sighting): spec-cards are WHITE surfaces even inside
   .section-dark — their headings must stay ink, not inherit the dark-band white. */
.section-dark .spec-card h3 { color: var(--ink); }

/* ===== merged from /faq (round 6, Aug 13 2026) ===== */
/* Page-scoped only. Yakul merges into site.css at integration. */
.hero--faq {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/band-trench.webp");
  background-position: center, 55% 52%;
}
.qa-block .qa-q h2 { margin: 0; }
.qa-lane { max-width: 760px; margin-bottom: 40px; }
.yard-call .yard-role { display: block; }
.yard-call p.yard-addr { margin: -4px 0 0; font-size: 0.92rem; }
.yard-call .yard-phone { display: inline-block; margin-top: 6px; }
.yard-call p.yard-towns { margin-top: 10px; font-size: 0.92rem; }

/* ===== merged from /location/fresno-county (round 6, Aug 13 2026) ===== */
/* Scoped to this page. Yakul merges into site.css on the round-6 pass. */
  /* Oct 21 2026: landmark photo, see photo ledger. The Fresno County Blossom Trail. */
  .hero--county.c-fresno {
    background-image:
      linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
      url("/assets/img/hero-fresno-county-blossom-trail.webp");
    background-position: center, 50% 50%;
  }
  .crumb { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.62); margin-bottom: 14px; }
  .crumb a { color: var(--red-soft); text-decoration: none; }
  .crumb a:hover { text-decoration: underline; }
  .yard-cta { background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: var(--radius); padding: 22px 26px; box-shadow: var(--shadow-card); margin-top: 26px; }
  .yard-cta h4 { font-size: 1.15rem; margin-bottom: 4px; }
  .yard-cta p { font-size: 0.92rem; margin-bottom: 8px; }
  .town-set { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow-card); }
  .town-set .chip { background: var(--mist); border-color: transparent; transition: border-color 0.15s ease, color 0.15s ease; }
  .town-set .chip:hover { border-color: var(--red); color: var(--red-deep); }
  .town-note { font-size: 0.92rem; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
  @media (max-width: 700px) { .town-set { padding: 22px 20px; } }

/* ===== merged from /location/kern-county (round 6, Aug 13 2026) ===== */
/* Scoped to this page. Yakul merges into site.css on the round-6 pass. */
  /* Oct 21 2026: landmark photo, see photo ledger. Old Kern County Court House, Havilah. */
  .hero--county.c-kern {
    background-image:
      linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
      url("/assets/img/hero-kern-county-havilah.webp");
    background-position: center, 60% 50%;
  }
@media (max-width: 700px) { .town-set { padding: 22px 20px; } }

/* ===== merged from /location/kings-county (round 6, Aug 13 2026) ===== */
/* Scoped to this page. Yakul merges into site.css on the round-6 pass. */
  /* Oct 21 2026: landmark photo, see photo ledger. Kings County Courthouse, Hanford. */
  .hero--county.c-kings {
    background-image:
      linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
      url("/assets/img/hero-kings-county-courthouse.webp");
    background-position: center, 40% 45%;
  }
@media (max-width: 700px) { .town-set { padding: 22px 20px; } }

/* ===== merged from /location/madera-county (round 6, Aug 13 2026) ===== */
/* Scoped to this page. Yakul merges into site.css on the round-6 pass. */
  /* Oct 21 2026: landmark photo, see photo ledger. Madera County Courthouse. */
  .hero--county.c-madera {
    background-image:
      linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
      url("/assets/img/hero-madera-county-courthouse.webp");
    background-position: center, 45% 40%;
  }
@media (max-width: 700px) { .town-set { padding: 22px 20px; } }

/* ===== merged from /location/merced-county (round 6, Aug 13 2026) ===== */
/* Scoped to this page. Yakul merges into site.css on the round-6 pass. */
  /* Oct 21 2026: landmark photo, see photo ledger. Snelling Courthouse, Merced County. */
  .hero--county.c-merced {
    background-image:
      linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
      url("/assets/img/hero-merced-county-snelling.webp");
    background-position: center, 50% 45%;
  }
@media (max-width: 700px) { .town-set { padding: 22px 20px; } }

/* ===== merged from /location/san-joaquin-county (round 6, Aug 13 2026) ===== */
/* Scoped to this page. Yakul merges into site.css on the round-6 pass. */
  /* Oct 21 2026: landmark photo, see photo ledger. Old-vine Zinfandel rows in Lodi, San Joaquin County. */
  .hero--county.c-san-joaquin {
    background-image:
      linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
      url("/assets/img/hero-san-joaquin-county-vines.webp");
    background-position: center, 50% 55%;
  }
@media (max-width: 700px) { .town-set { padding: 22px 20px; } }

/* ===== merged from /location/stanislaus-county (round 6, Aug 13 2026) ===== */
/* Scoped to this page. Yakul merges into site.css on the round-6 pass. */
  /* Oct 21 2026: landmark photo, see photo ledger. Almond orchard near Turlock, Stanislaus County. */
  .hero--county.c-stanislaus {
    background-image:
      linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
      url("/assets/img/hero-stanislaus-county-almonds.webp");
    background-position: center, 50% 55%;
  }
@media (max-width: 700px) { .town-set { padding: 22px 20px; } }

/* ===== merged from /location/tulare-county (round 6, Aug 13 2026) ===== */
/* Scoped to this page. Yakul merges into site.css on the round-6 pass. */
  /* Oct 21 2026: landmark photo, see photo ledger. Sequoia National Park, Tulare County. */
  .hero--county.c-tulare {
    background-image:
      linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
      url("/assets/img/hero-tulare-county-sequoia.webp");
    background-position: center, 50% 50%;
  }
@media (max-width: 700px) { .town-set { padding: 22px 20px; } }

/* ===== merged from /our-service-areas (round 6, Aug 13 2026) ===== */
/* Scoped to this page. Yakul merges into site.css on the round-6 pass. */
  /* Oct 21 2026: a county from above (Bashō): Kern County farmland aerial, ledger L270. */
  .hero--areas {
    background-image:
      linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
      url("/assets/img/hero-service-areas-aerial.webp");
    background-position: center, center 68%;
  }
  .county-set { display: grid; gap: 22px; }
  .county-block { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 30px 28px; box-shadow: var(--shadow-card); }
  .cb-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .cb-head h3 { font-size: 1.32rem; }
  .cb-head h3 a { color: var(--ink); text-decoration: none; }
  .cb-head h3 a:hover { color: var(--red-deep); text-decoration: underline; }
  .cb-yard { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); }
  .cb-yard a { color: var(--red-deep); text-decoration: none; font-variant-numeric: tabular-nums; }
  .cb-yard a:hover { text-decoration: underline; }
  .cb-count { margin-left: auto; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); font-variant-numeric: tabular-nums; }
  .county-block .chip { background: var(--mist); border-color: transparent; transition: border-color 0.15s ease, color 0.15s ease; }
  .county-block .chip:hover { border-color: var(--red); color: var(--red-deep); }
.yard-cta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
  @media (max-width: 860px) { .yard-cta-grid { grid-template-columns: 1fr; } .cb-count { margin-left: 0; } }
  @media (max-width: 700px) { .county-block { padding: 22px 20px 24px; } }

/* ===== merged from /porta-potty-rental-bakersfield-ca (round 6, Aug 13 2026) ===== */
/* Scoped to this page. Yakul merges into site.css at the template pass. */
/* YARD MAP FIX (Aug 16): this hero was band-trench, whose decal reads 559-410-2076.
   Bakersfield is the 661-522-7894 yard, so the page was showing a Bakersfield
   customer Lemoore's number painted on the unit. trailer-3st-wide (trailer B) carries no
   readable decal and is literally the right yard. */
.hero--city.c-bakersfield {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-bakersfield-arch.webp");
  background-position: center, center 40%;
}
.yard-call { margin-top: 28px; }
.yard-call h4 { margin: 0;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 2px;
}
.spec-slot { color: var(--slate); font-style: italic; }
.lineup-link { display: inline-block; margin-top: 30px; font-weight: 700; font-size: 0.95rem; color: var(--red-deep); }

/* ===== merged from /restroom-trailer-rental (round 6, Aug 13 2026) ===== */
/* Scoped to this page. Merge into site.css at build. */
.hero--trailers {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/trailer-3st-wide.webp");
  background-position: center, center 42%;
}
.video-wrap { max-width: 860px; margin: 0 auto; }
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  background: var(--ink);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-cap { font-size: 0.88rem; color: var(--slate); margin-top: 14px; text-align: center; }
.tier-step { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.tier-step .tier-num {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--red);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 11px;
  white-space: nowrap;
}
.card h3.tier-h { margin: 0; font-size: 1.12rem; }
.needs-note { font-size: 0.9rem; color: var(--slate); margin-top: 26px; max-width: 70ch; }

/* ===== merged from /temporary-fencing-rental (round 6, Aug 13 2026) ===== */
/* Scoped to this page. Merge into site.css at build. */
.hero--fencing {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.9) 0%, rgba(23, 25, 30, 0.72) 48%, rgba(16, 17, 21, 0.9) 100%),
    url("/assets/img/fence-hanford.webp");
  background-position: center, 50% 46%;
}
.quote-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.qi {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.qi h3 { margin: 0 0 6px; font-size: 1rem; }
.qi p { margin: 0; font-size: 0.93rem; }
.honest-note { font-size: 0.9rem; color: var(--slate); margin-top: 26px; max-width: 72ch; }
@media (max-width: 900px) { .quote-inputs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .quote-inputs { grid-template-columns: 1fr; } }

/* --- from /porta-potty-rental-clovis-ca/index.html (round 6b) --- */
/* Page-scoped. Yakul merges into site.css at integration.
   Shared hook is .hero--city; only the .c-<city> modifier is defined per page, so no rule is
   redefined anywhere. ⚠️ Bakersfield uses .hero--city.c-bakersfield and should be renamed
   .hero--city.c-bakersfield at the merge so all six city heroes share one pattern. */
/* Oct 21 2026: landmark photo, see photo ledger. Pollasky Avenue, Old Town Clovis. */
.hero--city.c-clovis {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-clovis-pollasky.webp");
  background-position: center, 50% 55%;
}

/* --- from /porta-potty-rental-fresno-ca/index.html (round 6b) --- */
/* Page-scoped. Yakul merges and dedupes into site.css at the template pass.
   .hero--city is ONE shared base for the whole city fleet; only the .city-* modifier
   changes the image. Do not redefine .hero--city per page. */
/* Oct 21 2026: landmark photo, see photo ledger. Tower Theatre, Fresno. */
.hero--city.city-fresno {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-fresno-tower.webp");
  background-position: center, 30% 40%;
}

/* --- from /porta-potty-rental-hanford-ca/index.html (round 6b) --- */
/* Page-scoped. Yakul merges into site.css at integration.
   Shared hook is .hero--city; only the .c-<city> modifier is defined per page, so no rule is
   redefined anywhere. ⚠️ Bakersfield uses .hero--city.c-bakersfield and should be renamed
   .hero--city.c-bakersfield at the merge so all six city heroes share one pattern. */
/* Oct 21 2026: landmark photo, see photo ledger. The Bastille, Hanford. */
.hero--city.c-hanford {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-hanford-bastille.webp");
  background-position: center, 45% 45%;
}

/* --- from /porta-potty-rental-lemoore-ca/index.html (round 6b) --- */
/* Page-scoped. Yakul merges and dedupes into site.css at the template pass.
   .hero--city is ONE shared base for the whole city fleet; only the .city-* modifier
   changes the image. Do not redefine .hero--city per page. */
.hero--city.city-lemoore {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-lemoore-lucerne.webp");
  background-position: center, center 45%;
}

/* --- from /porta-potty-rental-merced-ca/index.html (round 6b) --- */
/* Page-scoped. Yakul merges into site.css at integration.
   Shared hook is .hero--city; only the .c-<city> modifier is defined per page, so no rule is
   redefined anywhere. ⚠️ Bakersfield uses .hero--city.c-bakersfield and should be renamed
   .hero--city.c-bakersfield at the merge so all six city heroes share one pattern. */
/* Oct 21 2026: landmark photo, see photo ledger. Merced water tower. */
.hero--city.c-merced {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-merced-water-tower.webp");
  background-position: center, 45% 40%;
}

/* --- from /porta-potty-rental-modesto-ca/index.html (round 6b) --- */
/* Page-scoped. Yakul merges and dedupes into site.css at the template pass.
   .hero--city is ONE shared base for the whole city fleet; only the .city-* modifier
   changes the image. Do not redefine .hero--city per page. */
/* was band-yard (withdrawn — no consent). yard-modesto is the right frame for the
   Modesto city page and its decal reads 209-287-9114, the yard that serves it. */
.hero--city.city-modesto {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-modesto-arch.webp");
  background-position: center, center 40%;
}
.review-line { margin-top: 16px; padding-left: 16px; border-left: 3px solid var(--red);
  font-size: 1rem; font-style: italic; color: var(--ink); }
.review-line span { display: block; margin-top: 4px; font-style: normal; font-size: 0.82rem;
  font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); }

/* --- from /porta-potty-rental-stockton-ca/index.html (round 6b) --- */
/* Page-scoped. Yakul merges and dedupes into site.css at the template pass.
   .hero--city is ONE shared base for the whole city fleet; only the .city-* modifier
   changes the image. Do not redefine .hero--city per page. */
/* Oct 21 2026: landmark photo, see photo ledger. Downtown Stockton waterfront. */
.hero--city.city-stockton {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-stockton-waterfront.webp");
  background-position: center, 45% 38%;
}
/* --- from /porta-potty-rental-turlock-ca/index.html (round 6b) --- */
/* Page-scoped. Yakul merges into site.css at integration.
   Shared hook is .hero--city; only the .c-<city> modifier is defined per page, so no rule is
   redefined anywhere. ⚠️ Bakersfield uses .hero--city.c-bakersfield and should be renamed
   .hero--city.c-bakersfield at the merge so all six city heroes share one pattern. */
/* Oct 21 2026: landmark photo, see photo ledger. Main Street, Turlock. */
.hero--city.c-turlock {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-turlock-main-street.webp");
  background-position: center, 50% 60%;
}

/* --- from /porta-potty-rental-visalia-ca/index.html (round 6b) --- */
/* Page-scoped. Yakul merges into site.css at integration.
   Shared hook is .hero--city; only the .c-<city> modifier is defined per page, so no rule is
   redefined anywhere. ⚠️ Bakersfield uses .hero--city.c-bakersfield and should be renamed
   .hero--city.c-bakersfield at the merge so all six city heroes share one pattern. */
/* Oct 21 2026: landmark photo, see photo ledger. Fox Theatre clock tower, Visalia. */
.hero--city.c-visalia {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-visalia-fox-tower.webp");
  background-position: center, 46% 38%;
}

/* --- from /porta-potty-rental-madera-ca/ and /porta-potty-rental-porterville-ca/ (round 8, Aug 15 2026) --- */
/* The two KP-cleared city pages. Same shared .hero--city base, one .c-<city> modifier each,
   nothing redefined. Both are LEMOORE-yard cities, so both heroes had to be a frame whose
   decal reads 559-410-2076: card-restrooms and band-valley are the two verified by eye that
   are not already carrying a 209 number. Reuse across cities is the existing pattern
   (band-valley already serves Clovis and Lemoore; hero-dawn serves Merced and Stockton). */
/* Oct 21 2026: landmark photo, see photo ledger. Madera water tower. */
.hero--city.c-madera {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-madera-water-tower.webp");
  background-position: center, 27% 35%;
}
/* Oct 21 2026: landmark photo, see photo ledger. Downtown Porterville and the Sierra foothills. */
.hero--city.c-porterville {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-porterville-skyline.webp");
  background-position: center, 40% 50%;
}

/* --- from /404.html (round 6b) --- */
/* ===== page-scoped · /404.html · merge into site.css at the next pass ===== */
/* One new class. Reuses band-valley.jpg, already carried by .hero--areas. */
.hero--404 {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.93) 0%, rgba(23, 25, 30, 0.82) 48%, rgba(16, 17, 21, 0.93) 100%),
    url("/assets/img/band-valley.webp");
  background-position: center, center 55%;
}
.hero--404 .hero-split-copy { max-width: 62ch; }

/* ============================================================
   v6 NAV — Services / Service Areas disclosure + the mobile
   CALL swap.  (Round 7, Aug 14 2026)

   Doctrine: the disclosure is PURE CSS. Every <a href> lives in
   the served HTML at all times; :hover / :focus-within reveal it
   on desktop, a class reveals it in the mobile overlay. JS only
   toggles state classes and syncs aria-expanded — it never
   injects or removes a link, because no major AI crawler runs JS.
   ============================================================ */

/* ---------- Shared nav chrome ---------- */
.nav-item { position: relative; display: flex; align-items: center; gap: 4px; }

/* The button that opens "Services" must read as a nav link, not a button. */
.main-nav .nav-top,
.main-nav .nav-caret-btn {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.88);
  transition: color 0.15s;
}
.main-nav button.nav-top { display: inline-flex; align-items: center; gap: 6px; }
.main-nav .nav-caret-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.main-nav .nav-top:hover,
.main-nav .nav-caret-btn:hover { color: var(--white); }
.site-header.scrolled .main-nav .nav-top,
.site-header.scrolled .main-nav .nav-caret-btn { color: var(--ink); }
.site-header.scrolled .main-nav .nav-top:hover,
.site-header.scrolled .main-nav .nav-caret-btn:hover { color: var(--red-deep); }
@media (max-width: 1330px) { .main-nav .nav-top, .main-nav .nav-caret-btn { font-size: 0.84rem; } }

.nav-caret {
  display: block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}

/* ---------- Desktop disclosure ---------- */
@media (min-width: 1081px) {
  .nav-menu {
    position: absolute;
    top: 100%;
    left: -14px;
    margin-top: 12px;
    min-width: 232px;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid var(--red);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
    z-index: 110;
  }
  /* the hover bridge — keeps the menu reachable across the 12px gap */
  .nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }

  .nav-item:hover > .nav-menu,
  .nav-item:focus-within > .nav-menu,
  .nav-item.is-expanded > .nav-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  /* Escape / explicit collapse beats both hover and focus-within */
  .nav-item.is-collapsed:hover > .nav-menu,
  .nav-item.is-collapsed:focus-within > .nav-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
  }
  .nav-item:hover > .nav-top .nav-caret,
  .nav-item:hover > .nav-caret-btn .nav-caret,
  .nav-item:focus-within > .nav-top .nav-caret,
  .nav-item:focus-within > .nav-caret-btn .nav-caret { transform: translateY(1px) rotate(-135deg); }

  .site-header .main-nav .nav-menu a {
    display: block;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 9px 14px;
    border-radius: 6px;
    white-space: nowrap;
  }
  .site-header .main-nav .nav-menu a:hover { color: var(--red-deep); background: var(--mist); }
  .site-header .main-nav .nav-menu a[aria-current="page"] {
    color: var(--red-deep);
    background: var(--mist);
    border-bottom: 0;
    padding-bottom: 9px;
  }
  .nav-menu--areas { column-count: 2; column-gap: 6px; min-width: 396px; display: block; }
  .nav-menu--areas a { break-inside: avoid; }
  .site-header .main-nav .nav-menu--areas a:first-child { font-weight: 700; }
}
@media (min-width: 1081px) and (prefers-reduced-motion: reduce) {
  .nav-menu, .nav-caret { transition: none; }
}

/* ---------- Mobile: closed bar + overlay ---------- */
@media (max-width: 1080px) {
  /* CLOSED BAR — the red button is CALL. "porta potty rental near me" is a
     phone-in-hand query; the number does not belong two taps deep. */
  .site-header .main-nav .nav-item,
  .site-header .main-nav .nav-cta { display: none; }
  .site-header .main-nav a.nav-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Deeper than --grad-red on purpose: white on #ee5254 measures 3.5:1 and this
       label is 13.4px, so the gradient runs --red -> --red-deep and measures 5.0:1. */
    background: linear-gradient(180deg, var(--red) 0%, var(--red-deep) 100%);
    color: var(--white);
    border-radius: var(--radius);
    padding: 10px 15px;
    box-shadow: var(--shadow-card);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
    font-size: 0.9rem !important;
    letter-spacing: -0.01em;
  }
  .site-header .main-nav a.nav-phone::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.2 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .site-header .main-nav a.nav-phone[aria-current="page"] { border-bottom: 0; padding-bottom: 10px; }

  /* OPEN OVERLAY */
  body.nav-open .main-nav { overflow-y: auto; overscroll-behavior: contain; gap: 2px; }
  body.nav-open .site-header .main-nav .nav-item { display: block; width: 100%; }
  body.nav-open .site-header .main-nav .nav-cta { display: inline-flex; }

  body.nav-open .main-nav .nav-top,
  body.nav-open .main-nav .nav-caret-btn { color: var(--white); }
  body.nav-open .main-nav .nav-item > .nav-top {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    padding: 10px 0;
    min-height: 48px;
  }
  body.nav-open .site-header .main-nav .nav-item--areas { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  body.nav-open .main-nav .nav-item--areas > a.nav-top { flex: 1 1 auto; }
  body.nav-open .main-nav .nav-caret-btn { width: 48px; height: 48px; margin-right: -12px; }
  body.nav-open .main-nav .nav-item > .nav-top .nav-caret,
  body.nav-open .main-nav .nav-caret-btn .nav-caret { width: 9px; height: 9px; border-width: 2.5px; }

  /* Services opens EXPANDED — three money pages at zero extra taps.
     Service Areas stays collapsed; nine county rows would not fit. */
  body.nav-open .main-nav .nav-menu { display: none; width: 100%; flex-direction: column; padding: 2px 0 8px 16px; border-left: 2px solid rgba(255, 255, 255, 0.16); }
  body.nav-open .main-nav .nav-item--services .nav-menu { display: flex; }
  body.nav-open .main-nav .nav-item.is-expanded .nav-menu { display: flex; }
  body.nav-open .main-nav .nav-item.is-collapsed .nav-menu { display: none; }
  body.nav-open .main-nav .nav-item.is-expanded > .nav-top .nav-caret,
  body.nav-open .main-nav .nav-item.is-expanded > .nav-caret-btn .nav-caret { transform: translateY(1px) rotate(-135deg); }
  body.nav-open .main-nav .nav-item--services > .nav-top .nav-caret { transform: translateY(1px) rotate(-135deg); }
  body.nav-open .main-nav .nav-item--services.is-collapsed > .nav-top .nav-caret { transform: translateY(-2px) rotate(45deg); }

  body.nav-open .site-header .main-nav .nav-menu a {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-family: var(--font-body);
    font-size: 1.02rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    padding: 4px 0;
    border-bottom: 0;
  }
  body.nav-open .site-header .main-nav .nav-menu a[aria-current="page"] { color: var(--red-soft); background: none; }

  /* the phone stops being the weakest thing on the screen */
  body.nav-open .site-header .main-nav a.nav-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius);
    box-shadow: none;
    text-shadow: none;
    font-family: var(--font-display);
    font-size: 1.2rem !important;
    letter-spacing: 0;
  }
  body.nav-open .site-header .main-nav a.nav-phone::before { width: 19px; height: 19px; }
  body.nav-open .main-nav .nav-cta { width: 100%; margin-top: 12px; padding: 15px 24px; font-size: 1rem; }
}

/* the smallest bar: brand + CALL + hamburger must all fit at 390 with air to spare */
@media (max-width: 700px) {
  .site-header .container { gap: 10px; padding: 0 16px; }
  .site-header .brand img { height: 22px; }
  .site-header .main-nav a.nav-phone { padding: 9px 11px; gap: 6px; font-size: 0.84rem !important; }
  .site-header .main-nav a.nav-phone::before { width: 14px; height: 14px; }
  body.nav-open .main-nav { padding-left: 24px; padding-right: 24px; }
}
/* Under 390 the wordmark, the CALL button and a 44px tap target stop fitting.
   The number is the money, so the wordmark gives ground first. */
@media (max-width: 389px) {
  .site-header .container { gap: 8px; padding: 0 12px; }
  .site-header .brand img { height: 20px; }
  .site-header .main-nav a.nav-phone { padding: 9px 9px; gap: 5px; font-size: 0.78rem !important; }
  .site-header .main-nav a.nav-phone::before { width: 13px; height: 13px; }
}
@media (max-width: 344px) {
  .site-header .brand img { height: 17px; }
  .site-header .main-nav a.nav-phone { padding: 8px 7px; gap: 4px; font-size: 0.7rem !important; }
  .site-header .main-nav a.nav-phone::before { width: 12px; height: 12px; }
}

/* ============================================================
   Area map frame — the aspect-ratio wrapper keeps CLS at zero.
   Markup lands in the next phase; the styles ship now.
   (Mirrors the AEG /service-areas/ implementation.)
   ============================================================ */
.area-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--mist);
}
.area-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 768px) { .area-map-frame { aspect-ratio: 4 / 3; } }

/* ============================================================
   BLOG FAMILY — /blog/ and the 11 posts (round 7, Aug 15 2026)
   Page-scoped to the blog. Yakul merges and dedupes at the
   template pass. Everything else on a post reuses the FAQ
   chassis: .hero-interior, .qa-block/.qa-grid, .cta-band.
   Contrast measured against --paper #fafaf8 and --white:
   --slate #4a5158 on #fafaf8 = 7.70:1 · on #fff = 8.05:1.
   (Corrected Aug 16. The previous comment claimed 8.15 and 8.42; both were
   overstated by ~0.4. Re-derived and cross-checked against the canonical WCAG
   anchors — #767676/#fff = 4.54, #595959/#fff = 7.00, #000/#fff = 21. Both
   values clear the 4.5 floor comfortably either way, so nothing on the page
   changed; only the number written down was wrong.)
   ============================================================ */
.hero--blog {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/band-valley.webp");
  background-position: center, center 52%;
}
/* Breadcrumb. Sits on the dark hero, so the separator and the
   link colour are the AA-safe light pair, not --slate. */
.crumbs { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: #c9ccd1; margin-bottom: 14px; }
.crumbs a { color: #c9ccd1; text-decoration: none; border-bottom: 1px solid rgba(201, 204, 209, 0.4); }
.crumbs a:hover { color: #fff; border-bottom-color: #fff; }
/* #8d939b measured 4.23:1 against the lightest part of the hero photo behind it
   (needs 4.5). #9aa0a8 measures 4.97:1 there and 5.26:1 on the typical pixel,
   and stays visibly subordinate to the #c9ccd1 link text. */
.crumbs span { padding: 0 8px; color: #9aa0a8; }
.post-meta { margin-top: 20px; font-size: 0.86rem; color: #c9ccd1; }
.post-meta time { font-weight: 600; }

/* The index. Grouped lanes of text-only cards. */
.post-lane { margin-top: 56px; }
.post-lane:first-of-type { margin-top: 0; }
.post-lane > h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: 6px; }
.post-lane > p.lane-sub { color: var(--slate); max-width: 70ch; margin-bottom: 26px; }
.post-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.post-list > li {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.post-list > li:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.post-list h3 { font-size: 1.16rem; margin: 0 0 8px; text-wrap: balance; }
.post-list h3 a { color: var(--ink); text-decoration: none; }
.post-list h3 a:hover { color: var(--red-deep); }
.post-list p { font-size: 0.96rem; color: var(--slate); text-wrap: pretty; }
.post-list .post-date { display: block; margin-top: 12px; font-size: 0.76rem;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }

/* The frozen-figure notice. One shape, used on both cost posts and
   anywhere a spec is still with the client. */
.slot-note {
  border-left: 3px solid var(--red);
  background: var(--mist);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
  margin: 22px 0;
}
.slot-note p { font-size: 0.98rem; color: var(--slate); }
.slot-note p + p { margin-top: 10px; }

/* A quoted customer, inline in a post. The words are the source. */
.said { margin: 22px 0; padding-left: 18px; border-left: 3px solid var(--line); }
.said blockquote { font-size: 1.04rem; font-style: italic; color: var(--ink); text-wrap: pretty; }
.said cite { display: block; margin-top: 8px; font-style: normal; font-size: 0.78rem;
  font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); }

@media (max-width: 860px) {
  .post-list { grid-template-columns: 1fr; }
}

/* ===== event-type lane + the statewide page (Aug 15 2026) ===== */
/* Shared hook is .hero--evt; only the .e-<lane> modifier is defined per page, so no rule is
   redefined. Overlay stops match the interior-hero standard (0.92 / 0.80 / 0.92); the two
   brightest source photos get 0.93 / 0.82 / 0.93 so the white h1 keeps its measured AA
   margin over the lightest band of the image rather than over its average. */
/* hero-wedding.webp WITHDRAWN Aug 16 2026. It shows an identifiable person with no release
   on record, which is the same reason band-yard.webp is banned outright, and the raw asset is
   publicly fetchable unscrimmed regardless of the overlay. It was also an indoor trade-show
   booth, not a wedding. Replaced with the event trailer, which carries no person and no decal.
   Restore only if Edison supplies a real wedding photo AND a release. */
.hero--evt.e-wedding {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/trailer-event.webp");
  background-position: center, center 46%;
}
/* Construction hero = the client's own truck towing units past two excavators (ledger L234; the only copy
   is 650x460, upscaled 4x with Real-ESRGAN then down to 1600, plate softened). Bashō, Oct 21 2026. */
.hero--evt.e-construction {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-construction-fleet.webp");
  background-position: center, 35% 62%;
}
.hero--evt.e-agricultural {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/ag-silo.webp");
  background-position: center, center 52%;
}
.hero--evt.e-community {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.93) 0%, rgba(23, 25, 30, 0.82) 48%, rgba(16, 17, 21, 0.93) 100%),
    url("/assets/img/hero-neighborhood.webp");
  background-position: center, 55% 58%;
}
.hero--evt.e-festival {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.93) 0%, rgba(23, 25, 30, 0.82) 48%, rgba(16, 17, 21, 0.93) 100%),
    url("/assets/img/hero-festival-concert.webp");
  background-position: center, 28% 55%;
}
.hero--evt.e-sporting {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/band-valley.webp");
  background-position: center, center 60%;
}
/* was band-yard (withdrawn — no consent). yard-fleet carries no readable decal, which
   is what a statewide municipal lane needs: it must not assert one yard's number. */
.hero--evt.e-government {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/yard-fleet.webp");
  background-position: center, center 48%;
}
.hero--evt.e-emergency {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-dawn.webp");
  background-position: center, center 52%;
}
.hero--evt.e-statewide {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-home.webp");
  background-position: center, center 62%;
}
/* Chips are <a> on the statewide county grid. .chip already sets colour and border; this
   only removes the underline and gives the link a hover state consistent with .pc-link. */
a.chip { text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; }
a.chip:hover, a.chip:focus-visible { border-color: var(--red); color: var(--red-deep); }

/* ===== merged from the utility + hub pass (round 9, Aug 15 2026) ===== */
/* /about-us · /our-rentals · /location · /privacy-policies · /terms-conditions · /thank-you
   Page-scoped, same convention as rounds 6 to 8. Yakul folds these into the base
   at the template pass. Appended, never rewritten: other agents are appending here
   in the same checkout. */

/* Four photo heroes. Each reuses an image the build already ships, so the pass adds
   no new bytes to the image budget. */
/* was band-yard (withdrawn — no consent). yard-fleet is the picture the page is
   actually about: "owns its own equipment", and it carries no readable decal. */
.hero--about {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/yard-fleet.webp");
  background-position: center, center 45%;
}
.hero--rentals {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/band-selma.webp");
  background-position: center, center 55%;
}
.hero--counties {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/band-valley.webp");
  background-position: center, center 48%;
}
.hero--thanks {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-dawn.webp");
  background-position: center, center 55%;
}
/* The two legal pages take a flat charcoal band instead of a photo. Deliberate: a
   privacy policy is a reference document, nobody browses it, and it should not pull
   a hero image down the wire to be read once. Same scrim colours as every other hero,
   so the header, eyebrow, crumb and h1 all behave identically. */
.hero--legal {
  background-image: linear-gradient(178deg, #23262c 0%, #1c1f24 48%, #17191d 100%);
}
.hero--legal .hero-split-copy,
.hero--counties .hero-split-copy,
.hero--thanks .hero-split-copy { max-width: 68ch; }

/* Legal / policy prose. One measure, one rhythm, nothing decorative. */
.legal { max-width: 780px; }
.legal p { margin-bottom: 16px; }
.legal p:last-child { margin-bottom: 0; }
.legal h2 { font-size: 1.42rem; margin: 44px 0 14px; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.08rem; margin: 26px 0 10px; }
.legal ul { margin: 0 0 18px 22px; }
.legal li { margin-bottom: 7px; }
.legal .legal-foot {
  margin-top: 44px; padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}
.legal-meta {
  font-size: 0.86rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 6px;
}
.legal-meta .spec-slot { text-transform: none; letter-spacing: 0; color: rgba(255, 255, 255, 0.82); }

/* The slot placeholder defaults to --slate, which is built for light panels. On a dark
   section that measures 2.12:1 and the placeholder all but disappears next to white body
   copy (caught on /construction-porta-potty-rental/, "your window"). Same treatment the
   legal hero already uses, which measures AA on the same ground. */
.section-dark .spec-slot,
.cta-band .spec-slot { color: rgba(255, 255, 255, 0.82); }

/* /our-rentals catalogue. .spec-card with a linked heading; the card itself is not a
   link because each card also carries a spec list, and nesting is not on. */
.cat-grid .sc-head h3 a { color: var(--ink); text-decoration: none; }
.cat-grid .sc-head h3 a:hover,
.cat-grid .sc-head h3 a:focus-visible { color: var(--red-deep); text-decoration: underline; }
.cat-grid .sc-head p { line-height: 1.5; }
.cat-grid .sc-specs { margin-top: auto; }
.cat-grid .spec-card { display: flex; flex-direction: column; }
/* /restroom-trailer-rental/ #our-trailers: one full-width tile per trailer, photo left,
   same content height as the 3-up cards (Bashō, Oct 22 2026). */
.cat-grid--rows { grid-template-columns: 1fr; }
.cat-grid--rows .spec-card { flex-direction: row; align-items: stretch; padding: 0; overflow: hidden; }
.cat-grid--rows .sc-photo { margin: 0; flex: 0 0 38%; width: 38%; aspect-ratio: auto; border-radius: var(--radius) 0 0 var(--radius); }
.cat-grid--rows .sc-photo--pending { border-bottom: 0; border-right: 1px dashed var(--line); min-height: 318px; }
.cat-grid--rows .sc-body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 26px 28px; min-width: 0; }
.cat-grid--rows .sc-specs { margin-top: auto; }
@media (max-width: 700px) {
  .cat-grid--rows .spec-card { flex-direction: column; }
  .cat-grid--rows .sc-photo { width: 100%; flex: 0 0 auto; aspect-ratio: 16 / 9; border-radius: var(--radius) var(--radius) 0 0; }
  .cat-grid--rows .sc-photo--pending { border-right: 0; border-bottom: 1px dashed var(--line); min-height: 120px; }
  .cat-grid--rows .sc-body { padding: 22px 20px; }
}

/* Cascade pin: .honest-note is defined once as --slate, which is a light-band colour.
   Dropped into a .section-dark band it measured 2.12:1 against the charcoal on
   /about-us/ (pixel-measured, Aug 15). Same shape as the .spec-card pin above: the
   component is fine, the band it landed in is not. Pinned here rather than by
   inventing a second class. */
.section-dark .honest-note { color: rgba(255, 255, 255, 0.85); }
.section-dark .honest-note a { color: var(--red-soft); }
/* Cascade pin (the §1.4 trap again, fourth sighting): .chip is a WHITE pill, so its
   label must stay ink even inside .section-dark, where `.section-dark a` would
   otherwise repaint every link --red-soft. Measured on /about-us/ before the pin:
   #ff8a8a on #ffffff = 2.27:1 against a 4.5 floor. Specificity 0,2,0 beats the
   0,1,1 of `.section-dark a`; a.chip:hover at 0,2,1 still wins over both. */
.section-dark .chip { color: var(--ink); }
.section-dark a.chip:hover, .section-dark a.chip:focus-visible { color: var(--red-deep); }
/* /location county cards: heading links read as headings, not as links in a wall of
   red. Mirrors .cb-head h3 a on /our-service-areas/ so the two index surfaces behave
   the same way. */
.county-index .card h3 a { color: var(--ink); text-decoration: none; }
.county-index .card h3 a:hover,
.county-index .card h3 a:focus-visible { color: var(--red-deep); text-decoration: underline; }
.county-index .card .yard-role { margin-top: 4px; }

/* ---------- Quote form: validation + submit states (added with the form wiring,
   Aug 15 2026) ----------------------------------------------------------------
   Every colour below is MEASURED against the surface it sits on, not eyeballed.
   The card is --white #ffffff:
     .field-error         #a3101a on #ffffff = 7.94:1
     .form-status.is-error #8a061e on #fdecec = 8.65:1  (rule #d5282a = 4.41:1)
     .form-status.is-ok    #14602c on #e9f5ec = 6.84:1  (rule #14602c = 6.84:1)
     .form-status.is-sending --slate #4a5158 on #f3f1ee = 7.14:1
   The honeypot is NOT styled here on purpose. It carries its own inline styles in
   the markup so a stale or failed stylesheet can never make it visible to a real
   customer, which would turn a spam trap into a lead shredder. */
.field-error {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  color: #a3101a;
  text-wrap: pretty;
}
.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] { border-color: #a3101a; }

.form-status {
  font-size: 0.85rem;
  line-height: 1.45;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 6px;
  border-left: 3px solid transparent;
  text-wrap: pretty;
}
.form-status:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.form-status.is-sending { color: var(--slate); background: var(--mist); border-left-color: #c9c4bc; }
.form-status.is-ok { color: #14602c; background: #e9f5ec; border-left-color: #14602c; font-weight: 600; }
.form-status.is-error { color: #8a061e; background: #fdecec; border-left-color: var(--red); font-weight: 600; }

/* Lane-page catalogue grids (/porta-potty-rental/, /restroom-trailer-rental/).
   Unlike /our-rentals/, where every card heading is a link, these grids are MIXED:
   the units that have their own page are linked and the ones that do not (standard
   unit, flushable unit) are not. With the .cat-grid treatment alone the two are
   pixel-identical, so nothing tells you which heading is clickable. Same problem
   the town chips had, and the same fix the .county-block a.chip rule already uses:
   a red underline, because mobile has no hover to fall back on. Scoped to the
   modifier so /our-rentals/ keeps its uniform, underline-free catalogue. */
.cat-grid--mixed .sc-head h3 a {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.cat-grid--mixed .sc-head h3 a:hover,
.cat-grid--mixed .sc-head h3 a:focus-visible { color: var(--red-deep); }

/* ============================================================
   ROUND 10 — the shared-chrome pass (Aug 16 2026)
   Grid orphans · focus indicators · touch targets.
   Appended, never rewritten: other agents edit page bodies in
   this same checkout.
   ============================================================ */

/* ---------- 1. Grid columns follow the CHILD COUNT ----------
   A four-item .card-grid was rendering 3 + 1, stranding the last card
   alone with two empty columns beside it. Measured: 31 grids across 17
   pages at both 1440 and 1024.

   Fixed by counting children, not by tagging a class onto each page:
   `:has(> :nth-child(N):last-child)` is true only when the grid holds
   exactly N children.

   WHY 2×2 AND NOT 4-UP. Both were rendered and measured on
   /hand-wash-station-rental/. 4-up gives a 259px card and a 25-character
   line; 2×2 gives a 543px card and a 59-character line. These cards carry
   sentences, not labels, and 25 characters is a newspaper column — well
   under the 45-75 band where prose reads. 2×2 also degrades gracefully as
   copy grows, which matters because the page bodies are still being edited.

   SCOPED TO min-width:701px ON PURPOSE. `:has()` here computes to
   specificity (0,3,0), which would otherwise beat the plain (0,1,0)
   single-column rules in the max-width:700px block and leave phones on a
   two-up grid. Keeping these rules above the mobile breakpoint means the
   mobile cascade is untouched. */
@media (min-width: 701px) {
  .card-grid:has(> :nth-child(2):last-child),
  .spec-grid:has(> :nth-child(2):last-child),
  .quote-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }

  .card-grid:has(> :nth-child(4):last-child),
  .spec-grid:has(> :nth-child(4):last-child),
  .quote-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}

/* Seven cards in three columns leaves 3 + 3 + 1 — the same stranded-card shape, on
   /our-rentals/, a page the client opens early. Four across gives 4 + 3, which leaves
   the last row one cell short instead of three.

   THE BREAKPOINT IS MEASURED, NOT GUESSED. `.container` caps at 1160px with 24px of
   padding, so the content column stops growing at 1112px and a four-up card settles at
   259px — the width this was rendered and read at. Below that the cards shrink, and at
   1024 the row was measured overflowing its container with the fourth card clipped.
   So four-up starts at 1208px and the band below it takes two columns (2+2+2+1),
   which is one short rather than three and never overflows.
   NB `.spec-grid--seven` is the older hand-applied version of this and sets four
   columns from 981px; it is left alone here because nothing currently uses it at
   that width. If it is ever reused, give it the same 1208px floor. */
@media (min-width: 1208px) {
  .spec-grid:has(> :nth-child(7):last-child) { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 701px) and (max-width: 1207px) {
  .spec-grid:has(> :nth-child(7):last-child) { grid-template-columns: repeat(2, 1fr); }
}

/* The three-step story keeps its three columns through the tablet band.
   `.step-grid { 1fr 1fr }` at max-width:1080 was overriding `.step-grid--3`
   and turning every 3-step row into 2 + 1 (17 instances). */
@media (min-width: 701px) and (max-width: 1080px) {
  .step-grid.step-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* A media row holding a single figure should not leave three quarters of the
   row empty (/shower-trailer-rental/ measured 76% dead). One figure gets a
   sane thumbnail width instead of a stretched quarter-tile. */
.media-row:has(> :nth-child(1):last-child) { grid-template-columns: minmax(0, 420px); }
.media-row:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 420px)); }

/* ---------- 2. Focus indicators ----------
   The global `:focus-visible` ring is --red. MEASURED against the surfaces it
   actually lands on: fine on paper (4.82:1), white (5.04:1), mist (4.47:1) and
   the charcoal bands (3.49:1 / 3.01:1) — but 1.00:1 on the red button itself.
   The site's primary CTA therefore had no visible focus state at all, on every
   one of its ~230 appearances. WCAG 2.4.11 wants 3:1 against what is adjacent.
   White measures 6.02:1 on the button's mid stop, so red surfaces get a white
   ring set just inside the edge, where it sits on red rather than on the page. */
.btn-red:focus-visible,
.site-header .main-nav a.nav-phone:focus-visible,
.calc-mode[aria-pressed="true"]:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: -5px;
}
/* Ghost buttons live on scrimmed photo heroes, where a red ring can land on a
   bright patch of the photograph. White is unconditional there. */
.btn-outline-light:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
/* The alert band is a solid red field — same problem, same answer. */
.alert-band a:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }

/* ---------- 3. Touch targets at 390 ----------
   WCAG 2.5.5 asks 44×44. Measured shortfalls, all of them near-misses that
   read as sloppy rather than broken: form controls at 43px, the mobile CALL
   button and every yard number at 40px, town chips at 36px, the footer credit
   at 26px and the brand lockup at 22px.
   The honeypot input is deliberately NOT touched — it must stay a 1px trap. */
@media (max-width: 700px) {
  .form-field input,
  .form-field select,
  .form-field textarea { min-height: 44px; }
  .form-field textarea { min-height: 88px; }

  .site-header .main-nav a.nav-phone { min-height: 44px; }
  .brand { min-height: 44px; }
  .yard-phone { min-height: 44px; display: inline-flex; align-items: center; }
  .chip { min-height: 44px; display: inline-flex; align-items: center; }
  .lineup-link,
  .pc-link { min-height: 44px; display: inline-flex; align-items: center; }
  .gls-credit { min-height: 44px; display: inline-flex; align-items: center; }
  /* the footer legal pair sit in a tight row; give them room without
     restacking the bar */
  .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  /* the calculator's Jobsite / Event toggle measured 94×36 */
  .calc-mode { min-height: 44px; }
}

/* The guide heroes gained a phone CTA (their first actionable element used to sit
   1,165-1,269px down at 390, below the fold, because a post hero had no .hero-ctas
   at all). .post-meta carries no bottom margin, so the button landed flush against
   the byline. */
.post-meta + .hero-ctas { margin-top: 26px; }

/* PHOTO COLUMN. A full-height photo down one side of a section with the
   section's own content beside it (Bashō, Oct 12 2026: past the first two
   sections the pages ran three to six bands of tiles and accordions with no
   photograph, and read bare). One or two per page, alternating sides.
   Every photo shows the page's own yard number or no number at all, the
   same decal rule as the rest of the site. Desktop: the photo bleeds to the
   viewport edge and stretches to the section's height; the content keeps the
   page grid's outer edge. Below 1081px it becomes a full-width photo on top. */
.photo-col .pcol-media { margin: 0; overflow: hidden; position: relative; }
.photo-col .pcol-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
@media (min-width: 1081px) {
  .section.photo-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding: 0; }
  .section.photo-col--right { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .photo-col--right > .pcol-media { order: 2; }
  /* contain: size keeps the photo out of the row's height, so the content
     alone sets how tall the section is and the photo fills exactly that. */
  .photo-col > .pcol-media { min-height: 520px; overflow: visible; contain: size; }
  /* Full height up to 1,600px, where a 3:4 photo still covers a 600px column
     cleanly. Past that (the 3,000px FAQ) it would blow the photo up 5x, so it
     caps at 1,600px and rides along sticky; the column reads as photograph at
     every scroll position and the photo bottoms out with the section. */
  .photo-col > .pcol-media img { position: sticky; top: 0; height: min(100%, max(100vh, 1600px)); }
  .photo-col > .pcol-media::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 6px; background: var(--red); }
  .photo-col--right > .pcol-media::after { right: auto; left: 0; }
  .photo-col > .container { max-width: none; width: 100%; margin: 0; padding: 92px max(24px, calc((100vw - var(--maxw)) / 2 + 24px)) 92px 64px; }
  .photo-col--right > .container { padding: 92px 64px 92px max(24px, calc((100vw - var(--maxw)) / 2 + 24px)); }
  .photo-col .section-head { margin-bottom: 36px; }
  .photo-col .section-head h2 { font-size: clamp(1.7rem, 2.4vw, 2.15rem); }
  /* Question-beside-answer needs the full page width; in the column the question
     stacks above its answer, as it already does below 1081px. */
  .photo-col .qa-grid { grid-template-columns: 1fr; gap: 20px; }
  .photo-col .card-grid,
  .photo-col .step-grid,
  .photo-col .step-grid.step-grid--3,
  .photo-col .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .photo-col .card-grid > :last-child:nth-child(odd),
  .photo-col .step-grid > :last-child:nth-child(odd),
  .photo-col .spec-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 1080px) {
  .section.photo-col { padding-top: 0; }
  .photo-col > .pcol-media { aspect-ratio: 16 / 10; max-height: 460px; margin-bottom: 56px; }
}
@media (max-width: 700px) {
  .photo-col > .pcol-media { margin-bottom: 44px; }
}

/* ===== Unit page template (Oct 13 2026, S417) =====
   The Lavatory pattern Edison asked for on the Oct 13 call: one page per unit,
   a big photo of THAT unit with a photo column beside it, then standard features
   + a spec table + quote/call, then a gallery of the same unit type on real jobs.
   Every image comes from photo-ledger/LEDGER.tsv rows identified as this unit
   (feedback-every-photo-identified-relevant-actual). A spec value we have not
   sourced stays a .spec-slot "Confirmed with the yard", never a guess. */
.hero--ada {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-ada.webp");
  background-position: center, center 60%;
}
.unit-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.unit-grid--single { grid-template-columns: minmax(0, 1fr); max-width: 880px; }
.unit-main, .unit-side figure { margin: 0; min-width: 0; }
.unit-main .u-frame, .unit-side .u-frame, .unit-gallery .u-frame {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius);
  box-shadow: var(--shadow-card); background: var(--white);
}
.unit-main .u-frame { position: relative; }
.unit-main .u-frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--red); }
.u-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.unit-side { display: grid; gap: 24px; }
.unit-main figcaption, .unit-side figcaption, .unit-gallery figcaption {
  font-size: 0.85rem; color: var(--slate); padding: 10px 4px 0; line-height: 1.45; text-wrap: pretty;
}
.unit-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; margin-top: 56px; align-items: start; }
.unit-detail h3 { font-size: 1.3rem; margin-bottom: 16px; text-wrap: balance; }
.check-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.check-list li {
  position: relative; padding: 11px 0 11px 30px; border-bottom: 1px solid var(--line);
  color: var(--ink); font-size: 0.97rem; line-height: 1.5; text-wrap: pretty;
}
.check-list li::before {
  content: ""; position: absolute; left: 2px; top: 17px; width: 12px; height: 7px;
  border-left: 2.5px solid var(--red); border-bottom: 2.5px solid var(--red); transform: rotate(-45deg);
}
.spec-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.spec-table th, .spec-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 0.95rem; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table th { width: 42%; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); background: var(--mist); }
.spec-table td { color: var(--ink); font-variant-numeric: tabular-nums; }
.spec-foot { font-size: 0.85rem; color: var(--slate); margin-top: 12px; text-wrap: pretty; }
.unit-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.unit-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.unit-gallery figure { margin: 0; min-width: 0; }
@media (max-width: 900px) {
  .unit-grid { grid-template-columns: 1fr; }
  .unit-side { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .unit-detail { grid-template-columns: 1fr; gap: 40px; margin-top: 44px; }
  .unit-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 560px) {
  .unit-side { grid-template-columns: 1fr; }
  .unit-gallery { grid-template-columns: 1fr; }
  .spec-table th { width: 46%; }
  .spec-table th, .spec-table td { padding: 11px 12px; }
}

/* ===== Services mega menu (Oct 13 2026, S417) =====
   Edison, Oct 13 call: each trailer listed by type in the menu (The Lavatory
   pattern). Three groups in the existing Services disclosure so the bar does
   not get wider: Restroom Trailers · Portable Restrooms · All Rentals. */
@media (min-width: 1081px) {
  .nav-menu.nav-menu--mega { flex-direction: row; min-width: 0; width: max-content; padding: 10px; }
  .nav-menu--mega .nm-col { display: flex; flex-direction: column; min-width: 196px; }
  .nav-menu--mega .nm-col + .nm-col { border-left: 1px solid var(--line); margin-left: 6px; padding-left: 6px; }
  .site-header .main-nav .nav-menu--mega a.nm-head {
    font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--red-deep); padding: 8px 14px 10px; margin-bottom: 4px;
    border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0;
  }
  .site-header .main-nav .nav-menu--mega a.nm-head:hover { background: var(--mist); }
  .nav-menu--mega .nm-sub {
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--red-deep); padding: 12px 14px 4px; margin-top: 6px; border-top: 1px solid var(--line);
  }
}
@media (max-width: 1080px) {
  body.nav-open .main-nav .nav-menu--mega { gap: 10px; }
  body.nav-open .main-nav .nav-menu--mega .nm-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  body.nav-open .site-header .main-nav .nav-menu--mega a { min-height: 42px; font-size: 0.95rem; line-height: 1.25; }
  body.nav-open .site-header .main-nav .nav-menu--mega a.nm-head {
    grid-column: 1 / -1; min-height: 40px; color: var(--red-soft);
    font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  }
  body.nav-open .main-nav .nav-menu--mega .nm-sub {
    grid-column: 1 / -1; padding: 10px 0 2px; color: var(--red-soft);
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  }
}

/* ── Headings fit in two lines at 1440 and 390 (HARD rule, Oct 18 every-page pass) ──
   1. The hero H1 beside the quote form no longer caps itself at 18ch; the column sets the measure.
   2. FAQ/guide questions are verbatim customer questions (kuchikomi), so the column widens
      and the type steps down instead of the wording changing.
   3. Phone: section, CTA and hero headings step down one size so a 50-60 character
      line breaks in two, not three. */
.hero-split-copy h1 { max-width: none; }
/* Desktop only: unscoped, this beat the 1080px single-column rule and pushed phones sideways. */
@media (min-width: 1081px) { .qa-grid { grid-template-columns: 380px 1fr; } }
.qa-q h2, .qa-q h3 { font-size: clamp(1.25rem, 1.9vw, 1.55rem); }
@media (max-width: 600px) {
  .hero h1 { font-size: 2.05rem; }
  .section-head h2, .split-copy h2, .cta-band h2 { font-size: 1.55rem; }
  .photo-col .section-head h2 { font-size: 1.55rem; }
}

/* Yard cards: third-party city photo credits (CC BY needs a visible credit) */
.photo-credits { margin-top: 18px; font-size: 0.76rem; color: var(--slate); }
.photo-credits a { color: inherit; text-decoration: underline; }

/* City heroes carry the same landmark as their yard card (Oct 19); CC BY needs the credit. */
.hero-credit { position: absolute; right: 16px; bottom: 10px; z-index: 2; margin: 0; font-size: 0.68rem; color: rgba(255, 255, 255, 0.62); }
.hero-credit a { color: inherit; text-decoration: underline; }
/* Phones: the stat strip wraps to two-line labels and a long credit wraps too, so the absolute line ran over them. In flow instead, under the strip. */
@media (max-width: 700px) { .hero-credit { position: static; padding: 2px 24px 16px; text-align: left; line-height: 1.45; } }

/* --- Rebuild city pages (Oct 20 2026, migration sheet): two lane heroes, both our own equipment.
   Buttonwillow ranks on its restroom-trailer URL: his 9 station trailer (ledger, unit-9st-main).
   Kettleman City ranks on its fence URL: our chain-link run with privacy screen (ledger L052). --- */
/* Oct 21 2026: landmark photo, see photo ledger. The Buttonwillow city sign. */
.hero--city.c-buttonwillow {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-buttonwillow-sign.webp");
  background-position: center, 50% 45%;
}
/* Oct 21 2026: landmark photo, see photo ledger. Kings County Courthouse, Hanford. */
.hero--city.c-kettleman {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-kings-county-courthouse.webp");
  background-position: center, 50% 45%;
}

/* ===== /gallery/ (Oct 20 2026) — filterable, every frame a ledger-matched photo of our own equipment.
   Uniform 4:3 frames, object-fit cover, so mixed portrait/landscape sources tile cleanly. ===== */
.gal-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.gal-filter {
  font: inherit; font-weight: 600; font-size: 0.92rem; cursor: pointer;
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); min-height: 42px;
}
.gal-filter:hover { border-color: var(--red); }
.gal-filter[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.gal-count { font-size: 0.9rem; color: #5b5f66; margin: 0 0 22px; }
.gal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gal-item { margin: 0; }
.gal-item[hidden] { display: none; }
.gal-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius); overflow: hidden; }
.gal-open img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; transition: transform .35s ease; }
.gal-open:hover img { transform: scale(1.03); }
.gal-item figcaption { font-size: 0.9rem; font-weight: 600; margin-top: 8px; color: var(--ink); }
.gal-note { margin-top: 34px; }
.gal-box { border: 0; padding: 0; background: transparent; max-width: min(1100px, 94vw); }
.gal-box::backdrop { background: rgba(10, 11, 13, 0.86); }
.gal-box img { display: block; max-width: 100%; max-height: 80vh; height: auto; margin: 0 auto; border-radius: var(--radius); }
.gal-box-cap { color: #fff; text-align: center; margin: 12px 0 0; font-weight: 600; }
.gal-close { position: absolute; top: 6px; right: 8px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 1.6rem; cursor: pointer; }
@media (max-width: 900px) { .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 520px) { .gal-filter { font-size: 0.85rem; padding: 8px 12px; } .gal-item figcaption { font-size: 0.82rem; } }

/* ===== /spotlight/ (Oct 20 2026) — job and event stories. Template until Edison names the first one. ===== */
.spot-card { display: block; color: inherit; text-decoration: none; }
.spot-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); margin-bottom: 14px; }
.spot-card h3 { margin: 6px 0 8px; }
.spot-quote { margin: 0 auto; max-width: 760px; padding: 28px 32px; border-left: 4px solid var(--red); background: var(--mist); border-radius: 0 var(--radius) var(--radius) 0; }
.spot-quote p { font-size: 1.25rem; line-height: 1.5; margin: 0 0 12px; }
.spot-quote cite { font-style: normal; font-weight: 600; }
/* The stat strip is styled for the dark hero; on the light facts band it needs dark ink. */
.spot-facts .stat b { font-size: 1.1rem; color: var(--ink); }
.spot-facts .stat span { color: var(--slate); }
.hero .spec-slot { color: #fff; background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.45); }

/* Portable restrooms lineup: four linked unit tiles (Edison, Oct 20 call: "make the tiles clickable").
   Four cards lay out 2 x 2 by the sitewide rule above; no column override here. */
.photo-card a.pc-photo { display: block; }
.photo-card .pc-body h3 a { color: inherit; text-decoration: none; }
.photo-card .pc-body h3 a:hover { color: var(--red-deep); }

/* ===== BEGIN landmark heroes, new classes (Oct 21 2026) ===== */
/* Each of these pages used to inherit another city's hero rule; each now has its own class and its own landmark. */
/* Tulare water tower */
.hero--city.c-tulare {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-tulare-water-tower.webp");
  background-position: center, 47% 40%;
}
/* San Luis Reservoir, near Los Banos */
.hero--city.c-los-banos {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-los-banos-reservoir.webp");
  background-position: center, 50% 50%;
}
/* The Historic Ripon arch */
.hero--city.c-ripon {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-ripon-arch.webp");
  background-position: center, 45% 35%;
}
/* Old-vine Zinfandel rows in Lodi, San Joaquin County */
.hero--city.c-manteca {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-san-joaquin-county-vines.webp");
  background-position: center, 50% 50%;
}
/* The Fresno County Blossom Trail */
.hero--city.c-san-joaquin {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-fresno-county-blossom-trail.webp");
  background-position: center, 50% 50%;
}
/* Kings County Courthouse, Hanford */
.hero--city.c-el-rancho {
  background-image:
    linear-gradient(178deg, rgba(16, 17, 21, 0.92) 0%, rgba(23, 25, 30, 0.8) 48%, rgba(16, 17, 21, 0.92) 100%),
    url("/assets/img/hero-kings-county-courthouse.webp");
  background-position: center, 50% 45%;
}
/* ===== END landmark heroes, new classes ===== */

/* optional-field marker (Nov 3 2026) */
.form-field label .opt{font-weight:400;opacity:.7;font-size:.85em}

/* Service-type chips (Nov 3 2026, Edison call: pick-all-that-apply like the old form) */
.chips-field { border: 0; margin: 0; padding: 0; }
.chips-field legend { font-size: 0.8rem; font-weight: 700; color: var(--ink); padding: 0; margin-bottom: 8px; }
.svc-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.svc-chip { position: relative; cursor: pointer; }
.form-field .svc-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; pointer-events: none; }
.svc-chip span {
  display: flex; align-items: center; justify-content: center; gap: 5px; text-align: center; white-space: nowrap;
  font-size: 0.86rem; font-weight: 600; line-height: 1.2; color: var(--ink);
  background: var(--white); border: 1px solid #c9c4bc; border-radius: 999px;
  padding: 9px 14px; transition: background .15s, border-color .15s, color .15s;
}
.svc-chip:hover span { border-color: var(--red); }
.svc-chip input:checked + span { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }
.svc-chip input:checked + span::before { content: "\2713"; font-weight: 700; }
.svc-chip input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.form-field .chip-other { display: none; margin-top: 10px; }
.chips-field:has(input[value="Other"]:checked) .chip-other { display: block; }
@media (max-width: 480px) {
  .svc-chips { gap: 6px; }
  .svc-chip span { font-size: 0.78rem; padding: 9px 6px; gap: 3px; }
}

/* Three-step quote form (Nov 3 2026). Without JS every step shows and only Send appears. */
.fstep-nav { display: none; list-style: none; margin: 0 0 16px; padding: 0; gap: 6px; }
.fstep-nav li { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 700; color: var(--slate); padding-bottom: 8px; border-bottom: 3px solid var(--line); white-space: nowrap; }
.fstep-nav li span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--line); color: var(--ink); font-size: 0.7rem; flex: none; }
.fstep-nav li.is-active { color: var(--ink); border-bottom-color: var(--red); }
.fstep-nav li.is-active span, .fstep-nav li.is-done span { background: var(--red-deep); color: #fff; }
.fstep-nav li.is-done { border-bottom-color: var(--red-deep); }
.form-step + .form-step { margin-top: 14px; }
.fstep-actions { display: flex; gap: 10px; margin-top: 16px; }
.fstep-actions .btn { flex: 1; }
.fstep-actions .fstep-back, .fstep-actions .fstep-next { display: none; }
form.is-stepped .fstep-nav { display: flex; }
form.is-stepped .form-step + .form-step { margin-top: 0; }
form.is-stepped .form-step[hidden] { display: none; }
form.is-stepped .fstep-next:not([hidden]) { display: inline-flex; }
form.is-stepped .fstep-back:not([hidden]) { display: inline-flex; flex: 0 0 auto; padding-left: 22px; padding-right: 22px; }
form.is-stepped .fstep-send[hidden] { display: none; }
@media (max-width: 480px) { .fstep-nav li { font-size: 0.68rem; gap: 4px; } }
.hero-form .fstep-actions .btn { width: auto; margin-top: 0; }
.hero-form .fstep-actions .fstep-next, .hero-form .fstep-actions .fstep-send { flex: 1 1 auto; }

/* Construction partners band (Edison, Nov 4 2026). Name badges until logo files arrive. */
.partners-band { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 56px 0; }
.partners-head { max-width: 760px; margin: 0 auto 32px; text-align: center; }
.partners-head h2 { margin: 6px 0 10px; text-wrap: balance; }
.partners-head p:last-child { color: var(--slate); text-wrap: pretty; margin: 0; }
.partners-head .eyebrow { justify-content: center; }
.partners-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.partners-city-name { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red-deep); margin: 0 0 10px; text-align: center; }
.partners-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.partner {
  display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fbfaf8;
  font-family: var(--font-display, inherit); font-weight: 700; font-size: 0.92rem; line-height: 1.25;
  color: var(--ink); text-align: center; text-wrap: balance;
}
.partners-list--row { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; margin: 0 auto; }
@media (max-width: 900px) { .partners-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .partners-band { padding: 40px 0; }
  .partners-grid { grid-template-columns: 1fr; gap: 18px; }
  .partners-list--row { grid-template-columns: 1fr; }
  .partner { min-height: 52px; }
}
@media (max-width: 560px) {
  .partners-head h2 { font-size: 1.32rem; }
  .partners-head { margin-bottom: 22px; }
  .partners-list, .partners-list--row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .partner { min-height: 0; padding: 8px 12px; font-size: 0.8rem; border-radius: 999px; }
  .partners-city-name { margin-bottom: 8px; }
}
.partners-band--banner .partners-head { margin-bottom: 0; }

/* Homepage banner v2 (Nov 4 2026): text left, 4x3 partner logo wall right (one column per city). */
.partners-band--banner { padding: 40px 0; }
.partners-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.partners-band--banner .partners-head { text-align: left; margin: 0; max-width: none; }
.partners-band--banner .partners-head .eyebrow { justify-content: flex-start; }
.logo-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, 72px); grid-auto-flow: column; gap: 10px; }
.logo-tile { display: flex; align-items: center; justify-content: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #fbfaf8; opacity: 0.62; filter: grayscale(1); transition: opacity .2s, filter .2s; min-width: 0; }
.logo-tile:hover { opacity: 1; filter: none; }
.logo-tile img { max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain; }
.logo-word { font-family: var(--font-display); font-weight: 800; font-size: 0.74rem; line-height: 1.15; text-align: center; color: var(--ink); text-transform: uppercase; letter-spacing: 0.02em; text-wrap: balance; }
@media (max-width: 900px) {
  .partners-split { grid-template-columns: 1fr; gap: 24px; }
  .partners-band--banner .partners-head { text-align: center; }
  .partners-band--banner .partners-head .eyebrow { justify-content: center; }
}
@media (max-width: 560px) {
  .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, 60px); gap: 8px; }
  .logo-word { font-size: 0.62rem; }
  .logo-tile img { max-height: 40px; }
}
.logo-wall--row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 88px; grid-auto-flow: row; max-width: 820px; margin: 0 auto; }
.logo-wall--row .logo-tile { opacity: 1; filter: none; background: var(--white); }
.logo-wall--row .logo-tile img { max-height: 60px; }
@media (max-width: 560px) { .logo-wall--row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 70px; } }
.logo-tile img { mix-blend-mode: multiply; }
.logo-wall--row .logo-tile img { max-width: 78%; }

/* ALERT-TICKER (Nov 4 2026): emergency band scrolls as one line instead of wrapping.
   Track = 4 identical items; animating -50% moves exactly 2 items, so the loop is seamless. */
.alert-band--ticker { overflow: hidden; }
.alert-ticker { overflow: hidden; padding: 13px 0; }
.alert-track { display: flex; width: max-content; animation: alert-scroll 44s linear infinite; }
.alert-band--ticker .alert-item { margin: 0; padding-right: 72px; white-space: nowrap; font-size: .98rem; letter-spacing: .01em; }
.alert-band--ticker .alert-icon { margin-right: 6px; }
.alert-band--ticker:hover .alert-track, .alert-band--ticker:focus-within .alert-track { animation-play-state: paused; }
@keyframes alert-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .alert-track { animation: none; width: auto; justify-content: center; }
  .alert-band--ticker .alert-item { white-space: normal; text-align: center; padding: 0 20px; }
  .alert-band--ticker .alert-item[aria-hidden="true"] { display: none; }
}

/* STAT-CENTER (Nov 4 2026, Bashō): the three hero stats above the emergency ticker sit centered.
   Phone: 2 columns, so the odd last stat spans both and centers under them. */
.hero .stat-strip > .stat { text-align: center; }
@media (max-width: 700px) {
  .hero .stat-strip > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* MOBILE-CENTER (Nov 4 2026, Bashō): on phones, intro text sits centered site-wide:
   hero eyebrow/H1/lede/CTAs, every section head (eyebrow + H2 + lead), split-section heads,
   and the big chip rows. Reading content (cards, spec rows, checklists, FAQ, forms, footer) stays left. */
@media (max-width: 700px) {
  .hero-split-copy { text-align: center; }
  .hero-split-copy .eyebrow { justify-content: center; }
  .hero-split-copy .hero-ctas { justify-content: center; }
  .section-head { text-align: center; margin-left: auto; margin-right: auto; }
  .section-head .eyebrow { justify-content: center; }
  .split-copy > .eyebrow { display: flex; justify-content: center; }
  .split-copy > h2, .split-copy > h2 + p { text-align: center; }
  .chips-lg { justify-content: center; }
  .split-copy > .chips-lg + p { text-align: center; }
  .review-hero { justify-content: center; text-align: center; column-gap: 18px; }
  .rh-sub { flex-basis: 100%; max-width: none; }
  .hero-inner > .crumb, .hero-inner > .eyebrow, .hero-inner > h1, .hero-inner > .lede { text-align: center; }
  .hero-inner > .eyebrow, .container > .eyebrow { display: flex; justify-content: center; }
  .hero-inner > .hero-ctas, .container > .chips { justify-content: center; }
  .container > .table-caption, .container > .lineup-link { text-align: center; display: block; }
  .post-lane > h2, .post-lane > .lane-sub { text-align: center; }
}