/* ============================================================
   ВЫСОТА 1271 — Shared styles
   Aviation-themed flight simulator site
   ============================================================ */
@import url('assets/fonts.css');

:root{
  --bg: oklch(0.16 0.018 250);
  --bg-2: oklch(0.16 0.018 250); /* unified with --bg so the whole site shares one dark-blue background */
  --surface: oklch(0.22 0.022 250);
  --line: oklch(0.32 0.018 250);
  --line-2: oklch(0.40 0.018 250);
  --fg: #F0EBE3;
  --fg-dim: oklch(0.72 0.012 80);
  --fg-mute: oklch(0.55 0.012 80);
  --accent: oklch(0.82 0.09 235) !important;
  --accent-2: oklch(0.80 0.10 60) !important;
  --warn: oklch(0.78 0.13 25);

  /* ── Typography system ─────────────────────────────────
     Единый шрифт на весь сайт — Montserrat (без Italic).
     Разные роли сохранены через веса:
       --font-display  Montserrat 800  → большие заголовки
       --font-ui       Montserrat 400  → основной текст
       --font-mono     Montserrat 500  → айди, коды, eyebrows
     Old --f-* aliases keep legacy rules working. */
  --font-display: "Montserrat", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-ui:      "Montserrat", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "Montserrat", ui-monospace, Menlo, monospace;

  --f-sans:  var(--font-ui);
  --f-body:  var(--font-ui);
  --f-serif: var(--font-ui);   /* legacy alias — never actually serif */
  --f-mono:  var(--font-mono);

  /* Weight scale — three steps */
  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    800;

  /* Fluid size scale (mobile → desktop, one strategy) */
  --text-xs:   clamp(11px, 0.7rem + 0.1vw, 12px);
  --text-sm:   clamp(13px, 0.8rem + 0.15vw, 14px);
  --text-base: clamp(15px, 0.95rem + 0.2vw, 17px);
  --text-lead: clamp(18px, 1.1rem  + 0.4vw, 22px);
  --text-h2:   clamp(28px, 1.5rem  + 2vw,   48px);
  --text-h1:   clamp(36px, 2rem    + 4vw,   84px);

  /* Page-top title — used on every page's first heading (about, training,
     simulator, offers, pricing, routes, route detail). Smaller and more
     uniform than the display hero on the home page. */
  --text-page-title: clamp(32px, 4.4vw, 60px);

  --lh-tight:  1.05;
  --lh-snug:   1.25;
  --lh-normal: 1.55;

  /* Max-line-length («measure») tokens — line lengths follow the 50–75 CPL
     readability research consensus. Use ch so they scale with font size. */
  --prose-max:    min(100%, 65ch);  /* body paragraphs */
  --lead-max:     min(100%, 48ch);  /* lead / intro paragraphs */
  --headline-max: min(100%, 32ch);  /* display + section headlines */
  --meta-max:     min(100%, 40ch);  /* captions, side notes */

  /* ─────────────────────────────────────────────────────────────
     Spacing scale — 8-point grid (the industry standard).
     Use these tokens instead of raw px so the whole rhythm of the
     site can be re-tuned by editing one variable. */
  --space-1:   4px;    /* hairline */
  --space-2:   8px;    /* tight gap */
  --space-3:  12px;
  --space-4:  16px;    /* base paragraph gap */
  --space-5:  20px;
  --space-6:  24px;    /* card padding tier 1 */
  --space-7:  32px;    /* card padding tier 2 */
  --space-8:  40px;
  --space-9:  48px;    /* section header → content default */
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 120px;

  /* Semantic spacing — these are what page-level rules should use */
  --section-pad-y:    clamp(64px, 8vw, 96px); /* between major sections */
  --section-head-gap: var(--space-9);          /* eyebrow+h2 → content */
  --block-gap:        var(--space-7);          /* sibling blocks within a section */
}

/* ============================================================
   Global reset — use border-box everywhere so `width`/`max-width`
   include padding + border. Standard practice (CSS-Tricks/Inherit).
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* ============================================================
   SECTION RHYTHM (Phase B of spacing audit)
   One rule controls the vertical space between every section
   on every page. Override per-section only when truly needed.
   :where() keeps specificity 0 so component opt-outs win.
   ============================================================ */
:where(main section, #root > section) {
  padding-block: var(--section-pad-y);
}
/* Hero-like sections manage their own height — opt out. */
.hero,
.routes-hero,
.route-hero-full,
.hero-offer,
.page-head {
  padding-block: 0;
}
/* The wrapper around the first content section on inner pages
   already has page-head spacing; cancel double-up. */
main.page-top > .container > section:first-of-type,
main.page-top > .container > header + section {
  padding-block-start: 0;
}
/* Section-h (eyebrow + h2) → content gap, unified */
.section-h + *,
.section-h ~ .adv-cards,
.section-h ~ .about-grid,
.section-h ~ .tiers,
.section-h ~ .reviews-grid,
.section-h ~ .faq-list,
.section-h ~ .stage,
.section-h ~ .specsheet,
.section-h ~ .hw-grid,
.section-h ~ .controls-grid,
.section-h ~ .rules-grid {
  margin-top: var(--section-head-gap) !important;
}

/* ============================================================ */
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img{max-width:100%;display:block}

