:root {
  --bg: #0b0e14;
  --bg-2: #11151f;
  --card: #161b28;
  --line: #232a3b;
  --gold: #c9a24b;
  --gold-2: #e6c778;
  --ink: #e8eaf0;
  --mut: #9aa3b5;
  --ok: #4cc38a;
  --warn: #e5a53a;
  --bad: #e5604c;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
}
a { color: var(--gold-2); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }

header.site {
  border-bottom: 1px solid var(--line);
  background: rgba(11, 14, 20, .92);
  position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px);
}
header.site .wrap {
  display: flex; align-items: center; gap: 16px 26px;
  min-height: 62px; height: auto; padding-top: 10px; padding-bottom: 10px;
  position: relative;
}
.logo { font-weight: 800; letter-spacing: .04em; font-size: 18px; color: var(--ink); white-space: nowrap; }
.logo b { color: var(--gold); }
nav.main { display: flex; align-items: center; gap: 18px; margin-left: auto; flex-wrap: wrap; }
nav.main a { color: var(--mut); font-size: 14.5px; }
nav.main a.cta {
  color: #14100a; background: var(--gold); padding: 7px 16px; border-radius: 8px;
  font-weight: 700;
}
nav.main a.cta:hover { background: var(--gold-2); text-decoration: none; }
.nav-toggle {
  display: none; margin-left: auto; width: 42px; height: 42px; padding: 10px;
  flex-direction: column; justify-content: center; gap: 5px;
  background: transparent; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 1px; }
.nav-toggle:hover { border-color: var(--gold); }

.hero { padding: 84px 0 60px; background: radial-gradient(1200px 500px at 70% -10%, #1d2436 0%, transparent 60%); }
.hero h1 { font-size: clamp(30px, 4.6vw, 50px); line-height: 1.12; letter-spacing: -.01em; max-width: 21ch; }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero p.lead { color: var(--mut); max-width: 62ch; margin: 20px 0 30px; font-size: 18px; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 9px; font-weight: 700; font-size: 15px;
  background: var(--gold); color: #14100a; border: 1px solid transparent;
}
.btn:hover { background: var(--gold-2); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--gold); }

section { padding: 54px 0; }
section.alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
h2.sec { font-size: 27px; margin-bottom: 6px; }
p.sub { color: var(--mut); margin-bottom: 30px; max-width: 70ch; }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px 20px 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.card h3 { font-size: 16.5px; display: flex; align-items: center; gap: 9px; }
.card p { color: var(--mut); font-size: 14.5px; flex: 1; }
.card .tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; width: fit-content; }
.tag.live { background: rgba(76, 195, 138, .14); color: var(--ok); }
.tag.desk { background: rgba(201, 162, 75, .14); color: var(--gold-2); }
.tag.soon { background: rgba(154, 163, 181, .14); color: var(--mut); }
.card a.go { font-size: 14px; font-weight: 600; }

.tool { max-width: 780px; margin: 0 auto; }
.tool-head { padding: 46px 0 8px; }
.tool-head h1 { font-size: 30px; }
.tool-head p { color: var(--mut); margin-top: 8px; max-width: 65ch; }

form.panel, .panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 22px; margin: 22px 0;
}
label { display: block; font-size: 13px; font-weight: 700; color: var(--mut); margin: 14px 0 5px; letter-spacing: .03em; }
input, select, textarea {
  width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; font-size: 15px; font-family: inherit;
  color-scheme: dark;
}
select[multiple] { min-height: 200px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .row2, .row3 { grid-template-columns: 1fr; } }
button.btn { cursor: pointer; border: none; margin-top: 18px; font-family: inherit; }

