/* =========================================================================
   RPM — rpm.si
   Avtoservis Roman Prašnikar s.p.

   The whole design is one idea carried through: an instrument panel. Dark
   graphite ground, instrument-ivory type, and ONE accent — the redline. The
   green-to-amber-to-red ramp appears nowhere except inside a gauge graphic,
   because that is the only place it means anything.

   Section index
     01  Fonts
     02  Tokens
     03  Reset and base
     04  Layout
     05  Type scale
     06  Buttons and links
     07  Header and navigation
     08  Hero and the tachometer
     09  Sections, cards, panels
     10  The engine
     11  Rebuild sequence
     12  Spec tables
     13  Brands
     14  FAQ
     15  Contact and forms
     16  Footer
     17  Motion, reduced motion, print
   ========================================================================= */

/* --- 01 Fonts -----------------------------------------------------------
   Two ranges per family. The Slovenian letters (č š ž) live in latin-ext;
   subsetting only the latin file drops them SILENTLY and the result looks
   perfectly healthy until somebody's name renders as a box. */
@font-face{font-family:'Saira Cond';src:url('../fonts/saira-cond-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+20AC,U+2212}
@font-face{font-family:'Saira Cond';src:url('../fonts/saira-cond-700-ext.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0100-024F,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Saira Cond';src:url('../fonts/saira-cond-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+20AC,U+2212}
@font-face{font-family:'Saira Cond';src:url('../fonts/saira-cond-600-ext.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0100-024F,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter V';src:url('../fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+20AC,U+2212}
@font-face{font-family:'Inter V';src:url('../fonts/inter-var-ext.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-024F,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'RPM Mono';src:url('../fonts/mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+20AC,U+2212}
@font-face{font-family:'RPM Mono';src:url('../fonts/mono-500-ext.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0100-024F,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}

/* --- 02 Tokens ---------------------------------------------------------- */
:root{
  /* Ground and surfaces. Five steps, because a panel needs depth without
     ever reaching for a drop shadow on a dark ground - shadows are invisible
     there and only cost paint time. */
  --bg:      #0A0B0D;
  --bg-1:    #101317;
  --bg-2:    #161A20;
  --bg-3:    #1D222A;
  --bg-4:    #252B34;

  --line:    #272D35;
  --line-2:  #353D48;

  /* Ink. Instrument white is never pure #FFF: on a black panel it glares. */
  --ink:     #ECEFF3;
  --ink-2:   #A7AFBA;
  --ink-3:   #717A85;
  --ink-4:   #4A525C;

  /* The single accent. */
  --red:     #E4322A;
  --red-hi:  #FF4A3D;
  --red-dim: #7C1C17;
  --red-ghost: rgba(228,50,42,.12);

  /* The gauge ramp. Used ONLY inside a dial or a bar that represents engine
     speed. Everywhere else it would just be decoration pretending to mean
     something. */
  --g-low:   #34C77B;
  --g-mid:   #F0A81E;
  --g-high:  #E4322A;

  --ok:      #34C77B;

  --ff-d: 'Saira Cond', 'Arial Narrow', system-ui, sans-serif;
  --ff-b: 'Inter V', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-m: 'RPM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* 4px grid. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --wrap: 1180px;
  --r:  6px;
  --r2: 12px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);

  color-scheme: dark;
}

/* --- 03 Reset and base --------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff-b);
  font-size:17px;
  line-height:1.65;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto}
svg{display:block}
h1,h2,h3,h4{margin:0;font-family:var(--ff-d);font-weight:700;line-height:1.05;letter-spacing:.005em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
hr{border:0;border-top:1px solid var(--line);margin:var(--s7) 0}
::selection{background:var(--red);color:#fff}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--red);color:#fff;padding:var(--s3) var(--s5);
  font-weight:600;border-radius:0 0 var(--r) 0;
}
.skip:focus{left:0}

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

/* --- 04 Layout ----------------------------------------------------------- */
.wrap{width:min(100% - var(--s5)*2, var(--wrap));margin-inline:auto}
@media (min-width:768px){.wrap{width:min(100% - var(--s7)*2, var(--wrap))}}

.sec{padding-block:var(--s9)}
.sec--tight{padding-block:var(--s8)}
@media (max-width:760px){
  .sec{padding-block:var(--s8)}
  .sec--tight{padding-block:var(--s7)}
}
.sec--alt{background:var(--bg-1);border-block:1px solid var(--line)}
.sec--deep{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-1) 100%)}

/* The eyebrow is instrument lettering: small, wide, and in the accent only
   when it labels something the accent belongs to. */
.eyebrow{
  display:flex;align-items:center;gap:var(--s3);
  font-family:var(--ff-d);font-weight:600;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:var(--s4);
}
.eyebrow::before{
  content:"";width:28px;height:2px;background:var(--red);flex:none;
}
.eyebrow--c{justify-content:center}

.sec-head{max-width:64ch;margin-bottom:var(--s7)}
.sec-head--c{margin-inline:auto;text-align:center}
.sec-head p{color:var(--ink-2);font-size:18px}

/* --- 05 Type scale ------------------------------------------------------- */
.h1{font-size:clamp(40px,7.2vw,78px);text-transform:uppercase;letter-spacing:-.005em}
.h2{font-size:clamp(30px,4.4vw,46px);text-transform:uppercase}
.h3{font-size:clamp(21px,2.4vw,26px)}
.h4{font-size:18px;font-family:var(--ff-b);font-weight:600;line-height:1.35}
.lead{font-size:clamp(18px,2vw,21px);line-height:1.6;color:var(--ink-2)}
.small{font-size:14px;color:var(--ink-3)}
.num{font-family:var(--ff-m);font-weight:500;font-variant-numeric:tabular-nums}

/* --- 06 Buttons and links ------------------------------------------------ */
.btn{
  --btn-bg:var(--red); --btn-ink:#fff; --btn-bd:var(--red);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:14px var(--s6);
  background:var(--btn-bg);color:var(--btn-ink);
  border:1px solid var(--btn-bd);border-radius:var(--r);
  font-family:var(--ff-d);font-weight:600;font-size:16px;
  letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;white-space:nowrap;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .12s var(--ease);
}
.btn:hover{--btn-bg:var(--red-hi);--btn-bd:var(--red-hi)}
.btn:active{transform:translateY(1px)}
.btn--ghost{--btn-bg:transparent;--btn-ink:var(--ink);--btn-bd:var(--line-2)}
.btn--ghost:hover{--btn-bg:var(--bg-3);--btn-bd:var(--ink-3)}
.btn--lg{padding:17px var(--s7);font-size:17px}
.btn svg{width:18px;height:18px;flex:none}

.tlink{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--ff-d);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  font-size:15px;color:var(--red);
}
.tlink::after{content:"";width:16px;height:1px;background:currentColor;transition:width .2s var(--ease)}
.tlink:hover{color:var(--red-hi)}
.tlink:hover::after{width:26px}

/* --- 07 Header ----------------------------------------------------------- */
.site{
  position:sticky;top:0;z-index:100;
  background:rgba(10,11,13,.86);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
/* A hairline of redline under the header. It reads as the needle's track and
   costs one pixel. */
.site::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--red) 18%,var(--red) 30%,transparent 62%);
  opacity:.55;
}
.hdr{display:flex;align-items:center;gap:var(--s5);min-height:76px}

.brand{display:flex;align-items:center;gap:var(--s3);flex:none}
/* display:block is not cosmetic here. .brand-mark is a <span>, and width and
   height do nothing on an inline box — in the header it only worked because
   .brand is a flex container, which blockifies its children. In the footer
   there is no flex parent, so the size was ignored and the SVG expanded to
   fill the whole column at 360px. */
.brand-mark{display:block;width:42px;height:42px;flex:none;color:var(--ink)}
.brand-mark.sm{width:34px;height:34px}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-txt strong{
  font-family:var(--ff-d);font-weight:700;font-size:26px;
  letter-spacing:.1em;text-transform:uppercase;
}
.brand-txt small{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-top:3px;
}

.nav{display:flex;gap:var(--s5);margin-left:auto}
.nav a{
  position:relative;padding:6px 0;
  font-family:var(--ff-d);font-weight:600;font-size:15.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  transition:color .15s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--red);transition:right .22s var(--ease);
}
.nav a:hover::after{right:0}
.nav a[aria-current=page]{color:var(--ink)}
.nav a[aria-current=page]::after{right:0}

.hdr-cta{display:flex;align-items:center;gap:var(--s4);margin-left:var(--s3)}
.tel{
  font-family:var(--ff-m);font-weight:500;font-size:15px;
  color:var(--ink);white-space:nowrap;
}
.tel:hover{color:var(--red-hi)}

.burger{
  display:none;width:42px;height:42px;padding:0;
  background:none;border:1px solid var(--line-2);border-radius:var(--r);
  cursor:pointer;position:relative;
}
.burger span{
  position:absolute;left:11px;width:20px;height:2px;background:var(--ink);
  transition:transform .22s var(--ease),opacity .15s linear;
}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:26px}
.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)}

.mnav{
  display:none;flex-direction:column;gap:var(--s1);
  padding:var(--s4) var(--s5) var(--s6);
  border-top:1px solid var(--line);background:var(--bg-1);
}
.mnav a{
  padding:var(--s3) 0;font-family:var(--ff-d);font-weight:600;font-size:19px;
  letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--line);
}
.mnav .btn{margin-top:var(--s4)}
.mnav .tel{margin-top:var(--s3);font-size:18px}