/* ============================================================
   Text-wrap defaults — prevent orphans + balance headings.
   Apply globally; specific components may opt out with
   text-wrap: nowrap / wrap as needed.
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.section-h h2, .page-head h1, .brief-head h1,
.hero-headline, .cta h2, .craft-intro h2, .fs-title,
.hero-offer h2, .cert-content h3, .events-text h3,
.request h3, .booking h3, .rules-group .group-h h3,
.route-brief h2, .route-title, .cockpit-desc h3,
.rec-body h3, .faq-contact h4, .faq-q,
.tier-name, .adv-title, .rp-title, .rv-name, .offer h3,
.tabs button .lbl, .tl h4, .member .name,
.fs-body h3, .failure-card h3, .rn-card h3,
.route-aside-settings .ras-head h3, .route-aside-settings .ras-title,
.cert-card .cert-title, .hw h4, .qa .q, .specsheet h3,
.vf-title, .rules-warning .rw-mark {
  text-wrap: balance;
}
p, li,
.faq-a, .adv-desc, .rp-desc, .offer p, .hero-sub p,
.about-grid p, .about-grid .lead, .craft-intro .lede,
.rules-section .rules-lede, .rules-list li .rl-txt,
.rules-warning p, .controls-section .note,
.route-brief p, .route-aside-settings p,
.cockpit-desc p, .rec-body p, .request p,
.cert-content p, .events-text p, .booking p,
.cta-row p, .faq-contact p, .story p, .tl p,
.member p, .hw p, .qa .a, .rn-card p,
.fs-body p, .failure-card p, .route .desc,
.spec-list .k, .ft p {
  text-wrap: pretty;
  max-width: var(--prose-max);
}
/* Lead-style intros get tighter measure */
.about-grid .lead,
.craft-intro .lede,
.story .lead,
.rules-section .rules-lede,
.hero-headline-sub {
  max-width: var(--lead-max);
}

/* ---------- atoms ---------- */
.mono{font-family:var(--f-mono);font-weight:400;letter-spacing:.02em;text-transform:uppercase;font-size:11px;color:var(--fg-mute)}
.mono-sm{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mute)}
.serif{font-family:var(--f-serif);font-weight:500}
.container{width:100%;max-width:1440px;margin:0 auto;padding:0 40px}
@media (max-width: 720px){ .container{padding:0 20px} }

.hr{height:1px;background:var(--line);width:100%}
.hr-v{width:1px;background:var(--line);align-self:stretch}

.dot{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;vertical-align:middle;margin-right:8px;box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent)}

/* ascii corner brackets */
.bracket{position:relative}
.bracket::before,.bracket::after,
.bracket > .brk-bl, .bracket > .brk-br{
  content:"";position:absolute;width:10px;height:10px;border-color:var(--fg-dim);border-style:solid
}
.bracket::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.bracket::after{top:-1px;right:-1px;border-width:1px 1px 0 0}
.bracket > .brk-bl{bottom:-1px;left:-1px;border-width:0 0 1px 1px;position:absolute;width:10px;height:10px;border-color:var(--fg-dim);border-style:solid}
.bracket > .brk-br{bottom:-1px;right:-1px;border-width:0 1px 1px 0;position:absolute;width:10px;height:10px;border-color:var(--fg-dim);border-style:solid}

/* striped placeholder */
.ph{
  position:relative;width:100%;height:100%;
  background:
    repeating-linear-gradient(135deg,
      oklch(0.24 0.022 250) 0 18px,
      oklch(0.21 0.022 250) 18px 36px);
  overflow:hidden;
}
.ph::after{
  content:""; position:absolute; inset:12px; border:1px dashed color-mix(in oklab, var(--fg-mute) 50%, transparent);
}
.ph-label{
  position:absolute;left:18px;top:18px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-dim);
  background:color-mix(in oklab, var(--bg) 80%, transparent);
  padding:4px 8px;border:1px solid var(--line);
}
.ph-tag{
  position:absolute;right:18px;bottom:18px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;
  color:var(--fg-mute);
}

/* button */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  height:44px;padding:0 18px;border-radius:999px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  transition:all .25s ease;
  border:1px solid var(--line-2);
  color:var(--fg);
}
.btn-primary{
  background:var(--fg);color:var(--bg);border-color:var(--fg);
}
.btn-primary:hover{ background: color-mix(in oklab, var(--fg) 88%, var(--accent)); }
.btn-ghost:hover{ border-color: var(--accent); color: var(--accent); }
.btn .arr{display:inline-block;transform:translateY(-1px)}

/* ============================================================
   AVIATION ATOMS
   ============================================================ */

/* HUD strip — fixed top status bar above nav */
.hud{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:28px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  display:flex;align-items:stretch;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
}
.hud .h-cell{
  padding:0 14px;display:flex;align-items:center;gap:8px;
  border-right:1px solid var(--line);color:var(--fg-mute);
  white-space:nowrap;
}
.hud .h-cell .k{color:var(--fg-mute)}
.hud .h-cell .v{color:var(--fg-dim)}
.hud .h-cell.live{ color: var(--accent); }
.hud .h-cell.live::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
  animation: pulse 1.6s ease-in-out infinite;
}
.hud .h-flex{flex:1}
.hud .h-cell.right{justify-content:flex-end}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }

.hud-scroll{
  flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;
  border-right:1px solid var(--line);
}
.hud-scroll-track{
  display:flex;gap:32px;white-space:nowrap;color:var(--fg-mute);
  animation: hudslide 60s linear infinite;padding-left:24px;
}
@keyframes hudslide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

@media (max-width:720px){ .hud{font-size:9px} .hud .h-cell{padding:0 10px} }

/* runway stripes — horizontal divider with central dashed line */
.runway{
  position:relative;height:36px;width:100%;
  background: var(--bg);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.runway::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);
  background-image: linear-gradient(to right, var(--fg-dim) 50%, transparent 50%);
  background-size: 36px 2px;
}
.runway .rwy-tag{
  position:absolute;left:24px;top:50%;transform:translateY(-50%);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;color:var(--fg-mute);
  background:var(--bg);padding:0 12px;
}
.runway .rwy-tag.right{ left:auto;right:24px; }

/* runway threshold (vertical stripes — for hero / cta accent) */
.threshold{
  display:flex;gap:6px;align-items:center;
}
.threshold .stripe{width:8px;height:48px;background:var(--fg-dim);opacity:.5}
.threshold .stripe.on{opacity:1;background:var(--accent)}

