/* ==========================================================
   Дорога на Медину — scroll site
   ========================================================== */

@font-face { font-family: "Overpass"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/overpass-normal-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Overpass"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/overpass-normal-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Overpass"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/overpass-normal-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Overpass"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(../fonts/overpass-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Overpass"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(../fonts/overpass-italic-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Overpass Mono"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/overpassmono-normal-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Overpass Mono"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/overpassmono-normal-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Noto Kufi Arabic"; font-style: normal; font-weight: 700 900; font-display: swap;
  src: url(../fonts/kufi-normal-arabic.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }

:root {
  --night: #0A0F1A;
  --asphalt: #14171A;
  --green: #0B6B3A;
  --green-hi: #10834A;
  --blue: #1F5FBF;
  --brown: #7A4A1E;
  --warn: #FFC72C;
  --work: #F28C28;
  --stop: #D7261E;
  --paper: #F4F1E8;
  --ink: #111316;
  --led: #FFB000;
  --steel: #6E7782;
  --text: #EEF1F4;
  --muted: #B9C3CF;

  --ff: "Overpass", "Noto Kufi Arabic", system-ui, sans-serif;
  --ff-mono: "Overpass Mono", "Overpass", monospace;
  --ff-ar: "Noto Kufi Arabic", "Overpass", sans-serif;

  --t-xxl: clamp(3.2rem, 6.4vw, 7.5rem);
  --t-xl: clamp(2.8rem, 5vw, 6rem);
  --t-l: clamp(2.2rem, 3.6vw, 4.4rem);
  --t-m: clamp(1.7rem, 2.5vw, 3.1rem);
  --t-s: clamp(1.15rem, 1.45vw, 1.75rem);
  --t-xs: clamp(1rem, 1.1vw, 1.3rem);

  --r: clamp(10px, 0.95vw, 18px);
  --ring: clamp(4px, 0.32vw, 6px);
  --ring2: clamp(7px, 0.56vw, 10.5px);
  --gap: clamp(18px, 2.1vw, 40px);
  --shadow: 0 1.6vw 3.2vw -0.8vw rgba(0, 0, 0, 0.7), 0 0.3vw 0.8vw rgba(0, 0, 0, 0.35);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; background: var(--night); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  font-family: var(--ff);
  color: var(--text);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, dl, dd, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
::selection { background: var(--warn); color: var(--ink); }
:focus-visible { outline: 3px solid var(--warn); outline-offset: 4px; border-radius: 6px; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #07090F; }
::-webkit-scrollbar-thumb { background: var(--green); border: 3px solid #07090F; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--paper); }
html { scrollbar-color: var(--green) #07090F; }
svg { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- world layers ---------- */
#road { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; }
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(4, 6, 12, 0.55) 100%),
    linear-gradient(270deg, rgba(5, 8, 14, 0.42) 0%, rgba(5, 8, 14, 0.18) 55%, transparent 80%),
    linear-gradient(90deg, rgba(5, 8, 14, 0.35), transparent 30%);
}
main { position: relative; z-index: 2; }

/* ---------- frame system: signs stand on the right shoulder, the driver (camera) sits left ---------- */
.frame {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 15.5vh 0 15vh;
}
.frame__inner {
  min-width: 0;
  width: min(73vw, 1460px);
  margin-left: auto;
  margin-right: 5.2vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap);
}

/* ---------- type ---------- */
.statement {
  font-size: var(--t-xl);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 17ch;
  text-shadow: 0 0.3vw 2.4vw rgba(0, 0, 0, 0.65);
}
.statement--xl { font-size: var(--t-xxl); max-width: 14ch; }
.statement--l { font-size: var(--t-l); max-width: 22ch; }
.statement--m { font-size: var(--t-l); max-width: 24ch; line-height: 1.06; }
.statement--quote { font-style: italic; font-weight: 700; color: #FFD27A; font-size: var(--t-xxl); max-width: 16ch; }
.statement--green { color: #6EF0A6; font-size: var(--t-xl); }
.statement--soft { font-weight: 600; font-style: italic; color: #FFD27A; }
.lede {
  font-size: var(--t-m);
  line-height: 1.3;
  font-weight: 500;
  color: var(--muted);
  max-width: 30ch;
  text-wrap: pretty;
  text-shadow: 0 0.2vw 1.6vw rgba(0, 0, 0, 0.7);
}
.lede--wide { max-width: 44ch; }
.lede--small { font-size: var(--t-s); }
.lede--after { margin-top: 0.4vw; }
.lede a { color: var(--warn); }
.hl { white-space: normal; }
.hl--red { color: #FF5A4E; }
.hl--gold { color: #FFD27A; }
.hl--green { color: #6EF0A6; }
.hl--blue { color: #8DB8FF; }
.quote {
  font-size: var(--t-l);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 26ch;
  text-wrap: balance;
  position: relative;
  padding-left: 0.1em;
  text-shadow: 0 0.3vw 2vw rgba(0, 0, 0, 0.7);
}
.quote--big { font-size: var(--t-xl); max-width: 20ch; }

/* word split */
.w { display: inline-block; overflow: clip; overflow-clip-margin: 0.2em; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.w > span { display: inline-block; will-change: transform; }

/* ---------- SIGN material ---------- */
.sign {
  --c: var(--green);
  --fg: var(--paper);
  --edge: var(--paper);
  position: relative;
  isolation: isolate;
  background-color: var(--c);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0.1)),
    repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 6px);
  color: var(--fg);
  border-radius: var(--r);
  padding: clamp(18px, 1.9vw, 38px) clamp(22px, 2.3vw, 46px);
  box-shadow:
    inset 0 0 0 var(--ring) var(--c),
    inset 0 0 0 var(--ring2) var(--edge),
    var(--shadow);
  overflow: hidden;
}
.sign--blue { --c: var(--blue); }
.sign--brown { --c: var(--brown); }
.sign--red { --c: var(--stop); }
.sign--white { --c: var(--paper); --fg: var(--ink); --edge: var(--ink); }
.sign--small { padding: clamp(8px, 0.7vw, 14px) clamp(14px, 1.2vw, 22px); }
.sign--worn {
  --c: #3F5A4A;
  --fg: #D6DCD2;
  --edge: #B7BDB2;
  filter: saturate(0.6);
  background-image:
    radial-gradient(60% 40% at 80% 20%, rgba(0, 0, 0, 0.28), transparent),
    radial-gradient(40% 30% at 15% 85%, rgba(120, 90, 50, 0.35), transparent),
    repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 6px);
}
:where(.sign) h3 { font-size: var(--t-m); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
:where(.sign) :where(p, li) { font-size: var(--t-s); line-height: 1.38; }
.glint {
  position: absolute; inset: -30% -10%; z-index: -1; pointer-events: none;
  background: linear-gradient(102deg, transparent 40%, rgba(255, 255, 255, 0.16) 49%, rgba(255, 255, 255, 0.04) 53%, transparent 60%);
  transform: translateX(-130%);
  will-change: transform;
}
.sign--white .glint, .plate .glint { display: none; }
.sign__rule { border: 0; height: var(--ring); background: var(--paper); margin: clamp(10px, 1vw, 20px) 0; border-radius: 4px; opacity: 0.95; }

.plate {
  display: inline-flex; align-items: center; gap: 0.5em;
  background: var(--paper);
  color: var(--ink);
  font-weight: 800;
  font-size: var(--t-s);
  line-height: 1.15;
  padding: 0.55em 0.9em 0.45em;
  border-radius: calc(var(--r) * 0.6);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--ink), 0 0.5vw 1.4vw rgba(0, 0, 0, 0.45);
}
.plate--yellow { background: var(--warn); box-shadow: inset 0 0 0 3px var(--warn), inset 0 0 0 5px var(--ink), 0 0.5vw 1.4vw rgba(0, 0, 0, 0.45); }
.plate--hint { font-size: var(--t-s); }
.plate--big { font-size: var(--t-m); }
.plate--new { background: var(--warn); box-shadow: inset 0 0 0 3px var(--warn), inset 0 0 0 5px var(--ink); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--t-xs); }

/* sign arrow */
.sa { width: 1em; height: 1em; fill: currentColor; flex: none; }
.sa--ur { transform: rotate(45deg); }
.sa--down { transform: rotate(180deg); }
.sa--right { transform: rotate(90deg); }
.ic { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }

/* exit number */
.exitnum {
  display: inline-grid; place-items: center;
  min-width: 1.6em; height: 1.6em; padding: 0 0.3em;
  background: var(--paper); color: var(--green);
  font-weight: 900; font-size: var(--t-m); line-height: 1;
  border-radius: calc(var(--r) * 0.6);
  padding-top: 0.12em;
}
.exitnum--inv { background: var(--paper); color: var(--ink); }

/* ---------- HUD ---------- */
.hud-logo {
  position: fixed; z-index: 20; top: 2.6vh; left: 2.2vw;
  font-weight: 900; font-size: var(--t-s); letter-spacing: 0.01em; text-decoration: none;
  background: var(--paper); color: var(--ink);
  padding: 0.5em 0.85em 0.38em; border-radius: 10px;
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--ink), 0 8px 24px rgba(0, 0, 0, 0.4);
}
.hud-dash { position: fixed; z-index: 20; top: 2.2vh; right: 2.2vw; display: flex; align-items: center; gap: 14px; }
.odo { padding: 10px 18px 10px; border-radius: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 15.5rem; }
.odo__ar { font-family: var(--ff-ar); font-size: 0.95rem; line-height: 1.4; opacity: 0.92; text-align: right; }
.odo__row { display: flex; align-items: baseline; gap: 12px; }
.odo__name { font-weight: 800; font-size: 1.4rem; margin-right: auto; }
.odo__drums { display: inline-flex; font-weight: 900; font-size: 1.9rem; font-variant-numeric: tabular-nums; height: 1.1em; line-height: 1.1em; overflow: hidden; }
.odo__drum { display: inline-block; width: 0.66em; height: 1.1em; overflow: hidden; position: relative; text-align: center; }
.odo__drum > span { display: block; will-change: transform; }
.odo__drum > span > i { display: block; height: 1.1em; font-style: normal; }
.odo__gap { width: 0.25em; }
.odo__unit { font-weight: 700; font-size: 1.05rem; }
.gauge { position: relative; width: 172px; height: 118px; background: rgba(10, 13, 18, 0.82); border-radius: 14px; box-shadow: inset 0 0 0 2px #2B323B, 0 10px 26px rgba(0, 0, 0, 0.45); padding: 8px 6px 0; }
.gauge__dial { width: 160px; height: 96px; overflow: visible; }
.gauge__arc { fill: none; stroke: #39424D; stroke-width: 5; stroke-linecap: round; }
.gauge__red { fill: none; stroke: var(--stop); stroke-width: 5; stroke-linecap: round; }
.gauge__ticks line { stroke: #8A96A3; stroke-width: 1.6; }
.gauge__needle { stroke: var(--work); stroke-width: 3.2; stroke-linecap: round; transform-origin: 60px 64px; filter: drop-shadow(0 0 4px rgba(242, 140, 40, 0.8)); }
.gauge__hub { fill: #E3E7EC; }
.gauge__val { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 0.95rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.gauge__val b { color: var(--text); font-size: 1.3rem; }

/* route strip (right edge) */
.route {
  position: fixed; z-index: 15; right: 0.9vw; top: 20vh; bottom: 20vh; width: 34px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
}
.route__line {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, rgba(244, 241, 232, 0.55) 0 10px, transparent 10px 20px);
  border-radius: 2px;
}
.route__stop {
  position: relative; width: 16px; height: 16px; border-radius: 50%;
  background: var(--night); box-shadow: inset 0 0 0 3px var(--paper);
  text-decoration: none;
}
.route__stop span {
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 0.82rem; font-weight: 800;
  background: var(--paper); color: var(--ink); padding: 3px 8px 1px; border-radius: 6px;
  opacity: 0; transition: opacity 0.3s;
}
.route__stop:hover span { opacity: 1; }
.route__stop--1 { box-shadow: inset 0 0 0 3px var(--paper), 0 0 0 0 var(--warn); background: var(--warn); }
.route__stop--2 { background: var(--blue); }
.route__stop--3 { background: var(--green-hi); }
.route__stop--end { width: 22px; height: 22px; background: var(--brown); }
.route__car {
  position: absolute; left: 50%; bottom: 0; width: 30px; height: 30px; margin-left: -15px; margin-bottom: -15px;
  border-radius: 50%; background: var(--work); color: var(--ink); display: grid; place-items: center;
  box-shadow: 0 0 0 3px var(--night), 0 0 18px rgba(242, 140, 40, 0.8);
  will-change: transform;
}
.route__car svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; }

.keys-hint {
  position: fixed; z-index: 15; right: 3.2vw; bottom: 2.4vh;
  font-size: 0.85rem; color: var(--muted); margin: 0;
  background: rgba(10, 13, 18, 0.75); padding: 8px 12px; border-radius: 10px;
  transition: opacity 0.6s;
}
.keys-hint kbd { font-family: var(--ff-mono); background: #1E242C; color: var(--text); padding: 1px 6px; border-radius: 5px; margin-right: 4px; box-shadow: inset 0 -2px 0 #0A0D12; }
.keys-hint.is-hidden { opacity: 0; pointer-events: none; }
.cam-zone {
  position: fixed; z-index: 40; left: 2.6vw; bottom: 4.2vh; width: 18.5vw; aspect-ratio: 1;
  border-radius: 50%; border: 3px dashed var(--warn); background: rgba(255, 199, 44, 0.08);
  display: none; place-items: center; pointer-events: none;
}
.cam-zone span { font-weight: 800; color: var(--warn); }
.show-cam .cam-zone { display: grid; }

/* ---------- HERO ---------- */
.frame--hero { padding: 0; align-items: flex-start; min-height: 100vh; }
.gantry { position: absolute; inset: 0 0 auto; height: 100vh; pointer-events: none; }
.gantry__beam {
  position: absolute; left: 0; right: 0; top: 7vh; height: 3.4vh;
  background:
    repeating-linear-gradient(90deg, transparent 0 1.6vh, #4E5761 1.6vh 1.9vh),
    linear-gradient(180deg, #8C96A1 0 12%, #3A424B 12% 88%, #8C96A1 88%);
  box-shadow: 0 1vh 2vh rgba(0, 0, 0, 0.55);
}
.gantry__post { position: absolute; top: 7vh; bottom: 0; width: 1.5vw; background: linear-gradient(90deg, #4A535D, #9AA4AE 40%, #3B434C); }
.gantry__post--l { left: 3vw; }
.gantry__post--r { right: 3vw; }
.hero { position: relative; width: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 10.4vh 6vw 6vh; }
.hero__signs { display: flex; gap: 2vw; align-items: flex-start; justify-content: center; width: 100%; }
.hanger { position: relative; display: flex; flex-direction: column; align-items: center; }
.hanger::before, .hanger::after {
  content: ""; position: absolute; top: -3.4vh; width: 0.55vw; height: 3.4vh;
  background: linear-gradient(90deg, #5A636D, #A6AFB8, #4B535C);
}
.hanger::before { left: 18%; }
.hanger::after { right: 18%; }
.hero__main { width: min(56vw, 1080px); }
.hero__main .plate--new { position: relative; z-index: 2; margin-bottom: -4px; border-radius: 10px 10px 0 0; }
.hero__sign { width: 100%; padding: clamp(22px, 2.2vw, 44px) clamp(28px, 2.8vw, 56px) clamp(26px, 2.6vw, 50px); transform-origin: 50% -4vh; }
.hero__dest { display: flex; align-items: center; gap: 1.6vw; }
.hero__dest .sa { font-size: clamp(3.4rem, 6.2vw, 7.4rem); }
.hero__ar { font-family: var(--ff-ar); font-weight: 800; font-size: clamp(1.5rem, 2.3vw, 2.8rem); line-height: 1.35; }
.hero__city { font-weight: 900; font-size: clamp(3rem, 5.6vw, 6.6rem); line-height: 0.95; letter-spacing: -0.02em; }
.hero__km { margin-left: auto; font-weight: 900; font-size: clamp(2.2rem, 3.8vw, 4.6rem); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hero__title { font-size: clamp(2.2rem, 3.9vw, 4.7rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.hero__side { width: min(17vw, 320px); }
.hero__sign2 { width: 100%; display: flex; flex-direction: column; gap: 10px; transform-origin: 50% -4vh; }
.hero__sign2 .ic { width: 3rem; height: 3rem; }
.hero__sign2 p { font-weight: 800; font-size: clamp(1.2rem, 1.9vw, 2.3rem); line-height: 1.05; }
.hero__byline { margin-top: 3.4vh; font-size: var(--t-s); }
.hero__cue { margin-top: auto; display: flex; align-items: center; gap: 14px; font-weight: 800; font-size: var(--t-s); color: var(--text); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); }
.hero__cue-sign { font-size: 2.2rem; display: grid; place-items: center; padding: 10px; }

/* ---------- VMS (LED message board) ---------- */
.vms {
  position: relative;
  background: #07080A;
  border-radius: 10px;
  padding: clamp(20px, 2.2vw, 42px) clamp(26px, 2.8vw, 54px);
  box-shadow: inset 0 0 0 clamp(8px, 0.7vw, 14px) #23282E, inset 0 0 0 clamp(10px, 0.85vw, 17px) #0F1215, var(--shadow);
  display: flex; flex-direction: column; gap: 0.35em;
  max-width: 100%;
}
.vms::after {
  content: ""; position: absolute; inset: clamp(10px, 0.85vw, 17px); pointer-events: none; border-radius: 4px;
  background: radial-gradient(circle at 50% 50%, transparent 52%, rgba(7, 8, 10, 0.92) 60%) 0 0 / 6px 6px;
}
.vms__line {
  font-family: var(--ff-mono);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.9vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: 0.04em;
  color: var(--led);
  text-shadow: 0 0 12px rgba(255, 176, 0, 0.75), 0 0 2px rgba(255, 220, 140, 0.9);
  white-space: nowrap;
}
.vms__line--hot { color: #FF6A3D; text-shadow: 0 0 14px rgba(255, 90, 50, 0.85), 0 0 2px #FFC0A8; }
.vms--alert .vms__line { font-size: clamp(2rem, 4.2vw, 5.2rem); }
.ch { display: inline-block; }

/* ---------- services (blue pictogram sign) ---------- */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; width: 100%; }
.services--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.services--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.service { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2vw, 38px) clamp(18px, 1.7vw, 32px); }
.service + .service { box-shadow: inset var(--ring) 0 0 -1px rgba(244, 241, 232, 0.9); }
.pict { width: clamp(56px, 4.4vw, 84px); height: clamp(56px, 4.4vw, 84px); color: var(--paper); stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.service p { font-size: var(--t-xs); line-height: 1.35; color: #DCE7F7; }
.service b { display: block; font-size: var(--t-s); line-height: 1.15; color: var(--paper); margin-bottom: 6px; }

/* ---------- exits list (advance direction sign) ---------- */
.exits { width: 100%; padding: clamp(10px, 1vw, 18px) clamp(26px, 2.6vw, 50px); }
.exits__row { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 34px); padding: clamp(16px, 1.6vw, 30px) 0; }
.exits__row + .exits__row { box-shadow: 0 calc(-1 * var(--ring) / 2) 0 0 var(--paper); }
.exits__dest { font-weight: 800; font-size: var(--t-l); line-height: 1.05; flex: 1; }
.exits__dest small { display: block; font-weight: 600; font-size: var(--t-s); color: #CBE6D6; margin-top: 6px; }
.exits__row .sa { font-size: clamp(2.6rem, 4vw, 4.8rem); }
.exits__row--1 .exitnum { background: var(--warn); color: var(--ink); }
.exits__row--2 .exitnum { background: #8DB8FF; color: var(--ink); }

/* ---------- STOP ---------- */
.stop { flex-direction: row; align-items: center; gap: 4vw; }
.stopsign { position: relative; width: clamp(220px, 22vw, 420px); flex: none; filter: drop-shadow(0 2vw 2.6vw rgba(0, 0, 0, 0.6)); }
.stopsign svg { width: 100%; height: auto; }
.stopsign__ar { position: absolute; left: 0; right: 0; top: 18%; text-align: center; font-family: var(--ff-ar); font-weight: 900; color: var(--paper); font-size: clamp(2.4rem, 4.2vw, 5rem); line-height: 1; }
.stopsign__en { position: absolute; left: 0; right: 0; top: 52%; text-align: center; font-weight: 900; color: var(--paper); font-size: clamp(2.6rem, 4.6vw, 5.6rem); line-height: 1; letter-spacing: 0.02em; }

/* roadwork excuses */
.works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 26px); width: 100%; }
.worksign {
  background: var(--work); color: var(--ink);
  font-weight: 800; font-size: var(--t-m); line-height: 1.1;
  padding: 0.75em 0.9em 0.6em;
  border-radius: var(--r);
  box-shadow: inset 0 0 0 var(--ring) var(--work), inset 0 0 0 var(--ring2) var(--ink), var(--shadow);
}
.worksign:nth-child(2) { transform: rotate(-1.2deg); }
.worksign:nth-child(3) { transform: rotate(1deg); }
.barrier {
  width: 100%; height: clamp(34px, 3.4vw, 64px); border-radius: 8px;
  background: repeating-linear-gradient(-45deg, var(--stop) 0 clamp(26px, 2.4vw, 46px), var(--paper) clamp(26px, 2.4vw, 46px) clamp(52px, 4.8vw, 92px));
  box-shadow: var(--shadow);
  transform-origin: left center;
}

/* traffic light */
.frame--act { min-height: 120vh; }
.act { flex-direction: row; align-items: center; gap: 5vw; }
.tlight {
  flex: none; display: flex; flex-direction: column; gap: 1.6vh;
  background: linear-gradient(90deg, #15181C, #262B31 50%, #15181C);
  padding: 2vh 1.3vw; border-radius: 2vw;
  box-shadow: inset 0 0 0 3px #2F353C, var(--shadow);
}
.lamp {
  width: clamp(80px, 8.6vw, 160px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3A3030, #1B1616 70%);
  box-shadow: inset 0 0.6vw 1vw rgba(0, 0, 0, 0.8);
  position: relative;
}
.lamp::after { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: var(--on, 0); transition: none; }
.lamp--r::after { background: radial-gradient(circle at 40% 35%, #FFB3A8, #FF3B2F 45%, #A3140C); box-shadow: 0 0 4vw 1vw rgba(255, 59, 47, 0.75); }
.lamp--y::after { background: radial-gradient(circle at 40% 35%, #FFF1B8, #FFC72C 45%, #B37F00); box-shadow: 0 0 4vw 1vw rgba(255, 199, 44, 0.75); }
.lamp--g::after { background: radial-gradient(circle at 40% 35%, #C9FFE0, #2FE07F 45%, #0B8A45); box-shadow: 0 0 5vw 1.4vw rgba(47, 224, 127, 0.8); }
.act__go { font-size: clamp(4rem, 9.6vw, 11.5rem); font-weight: 900; line-height: 0.92; letter-spacing: -0.035em; text-transform: uppercase; color: var(--paper); text-shadow: 0 0 0 transparent; }
.act__sub { font-size: var(--t-l); font-weight: 700; font-style: italic; color: #6EF0A6; margin-top: 1.4vh; }
.act__sub--final { font-size: var(--t-xl); color: #FFD27A; }

/* ---------- exit signs ---------- */
.exitsign-wrap { align-items: flex-end; gap: 0; }
.exitsign { display: flex; flex-direction: column; align-items: flex-end; width: min(62vw, 1180px); transform-origin: 50% 0; }
.exitsign__tab { font-weight: 800; font-size: var(--t-m); border-radius: var(--r) var(--r) 0 0; margin-bottom: calc(-1 * var(--ring2)); padding-bottom: calc(var(--ring2) + 0.5vw); position: relative; z-index: 0; }
.exitsign__tab b { font-weight: 900; }
.exitsign__main { width: 100%; display: flex; align-items: center; gap: 3vw; padding: clamp(28px, 3vw, 58px) clamp(32px, 3.2vw, 62px); z-index: 1; border-top-right-radius: 0; }
.exitsign__title { font-size: clamp(2.6rem, 4.6vw, 5.6rem); font-weight: 900; line-height: 0.98; letter-spacing: -0.025em; flex: 1; text-wrap: balance; }
.exitsign__arrow { font-size: clamp(4rem, 7.6vw, 9.4rem); }
.exitsign__plate { margin-top: 1.2vh; font-size: var(--t-m); }
.posts { display: flex; gap: 22vw; margin-right: 12vw; height: 18vh; }
.posts span { width: 1.1vw; height: 100%; background: linear-gradient(90deg, #4A535D, #A5AEB8 45%, #3B434C); border-radius: 2px; }

/* strikes */
.strikes { display: flex; flex-direction: column; gap: 0.3em; }
.strikes li { position: relative; font-size: var(--t-l); font-weight: 800; color: #93A0AE; width: fit-content; line-height: 1.15; }
.strikes li::after { content: ""; position: absolute; left: -0.1em; right: -0.1em; top: 52%; height: 0.14em; background: var(--stop); border-radius: 0.1em; transform-origin: left; transform: scaleX(var(--s, 1)); box-shadow: 0 0 12px rgba(215, 38, 30, 0.6); }
.fly { display: flex; align-items: center; gap: 2vw; }
.fly__icon { padding: 18px; }
.fly__icon svg { width: clamp(52px, 4.6vw, 88px); height: clamp(52px, 4.6vw, 88px); stroke: currentColor; fill: none; stroke-width: 1.8; }

/* q/a */
.qa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); width: 100%; }
.qa__item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25em; padding: 1em 1.1em 0.9em; font-size: var(--t-s); }
.qa__item b { font-size: var(--t-m); font-weight: 900; line-height: 1; }
.qa__item--win { --c: var(--green-hi); }

/* limits */
.limits { display: flex; align-items: center; gap: 3vw; }
.limit { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.limit p { font-size: var(--t-s); font-weight: 700; color: var(--muted); max-width: 14ch; text-align: center; }
.limits__eq { font-size: var(--t-xxl); font-weight: 900; color: var(--muted); }
.roundel {
  width: clamp(170px, 15vw, 290px); aspect-ratio: 1; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 clamp(16px, 1.45vw, 28px) var(--stop), inset 0 0 0 clamp(19px, 1.7vw, 32px) var(--paper), var(--shadow);
  display: grid; place-content: center; text-align: center;
}
.roundel b { font-size: clamp(4rem, 6.8vw, 8.4rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; padding-top: 0.1em; }
.roundel small { font-size: var(--t-s); font-weight: 800; }
.roundel--big { width: clamp(220px, 19vw, 360px); }
.roundel--big b { font-size: clamp(5rem, 8.8vw, 10.6rem); }

.howto .exitnum, .fork__node .exitnum { align-self: flex-start; }

/* split layouts */
.split { flex-direction: row; align-items: center; gap: 4vw; }
.split > * { flex: 1 1 0; min-width: 0; }
.split > .statement { flex: 1.2; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2vh; }
.chips--light .plate { font-size: var(--t-s); }
.warnblock { display: flex; flex-direction: column; align-items: flex-start; gap: 3.4vh; }
.warnblock__text { font-size: var(--t-s); line-height: 1.4; color: var(--muted); max-width: 32ch; }
.warnblock__text b { color: var(--warn); }
.diamond {
  --d: clamp(150px, 12vw, 230px);
  width: var(--d); aspect-ratio: 1;
  margin: calc(var(--d) * 0.2);
  transform: rotate(45deg);
  background: var(--warn); color: var(--ink);
  border-radius: 12%;
  box-shadow: inset 0 0 0 var(--ring) var(--warn), inset 0 0 0 var(--ring2) var(--ink), var(--shadow);
  display: grid; place-items: center;
  flex: none;
}
.diamond > span { transform: rotate(-45deg); display: grid; place-items: center; font-weight: 900; font-size: calc(var(--d) * 0.36); line-height: 1; }
.diamond svg { width: calc(var(--d) * 0.42); height: calc(var(--d) * 0.42); stroke: currentColor; fill: none; stroke-width: 2.2; }
.diamond--big { --d: clamp(200px, 17vw, 330px); }
.diamond--big > span { font-size: calc(var(--d) * 0.4); }

.note { display: flex; flex-direction: column; gap: 1.6vh; transform-origin: 50% 0; }
.note h3 { display: flex; align-items: center; gap: 0.4em; }

/* toll */
.split--budget { align-items: center; }
.toll { padding: clamp(22px, 2.2vw, 42px) clamp(26px, 2.6vw, 50px); transform-origin: 50% 0; flex: 1.05; }
.toll__head { display: flex; align-items: center; gap: 0.5em; font-weight: 800; font-size: var(--t-m); padding-bottom: 1vh; }
.toll__rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 2vw; padding: 1.4vh 0; box-shadow: 0 -2px 0 rgba(244, 241, 232, 0.4); }
.toll__rows dt { font-size: var(--t-s); font-weight: 600; }
.toll__rows dd { font-family: var(--ff-mono); font-weight: 700; font-size: var(--t-m); color: var(--warn); text-shadow: 0 0 10px rgba(255, 199, 44, 0.5); font-variant-numeric: tabular-nums; white-space: nowrap; }
.toll__rows .toll__total { box-shadow: 0 calc(-1 * var(--ring)) 0 var(--paper); margin-top: 0.6vh; }
.toll__total dt { font-weight: 900; font-size: var(--t-m); }
.toll__total dd { font-size: var(--t-l); }

/* checks */
.checks { display: flex; flex-direction: column; gap: 1.6vh; margin-top: 2.4vh; }
.checks li { display: flex; align-items: center; gap: 0.7em; font-size: var(--t-s); font-weight: 700; line-height: 1.25; }
.chk { flex: none; width: 1.9em; height: 1.9em; border-radius: 0.45em; background: var(--green-hi); display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--green-hi), inset 0 0 0 4px var(--paper); }
.chk svg { width: 60%; height: 60%; stroke: var(--paper); fill: none; stroke-width: 3; }
.checks--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2vh 3vw; width: 100%; margin-top: 0; }
.checks--grid li { font-size: var(--t-m); }

/* summary */
.arrived {
  display: inline-block; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: var(--t-m); color: #FF5A4E; padding: 0.35em 0.6em 0.2em;
  border: 0.14em solid currentColor; border-radius: 0.25em; transform: rotate(-4deg);
  text-shadow: none; mix-blend-mode: screen;
}

/* agelimit */
.agelimit { display: flex; align-items: center; gap: 2.4vw; flex: 1.6; }
.agelimit .roundel { flex: none; }
.agelimit .lede { font-size: var(--t-s); }

/* story pinned */
.frame--story { padding: 0; min-height: 100vh; display: block; }
.story { position: relative; height: 100vh; overflow: hidden; padding-top: 14vh; }
.story__title { position: absolute; left: 26vw; top: 12vh; z-index: 2; }
.story__track { position: absolute; top: 30vh; left: 26vw; display: flex; gap: 6vw; align-items: flex-start; will-change: transform; }
.kmpost { position: relative; width: clamp(260px, 21vw, 400px); flex: none; display: flex; flex-direction: column; }
.kmpost::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1vw; height: 40vh; margin-left: -0.5vw; background: linear-gradient(90deg, #3F4851, #9AA4AE 45%, #353C44); z-index: -1; }
.kmpost__km {
  font-weight: 900; font-size: var(--t-l); line-height: 1; letter-spacing: -0.02em;
  background: var(--paper); color: var(--ink); padding: 0.4em 0.45em 0.28em;
  border-radius: var(--r) var(--r) 0 0;
  box-shadow: inset 0 0 0 var(--ring) var(--paper), inset 0 0 0 var(--ring2) var(--ink);
}
.kmpost h3, .kmpost > p:last-child { background: var(--green); color: var(--paper); padding: 0 clamp(18px, 1.5vw, 28px); }
.kmpost h3 { font-size: var(--t-m); font-weight: 900; line-height: 1.05; padding-top: 0.8em; }
.kmpost > p:last-child { font-size: var(--t-s); line-height: 1.38; padding-top: 0.6em; padding-bottom: 1.2em; border-radius: 0 0 var(--r) var(--r); box-shadow: var(--shadow); color: #D4ECDE; }
.kmpost--gold .kmpost__km { background: var(--warn); box-shadow: inset 0 0 0 var(--ring) var(--warn), inset 0 0 0 var(--ring2) var(--ink); }
.kmpost--green .kmpost__km { background: #6EF0A6; box-shadow: inset 0 0 0 var(--ring) #6EF0A6, inset 0 0 0 var(--ring2) var(--ink); }
.kmpost--green h3, .kmpost--green > p:last-child { background: var(--brown); }


/* why it */
.whyit { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: auto auto; gap: var(--gap); width: 100%; }
.whyit > .sign { display: flex; flex-direction: column; gap: 1.4vh; transform-origin: 50% 0; }
.whyit__big { grid-row: span 2; justify-content: space-between; }
.whyit > .sign:nth-child(4) { grid-column: 2 / span 2; }
.whyit__nums { display: flex; flex-direction: column; gap: 1.4vh; }
.whyit__nums span { font-weight: 900; font-size: var(--t-l); line-height: 1; color: var(--warn); }
.whyit__nums small { display: block; font-size: var(--t-xs); font-weight: 700; color: #CBE6D6; letter-spacing: 0.04em; margin-bottom: 4px; }
:where(.sign--brown, .sign--blue) p { color: #F1E9DD; }
:where(.sign--white) p { color: #2B3036; }

/* stack */
.stack { display: flex; flex-direction: column; gap: 1.6vh; width: 100%; }
.stack__row { display: flex; align-items: center; gap: 1.2vw; font-weight: 900; font-size: var(--t-l); line-height: 1.05; padding: 0.55em 0.7em; transform-origin: 50% 0; }
.stack__row .sa { font-size: 1.1em; }
.stack__row:nth-child(2) { --c: var(--blue); margin-left: 4vw; }
.stack__row:nth-child(3) { --c: var(--brown); margin-left: 8vw; }

/* navigator */
.split--nav { align-items: center; }
.roles { display: flex; flex-direction: column; gap: 1.4vh; margin-top: 3vh; }
.roles li { font-size: var(--t-s); color: var(--muted); }
.roles b { color: var(--text); }
.navi {
  position: relative; flex: 1.05;
  background: #0E1217; border-radius: 22px; padding: 18px;
  box-shadow: inset 0 0 0 2px #2A313A, 0 0 0 10px #15191F, var(--shadow);
}
.navi__bar { display: flex; align-items: center; gap: 12px; background: #1A2028; border-radius: 12px; padding: 14px 16px; font-size: var(--t-s); }
.navi__q { color: #7D8896; white-space: nowrap; }
.navi__typed { color: var(--text); font-weight: 700; white-space: nowrap; overflow: hidden; }
.navi__caret { width: 2px; height: 1.1em; background: var(--warn); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.navi__map { width: 100%; height: auto; margin-top: 14px; background: #121821; border-radius: 12px; }
.navi__grid { stroke: #1E2732; stroke-width: 10; fill: none; }
.navi__route { stroke: #3D9BFF; stroke-width: 7; fill: none; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(61, 155, 255, 0.7)); }
.navi__from { fill: var(--paper); stroke: #3D9BFF; stroke-width: 4; }
.navi__to { fill: var(--stop); stroke: var(--paper); stroke-width: 4; }
.navi__eta { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: var(--t-xs); color: #95A1AF; }
.navi__eta b { color: var(--text); }
.navi__label { position: absolute; top: -12px; right: 18px; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; background: #2A313A; color: var(--muted); padding: 3px 8px 1px; border-radius: 6px; }

/* warnings */
.warns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3vw; width: 100%; }
.warn { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6vh; }
.warn .diamond { --d: clamp(110px, 8.4vw, 160px); margin: calc(var(--d) * 0.2) calc(var(--d) * 0.2) calc(var(--d) * 0.1); }
.warn h3 { font-size: var(--t-m); font-weight: 900; line-height: 1.08; }
.warn p { font-size: var(--t-s); line-height: 1.4; color: var(--muted); }

/* pathmap */
.pathmap { position: relative; width: 100%; }
.pathmap__svg { width: 100%; height: clamp(150px, 15vw, 290px); overflow: visible; }
.pathmap__base { fill: none; stroke: #2A3038; stroke-width: 34; stroke-linecap: round; }
.pathmap__draw { fill: none; stroke: var(--paper); stroke-width: 5; stroke-dasharray: 24 18; stroke-linecap: round; }
.pathmap__stops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2vw; margin-top: 2vh; }
.pathmap__stops li { font-size: var(--t-xs); line-height: 1.4; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.pathmap__stops b { font-size: var(--t-m); color: var(--text); line-height: 1.05; }
.pin { width: 22px; height: 22px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 4px var(--night), 0 0 16px rgba(255, 255, 255, 0.5); }
.pin--gold { background: var(--warn); }
.pin--blue { background: #3D9BFF; }
.pin--green { background: #2FE07F; }

/* fork */
.fork { position: relative; width: 100%; aspect-ratio: 1400 / 560; }
.fork__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fork__road { fill: none; stroke: #262C34; stroke-width: 46; stroke-linecap: round; }
.fork__draw { fill: none; stroke: var(--warn); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 26 18; }
.fork__node { position: absolute; display: flex; flex-direction: column; gap: 6px; width: 24%; background: var(--green); border-radius: var(--r); padding: 1.1vw 1.3vw 1vw; box-shadow: inset 0 0 0 var(--ring) var(--green), inset 0 0 0 var(--ring2) var(--paper), var(--shadow); transform-origin: 50% 0; }
.fork__node .exitnum { font-size: var(--t-s); }
.fork__node b { font-size: var(--t-s); line-height: 1.12; font-weight: 900; }
.fork__node small { font-size: var(--t-xs); line-height: 1.3; color: #D4ECDE; }
.fork__node--1 { left: 0; top: 54%; }
.fork__node--2 { left: 42%; top: -6%; background: var(--blue); box-shadow: inset 0 0 0 var(--ring) var(--blue), inset 0 0 0 var(--ring2) var(--paper), var(--shadow); }
.fork__node--3 { left: 42%; top: 82%; background: var(--brown); box-shadow: inset 0 0 0 var(--ring) var(--brown), inset 0 0 0 var(--ring2) var(--paper), var(--shadow); }
.fork__node--4 { right: 0; top: 52%; background: var(--green-hi); }

/* lane table */
.lanesign { width: 100%; padding: clamp(14px, 1.2vw, 24px) clamp(18px, 1.6vw, 30px); transform-origin: 50% 0; }
.lanesign table { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.lanesign th, .lanesign td { text-align: left; padding: 1.15vh 1vw; vertical-align: top; line-height: 1.25; }
.lanesign thead th { padding-bottom: 1.6vh; }
.lanesign tbody th { font-weight: 900; color: #CBE6D6; width: 17%; }
.lanesign tbody tr { box-shadow: 0 -2px 0 rgba(244, 241, 232, 0.28); }
.lanesign td:last-child { font-weight: 800; color: var(--paper); background: rgba(255, 255, 255, 0.06); }
.lanehead { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 900; font-size: var(--t-s); background: var(--paper); color: var(--ink); padding: 0.4em 0.7em 0.3em; border-radius: 8px; }
.lanehead .sa { font-size: 1.1em; }
.lanehead--1 { background: var(--warn); }
.lanehead--2 { background: #8DB8FF; }
.lanehead--3 { background: #6EF0A6; }

/* then/now */
.thennow { flex-direction: row; align-items: stretch; gap: 2vw; }
.thennow > .sign { flex: 1; display: flex; flex-direction: column; gap: 1.6vh; transform-origin: 50% 0; }
.thennow__year { font-weight: 900; font-size: var(--t-l); line-height: 1; }
.thennow ul { display: flex; flex-direction: column; gap: 1vh; }
.thennow li { padding-left: 1em; position: relative; }
.thennow li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.45em; height: 0.45em; border-radius: 2px; background: currentColor; }
.thennow__arrow { font-size: clamp(3rem, 5vw, 6rem); align-self: center; color: var(--warn); flex: none; }

/* course sign */
.coursesign { display: flex; flex-direction: column; align-items: flex-start; width: 100%; transform-origin: 50% 0; }
.coursesign__new { border-radius: 10px 10px 0 0; margin-left: 3vw; margin-bottom: -4px; text-transform: uppercase; letter-spacing: 0.05em; position: relative; z-index: 2; }
.coursesign__main { width: 100%; display: flex; flex-direction: column; gap: 2vh; padding: clamp(30px, 3.2vw, 62px) clamp(34px, 3.4vw, 66px); }
.coursesign__by { font-weight: 800; font-size: var(--t-s); color: #CBE6D6; }
.coursesign__title { font-size: clamp(3rem, 6.4vw, 7.5rem); font-weight: 900; line-height: 0.92; letter-spacing: -0.035em; }
.coursesign__text { font-size: var(--t-m); line-height: 1.25; max-width: 34ch; color: #E4F1E9; }
.coursesign__plates { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1vh; }

/* program */
.program { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; width: 100%; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.seg { --c: var(--green); background: var(--c); padding: clamp(18px, 1.6vw, 30px); display: flex; flex-direction: column; gap: 1.6vh; transform-origin: 50% 0; }
.seg + .seg { box-shadow: inset var(--ring) 0 0 -1px var(--paper); }
.seg--gold { --c: #9A6B00; }
.seg--blue { --c: var(--blue); }
.seg--brown { --c: var(--brown); }
.seg h3 { font-size: var(--t-s); font-weight: 900; line-height: 1.15; display: flex; flex-direction: column; gap: 8px; }
.seg__n { font-family: var(--ff-mono); font-size: var(--t-xs); background: var(--paper); color: var(--ink); width: fit-content; padding: 2px 8px 0; border-radius: 6px; }
.seg ol { display: flex; flex-direction: column; gap: 1vh; counter-reset: s var(--start, 0); }
.seg li { font-size: var(--t-xs); line-height: 1.35; color: #F1EFE8; }

/* prices */
.prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); width: 100%; align-items: stretch; }
.priceboard { display: flex; flex-direction: column; gap: 1.8vh; transform-origin: 50% 0; }
.priceboard__flag { position: absolute; top: clamp(16px, 1.4vw, 26px); right: clamp(16px, 1.4vw, 26px); font-size: var(--t-xs); }
.priceboard__price { display: flex; align-items: baseline; gap: 0.25em; font-weight: 900; font-size: var(--t-l); line-height: 1; }
.priceboard__price .led { font-family: var(--ff-mono); font-weight: 700; font-size: clamp(3rem, 5vw, 6rem); color: var(--warn); text-shadow: 0 0 1.2vw rgba(255, 199, 44, 0.55); background: #07080A; padding: 0.12em 0.3em 0; border-radius: 10px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.priceboard__price small { font-size: var(--t-xs); font-weight: 700; opacity: 0.85; }
.priceboard ul { display: flex; flex-direction: column; gap: 0.9vh; flex: 1; }
.priceboard li { padding-left: 1.4em; position: relative; }
.priceboard li::before { content: ""; position: absolute; left: 0.15em; top: 0.18em; width: 0.42em; height: 0.75em; border: solid var(--warn); border-width: 0 0.17em 0.17em 0; transform: rotate(40deg); }
.btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 900; font-size: var(--t-s); text-decoration: none;
  background: var(--paper); color: var(--ink); padding: 0.65em 1.1em 0.5em; border-radius: 10px;
  box-shadow: 0 0.4vw 0 #9AA2A8, 0 0.8vw 1.6vw rgba(0, 0, 0, 0.4);
  transition: translate 0.2s cubic-bezier(.2, .8, .2, 1), box-shadow 0.2s;
}
.btn:hover { translate: 0 -3px; box-shadow: 0 calc(0.4vw + 3px) 0 #9AA2A8, 0 1.2vw 2vw rgba(0, 0, 0, 0.45); }
.btn--yellow { background: var(--warn); box-shadow: 0 0.4vw 0 #A67F10, 0 0.8vw 1.6vw rgba(0, 0, 0, 0.4); }
.btn--yellow:hover { box-shadow: 0 calc(0.4vw + 3px) 0 #A67F10, 0 1.2vw 2vw rgba(0, 0, 0, 0.45); }

/* compare2 */
.compare2 { display: flex; gap: 2vw; align-items: stretch; }
.compare2__item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 1.1em 1.4em 1em; font-size: var(--t-s); }
.compare2__item .ic { width: 2.2em; height: 2.2em; }
.compare2__item b { font-size: var(--t-xl); font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.compare2 .plate b { text-decoration: line-through; text-decoration-color: var(--stop); text-decoration-thickness: 0.08em; }

/* howto */
.howto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); width: 100%; }
.howto li { display: flex; flex-direction: column; gap: 1vh; transform-origin: 50% 0; }
.howto b { font-size: var(--t-m); line-height: 1.1; margin-top: 1vh; }
.howto a { font-weight: 900; font-size: var(--t-s); color: var(--warn); }
.howto span:not(.exitnum):not(.glint) { font-size: var(--t-s); font-weight: 700; }
.howto small { font-size: var(--t-xs); opacity: 0.85; }
.howto .exitnum { font-size: var(--t-s); }

/* telegram */
.tgsign { display: flex; align-items: center; gap: 2.4vw; padding: clamp(28px, 3vw, 58px) clamp(32px, 3.4vw, 66px); width: 100%; transform-origin: 50% 0; }
.tgsign__icon { flex: none; width: clamp(110px, 9vw, 170px); aspect-ratio: 1; border-radius: 50%; background: var(--paper); color: var(--blue); display: grid; place-items: center; }
.tgsign__icon svg { width: 52%; height: 52%; stroke: currentColor; fill: none; stroke-width: 2; transform: translateX(-4%); }
.tgsign__label { font-weight: 800; font-size: var(--t-s); color: #DCE7F7; }
.tgsign__handle { font-size: clamp(3rem, 7vw, 8.6rem); font-weight: 900; line-height: 0.95; letter-spacing: -0.035em; }
.tgsign__handle a { text-decoration: none; }
.tgsign__handle a:hover { text-decoration: underline; }
.tgsign__sub { font-weight: 800; font-size: var(--t-m); color: var(--warn); }

/* welcome */
.welcome { display: flex; flex-direction: column; gap: 1.2vh; padding: clamp(26px, 2.8vw, 54px) clamp(34px, 3.6vw, 70px); transform-origin: 50% 0; }
.welcome__ar { font-family: var(--ff-ar); font-weight: 800; font-size: var(--t-m); line-height: 1.5; }
.welcome__ru { font-weight: 900; font-size: var(--t-xl); line-height: 0.98; letter-spacing: -0.025em; }

/* end */
.frame--end { min-height: 105vh; }
.arrived { color: #FFF4D6; border-color: #FFF4D6; mix-blend-mode: normal; background: rgba(10, 12, 18, 0.25); }
.endsigns { display: grid; grid-template-columns: 1fr 1.15fr 1.15fr; gap: var(--gap); width: 100%; }
.endsign { display: flex; flex-direction: column; gap: 1vh; text-decoration: none; transform-origin: 50% 0; transition: translate 0.25s cubic-bezier(.2, .8, .2, 1); }
.endsign:hover { translate: 0 -6px; }
.endsign .ic { width: 2.6em; height: 2.6em; font-size: var(--t-s); }
.endsign span { font-size: var(--t-s); font-weight: 700; opacity: 0.92; }
.endsign b { font-size: clamp(1.3rem, 2vw, 2.4rem); font-weight: 900; line-height: 1.05; overflow-wrap: anywhere; }
.endsign:first-child b { font-size: clamp(1.6rem, 2.6vw, 3.1rem); overflow-wrap: normal; white-space: nowrap; }

/* shake */
.is-shaking main { animation: shake 0.42s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes shake {
  10%, 90% { transform: translate3d(-2px, 1px, 0); }
  20%, 80% { transform: translate3d(5px, -2px, 0); }
  30%, 50%, 70% { transform: translate3d(-9px, 3px, 0); }
  40%, 60% { transform: translate3d(9px, -3px, 0); }
}
.flash { position: fixed; inset: 0; z-index: 30; pointer-events: none; background: radial-gradient(circle at 40% 50%, rgba(215, 38, 30, 0.35), transparent 60%); opacity: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .frame__inner { width: 88vw; min-width: 0; margin: 0 6vw; }
  .hero__signs { flex-direction: column; align-items: center; }
  .hero__main { width: 88vw; }
  .hero__side { display: none; }
  .services--4, .services--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services--5 .service:last-child { grid-column: span 2; }
  .route { display: none; }
  .story__title, .story__track { left: 6vw; }
  .exitsign { width: 100%; }
}
@media (max-width: 760px) {
  :root { --gap: 16px; }
  .frame { padding: 12vh 0 10vh; }
  .hud-dash .gauge { display: none; }
  .odo { min-width: 0; padding: 6px 12px; }
  .odo__ar { display: none; }
  .odo__name { font-size: 1rem; }
  .odo__drums { font-size: 1.3rem; }
  .hud-logo { font-size: 0.9rem; }
  .keys-hint { display: none; }
  .hero { padding: 13vh 5vw 6vh; }
  .hero__dest { flex-wrap: wrap; }
  .hero__km { margin-left: 0; }
  .gantry__post { display: none; }
  .split, .stop, .act, .thennow { flex-direction: column; align-items: flex-start; }
  .services, .services--4, .services--5 { grid-template-columns: 1fr; }
  .services--5 .service:last-child { grid-column: auto; }
  .service + .service { box-shadow: inset 0 var(--ring) 0 -1px rgba(244, 241, 232, 0.9); }
  .service { flex-direction: row; align-items: center; }
  .works, .qa, .warns, .howto, .prices, .endsigns, .checks--grid, .pathmap__stops { grid-template-columns: 1fr; }
  .whyit { grid-template-columns: 1fr; }
  .whyit__big { grid-row: auto; }
  .whyit > .sign:nth-child(4) { grid-column: auto; }
  .program { grid-template-columns: 1fr 1fr; }
  .vms__line { white-space: normal; font-size: 1.35rem; }
  .vms--alert .vms__line { font-size: 1.8rem; }
  .limits { flex-direction: column; }
  .stack__row:nth-child(n) { margin-left: 0; }
  .fork { aspect-ratio: auto; display: flex; flex-direction: column; gap: 14px; }
  .fork__svg { display: none; }
  .fork__node { position: static; width: 100%; padding: 16px; }
  .lanesign { overflow-x: auto; }
  .lanesign table { min-width: 640px; }
  .posts { display: none; }
  .exitsign__main { gap: 4vw; }
  .story__title { top: 9vh; }
  .story__track { top: 26vh; gap: 10vw; }
  .kmpost { width: 74vw; }
  .tgsign { flex-direction: column; align-items: flex-start; }
  .compare2 { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* whyit: narrow signs need a smaller sign legend */
.whyit > .sign:not(.whyit__big) h3 { font-size: clamp(1.3rem, 1.85vw, 2.25rem); }

/* small type standing directly on the road gets a night-legibility halo */
.warn p, .warn h3, .pathmap__stops li, .roles li, .checks li, .limit p, .warnblock__text, .strikes li, .story__title {
  text-shadow: 0 2px 4px rgba(4, 6, 12, 0.9), 0 0 22px rgba(4, 6, 12, 0.85);
}
.pathmap__stops li { font-size: var(--t-s); }
.priceboard__flag { position: static; align-self: flex-start; margin-bottom: -0.6vh; }
.checks--grid li { font-size: clamp(1.25rem, 1.9vw, 2.3rem); }
.priceboard ul { gap: 0.6vh; }

/* nothing may widen the layout viewport (scaled hero, glints, swinging signs) */
html, body { overflow-x: clip; }
main, .frame { overflow-x: clip; }
.frame { overflow-y: visible; }

.agelimit .statement { font-size: var(--t-m); }


/* ---------- review fix batch ---------- */
.sep { display: inline-block; margin: 0 0.42em; }
.hnum {
  display: inline-grid; place-items: center; vertical-align: 0.12em;
  width: 1.15em; height: 1.15em; font-size: 0.62em; padding-top: 0.08em;
  background: var(--paper); color: var(--green); border-radius: 0.18em;
  text-shadow: none; margin-right: 0.15em;
}
.distsign { width: 100%; padding: clamp(8px, 0.8vw, 16px) clamp(26px, 2.6vw, 50px); }
.distsign__row { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: clamp(14px, 1.4vw, 28px); padding: clamp(14px, 1.4vw, 26px) 0; }
.distsign__row + .distsign__row { box-shadow: 0 calc(-1 * var(--ring) / 2) 0 0 var(--paper); }
.distsign__row .ic { width: clamp(40px, 3.2vw, 62px); height: clamp(40px, 3.2vw, 62px); stroke-width: 2.4; }
.distsign__row p { font-weight: 900; font-size: var(--t-l); line-height: 1; }
.distsign__row b { justify-self: end; text-align: right; font-weight: 700; font-size: var(--t-s); color: #CBE6D6; max-width: 22ch; }
.exits--reasons .exits__dest { font-size: var(--t-m); }
.exits--reasons .exitnum { background: var(--paper); color: var(--green); font-size: var(--t-s); }
.service { align-items: flex-start; }

.zone { width: min(100%, 1180px); padding: clamp(24px, 2.4vw, 46px) clamp(28px, 2.8vw, 54px); display: flex; flex-direction: column; gap: 1.4vh; transform-origin: 50% 0; }
.zone__head { display: flex; align-items: center; gap: 0.6em; font-weight: 800; font-size: var(--t-s); color: #CBE6D6; }
.zone__end { width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--paper); position: relative; overflow: hidden; flex: none; }
.zone__end::after { content: ""; position: absolute; left: -20%; right: -20%; top: 50%; height: 0.32em; margin-top: -0.16em; background: repeating-linear-gradient(90deg, #4A4F55 0 0.18em, transparent 0.18em 0.32em); transform: rotate(-45deg); }
.zone__title { font-size: var(--t-xl); font-weight: 900; line-height: 1; letter-spacing: -0.025em; }
.zone__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3vw; margin-top: 1vh; }
.zone__rows { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.zone__rows > div { display: flex; flex-direction: column; gap: 0.3vh; padding: 1.4vh 0 0.4vh; box-shadow: 0 -2px 0 rgba(244, 241, 232, 0.35); }
.zone__rows dt { font-size: var(--t-s); font-weight: 600; opacity: 0.9; }
.zone__rows dd { font-size: var(--t-m); font-weight: 900; line-height: 1.05; }
.zone__warn dd { color: var(--warn); }

.incomesign { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6vh; padding: clamp(26px, 2.6vw, 50px) clamp(30px, 3vw, 58px); transform-origin: 50% 0; }
.incomesign__label { font-weight: 800; font-size: var(--t-m); color: #E4F1E9; }
.incomesign__led {
  font-family: var(--ff-mono); font-weight: 700; font-size: clamp(4rem, 9vw, 10.6rem); line-height: 1;
  color: var(--led); background: #07080A; padding: 0.12em 0.32em 0.04em; border-radius: 14px;
  text-shadow: 0 0 2vw rgba(255, 176, 0, 0.55); font-variant-numeric: tabular-nums; white-space: nowrap;
}

.arrived {
  display: inline-flex; align-items: center; gap: 0.6em;
  transform: none; border: 0; mix-blend-mode: normal;
  font-size: var(--t-m); font-weight: 800; text-transform: none; letter-spacing: 0; color: var(--paper);
  padding: 0.6em 0.9em; white-space: nowrap;
}
.arrived .ic { width: 1.3em; height: 1.3em; }
.arrived b { font-weight: 900; margin-left: 0.4em; color: var(--warn); }
.exitsign__ar { font-family: var(--ff-ar); font-weight: 800; margin-left: 0.7em; font-size: 0.85em; }

.lede--plate {
  background: rgba(8, 11, 17, 0.78); color: #D5DDE6; text-shadow: none;
  padding: 0.6em 0.85em 0.5em; border-radius: 12px;
  box-shadow: inset 0 0 0 2px rgba(244, 241, 232, 0.14), 0 0.6vw 1.6vw rgba(0, 0, 0, 0.35);
  max-width: 40ch;
}
.lede a { overflow-wrap: anywhere; }
.act__go { text-shadow: none; }

@media (max-width: 760px) {
  .frame { padding-top: 14vh; }
  .zone__rows { grid-template-columns: 1fr; }
  .distsign__row { grid-template-columns: auto 1fr; }
  .distsign__row b { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .lanesign { overflow: visible; padding: 14px; }
  .lanesign table { min-width: 0; }
  .lanesign thead { display: none; }
  .lanesign tbody tr { display: block; padding: 12px 0; }
  .lanesign tbody th { display: block; width: auto; padding: 0 0 6px; font-size: 1.1rem; }
  .lanesign td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
  .lanesign td::before { content: attr(data-label); font-weight: 700; color: #CBE6D6; flex: none; }
  .lanesign td:last-child { background: none; }
  .incomesign__led { font-size: 3.2rem; }
}

/* ---------- review fix batch 2 ---------- */
.sep { display: inline-block; width: 0.26em; height: 0.26em; border-radius: 50%; background: currentColor; margin: 0 0.5em; vertical-align: 0.22em; overflow: hidden; text-indent: 2em; white-space: nowrap; }
.zonewrap { display: flex; flex-direction: column; align-items: flex-start; width: min(100%, 1180px); transform-origin: 50% 0; }
.zone__tab { font-weight: 800; font-size: var(--t-s); border-radius: var(--r) var(--r) 0 0; margin-left: 3vw; margin-bottom: calc(-1 * var(--ring2)); padding-bottom: calc(var(--ring2) + 0.4vw); position: relative; z-index: 0; }
.zonewrap .zone { width: 100%; position: relative; z-index: 1; }
.pict { width: clamp(64px, 5vw, 96px); height: clamp(64px, 5vw, 96px); stroke-width: 3.2; }
.service b { font-size: clamp(1.25rem, 1.75vw, 2.1rem); }
.warn p, .pathmap__stops li { background: rgba(8, 11, 17, 0.72); padding: 0.55em 0.75em 0.45em; border-radius: 10px; text-shadow: none; }
.statement--plate { background: rgba(8, 11, 17, 0.72); padding: 0.35em 0.5em 0.3em; border-radius: 14px; text-shadow: none; }
#pricing .priceboard li { font-size: var(--t-xs); }
#pricing .priceboard { gap: 1.3vh; }
.route { transition: opacity 0.4s; }
.in-story .route { opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .arrived { white-space: normal; font-size: 1.3rem; max-width: 100%; }
}