/* ==========================================================================
   Leap Dynamics — core stylesheet
   Kylan Walters, 2026

   Loaded by every page on the site, public and operations. It carries the
   design tokens, the page chrome (header, hamburger drawer, footer) and the
   interior-page building blocks that the Blade templates in resources/views
   are built from.

   Companion sheets:
     css/leap-home.css  home page only — hero carousel, tiles, fleet tabs, rail
     css/leap-ops.css   operations area only — pilot bar, legacy body taming
     css/default.css    the pre-2026 stylesheet, still loaded inside the
                        operations area for its table/form/.button rules

   Typography follows the landing page: Barlow for body copy (the closest free
   grotesk to Atlas Air's licensed Geogrotesque) and Lato Black Italic for the
   LEAP wordmark, which is how the mark has been set on leapdyn.com since 2013.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,200;0,300;0,400;0,500;0,600;1,300&family=Barlow+Semi+Condensed:wght@400;500&family=Lato:ital,wght@1,900&display=swap');

:root {
	--navy:        #101e40;
	--navy-deep:   #0a1330;
	--navy-soft:   #1b2c56;
	--red:         #f44336;
	--red-deep:    #c62828;
	--ink:         #333333;
	--muted:       #6f7683;
	--line:        #d9d9d9;
	--wash:        #f2f2f2;
	--shell:       1440px;

	/* The one breakpoint that matters: below this the primary bar collapses
	   into the hamburger drawer. Kept here as documentation — media queries
	   can't read custom properties, so the number is repeated in the @media
	   rules at the bottom of this file and in scripts/leap-nav.js.
	   1150px, not 1000px: between those widths the bar technically fits but is
	   cramped enough that the drawer is the better experience. */
	--bp-nav:      1150px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.ld {
	margin: 0;
	font-family: 'Barlow', 'Open Sans', Verdana, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
	/* Belt and braces against a stray fixed-width child forcing a sideways
	   scroll on a phone — the exact failure mode this rebuild is fixing. */
	overflow-x: hidden;
}

body.ld a { color: inherit; text-decoration: none; }
body.ld img { max-width: 100%; height: auto; display: block; }

.ld-shell {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0 40px;
}

/* ---- Accessibility helpers ------------------------------------------------ */

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

/* Keyboard users land on this first; it stays off-screen until focused. */
.ld-skip {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 200;
	background: var(--red);
	color: #fff;
	padding: 10px 18px;
	font-size: 14px;
	letter-spacing: .6px;
	transition: top .18s ease;
}
.ld-skip:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ==========================================================================
   Header
   ========================================================================== */

.ld-header {
	background: var(--navy);
	color: #fff;
	position: relative;
	z-index: 60;
}
.ld-header-inner {
	display: flex;
	align-items: center;
	gap: 26px;
	min-height: 104px;
	padding-top: 12px;
	padding-bottom: 12px;
}

/* Wordmark — Lato Black Italic with the tight negative tracking the mark has
   always used (-8px at 90px in the old menu ≈ -.089em). */
.ld-logo {
	font-family: 'Lato', sans-serif;
	font-style: italic;
	font-weight: 900;
	font-size: 46px;
	line-height: 1;
	white-space: nowrap;
	display: inline-flex;
	align-items: baseline;
}
.ld-logo .leap {
	color: var(--red);
	letter-spacing: -.089em;
	padding-right: .16em;
}
.ld-logo .dynamics {
	color: #fff;
	letter-spacing: -.055em;
}

