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

@font-face { font-family: 'Source Sans 3'; src: url(../fonts/source-sans-3.woff2) format('woff2'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url(../fonts/cormorant-garamond-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url(../fonts/cormorant-garamond-500-italic.woff2) format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }

:root {
  --night: #0b1626; --night-2: #0f1d31; --night-3: #14253d; --night-4: #1d3250;
  --cream: #f2efe8; --mute: #9aa8ba; --line-d: rgba(242, 239, 232, .13);
  --snow: #edf1f5; --snow-2: #dfe6ee; --paper: #f4f1eb; --paper-2: #e9e4da;
  --ink: #0e1a2b; --ink-2: #4a586b; --line-l: rgba(14, 26, 43, .13);
  --royal: #32508a; --royal-2: #263f6e; --yellow: #fedd00;
  --gold: #d6b062; --gold-2: #e9c97f; --gold-deep: #94692a; --gold-soft: rgba(214, 176, 98, .15);
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Source Sans 3', '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 16px/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(--gold); 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(--gold); 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; }
.num { font-variant-numeric: lining-nums tabular-nums; }

/* ---------- 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 15px/1 var(--sans); letter-spacing: .03em; 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:last-child { transform: translateX(3px); }
.btn--gold { background: var(--gold); color: #141006; }
.btn--gold::after { background: var(--gold-2); }
.btn--ink { background: var(--royal); color: #fff; }
.btn--ink::after { background: var(--royal-2); }
.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(11, 22, 38, .94); }
.hdr.is-solid::after { opacity: 1; }
.hdr.is-hidden { transform: translateY(-100%); }
.hdr__brand { display: flex; align-items: center; gap: 11px; color: var(--cream); text-decoration: none; transition: opacity .4s, transform .5s var(--ease); }
.hdr__brand .sh { width: 30px; height: 36px; flex: none; }
.hdr__brand span { font: 700 17px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.hdr.has-crest .hdr__brand { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.hdr__nav { display: flex; gap: 30px; margin-left: auto; }
.hdr__nav a { font: 500 15px/1 var(--sans); letter-spacing: .02em; text-decoration: none; color: rgba(242, 239, 232, .84); padding: 10px 0; position: relative; }
.hdr__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--gold); 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(214, 176, 98, .6); border-radius: var(--r); color: var(--gold); text-decoration: none;
  font: 600 15px/1 var(--sans); letter-spacing: .02em; font-variant-numeric: tabular-nums; transition: background-color .3s; }
.hdr__call:hover { background: var(--gold-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 .sh { width: 26px; height: 31px; }
  .hdr__brand span { font-size: 15px; }
  .hdr__call { width: 44px; padding: 0; justify-content: center; }
  .hdr__call span { display: none; }
  .hdr__menu { display: block; }
  .hdr { gap: 12px; }
}
.menu { position: fixed; inset: 0; z-index: 39; background: rgba(11, 22, 38, .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: 500 clamp(1.8rem, 7.6vw, 2.3rem)/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(--gold); 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: flex; flex-direction: column; overflow: hidden; overflow-anchor: none; background: var(--night); isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__bg picture, .hero__img { width: 100%; height: 100%; }
.hero__img { object-fit: cover; object-position: 60% 46%; transform-origin: 62% 50%; }
.hero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 34% at 50% var(--crest-y, 34%), rgba(8, 15, 27, .5), rgba(8, 15, 27, .18) 62%, rgba(8, 15, 27, 0) 100%),
              linear-gradient(180deg, rgba(8, 15, 27, .72) 0%, rgba(8, 15, 27, .2) 22%, rgba(8, 15, 27, .12) 46%, rgba(8, 15, 27, .5) 70%, rgba(8, 15, 27, .9) 100%); }
.hero__in { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 3svh, 36px);
  padding: calc(var(--hdr-h) + clamp(8px, 2svh, 26px)) var(--gut) clamp(18px, 3.6svh, 42px); }
.hero__credit { position: absolute; right: var(--gut); bottom: 10px; margin: 0; font: 400 11.5px/1 var(--sans); letter-spacing: .03em; color: rgba(242, 239, 232, .55); }

/* crest = the rebuilt shield */
.crest { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--cream); }
.crest__club { margin: 0 0 clamp(8px, 1.6svh, 16px); font: 600 12px/1.4 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--gold); padding-left: .34em; }
.crest__mark { height: clamp(150px, 29svh, 300px); width: auto; overflow: visible; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); }
.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: .24em; text-transform: uppercase; color: rgba(242, 239, 232, .82); }
.crest__since i { height: 1px; width: 44px; background: rgba(214, 176, 98, .6); }
.crest__since i:first-child { transform-origin: right; } .crest__since i:last-child { transform-origin: left; }
.js .crest__club, .js .crest__since, .js .ride, .js .hdr, .js .hero__img, .js .crest__first, .js .crest__lock, .js .hero__credit { opacity: 0; }
.no-anim .crest__draw, .is-static .crest__draw { stroke-dashoffset: 0 !important; }
.no-anim .crest__club, .no-anim .crest__since, .no-anim .ride, .no-anim .hdr, .no-anim .hero__img, .no-anim .crest__first, .no-anim .crest__lock, .no-anim .hero__credit,
.is-static .crest__club, .is-static .crest__since, .is-static .ride, .is-static .hdr, .is-static .hero__img, .is-static .crest__first, .is-static .crest__lock, .is-static .hero__credit { opacity: 1 !important; }

