/* Corvane Air — layout and components. Every value comes from tokens.css. Namespace: .ca-*
 * Breakpoints mirror --s-bp-* in tokens.css (CSS @media cannot read custom properties). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--s-bg); }
body {
    margin: 0; background: var(--s-bg); color: var(--s-text);
    font: var(--s-weight-body) var(--s-step-body) / var(--s-lead-body) var(--s-font-body);
    letter-spacing: var(--s-track-body);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { list-style: none; padding: 0; }
:focus-visible { outline: var(--s-focus-w) solid var(--s-gold); outline-offset: var(--s-focus-offset); }
::selection { background: var(--s-gold); color: var(--s-bg); }
[id] { scroll-margin-top: var(--s-nav-h); }

.ca-skip {
    position: absolute; left: var(--s-gutter); top: 8px; z-index: 2000;
    padding: 12px 18px; background: var(--s-bg); color: var(--s-text);
    font-size: var(--s-step-small); letter-spacing: var(--s-track-ui);
    transform: translateY(-160%); transition: transform var(--s-dur-quick) var(--s-ease);
}
.ca-skip:focus { transform: none; }

/* ---------- Shared type ---------- */
.ca-kicker, .ca-micro {
    font: var(--s-weight-ui) var(--s-step-micro) / var(--s-leading-140) var(--s-font-body);
    letter-spacing: var(--s-track-micro); text-transform: uppercase;
}
.ca-kicker { display: flex; align-items: center; gap: 16px; color: var(--s-gold); margin-bottom: 24px; }
.ca-kicker::before { content: ""; width: 32px; height: var(--s-hair); background: var(--s-gold-line); }
.ca-micro { color: var(--s-soft); }
h2 {
    font: var(--s-weight-display) var(--s-step-h2) / var(--s-lead-tight) var(--s-font-display);
    letter-spacing: var(--s-track-display); color: var(--s-text); margin-bottom: 24px; text-wrap: balance;
}
.ca-body { color: var(--s-muted); max-width: var(--s-measure); text-wrap: pretty; }
.ca-italic { font-family: var(--s-font-italic); font-style: italic; font-size: var(--s-step-lede); letter-spacing: 0; color: var(--s-text); }

/* ---------- Buttons ----------
 * Primary: a boarding-pass stub in warm gold, notched at both ends. The paper is drawn by
 * ::before (masked), so the element keeps an unmasked focus ring.
 * Secondary: an ivory hairline, filling on hover. On the hangar sheet: ink. */
.ca-btn {
    position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 16px;
    min-height: var(--s-button-h); padding: 0 30px; border: var(--s-hair) solid var(--s-text-line); border-radius: var(--s-radius-pill);
    background: none; color: var(--s-text); text-decoration: none; cursor: pointer; white-space: nowrap;
    font: var(--s-weight-button) var(--s-step-button) / var(--s-leading-100) var(--s-font-body); letter-spacing: var(--s-track-micro); text-transform: uppercase;
    transition: background-color var(--s-dur-quick) var(--s-ease), color var(--s-dur-quick) var(--s-ease), border-color var(--s-dur-quick) var(--s-ease);
}
.ca-btn:hover { background: var(--s-text); color: var(--s-bg); border-color: var(--s-text); }
.ca-btn:focus-visible { outline-offset: 4px; }
.ca-btn-line { width: 28px; height: var(--s-hair); background: currentColor; transition: width var(--s-dur) var(--s-ease); }
.ca-btn:hover .ca-btn-line { width: 44px; }
.ca-btn--ticket { border: 0; border-radius: 0; padding: 0 var(--s-ticket-pad); color: var(--s-ticket-ink); font-weight: var(--s-weight-500); }
.ca-btn--ticket::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--s-ticket);
    -webkit-mask:
        radial-gradient(circle at 0 50%, transparent var(--s-notch), var(--s-mask-solid) calc(var(--s-notch) + 0.5px)) left / 51% 100% no-repeat,
        radial-gradient(circle at 100% 50%, transparent var(--s-notch), var(--s-mask-solid) calc(var(--s-notch) + 0.5px)) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle at 0 50%, transparent var(--s-notch), var(--s-mask-solid) calc(var(--s-notch) + 0.5px)) left / 51% 100% no-repeat,
        radial-gradient(circle at 100% 50%, transparent var(--s-notch), var(--s-mask-solid) calc(var(--s-notch) + 0.5px)) right / 51% 100% no-repeat;
    transition: background-color var(--s-dur-quick) var(--s-ease), transform var(--s-dur-quick) var(--s-ease);
}
/* The perforation: a dashed tear line a third of the way along the stub. */
.ca-btn--ticket::after {
    content: ""; position: absolute; top: 9px; bottom: 9px; right: calc(var(--s-ticket-pad) * 0.5); width: 0;
    border-left: var(--s-hair) dashed var(--s-ticket-ink); opacity: 0.35;
}
.ca-btn--ticket:hover { background: none; color: var(--s-ticket-ink); }
.ca-btn--ticket:hover::before { background: var(--s-ticket-hover); transform: translateY(-2px); }
.ca-btn--ticket { padding-right: calc(var(--s-ticket-pad) * 1.4); }
.ca-btn--nav { min-height: var(--s-button-h-nav); padding: 0 22px; }
.ca-btn--ticket.ca-btn--nav { padding: 0 calc(var(--s-ticket-pad) * 0.9) 0 calc(var(--s-ticket-pad) * 0.6); }
.ca-btn--ink { border-color: var(--s-ink); color: var(--s-ink); border-radius: 0; }
.ca-btn--ink:hover { background: var(--s-ink); color: var(--s-paper); border-color: var(--s-ink); }
.ca-btn--ink:focus-visible { outline-color: var(--s-ink); }

/* ---------- Header: sticky, transparent over the hero, glass once scrolled ---------- */
.ca-top {
    position: sticky; top: 0; z-index: var(--s-z-top);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    height: var(--s-nav-h); margin-bottom: calc(var(--s-nav-h) * -1); padding: 0 var(--s-gutter);
    transition: background-color var(--s-dur-quick) var(--s-ease), box-shadow var(--s-dur-quick) var(--s-ease);
}
.ca-nojs .ca-top { position: absolute; left: 0; right: 0; margin: 0; }
.ca-top.is-solid {
    background: var(--s-bg-glass); box-shadow: 0 var(--s-hair) 0 var(--s-rule);
    -webkit-backdrop-filter: blur(var(--s-blur-nav)) saturate(var(--s-saturate-nav)); backdrop-filter: blur(var(--s-blur-nav)) saturate(var(--s-saturate-nav));
}
/* backdrop-filter makes the header the containing block of the fixed menu panel; drop it while the menu is open */
.ca-top:has(.ca-menu-toggle:checked) { -webkit-backdrop-filter: none; backdrop-filter: none; background: none; box-shadow: none; }
.ca-mark { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--s-text); position: relative; z-index: 2; }
.ca-mark-name { font: var(--s-weight-500) var(--s-step-mark) / var(--s-leading-100) var(--s-font-display); letter-spacing: var(--s-track-micro); text-transform: uppercase; }
.ca-mark-suffix { font: var(--s-weight-400) var(--s-step-mark-suffix) / var(--s-leading-100) var(--s-font-italic); font-style: italic; color: var(--s-gold); letter-spacing: 0; }

