/* =============================================================================
   styles.css  –  СД Блиц – Димитров и Сие
   Colour reference: see colors.md
   ============================================================================= */

/* Breakpoints are in em so layouts follow the visitor's text size. */

/* ── 1. Custom Properties ──────────────────────────────────────────────────── */
:root {
  /* Palette */
  --c-dark:    #05070a;
  --c-dark-2:  #080a0d;
  --c-dark-3:  #0e1014;
  --c-primary: #0D3B7D;
  --c-second:  #435058;
  --c-third:   #9197AE;
  --c-fourth:  #EFF6EE;
  --c-accent:  #F02D3A;
  --c-accent-strong: #D91E2B;   /* fills behind white text (5:1) */
  --c-border:  rgba(239, 246, 238, 0.06);
  --c-border-2:rgba(239, 246, 238, 0.12);

  /* Typography */
  --font-headline: 'Playfair Display', Georgia, serif;
  --font-body:     'Inter', system-ui, sans-serif;

  /* Five sizes do the work: small, body, lead, card heading, section heading */
  --fs-small: 0.875rem;
  --fs-body:  1.0625rem;
  --fs-lead:  1.25rem;
  --fs-h3:    1.75rem;
  --fs-h2:    clamp(2.25rem, 4.5vw, 3.5rem);

  /* Spacing */
  --section-py:  clamp(4rem, 8vw, 7rem);
  --container-w: 1280px;
  --container-px: clamp(1.25rem, 5vw, 3rem);

  /* Transitions: exponential arrivals (fast start, long settle), quick exits */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* on-screen movement: heading wipes */
  --t-fast:   150ms;
  --t-med:    300ms;
  --t-slow:   500ms;

  /* Panel reveal, shared by the mobile menu and the language dropdown so both
     open the same way: the clip, the current along the top edge, then the
     items one by one. */
  --reveal-in:   460ms;   /* the clip opening */
  --reveal-out:  200ms;   /* closing: quick, no sequence */
  --trace-in:    640ms;   /* the current running along the top edge */
  --item-delay:  120ms;   /* first item, after the clip has started */
  --item-step:   45ms;    /* between items */
  --item-rise:   -6px;    /* items drift down into place */
}

/* ── 2. Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scrollbar-color: var(--c-second) var(--c-dark);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;   /* touch feedback comes from :active states */
  overflow-x: hidden;
}

body {
  background-color: var(--c-dark);
  color: var(--c-fourth);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html.menu-open { overflow: hidden; }

/* Smooth only once loaded (main.js adds the class), so opening a #section
   link lands instantly instead of drifting while fonts settle. */
html.smooth-scroll { scroll-behavior: smooth; }

/* Anchor targets stop below the fixed nav (4.5rem). */
section[id] { scroll-margin-top: 4.5rem; }   /* on <html>: body's overflow never reaches the viewport here */

img, video, iframe { display: block; max-width: 100%; }
ul { list-style: none; }
p, li { text-wrap: pretty; }   /* no single word stranded on a last line */
a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }

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

/* ── 3. Utilities ──────────────────────────────────────────────────────────── */
.section-container {
  position: relative;
  z-index: 2;   /* content above the live-current layer (z 1), section backgrounds below it */
  max-width: var(--container-w);
  margin: 0 auto;
  padding: var(--section-py) var(--container-px);
}

.section-title {
  font-family: var(--font-headline);
  font-size: var(--fs-h2);
  text-wrap: balance;
  hyphens: auto;              /* long compounds ("Dienstleistungen") at 320px */
  overflow-wrap: break-word;
  font-weight: 700;
  color: var(--c-fourth);
  line-height: 1.1;
  margin-bottom: 1rem;
}

.section-title--center { text-align: center; margin-bottom: 3.5rem; }

/* Sections share the page's ground. Where one ends and the next begins, a
   flattened band of silver light, toned like the neon heartbeat in the hero:
   bright at the centre, gone at both ends. Static, so it marks the border
   without adding motion. */
#services, #location, #contact { position: relative; }

#services::before, #location::before, #contact::before,
#services::after,  #location::after,  #contact::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -50%;
  pointer-events: none;
}

/* The bright core */
#services::before, #location::before, #contact::before {
  width: min(64rem, 84%);
  height: 2px;
  background: radial-gradient(closest-side, rgba(236, 242, 248, 0.55), rgba(200, 210, 222, 0.16) 55%, transparent);   /* taste-skill-ignore: section divider */
}

/* Its soft spill on the black around it */
#services::after, #location::after, #contact::after {
  width: min(56rem, 74%);
  height: 4.5rem;
  background: radial-gradient(closest-side, rgba(214, 224, 236, 0.07), transparent);   /* taste-skill-ignore: divider spill */
}

/* Read by screen readers, not shown */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Icons: one stroke set from the sprite in index.html */
.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── 4. Navbar ─────────────────────────────────────────────────────────────── */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
}

#navbar {
  background: rgba(5, 7, 10, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background var(--t-med) var(--ease-out);
}

/* Past the hero the bar is nearly opaque, so the blur (re-rendered every scroll
   frame) buys nothing there: drop it. */
#navbar.scrolled {
  background: rgba(5, 7, 10, 0.94);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav-container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--container-px);
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.nav-logo img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity var(--t-fast);
}

.nav-logo:hover img { opacity: 1; }

/* Desktop nav links */
.nav-links {
  display: none;
  align-items: center;
  gap: 2.5rem;
}

