/* ============================================================
   RACETUNE — racetune.ee
   Design system: motorsport telemetry / carbon & race-red
   Fonts: Saira Condensed (display) · Barlow (body) · IBM Plex Mono (data)
   ============================================================ */

:root {
  --bg: #0a0b0d;
  --bg-2: #101216;
  --surface: #14171c;
  --surface-2: #1a1e24;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #eceef0;
  --muted: #9aa1ab;
  --red: #c30f0f;
  --red-bright: #ff2222;
  --yellow: #fbe91b;
  --font-display: "Saira Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;
  --header-h: 72px;
  --radius: 4px;
  --pad: clamp(20px, 4vw, 48px);
  --maxw: 1240px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Carbon-fibre weave + grain atmosphere */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 6px),
    radial-gradient(1200px 600px at 80% -10%, rgba(195,15,15,0.07), transparent 60%),
    var(--bg);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

img, svg { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1001;
  background: var(--red);
  color: #fff;
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 13px;
}
.skip-link:focus { left: 0; }

/* ---------- Typography ---------- */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(52px, 9vw, 124px); font-weight: 800; }
h2 { font-size: clamp(38px, 5.5vw, 72px); }
h3 { font-size: clamp(24px, 3vw, 34px); }

p + p { margin-top: 1em; }

.lead { font-size: clamp(18px, 2vw, 21px); color: var(--muted); max-width: 62ch; }

.accent { color: var(--red-bright); }
.hp { color: #00a7ea; } /* HP Tuners brand blue */
.hl {
  background: linear-gradient(transparent 55%, rgba(251, 233, 27, 0.32) 55%);
  padding: 0 2px;
}

/* Telemetry section label:  ▮// LABEL */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--red-bright);
  margin-bottom: 18px;
}
.tag::before {
  content: "";
  width: 26px;
  height: 13px;
  background: var(--red);
  transform: skewX(-18deg);
  flex: none;
}

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

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

.section { padding: 70px 0; position: relative; }
.section-tight { padding: clamp(48px, 7vw, 90px) 0; }
/* Photo pair right under a service page's intro. The .media-grid inside adds its
   own 44px top margin, so 30px here gives ~74px — in line with a normal .section. */
.section-tight.section-media { padding: 30px 0 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

@media (max-width: 980px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

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

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}
.site-header.scrolled,
.site-header.nav-open {
  background: rgba(10, 11, 13, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.header-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.brand::before {
  content: "";
  width: 12px;
  height: 26px;
  background: var(--red);
  transform: skewX(-18deg);
}
.brand span { color: var(--red-bright); }

.site-nav { margin-left: auto; }
.site-nav > ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.site-nav a {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  padding: 10px 9px;
  display: block;
  transition: color 0.2s;
}
/* eight menu items (incl. Blogi + E-pood on the shop): the phone button gives way
   first on narrower desktops — the number is also in the footer and on /kontakt/ */
@media (max-width: 1180px) { .header-cta { display: none; } }
.site-nav a:hover { color: #fff; }
.site-nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--red); }

.has-sub { position: relative; }
.has-sub > a::after { content: " ▾"; font-size: 9px; color: var(--red-bright); }
.sub {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.has-sub:hover .sub,
.has-sub:focus-within .sub,
.has-sub.open .sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sub a { padding: 9px 18px; }
.sub a:hover { background: rgba(195, 15, 15, 0.12); }

.header-cta {
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--red);
  padding: 11px 20px;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: background 0.2s;
}
.header-cta:hover { background: var(--red-bright); }

.nav-toggle {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  position: relative;
}
.nav-toggle i, .nav-toggle i::before, .nav-toggle i::after {
  content: "";
  position: absolute;
  left: 11px;
  width: 20px;
  height: 2px;
  background: #fff;
  transition: transform 0.25s, opacity 0.25s;
}
.nav-toggle i { top: 21px; }
.nav-toggle i::before { left: 0; top: -6px; }
.nav-toggle i::after { left: 0; top: 6px; }
.nav-open .nav-toggle i { background: transparent; }
.nav-open .nav-toggle i::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle i::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1060px) {
  .nav-toggle { display: block; margin-left: auto; }
  .header-cta { display: none; }
  /* backdrop-filter makes .site-header a containing block for fixed children,
     which trapped the open nav panel inside the 72px header. Drop it (and go
     fully opaque) while the menu is open so the panel spans the viewport. */
  .site-header.nav-open {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg);
  }
  body.nav-open { overflow: hidden; }
  .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    bottom: 0;
    margin: 0;
    background: rgba(10, 11, 13, 0.97);
    backdrop-filter: blur(14px);
    overflow-y: auto;
    padding: 24px var(--pad) 60px;
    display: none;
  }
  .nav-open .site-nav { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a { font-size: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: none;
    background: none;
    padding: 0 0 0 20px;
    display: none;
  }
  .has-sub.open .sub { display: block; }
  .sub a { font-size: 14px; color: var(--muted); }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 15px 34px;
  background: var(--red);
  color: #fff;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  transition: background 0.2s;
  border: none;
  cursor: pointer;
}
.btn:hover { background: var(--red-bright); }
.btn::after {
  content: "→";
  font-family: var(--font-body);
  font-weight: 400;
  transition: transform 0.2s;
}
.btn:hover::after { transform: translateX(4px); }