/* Menu toggle (pure CSS: a checkbox drives the panel; site.js only closes it after a jump) */
.ca-menu-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.ca-menu-button {
    position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 14px; min-height: var(--s-button-h-nav);
    padding: 0 4px 0 18px; cursor: pointer; color: var(--s-text);
    font: var(--s-weight-button) var(--s-step-button) / var(--s-leading-100) var(--s-font-body); letter-spacing: var(--s-track-micro); text-transform: uppercase;
}
.ca-menu-close { display: none; }
.ca-menu-bars { position: relative; width: 22px; height: 8px; }
.ca-menu-bars::before, .ca-menu-bars::after {
    content: ""; position: absolute; left: 0; width: 100%; height: var(--s-hair); background: var(--s-gold);
    transition: transform var(--s-dur-quick) var(--s-ease), top var(--s-dur-quick) var(--s-ease);
}
.ca-menu-bars::before { top: 0; }
.ca-menu-bars::after { top: 100%; }
.ca-menu-toggle:focus-visible + .ca-menu-button { outline: var(--s-focus-w) solid var(--s-gold); outline-offset: var(--s-focus-offset); }
.ca-menu-toggle:checked + .ca-menu-button .ca-menu-open { display: none; }
.ca-menu-toggle:checked + .ca-menu-button .ca-menu-close { display: inline; }
.ca-menu-toggle:checked + .ca-menu-button .ca-menu-bars::before { top: 50%; transform: rotate(35deg); }
.ca-menu-toggle:checked + .ca-menu-button .ca-menu-bars::after { top: 50%; transform: rotate(-35deg); }

.ca-nav {
    position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 36px;
    padding: calc(var(--s-nav-h) + 24px) var(--s-gutter) 48px; background: var(--s-bg-deep);
    visibility: hidden; opacity: 0; transition: opacity var(--s-dur-quick) var(--s-ease), visibility 0s linear var(--s-dur-quick);
}
.ca-menu-toggle:checked ~ .ca-nav { visibility: visible; opacity: 1; transition: opacity var(--s-dur-quick) var(--s-ease); }
.ca-nav ul { display: grid; gap: 8px; }
.ca-nav ul a {
    display: block; padding: 6px 0; color: var(--s-text); text-decoration: none;
    font: var(--s-weight-display) var(--s-step-menu) / var(--s-leading-110) var(--s-font-display); letter-spacing: var(--s-track-display);
    transition: color var(--s-dur-quick) var(--s-ease);
}
.ca-nav ul a:hover, .ca-nav ul a:focus-visible { color: var(--s-gold); }
.ca-nav .ca-btn { align-self: flex-start; }
.ca-menu-note { color: var(--s-soft); font: var(--s-weight-400) var(--s-step-lede) / var(--s-leading-140) var(--s-font-italic); font-style: italic; letter-spacing: 0; max-width: 26ch; }

/* ---------- Hero: The Window ---------- */
.ca-hero {
    --ca-wx: 50%; --ca-wy: 66%; --ca-lift: var(--s-sky-lift);
    --ca-win: var(--s-win-w-fallback);
    --ca-sky-w: var(--ca-sky-w-default); --ca-sky-h: var(--ca-sky-h-default);
    position: relative; isolation: isolate; overflow: hidden;
    min-height: 100vh; min-height: 100svh; background: var(--s-panel);
}
@supports (height: 1svh) { .ca-hero { --ca-win: var(--s-win-w); } }
@supports (height: 100svh) { .ca-hero { --ca-sky-h: var(--ca-sky-h-default-svh); } }
.ca-wall {
    position: absolute; inset: 0; z-index: var(--s-z-wall);
    background:
        radial-gradient(ellipse 38% 46% at 18% 0%, var(--s-glow-warm), transparent 72%),
        radial-gradient(ellipse 52% 44% at var(--ca-wx) var(--ca-wy), var(--s-panel-sheen), transparent 72%),
        linear-gradient(180deg, var(--s-panel-high) 0%, var(--s-panel) 38%, var(--s-panel) 76%, var(--s-bg-deep) 100%);
}
.ca-hero-grid {
    position: relative; min-height: 100vh; min-height: 100svh;
    display: grid; align-content: center; gap: clamp(28px, 4.5svh, 52px);
    padding: calc(var(--s-nav-h) + 12px) var(--s-gutter) 72px;
}
/* The shade that keeps the message readable once the window has opened onto the whole sky. */
.ca-scrim {
    position: absolute; inset: 0; z-index: var(--s-z-scrim); pointer-events: none; opacity: 0; visibility: hidden;
    background: linear-gradient(0deg, var(--s-scrim) 0%, var(--s-scrim) 42%, var(--s-scrim-clear) 72%);
}
.ca-hero-copy { position: relative; z-index: var(--s-z-copy); max-width: 32rem; }
.ca-hero-title {
    font: var(--s-weight-400) var(--s-step-hero) / var(--s-lead-tight) var(--s-font-italic); font-style: italic;
    letter-spacing: var(--s-track-display); color: var(--s-text); text-wrap: balance;
}
.ca-lede {
    margin-top: 20px; max-width: 32ch; color: var(--s-muted);
    font-size: var(--s-step-lede); line-height: var(--s-leading-160); letter-spacing: var(--s-track-0p02);
}
.ca-hero-cta { margin-top: 28px; }
/* The flight strip: three figures that say why, set like a printed itinerary. */
.ca-facts {
    margin-top: clamp(28px, 4svh, 44px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: var(--s-hair) solid var(--s-gold-line); max-width: 30rem;
}
.ca-facts div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 14px 12px 0 0; }
.ca-facts div + div { padding-left: 14px; border-left: var(--s-hair) solid var(--s-rule); }
.ca-facts dd { font: var(--s-weight-400) var(--s-step-fact) / var(--s-leading-100) var(--s-font-italic); font-style: italic; color: var(--s-ticket); letter-spacing: 0; font-variant-numeric: lining-nums; }
.ca-facts dt { color: var(--s-muted); font-size: var(--s-step-small); line-height: var(--s-leading-125); letter-spacing: var(--s-track-body); }

