/* ==================================================================
   TUNED 2 RACE PAARL — shared system
   Mobile first. Heights in dvh so the phone address bar never jumps.
   ------------------------------------------------------------------
   FOUNDATION  (locked; do not substitute)
     --carbon ........ #0B0C0E  page background
     --carbon-2 ...... #131519  raised surfaces
     --carbon-3 ...... #1B1E23  panels, hover fills
     --chalk ......... #E8E9EA  type (never pure white)
     --steel ......... #8D9199  secondary type, labels
     --cyan .......... #19B6EE  T2R cyan, sampled from the wordmark.
                               Rules, fills, the dyno curve, lit tacho
                               segments. ONE cyan moment per screen.
                               Never a large field.
   TYPE
     --f-display ..... Archivo italic, width 125, weight 800. Uppercase.
     --f-body ........ Archivo, normal width, 400/500.
     --f-mono ........ JetBrains Mono: readouts, labels, index numbers.
   TUNABLES
     --gutter ........ side margin (mobile / desktop below)
     --nav-h ......... nav bar height
     --hair .......... hairline colour (chalk at low alpha)
     --reveal-y ...... how far text rises on reveal
     --ease .......... house easing curve
   ================================================================== */

:root{
  --carbon:#0B0C0E; --carbon-2:#131519; --carbon-3:#1B1E23;
  --chalk:#E8E9EA; --steel:#8D9199; --cyan:#19B6EE;
  --hair:rgba(232,233,234,.13); --hair-strong:rgba(232,233,234,.28);
  --cyan-hair:rgba(25,182,238,.55);

  --f-display:'Archivo',system-ui,sans-serif;
  --f-body:'Archivo',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  --gutter:16px; --nav-h:60px; --max:1680px;
  --reveal-y:28px; --ease:cubic-bezier(.2,.7,.1,1);
  --hover-ms:220ms;
}
@media (min-width:900px){ :root{ --gutter:40px; --nav-h:72px; } }
@media (min-width:1400px){ :root{ --gutter:56px; } }

*,*::before,*::after{ box-sizing:border-box; border-radius:0 !important; }
html{ -webkit-text-size-adjust:100%; background:var(--carbon); }
body{
  margin:0; background:var(--carbon); color:var(--chalk);
  font:400 16px/1.55 var(--f-body); font-stretch:100%;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
::selection{ background:var(--cyan); color:var(--carbon); }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:fixed; left:var(--gutter); top:-60px; z-index:200; background:var(--chalk); color:var(--carbon); padding:10px 14px; font:500 12px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.12em; }
.skip:focus{ top:12px; }

