/* ============================================================================
   AIRWAYS FLIGHT SUPPORT — design system
   ----------------------------------------------------------------------------
   Built from the locked brand, not from a trend. The navy and the orange are
   sampled from the logo file itself (#004F99 and #F86016); the established site
   orange #D94F0F is the primary accent. The logo is never redrawn here — it is
   placed, scaled and given clear space, and nothing else.

   Two surface families, deliberately:
     · APRON  — the dark cinematic environment. Hero, coverage, operations.
     · PAPER  — the light information surface. Facts, tables, profiles.
   Readability wins on paper; atmosphere wins on apron. Theme switching is not
   the concept, so it is not in the primary navigation.

   Orange is an accent and is rationed: calls to action, the active state, one
   rule under a section title. Never a flood.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts -- */
@font-face {
  font-family: "Mulish";
  src: url("/static/fonts/Mulish-variable.woff2") format("woff2-variations");
  font-weight: 200 1000;
  font-style: normal;
  /* Optional, not swap. Both faces are preloaded, so on any cache or
     connection tested they are ready in time and the brand type renders -
     verified on broadband and on a cold 3G load. What optional removes is the
     reflow when a swap arrives late: the hero's height follows its text, so a
     late swap grew the hero and everything painted inside it, which measured
     0.19 of layout shift on a phone. It measures 0.004 now. */
  font-display: optional;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/static/fonts/PlayfairDisplay-variable.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: optional;
}
/* Windows ships no country-flag glyphs, so a regional indicator pair renders
   as two letters in Chrome there. This family supplies the flags and nothing
   else - the unicode-range is the regional indicator block, so it never
   displaces the text families. Twemoji artwork, CC BY 4.0; credited in the
   footer and recorded in static/fonts/FONT_PROVENANCE.json. */
@font-face {
  font-family: "Twemoji Country Flags";
  src: url("/static/fonts/TwemojiCountryFlags.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF;
  /* Swap, unlike the text faces. This one draws flags in place of two
     letters, so arriving late changes a glyph and not a line count - it
     cannot move the layout - and falling back permanently would leave "AU"
     where a flag belongs. */
  font-display: swap;
}

/* --------------------------------------------------------------- tokens -- */
:root {
  /* Brand, sampled from the locked logo asset. Do not adjust. */
  --navy:          #004f99;
  --navy-deep:     #00396f;
  --navy-ink:      #00203f;
  /* The brand orange measured 4.14:1 against white, both ways — under AA for
     text at any size. So it keeps the roles where 3:1 is the rule (rules,
     borders, markers, the active underline) and two accessible relatives take
     the text roles. Neither is a new brand colour: one is the same hue
     darkened for ink on light, the other is the logo's own orange, which is
     already legible on the apron surfaces. */
  --orange:        #d94f0f;   /* established brand accent — non-text roles */
  --orange-ink:    #b8420b;   /* orange text on a light surface  5.49:1 */
  --orange-cta:    #c2450c;   /* white text on orange            5.06:1 */
  --orange-logo:   #f86016;   /* the mark's own orange — text on apron 5.89:1 */
  --orange-soft:   #fdf1eb;

  /* Apron — the dark aviation environment */
  --apron:         #0a1420;
  --apron-2:       #0f1d2d;
  --apron-3:       #16283b;
  --apron-line:    #24384f;
  --apron-ink:     #eef3f8;
  --apron-ink-2:   #b7c6d6;
  --apron-ink-3:   #93a5b9;

  /* Paper — the light information surface, on warm aviation neutrals */
  --paper:         #ffffff;
  --paper-2:       #f7f5f2;
  --paper-3:       #efece7;
  --line:          #e2ddd6;
  --line-2:        #f0ece7;
  --ink:           #14202c;
  --ink-2:         #40506180;
  --ink-2s:        #405061;
  --ink-3:         #5b6b7d;

  /* Evidence status. Quiet on the page, unmistakable when it matters. */
  --ok:            #14664a;
  --ok-bg:         #e6f2ed;
  --provisional:   #7a4f00;
  --provisional-bg:#faf0dc;
  --unverified:    #5b6b7d;
  --unverified-bg: #eef0f3;
  --disputed:      #9c2020;
  --disputed-bg:   #fbeceb;
  --blocked:       #5b3f96;
  --blocked-bg:    #f0ecf9;

  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;

  --sans: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --display: "Playfair Display", "Iowan Old Style", Georgia,
             "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo,
          Consolas, monospace;

  --wrap: 1240px;
  --measure: 68ch;
  --shadow: 0 1px 2px rgba(20, 32, 44, .05),
            0 8px 24px -12px rgba(20, 32, 44, .16);
  --shadow-lift: 0 2px 4px rgba(20, 32, 44, .06),
                 0 18px 40px -18px rgba(20, 32, 44, .28);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ----------------------------------------------------------------- base -- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; }
img, video { height: auto; display: block; }

a { color: var(--navy); text-underline-offset: .18em; }
a:hover { color: var(--orange-ink); }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 900px); margin-inline: auto; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.skip:focus { left: 0; color: #fff; }

/* ------------------------------------------------------------ typography -- */
h1, h2, h3, h4 { margin: 0 0 var(--s-3); font-weight: 600; }

.display {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -.018em;
  font-size: clamp(2.4rem, 5.1vw, 4.3rem);
  margin: 0 0 var(--s-4);
}
.display-2 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.015em;
  font-size: clamp(1.9rem, 3.3vw, 2.9rem);
  margin: 0 0 var(--s-3);
}
h2, .h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.01em;
}
h3, .h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -.005em;
}
h4 { font-family: var(--sans); font-weight: 700; font-size: .95rem; }

.eyebrow {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .15em; color: var(--orange-ink); margin: 0 0 var(--s-3);
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
  max-width: 4rem;
}
.apron-surface .eyebrow, .entity-head.dark .eyebrow,
.hero .eyebrow { color: var(--orange-logo); }
.apron-surface .eyebrow::after,
.entity-head.dark .eyebrow::after,
.hero .eyebrow::after { background: rgba(255,255,255,.2); }

.lede {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--ink-3); max-width: var(--measure); margin: 0 0 var(--s-5);
  line-height: 1.55;
}
.apron-surface .lede { color: var(--apron-ink-2); }

p { max-width: var(--measure); }
.small { font-size: .85rem; color: var(--ink-3); }
.apron-surface .small { color: var(--apron-ink-3); }
.mono { font-family: var(--mono); }

/* --------------------------------------------------------------- header -- */
/* ONE header, on every public page.

   It used to render two ways - transparent with the reversed logo on the
   home page, solid with the colour logo everywhere else - which is why the
   site felt as though a different website had loaded when you clicked in.
   Now: translucent light while the page is at the top so a hero still reads
   as a hero, settling to solid on scroll. The full-colour mark throughout. */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid rgba(0, 32, 63, .07);
  transition: background .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease);
}
.site-head[data-scrolled="true"] {
  background: rgba(255, 255, 255, .97);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px rgba(0, 32, 63, .07);
}
.head-bar {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: 78px; padding: .55rem 0;
}
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { height: 46px; width: auto; }

.primary-nav { display: flex; gap: .15rem; flex: 1 1 auto; flex-wrap: wrap; }
.primary-nav a {
  --nav-ink: var(--ink-2s);
  color: var(--nav-ink); text-decoration: none; font-size: .875rem;
  font-weight: 600; padding: .5rem .68rem; border-radius: var(--r-sm);
  white-space: nowrap; position: relative;
}
.primary-nav a:hover { color: var(--navy); background: var(--paper-2); }
.primary-nav a[aria-current="page"] { color: var(--navy); }
.primary-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: .68rem; right: .68rem; bottom: .22rem;
  height: 2px; background: var(--orange); border-radius: 2px;
}

.head-actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }

.occ {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--orange-cta); color: #fff; text-decoration: none;
  font-weight: 700; font-size: .84rem; letter-spacing: .01em;
  padding: .6rem 1rem; border-radius: var(--r-pill);
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.occ:hover { background: #a83a09; color: #fff; transform: translateY(-1px); }
.occ .dot {
  width: .45rem; height: .45rem; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 .22rem rgba(255, 255, 255, .3);
}
@media (prefers-reduced-motion: no-preference) {
  .occ .dot { animation: pulse 2.6s ease-in-out infinite; }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 .18rem rgba(255,255,255,.28); }
  50%      { box-shadow: 0 0 0 .34rem rgba(255,255,255,.10); }
}

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: .5rem .7rem; cursor: pointer;
  color: var(--ink); font: inherit; font-size: .8rem; font-weight: 700;
}

@media (max-width: 62rem) {
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; background: var(--paper);
    border-bottom: 1px solid var(--line); padding: var(--s-3) 1.25rem var(--s-5);
    box-shadow: var(--shadow);
  }
  .primary-nav[data-open="true"] { display: flex; }
  .primary-nav a {
    padding: .85rem .25rem; font-size: 1rem; color: var(--ink);
    border-bottom: 1px solid var(--line-2);
  }
  .primary-nav a[aria-current="page"]::after { display: none; }
  .head-bar { min-height: 62px; gap: var(--s-3); }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand img { height: 32px; }
  /* The header's operations button is dropped on a phone: the sticky bar at
     the bottom of the screen already carries it, within thumb reach, and two
     of them was what pushed the header off the right edge. */
  .head-actions { display: none; }
}

/* ----------------------------------------------------------------- hero -- */
.hero {
  position: relative; isolation: isolate; background: var(--apron);
  color: var(--apron-ink); overflow: hidden;
  min-height: min(88vh, 780px); display: flex; align-items: flex-end;
  margin-top: -72px; padding-top: 72px;
}
@media (max-width: 62rem) {
  .hero { margin-top: -62px; padding-top: 62px; min-height: 78vh; }
}
.hero-media { position: absolute; inset: 0; z-index: -2; background: #00131f; }
.hero-media img, .hero-media video {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%;
}
.hero-media video { opacity: 0; transition: opacity 1.1s var(--ease); }
.hero-media video[data-ready="true"] { opacity: 1; }
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(0, 24, 46, .93) 0%, rgba(0, 24, 46, .82) 26%,
                    rgba(4, 18, 32, .48) 52%, rgba(4, 18, 32, .18) 74%,
                    rgba(4, 18, 32, .32) 100%),
    linear-gradient(to top, rgba(6, 16, 26, .86) 0%, rgba(6, 16, 26, 0) 42%);
}
/* The hero content sits inside the same measure as the rest of the page.
   .wrap already sets the width; re-declaring it here would override the
   centring, which is exactly the bug this comment replaces. */
.hero-inner { padding: var(--s-8) 0 var(--s-7); }
.hero-copy { max-width: 40rem; }
.hero .display { color: #fff; text-wrap: balance; }
.hero .lede { color: #d6e2ee; max-width: 34rem; }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: var(--s-6);
  padding-top: var(--s-4); border-top: 1px solid rgba(255, 255, 255, .14);
}
.hero-meta div { min-width: 7rem; }
.hero-meta b {
  display: block; font-family: var(--display); font-size: 1.7rem;
  font-weight: 600; color: #fff; line-height: 1;
}
.hero-meta span {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: #a9bccf;
}

/* ---------------------------------------------------------------- search -- */
.searchbox { position: relative; max-width: 38rem; }
.searchbox form { display: flex; gap: .5rem; }
.searchbox input[type="search"] {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 1rem;
  padding: .95rem 1.1rem; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow);
}
.searchbox input[type="search"]::placeholder { color: #7b8798; }
.searchbox button[type="submit"] {
  font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer;
  padding: .95rem 1.35rem; border-radius: var(--r-md); border: 0;
  background: var(--navy); color: #fff;
  transition: background .18s var(--ease);
}
.searchbox button[type="submit"]:hover { background: var(--navy-deep); }

.hero .searchbox input[type="search"] {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .97);
}

.hint { margin: .8rem 0 0; font-size: .8rem; color: #a9bccf; }
.hint b { color: #d6e2ee; font-weight: 600; }
.hero .hint .ex {
  font-family: var(--mono); font-size: .76rem; color: #cfdcea;
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-xs);
  padding: .08rem .34rem; margin-right: .3rem; display: inline-block;
}

.suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + .4rem);
  list-style: none; margin: 0; padding: .3rem; z-index: 30;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lift);
  max-height: 24rem; overflow-y: auto;
}
.suggestions:empty { display: none; }
.suggestions .group {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-3); padding: .6rem .7rem .25rem; font-weight: 700;
}
.suggestions li a {
  display: grid; grid-template-columns: 4.4rem 1fr; gap: .1rem .7rem;
  align-items: baseline; padding: .5rem .7rem; border-radius: var(--r-sm);
  text-decoration: none; color: var(--ink);
}
.suggestions li[aria-selected="true"] a,
.suggestions li a:hover { background: var(--paper-2); }
.suggestions .k {
  font-family: var(--mono); font-size: .78rem; font-weight: 700;
  color: var(--navy); letter-spacing: .02em;
}
.suggestions .n { font-weight: 600; font-size: .92rem; }
.suggestions .s {
  grid-column: 2; font-size: .78rem; color: var(--ink-3);
}