/* console */
.ride { width: min(100%, 1200px); background: rgba(9, 18, 32, .84); border: 1px solid var(--line-d); border-radius: 5px; padding: 14px 18px 12px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7); }
.ride__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.seg { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--line-d); border-radius: 4px; background: rgba(242, 239, 232, .03); }
.seg button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 3px; font: 600 14px/1 var(--sans); letter-spacing: .03em; color: rgba(242, 239, 232, .78); transition: background-color .3s, color .3s; }
.seg button svg { width: 17px; height: 17px; flex: none; }
.seg button:not([aria-selected="true"]):hover { background: rgba(242, 239, 232, .08); color: var(--cream); }
.seg button[aria-selected="true"] { background: var(--cream); color: var(--ink); }
.lang { display: inline-flex; border: 1px solid var(--line-d); border-radius: var(--r); padding: 2px; }
.lang button { min-width: 40px; height: 30px; font: 600 12px/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(--gold); color: var(--ink); }
.lang button:not([aria-pressed="true"]):hover { color: var(--cream); background: rgba(242, 239, 232, .08); }
.ride__grid { display: grid; grid-template-columns: minmax(0, 2.5fr) minmax(0, .82fr) minmax(0, 1fr) minmax(0, .72fr) minmax(0, 1.08fr) auto; gap: 12px; align-items: end; }
.ride__way { display: grid; grid-template-columns: minmax(0, 1.3fr) 38px minmax(0, 1fr); gap: 6px; align-items: end; min-width: 0; }
.ride__way .field--a { order: 1; } .ride__way .swap { order: 2; } .ride__way .field--b { order: 3; }
.ride__way.is-rev .field--a { order: 3; } .ride__way.is-rev .field--b { order: 1; }
.field { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dd { width: 100%; height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; border: 1px solid rgba(242, 239, 232, .22); border-radius: var(--r); text-align: left; transition: border-color .3s, background-color .3s; }
.dd__code { flex: none; font: 700 12.5px/1 var(--sans); letter-spacing: .1em; color: var(--ink); background: var(--gold); border-radius: 2px; padding: 5px 6px 4px; }
.dd__code:empty { display: none; }
.dd__v { flex: 1; min-width: 0; font: 600 16px/1 var(--sans); white-space: nowrap; overflow: hidden; }
.dd svg { width: 16px; height: 16px; flex: none; transition: transform .3s var(--ease); }
.dd:hover { border-color: rgba(214, 176, 98, .75); background: rgba(242, 239, 232, .04); }
.dd[aria-expanded="true"] svg { transform: rotate(180deg); }
.dd__list { position: absolute; left: 0; min-width: 100%; width: max-content; max-width: min(92vw, 380px); bottom: calc(100% + 6px); z-index: 6; list-style: none; margin: 0; padding: 6px; max-height: min(420px, 62svh); overflow-y: auto; overscroll-behavior: contain;
  background: #13233a; border: 1px solid var(--line-d); border-radius: 4px; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .75); }
.dd__list li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 2px; font: 500 15.5px/1.15 var(--sans); cursor: pointer; }
.dd__list li b { flex: none; min-width: 42px; font: 700 12px/1 var(--sans); letter-spacing: .08em; color: var(--gold); }
.dd__list li span { flex: 1; }
.dd__list li small { margin-left: auto; padding-left: 14px; font: 600 13.5px/1 var(--sans); color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dd__list li:hover { background: rgba(242, 239, 232, .08); }
.dd__list li[aria-selected="true"] { color: var(--gold); background: rgba(214, 176, 98, .1); }
.dd__list li.dd__grp { cursor: default; padding: 10px 10px 4px; font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); background: none; }
.swap { height: 46px; display: grid; place-items: center; border-radius: var(--r); color: var(--gold); transition: background-color .3s; }
.swap svg { width: 20px; height: 20px; transition: transform .5s var(--ease); }
.swap:hover { background: var(--gold-soft); }
.ride__way.is-rev .swap svg { transform: rotate(180deg); }
.step { height: 46px; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; border: 1px solid rgba(242, 239, 232, .22); border-radius: var(--r); }
.step button { height: 100%; font: 400 21px/1 var(--sans); color: var(--cream); transition: background-color .25s, color .25s; }
.step button:hover { background: var(--gold-soft); color: var(--gold); }
.step button:disabled { opacity: .3; pointer-events: none; }
.step output { text-align: center; font: 600 17px/1 var(--sans); font-variant-numeric: tabular-nums; }
.inp { width: 100%; height: 46px; padding: 0 10px; border: 1px solid rgba(242, 239, 232, .22); border-radius: var(--r); background: transparent; color: var(--cream); font: 600 15.5px/1 var(--sans); color-scheme: dark; min-width: 0; }
.inp:hover { border-color: rgba(214, 176, 98, .75); }
.inp:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: transparent; }
.inp::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; }
/* iOS Safari gives native date/time inputs an intrinsic width: the frame is a wrapper that clips them */
.inp, .tf input { -webkit-appearance: none; appearance: none; display: block; max-width: 100%; min-width: 0; }
.inpw { display: block; position: relative; min-width: 0; height: 46px; overflow: hidden; border-radius: var(--r); border: 1px solid rgba(242, 239, 232, .22); transition: border-color .3s; }
.inpw > input { width: 100%; height: 100% !important; border: 0 !important; line-height: 44px; }
.inpw > input::-webkit-date-and-time-value { line-height: 44px; min-height: 44px; }
.inpw:hover { border-color: rgba(214, 176, 98, .75); }
.inpw:focus-within { outline: 2px solid var(--gold); outline-offset: 0; border-color: transparent; }
.inpw > input:focus { outline: 0; }
.tf .inpw { border-color: var(--line-l); background: #fff; }
.inp::-webkit-date-and-time-value, .tf input::-webkit-date-and-time-value { text-align: left; margin: 0; }
.ride__price { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-left: 4px; }
.ride__price .cap { white-space: nowrap; }
.ride__price strong { font: 500 clamp(2.3rem, 4.8svh, 2.9rem)/.95 var(--serif); color: var(--cream); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.ride__price small { font: 400 13px/1.3 var(--sans); color: var(--mute); white-space: nowrap; overflow: hidden; }
.ride__go { flex: none; height: 50px; }
.ride__note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line-d); font: 500 12.5px/1.3 var(--sans); color: var(--mute); }
.ride__tariff { display: inline-flex; align-items: center; gap: 6px; color: var(--cream); }
.ride__tariff svg { width: 15px; height: 15px; color: var(--gold); }
.ride__src { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--gold); letter-spacing: .03em; }
.ride__src i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }

/* hero on laptops and tablets: two console rows */
@media (max-width: 1279px) {
  .ride { width: min(100%, 780px); }
  .ride__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ride__way { grid-column: 1 / -1; }
  .ride__price { grid-column: 1 / 3; }
  .ride__go { grid-column: 3; }
}
@media (max-width: 719px) {
  .hero__in { padding: calc(var(--hdr-h) + 10px) var(--gut) 14px; gap: 12px; justify-content: flex-start; }
  .crest__club { font-size: 10.5px; letter-spacing: .28em; margin-bottom: 8px; }
  .crest__mark { height: clamp(108px, 19svh, 168px); }
  .crest__since { font-size: 11px; letter-spacing: .2em; margin-top: 8px; gap: 10px; }
  .crest__since i { width: 26px; }
  .hero__credit { display: none; }
  .ride { padding: 10px 11px 9px; margin-top: auto; }
  .ride__top { margin-bottom: 9px; gap: 8px; }
  .seg { flex: 1; }
  .seg button { flex: 1; justify-content: center; padding: 0 6px; gap: 6px; height: 34px; font-size: 13px; }
  .seg button svg { display: none; }
  .seg button { min-width: 0; }
  .lang button { min-width: 34px; height: 28px; }
  .ride__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .ride__way { grid-template-columns: minmax(0, 1fr) 42px; grid-template-rows: auto auto; column-gap: 6px; row-gap: 7px; }
  .ride__way .field--a { grid-area: 1 / 1; } .ride__way .field--b { grid-area: 2 / 1; } .ride__way .swap { grid-area: 1 / 2 / 3 / 3; align-self: center; height: 44px; }
  .ride__way.is-rev .field--a { grid-area: 2 / 1; } .ride__way.is-rev .field--b { grid-area: 1 / 1; }
  .ride__way.is-rev .swap svg { transform: rotate(180deg); }
  .swap svg { transform: rotate(90deg); }
  .ride__way.is-rev .swap svg { transform: rotate(270deg); }
  .field { gap: 4px; }
  .dd, .step, .inp, .inpw { height: 42px; }
  .inpw > input, .inpw > input::-webkit-date-and-time-value { line-height: 40px; min-height: 40px; }
  .dd__v { font-size: 15px; }
  .field--date { display: none; }
  .ride__price { grid-column: 1; padding-left: 0; }
  .ride__price strong { font-size: 2.15rem; }
  .ride__price small { font-size: 12px; }
  .ride__go { grid-column: 2; height: 48px; padding: 0 12px; font-size: 14px; align-self: end; }
  .ride__note { margin-top: 8px; padding-top: 8px; gap: 3px 12px; font-size: 11.5px; }
  .ride__src { margin-left: 0; flex-basis: 100%; font-size: 11px; }
  .ride__wait { display: none; }
}
@media (max-width: 719px) and (max-height: 780px) {
  .crest__mark { height: clamp(100px, 16svh, 132px); }
  .crest__club { margin-bottom: 5px; }
  .crest__since { margin-top: 6px; }
}
@media (max-width: 380px) { .ride__go svg { display: none; } .seg button svg { display: none; } }
@media (min-width: 720px) and (max-height: 820px) { .crest__mark { height: clamp(130px, 24svh, 210px); } }