.nav-links a {
  font-size: var(--fs-small);
  font-weight: 500;
  color: rgba(239, 246, 238, 0.75);
  transition: color var(--t-fast);
  white-space: nowrap;
}

.nav-links a:hover { color: var(--c-fourth); }

/* Right cluster */
.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

/* Call: the page's one action, always in reach */
.nav-call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  background: var(--c-accent-strong);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--t-fast), transform var(--t-fast) var(--ease-out);
}

.nav-call:hover  { background-color: #bf1925; }
.nav-call:active { transform: scale(0.97); }
.nav-call .icon  { font-size: 1rem; }
.nav-call-num    { display: none; font-weight: 400; }

@media (min-width: 64em) { .nav-call-num { display: inline; } }

/* Smallest phones: the icon alone (the label stays for screen readers). */
@media (max-width: 23.99em) {
  .nav-call { padding: 0.6rem; }
  .nav-call-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Language selector */
.lang-selector { position: relative; }

.lang-btn {
  display: flex;
  white-space: nowrap;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-third);
  padding: 0.5rem 0.65rem;
  background: rgba(239, 246, 238, 0.06);
  transition: color var(--t-fast), background-color var(--t-fast);
}

.lang-btn:hover { color: var(--c-fourth); background-color: rgba(239, 246, 238, 0.1); }

.lang-caret {
  font-size: 1rem;
  transition: transform var(--t-med) var(--ease-out);   /* same curve as the hamburger's lines */
}

.lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 10rem;
  /* Opens like the mobile menu: a clip reveals it downward, a red current runs
     along its top edge, then the options arrive in order; closing is quicker
     and plays no sequence. The panel itself is transparent and each row
     carries the surface, so the dropdown assembles row by row (an opaque
     panel would pop open whole before its options arrive). The shadow is its
     own layer (::after) and settles in under the last row. The open clip
     reaches past the sides and bottom so that shadow is not cut off. */
  --surface: #14171c;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;   /* closed options leave the tab order */
  pointer-events: none;
  transition: clip-path var(--reveal-out) var(--ease-in),
              visibility 0s linear var(--reveal-out);
  z-index: 200;
}

.lang-dropdown.open {
  clip-path: inset(0 -40px -60px -40px);
  visibility: visible;
  pointer-events: auto;
  transition: clip-path var(--reveal-in) var(--ease-out), visibility 0s;
}

.lang-dropdown::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, var(--c-accent), rgba(240, 45, 58, 0.15));   /* taste-skill-ignore: the same trace as the mobile menu */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 100ms var(--ease-in);
}

.lang-dropdown.open::before {
  transform: scaleX(1);
  transition: transform var(--trace-in) var(--ease-out) 60ms;
}

.lang-dropdown::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;   /* behind the rows, inside the dropdown's stacking context */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);   /* taste-skill-ignore: a real overlay */
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms var(--ease-in);
}

.lang-dropdown.open::after {
  opacity: 1;
  transition: opacity 360ms var(--ease-out) calc(var(--item-delay) + 3 * var(--item-step));
}

/* Each row's surface wipes open solid (a fading surface would let the page
   show through it); its content fades and drifts in on the same beat, as the
   menu's links do over the menu's solid panel. */
.lang-dropdown li {
  background: var(--surface);
  box-shadow: 0 1px 0 var(--surface);   /* taste-skill-ignore: seam filler, not depth */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 120ms var(--ease-in);
}

.lang-dropdown.open li {
  clip-path: inset(0 0 -1px 0);   /* -1px: covers the sub-pixel seam to the next row */
  transition: clip-path 360ms var(--ease-out) calc(var(--item-delay) + var(--i, 0) * var(--item-step));
}

.lang-dropdown li > button {
  opacity: 0;
  translate: 0 var(--item-rise);
  transition: background var(--t-fast), color var(--t-fast),
              opacity 120ms var(--ease-in), translate 120ms var(--ease-in);
}

.lang-dropdown.open li > button {
  opacity: 1;
  translate: 0 0;
  transition: background var(--t-fast), color var(--t-fast),
              opacity 360ms var(--ease-out) calc(var(--item-delay) + var(--i, 0) * var(--item-step)),
              translate 480ms var(--ease-out) calc(var(--item-delay) + var(--i, 0) * var(--item-step));
}

.lang-dropdown li:nth-child(2) { --i: 1; }
.lang-dropdown li:nth-child(3) { --i: 2; }
.lang-dropdown li:nth-child(4) { --i: 3; }

.lang-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.65rem 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--c-third);
  transition: background var(--t-fast), color var(--t-fast);
}

.lang-dropdown button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.lang-dropdown button[aria-current="true"],
.lang-dropdown button:active { background: rgba(240,45,58,0.1); color: var(--c-fourth); }

@media (hover: hover) {
  .lang-dropdown button:hover { background: rgba(240,45,58,0.1); color: var(--c-fourth); }
}

/* Flags (drawn, so they render on every OS — emoji flags don't on Windows) */
.flag {
  display: inline-block;
  width: 1.125rem;
  height: 0.75rem;
  flex-shrink: 0;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(239, 246, 238, 0.12);   /* taste-skill-ignore: keeps white stripes off white */
  background-size: 100% 100%;
}