@media (max-width:1040px){
  .nav{display:none}
  .burger{display:block}
  .mnav[data-open]{display:flex}
  .hdr-cta .nav-cta{display:none}
}
@media (max-width:520px){
  .hdr{min-height:64px}
  /* The phone number STAYS on mobile. Hiding it behind a menu is the single
     most expensive thing a workshop site can do: a car that will not start
     is a phone call, not a form. Only the descriptor goes. */
  .brand-txt small{display:none}
  .hdr-cta{gap:var(--s2)}
  .tel{
    display:inline-flex;align-items:center;gap:6px;
    padding:9px 12px;border:1px solid var(--line-2);border-radius:var(--r);
    font-size:14px;
  }
  .tel::before{
    content:"";width:14px;height:14px;flex:none;background:currentColor;
    -webkit-mask:var(--tel-ico) center/contain no-repeat;
    mask:var(--tel-ico) center/contain no-repeat;
  }
  /* The brand block is the thing that has to give.
     Measured at 320px: brand 89 + phone 134 + burger 42 + gaps + 48px of
     gutter came to 333px of content in a 320px viewport, so the page scrolled
     sideways. The phone number is the last thing that may shrink — a car that
     will not start is a phone call — so the mark and the wordmark come down
     instead, and the gutter goes from 24px to 16px.
     Desktop is untouched: every rule here is inside the 520px query. */
  .wrap{width:min(100% - var(--s4)*2, var(--wrap))}
  .hdr{gap:var(--s3)}
  .brand{gap:var(--s2)}
  .brand-mark{width:28px;height:28px}
  .brand-txt strong{font-size:19px;letter-spacing:.07em}
  .burger{width:38px;height:38px}
  .burger span{left:9px;width:20px}
  .burger span:nth-child(1){top:12px}
  .burger span:nth-child(2){top:18px}
  .burger span:nth-child(3){top:24px}
  .tel{padding:8px 10px;font-size:13px;gap:5px}
}

/* Below 360px the phone pill loses its border and padding rather than its
   digits — it is still a 44px tap target thanks to the line-height. */
@media (max-width:359px){
  .tel{border-color:transparent;padding:8px 2px;font-size:12.5px}
  .brand-txt strong{font-size:17px}
  .brand-mark{width:26px;height:26px}
}
:root{
  --tel-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.4 2.1L8 9.8a16 16 0 0 0 6 6l1.4-1.4a2 2 0 0 1 2.1-.4c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
}

