/* Border Automotive Solutions — the public site.
 *
 * Extends app.css: every colour and typeface still comes from the :root block
 * there, so the brand swap is one edit and the site cannot drift from the
 * quote flow.
 *
 * Craft reference is the Southern Autos site — full-bleed cinematic hero,
 * topline with a hairline rule, oversized display type, drawer nav on phones,
 * strong section rhythm. The hero is licensed footage of laminated glass
 * shattering (Adobe Stock 796981934), supplied by the client.
 */

/* ------------------------------------------------------------------ base -- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 12px 18px; border-radius: var(--radius-sm); font-weight: 600;
}
.skip:focus { left: 16px; top: 16px; }

.wrap-wide { max-width: 1140px; margin: 0 auto; padding: 0 var(--pad); }

/* ---------------------------------------------------------------- header -- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.site-header.is-stuck {
  background: rgba(10, 12, 14, .88);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.site-header__inner {
  max-width: 1140px; margin: 0 auto;
  padding: 16px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.site-header .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.brand__name {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 108;
  font-weight: 600; letter-spacing: -.01em; font-size: .98rem;
}
.nav { display: flex; gap: 26px; }
.nav a {
  color: var(--muted); text-decoration: none; font-size: .88rem;
  position: relative; padding: 4px 0;
  transition: color .18s ease;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--accent); transition: right .28s ease;
}
.nav a:hover { color: var(--text); }
.nav a:hover::after { right: 0; }
.site-header__actions { display: flex; align-items: center; gap: 12px; }
.btn-sm { padding: 9px 16px; min-height: 42px; font-size: .84rem; }

/* burger + drawer */
.burger {
  display: none; width: 44px; height: 44px;
  background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span { display: block; width: 18px; height: 1.5px; background: var(--text); transition: transform .25s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0 0 auto; top: 0; z-index: 55;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 92px var(--pad) 26px;
  display: none; flex-direction: column; gap: 4px;
}
.drawer.is-open { display: flex; }
.drawer a {
  color: var(--text); text-decoration: none;
  padding: 15px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 1.02rem;
}
.drawer .btn { margin-top: 16px; border-bottom: 0; text-align: center; }

@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: flex; }
  .site-header__actions .btn-sm { display: none; }
}

/* ------------------------------------------------------------------ hero -- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 120px 0 60px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero__art { position: absolute; inset: 0; z-index: 0; }
.hero__art svg { width: 100%; height: 100%; display: block; }

.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(10,12,14,0) 0%, rgba(10,12,14,.55) 62%, rgba(10,12,14,.92) 100%),
    linear-gradient(180deg, rgba(10,12,14,.75) 0%, rgba(10,12,14,.15) 30%, rgba(10,12,14,.85) 100%);
}

/* The shatter video sits ABOVE the scrim so it reads as glass breaking in
   front of the page, not footage behind it. Shot on black, so screen-blending
   drops the background and leaves only the lit glass.

   No wipe (Adam, 22/08). The footage already does the work: it breaks, the
   shards spin away, and it lands clean. The only thing added afterwards is the
   shine. */
.hero__shatter { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.shatter-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  opacity: .92;
}

/* Clean glass is not empty glass: real windscreens carry soft diagonal
   reflection bands - the same ones in the fitting photo further down. Timed
   to arrive as the last shards clear (~5s of the 7s clip) and hold, then
   clear before the loop restarts. */
.glass-shine {
  position: absolute; inset: -12%;
  opacity: 0;
  background:
    linear-gradient(115deg, transparent 40%, rgba(236,239,242,.05) 45%, rgba(236,239,242,.13) 50%, rgba(236,239,242,.04) 55%, transparent 60%),
    linear-gradient(115deg, transparent 63%, rgba(236,239,242,.03) 67%, rgba(236,239,242,.09) 70%, transparent 75%);
  animation: shine-cycle 7s ease-in-out infinite;
}
@keyframes shine-cycle {
  0%, 62%  { opacity: 0; transform: translateX(-3%); }
  74%      { opacity: 1; }
  93%      { opacity: 1; transform: translateX(2.5%); }
  100%     { opacity: 0; transform: translateX(2.5%); }
}

.hero__frame { position: relative; z-index: 2; max-width: 1140px; margin: 0 auto; padding: 0 var(--pad); width: 100%; }