.ld-headright {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

.ld-utility,
.ld-nav {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ld-utility > li,
.ld-nav > li { position: relative; }

.ld-utility > li + li,
.ld-nav > li + li { border-left: 1px solid rgba(255,255,255,.3); }

.ld-utility > li > a { display: block; padding: 0 16px; }
.ld-nav > li > a { display: block; padding: 0 18px; }

.ld-utility {
	font-size: 15px;
	font-weight: 300;
	letter-spacing: .3px;
	color: rgba(255,255,255,.92);
}
.ld-nav {
	font-size: 17px;
	font-weight: 300;
	letter-spacing: .8px;
	text-transform: uppercase;
}
.ld-utility a:hover,
.ld-nav > li > a:hover { color: var(--red); }
.ld-nav > li > a.is-current { color: var(--red); }

/* Caret on items that own a dropdown. */
.ld-nav > li.has-menu > a::after {
	content: '';
	display: inline-block;
	width: 6px; height: 6px;
	margin-left: 9px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.ld-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 250px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background: var(--navy-deep);
	border-top: 3px solid var(--red);
	text-transform: none;
	letter-spacing: .2px;
	font-size: 15px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.ld-nav > li:hover .ld-submenu,
.ld-nav > li:focus-within .ld-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.ld-submenu a { display: block; padding: 8px 22px; color: rgba(255,255,255,.85); }
.ld-submenu a:hover { color: #fff; background: rgba(244,67,54,.18); }
/* The last item sits at the right edge of the bar — open its panel inward. */
.ld-nav > li:last-child .ld-submenu,
.ld-nav > li:nth-last-child(2) .ld-submenu { left: auto; right: 0; }

/* The login / operations button at the end of the bar. */
.ld-navcta { margin-left: 16px; border-left: none !important; }
.ld-navcta > a {
	background: var(--red);
	color: #fff;
	padding: 8px 22px !important;
}
.ld-navcta > a:hover { background: var(--red-deep); color: #fff; }
.ld-navcta > a.is-current { color: #fff; }

/* ---- Hamburger ---------------------------------------------------------- */

/* Hidden on desktop, and ordered before the wordmark on a phone so it sits on
   the same edge as the drawer it opens. */
.ld-burger {
	display: none;
	order: -1;
	width: 46px; height: 46px;
	flex: 0 0 auto;
	place-items: center;
	background: none;
	border: 1px solid rgba(255,255,255,.4);
	color: #fff;
	cursor: pointer;
	padding: 0;
}
.ld-burger:hover { border-color: var(--red); }
/* Three bars drawn from one element: the middle is the box, the outer two are
   its before/after. Cheaper than an SVG and it animates to a cross. */
.ld-burger-bars,
.ld-burger-bars::before,
.ld-burger-bars::after {
	display: block;
	width: 20px;
	height: 1.6px;
	background: currentColor;
	transition: transform .2s ease, opacity .2s ease;
}
.ld-burger-bars { position: relative; }
.ld-burger-bars::before,
.ld-burger-bars::after {
	content: '';
	position: absolute;
	left: 0;
}
.ld-burger-bars::before { top: -6px; }
.ld-burger-bars::after  { top: 6px; }

.ld-burger[aria-expanded="true"] .ld-burger-bars { background: transparent; }
.ld-burger[aria-expanded="true"] .ld-burger-bars::before { transform: translateY(6px) rotate(45deg); }
.ld-burger[aria-expanded="true"] .ld-burger-bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   Off-canvas drawer (the mobile menu)
   ========================================================================== */

.ld-scrim {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(10,19,48,.62);
	backdrop-filter: blur(2px);
	animation: ld-fade .2s ease;
}
.ld-scrim[hidden] { display: none; }

@keyframes ld-fade { from { opacity: 0; } to { opacity: 1; } }

.ld-drawer {
	position: fixed;
	top: 0; bottom: 0; left: 0;
	z-index: 100;
	width: min(86vw, 350px);
	display: flex;
	flex-direction: column;
	background: var(--navy-deep);
	color: #fff;
	box-shadow: 6px 0 28px rgba(0,0,0,.4);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform .28s cubic-bezier(.22,.61,.36,1), visibility .28s;
}
.ld-drawer.is-open {
	transform: none;
	visibility: visible;
}

/* Stop the page behind the drawer from scrolling under a swipe. */
body.ld-navopen { overflow: hidden; }

.ld-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px 20px;
	border-bottom: 1px solid rgba(255,255,255,.14);
}
.ld-drawer-head .ld-logo { font-size: 30px; }

.ld-drawer-close {
	width: 40px; height: 40px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	font-size: 30px;
	line-height: 1;
	background: none;
	border: 1px solid rgba(255,255,255,.3);
	color: #fff;
	cursor: pointer;
	padding: 0;
}
.ld-drawer-close:hover { border-color: var(--red); color: var(--red); }

.ld-drawer-card {
	padding: 16px 20px;
	border-bottom: 1px solid rgba(255,255,255,.14);
	background: rgba(255,255,255,.04);
}

.ld-drawer-nav { padding: 6px 0 18px; }
.ld-drawer-nav ul { list-style: none; margin: 0; padding: 0; }

.ld-drawer-nav > ul > li + li { border-top: 1px solid rgba(255,255,255,.1); }

.ld-drawer-nav > ul > li > a,
.ld-drawer-nav .ld-acc {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	/* 52px of vertical target: comfortably above the 44px minimum for a thumb. */
	padding: 15px 20px;
	font: inherit;
	font-size: 17px;
	font-weight: 300;
	letter-spacing: .8px;
	text-transform: uppercase;
	text-align: left;
	color: #fff;
	background: none;
	border: none;
	cursor: pointer;
}
.ld-drawer-nav > ul > li > a:hover,
.ld-drawer-nav .ld-acc:hover { background: rgba(244,67,54,.16); }
.ld-drawer-nav > ul > li.is-current > a,
.ld-drawer-nav > ul > li.is-current > .ld-acc { color: var(--red); }
.ld-drawer-nav > ul > li.is-current { box-shadow: inset 3px 0 0 var(--red); }

/* The login / operations entry, given the same weight it has in the desktop
   bar — for a pilot on a phone it is the reason they opened the menu. */
.ld-drawer-nav > ul > li.is-cta > a {
	margin: 14px 20px 4px;
	padding: 13px 18px;
	background: var(--red);
	justify-content: center;
	letter-spacing: 1.2px;
}
.ld-drawer-nav > ul > li.is-cta > a:hover { background: var(--red-deep); }

.ld-acc-chev {
	width: 8px; height: 8px;
	flex: 0 0 auto;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s ease;
}
.ld-acc[aria-expanded="true"] .ld-acc-chev { transform: translateY(2px) rotate(-135deg); }

/* Sub-items. The panel is only hidden once the script sets [hidden], so with
   JavaScript off the drawer degrades to a plain, fully-expanded list. */
.ld-acc-panel {
	background: rgba(0,0,0,.22);
	border-left: 3px solid var(--red);
	padding: 4px 0 8px;
}
.ld-acc-panel[hidden] { display: none; }
.ld-acc-panel a {
	display: block;
	padding: 11px 20px;
	font-size: 15px;
	font-weight: 300;
	color: rgba(255,255,255,.82);
}
.ld-acc-panel a:hover { color: #fff; background: rgba(244,67,54,.16); }
.ld-acc-panel a.is-current { color: var(--red); }

.ld-drawer-foot {
	margin-top: auto;
	padding: 14px 20px 26px;
	border-top: 1px solid rgba(255,255,255,.14);
}
.ld-drawer-foot ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	font-size: 14px;
	font-weight: 300;
	color: rgba(255,255,255,.75);
}
.ld-drawer-foot a:hover { color: var(--red); }

/* ==========================================================================
   Interior page furniture
   ========================================================================== */

/* The navy title band that opens every interior page. */
.ld-band {
	background: var(--navy);
	color: #fff;
	padding: 54px 0 58px;
	position: relative;
	overflow: hidden;
}
.ld-band h1 {
	margin: 0;
	font-size: 46px;
	font-weight: 200;
	line-height: 1.15;
	letter-spacing: .2px;
	color: #fff;
}
.ld-band .ld-eyebrow {
	display: block;
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--red);
}
.ld-band .ld-lede {
	max-width: 70ch;
	margin: 18px 0 0;
	font-size: 19px;
	font-weight: 300;
	color: rgba(255,255,255,.78);
}
/* Faint great-circle arcs, same motif as the home page network band. */
.ld-band-arcs {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: .2;
	pointer-events: none;
}
.ld-band .ld-shell { position: relative; z-index: 2; }

.ld-section { padding: 66px 0; }
.ld-section--wash { background: var(--wash); }
.ld-section--tight { padding: 34px 0; }

.ld-h2 {
	font-size: 34px;
	font-weight: 200;
	line-height: 1.25;
	color: var(--navy);
	margin: 0 0 26px;
	letter-spacing: .1px;
}
.ld-h2--center { text-align: center; }

/* Long-form copy. Measure is capped for readability rather than filling a
   1440px shell with 200-character lines the way the old pages did. */
.ld-prose {
	max-width: 76ch;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.7;
	color: #4a5160;
}
.ld-prose--wide { max-width: none; }
.ld-prose > * + * { margin-top: 1.1em; }
.ld-prose h2 {
	margin-top: 1.9em;
	font-size: 27px;
	font-weight: 300;
	line-height: 1.3;
	color: var(--navy);
}
.ld-prose h3 {
	margin-top: 1.7em;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--red);
}
.ld-prose strong { font-weight: 600; color: var(--navy); }
.ld-prose a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.ld-prose ul, .ld-prose ol { padding-left: 1.3em; }
.ld-prose li + li { margin-top: .5em; }
.ld-prose img { margin: 1.6em 0; }

/* Small uppercase link with the sliding arrow used across the site. */
.ld-arrowlink {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--navy);
}
.ld-arrowlink::after {
	content: '';
	width: 22px;
	height: 1px;
	background: currentColor;
	transition: width .22s ease;
}
.ld-arrowlink:hover { color: var(--red); }
.ld-arrowlink:hover::after { width: 34px; }

.ld-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 34px;
	align-items: center;
	margin-top: 30px;
}

/* Buttons. .ld-btn is the new one; the operations area also still has
   css/default.css's .button and cargo-console.css's .cargo-btn on legacy
   markup, which is why this one is namespaced rather than restyling those. */
.ld-btn {
	display: inline-block;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	padding: 12px 26px;
	border: 1px solid var(--red);
	background: var(--red);
	color: #fff;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.ld-btn:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }
.ld-btn--ghost { background: none; border-color: currentColor; color: var(--navy); }
.ld-btn--ghost:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Callout used for the "under development" notices that were previously black
   or grey bars dropped inline with a <font> tag. */
.ld-notice {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	border-left: 4px solid var(--red);
	background: #fdf1f0;
	color: #7c231b;
	padding: 16px 20px;
	font-size: 15px;
	font-weight: 400;
}
.ld-notice strong {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}
.ld-notice p { margin: 4px 0 0; font-weight: 300; }

/* Simple auto-fitting grid for cards and panels. */
.ld-grid {
	display: grid;
	gap: 26px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.ld-panel {
	background: #fff;
	border: 1px solid var(--line);
	padding: 26px 28px;
}
.ld-panel h2, .ld-panel h3 { margin-top: 0; }
.ld-panel--wash { background: var(--wash); border-color: transparent; }

/* ---- Tables ------------------------------------------------------------- */

/*
 * Wide tables scroll inside their own box instead of stretching the page.
 * scripts/leap-nav.js wraps every table it finds in .ld-ops-body and
 * .ld-tables with one of these, so legacy operations markup gets the
 * behaviour without each page being edited.
 */
.ld-tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}
.ld-tablewrap > table { min-width: 100%; }

.ld-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	background: #fff;
	border: 1px solid var(--line);
}
.ld-table th {
	background: var(--wash);
	border-bottom: 1px solid var(--line);
	padding: 10px 12px;
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
}
.ld-table td {
	border-bottom: 1px solid #eceef1;
	padding: 10px 12px;
	vertical-align: middle;
	font-weight: 300;
}
.ld-table tr:hover td { background: #fafbfc; }
.ld-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ld-table .code {
	font-family: 'Barlow Semi Condensed', Menlo, Consolas, monospace;
	font-weight: 500;
	letter-spacing: .6px;
}
/* Explanatory line under a table. Deliberately a sibling rather than a
   <caption>: the table may be inside a horizontal scroll box, and a caption
   would scroll away with it. */
.ld-table-note {
	margin: 10px 0 0;
	font-size: 14px;
	font-weight: 300;
	color: var(--muted);
}
.ld-empty {
	padding: 30px;
	text-align: center;
	color: var(--muted);
	font-weight: 300;
	border: 1px dashed var(--line);
}

/* ---- Forms -------------------------------------------------------------- */

.ld-form { max-width: 560px; }
.ld-form .row + .row { margin-top: 18px; }
.ld-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--muted);
}
.ld-form input[type="text"],
.ld-form input[type="email"],
.ld-form input[type="password"],
.ld-form input[type="number"],
.ld-form select,
.ld-form textarea {
	font: inherit;
	font-size: 16px; /* 16px keeps iOS Safari from zooming on focus */
	width: 100%;
	padding: 11px 13px;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
}
.ld-form input:focus,
.ld-form select:focus,
.ld-form textarea:focus { outline: none; border-color: var(--red); }
.ld-form .hint { margin: 6px 0 0; font-size: 14px; font-weight: 300; color: var(--muted); }
.ld-form .ld-btn { margin-top: 24px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.ld-footer {
	background: var(--navy-deep);
	color: rgba(255,255,255,.72);
	padding: 58px 0 0;
	font-weight: 300;
}
.ld-foot-cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	padding-bottom: 44px;
}
.ld-foot-col h2 {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #fff;
}
.ld-foot-col ul { list-style: none; margin: 0; padding: 0; }
.ld-foot-col li { margin-bottom: 9px; font-size: 15px; }
.ld-foot-col a:hover { color: var(--red); }