/* ---------- type voices ---------- */
.display{
  font-family:var(--f-display); font-style:italic; font-stretch:125%;
  font-weight:800; text-transform:uppercase; line-height:.9;
  letter-spacing:-.012em; margin:0;
}
.d-xxl{ font-size:clamp(46px,12.2vw,212px); }
.d-xl { font-size:clamp(28px,8.4vw,128px); }
@media (min-width:900px){ .d-xl{ font-size:min(7.2vw,128px); } }
.d-l  { font-size:clamp(26px,7.4vw,44px); }
@media (min-width:900px){ .d-l{ font-size:min(3.9vw,68px); } }
.nw{ white-space:nowrap; }
.d-m  { font-size:clamp(26px,3.6vw,56px); line-height:.95; }
.d-s  { font-size:clamp(20px,2vw,30px); line-height:1; }
.label{
  font:500 11px/1.3 var(--f-mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--steel);
}
.label b{ color:var(--chalk); font-weight:500; }
.lede{ font-size:clamp(17px,1.5vw,21px); line-height:1.5; color:var(--chalk); max-width:34em; margin:0; }
.body{ color:#C3C6CC; max-width:36em; }
.body p{ margin:0 0 1em; }
.mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.cyan{ color:var(--cyan); }
.steel{ color:var(--steel); }

/* masked line reveals: wrap each line in .line > span */
.line{ display:block; overflow:hidden; padding-bottom:.04em; margin-bottom:-.04em; }
.line > span{ display:block; will-change:transform; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.section{ padding:clamp(72px,11vw,160px) 0; position:relative; }
.rule{ height:1px; background:var(--hair); border:0; margin:0; }
.rule-cyan{ height:1px; background:var(--cyan); border:0; margin:0; transform-origin:left; }
.sec-head{
  display:grid; gap:14px; padding-bottom:18px; margin-bottom:clamp(28px,4vw,56px);
  border-bottom:1px solid var(--hair);
}
.sec-head .label{ display:flex; justify-content:space-between; gap:16px; }
@media (min-width:900px){
  .sec-head{ grid-template-columns:1fr minmax(0,26em); align-items:end; gap:24px 64px; }
  .sec-head > :first-child{ grid-column:1 / -1; }
  .sec-head > :nth-child(2){ grid-column:2; }
}

/* ---------- tacho segments (the logo's gauge arc as a bar) ---------- */
.tacho{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:3px; height:3px; }
.tacho i{ background:var(--hair); transition:background 120ms linear; }
.tacho i.on{ background:var(--cyan); }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:90; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:0 var(--gutter);
  transition:background var(--hover-ms) ease, border-color var(--hover-ms) ease;
  border-bottom:1px solid transparent;
}
.nav.solid{ background:rgba(11,12,14,.92); border-bottom-color:var(--hair); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.nav-logo{ display:block; height:26px; flex:none; }
.nav-logo img{ height:100%; width:auto; }
@media (min-width:900px){ .nav-logo{ height:32px; } }
.nav-links{ display:none; align-items:center; gap:clamp(18px,2.2vw,36px); }
.nav-links a{
  font:500 11px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--chalk); opacity:.72; transition:opacity var(--hover-ms) ease; padding:8px 0; position:relative;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{ opacity:1; }
.nav-links a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--chalk); }
.nav-book{
  font:500 11px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--hair-strong); padding:12px 16px; display:none;
  transition:background var(--hover-ms) ease, color var(--hover-ms) ease, border-color var(--hover-ms) ease;
}
.nav-book:hover{ background:var(--chalk); color:var(--carbon); border-color:var(--chalk); }
.nav-toggle{
  font:500 11px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase;
  padding:14px 0 14px 14px; display:flex; align-items:center; gap:10px;
}
.nav-toggle .bars{ width:22px; display:grid; gap:5px; }
.nav-toggle .bars i{ height:1.5px; background:var(--chalk); transition:transform 260ms var(--ease); }
body.menu-open .nav-toggle .bars i:first-child{ transform:translateY(3.25px) rotate(45deg); }
body.menu-open .nav-toggle .bars i:last-child{ transform:translateY(-3.25px) rotate(-45deg); }
/* shift lights: scroll progress as an F1-style LED row */
.nav-progress{ position:absolute; left:50%; bottom:-2px; transform:translateX(-50%); width:clamp(150px,22vw,320px); height:3px; gap:3px; opacity:0; transition:opacity 200ms; }
.nav.solid .nav-progress{ opacity:1; }
.nav-progress i{ height:3px; background:rgba(232,233,234,.12); }
.nav-progress i.on{ background:var(--cyan); box-shadow:0 0 6px rgba(25,182,238,.75); }
.nav-progress i.hot.on{ background:var(--chalk); box-shadow:0 0 7px rgba(232,233,234,.8); }
.nav-progress.shift i{ animation:shift .16s steps(2) 6; }
@keyframes shift{ 50%{ opacity:.15; } }
@media (min-width:1080px){
  .nav-links,.nav-book{ display:flex; }
  .nav-toggle{ display:none; }
}