/* taste-skill-ignore: hard-stop stripes, a drawing rather than a fade */
.flag--bg { background: linear-gradient(#fff 33.4%, #00966e 0 66.7%, #d62612 0); }   /* taste-skill-ignore */
.flag--ru { background: linear-gradient(#fff 33.4%, #0039a6 0 66.7%, #d52b1e 0); }   /* taste-skill-ignore */
.flag--de { background: linear-gradient(#000 33.4%, #dd0000 0 66.7%, #ffce00 0); }   /* taste-skill-ignore */
.flag--en {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' preserveAspectRatio='none'%3E%3CclipPath id='t'%3E%3Cpath d='M30,15h30v15zv15h-30zh-30v-15zv-15h30z'/%3E%3C/clipPath%3E%3Cpath d='M0,0v30h60v-30z' fill='%23012169'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E");
}

.lang-btn .flag { margin-right: 0.35rem; }

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.6rem;
  margin-right: -0.6rem;
}

.hamburger-line {
  display: block;
  height: 1.5px;
  background: var(--c-fourth);
  border-radius: 2px;
  transform-origin: center;
  transition: transform var(--t-med) var(--ease-out),
              opacity var(--t-med) var(--ease-out);
}

.hamburger.open .hamburger-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open .hamburger-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu: a panel that drops over the page from under the bar. It is
   revealed with a clip (no layout animation); a red current runs along its top
   edge as it opens, then the links arrive in order. Closing is quicker and
   plays no sequence. */
.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--c-dark);   /* opaque: any translucency ghosts the hero title through */
  border-bottom: 1px solid var(--c-border);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;   /* keeps closed links out of the tab order */
  transition: clip-path var(--reveal-out) var(--ease-in),
              visibility 0s linear var(--reveal-out);
}

.mobile-menu.open {
  clip-path: inset(0 0 -1px 0);   /* -1px keeps the bottom hairline */
  visibility: visible;
  transition: clip-path var(--reveal-in) var(--ease-out), visibility 0s;
}

/* The current along the top edge */
.mobile-menu::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, var(--c-accent), rgba(240, 45, 58, 0.15));   /* taste-skill-ignore: a trace losing charge, not decoration */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 120ms var(--ease-in);
}

.mobile-menu.open::before {
  transform: scaleX(1);
  transition: transform var(--trace-in) var(--ease-out) 60ms;
}

.mobile-menu ul {
  padding: 0.25rem var(--container-px) 0.75rem;
  display: flex;
  flex-direction: column;
}

.mobile-menu li + li { border-top: 1px solid var(--c-border); }

.mobile-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;   /* 52px rows: a comfortable thumb target */
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-fourth);
  opacity: 0;
  translate: 0 var(--item-rise);
  transition: color var(--t-fast), opacity 120ms var(--ease-in), translate 120ms var(--ease-in);
}

.mobile-menu a::after {
  content: '';
  flex-shrink: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-top: 1.5px solid var(--c-second);
  border-right: 1.5px solid var(--c-second);
  rotate: 45deg;
  transition: border-color var(--t-fast), translate var(--t-fast) var(--ease-out);
}

.mobile-menu.open a {
  opacity: 1;
  translate: 0 0;
  transition: color var(--t-fast),
              opacity 360ms var(--ease-out) calc(var(--item-delay) + var(--i, 0) * var(--item-step)),
              translate 480ms var(--ease-out) calc(var(--item-delay) + var(--i, 0) * var(--item-step));
}

.mobile-menu li:nth-child(2) a { --i: 1; }
.mobile-menu li:nth-child(3) a { --i: 2; }
.mobile-menu li:nth-child(4) a { --i: 3; }

.mobile-menu a:active { color: var(--c-accent); }
.mobile-menu a:active::after { border-color: var(--c-accent); translate: 3px 0; }

@media (hover: hover) {
  .mobile-menu a:hover { color: var(--c-accent); }
  .mobile-menu a:hover::after { border-color: var(--c-accent); translate: 3px 0; }
}

/* ── Responsive nav ── */
@media (min-width: 48em) {
  .nav-links { display: flex; }
  .hamburger { display: none; }
  .mobile-menu { display: none; }
}

/* Tablets: links, the call button and the language switch share one row. */
@media (min-width: 48em) and (max-width: 63.99em) {
  .nav-container { gap: 1rem; }
  .nav-links { gap: 1.25rem; }
}

/* ── 6. Hero Section ───────────────────────────────────────────────────────── */
#hero {
  overflow: hidden;
  background: #000;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  pointer-events: none;
}

/* Bottom gradient: transparent → dark. Solid from 92% down: the clip's "Veo"
   watermark sits in its bottom 7%, so on any covering screen it lands in the
   solid band (or is cropped off, on screens wider than 16:9). */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(   /* taste-skill-ignore: neutral scrim over the video */
    to bottom,
    transparent 0%,
    rgba(5, 7, 10, 0.35) 55%,
    rgba(5, 7, 10, 1) 92%
  );
  pointer-events: none;
}

/* Stage owns the full-screen height.
   --line is where the clip's neon heartbeat falls: the video covers the stage,
   so its height is max(stage, width × 9/16), centred, and the line sits 25.3%
   down the frame. Name above it, what we do below it, at any size. */
.hero-stage {
  --h: max(100svh, 30rem);
  --line: calc(var(--h) / 2 - 0.247 * max(var(--h), 56.25vw));
  position: relative;
  height: var(--h);
  overflow: hidden;
}