.ld-foot-bar {
	border-top: 1px solid rgba(255,255,255,.14);
	padding: 22px 0 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	flex-wrap: wrap;
	font-size: 14px;
}
.ld-foot-bar .ld-logo { font-size: 28px; }
.ld-foot-legal { color: rgba(255,255,255,.5); max-width: 70ch; }

/* ---- Consent notice ----------------------------------------------------- */

.ld-consent {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 80;
	background: #fff;
	border-top: 1px solid var(--line);
	box-shadow: 0 -8px 24px rgba(0,0,0,.08);
	padding: 16px 0;
	font-size: 15px;
	font-weight: 300;
}
.ld-consent .ld-shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.ld-consent button {
	font: inherit;
	cursor: pointer;
	border: none;
	background: var(--navy);
	color: #fff;
	padding: 9px 26px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	font-size: 13px;
}
.ld-consent button:hover { background: var(--red); }
.ld-consent[hidden] { display: none; }

/* ==========================================================================
   Responsive
   --------------------------------------------------------------------------
   1000px is the nav breakpoint (--bp-nav): the primary bar becomes the
   hamburger drawer. 620px is the phone breakpoint where multi-column
   furniture collapses to one column.
   ========================================================================== */

/* The bar must never wrap: a wrapped row silently doubles the header height and
   pushes the page down, which is how this went unnoticed the first time. */
