/* =============================================================================
   HCC — HENDERSON CLEAN & CLEAR
   Work-Truck Utility design system
   Implements DESIGN.md. Single stylesheet by design: one render-blocking
   request beats three. Sections are banner-delimited for handoff.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   [ 00 ] FONTS — self-hosted, zero third-party requests
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/jetbrainsmono-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
}

/* -----------------------------------------------------------------------------
   [ 01 ] TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Substrate */
  --paper:        #EAE8E3;
  --paper-2:      #F4F4F0;
  --carbon:       #111111;
  --carbon-deep:  #050505;
  --steel:        #6B6760;
  --steel-inv:    #98948D;   /* the same muted role, on carbon surfaces */
  --rule:         #111111;

  /* Hi-vis system */
  --hivis:        #F5C400;
  --hivis-deep:   #D9AD00;
  --hazard:       #E61919;
  --hazard-ink:   #A50E0E;

  /* Type */
  --macro: 'Archivo', 'Arial Narrow', Helvetica, sans-serif;
  --micro: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  /* Space — 4px base, 8px rhythm */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;
  --s9: 96px;  --s10: 128px; --s11: 192px;

  --section-y: clamp(64px, 9vw, 128px);
  --gutter:    clamp(20px, 4vw, 48px);
  --container: 1400px;
  --measure:   68ch;

  /* Motion */
  --t-micro: 120ms;
  --t-std:   180ms;
  --ease:    cubic-bezier(0.2, 0, 0, 1);
}

/* -----------------------------------------------------------------------------
   [ 02 ] RESET + BASE
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0;          /* DESIGN.md §4.1 — literal and global */
  margin: 0;
  padding: 0;
}

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

body {
  background: var(--paper);
  color: var(--carbon);
  font-family: var(--macro);
  font-size: 1.0625rem;      /* 17px — DESIGN.md §3.1 */
  font-weight: 400;
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--hivis);
  color: var(--carbon);
}

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

/* Yellow focus ring is invisible on paper — swap to carbon on light surfaces */
.on-paper :focus-visible,
main :focus-visible {
  outline-color: var(--carbon);
}

.on-carbon :focus-visible {
  outline-color: var(--hivis);
}

/* Skip link */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--carbon-deep);
  color: var(--hivis);
  font-family: var(--micro);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--s4) var(--s5);
}

.skip:focus {
  left: 0;
}

/* -----------------------------------------------------------------------------
   [ 03 ] TYPOGRAPHY
   -------------------------------------------------------------------------- */

.d-xl,
.d-l,
h1, h2, h3 {
  font-family: var(--macro);
  text-transform: uppercase;
  text-wrap: balance;
}

.d-xl {
  font-size: clamp(3.25rem, 11vw, 9rem);
  font-weight: 800;
  font-stretch: 78%;
  letter-spacing: -0.035em;
  line-height: 0.86;
}

.d-l,
h2 {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  font-weight: 800;
  font-stretch: 82%;
  letter-spacing: -0.03em;
  line-height: 0.9;
}

h3,
.h3 {
  font-size: clamp(1.625rem, 3.6vw, 2.5rem);
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: -0.02em;
  line-height: 0.98;
}

h4,
.h4 {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-transform: none;
}

p {
  max-width: var(--measure);
}

.lede {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.5;
  max-width: 56ch;
}

/* Micro / telemetry */
.meta {
  font-family: var(--micro);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
}

.label {
  font-family: var(--micro);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
}

.data {
  font-family: var(--micro);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.fine {
  font-family: var(--micro);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--steel);
}

.tnum { font-variant-numeric: tabular-nums; }
.steel { color: var(--steel); }
.hz { color: var(--hazard-ink); }

/* Pending-confirmation token — DESIGN.md §8.2 */
.pending {
  font-family: var(--micro);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hazard-ink);
  border: 1px dashed var(--hazard-ink);
  padding: 2px 6px;
  display: inline-block;
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   [ 04 ] LAYOUT
   -------------------------------------------------------------------------- */

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