.hero__topline { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.hero__topline i { flex: 1 1 40px; height: 1px; background: var(--line); max-width: 120px; }
.hero__where { color: var(--muted); font-size: .82rem; letter-spacing: .04em; }

.hero__title {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 92;
  font-size: clamp(3rem, 11.5vw, 7rem);
  line-height: .92;
  letter-spacing: -.04em;
  font-weight: 700;
  margin: 0 0 22px;
}
.hero__title .accent { color: var(--accent); }
.hero__sub { max-width: 50ch; font-size: clamp(1rem, 2.1vw, 1.16rem); color: var(--text); opacity: .84; margin: 0 0 30px; }
.hero__note { color: var(--muted); font-size: .86rem; margin: 16px 0 0; max-width: 52ch; }

/* -------------------------------------------------------------- dropzone -- */
/* The hero's working upload. Big enough to be the obvious next move. */
.dropzone {
  position: relative;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(242,163,60,.07), rgba(242,163,60,.01));
  padding: clamp(26px, 5vw, 40px) 24px;
  max-width: 620px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .16s ease;
}
.dropzone:hover, .dropzone:focus-within { border-color: var(--accent); transform: translateY(-1px); }
.dropzone.dragging {
  border-style: solid; border-color: var(--accent);
  background: linear-gradient(180deg, rgba(242,163,60,.18), rgba(242,163,60,.04));
  transform: translateY(-2px);
}
.dropzone.dragging * { pointer-events: none; }
.dropzone input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.dropzone__icon {
  display: block; width: 54px; height: 38px;
  border: 2px solid var(--accent); border-radius: 5px 5px 12px 12px;
  position: relative; margin-bottom: 6px;
  background: linear-gradient(180deg, rgba(143,186,205,.16), transparent);
}
.dropzone__icon::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; margin: -11px 0 0 -7px;
  border-left: 2px solid var(--accent); border-top: 2px solid var(--accent);
  transform: rotate(45deg);
}
.dropzone__big {
  font-family: var(--font-display); font-variation-settings: 'wdth' 108;
  font-size: clamp(1.05rem, 2.6vw, 1.28rem); font-weight: 600; letter-spacing: -.01em;
}
.dropzone__sub { color: var(--muted); font-size: .88rem; }
.only-desktop { display: none; }
@media (hover: hover) and (pointer: fine) { .only-desktop { display: inline; } }

.dropzone__busy {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: rgba(10,12,14,.86); border-radius: var(--radius);
  font-size: .92rem;
}
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero__steps {
  list-style: none; display: flex; flex-wrap: wrap; gap: 12px 30px;
  margin: 32px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line);
}
.hero__steps li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .9rem; }
.step-n {
  display: grid; place-items: center; width: 26px; height: 26px;
  border: 1px solid var(--line); border-radius: 50%;
  font-size: .72rem; color: var(--accent); font-variant-numeric: tabular-nums; flex: none;
}

/* ----------------------------------------------------------------- bands -- */
.band { padding: clamp(56px, 10vw, 104px) 0; border-top: 1px solid var(--line); }
.band:first-of-type { border-top: 0; }
.band--tight { padding: clamp(40px, 7vw, 68px) 0; }
.band.alt { background: var(--panel); }
.band h2 {
  font-family: var(--font-display); font-variation-settings: 'wdth' 100;
  font-size: clamp(1.8rem, 5vw, 3rem);
  letter-spacing: -.03em; line-height: 1.04;
  margin: 14px 0 18px; max-width: 20ch;
}
.band h3 { font-size: 1.04rem; margin: 0 0 7px; letter-spacing: -.01em; }
.band p { color: var(--muted); max-width: 62ch; }
.band p strong { color: var(--text); font-weight: 600; }

/* -------------------------------------------------------------- services -- */
.services {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 18px 0 14px;
}
.services li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 18px 11px 15px;
  font-size: .9rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 9px;
}
.services li::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* ---------------------------------------------------------------- photos -- */
/* Asymmetric on purpose: one photo leads at nearly twice the size and the
   other two stack beside it. Three equal boxes is the layout that made this
   page read as a template. */
.photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 820px) {
  .photos { grid-template-columns: 1.35fr .95fr; grid-template-rows: auto auto; }
}
.photo {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.photo figcaption {
  padding: 13px 17px;
  font-size: .82rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

/* The problem, stated once, large. */
.pull {
  font-family: var(--font-display); font-variation-settings: 'wdth' 100;
  font-size: clamp(1.3rem, 3.6vw, 2.1rem);
  line-height: 1.28; letter-spacing: -.02em;
  color: var(--text) !important; max-width: 26ch; margin: 0;
}
.pull em { font-style: normal; color: var(--accent); }

/* ----------------------------------------------------------------- steps -- */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 34px 0 0; display: grid; gap: 0; }
.steps li { counter-increment: s; position: relative; padding: 26px 0 26px 68px; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 26px;
  font-family: var(--font-display); font-size: .84rem; letter-spacing: .16em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.steps p { margin: 0; }

.aside {
  margin: 34px 0 0; padding: 20px 22px;
  border-left: 2px solid var(--accent);
  background: rgba(242,163,60,.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  max-width: 64ch;
}

/* The old static six-card ".checks" grid is gone: the same six variants are
   now the interactive windscreen in #screen, which teaches the same thing and
   is worth touching. Its rules were deleted rather than left dead. */

/* ---------------------------------------------------------------- two-up -- */
.two-up { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: start; }
@media (min-width: 880px) { .two-up { grid-template-columns: 1.05fr .95fr; gap: 60px; } }
.cta-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(26px, 5vw, 38px);
  background: linear-gradient(180deg, rgba(242,163,60,.10), rgba(242,163,60,0)), var(--panel);
}
.cta-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.4vw, 1.75rem); letter-spacing: -.02em; margin: 10px 0 8px;
}
.cta-card .btn { margin-top: 18px; }
.btn-lg { padding: 16px 30px; min-height: 56px; font-size: 1rem; }

.placeholder {
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
  padding: 17px 19px; color: var(--muted); font-size: .89rem; max-width: 62ch;
}

/* ------------------------------------------------------------------ foot -- */
.site-foot { border-top: 1px solid var(--line); padding: 34px 0 50px; }
.site-foot .wrap-wide { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; }
.tiny { font-size: .82rem; color: var(--muted); }

/* ---------------------------------------------------------- scroll motion -- */
/* Every section reveals as it enters the viewport: a small rise and fade,
   staggered across the items inside it (cards, steps, chips, photos). Applied
   by site.js so the markup stays clean; without JS nothing is ever hidden. */
.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .3, 1);
  transition-delay: var(--rvd, 0s);
  will-change: opacity, transform;
}
.rv-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  /* The video is paused by site.js and holds on its poster frame; the shine
     sits still rather than cycling. */
  .glass-shine { animation: none; opacity: .5; }
  .spinner { animation: none; }
  .dropzone, .site-header, .nav a::after { transition: none; }
}


/* ==========================================================================
   SEPTEMBER PASS — the page had to stop being a document and start being an
   instrument. Adam, 06/09: "THE WEBSITE IS NOT INTERACTIVE ... THE WEBSITE IS
   PLAIN."

   The idea running through everything below: you are looking THROUGH glass.
   The dark bands are the cabin and the workshop. One bright zone in the middle
   is daylight through a clean windscreen, and that is where the two things you
   can actually play with live. Sections are separated by a crack running
   across the page rather than a rule.

   Every colour is still a token from app.css. The light zone derives its two
   extra values (--hair, --dim) from --ink and --text with color-mix, so a
   rebrand is still one edit to eight lines and this zone follows it.
   ========================================================================== */

/* ------------------------------------------------------- header additions -- */
.hdr-phone {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted); text-decoration: none;
  font-size: .86rem; letter-spacing: .01em;
  padding: 8px 2px;
  transition: color .18s ease;
}
.hdr-phone:hover { color: var(--text); }
.hdr-phone__ico {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none;
  box-shadow: 0 0 0 0 rgba(242,163,60,.55);
  animation: ping 2.8s ease-out infinite;
}
/* A slow indicator pulse, the one thing in the header that moves. It is an
   ornament on a phone number, so it goes still under reduced motion. */
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(242,163,60,.5); }
  70%  { box-shadow: 0 0 0 9px rgba(242,163,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(242,163,60,0); }
}
@media (max-width: 1000px) { .hdr-phone span:last-child { display: none; } }
@media (max-width: 860px)  { .hdr-phone { display: none; } }

.drawer__call {
  color: var(--accent) !important;
  font-family: var(--font-display); font-variation-settings: 'wdth' 106;
  font-weight: 600;
}

/* ----------------------------------------------------------- hero addition -- */
/* A scroll cue. There is a full-height hero above three interactive sections
   and nothing else says so. */