/* compass rose — pure CSS circular tick mark device */
.compass{
  position:relative;width:120px;height:120px;border:1px solid var(--line-2);border-radius:50%;
  background: radial-gradient(circle, transparent 60%, color-mix(in oklab, var(--accent) 8%, transparent));
}
.compass .needle{
  position:absolute;left:50%;top:8px;bottom:50%;width:2px;background:var(--accent);transform-origin:bottom center;
  transition: transform .8s ease;
}
.compass .needle::after{
  content:"";position:absolute;top:-3px;left:50%;transform:translateX(-50%);
  width:8px;height:8px;background:var(--accent);clip-path:polygon(50% 0,100% 100%,0 100%);
}
.compass .tick{
  position:absolute;left:50%;top:0;width:1px;height:8px;background:var(--fg-mute);
  transform-origin: 50% 60px;
}
.compass .lbl{
  position:absolute;font-family:var(--f-mono);font-size:10px;color:var(--fg-dim);letter-spacing:.1em;
}
.compass .lbl.n{top:-18px;left:50%;transform:translateX(-50%);color:var(--accent)}
.compass .lbl.s{bottom:-18px;left:50%;transform:translateX(-50%)}
.compass .lbl.e{right:-18px;top:50%;transform:translateY(-50%)}
.compass .lbl.w{left:-18px;top:50%;transform:translateY(-50%)}
.compass .heading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:14px;color:var(--fg);letter-spacing:.05em;
}

/* artificial horizon — simple ADI gradient */
.adi{
  position:relative;width:100%;aspect-ratio:1;border-radius:50%;
  overflow:hidden;border:1px solid var(--line-2);
  --roll: -8deg;
}
.adi::before{
  content:"";position:absolute;inset:0;
  background: linear-gradient(180deg,
    oklch(0.50 0.10 230) 0%,
    oklch(0.55 0.10 230) 50%,
    oklch(0.40 0.08 50) 50%,
    oklch(0.35 0.08 50) 100%);
  transform: rotate(var(--roll)) scale(1.4);
  transition: transform .8s ease;
}
.adi::after{
  content:"";position:absolute;left:10%;right:10%;top:50%;height:2px;background:var(--fg);
  box-shadow: 0 -8px 0 -7px var(--fg), 0 8px 0 -7px var(--fg);
}
.adi .center{
  position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;
  background:var(--accent-2);transform:translate(-50%,-50%);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--accent-2) 25%, transparent);
}

/* altimeter readout */
.altimeter{
  display:inline-flex;align-items:baseline;gap:6px;
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  color:var(--fg);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  border:1px solid var(--line);
  padding:6px 10px;
}
.altimeter .v{font-size:18px;letter-spacing:.04em}
.altimeter .u{font-size:9px;letter-spacing:.1em;color:var(--fg-mute);text-transform:uppercase}

/* METAR style box */
.metar{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.02em;
  color:var(--fg-dim);line-height:1.6;
  border:1px solid var(--line);padding:14px 16px;
  background: color-mix(in oklab, var(--bg-2) 90%, transparent);
}
.metar .ttl{display:block;font-size:9px;letter-spacing:.18em;color:var(--fg-mute);text-transform:uppercase;margin-bottom:6px}
.metar .v{color:var(--accent)}

/* callsign tag */
.callsign{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:999px;padding:4px 10px;
  color:var(--fg-dim);
}
.callsign::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* ATIS / dispatch monospace info card */
.dispatch{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;line-height:1.65;
  color:var(--fg-dim);border:1px solid var(--line);
  padding:18px 20px; background:color-mix(in oklab, var(--bg-2) 80%, transparent);
  position:relative;
}
.dispatch::before{
  content:"ATIS · INFO";position:absolute;top:-1px;left:18px;transform:translateY(-50%);
  font-size:9px;letter-spacing:.2em;color:var(--accent);background:var(--bg);padding:0 8px;
}
.dispatch .k{color:var(--fg-mute);width:60px;display:inline-block}
.dispatch .v{color:var(--fg)}

/* map grid background */
.map-grid{
  background:
    linear-gradient(var(--bg) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, var(--bg) 1px, transparent 1px) 0 0/40px 40px,
    color-mix(in oklab, var(--bg-2) 90%, transparent);
  background-blend-mode: normal;
  position:relative;
}
.map-grid::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(color-mix(in oklab, var(--fg-mute) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--fg-mute) 12%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* TOP NAV */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:block;pointer-events:none;
}
.nav-inner{
  pointer-events:auto;
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 40px;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border:0;
  border-bottom:1px solid color-mix(in oklab, var(--fg) 12%, transparent);
  border-radius:0;
}
@media (min-width: 1041px){
  /* Veronica: элементы хэдера выровнены по центру */
  .nav-inner{ justify-content:center; }
}
/* Veronica: шрифт внутри навигации — Igra Sans */
.nav-inner, .nav-brand, .nav-brand-text, .nav li a, .nav .nav-cta{ font-family: var(--f-sans); }
.nav-brand{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:13px;letter-spacing:.18em;color:var(--fg);
  padding-right:17px;border-right:1px solid var(--line);
}
.nav-brand-logo{
  width:32px;height:32px;display:block;
  object-fit:contain;padding:5px;
  border:1px solid color-mix(in oklab, #fff 45%, transparent);
  border-radius:8px;background:transparent;
  filter: brightness(0) invert(1); /* force pure white silhouette */
  opacity:.92;
}
.nav-brand-text{display:inline-block;line-height:1}
.nav ul{display:flex;gap:5px;list-style:none;margin:0;padding:0 7px}
.nav li a{
  display:inline-block;padding:10px 15px;border-radius:999px;
  font-size: var(--text-base);color:var(--fg-dim);transition:all .2s ease;
  position:relative;
}
.nav li a:hover{ color:var(--fg); background: color-mix(in oklab, var(--fg) 6%, transparent); }
.nav li a.active{ color:var(--fg); background: color-mix(in oklab, var(--accent) 14%, transparent); }
.nav .nav-cta{
  height:43px;padding:0 17px;border-radius:999px;
  background:var(--accent);color:var(--bg);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
}
.nav .nav-cta:hover{background:color-mix(in oklab, var(--accent) 82%, var(--fg));color:var(--bg)}
.nav .nav-login{
  height:43px;padding:0 16px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--fg);
  font-family:var(--f-sans);font-size:12px;letter-spacing:.02em;
  text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;
  transition:border-color .2s, color .2s, background .2s;
}
.nav .nav-login svg{opacity:.85}
.nav .nav-login:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in oklab, var(--accent) 8%, transparent)}
@media (max-width: 1040px){ .nav .nav-login{ display:none; } }

