/* Suivels Auto — styles.css
   Direction: TORQUE (DESIGN.md v3). Warm black ground, machined steel, signal
   orange reserved for actions and ordinals only. Type: Archivo variable.
   Depth comes from photography, scrim, grain and crop. Never a decorative gradient. */

:root {
  /* Ground and material */
  --pitch:  #0B0C0A;
  --ground: #111210;
  --graphite:#1E201C;
  --raise:  #26281F;
  --steel:  #6E736C;
  --bone:   #EDEAE4;
  --mute:   #9AA09A;
  --line:   #2A2D28;
  --line-2: rgba(237,234,228,.16);

  /* Signal. Actions and ordinals only. Never a headline, never decoration. */
  --signal: #FF5A1F;
  --signal-hi:#FF7038;

  --focus:  #7FB2FF;
  --error:  #FF8A6B;

  --d: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  --container: 1240px;
  --gutter: 22px;
  --radius: 3px;
  --bar-h: 66px;
}
@media (min-width:768px){ :root{ --gutter:26px; } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--bone);
  font-family:var(--d);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px));
}
@media (min-width:768px){ body{font-size:17px;padding-bottom:0} }
img,video{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1rem;max-width:68ch}
.muted{color:var(--mute)}

/* ---- Type scale. One dominant element per page (method T2). -------------- */
.display{
  font-variation-settings:"wdth" 118;font-weight:700;
  font-size:clamp(2.7rem,7.2vw,5.6rem);line-height:.9;letter-spacing:-.025em;
  margin:0;color:#fff;text-wrap:balance;
}
h2{
  font-variation-settings:"wdth" 112;font-weight:700;
  font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.04;letter-spacing:-.02em;margin:0 0 10px;
}
h3{font-weight:600;font-size:1.125rem;line-height:1.2;margin:0 0 5px}
@media (min-width:768px){ h3{font-size:1.3rem} }

.eyebrow{
  font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  color:var(--steel);margin:0 0 16px;
}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--signal);color:var(--pitch);padding:12px 18px;font-weight:700}
.skip-link:focus{left:0}

/* ---- BRAND ---------------------------------------------------------------
   Horizontal lockup for chrome: simplified wheel mark + wordmark. The badge's
   circular text is unreadable below ~90px, so it never appears at nav scale.
   The wordmark is set in the site's own Archivo, condensed to echo the badge's
   blocky slab lettering, so the lockup is native rather than pasted on. */
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--bone)}
.brand__mark{width:auto;height:30px;flex:0 0 auto}
.brand__word{
  font-family:var(--d);font-weight:700;font-variation-settings:"wdth" 88;
  font-size:1.16rem;line-height:1;letter-spacing:.055em;text-transform:uppercase;
  color:#fff;white-space:nowrap;
}
/* "AUTO" carries the signal orange. This is the one sanctioned exception to the
   rule that orange marks only what commits (§10): it is the wordmark, it is fixed,
   and it echoes the amber "AUTO" in the badge without importing the badge's amber
   as a second warm hue. Owner decision, 2026-08-09. */