/* mobile menu: the page's type stack, numbered like a job sheet */
.menu{
  position:fixed; inset:0; z-index:80; background:var(--carbon);
  padding:calc(var(--nav-h) + 20px) var(--gutter) 28px;
  display:flex; flex-direction:column; justify-content:space-between;
  visibility:hidden; opacity:0; transition:opacity 260ms ease, visibility 0s 260ms;
  overflow-y:auto;
}
body.menu-open{ overflow:hidden; }
body.menu-open .menu{ visibility:visible; opacity:1; transition:opacity 260ms ease; }
.menu ol{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hair); }
.menu li{ border-bottom:1px solid var(--hair); }
.menu li a{ display:flex; align-items:baseline; gap:14px; padding:14px 0 12px; }
.menu li a .label{ width:24px; flex:none; }
.menu li a .display{ font-size:clamp(30px,9vw,56px); }
.menu-foot{ display:grid; gap:12px; padding-top:28px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:space-between; gap:18px;
  min-height:54px; padding:0 20px;
  font:500 12px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--hair-strong); color:var(--chalk);
  transition:background var(--hover-ms) ease, color var(--hover-ms) ease, border-color var(--hover-ms) ease;
}
.btn:hover{ background:var(--chalk); color:var(--carbon); border-color:var(--chalk); }
.btn .arr{ font-family:var(--f-body); font-size:16px; line-height:1; transition:transform var(--hover-ms) var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn-chalk{ background:var(--chalk); border-color:var(--chalk); color:var(--carbon); }
.btn-chalk:hover{ background:transparent; color:var(--chalk); border-color:var(--hair-strong); }
.btn-cyan{ background:var(--cyan); border-color:var(--cyan); color:var(--carbon); }
.btn-cyan:hover{ background:var(--chalk); border-color:var(--chalk); }
.btn-row{ display:grid; gap:10px; }
@media (min-width:700px){ .btn-row{ display:flex; flex-wrap:wrap; } }

/* ---------- photo frames with corner captions ---------- */
.frame{ position:relative; overflow:hidden; background:var(--carbon-2); margin:0; }
.frame img,.frame video{ width:100%; height:100%; object-fit:cover; }
.frame figcaption{
  position:absolute; left:10px; bottom:10px; right:10px;
  font:500 10px/1.3 var(--f-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--chalk); text-shadow:0 1px 8px rgba(0,0,0,.6);
  display:flex; justify-content:space-between; gap:12px; pointer-events:none;
}
.frame::after{ /* corner ticks: the dyno-sheet crop marks */
  content:""; position:absolute; inset:8px; pointer-events:none;
  background:
    linear-gradient(var(--chalk),var(--chalk)) top left/12px 1px no-repeat,
    linear-gradient(var(--chalk),var(--chalk)) top left/1px 12px no-repeat,
    linear-gradient(var(--chalk),var(--chalk)) top right/12px 1px no-repeat,
    linear-gradient(var(--chalk),var(--chalk)) top right/1px 12px no-repeat;
  opacity:.55;
}
.frame.shade::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(11,12,14,.65)); z-index:1; pointer-events:none; }
.frame.shade figcaption{ z-index:2; }

/* ---------- spec table: job sheet / dyno printout ---------- */
.spec{ width:100%; border-collapse:collapse; font:400 13px/1.4 var(--f-mono); font-variant-numeric:tabular-nums; }
.spec th,.spec td{ text-align:left; padding:11px 0; border-bottom:1px solid var(--hair); vertical-align:top; }
.spec th{ font-weight:500; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); width:38%; padding-right:16px; }
.spec td{ color:var(--chalk); }
.spec tr:first-child th,.spec tr:first-child td{ border-top:1px solid var(--hair-strong); }