/* Hero fills the stage as a background layer */
#hero {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Title floats in the upper zone — between nav bottom and the neon line */
.hero-title-wrap {
  position: absolute;
  top: 4.5rem;     /* flush with the fixed nav bottom */
  left: 0;
  right: 0;
  bottom: calc(100% - var(--line) + 0.5rem);
  z-index: 10;
  text-align: center;
  padding: 0.25rem var(--container-px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center; /* golden middle between nav and neon line; if the
                                   title wraps on a short phone it overflows down, never up under the nav */
  transform: translateX(11vw);
}

/* The offset only clears the neon spike on wide screens; centred on phones. */
@media (max-width: 47.99em) {
  .hero-title-wrap { transform: none; }
}

.hero-title {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, min(4.2vw, 6.5svh), 3.75rem);   /* svh: short landscape screens */
  font-weight: 700;
  font-style: italic;
  color: var(--c-fourth);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Says plainly what the name is; hangs just under the neon line */
.hero-lead {
  position: absolute;
  top: calc(100% + 1.25rem);
  left: 0;
  right: 0;
  margin-inline: auto;
  padding-inline: var(--container-px);
  max-width: 36ch;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--c-fourth);
  text-wrap: balance;
}

/* Wider screens: one line, the box only as wide as its text (the wrap is shifted). */
@media (min-width: 48em) {
  .hero-lead {
    left: 50%;
    right: auto;
    width: max-content;
    max-width: 70vw;
    padding-inline: 0;
    translate: -50% 0;
    font-size: var(--fs-lead);
  }
}

/* Phones: the name is set large on two balanced lines ("СД „Блиц –" /
   "Димитров и Сие""), so it carries the top of the screen instead of floating
   as a thin line in it. */
@media (max-width: 47.99em) {
  .hero-title { font-size: clamp(1.875rem, 9.5vw, 2.75rem); }

  /* The lead supports the name, so it takes the guide's supporting-text role
     (colors.md: Inter 300, #9197AE) instead of body copy at full white, one
     step smaller, with the slight extra tracking and leading light-on-dark
     text needs. ~7:1 on the hero scrim. */
  .hero-lead {
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 1.55;
    letter-spacing: 0.01em;
    color: var(--c-third);
  }
}

/* Squarer than 4:3 (portrait phones, tablets, 5:4 monitors): covering the stage
   would crop the car to a door, so the clip is shown whole instead. It spans the
   width at its own 16:9, sits a little below the middle, and its edges fade into
   the near-black page. 108% wide trims only the empty margins and the corner
   watermark; the car stays inside the frame. --vh is the clip's height, --vtop
   its top edge, and --line is recomputed from them so the name stays above the
   neon line. With the car this small there is no room between line and roof,
   so the lead moves under the car. */
@media (max-aspect-ratio: 4/3) {
  .hero-stage {
    --vh: calc(1.08 * 56.25vw);
    --vtop: calc((var(--h) - var(--vh)) / 2 + 2rem);
    --line: calc(var(--vtop) + 0.253 * var(--vh));
  }

  .hero-video {
    inset: auto;
    top: var(--vtop);
    left: -4%;
    width: 108%;
    max-width: none;   /* the reset's max-width: 100% would cap the overscan */
    height: var(--vh);
    object-fit: fill;   /* the box already has the clip's ratio */
    /* Fade all four edges: vertical × horizontal, intersected. */
    -webkit-mask-image:
      linear-gradient(to bottom, transparent, #000 12%, #000 78%, transparent 94%),
      linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-composite: source-in;
            mask-image:
      linear-gradient(to bottom, transparent, #000 12%, #000 78%, transparent 94%),
      linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-composite: intersect;
  }

  .hero-title-wrap { transform: none; }   /* the spike sits below the name here */

  .hero-lead { top: calc(100% + 0.747 * var(--vh) + 1.5rem); }
}

/* Portrait (phones, tablets upright): a full-screen stage would leave the
   name and the car floating in black, so the stage is only as tall as what it
   holds and the next section shows beneath it. Built top-down: the bar, a zone
   for the name (tall enough to clear the spike, which rises 13% of the clip
   above the line), the clip enlarged until the car runs nearly edge to edge
   (116% wide trims only the empty walls), then room for the lead. */
@media (max-aspect-ratio: 3/4) {
  .hero-stage {
    --vh: calc(1.16 * 56.25vw);
    --line: calc(4.5rem + clamp(12.5rem, 30vw, 13rem));
    --vtop: calc(var(--line) - 0.253 * var(--vh));
    --h: calc(var(--vtop) + 0.92 * var(--vh) + 6.5rem);
  }

  .hero-video {
    left: -8%;
    width: 116%;
  }

  /* The clip's last 8% is the plinth fading out: the lead sits in it, just
     under the wheels. */
  .hero-lead { top: calc(100% + 0.66 * var(--vh) + 0.5rem); }
}

/* Entrance: the name is traced in left to right, the way the neon line draws
   itself, then the lead arrives. Starts when the page is revealed
   (page-pending is lifted); without JS it simply plays on load. The resting
   state is fully visible, and reduced motion collapses it to that state. */
/* The trace draws at a steady pace and settles at the end (an exponential
   ease-out would finish in a flash); the lead follows once it has passed. */
html:not(.page-pending) .hero-title {
  animation: trace-in 1100ms cubic-bezier(0.55, 0, 0.1, 1) 80ms both;
}

html:not(.page-pending) .hero-lead {
  animation: lead-in 700ms var(--ease-out) 820ms both;
}

/* The clip overshoots the box so italic overhangs and the closing quote are
   never shaved. */
@keyframes trace-in {
  from { clip-path: inset(-0.3em 100% -0.3em -0.3em); }
  to   { clip-path: inset(-0.3em -0.3em -0.3em -0.3em); }
}

/* transform, not translate: the lead's translate centres it on wide screens */
@keyframes lead-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}

/* ── 7. About Section ──────────────────────────────────────────────────────── */
.about-grid {
  display: grid;
  gap: 4rem;
}

.about-content .about-heading {
  font-family: var(--font-headline);
  text-wrap: balance;
  font-size: var(--fs-h2);
  color: var(--c-fourth);
  line-height: 1.1;
  margin-bottom: 2rem;
}

.about-text-cols {
  display: grid;
  gap: 1.5rem;
}

.about-text-cols p { line-height: 1.65; }

/* Stats column */
.about-stats {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.5rem 0;
}

.stat-num {
  font-family: var(--font-headline);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--c-accent);
  line-height: 1;
}