.brand__word2{color:var(--signal)}
@media (hover:hover) and (pointer:fine){ .brand:hover .brand__word{color:#fff} }
@media (max-width:520px){
  .brand__mark{height:26px}
  .brand__word{font-size:1rem;letter-spacing:.045em}
}
/* Compact: below 380px the wordmark drops and the mark stands alone. */
@media (max-width:379px){ .brand__word{display:none} .brand__mark{height:30px} }

/* The badge: a brand moment, never chrome. Minimum 120px or it turns to texture. */
.badge{width:100%;max-width:210px;min-width:130px;height:auto}
.close__brand .badge{margin-bottom:16px}

/* ---- Actions ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:14px 26px;border:2px solid transparent;border-radius:var(--radius);
  font-family:var(--d);font-weight:600;font-size:1.0625rem;line-height:1;text-decoration:none;cursor:pointer;
  transition:transform 120ms cubic-bezier(.23,1,.32,1),background-color 140ms ease-out,border-color 140ms ease-out;
}
.btn:active{transform:scale(.985) translateY(1px)}          /* PRESS */
.btn .i{width:19px;height:19px;flex:0 0 auto}
.btn--p{background:var(--signal);color:var(--pitch);border-color:var(--signal)}
.btn--s{background:rgba(11,12,10,.4);color:var(--bone);border-color:rgba(237,234,228,.34)}
.btn--ghost{background:transparent;color:var(--bone);border-color:var(--line)}
.btn--block{width:100%}
@media (hover:hover) and (pointer:fine){
  .btn--p:hover{background:var(--signal-hi);border-color:var(--signal-hi)}
  .btn--s:hover{border-color:var(--bone)}
  .btn--ghost:hover{border-color:var(--steel)}
}

/* ---- HERO: full-bleed real footage, type over it ------------------------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:var(--pitch)}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg video,.hero__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.12) brightness(.6)}
/* Directional scrim: makes type legible and puts the plate behind it in depth.
   Two linear passes, no colour invention, no decorative gradient. */
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(11,12,10,.88) 0%,rgba(11,12,10,.30) 34%,rgba(11,12,10,.74) 74%,var(--ground) 100%),
    linear-gradient(90deg,rgba(11,12,10,.82) 0%,rgba(11,12,10,0) 64%);
}
/* Film grain. Static SVG noise, no runtime cost, no animation. */
.hero__grain{
  position:absolute;inset:0;z-index:2;opacity:.5;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.hero__top{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;padding-block:22px;gap:16px}
.hero__phone{color:#fff;font-weight:600;font-size:.9375rem;text-decoration:none}
.hero__body{position:relative;z-index:3;flex:1;display:flex;align-items:flex-end;padding-bottom:44px}
.hero__sub{color:#CFD3CC;font-size:1.0625rem;max-width:40ch;margin:22px 0 0}
@media (min-width:768px){ .hero__sub{font-size:1.15rem} }
.hero__acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* Pillars: hairline-separated facts sitting ON the hero. Not a card row. */
.pillars{position:relative;z-index:3;border-top:1px solid var(--line-2);display:grid;grid-template-columns:repeat(4,1fr)}
.pillars div{padding:16px 20px 22px 0;font-size:.875rem;color:#B9BEB8}
.pillars b{display:block;color:#fff;font-weight:600;font-size:.9375rem;margin-bottom:3px}
@media (max-width:860px){ .pillars{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .pillars{grid-template-columns:1fr;} .pillars div{padding-block:12px 14px} }

/* ---- SYMPTOM INDEX: oversized rows with a cause preview ------------------ */
/* Grafted from concept B: each row previews what the symptom points at, which
   is what turns an index into an information architecture. */
.symptoms{padding-block:76px 0;background:var(--ground)}
.symptoms .lede{color:var(--mute);max-width:54ch;margin:0 0 34px}
.slist{border-top:1px solid var(--line)}
.srow{
  display:grid;grid-template-columns:56px 1fr;gap:6px 18px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--bone);position:relative;isolation:isolate;
}
.srow__n{font-family:var(--mono);font-size:.8125rem;color:var(--steel);transition:color 160ms;grid-row:1}
.srow__t{
  font-variation-settings:"wdth" 108;font-weight:600;
  font-size:clamp(1.3rem,3vw,2rem);letter-spacing:-.015em;line-height:1.05;
  transition:transform 220ms cubic-bezier(.2,.8,.2,1);
}
.srow__p{grid-column:2;color:var(--mute);font-size:.9375rem;margin:0;transition:transform 220ms cubic-bezier(.2,.8,.2,1)}
.srow__go{
  display:none;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--signal);font-weight:600;align-self:center;
}
.srow::before{content:"";position:absolute;inset:0 calc(var(--gutter) * -1);z-index:-1;background:var(--graphite);opacity:0;transition:opacity 160ms}
@media (min-width:900px){
  .srow{grid-template-columns:56px 1fr 1.05fr auto;align-items:center;gap:20px}
  .srow__p{grid-column:3;margin:0}
  .srow__go{display:block;opacity:0;transform:translateX(-6px);transition:opacity 180ms,transform 180ms}
}
@media (hover:hover) and (pointer:fine){
  .srow:hover::before{opacity:1}
  .srow:hover .srow__t,.srow:hover .srow__p{transform:translateX(9px)}
  .srow:hover .srow__n{color:var(--signal)}
  .srow:hover .srow__go{opacity:1;transform:none}
}
.srow:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.symptoms__foot{padding:26px 0 76px;color:var(--mute);font-size:.9375rem}
.symptoms__foot a{color:var(--signal);font-weight:600}

/* ---- AFFORDABILITY: an attributed quote, not a claim --------------------- */
.afford{background:var(--pitch);padding-block:76px;border-top:1px solid var(--line)}
.afford__q{
  font-variation-settings:"wdth" 104;font-weight:600;
  font-size:clamp(1.5rem,3.6vw,2.35rem);line-height:1.14;letter-spacing:-.02em;
  margin:0 0 18px;color:#fff;max-width:22ch;
}
.afford__src{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin:0 0 26px}
.afford__grid{display:grid;grid-template-columns:1fr;gap:26px}
.afford__body{color:var(--mute);max-width:52ch;margin:0}
@media (min-width:900px){ .afford__grid{grid-template-columns:1.15fr .85fr;gap:56px;align-items:start} }

/* ---- EVIDENCE BANDS: full-bleed, between sections ------------------------ */
/* Purpose: stop long stretches of flat ground dominating, and put the visitor
   inside the work. Graded and grained exactly like the hero, which is what lets
   a 720px source carry a 1440 bleed without reading as an upscale (§14 W2a).
   No caption, no overlaid text, no card. */
.band{position:relative;width:100%;aspect-ratio:5/2;max-height:64svh;overflow:hidden;background:var(--pitch)}
.band--short{aspect-ratio:5/2;max-height:52svh}
.band__v{width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  filter:grayscale(.24) contrast(1.12) brightness(.72)}
.band__grade{position:absolute;inset:0;
  background:linear-gradient(180deg,var(--ground) 0%,rgba(17,18,16,.15) 26%,rgba(17,18,16,.18) 74%,var(--ground) 100%)}
.band__grain{position:absolute;inset:0;opacity:.42;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}
@media (max-width:700px){ .band,.band--short{aspect-ratio:3/2;max-height:44svh} }

/* ---- WORK: paired unequal rows, large scale, no captions ----------------- */
/* Every slot is a compositional element, never a thumbnail. Larger slots take
   the 720px sources so nothing is displayed past its resolution. */
.work{padding-block:0 90px;background:var(--ground)}
.work__head{padding-block:80px 32px}
.pair{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-bottom:16px;align-items:start}
.pair:last-child{margin-bottom:0}
.ev{margin:0;overflow:hidden;background:var(--graphite)}
.ev img{width:100%;height:100%;object-fit:cover;display:block}
/* Row 1: on-location work leads, engine bay answers and drops. */
.ev--a{grid-column:1/8;aspect-ratio:5/4}
.ev--b{grid-column:8/13;aspect-ratio:4/5;margin-top:56px}
/* Row 2: reversed weight, the hands shot rises into the previous row. */
.ev--c{grid-column:1/6;aspect-ratio:4/5;margin-top:-72px}
.ev--d{grid-column:6/13;aspect-ratio:16/10}
/* Row 3: asymmetric like the others. It was authored 6/6, which renders as exact
   halves and reads as a layout system rather than an authored composition (L3). */
.ev--e{grid-column:1/8;aspect-ratio:3/2;margin-top:24px}
.ev--f{grid-column:8/13;aspect-ratio:4/5;margin-top:-32px}
@media (max-width:820px){
  .pair{grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:10px}
  .ev--a,.ev--d{grid-column:1/7;aspect-ratio:4/3;margin-top:0}
  .ev--b,.ev--c,.ev--e,.ev--f{grid-column:span 3;aspect-ratio:3/4;margin-top:0}
}

/* ---- REQUEST ------------------------------------------------------------- */
.request{padding-block:80px;background:var(--pitch);border-top:1px solid var(--line)}
.request__grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:start;margin-top:26px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:.9375rem;margin-bottom:6px}
.field .hint{color:var(--steel);font-weight:400}
.field input,.field textarea{
  width:100%;font:inherit;color:var(--bone);background:var(--graphite);
  border:2px solid var(--line);border-radius:var(--radius);padding:13px 15px;min-height:52px;
}
.field textarea{min-height:126px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#6B706A}
.field input:focus,.field textarea:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--error)}
.error{display:none;color:var(--error);font-size:.8438rem;margin:6px 0 0;font-weight:500}
.error::before{content:"! ";font-weight:700}
.field.has-error .error{display:block}
.form__status{margin:10px 0 0;font-size:.9375rem;min-height:1.2em}
.form__status--error{color:var(--error)}
.form__reassure{font-size:.875rem;margin-top:10px;color:var(--mute)}
.aside{background:var(--graphite);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.aside h3{margin-top:0;color:#fff}
.aside .btn{margin-bottom:10px}
.aside__dial{margin:12px 0 2px;font-size:.875rem;color:var(--steel)}
.aside__num{font-variation-settings:"wdth" 110;font-weight:700;font-size:1.5rem;color:#fff;text-decoration:none;user-select:all}
@media (min-width:900px){ .request__grid{grid-template-columns:1fr .62fr;gap:56px} }

/* ---- Request form additions: vehicle row, preference pills, SMS fallback -- */
.request__lede{max-width:56ch;margin:0 0 26px}
.vehicle,.pref{border:0;padding:0;margin:0 0 16px;min-width:0}
.vehicle legend,.pref legend{padding:0;font-weight:600;font-size:.9375rem;margin-bottom:6px}
.vehicle__row{display:grid;grid-template-columns:.7fr 1fr 1fr;gap:10px}
.vehicle__row .field{margin-bottom:0}
.vehicle__row label{font-weight:500;font-size:.8125rem;color:var(--steel)}
@media (max-width:520px){ .vehicle__row{grid-template-columns:1fr 1fr;gap:8px} .field--year{grid-column:1/-1} }

/* Contact preference: segmented pills, not a card row. */
.pref__row{display:flex;gap:8px;flex-wrap:wrap}
.pill{position:relative;display:inline-flex}
.pill input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.pill span{
  display:inline-flex;align-items:center;min-height:46px;padding:11px 20px;
  border:2px solid var(--line);border-radius:var(--radius);
  font-weight:600;font-size:.9375rem;color:var(--mute);
  transition:border-color 140ms,color 140ms,background-color 140ms;
}
.pill input:checked + span{border-color:var(--signal);color:#fff;background:var(--graphite)}
.pill input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}
@media (hover:hover) and (pointer:fine){ .pill:hover span{color:var(--bone)} }

.form__noscript{margin:14px 0 0;font-size:.9375rem;color:var(--error)}

/* SMS fallback: only revealed when the messages app did not open. */
.fallback{margin-top:22px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--graphite)}
.fallback h3{margin-top:0;color:#fff}
.fallback h3:focus{outline:none}
.fallback h3:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.fallback__text{
  width:100%;font:inherit;font-size:.9375rem;line-height:1.5;
  color:var(--bone);background:var(--pitch);border:2px solid var(--line);
  border-radius:var(--radius);padding:13px 15px;resize:vertical;margin:6px 0 14px;
}
.fallback__acts{display:flex;gap:10px;flex-wrap:wrap}
.fallback__num{margin:14px 0 0;font-size:.9375rem;color:var(--mute)}
.fallback__num a{color:var(--signal);font-weight:600}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- CLOSE --------------------------------------------------------------- */
.close{background:var(--pitch);color:var(--bone);padding-block:52px 36px;border-top:1px solid var(--line)}
.close__grid{display:grid;grid-template-columns:1fr;gap:28px}
.close h3{font-size:1rem;color:#fff;margin-bottom:10px}
.close p{color:var(--mute);font-size:.9375rem}
.close__brand{max-width:340px}
.close a{color:var(--mute);text-decoration:none;display:block;margin-bottom:6px;font-size:.9375rem}
.close a:hover{color:#fff}
.close__legal{margin:34px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--steel);max-width:none}
.close__legal a{display:inline;text-decoration:underline;color:var(--steel)}
@media (min-width:768px){ .close__grid{grid-template-columns:1.5fr 1fr 1fr;gap:32px} }

/* ---- Persistent mobile action bar ---------------------------------------- */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px));
  background:var(--pitch);border-top:1px solid var(--line);
}
.actionbar .btn{min-height:48px;font-size:1rem}
.actionbar .btn--s{background:var(--graphite)}
@media (min-width:768px){ .actionbar{display:none} }

/* ================= SYMPTOM PAGES ========================================== */
.sub-top{position:sticky;top:0;z-index:100;background:rgba(11,12,10,.94);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.1) blur(8px)}
.sub-top__in{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px}

.shero{position:relative;overflow:hidden;background:var(--pitch);border-bottom:1px solid var(--line)}
.shero__bg{position:absolute;inset:0;z-index:0}
.shero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;filter:grayscale(.4) contrast(1.1) brightness(.42)}
.shero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,12,10,.72) 0%,rgba(11,12,10,.5) 40%,var(--pitch) 100%)}
.shero__in{position:relative;z-index:2;padding-block:56px 44px}
.shero h1{font-variation-settings:"wdth" 115;font-weight:700;font-size:clamp(2.1rem,5.4vw,3.6rem);line-height:.98;letter-spacing:-.025em;margin:0;color:#fff;max-width:18ch}
.shero__lede{color:#C6CAC4;font-size:1.0625rem;max-width:56ch;margin:18px 0 0}
.crumb{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);margin:0 0 16px}
.crumb a{color:var(--steel);text-decoration:none}
.crumb a:hover{color:var(--bone)}

/* Safety callout. A distinct WARM GROUND is the whole signal, and its heading
   names what it is. It previously also carried a 3px orange left tab: that was
   a third separation device on an already-labelled, already-bordered plate, and
   method R3 is explicit that a labelled aside should not also be ruled. The
   ground and the hairline do the work. */
.safety{border:1px solid #4A2A18;background:#1A120C;padding:22px 24px;border-radius:var(--radius);margin:0}
.safety h2{font-size:1.15rem;margin:0 0 12px;color:#fff;font-variation-settings:"wdth" 108}
.safety ul{margin:0;padding-left:20px}
.safety li{margin-bottom:9px;color:#D9D5CD;font-size:.9688rem}
.safety li:last-child{margin-bottom:0}
.safety--first{margin-bottom:0}

.sbody{padding-block:60px}
.sblock{margin-bottom:52px}
.sblock:last-child{margin-bottom:0}

/* "When does it happen" — a definition list, deliberately not cards. */
.dl{margin:0;border-top:1px solid var(--line)}
.dl__row{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
.dl dt{font-weight:600;color:#fff;font-size:1rem;margin:0}
.dl dd{margin:0;color:var(--mute);font-size:.9688rem}
@media (min-width:820px){
  .dl__row{grid-template-columns:.72fr 1fr;gap:28px;align-items:baseline}
}

/* Causes: a numbered prose list. No card grid (brief: avoid repeated card UI). */
.causes{counter-reset:c;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.causes li{counter-increment:c;padding:20px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:44px 1fr;gap:16px}
.causes li::before{content:counter(c,decimal-leading-zero);font-family:var(--mono);font-size:.75rem;color:var(--steel);padding-top:5px}
.causes h3{margin:0 0 4px;color:#fff}
.causes p{margin:0;color:var(--mute);font-size:.9688rem;max-width:64ch}

.diag{background:var(--graphite);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px}
.diag h2{font-size:1.25rem;margin:0 0 10px}
.diag p{margin:0;color:#C6CAC4;max-width:64ch}

/* Conversion block at the foot of every symptom page. */
.sconv{background:var(--pitch);border-top:1px solid var(--line);padding-block:60px}
.sconv h2{max-width:20ch}
.sconv p{color:var(--mute);max-width:52ch}
.sconv__acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

/* Cross-links to the other symptoms. */
.also{padding-block:56px;background:var(--ground);border-top:1px solid var(--line)}
.also__list{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.also__list a{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--bone);font-weight:600}
.also__list a span{font-family:var(--mono);font-size:.6875rem;color:var(--steel);letter-spacing:.09em}
.also__list a:hover{color:#fff}
.also__list a:hover span{color:var(--signal)}
@media (min-width:820px){ .also__list{grid-template-columns:1fr 1fr;column-gap:48px} }

/* ---- Support pages ------------------------------------------------------- */
.doc{padding-block:36px 76px}
.doc__h{font-variation-settings:"wdth" 115;font-weight:700;font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.02;letter-spacing:-.02em;margin:0 0 14px;color:#fff;max-width:18ch}
.doc__lede{font-size:1.0625rem;max-width:56ch;color:#C6CAC4}
.doc h2{font-size:1.2rem;margin-top:30px}
.doc__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---- Motion: two primitives only. PRESS (above) and DETENT (below). ------ */
.js [data-detent]{opacity:0;transform:translateY(10px)}
.js [data-detent].is-in{
  opacity:1;transform:none;
  transition:opacity 260ms cubic-bezier(.2,.8,.2,1),transform 260ms cubic-bezier(.2,.8,.2,1);
}
.js [data-detent]:nth-child(2).is-in{transition-delay:60ms}
.js [data-detent]:nth-child(3).is-in{transition-delay:120ms}

/* Reduced motion: no animation at all, finished state painted immediately. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js [data-detent]{opacity:1!important;transform:none!important}
  .hero__bg video,.band__v{display:none}
}