.ld-nav, .ld-utility { flex-wrap: nowrap; }
.ld-nav > li > a,
.ld-utility > li > a { white-space: nowrap; }

@media (max-width: 1440px) {
	.ld-shell { padding: 0 30px; }
	.ld-logo { font-size: 42px; }
	.ld-nav { font-size: 16px; letter-spacing: .5px; }
	.ld-nav > li > a { padding: 0 14px; }
	.ld-utility { font-size: 14px; }
	.ld-utility > li > a { padding: 0 12px; }
	.ld-navcta { margin-left: 12px; }
	.ld-navcta > a { padding: 8px 18px !important; }
}

/* --bp-nav: the primary bar becomes the hamburger drawer. */
@media (max-width: 1150px) {
	.ld-header-inner {
		min-height: 74px;
		gap: 14px;
	}
	.ld-logo { font-size: 34px; }
	.ld-burger { display: grid; }
	/* Everything the bar held now lives in the drawer. */
	.ld-headright { display: none; }
}

@media (max-width: 1000px) {
	.ld-shell { padding: 0 20px; }

	/* The title band earns its size on a desktop; on a phone it was pushing
	   the actual content (the tracking map, the tables) below the fold. Trim
	   it hard, and pull the first section up to meet it. */
	.ld-band { padding: 22px 0 24px; }
	.ld-band h1 { font-size: 30px; }
	.ld-band .ld-lede { font-size: 16px; margin-top: 6px; }

	.ld-section { padding: 46px 0; }
	.ld-band + .ld-section { padding-top: 24px; }
	.ld-h2 { font-size: 27px; }
	.ld-prose { font-size: 16px; }

	.ld-foot-cols { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}

@media (max-width: 620px) {
	.ld-shell { padding: 0 16px; }
	.ld-logo { font-size: 28px; }
	.ld-band { padding: 14px 0 16px; }
	.ld-band h1 { font-size: 24px; }
	.ld-band .ld-lede { font-size: 15px; margin-top: 4px; }
	.ld-band + .ld-section { padding-top: 14px; }
	.ld-h2 { font-size: 23px; }
	.ld-grid { gap: 18px; }
	.ld-panel { padding: 20px; }
	.ld-foot-cols { grid-template-columns: 1fr; gap: 26px; padding-bottom: 32px; }
	.ld-foot-bar { padding: 18px 0 24px; }
	/* A full-width button is easier to hit than a centred pill. */
	.ld-actions .ld-btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.ld-drawer,
	.ld-scrim,
	.ld-acc-chev,
	.ld-burger-bars,
	.ld-burger-bars::before,
	.ld-burger-bars::after { transition: none; animation: none; }
}

/* --------------------------------------------------------------------------
   Site-wide popup announcement (partials/announcement-popup.blade.php).
   A centered card over a scrim, shown to logged-in pilots when an admin
   posts a popup on administrator/announcements.php. Closable; the close is
   remembered per pilot, so the overlay is rare by design.
   -------------------------------------------------------------------------- */
.ld-announce-overlay {
	position: fixed;
	inset: 0;
	z-index: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(10, 19, 48, 0.55);
}
/* display:flex above would beat the UA's [hidden]{display:none}: restate it. */
.ld-announce-overlay[hidden] { display: none; }
.ld-announce-card {
	position: relative;
	width: min(560px, 100%);
	max-height: min(78vh, 640px);
	overflow-y: auto;
	background: #ffffff;
	border-top: 4px solid var(--red);
	box-shadow: 0 18px 60px rgba(10, 19, 48, 0.35);
	padding: 26px 30px 28px;
}
.ld-announce-eyebrow {
	margin: 0 0 6px;
	font: 500 12px/1 "Barlow Semi Condensed", sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--red-deep);
}
.ld-announce-card h2 {
	margin: 0 0 10px;
	font: 600 24px/1.2 "Barlow", sans-serif;
	color: var(--navy);
}
.ld-announce-body {
	white-space: pre-line;
	color: var(--ink);
	font-size: 16px;
	line-height: 1.55;
}
.ld-announce-close {
	position: absolute;
	top: 10px;
	right: 12px;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: var(--muted);
	cursor: pointer;
	padding: 4px 8px;
}
.ld-announce-close:hover,
.ld-announce-close:focus-visible {
	color: var(--red-deep);
}