/* Truck Livery theme (home services) by Linnet Studio
   Re-skin: change the tokens in :root. The three stripe colors are the trades
   (water / heat / power); --ink is the fleet color, --paint the van body. */
:root {
  /* ---- Shared token layer (same names in every Linnet theme; re-skin presets override these) ---- */
  --c-bg: #F5F7FA;          /* van body: page background */
  --c-surface: #FFFFFF;     /* forms, tickets, badges, price book */
  --c-ink: #0B2545;         /* fleet color: text, dark bands, the main stripe */
  --c-muted: #556373;       /* secondary text, rules (steel) */
  --c-line: rgba(11, 37, 69, .16);
  --c-line-strong: #6B7785; /* field borders */
  --c-accent: #D33A1C;      /* heating stripe: call buttons and the emergency box (white on it 4.6:1) */
  --c-on-accent: #FFFFFF;
  --c-accent-2: #1867D2;    /* plumbing stripe: links and focus */
  --f-display: "Anybody", "Arial Black", "Helvetica Neue", sans-serif;
  --f-body: "Overpass", "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, monospace;  /* not used */
  --r-sm: 4px;              /* sheet-metal corners */
  --r-lg: 16px;             /* ID badges */
  --r-pill: 4px;
  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 40px; --s-6: 64px;

  /* ---- Theme names, mapped to the shared layer ---- */
  --paint: var(--c-bg);
  --paper: var(--c-surface);
  --ink: var(--c-ink);
  --steel: var(--c-muted);
  --line: var(--c-line);
  --stripe-heat: var(--c-accent);
  --stripe-water: var(--c-accent-2);
  --font-livery: var(--f-display);
  --font-body: var(--f-body);
  --radius: var(--r-sm);
  --s1: var(--s-1); --s2: var(--s-2); --s3: var(--s-3); --s4: var(--s-4); --s5: var(--s-5); --s6: var(--s-6); --s7: 104px;

  /* ---- Theme-only: the three stripes are the trades (water / heat / power) ---- */
  --stripe-power: #FFC629;  /* electrical pinstripe, highlights on dark */
  --wrap: 1240px;
  --tire: 72px;
  --ab-h: 56px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; scroll-padding-bottom: calc(var(--ab-h) + 28px); }
body {
  margin: 0; background: var(--paint); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--stripe-water); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.05; }