.stat-label,
.stat-lang-title {
  font-size: var(--fs-small);
  color: var(--c-third);
}

.stat-lang-list { color: var(--c-fourth); }

@media (min-width: 56.25em) {
  .about-grid { grid-template-columns: 7fr 4fr; align-items: start; }
  .about-stats { padding-left: 3rem; }
  .about-text-cols { grid-template-columns: 1fr 1fr; }
}

/* ── 8. Services Section ───────────────────────────────────────────────────── */
.services-head {
  display: grid;
  gap: 1rem 3rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.services-head .section-title { margin-bottom: 0; }

.section-subtitle {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-fourth);
  max-width: 34ch;
}

/* One row per category: its photograph, then what we do in it. The rows share
   the head's 4/8 columns, so names, lists and the note keep one left edge. */
.services-list {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
}

.service-row { display: grid; gap: 1.5rem; }

.service-photo {
  width: 100%;
  height: auto;   /* the height attribute would otherwise beat aspect-ratio */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--c-dark-3);
  /* Grey until the current reaches the section (current.js), then colour. */
  filter: grayscale(1) brightness(0.72) contrast(1.05);
  transition: filter 1.2s cubic-bezier(0.23, 1, 0.32, 1) var(--sweep-delay, 0ms);
}

.service-row.is-energised .service-photo { filter: grayscale(0.15) brightness(0.95); }

.service-title {
  font-family: var(--font-headline);
  text-wrap: balance;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.15;
  color: var(--c-fourth);
  margin-bottom: 1rem;
  hyphens: auto;
  overflow-wrap: break-word;
}

.service-items {
  columns: 2 16rem;
  column-gap: 2.5rem;
}

/* Short lists read better as one column. */
.service-items:not(:has(li:nth-child(5))) { columns: 1; }

.service-items li {
  break-inside: avoid;
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.55rem;
  line-height: 1.5;
  hyphens: auto;
  overflow-wrap: break-word;
}

.service-items li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  background: var(--c-accent);
}

.services-note {
  margin-top: clamp(3rem, 6vw, 5rem);
  max-width: 40ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
}

@media (min-width: 48em) {
  .services-head,
  .service-row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.5rem 3rem; align-items: start; }
  .services-head { align-items: end; }
  .services-note { margin-left: calc((100% - 3rem) / 3 + 3rem); }
}

/* ── 9. Location Section ───────────────────────────────────────────────────── */
.locations-grid {
  display: grid;
  gap: 2rem;
}

.location-card {
  background: var(--c-dark-3);
  display: flex;
  flex-direction: column;
}

.location-info {
  padding: 1.75rem 2rem;
}

.location-card-title {
  font-family: var(--font-headline);
  text-wrap: balance;
  font-size: var(--fs-h3);
  color: var(--c-fourth);
  margin-bottom: 0.75rem;
}

.location-card-hint { margin-bottom: 1.25rem; }

/* Address block */
.location-address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1.25rem 0 1.5rem;
}

.location-address-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--c-fourth);
}

.location-address-row .icon {
  font-size: 1.15rem;
  color: var(--c-accent);
  margin-top: 0.2rem;
}

.location-hours {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-variant-numeric: tabular-nums;
}

.location-phones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.location-phones a {
  color: var(--c-fourth);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: color var(--t-fast);
}

.location-phones a:hover { color: var(--c-accent); }

.location-map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: gap var(--t-fast), opacity var(--t-fast);
}

.location-map-link:hover { gap: 0.7rem; opacity: 0.85; }

.map-container {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  flex-shrink: 0;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.3) contrast(1.05);
  transition: filter var(--t-slow);
}

.location-card:hover .map-container iframe { filter: grayscale(0) contrast(1); }

@media (min-width: 48em) {
  .locations-grid { grid-template-columns: 1fr 1fr; }
  .location-card { flex-direction: column-reverse; justify-content: flex-end; }
  .map-container { aspect-ratio: 16 / 10; }
}

/* ── 10. Contact Section ───────────────────────────────────────────────────── */

.contact-grid {
  display: grid;
  gap: 3.5rem;
}

.contact-intro {
  font-size: var(--fs-lead);
  line-height: 1.5;
  margin-top: 1rem;
  margin-bottom: 2.5rem;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.contact-detail-value {
  font-family: var(--font-headline);
  font-size: var(--fs-h3);
  color: var(--c-fourth);
  transition: color var(--t-fast);
}

.contact-detail-value:hover { color: var(--c-accent); }

/* Addresses have no spaces to wrap at; keep them smaller and let them break anywhere. */
.contact-detail-value[href^="mailto:"] { overflow-wrap: anywhere; }

/* Form */
.contact-form {
  background: var(--c-dark-3);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.form-row {
  display: grid;
  gap: 2rem;
}

@media (min-width: 30em) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

.form-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;  /* inputs stay level when one label wraps */
  gap: 0.5rem;
}

/* Off-screen, not display:none (some bots skip hidden fields). */
.form-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-turnstile:empty { display: none; }   /* takes space only when a check is shown */

.form-group label {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-third);
}