.out { margin: 10px 0 40px; }
.mono { font-family: var(--mono); font-size: 13.5px; }
pre.raw {
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px;
  overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.6; white-space: pre-wrap;
}
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 4px 14px; font-size: 14.5px; }
.kv dt { color: var(--mut); }
.kv dd { font-weight: 600; }
.note { font-size: 13px; color: var(--mut); border-left: 3px solid var(--gold); padding: 6px 14px; margin-top: 16px; background: rgba(201, 162, 75, .05); }
.err { color: var(--bad); font-weight: 600; }
.ok { color: var(--ok); }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
table.data th { color: var(--mut); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

footer.site { border-top: 1px solid var(--line); padding: 34px 0 44px; color: var(--mut); font-size: 14px; }
footer.site .wrap { display: block; }
footer.site .cols { display: flex; flex-wrap: wrap; gap: 26px; justify-content: space-between; }
footer.site .legal { max-width: 46ch; }
footer.site .copy { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; }
.draft-banner {
  background: #2a2010; color: var(--gold-2); text-align: center; font-size: 13px; padding: 7px 14px;
  border-bottom: 1px solid var(--line);
}

nav.main a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--gold); }
.cta-bar { display: none; }

@media (max-width: 760px) {
  /* Phone header is a grid: logo | Request | menu on the first row, the open menu across the
     second. (As flex it squeezed the open menu in beside the logo, crushing the toggle to 22 px and
     widening the page.) The logo column is the flexible one, so a narrow phone trims the wordmark
     instead of pushing the buttons onto a new line. */
  header.site .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 8px; row-gap: 0; }
  .logo { grid-column: 1; grid-row: 1; justify-self: start; max-width: 100%; font-size: clamp(13px, 4vw, 15px); overflow: hidden; text-overflow: ellipsis; }
  .nav-toggle { display: inline-flex; grid-column: 3; grid-row: 1; margin-left: 0; }
  .cta-bar {
    grid-column: 2; grid-row: 1;
    display: inline-flex; align-items: center; height: 38px; padding: 0 12px; border-radius: 8px;
    background: var(--gold); color: #14100a; font-weight: 700; font-size: 14px;
  }
  .cta-bar:hover { background: var(--gold-2); text-decoration: none; }
  header.site.has-cta-bar nav.main a.cta { display: none; }
  nav.main {
    display: none; flex-direction: column; align-items: stretch; grid-column: 1 / -1; grid-row: 2;
    width: 100%; margin: 0; padding: 6px 0 8px; gap: 2px;
  }
  header.site.nav-open nav.main { display: flex; }
  nav.main a { padding: 11px 2px; font-size: 15.5px; }
  nav.main a.cta { text-align: center; margin-top: 6px; }
  footer.site .cols { flex-direction: column; gap: 18px; }
}

/* ===== Service cards as instrument faces =====
   Each card carries a simple line-art panel graphic matching what the service actually is:
   a fuel gauge for fuel, a stamped document for permits, a stretcher for medevac, and so on. */
.card { position: relative; overflow: hidden; }
.card .svc-art {
  width: 100%; height: 62px; margin: 2px 0 10px;
  display: block; color: var(--gold);
}
.card .svc-art svg { height: 100%; width: auto; display: block; }
.card .svc-art .dim { stroke: #4a5266; }
.card .svc-art .lit { stroke: var(--gold-2); }
.card .svc-art .fill { fill: rgba(201,162,75,.12); }
.card:hover .svc-art { color: var(--gold-2); }
.card:hover .svc-art .needle { transform: rotate(38deg); }
.svc-art .needle { transform-origin: 32px 40px; transition: transform .5s cubic-bezier(.2,.9,.3,1.2); }
.svc-art .blink { animation: svcBlink 2.4s ease-in-out infinite; }
@keyframes svcBlink { 0%,70%,100% { opacity: .25 } 80%,90% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .svc-art .blink { animation: none; opacity: .8; }
  .card:hover .svc-art .needle { transform: none; }
}

/* weather briefing: international SIGMETs near a station */
.sigmets { border: 1px solid var(--warn); background: rgba(229, 165, 58, .08); border-radius: 8px; padding: 10px 14px; margin-top: 12px; font-size: 14px; }
.sigmets details { margin-top: 6px; }
.sigmets summary { cursor: pointer; color: var(--ink); }
.sigmets pre.raw { margin-top: 6px; }