.btn-ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.06); }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }

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

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 48px) 0 110px;
  position: relative;
  /* dyno-paper grid */
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center top;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 480px at 18% 30%, rgba(195,15,15,0.16), transparent 65%);
  pointer-events: none;
}

.hero-inner { position: relative; }

.hero h1 { margin: 8px 0 24px; max-width: 11ch; }
.hero h1 .row2 { color: var(--red-bright); display: block; }

.hero-sub { display: block; }

/* page hero (subpages) */
.page-hero {
  padding: calc(var(--header-h) + clamp(24px, 3.5vw, 44px)) 0 clamp(48px, 7vw, 90px);
  border-bottom: 1px solid var(--line);
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 72px 72px;
  position: relative;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 360px at 80% 0%, rgba(195,15,15,0.12), transparent 65%);
  pointer-events: none;
}
.page-hero h1 { font-size: clamp(44px, 7vw, 92px); max-width: 16ch; }
.page-hero .lead { margin-top: 22px; }

.breadcrumbs {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 26px;
  position: relative;
}
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs span[aria-current] { color: var(--red-bright); }

/* ---------- Dyno chart ---------- */

.dyno {
  position: relative;
  border: 1px solid var(--line);
  background: rgba(20, 23, 28, 0.55);
  padding: 18px 18px 10px;
}
.dyno-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.dyno-head .live { color: var(--red-bright); }
.dyno-head .live::before {
  content: "●";
  margin-right: 6px;
  animation: blink 1.4s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0.2; } }

.dyno svg { width: 100%; height: auto; }
.dyno .axis { font-family: var(--font-mono); font-size: 11px; fill: var(--muted); }
.dyno .gridline { stroke: rgba(255,255,255,0.06); stroke-width: 1; }
.dyno .curve {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.dyno.in .curve { animation: draw 2.4s cubic-bezier(0.5, 0, 0.2, 1) forwards; }
.dyno .curve-hp { stroke: var(--red-bright); filter: drop-shadow(0 0 8px rgba(255, 34, 34, 0.7)); }
.dyno .curve-nm { stroke: var(--yellow); animation-delay: 0.35s !important; filter: drop-shadow(0 0 6px rgba(251, 233, 27, 0.45)); }
@keyframes draw { to { stroke-dashoffset: 0; } }

.dyno-legend {
  display: flex;
  gap: 22px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 2px 6px;
}
.dyno-legend i { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin-right: 8px; }
.dyno-legend .l-hp i { background: var(--red-bright); }
.dyno-legend .l-nm i { background: var(--yellow); }

/* ---------- Stats strip ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-left: none;
  margin-top: clamp(40px, 6vw, 72px);
}
.stat {
  padding: 26px 28px;
  border-left: 1px solid var(--line);
  position: relative;
}
.stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 22px;
  height: 4px;
  background: var(--red);
  transform: skewX(-18deg);
}
.stat b {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.5vw, 60px);
  font-weight: 800;
  line-height: 1;
  display: block;
}
.stat b sup { font-size: 0.5em; color: var(--red-bright); }
.stat > span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-top: 8px;
}
@media (max-width: 860px) {
  .stats { grid-template-columns: 1fr 1fr; border-top: none; }
  .stat { border-top: 1px solid var(--line); }
}

/* ---------- Brand marquee ---------- */

.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 22px 0;
  position: relative;
}
.marquee-track {
  display: flex;
  gap: 64px;
  width: max-content;
  animation: scroll 90s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track > span {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.28);
  white-space: nowrap;
  transition: color 0.3s;
}
.marquee-track > span:hover { color: var(--red-bright); }
.marquee-track > span::after { content: "//"; color: rgba(195, 15, 15, 0.5); margin-left: 64px; font-family: var(--font-mono); font-size: 18px; }
/* nested spans (e.g. the blue HP in "HP Tuners") are part of the brand name */
.marquee-track > span .hp { color: inherit; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- Service cards ---------- */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
@media (max-width: 980px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 34px 30px 30px;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s, border-color 0.25s;
  display: flex;
  flex-direction: column;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red), transparent 70%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s;
}
.card:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.card:hover::before { transform: scaleX(1); }

