/* Taxi Filzmaier — pilot site (VCSLV draft)
   Layers: fonts · tokens · base · header/menu · hero (crest, map, console) · sections · ticket · note/dock · screens · type system */

@font-face { font-family: 'Hanken Grotesk'; src: url(../fonts/hanken-grotesk.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'DM Serif Display'; src: url(../fonts/dm-serif-display.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Serif Display'; src: url(../fonts/dm-serif-display-italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --night: #0f1216; --night-2: #151a20; --night-3: #1c232b; --night-4: #262e38;
  --cream: #efeae2; --mute: #a39d92; --line-d: rgba(239, 234, 226, .13);
  --paper: #f2efe9; --paper-2: #e8e3da; --ink: #16191d; --ink-2: #555a61; --line-l: rgba(22, 25, 29, .13);
  --mist: #e6e9ec; --mist-2: #d6dbe0;
  --amber: #f2a91b; --amber-2: #e38c0c; --amber-deep: #a86300; --amber-soft: rgba(242, 169, 27, .14);
  --serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --r: 3px;
  --hdr-h: 68px;
  --gut: clamp(20px, 4.4vw, 72px);
  --ease: cubic-bezier(.22, .8, .24, 1);
}
@media (max-width: 899px) { :root { --hdr-h: 58px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--night); }
body { margin: 0; background: var(--night); color: var(--cream); font: 400 15px/1.6 var(--sans); font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
b, strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--amber); color: var(--ink); padding: 10px 14px; border-radius: var(--r); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gut); }
svg use { pointer-events: none; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--r); border: 1px solid transparent;
  font: 600 14px/1 var(--sans); letter-spacing: .04em; text-decoration: none; overflow: hidden; isolation: isolate; transition: transform .3s var(--ease), background-color .3s, color .3s; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease); }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.btn:hover::after { transform: scaleX(1); }
.btn:hover svg { transform: translateX(3px); }
.btn--amber { background: var(--amber); color: #15130f; }
.btn--amber::after { background: #ffc24a; }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink::after { background: #2c3138; }
.btn--dark { background: var(--night); color: var(--cream); }
.btn--dark::after { background: var(--night-4); }
.btn--line { border-color: currentColor; }
.btn--line::after { background: currentColor; opacity: .14; }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--hdr-h); display: flex; align-items: center; gap: 28px; padding: 0 var(--gut);
  transition: transform .45s var(--ease), background-color .35s; }