/* checklist lines */
.ticks{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hair); }
.ticks li{ display:grid; grid-template-columns:34px 1fr; gap:6px; padding:12px 0; border-bottom:1px solid var(--hair); color:#C9CCD1; }
.ticks li::before{ content:counter(t,decimal-leading-zero); counter-increment:t; font:500 11px/1.9 var(--f-mono); color:var(--steel); letter-spacing:.08em; }
.ticks{ counter-reset:t; }

/* ---------- reveals (JS adds .in) ---------- */
.rv{ opacity:0; transform:translateY(var(--reveal-y)); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.08s } .rv-d2{ transition-delay:.16s } .rv-d3{ transition-delay:.24s }
.no-js .rv{ opacity:1; transform:none; }

/* ---------- page head (inner pages) ---------- */
.phead{ padding-top:calc(var(--nav-h) + clamp(56px,10vw,140px)); padding-bottom:clamp(36px,5vw,64px); position:relative; }
.phead .label{ margin-bottom:22px; display:flex; gap:18px; flex-wrap:wrap; }
.phead .lede{ margin-top:clamp(22px,3vw,36px); }
.phead-grid{ display:grid; gap:28px; }
@media (min-width:1000px){ .phead-grid{ grid-template-columns:1fr minmax(0,28em); align-items:end; gap:28px 64px; } .phead-grid > :first-child{ grid-column:1 / -1; } .phead-grid > :nth-child(2){ grid-column:2; } }

/* ---------- booking band ---------- */
.book{ border-top:1px solid var(--hair); }
.book-grid{ display:grid; gap:36px; }
.book-ch{ display:grid; border-top:1px solid var(--hair); }
.book-ch a{
  display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:10px;
  padding:22px 0; border-bottom:1px solid var(--hair);
  transition:padding var(--hover-ms) var(--ease), background var(--hover-ms) ease;
}
.book-ch a:hover{ padding-left:10px; background:var(--carbon-2); }
.book-ch .display{ font-size:clamp(22px,2.6vw,38px); }
.book-ch .arr{ font-size:20px; transition:transform var(--hover-ms) var(--ease); }
.book-ch a:hover .arr{ transform:translateX(-6px); color:var(--cyan); }
.book-ch small{ display:block; margin-top:6px; }
@media (min-width:1000px){ .book-grid{ grid-template-columns:1fr minmax(0,44em); align-items:end; gap:48px 64px; } .book-grid > :first-child{ grid-column:1 / -1; } .book-ch{ grid-column:2; } }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--hair); padding:clamp(56px,7vw,96px) 0 28px; position:relative; overflow:hidden; }
.foot-gauge{ width:100%; height:auto; margin:0 0 clamp(40px,5vw,72px); overflow:visible; }
.foot-gauge .seg{ fill:var(--carbon-3); transition:fill 140ms linear; }
.foot-gauge .seg.on{ fill:var(--cyan); }
.foot-gauge text{ font:500 9px var(--f-mono); letter-spacing:.14em; fill:var(--steel); }
.foot-grid{ display:grid; gap:36px; }
.foot-grid h3{ margin:0 0 14px; }
.foot-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.foot-grid a{ transition:color var(--hover-ms) ease; }
.foot-grid a:hover{ color:var(--cyan); }
.foot-logo{ height:36px; width:auto; margin-bottom:18px; }
.foot-base{ margin-top:clamp(48px,6vw,80px); padding-top:18px; border-top:1px solid var(--hair); display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; }
@media (min-width:760px){ .foot-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .foot-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; } }

@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  *{ scroll-behavior:auto !important; }
}


/* ==================================================================
   PREMIUM LAYER  (v2, Sep 2026)
   ------------------------------------------------------------------
   --grain .......... film grain strength over the whole page
   .chrome .......... brushed-chrome fill for display type, echoing the
                      chrome TUNED2RACE wordmark; --chrome-x moves the
                      specular highlight (scroll-driven where used)
   View transitions: pages cross-fade and lift on navigation (Chrome,
   Safari); other browsers just load normally.
   ================================================================== */
:root{ --grain:.05; }
html.lenis, html.lenis body{ height:auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped{ overflow:clip; }
.lenis.lenis-smooth iframe{ pointer-events:none; }

body::after{
  content:""; position:fixed; inset:-60px; z-index:250; pointer-events:none;
  background:url(../images/grain.png); opacity:var(--grain); mix-blend-mode:overlay;
  animation:grain .9s steps(5) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0) } 20%{ transform:translate(-22px,14px) } 40%{ transform:translate(18px,-26px) }
  60%{ transform:translate(-12px,30px) } 80%{ transform:translate(28px,6px) } 100%{ transform:translate(0,0) }
}