.wrap-wide {
  width: 100%;
  max-width: 1760px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section {
  padding-block: var(--section-y);
  position: relative;
}

.section-tight { padding-block: clamp(40px, 6vw, 72px); }

.rule       { border-top: 2px solid var(--rule); }
.rule-thin  { border-top: 1px solid var(--rule); }

/* Hairline compartment grid — DESIGN.md §4.3 */
.grid-hair {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.grid-hair > * {
  background: var(--paper);
  padding: var(--s5);
}

.grid-hair.on-2 { background: var(--rule); }
.grid-hair.on-2 > * { background: var(--paper-2); }

/* Column helpers (mobile-first: everything is 1-up until it isn't) */
.cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }

/* A .grid-hair paints its dividers by showing a carbon backdrop through 1px
   gaps. Any cell the children don't fill therefore renders as a solid black
   rectangle — e.g. 3 cards in a 2-column layout. Make a trailing orphan span
   the remaining columns so the row always closes. */
@media (min-width: 768px) and (max-width: 1199px) {
  .grid-hair.cols-3 > :last-child:nth-child(odd),
  .grid-hair.cols-4 > :last-child:nth-child(odd) { grid-column: span 2; }
}

@media (min-width: 1200px) {
  .grid-hair.cols-3 > :last-child:nth-child(3n + 1) { grid-column: span 3; }
  .grid-hair.cols-3 > :last-child:nth-child(3n + 2) { grid-column: span 2; }
  .grid-hair.cols-4 > :last-child:nth-child(4n + 1) { grid-column: span 4; }
  .grid-hair.cols-4 > :last-child:nth-child(4n + 2) { grid-column: span 3; }
  .grid-hair.cols-4 > :last-child:nth-child(4n + 3) { grid-column: span 2; }
}

/* Same hazard on the 20-town area list: 20 items across 3 columns leaves one. */
@media (min-width: 480px) and (max-width: 899px) {
  .areas > li:last-child:nth-child(3n + 2) { grid-column: span 2; }
  .areas > li:last-child:nth-child(3n + 1) { grid-column: span 3; }
}

@media (min-width: 1200px) {
  .areas > li:last-child:nth-child(5n + 1) { grid-column: span 5; }
  .areas > li:last-child:nth-child(5n + 2) { grid-column: span 4; }
  .areas > li:last-child:nth-child(5n + 3) { grid-column: span 3; }
  .areas > li:last-child:nth-child(5n + 4) { grid-column: span 2; }
}

/* -----------------------------------------------------------------------------
   [ 05 ] SIGNATURE — SAFETY STRIPE (DESIGN.md §5.1)
   The one permitted gradient function: hard stops only, never a blend.
   -------------------------------------------------------------------------- */

.stripe {
  height: 14px;
  width: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--hivis) 0,
    var(--hivis) 16px,
    var(--carbon-deep) 16px,
    var(--carbon-deep) 32px
  );
}

.stripe-thin { height: 8px; }

/* -----------------------------------------------------------------------------
   [ 06 ] SIGNATURE — JOB-TICKET HEADER (DESIGN.md §5.2)
   [ 02 ] ─── SERVICES ──────────────── ATHENS, TX
   -------------------------------------------------------------------------- */

.ticket {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  margin-bottom: var(--s6);
  font-family: var(--micro);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--carbon);
}

.ticket__num {
  background: var(--carbon-deep);
  color: var(--hivis);
  padding: 4px 8px;
  flex: none;
}

.ticket__name { flex: none; }

.ticket__fill {
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
  min-width: var(--s5);
}

.ticket__unit {
  flex: none;
  color: var(--steel);
}

/* -----------------------------------------------------------------------------
   [ 07 ] BUTTONS (DESIGN.md §5.5)
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--micro);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 28px;
  min-height: 56px;
  border: 2px solid var(--carbon);
  background: transparent;
  color: var(--carbon);
  cursor: pointer;
  transition: background var(--t-micro) var(--ease),
              color var(--t-micro) var(--ease),
              transform var(--t-micro) var(--ease);
}

.btn--primary {
  background: var(--hivis);
  color: var(--carbon);
}

.btn--primary:hover { background: var(--hivis-deep); }

.btn--secondary:hover {
  background: var(--carbon);
  color: var(--paper);
}

.btn:active { transform: translateY(1px); }

.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

.ghost {
  font-family: var(--micro);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--carbon);
  padding-bottom: 3px;
  display: inline-flex;
  gap: var(--s2);
  transition: gap var(--t-micro) var(--ease);
}

.ghost:hover { gap: var(--s3); }

/* -----------------------------------------------------------------------------
   [ 08 ] HEADER + NAV
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 2px solid var(--rule);
}

.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  flex: none;
}

.brand__mark {
  width: 38px;
  height: 38px;
  background: var(--carbon-deep);
  color: var(--hivis);
  display: grid;
  place-items: center;
  font-family: var(--micro);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: none;
}

.brand__name {
  font-family: var(--macro);
  font-size: 1.0625rem;
  font-weight: 800;
  font-stretch: 82%;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1;
}

.brand__sub {
  font-family: var(--micro);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  line-height: 1.4;
}

.nav { display: none; }

.nav a {
  font-family: var(--micro);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--s2) 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-micro) var(--ease);
}

.nav a:hover,
.nav a[aria-current='page'] { border-bottom-color: var(--hivis); }

.masthead__cta { display: none; }

/* Mobile menu toggle */
.burger {
  width: 48px;
  height: 48px;
  border: 2px solid var(--carbon);
  background: transparent;
  display: grid;
  place-items: center;
  gap: 4px;
  cursor: pointer;
  flex: none;
}

.burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--carbon);
  transition: transform var(--t-std) var(--ease),
              opacity var(--t-micro) var(--ease);
}

.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  display: none;
  border-top: 2px solid var(--rule);
  background: var(--paper-2);
}

.mobile-nav[data-open='true'] { display: block; }

.mobile-nav a {
  display: block;
  padding: var(--s4) var(--gutter);
  border-bottom: 1px solid var(--rule);
  font-family: var(--micro);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.mobile-nav a[aria-current='page'] {
  background: var(--hivis);
}

/* -----------------------------------------------------------------------------
   [ 09 ] HERO
   -------------------------------------------------------------------------- */

.hero {
  padding-top: clamp(40px, 7vw, 88px);
  padding-bottom: 0;
}

.hero__stamp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-bottom: var(--s5);
}

.hero__stamp span {
  border: 1px solid var(--carbon);
  padding: 4px 8px;
}

.hero__title { margin-bottom: var(--s5); }

.hero__title em {
  font-style: normal;
  background: var(--hivis);
  padding-inline: 0.1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hero__lede { margin-bottom: var(--s6); }

.hero__cta { margin-bottom: var(--s7); }

.hero__media {
  position: relative;
  border: 2px solid var(--rule);
  background: var(--paper-2);
}

.hero__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* -----------------------------------------------------------------------------
   PHOTO SLOT — a designed, labelled placeholder.
   Random stock returns irrelevant images (a concert photo in an estate-cleanout
   slot), which reads worse on a client pitch than an honest empty frame. These
   slots state exactly which photograph belongs here, cost no network request,
   and drop out the moment Devin supplies real ones.
   -------------------------------------------------------------------------- */

.photo-slot {
  position: relative;
  border: 2px solid var(--rule);
  background-color: var(--paper-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 12L12 0' stroke='%23E2DFD8' stroke-width='1'/%3E%3C/svg%3E");
  aspect-ratio: 16 / 10;
  display: grid;
  place-content: center;
  gap: var(--s3);
  padding: var(--s6) var(--s5);
  text-align: center;
}

.photo-slot__mark {
  font-family: var(--micro);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--carbon);
  letter-spacing: 0.3em;
  line-height: 1;
}

.photo-slot__label {
  font-family: var(--micro);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--carbon);
  line-height: 1.5;
  max-width: 30ch;
}

.photo-slot__sub {
  font-family: var(--micro);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}

/* Corner registration ticks — DESIGN.md §4.4 */
.photo-slot::before,
.photo-slot::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--carbon);
}

.photo-slot::before {
  top: 8px; left: 8px;
  border-right: none; border-bottom: none;
}

.photo-slot::after {
  bottom: 8px; right: 8px;
  border-left: none; border-top: none;
}

/* Photo placeholder caption — DESIGN.md §6, deliberately visible */
.photo-note {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--carbon-deep);
  color: var(--hivis);
  font-family: var(--micro);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  max-width: 100%;
}

/* -----------------------------------------------------------------------------
   [ 10 ] STAT ROW
   -------------------------------------------------------------------------- */

.stats { grid-template-columns: repeat(2, 1fr); }

.stat__num {
  font-family: var(--micro);
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: var(--s2);
}

.stat__label {
  font-family: var(--micro);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
}

/* -----------------------------------------------------------------------------
   [ 11 ] SERVICE CARDS
   -------------------------------------------------------------------------- */