.hero__hint {
  position: absolute; left: 50%; bottom: 22px; z-index: 2;
  transform: translateX(-50%);
  font-family: var(--font-display); font-variation-settings: 'wdth' 118;
  font-size: .62rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 26px;
}
.hero__hint::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  width: 1px; height: 20px; transform-origin: top;
  background: linear-gradient(180deg, var(--accent), transparent);
  animation: hint 2.4s ease-in-out infinite;
}
@keyframes hint {
  0%, 100% { transform: scaleY(.4); opacity: .4; }
  50%      { transform: scaleY(1);  opacity: 1; }
}
@media (max-width: 620px) { .hero__hint { display: none; } }

/* ---------------------------------------------------------------- ticker -- */
/* Decoration that needs no facts: the body types the pricing engine really
   classes, the variants the flow really asks about, the services the client
   really confirmed. Duplicated in JS so the -50% loop is seamless. */
.ticker {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  padding: 15px 0;
  /* an alpha mask, not a colour: the ends of the ticker fade out rather than
     being cut off by the viewport edge */
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.ticker__track {
  display: flex; width: max-content;
  animation: roll 46s linear infinite;
}
.ticker__track span {
  font-family: var(--font-display); font-variation-settings: 'wdth' 112;
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  padding-right: 28px; white-space: nowrap;
}
.ticker__track b { color: var(--accent); font-size: .5rem; vertical-align: middle; margin: 0 8px; }
@keyframes roll { to { transform: translateX(-50%); } }

/* --------------------------------------------------------- section ghosts -- */
/* The oversized folio numeral, borrowed from the instrument-panel language in
   app.css. It sits behind the content and marks the section. */
.ghost-num {
  position: absolute; right: var(--pad); top: -.28em;
  font-family: var(--font-display); font-variation-settings: 'wdth' 62;
  font-size: clamp(6rem, 22vw, 15rem); font-weight: 700;
  line-height: 1; letter-spacing: -.06em;
  color: var(--text); opacity: .035;
  pointer-events: none; user-select: none;
}
.problem { position: relative; overflow: hidden; }
.problem .wrap-wide { position: relative; }

/* ----------------------------------------------------------------- crack -- */
/* This site's answer to a wave divider. A fracture runs the width of the page
   and the zone on the far side of it changes. The fill is the DESTINATION
   colour, so the crack is literally the boundary between the two. */
.crack { position: relative; line-height: 0; margin-top: -1px; }
.crack svg { display: block; width: 100%; height: clamp(38px, 6vw, 74px); }
.crack__fill { fill: var(--ink); }
.crack__edge { fill: none; stroke: var(--glass); stroke-width: 1.4; opacity: .5; }
.crack--to-light .crack__fill { fill: var(--text); }
.crack--to-light .crack__edge { stroke: var(--accent); opacity: .8; }
.crack--to-dark  .crack__fill { fill: var(--ink); }

/* The leading edge draws itself in as the divider arrives — the crack runs
   across the page once, then stays. */
.crack__edge { stroke-dasharray: 2200; stroke-dashoffset: 2200; }
.crack.rv-in .crack__edge { transition: stroke-dashoffset 1.1s cubic-bezier(.2,.7,.3,1); stroke-dashoffset: 0; }

.crack + .band { border-top: 0; }
/* two light bands in a row still want a hairline between them */
.zone-light + .zone-light { border-top: 1px solid var(--hair); }

/* ------------------------------------------------------------- light zone -- */
/* Off-white ground, near-black type. Both are existing tokens: the light zone
   invents no colour, it swaps which token is the surface. */
.zone-light {
  position: relative;
  background: var(--text);
  color: var(--ink);
  border-top: 0;
  --hair: var(--line);
  --dim: var(--ink);
}
@supports (color: color-mix(in srgb, red, blue)) {
  .zone-light {
    --hair: color-mix(in srgb, var(--ink) 15%, var(--text));
    --dim:  color-mix(in srgb, var(--ink) 74%, var(--text));
  }
}
/* Laminate texture: hairline diagonals, the way light bands across a screen.
   Very low contrast — felt, not seen. */
.zone-light > .wrap-wide { position: relative; z-index: 1; }
.zone-light::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(102deg, rgba(10,12,14,.035) 0 1px, transparent 1px 46px);
}
.zone-light h2, .zone-light h3 { color: var(--ink); }
.zone-light p { color: var(--dim); }
.zone-light .lead { color: var(--ink); }
.zone-light .eyebrow { color: var(--dim); }
.zone-light strong { color: var(--ink); }
/* Amber on off-white measures 1.8:1 — nowhere near readable. In this zone the
   accent is a FILL under dark text, never text on the ground. */