.chrome{
  --chrome-x:30%;
  background:linear-gradient(100deg,#7d838c 0%,#c9cdd3 14%,#f4f6f8 24%,#a9aeb6 36%,#5f656e 48%,#d9dde2 60%,#ffffff 68%,#9aa0a8 80%,#e2e5e9 100%);
  background-size:260% 100%; background-position:var(--chrome-x) 50%;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.chrome-sheen{ transition:--chrome-x 0s; }

/* SplitText line masks: give italic caps a little breathing room */
.sl-mask{ padding:0 .12em .06em 0; margin:0 -.12em -.06em 0; }

/* page transitions */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vt-out .35s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root){ animation:vt-in .55s cubic-bezier(.2,.7,.1,1) both; }
@keyframes vt-out{ to{ opacity:0; transform:translateY(-14px); } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(22px); } }
.nav{ view-transition-name:nav; }

/* instrument glass: a soft panel used over photos */
.glass{ background:rgba(11,12,14,.55); -webkit-backdrop-filter:blur(14px) saturate(120%); backdrop-filter:blur(14px) saturate(120%); border:1px solid var(--hair); }

@media (prefers-reduced-motion:reduce){
  body::after{ animation:none; }
  ::view-transition-old(root),::view-transition-new(root){ animation:none; }
}

/* ---------- dyno sheet (shared: home, tuning, 4x4) ---------- */
.sheet{ border:1px solid var(--hair-strong); background:linear-gradient(180deg,#121418,#0d0f12); }
.sheet-head{ display:flex; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--hair); }
.sheet svg{ display:block; width:100%; height:auto; }
.sheet .gl{ stroke:var(--hair); stroke-width:1; }
.sheet .ax{ font:500 10px var(--f-mono); fill:var(--steel); letter-spacing:1px; }
.sheet .c-stock{ fill:none; stroke:var(--steel); stroke-width:1.6; stroke-dasharray:6 6; }
.sheet .c-tune{ fill:none; stroke:var(--cyan); stroke-width:2.4; filter:drop-shadow(0 0 8px rgba(25,182,238,.5)); }
.sheet .c-alt{ fill:none; stroke:var(--chalk); stroke-width:1.3; opacity:.5; }
.sheet .pk{ font:500 13px var(--f-mono); letter-spacing:.5px; }
.sheet .pk.stock{ fill:var(--steel); } .sheet .pk.tune{ fill:var(--cyan); } .sheet .pk.alt{ fill:var(--chalk); opacity:.7; }
.sheet .pk-dot.stock{ fill:var(--steel); } .sheet .pk-dot.tune{ fill:var(--cyan); } .sheet .pk-dot.alt{ fill:var(--chalk); }
.sheet-read{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--hair); }
.sheet-read div{ padding:14px 12px; border-right:1px solid var(--hair); min-width:0; }
.sheet-read div:last-child{ border-right:0; }
.sheet-read .v{ font:500 clamp(20px,3vw,44px)/1 var(--f-mono); letter-spacing:-.03em; margin-top:8px; font-variant-numeric:tabular-nums; }
.sheet-read .v small{ font-size:.34em; color:var(--steel); letter-spacing:.06em; margin-left:4px; }
.sheet-fine{ padding:12px 18px 16px; border-top:1px solid var(--hair); margin:0; }
@media (min-width:700px){ .sheet-read div{ padding:16px 18px; } }
@media (max-width:899px){ body::after{ animation:none; } }