/* Filled fields; the underline lights up on focus */
.form-group input,
.form-group textarea {
  background: rgba(239, 246, 238, 0.05);
  border: none;
  border-bottom: 2px solid transparent;
  outline: none;
  color: var(--c-fourth);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: 0.7rem 0.9rem;
  resize: none;
  width: 100%;
  caret-color: var(--c-accent);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}

.form-group input:focus,
.form-group textarea:focus { border-bottom-color: var(--c-accent); background-color: rgba(239, 246, 238, 0.08); }

.form-group input:disabled,
.form-group textarea:disabled { opacity: 0.5; }

/* Grows with the enquiry, then scrolls with a visible bar. */
.form-group textarea {
  field-sizing: content;
  min-height: calc(5lh + 1.4rem);
  max-height: calc(14lh + 1.4rem);
  overflow-y: auto;
  scrollbar-color: var(--c-third) transparent;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--c-third);   /* 5.9:1 on the input — passes WCAG AA */
}

.btn-submit {
  padding: 1rem 2rem;
  background: var(--c-accent-strong);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 600;
  transition: background-color var(--t-fast),
              transform var(--t-fast) var(--ease-out),
              opacity var(--t-fast);
  align-self: stretch;
}

.btn-submit:hover  { background-color: #bf1925; }
.btn-submit:active { transform: scale(0.98); }

.btn-submit:disabled { opacity: 0.5; cursor: default; transform: none; }

/* Successful submit is a terminal state — keep it fully legible, not greyed out. */
.btn-submit.is-sent:disabled { opacity: 1; }
.btn-submit.is-sent:hover { background-color: var(--c-accent-strong); }

.form-status {
  margin-top: 0.85rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-fourth);
}

.form-status--error { color: var(--c-accent); }

@media (min-width: 56.25em) {
  .contact-grid { grid-template-columns: 4fr 7fr; align-items: start; }
}

/* ── 10b. Live current (current.js) ────────────────────────────────────────── */
/* The hero's ECG line carried down the page. Per frame current.js writes only
   transform and opacity on the bus, spark and glow (no custom properties, which
   would restyle the whole layer); --x and --reach are set on resize. */
main { position: relative; }

.current {
  --x: 24px;
  --reach: 0px;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
  overflow: clip;   /* the spark's light never widens the page */
}

.current-bus {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: 1px;
  background: rgba(239, 246, 238, 0.07);
}

.current-bus--live {
  background: rgba(240, 45, 58, 0.55);
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}

/* Light the spark throws on the black around it */
.current-glow {
  position: absolute;
  top: -30rem;
  left: calc(var(--x) - 30rem);
  width: 60rem;
  height: 60rem;
  background: radial-gradient(closest-side,   /* taste-skill-ignore: the spark's light, part of the live current */
    rgba(240, 45, 58, 0.16), rgba(240, 45, 58, 0.06) 35%, rgba(240, 45, 58, 0.015) 70%, transparent);
  opacity: 0;
  will-change: transform, opacity;
}

/* The spark: a hot core with a short trailing streak */
.current-spark {
  position: absolute;
  top: 0;
  left: calc(var(--x) - 3px);
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, var(--c-accent) 60%, transparent 72%);   /* taste-skill-ignore: the spark itself */
  opacity: 0;
  will-change: transform, opacity;
}

.current-spark::before {
  content: '';
  position: absolute;
  left: 3px;
  bottom: 3px;
  width: 1px;
  height: 4.5rem;
  background: linear-gradient(to bottom, transparent, rgba(255, 220, 222, 0.9));   /* taste-skill-ignore: the spark trail */
}

/* Branch: the bus reaches out to each section heading and closes on a pad */
.current-branch {
  position: absolute;
  top: 0;
  left: var(--x);
  height: 0;
}

.current-branch-line {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--reach);
  height: 1px;   /* taste-skill-ignore: the branch wire */
  background: rgba(239, 246, 238, 0.07);
}

.current-branch-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms cubic-bezier(0.23, 1, 0.32, 1);
}

.current-pad {
  position: absolute;
  top: -3px;
  left: calc(var(--reach) - 3px);
  width: 7px;
  height: 7px;
  border: 1px solid rgba(239, 246, 238, 0.18);
  border-radius: 50%;
  background: var(--c-dark);
  transition: border-color 300ms ease 260ms, background-color 300ms ease 260ms;
}

.current-branch.is-on .current-branch-line::after { transform: scaleX(1); }
.current-branch.is-on .current-pad { border-color: var(--c-accent); background-color: rgba(240, 45, 58, 0.35); }

/* On phones the gutter is too narrow for a branch: the pad sits on the bus. */
@media (max-width: 47.99em) {
  .current-branch-line { display: none; }
  .current-pad { left: -3px; }
}

/* Each box's edge glows once when its section powers up. Opacity only, so it
   runs on the compositor and never repaints while the page scrolls. */
.location-card,
.contact-form { position: relative; }

