/* ==========================================================================
   Colorado Collision Repair
   Design system. Tokens taken from the supplied brand guidelines.
   Surface balance: Midnight foundation, Snow White relief, Alpine Blue as the
   working accent. Red and Gold stay small and rare.
   ========================================================================== */

:root{
  /* Brand core */
  --midnight:  #07111F;
  --alpine:    #0877D1;
  --summit:    #D9DEE5;
  --precision: #9DA8B5;
  --red:       #D62828;
  --gold:      #F6B900;
  --snow:      #F7F9FC;

  /* Derived surfaces */
  --ink-2:   #0B1826;
  --ink-3:   #102435;
  --ink-4:   #16314657;
  --deep:    #040A12;
  --silver:  #EDF1F6;
  --silver-2:#E2E8F0;

  /* Accessible text tints */
  --alpine-text: #4FA8EE;   /* small text on dark */
  --alpine-ink:  #0A64B0;   /* links on light */
  --dim:         #9DA8B5;
  --dim-ink:     #4A5765;

  /* Hairlines */
  --line:      rgba(157,168,181,.18);
  --line-soft: rgba(157,168,181,.10);
  --line-ink:  rgba(7,17,31,.12);

  /* Type */
  --display: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Rhythm */
  --gut: clamp(20px, 4.6vw, 72px);
  --sec: clamp(76px, 9.5vw, 156px);
  --max: 1400px;
  --narrow: 780px;
  --hdr: 96px;

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

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr) + 20px);
}

body{
  margin:0;
  background:var(--midnight);
  color:var(--summit);
  font-family:var(--body);
  font-size:clamp(16px,.34vw + 15.1px,17.5px);
  line-height:1.66;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}

img,svg,video{ max-width:100%; height:auto; display:block; }
[hidden]{ display:none !important; }
button,input,select,textarea{ font:inherit; color:inherit; }

::selection{ background:var(--alpine); color:#fff; }

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:1.03;
  letter-spacing:-.022em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h3,h4{ line-height:1.18; letter-spacing:-.012em; }

p{ margin:0 0 1.15em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

.dsp-xl{ font-size:clamp(2.9rem,7.4vw,6.4rem); text-transform:uppercase; letter-spacing:-.03em; }
.dsp-l { font-size:clamp(2.2rem,4.6vw,4.05rem); text-transform:uppercase; }
.dsp-m { font-size:clamp(1.75rem,3.1vw,2.85rem); }
.dsp-s { font-size:clamp(1.3rem,1.9vw,1.62rem); font-weight:700; }

.lead{
  font-size:clamp(1.06rem,1.3vw,1.28rem);
  line-height:1.6;
  color:var(--summit);
}
.sec--snow .lead,.sec--silver .lead{ color:#25313f; }

.muted{ color:var(--dim); }
.sec--snow .muted,.sec--silver .muted{ color:var(--dim-ink); }

/* Eyebrow: a laser dash, then wide technical caps */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:var(--body);
  font-size:.72rem; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--alpine-text);
  margin:0 0 20px;
}
.eyebrow::before{
  content:""; width:38px; height:1px; flex:none;
  background:linear-gradient(90deg,transparent,var(--alpine));
}
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{
  content:""; width:38px; height:1px; flex:none;
  background:linear-gradient(270deg,transparent,var(--alpine));
}
.sec--snow .eyebrow,.sec--silver .eyebrow{ color:var(--alpine-ink); }
.sec--snow .eyebrow::before,.sec--silver .eyebrow::before{ background:linear-gradient(90deg,transparent,var(--alpine-ink)); }
.sec--snow .eyebrow--center::after,.sec--silver .eyebrow--center::after{ background:linear-gradient(270deg,transparent,var(--alpine-ink)); }

/* Technical micro-label, used on readouts and node captions */
.tech{
  font-size:.66rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  color:var(--precision);
}

a{ color:var(--alpine-text); text-decoration-thickness:1px; text-underline-offset:3px; }
.sec--snow a:not(.btn),.sec--silver a:not(.btn){ color:var(--alpine-ink); }

:where(a,button,summary,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--alpine-text);
  outline-offset:3px;
  border-radius:2px;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:calc(var(--narrow) + var(--gut)*2); }