.ca-window-slot { position: relative; display: flex; flex-direction: column; align-items: center; z-index: var(--s-z-window); }
/* The moulded surround every cabin window sits in. It does not scale; the window grows over it. */
.ca-surround {
    position: absolute; left: 50%; top: calc(var(--ca-win) / var(--s-win-ratio) / 2);
    width: calc(var(--ca-win) * var(--s-surround-w)); height: calc(var(--ca-win) / var(--s-win-ratio) * var(--s-surround-h));
    transform: translate(-50%, -50%); border-radius: var(--s-win-radius);
    background: linear-gradient(180deg, var(--s-surround), var(--s-panel) 70%);
    box-shadow: inset 0 var(--s-hair) 0 var(--s-surround-edge), inset 0 -18px 30px -18px var(--s-panel-seam), 0 18px 40px -26px var(--s-frame-shadow);
}
.ca-window {
    position: relative; z-index: var(--s-z-window);
    width: var(--ca-win);
    aspect-ratio: var(--s-win-ratio); border-radius: var(--s-win-radius);
    transform-origin: 50% 50%;
    box-shadow:
        0 0 0 calc(var(--s-win-frame) + 1px) var(--s-panel-seam),
        0 30px 70px -24px var(--s-frame-shadow);
}
.ca-window::before { /* the platinum frame, bevelled by light from above */
    content: ""; position: absolute; inset: calc(var(--s-win-frame) * -1); border-radius: var(--s-win-radius);
    background: linear-gradient(170deg, var(--s-frame-edge) 0%, var(--s-frame) 22%, var(--s-frame-deep) 62%, var(--s-frame) 100%);
}
.ca-pane {
    position: absolute; inset: 0; overflow: hidden; border-radius: var(--s-win-radius);
    clip-path: inset(0 round var(--s-win-radius)); background: var(--s-sky-mid);
}
.ca-glass {
    position: absolute; inset: 0; border-radius: var(--s-win-radius); pointer-events: none;
    background: linear-gradient(118deg, transparent 34%, var(--s-glass-sheen) 44%, transparent 54%);
    box-shadow:
        inset 0 0 0 1px var(--s-frame-deep),
        inset 0 12px 24px -8px var(--s-frame-shadow),
        inset 0 -8px 18px -10px var(--s-frame-shadow);
}
.ca-blind {
    position: absolute; left: 0; right: 0; top: 0; height: var(--s-blind-h);
    background: linear-gradient(180deg, var(--s-blind-shade), var(--s-blind) 55%, var(--s-blind-shade));
    box-shadow: 0 3px 8px var(--s-frame-shadow);
}
.ca-blind::after {
    content: ""; position: absolute; left: 50%; bottom: 6px; width: 18%; height: 3px; border-radius: 2px;
    transform: translateX(-50%); background: var(--s-frame-deep);
}

/* The sky: sized to the hero, centred on the window, counter-scaled by site.js.
   Every layer is placed relative to --s-horizon so the end frame keeps a small sea band. */
.ca-sky {
    position: absolute; left: 50%; top: 50%;
    width: var(--ca-sky-w); height: var(--ca-sky-h);
    transform: translate(-50%, -50%) translateY(calc(var(--ca-lift) * var(--ca-sky-h))); transform-origin: 50% 50%;
    background: linear-gradient(180deg,
        var(--s-sky-zenith) 0%, var(--s-sky-high) calc(var(--s-horizon) * 0.4), var(--s-sky-mid) calc(var(--s-horizon) * 0.72),
        var(--s-sky-low) calc(var(--s-horizon) - 7%), var(--s-sky-horizon) var(--s-horizon), var(--s-sky-low) calc(var(--s-horizon) + 0.6%));
}
.ca-sky-stars {
    position: absolute; inset: 0 0 50% 0; opacity: 0.75;
    background:
        radial-gradient(1px 1px at 12% 22%, var(--s-star), transparent),
        radial-gradient(1px 1px at 27% 58%, var(--s-star), transparent),
        radial-gradient(1.5px 1.5px at 41% 14%, var(--s-star), transparent),
        radial-gradient(1px 1px at 58% 44%, var(--s-star), transparent),
        radial-gradient(1px 1px at 69% 9%, var(--s-star), transparent),
        radial-gradient(1.5px 1.5px at 83% 31%, var(--s-star), transparent),
        radial-gradient(1px 1px at 93% 66%, var(--s-star), transparent),
        radial-gradient(1px 1px at 5% 74%, var(--s-star), transparent),
        radial-gradient(1px 1px at 48% 81%, var(--s-star), transparent),
        radial-gradient(1.5px 1.5px at 76% 63%, var(--s-star), transparent);
}
.ca-cloud { position: absolute; left: 0; right: 0; overflow: hidden; pointer-events: none; }
.ca-cloud span {
    display: block; height: 100%; width: auto; aspect-ratio: 15 / 1; /* two tiles of the 2400x320 mask */
    -webkit-mask: url("img/clouds-far.webp") 0 0 / 50% 100% repeat-x;
    mask: url("img/clouds-far.webp") 0 0 / 50% 100% repeat-x;
    animation: ca-drift var(--s-drift-far) linear infinite;
}
.ca-cloud--far { top: calc(var(--s-horizon) - 30%); height: 22%; }
.ca-cloud--far span { background: linear-gradient(180deg, var(--s-cloud-far) 30%, var(--s-cloud-underside)); opacity: var(--s-cloud-far-alpha); }
.ca-cloud--near { top: calc(var(--s-horizon) - 14%); height: 13%; }
.ca-cloud--near span {
    background: linear-gradient(180deg, var(--s-cloud-near) 20%, var(--s-cloud-underside)); opacity: var(--s-cloud-near-alpha);
    -webkit-mask-image: url("img/clouds-near.webp"); mask-image: url("img/clouds-near.webp");
    animation-duration: var(--s-drift-near);
}
.ca-sky-glow {
    position: absolute; left: 0; right: 0; top: calc(var(--s-horizon) - 8%); height: 16%;
    background: radial-gradient(ellipse 52% 26% at 50% 50%, var(--s-sky-glow), transparent 75%);
}
.ca-sky-glow::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--s-hair);
    background: linear-gradient(90deg, transparent, var(--s-gold) 50%, transparent);
}
.ca-sky-sea {
    position: absolute; left: 0; right: 0; top: calc(var(--s-horizon) + 0.5%); bottom: 0;
    background:
        radial-gradient(ellipse 26% 12% at 50% 0%, var(--s-gold-faint), transparent 70%),
        linear-gradient(180deg, var(--s-sky-low) 0%, var(--s-sea) 30%, var(--s-bg) 100%);
}
.ca-sky.is-paused .ca-cloud span { animation-play-state: paused; }
@keyframes ca-drift { to { transform: translateX(-50%); } }

.ca-placard {
    margin-top: calc(var(--s-win-frame) + 22px); color: var(--s-soft); text-align: center;
    font: var(--s-weight-ui) var(--s-step-micro) / var(--s-leading-100) var(--s-font-body); letter-spacing: var(--s-track-micro); text-transform: uppercase;
}
.ca-placard::before { content: ""; display: block; width: 24px; height: var(--s-hair); margin: 0 auto 12px; background: var(--s-gold-line); }
.ca-board {
    position: absolute; left: var(--s-gutter); bottom: 24px; z-index: var(--s-z-copy);
    display: flex; align-items: center; gap: 14px; color: var(--s-soft);
    font: var(--s-weight-ui) var(--s-step-micro) / var(--s-leading-100) var(--s-font-body); letter-spacing: var(--s-track-micro); text-transform: uppercase;
}
.ca-board::before { content: ""; width: var(--s-hair); height: 36px; background: linear-gradient(180deg, transparent, var(--s-gold)); }
.ca-nojs .ca-board { display: none; }

/* ---------- Sections ---------- */
.ca-section { position: relative; padding: var(--s-section) var(--s-gutter); }
.ca-head { max-width: 36rem; }

/* ---------- Fleet: the hangar sheet ----------
 * The one daylight room on the site: ivory drawing paper under a warm cabin light,
 * every aircraft drawn in ink at a size you can read. */