.zone-light .eyebrow .num {
  color: var(--accent-ink); background: var(--accent);
  padding: 1px 6px; border-radius: 4px;
}

/* ============================================================== THE SCREEN */
.screen__head {
  display: grid; gap: 28px; align-items: end;
  border-bottom: 1px solid var(--hair); padding-bottom: 26px;
}
@media (min-width: 900px) { .screen__head { grid-template-columns: 1fr auto; } }

/* The only number on the page, and it is read live from /api/config — the
   length of the question list the quote flow actually uses. */
.livefig { display: flex; align-items: center; gap: 14px; }
.livefig__n {
  font-family: var(--font-display); font-variation-settings: 'wdth' 86;
  font-size: clamp(3.4rem, 9vw, 5.4rem); font-weight: 700; line-height: .82;
  letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.livefig__label { font-size: .82rem; line-height: 1.35; color: var(--dim); max-width: 20ch; }

.screen { display: grid; gap: clamp(24px, 4vw, 46px); margin-top: 36px; }
@media (min-width: 980px) { .screen { grid-template-columns: 1.15fr .85fr; align-items: start; } }

.screen__art { margin: 0; }
.screen__art svg { display: block; width: 100%; height: auto; }
.screen__art figcaption {
  font-size: .78rem; color: var(--dim); margin-top: 10px; letter-spacing: .02em;
}

/* --- the drawing ---------------------------------------------------------
   Structure lines are ink at low alpha; the pane is the --glass laminate
   token. Feature groups are dimmed to a faint outline until they are active,
   when they gain weight AND a fill AND their pip lights. Three signals, so
   colour is never carrying it alone. */
.ws-body   { fill: none; stroke: var(--ink); stroke-opacity: .30; stroke-width: 3; stroke-linecap: round; }
.ws-cowl   { fill: var(--ink); fill-opacity: .07; }
.ws-glass  { fill: var(--glass); fill-opacity: .22; stroke: var(--ink); stroke-opacity: .55; stroke-width: 2.5; }
.ws-sheen  { fill: var(--text); opacity: .55; }
.ws-sheen--2 { opacity: .26; }
.ws-wheel  { fill: none; stroke: var(--ink); stroke-opacity: .13; stroke-width: 3; }
.ws-wipers { fill: var(--ink); fill-opacity: .35; stroke: var(--ink); stroke-opacity: .35; stroke-width: 5; stroke-linecap: round; }
.ws-wipers path { fill: none; }
.ws-tint-a { stop-color: var(--glass); stop-opacity: .85; }
.ws-tint-b { stop-color: var(--glass); stop-opacity: 0; }

.wsf { opacity: .34; transition: opacity .38s ease; }
.wsf .ws-fill  { fill: none; stroke: var(--ink); stroke-opacity: .45; stroke-width: 2; }
.wsf .ws-edge  { fill: none; stroke: var(--ink); stroke-opacity: .35; stroke-width: 2; }
.wsf .ws-wash  { fill: var(--glass); fill-opacity: 0; }
.wsf .ws-element path { fill: none; stroke: var(--ink); stroke-opacity: .4; stroke-width: 2; stroke-linecap: round; }
.wsf .ws-cone  { fill: var(--accent); opacity: 0; }
.wsf .ws-lens  { fill: none; stroke: var(--ink); stroke-opacity: .3; stroke-width: 2; }
.wsf .ws-lead  { fill: none; stroke: var(--ink); stroke-opacity: .3; stroke-width: 1.5; }
.wsf .ws-lam   { opacity: .5; }
.wsf .ws-lam--g { fill: var(--glass); }
.wsf .ws-lam--i { fill: var(--accent); }
.wsf .ws-lens2 { fill: var(--ink); fill-opacity: .18; stroke: var(--ink); stroke-opacity: .4; stroke-width: 2; }
.wsf .ws-pupil { fill: var(--ink); fill-opacity: .5; }
.wsf .ws-drop  { fill: var(--glass); opacity: .55; }
.wsf .ws-hud   {
  font-family: var(--font-display); font-size: 34px; font-weight: 700;
  fill: var(--ink); fill-opacity: .5; letter-spacing: 2px;
}

.wsf.is-on { opacity: 1; }
.wsf.is-on .ws-fill  { fill: var(--accent); fill-opacity: .3; stroke-opacity: .95; stroke-width: 2.6; }
.wsf.is-on .ws-edge  { stroke-opacity: .8; }
.wsf.is-on .ws-wash  { fill-opacity: .32; }
.wsf.is-on .ws-element path { stroke-opacity: .9; }
.wsf.is-on .ws-cone  { opacity: .22; }
.wsf.is-on .ws-lam   { opacity: 1; }
.wsf.is-on .ws-lens  { stroke-opacity: .9; }
.wsf.is-on .ws-hud   { fill-opacity: .95; }
.wsf.is-on .ws-drop  { opacity: 1; }
.ws-fill, .ws-wash, .ws-element path, .ws-cone, .ws-hud {
  transition: fill-opacity .38s ease, stroke-opacity .38s ease, opacity .38s ease;
}

/* The numbered pips are markers, not controls. Six 42px tap targets sitting
   20px apart on a 343px-wide phone diagram would be a trap, so the rail does
   the controlling at a proper size. */
.ws-pip circle { fill: var(--text); stroke: var(--ink); stroke-opacity: .35; stroke-width: 2; }
.ws-pip text {
  font-family: var(--font-display); font-size: 21px; font-weight: 700;
  fill: var(--ink); fill-opacity: .45;
}
.ws-pip circle, .ws-pip text { transition: fill .3s ease, fill-opacity .3s ease, stroke-opacity .3s ease; }
.ws-pip.is-on circle { fill: var(--accent); stroke: var(--ink); stroke-opacity: .9; }
.ws-pip.is-on text   { fill: var(--accent-ink); fill-opacity: 1; }

/* --- the rail: the actual control ---------------------------------------- */
.wsrail { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.wsrail__item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 54px;
  padding: 13px 12px 13px 4px;
  background: none; border: 0; border-bottom: 1px solid var(--hair);
  border-left: 2px solid transparent;
  font: inherit; text-align: left; color: var(--dim);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, padding-left .2s ease;
}
.wsrail__item:hover { color: var(--ink); background: rgba(10,12,14,.03); }
.wsrail__item:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.wsrail__n {
  font-family: var(--font-display); font-size: .72rem; letter-spacing: .16em;
  font-variant-numeric: tabular-nums; opacity: .6; flex: none;
}
.wsrail__t {
  font-family: var(--font-display); font-variation-settings: 'wdth' 104;
  font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em;
}
/* The selected state carries three signals: a filled bar, a weight change and
   the aria-selected the rail exposes. Not colour. */
.wsrail__item[aria-selected="true"] {
  color: var(--ink); border-left-color: var(--accent);
  background: rgba(10,12,14,.05); padding-left: 12px;
}
.wsrail__item[aria-selected="true"] .wsrail__n { opacity: 1; }

.wspanel {
  position: relative; overflow: hidden;
  margin-top: 22px; padding: 24px 24px 26px;
  border: 1px solid var(--hair); border-radius: var(--radius);
  background: rgba(10,12,14,.025);
}
.wspanel:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wspanel__ghost {
  position: absolute; right: 14px; top: -14px;
  font-family: var(--font-display); font-variation-settings: 'wdth' 62;
  font-size: 6.2rem; font-weight: 700; line-height: 1;
  color: var(--ink); opacity: .06; letter-spacing: -.05em;
}
.wspanel h3 {
  font-family: var(--font-display); font-variation-settings: 'wdth' 100;
  font-size: clamp(1.25rem, 3.4vw, 1.6rem); letter-spacing: -.02em;
  margin: 0 0 14px; position: relative;
}
.wspanel__lbl {
  display: block;
  font-family: var(--font-display); font-variation-settings: 'wdth' 118;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 5px;
}
.wspanel__ask {
  margin: 0 0 14px; padding-left: 14px;
  border-left: 2px solid var(--accent);
  color: var(--ink) !important; font-size: 1rem;
}
.wspanel__why { margin: 0; font-size: .94rem; }
.wspanel h3, .wspanel .wspanel__ask, .wspanel .wspanel__why, .wspanel .wspanel__ghost {
  transition: opacity .22s ease, transform .22s ease;
}
/* the panel content cross-fades while the rail turns */
.wspanel.is-out h3, .wspanel.is-out .wspanel__ask, .wspanel.is-out .wspanel__why,
.wspanel.is-out .wspanel__ghost { opacity: 0; transform: translateY(6px); }
.screen__foot { margin: 20px 0 0; font-size: .92rem; }

/* ================================================================== GAUGE */
.gauge { display: grid; gap: clamp(22px, 4vw, 44px); margin-top: 30px; }
@media (min-width: 900px) { .gauge { grid-template-columns: 1fr 1fr; align-items: center; } }

.gauge__art { margin: 0; }
.gauge__art svg { display: block; width: 100%; height: auto; }
.gg-pane { fill: var(--glass); fill-opacity: .16; stroke: var(--ink); stroke-opacity: .28; stroke-width: 2; }
.gg-grid path { stroke: var(--ink); stroke-opacity: .07; stroke-width: 1.5; }
.gg-coin circle { fill: none; stroke: var(--ink); stroke-opacity: .3; stroke-width: 2; stroke-dasharray: 4 5; }
.gg-coin text {
  font-family: var(--font-display); font-size: 20px; font-weight: 600;
  fill: var(--ink); fill-opacity: .4; letter-spacing: .04em;
}
.gg-stage { opacity: 0; transition: opacity .3s ease; }
.gg-stage.is-on { opacity: 1; }
.gg-core  { fill: var(--ink); fill-opacity: .82; }
.gg-ring  { fill: var(--accent); fill-opacity: .3; stroke: var(--ink); stroke-opacity: .7; stroke-width: 2.5; }
.gg-legs path, .gg-crack {
  fill: none; stroke: var(--ink); stroke-opacity: .8;
  stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
}

.gauge__lbl {
  display: block;
  font-family: var(--font-display); font-variation-settings: 'wdth' 118;
  font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 12px;
}
/* A real range input: keyboard arrows work for free, a screen reader announces
   a value, and the browser handles the drag physics better than we would. Only
   the skin is ours. */
.gauge__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 34px; background: none; cursor: pointer; margin: 0;
}
.gauge__range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent) 0 var(--gg-pct, 0%), rgba(10,12,14,.16) var(--gg-pct, 0%) 100%);
}
.gauge__range::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(10,12,14,.16); }
.gauge__range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--accent); }
.gauge__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -12px;
  border-radius: 50%; background: var(--ink); border: 4px solid var(--accent);
  box-shadow: 0 2px 10px rgba(10,12,14,.25);
}
.gauge__range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink); border: 4px solid var(--accent);
}
.gauge__range:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
.gauge__ticks {
  display: flex; justify-content: space-between;
  font-family: var(--font-display); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim); margin-top: 2px;
}