.card .num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--red-bright);
  letter-spacing: 0.2em;
  margin-bottom: 18px;
  display: block;
}
/* Service icons (homepage cards), on one row with the card title. The PNGs are
   alpha masks, so the colour comes from the theme accent and follows light/dark
   mode automatically. All masks share one height and are scaled to equal visual
   area; --ar (width/height) is set inline per icon so each keeps its shape. */
.card .card-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.card .card-head h3 { margin-bottom: 0; }
.card .svc-icon {
  flex: none;
  height: 50px;
  width: calc(50px * var(--ar, 1));
  background-color: var(--red-bright);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.card h3 { margin-bottom: 14px; }
.card p { color: var(--muted); font-size: 15.5px; flex: 1; }
.card .more {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}
.card .more::after { content: " →"; color: var(--red-bright); transition: margin 0.2s; }
.card:hover .more::after { margin-left: 6px; }

.card .icon { width: 46px; height: 46px; margin-bottom: 20px; color: var(--red-bright); }

/* ---------- Diagonal red band ---------- */

.band {
  background: linear-gradient(120deg, #a40c0c, var(--red) 55%, #e21717);
  color: #fff;
  clip-path: polygon(0 4vw, 100% 0, 100% calc(100% - 4vw), 0 100%);
  padding: clamp(90px, 12vw, 160px) 0;
  position: relative;
  overflow: hidden;
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-55deg, rgba(0,0,0,0.09) 0 24px, transparent 24px 72px);
}
.band .tag { color: var(--yellow); }
.band .tag::before { background: var(--yellow); }
.band .lead { color: rgba(255, 255, 255, 0.85); }
.band .btn { background: #0a0b0d; }
.band .btn:hover { background: #000; }

/* ---------- Process steps ---------- */

.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 52px; border-left: 1px solid var(--line); }
@media (max-width: 980px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }
.step {
  counter-increment: step;
  border: 1px solid var(--line);
  border-left: none;
  padding: 34px 28px 38px;
  position: relative;
}
.step::before {
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 34, 34, 0.55);
  display: block;
  line-height: 1;
  margin-bottom: 18px;
}
.step h3 { font-size: 22px; margin-bottom: 10px; }
.step p { font-size: 15px; color: var(--muted); }

/* ---------- Content prose ---------- */

.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(30px, 4vw, 46px); margin: 1.6em 0 0.6em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.5em 0 0.5em; }
.prose ul, .prose ol { margin: 1em 0 1em 1.3em; }
.prose li { margin-bottom: 0.45em; }
.prose li::marker { color: var(--red-bright); }
.prose strong { color: #fff; }
.prose a { color: var(--red-bright); border-bottom: 1px solid rgba(255,34,34,0.35); }
.prose a:hover { border-bottom-color: var(--red-bright); }

.note {
  border-left: 3px solid var(--yellow);
  background: rgba(251, 233, 27, 0.06);
  padding: 18px 22px;
  margin: 1.6em 0;
  font-size: 15.5px;
  color: var(--muted);
}

/* checklist feature list */
.checks { list-style: none !important; margin-left: 0 !important; }
.checks li { padding-left: 30px; position: relative; }
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 8px;
  border-left: 3px solid var(--red-bright);
  border-bottom: 3px solid var(--red-bright);
  transform: rotate(-45deg);
}

/* ---------- Spec panel (side facts) ---------- */