.hdr::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--line-d); opacity: 0; transition: opacity .35s; }
.hdr.is-solid { background: rgba(15, 18, 22, .94); }
.hdr.is-solid::after { opacity: 1; }
.hdr.is-hidden { transform: translateY(-100%); }
.hdr__brand { display: block; width: 168px; color: var(--cream); transition: opacity .4s, transform .5s var(--ease); }
.hdr.has-crest .hdr__brand { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.wm { width: 100%; height: auto; overflow: visible; }
.hdr__nav { display: flex; gap: 30px; margin-left: auto; }
.hdr__nav a { font: 500 14px/1 var(--sans); letter-spacing: .02em; text-decoration: none; color: rgba(239, 234, 226, .82); padding: 10px 0; position: relative; }
.hdr__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.hdr__nav a:hover { color: var(--cream); }
.hdr__nav a:hover::after { transform: scaleX(1); }
.hdr__call { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px; border: 1px solid rgba(242, 169, 27, .6); border-radius: var(--r); color: var(--amber); text-decoration: none;
  font: 600 14px/1 var(--sans); letter-spacing: .02em; font-variant-numeric: tabular-nums; transition: background-color .3s; }
.hdr__call:hover { background: var(--amber-soft); }
.hdr__call svg { width: 17px; height: 17px; }
.hdr__menu { display: none; width: 44px; height: 44px; position: relative; margin-right: -10px; }
.hdr__menu i { position: absolute; left: 12px; right: 12px; height: 1.6px; background: var(--cream); transition: transform .35s var(--ease); }
.hdr__menu i:first-child { top: 18px; } .hdr__menu i:last-child { top: 25px; }
.hdr__menu[aria-expanded="true"] i:first-child { transform: translateY(3.5px) rotate(45deg); }
.hdr__menu[aria-expanded="true"] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
@media (max-width: 1099px) { .hdr__nav { display: none; } .hdr__call { margin-left: auto; } }
@media (max-width: 899px) {
  .hdr__brand { width: 138px; }
  .hdr__call { width: 44px; padding: 0; justify-content: center; border-color: rgba(242, 169, 27, .5); }
  .hdr__call span { display: none; }
  .hdr__menu { display: block; }
  .hdr { gap: 12px; }
}
.menu { position: fixed; inset: 0; z-index: 39; background: rgba(15, 18, 22, .97); padding: calc(var(--hdr-h) + 28px) var(--gut) 40px; display: flex; flex-direction: column; gap: 28px; }
.menu[hidden] { display: none; }
.menu__nav { display: flex; flex-direction: column; }
.menu__nav a { font: 400 clamp(1.7rem, 7.4vw, 2.2rem)/1.25 var(--serif); text-decoration: none; padding: 9px 0; border-bottom: 1px solid var(--line-d); }
.menu__call { display: inline-flex; align-items: center; gap: 10px; color: var(--amber); font: 600 17px/1 var(--sans); text-decoration: none; }
.menu__call svg { width: 20px; height: 20px; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(440px, 39%) 1fr; overflow: hidden; overflow-anchor: none; background: var(--night); isolation: isolate; }
.hero__map { position: absolute; inset: 0; z-index: -2; }
.map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__relief { opacity: .95; }
.map__lakes { fill: #0a0d11; stroke: rgba(150, 175, 200, .18); stroke-width: calc(var(--k, 1) * .9); }
.map__rivers { fill: none; stroke: rgba(120, 150, 180, .16); stroke-width: calc(var(--k, 1) * .9); stroke-linecap: round; stroke-linejoin: round; }
.map__borders { fill: none; stroke: rgba(239, 234, 226, .22); stroke-width: calc(var(--k, 1) * .9); stroke-dasharray: calc(var(--k, 1) * 5) calc(var(--k, 1) * 4); stroke-linejoin: round; }
.map__case { fill: none; stroke: rgba(10, 12, 15, .7); stroke-width: calc(var(--k, 1) * 5); stroke-linecap: round; stroke-linejoin: round; }
.map__line { fill: none; stroke: var(--amber); stroke-opacity: .55; stroke-width: calc(var(--k, 1) * 1.7); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-opacity .5s, stroke .5s; }
.js .map__line { stroke-dashoffset: 1; }
.map.has-pick .map__line { stroke-opacity: .2; stroke: #c9c2b5; }
.map__hi { fill: none; stroke: var(--amber); stroke-width: calc(var(--k, 1) * 3.2); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; filter: drop-shadow(0 0 calc(var(--k, 1) * 4) rgba(242, 169, 27, .55)); }
.map__car { fill: #fff6df; r: calc(var(--k, 1) * 3.6); opacity: 0; filter: drop-shadow(0 0 calc(var(--k, 1) * 5) rgba(255, 200, 80, .9)); }
.map__pins { position: absolute; inset: 0; pointer-events: none; }
.pin { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 7px; pointer-events: auto; white-space: nowrap; transform: translate(-7px, -50%); }
.pin i { width: 14px; height: 14px; border-radius: 50%; background: var(--night); border: 2px solid rgba(239, 234, 226, .75); flex: none; transition: border-color .3s, background-color .3s, transform .3s var(--ease); }
.pin b { font: 700 11.5px/1 var(--sans); letter-spacing: .12em; color: var(--cream); }
.pin small { font: 500 11.5px/1 var(--sans); color: var(--mute); letter-spacing: .02em; }
.pin--l { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), -50%); }
.pin--b { flex-direction: column; gap: 5px; transform: translate(-50%, -7px); }
.pin:hover i, .pin.is-on i { border-color: var(--amber); background: var(--amber); transform: scale(1.12); }
.pin.is-on b { color: var(--amber); }
.pin--home { pointer-events: none; transform: translate(-11px, -50%); }
.pin--home i { width: 22px; height: 22px; border: 2px solid var(--amber); background: radial-gradient(circle, var(--amber) 0 4px, var(--night) 5px); }
.pin--home b { font: 400 19px/1 var(--serif); letter-spacing: 0; text-transform: none; }
.pin--home small { display: block; margin-top: 3px; }
.pin--home span { display: block; }
.pin--train i { border-radius: 3px; }
.pin--dot b, .pin--dot small { display: none; }
.hero__band { display: none; }
.show-s { display: none; }
@media (max-width: 719px) { .hide-s { display: none; } .show-s { display: inline; } }
@media (max-width: 999px) { .hero__band { display: block; flex: none; } }
.hero__shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(15, 18, 22, .94) 0%, rgba(15, 18, 22, .86) 28%, rgba(15, 18, 22, .4) 38%, rgba(15, 18, 22, 0) 45%),
              linear-gradient(180deg, rgba(15, 18, 22, .65) 0%, rgba(15, 18, 22, 0) 22%, rgba(15, 18, 22, 0) 74%, rgba(15, 18, 22, .9) 100%); }
.hero__in { position: relative; display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 3.4svh, 40px); padding: calc(var(--hdr-h) + clamp(12px, 3svh, 36px)) 0 clamp(20px, 4svh, 48px) var(--gut); }