/* --- 08 Hero and the tachometer ------------------------------------------
   The needle is driven by a single registered custom property, --rpm, in the
   range 0-1. Registering it is what makes it animatable at all: an unregistered
   custom property jumps from one value to the next with no interpolation, and
   the needle would snap rather than sweep. The numeric readout is JS reading
   the same property each frame, so the dial and the digits can never disagree
   — and with JS off the dial still sweeps. */
@property --rpm{syntax:'<number>';inherits:true;initial-value:0}

.hero{
  position:relative;overflow:hidden;
  padding-block:var(--s9) var(--s9);
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(228,50,42,.16) 0%, transparent 58%),
    radial-gradient(90% 70% at 10% 90%, rgba(52,199,123,.05) 0%, transparent 60%),
    var(--bg);
}
/* Machined grid. Faint enough to read as a surface, not a pattern. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  opacity:.28;
  mask-image:radial-gradient(70% 60% at 50% 40%,#000 0%,transparent 100%);
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{
  display:grid;grid-template-columns:1.08fr .92fr;gap:var(--s8);align-items:center;
}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s7)}
  .hero{padding-block:var(--s8)}
}

.hero h1{margin-bottom:var(--s5)}
.hero h1 .rl{color:var(--red)}
.hero .lead{max-width:52ch;margin-bottom:var(--s6)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* The three claims under the fold-line: all makes, engine rebuild, one man. */
.hero-facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);
  margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--line);
}
.hero-facts dt{
  font-family:var(--ff-m);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--s2);
}
.hero-facts dd{margin:0;font-family:var(--ff-d);font-weight:700;font-size:clamp(22px,3vw,30px);text-transform:uppercase}
@media (max-width:620px){
  .hero-facts{grid-template-columns:1fr;gap:var(--s4)}
  .hero-facts>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4)}
  .hero-facts dd{font-size:22px}
}

/* --- the dial ----------------------------------------------------------- */
.tacho{width:min(100%,460px);margin-inline:auto;aspect-ratio:1;position:relative}
.tacho svg{width:100%;height:100%;overflow:visible}

.tacho .dial-face{fill:var(--bg-1);stroke:var(--line);stroke-width:1}
.tacho .dial-rim{fill:none;stroke:var(--line-2);stroke-width:2}
.tacho .tick{stroke:var(--ink-3);stroke-width:2;stroke-linecap:round}
.tacho .tick--maj{stroke:var(--ink-2);stroke-width:3}
.tacho .tick--red{stroke:var(--red)}
.tacho .tick-lbl{
  fill:var(--ink-2);font-family:var(--ff-d);font-weight:600;font-size:19px;
  text-anchor:middle;dominant-baseline:middle;
}
.tacho .tick-lbl--red{fill:var(--red)}
/* The redline band. A stroked arc, so its width is one number to change. */
.tacho .redband{fill:none;stroke:var(--red);stroke-width:7;opacity:.9}
.tacho .sweepband{fill:none;stroke:url(#rpmRamp);stroke-width:3;opacity:.5}

.tacho .needle{
  transform-origin:200px 200px;
  /* 252deg only, NOT 252deg - 126deg: the needle path is generated already
     pointing at the 0 rpm mark, so subtracting the start offset again
     double-counts it and parks the needle on the redline at idle. */
  transform:rotate(calc(var(--rpm) * 252deg));
  animation:rpm-start 3.1s var(--ease-in-out) .25s both;
}
.tacho .needle path{fill:var(--red);filter:drop-shadow(0 0 6px rgba(228,50,42,.55))}
.tacho .hub{fill:var(--bg-3);stroke:var(--line-2);stroke-width:2}
.tacho .hub-dot{fill:var(--red)}

/* The self-test sweep every instrument cluster does at ignition: up to the
   stop, back to idle. It is the single most recognisable thing a tachometer
   does, and it is the whole reason this dial is the hero. */
@keyframes rpm-start{
  0%   {--rpm:0}
  42%  {--rpm:1}
  58%  {--rpm:1}
  100% {--rpm:.09}
}
/* After the sweep, idle wander. Real idle is never a steady needle. */
.tacho.is-idle .needle{animation:rpm-idle 4.2s ease-in-out infinite}
@keyframes rpm-idle{
  0%,100%{--rpm:.085}
  30%    {--rpm:.105}
  62%    {--rpm:.078}
}

.tacho-read{
  position:absolute;left:50%;top:63%;transform:translateX(-50%);
  text-align:center;pointer-events:none;
}
.tacho-read b{
  display:block;font-family:var(--ff-m);font-weight:500;
  font-size:clamp(28px,5vw,40px);letter-spacing:.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1;
}
.tacho-read span{
  display:block;margin-top:6px;
  font-family:var(--ff-d);font-weight:600;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);
}
.tacho-cap{
  position:absolute;left:50%;top:31%;transform:translateX(-50%);
  font-family:var(--ff-d);font-weight:700;font-size:13px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ink-4);
}

/* --- 09 Sections, cards, panels ------------------------------------------ */
.grid{display:grid;gap:var(--s5)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

.card{
  position:relative;
  padding:var(--s6);
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r2);
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
a.card:hover{border-color:var(--line-2);background:var(--bg-2);transform:translateY(-2px)}
/* The accent edge appears on hover only. A card that is always outlined in
   red makes nine cards compete for the same attention and none of them win. */
a.card::before{
  content:"";position:absolute;left:0;top:var(--s6);bottom:var(--s6);width:2px;
  background:var(--red);border-radius:2px;
  transform:scaleY(0);transform-origin:top;
  transition:transform .24s var(--ease);
}
a.card:hover::before{transform:scaleY(1)}
.card .ic{width:30px;height:30px;color:var(--red);margin-bottom:var(--s4)}
.card h3{margin-bottom:var(--s3)}
.card p{color:var(--ink-2);font-size:16px}
.card .tlink{margin-top:var(--s4)}

.panel{
  padding:var(--s7);
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r2);
}
.panel--warn{
  border-color:var(--red-dim);
  background:linear-gradient(180deg,var(--red-ghost),transparent 55%),var(--bg-1);
}