/* ---------- build plate (shared): engraved gunmetal, riveted ---------- */
/* build plate: an engraved gunmetal plate, riveted, like a chassis plaque */
.plate{ position:relative; padding:22px 24px 18px; color:#D6DADF;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, rgba(0,0,0,0) 1px 3px),
    linear-gradient(158deg,#2b2f36 0%,#1a1d22 46%,#24282e 100%);
  border:1px solid rgba(232,233,234,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.7), 0 40px 80px -40px rgba(0,0,0,.9); }
.plate-head, .plate-foot{ display:flex; justify-content:space-between; gap:12px; font:500 10px/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:#9aa0a8; }
.plate-head{ padding:0 10px 14px; border-bottom:1px solid rgba(0,0,0,.55); box-shadow:0 1px 0 rgba(255,255,255,.05); }
.plate-foot{ padding:14px 10px 0; border-top:1px solid rgba(0,0,0,.55); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); margin-top:4px; }
.plate-rows{ margin:0; padding:6px 10px; }
.plate-rows div{ display:grid; grid-template-columns:40% 1fr; gap:14px; padding:10px 0; border-bottom:1px dashed rgba(232,233,234,.1); }
.plate-rows div:last-child{ border-bottom:0; }
.plate-rows dt{ font:500 10px/1.5 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:#8D9199; }
.plate-rows dd{ margin:0; font:500 14px/1.45 var(--f-mono); color:#E4E7EA; text-shadow:0 1px 0 rgba(0,0,0,.85), 0 -1px 0 rgba(255,255,255,.05); }
.rivet{ position:absolute; width:10px; height:10px; background:radial-gradient(circle at 38% 34%, #d9dde2 0 1.2px, #7d838c 1.8px, #3a3f47 3.4px, #121417 4.6px, transparent 5px); }
.rivet.tl{ left:7px; top:7px } .rivet.tr{ right:7px; top:7px } .rivet.bl{ left:7px; bottom:7px } .rivet.br{ right:7px; bottom:7px }

/* ---------- official-dealer seal: circular text that turns with the scroll ---------- */
.seal{ width:clamp(120px,13vw,190px); aspect-ratio:1; position:relative; }
.seal svg{ width:100%; height:100%; overflow:visible; display:block; }
.seal .ring{ transform-origin:50% 50%; transform-box:fill-box; will-change:transform; }
.seal text{ font:500 10.2px var(--f-mono); letter-spacing:3.1px; fill:var(--chalk); text-transform:uppercase; }
.seal .core{ fill:rgba(11,12,14,.72); stroke:var(--hair-strong); }
.seal .inner{ fill:none; stroke:var(--cyan); stroke-width:1; }
.seal .mark{ font:italic 800 26px var(--f-display); font-stretch:125%; fill:var(--chalk); text-anchor:middle; letter-spacing:-.5px; }
.seal .sub{ font:500 7.5px var(--f-mono); letter-spacing:2px; fill:var(--steel); text-anchor:middle; }
.seal .icon *{ stroke:var(--chalk); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.seal .icon .thin{ stroke-width:1; opacity:.45; }
.seal .icon .fill{ fill:var(--chalk); stroke:none; }
.seal .icon .hole{ fill:#0b0c0e; stroke:none; }

/* ---------- credentials ticker: speeds up and reverses with the scroll ---------- */
.marquee{ overflow:hidden; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:18px 0; background:var(--carbon); }
.mq-track{ display:flex; width:max-content; will-change:transform; }
.mq-track span{ display:inline-flex; align-items:center; gap:22px; padding-right:22px; white-space:nowrap;
  font:italic 800 clamp(18px,2vw,30px)/1 var(--f-display); font-stretch:125%; text-transform:uppercase; letter-spacing:-.01em; color:var(--chalk); }
.mq-track span i{ width:8px; height:8px; background:var(--cyan); flex:none; }
.mq-track span em{ font-style:italic; color:var(--steel); }

/* ---------- analogue dials (dyno.js T2RDyno.dial) ---------- */
.dl-face{ fill:rgba(11,12,14,.65); stroke:var(--hair); }
.dl-bez{ fill:none; stroke:var(--hair); }
.dl-tick{ stroke:var(--steel); stroke-width:1; }
.dl-tick.maj{ stroke:var(--chalk); stroke-width:2; }
.dl-num{ font:500 15px var(--f-mono); fill:var(--steel); text-anchor:middle; dominant-baseline:central; }
.dl-gain{ fill:none; stroke:var(--cyan); stroke-width:6; filter:drop-shadow(0 0 8px rgba(25,182,238,.65)); }
.dl-stock{ stroke:var(--steel); stroke-width:3; }
.dl-needle{ fill:var(--chalk); filter:drop-shadow(0 0 6px rgba(232,233,234,.5)); }
.dl-hub{ fill:var(--carbon); stroke:var(--chalk); stroke-width:1.5; }
.dl-val{ font:500 46px var(--f-mono); fill:var(--chalk); text-anchor:middle; letter-spacing:-1px; }
.dl-unit{ font:500 10px var(--f-mono); fill:var(--steel); text-anchor:middle; letter-spacing:3px; }
.dl-gainv{ font:500 15px var(--f-mono); fill:var(--cyan); text-anchor:middle; letter-spacing:1px; }
.dl-lab{ font:500 10px var(--f-mono); fill:var(--steel); text-anchor:middle; letter-spacing:3px; }

/* ---------- instruments (instruments.js) ---------- */
.odo{ display:inline-flex; gap:3px; }
.odo i{ font-style:normal; display:inline-block; width:.72em; height:1.1em; overflow:hidden; position:relative; background:#101216; border:1px solid var(--hair); font:500 clamp(28px,3.4vw,50px)/1.1 var(--f-mono); }
.odo i b{ position:absolute; left:0; right:0; top:0; display:flex; flex-direction:column; align-items:center; font-weight:500; will-change:transform; }
.odo i b span{ height:1.1em; line-height:1.1em; }
.odo.sm i{ font-size:clamp(22px,2.4vw,34px); }
.inst{ border:1px solid var(--hair-strong); background:linear-gradient(180deg,#121418,#0c0e11); }
.inst-head{ display:flex; justify-content:space-between; gap:12px; padding:10px 14px; border-bottom:1px solid var(--hair); }
.inst-body{ padding:14px; position:relative; }
.inst-foot{ padding:8px 14px 12px; border-top:1px solid var(--hair); }
.inst canvas{ display:block; width:100%; height:120px; }
.inst .sheet{ border:0; background:none; }
.live{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); }
.live > div{ background:#0e1013; padding:10px 12px; display:grid; gap:4px; }
.live b{ font-size:22px; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.live i{ display:block; height:2px; background:var(--carbon-3); }
.live em{ display:block; height:2px; background:var(--cyan); transition:width .4s var(--ease); }
.checks{ list-style:none; margin:0; padding:0; }
.checks li{ display:grid; grid-template-columns:26px 1fr auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--hair); color:#8D9199; transition:color .3s; }
.checks li::before{ content:""; width:14px; height:14px; border:1px solid var(--hair-strong); transition:all .3s; }
.checks li::after{ content:"PENDING"; font:500 10px var(--f-mono); letter-spacing:.14em; color:#5E626A; }
.checks li.ok{ color:var(--chalk); }
.checks li.ok::before{ background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 8px rgba(25,182,238,.7); }
.checks li.ok::after{ content:"OK"; color:var(--cyan); }
.pinbox{ display:grid; justify-items:center; gap:18px; padding:26px 0 18px; }
.pinbox .dots{ display:flex; gap:10px; }
.pinbox i{ width:42px; height:8px; background:var(--carbon-3); border:1px solid var(--hair-strong); transition:background .2s, box-shadow .2s; }
.pinbox i.on{ background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 10px rgba(25,182,238,.8); }
.pinbox [data-read]{ margin:0; font:500 12px var(--f-mono); letter-spacing:.16em; color:var(--steel); }
.pinbox [data-read].ok{ color:var(--cyan); }
.starsbox{ display:flex; gap:8px; font-size:30px; line-height:1; }
.starsbox i{ font-style:normal; color:rgba(232,233,234,.18); transition:color .3s, text-shadow .3s, transform .3s var(--ease); }
.starsbox i.on{ color:var(--chalk); text-shadow:0 0 14px rgba(232,233,234,.55); transform:translateY(-2px); }
[data-inst="sheen"]{ position:relative; }
[data-inst="sheen"]::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.22) 48%, rgba(255,255,255,.05) 53%, rgba(255,255,255,0) 62%);
  background-size:260% 100%; background-position:var(--sheen,120%) 0; }

/* ---------- image hero behind a page title (About, Contact) ---------- */
.img-hero{ position:relative; overflow:hidden; isolation:isolate; }
.img-hero .bg{ position:absolute; inset:0; z-index:-1; }
.img-hero .bg img{ width:100%; height:100%; object-fit:cover; opacity:.32; transform:scale(1.08); }
.img-hero .bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,12,14,.5) 0%, rgba(11,12,14,.35) 45%, var(--carbon) 96%); }