/* crest = rebuilt wordmark */
.crest { color: var(--cream); }
.crest__club { margin: 0 0 clamp(10px, 1.8svh, 18px); font: 600 11.5px/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--amber); }
.crest__mark { width: clamp(300px, 27vw, 450px); height: auto; overflow: visible; }
.crest__ext { fill: #8f5404; }
.crest__draw { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.js .crest__draw { stroke-dashoffset: 1; }
.crest__since { display: flex; align-items: center; gap: 14px; margin: clamp(10px, 1.8svh, 18px) 0 0; font: 500 13px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(239, 234, 226, .78); }
.crest__since i { height: 1px; width: 36px; background: rgba(239, 234, 226, .4); transform-origin: left; }
.crest__since i:last-child { flex: 1; max-width: 120px; }
.js .crest__club, .js .crest__since, .js .ride, .js .map__pins .pin, .js .map__relief, .js .hdr { opacity: 0; }
.js .crest__taxi, .js .crest__filz, .js .crest__checks { opacity: 0; }
.no-anim .crest__draw, .is-static .crest__draw { stroke-dashoffset: 0 !important; }
.no-anim .map__line, .is-static .map__line { stroke-dashoffset: 0 !important; }
.no-anim .crest__club, .no-anim .crest__since, .no-anim .ride, .no-anim .map__pins .pin, .no-anim .map__relief, .no-anim .hdr,
.is-static .crest__club, .is-static .crest__since, .is-static .ride, .is-static .map__pins .pin, .is-static .map__relief, .is-static .hdr { opacity: 1 !important; }
.no-anim .crest__taxi, .is-static .crest__taxi, .no-anim .crest__filz, .is-static .crest__filz, .no-anim .crest__checks, .is-static .crest__checks { opacity: 1 !important; }

/* console */
.ride { width: min(100%, 540px); background: rgba(16, 20, 25, .9); border: 1px solid var(--line-d); border-radius: 4px; padding: 18px 20px 14px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.ride__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ride__title { font: 400 21px/1.1 var(--serif); }
.lang { display: inline-flex; border: 1px solid var(--line-d); border-radius: var(--r); padding: 2px; }
.lang button { min-width: 38px; height: 28px; font: 600 11.5px/1 var(--sans); letter-spacing: .14em; color: var(--mute); border-radius: 2px; transition: background-color .3s, color .3s; }
.lang button[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
.lang button:not([aria-pressed="true"]):hover { color: var(--cream); background: rgba(239, 234, 226, .08); }
.ride__from { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.ride__from legend { padding: 0; margin-bottom: 7px; }
.chips { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.chip { position: relative; height: 44px; border: 1px solid rgba(239, 234, 226, .2); border-radius: var(--r); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font: 700 13px/1 var(--sans); letter-spacing: .08em; transition: background-color .3s, border-color .3s, color .3s; }
.chip svg { width: 13px; height: 13px; }
.chip:hover { border-color: rgba(242, 169, 27, .7); background: var(--amber-soft); }
.chip[aria-checked="true"] { background: var(--amber); border-color: var(--amber); color: #15130f; }
.ride__row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.field { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dd { height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 12px; border: 1px solid rgba(239, 234, 226, .2); border-radius: var(--r); font: 600 15px/1 var(--sans); text-align: left; transition: border-color .3s, background-color .3s; }
.dd span { white-space: nowrap; overflow: hidden; }
.dd svg { width: 16px; height: 16px; flex: none; transition: transform .3s var(--ease); }
.dd:hover { border-color: rgba(242, 169, 27, .7); }
.dd[aria-expanded="true"] svg { transform: rotate(180deg); }
.dd__list { position: absolute; left: 0; right: -40px; top: calc(100% + 6px); z-index: 5; list-style: none; margin: 0; padding: 6px; background: #1a2027; border: 1px solid var(--line-d); border-radius: 4px; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .7); }
.dd__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px; border-radius: 2px; font: 500 15px/1.1 var(--sans); cursor: pointer; }
.dd__list li small { font: 500 12px/1 var(--sans); color: var(--mute); font-variant-numeric: tabular-nums; }
.dd__list li:hover, .dd__list li.is-hover { background: rgba(239, 234, 226, .07); }
.dd__list li[aria-selected="true"] { color: var(--amber); }
.step { height: 44px; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; border: 1px solid rgba(239, 234, 226, .2); border-radius: var(--r); }
.step button { height: 100%; font: 400 20px/1 var(--sans); color: var(--cream); transition: background-color .25s, color .25s; }
.step button:hover { background: var(--amber-soft); color: var(--amber); }
.step button:disabled { opacity: .3; pointer-events: none; }
.step output { text-align: center; font: 600 16px/1 var(--sans); font-variant-numeric: tabular-nums; }
.sw { height: 44px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid rgba(239, 234, 226, .2); border-radius: var(--r); font: 500 13px/1 var(--sans); white-space: nowrap; transition: border-color .3s, background-color .3s; }
.sw i { position: relative; width: 30px; height: 18px; border-radius: 9px; background: rgba(239, 234, 226, .2); flex: none; transition: background-color .3s; }
.sw i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--cream); transition: transform .35s var(--ease); }
.sw svg { width: 15px; height: 15px; color: var(--mute); flex: none; transition: color .3s; }
.sw:hover { border-color: rgba(242, 169, 27, .7); }
.sw[aria-checked="true"] { border-color: rgba(242, 169, 27, .7); background: var(--amber-soft); }
.sw[aria-checked="true"] i { background: var(--amber); }
.sw[aria-checked="true"] i::after { transform: translateX(12px); background: #15130f; }
.sw[aria-checked="true"] svg { color: var(--amber); }
.ride__out { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-d); }
.ride__price { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ride__price > .cap { white-space: nowrap; }
.ride__price strong { font: 400 clamp(2.4rem, 4.6svh, 3rem)/1 var(--serif); color: var(--cream); font-variant-numeric: tabular-nums; }
.ride__price small { font: 400 13px/1.35 var(--sans); color: var(--mute); white-space: nowrap; }
.ride__price .ride__leg { display: flex; align-items: center; gap: 6px; color: var(--cream); font-weight: 500; margin-top: 2px; }
.ride__leg svg { width: 14px; height: 14px; color: var(--amber); flex: none; }
.ride__go { flex: none; }
.ride__note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font: 500 11.5px/1.3 var(--sans); letter-spacing: .06em; color: var(--amber); }
.ride__note i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); flex: none; }

/* hero on tablets and phones: flow column, the map is a band between crest and console */
@media (max-width: 999px) {
  .hero { display: flex; flex-direction: column; }
  .hero__in { padding: calc(var(--hdr-h) + 18px) var(--gut) 22px; gap: 0; justify-content: flex-start; flex: 1 0 auto; }
  .crest { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .crest__mark { width: min(78vw, 360px); }
  .crest__since { justify-content: center; }
  .crest__since i, .crest__since i:last-child { width: 28px; flex: none; }
  .hero__band { height: clamp(150px, 27svh, 300px); }
  .ride { width: 100%; max-width: 560px; margin: 0 auto; }
  .hero__map { inset: auto 0 auto 0; top: var(--band-t, 30%); height: var(--band-h, 40%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); }
  .hero__shade { background: none; }
}
@media (max-width: 719px) {
  .hero__in { padding-top: calc(var(--hdr-h) + 12px); padding-bottom: 14px; }
  .crest__club { font-size: 10.5px; letter-spacing: .26em; margin-bottom: 9px; }
  .crest__mark { width: min(76vw, 300px); }
  .crest__since { font-size: 11.5px; margin-top: 9px; }
  .hero__band { height: clamp(120px, 22svh, 210px); }
  .ride { padding: 13px 13px 11px; border-radius: 4px; }
  .ride__head { margin-bottom: 9px; }
  .ride__title { font-size: 19px; }
  .ride__from legend { display: none; }
  .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .chip { height: 40px; }
  .ride__row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px; margin-top: 9px; }
  .field { gap: 4px; }
  .field--night { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .field--night .sw { height: 38px; }
  .dd, .step { height: 42px; }
  .ride__out { margin-top: 9px; padding-top: 10px; gap: 10px; }
  .ride__price strong { font-size: 2.15rem; }
  .ride__price small { font-size: 12px; }
  .ride__go { padding: 0 14px; min-height: 46px; font-size: 13.5px; }
  .ride__note { margin-top: 8px; font-size: 10.5px; }
  .ride__price .ride__leg { display: none; }
  .board__live [data-live="clock"] { display: none; }
  .care__img figcaption .hide-s { display: none; }
}
@media (max-width: 719px) and (max-height: 780px) {
  .hero__band { height: 136px; }
  .crest__mark { width: min(70vw, 270px); }
  .crest__club { margin-bottom: 6px; }
  .chip { height: 38px; }
  .care__text { display: none; }
}
@media (max-width: 380px) {
  .ride__go svg { display: none; }
  .ride__price small .hide-xs { display: none; }
}

/* ---------- sections ---------- */
.sec { position: relative; }
.sec--night { background: var(--night); color: var(--cream); }
.sec--paper { background: var(--paper); color: var(--ink); }
.sec--mist { background: var(--mist); color: var(--ink); }
.h2 { margin: 0; font: 400 var(--h2s)/1.04 var(--serif); letter-spacing: -.005em; }
.h2 em { font-style: italic; color: var(--amber); }
.sec--paper .h2 em, .sec--mist .h2 em { color: var(--amber-deep); }
.lead { margin: 0; font: 400 var(--t-lead)/1.55 var(--sans); color: var(--mute); max-width: 34em; }
.sec--paper .lead, .sec--mist .lead { color: var(--ink-2); }

/* transfer: board + leg */
.transfer__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "intro board" "leg board"; column-gap: clamp(32px, 5vw, 90px); row-gap: clamp(18px, 3svh, 34px); align-items: start; }
.transfer__intro { grid-area: intro; display: flex; flex-direction: column; gap: 14px; }
.leg { grid-area: leg; display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); gap: 22px; padding: 18px; background: var(--night-2); border: 1px solid var(--line-d); border-radius: 4px; }
.leg__map { position: relative; background: radial-gradient(120% 90% at 50% 40%, #1d242d, #12161b); border-radius: 3px; min-height: 180px; overflow: hidden; }
.leg__svg { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); overflow: visible; }
.leg__dim { fill: none; stroke: rgba(239, 234, 226, .14); stroke-width: var(--ld, 1.5); stroke-linecap: round; stroke-linejoin: round; }
.leg__case { fill: none; stroke: rgba(0, 0, 0, .55); stroke-width: var(--lw2, 7); stroke-linecap: round; stroke-linejoin: round; }
.leg__line { fill: none; stroke: var(--amber); stroke-width: var(--lw, 3); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.leg__a { fill: var(--night); stroke: var(--cream); stroke-width: var(--lw, 2); r: var(--ra, 4); }
.leg__b { fill: var(--amber); stroke: var(--night); stroke-width: var(--lw, 2); r: var(--rb, 5); }
.leg__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.leg__title { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font: 400 var(--h3s)/1.2 var(--serif); }
.leg__title b { font: 700 13px/1 var(--sans); letter-spacing: .12em; color: var(--ink); background: var(--amber); padding: 5px 7px 4px; border-radius: 2px; }
.leg__title svg { width: 18px; height: 18px; color: var(--amber); }
.leg__via { margin: 0; font: 400 var(--t-small)/1.45 var(--sans); color: var(--mute); }
.leg__roads { margin: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.road { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 2px; font: 700 11.5px/1 var(--sans); letter-spacing: .04em; background: #2c4f86; color: #fff; }
.road--l { background: #d8d2c4; color: #15130f; }
.road--de { background: #2c4f86; }
.road--t { background: transparent; border: 1px solid var(--line-d); color: var(--mute); font-weight: 500; letter-spacing: .02em; }
.leg__prices { margin: 2px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line-d); }
.leg__prices div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-d); }
.leg__prices dt { font: 400 var(--t-small)/1.3 var(--sans); color: var(--mute); }
.leg__prices dd { margin: 0; font: 400 22px/1 var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.leg__foot { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: auto; padding-top: 4px; }
.leg__foot .btn { min-height: 44px; padding: 0 16px; color: var(--amber); }
.leg__note { text-align: center; }
.lt-s { display: none; }
.leg__note { font: 500 11px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }

.board { grid-area: board; background: #0b0e11; border: 1px solid var(--line-d); border-radius: 5px; padding: 16px 16px 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 40px 80px -40px rgba(0, 0, 0, .8); }
.board__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 4px 12px; border-bottom: 1px solid var(--line-d); }
.board__title { margin: 0; display: flex; align-items: center; gap: 10px; font: 600 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.board__title b { color: var(--cream); font-weight: 700; }
.board__title svg { width: 18px; height: 18px; color: var(--amber); transform: rotate(45deg); }
.board__live { margin: 0; display: flex; gap: 6px; }
.plate { display: inline-flex; align-items: center; height: 28px; padding: 0 9px; border-radius: 3px; background: linear-gradient(180deg, #20262e 0 49%, #181d24 51% 100%); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .5);
  font: 600 13.5px/1 var(--sans); letter-spacing: .06em; color: var(--cream); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plate--wx { color: var(--amber); }
.board__cols { display: grid; grid-template-columns: minmax(0, 1fr) 64px 70px 74px; gap: 6px; padding: 10px 10px 6px; font: 600 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.board__cols span:not(:first-child) { text-align: right; }
.board__rows { display: flex; flex-direction: column; gap: 4px; }
.brow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 64px 70px 74px; gap: 6px; align-items: center; min-height: 48px; padding: 0 10px; border-radius: 3px; text-align: left; width: 100%;
  background: rgba(239, 234, 226, .025); transition: background-color .3s; }
.brow::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--amber); transform: scaleY(0); transition: transform .35s var(--ease); }
.brow:hover { background: rgba(239, 234, 226, .06); }
.brow.is-on { background: rgba(242, 169, 27, .09); }
.brow.is-on::before { transform: scaleY(1); }
.brow__name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brow__name .plate { width: 58px; flex: none; justify-content: center; font-weight: 700; letter-spacing: .12em; }
.brow.is-on .brow__name .plate { background: linear-gradient(180deg, #f6b42a 0 49%, #eda216 51% 100%); color: #15130f; }
.brow__name span { font: 500 15px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.brow__v { text-align: right; font: 600 15px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; color: rgba(239, 234, 226, .9); }
.brow__p { color: var(--amber); }
.brow svg { width: 15px; height: 15px; color: var(--mute); flex: none; }
.board__foot { margin: 10px 4px 0; font: 400 12px/1.45 var(--sans); color: var(--mute); }

/* fleet */
.fleet .wrap { display: flex; flex-direction: column; gap: clamp(18px, 3.2svh, 36px); }
.fleet__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.fleet__head > div { display: flex; flex-direction: column; gap: 14px; }
.fleet__cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); }
.car { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; background: #fbfaf7; border: 1px solid var(--line-l); border-radius: 5px; overflow: hidden; }
.car__stage { position: relative; min-height: clamp(220px, 34svh, 340px); display: flex; align-items: center; justify-content: center; padding: 22px;
  background: radial-gradient(70% 34% at 50% 78%, rgba(22, 25, 29, .16), rgba(22, 25, 29, 0) 70%), linear-gradient(180deg, #f4f2ee 0%, #e9e6e0 64%, #dedad2 100%); }
.car__stage img { position: relative; width: auto; height: auto; max-height: 100%; }
.car--a8 .car__stage img { max-width: min(100%, 240px); }
.car--bus .car__stage img { max-width: min(100%, 300px); }
.car__count { position: absolute; left: 16px; top: 14px; font: 400 30px/1 var(--serif); color: var(--amber-deep); }
.car__body { display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 2.4vw, 28px); }
.car__kind { margin: 0; }
.car__name { margin: 0; font: 400 var(--h3m)/1.1 var(--serif); }
.car__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line-l); }
.car__facts li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-l); font: 500 var(--t-body)/1.2 var(--sans); }
.car__facts svg { width: 16px; height: 16px; color: var(--amber-deep); flex: none; }
.car__go { margin-top: auto; align-self: flex-start; min-height: 44px; padding: 0 16px; color: var(--ink); }
.fleet__extras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-l); }
.fleet__extras li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 18px 18px 4px 0; }
.fleet__extras svg { width: 26px; height: 26px; color: var(--amber-deep); }
.fleet__extras b { font: 400 clamp(2.4rem, 4vw, 3.2rem)/1 var(--serif); font-variant-numeric: tabular-nums; }
.fleet__extras span { display: flex; flex-direction: column; gap: 3px; font: 600 var(--t-body)/1.2 var(--sans); }
.fleet__extras small { font: 400 var(--t-small)/1.35 var(--sans); color: var(--ink-2); }

/* care */
.care__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 90px); align-items: center; }
.care__img { position: relative; margin: 0; height: clamp(360px, var(--scr-h), 820px); border-radius: 4px; overflow: hidden; background: var(--mist-2); }
.care__img img { width: 100%; height: 100%; object-fit: cover; }
.care__img figcaption { position: absolute; left: 12px; bottom: 10px; font: 500 11px/1.3 var(--sans); letter-spacing: .04em; color: rgba(255, 255, 255, .86); text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.care__body { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.care__quote { margin: 4px 0 0; padding: 16px 0 16px 20px; border-left: 3px solid var(--amber); font: 400 var(--quote)/1.3 var(--serif); }
.care__facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.care__facts li { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: rgba(255, 255, 255, .55); border: 1px solid var(--line-l); border-radius: 4px; font: 600 var(--t-small)/1.25 var(--sans); }
.care__facts svg { width: 22px; height: 22px; color: var(--amber-deep); }
.care__text { margin: 0; font: 400 var(--t-body)/1.55 var(--sans); color: var(--ink-2); }
.care__body .btn { align-self: flex-start; font-variant-numeric: tabular-nums; }

/* contact */
.contact__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 90px); align-items: center; }
.contact__body { display: flex; flex-direction: column; gap: 18px; }
.contact__tel { font: 400 clamp(2rem, 3.4vw, 3rem)/1.05 var(--serif); text-decoration: none; color: var(--amber); font-variant-numeric: tabular-nums; white-space: nowrap; }
.contact__tel:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.contact__list { margin: 0; display: grid; border-top: 1px solid var(--line-d); }
.contact__list div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-d); }
.contact__list dt { font: 600 var(--t-cap)/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.contact__list dd { margin: 0; font: 400 var(--t-body)/1.5 var(--sans); }
.contact__list a { text-decoration: none; border-bottom: 1px solid rgba(239, 234, 226, .3); }
.contact__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.contact__acts .btn--line { color: var(--cream); }
.street { position: relative; margin: 0; height: clamp(340px, var(--scr-h), 780px); border-radius: 4px; overflow: hidden; background: #14181d; border: 1px solid var(--line-d); }
.street__img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--sx, 50%) var(--sy, 50%); }
.street__pin { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; transform: translate(-7px, -50%); white-space: nowrap; font: 600 12.5px/1.2 var(--sans); color: rgba(239, 234, 226, .82); pointer-events: none; }
.street__pin i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(239, 234, 226, .7); background: var(--night); flex: none; }
.street__pin small { font: 400 12px/1.2 var(--sans); color: var(--mute); }
.street__pin--home { flex-wrap: wrap; width: 220px; column-gap: 10px; row-gap: 2px; transform: translate(-13px, -13px); }
.street__pin--home i { width: 26px; height: 26px; border: 2px solid var(--amber); background: radial-gradient(circle, var(--amber) 0 5px, var(--night) 6px); }
.street__pin--home b { font: 400 21px/1 var(--serif); color: var(--cream); }
.street__pin--home small { flex-basis: 100%; padding-left: 36px; }
.street__pin--home::after { content: ""; position: absolute; left: 13px; top: 13px; width: 26px; height: 26px; margin: -13px; border-radius: 50%; border: 2px solid var(--amber); animation: ping 2.4s ease-out 3; opacity: 0; }
@keyframes ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }
.street figcaption { position: absolute; right: 10px; bottom: 8px; font: 400 11px/1 var(--sans); color: var(--mute); }