.ticklist{list-style:none;display:grid;gap:var(--s3)}
.ticklist li{
  position:relative;padding-left:28px;color:var(--ink-2);font-size:16px;
}
.ticklist li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:9px;border-radius:2px;
  border:2px solid var(--red);
}

/* --- 10 The engine -------------------------------------------------------
   Ten layouts, one mechanism. Every bank is drawn vertical and then rotated
   into place by the generator, so the CSS never needs to know the bank
   angle — it only needs the PHASE, which the generator writes onto each
   bank as --phase in crank degrees.

   A V shares one crank pin per pair, so its banks are exactly the included
   angle out of phase. A boxer gives each cylinder its own pin 180 degrees
   apart, which puts opposing pistons back in phase and makes them travel
   outward together — which is where the name comes from.

   One duration variable, --cycle, drives crank, rods and pistons, so nothing
   can drift out of phase however fast it is turned. */
.engine-wrap{
  position:relative;
  background:
    radial-gradient(100% 80% at 50% 0%,rgba(228,50,42,.10),transparent 60%),
    var(--bg-1);
  border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s6);overflow:hidden;
}
.engine{--cycle:1.55s;width:100%;height:auto;max-height:58vh}

.engine .blk{fill:var(--bg-2);stroke:var(--line-2);stroke-width:2}
.engine .blk-in{fill:var(--bg-2);stroke:var(--line);stroke-width:1.5}
.engine .bore{fill:none;stroke:var(--line-2);stroke-width:2}
.engine .lbl{fill:var(--ink-3);font-family:var(--ff-d);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-anchor:middle}
.engine .bank-lbl{font-size:12px;fill:var(--ink-4)}
.engine .fire-lbl{fill:var(--ink-3);font-size:12px;letter-spacing:.18em}
.engine .piston{fill:var(--bg-4);stroke:var(--ink-3);stroke-width:2}
.engine .ring{stroke:var(--ink-2);stroke-width:1.4}
.engine .rod{stroke:var(--ink-2);stroke-width:5;stroke-linecap:round;fill:none}
.engine .crank-web{fill:var(--bg-3);stroke:var(--ink-3);stroke-width:2}
.engine .journal{fill:var(--red)}
.engine .spark{fill:var(--g-mid);opacity:0}

/* Stroke is 80 units — twice the crank throw, from the generator, not
   eyeballed. ease-in-out across each half approximates the real sinusoid
   closely enough that nobody can tell, for one rule instead of a motion path. */
@keyframes bank-stroke{0%,100%{transform:translateY(0)}50%{transform:translateY(80px)}}
/* --phase is the bank's crank angle in degrees. Subtracting 360 turns an
   "arrives P degrees later" into a negative delay, which is the only way to
   express a phase lead on a looping animation. */
.engine .moving{
  transform-box:view-box;
  animation:bank-stroke var(--cycle) ease-in-out infinite;
  animation-delay:calc(var(--cycle) * (var(--phase,0) - 360) / 360);
}

/* The rod does NOT simply ride along with its piston: its angle peaks a
   quarter cycle after top dead centre, when the crank pin is furthest off
   the bore axis. Peak is asin(throw/rod) = asin(40/150) = 15.47 degrees,
   taken from the generator. Negative at 90 because SVG's y axis points down. */
@keyframes bank-rod{
  0%,100%{transform:rotate(0deg)}
  25%    {transform:rotate(-15.47deg)}
  50%    {transform:rotate(0deg)}
  75%    {transform:rotate(15.47deg)}
}
.engine .rod-g{
  transform-box:view-box;
  animation:bank-rod var(--cycle) ease-in-out infinite;
  animation-delay:calc(var(--cycle) * (var(--phase,0) - 360) / 360);
}

@keyframes spin{to{transform:rotate(360deg)}}
.engine .crank{transform-box:view-box;animation:spin var(--cycle) linear infinite}

/* Combustion, walked through the real firing order over the 720 degrees a
   four-stroke actually takes. */
@keyframes flash{0%,6%{opacity:.62}16%,100%{opacity:0}}
.engine .bank .spark{
  animation:flash calc(var(--cycle)*2) linear infinite;
  animation-delay:calc(var(--cycle) * (var(--phase,0) - 360) / 360);
}

/* The firing strip: every cylinder, lit in turn. */
.engine .cylbox rect{fill:var(--bg-2);stroke:var(--line-2);stroke-width:1.5}
.engine .cylbox text{fill:var(--ink-3);font-family:var(--ff-m);font-size:13px;text-anchor:middle}
@keyframes cyl-fire{
  0%,6%  {fill:var(--red);stroke:var(--red)}
  20%,100%{fill:var(--bg-2);stroke:var(--line-2)}
}
.engine .cylbox rect{
  animation:cyl-fire calc(var(--cycle)*2) linear infinite;
  animation-delay:calc(var(--cycle) * 2 * var(--slot) / var(--n));
}

/* --- the family toggle --------------------------------------------------- */
.fam-tabs{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-bottom:var(--s5);padding-bottom:var(--s5);
  border-bottom:1px solid var(--line);
}
.fam-tabs button{
  padding:9px 15px;
  background:var(--bg-2);color:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--ff-d);font-weight:600;font-size:14px;
  letter-spacing:.06em;cursor:pointer;
  transition:border-color .15s var(--ease),color .15s var(--ease),background .15s var(--ease);
}
.fam-tabs button:hover{color:var(--ink);border-color:var(--line-2)}
.fam-tabs button[aria-selected=true]{
  background:var(--red);border-color:var(--red);color:#fff;
}
/* A fixed min-height stops the section jumping as a drawing is swapped. */
.fam-stage{min-height:clamp(260px,34vw,420px);display:grid;place-items:center}
.fam-meta{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s5) var(--s7);
  align-items:start;margin-top:var(--s5);
}
@media (max-width:760px){.fam-meta{grid-template-columns:1fr}}
.fam-meta h3{margin-bottom:var(--s3)}
.fam-meta p{color:var(--ink-2);font-size:16px}