.gauge__read { margin-top: 26px; min-height: 190px; }
.gauge__verdict {
  display: inline-block; margin-bottom: 12px;
  padding: 6px 13px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-variation-settings: 'wdth' 110;
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
/* Replacement is not a warning, it is just the other answer — so it changes
   weight and outline rather than turning red. */
.gauge__verdict.is-replace { background: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.gauge__read h3 {
  font-family: var(--font-display); font-variation-settings: 'wdth' 96;
  font-size: clamp(1.5rem, 4.4vw, 2.1rem); letter-spacing: -.03em; margin: 0 0 10px;
}
.gauge__caveat { font-size: .84rem; margin: 18px 0 0; }
.gauge__caveat a { color: var(--ink); text-underline-offset: 3px; }

/* ================================================================= TRY IT */
.try { display: grid; gap: clamp(24px, 4vw, 54px); align-items: center; }
@media (min-width: 900px) { .try { grid-template-columns: .95fr 1.05fr; } }
.try__say h2 { margin-top: 12px; }

/* =============================================================== ADDRESS */
.addr {
  font-style: normal; display: flex; flex-direction: column; gap: 2px;
  margin: 26px 0 20px; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel);
}
.addr__line {
  font-family: var(--font-display); font-variation-settings: 'wdth' 104;
  font-size: 1.06rem; font-weight: 600; letter-spacing: -.01em; color: var(--text);
}
.addr__map {
  margin-top: 10px; align-self: flex-start;
  font-size: .82rem; color: var(--accent); text-decoration: none;
  border-bottom: 1px solid rgba(242,163,60,.4); padding-bottom: 2px;
}
.addr__map:hover { border-bottom-color: var(--accent); }
.cta-card__call {
  display: block; margin-top: 14px; font-size: .86rem;
  color: var(--muted); text-decoration: none;
}
.cta-card__call:hover { color: var(--text); }

/* =================================================================== FAQ */
.faq { margin-top: 30px; border-top: 1px solid var(--line); }
.faq__q { border-bottom: 1px solid var(--line); }
.faq__q summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0; min-height: 60px;
  font-family: var(--font-display); font-variation-settings: 'wdth' 102;
  font-size: clamp(1rem, 2.4vw, 1.16rem); font-weight: 600; letter-spacing: -.01em;
  color: var(--text);
  transition: color .2s ease;
}
.faq__q summary::-webkit-details-marker { display: none; }
.faq__q summary:hover { color: var(--accent); }
.faq__q summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* The marker: a plus that becomes a minus. Shape, not colour. */
.faq__q summary::after {
  content: ''; flex: none; width: 16px; height: 16px;
  background:
    linear-gradient(var(--accent) 0 0) center / 100% 2px no-repeat,
    linear-gradient(var(--accent) 0 0) center / 2px 100% no-repeat;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), background-size .3s ease;
}
.faq__q[open] summary::after { transform: rotate(90deg); background-size: 100% 2px, 0 100%; }
.faq__a { padding: 0 0 22px; max-width: 66ch; }
.faq__a p { margin: 0; }
/* Modern browsers can animate the disclosure open. Where they cannot it simply
   opens instantly and nothing is lost. */
@supports selector(::details-content) {
  .faq__q { interpolate-size: allow-keywords; }
  .faq__q::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .32s ease, content-visibility .32s allow-discrete;
  }
  .faq__q[open]::details-content { block-size: auto; }
}

/* =============================================================== CONTACT */
.contact-grid {
  display: grid; gap: 14px; margin-top: 30px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.contact-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 24px 22px; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel);
  transition: border-color .2s ease, transform .18s ease, background .2s ease;
}
a.contact-card:hover { border-color: var(--accent); transform: translateY(-2px); }
a.contact-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.contact-card strong {
  font-family: var(--font-display); font-variation-settings: 'wdth' 102;
  font-size: 1.14rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3;
  color: var(--text);
}
.contact-card .tiny { color: var(--muted); }
.contact-card--go { background: linear-gradient(180deg, rgba(242,163,60,.12), rgba(242,163,60,0)), var(--panel); }
.contact-grid + .placeholder { margin-top: 26px; }

/* ================================================================== FOOT */
.site-foot .wrap-wide { display: grid; gap: 22px; align-items: start; }
@media (min-width: 860px) { .site-foot .wrap-wide { grid-template-columns: auto 1fr auto; gap: 40px; } }
.site-foot__brand { display: flex; align-items: center; gap: 11px; }
.site-foot__nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-foot__nav a { color: var(--muted); text-decoration: none; font-size: .86rem; }
.site-foot__nav a:hover { color: var(--text); }
.site-foot__legal { display: flex; flex-direction: column; gap: 3px; }
@media (min-width: 860px) { .site-foot__legal { text-align: right; } }
/* The legal entity and ABN are filled from /api/config. Empty means the call
   has not answered — collapse rather than leave a gap. */