.location-card.is-energised::after,
.contact-form.is-energised::after {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(135deg,   /* taste-skill-ignore: the edge glow */
    rgba(255, 236, 238, 0.6), rgba(240, 45, 58, 0.5) 40%, rgba(240, 45, 58, 0.12));
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);   /* taste-skill-ignore: a mask, not a fill */
  opacity: 0;
  will-change: opacity;
  animation: card-glow 1.4s ease var(--sweep-delay, 0ms) forwards;
}

/* Reduced motion: the current still follows the visitor's scrolling, but the
   self-running motion becomes fades — no spark trail,
   branches fade instead of drawing out. (Overrides the global 0.01ms rule.) */
@media (prefers-reduced-motion: reduce) {
  .current-spark::before { display: none; }

  .current-branch-line::after {
    transform: none;
    opacity: 0;
    transition-property: opacity !important;
    transition-duration: 400ms !important;
  }
  .current-branch.is-on .current-branch-line::after { opacity: 1; }
  .current-pad { transition-duration: 400ms !important; }
  .service-photo { transition-duration: 900ms !important; }   /* a fade, no travel */
  .location-card.is-energised::after,
  .contact-form.is-energised::after { animation-duration: 1.4s !important; }
}

@keyframes card-glow {
  0%, 100% { opacity: 0; }
  35%      { opacity: 1; }
}

/* ── 10c. Wiring (wiring.js) ──────────────────────────────────────────────── */
/* Fixed behind the content (z 1, under .section-container's z 2) and above the
   section fills; first in <main>, so the hero paints over it. */
.wiring {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ── 11. Footer ────────────────────────────────────────────────────────────── */
/* The whole footer sits above the wiring canvas, so its opaque background hides
   every trace and pulse that reaches it. */
footer { position: relative; z-index: 2; background: var(--c-dark-3); }

.footer-container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 2.5rem var(--container-px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-brand img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  opacity: 0.7;
}

.footer-brand-name {
  font-family: var(--font-headline);
  font-size: var(--fs-lead);
  font-style: italic;
  font-weight: 700;
  color: var(--c-fourth);
}

.footer-rights {
  font-size: var(--fs-small);
  color: var(--c-third);
  text-align: center;
}

.footer-credits {
  order: 1;
  flex-basis: 100%;
  font-size: var(--fs-small);
  color: var(--c-third);
}

.footer-credits a { text-decoration: underline; text-underline-offset: 0.2em; }
.footer-credits a:hover { color: var(--c-fourth); }

.footer-links {
  display: flex;
  gap: 2rem;
}

.footer-links a {
  font-size: var(--fs-small);
  color: var(--c-third);
  transition: color var(--t-fast);
}

.footer-links a:hover { color: var(--c-accent); }

/* ── 12. Focus-visible accessibility ──────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── 13. Reduced-motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html.smooth-scroll { scroll-behavior: auto; }
  .lang-dropdown:not(.open) { display: none; }   /* nothing to fade: closed is simply gone */
}

/* ── 14. Legal pages (privacy.html) ───────────────────────────────────────── */
/* A reading page: one column at a comfortable measure, the site's type roles,
   no motion. */
.legal-bar { border-bottom: 1px solid var(--c-border); }

.legal-bar-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--container-px);
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.legal-home img { width: 2.5rem; height: 2.5rem; object-fit: contain; opacity: 0.85; }

/* Language switch: the same page in BG / EN / RU / DE */
.legal-langs {
  display: flex;
  margin-left: auto;
  margin-right: 1rem;
}

.legal-langs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.75rem;   /* thumb-sized targets */
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-third);
  transition: color var(--t-fast);
}

.legal-langs a[aria-current="page"] {
  color: var(--c-fourth);
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.35em;
}

.legal-langs a:active { color: var(--c-fourth); }
@media (hover: hover) { .legal-langs a:hover { color: var(--c-fourth); } }

/* Narrow phones (360px and below): tighter language links so the bar fits */
@media (max-width: 22.5em) {
  .legal-langs { margin-right: 0.75rem; }
  .legal-langs a { min-width: 2.125rem; }
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-size: var(--fs-small);
  font-weight: 500;
  color: rgba(239, 246, 238, 0.75);
  transition: color var(--t-fast);
}

.legal-back::before {   /* a left chevron, drawn like the menu's */
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-bottom: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  rotate: 45deg;
}

.legal-back:active { color: var(--c-fourth); }
@media (hover: hover) { .legal-back:hover { color: var(--c-fourth); } }

.legal {
  max-width: calc(37rem + 2 * var(--container-px));   /* ~75 Cyrillic characters a line */
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--container-px) clamp(4rem, 9vw, 6.5rem);
}

.legal h1 {
  font-family: var(--font-headline);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
  color: var(--c-fourth);
}

.legal-updated {
  margin-top: 0.75rem;
  font-size: var(--fs-small);
  color: var(--c-third);
}

/* Translations say which text is binding */
.legal-translation-note {
  margin-top: 0.5rem;
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--c-third);
}

.legal h2 {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 4vw, var(--fs-h3));
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
  color: var(--c-fourth);
  margin: 3.5rem 0 1rem;
  scroll-margin-top: 1.5rem;
}

.legal h3 {
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
  color: var(--c-fourth);
  margin: 2.25rem 0 0.75rem;
}

.legal p,
.legal li,
.legal dd {
  text-wrap: pretty;   /* dd is not covered by the base p, li rule */
  line-height: 1.7;
  color: rgba(239, 246, 238, 0.86);
}

.legal p + p { margin-top: 1rem; }

.legal ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 1rem 0;
}

.legal li + li { margin-top: 0.5rem; }
.legal li::marker { color: var(--c-accent); }

.legal a {
  color: var(--c-fourth);
  text-decoration: underline;
  text-decoration-color: rgba(240, 45, 58, 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--t-fast);
}

@media (hover: hover) { .legal a:hover { text-decoration-color: var(--c-accent); } }

.legal code {
  font-size: 0.9em;
  padding: 0.15em 0.55em;
  background: var(--c-dark-3);
  color: var(--c-fourth);
}

/* The summary leads, set apart by a hairline frame rather than a card */
.legal-summary {
  margin-top: 2.5rem;
  padding: 1.5rem clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--c-border-2);
}

.legal-summary h2 { margin-top: 0; }
.legal-summary ul { margin-bottom: 0; }

.legal-toc { margin-top: 2.5rem; }

.legal-toc ol {
  list-style: decimal;
  padding-left: 1.5rem;
  columns: 2 16rem;
  column-gap: 2rem;
}

.legal-toc li { break-inside: avoid; }
.legal-toc li::marker { color: var(--c-third); }

/* Fact lists: label above value on phones, side by side when there's room */
.legal-facts {
  display: grid;
  gap: 0.35rem 1.5rem;
  margin: 1rem 0;
}

.legal-facts dt {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-third);
  line-height: 1.7;
}

.legal-facts dd + dt { margin-top: 0.75rem; }

@media (min-width: 40em) {
  .legal-facts { grid-template-columns: 11rem 1fr; }
  .legal-facts dd + dt { margin-top: 0; }
}

/* Draft markers: impossible to miss, removed before publishing */
.legal mark.todo {
  background: rgba(240, 45, 58, 0.14);
  color: #ffc2c6;
  outline: 1px dashed var(--c-accent);
  outline-offset: 1px;
  padding: 0.1em 0.5em;
}

.review-note {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--c-accent);
  background: rgba(240, 45, 58, 0.06);
}

.review-note p { font-size: var(--fs-small); line-height: 1.6; color: #ffd6d9; }

.review-note-label {
  font-weight: 600;
  color: var(--c-accent) !important;
  margin-bottom: 0.35rem;
}

/* ── 15. Scroll motion ────────────────────────────────────────────────────── */
/* Two parts. (1) The hero hands over to the page: the car drifts slower than
   the scroll and the name lifts away, driven by the scroll itself on the
   compositor (no script per frame). (2) Content arrives once as it scrolls
   into view (main.js initReveals): headings wipe down like the menu panels,
   text and cards rise a beat later. Only opacity, translate and clip-path
   move; nothing in the first screen is ever hidden; without JS nothing is. */

/* (1) Hero hand-over, over the first --h (the stage's height) of scroll.
   A root scroll() timeline, not view(): html and body both set overflow-x,
   which makes body a scroll container that never scrolls, and a view()
   timeline would follow it. Firefox and older browsers keep the hero still. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* The clip moves at ~80% of the scroll speed: depth, not a jolt. */
    #hero {
      animation: hero-recede linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 var(--h);
    }

    /* The name and lead fade in place (lifting them would cross the
       drifting car on phones), gone by the time half the hero has passed. */
    .hero-title-wrap {
      animation: hero-title-away linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 calc(var(--h) * 0.5);
    }
  }
}

@keyframes hero-recede {
  to { translate: 0 20%; scale: 1.04; }
}

/* Portrait: the lead sits right under the wheels, so the car doesn't drift
   into it; it only settles back with the slow zoom. */
@keyframes hero-recede-portrait {
  to { scale: 1.04; }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (max-aspect-ratio: 3/4) {
    #hero { animation-name: hero-recede-portrait; }
  }
}

@keyframes hero-title-away {
  to { opacity: 0; }
}

/* (2) Arrivals. Hidden only once main.js has armed them (below the fold). */
html.reveal-armed [data-reveal]:not(.is-revealed) {
  opacity: 0;
  translate: 0 1rem;
}

/* Headings wipe in place, without moving: current.js measures their position
   to draw each section's branch of the current. */
html.reveal-armed [data-reveal="wipe"]:not(.is-revealed) {
  opacity: 1;
  translate: none;
  clip-path: inset(0 0 100% 0);
}

[data-reveal] {
  transition: opacity 700ms var(--ease-out) var(--reveal-delay, 0ms),
              translate 900ms var(--ease-out) var(--reveal-delay, 0ms);
}

/* The open clip overshoots so italic overhangs and descenders are never shaved. */
[data-reveal="wipe"] {
  clip-path: inset(-0.2em -0.3em -0.35em -0.3em);
  transition: clip-path 800ms var(--ease-in-out) var(--reveal-delay, 0ms);
}

/* Reduced motion: no movement, a short fade still marks the arrival. */
@media (prefers-reduced-motion: reduce) {
  html.reveal-armed [data-reveal]:not(.is-revealed) { translate: none; clip-path: none; }
  html.reveal-armed [data-reveal="wipe"]:not(.is-revealed) { opacity: 0; }
  [data-reveal],
  [data-reveal="wipe"] {
    clip-path: none;
    transition: opacity 400ms ease var(--reveal-delay, 0ms) !important;
  }
}

/* Printing shows everything */
@media print {
  html.reveal-armed [data-reveal] { opacity: 1 !important; translate: none !important; clip-path: none !important; }
}