/* ---------- sections ---------- */
.sec { position: relative; }
.sec--night { background: var(--night); color: var(--cream); }
.sec--snow { background: var(--snow); color: var(--ink); }
.sec--paper { background: var(--paper); color: var(--ink); }
.h2 { margin: 0; font: 500 var(--h2s)/1.02 var(--serif); letter-spacing: -.005em; }
.h2 em { font-style: italic; color: var(--gold); }
.sec--snow .h2 em { color: var(--royal); }
.sec--paper .h2 em { color: var(--gold-deep); }
.lead { margin: 0; font: 400 var(--t-lead)/1.55 var(--sans); color: var(--mute); max-width: 36em; }
.sec--snow .lead, .sec--paper .lead { color: var(--ink-2); }
.plate { display: inline-flex; align-items: center; height: 28px; padding: 0 9px; border-radius: 3px; background: linear-gradient(180deg, #1c3150 0 49%, #172a45 51% 100%); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .4);
  font: 600 14px/1 var(--sans); letter-spacing: .06em; color: var(--cream); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 2 · airports: map + list */
.air__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-areas: "head head" "list map"; column-gap: clamp(28px, 4vw, 72px); row-gap: clamp(16px, 3svh, 34px); align-items: stretch; }
.air__head { grid-area: head; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: clamp(28px, 4vw, 72px); row-gap: 10px; align-items: end; }
.air__head .h-label { grid-column: 1 / -1; }
.air__head .lead { justify-self: end; }
.fmap { grid-area: map; position: relative; margin: 0; height: auto; min-height: 380px; border-radius: 5px; overflow: hidden; background: #111d30; border: 1px solid var(--line-d); }
.fmap__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fmap__relief { opacity: .95; }
.fmap__lakes { fill: #0b1728; stroke: rgba(150, 185, 225, .22); stroke-width: calc(var(--k, 1) * .9); }
.fmap__rivers { fill: none; stroke: rgba(120, 160, 210, .2); stroke-width: calc(var(--k, 1) * .9); stroke-linecap: round; stroke-linejoin: round; }
.fmap__borders { fill: none; stroke: rgba(242, 239, 232, .24); stroke-width: calc(var(--k, 1) * .9); stroke-dasharray: calc(var(--k, 1) * 5) calc(var(--k, 1) * 4); }
.fmap__case { fill: none; stroke: rgba(4, 9, 17, .6); stroke-width: calc(var(--k, 1) * 5); stroke-linecap: round; stroke-linejoin: round; }
.fmap__line { fill: none; stroke: var(--gold); stroke-opacity: .5; 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; }
.fmap.has-pick .fmap__line { stroke: #b7c2d2; stroke-opacity: .22; }
.fmap__hi { fill: none; stroke: var(--gold-2); stroke-width: calc(var(--k, 1) * 3.4); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; filter: drop-shadow(0 0 calc(var(--k, 1) * 4) rgba(233, 201, 127, .6)); }
.fmap__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11, 22, 38, 0) 70%, rgba(11, 22, 38, .75) 100%); }
.fmap__pins, .lmap__pins { position: absolute; inset: 0; pointer-events: none; transition: opacity .5s; }
.fmap:not(.is-ready) .fmap__pins, .fmap:not(.is-ready) .fmap__leg, .lmap:not(.is-ready) .lmap__pins { opacity: 0; }
.pin { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; transform: translate(-6px, -50%); pointer-events: auto; transition: opacity .4s; }
.pin i { width: 12px; height: 12px; border-radius: 50%; background: var(--night); border: 2px solid rgba(242, 239, 232, .78); flex: none; transition: border-color .3s, background-color .3s, transform .3s var(--ease); }
.pin b { font: 700 12px/1 var(--sans); letter-spacing: .1em; color: var(--cream); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.pin small { font: 500 12px/1 var(--sans); color: rgba(242, 239, 232, .7); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.pin--l { flex-direction: row-reverse; transform: translate(calc(-100% + 6px), -50%); }
.pin--train i { border-radius: 3px; }
.pin:hover i, .pin.is-on i { border-color: var(--gold-2); background: var(--gold-2); transform: scale(1.15); }
.pin.is-on b { color: var(--gold-2); }
.pin--home { pointer-events: none; flex-direction: column-reverse; gap: 4px; transform: translate(-50%, calc(-100% + 11px)); }
.pin--home i { width: 22px; height: 22px; border: 2px solid var(--gold-2); background: radial-gradient(circle, var(--gold-2) 0 4px, var(--night) 5px); }
.pin--home b { font: 500 21px/1 var(--serif); letter-spacing: 0; }
.pin.is-off { opacity: 0; visibility: hidden; pointer-events: none; }
.pin.no-label b, .pin.no-label small { visibility: hidden; }
.fmap.is-small .pin--train:not(.is-on) { display: none; }
.fmap.is-small .pin:not(.is-on):not(.pin--home) b, .fmap.is-small .pin:not(.is-on):not(.pin--home) small { display: none; }
.pin--b { flex-direction: column; gap: 4px; transform: translate(-50%, -6px); }
.fmap__leg { position: absolute; left: 14px; bottom: 30px; margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 9px 12px; max-width: calc(100% - 28px); background: rgba(9, 18, 32, .86); border: 1px solid var(--line-d); border-radius: 4px; font: 600 15px/1.2 var(--sans);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fmap__leg b { font: 700 12.5px/1 var(--sans); letter-spacing: .1em; color: var(--ink); background: var(--gold); padding: 5px 6px 4px; border-radius: 2px; }
.fmap__km { color: var(--mute); font-weight: 500; font-variant-numeric: tabular-nums; }
.fmap figcaption, .lmap figcaption { position: absolute; right: 10px; bottom: 7px; font: 400 10.5px/1.2 var(--sans); color: rgba(242, 239, 232, .55); }
.list { grid-area: list; display: flex; flex-direction: column; min-width: 0; }
.list__cols, .lrow { display: grid; grid-template-columns: minmax(0, 1fr) 70px 82px 82px; gap: 8px; align-items: center; }
.list__cols { padding: 0 12px 8px; font: 600 var(--t-cap)/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.list__cols span:not(:first-child) { text-align: right; }
.list__cols small { display: block; margin-top: 3px; font-weight: 500; letter-spacing: .06em; text-transform: none; font-size: 11.5px; color: rgba(154, 168, 186, .8); }
.list__rows { display: flex; flex-direction: column; gap: 3px; }
.lrow { position: relative; min-height: 38px; padding: 0 12px; border-radius: 3px; text-align: left; width: 100%; background: rgba(242, 239, 232, .03); transition: background-color .3s; }
.lrow::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--gold); transform: scaleY(0); transition: transform .35s var(--ease); }
.lrow:hover { background: rgba(242, 239, 232, .07); }
.lrow.is-on { background: rgba(214, 176, 98, .11); }
.lrow.is-on::before { transform: scaleY(1); }
.lrow__name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lrow__code { flex: none; width: 50px; height: 26px; display: inline-grid; place-items: center; border-radius: 3px; background: linear-gradient(180deg, #1c3150 0 49%, #172a45 51% 100%); font: 700 12.5px/1 var(--sans); letter-spacing: .1em; color: var(--cream); }
.lrow__code svg { width: 15px; height: 15px; }
.lrow.is-on .lrow__code { background: linear-gradient(180deg, #e3bf72 0 49%, #d6b062 51% 100%); color: var(--ink); }
.lrow__n { font: 500 16px/1.2 var(--sans); white-space: nowrap; overflow: hidden; }
.lrow__n small { margin-left: 8px; font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.lrow__v { text-align: right; font: 600 16px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; color: rgba(242, 239, 232, .92); }
.lrow__t { color: var(--mute); font-weight: 500; }
.lrow__p { color: var(--gold-2); }
.list__grp { margin: 10px 12px 4px; font: 600 var(--t-cap)/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.list__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-d); }
.list__foot p { margin: 0; font: 400 13.5px/1.45 var(--sans); color: var(--mute); }
.list__src { color: var(--gold); white-space: nowrap; }
.list__go { flex: none; color: var(--gold); min-height: 44px; padding: 0 16px; }

/* 3 · ski area: snow map + fares */
.ski__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.lmap { position: relative; margin: 0; height: clamp(440px, var(--scr-h), 820px); border-radius: 5px; overflow: hidden; background: #dfe6ee; border: 1px solid var(--line-l); }
.lmap__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lmap__img--night { opacity: 0; transition: opacity .9s var(--ease); }
.lmap.is-night .lmap__img--night { opacity: 1; }
.lmap__from { display: none; }
.lmap__from.is-on { display: inline; }
.lmap__case { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: calc(var(--k, 1) * 6); stroke-linecap: round; stroke-linejoin: round; transition: stroke .6s; }
.lmap__line { fill: none; stroke: var(--royal); stroke-opacity: .5; stroke-width: calc(var(--k, 1) * 2.4); stroke-linecap: round; stroke-linejoin: round; transition: stroke .6s, stroke-opacity .4s; }
.lmap.is-night .lmap__case { stroke: rgba(5, 10, 18, .55); }
.lmap.is-night .lmap__line { stroke: #9fb3d1; stroke-opacity: .4; }
.lmap__hi { fill: none; stroke: var(--royal); stroke-width: calc(var(--k, 1) * 4.6); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; transition: stroke .6s; }
.lmap.is-night .lmap__hi { stroke: var(--gold-2); filter: drop-shadow(0 0 calc(var(--k, 1) * 4) rgba(233, 201, 127, .55)); }
.lpin { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; transform: translate(-5px, -50%); white-space: nowrap; transition: opacity .35s; }
.lpin i { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); flex: none; transition: background-color .3s, border-color .3s; }
.lpin b { font: 600 13px/1 var(--sans); color: var(--ink); text-shadow: 0 0 3px #fff, 0 0 6px #fff; transition: color .6s, text-shadow .6s; }
.lpin--l { flex-direction: row-reverse; transform: translate(calc(-100% + 5px), -50%); }
.lpin.is-from i { width: 18px; height: 18px; border-color: var(--royal); background: radial-gradient(circle, var(--royal) 0 3px, #fff 4px); }
.lpin.is-from b { font: 500 19px/1 var(--serif); }
.lpin.is-to i { background: var(--royal); border-color: var(--royal); transform: scale(1.2); }
.lpin.is-to b { color: var(--royal); }
.lmap.is-night .lpin b { color: var(--cream); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.lmap.is-night .lpin i { background: var(--night); border-color: rgba(242, 239, 232, .8); }
.lmap.is-night .lpin.is-to i { background: var(--gold-2); border-color: var(--gold-2); }
.lmap.is-night .lpin.is-to b { color: var(--gold-2); }
.lmap.is-night .lpin.is-from i { border-color: var(--gold-2); background: radial-gradient(circle, var(--gold-2) 0 3px, var(--night) 4px); }
.lmap figcaption { color: rgba(14, 26, 43, .6); }
.lmap.is-night figcaption { color: rgba(242, 239, 232, .55); }
.ski__body { display: flex; flex-direction: column; gap: clamp(12px, 2svh, 18px); min-width: 0; }
.ski__ctl { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.seg--light { border-color: var(--line-l); background: rgba(255, 255, 255, .5); }
.seg--light button { color: var(--ink-2); height: 38px; }
.seg--light button:not([aria-selected="true"]):hover { background: rgba(14, 26, 43, .06); color: var(--ink); }
.seg--light button[aria-selected="true"] { background: var(--royal); color: #fff; }
.dn { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; height: 40px; padding: 3px; border-radius: 20px; background: rgba(14, 26, 43, .08); border: 1px solid var(--line-l); isolation: isolate; }
.dn::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 17px; background: #fff; box-shadow: 0 2px 8px rgba(14, 26, 43, .15); transition: transform .45s var(--ease), background-color .45s; }
.dn[aria-checked="true"]::before { transform: translateX(100%); background: var(--night-3); }
.dn__o { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; font: 600 14px/1 var(--sans); color: var(--ink-2); transition: color .4s; }
.dn__o svg { width: 16px; height: 16px; }
.dn[aria-checked="false"] .dn__o--d { color: var(--ink); }
.dn[aria-checked="true"] .dn__o--n { color: var(--gold-2); }
.dn:hover { border-color: rgba(50, 80, 138, .5); }
.dest { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.chip { position: relative; height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border: 1px solid var(--line-l); border-radius: var(--r); background: rgba(255, 255, 255, .62);
  font: 600 14px/1 var(--sans); color: var(--ink); white-space: nowrap; transition: background-color .3s, border-color .3s, color .3s; }
.chip svg { width: 14px; height: 14px; flex: none; color: var(--ink-2); }
.chip:hover { border-color: rgba(50, 80, 138, .6); background: #fff; }
.chip[aria-checked="true"] { background: var(--royal); border-color: var(--royal); color: #fff; }
.chip[aria-checked="true"] svg { color: #fff; }
.fare { background: #fff; border: 1px solid var(--line-l); border-radius: 5px; padding: 16px 18px; box-shadow: 0 20px 40px -28px rgba(14, 26, 43, .35); }
.fare__route { margin: 0 0 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font: 500 var(--h3s)/1.15 var(--serif); }
.fare__route svg { width: 18px; height: 18px; color: var(--royal); }
.fare__route b { font-weight: 500; }
.fare__route small { flex-basis: 100%; font: 500 13.5px/1.3 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fare__grid { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px; }
.fare__c { padding: 10px 12px; border: 1px solid var(--line-l); border-radius: 4px; transition: border-color .4s, background-color .4s; min-width: 0; }
.fare__c dt { font: 600 var(--t-cap)/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.fare__c dt small { display: block; font-weight: 500; letter-spacing: .04em; text-transform: none; font-size: 12px; margin-top: 2px; }
.fare__c dd { margin: 6px 0 0; font: 500 clamp(1.6rem, 3svh, 2rem)/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.fare__c--pp dd { font-size: clamp(1.25rem, 2.4svh, 1.5rem); }
.fare__c--pp dd small { display: block; margin-top: 4px; font: 500 12.5px/1.2 var(--sans); color: var(--ink-2); white-space: normal; }
.fare__c.is-on { border-color: var(--royal); background: rgba(50, 80, 138, .07); }
.fare__c.is-on dt { color: var(--royal); }
.fare__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.fare__foot .btn { min-height: 46px; }
.fare__live { margin: 0; display: flex; align-items: center; gap: 8px; font: 500 13.5px/1.3 var(--sans); color: var(--ink-2); }
.fare__live .plate { height: 26px; font-size: 13px; }

/* 4 · vehicles */
.cars__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4.4vw, 80px); align-items: center; }
.cars__img { position: relative; margin: 0; height: clamp(420px, var(--scr-h), 820px); border-radius: 5px; overflow: hidden; background: var(--paper-2); }
.cars__img img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 60%; }
.cars__img figcaption { position: absolute; left: 12px; bottom: 10px; font: 500 11.5px/1.3 var(--sans); letter-spacing: .03em; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 4px rgba(0, 0, 0, .55); }
.cars__body { display: flex; flex-direction: column; gap: clamp(12px, 2.2svh, 20px); max-width: 600px; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.facts li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(255, 255, 255, .6); border: 1px solid var(--line-l); border-radius: 4px; }
.facts svg { width: 24px; height: 24px; flex: none; color: var(--gold-deep); }
.facts span { display: flex; flex-direction: column; gap: 2px; font: 600 var(--t-body)/1.2 var(--sans); }
.facts small { font: 400 var(--t-small)/1.3 var(--sans); color: var(--ink-2); }
.then { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; background: var(--paper-2); border-radius: 4px; }
.then img { width: 150px; height: 96px; object-fit: cover; border-radius: 3px; filter: grayscale(1) contrast(1.05); }
.then p { margin: 0; font: 400 var(--t-small)/1.5 var(--sans); color: var(--ink-2); }
.then b { font: 500 1.35rem/1 var(--serif); color: var(--ink); margin-right: 4px; font-variant-numeric: lining-nums; }
.then__now { display: block; margin-top: 4px; font-weight: 600; color: var(--ink); }
.cars__go { align-self: flex-start; color: var(--ink); min-height: 46px; }

/* 5 · contact */
.contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4.4vw, 80px); align-items: center; }
.contact__body { display: flex; flex-direction: column; gap: clamp(12px, 2svh, 18px); }
.contact__tel { font: 500 clamp(2.2rem, 3.6vw, 3.2rem)/1 var(--serif); text-decoration: none; color: var(--gold-2); font-variant-numeric: lining-nums 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: 10px 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(242, 239, 232, .3); }
.contact__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.contact__acts .btn--line { color: var(--cream); }
.hotel { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px 14px 8px 8px; border: 1px solid var(--line-d); border-radius: 5px; text-decoration: none; background: var(--night-2); transition: border-color .3s, background-color .3s; }
.hotel img { width: 110px; height: 72px; object-fit: cover; border-radius: 3px; }
.hotel span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hotel small { font: 600 var(--t-cap)/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.hotel b { display: flex; align-items: center; gap: 8px; font: 500 var(--h3s)/1.1 var(--serif); }
.hotel > svg { width: 18px; height: 18px; color: var(--gold); }
.hotel:hover { border-color: rgba(214, 176, 98, .6); background: var(--night-3); }
.stars { display: inline-block; width: calc(var(--n, 4) * .74em); height: .7em; background: var(--gold); flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 0l2.35 6.9H19.6l-5.86 4.26 2.24 6.94L10 13.84 4.02 18.1l2.24-6.94L.4 6.9h7.25z'/%3E%3C/svg%3E") 0 0/.74em .7em repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 0l2.35 6.9H19.6l-5.86 4.26 2.24 6.94L10 13.84 4.02 18.1l2.24-6.94L.4 6.9h7.25z'/%3E%3C/svg%3E") 0 0/.74em .7em repeat-x; }
.street { position: relative; margin: 0; height: clamp(360px, var(--scr-h), 780px); border-radius: 5px; overflow: hidden; background: #0f1b2e; border: 1px solid var(--line-d); }
.street__img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.street__pin { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; transform: translate(-7px, -50%); white-space: nowrap; font: 600 13px/1.2 var(--sans); color: rgba(242, 239, 232, .85); pointer-events: none; }
.street__pin small { font: 400 12.5px/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-radius: 50%; border: 2px solid var(--gold-2); background: radial-gradient(circle, var(--gold-2) 0 5px, var(--night) 6px); flex: none; }
.street__pin--home b { font: 500 23px/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(--gold-2); 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__pin--dir { gap: 6px; transform: translate(-50%, 0); padding: 5px 8px; border-radius: 3px; background: rgba(9, 18, 32, .8); font-size: 12.5px; letter-spacing: .04em; }
.street__pin--dir svg { width: 14px; height: 14px; color: var(--gold); transform: rotate(-90deg); }
.street__pin--s { transform: translate(-50%, -100%); }
.street__pin--s svg { transform: rotate(90deg); }
.street figcaption { position: absolute; right: 10px; bottom: 8px; font: 400 11px/1 var(--sans); color: var(--mute); }

/* footer */
.ftr { background: #08111f; 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 { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 18px; align-items: center; }
.ftr__brand .sh { width: 74px; height: 89px; }
.ftr p { margin: 0 0 10px; font: 400 var(--t-small)/1.6 var(--sans); }
.ftr__brand p { margin: 0; color: var(--cream); font: 500 var(--quote)/1.3 var(--serif); }
.ftr .cap { color: var(--cream); margin-bottom: 10px; font-weight: 600; }
.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; }

/* ---------- 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(4, 9, 17, .74); -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, .75); }
.ticket__x { position: absolute; right: 8px; top: 8px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--cream); background: var(--night-3); border: 1px solid var(--line-d); transition: background-color .3s; }
.ticket__card { padding-top: 56px !important; }
.ticket__x:hover { background: rgba(11, 22, 38, .92); }
.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(--gold-deep); margin: 0; }
.ticket__route { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font: 500 var(--h3m)/1.15 var(--serif); padding-right: 30px; }
.ticket__route svg { width: 20px; height: 20px; color: var(--gold-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[hidden] { display: none; }
.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 16px/1 var(--sans); color: var(--ink); color-scheme: light; }
.tf input:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: transparent; }
.tf .inpw input:focus { outline: 0; }
.tf .inpw:focus-within { outline: 2px solid var(--gold); outline-offset: 0; border-color: transparent; }
.tf input::placeholder { color: #8f969f; }
.tf .step { border-color: var(--line-l); background: #fff; height: 46px; }
.tf .step button { color: var(--ink); }
.tf .step button:hover { background: rgba(214, 176, 98, .2); 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: 140px; width: 18px; height: 18px; border-radius: 50%; background: var(--night); }
.tk::before { left: -9px; } .tk::after { right: -9px; }
.tk__head { display: flex; align-items: center; gap: 10px; }
.tk__head .sh { width: 34px; height: 41px; }
.tk__head p { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.tk__head b { font: 700 15px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.tk__head small { font: 400 12px/1 var(--sans); color: var(--ink-2); letter-spacing: .04em; }
.tk__route { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0 16px; border-bottom: 1.5px dashed rgba(14, 26, 43, .25); }
.tk__route div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tk__route div:last-child { text-align: right; }
.tk__route b { font: 500 32px/1 var(--serif); letter-spacing: .01em; 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(--gold-deep); flex: none; }
.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 div[hidden] { display: none; }
.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: 500 34px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.tk__price small { flex-basis: 100%; font: 400 13px/1.35 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(214, 176, 98, .16); border-radius: 4px; }
.tk__done[hidden] { display: none; }
.tk__done svg { width: 24px; height: 24px; color: var(--gold-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__note { margin: 0; font: 500 11.5px/1.3 var(--sans); letter-spacing: .04em; color: var(--gold-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.45rem; }
  .tk__route b { font-size: 27px; }
  .tk::before, .tk::after { top: 128px; }
  .ticket__card { padding-top: 14px !important; }
}

/* ---------- 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 11px/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(--gold-deep); }
.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: 500 22px/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: 13.5px; padding: 0 14px; }
.note__fine { font-size: 12.5px !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(11, 22, 38, .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(--gold); color: #141006; font: 600 16px/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; }
}
.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.2rem, min(3.6vw, 5.8svh), 4rem);
}
@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(2.05rem, 8.8vw, 2.5rem); } }
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: 860px) and (min-width: 900px) {
  :root { --h2s: clamp(2rem, min(3.3vw, 5.6svh), 3.1rem); }
  .lrow { min-height: 37px; }
  .lrow__n, .lrow__v { font-size: 15px; }
  .list__foot { margin-top: 8px; padding-top: 8px; }
  .air__head .lead { font-size: 15.5px; }
  .chip { height: 36px; }
  .fare { padding: 12px 14px; }
  .facts li { padding: 9px 12px; }
  .then img { height: 80px; }
}
@media (max-height: 820px) and (min-width: 900px) { .ski__body .lead { display: none; } }
@media (max-height: 800px) and (min-width: 900px) { .lrow { min-height: 33px; } .air__head .lead { display: none; } .list__grp { margin-top: 6px; } }
@media (max-height: 760px) and (min-width: 900px) {
  .air__head .lead, .ski__body .lead { display: none; }
  .lrow { min-height: 32px; }
  .list__grp { margin-top: 6px; }
  .cars__body .lead { display: none; }
}
/* tablets (900–1199): narrower columns */
@media (max-width: 1199px) and (min-width: 900px) {
  .list__cols, .lrow { grid-template-columns: minmax(0, 1fr) 58px 70px 70px; }
  .lrow__n small { display: none; }
  .list__traffic { display: none; }
  .list__foot p { font-size: 12.5px; }
  .fare__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fare__c--pp { grid-column: 1 / -1; }
  .dest { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chip { font-size: 13px; padding: 0 4px; }
  .chip svg { display: none; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .facts li { padding: 8px 12px; }
  .then { grid-template-columns: 110px minmax(0, 1fr); }
  .then img { width: 110px; height: 80px; }
  .hotel { grid-template-columns: 84px minmax(0, 1fr) auto; }
  .hotel img { width: 84px; height: 60px; }
}
@media (max-width: 899px) {
  .air__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "map" "list"; row-gap: 12px; }
  .air__head { grid-template-columns: minmax(0, 1fr); }
  .air__head .lead { display: none; }
  .fmap { height: clamp(130px, 19svh, 220px); min-height: 0; }
  .fmap__leg { display: none; }
  .fmap figcaption { display: none; }
  .list__cols, .lrow { grid-template-columns: minmax(0, 1fr) 46px 58px 58px; gap: 4px; }
  .list__cols { padding: 0 8px 5px; font-size: 10px; letter-spacing: .1em; }
  .list__cols small { font-size: 10.5px; }
  .lrow { min-height: 33px; padding: 0 8px; }
  .lrow__name { gap: 8px; }
  .lrow__code { width: 42px; height: 23px; font-size: 11px; }
  .lrow__n { font-size: 14px; }
  .lrow__n small { display: none; }
  .lrow__v { font-size: 14px; }
  .list__grp, .lrow[data-k="blz"], .lrow[data-k="fk"], .lrow[data-k="lan"] { display: none; }
  .list__foot { margin-top: 8px; padding-top: 8px; }
  .list__foot p { display: none; }
  .list__go { width: 100%; }
  .ski__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lmap { order: 2; height: clamp(150px, 22svh, 240px); }
  .lmap figcaption { display: none; }
  .ski__body { display: contents; }
  .ski__body > .h-label, .ski__body > .h2 { order: 0; }
  .ski__body .lead { display: none; }
  .ski__ctl { order: 1; }
  .dest { order: 3; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .fare { order: 4; padding: 10px 12px; }
  .chip { height: 32px; font-size: 12.5px; padding: 0 4px; }
  .chip svg { display: none; }
  .fare__route { margin-bottom: 8px; font-size: 1.15rem; }
  .fare__route small { flex-basis: auto; margin-left: auto; font-size: 12px; }
  .fare__grid { gap: 5px; }
  .fare__c { padding: 7px 8px; }
  .fare__c dt { font-size: 10px; letter-spacing: .06em; }
  .fare__c dt small { font-size: 10.5px; }
  .fare__c dd { font-size: 1.45rem; margin-top: 4px; }
  .fare__c--pp dd { font-size: 1.1rem; }
  .fare__foot { margin-top: 8px; }
  .fare__foot .btn { flex: 1; min-height: 44px; }
  .fare__live { display: none; }
  .cars__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cars__img { height: clamp(150px, 24svh, 260px); }
  .cars__body { gap: 12px; }
  .cars__body .lead { display: none; }
  .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5px; }
  .facts li { padding: 8px 10px; gap: 8px; }
  .facts svg { width: 20px; height: 20px; }
  .then { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 8px; }
  .then img { width: 96px; height: 70px; }
  .cars__go { width: 100%; }
  .contact { min-height: 100vh; min-height: 100svh; }
  .contact__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .contact__body { gap: 12px; }
  .street { height: clamp(150px, 24svh, 280px); }
  .ftr__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ftr__brand { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
  .ski__ctl .seg button { padding: 0 12px; }
  .dn__o { padding: 0 10px; font-size: 13px; }
  .contact__list div { grid-template-columns: 70px minmax(0, 1fr); padding: 7px 0; }
  .contact__tel { font-size: 2.1rem; }
  .contact__acts .btn { flex: 1 1 auto; }
  .hotel { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 10px; padding: 6px 10px 6px 6px; }
  .hotel img { width: 76px; height: 52px; }
  .pin:not(.pin--home) small { display: none; }
  .pin b { font-size: 11px; }
  .pin--home b { font-size: 17px; }
  .street__pin--home b { font-size: 19px; }
  .facts small { display: none; }
  .then p { font-size: 13px; line-height: 1.4; }
}
@media (max-width: 380px) {
  .list__cols, .lrow { grid-template-columns: minmax(0, 1fr) 42px 54px 54px; }
  .lrow__code { width: 38px; }
  .lrow__n, .lrow__v { font-size: 13.5px; }
  .dest { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-height: 780px) and (max-width: 899px) {
  .lrow { min-height: 28px; }
  .list__foot { display: none; }
  .air__head .h-label { display: none; }
  .fmap { height: clamp(100px, 14svh, 160px); }
  .dest { grid-template-columns: none; grid-template-rows: repeat(2, 32px); grid-auto-flow: column; grid-auto-columns: minmax(92px, max-content); overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); }
  .dest::-webkit-scrollbar { display: none; }
  .lmap { height: clamp(110px, 17svh, 200px); }
  .cars__img { height: clamp(120px, 18svh, 220px); }
  .street { height: clamp(130px, 19svh, 240px); }
  .then { display: none; }
  .hotel { display: none; }
}

/* ======================================================================
   Type system: the roles, mapped once (keep last)
   ====================================================================== */
:root {
  --t-lab: 12px; --t-cap: 11.5px; --t-lead: 18px; --t-body: 16px; --t-small: 14.5px;
  --h3m: clamp(1.7rem, 2.2vw, 2.05rem);
  --h3s: clamp(1.4rem, min(1.8vw, 3svh), 1.75rem);
  --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: 15.5px; --t-body: 15px; --t-small: 13.5px; --h3m: 1.55rem; --h3s: 1.3rem; --quote: 1.25rem; } }
.h-label { margin: 0; font: 600 var(--t-lab)/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.sec--snow .h-label { color: var(--royal); }
.sec--paper .h-label { color: var(--gold-deep); }
.cap { font: 500 var(--t-cap)/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }