/* ==========================================================================
   SnapLogistics design system — v2

   Two products share one family and read oppositely, on purpose.

   SnapLogistics is bought by people who run trucks. Their day is a board: stops,
   times, crews, capacity. Dispatch starts before dawn and the duty agent runs
   overnight, so the platform's ground is a yard at 5am — asphalt, sodium
   light, galvanized steel. Dense, instrumented, lit.

   A tenant site is read by a homeowner at 9pm with a garage full of junk.
   Same typography, same structural devices, inverted ground: daylight, open,
   photographic, and the price stated without being asked twice.

   The signature both share is the truck-door plate — the stacked block of
   condensed caps every commercial vehicle carries by law: legal name, domicile,
   USDOT number. Real regulatory typography from this trade, generated per
   tenant, and the one thing this design is meant to be remembered by.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100,600;100,700;112,800;125,800;125,900&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Martian+Mono:wght@300;400;600&display=swap');

:root {
  /* ---- night shift: the yard at 5am ---------------------------------- */
  --asphalt:  #0A0C0D;   /* near-black, green-grey cast — never pure black */
  --yard:     #14181A;   /* the panel one step up from the ground */
  --kerb:     #1E2427;   /* raised surfaces, table stripes */
  --weld:     #2C3438;   /* rules on dark */

  --sodium:   #FFA92E;   /* depot sodium-vapor amber — the brand */
  --sodium-d: #C87A0B;   /* sodium on light grounds */
  --live:    #CBF94C;   /* ANSI safety yellow-green — LIVE states only */
  --rust:     #D8552F;   /* oxide red — stop, expired, refused */

  --zinc:     #8A959B;   /* galvanized — secondary text on dark */
  --zinc-d:   #5C666B;   /* tertiary on dark */
  --chalk:    #E9EBEB;   /* primary text on dark */

  /* ---- daylight: the page a customer reads --------------------------- */
  --paper:    #FCFBF9;   /* barely warm white. Not cream. */
  --paper-2:  #F3F1ED;
  --ink:      #14181C;
  --ink-2:    #3D464C;
  --ink-3:    #6B757B;
  --ink-4:    #9AA3A8;
  --rule:     #E3E1DC;
  --rule-2:   #EFEDE8;

  --ticket:   #F4F2ED;   /* a document surface, only ever used as one */

  /* ---- type ---------------------------------------------------------- */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --data:    'Martian Mono', ui-monospace, 'SF Mono', monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   Type roles

   Display is Archivo at width 125 — a wide American grotesque that, set in
   caps and tracked out, reads like the lettering on a truck door. It does one
   job: headlines and the plate. It is never body copy.
   ========================================================================== */

.t-display {
  font-family: var(--display);
  font-variation-settings: 'wdth' 125, 'wght' 800;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .96;
  text-wrap: balance;
}

/* Stencilled like a container number: caps, tracked, structural. */
.t-stencil {
  font-family: var(--display);
  font-variation-settings: 'wdth' 125, 'wght' 800;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1;
}

/* The readout register — equipment, tickets, timestamps, any number that is
   a measurement rather than a price. */
.t-data {
  font-family: var(--data);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.t-label {
  font-family: var(--data);
  font-weight: 600;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ==========================================================================
   The truck-door plate

   Every commercial vehicle in the US carries this block: legal name, the city
   and state it is domiciled in, and the USDOT number, in condensed caps on
   the cab door. It is the one piece of typography this entire industry shares,
   and it is mandated rather than designed — which is exactly why it carries
   conviction that a logo lockup cannot.
   ========================================================================== */

.plate {
  display: inline-block;
  padding-left: .85rem;
  border-left: 3px solid currentColor;
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.22;
  letter-spacing: .03em;
  font-size: .74rem;
}
.plate b { display: block; font-size: .92rem; letter-spacing: .02em; font-weight: 800; }
.plate span { display: block; opacity: .62; }
.plate .plate-reg { font-family: var(--data); font-size: .6rem; letter-spacing: .08em; opacity: .5; }

/* ==========================================================================
   Night shift — the SnapLogistics surface
   ========================================================================== */

/* ---- reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; display: block; }

body.os {
  background: var(--asphalt);
  color: var(--chalk);
  font-family: var(--body);
  /* A yard is lit from a pole, not evenly. The ground is never flat. */
  background-image:
    radial-gradient(60rem 40rem at 78% -8%, rgba(255,169,46,.09), transparent 62%),
    radial-gradient(48rem 34rem at 4% 12%, rgba(203,249,76,.045), transparent 60%);
  background-attachment: fixed;
}

.os ::selection { background: var(--sodium); color: var(--asphalt); }

.os-wrap { width: min(1180px, 100% - 3rem); margin-inline: auto; }
.os-narrow { width: min(760px, 100% - 3rem); margin-inline: auto; }

.os-sec { padding: clamp(3.2rem, 6vw, 5.5rem) 0; position: relative; }
.os-sec + .os-sec { border-top: 1px solid var(--weld); }

.os h1, .os h2, .os h3 { font-family: var(--display); margin: 0; }
.os h1 {
  font-variation-settings: 'wdth' 125, 'wght' 800;
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  letter-spacing: -.035em; line-height: .95; text-wrap: balance;
}
.os h2 {
  font-variation-settings: 'wdth' 125, 'wght' 800;
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  letter-spacing: -.032em; line-height: 1; text-wrap: balance;
}
.os h3 { font-variation-settings: 'wdth' 112, 'wght' 800; font-size: 1.05rem; letter-spacing: -.01em; }
.os p { margin: 0 0 1rem; color: var(--zinc); line-height: 1.6; }
.os p.lead { font-size: 1.08rem; line-height: 1.55; color: #B9C2C7; max-width: 46em; }
.os a { color: inherit; }

/* ---- the live strip: local time and yard conditions ------------------ */
.os-strip {
  border-bottom: 1px solid var(--weld);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
}
.os-strip-in {
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
  padding: .55rem 0;
  font-family: var(--data); font-size: .64rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--zinc-d);
}
.os-strip b { color: var(--zinc); font-weight: 400; }
.os-live { display: inline-flex; align-items: center; gap: .45rem; color: var(--live); }
.os-live i {
  width: 6px; height: 6px; border-radius: 99px; background: var(--live);
  box-shadow: 0 0 0 3px rgba(203,249,76,.16);
  animation: os-pulse 2.6s var(--ease) infinite;
}
@keyframes os-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ---- nav -------------------------------------------------------------- */
.os-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10,12,13,.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--weld);
}
.os-nav-in { display: flex; align-items: center; gap: 1.6rem; padding: .75rem 0; }
.os-nav a.os-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--chalk); }
.os-mark {
  width: 30px; height: 30px; flex: none; border-radius: 6px;
  background: var(--sodium); color: var(--asphalt);
  display: grid; place-items: center;
  font-family: var(--display); font-variation-settings: 'wdth' 125, 'wght' 900;
  font-size: .95rem;
}
.os-brand-name {
  font-family: var(--display); font-variation-settings: 'wdth' 112, 'wght' 800;
  font-size: 1.02rem; letter-spacing: -.01em;
}
.os-brand-name em { font-style: normal; color: var(--sodium); }
.os-links { display: flex; gap: .2rem; margin-left: auto; }
.os-links a {
  padding: .45rem .7rem; border-radius: 6px; text-decoration: none;
  font-size: .86rem; font-weight: 500; color: var(--zinc);
  transition: color .14s, background .14s;
}
.os-links a:hover { color: var(--chalk); background: rgba(255,255,255,.05); }
.os-links a.on { color: var(--chalk); background: transparent; box-shadow: inset 0 -2px 0 var(--sodium); border-radius: 0; }
.os-nav-cta { display: flex; gap: .5rem; align-items: center; }

/* ---- buttons ---------------------------------------------------------- */
.os-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .62rem 1.15rem; border-radius: 7px; cursor: pointer;
  font-family: var(--body); font-size: .9rem; font-weight: 600;
  text-decoration: none; border: 1px solid transparent;
  transition: transform .12s var(--ease), background .14s, border-color .14s, color .14s;
}
.os-btn:active { transform: translateY(1px); }
.os-btn-primary { background: var(--sodium); color: var(--asphalt); }
.os-btn-primary:hover { background: #FFBC55; }
.os-btn-ghost { border-color: var(--weld); color: var(--chalk); }
.os-btn-ghost:hover { border-color: var(--zinc); background: rgba(255,255,255,.04); }
.os-btn-lg { padding: .85rem 1.5rem; font-size: .98rem; }
.os-btn-sm { padding: .4rem .75rem; font-size: .82rem; }

/* ---- the dispatch board: the product, used as the hero ---------------- */
.os-board {
  border: 1px solid var(--weld); border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, #171C1F, #0D1012);
  box-shadow:
    0 40px 90px -35px rgba(0,0,0,.95),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 1px 0 rgba(255,255,255,.07) inset;
}
.os-board-head {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .95rem; border-bottom: 1px solid var(--weld);
  background: rgba(0,0,0,.25);
}
.os-board-head .t-label { color: var(--zinc-d); }
.os-board-head .os-live { margin-left: auto; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }

.os-row {
  display: grid; grid-template-columns: 3.4rem 1fr auto;
  gap: .85rem; align-items: center;
  padding: .72rem .95rem; border-bottom: 1px solid rgba(255,255,255,.045);
  transition: background .4s var(--ease);
}
.os-row:nth-child(even) { background: rgba(255,255,255,.012); }
.os-row:last-of-type { border-bottom: 0; }
.os-row-t { font-family: var(--data); font-size: .68rem; color: var(--zinc-d); letter-spacing: -.02em; }
.os-row-j { min-width: 0; }
.os-row-j b {
  display: block; font-size: .87rem; font-weight: 600; color: var(--chalk);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.os-row-j span { font-family: var(--data); font-size: .6rem; color: var(--zinc-d); letter-spacing: .02em; }

/* Status is carried by a chip whose colour means one thing each. */
.os-chip {
  font-family: var(--data); font-size: .56rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .26rem .5rem; border-radius: 4px; white-space: nowrap;
  border: 1px solid transparent;
}
.os-chip-done { color: var(--zinc-d); border-color: var(--weld); }
.os-chip-live { color: var(--live); border-color: rgba(203,249,76,.35); background: rgba(203,249,76,.08); }
.os-chip-next { color: var(--sodium); border-color: rgba(255,169,46,.3); background: rgba(255,169,46,.07); }
.os-chip-hold { color: var(--zinc); border-color: var(--weld); }

/* The one orchestrated moment: on load, a stop advances. The product
   demonstrating itself beats a paragraph describing it. */
.os-row.os-advancing { background: rgba(203,249,76,.06); }

.os-board-foot {
  display: flex; gap: 1.6rem; flex-wrap: wrap;
  padding: .75rem .95rem; border-top: 1px solid var(--weld);
  background: rgba(0,0,0,.22);
  font-family: var(--data); font-size: .62rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--zinc-d);
}
.os-board-foot b { color: var(--chalk); font-weight: 400; }

/* ---- a document, sitting on the dark ---------------------------------- */
.os-ticket {
  background: var(--ticket); color: var(--ink);
  border-radius: 4px; padding: 1.1rem 1.2rem;
  box-shadow: 0 22px 50px -24px rgba(0,0,0,.85);
  /* Torn top edge, the way a ticket comes off the roll. */
  clip-path: polygon(0 6px, 3% 0, 6% 6px, 9% 0, 12% 6px, 15% 0, 18% 6px, 21% 0,
    24% 6px, 27% 0, 30% 6px, 33% 0, 36% 6px, 39% 0, 42% 6px, 45% 0, 48% 6px,
    51% 0, 54% 6px, 57% 0, 60% 6px, 63% 0, 66% 6px, 69% 0, 72% 6px, 75% 0,
    78% 6px, 81% 0, 84% 6px, 87% 0, 90% 6px, 93% 0, 96% 6px, 100% 0,
    100% 100%, 0 100%);
}
.os-ticket-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .32rem 0; font-family: var(--data); font-size: .68rem;
  border-bottom: 1px dotted rgba(0,0,0,.16);
}
.os-ticket-row:last-child { border-bottom: 0; }
.os-ticket-row b { font-weight: 600; }
.os-ticket-total { border-top: 1.5px solid var(--ink); margin-top: .35rem; padding-top: .5rem; }

/* ---- capability grid --------------------------------------------------- */
.os-grid { display: grid; gap: 1px; background: var(--weld); border: 1px solid var(--weld); border-radius: 12px; overflow: hidden; }
.os-grid-3 { grid-template-columns: repeat(3, 1fr); }
.os-grid-2 { grid-template-columns: repeat(2, 1fr); }
.os-cell {
  background: var(--yard); padding: 1.5rem 1.4rem;
  display: grid; gap: .45rem; align-content: start;
  transition: background .18s;
}
.os-cell:hover { background: var(--kerb); }
.os-cell .t-label { color: var(--sodium); }
.os-cell h3 { color: var(--chalk); }
.os-cell p { margin: 0; font-size: .89rem; }

/* ---- a number that carries weight -------------------------------------- */
.os-figure {
  font-family: var(--display); font-variation-settings: 'wdth' 125, 'wght' 800;
  font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -.045em; line-height: 1;
  color: var(--chalk);
}
.os-figure sup { font-size: .42em; vertical-align: super; color: var(--sodium); font-weight: 800; }

/* ---- footer ------------------------------------------------------------ */
.os-foot { border-top: 1px solid var(--weld); padding: 2.6rem 0 1.8rem; background: rgba(0,0,0,.3); }
.os-foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.os-foot h5 {
  font-family: var(--data); font-size: .6rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--zinc-d);
  margin: 0 0 .7rem;
}
.os-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.os-foot a { color: var(--zinc); text-decoration: none; font-size: .87rem; }
.os-foot a:hover { color: var(--sodium); }
.os-foot-base {
  display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center;
  margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--weld);
  font-family: var(--data); font-size: .6rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--zinc-d);
}
.os-foot-base .powered-by { margin-left: auto; }
.os .plate { color: var(--sodium); }

/* ---- page-level arrangements ------------------------------------------- *
 * The hero is 5:6 rather than centred: the claim is the smaller half and the
 * board is the larger one, because the board is the argument.               */
.os-hero {
  display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.os-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 3.6rem); align-items: start; }

.os-cell-link { text-decoration: none; }
.os-cell-link h3 { color: var(--chalk); transition: color .16s; }
.os-cell-link:hover h3 { color: var(--sodium); }
.os-cell-link:focus-visible { outline: 2px solid var(--sodium); outline-offset: -2px; }

.os-sec-tight { padding-block: clamp(2rem, 3.5vw, 3rem); }
.os-figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--weld); }
.os-figures > div {
  display: grid; gap: .5rem; align-content: start;
  background: var(--asphalt); padding: 0 1.4rem 0 0;
}
.os-figures > div + div { padding-left: 1.4rem; }
.os-figures .t-label { color: var(--zinc-d); line-height: 1.5; max-width: 15em; }

/* A list of refusals. The rule is what matters, so the rule is the marker. */
.os-never { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0; }
.os-never li {
  padding: .6rem 0 .6rem 1.7rem; border-top: 1px solid var(--weld);
  font-size: .87rem; color: var(--zinc); position: relative;
}
.os-never li:last-child { border-bottom: 1px solid var(--weld); }
.os-never li::before {
  content: '—'; position: absolute; left: 0; top: .6rem;
  color: var(--rust); font-family: var(--data); font-size: .8rem;
}

.os-cta { border-top: 1px solid var(--weld); }
.os-cta h2 { max-width: 14em; margin-inline: auto; }

/* ---- pricing ------------------------------------------------------------ *
 * A plan is identified by its truck-door plate: the same block of condensed
 * caps a vehicle carries, reading name / seats / markets. What you are buying
 * is the size of the operation, so the operation is what the plate states.   */
.os-bill {
  display: inline-flex; gap: 2px; margin-top: 1.8rem; padding: 3px;
  background: var(--yard); border: 1px solid var(--weld); border-radius: 10px;
}
.os-bill button {
  font: inherit; font-family: var(--data); font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer; color: var(--zinc);
  background: transparent; border: 0; border-radius: 7px; padding: .5rem .9rem;
  transition: background .15s, color .15s;
}
.os-bill button:hover { color: var(--chalk); }
.os-bill button.on { background: var(--sodium); color: var(--asphalt); font-weight: 600; }
.os-bill button span { color: inherit; opacity: .72; }
.os-bill button:focus-visible { outline: 2px solid var(--sodium); outline-offset: 2px; }

.os-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--weld);
  border: 1px solid var(--weld); border-radius: 14px; overflow: hidden; }
.os-plan {
  background: var(--yard); padding: 1.6rem 1.35rem 1.8rem;
  display: flex; flex-direction: column; position: relative;
}
.os-plan.pop { background: var(--kerb); }
.os-plan-tag {
  position: absolute; top: 0; left: 0; right: 0;
  font-family: var(--data); font-size: .56rem; letter-spacing: .11em; text-transform: uppercase;
  background: var(--sodium); color: var(--asphalt); text-align: center; padding: .3rem;
}
.os-plan.pop { padding-top: 2.4rem; }
.plate-plan { margin-bottom: .9rem; }
.os-plan-for { font-size: .84rem; color: var(--zinc); line-height: 1.5; margin: 0 0 1.2rem; min-height: 3.8em; }
.os-plan-price {
  font-family: var(--display); font-variation-settings: 'wdth' 125, 'wght' 800;
  font-size: 2.6rem; line-height: 1; letter-spacing: -.04em; color: var(--chalk);
}
.os-plan-price span { font-size: .45em; vertical-align: .85em; color: var(--sodium); }
.os-plan-price em { font-style: normal; font-size: .3em; color: var(--zinc-d); letter-spacing: 0; }
.os-plan-terms {
  font-family: var(--data); font-size: .6rem; letter-spacing: .04em;
  color: var(--zinc-d); margin: .5rem 0 1.3rem; min-height: 3em; line-height: 1.5;
}
.os-btn-block { display: flex; width: 100%; justify-content: center; }
.os-plan-feats { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: 0; flex: 0 0 auto; }
.os-plan-feats li {
  font-size: .82rem; color: var(--zinc); line-height: 1.45;
  padding: .5rem 0 .5rem 1.2rem; border-top: 1px solid rgba(255,255,255,.055); position: relative;
}
.os-plan-feats li::before {
  content: '+'; position: absolute; left: 0; top: .48rem;
  font-family: var(--data); font-size: .72rem; color: var(--sodium);
}