.ca-fleet {
    color: var(--s-ink);
    background:
        radial-gradient(ellipse 60% 50% at 82% 0%, var(--s-paper-lit), transparent 70%),
        linear-gradient(var(--s-paper-grid) var(--s-hair), transparent var(--s-hair)) 0 0 / 100% 48px,
        linear-gradient(90deg, var(--s-paper-grid) var(--s-hair), transparent var(--s-hair)) 0 0 / 48px 100%,
        var(--s-paper);
}
.ca-fleet h2, .ca-fleet .ca-kicker { color: var(--s-ink); }
.ca-fleet .ca-kicker::before { background: var(--s-ink-gold); }
.ca-fleet .ca-body { color: var(--s-ink-soft); }
.ca-fleet .ca-micro { color: var(--s-ink-soft); }
.ca-fleet :focus-visible { outline-color: var(--s-ink); }
.ca-fleet ::selection { background: var(--s-ink); color: var(--s-paper); }
.ca-fleet-head { max-width: 40rem; }

/* The scale strip: three silhouettes to one scale. Each is the tab that opens its sheet. */
.ca-scale { margin-top: clamp(32px, 5vw, 64px); display: grid; gap: 0; border-top: var(--s-hair) solid var(--s-paper-rule-strong); }
.ca-scale-tab {
    position: relative; text-decoration: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
    padding: 18px 0 16px; text-align: left; cursor: pointer; color: var(--s-ink); font: inherit;
    background: none; border: 0; border-bottom: var(--s-hair) solid var(--s-paper-rule);
}
.ca-scale-tab::after {
    content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px; background: var(--s-ink);
    transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--s-dur) var(--s-ease);
}
.ca-scale-tab[aria-selected="true"]::after { transform: scaleX(1); }
.ca-scale-meta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ca-scale-meta .ca-numeral { font: var(--s-weight-400) var(--s-step-h3) / var(--s-leading-100) var(--s-font-display); color: var(--s-ink-gold); }
.ca-scale-name { font: var(--s-weight-display) var(--s-step-route) / var(--s-leading-110) var(--s-font-display); }
.ca-scale-len { color: var(--s-ink-soft); font-size: var(--s-step-small); letter-spacing: var(--s-track-ui); }
.ca-scale-art { width: 100%; height: auto; overflow: visible; opacity: 0.55; transition: opacity var(--s-dur-quick) var(--s-ease), transform var(--s-dur) var(--s-ease); }
.ca-scale-tab:hover .ca-scale-art, .ca-scale-tab[aria-selected="true"] .ca-scale-art { opacity: 1; }
.ca-scale-tab:hover .ca-scale-art { transform: translateX(6px); }
.ca-scale-note { padding: 14px 0 0; color: var(--s-ink-soft); font: var(--s-weight-400) var(--s-step-lede) / var(--s-leading-140) var(--s-font-italic); font-style: italic; letter-spacing: 0; }
.ca-fleet .ca-hull { fill: var(--s-hull-paper); stroke: var(--s-ink); }
.ca-fleet .ca-hull-detail { stroke: var(--s-ink); }
.ca-fleet .ca-window-lit, .ca-fleet .ca-door-lit { fill: var(--s-cabin-light); stroke: var(--s-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ca-fleet .ca-cheat { stroke: var(--s-ink-gold); }

/* The sheet: one aircraft, large. */
.ca-hangar { margin-top: clamp(28px, 4vw, 56px); }
.ca-sheet {
    position: relative; display: grid; gap: 28px; padding: clamp(24px, 3vw, 48px) clamp(18px, 2.6vw, 44px) clamp(28px, 3vw, 48px);
    background: linear-gradient(160deg, var(--s-paper-lit), var(--s-paper) 60%);
    box-shadow: 0 var(--s-hair) 0 var(--s-paper-rule-strong), 0 30px 60px -40px var(--s-sheet-shadow);
    margin-bottom: 28px;
}
.ca-sheet[hidden] { display: none; }
.ca-sheet.is-entering { animation: ca-sheet-in var(--s-dur-sheet) var(--s-ease) both; }
.ca-sheet.is-entering .ca-profile svg { animation: ca-taxi var(--s-dur-slow) var(--s-ease) both; }
@keyframes ca-sheet-in { from { opacity: 0; transform: translateY(var(--s-sheet-rise)); } to { opacity: 1; transform: none; } }
@keyframes ca-taxi { from { transform: translateX(-6%); opacity: 0; } to { transform: none; opacity: 1; } }
.ca-sheet-head { position: relative; display: grid; gap: 8px; }
.ca-sheet-numeral {
    position: absolute; right: 0; top: 0; color: var(--s-paper-deep); pointer-events: none;
    font: var(--s-weight-300) var(--s-step-sheet-numeral) / var(--s-leading-100) var(--s-font-display);
}
.ca-sheet-name { position: relative; font: var(--s-weight-display) var(--s-step-sheet-name) / var(--s-leading-105) var(--s-font-display); color: var(--s-ink); letter-spacing: var(--s-track-display); }
.ca-sheet-line { position: relative; font: var(--s-weight-400) var(--s-step-lede) / var(--s-leading-145) var(--s-font-italic); font-style: italic; color: var(--s-ink-soft); max-width: 34ch; letter-spacing: 0; }

/* Aircraft side profile (night version: the apron band). */
.ca-profile svg { width: 100%; height: auto; overflow: visible; }
.ca-profile figcaption { margin-top: 12px; }
.ca-hull { fill: var(--s-hull-fill); stroke: var(--s-hull-stroke); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ca-hull-detail { fill: none; stroke: var(--s-hull-stroke); stroke-width: 1; stroke-linejoin: round; opacity: 0.7; vector-effect: non-scaling-stroke; }
.ca-hull-window { fill: var(--s-bg); stroke: var(--s-hull-stroke); stroke-width: 1; opacity: 0.85; vector-effect: non-scaling-stroke; }
.ca-cheat { fill: none; stroke: var(--s-cheatline); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ca-cheat--fine { stroke-width: 1; opacity: 0.55; }
.ca-window-lit, .ca-door-lit { fill: var(--s-cabin-light); }

/* Cabin plan, with every zone named underneath. */
.ca-plan svg { width: 100%; height: auto; }
.ca-plan-hull { fill: var(--s-hull-paper); stroke: var(--s-ink); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.ca-plan-cockpit { fill: none; stroke: var(--s-paper-rule-strong); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.ca-plan-seat { fill: var(--s-seat-paper); stroke: var(--s-ink-gold); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ca-plan-fit { fill: none; stroke: var(--s-ink-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ca-plan-wall { fill: none; stroke: var(--s-ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
/* Phone: the zones read as a legend, nose to tail. From tablet up they sit under their part of the cabin. */
.ca-plan-zones { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 12px 0 0; counter-reset: zone; }
.ca-plan-zones li {
    padding: 0 10px; border-left: var(--s-hair) solid var(--s-paper-rule-strong);
    color: var(--s-ink-soft); font-size: var(--s-step-micro); letter-spacing: var(--s-track-ui); text-transform: uppercase; line-height: var(--s-leading-125);
    overflow-wrap: anywhere;
}
.ca-plan figcaption { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--s-ink-soft); font-size: var(--s-step-small); }
.ca-sheet-data { display: grid; gap: 14px; align-content: start; }
.ca-specs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.ca-specs div { padding: 12px 0; border-top: var(--s-hair) solid var(--s-paper-rule-strong); }
.ca-specs dt { color: var(--s-ink-soft); font-size: var(--s-step-small); letter-spacing: var(--s-track-ui); }
.ca-specs dd { font: var(--s-weight-400) var(--s-step-spec) / var(--s-leading-125) var(--s-font-display); font-variant-numeric: lining-nums tabular-nums; color: var(--s-ink); }
.ca-leaf-routes { margin-top: 8px; display: grid; gap: 8px; color: var(--s-ink-soft); max-width: 40ch; }
.ca-sheet-data .ca-btn { justify-self: start; margin-top: 10px; }

/* ---------- Destinations ---------- */
.ca-dest { overflow: hidden; padding-bottom: var(--s-section-tight); background: radial-gradient(ellipse 50% 40% at 57% 38%, var(--s-glow-warm-soft), transparent 70%), var(--s-bg); }
.ca-dest-stage { position: relative; }
/* Phone: the map is drawn wide and panned so Europe fills the screen; the long routes run off its edges. */
.ca-map-frame { position: relative; overflow: hidden; margin: 28px calc(var(--s-gutter) * -1) 8px; }
.ca-map {
    position: relative; width: var(--s-map-w-phone); aspect-ratio: var(--ca-map-ratio);
    margin-left: calc(50vw - var(--s-map-w-phone) * var(--s-map-focus-phone));
}
.ca-map-land {
    position: absolute; left: var(--ca-land-x); top: var(--ca-land-y); width: var(--ca-land-w); height: var(--ca-land-h);
    background: var(--s-land); opacity: var(--s-land-alpha);
    -webkit-mask: url("img/land-dots.svg") center / 100% 100% no-repeat;
    mask: url("img/land-dots.svg") center / 100% 100% no-repeat;
}
.ca-map-frame::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(90deg, var(--s-bg), transparent 6%, transparent 94%, var(--s-bg)),
        linear-gradient(180deg, var(--s-bg), transparent 8%, transparent 90%, var(--s-bg));
}
.ca-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ca-graticule path { fill: none; stroke: var(--s-graticule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ca-arc {
    fill: none; stroke: var(--s-gold); stroke-width: var(--s-arc-w-mobile); stroke-linecap: round; opacity: 0.85;
    transition: opacity var(--s-dur-quick) var(--s-ease), stroke-width var(--s-dur-quick) var(--s-ease);
}
.ca-city-dot { fill: var(--s-text); transition: opacity var(--s-dur-quick) var(--s-ease); }
.ca-base-ring { fill: none; stroke: var(--s-gold); stroke-width: var(--s-arc-w-mobile); }
.ca-base-dot { fill: var(--s-gold); }
.ca-traveller { fill: var(--s-gold); opacity: 0; }
.ca-map.is-dim .ca-arc:not(.is-active) { opacity: 0.16; }
.ca-map.is-dim .ca-city-dot:not(.is-active) { opacity: 0.3; }
.ca-arc.is-active { opacity: 1; stroke-width: calc(var(--s-arc-w-mobile) * 1.8); }
.ca-map-labels { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.ca-label {
    position: absolute; left: var(--x); top: var(--y); display: grid; gap: 2px; white-space: nowrap;
    transition: opacity var(--s-dur-quick) var(--s-ease);
    text-shadow: 0 0 8px var(--s-bg), 0 0 3px var(--s-bg);
}
.ca-label--w { transform: translate(calc(-100% - 12px), -50%); text-align: right; }
.ca-label--e { transform: translate(12px, -50%); }
.ca-label--s { transform: translate(-50%, 12px); text-align: center; }
.ca-label--n { transform: translate(-50%, calc(-100% - 14px)); text-align: center; }
/* A route that runs on past the frame: labelled where it leaves, with a gold mark pointing on. */
.ca-label--edge { gap: 1px; }
.ca-label-edge { color: var(--s-soft); font-size: var(--s-step-micro); letter-spacing: var(--s-track-micro); text-transform: uppercase; }
.ca-label--edge.ca-label--e .ca-label-edge::before, .ca-label--edge.ca-label--w .ca-label-edge::after {
    content: ""; display: inline-block; width: 18px; height: var(--s-hair); margin: 0 8px; vertical-align: middle; background: var(--s-gold);
}
.ca-label-city { font: var(--s-weight-button) var(--s-step-label) / var(--s-leading-120) var(--s-font-body); letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-text); }
.ca-label-time { font: var(--s-weight-400) var(--s-step-label-time) / var(--s-leading-110) var(--s-font-italic); font-style: italic; color: var(--s-gold); font-variant-numeric: oldstyle-nums; letter-spacing: 0; }
.ca-map.is-dim .ca-label[data-route]:not(.is-active) { opacity: 0.3; }

/* The departures board: a dark strip of rows, warm light on the chosen one. */
.ca-routes-wrap { position: relative; }
.ca-board-bar {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding: 16px 0;
    border-bottom: var(--s-hair) solid var(--s-gold-line);
}
.ca-board-bar .ca-micro:first-child { color: var(--s-gold); }
.ca-board-head { display: none; }
.ca-routes { display: grid; grid-template-columns: 1fr; }
.ca-route {
    position: relative; width: 100%; min-height: 64px; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 16px;
    padding: 14px 12px; text-align: left; cursor: pointer; color: var(--s-text); font: inherit;
    background: none; border: 0; border-bottom: var(--s-hair) solid var(--s-rule);
    transition: background-color var(--s-dur-quick) var(--s-ease);
}
.ca-route::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--s-ticket);
    transform: scaleY(0); transition: transform var(--s-dur-quick) var(--s-ease);
}
.ca-route-city { font: var(--s-weight-display) var(--s-step-board-city) / var(--s-leading-110) var(--s-font-display); }
.ca-route-time { font: var(--s-weight-400) var(--s-step-route-time) / var(--s-leading-100) var(--s-font-italic); font-style: italic; color: var(--s-ticket); font-variant-numeric: oldstyle-nums; letter-spacing: 0; }
.ca-route-ac { grid-column: 1 / -1; color: var(--s-soft); font-size: var(--s-step-micro); letter-spacing: var(--s-track-micro); text-transform: uppercase; }
.ca-route:hover, .ca-route:focus-visible, .ca-route[aria-pressed="true"] { background: var(--s-board-row); }
.ca-route:hover::before, .ca-route:focus-visible::before, .ca-route[aria-pressed="true"]::before { transform: none; }
/* Beside the board: the airfield count as a figure, the access note under it. */
.ca-access { margin-top: clamp(40px, 6vw, 64px); padding-top: 20px; border-top: var(--s-hair) solid var(--s-gold-line); max-width: 30rem; }
.ca-access .ca-micro { color: var(--s-gold); }
.ca-access-figure { display: grid; gap: 10px; margin-top: 18px; }
.ca-access-num { font: var(--s-weight-display) var(--s-step-access-num) / var(--s-leading-100) var(--s-font-display); color: var(--s-ticket); letter-spacing: var(--s-track-display); font-variant-numeric: lining-nums; }
.ca-access-label { font: var(--s-weight-display) var(--s-step-spec) / var(--s-leading-120) var(--s-font-display); color: var(--s-text); max-width: 18ch; }
.ca-access-body { margin-top: 20px; color: var(--s-muted); font-weight: var(--s-weight-400); }

/* ---------- Experience ---------- */
.ca-exp { padding-top: var(--s-section-tight); }
.ca-req { padding-bottom: var(--s-section-tight); }
.ca-promise { margin-top: clamp(36px, 5vw, 64px); max-width: 30rem; }
.ca-promise dl { margin-top: 14px; }
.ca-promise dl div { padding: 20px 0; border-top: var(--s-hair) solid var(--s-rule); }
.ca-promise dt { font: var(--s-weight-display) var(--s-step-spec) / var(--s-leading-120) var(--s-font-display); color: var(--s-text); }
.ca-promise dd { margin-top: 8px; color: var(--s-muted); font-size: var(--s-step-note); font-weight: var(--s-weight-400); line-height: var(--s-leading-160); }
.ca-promise > .ca-micro { font-size: var(--s-step-label); color: var(--s-gold); }
.ca-timeline { position: relative; margin-top: 56px; }
.ca-step {
    position: relative; display: grid; grid-template-columns: 5.2rem 1fr; column-gap: 28px;
    padding: 0 0 clamp(32px, 4vw, 52px);
}
.ca-step::before {
    content: ""; position: absolute; left: calc(5.2rem + 14px - 3px); top: 0.9rem; width: 7px; height: 7px; border-radius: 50%;
    background: var(--s-bg); box-shadow: inset 0 0 0 var(--s-hair) var(--s-gold); z-index: 1;
}
.ca-time {
    font: var(--s-weight-400) var(--s-step-time) / var(--s-leading-100) var(--s-font-italic); font-style: italic; color: var(--s-text);
    font-variant-numeric: oldstyle-nums tabular-nums; letter-spacing: 0; text-align: right;
}
.ca-step-body { padding-left: 20px; }
.ca-step h3 { font: var(--s-weight-display) var(--s-step-h3) / var(--s-leading-115) var(--s-font-display); color: var(--s-text); }
.ca-step p { margin-top: 10px; color: var(--s-muted); max-width: 38ch; }
.ca-timeline-rail { position: absolute; left: calc(5.2rem + 14px); top: 0.9rem; bottom: 4rem; width: var(--s-hair); background: var(--s-rule); }
.ca-timeline-rail span { display: block; width: 100%; height: 100%; background: var(--s-gold); transform-origin: 50% 0; }

/* ---------- The apron band: full-bleed dusk scene ---------- */
.ca-band { --ca-art-w: max(100%, var(--s-band-art-w)); position: relative; height: var(--s-band-h); overflow: hidden; background: var(--s-band-ground); }
/* The scene keeps its proportions and slides so the car and the jet stay in view at every width. */
.ca-band-art {
    position: absolute; top: var(--s-band-art-top); height: var(--s-band-art-h); width: var(--ca-art-w); max-width: none;
    left: clamp(calc(100% - var(--ca-art-w)), calc(50% - var(--ca-art-w) * var(--s-band-focus)), 0px);
}
.ca-stop-zenith { stop-color: var(--s-sky-zenith); }
.ca-stop-high { stop-color: var(--s-sky-high); }
.ca-stop-mid { stop-color: var(--s-sky-mid); }
.ca-stop-low { stop-color: var(--s-sky-low); }
.ca-stop-horizon { stop-color: var(--s-sky-horizon); }
.ca-stop-ground { stop-color: var(--s-band-ground); }
.ca-stop-ground-near { stop-color: var(--s-band-ground-near); }
.ca-stop-glow { stop-color: var(--s-sky-glow); }
.ca-stop-gold { stop-color: var(--s-gold); }
.ca-stop-clear { stop-color: var(--s-band-ground); stop-opacity: 0; }
.ca-stop-beam { stop-color: var(--s-band-beam); stop-opacity: var(--s-band-beam-alpha); }
.ca-stop-beam-clear { stop-color: var(--s-band-beam); stop-opacity: 0; }
.ca-stop-pool { stop-color: var(--s-band-pool); }
.ca-stop-shade { stop-color: var(--s-band-shade); }
.ca-band-stars circle { fill: var(--s-star); opacity: 0.6; }
.ca-band-hills { fill: var(--s-band-hills); }
.ca-band-town circle { fill: var(--s-band-town); opacity: 0.75; }
.ca-band-runway { fill: var(--s-band-runway); }
.ca-band-centre path { stroke: var(--s-band-marking); fill: none; }
.ca-band-light { fill: var(--s-band-edge-light); animation: ca-twinkle var(--s-twinkle) ease-in-out infinite; animation-delay: calc(var(--i) * var(--s-twinkle-step)); }
@keyframes ca-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.ca-band-jet .ca-hull { fill: var(--s-band-silhouette); }
.ca-band-jet .ca-hull-window { fill: var(--s-cabin-light); }
.ca-band-stairs { fill: var(--s-band-silhouette); stroke: var(--s-hull-stroke); stroke-width: 1; stroke-opacity: 0.5; }
.ca-band-rail { fill: none; stroke: var(--s-cabin-light); stroke-width: 1; opacity: 0.7; }
.ca-band-car { fill: var(--s-band-silhouette); stroke: var(--s-hull-stroke); stroke-width: 1; stroke-opacity: 0.45; }
.ca-band-headlight { fill: var(--s-band-beam); filter: drop-shadow(0 0 6px var(--s-band-beam)); }
.ca-band-caption {
    position: absolute; left: var(--s-gutter); right: var(--s-gutter); top: clamp(28px, 5vw, 72px);
    display: grid; gap: 6px; max-width: 30rem;
}
.ca-band-line {
    font: var(--s-weight-400) var(--s-step-band-line) / var(--s-lead-tight) var(--s-font-italic); font-style: italic;
    color: var(--s-text); letter-spacing: 0; max-width: 22ch; text-wrap: balance;
    text-shadow: 0 0 24px var(--s-bg);
}

/* ---------- Request: the form, and the boarding pass that fills in beside it ----------
 * The pass is ivory card stock like the hangar sheet: the one warm, lit object in the night.
 * Phone: the pass leads (display: contents lets it step ahead of the form). */
.ca-doc { margin-top: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; }
.ca-pass-col { display: contents; }
.ca-pass {
    order: -1; position: relative; color: var(--s-ink);
    background: linear-gradient(165deg, var(--s-paper-lit), var(--s-paper) 70%);
    box-shadow: 0 40px 80px -48px var(--s-frame-shadow), 0 0 0 var(--s-hair) var(--s-paper-deep);
}
.ca-pass-bar {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 18px clamp(20px, 2.6vw, 36px); background: var(--s-ink); color: var(--s-paper);
    font: var(--s-weight-ui) var(--s-step-micro) / var(--s-leading-140) var(--s-font-body); letter-spacing: var(--s-track-micro); text-transform: uppercase;
}
.ca-pass-title { font: inherit; letter-spacing: inherit; color: var(--s-ticket); }
.ca-pass-route {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(64px, 9vw, 120px) minmax(0, 1fr); align-items: end; gap: 12px;
    padding: clamp(22px, 2.6vw, 36px) clamp(20px, 2.6vw, 36px) 20px; border-bottom: var(--s-hair) solid var(--s-paper-rule-strong);
}
.ca-pass-end { display: grid; gap: 6px; min-width: 0; }
.ca-pass-end--to { text-align: right; }
.ca-pass-label, .ca-pass-grid dt, .ca-pass-stub dt {
    color: var(--s-ink-soft); font: var(--s-weight-ui) var(--s-step-micro) / var(--s-leading-140) var(--s-font-body); letter-spacing: var(--s-track-micro); text-transform: uppercase;
}
.ca-pass-city {
    display: block; font: var(--s-weight-400) var(--s-step-pass-city) / var(--s-leading-105) var(--s-font-italic); font-style: italic;
    color: var(--s-ink); letter-spacing: 0; overflow-wrap: break-word; hyphens: auto;
}
.ca-pass-flight { width: 100%; height: auto; overflow: visible; margin-bottom: 10px; }
.ca-pass-arc { fill: none; stroke: var(--s-ink-gold); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.ca-pass-jet { fill: var(--s-ink); }
.ca-pass-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; padding: 22px clamp(20px, 2.6vw, 36px) 24px; }
.ca-pass-grid dd { margin-top: 4px; font: var(--s-weight-400) var(--s-step-pass) / var(--s-leading-120) var(--s-font-display); color: var(--s-ink); font-variant-numeric: lining-nums; overflow-wrap: break-word; hyphens: auto; }
/* A field that has just been written into the pass warms for a moment. */
.ca-pass output { transition: color var(--s-dur) var(--s-ease); }
.ca-pass output.is-set { color: var(--s-ink-gold); }
.ca-pass-stub {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 24px;
    padding: 20px clamp(20px, 2.6vw, 36px) 22px; border-top: var(--s-hair) dashed var(--s-paper-rule-strong);
}
.ca-pass-stub::before, .ca-pass-stub::after { /* the half-moons where the stub tears off */
    content: ""; position: absolute; top: calc(var(--s-pass-notch) * -1); width: calc(var(--s-pass-notch) * 2); height: calc(var(--s-pass-notch) * 2);
    border-radius: 50%; background: var(--s-bg);
}
.ca-pass-stub::before { left: calc(var(--s-pass-notch) * -1); }
.ca-pass-stub::after { right: calc(var(--s-pass-notch) * -1); }
.ca-pass-stub dl { display: grid; gap: 10px; }
.ca-pass-stub dd { font: var(--s-weight-400) var(--s-step-small) / var(--s-leading-140) var(--s-font-body); color: var(--s-ink); }
.ca-barcode { width: 100%; height: 44px; fill: var(--s-ink); opacity: 0.8; }
.ca-pass-note {
    position: absolute; right: clamp(20px, 2.6vw, 36px); top: calc(100% + 12px); color: var(--s-soft);
    font: var(--s-weight-400) var(--s-step-small) / var(--s-leading-140) var(--s-font-italic); font-style: italic; letter-spacing: 0;
}
.ca-nojs .ca-pass-note { display: none; }
.ca-form { padding: 36px 0 44px; }
.ca-fs { border: 0; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: 1fr; gap: 28px var(--s-gap); min-width: 0; }
.ca-fs > legend { padding: 0; margin-bottom: 20px; }
.ca-field { display: grid; gap: 8px; min-width: 0; border: 0; margin: 0; padding: 0; }
.ca-field > label, .ca-trip > legend {
    padding: 0; color: var(--s-soft);
    font: var(--s-weight-ui) var(--s-step-micro) / var(--s-leading-140) var(--s-font-body); letter-spacing: var(--s-track-micro); text-transform: uppercase;
}
.ca-field input, .ca-field select, .ca-field textarea {
    width: 100%; min-height: 48px; padding: 10px 2px; border: 0; border-radius: 0;
    border-bottom: var(--s-hair) solid var(--s-rule-strong); background: var(--s-field); color: var(--s-text);
    font: var(--s-weight-body) var(--s-step-input) / var(--s-leading-140) var(--s-font-body); letter-spacing: var(--s-track-body);
    -webkit-appearance: none; appearance: none; color-scheme: dark;
    transition: border-color var(--s-dur-quick) var(--s-ease);
}
.ca-field textarea { resize: vertical; min-height: 96px; }
.ca-field input::placeholder, .ca-field textarea::placeholder { color: var(--s-soft); opacity: 1; }
/* Focus keeps the global 2px gold ring (8:1 on the ground) and also warms the underline. */
.ca-field input:focus-visible, .ca-field select:focus-visible, .ca-field textarea:focus-visible { border-bottom-color: var(--s-gold); }
.ca-field input:user-invalid, .ca-field textarea:user-invalid { border-bottom-color: var(--s-error); }
.ca-field select {
    padding-right: 32px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--s-gold) 50%), linear-gradient(135deg, var(--s-gold) 50%, transparent 50%);
    background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.ca-field option { background: var(--s-bg); color: var(--s-text); }
.ca-trip-options { display: flex; gap: 28px; min-height: 48px; align-items: center; }
.ca-radio { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.ca-radio input {
    width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; border-radius: 50%;
    border: var(--s-hair) solid var(--s-gold-line); background: none; -webkit-appearance: none; appearance: none;
}
.ca-radio input:checked { background: var(--s-gold); box-shadow: inset 0 0 0 4px var(--s-bg); border-color: var(--s-gold); }
.ca-radio input:focus-visible { outline: var(--s-focus-w) solid var(--s-gold); outline-offset: 4px; }
.ca-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.ca-reply { color: var(--s-muted); font: var(--s-weight-400) var(--s-step-lede) / var(--s-leading-140) var(--s-font-italic); font-style: italic; letter-spacing: 0; }
.ca-sent > div { margin-top: 32px; padding: 6px 0 6px 22px; border-left: var(--s-hair) solid var(--s-gold); max-width: 52ch; color: var(--s-muted); }
.ca-sent > div:not([hidden]) { animation: ca-arrive var(--s-dur) var(--s-ease) both; }
.ca-sent-title { font: var(--s-weight-400) var(--s-step-sent) / var(--s-leading-120) var(--s-font-italic); font-style: italic; color: var(--s-text); margin-bottom: 8px; letter-spacing: 0; }
@keyframes ca-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ca-stub { padding: 28px 0 0; border-top: var(--s-hair) dashed var(--s-gold-line); }
.ca-stub ul { margin-top: 18px; display: grid; gap: 16px; }
.ca-stub li { color: var(--s-muted); font-size: var(--s-step-small); padding-left: 20px; position: relative; max-width: 34ch; }
.ca-stub li::before { content: ""; position: absolute; left: 0; top: var(--s-space-0p8); width: 10px; height: var(--s-hair); background: var(--s-gold); }

/* ---------- Footer ---------- */
.ca-foot { padding: clamp(40px, 5vw, 72px) var(--s-gutter) 36px; border-top: var(--s-hair) solid var(--s-rule); }
.ca-foot-signoff { font: var(--s-weight-400) var(--s-step-h2) / var(--s-leading-105) var(--s-font-italic); font-style: italic; color: var(--s-text); letter-spacing: 0; max-width: 14ch; }
.ca-foot-row { margin-top: clamp(40px, 5vw, 72px); display: grid; gap: 20px; color: var(--s-soft); font-size: var(--s-step-small); }
.ca-foot-cert { max-width: 60ch; }

@media (max-width: 359px) {
    .ca-mark-name { letter-spacing: var(--s-track-ui); }
    .ca-btn { padding: 0 22px; }
}

/* ---------- Tablet ---------- */
@media (min-width: 700px) {
    .ca-arc, .ca-base-ring { stroke-width: var(--s-arc-w); }
    .ca-arc.is-active { stroke-width: calc(var(--s-arc-w) * 1.8); }
    .ca-routes { grid-template-columns: 1fr 1fr; column-gap: var(--s-gap); }
    .ca-fs { grid-template-columns: 1fr 1fr; }
    .ca-field--wide { grid-column: 1 / -1; }
    .ca-pass-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ca-foot-row { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 48px; }
    .ca-foot-legal { grid-column: 2; }
    .ca-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); align-items: end; }
    .ca-scale-note { grid-column: 1 / -1; }
    .ca-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ca-plan-zones { flex-wrap: nowrap; gap: 0; margin: 10px var(--ca-tail) 0 var(--ca-nose); }
    .ca-plan-zones li { flex: var(--w) 1 0; min-width: 0; padding: 8px 4px 0; }
}

/* ---------- Desktop: a 12-column grid used sparingly ---------- */
@media (min-width: 1024px) {
    .ca-menu-button { display: none; }
    .ca-nav {
        position: static; inset: auto; flex-direction: row; align-items: center; justify-content: flex-end; gap: clamp(20px, 2.6vw, 40px);
        padding: 0; background: none; visibility: visible; opacity: 1; transition: none;
    }
    .ca-nav ul { display: flex; gap: clamp(20px, 2.6vw, 40px); }
    .ca-nav ul a {
        padding: 12px 0; color: var(--s-muted);
        font: var(--s-weight-ui) var(--s-step-micro) / var(--s-leading-100) var(--s-font-body); letter-spacing: var(--s-track-micro); text-transform: uppercase;
    }
    .ca-nav ul a:hover, .ca-nav ul a:focus-visible { color: var(--s-text); }
    .ca-menu-note { display: none; }

    .ca-hero { --ca-wx: 70%; --ca-wy: 50%; --ca-lift: var(--s-sky-lift-desk); --ca-win: var(--s-win-w-desk-fallback); }
    @supports (height: 1svh) { .ca-hero { --ca-win: var(--s-win-w-desk); } }
    /* A dado rail low on the wall: below the copy and the window, never through the nav. */
    .ca-wall::after {
        content: ""; position: absolute; left: 0; right: 0; top: 86%; height: 3px;
        background: linear-gradient(180deg, var(--s-panel-seam) 0 1px, var(--s-panel-high) 1px 3px);
    }
    .ca-hero-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-gap);
        align-content: stretch; align-items: center; padding-bottom: var(--s-nav-h);
    }
    .ca-hero-copy {
        grid-column: 2 / 7; grid-row: 1; max-width: none; align-self: start;
        margin-top: var(--s-hero-copy-top-fallback);
    }
    @supports (height: 1svh) { .ca-hero-copy { margin-top: var(--s-hero-copy-top); } }
    .ca-window-slot { grid-column: 8 / 12; grid-row: 1; }
    .ca-scrim { background: linear-gradient(90deg, var(--s-scrim) 0%, var(--s-scrim) 30%, var(--s-scrim-clear) 58%); }
    .ca-board { left: calc(var(--s-gutter) + (100% - 2 * var(--s-gutter)) / 12); bottom: 32px; }

    .ca-section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-gap); }
    .ca-section > * { grid-column: 2 / 12; }
    .ca-head { grid-column: 2 / 7; }
    .ca-head--right { grid-column: 8 / 12; }

    /* Fleet: head across the sheet; the sheet draws the aircraft across eight columns, data in the last three. */
    .ca-fleet-head { grid-column: 2 / 9; }
    .ca-scale, .ca-hangar { grid-column: 2 / 12; }
    .ca-sheet {
        grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 72px); row-gap: 20px;
        min-height: var(--s-sheet-min); align-content: start;
    }
    .ca-sheet-head { grid-column: 1 / -1; }
    .ca-profile { grid-column: 1; grid-row: 2; }
    .ca-plan { grid-column: 1; grid-row: 3; }
    .ca-sheet-data { grid-column: 2; grid-row: 2 / 4; align-self: end; }
    .ca-specs { grid-template-columns: 1fr 1fr; }

    /* Destinations: the map runs edge to edge; the title sits in the open Atlantic. */
    .ca-dest { padding-top: clamp(40px, 4vw, 64px); }
    .ca-dest-stage { grid-column: 1 / -1; margin: 0 calc(var(--s-gutter) * -1); }
    .ca-map-frame { margin: 0; }
    .ca-map { width: 100%; margin: 0; }
    .ca-dest-head {
        position: absolute; z-index: 2; left: var(--s-gutter); top: 44%; max-width: 25rem;
        text-shadow: 0 0 18px var(--s-bg), 0 0 6px var(--s-bg);
    }
    .ca-routes-wrap { grid-column: 2 / 8; margin-top: 8px; }
    .ca-routes { grid-template-columns: 1fr; }
    .ca-board-cols + .ca-board-cols { display: none; }
    .ca-access { grid-column: 9 / 12; align-self: center; margin-top: 8px; }
    .ca-board-head {
        display: grid; grid-template-columns: 1fr; padding: 14px 0 6px; color: var(--s-soft);
        font-size: var(--s-step-micro); letter-spacing: var(--s-track-micro); text-transform: uppercase;
    }
    .ca-board-cols { display: grid; grid-template-columns: 2.2fr 1fr 1.2fr; padding: 0 12px; }
    .ca-route { grid-template-columns: 2.2fr 1fr 1.2fr; align-items: baseline; }
    .ca-route-ac { grid-column: auto; text-align: left; }
    .ca-route-time { text-align: left; }

    .ca-exp { align-items: start; }
    .ca-exp-side { grid-column: 2 / 6; position: sticky; top: calc(var(--s-nav-h) + 6vh); }
    .ca-timeline { grid-column: 7 / 12; margin-top: 0; }

    .ca-band-caption { left: calc(var(--s-gutter) + (100% - 2 * var(--s-gutter)) / 12); }

    /* Form and notes on the left; the pass rides beside them, large, for the whole of the form. */
    .ca-doc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto 1fr; column-gap: clamp(40px, 5vw, 96px); align-items: start; }
    .ca-form { grid-column: 1; grid-row: 1; padding-top: 8px; padding-bottom: 28px; }
    .ca-stub { grid-column: 1; grid-row: 2; }
    .ca-pass { grid-column: 2; grid-row: 1 / 3; position: sticky; top: calc(var(--s-nav-h) + 32px); margin-bottom: 40px; }
    .ca-foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-gap); }
    .ca-foot > * { grid-column: 2 / 12; }
}

/* ---------- Reduced motion: the composed, final frame ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .ca-board { display: none; }
}