/* hamburger button — only shown on mobile */
.nav-burger{
  display:none;
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line-2);
  background: transparent;
  cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:4px;
  transition:all .2s ease;
}
.nav-burger:hover{ border-color:var(--accent); }
.nav-burger span{
  display:block;width:14px;height:1.5px;background:var(--fg);
  transition: transform .25s ease, opacity .25s ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(5.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1040px){ .nav ul{display:none} }
@media (max-width: 1040px){
  .nav-burger{ display:inline-flex; }
  .nav .nav-cta{ display:none; } /* CTA moves into the menu */
}

/* ============================================================
   MOBILE MENU — full-screen aviation panel
   ============================================================ */
.mob-menu{
  position:fixed;inset:0;z-index:80;
  pointer-events:none;
}
.mob-menu-backdrop{
  position:absolute;inset:0;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  opacity:0;transition: opacity .3s ease;
}
.mob-menu-panel{
  position:absolute;top:0;right:0;bottom:0;
  width: min(420px, 92vw);
  background: var(--bg);
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.32, .72, 0, 1);
  box-shadow: -12px 0 40px rgba(0,0,0,.4);
  /* Aviation map-grid backdrop */
  background-image:
    linear-gradient(color-mix(in oklab, var(--fg-mute) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--fg-mute) 6%, transparent) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
  background-position: 0 0;
}
.mob-menu-open{ pointer-events:auto; }
.mob-menu-open .mob-menu-backdrop{ opacity:1; }
.mob-menu-open .mob-menu-panel{ transform: translateX(0); }

.mob-menu-head{
  display:flex;justify-content:space-between;align-items:center;
  padding: 18px 22px;
  border-bottom:1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 90%, transparent);
}
.mob-menu-head-brand{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;color:var(--fg);
}
.mob-menu-x{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line-2);
  font-family:var(--f-mono);font-size:22px;line-height:1;color:var(--fg-dim);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition: all .2s ease;background:transparent;
}
.mob-menu-x:hover{ border-color:var(--accent);color:var(--accent); }

.mob-menu-status{
  display:flex;align-items:center;gap:10px;
  padding: 12px 22px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);
  border-bottom:1px solid var(--line);
  background: color-mix(in oklab, var(--bg-2) 80%, transparent);
}

.mob-menu-list{
  list-style:none;margin:0;padding:0;
  flex:1;overflow-y:auto;
  display:flex;flex-direction:column;
}
.mob-menu-list li{ border-bottom:1px solid var(--line); }
.mob-menu-list a{
  display:grid;grid-template-columns: 44px 1fr 28px;align-items:center;gap:14px;
  padding: 20px 22px;
  color:var(--fg);
  transition: background .25s ease, color .25s ease;
  position:relative;
}
.mob-menu-list a:hover, .mob-menu-list a:focus-visible{
  background: color-mix(in oklab, var(--accent) 6%, transparent);
}
.mob-menu-list a.active{
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}
.mob-menu-list a.active::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);
}
.mob-menu-list .mm-num{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--accent);
  align-self:flex-start;padding-top:5px;
}
.mob-menu-list .mm-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.mob-menu-list .mm-title{
  font-family:var(--f-serif);font-size:28px;font-weight:500;letter-spacing:-.01em;line-height:1;color:var(--fg);
}
.mob-menu-list .mm-sub{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute);
}
.mob-menu-list .mm-arr{
  font-family:var(--f-mono);font-size: var(--text-lead);color:var(--fg-dim);text-align:right;
  transition: transform .2s, color .2s;
}
.mob-menu-list a:hover .mm-arr{ color:var(--accent);transform:translateX(4px); }

.mob-menu-foot{
  padding: 18px 22px 22px;
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:14px;
  background: color-mix(in oklab, var(--bg-2) 80%, transparent);
}
.mob-menu-foot .btn{ justify-content:center;height:44px; }
.mob-menu-foot-meta{
  display:flex;flex-direction:column;gap:6px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--fg-dim);
}
.mob-menu-foot-meta a{ color:var(--fg-dim); }
.mob-menu-foot-meta a:hover{ color:var(--accent); }

/* page top spacer to clear hud + nav */
.page-top-spacer{height: 28px}

/* ============================================================
   SECTION HEADER — reusable across pages
   ============================================================ */
.section-h{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  padding:24px 0 24px;
}
.section-h h2{
  margin:0;color:var(--fg);
}
.section-h h2 em{color:var(--accent)}
.section-h .right{text-align:right;color:var(--fg-dim);font-size: var(--text-sm);max-width:380px}