/* ---- comparison table --------------------------------------------------- */
.os-cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.os-cmp { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .85rem; }
.os-cmp caption { text-align: left; color: var(--zinc-d); padding-bottom: .7rem; }
.os-cmp th, .os-cmp td { padding: .6rem .8rem; border-bottom: 1px solid var(--weld); text-align: center; }
.os-cmp thead th {
  font-family: var(--data); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--chalk); border-bottom-color: var(--zinc-d);
}
.os-cmp tbody th[scope="row"] { text-align: left; font-weight: 500; color: var(--zinc); font-family: var(--body); }
.os-cmp td { color: var(--chalk); font-variant-numeric: tabular-nums; }
.os-cmp .pop { background: rgba(255,169,46,.055); }
.os-cmp tbody tr:hover td, .os-cmp tbody tr:hover th { background: rgba(255,255,255,.022); }
.os-cmp tbody tr:hover .pop { background: rgba(255,169,46,.085); }

/* ---- departments -------------------------------------------------------- *
 * Each block is a department of the business, headed by its plate and listing
 * what it does as a run sheet — the printed sheet a crew is handed, one line
 * per thing, ruled between.                                                  */
.os-depts { display: grid; gap: 1px; background: var(--weld); border: 1px solid var(--weld); border-radius: 14px; overflow: hidden; }
.os-dept {
  background: var(--yard); padding: 1.8rem 1.6rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2.5rem; align-items: start;
}
.os-dept:nth-child(even) { background: #161B1D; }
.os-dept-head { display: grid; gap: 1rem; align-content: start; }
.os-dept-head h3 { color: var(--chalk); font-size: 1.35rem; font-variation-settings: 'wdth' 125, 'wght' 800; letter-spacing: -.025em; margin-bottom: .5rem; }
.os-dept-head p { font-size: .89rem; margin: 0; }

.os-runsheet { list-style: none; margin: 0; padding: 0; columns: 1; }
.os-runsheet li {
  font-size: .85rem; color: var(--zinc); line-height: 1.45;
  padding: .46rem 0 .46rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.05);
  position: relative;
}
.os-runsheet li:first-child { border-top: 1px solid rgba(255,255,255,.05); }
.os-runsheet li::before {
  content: '✓'; position: absolute; left: 0; top: .44rem;
  font-family: var(--data); font-size: .68rem; color: var(--live); opacity: .65;
}

/* ---- questions ---------------------------------------------------------- */
.os-qa { border-bottom: 1px solid var(--weld); }
.os-qa:first-of-type { border-top: 1px solid var(--weld); }
.os-qa summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font-family: var(--display); font-variation-settings: 'wdth' 112, 'wght' 700;
  font-size: 1.08rem; letter-spacing: -.015em; color: var(--chalk);
  display: flex; gap: .9rem; align-items: baseline;
}
.os-qa summary::-webkit-details-marker { display: none; }
.os-qa summary:hover { color: var(--sodium); }
.os-qa summary:focus-visible { outline: 2px solid var(--sodium); outline-offset: -2px; }
.os-qa-n { font-family: var(--data); font-size: .66rem; color: var(--zinc-d); flex: 0 0 auto; }
.os-qa summary::after {
  content: '+'; position: absolute; right: .4rem; top: 1rem;
  font-family: var(--data); font-size: 1.1rem; color: var(--sodium);
  transition: transform .2s var(--ease);
}
.os-qa[open] summary::after { content: '−'; }
.os-qa-a { padding: 0 2.5rem 1.3rem 2.6rem; }
.os-qa-a p { margin: 0; font-size: .93rem; max-width: 42em; }
.os-inline { color: var(--sodium); text-decoration: underline; text-underline-offset: 2px; }
.os-inline:hover { color: var(--chalk); }

@media (max-width: 900px) {
  .os-hero { grid-template-columns: 1fr; }
  .os-dept { grid-template-columns: 1fr; }
  .os-plans { grid-template-columns: repeat(2, 1fr); }
  .os-split { grid-template-columns: 1fr; }
  .os-figures { grid-template-columns: repeat(2, 1fr); }
  .os-grid-3 { grid-template-columns: 1fr; }
  .os-grid-2 { grid-template-columns: 1fr; }
  .os-foot-grid { grid-template-columns: 1fr 1fr; }
  .os-links { display: none; }
}
@media (max-width: 560px) {
  .os-foot-grid { grid-template-columns: 1fr; }
  .os-plans { grid-template-columns: 1fr; }
  .os-figures { grid-template-columns: 1fr; }
  .os-foot-base .powered-by { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .os-live i { animation: none; }
  .os-row, .os-btn { transition: none; }
}

/* ==========================================================================
   DAYLIGHT — the page a customer reads.

   Inverted ground, identical bones. Same Archivo at wdth 125 for display, same
   Public Sans, same Martian Mono readout, same truck-door plate. What changes
   is what is heavy: on SnapLogistics the document is the bright object on a dark desk;
   here the board is the dark object on a light one. The customer sees the same
   board their job sits on, from the other side.

   --field is the tenant's own brand colour, set per tenant at runtime. Nothing
   below names a colour that belongs to a specific business.
   ========================================================================== */

body.site {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.site a { color: inherit; text-decoration: none; }
.site h1, .site h2, .site h3, .site h4 { font-family: var(--display); margin: 0; color: var(--ink); }
.site h1 {
  font-variation-settings: 'wdth' 125, 'wght' 800;
  font-size: clamp(2.3rem, 4.8vw, 3.9rem);
  letter-spacing: -.038em; line-height: .98; text-wrap: balance;
}
.site h2 {
  font-variation-settings: 'wdth' 125, 'wght' 800;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  letter-spacing: -.032em; line-height: 1.04; text-wrap: balance;
}
.site h3 { font-variation-settings: 'wdth' 112, 'wght' 700; font-size: 1.12rem; letter-spacing: -.018em; }
.site p { margin: 0 0 1rem; color: var(--ink-2); }
.site p.lead { font-size: 1.1rem; line-height: 1.55; color: var(--ink-2); max-width: 44em; }
.site .t-label { color: var(--ink-3); }

.site-wrap { width: min(1180px, 100% - 3rem); margin-inline: auto; }
.site-narrow { width: min(720px, 100% - 3rem); margin-inline: auto; }
.site-sec { padding: clamp(3rem, 5.5vw, 5rem) 0; position: relative; }
.site-sec + .site-sec { border-top: 1px solid var(--rule); }
.site-sec-wash { background: var(--paper-2); }

/* ---- the plate, in daylight -------------------------------------------- *
 * On a tenant site this is not a motif: it is the business's actual
 * regulatory identity, the block every commercial vehicle carries by law.   */
.site .plate { color: var(--ink); border-left-color: var(--field); }
.site .plate .plate-reg { color: var(--ink-3); }

/* ---- header ------------------------------------------------------------ */
.site-bar {
  font-family: var(--data); font-size: .64rem; letter-spacing: .07em; text-transform: uppercase;
  background: var(--ink); color: rgba(255,255,255,.72);
}
.site-bar-in { display: flex; align-items: center; gap: 1.3rem; padding: .5rem 0; flex-wrap: wrap; }
.site-bar b { color: #fff; font-weight: 600; }
.site-bar a { color: #fff; }

.site-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(252,251,249,.93); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-nav-in { display: flex; align-items: center; gap: 1.6rem; padding: .85rem 0; }
.site-brand { display: flex; align-items: center; gap: .6rem; margin-right: auto; }
.site-logo {
  width: 30px; height: 30px; border-radius: 7px; background: var(--field); color: #fff;
  display: grid; place-items: center;
  font-family: var(--display); font-variation-settings: 'wdth' 125, 'wght' 900; font-size: 1rem;
}
.site-brand-name {
  font-family: var(--display); font-variation-settings: 'wdth' 112, 'wght' 800;
  font-size: 1.12rem; letter-spacing: -.028em; color: var(--ink);
}
.site-brand-name em { font-style: normal; color: var(--field); }
.site-links { display: flex; gap: .25rem; align-items: center; }
.site-links a {
  font-size: .87rem; font-weight: 500; color: var(--ink-2);
  padding: .45rem .7rem; border-radius: 7px; transition: background .15s, color .15s;
}
.site-links a:hover { background: var(--rule-2); color: var(--ink); }
.site-links a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--field); border-radius: 0; }
.site-nav-cta { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; }

/* ---- buttons ----------------------------------------------------------- */
.site-btn {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font-family: var(--body); font-weight: 600; font-size: .92rem; line-height: 1;
  padding: .78rem 1.25rem; border-radius: 9px; border: 1px solid transparent;
  transition: transform .12s var(--ease), background .15s, border-color .15s;
}
.site-btn:active { transform: translateY(1px); }
.site-btn:focus-visible { outline: 2px solid var(--field); outline-offset: 2px; }
.site-btn-primary { background: var(--field); color: #fff; }
.site-btn-primary:hover { filter: brightness(1.08); color: #fff; }
.site-btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.site-btn-ghost:hover { background: var(--ink); color: var(--paper); }
.site-btn-lg { padding: .95rem 1.6rem; font-size: 1rem; }
.site-btn-sm { padding: .55rem .9rem; font-size: .83rem; }

/* ---- hero -------------------------------------------------------------- */
.site-hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.site-hero-claim { max-width: 18em; }
.site-proof {
  display: flex; gap: 1.8rem; flex-wrap: wrap; margin-top: 1.8rem;
  padding-top: 1.3rem; border-top: 1px solid var(--rule);
  font-size: .84rem; color: var(--ink-3);
}
.site-proof b { color: var(--ink); font-weight: 700; }

/* ---- the customer's own board ------------------------------------------ *
 * The one dark object on a light page. Same component as the platform hero,
 * read from the other side: this is the customer's job, on the crew's board. */
.site-board {
  background: var(--asphalt); border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(20,24,28,.5), 0 0 0 1px rgba(20,24,28,.08);
}
.site-board .os-board-head { border-bottom: 1px solid var(--weld); background: rgba(255,255,255,.03); }
.site-board .os-row { border-bottom-color: rgba(255,255,255,.06); }
.site-board .os-row-j b { color: var(--chalk); }
.site-board .os-board-foot { border-top: 1px solid var(--weld); }

/* ---- cards & grids ----------------------------------------------------- */
.site-grid { display: grid; gap: 1.1rem; }
.site-grid-2 { grid-template-columns: repeat(2, 1fr); }
.site-grid-3 { grid-template-columns: repeat(3, 1fr); }
.site-grid-4 { grid-template-columns: repeat(4, 1fr); }
.site-card {
  background: #fff; border: 1px solid var(--rule); border-radius: 12px;
  padding: 1.4rem 1.3rem; display: grid; gap: .5rem; align-content: start;
  transition: border-color .16s, transform .16s var(--ease), box-shadow .16s;
}
.site-card p { margin: 0; font-size: .9rem; }
a.site-card:hover { border-color: var(--field); transform: translateY(-2px); box-shadow: 0 10px 26px -14px rgba(20,24,28,.3); }
a.site-card:focus-visible { outline: 2px solid var(--field); outline-offset: 2px; }
.site-card-price {
  font-family: var(--data); font-size: .74rem; color: var(--field); font-weight: 600;
  margin-top: .2rem;
}

/* ---- photographs ------------------------------------------------------- *
 * Real jobs, real trucks. A photograph earns its place by showing the work,
 * so it is never decorative and never tinted.                               */
.site-photo { border-radius: 12px; overflow: hidden; background: var(--rule-2); position: relative; }
.site-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site-photo-cap {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: 1.4rem .9rem .7rem;
  background: linear-gradient(transparent, rgba(10,12,13,.82));
  font-family: var(--data); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.9);
}
.site-photo-tall { aspect-ratio: 3 / 4; }
.site-photo-wide { aspect-ratio: 16 / 9; }

/* ---- the steps --------------------------------------------------------- *
 * A real sequence: the customer genuinely does these in order, so they are
 * numbered and ruled like the stages of a job.                              */
.site-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--ink); }
.site-step { padding: 1.3rem 1.2rem 1.4rem 0; border-right: 1px solid var(--rule); }
.site-step:last-child { border-right: 0; }
.site-step + .site-step { padding-left: 1.2rem; }
.site-step-n {
  font-family: var(--data); font-size: .68rem; font-weight: 600; color: var(--field);
  letter-spacing: .08em; display: block; margin-bottom: .55rem;
}
.site-step h3 { margin-bottom: .35rem; }
.site-step p { font-size: .87rem; margin: 0; }

/* ---- quote ticket ------------------------------------------------------ */
.site-quote {
  background: var(--ticket); border: 1px solid var(--rule); border-radius: 4px;
  padding: 1.4rem 1.3rem; font-family: var(--data); font-size: .78rem; color: var(--ink);
}
.site-quote-row { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; }
.site-quote-row span { color: var(--ink-3); }
.site-quote-total { border-top: 1.5px solid var(--ink); margin-top: .4rem; padding-top: .55rem; font-weight: 600; }

/* ---- reviews ----------------------------------------------------------- */
.site-review { background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 1.4rem 1.3rem; }
.site-review h3 { margin: 0 0 .5rem; font-size: 1rem; }
.site-review blockquote { margin: 0 0 1rem; font-size: .95rem; line-height: 1.6; color: var(--ink); }
.site-review footer { font-family: var(--data); font-size: .64rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.site-stars { color: var(--field); letter-spacing: .12em; font-size: .85rem; margin-bottom: .6rem; }

/* ---- footer ------------------------------------------------------------ */
.site-foot { background: var(--ink); color: rgba(255,255,255,.72); padding: 3rem 0 1.6rem; }
.site-foot h5 {
  font-family: var(--data); font-size: .62rem; letter-spacing: .11em; text-transform: uppercase;
  color: rgba(255,255,255,.45); margin: 0 0 .7rem; font-weight: 400;
}
.site-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.site-foot a { color: rgba(255,255,255,.72); font-size: .88rem; }
.site-foot a:hover { color: #fff; }
.site-foot .plate { color: #fff; border-left-color: var(--field); }
.site-foot .plate .plate-reg { color: rgba(255,255,255,.5); }
.site-foot-base {
  display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center;
  margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12);
  font-family: var(--data); font-size: .6rem; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.45);
}
.site-foot-base .powered-by { margin-left: auto; }

/* ---- local conditions --------------------------------------------------- */
.site-local { display: flex; align-items: center; gap: .55rem; }

@media (max-width: 900px) {
  .site-hero { grid-template-columns: 1fr; }
  .site-grid-3, .site-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .site-steps { grid-template-columns: repeat(2, 1fr); }
  .site-step { border-bottom: 1px solid var(--rule); }
  .site-step:nth-child(2n) { border-right: 0; }
  .site-foot-grid { grid-template-columns: 1fr 1fr; }
  .site-links { display: none; }
}
@media (max-width: 560px) {
  /* A phone fits one action, and it is the one that books a job. The others
     are reachable from the footer; a nav that overflows the viewport is
     worse than a nav with fewer buttons. */
  .site-nav-cta > :not(:last-child) { display: none; }
  .site-grid-2, .site-grid-3, .site-grid-4 { grid-template-columns: 1fr; }
  .site-steps { grid-template-columns: 1fr; }
  .site-step { border-right: 0; padding-left: 0 !important; }
  .site-foot-grid { grid-template-columns: 1fr; }
  .site-foot-base .powered-by { margin-left: 0; }
}

/* ==========================================================================
   THE ESTIMATOR

   The one component a customer actually operates, and the hero of every tenant
   site. It is styled as a form on paper — a quote pad on a clipboard — because
   that is what it is doing: taking a photograph of a pile and writing a price
   against it. It sits inside .site, so it borrows the tenant's own --field.
   ========================================================================== */

.site .est { max-width: none; margin: 0; }
.site .est-pad {
  background: #fff; border: 1px solid var(--rule); border-radius: 14px;
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
  box-shadow: 0 18px 44px -26px rgba(20,24,28,.34);
}

/* Three steps, shown as a rule that fills — the progress is the paper edge. */
.site .est-rail { display: flex; gap: .3rem; margin-bottom: 1.5rem; }
.site .est-rail i {
  flex: 1; height: 3px; border-radius: 2px; background: var(--rule); display: block;
  transition: background .3s var(--ease);
}
.site .est-rail i.done { background: var(--field); }
.site .est-rail i.cur { background: var(--ink); }

.site .est-head { margin-bottom: 1.3rem; }
.site .est-head h2 {
  font-family: var(--display); font-variation-settings: 'wdth' 125, 'wght' 800;
  font-size: clamp(1.4rem, 2.3vw, 1.85rem); letter-spacing: -.03em; line-height: 1.05;
  margin: 0 0 .5rem; color: var(--ink);
}
.site .est-head .lead { margin: 0; font-size: .93rem; color: var(--ink-2); max-width: 34em; }
.site .est-head.text-center { text-align: center; }

/* The drop zone. A dashed box is the one place a dashed box is literal: it is
   the empty square on a form where something is meant to be attached. */
.site .est-drop {
  display: grid; gap: .5rem; justify-items: center; text-align: center;
  padding: 2rem 1.2rem; min-height: 158px; align-content: center;
  border: 1.5px dashed var(--rule); border-radius: 11px; background: var(--paper-2);
  cursor: pointer; transition: border-color .16s, background .16s;
}
.site .est-drop:hover, .site .est-drop:focus-within { border-color: var(--field); background: #fff; }
.site .est-drop.has { padding: 0; border-style: solid; min-height: 0; overflow: hidden; }
.site .est-drop.has img { display: block; width: 100%; max-height: 320px; object-fit: cover; }
.site .est-drop-icon { font-size: 1.9rem; line-height: 1; }
.site .est-drop-main {
  font-family: var(--display); font-variation-settings: 'wdth' 112, 'wght' 700;
  font-size: 1.02rem; color: var(--ink);
}
.site .est-drop-sub { font-size: .8rem; color: var(--ink-3); max-width: 26em; line-height: 1.45; }
.site .est-drop-swap {
  display: block; width: 100%; padding: .55rem; border: 0; border-top: 1px solid var(--rule);
  background: #fff; cursor: pointer; font: inherit; font-size: .8rem; color: var(--field); font-weight: 600;
}

.site .est-alt { margin-top: .9rem; }
.site .est-alt summary {
  cursor: pointer; list-style: none; font-size: .84rem; color: var(--ink-3);
  padding: .4rem 0;
}
.site .est-alt summary:hover { color: var(--field); }
.site .est-alt summary::-webkit-details-marker { display: none; }

/* Size bands. One tap each, so each is a target, not a radio button. */
.site .est-bands { display: grid; gap: .45rem; }
.site .est-band {
  display: grid; gap: .1rem; text-align: left; width: 100%; cursor: pointer;
  padding: .75rem .9rem; border: 1px solid var(--rule); border-radius: 9px;
  background: #fff; font: inherit; transition: border-color .14s, background .14s;
}
.site .est-band:hover { border-color: var(--field); }
.site .est-band.sel { border-color: var(--field); background: var(--paper-2); box-shadow: inset 3px 0 0 var(--field); }
.site .est-band:focus-visible { outline: 2px solid var(--field); outline-offset: 2px; }
.site .est-band b { font-size: .92rem; font-weight: 600; color: var(--ink); }
.site .est-band span { font-size: .79rem; color: var(--ink-3); }

.site .est-items { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.site .est-item {
  font-family: var(--data); font-size: .66rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 99px; background: var(--paper-2);
  border: 1px solid var(--rule); color: var(--ink-2);
}

/* The result: a quote written on a pad, ruled like one. */
.site .est-lines { border-top: 1.5px solid var(--ink); margin-top: 1rem; }
.site .est-line {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .62rem 0; border-bottom: 1px solid var(--rule);
  font-size: .89rem; color: var(--ink-2);
}
.site .est-line b.num {
  white-space: nowrap; font-family: var(--data); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.site .est-total {
  border-bottom: 0; border-top: 1.5px solid var(--ink); padding-top: .85rem;
  color: var(--ink); font-weight: 600;
}
.site .est-total b.num {
  font-family: var(--display); font-variation-settings: 'wdth' 125, 'wght' 800;
  font-size: 1.5rem; letter-spacing: -.03em;
}

.site .est-flags, .site .est-assume {
  margin-top: 1rem; padding: .85rem 1rem; border-radius: 9px; font-size: .84rem;
}
.site .est-flags { background: #FDF3EF; border: 1px solid #F0D3C7; color: #7A3A22; }
.site .est-assume { background: var(--paper-2); border: 1px solid var(--rule); color: var(--ink-2); }
.site .est-flags b, .site .est-assume b {
  display: block; font-family: var(--display); font-variation-settings: 'wdth' 112, 'wght' 700;
  margin-bottom: .35rem;
}
.site .est-flags ul, .site .est-assume ul { margin: 0; padding-left: 1.1rem; }
.site .est-flags li, .site .est-assume li { margin: .2rem 0; }
.site .est-flags .tiny, .site .est-assume .tiny { margin: .5rem 0 0; color: var(--ink-3); font-size: .78rem; }
.site .est-note-band {
  margin-top: .9rem; padding: .7rem .9rem; border-radius: 8px;
  background: var(--paper-2); border: 1px solid var(--rule);
  font-size: .82rem; color: var(--ink-2);
}

/* ---- form controls, in the tenant's own colour -------------------------- */
.site .field { display: grid; gap: .3rem; }
.site label { font-family: var(--body); text-transform: none; letter-spacing: normal;
  font-size: inherit; font-weight: inherit; color: inherit; margin-bottom: 0; }
.site .field > label, .site .field-label {
  display: block; font-family: var(--data); font-size: .62rem; letter-spacing: .09em;
  text-transform: uppercase; font-weight: 500; color: var(--ink-3); margin-bottom: .1rem;
}
.site input[type="text"], .site input[type="email"], .site input[type="tel"],
.site input[type="number"], .site input[type="date"], .site select, .site textarea {
  font: inherit; font-size: .93rem; width: 100%; color: var(--ink);
  padding: .68rem .8rem; border: 1px solid var(--rule); border-radius: 9px; background: #fff;
  transition: border-color .14s, box-shadow .14s;
}
.site textarea { min-height: 5.5rem; resize: vertical; }
.site input:focus, .site select:focus, .site textarea:focus {
  outline: 0; border-color: var(--field); box-shadow: 0 0 0 3px color-mix(in srgb, var(--field) 18%, transparent);
}
.site .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.site .field-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.site .hint { font-size: .8rem; color: var(--ink-3); }
.site .muted { color: var(--ink-3); }
.site .small { font-size: .84rem; }
.site .tiny { font-size: .76rem; }
.site .mono { font-family: var(--data); }
.site .text-center { text-align: center; }
.site .grow { flex: 1; }
.site .items { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.site .gap-sm { gap: .4rem; }
.site .mt-1 { margin-top: .5rem; } .site .mt-2 { margin-top: .9rem; } .site .mt-3 { margin-top: 1.3rem; }

/* The estimator asks for .btn; inside a tenant site it gets the site button. */
.site .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; cursor: pointer;
  font-family: var(--body); font-weight: 600; font-size: .92rem; line-height: 1;
  padding: .78rem 1.25rem; border-radius: 9px; border: 1px solid transparent;
  background: transparent; color: var(--ink); box-shadow: none;
  transition: transform .12s var(--ease), background .15s, border-color .15s, filter .15s;
}
.site .btn:active { transform: translateY(1px); }
.site .btn:focus-visible { outline: 2px solid var(--field); outline-offset: 2px; }
.site .btn-primary { background: var(--field); color: #fff; border-color: transparent; }
.site .btn-primary:hover { filter: brightness(1.08); color: #fff; background: var(--field); }
.site .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.site .btn-ghost:hover { background: var(--ink); color: var(--paper); }
.site .btn-field { background: var(--field); color: #fff; border-color: transparent; }
.site .btn-field:hover { filter: brightness(1.08); color: #fff; background: var(--field); }
.site .btn-quiet { background: #fff; color: var(--ink); border-color: var(--rule); }
.site .btn-quiet:hover { border-color: var(--ink); background: #fff; color: var(--ink); }
.site .btn-lg { padding: .95rem 1.6rem; font-size: 1rem; }
.site .btn-sm { padding: .55rem .9rem; font-size: .83rem; }
.site .btn-block { display: flex; width: 100%; }
.site .empty { display: grid; place-items: center; padding: 3rem 0; color: var(--ink-3); }

/* ==========================================================================
   The vocabulary the tenant pages were already written in, re-expressed in
   the new system. These pages keep their markup; only what the words mean
   changes. Nothing here introduces a shape the system does not already have.
   ========================================================================== */

.site .wrap { width: min(1180px, 100% - 3rem); margin-inline: auto; }
.site .wrap-narrow { width: min(760px, 100% - 3rem); margin-inline: auto; }
.site .sec { padding: clamp(3rem, 5.5vw, 5rem) 0; position: relative; }
.site .sec + .sec { border-top: 1px solid var(--rule); }
.site .sec-alt { background: var(--paper-2); }
.site .sec-first { padding-top: clamp(2.5rem, 4vw, 3.6rem); }

.site .sec-head { margin-bottom: 1.8rem; max-width: 46em; }
.site .sec-head.center { margin-inline: auto; text-align: center; }
.site .sec-head h1, .site .sec-head h2 { margin-bottom: .6rem; }
.site .sec-head .lead { margin: 0; }
.site .stamp {
  display: block; font-family: var(--data); font-size: .64rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--field);
  margin-bottom: .6rem;
}
.site .rule { border: 0; border-top: 1px solid var(--rule); margin: 1.6rem 0; }
.site .cta-band {
  padding: clamp(3rem, 5.5vw, 5rem) 0; border-top: 1px solid var(--rule);
  background: var(--paper-2); text-align: center;
}
.site .cta-band .lead { margin-inline: auto; }

/* ---- surfaces ----------------------------------------------------------- */
.site .panel, .site .card, .site .tile {
  background: #fff; border: 1px solid var(--rule); border-radius: 12px;
}
.site .panel-body, .site .card { padding: 1.4rem 1.3rem; }
.site a.card, .site a.tile { display: block; transition: border-color .16s, transform .16s var(--ease), box-shadow .16s; }
.site a.card:hover, .site a.tile:hover {
  border-color: var(--field); transform: translateY(-2px);
  box-shadow: 0 10px 26px -14px rgba(20,24,28,.3);
}
.site .grid { display: grid; gap: 1.1rem; }
.site .grid-2 { grid-template-columns: repeat(2, 1fr); }
.site .grid-3 { grid-template-columns: repeat(3, 1fr); }
.site .grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---- photographs -------------------------------------------------------- */
.site .photo { border-radius: 12px; overflow: hidden; background: var(--rule-2); position: relative; }
.site .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site .photo-4x3 { aspect-ratio: 4 / 3; }
.site .photo-16x9 { aspect-ratio: 16 / 9; }
.site .photo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.site .photo-cap {
  display: block; margin-top: .6rem;
  font-family: var(--data); font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.site .svc-photo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden;
  border: 1px solid var(--rule); border-radius: 12px; background: #fff;
}
.site .svc-photo .photo { border-radius: 0; height: 100%; min-height: 220px; aspect-ratio: auto; }
.site .svc-photo-body { padding: 1.6rem 1.5rem; align-self: center; }

/* ---- a real sequence, so it is numbered --------------------------------- */
.site .step { padding: 1.3rem 1.2rem 1.4rem 0; border-top: 2px solid var(--ink); }
.site .step h3 { margin: .4rem 0 .35rem; }
.site .step p { font-size: .88rem; margin: 0; }
.site .step .num, .site .step-n {
  font-family: var(--data); font-size: .68rem; font-weight: 600; color: var(--field);
  letter-spacing: .08em;
}

/* ---- feature rows ------------------------------------------------------- */
.site .feat-row {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.4rem 2.4rem;
  padding: 1.6rem 0; border-bottom: 1px solid var(--rule); align-items: start;
}
.site .feat-items { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.site .feat-items li, .site .feat-items > span {
  font-size: .87rem; color: var(--ink-2); line-height: 1.45;
  padding: .45rem 0 .45rem 1.4rem; border-bottom: 1px solid var(--rule-2); position: relative;
}
.site .feat-items li::before, .site .feat-items > span::before {
  content: '✓'; position: absolute; left: 0; top: .44rem;
  font-family: var(--data); font-size: .7rem; color: var(--field);
}
.site .feat-tag {
  display: inline-block; font-family: var(--data); font-size: .6rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
  padding: .26rem .55rem; border: 1px solid var(--rule); border-radius: 99px; background: var(--paper-2);
}

/* ---- partner strip ------------------------------------------------------ */
.site .strip { background: var(--paper-2); border-block: 1px solid var(--rule); padding: 1.4rem 0; }
.site .strip-in { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.site .strip-label {
  font-family: var(--data); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.site .strip-item { font-weight: 600; font-size: .92rem; color: var(--ink); }

/* ---- pills, badges and spinner ------------------------------------------ */
.site .pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--data); font-size: .62rem; letter-spacing: .07em; text-transform: uppercase;
  padding: .28rem .6rem; border-radius: 99px; border: 1px solid var(--rule);
  background: var(--paper-2); color: var(--ink-2);
}
.site .spinner {
  width: 18px; height: 18px; border-radius: 99px; display: inline-block;
  border: 2px solid var(--rule); border-top-color: var(--field);
  animation: site-spin .7s linear infinite;
}
@keyframes site-spin { to { transform: rotate(360deg); } }
.site .run-on { color: inherit; }
.site .mb-1 { margin-bottom: .5rem; } .site .mb-3 { margin-bottom: 1.3rem; }
.site .num { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .site .spinner { animation-duration: 2.4s; }
  .site a.card, .site a.tile, .site .site-card, .site .site-btn, .site .btn { transition: none; }
  .site a.card:hover, .site a.tile:hover, a.site-card:hover { transform: none; }
}
@media (max-width: 900px) {
  .site .grid-3, .site .grid-4, .site .photo-row { grid-template-columns: repeat(2, 1fr); }
  .site .feat-row, .site .svc-photo { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .site .grid-2, .site .grid-3, .site .grid-4, .site .photo-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   The remaining tenant components.
   ========================================================================== */

/* ---- the price book ----------------------------------------------------- *
 * This business publishes a price book, and says so. So the services list is
 * one: ruled rows, the price set right in tabular figures, nothing between the
 * name and the number.                                                       */
.site .svc-grid { border-top: 2px solid var(--ink); }
.site .svc {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: baseline;
  padding: 1rem 0; border-bottom: 1px solid var(--rule);
}
.site .svc h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.site .svc p { margin: 0; font-size: .88rem; color: var(--ink-2); max-width: 52em; }
.site .svc-price {
  font-family: var(--data); font-size: .92rem; font-weight: 600; color: var(--ink);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.site .svc-photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.site .svc-photo-body b {
  display: block; font-family: var(--display); font-variation-settings: 'wdth' 112, 'wght' 700;
  font-size: 1.05rem; margin-bottom: .35rem;
}
.site .svc-picks { display: grid; gap: .5rem; }

/* ---- coverage ----------------------------------------------------------- */
.site .areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.site .area { background: #fff; padding: 1.1rem 1.2rem; }
.site .area h4 { font-family: var(--display); font-variation-settings: 'wdth' 112, 'wght' 700;
  font-size: 1rem; margin: 0 0 .3rem; }
.site .area.planned { background: var(--paper-2); }
.site .cities { font-size: .84rem; color: var(--ink-3); line-height: 1.5; }

/* ---- how it works: a true sequence, so it is numbered ------------------- */
.site .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.site .steps .step { border-right: 1px solid var(--rule); padding-right: 1.2rem; }
.site .steps .step + .step { padding-left: 1.2rem; }
.site .steps .step:last-child { border-right: 0; }

/* ---- careers ------------------------------------------------------------ */
.site .role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.site .role-card { background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 1.4rem 1.3rem; }
.site .role-card h3 { margin-bottom: .4rem; }
.site .role-pay {
  font-family: var(--display); font-variation-settings: 'wdth' 125, 'wght' 800;
  font-size: 1.5rem; letter-spacing: -.03em; color: var(--ink); margin: .6rem 0 .2rem;
}
.site .role-meta { font-family: var(--data); font-size: .64rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); }

/* ---- booking wizard ----------------------------------------------------- */
.site .wiz { padding: clamp(2rem, 4vw, 3.2rem) 0; }
.site .wiz-inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: start; }
.site .wiz-main { background: #fff; border: 1px solid var(--rule); border-radius: 14px;
  padding: clamp(1.3rem, 2.4vw, 1.9rem); box-shadow: 0 18px 44px -26px rgba(20,24,28,.32); }
.site .wiz-side { position: sticky; top: 5rem; display: grid; gap: 1rem; }
.site .wiz-steps { display: flex; gap: .3rem; margin-bottom: 1.4rem; }
.site .wiz-steps i, .site .wiz-steps span {
  flex: 1; height: 3px; border-radius: 2px; background: var(--rule);
}
.site .wiz-steps .done, .site .wiz-steps .on { background: var(--field); }

/* ---- sign in / sign up -------------------------------------------------- */
.site .auth-page { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.site .auth-main { display: grid; place-items: center; padding: 2.5rem 1.5rem; }
.site .auth-card { width: min(420px, 100%); display: grid; gap: 1rem; }
.site .auth-aside {
  background: var(--asphalt); color: var(--chalk); padding: 3rem 2.5rem;
  display: grid; align-content: center; gap: 1rem;
}
.site .auth-aside h2, .site .auth-aside h1 { color: var(--chalk); }
.site .auth-aside p { color: var(--zinc); }
.site .auth-aside .plate { color: var(--sodium); }
.site .demo-creds {
  font-family: var(--data); font-size: .74rem; line-height: 1.7;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 9px; padding: .8rem .9rem;
  color: var(--ink-2);
}
.site .app-credit { font-family: var(--data); font-size: .64rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); }

/* ---- local conditions --------------------------------------------------- */
.site .local-strip { background: var(--paper-2); border-block: 1px solid var(--rule); padding: .9rem 0; }
.site .local-in { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap;
  font-size: .87rem; color: var(--ink-2); }
.site .local-icon { font-size: 1.3rem; line-height: 1; }
.site .local-wx b, .site .local-where b { color: var(--ink); }
.site .local-note { color: var(--ink-3); font-size: .84rem; }

/* ---- an inverted band, where a page wants one --------------------------- */
.site .sec-dark { background: var(--asphalt); color: var(--chalk); border-color: var(--weld); }
.site .sec-dark h1, .site .sec-dark h2,
.site .sec-dark h3, .site .sec-dark h4 { color: var(--chalk); }
.site .sec-dark p, .site .sec-dark .lead, .site .sec-dark span { color: var(--zinc); }
.site .sec-dark .stamp { color: var(--sodium); }
.site .sec-dark h4 {
  font-family: var(--display); font-variation-settings: 'wdth' 112, 'wght' 700;
  font-size: 1.05rem; margin: 0 0 .5rem;
}
/* An inverted band inverts its rules and surfaces too, or the structure
   disappears into the ground. */
.site .sec-dark .feat-row,
.site .sec-dark .feat-items li,
.site .sec-dark .feat-items > span { border-color: var(--weld); }
.site .sec-dark .feat-items li, .site .sec-dark .feat-items > span { color: var(--zinc); }
.site .sec-dark .feat-items li::before,
.site .sec-dark .feat-items > span::before { color: var(--live); }
.site .sec-dark .feat-tag { background: transparent; border-color: var(--weld); color: var(--zinc-d); }
.site .sec-dark .site-btn-ghost { color: var(--chalk); border-color: var(--weld); }
.site .sec-dark .site-btn-ghost:hover { background: var(--chalk); color: var(--asphalt); }
.site .sec-dark .btn-ghost { color: var(--chalk); border-color: var(--weld); box-shadow: none; }
.site .sec-dark .btn-ghost:hover { background: var(--chalk); color: var(--asphalt); }
.site .sec-dark .btn-quiet { background: transparent; color: var(--chalk); border-color: var(--weld); }
.site .sec-dark .panel, .site .sec-dark .card, .site .sec-dark .site-card,
.site .sec-dark .area, .site .sec-dark .review {
  background: var(--yard); border-color: var(--weld);
}
.site .sec-dark .svc-grid, .site .sec-dark .price-table { border-top-color: var(--zinc-d); }
.site .sec-dark .svc, .site .sec-dark .price-row { border-bottom-color: var(--weld); }
.site .sec-dark .svc-name, .site .sec-dark .svc-price,
.site .sec-dark .price-row span, .site .sec-dark .price-row b { color: var(--chalk); }
.site .on-dark { color: var(--chalk); }

/* ---- leftovers from the old shell --------------------------------------- */
.site .hero { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.site .hero-trust { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.6rem;
  padding-top: 1.2rem; border-top: 1px solid var(--rule); font-size: .84rem; color: var(--ink-3); }
.site .hero-trust b { color: var(--ink); }
.site .brand { display: inline-flex; align-items: center; gap: .55rem; }
.site .brand-mark {
  width: 28px; height: 28px; border-radius: 7px; background: var(--field); color: #fff;
  display: grid; place-items: center;
  font-family: var(--display); font-variation-settings: 'wdth' 125, 'wght' 900; font-size: .95rem;
}
.site .brand-name {
  font-family: var(--display); font-variation-settings: 'wdth' 112, 'wght' 800;
  font-size: 1.08rem; letter-spacing: -.028em; color: var(--ink);
}
.site .brand-name em { font-style: normal; color: var(--field); }

/* The graph-paper texture is gone; these hooks stay inert so old markup that
   still carries them simply gets a clean ground. */
.site .graph, .site .graph-dark { background-image: none; }

/* ---- small utilities ---------------------------------------------------- */
.site .photo-1x1 { aspect-ratio: 1 / 1; }
.site .photo-3x2 { aspect-ratio: 3 / 2; }
.site .photo-band {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(4rem, 9vw, 7rem); color: var(--chalk);
}
.site .photo-band > img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.site .photo-band::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(10,12,13,.92) 0%, rgba(10,12,13,.74) 48%, rgba(10,12,13,.35) 100%);
}
.site .photo-band h2, .site .photo-band h3 { color: var(--chalk); }
.site .photo-band p, .site .photo-band .lead { color: rgba(255,255,255,.84); }
.site .photo-band .stamp { color: var(--live); }
.site .panel-head {
  padding: .9rem 1.3rem; border-bottom: 1px solid var(--rule); background: var(--paper-2);
  font-family: var(--data); font-size: .64rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); border-radius: 12px 12px 0 0;
}
.site .detail-meta, .site .tile-meta {
  font-family: var(--data); font-size: .64rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.site .tile-name { font-weight: 600; color: var(--ink); }
.site .doc-item { display: flex; gap: .7rem; align-items: center; padding: .6rem 0;
  border-bottom: 1px solid var(--rule); font-size: .88rem; }
.site .feat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.site .feat-list li { font-size: .88rem; color: var(--ink-2); padding-left: 1.3rem; position: relative; }
.site .feat-list li::before { content: '✓'; position: absolute; left: 0; color: var(--field);
  font-family: var(--data); font-size: .74rem; }
.site .check { display: flex; gap: .55rem; align-items: flex-start; font-size: .88rem; cursor: pointer; }
.site .check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--field); flex: none; }
.site .pill-amber { background: #FFF4E0; border-color: #F0DCB4; color: #7A5312; }
.site .pill-grey { background: var(--paper-2); border-color: var(--rule); color: var(--ink-3); }
.site .dot { width: 7px; height: 7px; border-radius: 99px; background: var(--field); display: inline-block; }
.site .err { color: #A8321B; font-size: .86rem; }
.site .spinner-dark { border-color: var(--rule); border-top-color: var(--ink); }
.site .stack { display: grid; gap: .7rem; }
.site .between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.site .flip { display: flex; flex-direction: row-reverse; }
.site .hidden { display: none !important; }
.site .mb-0 { margin-bottom: 0; } .site .mb-2 { margin-bottom: .9rem; }
.site .n { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .site .areas, .site .role-grid { grid-template-columns: repeat(2, 1fr); }
  .site .steps { grid-template-columns: repeat(2, 1fr); }
  .site .steps .step:nth-child(2n) { border-right: 0; }
  .site .wiz-inner { grid-template-columns: 1fr; }
  .site .wiz-side { position: static; }
  .site .auth-page { grid-template-columns: 1fr; }
  .site .auth-aside { display: none; }
}
@media (max-width: 560px) {
  .site .svc-photo-grid, .site .areas, .site .role-grid,
  .site .steps { grid-template-columns: 1fr; }
  .site .svc { grid-template-columns: 1fr; gap: .3rem; }
  .site .steps .step { border-right: 0; padding-left: 0 !important; }
}
@media (max-width: 620px) {
  /* On a phone the board stops being three columns. The time leads the row,
     the job gets the full width, and the status sits under it — the order a
     crew would read it in anyway. */
  .os-row { grid-template-columns: 3.2rem 1fr; gap: .3rem .8rem; padding: .85rem .9rem; }
  .os-row-j { grid-column: 2; }
  .os-row .os-chip { grid-column: 2; justify-self: start; margin-top: .2rem; }
  .os-board-foot { flex-wrap: wrap; gap: .5rem 1.1rem; }
  .os-strip-in { gap: .2rem .9rem; }
  .os-strip-in span:last-child { margin-left: 0 !important; }
}

/* ---- keyboard focus ----------------------------------------------------- *
 * One rule, both systems, everything focusable. Component rules below may
 * refine the colour, but nothing can end up with no ring at all.            */
.os :focus-visible,
.site :focus-visible {
  outline: 2px solid var(--sodium);
  outline-offset: 2px;
  border-radius: 4px;
}
.site :focus-visible { outline-color: var(--field); }
.os-foot :focus-visible, .site-foot :focus-visible { outline-color: var(--sodium); }
.os-strip :focus-visible, .site-bar :focus-visible { outline-color: var(--sodium); outline-offset: 1px; }


/* ---- the estimator wizard ----------------------------------------------- *
 * Room count, then a photo per room, then the result. Each step is one
 * decision, because a customer on a phone at 9pm will not fill in a form.     */
/* Adding a space is one tap on the thing it actually is. Chips rather than a
   list, because the set is short and the customer is scanning for their own
   house, not reading options. */
.site .est-chooser { display: flex; flex-wrap: wrap; gap: .4rem; }
.site .est-add {
  font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer;
  padding: .5rem .8rem; border: 1px solid var(--rule); border-radius: 99px;
  background: #fff; color: var(--ink); white-space: nowrap;
  transition: border-color .14s, background .14s, color .14s;
}
.site .est-add:hover { border-color: var(--field); color: var(--field); }
.site .est-add:active { transform: translateY(1px); }
.site .est-add:focus-visible { outline: 2px solid var(--field); outline-offset: 2px; }
.site .est-add-other { border-style: dashed; color: var(--ink-3); }
.site .est-add-other:hover { color: var(--field); }

/* Removing a space you added by mistake must be as easy as adding it. */
.site .est-room-drop {
  flex: none; width: 26px; height: 26px; border-radius: 99px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--ink-4);
  font-size: 1.1rem; line-height: 1; display: grid; place-items: center;
}
.site .est-room-drop:hover { background: var(--rule-2); color: var(--ink); border-color: var(--rule); }
.site .est-room-drop:focus-visible { outline: 2px solid var(--field); outline-offset: 1px; }

/* One block per room, so the list reads as a checklist of what is left. */
.site .est-room-list { display: grid; gap: .9rem; }
.site .est-room {
  border: 1px solid var(--rule); border-radius: 11px; padding: .9rem;
  background: var(--paper-2); transition: border-color .16s, background .16s;
}
.site .est-room.done { border-color: var(--field); background: #fff; }
.site .est-room-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem; margin-bottom: .6rem;
}
.site .est-room-head b { font-size: .98rem; font-weight: 600; }
.site .est-room-tag {
  font-family: var(--data); font-variation-settings: 'wdth' 75;
  font-size: .6rem; letter-spacing: .07em; text-transform: uppercase; color: var(--field);
}
.site .est-room-tag.muted { color: var(--ink-4); }
.site .est-room .est-drop { min-height: 104px; padding: 1rem; background: #fff; }
.site .est-room .est-drop.has img { max-height: 190px; }

/* What it takes to shift it. The one number a customer cannot guess. */
.site .est-vehicle {
  display: flex; align-items: center; gap: .9rem;
  padding: .9rem 1rem; margin-top: 1rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--field);
  border-radius: 4px; background: var(--ticket);
}
.site .est-vehicle-icon { font-size: 1.6rem; line-height: 1; }
.site .est-vehicle b {
  display: block; font-family: var(--display);
  font-variation-settings: 'wdth' 112, 'wght' 700; font-size: 1.05rem;
}
.site .est-vehicle span { font-size: .85rem; color: var(--ink-2); line-height: 1.45; }
.site .est-vehicle-fill {
  margin-left: auto; font-family: var(--data); font-variation-settings: 'wdth' 75;
  font-size: .8rem; font-weight: 600; color: var(--field); white-space: nowrap;
}

/* The code the customer reads down a phone. Set like something to be read. */
.site .est-snapcode {
  display: grid; gap: .25rem; justify-items: center; text-align: center;
  margin-top: 1rem; padding: .95rem;
  border: 1px dashed var(--rule); border-radius: 10px; background: var(--paper-2);
}
.site .est-snapcode b {
  font-family: var(--data); font-size: 1.15rem; font-weight: 600;
  letter-spacing: .06em; color: var(--ink);
}
.site .est-snapcode-hint { font-size: .78rem; color: var(--ink-3); }

/* The disclaimer is not fine print. The whole model depends on the customer
   understanding that the firm number comes from the crew's video, not this. */
.site .est-disclaimer {
  margin-top: 1rem; padding: .95rem 1rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--ink);
  border-radius: 4px; background: #fff;
}
.site .est-disclaimer b { display: block; font-size: .92rem; margin-bottom: .35rem; }
.site .est-disclaimer p { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--ink-2); }
.site .est-disclaimer strong { color: var(--ink); }

@media (max-width: 560px) {
  .site .est-vehicle { flex-wrap: wrap; }
  .site .est-vehicle-fill { margin-left: 0; }
}

/* ---- the estimator as a dialog ------------------------------------------ *
 * <dialog> does the hard parts — focus trap, Escape, inertness, top layer —
 * so there is nothing here but the look of the card and its backdrop.        */
.est-modal {
  width: min(560px, 100% - 2rem);
  max-height: min(90vh, 900px);
  padding: 0; border: 0; border-radius: 16px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 40px 90px -30px rgba(10, 12, 13, .55);
  overflow: visible;
}
.est-modal::backdrop { background: rgba(10, 12, 13, .62); backdrop-filter: blur(3px); }
.est-modal-body {
  max-height: min(90vh, 900px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-radius: 16px; box-shadow: none; border: 0;
}
.est-modal-close-form { position: absolute; top: -.6rem; right: -.6rem; margin: 0; z-index: 2; }
.est-modal-close {
  width: 34px; height: 34px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--rule); background: #fff; color: var(--ink);
  font-size: 1.25rem; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 4px 14px -6px rgba(10, 12, 13, .5);
}
.est-modal-close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.est-modal-close:focus-visible { outline: 2px solid var(--field); outline-offset: 2px; }

/* The hero photograph that took the estimator's place. */
.site-hero-shot { margin: 0; display: grid; gap: .6rem; }
.site-hero-shot .site-photo { aspect-ratio: 16 / 10; }
.site-hero-shot figcaption {
  font-family: var(--data); font-variation-settings: 'wdth' 75;
  font-size: .62rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); line-height: 1.6;
}

/* Renaming a room happens in place, so the field looks like the heading it
   replaces until you reach for it. */
.site .est-room-name {
  font: inherit; font-size: .98rem; font-weight: 600; color: var(--ink);
  padding: .2rem .4rem; margin: -.2rem -.4rem; width: auto; min-width: 0; flex: 1;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
}
.site .est-room-name:hover { border-color: var(--rule); background: #fff; }
.site .est-room-name:focus {
  border-color: var(--field); background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--field) 18%, transparent);
}

/* Which floor. Priced, so the surcharge is on the control itself. */
.site .est-floors { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .7rem; }
.site .est-floor {
  font: inherit; font-size: .78rem; cursor: pointer;
  padding: .34rem .6rem; border: 1px solid var(--rule); border-radius: 99px;
  background: #fff; color: var(--ink-2); display: inline-flex; gap: .3rem; align-items: baseline;
  transition: border-color .14s, background .14s, color .14s;
}
.site .est-floor span {
  font-family: var(--data); font-variation-settings: 'wdth' 75;
  font-size: .62rem; color: var(--ink-4);
}
.site .est-floor:hover { border-color: var(--field); }
.site .est-floor.sel { border-color: var(--field); background: var(--field); color: #fff; }
.site .est-floor.sel span { color: rgba(255, 255, 255, .8); }
.site .est-floor:focus-visible { outline: 2px solid var(--field); outline-offset: 2px; }

@media (max-width: 560px) {
  .est-modal { width: 100%; max-height: 100dvh; border-radius: 0; }
  .est-modal-body { max-height: 100dvh; border-radius: 0; }
  .est-modal-close-form { top: .5rem; right: .5rem; }
}

/* ---- where the load is going -------------------------------------------- *
 * Three genuinely different jobs, so this is a decision with its own block
 * rather than a field tucked under the notes.                                */
.site .est-dest { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.site .est-dest > .t-label { display: block; color: var(--ink-3); margin-bottom: .6rem; }
.site .est-dest-opts { display: grid; gap: .45rem; }
.site .est-dest-opt {
  display: grid; gap: .1rem; text-align: left; width: 100%; cursor: pointer;
  padding: .7rem .85rem; border: 1px solid var(--rule); border-radius: 10px;
  background: #fff; font: inherit; transition: border-color .14s, background .14s;
}
.site .est-dest-opt:hover { border-color: var(--field); }
.site .est-dest-opt.sel {
  border-color: var(--field); background: var(--paper-2);
  box-shadow: inset 3px 0 0 var(--field);
}
.site .est-dest-opt:focus-visible { outline: 2px solid var(--field); outline-offset: 2px; }
.site .est-dest-opt b { font-size: .93rem; font-weight: 600; color: var(--ink); }
.site .est-dest-opt span { font-size: .8rem; color: var(--ink-3); line-height: 1.4; }
.site .est-dest-opt em {
  font-style: normal; font-family: var(--data); font-variation-settings: 'wdth' 75;
  font-size: .62rem; letter-spacing: .05em; color: var(--field); margin-top: .15rem;
}

.site .est-dest-summary {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin-top: 1rem; padding: .7rem .9rem;
  border: 1px solid var(--rule); border-radius: 8px; background: var(--paper-2);
}
.site .est-dest-summary b { font-size: .92rem; font-weight: 600; }
.site .est-dest-summary span:last-child { font-size: .85rem; color: var(--ink-2); }

/* ---- the customer's walkthrough, filmed on their own phone --------------
   Full-bleed camera with the prompt over it: on a phone held upright in a
   garage, anything smaller than this cannot be read at arm's length. */
.capture-stage {
  position: relative;
  border-radius: var(--radius, 10px);
  overflow: hidden;
  background: #000;
  aspect-ratio: 3 / 4;
}

.capture-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.capture-prompt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1rem 1.4rem;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
  background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
}

.capture-progress {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: rgba(255, 255, 255, .25);
}

.capture-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sodium, #FFA92E);
  transition: width .3s linear;
}

/* ---- "Get a price": three fields and a text message --------------------
   The filming moved to the phone, so what is left on the desktop site is a
   short form. Sized generously because it is the first thing a customer
   touches and it is as often opened on a phone as on a laptop. */
.est-step {
  max-width: 28rem;
  margin: 0 auto;
}

.est-h {
  font-size: 1.7rem;
  line-height: 1.15;
  margin: 0 0 .4rem;
}

.est-sub {
  margin: 0 0 1.4rem;
  line-height: 1.5;
  opacity: .85;
}

.est-label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  margin: 1rem 0 .3rem;
}

.est-input {
  width: 100%;
  padding: .8rem .9rem;
  font: inherit;
  font-size: 1.05rem;        /* 16px+ so iOS does not zoom the page on focus */
  border: 1px solid var(--line, rgba(0, 0, 0, .18));
  border-radius: var(--radius, 10px);
  background: var(--paper, #fff);
  color: inherit;
}

.est-input:focus-visible {
  outline: 2px solid var(--field, #0F7C6C);
  outline-offset: 1px;
}

.est-hint {
  font-size: .82rem;
  opacity: .7;
  margin: .4rem 0 0;
  line-height: 1.45;
}

.est-block {
  width: 100%;
  margin-top: 1.5rem;
}

.est-center {
  text-align: center;
}

.est-tick {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: #fff;
  background: var(--field, #0F7C6C);
}

/* The SnapClean add-on, offered while they are still describing the job.
   A whole row rather than a bare checkbox: it is a second service, and it has
   to say what it is before anyone will tick it. */
.est-addon {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin-top: 1.4rem;
  padding: .9rem;
  border: 1px solid var(--line, rgba(0, 0, 0, .18));
  border-radius: var(--radius, 10px);
  cursor: pointer;
}

.est-addon:hover {
  border-color: var(--field, #0F7C6C);
}

.est-addon input {
  margin-top: .2rem;
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  accent-color: var(--field, #0F7C6C);
}

.est-addon b {
  display: block;
  margin-bottom: .15rem;
}

.est-addon .est-hint {
  margin: 0;
}