.svc {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  text-decoration: none;
  position: relative;
  transition: background var(--t-std) var(--ease);
}

.svc:hover { background: var(--paper-2); }

.svc__idx {
  font-family: var(--micro);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--steel);
}

.svc__title {
  font-size: 1.375rem;
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  line-height: 1;
}

.svc__body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--carbon);
}

.svc__more {
  margin-top: auto;
  padding-top: var(--s3);
  font-family: var(--micro);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.svc:hover .svc__more { color: var(--hazard-ink); }

/* -----------------------------------------------------------------------------
   [ 12 ] SIGNATURE — LOAD-SIZE CHART (DESIGN.md §5.3)
   -------------------------------------------------------------------------- */

.loads { grid-template-columns: 1fr; }

.load {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.load__frac {
  font-family: var(--micro);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Flat trailer-fill diagram, pure CSS, no image request */
.load__diagram {
  border: 2px solid var(--carbon);
  height: clamp(72px, 9vw, 120px);
  display: flex;
  align-items: flex-end;
  padding: 3px;
  background-color: var(--paper-2);
  /* Deck slats, so an empty trailer still reads as a trailer rather than a bar.
     SVG rather than a gradient (DESIGN.md §2.4 allows exactly one gradient, the
     safety stripe), and drawn in --paper on --paper-2 so it stays in palette
     instead of introducing a gray. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Crect x='15' width='1' height='8' fill='%23EAE8E3'/%3E%3C/svg%3E");
}

.load__fill {
  background: var(--hivis);
  width: 100%;
  border-top: 2px solid var(--carbon);
}

.load__yd {
  font-family: var(--micro);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.load__eq {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--steel);
}

.load__price {
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
}

/* -----------------------------------------------------------------------------
   [ 12b ] REFUSAL STAMP — fills the negative space beside short headings
   -------------------------------------------------------------------------- */

.stamp {
  display: inline-block;
  border: 3px solid var(--hazard);
  color: var(--hazard-ink);
  padding: var(--s4) var(--s5);
  max-width: 22ch;
  margin-top: var(--s6);
}

.stamp__head {
  font-family: var(--micro);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: var(--s2);
}

.stamp__sub {
  font-family: var(--micro);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--carbon);
}

/* Registration crosshair — DESIGN.md §4.4 */
.crosshair {
  font-family: var(--micro);
  font-size: 0.6875rem;
  color: var(--steel);
  display: block;
  margin-top: var(--s5);
  letter-spacing: 0.4em;
}

/* -----------------------------------------------------------------------------
   [ 13 ] TAKE / DON'T TAKE LISTS
   -------------------------------------------------------------------------- */

.taglist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.taglist li {
  background: var(--paper);
  padding: var(--s3) var(--s4);
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  font-size: 0.9375rem;
}

.taglist li::before {
  font-family: var(--micro);
  font-size: 0.75rem;
  font-weight: 700;
  flex: none;
}

/* Latin-subset glyphs only — the self-hosted woff2 files carry no CJK or
   dingbat ranges, and anything outside them falls back to a system font. */
.taglist--yes li::before { content: '+'; color: var(--carbon); }
.taglist--no  li::before { content: '\00D7'; color: var(--hazard-ink); }

/* -----------------------------------------------------------------------------
   [ 14 ] PROCESS STEPS
   -------------------------------------------------------------------------- */

.step { display: flex; flex-direction: column; gap: var(--s3); }

.step__n {
  width: 44px;
  height: 44px;
  background: var(--carbon-deep);
  color: var(--hivis);
  display: grid;
  place-items: center;
  font-family: var(--micro);
  font-size: 1rem;
  font-weight: 700;
  flex: none;
}

/* -----------------------------------------------------------------------------
   [ 15 ] REVIEWS
   -------------------------------------------------------------------------- */

.review { display: flex; flex-direction: column; gap: var(--s3); }

.review__stars {
  font-family: var(--micro);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  color: var(--carbon);
}

.review__body {
  font-size: 1.0625rem;
  line-height: 1.55;
}

.review__by {
  font-family: var(--micro);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
  margin-top: auto;
  padding-top: var(--s3);
}

/* -----------------------------------------------------------------------------
   [ 16 ] AREA LIST
   -------------------------------------------------------------------------- */

.areas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  list-style: none;
}

.areas li { background: var(--paper); }

.areas a,
.areas span {
  display: block;
  padding: var(--s3) var(--s4);
  font-family: var(--micro);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--t-micro) var(--ease);
}

.areas a:hover { background: var(--hivis); }

/* -----------------------------------------------------------------------------
   [ 17 ] FORMS (DESIGN.md §5.6)
   -------------------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-bottom: var(--s5);
}

.field > label {
  font-family: var(--micro);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Text-entry controls only. Radios, checkboxes and the hidden file input must
   NOT inherit the 52px box treatment — they live inside .field too. */
.field input:not([type='radio']):not([type='checkbox']):not([type='file']),
.field select,
.field textarea {
  border: 2px solid var(--carbon);
  background: var(--paper-2);
  padding: 14px var(--s4);
  min-height: 52px;
  font-size: 1.0625rem;
  width: 100%;
  appearance: none;
}

.field textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.5;
}