.site-foot__legal .tiny:empty { display: none; }

/* ====================================================== phones, deliberately
   Most of the people who see this page are holding a cracked windscreen at the
   side of a road. Checked at 375px: nothing scrolls sideways, every control is
   at least 44px, and the two instruments stack rather than shrink. */
@media (max-width: 700px) {
  .screen__head { padding-bottom: 20px; }
  .livefig__n { font-size: 3.6rem; }
  .wspanel { padding: 20px 18px 22px; }
  .wspanel__ghost { font-size: 4.6rem; right: 8px; }
  .gauge__read { min-height: 210px; }
  .ticker__track span { font-size: .74rem; }
  .ghost-num { font-size: 7rem; right: 4px; opacity: .05; }
}

/* ============================================= reduced motion, second pass
   Everything added in this pass either holds still or never starts. The
   auto-advance in both instruments is off (they stay fully operable by hand),
   the ticker parks, the crack is already drawn, the dwell bar does not run. */
@media (prefers-reduced-motion: reduce) {
  .hdr-phone__ico { animation: none; }
  .hero__hint::after { animation: none; opacity: .7; }
  .ticker__track { animation: none; }
  .crack__edge { stroke-dashoffset: 0; }
  .crack.rv-in .crack__edge { transition: none; }
  .wsf, .ws-fill, .ws-wash, .ws-element path, .ws-cone, .ws-hud,
  .ws-pip circle, .ws-pip text,
  .gg-stage, .wspanel h3, .wspanel .wspanel__ask, .wspanel .wspanel__why,
  .wspanel .wspanel__ghost, .wsrail__item {
    transition: none;
  }
  a.contact-card:hover { transform: none; }
  .faq__q summary::after { transition: none; }
  .faq__q::details-content { transition: none; }
}