/* page header */
.page-head{
  padding: clamp(8px, 2svh, 64px) 0 clamp(8px, 1.5svh, 32px);
}
.page-head .crumbs{
  display:flex;gap:10px;font-family:var(--f-mono);font-size:10px;color:var(--fg-mute);letter-spacing:.12em;text-transform:uppercase;margin-bottom:24px;
}
.page-head .crumbs a{color:var(--fg-mute)}
.page-head .crumbs a:hover{color:var(--accent)}
.page-head .crumbs span{color:var(--fg-dim)}
.page-head h1{
  font-size: var(--text-page-title);
  line-height:1.1;letter-spacing:-.02em;margin:0;color:var(--fg);
}
.page-head h1 em{font-family:var(--f-sans);font-style:normal;font-weight:400;color:var(--accent)}
.page-head .ph-meta{
  display:grid;grid-template-columns: 2fr 1fr 1fr;gap:24px;margin-top:48px;
  padding-top:18px;border-top:1px solid var(--line);
}
.page-head .ph-meta .col{display:flex;flex-direction:column;gap:6px}
.page-head .ph-meta p{color:var(--fg-dim);font-size: var(--text-base);line-height:1.55;max-width:560px;margin:0}

/* row util */
.row{display:flex;align-items:center;gap:8px}
.between{display:flex;justify-content:space-between;align-items:center}

/* small scroll-reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   LIVE FLIGHT widgets — driven by useLiveFlight()
   ============================================================ */
.live-pip{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background: oklch(0.78 0.18 25); /* warm red */
  box-shadow: 0 0 0 3px color-mix(in oklab, oklch(0.78 0.18 25) 30%, transparent);
  animation: pulse 1.4s ease-in-out infinite;
  flex:0 0 7px;
}

/* Phase chip — small pill used in HUD + cards */
.phase-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 10px;border:1px solid var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;
}
.phase-chip .phase-pip{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
  animation: pulse 1.4s ease-in-out infinite;
}
.phase-chip .phase-en{color:var(--fg-mute);font-size:9px;letter-spacing:.16em;border-left:1px solid color-mix(in oklab, var(--accent) 35%, transparent);padding-left:8px}
.phase-chip-lg{padding:8px 14px;font-size:12px;letter-spacing:.18em}
.phase-chip-lg .phase-pip{width:8px;height:8px}
.phase-chip-lg .phase-en{font-size:10px}

/* Big live-session card */
.live-card{
  border:1px solid var(--accent);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--accent) 6%, var(--bg-2)) 0%, var(--bg) 100%);
  padding:20px;display:flex;flex-direction:column;gap:14px;
  position:relative;overflow:hidden;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 6%, transparent);
}
.live-card::before{
  content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 200% 100%;
  animation: lc-shimmer 3.6s linear infinite;
}
@keyframes lc-shimmer{ 0%{background-position: 200% 0} 100%{background-position:-200% 0} }
.live-card-head{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-dim);
  padding-bottom:12px;border-bottom:1px dashed color-mix(in oklab, var(--accent) 35%, transparent);
}
.live-card-head .live-label{color:var(--fg);letter-spacing:.16em}
.live-card-head .live-callsign{margin-left:auto;color:var(--accent);letter-spacing:.16em}
.live-route{
  display:flex;flex-direction:column;gap:4px;
}
.live-route-arr{
  display:flex;align-items:baseline;gap:14px;
  font-family:var(--f-serif);font-size:42px;font-weight:500;letter-spacing:-.02em;line-height:1;
  color:var(--fg);
}
.live-route-arr .ar{color:var(--accent);font-size:36px}
.live-route-name{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--fg-mute);text-transform:uppercase}

.live-readouts{
  display:grid;grid-template-columns: repeat(4, 1fr);gap:0;
  border-top:1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-bottom:1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}
.live-readouts .lr{
  padding:10px 12px 10px 0;border-right:1px dashed color-mix(in oklab, var(--accent) 25%, transparent);
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
.live-readouts .lr:last-child{border-right:0}
.live-readouts .lr .k{font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;color:var(--fg-mute);text-transform:uppercase}
.live-readouts .lr .v{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:18px;letter-spacing:.02em;color:var(--fg);
  display:flex;align-items:baseline;gap:2px;
}
.live-readouts .lr .v sub{font-size:9px;color:var(--fg-mute);letter-spacing:.08em;font-family:var(--f-mono);text-transform:uppercase}

.live-progress{display:flex;flex-direction:column;gap:6px}
.live-progress-bar{
  height:3px;background:var(--accent);
  transition: width .8s ease;
  box-shadow: 0 0 8px color-mix(in oklab, var(--accent) 60%, transparent);
}
.live-progress{
  position:relative;
}
.live-progress-bar{position:relative;z-index:1}
.live-progress::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background: color-mix(in oklab, var(--accent) 18%, transparent);
}
.live-progress-labels{
  display:flex;justify-content:space-between;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;color:var(--fg-mute);text-transform:uppercase;
}

.live-comm{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;line-height:1.5;
  padding:10px 12px;background:color-mix(in oklab, var(--bg) 60%, transparent);
  border:1px solid color-mix(in oklab, var(--accent) 25%, transparent);
}
.live-comm .side{
  font-size:9px;letter-spacing:.18em;color:var(--accent);
  padding:2px 6px;border:1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  flex:0 0 auto;text-transform:uppercase;
}
.live-comm .msg{color:var(--fg-dim);text-transform:uppercase}

.live-foot{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-dim);
}
.live-card-compact .live-route-arr{font-size:32px}
.live-card-compact .live-card-head{padding-bottom:8px}