/* Solid SVG triangle, not a gradient — DESIGN.md §2.4 permits exactly one
   gradient function on this site and it is the safety stripe. */
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23111111'/%3E%3C/svg%3E");
  background-position: calc(100% - 16px) center;
  background-size: 12px 8px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

.field__hint {
  font-family: var(--micro);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--steel);
}

.req { color: var(--hazard-ink); }

fieldset { border: none; }

.radio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.radio-grid label {
  background: var(--paper-2);
  padding: var(--s3) var(--s4);
  font-family: var(--micro);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s2);
  transition: background var(--t-micro) var(--ease);
}

.radio-grid input[type='radio'] {
  accent-color: var(--carbon);
  flex: none;
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  appearance: auto;
}

.radio-grid label:has(input:checked) { background: var(--hivis); }

.dropzone {
  border: 2px dashed var(--carbon);
  background: var(--paper-2);
  padding: var(--s6) var(--s4);
  text-align: center;
  cursor: pointer;
  transition: background var(--t-micro) var(--ease);
}

.dropzone:hover { background: var(--hivis); }

/* Callout / note block.
   Was a 4px hi-vis left border — which is the single most recognisable tell of
   generic AI UI and is banned by DESIGN.md §10. Rebuilt in the system's own
   language: a fully-ruled compartment with the heading stamped as a hi-vis
   surface, exactly like .ticket__num. Black on hi-vis is 11.6:1; hi-vis as a
   1-in-4 accent stripe was decoration, not signal. */
.form-note {
  border: 2px solid var(--carbon);
  background: var(--paper-2);
  padding: var(--s5);
  margin-bottom: var(--s6);
}

.form-note > .label:first-child {
  display: inline-block;
  background: var(--hivis);
  color: var(--carbon);
  padding: 5px 10px;
}

/* -----------------------------------------------------------------------------
   [ 18 ] FAQ
   -------------------------------------------------------------------------- */

.faq {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) 0;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-stretch: 92%;
  font-size: 1.0625rem;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '+';
  font-family: var(--micro);
  font-size: 1.25rem;
  font-weight: 700;
  flex: none;
  line-height: 1;
}

.faq[open] summary::after { content: '–'; }

.faq__body {
  padding-bottom: var(--s5);
  max-width: var(--measure);
}

/* -----------------------------------------------------------------------------
   [ 19 ] CTA BAND
   -------------------------------------------------------------------------- */

.band {
  background: var(--carbon-deep);
  color: var(--paper);
}

.band h2 { color: var(--paper); }

.band .btn--secondary {
  border-color: var(--paper);
  color: var(--paper);
}

.band .btn--secondary:hover {
  background: var(--paper);
  color: var(--carbon);
}

.band .steel { color: #A8A49B; }

/* -----------------------------------------------------------------------------
   [ 20 ] FOOTER
   -------------------------------------------------------------------------- */

.foot {
  background: var(--carbon-deep);
  color: var(--paper);
  padding-block: var(--s8) var(--s6);
}

.foot a { color: var(--paper); }

.foot a:hover { color: var(--hivis); }

.foot__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  margin-bottom: var(--s7);
}

.foot__h {
  font-family: var(--micro);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hivis);
  margin-bottom: var(--s3);
}

.foot ul { list-style: none; display: flex; flex-direction: column; gap: var(--s2); }

.foot__bottom {
  border-top: 1px solid #2A2A2A;
  padding-top: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.foot__bottom .fine { color: #8A867D; }

/* -----------------------------------------------------------------------------
   [ 21 ] STICKY CALL BAR (DESIGN.md §5.4) — mobile only
   -------------------------------------------------------------------------- */

.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 3fr 2fr;
  background: var(--carbon-deep);
  border-top: 2px solid var(--hivis);
  padding-bottom: env(safe-area-inset-bottom);
}

.callbar a {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--micro);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hivis);
}

.callbar a + a {
  border-left: 2px solid var(--hivis);
  background: var(--hivis);
  color: var(--carbon);
}

body { padding-bottom: 58px; }   /* reserve space so the bar never occludes */

/* -----------------------------------------------------------------------------
   [ 22 ] MOTION (DESIGN.md §7)
   -------------------------------------------------------------------------- */

/* Scoped to .js — set by an inline script in <head>. Without JavaScript the
   content is simply visible. Never let a decorative transition be the reason
   a page renders empty. */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-std) var(--ease),
              transform var(--t-std) var(--ease);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* A .grid-hair draws its own dividers with a carbon backdrop, so fading its
   children individually flashes black cells. Reveal such blocks whole. */
.js .grid-hair > .reveal { opacity: 1; transform: none; }

/* -----------------------------------------------------------------------------
   [ 23 ] BREAKPOINTS (DESIGN.md §9) — mobile-first, authored up
   -------------------------------------------------------------------------- */

@media (min-width: 480px) {
  .loads { grid-template-columns: repeat(2, 1fr); }
  .areas { grid-template-columns: repeat(3, 1fr); }
  .foot__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

@media (min-width: 768px) {
  .cols-2 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .stats  { grid-template-columns: repeat(4, 1fr); }
  .grid-hair > * { padding: var(--s6); }
  .radio-grid { grid-template-columns: repeat(4, 1fr); }
  .foot__grid { grid-template-columns: repeat(2, 1fr); }
  .split {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--s7);
    align-items: start;
  }
  .split--flip { grid-template-columns: 5fr 7fr; }
}

@media (min-width: 900px) {
  .nav {
    display: flex;
    gap: var(--s5);
    align-items: center;
  }
  .masthead__cta { display: inline-flex; }
  .burger { display: none; }
  .mobile-nav { display: none !important; }
  .callbar { display: none; }
  body { padding-bottom: 0; }
  .areas { grid-template-columns: repeat(4, 1fr); }
  .loads { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1200px) {
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
  .cols-4 { grid-template-columns: repeat(4, 1fr); }
  .foot__grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; }
  .areas { grid-template-columns: repeat(5, 1fr); }
}

/* -----------------------------------------------------------------------------
   [ 24 ] REDUCED MOTION + PRINT
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .masthead, .callbar, .mobile-nav, .stripe { display: none; }
  body { background: #fff; padding-bottom: 0; }
  .js .reveal { opacity: 1; transform: none; }
}

/* -----------------------------------------------------------------------------
   [ 25 ] LAUNCH COMPONENTS (added 2026-08-24)
   Every rule below obeys DESIGN.md: zero radius, zero shadow, zero gradient
   except the sanctioned hard-stop safety stripe, rules always full carbon.
   -------------------------------------------------------------------------- */

/* --- Sub-page hero: same substrate, less vertical drama than the home hero -- */
.hero--sub { padding-block: clamp(40px, 7vw, 88px) clamp(32px, 5vw, 64px); }
.hero--sub .hero__lede { margin-top: var(--s5); }
.hero--sub .d-l { margin-top: var(--s5); }

/* --- Prose: body copy blocks, measure-capped per DESIGN.md §3.1 ------------- */
.prose { max-width: 68ch; }
.prose > p + p { margin-top: var(--s4); }
.prose .fine { margin-top: var(--s5); }

/* --- Before / after pair (DESIGN.md §5.2 job-ticket logic applied to photos) -
   Two cells, one hairline between them, each stamped like a ticket field.      */
.pair { margin-top: var(--s7); }

.pair__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.pair__cell {
  position: relative;
  background: var(--paper);
  display: block;
  min-width: 0;
}

.pair__cell img {
  display: block;
  width: 100%;
  height: auto;
}

.pair__label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  font-family: var(--micro);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 12px;
  background: var(--carbon-deep);
  color: var(--hivis);
}

.pair__label--after {
  background: var(--hivis);
  color: var(--carbon-deep);
}

@media (min-width: 700px) {
  .pair__grid { grid-template-columns: 1fr 1fr; }
}

/* --- Single job photograph -------------------------------------------------- */
.shot { margin-top: var(--s7); border: 1px solid var(--rule); }
.shot img { display: block; width: 100%; height: auto; }

/* --- Service cards, compact variant ----------------------------------------- */
.svcs--sm .svc { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--s4); }
.svc--sm .svc__title { font-size: 1rem; }

/* --- Town facts: always 2x2, never an orphan cell --------------------------- */
.townfacts { grid-template-columns: repeat(2, 1fr); }
.townfacts .data { margin-top: var(--s2); word-break: break-word; }

/* --- Town list: one row per town, so the cell count can never orphan -------- */
.towns { grid-template-columns: 1fr; }

.townrow {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name arrow" "meta arrow";
  gap: var(--s2) var(--s4);
  align-items: center;
  text-decoration: none;
  transition: background var(--t-std) var(--ease);
}

.townrow:hover { background: var(--paper-2); }

.townrow__name {
  grid-area: name;
  font-family: var(--macro);
  font-weight: 700;
  font-size: 1.125rem;
  font-variation-settings: "wdth" 100;
  color: var(--carbon);
}

.townrow__meta {
  font-family: var(--micro);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--steel);
  font-variant-numeric: tabular-nums;
}

.townrow__badge:not(:empty) {
  font-family: var(--micro);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--hivis);
  color: var(--carbon-deep);
  padding: 3px 8px;
  justify-self: start;
}

.townrow .svc__more { grid-area: arrow; align-self: center; }

@media (min-width: 700px) {
  .townrow {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto auto;
    grid-template-areas: "name meta1 meta2 badge arrow";
    gap: var(--s4);
  }
  .townrow__meta:nth-of-type(1) { grid-area: meta1; }
  .townrow__meta:nth-of-type(2) { grid-area: meta2; }
  .townrow__badge { grid-area: badge; }
}

/* --- Gallery ---------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
}

.tile { border: 1px solid var(--rule); background: var(--paper-2); }
.tile img { display: block; width: 100%; height: auto; }
.tile .photo-note { padding: var(--s3) var(--s4); margin: 0; }

@media (min-width: 600px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(3, 1fr); } }

/* --- Quote form ------------------------------------------------------------- */
.quoteform { display: block; }
.quoteform .field + .field { margin-top: var(--s5); }
.quoteform button { margin-top: var(--s6); }

.quoteform select {
  width: 100%;
  font-family: var(--micro);
  font-size: 1rem;
  padding: var(--s3) var(--s4);
  background: var(--paper-2);
  color: var(--carbon);
  border: 2px solid var(--rule);
  appearance: none;
  background-image: none;
}

.quoteform select:focus-visible,
.quoteform input:focus-visible,
.quoteform textarea:focus-visible {
  outline: 3px solid var(--hivis);
  outline-offset: 2px;
}

/* Honeypot: off-screen for bots to fill, never announced to assistive tech. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Load chart: the price slot now carries a quote token, not a figure ----- */
.load__price {
  font-family: var(--micro);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--carbon-deep);
  background: var(--hivis);
  padding: 4px 8px;
  align-self: start;
  margin-top: var(--s3);
}

/* -----------------------------------------------------------------------------
   [ 26 ] PHOTOGRAPHY TREATMENT — DESIGN.md §6 treatment law
   One token drives every photograph on the site so the treatment can never
   drift between the hero, the before/after pairs and the gallery.

   2026-08-24: set to `none`. DESIGN.md §6 originally mandated a duotone
   reduction, and that was right when the photographs were five licensed
   stand-ins from unrelated sources -- desaturating made a mismatched set read
   as one system. Every photograph is now Devin's own, shot on one phone, so
   they already match, and greyscale was flattening the one thing a
   before/after depends on: seeing the mess, then seeing the cleared floor.
   Drew's call, 2026-08-24. Set this back to
   `grayscale(1) contrast(1.15)` to restore the duotone treatment.
   -------------------------------------------------------------------------- */
:root { --photo-filter: none; }

.hero__media img,
.pair__cell img,
.tile img,
.shot img { filter: var(--photo-filter); }

/* -----------------------------------------------------------------------------
   [ 27 ] MOBILE STACKING + DATA CELLS (fixes found in launch QA, 2026-08-24)
   -------------------------------------------------------------------------- */