.engine-ctl{
  display:flex;align-items:center;gap:var(--s4);
  margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line);
}
.engine-ctl label{
  font-family:var(--ff-d);font-weight:600;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
.engine-ctl input[type=range]{
  flex:1;appearance:none;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--g-low),var(--g-mid) 62%,var(--g-high));
  cursor:pointer;
}
.engine-ctl input[type=range]::-webkit-slider-thumb{
  appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--ink);border:3px solid var(--bg);cursor:grab;
}
.engine-ctl input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:var(--ink);border:3px solid var(--bg);cursor:grab;
}
.engine-ctl output{
  font-family:var(--ff-m);font-weight:500;font-size:15px;color:var(--ink);
  min-width:9ch;text-align:right;font-variant-numeric:tabular-nums;
}

/* --- 11 Rebuild sequence --------------------------------------------------
   Nine stages down a single rail. The rail fills as you scroll using a
   scroll-driven animation — no scroll listener, no layout thrash, and it
   degrades to a static full rail where the feature is missing. */
.seq{position:relative;display:grid;gap:var(--s8)}
.seq::before{
  content:"";position:absolute;left:27px;top:12px;bottom:12px;width:2px;
  background:var(--line);
}
.seq::after{
  content:"";position:absolute;left:27px;top:12px;width:2px;height:0;
  background:linear-gradient(180deg,var(--g-low),var(--g-mid) 55%,var(--g-high));
  animation:rail linear both;
  animation-timeline:view(block);
  animation-range:cover 0% cover 92%;
}
@keyframes rail{to{height:calc(100% - 24px)}}

.stage{position:relative;padding-left:78px}
@media (max-width:720px){
  .seq::before,.seq::after{left:19px}
  .stage{padding-left:56px}
}
.stage-n{
  position:absolute;left:0;top:0;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--bg-1);border:2px solid var(--line-2);
  font-family:var(--ff-m);font-weight:500;font-size:16px;color:var(--ink-2);
  animation:stage-lit linear both;
  animation-timeline:view(block);
  animation-range:cover 12% cover 38%;
}
@media (max-width:720px){.stage-n{width:40px;height:40px;font-size:13px}}
@keyframes stage-lit{
  to{border-color:var(--red);color:var(--ink);box-shadow:0 0 0 6px var(--red-ghost)}
}
.stage h3{margin-bottom:var(--s3)}
.stage .lead{margin-bottom:var(--s4);font-size:18px}
.stage p{color:var(--ink-2)}
.stage-body{
  display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s6);align-items:start;
  margin-top:var(--s5);
}
@media (max-width:860px){.stage-body{grid-template-columns:1fr}}
.stage-fig{
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s5);
}
.stage-fig svg{width:100%;height:auto}

/* --- 12 Spec tables ------------------------------------------------------
   Figures are mono and tabular so the decimal points line up down the column.
   A tolerance list where the numbers do not align is harder to read than no
   list at all. */
.specs{list-style:none;display:grid;gap:0;border-top:1px solid var(--line)}
.specs li{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:11px 0;border-bottom:1px solid var(--line);
}
.specs dt,.specs .k{font-size:14.5px;color:var(--ink-2)}
.specs dd,.specs .v{
  margin:0;font-family:var(--ff-m);font-weight:500;font-size:14.5px;
  color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.specs-note{
  margin-top:var(--s4);font-size:13px;color:var(--ink-4);line-height:1.5;
}

/* --- page head (every route except home) --------------------------------- */
.phead{
  position:relative;padding-block:var(--s8) var(--s7);
  background:
    radial-gradient(90% 100% at 82% 0%,rgba(228,50,42,.13),transparent 62%),
    var(--bg-1);
  border-bottom:1px solid var(--line);
}
.phead h1{max-width:20ch}
.phead .lead{max-width:62ch;margin-top:var(--s4)}
.crumbs{
  display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;
  font-size:13px;color:var(--ink-4);margin-bottom:var(--s4);
}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--red-hi)}
.crumbs span[aria-hidden]{color:var(--ink-4)}

/* --- 13 Brands ------------------------------------------------------------
   A wall of names is the evidence behind "all makes". It is set in the
   display face at a size that lets the eye sweep it, because nobody reads
   forty brand names — they look for their own. */
.brandgroup{margin-bottom:var(--s7)}
.brandgroup:last-child{margin-bottom:0}
.brandgroup h2{
  font-size:14px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--s4);
}
.brandlist{
  list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);
}
.brandlist li{
  padding:9px var(--s4);
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--ff-d);font-weight:600;font-size:16px;
  letter-spacing:.04em;color:var(--ink-2);
  transition:border-color .16s var(--ease),color .16s var(--ease);
}
.brandlist li:hover{border-color:var(--red);color:var(--ink)}

/* --- 14 FAQ ---------------------------------------------------------------
   <details> is the whole accordion. No JS, keyboard support for free, and it
   is findable by the browser's own in-page search even while closed. */
.faq{display:grid;gap:var(--s3);max-width:82ch}
.faq details{
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r2);
  overflow:hidden;
}
.faq details[open]{border-color:var(--line-2)}
.faq summary{
  display:flex;align-items:flex-start;gap:var(--s4);
  padding:var(--s5) var(--s6);cursor:pointer;list-style:none;
  font-family:var(--ff-d);font-weight:600;font-size:19px;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;margin-left:auto;margin-top:.35em;
  width:11px;height:11px;border-right:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:rotate(45deg);transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--ink)}
.faq .a{padding:0 var(--s6) var(--s5);color:var(--ink-2);max-width:72ch}