/* footer */
.ftr { background: #0b0d10; color: var(--mute); padding: clamp(40px, 7svh, 72px) 0 calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-d); }
.ftr__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px 40px; }
.ftr__brand .wm { width: 210px; color: var(--cream); margin-bottom: 14px; }
.ftr p { margin: 0 0 10px; font: 400 var(--t-small)/1.6 var(--sans); }
.ftr .cap { color: var(--cream); margin-bottom: 10px; }
.ftr a { text-decoration: none; }
.ftr a:hover { color: var(--cream); }
.ftr__credits { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--line-d); font-size: 12px !important; line-height: 1.6 !important; }
.ftr__credits a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- request ticket ---------- */
.ticket { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ticket[hidden] { display: none; }
.ticket__scrim { position: absolute; inset: 0; background: rgba(6, 8, 10, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ticket__box { position: relative; width: min(100%, 1000px); max-height: calc(100svh - 48px); overflow: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  background: var(--paper); color: var(--ink); border-radius: 6px; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .7); }
.ticket__x { position: absolute; right: 10px; top: 10px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--cream); background: rgba(15, 18, 22, .6); transition: background-color .3s; }
.ticket__x:hover { background: rgba(15, 18, 22, .9); }
.ticket__x svg { width: 22px; height: 22px; }
.ticket__form { padding: clamp(22px, 3vw, 40px); display: flex; flex-direction: column; gap: 16px; }
.ticket__form .h-label { color: var(--amber-deep); margin: 0; }
.ticket__route { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font: 400 var(--h3m)/1.15 var(--serif); padding-right: 30px; }
.ticket__route b { font: 700 13px/1 var(--sans); letter-spacing: .12em; background: var(--amber); padding: 6px 8px 5px; border-radius: 2px; }
.ticket__route svg { width: 20px; height: 20px; color: var(--amber-deep); }
.ticket__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.tf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tf--wide { grid-column: 1 / -1; }
.tf input { height: 46px; width: 100%; padding: 0 12px; border: 1px solid var(--line-l); border-radius: var(--r); background: #fff; font: 500 15px/1 var(--sans); color: var(--ink); }
.tf input:focus { outline: 2px solid var(--amber); outline-offset: 0; border-color: transparent; }
.tf input::placeholder { color: #9a9890; }
.tf .step { border-color: var(--line-l); background: #fff; height: 46px; }
.tf .step button { color: var(--ink); }
.tf .step button:hover { background: rgba(242, 169, 27, .18); color: var(--ink); }
.ticket__card { padding: clamp(18px, 2.4vw, 30px); background: var(--night); display: flex; align-items: center; }
.tk { position: relative; width: 100%; background: #fbfaf7; color: var(--ink); border-radius: 6px; padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 12px; }
.tk::before, .tk::after { content: ""; position: absolute; top: 118px; width: 18px; height: 18px; border-radius: 50%; background: var(--night); }
.tk::before { left: -9px; } .tk::after { right: -9px; }
.tk__brand { margin: 0; }
.tk__brand .wm { width: 150px; color: var(--ink); }
.tk__route { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0 16px; border-bottom: 1.5px dashed rgba(22, 25, 29, .25); }
.tk__route div { display: flex; flex-direction: column; gap: 4px; }
.tk__route div:last-child { text-align: right; }
.tk__route b { font: 400 38px/1 var(--serif); letter-spacing: .02em; }
.tk__route .tk__to { font-size: 26px; letter-spacing: 0; white-space: nowrap; }
.tk__route small { font: 500 12px/1.2 var(--sans); color: var(--ink-2); }
.tk__route svg { width: 26px; height: 26px; color: var(--amber-deep); transform: rotate(90deg); }
.tk__grid { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.tk__grid div { min-width: 0; }
.tk__grid dt { font: 500 var(--t-cap)/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.tk__grid dd { margin: 3px 0 0; font: 600 15px/1.25 var(--sans); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tk__wide { grid-column: 1 / -1; }
.tk__price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding-top: 12px; border-top: 1px solid var(--line-l); }
.tk__price b { font: 400 34px/1 var(--serif); font-variant-numeric: tabular-nums; }
.tk__price small { flex-basis: 100%; font: 400 12.5px/1.3 var(--sans); color: var(--ink-2); }
.tk__send { width: 100%; }
.tk__send[hidden] { display: none; }
.tk__done { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: rgba(242, 169, 27, .14); border-radius: 4px; }
.tk__done[hidden] { display: none; }
.tk__done svg { width: 24px; height: 24px; color: var(--amber-deep); flex: none; }
.tk__done p { margin: 0; display: flex; flex-direction: column; gap: 4px; font: 400 var(--t-small)/1.45 var(--sans); }
.tk__done b { font-weight: 600; }
.tk__back { display: none; }
.tk__note { margin: 0; font: 500 11px/1.3 var(--sans); letter-spacing: .06em; color: var(--amber-deep); text-align: center; }
@media (max-width: 799px) {
  .ticket { padding: 0; align-items: stretch; }
  .ticket__box { grid-template-columns: minmax(0, 1fr); max-height: none; height: 100%; border-radius: 0; }
  .ticket__form { padding: 18px 16px 14px; gap: 12px; }
  .ticket__card { padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); }
  .ticket__route { font-size: 1.35rem; }
  .tk__route b { font-size: 32px; }
  .tk::before, .tk::after { top: 108px; }
}

/* ---------- draft note + phone dock ---------- */
.note { position: fixed; left: 0; top: 50%; z-index: 45; transform: translateY(-50%); }
.note__btn { display: flex; align-items: center; gap: 8px; writing-mode: vertical-rl; transform: rotate(180deg); padding: 14px 8px; background: var(--cream); color: var(--ink); border-radius: 0 3px 3px 0;
  font: 600 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.note__btn i, .dock__note i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber-2); }
.note__panel { position: absolute; left: 40px; top: 50%; transform: translateY(-50%); width: 320px; background: var(--paper); color: var(--ink); border-radius: 5px; padding: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 10px; }
.note__panel[hidden] { display: none; }
.note__panel b { font: 400 21px/1.1 var(--serif); }
.note__panel p { margin: 0; font: 400 var(--t-small)/1.5 var(--sans); }
.note__panel .btn { align-self: flex-start; min-height: 42px; font-size: 13px; padding: 0 14px; }
.note__fine { font-size: 12px !important; color: var(--ink-2); }
.dock { display: none; }
@media (max-width: 899px) {
  .note__btn { display: none; }
  .note { top: auto; bottom: calc(80px + env(safe-area-inset-bottom)); left: 12px; right: 12px; transform: none; }
  .note__panel { position: static; transform: none; width: auto; }
  .dock { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 44; display: flex; gap: 6px; padding: 6px; background: rgba(15, 18, 22, .94); border: 1px solid var(--line-d); border-radius: 6px;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: translateY(140%); transition: transform .45s var(--ease); }
  .dock.is-on { transform: none; }
  .dock__book { flex: 1; height: 50px; border-radius: 4px; background: var(--amber); color: #15130f; font: 600 15px/1 var(--sans); letter-spacing: .02em; }
  .dock__ico, .dock__note { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 4px; border: 1px solid var(--line-d); color: var(--cream); }
  .dock__ico svg { width: 20px; height: 20px; }
}

/* ---------- reveals ---------- */
.js .rv { opacity: 0; transform: translateY(26px); }
.no-anim .rv, .is-static .rv { opacity: 1 !important; transform: none !important; }
.ln-mask { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }

/* ======================================================================
   Screens layer: every section fits one viewport (scripts/fit.mjs)
   ====================================================================== */
:root {
  --scr-t: calc(var(--hdr-h) + clamp(14px, 3.4svh, 46px));
  --scr-b: clamp(18px, 3.8svh, 50px);
  --scr-h: calc(100svh - var(--scr-t) - var(--scr-b));
  --h2s: clamp(2.1rem, min(3.4vw, 5.4svh), 3.8rem);
}
@media (max-width: 899px) { :root { --scr-b: calc(86px + env(safe-area-inset-bottom)); } }
@media (max-width: 719px) { :root { --scr-t: calc(var(--hdr-h) + 14px); --h2s: clamp(1.95rem, 8.4vw, 2.4rem); } }
main > section.sec { padding-top: var(--scr-t); padding-bottom: var(--scr-b); }
@media (min-width: 900px) {
  main > section.sec { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
}
@media (max-height: 820px) and (min-width: 900px) {
  :root { --h2s: clamp(1.9rem, min(3.2vw, 5.4svh), 3rem); }
  .brow { min-height: 42px; }
  .leg__map { min-height: 150px; }
  .car__stage { min-height: 200px; }
  .fleet__extras li { padding-top: 12px; }
}
/* tablets (900–1199): stack where two columns get too narrow */
@media (max-width: 1199px) and (min-width: 900px) {
  .transfer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .leg { grid-template-columns: minmax(0, 1fr); }
  .leg__map { display: none; }
  .car { grid-template-columns: minmax(0, 1fr); }
  .car__stage { min-height: 190px; }
  .care__facts { grid-template-columns: minmax(0, 1fr); }
  .care__facts li { flex-direction: row; align-items: center; }
}
@media (max-width: 899px) {
  .transfer__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "board" "leg"; row-gap: 14px; }
  .transfer__intro .lead { display: none; }
  .leg { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 10px; }
  .leg__map, .leg__roads, .leg__note { display: none; }
  .leg__prices div:last-child { display: none; }
  .board { padding: 10px 8px 8px; }
  .board__head { padding: 0 4px 8px; }
  .board__cols { grid-template-columns: minmax(0, 1fr) 36px 50px 52px; padding: 8px 8px 4px; font-size: 9.5px; letter-spacing: .14em; }
  .brow { grid-template-columns: minmax(0, 1fr) 36px 50px 52px; min-height: 40px; padding: 0 8px; gap: 4px; }
  .brow__name { gap: 8px; }
  .brow__name .plate { width: 48px; height: 26px; font-size: 12px; padding: 0 6px; }
  .brow__name span { font-size: 13px; }
  .brow__v { font-size: 13px; }
  .board__foot { display: none; }
  .board__head { gap: 8px; }
  .board__title { gap: 7px; font-size: 11px; letter-spacing: .14em; min-width: 0; }
  .board__title svg { width: 15px; height: 15px; }
  .plate { height: 26px; padding: 0 7px; font-size: 12.5px; }
  .leg__body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: center; gap: 10px 12px; }
  .leg__title { grid-column: 1 / -1; font-size: 1.1rem; }
  .leg__via { display: none; }
  .leg__prices { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; margin: 0; border-top: 0; }
  .leg__prices div { flex-direction: column; align-items: flex-start; gap: 4px; padding: 0; border-bottom: 0; }
  .leg__prices dt { font-size: 12px; }
  .leg__prices dd { font-size: 20px; }
  .leg__foot { margin: 0; padding: 0; }
  .leg__foot .btn { min-height: 44px; padding: 0 10px; font-size: 13px; }
  .leg__foot .btn svg { display: none; }
  .leg .lt-l { display: none; }
  .leg .lt-s { display: inline; }
  .fleet__head { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fleet__head .lead { display: none; }
  .fleet__cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 4px; scrollbar-width: none; }
  .fleet__cards::-webkit-scrollbar { display: none; }
  .car { flex: 0 0 86%; scroll-snap-align: center; grid-template-columns: minmax(0, 1fr); }
  .car__stage { min-height: 0; height: clamp(150px, 24svh, 210px); }
  .car__body { padding: 14px 16px 16px; gap: 8px; }
  .car__facts li { padding: 7px 0; }
  .fleet__extras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fleet__extras li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 8px 0 0; }
  .fleet__extras svg { display: none; }
  .fleet__extras b { font-size: 2.1rem; }
  .fleet__extras small { display: none; }
  .care__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .care__img { height: clamp(150px, 26svh, 260px); }
  .care__body { gap: 12px; }
  .care__quote { padding: 10px 0 10px 14px; }
  .care__facts { gap: 6px; }
  .care__facts li { padding: 10px; gap: 6px; }
  .contact { min-height: 100vh; min-height: 100svh; }
  .contact__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .contact__body { gap: 12px; }
  .street { height: clamp(170px, 28svh, 300px); }
  .ftr__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ftr__brand { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
  .contact__list div { grid-template-columns: 70px minmax(0, 1fr); padding: 8px 0; }
  .contact__tel { font-size: 1.85rem; }
  .contact__acts .btn { flex: 1 1 auto; }
  .care__facts { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .care__facts li { flex-direction: row; align-items: center; padding: 8px 10px; gap: 10px; }
  .care__facts svg { width: 18px; height: 18px; }
  .pin:not(.pin--home) small { display: none; }
  .pin--home { flex-direction: column; gap: 3px; transform: translate(-50%, -11px); text-align: center; }
  .pin--home small { display: none !important; }
  .pin--home b { font-size: 17px; }
  .street__pin--home b { font-size: 18px; }
}
@media (max-width: 380px) {
  .board__cols { grid-template-columns: minmax(0, 1fr) 32px 46px 48px; }
  .brow { grid-template-columns: minmax(0, 1fr) 32px 46px 48px; }
  .brow__name { gap: 6px; }
  .brow__name .plate { width: 44px; }
  .brow__name span { font-size: 12.5px; }
  .brow__v { font-size: 12.5px; }
}
@media (max-height: 799px) and (max-width: 899px) { .leg__title { display: none; } }
@media (max-height: 760px) and (max-width: 899px) {
  .brow { min-height: 34px; }
  .care__img { height: clamp(120px, 21svh, 200px); }
  .street { height: clamp(140px, 19svh, 240px); }
  .car__stage { height: clamp(110px, 16svh, 150px); }
}

/* ======================================================================
   Type system: the roles, mapped once (keep last)
   ====================================================================== */
:root {
  --t-lab: 11.5px; --t-cap: 11px; --t-lead: 17px; --t-body: 15px; --t-small: 14px;
  --h3m: clamp(1.6rem, 2.1vw, 1.95rem);
  --h3s: clamp(1.3rem, min(1.7vw, 2.8svh), 1.6rem);
  --quote: clamp(1.35rem, min(1.8vw, 2.8svh), 1.75rem);
}
@media (max-width: 719px) { :root { --t-lab: 11px; --t-cap: 10.5px; --t-lead: 15px; --t-small: 13.5px; --h3m: 1.5rem; --h3s: 1.2rem; --quote: 1.2rem; } }
.h-label { margin: 0; font: 600 var(--t-lab)/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.sec--paper .h-label, .sec--mist .h-label { color: var(--amber-deep); }
.cap, .car__kind { font: 500 var(--t-cap)/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.car__kind { color: var(--ink-2); }
.ftr .cap { font-weight: 600; }