p { margin: 0 0 var(--s3); }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--stripe-water); outline-offset: 3px; }
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--steel); }
.nowrap { white-space: nowrap; }
.fine { font-size: 14px; color: var(--steel); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius); }
.skip:focus { top: 8px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* One icon style for the whole library: Tabler outline, 2px stroke, from the sprite at the top of the page */
.i { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Touch polish */
a, button, summary, label, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary .i { transition: transform 180ms var(--ease-out); }
details[open] > summary .i { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--ink); }
  .btn-heat:hover { background: #B32D13; color: #fff; }
  .btn-ink:hover { background: #163A66; color: #fff; }
  .btn-line:hover { background: var(--ink); color: #fff; }
  .nav a:hover { color: var(--stripe-water); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
  .mega-phone:hover { color: var(--stripe-water); }
  .pick:hover .tick { box-shadow: 0 0 0 3px rgba(24,103,210,.2); }
  .foot a:hover { color: var(--stripe-power); }
  .emergency-phone:hover { color: #fff; text-decoration: underline; }
  .top-phone:hover { color: var(--stripe-water); }
  .order-disp:hover { background: var(--ink); color: #fff; }
  .trade-tabs label:hover { filter: brightness(1.08); }
}

/* livery lettering helpers */
.section { padding-block: 30px; }
.section-head { max-width: 62rem; margin-bottom: 18px; }
.section-head h2, .about-copy h2, .area-copy h2, .form h2 {
  font-family: var(--font-livery); font-stretch: 125%; font-weight: 800; font-style: italic;
  font-size: clamp(28px, 4.2vw, 46px); letter-spacing: -.01em; margin-bottom: var(--s3);
}
.section-head p { font-size: 18px; max-width: 40rem; margin-bottom: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 22px; border-radius: var(--radius);
  font-family: var(--font-livery); font-stretch: 112%; font-weight: 800; font-style: italic; font-size: 17px;
  text-decoration: none; border: 2px solid transparent; cursor: pointer; line-height: 1.1;
  transition: transform 120ms var(--ease-out), background-color 150ms ease;
}
.btn:active { transform: scale(.97); }
.btn-lg { min-height: 56px; padding-inline: 28px; font-size: 19px; }
.btn-heat { background: var(--stripe-heat); color: #fff; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line-light { border-color: #fff; color: #fff; }

/* ---------- demo bar + header ---------- */
.demo { overflow: hidden; background: var(--ink); color: #fff; font-size: 13px; text-align: center; padding: 7px 14px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.top { background: var(--paper); border-bottom: 1px solid var(--line); }
.top-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s4); padding-top: 10px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-height: 48px; }
.brand-mark { width: 46px; height: 40px; overflow: visible; }
.brand-mark polyline { fill: none; stroke-linejoin: miter; stroke-linecap: butt; }
.m-ink { stroke: var(--ink); stroke-width: 6; }
.m-water { stroke: var(--stripe-water); stroke-width: 4; }
.m-heat { stroke: var(--stripe-heat); stroke-width: 3; }
.m-volt { stroke: var(--stripe-power); stroke-width: 2.4; }
.brand-mark { clip-path: inset(0 0 0 0); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--font-livery); font-stretch: 150%; font-style: italic; font-weight: 900; font-size: 25px; letter-spacing: -.01em; }
.brand-sub { font-family: var(--font-livery); font-stretch: 78%; font-weight: 700; font-size: 14px; color: var(--steel); margin-top: 4px; }

.nav { order: 3; width: 100%; margin-top: 6px; border-top: 1px solid var(--line); }
.nav ul { list-style: none; display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 8px 40px; scroll-padding-inline: 8px; -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); mask-image: linear-gradient(90deg, #000 84%, transparent); }
.nav ul::-webkit-scrollbar { display: none; }
.nav a {
  display: flex; align-items: center; min-height: 48px; padding: 0 12px; white-space: nowrap;
  font-family: var(--font-livery); font-stretch: 82%; font-weight: 700; font-size: 17px; color: var(--ink); text-decoration: none;
}
.top-actions { display: none; }

/* ---------- hero: the side of the van ---------- */
.hero { position: relative; background: var(--paint); padding-bottom: calc(var(--tire) / 2 + 14px); }
.hero-grid { display: grid; grid-template-columns: 1fr; }
.hero-photo { position: relative; height: 156px; margin: 18px -16px 0; overflow: hidden; clip-path: polygon(0 16%, 100% 0, 100% 84%, 0 100%); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; transform: scaleX(-1); }
.sash {
  position: absolute; top: 54px; right: -80px; width: 300px; margin: 0; transform: rotate(45deg);
  background: var(--stripe-heat); color: #fff; text-align: center; padding: 7px 0 5px;
  font-family: var(--font-livery); font-stretch: 105%; font-style: italic; font-weight: 900; font-size: 15px; line-height: 1.2;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(0,0,0,.18), 0 6px 14px rgba(11,37,69,.35);
}
.hero-copy { padding-top: 20px; }
.hero-trades { font-family: var(--font-livery); font-style: italic; font-weight: 900; font-stretch: 150%; font-size: clamp(34px, 9.4vw, 68px); line-height: .98; letter-spacing: -.015em; }
.trade { display: block; }
.trade::before {
  content: ""; display: inline-block; width: .55em; height: .2em; margin-right: .22em; vertical-align: .18em;
  background: var(--c); transform: skewX(-24deg);
}
.t-water { --c: var(--stripe-water); }
.t-heat { --c: var(--stripe-heat); }
.t-volt { --c: var(--stripe-power); }
.hero-where { display: block; margin-top: 10px; font-style: normal; font-weight: 700; font-stretch: 80%; font-size: clamp(20px, 2.1vw, 26px); letter-spacing: 0; line-height: 1.2; }
.hero-lede { font-size: 18px; line-height: 1.5; max-width: 32rem; margin-top: 14px; margin-bottom: 18px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--s3); }
.hero-ctas .btn-lg { min-height: 52px; padding-inline: 16px; font-size: 17px; }
.hero-slot { font-size: 15px; display: flex; align-items: center; gap: 8px; margin: 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #17904F; box-shadow: 0 0 0 4px rgba(23,144,79,.18); flex: none; }

.hero-lettering { margin-top: var(--s4); position: relative; z-index: 1; }
.mega-wrap { margin: 0; }
.mega-label { display: block; font-family: var(--font-livery); font-stretch: 80%; font-weight: 700; font-size: 17px; color: var(--steel); }
.mega-phone {
  display: inline-flex; align-items: center; min-height: 48px; color: var(--ink); text-decoration: none; line-height: 1; padding-block: 2px;
  font-family: var(--font-livery); font-style: italic; font-weight: 900; font-stretch: 116%; font-size: clamp(30px, 8.4vw, 72px); letter-spacing: -.01em;
}
.van-fine { font-size: 13px; color: var(--ink); margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.unit { font-family: var(--font-livery); font-stretch: 85%; font-weight: 800; font-size: 13px; border: 1.5px solid var(--ink); border-radius: 3px; padding: 1px 6px; }

.belt { position: relative; height: 72px; margin-top: 8px; pointer-events: none; }
.belt svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.belt polyline { fill: none; stroke-linejoin: miter; stroke-miterlimit: 8; vector-effect: non-scaling-stroke; }
.belt-wide { display: none; }
.belt-wide .s-ink { stroke: var(--ink); stroke-width: 34px; }
.belt-wide .s-water { stroke: var(--stripe-water); stroke-width: 14px; }
.belt-wide .s-heat { stroke: var(--stripe-heat); stroke-width: 10px; }
.belt-wide .s-volt { stroke: var(--stripe-power); stroke-width: 6px; }
.belt-narrow .s-ink { stroke: var(--ink); stroke-width: 22px; }
.belt-narrow .s-water { stroke: var(--stripe-water); stroke-width: 10px; }
.belt-narrow .s-heat { stroke: var(--stripe-heat); stroke-width: 7px; }
.belt-narrow .s-volt { stroke: var(--stripe-power); stroke-width: 4px; }

/* the one motion moment: the vinyl goes on, left to right */
@media (prefers-reduced-motion: no-preference) {
  .belt svg { animation: vinyl 1.1s cubic-bezier(.2,.7,.2,1) .25s both; }
  @keyframes vinyl { from { clip-path: inset(-80px 100% -10px 0); } to { clip-path: inset(-80px 0 -10px 0); } }
}

/* ---------- road: trust decals + wheels ---------- */
.road { position: relative; background: var(--ink); color: #fff; padding: calc(var(--tire) / 2 + 24px) 0 28px; }
.wheel {
  position: absolute; top: calc(var(--tire) / -2); width: var(--tire); height: var(--tire); border-radius: 50%;
  background:
    radial-gradient(circle, var(--ink) 0 15%, #D3D9E1 16% 31%, #8C98A6 32% 36%, #1B232E 37% 63%, #2A3441 64% 66%, #1B232E 67%);
  box-shadow: 0 0 0 9px var(--ink);
}
.wheel-front { left: 9%; }
.wheel-rear { right: 13%; }
.decals { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.decal {
  background: var(--paper); color: var(--ink); border-radius: 10px; padding: 16px 14px 14px;
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 6px var(--stripe-power);
  display: flex; flex-direction: column; gap: 4px;
}
.decal-big { font-family: var(--font-livery); font-style: italic; font-weight: 900; font-stretch: 125%; font-size: 24px; line-height: 1.05; }
.decal-small { font-size: 14px; line-height: 1.35; }
.decal-stars svg { width: 84px; height: 17px; display: block; }
.decal-stars path { fill: var(--stripe-power); stroke: var(--ink); stroke-width: .9; }

/* ---------- triage: the service order ---------- */
.triage { background: var(--paint); isolation: isolate; }
.order { position: relative; background: var(--paper); border: 2px solid var(--ink); border-radius: 6px; margin-right: 14px; margin-bottom: 14px; }
.order::before, .order::after { content: ""; position: absolute; inset: -2px; border-radius: 6px; z-index: -1; border: 1.5px solid rgba(11,37,69,.35); }
.order::before { transform: translate(7px, 7px); background: #FFF0B8; }   /* yellow copy */
.order::after { transform: translate(14px, 14px); background: #FBD9D3; z-index: -2; } /* pink copy */
.order-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 14px;
  border-bottom: 2px solid var(--ink); background: var(--paper); border-radius: 6px 6px 0 0;
}
.order-title { font-family: var(--font-livery); font-style: italic; font-weight: 900; font-stretch: 130%; font-size: 20px; }
.order-no { font-family: var(--font-livery); font-stretch: 80%; font-weight: 800; font-size: 18px; color: var(--stripe-heat); }
.order-disp { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: auto; padding: 0 12px; border: 2px solid var(--ink); border-radius: var(--radius); color: var(--ink); font-weight: 700; font-size: 15px; text-decoration: none; transition: background-color 150ms ease; }
.order-disp .i { width: 18px; height: 18px; }
.order-body { display: grid; grid-template-columns: 1fr; }

.order-pick { border: 0; margin: 0; padding: 14px 14px 6px; min-width: 0; }
.order-pick legend { font-family: var(--font-livery); font-stretch: 80%; font-weight: 800; font-size: 17px; padding: 0; margin-bottom: 8px; float: left; width: 100%; }
.pick-r { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pick {
  --c: var(--ink); clear: both;
  display: flex; align-items: flex-start; gap: 14px; padding: 10px 12px; min-height: 52px; cursor: pointer;
  border-top: 1px dashed rgba(11,37,69,.32); border-radius: 3px; transition: background-color .15s;
}
.pick strong { display: block; font-size: 18px; line-height: 1.25; }
.pick-ex { display: block; font-size: 14.5px; color: var(--steel); line-height: 1.4; margin-top: 2px; }
.pick-water { --c: var(--stripe-water); }
.pick-heat { --c: var(--stripe-heat); }
.pick-volt { --c: #B88600; }
.tick { flex: none; width: 26px; height: 26px; border: 2px solid var(--ink); border-radius: 3px; background: var(--paper); position: relative; margin-top: 1px; }
.pick-r:checked + .pick { background: #EEF3FA; box-shadow: inset 6px 0 0 var(--c); }
.pick-r:checked + .pick .tick { background: var(--ink); }
.pick-r:checked + .pick .tick::after {
  content: ""; position: absolute; left: 7px; top: 2px; width: 7px; height: 14px;
  border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.pick-r:focus-visible + .pick { outline: 3px solid var(--stripe-water); outline-offset: 2px; }

.order-out { padding: 16px 14px; border-top: 2px solid var(--ink); }
.out-when { margin: 10px 0 0; font-weight: 700; }
.out .steps { margin-top: 12px; }
/* Shift-free: the four answers share one grid cell, so the order is as tall as the longest answer and nothing below
   moves when you pick. Without :has() all four answers simply list. */
.out + .out { margin-top: 24px; }
@supports selector(:has(*)) {
  .order-out { display: grid; align-items: start; }
  .out { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity 160ms ease; }
  .out + .out { margin-top: 0; }
  .order:has(#p-all:checked) .out-all,
  .order:has(#p-leak:checked) .out-leak,
  .order:has(#p-heat:checked) .out-heat,
  .order:has(#p-power:checked) .out-power { visibility: visible; opacity: 1; }
}
.out h3 { font-family: var(--font-livery); font-stretch: 110%; font-weight: 800; font-size: 20px; margin: 10px 0 10px; }
.out-kicker { font-family: var(--font-livery); font-stretch: 80%; font-weight: 800; font-size: 17px; margin-bottom: 10px; }
.glance { list-style: none; display: grid; gap: 10px; margin-bottom: var(--s3); }
.glance li { padding: 8px 12px; border-left: 6px solid var(--c); background: var(--paint); line-height: 1.4; }
.g-water { --c: var(--stripe-water); }
.g-heat { --c: var(--stripe-heat); }
.g-volt { --c: var(--stripe-power); }
.out-next { font-size: 16px; }
.stamp {
  display: inline-block; margin: 0; padding: 3px 14px 1px; border: 3px solid var(--stripe-heat); border-radius: 8px;
  color: var(--stripe-heat); transform: rotate(-4deg);
  font-family: var(--font-livery); font-stretch: 90%; font-weight: 900; font-size: 22px; line-height: 1.3;
}
.steps { list-style: none; counter-reset: step; display: grid; gap: 8px; margin-bottom: 14px; }
.steps li { counter-increment: step; position: relative; padding-left: 44px; min-height: 30px; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 3px;
  background: var(--ink); color: #fff; display: grid; place-items: center;
  font-family: var(--font-livery); font-style: italic; font-weight: 900; font-size: 16px;
}
.next { background: var(--paint); border-left: 6px solid var(--ink); padding: 12px 14px; }
.next p { margin-bottom: 10px; }
.next p { font-size: 16px; }

/* ---------- prices: the flat-rate book ---------- */
.prices { background: var(--paper); border-block: 1px solid var(--line); }
.book { display: grid; gap: var(--s4); }
.book-col { --c: var(--ink); --on: #fff; }
.tab-water { --c: var(--stripe-water); }
.tab-heat { --c: var(--stripe-heat); }
.tab-volt { --c: var(--stripe-power); --on: var(--ink); }
.book-tab {
  display: inline-block; background: var(--c); color: var(--on); padding: 9px 18px 7px; border-radius: var(--radius) var(--radius) 0 0;
  font-family: var(--font-livery); font-style: italic; font-weight: 900; font-stretch: 125%; font-size: 20px;
}
.book table { width: 100%; border-collapse: collapse; border-top: 4px solid var(--c); }
.book th, .book td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.book th { font-weight: 500; font-size: 16px; padding-right: 12px; }
.book td { text-align: right; white-space: nowrap; font-family: var(--font-livery); font-stretch: 100%; font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.book-foot { font-size: 15px; color: var(--steel); margin-top: var(--s4); max-width: 46rem; }

.promises { display: grid; gap: var(--s4); margin-top: var(--s5); }
.promise-card, .finance-card { border-radius: 6px; padding: 18px; }
.promise-card { background: var(--paint); border-top: 6px solid var(--ink); }
.promise-card h3 { font-family: var(--font-livery); font-style: italic; font-weight: 900; font-stretch: 120%; font-size: 24px; margin-bottom: var(--s3); }
.promise-list { list-style: none; display: grid; gap: 12px; }
.promise-list li { position: relative; padding-left: 34px; }
.promise-list li::before {
  content: ""; position: absolute; left: 4px; top: 4px; width: 9px; height: 16px;
  border: solid var(--stripe-water); border-width: 0 4px 4px 0; transform: rotate(45deg);
}
.finance-card { background: var(--ink); color: #fff; }
.finance-eg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 14px 0; border-block: 1px solid rgba(255,255,255,.22); }
.finance-num { font-family: var(--font-livery); font-style: italic; font-weight: 900; font-stretch: 130%; font-size: 44px; color: var(--stripe-power); line-height: 1; }
.finance-per { font-size: 18px; font-stretch: 90%; }
.finance-card .fine { color: #C9D2DE; }

/* ---------- route: how a visit works ---------- */
.stops { list-style: none; position: relative; display: grid; gap: var(--s4); }
.stops::before {
  content: ""; position: absolute; left: 22px; top: 6px; bottom: 6px; width: 12px; background: var(--ink); border-radius: 2px;
}
.stops::after {
  content: ""; position: absolute; left: 26.5px; top: 6px; bottom: 6px; width: 3px;
  background: repeating-linear-gradient(180deg, var(--stripe-power) 0 18px, transparent 18px 34px);
}
.stops li { position: relative; padding-left: 76px; min-height: 56px; }
.stop-no {
  position: absolute; left: 0; top: 0; z-index: 1; width: 56px; height: 56px; border-radius: 50%;
  background: var(--paper); border: 4px solid var(--ink); display: grid; place-items: center;
  font-family: var(--font-livery); font-style: italic; font-weight: 900; font-size: 24px;
}
.stops h3 { font-family: var(--font-livery); font-stretch: 110%; font-weight: 800; font-size: 21px; margin: 6px 0 6px; }
.stops p { margin: 0; max-width: 24rem; }

/* ---------- techs: ID badges ---------- */
.techs { background: var(--paper); border-block: 1px solid var(--line); }
.badges { list-style: none; display: grid; gap: var(--s4); justify-items: center; }
.badge {
  width: 100%; max-width: 320px; background: var(--paper); border: 1px solid rgba(11,37,69,.22); border-radius: 16px;
  padding: 16px 18px 14px; text-align: center; overflow: hidden;
  box-shadow: 0 1px 0 rgba(11,37,69,.08), 0 18px 34px -22px rgba(11,37,69,.55);
}
.badge-slot { display: block; width: 62px; height: 12px; margin: 0 auto 14px; border-radius: 6px; background: var(--paint); box-shadow: inset 0 2px 3px rgba(11,37,69,.35); }
.badge-co {
  margin: 0 -18px 16px; padding: 8px 18px; background: var(--ink); color: #fff; display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-livery); font-style: italic; font-weight: 900; font-stretch: 140%; font-size: 17px;
}
.badge-co span { font-style: normal; font-stretch: 80%; font-weight: 700; font-size: 14px; }
.badge-frame { display: block; width: 150px; height: 150px; margin: 0 auto 14px; overflow: hidden; border-radius: 8px; border: 3px solid var(--paint); box-shadow: 0 0 0 1px var(--line); }
.badge-frame img { max-width: none; width: 380px; height: auto; }
.badge-frame .face-1 { margin-left: -74px; }
.badge-frame .face-2 { margin-left: -36px; margin-top: 0; }
.badge-name { font-family: var(--font-livery); font-stretch: 120%; font-weight: 900; font-style: italic; font-size: 26px; }
.badge-role { display: inline-block; margin: 8px 0 12px; padding: 3px 10px; border-radius: 3px; font-weight: 700; font-size: 15px; color: #fff; }
.role-volt { background: var(--ink); box-shadow: inset 0 -4px 0 var(--stripe-power); }
.role-water { background: var(--stripe-water); }
.badge-facts { list-style: none; font-size: 15px; line-height: 1.5; margin-bottom: 12px; }
.badge-id { margin: 0; padding-top: 10px; border-top: 1px dashed var(--line); font-family: var(--font-livery); font-stretch: 85%; font-weight: 800; font-size: 14px; display: flex; justify-content: space-between; gap: 8px; }
.badge-id span { font-family: var(--font-body); font-weight: 400; color: var(--steel); }
.roster { width: 100%; max-width: 320px; align-self: stretch; padding: var(--s4); border: 2px solid var(--ink); border-radius: 6px; background: var(--paint); }
.roster h3 { font-family: var(--font-livery); font-stretch: 115%; font-weight: 900; font-style: italic; font-size: 22px; margin-bottom: 12px; }
.roster-table { width: 100%; border-collapse: collapse; margin-bottom: var(--s3); }
.roster-table th { text-align: left; font-weight: 500; padding: 7px 0; border-bottom: 1px dotted rgba(11,37,69,.4); }
.roster-table td { text-align: right; font-family: var(--font-livery); font-weight: 900; font-style: italic; font-size: 19px; border-bottom: 1px dotted rgba(11,37,69,.4); }
.roster p { font-size: 15px; margin: 0; }
.roster .sign { margin-top: 12px; font-family: var(--font-livery); font-style: italic; font-weight: 800; font-stretch: 120%; font-size: 18px; }

/* ---------- jobs: tickets ---------- */
.tickets { list-style: none; display: grid; gap: var(--s3); }
.ticket { --c: var(--ink); display: grid; grid-template-columns: 38% 1fr; background: var(--paper); border: 1px solid rgba(11,37,69,.2); border-top: 5px solid var(--c); border-radius: var(--radius); overflow: hidden; }
.ticket.t-water { --c: var(--stripe-water); }
.ticket.t-heat { --c: var(--stripe-heat); }
.ticket.t-volt { --c: var(--stripe-power); }
.ticket img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; }
.ticket-body { padding: 12px 14px; border-left: 2px dashed rgba(11,37,69,.25); }
.ticket-no { font-family: var(--font-livery); font-stretch: 80%; font-weight: 700; font-size: 14px; color: var(--steel); margin-bottom: 4px; }
.ticket h3 { font-family: var(--font-livery); font-stretch: 110%; font-weight: 900; font-style: italic; font-size: 19px; margin-bottom: 6px; }
.ticket p:last-child { font-size: 15px; line-height: 1.45; margin: 0; }

/* ---------- area: dispatch map ---------- */
.area { background: var(--paper); border-block: 1px solid var(--line); }
.area-grid { display: grid; gap: var(--s5); }
.towns { width: 100%; border-collapse: collapse; margin: var(--s3) 0; }
.towns th, .towns td { padding: 7px 0; border-bottom: 1px solid var(--line); text-align: left; }
.towns thead th { font-family: var(--font-livery); font-stretch: 80%; font-weight: 800; font-size: 15px; border-bottom: 2px solid var(--ink); }
.towns tbody th { font-weight: 500; }
.towns td { text-align: right; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.towns thead th:last-child { text-align: right; }
.map { margin: 0; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; background: #E9EFF6; align-self: start; }
.map svg { display: block; width: 100%; height: auto; }
.map-land { fill: #E9EFF6; }
.map-grid { stroke: rgba(11,37,69,.07); stroke-width: 1; }
.map-water { fill: #C9DCF3; }
.map-border { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 8 6; }
.ring { fill: none; stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; }
.ring.r1 { stroke: var(--stripe-heat); fill: rgba(211,58,28,.07); stroke-dasharray: none; }
.ring.r2 { stroke: var(--stripe-water); fill: rgba(24,103,210,.05); }
.ring.r3 { stroke: var(--ink); }
.map-road { fill: none; stroke: #8593A3; stroke-width: 5; stroke-linecap: round; }
.map-road.minor { stroke-width: 2.5; }
.shop { fill: var(--stripe-heat); stroke: #fff; stroke-width: 3; }
.towns-pts circle { fill: var(--ink); stroke: #fff; stroke-width: 2; }
.map text { font-family: var(--font-body); fill: var(--ink); }
.towns-pts text { font-size: 15px; font-weight: 700; paint-order: stroke; stroke: #E9EFF6; stroke-width: 4px; stroke-linejoin: round; }
.ring-labels text { font-size: 13px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: #E9EFF6; stroke-width: 4px; }
.map-shop-label { font-size: 15px; font-weight: 800; paint-order: stroke; stroke: #E9EFF6; stroke-width: 4px; }
.map-note, .map-water-label { font-size: 13px; font-style: italic; }
@media (max-width: 759.98px) {
  .towns-pts text { font-size: 21px; }
  .ring-labels text { font-size: 18px; }
  .map-shop-label { font-size: 20px; }
  .map-note, .map-water-label { font-size: 18px; }
}

/* ---------- reviews ---------- */
.quotes { list-style: none; display: grid; gap: var(--s3); }
.quote { background: var(--paper); border: 1px solid rgba(11,37,69,.18); border-radius: 6px; padding: var(--s4); display: flex; flex-direction: column; }
.quote-stars { color: var(--stripe-heat); font-size: 19px; letter-spacing: 3px; margin-bottom: 8px; }
.quote blockquote { margin: 0 0 var(--s3); font-size: 18px; line-height: 1.5; flex: 1; }
.quote blockquote p { margin: 0; }
.quote-who { margin: 0; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sample { font-weight: 400; font-size: 13px; color: var(--steel); border: 1px solid rgba(85,99,115,.5); border-radius: 3px; padding: 0 6px; }

/* ---------- contact + booking ---------- */
.contact { background: var(--paint); }
.contact-grid { display: grid; gap: var(--s5); align-items: start; }
.form { background: var(--paper); border: 2px solid var(--ink); border-radius: 6px; padding: var(--s4); }
.form-intro { color: var(--steel); margin-bottom: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s3); min-width: 0; }
.field-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 12px; }
.field label, .windows legend { font-family: var(--font-livery); font-stretch: 85%; font-weight: 800; font-size: 16px; }
.opt { font-family: var(--font-body); font-weight: 400; color: var(--steel); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 17px; color: var(--ink); background: var(--paper);
  border: 2px solid #6B7785; border-radius: var(--radius); padding: 11px 12px; min-height: 50px; width: 100%;
}
.field textarea { resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--stripe-water); outline-offset: 1px; border-color: var(--ink); }
.windows { border: 0; padding: 0; margin: 0 0 var(--s3); min-width: 0; }
.windows legend { margin-bottom: 8px; padding: 0; }
.win-list { display: flex; flex-wrap: wrap; gap: 6px; }
.win-list input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.win-list label {
  min-height: 46px; display: inline-flex; align-items: center; padding: 0 9px; border: 2px solid var(--ink); border-radius: var(--radius);
  font-family: var(--font-livery); font-stretch: 90%; font-weight: 700; font-size: 16px; cursor: pointer; background: var(--paper);
}
.win-list input:checked + label { background: var(--ink); color: #fff; }
.win-list input:focus-visible + label { outline: 3px solid var(--stripe-water); outline-offset: 2px; }
.contact-side { display: grid; gap: var(--s4); }
.contact-side h3 { font-family: var(--font-livery); font-stretch: 110%; font-weight: 900; font-style: italic; font-size: 21px; margin-bottom: 10px; }
.emergency { background: var(--stripe-heat); color: #fff; border-radius: 6px; padding: var(--s4); }
.emergency p { margin: 6px 0 0; }
.emergency-phone { color: #fff; text-decoration: none; font-family: var(--font-livery); font-style: italic; font-weight: 900; font-stretch: 120%; font-size: clamp(28px, 7.4vw, 40px); line-height: 1.1; display: inline-flex; align-items: center; min-height: 48px; }
.hours table { border-collapse: collapse; width: 100%; }
.hours th, .hours td { text-align: left; padding: 6px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.hours th { font-weight: 700; padding-right: 16px; }
.addr { font-style: normal; }
.addr > a { font-weight: 700; color: var(--ink); }
.addr-links { display: grid; margin-top: 6px; }
.addr-links a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; overflow-wrap: anywhere; }
.sent { display: none; margin: 14px 0 0; padding: 12px 14px; border-left: 6px solid var(--stripe-water); background: #EEF3FA; }
.sent:target { display: block; }
.field input:user-invalid { border-color: var(--stripe-heat); }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: #fff; }
.foot-stripes {
  height: 38px;
  background: linear-gradient(180deg,
    var(--paint) 0 8px, var(--stripe-power) 8px 13px, var(--paint) 13px 17px,
    var(--stripe-heat) 17px 25px, var(--paint) 25px 29px, var(--stripe-water) 29px 38px);
}
.foot-grid { display: grid; gap: 14px; padding-top: 28px; }
.foot-grid a { display: flex; align-items: center; min-height: 44px; width: fit-content; }
.foot-hours { font-variant-numeric: tabular-nums; }
.foot a { color: #fff; }
.foot-brand { font-family: var(--font-livery); font-style: italic; font-weight: 900; font-stretch: 150%; font-size: 30px; margin-bottom: 8px; }
.foot-h { font-family: var(--font-livery); font-stretch: 85%; font-weight: 800; font-size: 16px; margin-bottom: 8px; color: var(--stripe-power); }
.fine-light { font-size: 14px; color: #C9D2DE; }
.foot-base { border-top: 1px solid rgba(255,255,255,.18); padding: var(--s3) 0 calc(var(--ab-h) + 20px + env(safe-area-inset-bottom)); margin-top: var(--s3); font-size: 14px; color: #C9D2DE; }
.foot-base p { margin: 0; }

/* ---------- C1 Action Bar (phones): Call 24/7, Text, Book ---------- */
.action-bar { position: fixed; inset: auto 0 0 0; z-index: 60; display: grid; grid-template-columns: 1.3fr 1fr 1fr; background: var(--ink); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 18px rgba(11,37,69,.25); }
.action-bar a { min-height: var(--ab-h); display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: #fff; font-family: var(--font-livery); font-style: italic; font-weight: 900; font-stretch: 110%; font-size: 17px; transition: background-color 150ms ease; }
.action-bar a + a { border-left: 1px solid rgba(255,255,255,.2); }
.action-bar .ab-call { background: var(--stripe-heat); }
.action-bar a:active { background: #163A66; }
.action-bar .ab-call:active { background: #B32D13; }
.action-bar a:focus-visible { outline: 3px solid var(--stripe-power); outline-offset: -5px; }

/* ---------- phones: price tabs, rails ---------- */
.trade-tabs { display: flex; gap: 6px; min-width: 0; margin: 0 0 -4px; padding: 0; border: 0; }
.trade-tabs label { flex: 1; display: grid; place-items: center; min-height: 48px; padding: 0 6px; border-radius: var(--radius) var(--radius) 0 0; background: var(--paint); color: var(--ink); border: 2px solid var(--line); border-bottom: 0; font-family: var(--font-livery); font-style: italic; font-weight: 900; font-stretch: 110%; font-size: 17px; cursor: pointer; }
.trade-tabs input:checked + label.tab-water { background: var(--stripe-water); border-color: var(--stripe-water); color: #fff; }
.trade-tabs input:checked + label.tab-heat { background: var(--stripe-heat); border-color: var(--stripe-heat); color: #fff; }
.trade-tabs input:checked + label.tab-volt { background: var(--stripe-power); border-color: var(--stripe-power); color: var(--ink); }
.trade-tabs input:focus-visible + label { outline: 3px solid var(--stripe-water); outline-offset: 2px; }
@media (max-width: 759.98px) {
  /* Sections menu: every link visible at 375px, two rows on four content-sized columns instead of a scroller */
  .nav ul { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; overflow: visible; margin-inline: -8px; padding-inline: 0; -webkit-mask-image: none; mask-image: none; }
  .nav a { min-height: 44px; padding: 0 8px; }
  /* Service order: slimmer carbon copies, and the "Still not sure?" note runs the width of the order */
  .order { margin-right: 8px; margin-bottom: 8px; }
  .order::before { transform: translate(4px, 4px); }
  .order::after { transform: translate(8px, 8px); }
  .order-out { padding-inline: 12px; }
  .next { margin-inline: -12px; padding: 12px; }
  .book-tab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .prices:has(#tt-water:checked) .book-col:not(.tab-water), .prices:has(#tt-heat:checked) .book-col:not(.tab-heat), .prices:has(#tt-volt:checked) .book-col:not(.tab-volt) { visibility: hidden; }
  @supports selector(:has(*)) { .book > .book-col { grid-area: 1 / 1; } .book { align-items: start; } }
  .badges, .tickets, .quotes { position: relative; grid-auto-flow: column; justify-items: stretch; margin-inline: -16px; padding: 4px 16px 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: thin; scrollbar-color: var(--steel) transparent; }
  .badges { grid-auto-columns: min(76%, 290px); }
  .tickets { grid-auto-columns: min(78%, 300px); }
  .quotes { grid-auto-columns: min(84%, 330px); }
  .badges > li, .tickets > li, .quotes > li { scroll-snap-align: start; }
  .ticket { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .ticket img { height: 130px; min-height: 0; }
  .ticket-body { border-left: 0; border-top: 2px dashed rgba(11,37,69,.25); }
  .badge { max-width: none; }
  .map { display: none; }
  .roster { max-width: none; }
}
@supports not selector(:has(*)) { .trade-tabs { display: none; } }
.badges:focus-visible, .tickets:focus-visible, .quotes:focus-visible { outline-offset: -3px; }
.finance-card > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-family: var(--font-livery); font-style: italic; font-weight: 900; font-stretch: 120%; font-size: 22px; line-height: 1.1; }
.finance-card[open] > summary { margin-bottom: 12px; }
.finance-card :focus-visible { outline-color: var(--stripe-power); }

/* ================= tablet ================= */
@media (min-width: 760px) {
  .decals { grid-template-columns: repeat(4, 1fr); }
  .decal:nth-child(4) { grid-column: span 1; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .tickets { grid-template-columns: 1fr 1fr; }
  .ticket { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .ticket img { height: 190px; min-height: 0; }
  .ticket-body { border-left: 0; border-top: 2px dashed rgba(11,37,69,.25); }
  .quotes { grid-template-columns: 1fr 1fr; }
  .badges { grid-template-columns: 1fr 1fr; align-items: start; }
  .roster { max-width: none; grid-column: 1 / -1; }
}

@media (min-width: 760px) {
  :root { --tire: 104px; }
  :root { --ab-h: 0px; }
  html { scroll-padding-top: 88px; scroll-padding-bottom: 0; }
  .action-bar { display: none; }
  .foot-base { padding-bottom: var(--s4); }
  .hero-photo { margin-top: 24px; height: 280px; }
  .belt { height: 90px; }
  .road { padding-bottom: var(--s5); }
  .badge-frame { height: 172px; }
  .win-list label { padding: 0 14px; }
  .hero-ctas .btn-lg { min-height: 56px; padding-inline: 28px; font-size: 19px; }
  .order-head { gap: 4px 18px; padding: 12px 18px; }
  .top { position: sticky; top: 0; z-index: 50; }
  .top-bar { flex-wrap: nowrap; padding-block: 10px; }
  .nav { order: 0; width: auto; margin: 0; border: 0; }
  .nav ul { margin: 0; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .nav a { padding: 0 9px; font-size: 16px; }
  .top-actions { display: flex; align-items: center; gap: 16px; }
  .top-phone { display: flex; flex-direction: column; line-height: 1.05; text-decoration: none; color: var(--ink); font-family: var(--font-livery); font-style: italic; font-weight: 900; font-stretch: 112%; font-size: 19px; white-space: nowrap; }
  .top-phone-label { font-style: normal; font-weight: 700; font-stretch: 80%; font-size: 13px; color: var(--stripe-heat); }

  .order-body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .order-pick { border-right: 2px solid var(--ink); padding-bottom: 18px; }
  .order-out { border-top: 0; padding: 22px 26px; }

  .promises { grid-template-columns: 1fr 1fr; }
  .trade-tabs { display: none; }
  .finance-card > summary { pointer-events: none; }
  .finance-card > summary .i { display: none; }
  .area-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .form { padding: var(--s5); }
  .foot-grid { grid-template-columns: 2fr 1fr 1.3fr 1.2fr; }
}

/* ================= desktop ================= */
@media (min-width: 1080px) {
  :root { --tire: 116px; }
  .section { padding-block: var(--s7); }
  .nav a { padding: 0 12px; font-size: 17px; }

  .hero { padding-bottom: calc(var(--tire) / 2 + 22px); }
  .hero-grid {
    width: 100%; max-width: none;
    grid-template-columns: minmax(24px, 1fr) minmax(0, 660px) minmax(0, 580px) minmax(24px, 1fr);
    min-height: 470px;
  }
  .hero-copy { grid-column: 2; padding: var(--s6) var(--s5) 0 0; }
  .hero-photo { grid-column: 3 / -1; order: 0; height: auto; margin: 0; clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%); }
  .hero-photo img { object-position: 30% 40%; }
  .sash { top: 72px; right: -84px; width: 350px; font-size: 19px; padding: 9px 0 7px; }
  .hero-lettering { margin-top: var(--s4); }
  .mega-phone { font-stretch: 150%; font-size: clamp(48px, 5.4vw, 74px); }
  .belt { height: 120px; margin-top: 4px; }
  .belt-wide { display: block; }
  .belt-narrow { display: none; }

  .decals { gap: 16px; }
  .decal { padding: 20px 18px 18px; }
  .decal-big { font-size: 28px; }

  .book { grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
  .stops { grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
  .stops::before { left: 0; right: 0; top: 22px; bottom: auto; width: auto; height: 12px; }
  .stops::after { left: 0; right: 0; top: 26.5px; bottom: auto; width: auto; height: 3px; background: repeating-linear-gradient(90deg, var(--stripe-power) 0 22px, transparent 22px 40px); }
  .stops li { padding-left: 0; padding-top: 80px; }
  .stop-no { top: 0; left: 0; }

  .badges { grid-template-columns: 1fr 1fr 1fr; }
  .roster { grid-column: auto; max-width: 320px; }
  .tickets { grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
  .quotes { grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
}

@media (min-width: 760px) {
  .finance-card::details-content { content-visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* One Call on the entry screen (Ethan, Oct 7 2026). Phones: the action bar's Call 24/7 is the one, so the van's giant
   number waits for the emergency box further down. Computers: the van's giant number is the one; the sticky bar's 24/7
   dispatch number joins after the first scroll (a scroll timeline; without one it stays hidden, and the emergency box,
   the booking block and the footer carry Call). */
@media (max-width: 759.98px) { .mega-wrap { display: none; } }
@keyframes call-tel-in { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
@supports (animation-timeline: scroll()) {
  .top-phone { animation: call-tel-in linear both; animation-timeline: scroll(root); animation-range: 40px 140px; }
  @media (prefers-reduced-motion: reduce) {  /* still waits for the first scroll, then appears without a fade */
    .top-phone { animation: call-tel-in steps(1, end) both !important; animation-timeline: scroll(root) !important; animation-range: 40px 140px !important; }
  }
}
@supports not (animation-timeline: scroll()) { .top-phone { display: none; } }