/* Live strip — full-width bar */
.live-strip{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background: color-mix(in oklab, var(--bg-2) 80%, transparent);
  margin-bottom: 16px;
}
.live-strip-inner{
  max-width:1440px;margin:0 auto;padding:10px 40px;
  display:flex;align-items:center;gap:0;
  font-family:var(--f-mono);font-size:11px;
}
.ls-cell{
  display:flex;flex-direction:column;gap:2px;
  padding:0 18px;border-right:1px solid var(--line);
  min-width:0;
}
.ls-cell:last-child{border-right:0}
.ls-cell b{color:var(--fg);font-weight:500;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.ls-cell span{color:var(--fg-mute);font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.ls-pip{flex-direction:row;gap:8px;align-items:center;padding-left:0;color:var(--accent);letter-spacing:.16em;text-transform:uppercase}
.ls-pip span{color:var(--accent);font-size:11px}
.ls-phase{padding:0 18px}
.ls-bar{flex:1;min-width:0;padding-right:0;border-right:0}
.ls-bar-track{
  position:relative;height:3px;background:color-mix(in oklab, var(--accent) 18%, transparent);
  margin-bottom:5px;
}
.ls-bar-fill{
  height:100%;background:var(--accent);
  transition: width .8s ease;
  box-shadow: 0 0 6px color-mix(in oklab, var(--accent) 60%, transparent);
}
@media (max-width: 900px){
  .live-strip-inner{padding:10px 20px;overflow-x:auto;flex-wrap:nowrap}
  .ls-cell{padding:0 12px;flex-shrink:0}
}

/* page-top-spacer needs to be bigger when LiveStrip is present.
   Pages that include the strip should add .has-live-strip on main. */
main.has-live-strip{padding-top:0}

/* ============================================================
   FOOTER — reusable
   ============================================================ */
footer{padding:60px 0 24px;background:var(--bg);border-top:1px solid var(--line)}
.ft-grid{display:grid;grid-template-columns: 1.4fr .9fr .9fr .9fr;gap:48px;align-items:start}
@media (max-width:900px){ .ft-grid{grid-template-columns:1fr 1fr;gap:32px} }
@media (max-width:560px){ .ft-grid{grid-template-columns:1fr} }
.ft-brand{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:13px;letter-spacing:.18em;color:var(--fg);margin-bottom:18px;
}
.ft-brand-logo{
  width:34px;height:34px;display:block;object-fit:contain;padding:5px;
  border:1px solid color-mix(in oklab, #fff 45%, transparent);border-radius:8px;background:transparent;
  filter: brightness(0) invert(1);opacity:.92;
}
.ft p{color:var(--fg-dim);font-size: var(--text-sm);line-height:1.55;max-width:380px;margin:0 0 24px}
.ft h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute);margin:0 0 16px;font-weight:400}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ft a{color:var(--fg-dim);font-size: var(--text-base);transition:color .2s}
.ft ul li span{color:var(--fg-dim);font-size: var(--text-base)}
.ft-copy{appearance:none;background:none;border:0;padding:0;font:inherit;font-size:var(--text-base);color:var(--fg-dim);cursor:pointer;position:relative;transition:color .2s}
.ft-copy::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;opacity:.35;transition:opacity .2s}
.ft-copy:hover{color:var(--accent)}
.ft-copy:hover::after{opacity:1}
.ft-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);z-index:120;display:flex;align-items:center;gap:10px;padding:12px 18px;background:color-mix(in oklab,var(--bg) 82%,#000);border:1px solid var(--line);color:var(--fg);font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .28s,transform .28s cubic-bezier(.22,1,.36,1);backdrop-filter:blur(8px)}
.ft-toast.on{opacity:1;transform:translate(-50%,0)}
.ft-toast-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ft a:hover{color:var(--accent)}
.ft-socials{display:flex;gap:10px;margin-top:8px}
.ft-socials a{
  width:36px;height:36px;border:1px solid var(--line-2);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:11px;
}
.ft-socials a:hover{border-color:var(--accent);color:var(--accent)}
.ft-bottom{
  margin-top:48px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11px;color:var(--fg-mute);letter-spacing:.08em;text-transform:uppercase;
  flex-wrap:wrap;gap:10px;
}


/* ============================================================
   MOBILE — comprehensive responsive fixes for <=720px
   ============================================================ */
@media (max-width: 720px){
  /* HUD strip — keep core flight data, drop coords/ICAO; condense */
  .hud{ font-size:9px; letter-spacing:.06em; height:32px; }
  .hud .h-cell{ padding:0 8px; gap:5px; }
  .hud .h-cell.live span{ display:none; }
  .hud .h-cell.live{ padding:0 8px 0 10px; }
  /* Hide non-essential cells on small screens — keep LIVE pip, callsign, FL, HDG, scrolling METAR, phase */
  .hud .h-cell.hide-sm{ display:none; }
  .hud .h-cell.right{ padding:0 8px; }
  /* Allow horizontal overflow rather than break flex */
  .hud{ overflow:hidden; }

  /* Nav pill: only logo + burger on mobile (ul + CTA already hidden at 900px) */
  .nav{ top:38px; }
  .nav-inner{ padding:6px 6px 6px 12px; gap:6px; }
  .nav-brand{ padding-right:10px; font-size:10px; letter-spacing:.14em; }
  .nav-brand-logo{ width:18px; height:18px; }
  .nav .nav-cta{ height:32px; padding:0 12px; font-size:9px; }
  .nav-burger{ width:34px; height:34px; }

  /* Live strip — scroll horizontally, but condense */
  .live-strip-inner{ padding:8px 16px; gap:0; }
  .ls-cell{ padding:0 10px; }
  .ls-cell b{ font-size:11px; }
  .ls-cell span{ font-size:8px; }
  .ls-bar{ min-width:160px; }

  /* Hero — stack meta row */
  .hero{ padding-top:120px; }
  .hero-meta{ flex-direction:column; align-items:flex-start; gap:14px; padding-bottom:18px; }
  .hero-meta .col{ width:100%; }
  .hero-meta .col[style*="text-align"]{ text-align:left !important; align-items:flex-start !important; }
  .hero-headline{ font-size: 56px !important; letter-spacing:-.03em; }
  .hero-sub-row{ margin-top:28px; gap:24px; }
  .hero-sub p{ font-size:15px; line-height:1.5; }
  .hero-actions .btn{ flex:1; justify-content:center; height:42px; padding:0 12px; font-size:10px; letter-spacing:.08em; }
  .specs{ margin-top:28px; }
  .specs .v{ font-size:26px; }
  .specs > .spec{ padding:14px 14px; }

  /* Instruments — single column with relaxed layout */
  .instruments > div{ flex-direction:column; align-items:flex-start; padding:20px; gap:14px; }
  .compass{ width:96px; height:96px; }
  .compass .heading{ font-size:12px; }
  .compass .lbl{ font-size:9px; }
  .compass .tick{ transform-origin: 50% 48px; }

  /* Section header — stack heading + right meta */
  .section-h{ flex-direction:column; align-items:flex-start; gap:14px; padding:18px 0 18px; }
  .section-h h2{ font-size: 38px !important; line-height:.98; }
  .section-h .right{ text-align:left !important; max-width:none; font-size:13px; align-items:flex-start !important; }

  /* Page head — single column, smaller h1 */
  .page-head{ padding:40px 0 24px; }
  .page-head h1{ font-size: 44px !important; }
  .page-head .crumbs{ margin-bottom:18px; }
  .page-head .ph-meta{ grid-template-columns: 1fr; gap:18px; margin-top:28px; padding-top:14px; }
  .page-head .ph-meta .col{ padding-bottom:14px; border-bottom:1px dashed var(--line); }
  .page-head .ph-meta .col:last-child{ border-bottom:0; padding-bottom:0; }

  /* Live card — 2x2 readouts + smaller route font */
  .live-card{ padding:14px; gap:12px; }
  .live-card-head{ flex-wrap:wrap; gap:8px; padding-bottom:10px; font-size:9px; }
  .live-route-arr{ font-size:30px !important; gap:10px; }
  .live-route-arr .ar{ font-size:26px; }
  .live-readouts{ grid-template-columns: 1fr 1fr; }
  .live-readouts .lr:nth-child(2){ border-right:0; }
  .live-readouts .lr:nth-child(-n+2){ border-bottom:1px dashed color-mix(in oklab, var(--accent) 25%, transparent); }
  .live-readouts .lr .v{ font-size:16px; }
  .live-comm{ flex-direction:column; align-items:flex-start; gap:6px; padding:8px 10px; }
  .live-comm .msg{ font-size:10px; }
  .live-foot{ flex-direction:column; gap:6px; align-items:flex-start; font-size:8px; }
  .live-foot > span{ text-align:left; }

  /* Phase chip slightly smaller */
  .phase-chip-lg{ padding:6px 10px; font-size:10px; letter-spacing:.14em; }

  /* Showcase tabs — wrap with separator instead of forcing 3 cols */
  .tabs{ flex-direction:column !important; }
  .tabs button{ border-right:0 !important; border-bottom:1px solid var(--line) !important; padding:14px 16px !important; flex:none !important; }
  .tabs button:last-child{ border-bottom:0 !important; }
  .tabs button .lbl{ font-size:18px; }
  /* Stage — shorter on mobile (page-level <style> sets fixed heights; override hard) */
  .stage{ height:auto !important; aspect-ratio: 4/5 !important; min-height:0 !important; }
  .stage .slide .meta{ left:16px; right:16px; bottom:16px; flex-direction:column; align-items:flex-start; gap:12px; }
  .stage .slide .meta .title{ font-size:26px !important; }
  .stage .slide .meta .desc{ font-size:13px; }
  .stage-index{ left:16px; top:16px; font-size:9px; padding:4px 8px; }
  .stage-controls{ right:16px; top:16px; }
  .stage-controls button{ width:36px; height:36px; }

  /* About */
  .about-grid{ margin-top:28px; }
  .about-grid .lead{ font-size:20px; line-height:1.35; margin-bottom:14px; }
  .about-grid p{ font-size:15px; }
  .about-img{ aspect-ratio: 4/4; }

  /* CTA */
  .cta-inner{ padding-block: 80px 40px; }
  .cta h2{ font-size: 44px !important; }
  .cta-row{ flex-direction:column; align-items:flex-start; gap:18px; }

  /* Footer — better stacking */
  footer{ padding:40px 0 18px; }
  .ft-grid{ gap:28px; }
  .ft-bottom{ flex-direction:column; align-items:flex-start; gap:8px; font-size:9px; }
  .ft-brand-logo{ width:24px; height:24px; }
  .ft-brand{ font-size:11px; }
}

/* ============================================================
   MOBILE — ultra-narrow (<=420px) trims
   ============================================================ */
@media (max-width: 420px){
  .container{ padding: 0 16px; }
  .hud .h-cell .k, .hud .h-cell .v{ font-size:9px; }
  .hero-headline{ font-size: 48px !important; }
  .page-head h1{ font-size: 38px !important; }
  .section-h h2{ font-size: 32px !important; }
}

/* ============================================================
   PAGE-SPECIFIC inline-grid fallbacks
   ============================================================ */
@media (max-width: 720px){
  /* About — hangar-text 2 col → 1 col */
  .hangar-text{ grid-template-columns: 1fr !important; gap: 20px !important; }
  /* Offers — cert-types 2 col → 1 col */
  .cert-types{ grid-template-columns: 1fr !important; }
  .cert-card{ left:6%; right:6%; top:8%; bottom:8%; padding:18px 20px; }
  .cert-card .cert-title{ font-size:24px !important; }
  /* Simulator — rec-frames 3 col → 1 col 2 col grid */
  .rec-frames{ grid-template-columns: 1fr 1fr !important; }
  .rec-frames .rec-frame:nth-child(3){ grid-column: 1 / -1; }
  /* Routes map — shorter, more readable */
  .map-zone{ height:380px !important; }
  .wp-sub{ display:none; }
  /* Booking schedule */
  .slot{ padding:12px 14px; font-size:11px; }
  /* Cockpit canvas — hide labels (positioning breaks at small widths) */
  .cockpit-canvas .ck-label{ font-size:8px; padding:3px 5px; }
  .cockpit-canvas{ aspect-ratio: 4/3; }
  /* Hero-offer price block stacks below */
  .hero-offer{ padding:24px; }
  .hero-offer .price-block .now{ font-size:60px; }
  /* Booking form */
  .booking-left, .booking-right{ padding:28px 24px; }
  /* Training */
  .module{ grid-template-columns: 50px 1fr 32px; gap:12px; padding:20px 0; }
  .module .title{ font-size:20px; }
  .module .desc{ font-size:12px; }
  .checklist{ padding:24px; }
  /* Tier cards */
  .tier{ padding:28px 20px; }
  .tier .name{ font-size:30px; }
  .tier .price .v{ font-size:48px; }
  /* Pricing addons */
  .addon{ padding:18px; }
  /* Specs strip */
  .stat .v{ font-size:48px; }
  /* Sim spec sheet */
  .specsheet > .col{ padding:24px; }
  .specsheet .row .v{ font-size:18px; }
  /* Sim hardware */
  .hw{ padding:22px; min-height:0; }
  /* Sim cockpit */
  .cockpit{ gap:24px; }
  /* Sim recording */
  .rec-body{ padding:28px; }
  /* Sim train-cta */
  .train-cta{ grid-template-columns: 1fr !important; padding:28px !important; }
  /* Sim sim-headline */
  .sim-headline{ gap:20px; padding-bottom:32px; }
  .sim-headline .big-stat{ align-items:flex-start; }
  .sim-headline .big-stat .k{ text-align:left; }
  /* Runway divider on small */
  .runway{ height:28px; }
  .runway .rwy-tag{ font-size:9px; letter-spacing:.12em; padding:0 8px; }
  /* Buttons */
  .btn{ height:40px; font-size:10px; padding:0 14px; }
  /* Tweaks panel narrower */
  .twk-panel{ width: calc(100vw - 24px) !important; max-width: 280px; right:12px !important; bottom:12px !important; }
}

/* ============================================================
   Hero / display headline accent — cyan glow on <em> emphasis.
   ============================================================ */
.hero-headline em,
.cta h2 em,
.section-h h2 em,
.page-head h1 em,
.route-brief h2 em,
.route-title em,
.fs-title em,
.request h3 em{
  color: var(--fg) !important;
  text-shadow: none !important;
}

/* About lead paragraph — never bold */
#about .lead, #about p{ font-weight: 400 !important; }

/* ============================================================
   BLOCK / SECTION / PAGE TITLES — Montserrat ExtraBold, white.
   One central rule; per-page overrides should not exist.
   ============================================================ */
.section-h h2, .section-h h2 em,
.page-head h1, .page-head h1 em,
.brief-head h1, .brief-head h1 em,
.hero-headline, .hero-headline em,
.cta h2, .cta h2 em,
.craft-intro h2, .craft-intro h2 em,
.fs-title, .fs-title em,
.hero-offer h2, .hero-offer h2 em,
.cert-content h3, .cert-content h3 em,
.events-text h3, .events-text h3 em,
.request h3, .request h3 em,
.booking h3, .booking h3 em,
.rules-group .group-h h3, .rules-group .group-h h3 em,
.route-brief h2, .route-brief h2 em,
.route-title, .route-title em,
.cockpit-desc h3, .cockpit-desc h3 em,
.rec-body h3, .rec-body h3 em,
.faq-contact h4, .faq-contact h4 em{
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  color: #fff !important;
  text-shadow: none !important;
  letter-spacing: -.02em;
}

/* Page-top + section heading SIZE — uniform fluid scale across all pages.
   Family / weight / color come from the central display rule above. */
.page-head h1,
.brief-head h1,
.rh-panel .route-title,
.section-h h2,
.cta h2,
.craft-intro h2,
.fs-title,
.hero-offer h2,
.cert-content h3,
.events-text h3,
.request h3,
.booking h3,
.rules-group .group-h h3,
.route-brief h2,
.cockpit-desc h3,
.rec-body h3{
  font-size: var(--text-page-title) !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
  white-space: normal !important;
  max-width: var(--headline-max);
}

/* ============================================================
   Semantic typography utility classes
   Apply directly via className: "t-display", "t-h2", etc.
   ============================================================ */
.t-display{ font-family:var(--font-display); font-weight:var(--w-bold); font-size:var(--text-h1); line-height:var(--lh-tight); letter-spacing:-.02em; color:#fff; text-wrap:balance; max-width:var(--headline-max); }
.t-h2     { font-family:var(--font-display); font-weight:var(--w-bold); font-size:var(--text-h2); line-height:var(--lh-snug);  letter-spacing:-.015em; color:#fff; text-wrap:balance; max-width:var(--headline-max); }
.t-lead   { font-family:var(--font-ui); font-weight:var(--w-regular); font-size:var(--text-lead); line-height:1.5; color:var(--fg); text-wrap:pretty; max-width:var(--lead-max); }
.t-body   { font-family:var(--font-ui); font-weight:var(--w-regular); font-size:var(--text-base); line-height:var(--lh-normal); color:var(--fg-dim); text-wrap:pretty; max-width:var(--prose-max); }
.t-meta   { font-family:var(--font-ui); font-weight:var(--w-regular); font-size:var(--text-sm); line-height:1.4; color:var(--fg-mute); text-wrap:pretty; max-width:var(--meta-max); }
.t-mono   { font-family:var(--font-mono); font-weight:var(--w-regular); font-size:var(--text-xs); line-height:1; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-mute); }
.t-nowrap { white-space:nowrap; }

/* ============================================================
   Route detail · full-bleed hover-to-play video
   ============================================================ */
.route-video{
  display:block;
  width:100%;
  height:50vh;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#000;
  position:relative;
  cursor:pointer;
}
.route-video video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}