/* --- 15 Contact and forms ------------------------------------------------ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:var(--s7)}}

.form{display:grid;gap:var(--s4)}
.field{display:grid;gap:6px}
.field label{
  font-family:var(--ff-d);font-weight:600;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
}
.field .req{color:var(--red)}
.field input,.field textarea,.field select{
  width:100%;padding:13px var(--s4);
  background:var(--bg);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r);
  font-family:var(--ff-b);font-size:16px;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--red);background:var(--bg-1);outline:none;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-4)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.field-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-note{font-size:13.5px;color:var(--ink-3);line-height:1.55}
.form-note a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.msg{
  padding:var(--s4) var(--s5);border-radius:var(--r);font-size:15px;
  border:1px solid var(--line-2);background:var(--bg-2);
}
.msg--ok{border-color:var(--ok);background:rgba(52,199,123,.10);color:var(--ink)}
.msg--err{border-color:var(--red);background:var(--red-ghost);color:var(--ink)}

.infolist{list-style:none;display:grid;gap:var(--s5)}
.infolist dt,.infolist .k{
  font-family:var(--ff-d);font-weight:600;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px;
}
.infolist dd,.infolist .v{margin:0;font-size:17px;color:var(--ink)}
.infolist a:hover{color:var(--red-hi)}

.hours{list-style:none;display:grid;gap:0;border-top:1px solid var(--line)}
.hours li{
  display:flex;justify-content:space-between;gap:var(--s4);
  padding:10px 0;border-bottom:1px solid var(--line);font-size:15.5px;
}
.hours li b{font-family:var(--ff-m);font-weight:500;color:var(--ink)}
.hours li span{color:var(--ink-2)}

/* --- 16 Footer ----------------------------------------------------------- */
.site-f{
  background:var(--bg-1);border-top:1px solid var(--line);
  padding-top:var(--s8);margin-top:0;
}
.f-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s7);
  padding-bottom:var(--s8);
}
@media (max-width:980px){.f-grid{grid-template-columns:1fr 1fr;gap:var(--s6)}}
@media (max-width:560px){.f-grid{grid-template-columns:1fr}}
.f-brand .brand-mark{color:var(--ink);margin-bottom:var(--s4)}
.f-claim{font-family:var(--ff-d);font-weight:700;font-size:21px;text-transform:uppercase;line-height:1.2}
.f-note{margin-top:var(--s4);font-size:14px;color:var(--ink-3);max-width:44ch}
.f-lbl{
  font-family:var(--ff-d);font-weight:600;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s4);
}
.f-list{list-style:none;display:grid;gap:10px;font-size:15px}
.f-list a{color:var(--ink-2)}
.f-list a:hover{color:var(--red-hi)}
.f-hours li{display:flex;justify-content:space-between;gap:var(--s3);color:var(--ink-2)}
.f-hours li b{font-family:var(--ff-m);font-weight:500;color:var(--ink);white-space:nowrap}
.f-addr{font-style:normal;font-size:15px;color:var(--ink-2);line-height:1.8}
.f-addr a:hover{color:var(--red-hi)}

.f-legal{
  border-top:1px solid var(--line);padding-block:var(--s5) var(--s6);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;
  font-size:13.5px;color:var(--ink-4);
}
.f-legal-nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.f-legal-nav a{color:var(--ink-3)}
.f-legal-nav a:hover{color:var(--red-hi)}
.f-legal p{margin:0}

.btt{
  position:fixed;right:var(--s5);bottom:var(--s5);z-index:90;
  width:46px;height:46px;display:grid;place-items:center;
  background:var(--bg-2);color:var(--ink);
  border:1px solid var(--line-2);border-radius:50%;cursor:pointer;
  transition:background .16s var(--ease),border-color .16s var(--ease);
}
.btt:hover{background:var(--bg-3);border-color:var(--red)}
.btt svg{width:20px;height:20px}

/* --- 17 Motion ----------------------------------------------------------- */
.rev{
  animation:rev-in .7s var(--ease) both;
  animation-timeline:view(block);
  animation-range:entry 0% entry 62%;
}
@keyframes rev-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Browsers without scroll-driven animations would otherwise leave every .rev
   element stuck at opacity 0 — an invisible page. Only apply the effect where
   the timeline actually exists. */
@supports not (animation-timeline:view()){
  .rev{animation:none}
  .seq::after{animation:none;height:calc(100% - 24px)}
  .stage-n{animation:none}
}

/* Reduced motion is honoured everywhere, and the needle still lands on a
   sensible reading rather than sitting at zero. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .tacho .needle{animation:none;--rpm:.09}
  .engine .moving,.engine .crank,.engine .spark,
  .engine .rod-g,.engine .cylbox rect{animation:none}
  .seq::after{height:calc(100% - 24px)}
  .rev{opacity:1;transform:none}
}

@media print{
  .site,.site-f,.btt,.hero::before,.engine-ctl{display:none}
  body{background:#fff;color:#000}
  .card,.panel{border:1px solid #ccc}
}

/* --- 18 Technical figures -------------------------------------------------
   The nine rebuild diagrams share one drawing language, so they read as a set
   rather than nine unrelated pictures: hairline construction in ink-4, solid
   geometry in ink-2, and the redline used ONLY for the thing the stage is
   actually about — the crack, the measurement, the crosshatch angle. */
.fig{width:100%;height:auto}
.fig .fg{fill:none;stroke-linecap:round;stroke-linejoin:round}
.fig .s   {stroke:var(--ink-2);stroke-width:2}
.fig .s2  {stroke:var(--ink-4);stroke-width:1.5}
.fig .f   {fill:var(--bg-3);stroke:var(--ink-3);stroke-width:1.5}
.fig .red {stroke:var(--red);stroke-width:2}
.fig .a   {stroke:var(--g-mid);stroke-width:1.8}
.fig .dot {fill:var(--red);stroke:none}
.fig .spec circle{fill:var(--red);stroke:none;opacity:.85}
.fig .bolt circle{fill:var(--bg-3);stroke:var(--ink-3);stroke-width:1.5}
.fig .hatch path{stroke:var(--ink-4);stroke-width:1;opacity:.55}
.fig .t {fill:var(--ink-3);font-family:var(--ff-b);font-size:11px;stroke:none}
.fig .t2{fill:var(--ink);font-family:var(--ff-m);font-size:12px;stroke:none;text-anchor:middle}
.fig .tn{fill:var(--ink);font-family:var(--ff-m);font-size:11px;stroke:none;text-anchor:middle}

/* --- 19 Trust row ---------------------------------------------------------
   Four claims, each a number and each verifiable. Sits directly under the
   hero because the research is unambiguous that proof has to arrive before
   the first request to commit, not after it. */
.trustrow{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.trustrow li{display:grid;gap:4px;padding-left:var(--s4);border-left:2px solid var(--red)}
.trustrow b{font-size:30px;color:var(--ink);line-height:1;letter-spacing:.01em}
.trustrow .tr-l{
  font-family:var(--ff-d);font-weight:600;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
.trustrow .tr-d{font-size:13px;color:var(--ink-3);line-height:1.5}
@media (max-width:900px){.trustrow{grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s4)}}
@media (max-width:520px){
  .trustrow{grid-template-columns:1fr;gap:var(--s4)}
  .trustrow .tr-d{display:none}
  .trustrow li{display:flex;align-items:baseline;gap:var(--s3)}
}

/* --- 20 Brand fit check ---------------------------------------------------
   Hidden in the markup and revealed by script, so a visitor without
   JavaScript is never shown a search box that cannot search. */
.fitcheck{max-width:52ch;margin-bottom:var(--s7)}
.fitcheck label{
  display:block;margin-bottom:8px;
  font-family:var(--ff-d);font-weight:600;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.fitcheck input{
  width:100%;padding:14px var(--s4);
  background:var(--bg-1);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r);
  font-family:var(--ff-b);font-size:17px;
}
.fitcheck input:focus{border-color:var(--red);outline:none;background:var(--bg-2)}
.fit-msg{margin:var(--s3) 0 0;font-size:15px;min-height:1.6em;color:var(--ink-2)}
.fit-msg[data-state=yes]{color:var(--ok)}
.fit-msg[data-state=no]{color:var(--ink-2)}
.fit-msg[data-state=ev]{color:var(--red)}
.brandlist li[hidden]{display:none}
.brandgroup[hidden]{display:none}

/* --- 21 Service pages ----------------------------------------------------- */
.svc-lead{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:start}
@media (max-width:920px){.svc-lead{grid-template-columns:1fr;gap:var(--s6)}}
.svc-hook{
  font-family:var(--ff-d);font-weight:700;
  font-size:clamp(24px,3.2vw,34px);line-height:1.15;
  text-transform:uppercase;color:var(--ink);
  margin:0 0 var(--s5);padding-left:var(--s5);
  border-left:3px solid var(--red);
}
.svc-fig{
  margin:0;padding:var(--s6);
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r2);
}

/* The symptom list is the block that turns a reader into a phone call, so it
   is set larger than an ordinary list and given room to be scanned. */
.symptoms{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3) var(--s6)}
@media (max-width:760px){.symptoms{grid-template-columns:1fr}}
.symptoms li{
  position:relative;padding:var(--s4) 0 var(--s4) 40px;
  border-bottom:1px solid var(--line);
  font-size:17px;color:var(--ink);
}
.symptoms li::before{
  content:"";position:absolute;left:0;top:calc(var(--s4) + .28em);
  width:18px;height:18px;border-radius:50%;
  border:2px solid var(--red);
  background:radial-gradient(circle at 50% 50%,var(--red) 0 3px,transparent 3px);
}

/* --- 22 Calls to action ---------------------------------------------------
   Two different jobs, so two different treatments.

   The HEADER button is small and quiet while the hero is on screen — there
   is already a large call to action three inches below it, and two things
   shouting at once means neither is heard. It only starts moving once the
   hero has scrolled away and it becomes the only route to contact left.

   The HERO button is the loud one: it is the single action the page is for.
   Both stop dead under prefers-reduced-motion. */

/* Smaller. The header button was carrying the same padding as the hero's,
   which made a 76px bar look like a landing page. */
.nav-cta{padding:8px var(--s4);font-size:12.5px;letter-spacing:.07em;border-radius:5px}
@media (max-width:1180px){.nav-cta{padding:8px var(--s3)}}

/* The sheen. One pseudo-element sweeping a translucent band across the face,
   which reads as light moving over a painted surface rather than a glow. */
.btn--loud,.nav-cta.is-live{position:relative;overflow:hidden;isolation:isolate}
.btn--loud::after,.nav-cta.is-live::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);
  transform:translateX(-120%);
  animation:cta-sheen 3.4s var(--ease) infinite;
}
@keyframes cta-sheen{
  0%,62%{transform:translateX(-120%)}
  86%,100%{transform:translateX(120%)}
}

/* The pulse is a ring that grows and fades OUTSIDE the button, so the button
   itself never changes size — a control that moves under the cursor is
   harder to hit, not easier. */
.btn--loud::before,.nav-cta.is-live::before{
  content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(228,50,42,.55);
  animation:cta-pulse 2.6s var(--ease) infinite;
}
@keyframes cta-pulse{
  0%  {box-shadow:0 0 0 0 rgba(228,50,42,.55)}
  70% {box-shadow:0 0 0 16px rgba(228,50,42,0)}
  100%{box-shadow:0 0 0 0 rgba(228,50,42,0)}
}

.btn--loud{
  font-size:18px;padding:19px var(--s8);
  box-shadow:0 8px 28px -10px rgba(228,50,42,.75);
}
.btn--loud:hover{box-shadow:0 10px 34px -8px rgba(255,74,61,.9)}
/* A chevron that nudges on hover: the cheapest possible "this goes somewhere". */
.btn--loud span{position:relative;display:inline-flex;align-items:center;gap:10px}
.btn--loud span::after{
  content:"";width:9px;height:9px;flex:none;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .18s var(--ease);
}
.btn--loud:hover span::after{transform:rotate(45deg) translate(3px,-3px)}

@media (prefers-reduced-motion:reduce){
  .btn--loud::before,.btn--loud::after,
  .nav-cta.is-live::before,.nav-cta.is-live::after{animation:none;display:none}
}

/* --- 23 Audit fixes: touch targets and minimum text size ------------------
   From the cross-device pass (macOS Chrome/Safari, Android, iPhone, iPad).
   Three findings, all of which reproduced identically on every device, so
   none of them is an engine quirk. */

/* 1. The rev slider's hit area was FOUR PIXELS tall. The thumb is 18px and
      looks grabbable, but the input itself is the track height, so on a
      touch screen you had to hit a 4px band. The track is now painted by a
      ::before at 4px while the control keeps a 32px hit area. */
.engine-ctl input[type=range]{
  height:32px;background:none;position:relative;
}
.engine-ctl input[type=range]::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:4px;
  transform:translateY(-50%);border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--g-low),var(--g-mid) 62%,var(--g-high));
}
.engine-ctl input[type=range]::-webkit-slider-runnable-track{background:none;height:32px}
.engine-ctl input[type=range]::-moz-range-track{background:none;height:32px}
.engine-ctl input[type=range]::-webkit-slider-thumb{margin-top:0}

/* 2. Footer, breadcrumb and legal links rendered 19-21px tall. WCAG 2.5.8
      asks for 24px minimum; these are the links a phone user actually taps. */
.f-list a,.f-legal-nav a,.crumbs a,.f-addr a{
  display:inline-block;min-height:24px;line-height:24px;
}
.f-list li{line-height:1.4}
/* Width, not pointer:coarse. The coarse query is the more correct signal but
   it does not fire under device emulation, so it silently protected nothing
   in testing — and a 700px-wide screen is a touch screen in practice anyway. */
@media (max-width:720px){
  /* The header logo is a link home and was only as tall as its 26px mark.
     The bar is 64px, so there is room for a real target without moving
     anything. */
  .brand{min-height:44px}
  .f-list a,.f-legal-nav a,.f-addr a{min-height:32px;line-height:32px}
  .crumbs{gap:var(--s3)}
  .crumbs a{min-height:32px;line-height:32px}
  .tlink{min-height:32px;align-items:center}
  .infolist a{display:inline-block;min-height:32px;line-height:32px}
  /* The footer lockup is a link to the home page; give it a real target. */
  .brand--f{padding:4px 0}
  .brand--f .brand-mark.sm{width:32px;height:32px}
}

/* 3. The header descriptor was 10.5px. Nothing forbids it, but it is the
      smallest text on the site and it carries the trade the business is in. */
.brand-txt small{font-size:11.5px}

/* --- 24 The redline word --------------------------------------------------
   "NOV" is simply red. It carried a shift-light pulse for a while and it was
   too much: the headline is the first thing on the page and does not need to
   compete with the dial beside it, which is already moving. */
.hero h1 .rl{color:var(--red)}

/* --- 25 The brand counter -------------------------------------------------
   Counts up with an accelerating curve — barely moving at first, then
   running away — and only then does the "+" land, in the accent. The plus
   is the payoff, so it must not be sitting there during the count. */
.cnt{font-variant-numeric:tabular-nums}
.cnt-plus{
  color:var(--red);
  display:inline-block;
  transform-origin:left center;
}
.cnt-plus.is-armed{opacity:0;transform:scale(.4)}
.cnt-plus.is-in{animation:plus-in .42s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes plus-in{
  from{opacity:0;transform:scale(.4)}
  60% {opacity:1;transform:scale(1.18)}
  to  {opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .cnt-plus.is-armed{opacity:1;transform:none}
  .cnt-plus.is-in{animation:none}
}

/* --- 26 Footer lockup -----------------------------------------------------
   The same mark and wordmark as the header, one step smaller. It was a bare
   34px mark before, which rendered at 360px because of the inline-span bug
   above — and even at the intended size it read as an orphaned icon rather
   than the brand. */
.brand--f{margin-bottom:var(--s5)}
.brand--f .brand-mark.sm{width:34px;height:34px}
.brand--f .brand-txt strong{font-size:22px}
.brand--f .brand-txt small{color:var(--ink-4)}
.f-brand .f-claim{font-size:19px}

/* --- 27 Narrow-screen overflow fixes --------------------------------------
   Both found by measuring, not by eye.

   1. `.specs .v` is white-space:nowrap so decimal points line up down the
      column. That is right for "0,02 mm" and wrong for "izvrtanje in honanje
      v liniji" — one long value forced the whole rebuild page 402px wide in
      a 320px viewport. Below 560px the row stacks and the value wraps; the
      figures that actually need aligning are short enough to be unaffected.
   2. The engine speed control is a three-item flex row. At 320px the readout
      was pushed past the edge, so it wraps onto its own line. */
@media (max-width:560px){
  .specs li{flex-direction:column;align-items:flex-start;gap:3px;padding:10px 0}
  .specs dd,.specs .v{white-space:normal;overflow-wrap:anywhere}
  .engine-ctl{flex-wrap:wrap}
  .engine-ctl input[type=range]{flex:1 1 100%;order:3}
  .engine-ctl output{margin-left:auto;text-align:right}
}

/* --- 28 The hidden attribute must win -------------------------------------
   `.btt` sets display:grid, and an author display declaration beats the user
   agent's [hidden]{display:none}. So the button was painted at every scroll
   position even though el.hidden was correctly true — the JS was right and
   the stylesheet was quietly ignoring it. Specificity 0,2,0 beats 0,1,0, so
   no !important is needed. Any element toggled by `hidden` needs this. */
.btt[hidden]{display:none}

/* Hero actions match width on small screens. Two buttons of different widths
   stacked under each other read as a primary and an afterthought; here the
   phone is not an afterthought. */
@media (max-width:560px){
  .hero-cta{flex-direction:column;align-items:stretch;gap:var(--s3)}
  .hero-cta .btn{width:100%}
}