.sec{ padding-block:var(--sec); position:relative; }
.sec--snow  { background:var(--snow);  color:#16202c; }
.sec--silver{ background:var(--silver);color:#16202c; }
.sec--deep  { background:var(--deep); }
.sec--ink   { background:var(--ink-2); }
.sec--tight { padding-block:clamp(56px,6vw,92px); }

.sec--snow h1,.sec--snow h2,.sec--snow h3,.sec--snow h4,
.sec--silver h1,.sec--silver h2,.sec--silver h3,.sec--silver h4{ color:#07111F; }

.head-center{ max-width:820px; margin-inline:auto; text-align:center; }
.head-center .lead{ margin-inline:auto; max-width:660px; }

/* Skip link */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--alpine); color:#fff; padding:12px 20px; font-weight:600;
}
.skip:focus{ left:12px; top:12px; }

/* --------------------------------------------------------------------------
   Brand textures
   -------------------------------------------------------------------------- */

/* Precision grid: engineering paper, barely there */
.grid-bg{ position:relative; }
.grid-bg::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(157,168,181,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(157,168,181,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 20%,transparent 78%);
}
.sec--snow.grid-bg::before,.sec--silver.grid-bg::before{
  background-image:
    linear-gradient(rgba(7,17,31,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(7,17,31,.05) 1px,transparent 1px);
}

/* Laser accent: a soft blue bloom */
.glow{ position:relative; }
.glow::after{
  content:""; position:absolute; pointer-events:none; z-index:0;
  width:min(900px,80vw); height:min(900px,80vw);
  background:radial-gradient(circle,rgba(8,119,209,.16),transparent 62%);
  filter:blur(12px);
}
.glow--tr::after{ top:-32%; right:-16%; }
.glow--bl::after{ bottom:-38%; left:-20%; }

/* Horizon divider: the signature mountain rule */
.horizon{ display:block; width:100%; height:auto; color:var(--alpine); }
.horizon-rule{
  position:relative; height:1px; width:100%;
  background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btns{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

.btn,
.sec--snow .btn,
.sec--silver .btn{ color:#fff; }
.btn{
  --btn-bg:var(--alpine);
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:17px 30px;
  font-family:var(--body); font-size:.86rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:#fff; background:var(--btn-bg);
  border:1px solid var(--btn-bg); border-radius:3px;
  text-decoration:none; cursor:pointer;
  overflow:hidden; isolation:isolate;
  transition:transform .5s var(--ease-out), box-shadow .35s var(--ease), background .3s var(--ease);
  will-change:transform;
}
.btn svg{ width:17px; height:17px; flex:none; }
/* Precision-line sweep */
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.30) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .75s var(--ease-out);
}
.btn:hover::before,.btn:focus-visible::before{ transform:translateX(120%); }
.btn:hover{ box-shadow:0 12px 34px -14px rgba(8,119,209,.85); }
.btn:active{ transform:translateY(1px) scale(.995); }

.btn--ghost{
  --btn-bg:transparent;
  color:var(--summit);
  border-color:rgba(217,222,229,.34);
}
.btn--ghost:hover{ border-color:var(--alpine-text); box-shadow:none; color:#fff; }
.sec--snow .btn--ghost,.sec--silver .btn--ghost{ color:#07111F; border-color:rgba(7,17,31,.28); }
.sec--snow .btn--ghost:hover,.sec--silver .btn--ghost:hover{ border-color:var(--alpine-ink); color:var(--alpine-ink); }

.btn--red{ --btn-bg:var(--red); }
.btn--red:hover{ box-shadow:0 12px 34px -14px rgba(214,40,40,.8); }

/* Text link with a laser underline that draws in */
.tlink{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:600; font-size:.88rem; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color:var(--alpine-text);
  padding-bottom:5px; position:relative;
}
.sec--snow .tlink,.sec--silver .tlink{ color:var(--alpine-ink); }
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(.28); transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.tlink:hover::after,.tlink:focus-visible::after{ transform:scaleX(1); }
.tlink svg{ width:15px; height:15px; transition:transform .4s var(--ease-out); }
.tlink:hover svg{ transform:translateX(4px); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.hdr{
  position:fixed; inset:0 0 auto; z-index:100;
  height:var(--hdr);
  display:flex; align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease), border-color .45s var(--ease), height .45s var(--ease);
}
.hdr.is-stuck,
.hdr.is-solid{
  background:rgba(7,17,31,.93);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--line-soft);
}
.hdr.is-stuck{ height:80px; }

/* Centred emblem lockup: three links, badge, three links, CTA hard right. */
.hdr__in{
  width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut);
  display:grid; align-items:center;
  grid-template-columns:1fr auto 1fr;
  column-gap:clamp(34px,4.2vw,76px);
}
.nav{ display:contents; }
.nav__l,.nav__r,.brand,.burger{ grid-row:1; }
/* Both link clusters hug the emblem, so the gap on each side of the logo is
   exactly the column gap. The CTA anchors the right edge on its own. */
.nav__l,.nav__r{ display:flex; align-items:center; min-width:0; }
.nav__l{ grid-column:1; justify-content:flex-end; }
.nav__r{ grid-column:3; justify-content:flex-start; }
.nav__links{ display:flex; align-items:center; gap:clamp(20px,2.4vw,40px); white-space:nowrap; }
.nav__cta{ margin-left:auto; }

/* Click to call lives in the mobile menu only. */
.nav__tel{ display:none; }

.brand{ grid-column:2; display:flex; align-items:center; justify-self:center; text-decoration:none; flex:none; }
.brand img{
  height:74px; width:auto; max-width:none;
  transition:height .45s var(--ease);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));
}
.hdr.is-stuck .brand img{ height:56px; }

.nav a{
  position:relative;
  font-size:.78rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--summit); text-decoration:none; padding:8px 0; white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--alpine-text),transparent);
  transform:scaleX(0); transform-origin:center;
  transition:transform .45s var(--ease-out);
}
.nav a:hover,.nav a[aria-current="page"]{ color:#fff; }
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav .btn::after{ display:none; }

.hdr .btn{ padding:13px 22px; font-size:.74rem; letter-spacing:.08em; }

.burger{
  display:none;
  grid-column:3; justify-self:end;
  width:46px; height:46px; padding:0;
  background:transparent; border:1px solid rgba(217,222,229,.28); border-radius:3px;
  cursor:pointer; position:relative; z-index:101;
}
.burger span{
  position:absolute; left:13px; right:13px; height:1.5px; background:var(--summit);
  transition:transform .4s var(--ease), opacity .25s var(--ease);
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:22px; }
.burger span:nth-child(3){ top:28px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* hero clips its own art without becoming a scroll container */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  padding-top:var(--hdr);
  background:
    radial-gradient(ellipse 120% 80% at 72% 18%,rgba(8,119,209,.20),transparent 60%),
    radial-gradient(ellipse 90% 60% at 12% 92%,rgba(8,119,209,.10),transparent 62%),
    linear-gradient(180deg,#040A12 0%,#07111F 42%,#0A1A2A 100%);
  overflow:clip;
}

/* Facility photography sits under the gradient, never competing with type */
.hero__photo{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__photo img{ width:100%; height:100%; object-fit:cover; opacity:.30; }
.hero__photo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg,#040A12 12%,rgba(7,17,31,.86) 46%,rgba(10,26,42,.62) 78%),
    linear-gradient(180deg,rgba(4,10,18,.9),transparent 34%,rgba(4,10,18,.92));
}

/* Ridge line sitting behind the vehicle */
.hero__ridge{
  position:absolute; left:0; right:0; bottom:0; z-index:0;
  width:100%; height:auto; opacity:.5; pointer-events:none;
}
.hero__grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(157,168,181,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(157,168,181,.06) 1px,transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(ellipse 70% 60% at 66% 52%,#000 8%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 66% 52%,#000 8%,transparent 72%);
}

.hero__stage{
  position:absolute; z-index:1; pointer-events:none;
  right:-3%; bottom:19%;
  width:min(1180px,66vw);
  /* the vehicle emerges out of the darkness behind the headline */
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 18%,#000 46%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 18%,#000 46%);
}
.hero__stage svg{ width:100%; height:auto; overflow:visible; }

.hero__in{
  position:relative; z-index:3;
  flex:1 1 auto; display:flex; align-items:center;
  width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut);
  padding-block:clamp(28px,5vh,72px);
}
.hero__copy{ max-width:min(900px,100%); }

.hero h1{
  font-size:clamp(2.35rem,5.35vw,4.8rem);
  text-transform:uppercase;
  letter-spacing:-.03em;
  line-height:.96;
  margin-bottom:.36em;
  color:#fff;
}
.hero h1 .ln{ display:block; }
.hero h1 .accent{
  background:linear-gradient(96deg,#fff 8%,var(--summit) 34%,#7FC2F5 62%,var(--alpine) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lead{ max-width:540px; color:var(--summit); }
.hero .btns{ margin-top:34px; }

/* Instrument strip: the three brand pillars as readouts, not stat cards */
.strip{
  position:relative; z-index:3; flex:none;
  border-top:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(4,10,18,.55),rgba(4,10,18,.9));
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.strip__in{
  width:100%; max-width:var(--max); margin-inline:auto; padding:0 var(--gut);
  display:grid; grid-template-columns:repeat(3,1fr);
}
.strip__cell{
  padding:26px 0 26px 26px;
  border-left:1px solid var(--line-soft);
  display:flex; align-items:flex-start; gap:14px;
  min-height:112px;
}
.strip__cell:first-child{ padding-left:0; border-left:0; }
.strip__cell svg{ width:22px; height:22px; flex:none; color:var(--alpine-text); margin-top:3px; }
.strip__cell b{
  display:block; font-family:var(--display); font-size:.9rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:5px;
}
.strip__cell span{ display:block; font-size:.85rem; line-height:1.5; color:var(--dim); }

/* --------------------------------------------------------------------------
   Editorial split (asymmetric, 7/5)
   -------------------------------------------------------------------------- */

.split{
  display:grid; gap:clamp(36px,5vw,84px);
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  align-items:start;
}
.split--5-7{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
.split--even{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.split--center{ align-items:center; }

.numeral{
  font-family:var(--display); font-weight:800;
  font-size:clamp(5.5rem,14vw,13rem); line-height:.78;
  letter-spacing:-.06em;
  color:transparent;
  -webkit-text-stroke:1px rgba(157,168,181,.30);
  margin-bottom:-.1em;
  user-select:none;
}
.sec--snow .numeral,.sec--silver .numeral{ -webkit-text-stroke-color:rgba(7,17,31,.16); }

/* Ordered list styled as a service ladder with a connecting rule */
.ladder{ list-style:none; margin:0; padding:0; counter-reset:lad; }
.ladder li{
  counter-increment:lad;
  position:relative;
  padding:22px 0 22px 62px;
  border-top:1px solid var(--line-ink);
}
.sec--dark .ladder li,.sec--deep .ladder li,.sec--ink .ladder li{ border-top-color:var(--line); }
.ladder li:last-child{ border-bottom:1px solid var(--line-ink); }
.sec--dark .ladder li:last-child,.sec--deep .ladder li:last-child,.sec--ink .ladder li:last-child{ border-bottom-color:var(--line); }
.ladder li::before{
  content:"0" counter(lad);
  position:absolute; left:0; top:22px;
  font-family:var(--display); font-size:.82rem; font-weight:700;
  letter-spacing:.1em; color:var(--alpine-ink);
  font-variant-numeric:tabular-nums;
}
.sec--dark .ladder li::before,.sec--deep .ladder li::before,.sec--ink .ladder li::before{ color:var(--alpine-text); }
.ladder b{ display:block; font-family:var(--display); font-size:1.02rem; font-weight:700; margin-bottom:4px; }
.ladder span{ display:block; font-size:.94rem; line-height:1.6; color:var(--dim-ink); }
.sec--dark .ladder span,.sec--deep .ladder span,.sec--ink .ladder span{ color:var(--dim); }

/* --------------------------------------------------------------------------
   Precision scanner
   -------------------------------------------------------------------------- */

.scan{ position:relative; background:var(--deep); overflow-x:clip; }

/* One centred stack: heading, vehicle, measurement readout. No side rails, no
   dead zones. The whole composition is 80% of the viewport, capped at --max. */
.scan__sticky{
  position:sticky; top:0;
  height:100svh; min-height:640px;
  display:grid; place-items:center;
  padding:calc(var(--hdr) + clamp(14px,2vh,30px)) var(--gut) clamp(24px,4vh,52px);
  overflow:hidden;
}
/* The whole stack is sized by the vehicle drawing, so the heading, the diagram
   and the readout row all share one edge. Never wider than 80vw. */
.scan__overlay{
  width:min(80vw, var(--max), calc((100svh - 470px) * 2.79));
  display:grid; justify-items:center;
  row-gap:clamp(14px,2.6vh,34px);
}
.scan__head{ text-align:center; max-width:76ch; }
.scan__head h2{ margin-bottom:.42em; }
.scan__head p{ max-width:72ch; margin-inline:auto; }

/* Width is derived from the height budget so the drawing never letterboxes. */
.scan__art{ position:relative; width:100%; }
.scan__art > svg{ width:100%; height:auto; overflow:visible; display:block; }

/* Laser bar, driven by --p (0 to 1) from JS */
.scan__laser{
  position:absolute; z-index:2; top:-8%; bottom:-8%; width:2px;
  left:calc(var(--p,0) * 100%);
  background:linear-gradient(180deg,transparent,var(--alpine) 14%,#DCEFFF 50%,var(--alpine) 86%,transparent);
  box-shadow:0 0 26px 5px rgba(8,119,209,.6);
  opacity:0; transition:opacity .5s var(--ease);
}
.scan.is-live .scan__laser{ opacity:1; }
.scan__laser::after{
  content:""; position:absolute; inset:0 -34px;
  background:linear-gradient(90deg,transparent,rgba(8,119,209,.20),transparent);
  filter:blur(8px);
}

/* Measurement readout: five across, revealing as the laser passes */
.node-list--row{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(10px,1.4vw,26px);
  width:100%; list-style:none; margin:0; padding:0;
}
.node-list--row li{
  display:block; border-top:1px solid var(--line); border-bottom:0;
  padding:14px 0 0; opacity:.28;
  transition:opacity .45s var(--ease), border-color .45s var(--ease);
}
.node-list--row li.is-on{ opacity:1; border-top-color:rgba(79,168,238,.55); }
.node-list--row i{
  display:block; font-style:normal; font-size:.64rem; font-weight:600; letter-spacing:.16em;
  color:var(--alpine-text); font-variant-numeric:tabular-nums; margin-bottom:7px;
}
.node-list--row b{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(.82rem,1vw,.96rem); color:#fff; line-height:1.28; margin-bottom:5px;
}
.node-list--row span{
  display:block; color:var(--dim); font-size:clamp(.74rem,.85vw,.84rem); line-height:1.45;
}

/* Measurement node list beside the vehicle */
.node-list{ list-style:none; margin:0; padding:0; }
.node-list li{
  display:flex; gap:12px; align-items:baseline;
  padding:11px 0; border-top:1px solid var(--line-soft);
  opacity:.28; transition:opacity .45s var(--ease);
  font-size:.88rem;
}
.node-list li.is-on{ opacity:1; }
.node-list li i{
  font-style:normal; font-size:.68rem; font-weight:600; letter-spacing:.14em;
  color:var(--alpine-text); font-variant-numeric:tabular-nums; flex:none;
}
.node-list li b{ font-weight:600; color:#fff; display:block; }
.node-list li span{ display:block; color:var(--dim); font-size:.82rem; line-height:1.45; }

/* Measurement nodes drawn over the vehicle */
.node{ opacity:0; transition:opacity .4s var(--ease); }
.node.is-on{ opacity:1; }
.node circle.pulse{ transform-box:fill-box; transform-origin:center; }
.scan.is-live .node.is-on circle.pulse{ animation:nodePulse 2.4s var(--ease) infinite; }
@keyframes nodePulse{
  0%  { r:5;  opacity:.85; }
  70% { r:20; opacity:0; }
  100%{ r:20; opacity:0; }
}

/* --------------------------------------------------------------------------
   Repair stage track
   -------------------------------------------------------------------------- */

.track{ position:relative; background:var(--midnight); overflow-x:clip; }
.track__sticky{ position:sticky; top:0; height:100svh; min-height:640px; display:flex; flex-direction:column; }
.track__head{ padding-top:calc(var(--hdr) + clamp(24px,4vw,52px)); flex:none; }
.track__viewport{ flex:1; position:relative; overflow:hidden; display:flex; align-items:center; }
.track__lane{
  display:flex; gap:clamp(20px,2.4vw,36px);
  padding-inline:var(--gut);
  will-change:transform;
}
.stage{
  flex:none;
  width:min(430px,78vw);
  border-top:1px solid var(--line);
  padding-top:24px;
  opacity:.38;
  transition:opacity .5s var(--ease);
}
.stage.is-on{ opacity:1; }
.stage__no{
  font-family:var(--display); font-weight:800; font-size:2.6rem; line-height:1;
  letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1px rgba(79,168,238,.55);
  font-variant-numeric:tabular-nums; margin-bottom:14px;
}
.stage.is-on .stage__no{ color:var(--alpine-text); -webkit-text-stroke-color:transparent; }
.stage h3{ font-size:1.42rem; margin-bottom:10px; color:#fff; }
.stage p{ font-size:.95rem; color:var(--dim); line-height:1.62; }
.stage__meta{ margin-top:16px; display:flex; gap:8px; flex-wrap:wrap; }
.stage__meta em{
  font-style:normal; font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--alpine-text); border:1px solid rgba(79,168,238,.32); padding:5px 10px; border-radius:2px;
}

/* Progress rail with the travelling marker */
.track__rail{
  flex:none; position:relative; height:2px; margin:0 var(--gut) clamp(34px,5vw,60px);
  background:var(--line-soft);
}
.track__fill{
  position:absolute; inset:0 auto 0 0; width:calc(var(--p,0)*100%);
  background:linear-gradient(90deg,var(--alpine),#7FC2F5);
  box-shadow:0 0 16px rgba(8,119,209,.7);
}
.track__marker{
  position:absolute; top:50%; left:calc(var(--p,0)*100%);
  transform:translate(-50%,-50%);
  width:34px; height:14px; color:var(--summit);
}
.track__ticks{ display:flex; justify-content:space-between; margin:14px var(--gut) 0; }
.track__ticks span{
  font-size:.62rem; letter-spacing:.16em; font-weight:600; color:var(--dim);
  font-variant-numeric:tabular-nums; opacity:.5; transition:opacity .4s var(--ease), color .4s var(--ease);
}
.track__ticks span.is-on{ opacity:1; color:var(--alpine-text); }

/* Mobile fallback: vertical stack, no horizontal transform */
.track--stack .track__sticky{ position:static; height:auto; min-height:0; }
.track--stack .track__viewport{ display:block; overflow:visible; }
.track--stack .track__lane{ display:block; transform:none !important; padding-inline:0; }
.track--stack .stage{ width:100%; opacity:1; margin-bottom:34px; }
.track--stack .track__rail,.track--stack .track__ticks{ display:none; }

/* --------------------------------------------------------------------------
   Craftsmanship mosaic: balanced irregular rows, equal heights per row
   -------------------------------------------------------------------------- */

.mosaic{ display:grid; gap:clamp(12px,1.3vw,20px); }
.mosaic__row{ display:grid; gap:inherit; }
/* Rows carry the height so every plate in a row matches exactly. */
.mosaic__row--a{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-auto-rows:clamp(260px,30vw,440px); }
.mosaic__row--b{ grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:clamp(280px,26vw,400px); }
.mosaic__row--c{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); grid-auto-rows:clamp(260px,30vw,440px); }

.plate{
  position:relative; overflow:hidden; background:var(--ink-2);
  border:1px solid var(--line-soft);
  height:100%; margin:0;
}
.plate img{ width:100%; height:100%; object-fit:cover; }
.plate figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:34px 22px 20px;
  background:linear-gradient(180deg,transparent,rgba(4,10,18,.94));
  font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  color:var(--summit);
  transition:color .4s var(--ease);
}
.plate:hover figcaption,.plate:focus-within figcaption{ color:#fff; }
/* Scanning reveal line on hover */
.plate::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; z-index:4;
  background:linear-gradient(90deg,transparent,var(--alpine),transparent);
  box-shadow:0 0 18px rgba(8,119,209,.8);
  opacity:0; transform:translateY(-4px);
  transition:transform .9s var(--ease-out), opacity .3s var(--ease);
}
.plate:hover::after,.plate:focus-within::after{ opacity:1; transform:translateY(760px); }

/* Vector fallback art that fills a plate until real photography lands */
.plate__art{ position:absolute; inset:0; width:100%; height:100%; }
.plate__art svg{ width:100%; height:100%; }

/* --------------------------------------------------------------------------
   Before / after comparison
   -------------------------------------------------------------------------- */

.cmp{
  position:relative; overflow:hidden;
  aspect-ratio:16/9; background:var(--ink-2);
  border:1px solid var(--line);
  touch-action:pan-y;
  cursor:ew-resize;
}
.cmp__layer{ position:absolute; inset:0; }
.cmp__layer img,.cmp__layer svg{ width:100%; height:100%; object-fit:cover; }
.cmp__layer--after{ clip-path:inset(0 0 0 calc(var(--x,50) * 1%)); }
.cmp__tag{
  position:absolute; top:18px; z-index:5;
  font-size:.66rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  padding:7px 13px; background:rgba(4,10,18,.72); border:1px solid var(--line);
  color:var(--summit);
}
.cmp__tag--l{ left:18px; }
.cmp__tag--r{ right:18px; }
.cmp__handle{
  position:absolute; top:0; bottom:0; z-index:6;
  left:calc(var(--x,50) * 1%);
  width:2px; margin-left:-1px;
  background:linear-gradient(180deg,transparent,var(--alpine) 10%,#CDE8FF 50%,var(--alpine) 90%,transparent);
  box-shadow:0 0 20px rgba(8,119,209,.75);
}
.cmp__knob{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%;
  background:rgba(7,17,31,.9); border:1px solid var(--alpine);
  display:grid; place-items:center; color:var(--summit);
  box-shadow:0 0 0 6px rgba(8,119,209,.14);
}
.cmp__knob svg{ width:22px; height:22px; }
.cmp__input{
  position:absolute; inset:auto 0 0; z-index:7; width:100%;
  opacity:0; height:54px; margin:0; cursor:ew-resize;
}
.cmp__input:focus-visible + .cmp__handle .cmp__knob{ outline:2px solid var(--alpine-text); outline-offset:3px; }

/* --------------------------------------------------------------------------
   Tables, callouts, matrices  (content modules)
   -------------------------------------------------------------------------- */

.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:34px 0; }
table.tbl{
  width:100%; border-collapse:collapse; min-width:560px;
  font-size:.94rem;
}
table.tbl caption{
  text-align:left; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; color:var(--alpine-ink); padding-bottom:14px;
}
.sec--dark table.tbl caption,.sec--deep table.tbl caption{ color:var(--alpine-text); }
table.tbl th,table.tbl td{
  text-align:left; padding:15px 18px; vertical-align:top;
  border-bottom:1px solid var(--line-ink);
}
.sec--dark table.tbl th,.sec--dark table.tbl td,
.sec--deep table.tbl th,.sec--deep table.tbl td{ border-bottom-color:var(--line); }
table.tbl thead th{
  font-family:var(--display); font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  border-bottom-width:2px; border-bottom-color:var(--alpine);
}
table.tbl tbody th{ font-weight:600; width:30%; }
table.tbl tbody tr:nth-child(odd) td,table.tbl tbody tr:nth-child(odd) th{ background:rgba(157,168,181,.05); }

.callout{
  position:relative;
  margin:34px 0; padding:26px 30px 26px 32px;
  background:rgba(8,119,209,.06);
  border-left:2px solid var(--alpine);
}
.sec--dark .callout,.sec--deep .callout,.sec--ink .callout{ background:rgba(8,119,209,.10); }
.callout b{
  display:block; font-family:var(--display); font-size:.72rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--alpine-ink); margin-bottom:9px;
}
.sec--dark .callout b,.sec--deep .callout b,.sec--ink .callout b{ color:var(--alpine-text); }
.callout p{ font-size:.96rem; }
.callout--warn{ background:rgba(214,40,40,.06); border-left-color:var(--red); }
.callout--warn b{ color:#A81E1E; }
.sec--dark .callout--warn b,.sec--deep .callout--warn b{ color:#F08585; }

/* If / then decision matrix */
.matrix{ display:grid; gap:1px; background:var(--line-ink); border:1px solid var(--line-ink); margin:34px 0; }
.sec--dark .matrix,.sec--deep .matrix,.sec--ink .matrix{ background:var(--line); border-color:var(--line); }
.matrix__row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:1px; background:inherit; }
.matrix__row > div{ background:var(--snow); padding:20px 24px; }
.sec--dark .matrix__row > div,.sec--deep .matrix__row > div,.sec--ink .matrix__row > div{ background:var(--ink-2); }
.matrix__if{ font-weight:600; }
.matrix__if em{
  display:block; font-style:normal; font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--alpine-ink); margin-bottom:7px;
}
.sec--dark .matrix__if em,.sec--deep .matrix__if em,.sec--ink .matrix__if em{ color:var(--alpine-text); }
.matrix__then{ font-size:.95rem; }

/* Bottom line summary */
.bottomline{
  margin:40px 0 0; padding:30px 34px;
  border:1px solid var(--line-ink); border-top:2px solid var(--alpine);
  background:rgba(157,168,181,.06);
}
.sec--dark .bottomline,.sec--deep .bottomline{ border-color:var(--line); border-top-color:var(--alpine); }
.bottomline h3{ font-size:1.05rem; letter-spacing:.02em; margin-bottom:12px; }

/* Prose blocks on service pages */
.prose h2{ font-size:clamp(1.6rem,2.5vw,2.2rem); margin-top:2.1em; }
.prose h3{ font-size:clamp(1.16rem,1.6vw,1.38rem); margin-top:1.9em; }
.prose > :first-child{ margin-top:0; }
.prose ul,.prose ol{ margin:0 0 1.2em; padding-left:1.25em; }
.prose li{ margin-bottom:.5em; }
.prose li::marker{ color:var(--alpine-ink); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq{ border-top:1px solid var(--line-ink); }
.sec--dark .faq,.sec--deep .faq,.sec--ink .faq{ border-top-color:var(--line); }
.faq details{ border-bottom:1px solid var(--line-ink); }
.sec--dark .faq details,.sec--deep .faq details,.sec--ink .faq details{ border-bottom-color:var(--line); }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; gap:18px;
  padding:24px 0;
  font-family:var(--display); font-weight:700; font-size:1.04rem; line-height:1.4;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; flex:none; margin-left:auto; margin-top:7px;
  width:13px; height:13px;
  border-right:1.5px solid var(--alpine-ink); border-bottom:1.5px solid var(--alpine-ink);
  transform:rotate(45deg); transform-origin:60% 60%;
  transition:transform .4s var(--ease-out);
}
.sec--dark .faq summary::after,.sec--deep .faq summary::after{ border-color:var(--alpine-text); }
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq__body{ overflow:hidden; }
.faq__body > div{ padding:0 0 26px; max-width:70ch; }
.faq__body p{ font-size:.97rem; }

/* --------------------------------------------------------------------------
   Service index / cross links
   -------------------------------------------------------------------------- */

.svc-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-ink); }
.sec--dark .svc-list,.sec--deep .svc-list{ border-top-color:var(--line); }
.svc-list li{ border-bottom:1px solid var(--line-ink); }
.sec--dark .svc-list li,.sec--deep .svc-list li{ border-bottom-color:var(--line); }
.svc-list a{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:clamp(16px,3vw,40px);
  align-items:center;
  padding:clamp(22px,2.6vw,30px) 0;
  text-decoration:none; color:inherit;
  position:relative;
  transition:padding-left .45s var(--ease-out);
}
.svc-list a::before{
  content:""; position:absolute; left:0; right:0; top:0; bottom:0; z-index:-1;
  background:linear-gradient(90deg,rgba(8,119,209,.10),transparent 55%);
  opacity:0; transition:opacity .4s var(--ease);
}
.svc-list a:hover{ padding-left:18px; }
.svc-list a:hover::before,.svc-list a:focus-visible::before{ opacity:1; }
.svc-list__no{
  font-family:var(--display); font-weight:700; font-size:.78rem; letter-spacing:.12em;
  color:var(--alpine-ink); font-variant-numeric:tabular-nums;
}
.sec--dark .svc-list__no,.sec--deep .svc-list__no{ color:var(--alpine-text); }
.svc-list__t{ font-family:var(--display); font-weight:700; font-size:clamp(1.14rem,1.9vw,1.5rem); }
.svc-list__d{ display:block; font-family:var(--body); font-weight:400; font-size:.93rem; color:var(--dim-ink); margin-top:5px; max-width:62ch; }
.sec--dark .svc-list__d,.sec--deep .svc-list__d{ color:var(--dim); }
.svc-list__go{ width:20px; height:20px; color:var(--alpine-ink); transition:transform .45s var(--ease-out); }
.sec--dark .svc-list__go,.sec--deep .svc-list__go{ color:var(--alpine-text); }
.svc-list a:hover .svc-list__go{ transform:translateX(6px); }

/* --------------------------------------------------------------------------
   Reviews rail
   -------------------------------------------------------------------------- */

.rail{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.rail__lane{ display:flex; gap:20px; width:max-content; }
.rail__lane.is-running{ animation:railScroll 64s linear infinite; }
.rail:hover .rail__lane.is-running,.rail:focus-within .rail__lane.is-running{ animation-play-state:paused; }
@keyframes railScroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.quote{
  flex:none; width:min(420px,80vw);
  padding:28px 30px;
  border:1px solid var(--line-ink); background:#fff;
}
.sec--dark .quote,.sec--deep .quote{ border-color:var(--line); background:var(--ink-2); }
.quote p{ font-size:.98rem; line-height:1.6; }
.quote cite{ display:block; font-style:normal; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim-ink); margin-top:16px; }
.sec--dark .quote cite,.sec--deep .quote cite{ color:var(--dim); }
.stars{ display:flex; gap:3px; margin-bottom:14px; color:var(--gold); }
.stars svg{ width:15px; height:15px; }

/* Honest empty state for proof modules with no supplied data yet */
.awaiting{
  border:1px dashed var(--line-ink); padding:clamp(30px,4vw,52px);
  text-align:center;
}
.sec--dark .awaiting,.sec--deep .awaiting{ border-color:var(--line); }

/* --------------------------------------------------------------------------
   Location / service area
   -------------------------------------------------------------------------- */

.areas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:2px; margin-top:30px; }
.areas span{
  padding:13px 4px; font-size:.86rem; letter-spacing:.03em;
  border-top:1px solid var(--line); color:var(--summit);
}
.map-art{ width:100%; height:auto; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field{ margin-bottom:20px; }
.field label{
  display:block; font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); margin-bottom:9px;
}
.sec--snow .field label,.sec--silver .field label{ color:var(--dim-ink); }
.field input,.field select,.field textarea{
  width:100%; padding:15px 16px;
  background:rgba(157,168,181,.07);
  border:1px solid var(--line);
  border-radius:2px; color:inherit;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.sec--snow .field input,.sec--snow .field select,.sec--snow .field textarea,
.sec--silver .field input,.sec--silver .field select,.sec--silver .field textarea{
  background:#fff; border-color:var(--line-ink);
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--alpine); outline:none; background:rgba(8,119,209,.06); }
.field textarea{ min-height:140px; resize:vertical; }
.field--half{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.form-note{ font-size:.82rem; color:var(--dim); }

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */

.finale{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 100% 70% at 50% 108%,rgba(8,119,209,.30),transparent 60%),
    linear-gradient(180deg,#07111F,#040A12);
  text-align:center;
}
.finale__ridge{ position:absolute; left:0; right:0; bottom:0; width:100%; opacity:.45; pointer-events:none; }
.finale .wrap{ position:relative; z-index:2; }
.finale h2{ font-size:clamp(2.1rem,5.2vw,4.2rem); text-transform:uppercase; color:#fff; }
.finale .btns{ justify-content:center; margin-top:34px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.ftr{ background:var(--deep); border-top:1px solid var(--line-soft); padding-block:clamp(56px,6vw,88px) 32px; }
.ftr__top{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:clamp(30px,4vw,56px); }
.ftr__brand img{ width:210px; height:auto; margin-bottom:20px; }
.ftr .ftr__h{ font-size:.72rem; font-family:var(--body); font-weight:600; line-height:1.4; letter-spacing:.18em; text-transform:uppercase; color:var(--alpine-text); margin-bottom:16px; }
.ftr ul{ list-style:none; margin:0; padding:0; }
.ftr li{ margin-bottom:10px; }
.ftr a{ color:var(--dim); text-decoration:none; font-size:.92rem; transition:color .3s var(--ease); }
.ftr a:hover{ color:#fff; }
.ftr__bar{
  margin-top:clamp(40px,5vw,64px); padding-top:24px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center;
  font-size:.8rem; color:var(--dim);
}
.ftr__bar p{ margin:0; }
.ftr__bar nav{ margin-left:auto; display:flex; gap:20px; flex-wrap:wrap; }

/* Breadcrumbs */
.crumbs{ font-size:.76rem; letter-spacing:.06em; color:var(--dim); padding-top:14px; }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:9px; margin:0; padding:0; }
.crumbs li::after{ content:"/"; margin-left:9px; color:var(--line); }
.crumbs li:last-child::after{ content:""; }
.crumbs a{ color:var(--dim); text-decoration:none; }
.crumbs a:hover{ color:var(--alpine-text); }

/* --------------------------------------------------------------------------
   Page masthead (inner pages open dark so the logo always sits on Midnight)
   -------------------------------------------------------------------------- */

.mast{
  position:relative; overflow:hidden;
  padding-top:calc(var(--hdr) + clamp(40px,6vw,86px));
  padding-bottom:clamp(52px,6.5vw,96px);
  background:
    radial-gradient(ellipse 90% 70% at 78% 12%,rgba(8,119,209,.20),transparent 62%),
    linear-gradient(180deg,#040A12,#07111F 60%,#0A1A2A);
}
.mast__grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(157,168,181,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(157,168,181,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 90% at 70% 40%,#000,transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse 80% 90% at 70% 40%,#000,transparent 74%);
}
.mast .wrap{ position:relative; z-index:2; }
.mast h1{ font-size:clamp(2.3rem,5.2vw,4.3rem); text-transform:uppercase; color:#fff; max-width:17ch; }
.mast .lead{ max-width:62ch; }
.mast__meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.mast__meta em{
  font-style:normal; font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--alpine-text); border:1px solid rgba(79,168,238,.3); padding:6px 12px;
}

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */

.has-js .rv{ opacity:0; transform:translateY(26px); }
.has-js .rv.is-in{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
.has-js .rv-d1.is-in{ transition-delay:.1s; }
.has-js .rv-d2.is-in{ transition-delay:.2s; }
.has-js .rv-d3.is-in{ transition-delay:.3s; }

/* Draw-in for technical line art */
.has-js .draw path,.has-js .draw line,.has-js .draw polyline,.has-js .draw circle{
  stroke-dasharray:var(--len,1200); stroke-dashoffset:var(--len,1200);
}
.has-js .draw.is-in path,.has-js .draw.is-in line,.has-js .draw.is-in polyline,.has-js .draw.is-in circle{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.9s var(--ease-out);
}

/* Precision reticle that follows the pointer inside technical areas */
.reticle{
  position:fixed; z-index:90; top:0; left:0;
  width:56px; height:56px; margin:-28px 0 0 -28px;
  pointer-events:none; opacity:0;
  transition:opacity .35s var(--ease);
  color:var(--alpine-text);
}
.reticle.is-on{ opacity:.85; }

/* Mobile action bar */
.actionbar{
  position:fixed; z-index:95; left:0; right:0; bottom:0;
  display:none;
  background:rgba(4,10,18,.96);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid var(--line-soft);
  padding-bottom:env(safe-area-inset-bottom);
}
.actionbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:11px 6px 12px; text-decoration:none;
  font-size:.62rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim);
}
.actionbar a svg{ width:19px; height:19px; }
.actionbar a.is-cta{ color:#fff; background:var(--alpine); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width:1360px){
  .nav a{ font-size:.73rem; letter-spacing:.1em; }
  .nav__links{ gap:clamp(16px,1.8vw,26px); }
  .hdr__in{ column-gap:clamp(26px,3vw,44px); }
  .hdr .btn{ padding:12px 18px; font-size:.69rem; }
  .brand img{ height:66px; }
}

@media (max-width:1180px){
  .hero__stage{ width:min(1000px,96vw); right:-10%; bottom:20%; opacity:.85; }
  .ftr__top{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}

@media (max-width:1120px){
  :root{ --hdr:84px; }
  .hdr__in{ grid-template-columns:1fr auto 1fr; }
  .burger{ display:block; }
  .brand img{ height:58px; }
  .hdr.is-stuck .brand img{ height:50px; }
  .hdr.is-stuck{ height:72px; }

  .nav{
    position:fixed; inset:0; z-index:99;
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
    gap:8px; margin:0; padding:calc(var(--hdr) + 28px) var(--gut) 48px;
    background:rgba(4,10,18,.985);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    transform:translateY(-100%); visibility:hidden;
    transition:transform .55s var(--ease-out), visibility .55s;
    overflow-y:auto;
  }
  .nav.is-open{ transform:none; visibility:visible; }
  .nav__l,.nav__r{
    display:flex; flex-direction:column; align-items:flex-start; gap:0; width:100%;
    justify-content:flex-start;
  }
  .nav__links{ display:flex; flex-direction:column; align-items:flex-start; gap:0; width:100%; }
  .nav__l{ flex-direction:column-reverse; justify-content:flex-start; }
  .nav__r{ margin-top:0; justify-content:flex-start; }
  .nav__cta{ margin-left:0; }
  .nav__tel{
    display:inline-flex; align-items:center; gap:11px;
    font-size:1.1rem; font-weight:600; letter-spacing:.04em; color:var(--summit);
    text-decoration:none; margin-top:26px; padding:12px 0;
    font-variant-numeric:tabular-nums;
  }
  .nav__tel svg{ width:18px; height:18px; color:var(--alpine-text); }
  .nav a{ font-size:1.55rem; font-family:var(--display); font-weight:700; letter-spacing:-.01em; text-transform:none; padding:13px 0; width:100%; }
  .nav a::after{ background:linear-gradient(90deg,var(--alpine-text),transparent); transform-origin:left; }
  .nav .btn{ display:inline-flex; width:auto; margin:26px 0 0; font-size:.82rem; letter-spacing:.09em; text-transform:uppercase; font-family:var(--body); }
  body.nav-open{ overflow:hidden; }

  .split,.split--5-7{ grid-template-columns:minmax(0,1fr); }
  .scan__sticky{ height:auto; min-height:0; display:block; padding:clamp(52px,7vw,84px) var(--gut); }
  .scan__overlay{ width:100%; }
  .scan__head{ text-align:left; }
  .scan__head .eyebrow{ justify-content:flex-start; }
  .scan__head .eyebrow--center::after{ display:none; }
  .scan__art{ width:100%; }
  .scan__laser{ display:none; }
  .node-list--row{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 22px; }
  .mosaic__row--a,.mosaic__row--c{ grid-template-columns:minmax(0,1fr); grid-auto-rows:clamp(240px,44vw,360px); }
  .matrix__row{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:760px){
  .node-list--row{ grid-template-columns:minmax(0,1fr); }
  .strip__in{ grid-template-columns:minmax(0,1fr); }
  .strip__cell{ padding:18px 0; border-left:0; border-top:1px solid var(--line-soft); min-height:0; }
  .strip__cell:first-child{ border-top:0; }
  .hero{ min-height:auto; padding-top:calc(var(--hdr) + 8px); padding-bottom:0; }
  .hero__in{ display:block; }
  .hero__stage{ position:relative; right:auto; bottom:auto; width:124%; margin:0 -12% -10%; opacity:.9; }
  .hero__in{ padding-bottom:8px; }
  .hero .btns .btn{ width:100%; justify-content:center; }
  .mosaic__row--b{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:clamp(230px,52vw,320px); }
  .mosaic__row--b .plate:last-child{ grid-column:span 2; }
  .ftr__top{ grid-template-columns:minmax(0,1fr); }
  .ftr__bar nav{ margin-left:0; }
  .actionbar{ display:flex; }
  body{ padding-bottom:64px; }
  .field--half{ grid-template-columns:minmax(0,1fr); }
  .svc-list a{ grid-template-columns:44px minmax(0,1fr); }
  .svc-list__go{ display:none; }
  .cmp{ aspect-ratio:4/3; }
}

@media (max-width:420px){
  .brand img{ height:44px; }
}

/* --------------------------------------------------------------------------
   Motion, print, forced colors
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .has-js .rv{ opacity:1; transform:none; }
  .has-js .draw path,.has-js .draw line,.has-js .draw polyline,.has-js .draw circle{ stroke-dashoffset:0; }
  .rail__lane.is-running{ animation:none; }
  .node{ opacity:1; }
  .stage,.node-list li{ opacity:1; }
  .reticle{ display:none; }
}

@media print{
  .hdr,.actionbar,.reticle,.finale,.rail{ display:none !important; }
  body{ background:#fff; color:#000; }
}

@media (forced-colors:active){
  .btn{ border:1px solid ButtonText; }
  .node,.stage,.node-list li,.rv{ opacity:1 !important; }
}

/* --------------------------------------------------------------------------
   Scroll ranges for the sticky experiences (added after the base system)
   -------------------------------------------------------------------------- */

@media (min-width:1121px){
  .scan{ height:300svh; }
  .track{ height:340svh; }
}
@media (max-width:1120px){
  .scan{ height:auto; }
  .track{ height:auto !important; padding-block:var(--sec); }
}

/* Hero laser sweep across the vehicle */
.hero__sweep rect{ opacity:0; }
.has-js .hero__sweep rect{
  animation:heroSweep 7.5s cubic-bezier(.5,0,.5,1) 1.1s infinite;
}
@keyframes heroSweep{
  0%   { transform:translateX(60px);   opacity:0; }
  8%   { opacity:.9; }
  46%  { transform:translateX(1120px); opacity:.9; }
  54%  { transform:translateX(1120px); opacity:0; }
  100% { transform:translateX(1120px); opacity:0; }
}

/* Hero edge trace draws itself once on load */
.has-js .hero__edge{ opacity:0; animation:edgeIn 1.4s var(--ease-out) .25s forwards; }
@keyframes edgeIn{ to{ opacity:.85; } }


@media (prefers-reduced-motion:reduce){
  .has-js .hero__sweep rect{ animation:none; opacity:0; }
  .has-js .hero__edge{ opacity:.85; animation:none; }
  .scan,.track{ height:auto !important; }
}

/* ==========================================================================
   Inner page components
   ========================================================================== */

.sec--dark{ background:var(--midnight); }

/* Technical figure blocks */
.fig-wrap{ max-width:1120px; margin-inline:auto; }
.fig-wrap .fig{ width:100%; height:auto; overflow:visible; }
.fig-cap{ margin-top:22px; text-align:center; max-width:62ch; margin-inline:auto; line-height:1.7; }
.sec--snow .fig-cap,.sec--silver .fig-cap{ color:var(--dim-ink); }

/* Photography figure used beside prose */
.shot{ margin:0; position:relative; }
.shot picture,.shot img{ display:block; width:100%; }
.shot img{ border:1px solid var(--line-soft); }
.shot figcaption{
  margin-top:14px;
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim-ink);
}
.sec--deep .shot figcaption,.sec--ink .shot figcaption,.sec--dark .shot figcaption{ color:var(--dim); }
.shot::before{
  content:""; position:absolute; z-index:2; left:0; top:0; width:44px; height:44px;
  border-left:2px solid var(--alpine); border-top:2px solid var(--alpine);
  pointer-events:none;
}

/* Process page: seven stages as rows, not cards */
.stagerows{ list-style:none; margin:0; padding:0; counter-reset:st; }
.stagerows li{
  display:grid; grid-template-columns:clamp(76px,9vw,132px) minmax(0,1fr);
  gap:clamp(18px,3vw,48px);
  padding:clamp(26px,3vw,40px) 0;
  border-top:1px solid var(--line);
  align-items:start;
}
.stagerows li:last-child{ border-bottom:1px solid var(--line); }
.stagerow__no{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.9rem,3.6vw,3.2rem); line-height:.9;
  letter-spacing:-.04em; font-variant-numeric:tabular-nums;
  color:transparent; -webkit-text-stroke:1px rgba(79,168,238,.6);
}
.stagerows li:hover .stagerow__no{ color:var(--alpine-text); -webkit-text-stroke-color:transparent; }
.stagerow__body h3{ font-size:clamp(1.24rem,2vw,1.6rem); color:#fff; margin-bottom:10px; }
.stagerow__body p{ color:var(--dim); max-width:68ch; }

/* Contact page cards */
.infocard{
  border:1px solid var(--line-ink);
  border-top:2px solid var(--alpine);
  background:#fff;
  padding:clamp(24px,2.6vw,34px);
  margin-bottom:20px;
}
.infocard:last-child{ margin-bottom:0; }
.infocard h3{ margin-bottom:12px; }
.ladder--tight li{ padding:14px 0 14px 54px; }
.ladder--tight li::before{ top:14px; }
.ladder--tight b{ font-size:.96rem; }
.ladder--tight span{ font-size:.88rem; }

.form{ max-width:620px; }
.lead-block p:first-child{ font-size:clamp(1.06rem,1.3vw,1.24rem); }

@media (max-width:1120px){
  .stagerows li{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .shot::before{ width:34px; height:34px; }
}

/* Tablet band: the vehicle drops behind the CTA cluster and softens so the
   buttons stay the loudest thing in the hero. */
@media (min-width:761px) and (max-width:1120px){
  .hero__stage{ right:-16%; bottom:6%; width:min(980px,88vw); opacity:.5; }
  .hero__copy{ max-width:min(620px,100%); }
}