/* .split only becomes a grid at >=768px. Below that its children are plain
   blocks with no margin, so a heading sat flush against the paragraph under
   it on every stacked split on the site. */
@media (max-width: 767px) {
  .split > * + * { margin-top: var(--s6); }
}

/* .data is the numeric display face (DESIGN.md §3.2 "Data / price"). County and
   status are words, not numerals — at 2.25rem "Henderson" overflowed a 390px
   cell and broke mid-word to "Henderso / n". Text values get their own step. */
.data--text {
  font-family: var(--micro);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.townfacts > * { min-width: 0; }
.townfacts .data { word-break: normal; overflow-wrap: break-word; }

/* The job-ticket unit token was `flex: none`, so a long locality string
   ("HENDERSON AND KAUFMAN CO.") could not shrink and pushed the row past the
   viewport — which in turn widened the containing block the fixed call bar
   sizes against, so the call bar overflowed too. It may shrink now, and it
   steps out of the way entirely on the narrowest phones where the section
   number and name already carry the rhythm. */
.ticket__unit {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 479px) {
  .ticket__unit { display: none; }
}

/* Belt and braces: the call bar is pinned to the viewport, never to content. */
.callbar { width: 100%; max-width: 100vw; }

/* -----------------------------------------------------------------------------
   [ 28 ] NARROW-PHONE FIXES (320px sweep, 2026-08-24)
   -------------------------------------------------------------------------- */

/* .brand was `flex: none`, so at 320px the wordmark could not give up any width
   and shoved the burger button off the right edge on every page. The mark stays
   fixed; the words yield. */
.brand {
  flex: 0 1 auto;
  min-width: 0;
}

.brand__mark { flex: none; }

.brand > span:last-child {
  min-width: 0;
  overflow: hidden;
}

.brand__name,
.brand__sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 359px) {
  .brand__sub { display: none; }
  .brand__name { font-size: 0.9375rem; }
}

/* The ticket name was also `flex: none`, so a long section name
   ("ATHENS COMMUNITY COLLECTION STATION") could not wrap and overflowed the
   narrowest phones. The name is content and must stay fully readable, so it
   wraps; the connector rule is aria-hidden ornament, so it is what gives way. */
.ticket { flex-wrap: wrap; }

.ticket__name {
  flex: 0 1 auto;
  min-width: 0;
  white-space: normal;
}

@media (max-width: 479px) {
  .ticket__fill { display: none; }
  .ticket { gap: var(--s2) var(--s3); }
}

/* -----------------------------------------------------------------------------
   [ 29 ] MUTED TEXT ON CARBON (2026-08-24)
   --steel is calibrated against paper. On the carbon footer and CTA bands it
   was 3.62:1 — below AA for the 12px .fine text living there. --steel-inv is
   the same warm-grey role measured against carbon instead (6.75:1).
   -------------------------------------------------------------------------- */
.on-carbon .fine,
.on-carbon .steel,
.on-carbon .meta { color: var(--steel-inv); }

/* -----------------------------------------------------------------------------
   [ 30 ] BARE ARROW AFFORDANCE (2026-08-24)
   .svc__more is sized for the words "Read more ->" on a service card. Where the
   only content is the arrow itself (town rows, compact service lists) 11px
   rendered an 8px stub that read as a stray mark rather than a control.
   -------------------------------------------------------------------------- */
.svc__more--arrow {
  margin-top: 0;
  padding-top: 0;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--carbon);
  flex: none;
  align-self: center;
  transition: transform var(--t-std) var(--ease);
}

.townrow:hover .svc__more--arrow,
.svc:hover .svc__more--arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .svc__more--arrow { transition: none; }
  .townrow:hover .svc__more--arrow,
  .svc:hover .svc__more--arrow { transform: none; }
}

/* -----------------------------------------------------------------------------
   [ 31 ] GALLERY TILE UNIFORMITY (2026-08-24)
   The source photographs mix portrait and landscape, so tiles in a row grew to
   the tallest and the shorter ones stretched their caption into a slab of empty
   paper. Square crops keep the compartment grid regular, which is the point of
   DESIGN.md §4.3, and captions bottom-align regardless of wrap.
   -------------------------------------------------------------------------- */
.tile {
  display: flex;
  flex-direction: column;
}

.tile img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.tile .photo-note {
  margin-top: auto;
  border-top: 1px solid var(--rule);
}