.spec-panel {
  border: 1px solid var(--line);
  background: var(--surface);
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.spec-panel header {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-bright);
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.spec-panel dl { padding: 8px 22px 18px; }
.spec-panel dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
}
.spec-panel dd { font-family: var(--font-display); font-size: 24px; font-weight: 700; text-transform: uppercase; }
.spec-panel dd small { font-size: 0.6em; color: var(--muted); }
.spec-panel .spec-list { list-style: none; padding: 18px 22px; display: grid; gap: 12px; }
.spec-panel .spec-list li { font-family: var(--font-display); font-size: 24px; font-weight: 700; text-transform: uppercase; }
.spec-panel .spec-list li small { font-size: 0.6em; color: var(--muted); }

/* ---------- Tables (price list) ---------- */

.table-wrap { overflow-x: auto; margin: 28px 0 8px; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; min-width: 560px; background: var(--surface); }
caption {
  text-align: left;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 20px 22px 6px;
  background: var(--surface);
}
th, td { padding: 14px 22px; text-align: left; border-top: 1px solid var(--line); font-size: 15.5px; }
thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: none;
}
td.price, th.price { text-align: right; font-family: var(--font-mono); font-size: 15px; white-space: nowrap; }
td.price { color: var(--yellow); }
tbody tr { transition: background 0.15s; }
tbody tr:hover { background: rgba(195, 15, 15, 0.07); }

/* ---------- Tuning calculator ---------- */

.calc {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  padding: clamp(26px, 4vw, 44px);
  position: relative;
  overflow: hidden;
}
.calc::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--red), var(--yellow));
}

.calc-selects { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr; gap: 18px; margin-top: 26px; }
@media (max-width: 1040px) { .calc-selects { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .calc-selects { grid-template-columns: 1fr; } }

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
/* Helper text under an input — keeps labels to one line so paired fields align */
.field-hint {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
select, input, textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  padding: 13px 14px;
  border-radius: 0;
  transition: border-color 0.2s;
}
select:hover, select:focus { border-color: var(--red-bright); }
select:disabled { opacity: 0.35; cursor: not-allowed; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ff2222' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.calc-result { margin-top: 34px; display: none; }
.calc-result.show { display: block; animation: fadeUp 0.5s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } }

.gain-rows { display: grid; gap: 22px; }
.gain-row { display: grid; grid-template-columns: 110px 1fr 130px; gap: 18px; align-items: center; }
@media (max-width: 640px) { .gain-row { grid-template-columns: 70px 1fr 100px; gap: 10px; } }
.gain-row .metric {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.bars { display: grid; gap: 7px; }
.bar { height: 18px; background: var(--bg-2); border: 1px solid var(--line); position: relative; overflow: hidden; }
.bar i {
  position: absolute;
  inset: 0;
  width: 0;
  transition: width 1.1s cubic-bezier(0.3, 0, 0.2, 1);
}
.bar.stock i { background: #3a4049; }
.bar.tuned i { background: linear-gradient(90deg, var(--red), var(--red-bright)); box-shadow: 0 0 14px rgba(255, 34, 34, 0.5); }
.gain-row .delta {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 800;
  color: var(--yellow);
  text-align: right;
  line-height: 1;
}
.gain-row .delta small { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.14em; color: var(--muted); margin-top: 4px; }

.calc-vals {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  margin: 26px 0 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}
.calc-vals b { color: #fff; font-weight: 500; }
.calc-vals .tuned-val b { color: var(--red-bright); }

.calc-disclaimer { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin-top: 22px; letter-spacing: 0.04em; }

.calc-error {
  margin-top: 26px;
  padding: 16px 18px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--red-bright);
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
}
.calc-error a { color: var(--red-bright); }
.calc-error[hidden] { display: none; }

/* ---------- Team ---------- */

.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
@media (max-width: 980px) { .team { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .team { grid-template-columns: 1fr; } }

.member {
  border: 1px solid var(--line);
  background: var(--surface);
  position: relative;
  overflow: hidden;
}
.member-photo {
  display: block;
  width: 100%;
  height: auto;   /* the width/height attrs would otherwise pin the height */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;   /* faces sit high in these shots */
  transition: transform 0.35s;
}
.member:hover .member-photo { transform: scale(1.03); }
.member-body { padding: 26px 28px 30px; }
.member::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 26px 26px;
  border-color: transparent transparent rgba(195, 15, 15, 0.6) transparent;
}
.member .role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-bright);
  display: block;
  margin-bottom: 12px;
}
.member h3 { font-size: 26px; }
.member p { font-size: 14.5px; color: var(--muted); margin-top: 12px; }

/* ---------- Media grid (service page photos) ---------- */

.media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
@media (max-width: 700px) { .media-grid { grid-template-columns: 1fr; } }
/* Three photos: one row instead of a 2+1 with an orphan */
@media (min-width: 701px) { .media-grid.media-grid-3 { grid-template-columns: repeat(3, 1fr); } }

.figure {
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  margin: 0;
}
.figure img {
  display: block;
  width: 100%;
  height: auto;              /* width/height attrs would otherwise pin the height */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.45s;
}
.figure:hover img { transform: scale(1.04); }
.figure figcaption {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 13px 16px;
  border-top: 1px solid var(--line);
}

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

.faq { margin-top: 44px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 600;
  text-transform: uppercase;
  position: relative;
  transition: color 0.2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--red-bright); }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--red-bright);
  transition: transform 0.25s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .faq-a { padding: 0 0 26px; color: var(--muted); max-width: 70ch; }