/* -------------------------------------------------------------- sections -- */
section.band { padding: clamp(3rem, 7vw, 5.5rem) 0; }
section.band.tight { padding: clamp(2.2rem, 4vw, 3.2rem) 0; }
.apron-surface {
  background: var(--apron); color: var(--apron-ink);
}
.apron-surface h2, .apron-surface h3, .apron-surface .display-2 { color: #fff; }
.apron-surface a { color: #a8c8ea; }
.apron-surface a:hover { color: var(--orange-logo); }
.paper-2 { background: var(--paper-2); }

.band-head { max-width: 44rem; margin-bottom: var(--s-6); }
.cols-2 { display: grid; gap: var(--s-6); }
@media (min-width: 60rem) {
  .cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cols-2.aside { grid-template-columns: minmax(0, 1fr) 20rem; }
}

/* ----------------------------------------------------------------- cards -- */
.grid { display: grid; gap: var(--s-4); }
.grid.g2 { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.grid.g3 { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }

.card {
  display: block; position: relative; padding: var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); text-decoration: none; color: inherit;
  transition: border-color .18s var(--ease), transform .18s var(--ease),
              box-shadow .18s var(--ease);
}
.card:hover {
  border-color: #cdc5ba; transform: translateY(-2px); box-shadow: var(--shadow);
  color: inherit;
}
.card .k {
  font-family: var(--mono); font-size: .78rem; font-weight: 700;
  color: var(--navy); letter-spacing: .04em;
}
.card .t { display: block; font-weight: 700; margin-top: .2rem; }
.card .s { display: block; font-size: .84rem; color: var(--ink-3); margin-top: .2rem; }
.card .arrow { color: var(--orange-ink); font-weight: 700; }

.apron-surface .card {
  background: var(--apron-2); border-color: var(--apron-line); color: #fff;
}
.apron-surface .card:hover { border-color: #365madd; }
.apron-surface .card .k { color: #8fbaea; }
.apron-surface .card .s { color: var(--apron-ink-3); }

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; font: inherit;
  font-weight: 700; font-size: .9rem; text-decoration: none; cursor: pointer;
  padding: .78rem 1.3rem; border-radius: var(--r-pill); border: 1px solid transparent;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--orange-cta); color: #fff; }
.btn-primary:hover { background: #a83a09; color: #fff; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-deep); color: #fff; }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); }
.apron-surface .btn-ghost {
  border-color: rgba(255,255,255,.28); color: #fff;
}
.apron-surface .btn-ghost:hover { border-color: #fff; color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: var(--s-5); }

/* A button keeps its own colours inside a dark surface. Without this the
   surface's link colour wins on specificity and paints pale blue text onto an
   orange button - which is exactly what axe measured. */
.entity-head.dark .btn-primary, .apron-surface .btn-primary,
.claim .btn-primary, .hero .btn-primary, .site-foot .btn-primary,
.search-head .btn-primary, .picked .btn-primary {
  color: #fff; background: var(--orange-cta);
}
/* A chip on a dark surface takes the dark surface's ink, not the paper one.
   Same class of bug as the buttons: the surface's link colour wins on
   specificity and paints near-invisible text. */
.apron-surface .chip, .entity-head.dark .chip, .hero .chip {
  color: #cfdcea; background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .2);
}
.apron-surface .chip:hover, .entity-head.dark .chip:hover {
  color: #fff; border-color: var(--orange-logo);
}
.entity-head.dark .btn-primary:hover, .apron-surface .btn-primary:hover,
.claim .btn-primary:hover { color: #fff; background: #a83a09; }
.entity-head.dark .btn-navy, .apron-surface .btn-navy { color: #fff; }

/* ----------------------------------------------------------- entity head -- */
.entity-head { padding: var(--s-7) 0 var(--s-5); }
.entity-head.dark {
  background: var(--navy-ink); color: #fff;
  background-image:
    radial-gradient(1200px 260px at 12% 118%, rgba(0,79,153,.55), transparent 62%),
    radial-gradient(900px 220px at 88% -20%, rgba(217,79,15,.20), transparent 60%);
}
.entity-head.dark a { color: #a8c8ea; }
.entity-head.dark .display-2 { color: #fff; }
.entity-head.dark .lede { color: #c3d3e2; }
.entity-head.dark .small, .apron-surface .small,
.hero .small { color: #a9bccf; }

.codes { display: flex; gap: .45rem; flex-wrap: wrap; margin: 0 0 var(--s-3); }
.code {
  font-family: var(--mono); font-weight: 700; font-size: .96rem;
  letter-spacing: .06em; padding: .3rem .6rem; border-radius: var(--r-sm);
  background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.18);
}
.code.icao { background: var(--orange-cta);
             border-color: var(--orange-cta); }
.entity-meta {
  display: flex; flex-wrap: wrap; gap: 1.5rem; margin: var(--s-4) 0 0;
  padding: 0; font-size: .86rem;
}
.entity-meta > div { }
.entity-meta dt, .entity-meta .k {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  color: #93a5b9; margin: 0 0 .1rem;
}
.entity-meta dd, .entity-meta .v { margin: 0; font-weight: 600; color: #fff; }

/* ------------------------------------------------------------- evidence -- */
/* Public hierarchy: the fact, then its status, then — only on request — the
   source. The full evidence table belongs to the internal research view. */
.facts { display: grid; gap: 0; margin: 0; }
.fact {
  display: grid; grid-template-columns: 13rem minmax(0, 1fr) auto;
  gap: .4rem 1.2rem; align-items: baseline;
  padding: .95rem 0; border-bottom: 1px solid var(--line-2);
}
.fact:last-child { border-bottom: 0; }
.fact > .label {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 700;
}
.fact > .value { font-size: 1.02rem; font-weight: 600; }
.fact > .value.empty { font-weight: 400; color: var(--ink-3); font-style: italic; }
/* The grid cell that holds the pill is a cell, not a pill: giving it the
   status class as well printed the leading dot twice. */
.fact > span.status { justify-self: end; background: none; padding: 0; }
.fact > span.status::before { display: none; }
.fact > .prov { grid-column: 2 / -1; }
@media (max-width: 46rem) {
  .fact { grid-template-columns: minmax(0, 1fr) auto; }
  .fact > .label { grid-column: 1 / -1; }
  .fact > .prov { grid-column: 1 / -1; }
}

.status {
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  padding: .18rem .55rem .2rem; border-radius: var(--r-pill);
  white-space: nowrap;
}
.status::before {
  content: ""; width: .42rem; height: .42rem; border-radius: 50%;
  background: currentColor;
}
.status-verified { color: var(--ok); background: var(--ok-bg); }
.status-partially_verified { color: var(--provisional); background: var(--provisional-bg); }
.status-unverified { color: var(--unverified); background: var(--unverified-bg); }
.status-conflict { color: var(--disputed); background: var(--disputed-bg); }
.status-stale { color: var(--provisional); background: var(--provisional-bg); }
.status-unknown { color: var(--unverified); background: var(--unverified-bg); }
.status-source_access_blocked { color: var(--blocked); background: var(--blocked-bg); }

details.prov { margin-top: .3rem; }
details.prov > summary {
  cursor: pointer; font-size: .78rem; color: var(--ink-3);
  list-style: none; display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem 0;
}
details.prov > summary::-webkit-details-marker { display: none; }
details.prov > summary::after {
  content: "›"; transform: rotate(90deg); display: inline-block;
  transition: transform .16s var(--ease); font-size: .9rem; line-height: 1;
}
details.prov[open] > summary::after { transform: rotate(-90deg); }
details.prov > summary:hover { color: var(--navy); }
.prov-body {
  margin: .45rem 0 .2rem; padding: .7rem .9rem; font-size: .82rem;
  background: var(--paper-2); border-radius: var(--r-sm);
  border-left: 2px solid var(--line);
}
.prov-body dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: 0; }
.prov-body dt { color: var(--ink-3); }
.prov-body dd { margin: 0; }

/* Operational warning — a curfew is not a footnote. */
.warning {
  display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem;
  border: 1px solid #f0c9c5; background: var(--disputed-bg);
  border-left: 4px solid var(--disputed);
  border-radius: var(--r-sm); padding: var(--s-4) var(--s-5); margin: var(--s-5) 0;
}
.warning .mark {
  grid-row: span 2; font-size: 1.1rem; color: var(--disputed); font-weight: 700;
}
.warning h3 { color: var(--disputed); margin: 0 0 .2rem; font-size: .98rem; }
.warning p { margin: 0 0 .4rem; font-size: .9rem; }
.warning dl { margin: .5rem 0 0; display: grid; gap: .3rem; font-size: .88rem; }
.warning dt { font-weight: 700; }
.warning dd { margin: 0 0 .3rem; }

.notice {
  border: 1px solid var(--line); border-left: 3px solid var(--navy);
  background: var(--paper-2); border-radius: var(--r-sm);
  padding: var(--s-4) var(--s-5); margin: var(--s-5) 0;
}
.notice h3 { font-size: .95rem; margin: 0 0 .3rem; }
.notice p { margin: 0 0 .4rem; font-size: .9rem; }
.notice p:last-child { margin-bottom: 0; }
.notice.blocked { border-left-color: var(--blocked); }
.notice.blocked ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .86rem; }

/* Airways' own statement. Structurally separate from every fact component. */
.claim {
  position: relative; border-radius: var(--r-md); padding: var(--s-6);
  background: var(--navy-ink); color: #fff; margin: var(--s-6) 0;
  background-image:
    radial-gradient(700px 200px at 8% 110%, rgba(0,79,153,.6), transparent 60%),
    radial-gradient(600px 180px at 96% -10%, rgba(217,79,15,.22), transparent 62%);
}
.claim .who {
  display: inline-block; font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--orange-logo);
  margin-bottom: .6rem;
}
.claim h2, .claim h3 { color: #fff; margin: 0 0 .5rem; }
.claim p { color: #c8d7e6; font-size: .95rem; }

/* ---------------------------------------------------------------- globe -- */
.globe-stage {
  position: relative; aspect-ratio: 1 / 1; width: 100%;
  max-width: 40rem; margin-inline: auto;
}
.globe-stage canvas { width: 100%; height: 100%; display: block; }
.globe-stage canvas:focus-visible {
  outline: 2px solid var(--sky, #4ea8de); outline-offset: -2px;
}
/* Offered on touch screens only, and by the script rather than the markup,
   because a device that scrolls past the globe needs a way to turn it and a
   device with a mouse already has one. */
.globe-rotate {
  position: absolute; right: .75rem; bottom: .75rem; z-index: 2;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
  background: rgba(0, 32, 63, .92); color: #fff; cursor: pointer;
  padding: .5rem 1rem; font: inherit; font-size: .82rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.globe-zoom {
  position: absolute; left: .75rem; bottom: .75rem; z-index: 2;
  display: flex; flex-direction: column; gap: .35rem;
}
.globe-zoom-btn {
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 8px;
  background: rgba(0, 32, 63, .92); color: #fff; cursor: pointer;
  font: inherit; font-size: 1.1rem; line-height: 1;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.globe-zoom-btn:hover:not(:disabled) { border-color: #fff; }
.globe-zoom-btn:disabled { opacity: .4; cursor: default; }
.globe-zoom-btn:focus-visible {
  outline: 2px solid var(--sky, #4ea8de); outline-offset: 2px;
}
.globe-caption { margin-top: var(--s-3, .75rem); }
.globe-rotate[aria-pressed="true"] {
  background: var(--flame, #f88034); border-color: transparent; color: #06121e;
}
.globe-fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; padding: var(--s-5); color: var(--apron-ink-3);
  font-size: .86rem;
}
.globe-stage[data-live="true"] .globe-fallback { display: none; }
.globe-legend {
  display: flex; gap: 1.1rem; flex-wrap: wrap; justify-content: center;
  margin-top: var(--s-4); font-size: .78rem; color: var(--apron-ink-3);
}
.globe-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.globe-legend i {
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--orange-logo);
  display: inline-block;
}
.globe-legend i.n { background: #6fa8e0; }

.country-list { list-style: none; margin: 0; padding: 0; }
.country-list li { border-bottom: 1px solid var(--apron-line); }
.country-list li:last-child { border-bottom: 0; }
.country-list button, .country-list a {
  display: flex; width: 100%; align-items: baseline; justify-content: space-between;
  gap: 1rem; background: none; border: 0; font: inherit; text-align: left;
  color: var(--apron-ink); padding: .7rem .2rem; cursor: pointer;
  text-decoration: none;
}
.country-list button:hover, .country-list a:hover,
.country-list [aria-current="true"] { color: #fff; }
.country-list [aria-current="true"] { box-shadow: inset 3px 0 0 var(--orange); padding-left: .7rem; }
.country-list .n { font-size: .78rem; color: var(--apron-ink-3); font-family: var(--mono); }

/* --------------------------------------------------------------- results -- */
.result {
  display: block; padding: 1.05rem 0; border-bottom: 1px solid var(--line-2);
  text-decoration: none; color: inherit;
}
.result:hover { color: inherit; }
.result:hover .rt { color: var(--orange-ink); }
.result .rk {
  font-family: var(--mono); font-size: .76rem; font-weight: 700;
  color: var(--navy); letter-spacing: .05em;
}
.result .rt { font-weight: 700; font-size: 1.05rem; margin: .1rem 0; display: block; }
.result .rs { font-size: .87rem; color: var(--ink-3); }
.result-group {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-3); font-weight: 700; margin: var(--s-6) 0 .2rem;
}
.result-group:first-child { margin-top: 0; }

/* ------------------------------------------------------------ breadcrumb -- */
.breadcrumb { font-size: .8rem; padding: var(--s-4) 0 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; color: var(--ink-3); }
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--orange-ink); }
.entity-head.dark .breadcrumb a { color: #9db2c7; }
.entity-head.dark .breadcrumb li + li::before { color: #6d8299; }

/* ---------------------------------------------------------------- table -- */
.scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.data caption {
  text-align: left; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-3); font-weight: 700;
  padding-bottom: .5rem;
}
table.data th, table.data td {
  text-align: left; padding: .55rem .8rem .55rem 0;
  border-bottom: 1px solid var(--line-2); vertical-align: top;
}
table.data thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3);
}

/* --------------------------------------------------------------- footer -- */
.site-foot {
  background: var(--apron); color: var(--apron-ink-2);
  padding: var(--s-8) 0 var(--s-6); margin-top: var(--s-9);
  font-size: .88rem;
}
.site-foot a { color: var(--apron-ink-2); text-decoration: none; }
.site-foot .small, .site-foot p { color: var(--apron-ink-3); }
.site-foot a:hover { color: #fff; }
.foot-grid { display: grid; gap: var(--s-6); }
@media (min-width: 56rem) {
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}
.foot-grid h3 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: #7f93a8; font-weight: 700; margin-bottom: .8rem;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { padding: .2rem 0; }
.foot-brand img { height: 42px; margin-bottom: var(--s-4); }
.foot-note {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--apron-line); color: #7f93a8; font-size: .8rem;
}
.foot-note p { max-width: 62ch; }

/* -------------------------------------------------------- sticky mobile -- */
.mobile-occ { display: none; }
@media (max-width: 46rem) {
  .mobile-occ {
    display: flex; position: fixed; left: .75rem; right: .75rem; bottom: .75rem;
    z-index: 45; gap: .5rem;
  }
  .mobile-occ a {
    flex: 1 1 auto; justify-content: center; box-shadow: var(--shadow-lift);
  }
  /* The bar floats over whatever is behind it - on the homepage that is the
     dark hero - so a transparent ghost button with ink text read as an empty
     outline. It carries its own surface instead. */
  .mobile-occ .btn-ghost {
    flex: 0 0 auto; background: rgba(0, 32, 63, .92); color: #fff;
    border-color: rgba(255, 255, 255, .34); box-shadow: var(--shadow-lift);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .mobile-occ .btn-ghost:hover { border-color: #fff; color: #fff; }
  body { padding-bottom: 4.5rem; }
  .site-foot { margin-bottom: 0; }
}

/* ------------------------------------------------------------- research -- */
/* The internal console. Deliberately not the public visual language. */
.internal-banner {
  background: var(--navy-ink); color: #fff; padding: .7rem 0; font-size: .82rem;
}
.internal-banner b { color: var(--orange-logo); }
.research table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.research th, .research td {
  text-align: left; padding: .4rem .7rem .4rem 0;
  border-bottom: 1px solid var(--line-2); vertical-align: top;
}
.research thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3);
}
.stats { display: grid; gap: .8rem; margin: var(--s-5) 0;
         grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.stat { border: 1px solid var(--line); border-radius: var(--r-sm); padding: .8rem 1rem; }
.stat b { display: block; font-family: var(--display); font-size: 1.6rem; font-weight: 600; }
.stat span { color: var(--ink-3); font-size: .78rem; }
/* A typed count inside running text is a number, not a panel. It shares the
   class so the sync audit can read it; without this it drew bordered boxes
   that overlapped the words around it on every region card. */
.stat[data-count] { border: 0; border-radius: 0; padding: 0; }
.gates { display: flex; flex-wrap: wrap; gap: .3rem; }
.gate { font-family: var(--mono); font-size: .68rem; padding: .1rem .38rem;
        border: 1px solid var(--line); border-radius: var(--r-xs); }
.gate.pass { color: var(--ok); border-color: currentColor; }
.gate.fail { color: var(--disputed); border-color: currentColor; }

/* -------------------------------------------------------------- utility -- */
hr.rule { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  display: inline-block; font-size: .8rem; font-weight: 600;
  padding: .35rem .75rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); text-decoration: none; color: var(--ink-2s);
  background: var(--paper);
}
.chip:hover { border-color: var(--navy); color: var(--navy); }
.rail { font-size: .9rem; }
.rail section { border-top: 1px solid var(--line); padding-top: var(--s-4);
                margin-bottom: var(--s-5); }
.rail h2 { font-family: var(--sans); font-size: .72rem; text-transform: uppercase;
           letter-spacing: .12em; color: var(--ink-3); font-weight: 700; }
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail li { padding: .35rem 0; border-bottom: 1px solid var(--line-2); }
.rail li:last-child { border-bottom: 0; }
.rail a { text-decoration: none; font-weight: 600; }
.rail .sub { display: block; color: var(--ink-3); font-size: .78rem; font-weight: 400; }

/* ---------------------------------------------------------------- intro -- */
/* The entry sequence is a short, non-blocking reveal. It never covers the
   page, never delays the search field, and does nothing at all when the
   viewer has asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); }
  html[data-intro="run"] .reveal {
    animation: rise .9s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 110ms);
  }
  html[data-intro="run"] .hero-media img { animation: settle 2.4s var(--ease) both; }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes settle {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
html[data-intro="off"] .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* ==========================================================================
   PHASE 3.3 — refinement layer
   Typography rhythm, the header, maps, the two-layer fact model, the service
   story, the operations finder and the mobile re-composition.
   ========================================================================== */

/* ------------------------------------------------------------ type scale */
.display {
  font-size: clamp(2.6rem, 5.6vw, 5rem);
  line-height: 1.015;
  letter-spacing: -.022em;
  max-width: 15ch;
  text-wrap: balance;
}
.display-2 { font-size: clamp(2rem, 3.5vw, 3.15rem); line-height: 1.06; }
h2, .h2 { font-size: clamp(1.55rem, 2.5vw, 2.2rem); }
.lede { font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.6;
        max-width: 56ch; }
p { max-width: 64ch; }
.small { font-size: .875rem; line-height: 1.55; }
section.band { padding: clamp(3.4rem, 7vw, 6rem) 0; }
.band-head { margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }

/* Aviation labels and codes: deliberate, spaced, never small. */
.eyebrow { font-size: .74rem; letter-spacing: .18em; }
.code, .code-inline, .card .k, .result .rk, .suggestions .k {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}
.code { font-size: 1.02rem; padding: .34rem .68rem; }
.code.big { font-size: 1.6rem; padding: .3rem .7rem; display: inline-block;
            background: var(--orange-cta); color: #fff; border-radius: var(--r-sm); }
.code-inline {
  font-size: .84rem; font-weight: 700; color: var(--navy);
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-xs); padding: .1rem .38rem; margin-right: .5rem;
}
.card .k { font-size: .86rem; }
.card .k i { font-style: normal; opacity: .45; margin: 0 .3rem; }

/* ---------------------------------------------------------------- header */
.head-bar { min-height: 84px; gap: var(--s-6); }
.brand img { height: 46px; }
.primary-nav { gap: .1rem; justify-content: flex-end; }
.primary-nav a { font-size: .84rem; letter-spacing: .01em; padding: .55rem .7rem; }
.primary-nav a span { position: relative; display: inline-block; }
.primary-nav a[aria-current="page"]::after { bottom: .3rem; }
.head-search {
  display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
  font-size: .82rem; font-weight: 600; color: var(--ink-2s);
  padding: .55rem .7rem; border-radius: var(--r-sm);
}
.head-search svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
                   stroke-width: 1.9; stroke-linecap: round; }
.head-search:hover { color: var(--navy); background: var(--paper-2); }
.nav-toggle .bars,
.nav-toggle .bars::before, .nav-toggle .bars::after {
  display: block; width: 18px; height: 2px; background: currentColor;
  border-radius: 2px; content: "";
}
.nav-toggle .bars::before { transform: translateY(-6px); }
.nav-toggle .bars::after { transform: translateY(4px); }
.nav-toggle { padding: .6rem .65rem; line-height: 0; }

/* ------------------------------------------------------------------ hero */
/* The home hero stays the largest on the site, because it carries the film's
   last frame and the site's opening statement - but at 94vh it filled the
   whole first screen, so nothing below it was ever hinted at. At 78vh a
   reader can see there is a page under the picture. The intro handoff reads
   this height at runtime rather than assuming it, so the bridge follows. */
.hero { min-height: min(78vh, 700px); margin-top: -84px; padding-top: 84px; }
.hero-inner { padding: clamp(3rem, 8vh, 6rem) 0 clamp(2.6rem, 6vh, 4.5rem); }
.hero-copy { max-width: 46rem; }
.hero .lede { max-width: 38rem; color: #d9e5f0; font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
.hero-scrim {
  background:
    linear-gradient(96deg, rgba(0, 20, 40, .95) 0%, rgba(0, 22, 42, .86) 30%,
                    rgba(4, 18, 32, .5) 56%, rgba(4, 18, 32, .16) 78%,
                    rgba(4, 18, 32, .34) 100%),
    linear-gradient(to top, rgba(5, 14, 24, .9) 0%, rgba(5, 14, 24, 0) 46%),
    radial-gradient(120% 80% at 20% 60%, rgba(0, 79, 153, .22), transparent 62%);
}
.hero .searchbox { max-width: 42rem; margin-top: .4rem; }
.hero .searchbox input[type="search"] {
  padding: 1.15rem 1.3rem; font-size: 1.06rem; border-radius: var(--r-md);
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .8);
}
.hero .searchbox button[type="submit"] {
  padding: 1.15rem 1.7rem; font-size: .95rem;
  background: var(--orange-cta);
}
.hero .searchbox button[type="submit"]:hover { background: #a83a09; }
.hint { margin-top: 1rem; font-size: .82rem; }
.hero-meta { margin-top: clamp(1.6rem, 4vh, 2.6rem); gap: 2.4rem; }
.hero-meta b { font-size: 2rem; }
.hero-attrib { margin: .7rem 0 0; font-size: .74rem;
               letter-spacing: .04em; color: #8fa3b8; }
.hero-meta span { font-size: .7rem; letter-spacing: .13em; }

/* ------------------------------------------------------- autocomplete -- */
.suggestions {
  padding: .4rem; border-radius: var(--r-md);
  box-shadow: 0 24px 60px -24px rgba(0, 20, 40, .55);
}
@media (prefers-reduced-motion: no-preference) {
  .suggestions { animation: dropIn .18s var(--ease); }
}
@keyframes dropIn { from { opacity: 0; transform: translateY(-4px); } }
.suggestions .group {
  font-size: .66rem; letter-spacing: .14em; color: var(--ink-3);
  padding: .7rem .7rem .3rem;
}
.suggestions li a {
  grid-template-columns: 1.6rem 4.6rem 1fr; gap: .1rem .6rem;
  padding: .55rem .6rem; align-items: center;
}
.suggestions .ico {
  grid-row: span 2; width: 1.5rem; height: 1.5rem; color: var(--navy);
  opacity: .8;
}
.suggestions .ico svg { width: 100%; height: 100%; fill: none;
                        stroke: currentColor; stroke-width: 1.7;
                        stroke-linecap: round; stroke-linejoin: round; }
.suggestions .k { font-size: .82rem; font-weight: 700; color: var(--navy); }
.suggestions .n { font-weight: 650; font-size: .93rem; }
.suggestions .s { grid-column: 3; font-size: .78rem; color: var(--ink-3); }
.suggestions li[aria-selected="true"] a { background: var(--orange-soft); }

/* ------------------------------------------------------------- coverage */
.coverage-grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
@media (min-width: 62rem) {
  .coverage-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
.globe-stage {
  position: relative; width: 100%; max-width: 40rem; margin-inline: auto;
  aspect-ratio: 1 / 1;
}
.globe-stage canvas,
.globe-stage .globe-poster { width: 100%; height: 100%; display: block; }
/* The poster is the floor, not the error state: WebGL paints over it. */
.globe-stage[data-live="true"] .globe-poster { display: none; }
.globe-poster .ocean { fill: #08172a; }
.globe-poster .grat { stroke: #2e5f96; stroke-width: .5; opacity: .35; }
.globe-poster .land { stroke: #6fa3dc; stroke-width: .9; opacity: .75; }
.globe-poster .limb { fill: none; stroke: #4d7fb4; stroke-width: 1.1; opacity: .5; }
.globe-poster .pin circle { fill: var(--orange-logo); transition: r .18s var(--ease); }
.globe-poster .pin:hover circle, .globe-poster .pin:focus circle { r: 6.5; }
.globe-legend { margin-top: var(--s-4); }
.coverage-panel .country-list { margin-top: .4rem; }
.country-list a { padding: .78rem .2rem; font-size: .96rem; }
.country-list a:hover, .country-list a:focus-visible { padding-left: .6rem; }
.country-list a { transition: padding .2s var(--ease), color .2s var(--ease); }

.country-grid { display: grid; gap: var(--s-4);
                grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.country-card {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-5); background: var(--paper);
}
.country-card h3 { margin-bottom: .2rem; }
.country-card .apt {
  display: block; padding: .4rem 0; text-decoration: none; font-size: .92rem;
  color: var(--ink-2s); border-bottom: 1px solid var(--line-2);
}
.country-card .apt:last-of-type { border-bottom: 0; }
.country-card .apt:hover { color: var(--navy); }
.country-card .btn-row { margin-top: var(--s-4); }
.country-card .btn { padding: .55rem 1rem; font-size: .82rem; }

.picked {
  border: 1px solid var(--apron-line); border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5); margin-bottom: var(--s-4);
  background: var(--apron-2);
}
.picked h3 { color: #fff; margin-bottom: .2rem; }
.picked .apt {
  display: block; padding: .38rem 0; text-decoration: none; font-size: .9rem;
  color: var(--apron-ink-2); border-bottom: 1px solid var(--apron-line);
}
.picked .apt:last-of-type { border-bottom: 0; }
.picked .apt:hover { color: #fff; }
.picked .code-inline {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18);
  color: #8fbaea;
}
.picked .btn-row { margin-top: var(--s-3); }
.picked .btn { padding: .55rem 1rem; font-size: .82rem; }

/* ----------------------------------------------------------------- maps */
.map-frame {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: #f2f5f9; overflow: hidden; margin: var(--s-4) 0;
}
.apron-surface .map-frame { border-color: var(--apron-line); background: #08172a; }
.region-map { display: block; width: 100%; height: auto; }
.region-map .ocean { fill: #eef3f9; }
.region-map .land { stroke: #9db7d4; stroke-width: 1; }
.region-map .pin circle { fill: var(--orange-cta); stroke: #fff; stroke-width: 1.6; }
.region-map .pin text { font: 700 11px var(--mono); fill: var(--ink); }
.region-map .pin:hover circle { fill: var(--navy); }

/* ------------------------------------------------- two-layer fact model */
.confirm-block {
  border: 1px solid var(--line); border-left: 3px solid var(--provisional);
  border-radius: var(--r-sm); background: var(--paper-2);
  margin: var(--s-5) 0; padding: 0;
}
.confirm-block > summary {
  cursor: pointer; list-style: none; padding: .95rem 1.1rem;
  display: flex; align-items: center; gap: .6rem; font-size: .95rem;
}
.confirm-block > summary::-webkit-details-marker { display: none; }
.confirm-block > summary::after {
  content: "›"; margin-left: auto; transform: rotate(90deg);
  transition: transform .18s var(--ease); font-size: 1.1rem; line-height: 1;
  color: var(--ink-3);
}
.confirm-block[open] > summary::after { transform: rotate(-90deg); }
.confirm-block .n { color: var(--ink-3); font-size: .84rem; font-weight: 400; }
.confirm-body { padding: 0 1.1rem 1.1rem; }
.confirm-body .fields {
  font-size: .86rem; color: var(--ink-3); border-top: 1px solid var(--line);
  padding-top: .7rem;
}
.status-verified { color: var(--ok); background: var(--ok-bg); }
.status-confirm { color: var(--provisional); background: var(--provisional-bg); }
.status-conflict { color: var(--disputed); background: var(--disputed-bg); }

/* --------------------------------------------------------- service story */
figure.owned { margin: 0; border-radius: var(--r-md); overflow: hidden;
               background: var(--paper-3); }
figure.owned img { width: 100%; height: 100%; object-fit: cover; display: block; }
figure.owned.wide { aspect-ratio: 16 / 10; }
.service-story { align-items: center; }
.permits-cols { align-items: center; }
.permits-cols figure.owned { aspect-ratio: 4 / 3; }

.showcase-grid { display: grid; gap: var(--s-4); margin-bottom: var(--s-5);
                 grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.showcase {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  background: var(--paper); transition: transform .2s var(--ease),
              box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.showcase figure.owned { border-radius: 0; aspect-ratio: 16 / 10; }
.showcase img { transition: transform .5s var(--ease); }
.showcase:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift);
                  border-color: #cdc5ba; color: inherit; }
.showcase:hover img { transform: scale(1.035); }
.showcase-body { padding: var(--s-5); }
.showcase-body h3 { margin-bottom: .3rem; }
.showcase-body p { font-size: .9rem; color: var(--ink-3); margin: 0 0 .6rem; }
.showcase .arrow { color: var(--orange-ink); font-weight: 700; font-size: .86rem; }
.finder { margin-top: var(--s-5); padding-top: var(--s-5);
          border-top: 1px solid var(--line); }
.finder .chips { margin-top: .8rem; }

/* -------------------------------------------------------- search finder */
.search-head {
  background: var(--navy-ink); color: #fff; padding: var(--s-7) 0 var(--s-6);
  background-image:
    radial-gradient(900px 240px at 10% 120%, rgba(0,79,153,.6), transparent 62%),
    radial-gradient(700px 200px at 92% -20%, rgba(217,79,15,.18), transparent 60%);
}
.search-head .display-2 { color: #fff; }
.search-head .eyebrow { color: var(--orange-logo); }
.search-head .eyebrow::after { background: rgba(255,255,255,.2); }
.search-head .reading { color: #b9cbdd; font-size: .92rem; margin: 0 0 1rem; }
.search-head .reading .code-inline {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2);
  color: #fff;
}
/* The best match is the same row as every other result, with the two actions
   a verified page can offer. It was a large tinted card, which read as a
   different product from the list underneath it. */
.result-best .rk { color: var(--orange-cta); }
.result-best .rt {
  display: block; text-decoration: none; color: var(--ink);
  font-size: 1.25rem;
}
.result-best .rt:hover { color: var(--orange-ink); }
.result-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.result-actions .tag { text-decoration: none; transition: filter .18s var(--ease); }
.result-actions .tag:hover { filter: brightness(.92); }
.tag-open { background: rgba(0, 79, 153, .1); color: var(--navy); }

/* -------------------------------------------------------------- clocks */
.clocks { display: flex; flex-wrap: wrap; gap: 2rem; margin: var(--s-5) 0 0;
          padding-top: var(--s-4); border-top: 1px solid rgba(255,255,255,.14); }
.clock .k { display: block; font-size: .68rem; letter-spacing: .12em;
            text-transform: uppercase; color: #93a5b9; }
.clock b { display: block; font-family: var(--display); font-size: 2rem;
           font-weight: 600; color: #fff; line-height: 1.05;
           font-variant-numeric: tabular-nums; }
.clock .s { font-size: .78rem; color: #a9bccf; }
.occ-cols { align-items: center; }
.occ-cols figure.owned { aspect-ratio: 16 / 10; }

/* -------------------------------------------------------------- footer */
.foot-brand .btn { margin-top: var(--s-4); }
.foot-note p { color: #8fa3b8; }
.dev-flag {
  margin-top: var(--s-4); font-family: var(--mono); font-size: .74rem;
  color: #93a5b9; border: 1px dashed var(--apron-line);
  border-radius: var(--r-sm); padding: .6rem .8rem;
}
.dev-flag b { color: var(--orange-logo); letter-spacing: .1em; }

/* ------------------------------------------------------ microinteraction */
.btn, .card, .chip, .showcase, .result, .occ {
  transition-duration: .2s; transition-timing-function: var(--ease);
}
.btn:active { transform: translateY(0); }
.card:focus-visible, .showcase:focus-visible { outline-offset: 3px; }
.result { transition: padding .18s var(--ease); }
.result:hover { padding-left: .5rem; }

/* ---------------------------------------------------- mobile re-compose */
@media (max-width: 62rem) {
  .head-bar { min-height: 66px; gap: var(--s-3); }
  .brand img { height: 36px; }
  .hero { margin-top: -66px; padding-top: 66px; }
}

@media (max-width: 46rem) {
  :root { --wrap: 100%; }
  .display { font-size: clamp(2.2rem, 9.5vw, 2.9rem); max-width: 18ch; }
  .display-2 { font-size: clamp(1.75rem, 7.2vw, 2.2rem); }
  h2, .h2 { font-size: clamp(1.4rem, 6vw, 1.75rem); }
  .lede { font-size: 1rem; }

  /* Fewer things at once: one card wide, larger targets, shorter copy. */
  section.band { padding: 2.4rem 0; }
  .grid.g2, .grid.g3, .showcase-grid, .country-grid { grid-template-columns: 1fr; }
  .card, .showcase-body { padding: 1.1rem; }
  .card .t { font-size: 1.02rem; }
  .btn { padding: .85rem 1.3rem; font-size: .92rem; }
  .chip { padding: .55rem .95rem; font-size: .88rem; }
  .country-list a { padding: .95rem .2rem; }

  /* The hero keeps its shape rather than becoming a wall of type. */
  .hero { min-height: 82vh; }
  .hero .display { margin-bottom: .7rem; }
  .hero .lede { font-size: 1rem; max-width: 32ch; }
  .hero-meta { gap: 1.4rem; margin-top: 1.5rem; }
  .hero-meta b { font-size: 1.5rem; }
  .hint { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }

  /* The globe poster stays: it is the map, not a placeholder. */
  .globe-stage { max-width: 22rem; }
  .coverage-panel .btn-row { margin-top: 1rem; }

  /* The footer must not become the page. */
  .site-foot { padding: 2.4rem 0 1.6rem; margin-top: 2.4rem; font-size: .9rem; }
  .foot-grid { gap: 1.6rem; }
  .foot-brand p { display: none; }
  .foot-note { margin-top: 1.6rem; padding-top: 1.2rem; }
  .foot-note p { font-size: .78rem; }

  .fact { padding: .85rem 0; }
  .fact > .value { font-size: 1.05rem; }
  .confirm-block > summary { padding: 1rem; }
  .mobile-occ a { padding: .95rem 1rem; font-size: .95rem; }
  body { padding-bottom: 5rem; }
}

@media print {
  .site-head, .site-foot, .mobile-occ, .hero-media, .searchbox { display: none; }
  .hero { min-height: auto; color: #000; background: #fff; }
}

/* ------------------------------------------------ PHASE 3.4 — corrections */
/* If a photograph fails to decode in the reader's browser, the figure keeps
   its shape and its brand instead of collapsing to a broken-image glyph with
   a paragraph of alternative text beside it. */
figure.owned[data-fallback] {
  min-height: 12rem;
  background:
    radial-gradient(120% 90% at 25% 15%, rgba(255, 255, 255, .10), transparent 60%),
    linear-gradient(150deg, var(--navy) 0%, #013a72 55%, #001b34 100%);
}

/* One regulating authority, presented at the confidence we actually have.
   The same component in the body and in the sidebar: 3.4A found the airport
   rail still listing two authority links beside a corrected country hub. */
.regulator-unsettled h3 { display: flex; align-items: center; gap: .6rem;
                          flex-wrap: wrap; }
.regulator-unsettled .t { font-weight: 700; margin: 0 0 .4rem; }
.regulator-unsettled .status { margin: 0 0 .5rem; }
.regulator-unsettled .fields { font-size: .92rem; color: var(--ink-3); }
.rail-regulator .notice { margin: 0; padding: .9rem 1rem; }
.rail-regulator .notice h2 { font-family: var(--sans); font-size: .72rem;
                             text-transform: uppercase; letter-spacing: .12em;
                             color: var(--ink-3); margin: 0 0 .5rem; }
.rail-regulator .notice .t { font-size: .92rem; }
.rail-regulator .notice p { font-size: .82rem; }
.rail-regulator .btn { font-size: .82rem; padding: .5rem .9rem; }

/* -------------------------------------- BUSINESS IDENTITY LOCK — about */
/* Airways' own words about Airways, visibly a quotation and visibly
   attributed, so a company claim is never mistaken for an aviation fact. */
.claim-quote {
  margin: 0; padding: 1rem 1.2rem; background: var(--paper-2);
  border-left: 3px solid var(--orange); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.claim-quote p { font-size: .96rem; margin: 0 0 .6rem; }
.claim-quote footer { font-size: .8rem; color: var(--ink-3); }
.paper-2 .claim-quote { background: var(--paper); }


/* ==========================================================================
   RELEASE CANDIDATE R2 — the public company experience
   --------------------------------------------------------------------------
   One header, one footer, one service family, one type rhythm. Page content
   varies; the site identity does not.
   ========================================================================== */

/* ------------------------------------------------------------ mega menu -- */
.nav-group { position: relative; display: inline-flex; }
.nav-group > a { display: inline-flex; align-items: center; gap: .35rem; }
.nav-group .chev {
  width: 10px; height: 7px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s var(--ease); opacity: .7;
}
.nav-group[data-open="true"] .chev { transform: rotate(180deg); }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 22px 48px rgba(0, 32, 63, .13);
  animation: mega-in .22s var(--ease) both;
}
@keyframes mega-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .mega { animation: none; } }
.mega-inner {
  display: grid; gap: var(--s-6); padding: var(--s-6) 0 var(--s-7);
}
@media (min-width: 62rem) {
  .mega-inner { grid-template-columns: 1.9fr .95fr; align-items: start; }
}
.mega-list { display: grid; gap: .2rem; }
@media (min-width: 46rem) {
  .mega-list { grid-template-columns: 1fr 1fr; gap: .2rem var(--s-6); }
}
.mega-item {
  display: block; text-decoration: none; padding: .7rem .8rem;
  border-radius: var(--r-sm); border: 1px solid transparent;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              transform .16s var(--ease);
}
.mega-item:hover {
  background: var(--paper-2); border-color: var(--line-2);
  transform: translateX(2px);
}
.mega-name {
  display: block; font-weight: 800; color: var(--navy-ink);
  font-size: .98rem; letter-spacing: -.01em;
}
.mega-note {
  display: block; color: var(--ink-3); font-size: .82rem; margin-top: .15rem;
}
.mega-side {
  background: var(--paper-2); border-radius: var(--r-md);
  padding: var(--s-5); border: 1px solid var(--line-2);
}
.mega-side ul { list-style: none; margin: .4rem 0 var(--s-4); padding: 0; }
.mega-side li { padding: .22rem 0; }
.mega-side a { color: var(--ink-2s); text-decoration: none; font-weight: 600;
               font-size: .9rem; }
.mega-side a:hover { color: var(--navy); }
.mega-desk { font-size: .86rem; color: var(--ink-3); margin-bottom: var(--s-4); }
@media (max-width: 62rem) {
  /* The panel is part of the collapsed menu here. Without this it renders
     inline under the header and pushes the hero off the first screen. */
  .mega { display: none; position: static; box-shadow: none; border: 0;
          animation: none; }
  .site-head[data-nav-open="true"] .mega { display: block; }
  .mega-inner { padding: 0 1.25rem var(--s-5); }
  .mega-side { display: none; }
  .mega-list { grid-template-columns: 1fr; }
  .mega-item { padding: .7rem .25rem; border-radius: 0;
               border-bottom: 1px solid var(--line-2); }
  .mega-item:hover { transform: none; background: none; }
}

/* -------------------------------------------------------- search overlay -- */
.head-search {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 1px solid var(--line); cursor: pointer;
  color: var(--ink-2s); font: inherit; font-size: .84rem; font-weight: 700;
  padding: .55rem .85rem; border-radius: var(--r-pill);
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.head-search:hover { border-color: var(--navy); color: var(--navy); }
.head-search svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round;
}
.search-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0, 32, 63, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fade-in .2s var(--ease) both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.search-overlay-inner {
  background: var(--paper); padding: var(--s-8) 0 var(--s-7);
  border-bottom: 1px solid var(--line);
  animation: slide-down .26s var(--ease) both;
}
@keyframes slide-down {
  from { transform: translateY(-16px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .search-overlay, .search-overlay-inner { animation: none; }
}
.search-overlay h2 { margin: .2rem 0 var(--s-5); }
.search-close {
  margin-top: var(--s-5); background: none; border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: .5rem 1.1rem; cursor: pointer;
  font: inherit; font-weight: 700; font-size: .85rem; color: var(--ink-2s);
}
.search-close:hover { border-color: var(--navy); color: var(--navy); }

/* ------------------------------------------------------------------ hero -- */
.btn-lg { padding: .9rem 1.5rem; font-size: .95rem; }
.btn-hero-ghost {
  background: rgba(255, 255, 255, .1); color: #fff;
  border: 1px solid rgba(255, 255, 255, .42);
  backdrop-filter: blur(4px);
}
.btn-hero-ghost:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.hero-desk {
  margin-top: var(--s-5); color: var(--apron-ink-2); font-size: .92rem;
  display: flex; align-items: center; gap: .55rem;
}
.hero-desk a { color: #fff; text-decoration: none; border-bottom: 1px solid
               rgba(255,255,255,.35); }
.hero-desk .dot {
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 0 .22rem rgba(248, 96, 22, .25);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-desk .dot { animation: pulse 2.6s ease-in-out infinite; }
}
.hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 8rem;
  background: linear-gradient(to bottom, transparent, var(--paper));
  pointer-events: none;
}

/* ---------------------------------------------------------------- finder -- */
.finder-band { padding-block: var(--s-7); }
.finder-inner { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 62rem) {
  .finder-inner { grid-template-columns: .85fr 1.15fr; gap: var(--s-8); }
}
.finder-copy h2 { margin: .2rem 0 .6rem; }
.finder-copy p { color: var(--ink-3); }
.finder-tool .searchbox { max-width: none; }

/* -------------------------------------------------------------- services -- */
/* Seven services do not divide into three columns, so a fixed grid always
   left a hole in the last row. The row is a flex line instead: whatever is
   left over grows to the full width, so every row starts and ends on the
   same edge as the heading above it. */
.svc-grid { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: stretch; }

.svc-panel {
  flex: 1 1 100%;
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; color: inherit;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              border-color .28s var(--ease);
}
.svc-panel:hover {
  transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 32, 63, .12);
  border-color: rgba(0, 79, 153, .28);
}
@media (min-width: 46rem) {
  .svc-panel { flex: 1 1 calc(50% - var(--s-5) / 2); }
}
@media (min-width: 76rem) {
  .svc-panel { flex: 1 1 calc(33.333% - var(--s-5) * 2 / 3); }
  .svc-lead { flex: 1 1 100%; flex-direction: row; align-items: stretch; }
  .svc-lead .svc-media { flex: 0 0 46%; }
  .svc-lead .svc-body { flex: 1 1 auto; align-self: center; padding: var(--s-7); }
  .svc-lead h3 { font-size: 1.7rem; }
}
.svc-media { position: relative; overflow: hidden; background: var(--navy-ink); }
.svc-media .owned { margin: 0; }
.svc-media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 16 / 10;
  transition: transform .6s var(--ease), filter .4s var(--ease);
  filter: saturate(.96);
}
.svc-panel:hover .svc-media img { transform: scale(1.045); filter: saturate(1.05); }
.svc-lead .svc-media img { aspect-ratio: 16 / 9; height: 100%; }
/* The body takes the leftover height, so "Explore this service" sits on the
   same line across every card in a row rather than under its own paragraph. */
.svc-body { flex: 1 1 auto;
            padding: var(--s-5); display: flex; flex-direction: column; gap: .5rem; }
.svc-eyebrow {
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 800; color: var(--orange-cta); margin: 0;
}
.svc-body h3 { margin: 0; font-size: 1.2rem; letter-spacing: -.015em; }
.svc-body p { margin: 0; color: var(--ink-3); font-size: .92rem; }
.svc-body .arrow {
  margin-top: auto; padding-top: .6rem; font-weight: 700; font-size: .85rem;
  color: var(--navy);
}
.svc-panel:hover .arrow { color: var(--orange-cta); }
.svc-noimg .svc-body { padding-top: var(--s-6); }
.svc-noimg { border-top: 3px solid var(--navy); }

/* --------------------------------------------------------------- why/how -- */
.why-grid { display: grid; gap: var(--s-5); }
@media (min-width: 46rem) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 76rem) { .why-grid { grid-template-columns: repeat(4, 1fr); } }
.why-card {
  padding: var(--s-5); border-radius: var(--r-md);
  background: var(--paper); border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
}
.why-card h3 { margin: 0 0 .45rem; font-size: 1.02rem; }
.why-card p { margin: 0; color: var(--ink-3); font-size: .92rem; }

.step-list, .how-grid { display: grid; gap: var(--s-5); list-style: none;
                        margin: 0; padding: 0; }
@media (min-width: 46rem) { .step-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 76rem) { .step-list { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 62rem) { .how-grid { grid-template-columns: repeat(3, 1fr); } }
.step, .how-step { display: flex; gap: var(--s-4); align-items: flex-start; }
.how-step { flex-direction: column; gap: .6rem; }
.step-n {
  flex: 0 0 auto; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff; font-weight: 800; font-size: .95rem;
}
.step h3, .how-step h3 { margin: 0 0 .3rem; font-size: 1.02rem; }
.step p, .how-step p { margin: 0; color: var(--ink-3); font-size: .92rem; }

/* ------------------------------------------------------------- in action -- */
.action-band { padding-block: 0; }
.action-inner { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 62rem) {
  .action-inner { grid-template-columns: 1.15fr .85fr; gap: var(--s-8); }
}
.action-media .owned { margin: 0; border-radius: var(--r-md); overflow: hidden; }
.action-media img { display: block; width: 100%; aspect-ratio: 4 / 3;
                    object-fit: cover; }
.action-copy h2 { margin: .2rem 0 .7rem; }

.story-grid { display: grid; gap: var(--s-5); }
@media (min-width: 46rem) { .story-grid { grid-template-columns: 1fr 1fr; } }
.story-card {
  text-decoration: none; color: inherit; display: block;
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  background: var(--paper); transition: transform .28s var(--ease),
                                        box-shadow .28s var(--ease);
}
.story-card:hover { transform: translateY(-3px);
                    box-shadow: 0 16px 34px rgba(0,32,63,.11); }
.story-card .owned { margin: 0; }
.story-card img { display: block; width: 100%; aspect-ratio: 16 / 9;
                  object-fit: cover; }
.story-card > div { padding: var(--s-5); }
.story-card h3 { margin: 0 0 .35rem; }
.story-card p { margin: 0 0 .5rem; color: var(--ink-3); font-size: .92rem; }

/* ---------------------------------------------------------- service page -- */
.svc-hero {
  position: relative; background: var(--navy-ink); color: #fff;
  overflow: hidden; isolation: isolate;
}
.svc-hero-media { position: absolute; inset: 0; z-index: -2; }
.svc-hero-media .owned { margin: 0; height: 100%; }
.svc-hero-media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.svc-hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(0,32,63,.92) 0%,
              rgba(0,32,63,.72) 42%, rgba(0,32,63,.34) 100%);
}
.svc-hero-inner { padding-block: var(--s-8) var(--s-8); max-width: 62rem; }
.svc-hero .eyebrow { color: var(--orange); }
.svc-hero h1 { color: #fff; margin: .3rem 0 .7rem; }
.svc-hero .lede { color: var(--apron-ink-2); max-width: 48ch; }

.cap-grid { display: grid; gap: var(--s-4); list-style: none; margin: 0;
            padding: 0; }
@media (min-width: 46rem) { .cap-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 76rem) { .cap-grid { grid-template-columns: repeat(3, 1fr); } }
.cap {
  padding: var(--s-5); border-radius: var(--r-md);
  background: var(--paper-2); border: 1px solid var(--line-2);
}
.cap h3 { margin: 0 0 .3rem; font-size: 1rem; }
.cap p { margin: 0; color: var(--ink-3); font-size: .9rem; }

.mini-grid { display: grid; gap: var(--s-4); }
@media (min-width: 46rem) { .mini-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 76rem) { .mini-grid { grid-template-columns: repeat(3, 1fr); } }
.mini-svc {
  display: block; text-decoration: none; color: inherit;
  padding: var(--s-5); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--paper);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.mini-svc:hover { border-color: var(--navy); transform: translateY(-2px); }
.mini-svc h3 { margin: 0 0 .3rem; font-size: 1.02rem; }
.mini-svc p, .mini-svc .svc-tag { margin: 0 0 .5rem; color: var(--ink-3);
                                  font-size: .88rem; }
.mini-svc .arrow { font-weight: 700; font-size: .82rem; color: var(--navy); }

.page-hero {
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-8) var(--s-7);
}
.page-hero h1 { margin: .3rem 0 .7rem; }
.sector-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem;
}
@media (min-width: 46rem) { .sector-list { grid-template-columns: 1fr 1fr; } }
.sector-list li {
  padding: .8rem 1rem; border-radius: var(--r-sm);
  background: var(--paper-2); border-left: 3px solid var(--orange);
  font-weight: 600; color: var(--ink-2s);
}
.about-desk .owned { margin: 0; border-radius: var(--r-md); overflow: hidden; }
.about-desk img { display: block; width: 100%; aspect-ratio: 4 / 3;
                  object-fit: cover; }

/* ---------------------------------------------------------------- footer -- */
.site-foot { background: var(--paper); color: var(--ink); margin-top: 0; }
.foot-upper {
  background: linear-gradient(180deg, var(--paper-2), #f2f4f7);
  border-top: 1px solid var(--line);
  padding-block: var(--s-8) var(--s-7);
}
.foot-grid { display: grid; gap: var(--s-6); }
@media (min-width: 62rem) {
  .foot-grid { grid-template-columns: 1.65fr 1fr 1fr 1.05fr; gap: var(--s-7); }
}
.foot-brand .brand img { height: 52px; }
.foot-brand p {
  margin-top: var(--s-4); color: var(--ink-3); font-size: .92rem;
  max-width: 42ch;
}
.foot-col h3 {
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy-ink); margin: 0 0 var(--s-4); font-weight: 800;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { padding: .24rem 0; }
.foot-col a {
  color: var(--ink-2s); text-decoration: none; font-size: .92rem;
  transition: color .16s var(--ease);
}
.foot-col a:hover { color: var(--navy); }
.foot-desk .small { display: block; color: var(--ink-3); font-size: .78rem; }
.foot-mail { font-weight: 700; color: var(--navy) !important; }

.foot-strip { background: var(--navy-ink); color: rgba(255,255,255,.72); }
.foot-strip-inner {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  align-items: baseline; justify-content: space-between;
  padding-block: var(--s-4);
}
.foot-strip p { margin: 0; font-size: .82rem; max-width: 64ch; }
.foot-legal { color: rgba(255,255,255,.55); }
.foot-credit { color: rgba(255,255,255,.4); font-size: .74rem; }
.foot-credit a { color: inherit; text-decoration: underline; }
.foot-credit a:hover { color: rgba(255,255,255,.75); }
.foot-strip .dev-flag {
  color: var(--orange); font-size: .78rem; width: 100%;
}

/* -------------------------------------------------------------- reveals -- */
@media (prefers-reduced-motion: no-preference) {
  .reveal-up { opacity: 0; transform: translateY(14px);
               transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .reveal-up.is-in { opacity: 1; transform: none; }
}

@media (max-width: 62rem) {
  .head-bar { min-height: 64px; }
  .brand img { height: 34px; }
  .svc-lead { flex-direction: column; }
  .foot-strip-inner { flex-direction: column; }
}

/* ==========================================================================
   R3 — the global directory: regions, countries, airports
   --------------------------------------------------------------------------
   Native to R2. Same surfaces, same rhythm, same orange accent rationed the
   same way. Nothing here is a new visual language.
   ========================================================================== */

.region-grid { display: grid; gap: var(--s-5); }
@media (min-width: 46rem) { .region-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 76rem) { .region-grid { grid-template-columns: repeat(3, 1fr); } }
.region-card {
  display: block; text-decoration: none; color: inherit;
  padding: var(--s-6); border-radius: var(--r-md);
  background: var(--paper); border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease),
              border-color .24s var(--ease);
}
.region-card:hover {
  transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,32,63,.11);
  border-top-color: var(--orange);
}
.region-card h3 { margin: 0 0 .3rem; font-size: 1.25rem; }
.region-count { margin: 0 0 .6rem; color: var(--ink-3); font-size: .9rem; }
.region-card .arrow { font-weight: 700; font-size: .84rem; color: var(--navy); }

.country-card {
  display: block; text-decoration: none; color: inherit;
  padding: var(--s-5); border-radius: var(--r-md);
  background: var(--paper); border: 1px solid var(--line);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.country-card:hover { border-color: var(--navy); transform: translateY(-2px); }
.country-card h3 { margin: 0 0 .25rem; font-size: 1.02rem; }
.country-card p { margin: 0 0 .4rem; color: var(--ink-3); font-size: .86rem; }

.tag {
  display: inline-block; font-size: .68rem; letter-spacing: .07em;
  text-transform: uppercase; font-weight: 800; padding: .2rem .5rem;
  border-radius: var(--r-pill);
}
.tag-published { background: rgba(0,79,153,.1); color: var(--navy); }
.tag-profile { background: rgba(0,79,153,.1); color: var(--navy); }
.tag-directory { background: rgba(217,79,15,.1); color: var(--orange-cta); }

/* The airport list. One row per aerodrome, one ordering rule, no wall. */
.dir-list {
  display: grid; gap: 0; border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; background: var(--paper);
}
.dir-row {
  display: grid; gap: .2rem 1rem; align-items: baseline;
  grid-template-columns: 7.5rem 1fr; padding: .8rem 1rem;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--line-2);
  transition: background .16s var(--ease);
}
.dir-row:last-child { border-bottom: 0; }
.dir-row:hover { background: var(--paper-2); }
.dir-code {
  font-family: var(--mono); font-size: .82rem; font-weight: 700;
  color: var(--navy);
}
.dir-name { font-weight: 600; }
.dir-where { grid-column: 2; color: var(--ink-3); font-size: .85rem; }
.dir-tag { grid-column: 2; justify-self: start; margin-top: .15rem; }
@media (min-width: 62rem) {
  /* The last column is a fixed width, not `auto`. With `auto` it collapsed
     to nothing on every row without a profile badge, and the city column
     slid right - so the same column did not start in the same place twice. */
  .dir-row { grid-template-columns: 7.5rem 1fr 12rem 11rem; }
  .dir-where { grid-column: auto; }
  .dir-tag { grid-column: auto; margin-top: 0; justify-self: end; }
}

.pager {
  display: flex; align-items: center; gap: var(--s-4);
  margin-top: var(--s-5); flex-wrap: wrap;
}
.pager-at { color: var(--ink-3); font-size: .88rem; font-weight: 600; }

.ident-grid {
  display: grid; gap: 0; margin: 0; border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; background: var(--paper);
}
.ident-row {
  display: grid; grid-template-columns: 9rem 1fr; gap: 1rem;
  padding: .75rem 1rem; border-bottom: 1px solid var(--line-2);
}
.ident-row:last-child { border-bottom: 0; }
.ident-row dt {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 800; color: var(--ink-3);
}
.ident-row dd { margin: 0; font-weight: 600; }

.region-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--s-5); }
.region-chip {
  display: inline-flex; flex-direction: column; gap: .1rem;
  padding: .6rem 1rem; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--paper);
  text-decoration: none; color: inherit;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.region-chip:hover { border-color: var(--navy); transform: translateY(-2px); }
.region-chip-name { font-weight: 700; font-size: .92rem; color: var(--navy-ink); }
.region-chip-n { font-size: .76rem; color: var(--ink-3); }

.result-directory .rk { color: var(--orange-cta); }
.result-note { margin: -.3rem 0 .6rem; color: var(--ink-3); }

/* ==========================================================================
   R3.1 — region first
   --------------------------------------------------------------------------
   The hierarchy is the navigation: region, then country, then airport. The
   globe is a picture beside it, not the structure. Same navy, same orange,
   same rationing.
   ========================================================================== */

.region-bands { display: grid; gap: var(--s-3); }
@media (min-width: 62rem) {
  .region-bands { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
}
.region-band {
  position: relative; display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-5) var(--s-6); border-radius: var(--r-md);
  text-decoration: none; color: inherit; overflow: hidden;
  background: linear-gradient(100deg, var(--paper) 0%, var(--paper-2) 100%);
  border: 1px solid var(--line);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease),
              border-color .24s var(--ease);
}
.region-band::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--navy); transition: background .24s var(--ease);
}
.region-band:hover {
  transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0, 32, 63, .1);
  border-color: rgba(0, 79, 153, .3);
}
.region-band:hover::before { background: var(--orange); }

.region-cue { flex: 0 0 auto; width: 54px; height: 50px; opacity: .5; }
.region-cue svg { width: 100%; height: 100%; display: block; }
.region-cue path {
  fill: rgba(0, 79, 153, .12); stroke: var(--navy); stroke-width: 1.4;
  stroke-linejoin: round;
}
.region-band:hover .region-cue { opacity: .85; }
.region-band:hover .region-cue path { fill: rgba(248, 96, 22, .14); }

.region-main { flex: 1 1 auto; min-width: 0; display: grid; gap: .18rem; }
.region-name {
  font-family: var(--display); font-size: 1.3rem; font-weight: 700;
  letter-spacing: -.015em; color: var(--navy-ink);
}
.region-stats { font-size: .88rem; color: var(--ink-3); }
.region-stats b { color: var(--ink-2s); font-weight: 800; }
.region-published {
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 800; color: var(--navy);
}
.region-published.region-desk { color: var(--ink-3); font-weight: 700; }
.region-go {
  flex: 0 0 auto; font-size: 1.3rem; color: var(--navy); opacity: .35;
  transition: transform .24s var(--ease), opacity .24s var(--ease);
}
.region-band:hover .region-go {
  transform: translateX(4px); opacity: 1; color: var(--orange-cta);
}
@media (max-width: 46rem) {
  .region-band { padding: var(--s-4) var(--s-5); gap: var(--s-4); }
  .region-cue { width: 40px; height: 38px; }
  .region-name { font-size: 1.1rem; }
}

/* The home page's compact route into the same hierarchy. */
.region-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--s-5); }
.region-pill {
  display: inline-flex; flex-direction: column; gap: .05rem;
  padding: .55rem .9rem; border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  text-decoration: none; color: #fff; font-size: .88rem; font-weight: 700;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.region-pill:hover {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .34); color: #fff;
}
.region-pill-n {
  font-size: .72rem; font-weight: 600; color: var(--apron-ink-3);
}

/* The globe, now secondary. It sits alone and centred rather than owning
   half the page as a navigation surface. */
.globe-band .globe-secondary { max-width: 34rem; margin: 0 auto; }

.profile-grid { display: grid; gap: 0; border: 1px solid var(--line);
                border-radius: var(--r-md); overflow: hidden;
                background: var(--paper); }
.profile-card {
  display: grid; gap: .15rem 1rem; grid-template-columns: 9rem 1fr;
  padding: .8rem 1rem; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--line-2);
  transition: background .16s var(--ease);
}
.profile-card:last-child { border-bottom: 0; }
.profile-card:hover { background: var(--paper-2); }
@media (min-width: 62rem) {
  .profile-grid { grid-template-columns: 1fr 1fr; }
  .profile-card:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

.finder-inline { margin-top: var(--s-6); }
.finder-inline .eyebrow { margin-bottom: .6rem; }

/* The example chips were styled only inside the hero, and the hero no
   longer carries a search box - so on the finder bands they rendered as
   one run-on string. They are a light-surface component now, with the
   hero keeping its reversed treatment above. */
.hint { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.hint .ex {
  font-family: var(--mono); font-size: .74rem; color: var(--navy);
  border: 1px solid var(--line); border-radius: var(--r-xs);
  padding: .12rem .42rem; display: inline-block; background: var(--paper);
}
.apron-surface .hint .ex, .hero .hint .ex {
  color: #cfdcea; border-color: rgba(255, 255, 255, .2); background: none;
}
.finder-band .hint, .service-finder .hint { color: var(--ink-3); }

/* The hero's desk line. Three facts, read as three facts: the availability,
   the year, and who answers. It used to be one grey sentence competing with
   the calls to action above it. */
.hero-desk {
  margin-top: var(--s-5); display: flex; flex-wrap: wrap;
  align-items: center; gap: .55rem; font-size: .95rem;
  color: var(--apron-ink-2);
}
.hero-desk b {
  color: #fff; font-weight: 800; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.hero-desk .desk-sep { color: rgba(255, 255, 255, .34); }
.hero-desk .desk-what {
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 800; color: var(--orange);
}
.hero-desk .desk-mail {
  color: #fff; text-decoration: none; font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  padding-bottom: .05rem;
}
.hero-desk .desk-mail:hover { border-bottom-color: var(--orange); }
@media (max-width: 46rem) {
  .hero-desk { gap: .4rem; font-size: .88rem; }
  .hero-desk .desk-mail { flex-basis: 100%; }
}

/* A country list, grouped by region. The same hierarchy as Coverage, used
   wherever countries are listed - service pages, the country index. */
.region-group + .region-group { margin-top: var(--s-6); }
.region-group-head {
  display: flex; align-items: baseline; gap: .6rem; margin: 0 0 var(--s-4);
  padding-bottom: .5rem; border-bottom: 1px solid var(--line);
}
.region-group-head a {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 800; color: var(--navy); text-decoration: none;
}
.region-group-head a:hover { color: var(--orange-cta); }
.region-group-head span {
  font-size: .76rem; font-weight: 700; color: var(--ink-3);
}

/* The heading that opens an airport service page, under the dark head:
   "OPKC/KHI Jinnah International Airport Ground Handling Services". */
.page-h2 { margin: 0 0 .5rem; }
.page-h2 + .small { margin-top: 0; }

/* ==========================================================================
   Country flags
   --------------------------------------------------------------------------
   Derived from the ISO 3166-1 alpha-2 code, drawn by one self-hosted font,
   so there is no per-country image and no extra request on a page listing
   two hundred countries. Decorative in every case: the country is named in
   text beside the flag, so the mark is aria-hidden and a reader is told the
   country once.
   ========================================================================== */
.flag {
  font-family: "Twemoji Country Flags", "Apple Color Emoji",
               "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-weight: 400;
  line-height: 1;
  margin-right: .5rem;
  letter-spacing: 0;
  -webkit-user-select: none;
  user-select: none;
}
/* A flag sits with the name, so the two stay on one baseline when the name
   wraps to a second line. */
.card-flagged .t, .country-card h3, .result .rt {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0;
}
.chip, .rail li > a { display: inline-flex; align-items: baseline; }
.chip .flag { margin-right: .45rem; }

/* The country's own page leads with its flag and its full name, on one
   line, above the heading. */
.country-mark {
  display: flex; align-items: center; gap: .55rem; margin: 0 0 .6rem;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 800; color: var(--orange-logo);
}
.country-mark .flag { font-size: 1.8rem; margin: 0; letter-spacing: 0; }
.entity-head.dark .country-mark { color: var(--orange-logo); }

.flag-mark {
  margin: 0 0 .45rem;
  font-family: "Twemoji Country Flags", "Apple Color Emoji",
               "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 2.6rem; line-height: 1;
}
.flag-mark:empty { display: none; }

/* Every country is a link, so every country shows it is one: hover, and a
   visible ring for a keyboard. */
.country-card:focus-visible, .card:focus-visible, .chip:focus-visible,
.result:focus-visible, .region-band:focus-visible,
.region-group-head a:focus-visible {
  outline: 2px solid var(--orange-cta); outline-offset: 3px;
  border-radius: var(--r-sm);
}
.rail li > a { transition: color .18s var(--ease); }
.rail li > a:hover { color: var(--orange-ink); }

/* A country result names how many airports we hold and links to all of them. */
.result-more { margin: var(--s-4) 0 0; }
.result-more a {
  font-weight: 700; font-size: .88rem; color: var(--navy);
  text-decoration: none;
}
.result-more a:hover { color: var(--orange-cta); }
.result-group .flag { font-size: .95rem; }

/* ==========================================================================
   How to arrange your flight
   --------------------------------------------------------------------------
   Three steps, three different marks, one connector. It is a sequence, so it
   reads as one: the rule runs behind the marks on desktop and down the left
   on a phone. No dashboard chrome, no timeline widget.
   ========================================================================== */
.arrange-steps {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5);
  position: relative;
}
@media (min-width: 62rem) {
  .arrange-steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
  /* The connector sits behind the marks and stops short of the first and
     last, so it never appears to run off the section. */
  .arrange-steps::before {
    content: ""; position: absolute; top: 1.7rem; left: 16%; right: 16%;
    height: 1px; background: linear-gradient(90deg, transparent,
      var(--line) 12%, var(--line) 88%, transparent);
  }
}
.arrange-step { position: relative; }
.arrange-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line);
  color: var(--navy); position: relative; z-index: 1;
  transition: border-color .22s var(--ease), color .22s var(--ease),
              transform .22s var(--ease);
}
.arrange-mark svg { width: 1.7rem; height: 1.7rem; }
.arrange-step:hover .arrange-mark,
.arrange-step:focus-within .arrange-mark {
  border-color: var(--orange-cta); color: var(--orange-cta);
  transform: translateY(-2px);
}
.arrange-n {
  display: block; margin: var(--s-4) 0 .25rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .14em;
  font-weight: 700; color: var(--orange-cta);
}
.arrange-step h3 { margin: 0 0 .35rem; font-size: 1.08rem; }
.arrange-step p { margin: 0; color: var(--ink-3); font-size: .92rem; }
.paper-2 .arrange-mark, .apron-surface .arrange-mark { background: var(--paper); }
@media (prefers-reduced-motion: reduce) {
  .arrange-mark { transition: none; }
  .arrange-step:hover .arrange-mark { transform: none; }
}

/* An airport card in a service finder. The heading is the full search-intent
   string, so it wraps rather than being cut: an operator has to be able to
   read which aerodrome it is. */
.card-airport .t { font-size: .98rem; line-height: 1.32; }
.card-airport .k {
  display: block; font-family: var(--mono); font-size: .74rem;
  letter-spacing: .06em; color: var(--orange-cta); margin-bottom: .3rem;
}
.card-airport .s { display: flex; align-items: baseline; gap: 0; }

/* The desk line, wherever it appears outside the hero. */
.occ-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; }

/* The overlay heading is chrome, so it is a paragraph in the outline and a
   heading to the eye. It keeps the margins an h2 had. */
.overlay-h { margin: .2rem 0 var(--s-5); }

/* ==========================================================================
   Density: a country's aerodromes
   --------------------------------------------------------------------------
   Six cards for the ones an operator usually wants, then a dense scrollable
   table for the rest with a filter over it. A row is a grid cell, never a
   CSS column: columns flowed one row into the next, so a code appeared
   beside another aerodrome's name and the profile badge landed on top of it.
   ========================================================================== */
.apt-top {
  display: grid; gap: var(--s-4); margin: var(--s-4) 0 0;
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .apt-top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 76rem) { .apt-top { grid-template-columns: repeat(3, 1fr); } }
.apt-card {
  display: grid; gap: .12rem; align-content: start;
  padding: .85rem 1rem; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--paper);
  text-decoration: none; color: inherit;
  transition: border-color .18s var(--ease), transform .18s var(--ease),
              box-shadow .18s var(--ease);
}
.apt-card:hover {
  border-color: var(--navy); transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 32, 63, .09);
}
.apt-card:focus-visible { outline: 2px solid var(--orange-cta); outline-offset: 2px; }
.apt-card .apt-code { font-size: .78rem; }
.apt-card .apt-name { font-size: .98rem; }
.apt-card .tag { justify-self: start; margin-top: .35rem; }

.apt-table { margin: var(--s-5) 0 var(--s-6); }
.apt-filter { display: block; margin: 0 0 .6rem; }
.apt-filter input {
  width: 100%; max-width: 26rem; padding: .55rem .85rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--paper); color: inherit; font: inherit; font-size: .9rem;
}
.apt-filter input:focus-visible {
  outline: 2px solid var(--orange-cta); outline-offset: 1px;
}
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
/* A fixed viewport so a long country does not push the rest of the page
   below the horizon. It scrolls; the page does not have to. */
.apt-scroll {
  max-height: 30rem; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper);
}
.apt-row {
  display: grid; gap: .1rem .9rem; align-items: baseline;
  grid-template-columns: 6.5rem 1fr; padding: .5rem .9rem;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--line-2);
}
.apt-row:last-child { border-bottom: 0; }
.apt-row:hover { background: var(--paper-2); }
.apt-row:focus-visible { outline: 2px solid var(--orange-cta); outline-offset: -2px; }
.apt-row[hidden] { display: none; }
.apt-code {
  font-family: var(--mono); font-size: .74rem; font-weight: 700;
  color: var(--navy); letter-spacing: .04em;
}
.apt-name { font-weight: 600; font-size: .9rem; }
.apt-where { grid-column: 2; color: var(--ink-3); font-size: .8rem; }
.apt-row .tag { grid-column: 2; justify-self: start; margin-top: .12rem; }
@media (min-width: 62rem) {
  .apt-row { grid-template-columns: 6.5rem minmax(0, 1fr) 9rem 5.5rem; }
  .apt-where { grid-column: auto; }
  .apt-row .tag { grid-column: auto; margin-top: 0; justify-self: end; }
}
.apt-none { margin: .6rem 0 0; color: var(--ink-3); font-size: .88rem; }
.apt-more {
  display: inline-block; margin-top: var(--s-4); font-weight: 700;
  font-size: .88rem; color: var(--navy); text-decoration: none;
}
.apt-more:hover { color: var(--orange-cta); }

/* On-this-page jump list: an operator lands from a query and wants the one
   section that answers it. */
.jump {
  display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: baseline;
  padding: .7rem 0 0; margin: 0 0 var(--s-5);
  border-top: 1px solid var(--line-2);
}
.jump-label {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 800; color: var(--ink-3); margin-right: .3rem;
}
.jump a {
  font-size: .8rem; color: var(--navy); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: .2rem .65rem; background: var(--paper);
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.jump a:hover { border-color: var(--navy); color: var(--orange-ink); }

/* An anchored answer section. The heading is the question; the paragraph
   under it is the answer, not a preamble to one. */
.answer { scroll-margin-top: 5.5rem; margin: 0 0 var(--s-6); }
.answer h2 { margin: 0 0 .5rem; }
.answer p { margin: 0 0 .5rem; }
.answer p:last-child { margin-bottom: 0; }

/* Capability groups: the company's own list of what it arranges, in the
   three groups an operator thinks in. */
.cap-group + .cap-group { margin-top: var(--s-6); }
.cap-group-head {
  margin: 0 0 var(--s-4); padding-bottom: .45rem;
  border-bottom: 1px solid var(--line);
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 800; color: var(--navy);
}

/* The rest of a country's aerodromes: on the page, one click away, so a
   ninety-three-aerodrome country is complete without being a wall. */
.apt-rest { margin-top: .6rem; }
.apt-rest > summary {
  cursor: pointer; font-weight: 700; font-size: .88rem; color: var(--navy);
  padding: .5rem 0; list-style: none;
}
.apt-rest > summary::-webkit-details-marker { display: none; }
.apt-rest > summary::before { content: "+ "; color: var(--orange-cta); }
.apt-rest[open] > summary::before { content: "\2212 "; }
.apt-rest > summary:hover { color: var(--orange-cta); }
.apt-rest > summary:focus-visible {
  outline: 2px solid var(--orange-cta); outline-offset: 2px;
}

/* A service airport card carries three lines: the codes, what the reader
   came for, and the aerodrome itself. */
.card-airport .s + .s { margin-top: .1rem; font-size: .8rem; }

/* ==========================================================================
   The operations assistant
   --------------------------------------------------------------------------
   Not a chat bubble. An answer here is a document: it has a heading, the
   state of what it is made of, and the sources underneath. A reader is about
   to file a flight plan on one of these, so "verified" and "we do not know"
   must never look alike.
   ========================================================================== */
.ask { display: flex; gap: .6rem; margin: var(--s-5) 0 0; flex-wrap: wrap; }
.ask input {
  flex: 1 1 18rem; padding: .85rem 1.1rem; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.96);
  color: var(--ink); font: inherit; font-size: 1rem;
}
.ask input:focus-visible { outline: 2px solid var(--orange-cta); outline-offset: 2px; }

.ans {
  border: 1px solid var(--line); border-left: 3px solid var(--navy);
  border-radius: var(--r-md); background: var(--paper);
  padding: var(--s-5) var(--s-5) var(--s-4); margin: 0 0 var(--s-5);
}
.ans-head {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  margin: 0 0 .6rem; font-size: 1.12rem;
}
.ans-body p { margin: 0 0 .45rem; color: var(--ink-2s); }
.ans-body p:last-child { margin-bottom: 0; }
.ans-actions { margin: .8rem 0 0; display: flex; gap: .4rem; flex-wrap: wrap; }
.ans-state {
  font-size: .66rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: .15rem .5rem;
  border-radius: var(--r-pill); white-space: nowrap;
}
/* An unknown is not a failure state to be hidden; it is the answer. */
.ans-state.s-VERIFIED { background: rgba(23,133,86,.12); color: #157046; }
.ans-state.s-PARTIALLY_VERIFIED { background: rgba(217,140,15,.14); color: #8a5a06; }
.ans-state.s-DIRECTORY_ONLY { background: rgba(0,79,153,.1); color: var(--navy); }
.ans-state.s-UNKNOWN { background: rgba(90,104,118,.12); color: var(--ink-3); }
.ans-state.s-STALE, .ans-state.s-CONFLICT {
  background: rgba(217,79,15,.13); color: var(--orange-cta);
}
.ans .ans-state { border-left: 0; }
.ans-sources { margin-top: .7rem; }
.ans-sources > summary {
  cursor: pointer; font-size: .82rem; color: var(--ink-3); font-weight: 700;
}
.ans-sources ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .84rem;
                  color: var(--ink-3); }
.ans-sources .cls {
  font-family: var(--mono); font-size: .72rem; color: var(--orange-cta);
}
.ans-sources .when { font-size: .74rem; }

/* ------------------------------------------------------------------------
   Final website finish: density.
   Sections, display type and the hero were sized for a sparse pilot site.
   With the full estate the same spacing made every page three screens
   longer than it needed to be. Rhythm is kept; only the extremes come in.
   ------------------------------------------------------------------------ */
section.band { padding: clamp(2.4rem, 4.6vw, 4rem) 0; }
section.band.tight { padding: clamp(1.8rem, 3vw, 2.6rem) 0; }
.band-head { margin-bottom: clamp(1.1rem, 2vw, 1.8rem); }
.display { font-size: clamp(2.4rem, 4.4vw, 4.1rem); }
.display-2 { font-size: clamp(1.85rem, 2.9vw, 2.6rem); }
h2, .h2 { font-size: clamp(1.45rem, 2.2vw, 1.95rem); }
.hero-inner { padding: clamp(2.4rem, 6vh, 4.4rem) 0 clamp(2rem, 5vh, 3.4rem); }

/* Seven service lines with no orphan: one lead across the full width, then
   rows of three (desktop) or two (tablet). */
@media (min-width: 46rem) {
  .svc-grid > .svc-panel:first-child { flex: 1 1 100%; }
}
@media (min-width: 76rem) {
  .svc-lead ~ .svc-lead {
    flex: 1 1 calc(33.333% - var(--s-5) * 2 / 3); flex-direction: column;
  }
  .svc-lead ~ .svc-lead .svc-media { flex: 0 0 auto; }
  .svc-lead ~ .svc-lead .svc-body { align-self: stretch; padding: var(--s-5); }
  .svc-lead ~ .svc-lead h3 { font-size: 1.2rem; }
  /* This lead is a column card again, so it takes the grid's picture shape
     again. The 16/9 belongs to the full-width row lead; left applying here
     it made this card's photograph shorter than the two beside it, and the
     row of three stopped lining up along the bottom of the images. */
  .svc-lead ~ .svc-lead .svc-media img { aspect-ratio: 16 / 10; }
}

/* Dense tiles: a region's worth of countries without a wall. */
.grid.g4.dense {
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .5rem;
}
.grid.dense .card { padding: .6rem .75rem; }
.grid.dense .card .t { font-size: .92rem; }
.grid.dense .card .s { font-size: .76rem; line-height: 1.35; }
@media (max-width: 40rem) {
  .grid.g4.dense { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Permits band on the home page: capabilities on the dark apron surface. */
.permits-caps .cap-grid { gap: .6rem; }
.apron-surface .cap h3 { color: #fff; }
.apron-surface .cap p { color: #c9d6e2; }
.apron-surface .cap-group-head { color: #9fb6cc; }

/* Long aerodrome names wrap instead of pushing a card wider than its column. */
.apt-name, .result .rt, .card .t, .card .s, .profile-card .dir-name {
  overflow-wrap: anywhere;
}

/* Capability cells on a dark surface: a tinted panel, not a white card with
   white text on it. */
.apron-surface .cap {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14);
  box-shadow: none;
}

/* Service drill-down rows carry the full heading, codes included, so there is
   no separate code column: the name takes the width and wraps once at most. */
.apt-list .apt-row { grid-template-columns: minmax(0, 1fr) auto; padding: .45rem .8rem; }
.apt-list .apt-where { grid-column: 1; }
.apt-list .apt-row .tag { grid-column: 2; grid-row: 1; justify-self: end; margin-top: 0; }
@media (min-width: 62rem) {
  .apt-list .apt-row { grid-template-columns: minmax(0, 1fr) 13rem 5.5rem; }
  .apt-list .apt-where { grid-column: 2; grid-row: 1; }
  .apt-list .apt-row .tag { grid-column: 3; }
}

/* Permit types the taxonomy files under a service line, linked. */
.cap-children { margin: var(--s-4) 0 0; font-size: .92rem; }
.cap-children a { font-weight: 600; }

/* The directory entries no region band holds, named under the bands. */
.region-unlisted { margin: var(--s-4) 0 0; color: var(--ink-3); }
/* Airports not yet plotted: folded, linked, never a wall of codes. */
.unplotted { margin-top: var(--s-5); }
.unplotted summary { cursor: pointer; color: var(--ink-3); font-size: .9rem; }
.unplotted .chips { margin-top: var(--s-3); }

/* ======================================================== design pass 2 --
   Priority-estate design pass. The site's job is to show an operator what a
   State actually publishes and who says so. So:
   - one family: Mulish carries display and body; the serif display face and
     its warm cream ground read as a template, not as aviation;
   - cool chart-white neutrals instead of warm paper;
   - sentence-case labels; the tracked capitals and the rule after every
     eyebrow were decoration, not information;
   - flat navy heads, no gradient washes;
   - one bold element: the evidence strip. A verified value sits on a green
     rule with tabular figures and its source beside it. */
:root {
  --display: var(--sans);
  --paper-2: #f4f6f9;
  --paper-3: #e8ecf1;
  --line:    #dbe2ea;
  --line-2:  #eaeef3;
}
.display-2, h1, h2, h3, .h2, .h3 { font-family: var(--sans); }
.display-2 { font-weight: 800; letter-spacing: -.025em; }
h2, .h2 { font-weight: 800; letter-spacing: -.02em; }
h3, .h3 { font-weight: 700; letter-spacing: -.01em; }

.eyebrow {
  text-transform: none; letter-spacing: 0; font-size: .92rem;
  font-weight: 700; color: var(--navy);
}
.eyebrow::after { display: none; }
.apron-surface .eyebrow, .entity-head.dark .eyebrow, .hero .eyebrow {
  color: #a8c8ea;
}

.entity-head.dark {
  background-image: none;
  border-bottom: 4px solid var(--navy);
}

/* The evidence strip */
.facts {
  border-left: 3px solid var(--ok);
  padding-left: 1.15rem;
}
.fact > .label {
  text-transform: none; letter-spacing: 0;
  font-size: .9rem; font-weight: 600; color: var(--ink-3);
}
.fact > .value {
  font-size: 1.1rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.answer {
  border-left: 3px solid var(--line);
  padding-left: 1.15rem;
}
.answer:not([data-state="UNKNOWN"]) { border-left-color: var(--ok); }
.answer[data-state="UNKNOWN"] p { color: var(--ink-3); }
.answer .evidence {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem;
  margin-top: .45rem;
}
.answer .evidence details.prov { margin-top: 0; }
@media (max-width: 46rem) {
  .facts, .answer { padding-left: .85rem; }
}

/* ------------------------------------------------------ design pass 2b --
   The rest of the public labels in sentence case, and the decorative
   gradients flattened. Image scrims stay: they keep hero text legible over a
   photograph, which is a job, not decoration. Internal research tables keep
   their own treatment. */
.hero-meta span, .suggestions .group, .entity-meta dt, .entity-meta .k,
.claim .who, .result-group, .foot-grid h3, .foot-col h3, .rail h2,
.clock .k, .rail-regulator .notice h2, .svc-eyebrow, .tag, .ident-row dt,
.region-published, .hero-desk .desk-what, .region-group-head a,
.country-mark, .jump-label, .cap-group-head, .ans-state {
  text-transform: none;
  letter-spacing: 0;
}
.rail h2, .foot-grid h3, .foot-col h3 { font-size: .95rem; font-weight: 800; }
.claim, .search-head, .page-hero, .foot-upper, .region-band {
  background-image: none;
}
.claim { background-color: var(--navy-ink); }

/* Six direct answers are one list of questions, not six section breaks. */
.answer h2 { font-size: clamp(1.2rem, 1.7vw, 1.45rem); letter-spacing: -.015em; }

/* Services a page arranges: a ruled list read down the column. */
.svc-list {
  list-style: none; margin: 0 0 var(--s-5); padding: 0;
  display: grid; gap: 0 var(--s-6);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  border-top: 1px solid var(--line);
}
.svc-list li { border-bottom: 1px solid var(--line-2); }
.svc-list a {
  display: block; padding: .8rem 0; text-decoration: none; color: inherit;
}
.svc-list b { display: block; color: var(--navy); font-weight: 700; }
.svc-list span { display: block; font-size: .86rem; color: var(--ink-3); }
.svc-list a:hover b { color: var(--orange-ink); }
.svc-list a:focus-visible { outline-offset: 4px; }

/* ------------------------------------------------------- design pass 3 --
   Depth where it carries meaning: the dark heads get a faint chart grid and
   a verified-figures panel, the breadcrumb joins the head it introduces, the
   service photograph fills its hero, and the home hero ends on a stat bar
   instead of a wash. */
.entity-head.dark {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60rem 26rem at 88% 40%, rgba(0, 79, 153, .45), transparent 62%),
    radial-gradient(34rem 20rem at 100% 100%, rgba(248, 96, 22, .09), transparent 60%),
    var(--navy-ink);
}
.entity-head.dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 90%);
          mask-image: linear-gradient(100deg, transparent 30%, #000 90%);
}
.entity-head.dark .display-2 { text-wrap: balance; letter-spacing: -.02em; }

/* The trail sits on the head it introduces. */
main > .wrap:has(+ .entity-head.dark), main > .wrap:has(+ .svc-hero) {
  background: var(--navy-ink);
  box-shadow: 0 0 0 100vmax var(--navy-ink);
  clip-path: inset(0 -100vmax);
}
main > .wrap:has(+ .entity-head.dark) .breadcrumb,
main > .wrap:has(+ .svc-hero) .breadcrumb { padding-block: var(--s-4) 0; }
main > .wrap:has(+ .entity-head.dark) .breadcrumb a,
main > .wrap:has(+ .svc-hero) .breadcrumb a { color: #9db2c7; }
main > .wrap:has(+ .entity-head.dark) .breadcrumb li,
main > .wrap:has(+ .svc-hero) .breadcrumb li { color: #e3ecf5; }
main > .wrap:has(+ .entity-head.dark) .breadcrumb li + li::before,
main > .wrap:has(+ .svc-hero) .breadcrumb li + li::before { color: #5f7690; }
main > .wrap:has(+ .entity-head.dark) + .entity-head.dark { padding-top: var(--s-6); }

/* Headline figures beside the title. */
.head-grid { display: grid; gap: var(--s-6); align-items: end; }
@media (min-width: 64rem) {
  .head-grid { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--s-7); }
}
.head-panel {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
  padding: 1.1rem 1.25rem 1rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.head-panel-title {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem;
  font-size: .8rem; font-weight: 700; color: #cfe0f0;
}
.dot-ok {
  width: .5rem; height: .5rem; border-radius: 50%; background: #3fcf8e;
  box-shadow: 0 0 0 .2rem rgba(63, 207, 142, .22);
}
.head-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; margin: 0;
}
.head-facts div { min-width: 0; }
.head-facts dt { font-size: .72rem; color: #93a9bf; margin: 0 0 .15rem; }
.head-facts dd {
  margin: 0; color: #fff; font-weight: 700; font-size: 1.02rem; line-height: 1.25;
  font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere;
}
.head-panel-src {
  margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .72rem; color: #8ea4ba;
}

/* Runways as one pill each. */
.rwys { display: flex; flex-wrap: wrap; gap: .4rem .45rem; }
.rwy {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .22rem .6rem; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--line-2);
  font-size: .92rem; font-weight: 600; color: var(--ink-2, var(--ink));
}
.rwy b { color: var(--navy); font-weight: 800; letter-spacing: .01em; }

/* The service photograph fills its hero instead of stopping at a box. */
.svc-hero-media figure.owned, .svc-hero-media .owned {
  aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0;
}
.svc-hero-media picture, .svc-hero-media picture img { display: block; width: 100%; height: 100%; }
.svc-hero-media img { object-fit: cover; }
.svc-hero-scrim {
  background: linear-gradient(95deg, rgba(0, 32, 63, .94) 0%,
              rgba(0, 32, 63, .78) 45%, rgba(0, 32, 63, .30) 100%);
}

/* Home hero: a stat bar, not a wash. */
.hero-fade { height: 3.5rem; }
.hero-meta {
  display: inline-flex; flex-wrap: wrap; gap: 0;
  background: rgba(0, 20, 40, .42);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: .2rem;
}
.hero-meta div { padding: .75rem 1.3rem; min-width: 8.5rem; }
.hero-meta div + div { border-left: 1px solid rgba(255, 255, 255, .1); }
@media (max-width: 46rem) {
  .hero-meta { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-meta div { padding: .6rem .9rem; min-width: 0; }
  .hero-meta div + div { border-left: 0; }
}

/* "On this page": a tidy index card, not a wall of pills. */
.jump {
  background: var(--paper); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: .9rem 1rem;
}
.jump a { background: transparent; }

/* Cards lift a little under the pointer; nothing moves for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .card, .airport-card, .story-card, .cap {
    transition: transform .18s var(--ease), box-shadow .18s var(--ease),
                border-color .18s var(--ease);
  }
  a.card:hover, a.airport-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -14px rgba(0, 32, 63, .35);
  }
}

/* A light hero carries the same panel in ink on paper. */
.page-hero .head-panel {
  background: var(--paper-2); border-color: var(--line);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.page-hero .head-panel-title { color: var(--ink-3); }
.page-hero .head-facts dt { color: var(--ink-3); }
.page-hero .head-facts dd { color: var(--ink); }
.page-hero .head-panel-src { color: var(--ink-3); border-top-color: var(--line); }

/* The pill hides the separator the value carries; the text keeps it, so what
   is copied off the page is still the published value. */
.rwy-len { font-weight: 600; }
.rwy-len::first-letter { font-size: 0; }


/* ------------------------------------------------------- brand curtain --
   A reveal over a page that is already rendered. It owns no layout, holds
   the scroll only while it runs, and leaves the document when it ends. */
.intro-curtain {
  position: fixed; inset: 0; z-index: 200; background: #00131f;
  display: grid; place-items: center; overflow: hidden;
  animation: curtain-in .5s var(--ease) both;
  height: 100vh; height: 100dvh;
}
.intro-curtain[data-leaving="true"] { animation: curtain-out .6s var(--ease) both; }
/* A film that ran to its end has already dissolved into the homepage's own
   hero, so the curtain leaves by dissolving and nothing else: no scale, no
   movement, nothing for the eye to catch. */
.intro-curtain[data-settled="true"][data-leaving="true"] {
  animation: curtain-dissolve .6s var(--ease) both;
}
html[data-curtain="on"] { overflow: hidden; }
.intro-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.intro-still, .intro-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center;
}
/* The still timeline supplies its own movement, because a photograph has
   none. The film already contains its camera move and is left alone: any
   scale here would be a size change at the exact moment the page takes over,
   which is the one thing the handoff may not do. */
.intro-still {
  transform: scale(1.12); opacity: 0;
  animation: curtain-push 5.8s cubic-bezier(.22, .61, .36, 1) both;
}
/* The film occupies the hero's band and nothing else. Full-screen, it was
   cropped to the viewport while the hero was cropped to a strip of it, and
   the two never agreed on tall or ultrawide screens. Given the same box as
   the hero, and anchored to the top of it like the page is, the film and the
   page are looking at the same picture the same way. The navy below is the
   curtain's own, so there is no edge and nothing flashes. */
/* Full-bleed. The film fills the screen, cropped by cover the way any
   full-screen film is, anchored to the top so the part that has to agree
   with the page is the part the page will show. */
.intro-video {
  opacity: 0; object-position: center top;
  top: 0; bottom: auto; height: 100%;
  animation: video-in .45s var(--ease) both;
}

/* The frame the film hands over on, and the bridge between two shapes.

   The film is a fixed 16:9 picture. The hero is a band whose shape changes
   with the viewport. Fitting one into the other crops them differently, so
   there is no single frame that agrees with the hero at 1920, 2560 and 3440
   at once - which is what the width test kept finding.

   The film is shown at its own shape - full width, its own aspect, never
   cropped and never stretched - and this layer starts at that same shape
   showing that same picture, then settles into the hero's shape. Both ends are exact: the film
   dissolves into pixels identical to itself, and what remains is the hero as
   the page builds it. The only thing that moves is the shape, and it moves
   deliberately, over four tenths of a second. */
/* Starts where the film is - filling the screen, cropped the same way - so
   the dissolve between them moves nothing, and then settles into the hero's
   band, which is the only part of the change anyone is meant to see. */
.intro-settle {
  position: absolute; left: 0; right: 0; top: 0;
  height: 100%; overflow: hidden;
  opacity: 0;
  transition: opacity .38s var(--ease), height .46s var(--ease);
}
/* The frame is the film's last picture, laid out exactly as the video
   element was: cover, anchored to the top, filling the layer. The hero
   picture waits underneath at zero opacity and takes over on the bridge. */
/* Written as `img.intro-settle-frame` on purpose: `.intro-settle img` below
   is a class plus a type and outranks a lone class, so a plain
   `.intro-settle-frame` lost its anchor to it and the frame was cropped from
   the centre while the film was cropped from the top. On an ultrawide screen
   that is a different picture, and the width test read it as a jump. */
.intro-settle img.intro-settle-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top; z-index: 1;
  transition: opacity .42s var(--ease);
}
.intro-settle picture img { opacity: 0; transition: opacity .42s var(--ease); }
.intro-curtain[data-bridged="true"] .intro-settle img.intro-settle-frame { opacity: 0; }
.intro-curtain[data-bridged="true"] .intro-settle picture img { opacity: 1; }
.intro-settle img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.intro-curtain[data-settled="true"][data-bridged="true"] .intro-settle {
  height: var(--hero-band, 100%);
}
/* The page's own scrim, arriving with the shape rather than before it. The
   film's last frame is the bare photograph, so the layer starts bare and
   ends dressed exactly as the hero is - the dissolve stays invisible and the
   handoff stops being a step into a darker picture. */
.intro-settle-scrim {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .46s var(--ease);
  background:
    linear-gradient(96deg, rgba(0, 20, 40, .95) 0%, rgba(0, 22, 42, .86) 30%,
                    rgba(4, 18, 32, .5) 56%, rgba(4, 18, 32, .16) 78%,
                    rgba(4, 18, 32, .34) 100%),
    linear-gradient(to top, rgba(5, 14, 24, .9) 0%, rgba(5, 14, 24, 0) 46%),
    radial-gradient(120% 80% at 20% 60%, rgba(0, 79, 153, .22), transparent 62%);
}
.intro-curtain[data-bridged="true"] .intro-settle-scrim { opacity: 1; }
/* The page paints more than a photograph into its hero: a horizon glow, a
   drift of haze, apron lights, and a fade into the band below. They are the
   page's own elements, reused here rather than approximated, and they arrive
   with the scrim so the film's last frame stays the bare photograph. */
.intro-settle .hero-atmos, .intro-settle .hero-fade {
  z-index: auto; opacity: 0; transition: opacity .46s var(--ease);
}
.intro-curtain[data-bridged="true"] .intro-settle .hero-atmos,
.intro-curtain[data-bridged="true"] .intro-settle .hero-fade { opacity: 1; }

/* On a phone the hero band is nearly square-on-end, and covering it with a
   landscape-ish photograph throws away half the aircraft. The photograph is
   fitted to the width and stood on the floor of the band instead, with the
   apron sky - these stops are sampled from the film's own plate - carried up
   behind it. It is the composition the phone film ends on, so the film and
   the page are one picture. Declared after the settle rules above, because
   it has to be the one that wins. */
@media (max-width: 46rem) {
  .hero-media, .intro-settle {
    background: linear-gradient(to bottom,
      #00131f 0%, #001a29 6%, #012134 12%, #01283e 19%, #012f48 25%, #03334c 31%);
  }
  .hero-media img, .hero[data-hero="final"] .hero-media img,
  .intro-settle picture img {
    object-fit: contain; object-position: center bottom;
  }
}
.intro-curtain[data-settled="true"] .intro-settle { opacity: 1; }
.intro-curtain[data-settled="true"] .intro-video {
  opacity: 0; transition: opacity .38s var(--ease); animation: none;
}
/* Once the film is on screen it is the whole reveal: it carries the apron,
   the mark and the words already, so the still timeline's layers step aside
   rather than doubling them. */
.intro-curtain[data-video-ready="true"] .intro-still,
.intro-curtain[data-video-ready="true"] .intro-veil,
.intro-curtain[data-video-ready="true"] .intro-mark,
.intro-curtain[data-video-ready="true"] .intro-line { display: none; }
.intro-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 50% 55%, rgba(0, 19, 31, .15),
                    rgba(0, 19, 31, .88) 100%),
    linear-gradient(180deg, rgba(0, 19, 31, .72), rgba(0, 19, 31, .34) 45%,
                    rgba(0, 19, 31, .86));
}
.intro-mark {
  position: relative; width: min(38rem, 62vw); height: auto;
  opacity: 0; transform: translateY(14px) scale(.96);
  animation: mark-in 2.6s var(--ease) 1.5s both;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .45));
}
.intro-line {
  position: absolute; bottom: clamp(3rem, 12vh, 7rem); margin: 0;
  color: #b9cee1; font-size: clamp(.72rem, 1.1vw, .86rem);
  letter-spacing: .14em; text-align: center; padding: 0 1.5rem;
  opacity: 0; animation: line-in 2.4s var(--ease) 2.6s both;
}
.intro-skip {
  position: absolute; right: clamp(1rem, 3vw, 2.5rem);
  top: calc(clamp(1rem, 3vh, 2rem) + env(safe-area-inset-top, 0px));
  z-index: 2; border: 1px solid rgba(255, 255, 255, .28); color: #e6eef6;
  background: rgba(0, 0, 0, .25); border-radius: 999px; cursor: pointer;
  padding: .5rem 1.1rem; font: inherit; font-size: .82rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.intro-skip:hover { background: rgba(255, 255, 255, .16); }
@keyframes curtain-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes curtain-out {
  from { opacity: 1; transform: scale(1) }
  to { opacity: 0; transform: scale(1.04) }
}
@keyframes curtain-dissolve { from { opacity: 1 } to { opacity: 0 } }
@keyframes video-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes curtain-push {
  0% { opacity: 0; transform: scale(1.16) }
  18% { opacity: 1 }
  100% { opacity: 1; transform: scale(1.02) }
}
@keyframes mark-in {
  0% { opacity: 0; transform: translateY(14px) scale(.96) }
  35% { opacity: 1; transform: translateY(0) scale(1) }
  100% { opacity: 1; transform: translateY(0) scale(1.06) }
}
@keyframes line-in { from { opacity: 0 } to { opacity: .9 } }
@media (prefers-reduced-motion: reduce) { .intro-curtain { display: none } }


/* ---------------------------------------------------------- lightbox --
   Airways' own photographs open at the size they were delivered at. The
   control is the photograph: no badge, no hover caption, nothing added to
   the page that was not already there. */
.owned-open {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; border-radius: inherit; overflow: hidden;
  -webkit-appearance: none; appearance: none;
}
.owned-open img { display: block; width: 100%; height: auto; }
.owned-open:focus-visible {
  outline: 2px solid var(--sky, #4ea8de); outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  .owned-open img { transition: transform .45s var(--ease); }
  .owned-open:hover img, .owned-open:focus-visible img { transform: scale(1.03); }
}

html[data-lightbox="on"] { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem); background: rgba(2, 10, 18, .92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.lightbox-stage { margin: 0; display: grid; place-items: center; }
.lightbox-stage img {
  display: block; max-width: 100%; max-height: 86vh; max-height: 86dvh;
  width: auto; height: auto; cursor: default;
  border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.lightbox-close {
  position: absolute; top: clamp(.75rem, 2vw, 1.5rem);
  right: clamp(.75rem, 2vw, 1.5rem);
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
  background: rgba(0, 0, 0, .35); color: #e6eef6; cursor: pointer;
  font: inherit; font-size: 1.5rem; line-height: 1;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lightbox-close:hover { background: rgba(255, 255, 255, .16); }
.lightbox-close:focus-visible {
  outline: 2px solid #e6eef6; outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .lightbox { animation: lightbox-in .22s var(--ease) both; }
}
@keyframes lightbox-in { from { opacity: 0 } to { opacity: 1 } }


/* ------------------------------------------------------ section surfaces --
   Depth without photographs behind text: a faint apron grid on the quiet
   bands, a horizon wash where a band meets the next, and one accent rule
   under a section's eyebrow. All of it is paint, none of it is bytes. */
.band.paper-2, .apron-surface {
  position: relative; isolation: isolate;
}
.band.paper-2::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 57, 111, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 57, 111, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, #000, transparent 75%);
          mask-image: radial-gradient(80% 60% at 50% 0%, #000, transparent 75%);
}
.apron-surface::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 32, 63, .35));
}
.band-head .eyebrow::after, .band > .wrap > .eyebrow::after {
  content: ""; display: block; width: 2.2rem; height: 2px; margin-top: .55rem;
  background: linear-gradient(90deg, var(--orange), rgba(248, 96, 22, 0));
}

/* Micro-interaction: a button answers the pointer, briefly. */
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform .16s var(--ease), box-shadow .16s var(--ease),
                     background-color .16s var(--ease), color .16s var(--ease); }
  .btn-primary:hover { transform: translateY(-1px);
                       box-shadow: 0 10px 22px -12px rgba(176, 62, 10, .8); }
  .apt-row, .dir-row, .profile-card, .mini-svc {
    transition: background-color .15s var(--ease), border-color .15s var(--ease),
                transform .15s var(--ease);
  }
  .apt-row:hover, .dir-row:hover { transform: translateX(2px); }
}

/* Page links are navigation through a list, not calls to action. */
.pager { display: flex; align-items: center; gap: .9rem; margin-top: var(--s-5); }
.pager-link {
  padding: .45rem .95rem; border: 1px solid var(--line); border-radius: 999px;
  text-decoration: none; color: var(--navy); font-weight: 600; font-size: .9rem;
}
.pager-link:hover { border-color: var(--navy); color: var(--orange-ink); }


/* ---------------------------------------------------------- hero, final --
   A night apron, a horizon glow, a slow haze, and the company over it. The
   depth is paint on composited layers; the only bytes are the photograph the
   page already loads. */
.hero[data-hero="final"] { min-height: min(100vh, 940px); display: flex;
  flex-direction: column; justify-content: center; background: #00131f; }
.hero[data-hero="final"] .hero-media { will-change: transform; }
/* The desktop hero is framed a little right of centre and low, which is
   where the aircraft sits in the landscape photograph. A phone uses the
   portrait photograph stood on the floor of the band instead, so this is
   kept off the phone rather than fighting it. */
@media (min-width: 46.0625rem) {
  .hero[data-hero="final"] .hero-media img { object-position: 62% 60%; }
}
.hero-atmos { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  overflow: hidden; }
.hero-atmos span { position: absolute; display: block; }
.atmos-horizon { left: -10%; right: -10%; bottom: 18%; height: 38%;
  background: radial-gradient(60% 55% at 70% 100%, rgba(248, 128, 52, .20),
              transparent 70%); mix-blend-mode: screen; }
.atmos-lights { left: 0; right: 0; bottom: 14%; height: 24%;
  background:
    radial-gradient(2px 2px at 12% 62%, rgba(255, 214, 150, .9), transparent 60%),
    radial-gradient(2px 2px at 26% 70%, rgba(255, 214, 150, .7), transparent 60%),
    radial-gradient(2px 2px at 41% 66%, rgba(160, 210, 255, .8), transparent 60%),
    radial-gradient(2px 2px at 57% 72%, rgba(255, 214, 150, .8), transparent 60%),
    radial-gradient(2px 2px at 83% 64%, rgba(160, 210, 255, .7), transparent 60%);
  filter: blur(.4px); opacity: .7; }
.atmos-haze { left: -30%; right: -30%; top: 8%; height: 60%;
  background:
    radial-gradient(40% 30% at 30% 40%, rgba(140, 170, 200, .10), transparent 70%),
    radial-gradient(35% 25% at 70% 30%, rgba(140, 170, 200, .08), transparent 70%);
  filter: blur(18px); }
@media (prefers-reduced-motion: no-preference) {
  .atmos-haze { animation: haze-drift 48s ease-in-out infinite alternate; }
  .atmos-lights { animation: lights-breathe 7s ease-in-out infinite alternate; }
}
@keyframes haze-drift { from { transform: translate3d(-3%, 0, 0) }
                        to { transform: translate3d(3%, -2%, 0) } }
@keyframes lights-breathe { from { opacity: .45 } to { opacity: .8 } }
.hero[data-hero="final"] .hero-scrim {
  background:
    linear-gradient(90deg, rgba(0, 19, 31, .92) 0%, rgba(0, 19, 31, .72) 38%,
                    rgba(0, 19, 31, .18) 72%, rgba(0, 19, 31, .30) 100%),
    linear-gradient(180deg, rgba(0, 19, 31, .55) 0%, transparent 28%,
                    transparent 70%, rgba(0, 19, 31, .75) 100%);
}
.hero[data-hero="final"] .hero-inner { padding-block: clamp(6.5rem, 14vh, 9rem)
  clamp(2.5rem, 6vh, 4rem); }
.hero-grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; }
@media (min-width: 64rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 21rem; }
}
.hero[data-hero="final"] .eyebrow { color: #ff9a5c; letter-spacing: .02em;
  font-weight: 700; }
.hero[data-hero="final"] .display {
  font-size: clamp(2.3rem, 5.2vw, 4.4rem); line-height: 1.02;
  letter-spacing: -.028em; max-width: 14ch; margin: .35rem 0 1.1rem;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.hero-lines { list-style: none; margin: 0 0 1.2rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .45rem; }
.hero-lines li { padding: .38rem .8rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18); color: #e8f0f7;
  background: rgba(255, 255, 255, .06); font-size: .88rem; font-weight: 600;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-lines li:first-child { border-color: rgba(255, 154, 92, .55);
  background: rgba(248, 96, 22, .16); }
.hero[data-hero="final"] .lede { max-width: 36rem; color: #cddbe8;
  font-size: clamp(1rem, 1.25vw, 1.15rem); }
.btn-hero-ghost .dot { display: inline-block; width: .45rem; height: .45rem;
  margin-right: .55rem; border-radius: 50%; background: #3fcf8e;
  box-shadow: 0 0 0 .2rem rgba(63, 207, 142, .22); vertical-align: middle; }
.hero-more { margin: .9rem 0 0; font-size: .9rem; }
.hero-more a { color: #b9cee1; text-underline-offset: .25em; }
.hero-more a:hover { color: #fff; }
.hero-desk-card {
  align-self: end; padding: 1.25rem 1.35rem; border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .14); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.desk-k { display: flex; align-items: center; gap: .5rem; margin: 0;
  font-size: .78rem; color: #b9cee1; font-weight: 700; }
.desk-k .dot { width: .5rem; height: .5rem; border-radius: 50%;
  background: #3fcf8e; box-shadow: 0 0 0 .2rem rgba(63, 207, 142, .22); }
.desk-big { margin: .35rem 0 .2rem; font-family: var(--display);
  font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; }
.desk-big span { font-size: 1rem; font-weight: 600; color: #b9cee1; }
.desk-copy { margin: 0 0 .8rem; color: #cddbe8; font-size: .9rem; }
.desk-mail { color: #fff; text-decoration: none; font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, .35); }
.desk-mail:hover { border-color: #ff9a5c; }
.hero[data-hero="final"] .hero-meta { margin-top: clamp(1.8rem, 5vh, 3rem); }
.hero[data-hero="final"] .hero-fade { height: 2.5rem; }
@media (max-width: 63.99rem) {
  .hero-desk-card { max-width: 28rem; }
}
@media (max-width: 46rem) {
  .hero[data-hero="final"] { min-height: auto; }
  .hero[data-hero="final"] .hero-inner { padding-block: 5.5rem 2.2rem; }
  .hero[data-hero="final"] .display { max-width: none; }
  .hero-desk-card { padding: 1rem 1.1rem; }
  .desk-big { font-size: 1.8rem; }
  .atmos-lights, .atmos-haze { display: none; }
}

/* ------------------------------------------------------------------ *
 * The page hero.
 *
 * One banner for every public template. The height is set here and only
 * here, in three restrained bands, because the audit found bands ranging
 * from 344px of flat gradient to a 940px home hero - every page having
 * invented its own.
 *
 * The crop is the part that cannot be global. Each image supplies its own
 * focal point per breakpoint through --fx/--fy custom properties, so an
 * operations room whose subject sits right of centre and an aircraft whose
 * nose is at the left edge can both keep their subject in frame.
 * ------------------------------------------------------------------ */
.phero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy-ink);
  min-height: clamp(260px, 44vw, 330px);
  display: flex; align-items: flex-end;
}
.phero-media { position: absolute; inset: 0; z-index: -2; display: block; }
.phero-media img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  object-position: var(--fx-m, 50%) var(--fy-m, 50%);
}
/* Navy scrim: strongest at the bottom where the title sits, and carried
   across the left where the copy column is, so the text holds contrast
   without flattening the photograph. */
.phero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,19,31,.38) 0%, rgba(0,19,31,0) 38%,
                    rgba(0,19,31,.62) 78%, rgba(0,19,31,.88) 100%),
    linear-gradient(90deg, rgba(0,19,31,.74) 0%, rgba(0,19,31,.28) 46%,
                    rgba(0,19,31,0) 72%);
}
/* No width here. The gutter on this site is made by `.wrap`, which sets
   width: min(100% - 2.5rem, var(--wrap)) - so declaring width:100% on a
   .wrap element silently cancels the page margin and pins the copy to the
   viewport edge, which it did on every page carrying a hero. */
.phero-inner { padding-block: var(--s-6); }
.phero-inner h1 { color: #fff; margin: .2rem 0 0; text-wrap: balance; }
.phero-kicker {
  color: var(--orange-logo); margin: 0; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; font-size: .78rem;
}
.phero-lede {
  color: #d6e2ee; margin: .55rem 0 0; max-width: 34rem; text-wrap: pretty;
}
.phero-cta { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: .6rem; }
.phero .crumbs, .phero .crumbs a { color: #b9cbdb; }
.phero .crumbs a:hover { color: #fff; }

@media (min-width: 46rem) {
  .phero { min-height: clamp(320px, 34vw, 400px); }
  .phero-media img {
    object-position: var(--fx-t, 50%) var(--fy-t, 50%);
  }
  .phero-inner { padding-block: var(--s-7); }
}
@media (min-width: 64rem) {
  .phero { min-height: clamp(380px, 26vw, 460px); }
  .phero-media img {
    object-position: var(--fx-d, 50%) var(--fy-d, 50%);
  }
}
/* A very wide screen should not keep growing the band; the ceiling above
   already holds, and this keeps the composition from going letterbox. */
@media (min-width: 120rem) { .phero { min-height: 460px; } }

@media (prefers-reduced-motion: no-preference) {
  .phero-inner > * { animation: phero-rise .5s var(--ease) both; }
  .phero-inner > *:nth-child(2) { animation-delay: .05s; }
  .phero-inner > *:nth-child(3) { animation-delay: .1s; }
  .phero-inner > *:nth-child(4) { animation-delay: .15s; }
}
@keyframes phero-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* A ghost button standing on a photograph rather than on paper. The contact
   page used to carry these as inline styles on each anchor; the hero needs
   them in more than one place, so they become a class. */
.btn-on-dark { border-color: rgba(255,255,255,.34); color: #fff; }
.btn-on-dark:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* An entity hero carries the facts panel beside its title, the way the old
   entity-head did. It needs a little more height for that, and the panel
   drops under the copy before the two would fight for width. */
.phero-tall { min-height: clamp(300px, 52vw, 380px); }
.phero-grid { display: grid; gap: var(--s-5); }
.phero-main { min-width: 0; }
.phero .head-panel {
  background: rgba(3,26,42,.62); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px); border-radius: var(--r-md); padding: var(--s-5);
}
.phero .head-panel-title, .phero .head-facts dt { color: #b9cbdb; }
.phero .head-facts dd, .phero .head-panel b { color: #fff; }
.phero .head-panel-src { color: #9fb4c6; border-top-color: rgba(255,255,255,.16); }
@media (min-width: 46rem) { .phero-tall { min-height: clamp(340px, 40vw, 420px); } }
@media (min-width: 64rem) {
  .phero-tall { min-height: clamp(400px, 28vw, 470px); }
  .phero-grid { grid-template-columns: minmax(0, 1.55fr) minmax(16rem, .85fr);
                align-items: end; gap: var(--s-6); }
}

/* A phone has to carry the same words in a third of the width, so the hero
   tightens rather than grows: the supporting line is held to three lines and
   the actions become compact. Nothing is hidden - on a phone the call
   buttons are the most useful thing on the page. */
@media (max-width: 46rem) {
  .phero-inner { padding-block: var(--s-5); }
  .phero-lede {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; margin-top: .4rem; font-size: .95rem;
  }
  .phero-cta { margin-top: var(--s-4); gap: .45rem; }
  .phero-cta .btn { padding: .55rem .9rem; font-size: .9rem; }
}

/* The entity hero carries a facts panel, which on a phone is what pushes the
   band past its ceiling. The panel becomes compact rather than the banner
   becoming tall: a wide photograph eating most of a 844px screen is exactly
   the "massive banner" this system exists to avoid. */
@media (max-width: 46rem) {
  .phero-tall .phero-inner { padding-block: var(--s-4); }
  .phero .head-panel { padding: .7rem .8rem; }
  .phero .head-facts { gap: .3rem 1rem; }
  .phero .head-facts dt { font-size: .7rem; }
  .phero .head-facts dd { font-size: .92rem; margin: 0; }
  .phero-tall .phero-lede { -webkit-line-clamp: 2; }
  .phero-tall h1 { font-size: 1.32rem; }
}

/* Hero headings are generated, and some are long: an airport page carries
   "LGAV/ATH Athens International Airport Ground Handling Services & Permits".
   At a phone's width that wrapped to five lines and drove the band to 365px
   on its own. The heading scales with the viewport so a long one costs lines
   of type rather than height of banner. */
.phero h1 { font-size: clamp(1.4rem, 2.1vw + .85rem, 2.5rem); line-height: 1.16; }
@media (max-width: 46rem) {
  .phero h1 { font-size: clamp(1.25rem, 4.6vw, 1.55rem); line-height: 1.2; }
}

/* Scrim strength travels with the photograph. A daylight apron needs more
   help carrying white type than a night operations room does, and darkening
   every hero to suit the brightest one would flatten the good ones. */
.phero-scrim-strong .phero-scrim {
  background:
    linear-gradient(180deg, rgba(0,19,31,.52) 0%, rgba(0,19,31,.12) 40%,
                    rgba(0,19,31,.72) 76%, rgba(0,19,31,.93) 100%),
    linear-gradient(90deg, rgba(0,19,31,.86) 0%, rgba(0,19,31,.46) 48%,
                    rgba(0,19,31,.08) 78%);
}

/* On a phone the copy fills most of a 260-310px band, so the horizontal
   gradient built for a wide composition does almost nothing. The scrim
   becomes a single strong bottom-up wash there, which is the shape the
   content actually has. */
@media (max-width: 46rem) {
  .phero-scrim {
    background: linear-gradient(180deg, rgba(0,19,31,.30) 0%,
                rgba(0,19,31,.52) 34%, rgba(0,19,31,.82) 68%,
                rgba(0,19,31,.94) 100%);
  }
  .phero-scrim-strong .phero-scrim {
    background: linear-gradient(180deg, rgba(0,19,31,.46) 0%,
                rgba(0,19,31,.68) 32%, rgba(0,19,31,.90) 66%,
                rgba(0,19,31,.97) 100%);
  }
}

/* A hero wrapping markup a template composed itself. The inner grid is the
   one those templates already use, restyled for a photograph behind it
   rather than paper. */
.phero-wrap .head-grid { display: grid; gap: var(--s-5); width: 100%; }
.phero-wrap .head-main { min-width: 0; }
.phero-wrap .eyebrow { color: var(--orange-logo); }
.phero-wrap h1, .phero-wrap .display-2 { color: #fff; }
.phero-wrap .lede, .phero-wrap p { color: #d6e2ee; }
.phero-wrap .lede { max-width: 42rem; }
.phero-wrap .btn-ghost { border-color: rgba(255,255,255,.34); color: #fff; }
.phero-wrap .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.phero-wrap .flag-mark, .phero-wrap .country-mark { color: #fff; }
@media (min-width: 64rem) {
  .phero-wrap .head-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(16rem, .8fr);
    align-items: end; gap: var(--s-6);
  }
}

/* A service page carries two pictures with different standing: generated
   atmosphere in the banner, and the owned photograph of the work itself
   beside the description. The second one is evidence, so it is given room
   rather than tucked in as decoration. */
.svc-evidence { align-items: start; gap: var(--s-6); }
.svc-evidence figure.owned { margin: 0; border-radius: var(--r-md); overflow: hidden; }

/* The wrapped heroes carry a long lede, a facts panel and two actions. On a
   narrow screen that stack is what sets the height, not the min-height, and
   coverage reached 558px on a tablet and 514px on a phone. The content
   tightens so the band stays in its range rather than the range giving way. */
@media (max-width: 62rem) {
  .phero-wrap .lede {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; font-size: .95rem; margin-bottom: .6rem;
  }
  .phero-wrap .display-2 { font-size: clamp(1.3rem, 4.4vw, 1.7rem); }
  .phero-wrap .btn-lg { padding: .55rem .95rem; font-size: .92rem; }
  .phero-wrap .head-panel { padding: .7rem .8rem; }
  .phero-wrap .head-facts dt { font-size: .7rem; }
  .phero-wrap .head-facts dd { font-size: .92rem; margin: 0; }
  .phero-wrap .phero-inner { padding-block: var(--s-4); }
}
/* The home banner is allowed to be the largest on the site, but on a phone
   980px is taller than the screen itself, which is not "largest" but "in
   the way". */
@media (max-width: 46rem) {
  .hero { min-height: min(62vh, 520px); }
  .hero-inner { padding: var(--s-6) 0 var(--s-5); }
  .hero .lede { font-size: 1rem; }
  .hero-meta { gap: .6rem 1.2rem; }
}

/* ------------------------------------------------------------------ *
 * Home hero: recomposed, not cropped.
 *
 * The band was 940px on a desktop and 980px on a phone - taller than the
 * phone screen itself - because its content set the height, not its
 * min-height. Nothing is hidden here. The headline is brought back to a
 * size that still opens the page, the vertical rhythm is tightened, and on
 * a phone the operations-desk card becomes a compact strip instead of a
 * stacked panel, so the desk stays one tap away without owning the screen.
 * ------------------------------------------------------------------ */
.hero .display { font-size: clamp(2.1rem, 3.1vw, 3.2rem); line-height: 1.08; }
.hero-inner { padding: clamp(1.9rem, 4.6vh, 3.4rem) 0 clamp(1.6rem, 3.6vh, 2.6rem); }
.hero .lede { font-size: clamp(1rem, 1.1vw, 1.12rem); margin-top: .7rem; }
.hero-lines { margin: .5rem 0 0; }
.hero-more { margin: .7rem 0 0; }
.hero-desk-card { padding: var(--s-5); }
.hero-desk-card .desk-copy { font-size: .92rem; margin: .35rem 0 .55rem; }

@media (max-width: 46rem) {
  .hero .display { font-size: clamp(1.75rem, 7.4vw, 2.15rem); }
  .hero-inner { padding: var(--s-5) 0 var(--s-5); }
  .hero .lede {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; font-size: .97rem;
  }
  /* The buttons stacked into three rows. Side by side they take one. */
  .hero .btn-row { gap: .5rem; }
  .hero .btn-row .btn-lg { padding: .6rem .9rem; font-size: .92rem; flex: 1 1 auto; }
  .hero-more { display: none; }
  /* The desk card becomes a single line: the label, the hours and the
     address, which is all of it that matters on a phone. */
  .hero-desk-card {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem;
    padding: .6rem .8rem;
  }
  .hero-desk-card .desk-copy { display: none; }
  .hero-desk-card .desk-k { margin: 0; font-size: .78rem; }
  .hero-desk-card .desk-big { margin: 0; font-size: 1.05rem; }
  .hero-desk-card .desk-big span { font-size: .85rem; }
  .hero-desk-card .desk-mail { margin: 0; font-size: .88rem; }
  .hero-grid { gap: var(--s-4); }
}

/* The home hero's height and headline live behind `[data-hero="final"]`,
   which is class-plus-attribute and so outranks a plain `.hero` rule
   whatever the order. Matching that specificity is what makes the
   recomposition above actually bind. */
.hero[data-hero="final"] { min-height: min(84vh, 720px); }
.hero[data-hero="final"] .display { font-size: clamp(2.1rem, 3.1vw, 3.2rem); }
@media (max-width: 46rem) {
  .hero[data-hero="final"] { min-height: min(72vh, 560px); }
  .hero[data-hero="final"] .display { font-size: clamp(1.75rem, 7.4vw, 2.15rem); }
}

/* The vertical rhythm also lives behind `[data-hero="final"]` - including a
   5.5rem top padding on phones - so the recomposition has to be stated at
   that specificity to take effect. There was no tablet band at all: at 820px
   the desktop sizing applied and the banner reached 920px, taller than half
   the screen. */
.hero[data-hero="final"] .hero-inner {
  padding-block: clamp(2.6rem, 6vh, 4rem) clamp(1.6rem, 3.6vh, 2.6rem);
}
@media (min-width: 46.0625rem) and (max-width: 64rem) {
  .hero[data-hero="final"] { min-height: min(70vh, 600px); }
  .hero[data-hero="final"] .hero-inner { padding-block: 2rem 1.4rem; }
  .hero[data-hero="final"] .display { font-size: clamp(1.9rem, 4.2vw, 2.5rem); }
  .hero .lede {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero-more { display: none; }
  /* Same compact strip the phone uses: the label, the hours, the address. */
  .hero-desk-card {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem;
    padding: .6rem .9rem; max-width: none;
  }
  .hero-desk-card .desk-copy { display: none; }
  .hero-desk-card .desk-k, .hero-desk-card .desk-mail { margin: 0; font-size: .85rem; }
  .hero-desk-card .desk-big { margin: 0; font-size: 1.15rem; }
  .hero-grid { gap: var(--s-4); }
}
@media (max-width: 46rem) {
  .hero[data-hero="final"] .hero-inner { padding-block: 2.2rem 1.4rem; }
  .hero[data-hero="final"] .hero-desk-card { padding: .6rem .8rem; }
  .hero[data-hero="final"] .desk-big { font-size: 1.05rem; }
}

/* On a phone the entity panel was a stacked definition list 140px tall and
   the actions wrapped to three rows, which together were most of the band.
   The facts stay in view - they are the reason the page exists - but they
   lie down into a compact strip, and the buttons share a row. */
@media (max-width: 46rem) {
  .phero .head-panel { padding: .55rem .7rem; }
  .phero .head-panel-title { font-size: .68rem; margin: 0 0 .25rem; }
  .phero .head-facts {
    display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: 0;
  }
  .phero .head-facts > div { display: flex; align-items: baseline; gap: .3rem; }
  .phero .head-facts dt { font-size: .68rem; margin: 0; }
  .phero .head-facts dd { font-size: .85rem; margin: 0; font-weight: 600; }
  .phero .btn-row { gap: .45rem; }
  .phero .btn-row .btn, .phero .btn-row .btn-lg {
    flex: 1 1 auto; padding: .55rem .8rem; font-size: .88rem;
    text-align: center; justify-content: center;
  }
  .phero-wrap .head-grid { gap: var(--s-4); }
}

/* The hero's copy is anchored to the bottom of the band, which means that
   while the HTML is still arriving the block grows upward: on a throttled
   phone connection the airport banner's inner block went from 32px tall at
   y=396 to 346px tall at y=128, and that movement is a layout shift of
   0.13 against a 0.1 budget.
   Stretching the inner block to the band's own height fixes the cause
   rather than the symptom. The band's height is set by min-height and is
   known at first paint, so the block is its final size immediately; the
   copy still sits at the bottom, justified inside a box that no longer
   changes size as the rest of the document arrives. */
.phero { align-items: stretch; }
.phero-inner {
  display: flex; flex-direction: column; justify-content: flex-end;
}
.phero-wrap .head-grid { margin-top: auto; }

/* ================================================================== *
 * EXPERIENCE LAYER
 *
 * One interaction language, built from CSS only - no framework, no
 * parallax library, nothing that runs while the reader is scrolling.
 * Every rule here is a transition or a one-shot entrance; none of it
 * animates continuously, and all of it is switched off wholesale under
 * prefers-reduced-motion at the end of this block.
 *
 * The vocabulary, used everywhere and nowhere else:
 *   - a 2px lift on hover
 *   - an underline that travels from the left
 *   - an arrow that moves 4px
 *   - a border that illuminates in Airways blue
 *   - orange reserved for the primary action and the live indicator
 * ================================================================== */

:root {
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --lift: translateY(-2px);
}

/* ---------------------------------------------------- the desk band -- */
.desk-band {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy-ink); color: #fff;
  padding-block: clamp(3.4rem, 7vw, 5.5rem);
}
.desk-band .phero-media { position: absolute; inset: 0; z-index: -2; }
.desk-band .phero-media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--fx-d, 62%) var(--fy-d, 50%);
}
.desk-band .phero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,19,31,.72) 0%, rgba(0,19,31,.52) 40%,
                    rgba(0,19,31,.78) 100%),
    linear-gradient(90deg, rgba(0,19,31,.88) 0%, rgba(0,19,31,.42) 52%,
                    rgba(0,19,31,.06) 82%);
}
.desk-band-inner { max-width: 44rem; }
.desk-band-k {
  display: flex; align-items: center; gap: .55rem; margin: 0 0 .5rem;
  color: var(--orange-logo); font-weight: 600; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase;
}
.desk-band h2 { color: #fff; margin: 0 0 .7rem; }
.desk-band .lede { color: #dbe7f2; margin: 0 0 .6rem; max-width: 40rem; }
.desk-band-line { color: #b9cbdb; margin: 0 0 var(--s-5); max-width: 40rem; }
.desk-band-mail { margin: var(--s-4) 0 0; }
.desk-band-mail a { color: #cfe0ee; border-bottom: 1px solid rgba(255,255,255,.3); }
.desk-band-mail a:hover { color: #fff; border-bottom-color: #fff; }

/* The only thing on the site that moves by itself, because "24/7" is a
   claim about right now. One dot, three seconds, no layout effect. */
.pulse {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--orange-cta); display: inline-block;
  box-shadow: 0 0 0 0 rgba(248,128,52,.55);
  animation: desk-pulse 3s var(--ease-out) infinite;
}
@keyframes desk-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(248,128,52,.5); }
  70%  { box-shadow: 0 0 0 .55rem rgba(248,128,52,0); }
  100% { box-shadow: 0 0 0 0 rgba(248,128,52,0); }
}
@media (max-width: 46rem) {
  .desk-band { padding-block: clamp(2.4rem, 9vw, 3.4rem); }
  .desk-band .phero-media img {
    object-position: var(--fx-m, 70%) var(--fy-m, 46%);
  }
  .desk-band .phero-scrim {
    background: linear-gradient(180deg, rgba(0,19,31,.64) 0%,
                rgba(0,19,31,.74) 45%, rgba(0,19,31,.9) 100%);
  }
}

/* ------------------------------------------------------ service cards */
.svc-panel {
  transition: transform .34s var(--ease-out), box-shadow .34s var(--ease-out),
              border-color .34s var(--ease-out);
}
.svc-panel:hover, .svc-panel:focus-visible {
  transform: var(--lift);
  box-shadow: 0 14px 34px -18px rgba(0,19,31,.42);
  border-color: rgba(38,106,178,.42);
}
.svc-panel .arrow { transition: color .24s var(--ease-out); }
.svc-panel .arrow::after {
  content: "\2192"; display: inline-block; margin-left: .4rem;
  transition: transform .28s var(--ease-out);
}
.svc-panel:hover .arrow::after { transform: translateX(4px); }

/* -------------------------------------------------- buttons and links */
.btn {
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out),
              background-color .22s var(--ease-out),
              border-color .22s var(--ease-out);
}
.btn:hover { transform: var(--lift); }
.btn-primary:hover { box-shadow: 0 10px 24px -12px rgba(248,128,52,.6); }

/* An underline that arrives from the left rather than blinking on. */
.crumbs a, .foot a, .desk-band-mail a { position: relative; }
.crumbs a::after, .foot a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 1px; background: currentColor; opacity: .7;
  transition: right .28s var(--ease-out);
}
.crumbs a:hover::after, .foot a:hover::after { right: 0; }

/* ------------------------------------------------------- map controls */
.globe-zoom button, .globe-rotate button {
  transition: transform .2s var(--ease-out), border-color .2s var(--ease-out),
              background-color .2s var(--ease-out);
}
.globe-zoom button:hover:not(:disabled),
.globe-rotate button:hover { transform: var(--lift); border-color: var(--blue); }

/* ------------------------------------------------ owned photographs -- */
figure.owned { transition: box-shadow .34s var(--ease-out); }
figure.owned img { transition: transform .6s var(--ease-out); }
a:hover > figure.owned img, figure.owned:hover img { transform: scale(1.03); }

/* ----------------------------------------------------- section reveal */
/* Opacity and 10px, once. The observer that adds .is-in unobserves the
   element immediately, so nothing is watched after it has arrived. */
.reveal-up {
  opacity: 0; transform: translateY(10px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.reveal-up.is-in { opacity: 1; transform: none; }

/* ----------------------------------------------------- focus, always */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--orange-cta); outline-offset: 3px; border-radius: 2px;
}

/* ------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-up { opacity: 1; transform: none; transition: none; }
  .pulse { animation: none; }
  .svc-panel, .btn, figure.owned img, .globe-zoom button,
  .crumbs a::after, .foot a::after { transition: none; }
  .svc-panel:hover, .btn:hover, .globe-zoom button:hover { transform: none; }
  a:hover > figure.owned img, figure.owned:hover img { transform: none; }
  .svc-panel:hover .arrow::after { transform: none; }
}

/* The home hero shifts for exactly the reason the subpage banners did: the
   band's height is known from min-height at first paint, but the inner block
   is centred inside it, so while the document is still arriving the block
   grows and everything already painted moves. Giving the inner block the
   band's full height and centring its contents inside that block keeps the
   composition identical and stops it moving. */
.hero[data-hero="final"] { align-items: stretch; }
.hero[data-hero="final"] .hero-inner {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
}

/* Stretching the inner block moved the shift down one level: the grid inside
   it still grew as the desk card arrived. The grid takes the inner's height
   too and centres its own contents, so every box in the hero is its final
   size at first paint and only the words inside them arrive late. */
.hero[data-hero="final"] .hero-grid { flex: 1 1 auto; align-content: center; }

/* The office clocks were built for the dark operations band they used to sit
   in: white numerals, white hairline rule. The contact page now leads with
   the hero and puts the clocks on paper below it, where white on near-white
   is an invisible time - which is exactly what the Director saw.
   The colours now come from the page's own ink, and the dark treatment is
   kept for any dark section that carries the clocks. */
.clocks { border-top-color: var(--line); }
.clock .k { color: var(--ink-3); }
.clock b { color: var(--ink); }
.clock .s { color: var(--ink-3); }

.dark .clocks,
.entity-head.dark .clocks,
.apron-surface .clocks,
.desk-band .clocks { border-top-color: rgba(255,255,255,.14); }
.dark .clock .k, .entity-head.dark .clock .k,
.apron-surface .clock .k, .desk-band .clock .k { color: #93a5b9; }
.dark .clock b, .entity-head.dark .clock b,
.apron-surface .clock b, .desk-band .clock b { color: #fff; }
.dark .clock .s, .entity-head.dark .clock .s,
.apron-surface .clock .s, .desk-band .clock .s { color: #a9bccf; }