/* ---------- Contact ---------- */

.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-list { list-style: none; display: grid; gap: 4px; margin-top: 32px; }
.contact-list li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.contact-list .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-list .v { font-family: var(--font-display); font-size: clamp(19px, 2.2vw, 26px); font-weight: 600; text-transform: uppercase; }
.contact-list .v a:hover { color: var(--red-bright); }

.form { display: grid; gap: 18px; border: 1px solid var(--line-strong); background: var(--surface); padding: clamp(26px, 4vw, 40px); position: relative; }
.form::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--red), var(--yellow)); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
textarea { min-height: 130px; resize: vertical; }
.form-status { font-family: var(--font-mono); font-size: 13px; color: var(--yellow); min-height: 1em; }
.form-status.is-error { color: #d63b3b; }
.form button[disabled] { opacity: 0.6; cursor: progress; }
/* Spam trap: off-screen rather than display:none, which some bots skip */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.map-frame { border: 1px solid var(--line); margin-top: clamp(48px, 7vw, 80px); filter: grayscale(1) invert(0.92) hue-rotate(180deg); }
.map-frame iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ---------- CTA band ---------- */

.cta-band {
  border-top: 1px solid var(--line);
  padding: clamp(70px, 9vw, 120px) 0;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "RACETUNE";
  position: absolute;
  right: -40px;
  bottom: -50px;
  font-family: var(--font-display);
  font-size: clamp(120px, 22vw, 300px);
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
  pointer-events: none;
  line-height: 1;
}
.cta-band h2 { max-width: 16ch; }

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

.site-footer { border-top: 1px solid var(--line); background: #08090b; padding-top: clamp(56px, 7vw, 90px); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 44px; padding-bottom: 56px; }
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red-bright);
  margin-bottom: 20px;
}
.site-footer ul { list-style: none; display: grid; gap: 10px; }
.site-footer a { color: var(--muted); font-size: 15px; transition: color 0.2s; }
.site-footer a:hover { color: #fff; }
.footer-blurb { color: var(--muted); font-size: 15px; max-width: 36ch; margin-top: 16px; }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 22px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

.socials { display: flex; gap: 14px; margin-top: 20px; }
.socials a {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  transition: border-color 0.2s, background 0.2s;
}
.socials a:hover { border-color: var(--red-bright); background: rgba(195, 15, 15, 0.15); }
.socials svg { width: 17px; height: 17px; fill: var(--text); }

/* Infopank trust badge — sits at the right edge of the brand column, beside the
   blurb. Dark navy artwork, so it gets a soft halo to lift it off the near-black
   footer in both themes. */
.brand-row { display: flex; gap: 22px; align-items: flex-start; margin-top: 16px; }
.brand-row .footer-blurb { margin-top: 0; }
.footer-badge {
  width: 104px;
  height: auto;
  flex: none;
  margin-left: auto;
  filter: drop-shadow(0 2px 12px rgba(255, 255, 255, 0.14));
}
@media (max-width: 600px) {
  .brand-row { gap: 16px; }
  .footer-badge { width: 84px; }
}

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

.reveal { opacity: 0; transform: translateY(26px); }
.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
  transition-delay: var(--d, 0s);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .dyno .curve { stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}