/* WhatFBO public site — Direction A ("Chart").
   Navy #19374F is the app's own primary, carried over so site and app read as
   one product. Teal #249689 is the app's success colour, used here for the
   one thing that matters most: a confirmed fact. */

:root {
  --navy:      #19374F;
  --navy-deep: #12293C;
  --teal:      #249689;
  --ink:       #14181B;
  --ink-2:     #57636C;
  --ink-3:     #8A96A0;
  --ground:    #F1F4F8;
  --surface:   #FFFFFF;
  --rule:      #DCE3EA;
  --rule-soft: #EDF1F5;
  --alert-bg:  #FDF6E3;
  --alert-ink: #8A6A00;

  /* Aliases, not new colours.
     These four names are used in 74 declarations further down this file and
     were never defined, so every one of them was invalid at computed-value
     time and silently dropped: text meant to be muted rendered at full
     strength, focus outlines never drew, and `border: 1px solid var(--line)`
     resolved to no border at all -- which is why the sign-in, register and
     review inputs had no visible box round them. Defining them here fixes all
     of it at once and leaves each rule saying what it meant to say. */
  --line:        #DCE3EA;   /* input and hairline borders — same as --rule */
  --rule-strong: #C3CDD6;   /* a rule meant to be seen: tab underlines, dashed panels */
  --muted:       #57636C;   /* secondary copy — same as --ink-2 */
  --accent:      #249689;   /* focus rings and hover borders — the teal */

  --display: "Barlow Condensed", "Barlow", Arial, sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--teal); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Measured, not guessed: the header is 68px until the nav row wraps at 640px.
   The phone override lives at the END of this file -- see "nothing sticky on a
   phone". Putting it here did nothing: .nav's sticky rule comes later in the
   file at the same specificity, so source order beat the media query. */
:root { --nav-h: 68px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
/* ---------- nav ---------- */

/* Frozen: the page scrolls underneath. The tabstrip is sticky too, so it has
   to sit BELOW this rather than under it -- hence --nav-h, and the higher
   z-index here so the header wins where they meet. */
.nav {
  background: var(--navy);
  position: sticky; top: 0; z-index: 30;
}
.nav-inner { display: flex; align-items: center; gap: 32px; min-height: 68px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.brand-mark img { width: 30px; height: 30px; display: block; }
.brand-word {
  font-family: var(--display); font-size: 27px; font-weight: 700;
  color: #fff; letter-spacing: 0.01em;
}
.brand-word span { color: var(--teal); }
.nav-links { display: flex; gap: 26px; flex-wrap: wrap; }
.nav-links a { color: #C4D0DA; font-weight: 500; }
.nav-links a:hover { color: #fff; }
.nav-spacer { flex: 1 1 auto; }
.nav-signin {
  font-family: var(--body); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #C4D0DA;
}
/* ---------- shared section furniture ---------- */

.section-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.section-head h2 {
  font-family: var(--display); font-size: 32px; font-weight: 700;
  color: var(--navy); margin: 0; letter-spacing: -0.01em;
}
.section-meta {
  font-family: var(--body); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2); margin: 0;
}
.section-lede { color: var(--ink-2); margin: 0 0 20px; max-width: 70ch; }
.eyebrow {
  font-family: var(--body); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--teal); margin: 0 0 16px;
}
.btn {
  display: inline-block; font-family: var(--display); font-size: 19px;
  font-weight: 600; letter-spacing: 0.04em; padding: 13px 30px;
  background: var(--teal); color: #fff; white-space: nowrap;
}
.btn:hover { background: #1E7F74; color: #fff; }
/* ---------- home ---------- */

.hero { background: var(--surface); border-bottom: 1px solid var(--rule); padding: 56px 0 48px; }
.hero h1 {
  font-family: var(--display); font-size: clamp(36px, 5vw, 58px); line-height: 1.04;
  font-weight: 700; color: var(--navy); margin: 0; max-width: 20ch; letter-spacing: -0.01em;
  text-wrap: balance;
}
.hero .lede { color: var(--ink-2); max-width: 60ch; }
.search { display: flex; margin-top: 32px; max-width: 720px; border: 2px solid var(--navy); }
.search input {
  flex: 1 1 auto; min-width: 0; border: 0; padding: 0 18px; height: 58px;
  font-family: var(--body); font-size: 17px; color: var(--ink); background: #fff;
}
.search button {
  border: 0; cursor: pointer; padding: 0 30px; background: var(--navy); color: #fff;
  font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: 0.04em;
}
.search button:hover { background: var(--navy-deep); }
.popular { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.popular-label {
  font-family: var(--body); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2); margin-right: 4px;
}
.chip {
  font-family: var(--mono); font-size: 12px; padding: 5px 11px;
  border: 1px solid var(--rule); background: var(--ground);
}
.proof { background: var(--surface); border-bottom: 1px solid var(--rule); }
.proof-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--rule); border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule); padding: 0;
}
.stat { background: var(--surface); padding: 24px; }
.stat .n {
  display: block; font-family: var(--display); font-size: 40px; font-weight: 700;
  color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums;
}
.stat .k {
  display: block; font-family: var(--body); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2); margin-top: 8px;
}
.services { padding: 48px 0; }
.service-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px; margin-top: 20px;
}
.service-card {
  background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--navy);
  padding: 18px 20px; font-family: var(--display); font-size: 21px; font-weight: 600;
  color: var(--navy);
}
.service-card:hover { border-top-color: var(--teal); color: var(--navy); }
.service-card.quote { background: var(--navy); color: #fff; border-top-color: var(--teal); }
.service-card.quote:hover { background: var(--navy-deep); color: #fff; }
.airports { padding: 8px 0 56px; }
.airport-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px; margin-top: 20px;
}
.airport-card { background: var(--surface); border: 1px solid var(--rule); padding: 18px 20px; display: block; }
.airport-card:hover { border-color: var(--navy); }
.airport-card .code {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-2);
}
.airport-card .name {
  display: block; font-family: var(--display); font-size: 24px; font-weight: 600;
  color: var(--navy); margin-top: 4px;
}
.airport-card .meta { display: block; font-size: 14px; color: var(--ink-2); margin-top: 4px; }
/* ---------- airport page ---------- */

.airport-head { background: var(--surface); border-bottom: 1px solid var(--rule); padding: 24px 0 30px; }
.crumbs {
  font-family: var(--body); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px;
}
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--teal); }
.crumbs span { color: var(--ink-3); margin: 0 4px; }
.airport-h1 {
  font-family: var(--display); font-size: clamp(32px, 4.5vw, 50px); font-weight: 700;
  color: var(--navy); margin: 0; line-height: 1.05; letter-spacing: -0.01em;
}
.airport-h1 .icao {
  font-family: var(--mono); font-size: 0.5em; font-weight: 600; color: var(--teal);
  margin-left: 10px; letter-spacing: 0;
}
.airport-h1 .iata {
  font-family: var(--mono); font-size: 0.34em; color: var(--ink-2); margin-left: 6px; letter-spacing: 0;
}
.factbar { display: flex; flex-wrap: wrap; margin-top: 22px; border: 1px solid var(--rule); }
.fact { flex: 1 1 150px; padding: 11px 16px; border-right: 1px solid var(--rule); }
.fact:last-child { border-right: 0; }
.fact.alert { background: var(--alert-bg); }
.fact .k {
  display: block; font-family: var(--body); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2);
}
.fact.alert .k { color: var(--alert-ink); }
.fact .v {
  display: block; font-family: var(--mono); font-size: 16px; font-weight: 600;
  color: var(--ink); margin-top: 3px;
}
.fact.alert .v { color: var(--alert-ink); }
.notice {
  margin: 14px 0 0; padding: 12px 16px; background: var(--ground);
  border-left: 3px solid var(--navy); font-size: 14px; max-width: 90ch;
}
.unknown-note {
  margin: 10px 0 0; padding: 12px 16px; background: var(--ground);
  border-left: 3px solid var(--ink-3); font-size: 14px; color: var(--ink-2); max-width: 90ch;
}
/* ---------- the matrix ---------- */

.matrix-section { background: var(--surface); padding: 34px 0 40px; }
.matrix-scroll { overflow-x: auto; border: 1px solid var(--rule); }
.matrix { border-collapse: collapse; width: 100%; min-width: 900px; }
.matrix thead th {
  background: var(--navy); color: #fff; font-family: var(--mono); font-size: 10px;
  font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 11px 8px; text-align: center; vertical-align: bottom;
}
.matrix thead th.handler-col { text-align: left; color: #A9BDCB; padding-left: 16px; }
.matrix tbody th.handler-col {
  text-align: left; font-weight: 400; padding: 13px 16px;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  min-width: 250px;
}
.matrix tbody tr.unclaimed { background: #FAFBFC; }
.handler-name {
  display: block; font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--navy);
}
a.handler-name:hover { color: var(--teal); }
.handler-meta { display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.tag {
  font-family: var(--body); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
}
.tag.claimed { color: var(--teal); }
.tag.unclaimed-tag { color: var(--alert-ink); }
.rating { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.rating.muted { color: var(--ink-3); }
.matrix td.state {
  text-align: center; padding: 13px 8px; font-family: var(--mono); font-size: 11px;
  border-right: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule);
}
.matrix td.state:last-child { border-right: 0; }
/* The four knowledge states. Confirmed is the only one that gets weight and
   colour — "typical" and "not listed" must never be mistaken for it. */
.state-confirmed   { color: var(--teal); font-weight: 600; }
.state-presumed    { color: var(--navy); }
.state-unknown     { color: var(--ink-3); }
.state-not_offered { color: var(--ink-2); text-decoration: line-through; }
.legend {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 13px; color: var(--ink-2);
}
.state-key { font-family: var(--mono); font-size: 11px; margin-right: 4px; }
/* ---------- calls to action ---------- */

.cta { background: var(--navy); color: #fff; padding: 30px 0; }
.cta-inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.cta h2 {
  font-family: var(--display); font-size: 30px; font-weight: 600; margin: 0; color: #fff;
}
.cta p { margin: 4px 0 0; color: #A9BDCB; max-width: 70ch; }
/* A link in the band inherits the global navy and vanishes into the
   background. First noticed here because nothing had put one in a .cta before. */
.cta p a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cta .btn { margin-left: auto; }
/* A second, outline button in the band -- the two app stores, where a single
   destination will not do. Navy on navy is invisible, so it takes the same
   treatment the photographic hero gives it. */
.cta .btn-secondary { border-color: #fff; color: #fff; margin-left: 10px; }
.cta .btn-secondary:hover { background: rgba(255,255,255,.12); }
.claim-strip { background: var(--alert-bg); border-bottom: 1px solid var(--rule); padding: 18px 0; }
.claim-strip p { margin: 0; font-size: 15px; }
.claim-strip.big { background: var(--navy); color: #fff; padding: 34px 0; border: 0; }
.claim-strip.big h2 {
  font-family: var(--display); font-size: 28px; font-weight: 600; margin: 0; color: #fff;
}
.claim-strip.big p { color: #A9BDCB; margin: 4px 0 0; max-width: 70ch; }
.claim-strip.big .btn { margin-left: auto; }
/* ---------- footer ---------- */

.foot { background: var(--navy-deep); color: #A9BDCB; padding: 34px 0; margin-top: 0; }
.foot-inner { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
.foot-word { font-family: var(--display); font-size: 24px; font-weight: 700; color: #fff; }
.foot-word span { color: var(--teal); }
.foot-note { margin: 6px 0 0; font-size: 14px; max-width: 55ch; }
.foot a { color: #C4D0DA; text-decoration: underline; }
.foot a:hover { color: #fff; }
.foot-links { display: flex; flex-direction: column; gap: 6px; }
.foot-links a { text-decoration: none; }
@media (max-width: 640px) {
  .cta .btn, .claim-strip.big .btn { margin-left: 0; }
}
/* ---------- listing page ---------- */

.hero.compact { padding: 34px 0 32px; }
.hero.compact h1 { font-size: clamp(30px, 4vw, 44px); }
.fbo-sub { margin: 8px 0 0; color: var(--ink-2); font-size: 17px; }
.icao-inline { font-family: var(--mono); font-size: 14px; color: var(--teal); margin-left: 6px; }
.fbo-desc { margin: 16px 0 0; max-width: 72ch; font-size: 17px; }
.svc-grid { border: 1px solid var(--rule); background: var(--surface); }
.svc-row {
  display: grid; grid-template-columns: 220px 130px 1fr; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--rule-soft); align-items: baseline;
}
.svc-row:last-child { border-bottom: 0; }
.svc-name { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--navy); }
.svc-state { font-family: var(--mono); font-size: 11px; }
.svc-detail { font-size: 14px; color: var(--ink-2); }
@media (max-width: 640px) {
  .svc-row { grid-template-columns: 1fr; gap: 2px; }
}
/* ---------- reviews ---------- */

.reviews { padding: 40px 0; }
.review-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; margin-top: 20px;
}
.review { margin: 0; background: var(--surface); border: 1px solid var(--rule); padding: 20px; }
.review-body { margin: 0; font-size: 16px; line-height: 1.5; }
.review footer { display: flex; gap: 10px; align-items: baseline; margin-top: 12px; }
.review-rating { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--teal); }
.review-author { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
/* ---------- prose pages ---------- */

.prose-section { background: var(--surface); padding: 40px 0 48px; border-top: 1px solid var(--rule); }
.prose { max-width: 74ch; }
.prose h2 {
  font-family: var(--display); font-size: 28px; font-weight: 700; color: var(--navy);
  margin: 34px 0 10px; letter-spacing: -0.01em;
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 17px; }
.prose ol, .prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--ink-3); }
.state-defs { list-style: none; padding: 0; }
.state-defs li { margin-bottom: 8px; }
.score-table { border-collapse: collapse; width: 100%; background: var(--surface); font-size: 15px; }
.score-table th, .score-table td { padding: 9px 14px; border-bottom: 1px solid var(--rule); text-align: left; }
.score-table thead th {
  background: var(--navy); color: #fff; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500;
}
.score-table .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* ---------- service hub cards ---------- */

.service-grid.wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.service-card.tall { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; }
.svc-card-title { font-family: var(--display); font-size: 24px; font-weight: 600; color: var(--navy); }
.svc-card-sum { font-family: var(--body); font-size: 15px; font-weight: 400; color: var(--ink-2); line-height: 1.45; }
.svc-card-meta {
  font-family: var(--body); font-size: 11px; letter-spacing: 0.06em;
  color: var(--teal); margin-top: auto; padding-top: 6px;
}
.editorial-todo {
  border: 1px dashed var(--alert-ink); background: var(--alert-bg);
  padding: 16px 18px; max-width: 74ch;
}
.editorial-label {
  font-family: var(--body); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--alert-ink); margin: 0 0 6px;
}
.editorial-todo p:last-child { margin: 0; font-size: 15px; }
/* ---------- claim page ---------- */

.claiming-now {
  margin: 18px 0 0; padding: 12px 16px; background: var(--ground);
  border-left: 3px solid var(--teal); font-size: 16px; max-width: 70ch;
}
.hero .btn { margin-top: 22px; }
.benefit-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px; margin-top: 20px;
}
.benefit { background: var(--ground); border: 1px solid var(--rule); padding: 20px 22px 22px; }
.benefit h3 {
  font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--navy);
  margin: 0 0 8px;
  /* Flex so a two-line title indents under itself rather than wrapping back
     under the glyph. align-items:start keeps the icon on the first line. */
  display: flex; align-items: flex-start; gap: 10px;
}
.benefit-icon {
  flex: none; width: 22px; height: 22px; color: var(--teal);
  /* Optically centred on the cap height of a 22px display face, not on the
     line box -- centred on the line it sits a couple of pixels low. */
  margin-top: 3px;
}
.benefit p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
/* A card carrying two paragraphs had them butted together -- the zero margin
   above is right for the single-paragraph case and wrong the moment there are
   two. */
.benefit p + p { margin-top: 10px; }
.benefit a { text-decoration: underline; }
.prose-section.alt { background: var(--ground); }
.steps { counter-reset: step; list-style: none; padding: 0; max-width: 74ch; }
.steps li {
  counter-increment: step; position: relative;
  padding: 0 0 14px 46px; margin-bottom: 6px;
}
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 1px;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
}
.btn-secondary {
  display: inline-block; font-family: var(--display); font-size: 19px;
  font-weight: 600; letter-spacing: 0.04em; padding: 11px 26px;
  border: 2px solid var(--navy); color: var(--navy); background: transparent;
  margin-left: 10px;
}
.btn-secondary:hover { background: var(--navy); color: #fff; }
.prose h3 {
  font-family: var(--display); font-size: 21px; font-weight: 600;
  color: var(--navy); margin: 22px 0 4px;
}
@media (max-width: 520px) { .btn-secondary { margin-left: 0; margin-top: 10px; }
}
a.tag.unclaimed-tag { text-decoration: underline; text-underline-offset: 2px; }
a.tag.unclaimed-tag:hover { color: var(--navy); }
.review-reply {
  margin-top: 14px; padding: 12px 14px; background: var(--ground);
  border-left: 3px solid var(--navy);
}
.review-reply-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-2); display: block; margin-bottom: 4px;
}
.review-reply p { margin: 0; font-size: 14px; }
/* ---------- pricing / listing tiers ---------- */

.tier-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px; margin-top: 20px;
}
.tier-grid.three { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.tier {
  background: var(--surface); border: 1px solid var(--rule);
  border-top: 3px solid var(--rule-strong); padding: 22px 24px 24px;
  display: flex; flex-direction: column;
}
.tier.featured { border-top-color: var(--teal); }
.tier-name {
  font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--navy);
}
.tier-flag {
  font-family: var(--body); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--alert-ink); background: var(--alert-bg); padding: 2px 7px; margin-left: 6px;
  vertical-align: middle;
}
.tier-price {
  font-family: var(--display); font-size: 38px; font-weight: 700; color: var(--navy);
  line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums;
}
.tier-per { font-size: 16px; font-weight: 500; color: var(--ink-2); }
.tier-note { font-size: 14px; color: var(--ink-2); margin: 4px 0 14px; }
.tier ul { margin: 0 0 16px; padding-left: 1.1rem; }
.tier li { font-size: 15px; margin-bottom: 6px; }
.tier li::marker { color: var(--teal); }
.tier > p:last-child { margin: auto 0 0; }
.notice-strong {
  border: 1px solid var(--alert-ink); background: var(--alert-bg);
  padding: 16px 18px; max-width: 74ch; margin-bottom: 8px;
}
.notice-strong p { margin: 0; font-size: 16px; }
/* Same fault .benefit had: zero margin is right for one paragraph and wrong the
   moment there are two, and this box now carries three. */
.notice-strong p + p { margin-top: 11px; }
/* Following a card grid or a step list it needs its own breathing room --
   margin-bottom alone left it sitting on the row above. */
.benefit-grid + .notice-strong, .steps + .notice-strong { margin-top: 26px; }
.hero .btn-secondary { margin-top: 22px; }
/* ---------- hero with the ramp photograph ----------
   The image is composed with its quiet third on the left and the aircraft
   right of centre, so the overlay is a horizontal gradient rather than a flat
   wash: heavy where the text sits, light enough on the right that the jet,
   the marshaller and the wet apron still read. A flat overlay dark enough for
   the headline would have flattened the picture into a blue rectangle. */

.hero-image {
  position: relative;
  border-bottom: 0;
  padding: 76px 0 64px;
  background-color: var(--navy-deep);
  background-image:
    linear-gradient(90deg,
      rgba(18, 41, 60, 0.94) 0%,
      rgba(18, 41, 60, 0.88) 34%,
      rgba(18, 41, 60, 0.55) 62%,
      rgba(18, 41, 60, 0.30) 100%),
    url("/assets/hero-ramp.jpg");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
.hero-image h1 { color: #FFFFFF; }
.hero-image .eyebrow { color: #4FC7B8; }
.hero-image .lede { color: #C4D0DA; }
.hero-image .popular-label { color: #9FB2C1; }
.hero-image .chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: #E6EDF2;
}
.hero-image .chip:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.hero-image .search { border-color: #FFFFFF; }
.hero-image .search button { background: var(--teal); }
.hero-image .search button:hover { background: #1E7F74; }
/* Narrow screens crop the aircraft out of frame entirely, so the picture
   stops being a subject and becomes atmosphere -- lean the overlay heavier so
   the headline never has to fight whatever is left in shot. */
@media (max-width: 780px) {
  .hero-image {
    padding: 52px 0 44px;
    background-image:
      linear-gradient(180deg,
        rgba(18, 41, 60, 0.92) 0%,
        rgba(18, 41, 60, 0.86) 60%,
        rgba(18, 41, 60, 0.80) 100%),
      url("/assets/hero-ramp-1200.jpg");
    background-position: 68% center;
  }
}
/* ---------- ranked service list (home) ----------
   An ordered list, so the numbering is in the markup rather than painted on
   with CSS -- a screen reader announces it as a list of six in order, which
   is exactly what it is. */

.service-grid.ranked {
  list-style: none; margin: 20px 0 0; padding: 0;
  /* Six items, so the column count is explicit rather than auto-fit -- an
     auto-fit grid gave five across and one orphan on a second row. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .service-grid.ranked { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .service-grid.ranked { grid-template-columns: 1fr; }
}
.service-grid.ranked > li { display: flex; }
.service-grid.ranked .service-card {
  display: flex; align-items: baseline; gap: 12px; width: 100%;
  padding: 18px 20px;
}
.service-grid.ranked .rank {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  color: var(--teal); font-variant-numeric: tabular-nums;
  flex-shrink: 0; min-width: 1.1em;
}
.service-grid.ranked .svc-label {
  font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--navy);
}
.service-grid.ranked .service-card:hover .svc-label { color: var(--teal); }
.service-grid.ranked .svc-icon {
  width: 24px; height: 24px; flex-shrink: 0;
  color: var(--navy); align-self: center;
}
.service-grid.ranked .service-card:hover .svc-icon { color: var(--teal); }
.service-grid.ranked .rank { align-self: center; color: var(--ink-3); }
.service-grid.ranked .service-card { align-items: center; gap: 14px; }
.airports-more { margin: 18px 0 0; font-size: 15px; color: var(--ink-2); }
.airports-more a { text-decoration: underline; text-underline-offset: 2px; }
.meta-flag {
  display: inline-block; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--alert-ink);
  background: var(--alert-bg); padding: 1px 6px; margin-left: 4px;
}
.airports.nearby { padding-bottom: 8px; }
.foot-credit { margin: 10px 0 0; font-size: 12px; color: #7C8FA0; }
.foot-credit a { color: #7C8FA0; }
/* ---------- best rated FBOs ---------- */

.rated-list {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
@media (max-width: 780px) { .rated-list { grid-template-columns: 1fr; }
}
.rated-card {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: var(--surface); border: 1px solid var(--rule); padding: 14px 18px;
}
.rated-card:hover { border-color: var(--navy); }
.rated-rank {
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink-3);
  font-variant-numeric: tabular-nums; min-width: 1.6em; flex-shrink: 0;
}
.rated-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.rated-name {
  font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rated-card:hover .rated-name { color: var(--teal); }
.rated-where {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px;
}
.rated-score { text-align: right; flex-shrink: 0; }
.rated-stars {
  display: block; font-family: var(--display); font-size: 22px; font-weight: 700;
  color: var(--teal); line-height: 1; font-variant-numeric: tabular-nums;
}
.rated-count {
  display: block; font-family: var(--mono); font-size: 10px; color: var(--ink-3); margin-top: 3px;
}
/* ---------- section bands ----------
   The middle of the page was three sections running together on one grey with
   nothing between them, so they read as one long list rather than three
   answers to three different questions. Alternating bands give each its own
   ground, and the rated list gets the deepest tint because a ranking is the
   most editorial thing on the page and white cards lift off it. */

:root { --ground-deep: #E4EAF0; }
.services        { background: var(--ground); padding: 52px 0 56px; }
.airports.nearby { background: var(--surface); padding: 52px 0 56px; border-top: 1px solid var(--rule); }
.airports.rated  { background: var(--ground-deep); padding: 52px 0 60px; border-top: 1px solid var(--rule); }
.airports.rated .rated-card { border-color: #D3DCE5; }
.airports.rated .airports-more { color: var(--ink-2); }
/* The band already separates them, so the cards do not need a border on top
   of a border. */
.airports.nearby .airport-card { border-color: var(--rule); }
/* ---------- handler list (airport page) ----------
   Replaced a seven-column service matrix. With 96% of FBOs holding no service
   rows, that grid rendered as a wall of "Typical" and "Not listed" -- it was
   noise, and it made an airport with five real handlers look empty. A list
   carries what we actually know per handler, and says plainly when we know
   nothing. Mirrors the app's airport screen. */

.airport-sub { margin: 10px 0 0; font-size: 17px; color: var(--ink-2); }
.btn-block { display: inline-block; margin-top: 22px; }
.btn-note { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
.handlers-section { background: var(--ground); padding: 40px 0 48px; }
.handler-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.handler-link {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--surface); border: 1px solid var(--rule); padding: 16px 18px;
}
a.handler-link:hover { border-color: var(--navy); }
.handler-logo {
  width: 48px; height: 48px; flex-shrink: 0;
  border: 1px solid var(--rule); background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.handler-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.handler-initials {
  font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--ink-3);
}
.handler-body { flex: 1 1 auto; min-width: 0; }
.handler-title {
  display: block; font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--navy);
}
a.handler-link:hover .handler-title { color: var(--teal); }
.handler-facts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 3px; }
.handler-rating {
  font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.handler-reviews { font-family: var(--body); font-size: 11px; color: var(--ink-2); }
.handler-reviews.muted { color: var(--ink-3); }
.handler-services { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.svc-chip {
  font-family: var(--body); font-size: 10px; letter-spacing: 0.04em;
  color: var(--navy); background: var(--ground); border: 1px solid var(--rule);
  padding: 3px 8px;
}
.svc-none { font-size: 13px; color: var(--ink-3); }
.svc-none a { color: var(--ink-2); text-decoration: underline; }
.handler-chevron {
  font-size: 26px; color: var(--ink-3); line-height: 1; align-self: center; flex-shrink: 0;
}
a.handler-link:hover .handler-chevron { color: var(--teal); }
.handler-note { margin: 16px 0 0; font-size: 13px; color: var(--ink-2); max-width: 80ch; }
/* ---------- section tabs ----------
   Anchor links, not panels. The app can hide tabs behind a control because
   nothing indexes it; here every section stays in the DOM and the strip just
   jumps to it. Sticky so it stays reachable down a long handler list. */

.tabstrip {
  position: sticky; top: var(--nav-h, 0px); z-index: 20;
  background: var(--surface); border-bottom: 1px solid var(--rule);
}
.tabstrip-inner { display: flex; gap: 4px; overflow-x: auto; }
.tab {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 14px 16px; font-family: var(--display); font-size: 17px; font-weight: 600;
  color: var(--ink-2); border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--navy); border-bottom-color: var(--rule-strong); }
.tab.is-current { color: var(--navy); border-bottom-color: var(--teal); }
.tab-n {
  font-family: var(--body); font-size: 11px; font-weight: 500;
  background: var(--ground); color: var(--ink-2); padding: 2px 7px;
}
/* Sticky strip would otherwise cover the heading it just jumped to. */
#handlers, #details, #location { scroll-margin-top: 56px; }
/* ---------- details + location ---------- */

.details-section { background: var(--surface); padding: 40px 0 44px; border-top: 1px solid var(--rule); }
.detail-table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 30rem; }
.detail-table th, .detail-table td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rule); vertical-align: top;
}
.detail-table tr:last-child th, .detail-table tr:last-child td { border-bottom: 0; }
.detail-table th {
  font-family: var(--body); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 500; width: 190px; background: var(--ground);
}
.detail-note { display: block; font-size: 13px; color: var(--ink-2); margin-top: 5px; max-width: 70ch; }
.muted { color: var(--ink-3); }
.location-section { background: var(--ground); padding: 40px 0 48px; }
.airport-map { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.map-placeholder {
  border: 1px dashed var(--rule-strong); background: var(--surface);
  padding: 28px; text-align: center;
}
.map-coords {
  font-family: var(--mono); font-size: 18px; color: var(--navy); margin: 0 0 10px;
  font-variant-numeric: tabular-nums;
}
/* ---------- map at the top, as in the app ---------- */

#fbos, #details, #security, #info, #charts { scroll-margin-top: 56px; }
/* ---------- app-only sections ----------
   Security, Info and Charts exist as tabs so the page matches the app, but
   their content is licensed third-party data (ASTORISK, SkyLink) or needs an
   account. Saying so plainly, and offering the app, is more useful than a tab
   that quietly does nothing -- and it is the awareness-to-install path the
   whole site exists to serve. */

.apponly-section { background: var(--surface); padding: 36px 0 40px; border-top: 1px solid var(--rule); }
.apponly-section.alt { background: var(--ground); }
.apponly {
  border: 1px solid var(--rule); border-left: 3px solid var(--teal);
  background: var(--ground); padding: 22px 24px; max-width: 76ch;
}
.apponly-section.alt .apponly { background: var(--surface); }
.apponly p { margin: 0 0 10px; }
.apponly p:last-child { margin-bottom: 0; }
.apponly-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.apponly-cta .btn, .apponly-cta .btn-secondary { font-size: 16px; padding: 10px 22px; margin: 0; }
.rwy { display: block; margin-bottom: 5px; font-size: 14px; }
.rwy:last-child { margin-bottom: 0; }
.rwy b { font-family: var(--mono); font-size: 13px; color: var(--navy); margin-right: 7px; }
.pcn {
  font-family: var(--mono); font-size: 11px; color: var(--ink-2);
  background: var(--ground); border: 1px solid var(--rule); padding: 1px 6px; margin-left: 6px;
}
.guidelines { margin-top: 26px; }
.guidelines h3 { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--navy); margin: 0 0 8px; }
.guideline-list { list-style: none; padding: 0; margin: 0; }
.guideline-list li { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.guideline-list li:last-child { border-bottom: 0; }
.guideline-list a { text-decoration: underline; text-underline-offset: 2px; }
/* ---------- security / info / charts ---------- */

.intel-section { background: var(--surface); padding: 40px 0 44px; border-top: 1px solid var(--rule); }
.intel-section.alt { background: var(--ground); }
.rating-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.rating {
  border: 1px solid var(--rule); border-left: 4px solid var(--ink-3);
  background: var(--ground); padding: 12px 18px; min-width: 150px;
}
.intel-section.alt .rating { background: var(--surface); }
.rating-k {
  display: block; font-family: var(--body); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2);
}
.rating-v {
  display: block; font-family: var(--display); font-size: 22px; font-weight: 700;
  color: var(--navy); margin-top: 3px;
}
.rating-s { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-2); margin-top: 2px; }
/* Severity carried by colour as well as the word, so it reads at a glance. */
.rating-low      { border-left-color: #2F6B3F; }
.rating-moderate { border-left-color: #A56B00; }
.rating-medium   { border-left-color: #A56B00; }
.rating-high     { border-left-color: #B4451F; }
.rating-extreme, .rating-critical { border-left-color: #8E1F1F; }
.intel-block { margin-bottom: 24px; max-width: 80ch; }
.intel-block:last-child { margin-bottom: 0; }
.intel-block h3 {
  font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--navy); margin: 0 0 8px;
}
.intel-block p { margin: 0 0 8px; }
.risk-list { list-style: none; padding: 0; margin: 0; }
.risk-list li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.risk-list li:last-child { border-bottom: 0; }
.risk-city { font-weight: 600; color: var(--navy); }
.risk-icao { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.risk-level {
  margin-left: auto; font-family: var(--body); font-size: 11px; text-transform: uppercase;
  border-left: 3px solid var(--ink-3); padding-left: 8px;
}
.metar {
  font-family: var(--mono); font-size: 14px; line-height: 1.6; color: var(--ink);
  background: var(--ground); border: 1px solid var(--rule); padding: 12px 14px; overflow-x: auto;
}
.intel-section.alt .metar { background: var(--surface); }
.chart-warning {
  border: 1px solid var(--alert-ink); background: var(--alert-bg);
  padding: 14px 16px; max-width: 80ch; margin: 0 0 22px; font-size: 15px;
}
.intel-credit { font-size: 12px; color: var(--ink-3); margin-top: 18px; }
.intel-credit a { color: var(--ink-2); }
.metar-label {
  font-family: var(--body); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2); margin: 12px 0 4px;
}
.wx-rules {
  display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; padding: 4px 10px; color: #fff; background: var(--ink-3);
}
.wx-vfr  { background: #2F6B3F; }
.wx-mvfr { background: #1F5C8C; }
.wx-ifr  { background: #B4451F; }
.wx-lifr { background: #8E1F1F; }
/* Map boxed to the listing width rather than full bleed -- full width read as
   imposing and did not line up with anything else on the page. */
.airport-map-wrap { margin-top: 22px; border: 1px solid var(--rule); }
.airport-map-wrap .airport-map { border: 0; }
/* The panel dims while a tab loads. Deliberately no height change and no
   scroll: the point of swapping in place is that nothing moves. */
#tabpanel { transition: opacity .12s ease; }
#tabpanel.is-loading { opacity: .45; }
@media (prefers-reduced-motion: reduce) { #tabpanel { transition: none; }
}

/* ============================================================
   Typography and spacing pass
   ============================================================
   Three problems this fixes.

   1. Mono had become the default label font -- 47 declarations against 3 of
      the body face -- so every caption, breadcrumb and table header read as a
      terminal readout. Mono is now reserved for data a reader compares
      character by character: codes, PCN, METAR, coordinates, scores. Labels
      moved to the body face, which is what the letterspaced-uppercase
      treatment below is for.

   2. The page opened tight. Breadcrumb, H1 and map were stacked with almost
      no air above them.

   3. Swapping a tab revealed a panel with no boundary, so a new section of
      information just appeared where the last one had been. */

/* One label treatment, applied consistently. */
.crumbs, .section-meta, .eyebrow, .fact .k, .detail-table th, .tag,
.popular-label, .stat .k, .nav-signin, .metar-label, .rating-k,
.svc-card-meta, .tier-flag, .foot-credit {
  font-weight: 500;
  letter-spacing: 0.09em;
}

/* --- opening of an airport page --- */

.airport-head { padding: 34px 0 34px; }
.crumbs { margin-bottom: 20px; }
.airport-h1 { line-height: 1.08; }
.airport-sub { margin-top: 14px; font-size: 18px; }
.airport-map-wrap { margin-top: 30px; }

/* --- the tab panel --- */

.tabstrip { margin-top: 4px; }
.tab { padding: 16px 18px; font-size: 18px; }

/* Every panel section opens with the same air, so a swapped tab always
   arrives in the same place rather than starting wherever its own padding
   happened to sit. */
#tabpanel > section { padding-top: 46px; padding-bottom: 52px; }
#tabpanel > section > .wrap > .section-head { margin-bottom: 6px; }
#tabpanel > section > .wrap > .section-head + .section-lede { margin-bottom: 26px; }

.section-head h2 { font-size: 34px; }

/* --- separation between blocks inside a panel --- */

.intel-block { margin-bottom: 34px; }
.intel-block h3, .guidelines h3 {
  font-size: 21px; padding-bottom: 8px; margin-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.guidelines {
  margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--rule);
}
.detail-table { margin-bottom: 0; }
.detail-table th { width: 210px; }
.detail-table th, .detail-table td { padding: 13px 16px; }

.rating-row { margin-bottom: 30px; gap: 14px; }
.handler-list { gap: 12px; margin-top: 22px; }
.handler-link { padding: 18px 20px; }

/* The note under a table is a footnote, not body copy sitting on its own. */
.handler-note, .detail-note {
  padding-top: 14px; margin-top: 18px; border-top: 1px solid var(--rule-soft);
}
.detail-table .detail-note { padding-top: 0; margin-top: 6px; border-top: 0; }

/* Third-party prose arrives as one unbroken string, so it needs both a
   measure it can be read at and the breaks intel_prose() puts in. 80ch was
   too wide -- the eye loses the line return on a block this long. */
.intel-block { max-width: 68ch; }
.intel-block p { line-height: 1.62; margin: 0 0 14px; }
.intel-block p:last-child { margin-bottom: 0; }

.prose-list { list-style: none; padding: 0; margin: 0; }
.prose-list li {
  position: relative; padding: 7px 0 7px 20px; line-height: 1.55;
  border-bottom: 1px solid var(--rule-soft);
}
.prose-list li:last-child { border-bottom: 0; }
.prose-list li::before {
  content: ""; position: absolute; left: 2px; top: 15px;
  width: 6px; height: 6px; background: var(--teal);
}

/* The ratings row is data, so it can stay wider than the reading measure. */
.rating-row { max-width: none; }

/* ============================================================
   Two-column panel, bolder tabs, corrected rating steps
   ============================================================ */

/* --- tabs: bigger targets, centred across the page --- */

.tabstrip-inner { justify-content: center; gap: 0; }
.tab {
  padding: 18px 26px; font-size: 19px; font-weight: 600;
  border-bottom-width: 4px;
}
.tab-n {
  font-size: 11px; padding: 2px 8px; background: var(--ground);
  color: var(--ink-2); letter-spacing: 0.06em;
}
.tab.is-current .tab-n { background: var(--teal); color: #fff; }
@media (max-width: 720px) {
  .tabstrip-inner { justify-content: flex-start; }
  .tab { padding: 15px 16px; font-size: 17px; }
}

/* --- the panel: content left, actions right --- */

/* Keyed on the class alone, NOT on '#tabpanel > .panel-grid'. The airport page
   puts #tabpanel outside the grid so a tab swap replaces the rail too; the
   listing page puts it inside .panel-main so the rail survives the swap. Both
   are reasonable, and tying the two-column layout to one of them silently gave
   the other a rail stacked underneath the content instead of beside it. */
.panel-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px;
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
}
/* The sections inside the panel no longer paint their own full-width bands --
   the grid owns the layout now, so they would fight it. */
.panel-grid section { background: none; border-top: 0; padding: 40px 0 48px; }
.panel-grid section > .wrap { max-width: none; margin: 0; padding: 0; }
.panel-main { min-width: 0; }

.panel-side { padding-top: 40px; }
.panel-side > * + * { margin-top: 16px; }
.side-card { background: var(--surface); border: 1px solid var(--rule); padding: 20px 22px; }
.side-card-primary { border-top: 3px solid var(--teal); }
.side-card h3 {
  font-family: var(--display); font-size: 20px; font-weight: 600;
  color: var(--navy); margin: 0 0 8px;
}
.side-card p { margin: 0 0 12px; font-size: 15px; color: var(--ink-2); }
.side-card p:last-child { margin-bottom: 0; }
.side-card .btn { width: 100%; text-align: center; margin-top: 4px; }
.side-card a { text-decoration: underline; text-underline-offset: 2px; }
.side-more { font-size: 14px; }

.glance { margin: 0 0 12px; display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; }
.glance dt { font-size: 14px; color: var(--ink-2); }
.glance dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--navy); text-align: right; }

/* Actions follow the answer on a narrow screen, never precede it. */
@media (max-width: 960px) {
  .panel-grid { grid-template-columns: 1fr; gap: 0; }
  .panel-side { padding-top: 0; padding-bottom: 44px; }
  .panel-side > * + * { margin-top: 14px; }
}

/* --- security rating: a 1-5 ordinal, shown as five steps --- */

.rating {
  flex: 1 1 190px; border-left-width: 4px; padding: 14px 18px 16px;
}
.rating-v { font-size: 20px; letter-spacing: 0.01em; }
.rating-steps { display: flex; gap: 3px; margin-top: 9px; }
.rating-steps .step {
  flex: 1 1 0; height: 5px; background: var(--rule);
}
/* Status colour is reserved and always accompanied by the level word above it,
   so the meaning never rests on colour alone. */
.rating-low .step.is-on      { background: #2F6B3F; }
.rating-moderate .step.is-on { background: #A56B00; }
.rating-elevated .step.is-on { background: #C2621A; }
.rating-high .step.is-on     { background: #B4451F; }
.rating-critical .step.is-on,
.rating-extreme .step.is-on  { background: #8E1F1F; }
.rating-elevated { border-left-color: #C2621A; }
.rating-s { margin-top: 6px; font-size: 11px; letter-spacing: 0.08em; }

/* The rail starts below the section title rather than level with it, so the
   heading clearly owns the left column and the cards read as secondary. The
   offset is the section's own top padding plus roughly a heading line -- close
   enough to sit under the title on every tab without pinning it to one
   heading's exact height, which would break the moment a long airport name
   wrapped. */
@media (min-width: 961px) {
  .panel-side { padding-top: 96px; }
}

/* ---------- weather panel ----------
   The raw METAR group is precise and unreadable to most people at a glance.
   Aviowiki already returns the decoded fields and a plain-English summary, so
   the numbers lead and the raw group sits underneath for anyone who reads it
   faster than prose. Units are the station's own, never converted. */

.wx { max-width: none; }
.wx-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--navy); color: #fff; padding: 14px 18px;
}
.wx-when {
  font-family: var(--body); font-size: 14px; letter-spacing: 0.06em;
  text-transform: uppercase; color: #C4D0DA;
}
.wx-head .wx-rules { margin-left: auto; }

.wx-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-top: 0;
}
.wx-card { display: flex; align-items: center; gap: 13px; background: var(--surface); padding: 16px 18px; }
.wx-icon { width: 26px; height: 26px; flex-shrink: 0; color: var(--teal); }
.wx-card-body { display: flex; flex-direction: column; min-width: 0; }
.wx-card-k {
  font-family: var(--body); font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-2);
}
.wx-card-v {
  font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--navy);
  margin-top: 2px; white-space: nowrap;
}

.wx-clouds {
  margin: 0; padding: 12px 18px; background: var(--surface);
  border: 1px solid var(--rule); border-top: 0; font-size: 15px; color: var(--navy);
}
.wx-clouds .wx-card-k { margin-right: 10px; }

.wx-raw, .wx-taf { margin-top: 26px; }
.wx-summary {
  margin: 8px 0 0; font-size: 15px; color: var(--ink-2); font-style: italic;
  max-width: 72ch; line-height: 1.55;
}

.taf-list { list-style: none; padding: 0; margin: 0; }
.taf-list li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.taf-list li:last-child { border-bottom: 0; }
.taf-when { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.taf-type {
  font-family: var(--body); font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  background: var(--ground); border: 1px solid var(--rule); padding: 2px 7px; color: var(--navy);
}
.taf-what { display: block; margin-top: 5px; font-size: 15px; color: var(--ink); max-width: 72ch; }

.wx-rules { font-family: var(--body); font-weight: 600; letter-spacing: 0.08em; }

/* ---------- Info tab: containment ----------
   The panel was correct but flat -- rows of text with nothing holding them.
   Each kind of information now sits in something. Square corners throughout,
   because that is this site's language; the app is rounded and soft and
   copying that would make the page look borrowed rather than related. */

.wx-raw, .wx-taf, .wx-runways { margin-top: 30px; }

.wx-raw {
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 3px solid var(--navy); padding: 16px 18px;
}
.wx-raw .metar-label { margin-top: 0; }
.wx-raw .metar { background: var(--ground); border-color: var(--rule); }
.intel-section.alt .wx-raw .metar { background: var(--ground); }

/* TAF: one card per period, with the period and its validity as a filled
   pill -- the app's blue block, in our navy. */
.taf-list { display: grid; gap: 10px; }
.taf-card {
  display: block; padding: 14px 16px; border: 1px solid var(--rule);
  background: var(--surface); border-bottom: 1px solid var(--rule);
}
.taf-pill {
  display: inline-flex; align-items: baseline; gap: 8px;
  background: var(--navy); color: #fff; padding: 5px 11px;
}
.taf-pill .taf-type {
  background: none; border: 0; padding: 0; color: #7FD4C6;
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
}
.taf-time { font-family: var(--mono); font-size: 12px; color: #fff; }
.taf-card .wx-rules { margin-left: 8px; vertical-align: 2px; }
.taf-what { display: block; margin-top: 10px; font-size: 15px; color: var(--ink); max-width: 72ch; }

/* Daylight, as two solid tiles. */
.sun-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 30px; }
.sun-card {
  background: var(--navy-deep); color: #fff; padding: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
}
.sun-icon { width: 30px; height: 30px; color: #E8C46A; }
.sun-k {
  font-family: var(--body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: #A9BDCB;
}
.sun-v {
  font-family: var(--display); font-size: 26px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; line-height: 1;
}

/* Operational notes: one card each, category and source labelled. */
.note-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.note-card { background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--alert-ink); padding: 14px 16px; }
.note-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 7px; }
.note-cat {
  font-family: var(--body); font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; background: var(--alert-bg); color: var(--alert-ink); padding: 2px 8px;
}
.note-src { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.note-body { display: block; font-size: 15px; line-height: 1.5; color: var(--ink); max-width: 76ch; }

.wx-runways .detail-table thead th {
  background: var(--navy); color: #fff; width: auto;
  font-size: 10px; letter-spacing: 0.1em;
}
.wx-runways .scroll { border: 1px solid var(--rule); }

/* The assistant panel sits in the rail rather than the Info tab body, so it is
   reachable from every tab rather than only the one someone happened to open.
   Stacked buttons: two side by side do not fit a 320px column without
   shrinking the labels to nothing. */
.side-card-app .btn-secondary {
  display: block; width: 100%; text-align: center; margin: 8px 0 0; font-size: 16px; padding: 11px 18px;
}
.side-card-app .btn-secondary:first-of-type { margin-top: 4px; }

/* Whose reading this actually is, when fallback=NEAREST supplies a neighbour's
   station. Quiet, but never optional -- it changes how the number is read. */
.wx-station {
  margin: 8px 0 0; font-size: 13px; color: var(--muted); font-style: italic;
}
.wx-taf .wx-station { margin: 0 0 12px; }
.wx-none .muted { margin: 0; }

/* The zone label rides with the number rather than sitting in a caption --
   a sun time read without it is silently four hours wrong at KMCO. */
.sun-z {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  opacity: .62; margin-left: 4px;
}

/* "No data" reads as a stated absence, not as a value. Same weight as the app's
   treatment: the card keeps its place so the panel does not reflow away. */
.wx-card-v.is-empty,
.metar.is-empty {
  color: var(--muted); font-weight: 500;
}
.metar.is-empty { font-style: normal; }

/* ---- Info sub-tabs: Weather / Notams / Fuel Fee / Runways ---------------- */

/* Lighter than the main tabstrip on purpose. These sit inside a tab, and two
   strips of equal weight would read as two competing navigations. */
.subtabs {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px;
  border-bottom: 1px solid var(--line);
}
.subtab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--muted);
  padding: 9px 14px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.subtab:hover { color: var(--ink); }
.subtab.is-current { color: var(--ink); border-bottom-color: var(--accent); }
.subtab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* No-JS: panels stack, each labelled by the strip above. */
.subpanel + .subpanel { margin-top: 28px; }

.empty-block { text-align: left; }
.empty-block .btn { margin-top: 12px; display: inline-block; }

/* ---- Notams ---- */

/* ---- Fuel Fee ---- */
.fuel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.fuel-card { background: #fff; border: 1px solid var(--line); }
.fuel-fbo {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.fuel-name { font-weight: 700; font-size: 16px; }
.fuel-table { margin: 0; }
.fuel-table .num { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }

/* ---- Runways ---- */
/* Cards rather than a table: a runway is a thing with a name and four facts,
   and at 3-4 per airport a table is more scaffolding than content. */
.rwy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.rwy-card { background: #fff; border: 1px solid var(--line); }
.rwy-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.rwy-id { font-size: 26px; font-weight: 800; letter-spacing: .02em; line-height: 1; }
.rwy-state {
  margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 9px; color: #fff;
}
.rwy-state.is-open { background: var(--good, #1f7a4d); }
.rwy-state.is-closed { background: var(--bad, #a32020); }
.rwy-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.rwy-fact { padding: 12px 16px; border-right: 1px solid var(--line); }
.rwy-fact:last-child { border-right: 0; }
.rwy-k {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.rwy-v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rwy-v.is-empty { color: var(--muted); font-weight: 500; }

@media (max-width: 640px) {
  .rwy-fact { border-right: 0; border-top: 1px solid var(--line); }
  .subtab { padding: 9px 10px; font-size: 14px; }
}

/* Each panel names itself for the no-JS, stacked reading. Once the strip is
   revealed it is naming the panel twice, so it steps back out of the way. */
.subpanel-h { margin: 0 0 14px; font-size: 20px; }
.subtabs:not([hidden]) ~ .subpanel .subpanel-h { display: none; }

/* ---- Notam card: the app's anatomy ------------------------------------- */
/* Warning triangle + category in alert red, the NOTAM reference opposite, the
   text, then a ruled Validity footer with From and To. Matching the app here
   matters more than house style: a pilot reads the same card on both. */
.note-card { background: #fff; border: 1px solid var(--line); padding: 0; display: block; }
.note-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px;
}
.note-cat {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; padding: 0; border-radius: 0;
  color: var(--bad, #d1372f); font-weight: 700; font-size: 15px;
  letter-spacing: .04em; text-transform: uppercase;
}
.note-icon { width: 19px; height: 19px; flex: none; }
.note-src {
  margin-left: auto; color: var(--muted); font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.note-body { display: block; padding: 0 16px 14px; line-height: 1.55; }
.note-validity { border-top: 1px solid var(--line); padding: 12px 16px 14px; }
.note-valid-h {
  display: block; text-align: center; color: var(--muted);
  font-size: 13px; font-weight: 600; margin-bottom: 8px;
}
.note-valid-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.note-valid-col { text-align: center; }
.note-valid-k { display: block; color: var(--muted); font-size: 13px; }
.note-valid-v {
  display: block; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums;
}

/* `display: flex` on .subtabs outranks the UA stylesheet's [hidden] rule -- an
   author class selector always beats it -- so the strip stayed on screen with
   JavaScript off, over four panels that were meant to be stacked under their
   own headings. Any element given a display value needs its own [hidden]. */
.subtabs[hidden] { display: none; }

/* ---- Charts: chips over card rows, mirroring the app -------------------- */
/* A flat <ul> of links read as a directory listing rather than a set of
   documents. Each chart is now a row you can hit, with a document glyph and
   an arrow saying it opens away from here. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.chips[hidden] { display: none; }
.chip {
  appearance: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
}
.chip:hover { border-color: var(--ink); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip-n {
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 1px 6px; background: rgba(0, 0, 0, .07);
}
.chip[aria-pressed="true"] .chip-n { background: rgba(255, 255, 255, .18); }

.chart-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.chart-row a {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; background: var(--surface);
  border: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.chart-row a:hover { border-color: var(--accent); background: #fff; }
.chart-row a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.chart-icon { width: 21px; height: 21px; flex: none; color: var(--accent); }
.chart-name { flex: 1 1 auto; min-width: 0; font-weight: 500; line-height: 1.4; }
.ext-icon { width: 15px; height: 15px; flex: none; color: var(--muted); }
.chart-row a:hover .ext-icon { color: var(--ink); }

/* ---- FBO listing header ------------------------------------------------ */
/* Logo, name, rating and the Contact & Location actions, as the app leads
   with. The airport page opens on a map; a listing opens on who it is. */
.fbo-id { display: flex; align-items: flex-start; gap: 18px; }
.fbo-logo {
  flex: none; width: 72px; height: 72px; background: var(--surface);
  border: 1px solid var(--line); display: flex; align-items: center;
  justify-content: center; overflow: hidden;
}
.fbo-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.fbo-logo .handler-initials { font-size: 24px; font-weight: 800; color: var(--muted); }
.fbo-id-text { min-width: 0; }
.fbo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 0; }
.stars { color: #d99b1c; letter-spacing: 2px; font-size: 17px; line-height: 1; }
.stars-off { color: var(--line); }
.fbo-rating { font-weight: 800; font-variant-numeric: tabular-nums; }
.fbo-reviews { color: var(--muted); font-size: 15px; }

.fbo-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.fbo-action {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 15px; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px;
}
.fbo-action:hover { border-color: var(--accent); background: #fff; }
.fbo-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.act-icon { width: 18px; height: 18px; flex: none; color: var(--accent); }
.fbo-address { margin: 14px 0 0; color: var(--muted); }

/* ---- Audit tab: accreditation and associations ------------------------- */
.cred-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cred { display: flex; align-items: flex-start; gap: 14px; }
.cred-img { flex: none; width: 44px; height: 44px; object-fit: contain; }
.cred-text { min-width: 0; }
.cred-title { display: block; font-weight: 700; }
.cred-desc { display: block; color: var(--muted); font-size: 15px; margin-top: 2px; }

.audit-state { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; }
.audit-pill {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; color: #fff; background: var(--muted);
}
.audit-pill.audit-submitted { background: var(--good, #1f7a4d); }
.audit-pill.audit-expired { background: var(--bad, #a32020); }

/* ---- Payment tab ------------------------------------------------------- */
.pay-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px;
}
.pay {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line); font-weight: 500;
}
.pay img { flex: none; width: 38px; height: 24px; object-fit: contain; }

/* ---- Reviews ----------------------------------------------------------- */
.review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.review-author { color: var(--muted); font-size: 15px; }

@media (max-width: 640px) {
  .fbo-id { gap: 14px; }
  .fbo-logo { width: 56px; height: 56px; }
  .fbo-action { flex: 1 1 calc(50% - 5px); justify-content: center; }
}

/* ---- Listing map legend and runway distances --------------------------- */
.map-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 10px 0 0; font-size: 14px; color: var(--muted);
}
.pin { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pin-apt { background: #1f3a5f; }
.pin-fbo { background: #249689; }
.pin + span, .map-legend .pin:not(:first-child) { margin-left: 8px; }

.rwy-dist { margin: 26px 0 0; }
.rwy-dist-h { font-size: 17px; margin: 0 0 10px; }
.rwy-dist-list {
  list-style: none; margin: 0 0 10px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.rwy-dist-list li {
  display: flex; align-items: baseline; gap: 9px;
  padding: 9px 14px; background: var(--surface); border: 1px solid var(--line);
}
.rwy-dist-id { font-weight: 800; font-size: 17px; }
.rwy-dist-v { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }

/* ---- Services offered: the FBO's own enabled list, with its icons -------- */
.svc-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px;
}
.svc-card {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  background: var(--surface); border: 1px solid var(--line);
}
.svc-card .svc-icon {
  flex: none; width: 30px; height: 30px; display: flex;
  align-items: center; justify-content: center; color: var(--accent);
}
/* The catalogue icons are remote PNGs on api.whatfbo.com; contain rather than
   cover so a non-square one is not cropped into nonsense. */
.svc-card .svc-icon img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.svc-card-text { min-width: 0; }
.svc-card-t { display: block; font-weight: 600; line-height: 1.35; }
.svc-card-p {
  display: block; font-size: 14px; color: var(--muted); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ---- nothing sticky on a phone ----------------------------------------- */
/* Deliberately the last rules in the file. These override .nav and .tabstrip
   at equal specificity, so they only win by coming after them -- placed any
   earlier and the media query is silently ignored.

   Why at all: below 640px the header grows to 92px and then 149px as the nav
   row wraps, which with the tabstrip beneath it would freeze a quarter of a
   phone screen. Header and tabstrip both scroll away instead. */
@media (max-width: 640px) {
  :root { --nav-h: 0px; }
  .nav { position: static; }
  .tabstrip { position: static; }
}

/* ---- sign-in and the assistant ----------------------------------------- */
.nav-who { color: #C4D0DA; font-weight: 500; }
.nav-signout button {
  appearance: none; background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 500; color: #C4D0DA; padding: 0 0 0 16px;
}
.nav-signout button:hover { color: #fff; }
.nav-signout { display: inline; }

.wrap-narrow { max-width: 520px; }
.auth-form { display: grid; gap: 6px; margin: 20px 0 18px; }
.auth-form label { font-weight: 600; font-size: 15px; margin-top: 8px; }
.auth-form input {
  font: inherit; padding: 11px 13px; border: 1px solid var(--line);
  background: #fff; color: var(--ink);
}
.auth-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.auth-form .btn { margin-top: 14px; }
.form-error {
  border-left: 3px solid var(--bad, #a32020); background: #fff;
  padding: 11px 14px; margin: 0 0 4px; font-weight: 500;
}

.ask { display: grid; gap: 8px; }
.ask textarea {
  font: inherit; font-size: 15px; padding: 10px 12px; resize: vertical;
  border: 1px solid var(--line); background: #fff; color: var(--ink); width: 100%;
}
.ask textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.ask .btn { margin-top: 0; }
.ask-status { margin: 0; font-size: 14px; color: var(--muted); }
.ask-answer { margin-top: 4px; display: grid; gap: 12px; max-height: 420px; overflow-y: auto; }
.ask-q {
  margin: 0; font-weight: 600; font-size: 14px; color: var(--muted);
  border-left: 2px solid var(--line); padding-left: 10px;
}
.ask-a { font-size: 15px; line-height: 1.55; white-space: pre-wrap; }

/* ---- why sign in ------------------------------------------------------- */
.why-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }
.why-list li {
  padding-left: 26px; position: relative; line-height: 1.6; max-width: 72ch;
}
/* A tick for what works, an outline for what does not. The distinction is the
   point of the page -- a bullet for both would read as one promise. */
.why-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 11px; height: 11px; border: 2px solid var(--accent); background: var(--accent);
}
.why-list-soon li::before { background: none; border-color: var(--muted); }
.muted-lede { color: var(--muted); margin: 0 0 12px; max-width: 72ch; }
.why-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.why-rule { border: 0; border-top: 1px solid var(--line); margin: 40px 0 34px; }
.prose h3 { margin: 26px 0 10px; font-size: 18px; }

/* Off-screen rather than display:none -- a bot reading the DOM sees a normal
   field, which is the point; a screen reader skips it via aria-hidden. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field-note { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

/* The register page's two account types. Reuses .subtabs, but these are links
   rather than buttons -- each type is a real URL worth linking and indexing. */
.reg-tabs { margin-bottom: 22px; }
a.subtab { text-decoration: none; }
.reg-steps { margin: 0 0 22px; padding-left: 20px; display: grid; gap: 10px; line-height: 1.6; }
.reg-steps li { padding-left: 4px; }

/* ---- leaving a review -------------------------------------------------- */
.review-form-block { background: #fff; }
.review-form { display: grid; gap: 6px; }
.review-form label { font-weight: 600; font-size: 15px; margin-top: 10px; }
.review-form textarea {
  font: inherit; font-size: 15px; padding: 11px 13px; resize: vertical;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.review-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.review-form .btn { margin-top: 14px; justify-self: start; }
.form-ok {
  border-left: 3px solid var(--accent); background: #fff;
  padding: 11px 14px; margin: 0 0 18px; font-weight: 500;
}

.rating-field { border: 0; padding: 0; margin: 0; }
.rating-field legend { font-weight: 600; font-size: 15px; padding: 0; margin-bottom: 4px; }

/* Reversed in the DOM so ~ can reach the stars that should also light up:
   with 5 first, hovering the 3rd star highlights 3, 2 and 1, which are its
   following siblings. row-reverse puts them back in reading order. */
.stars-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.stars-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.stars-input label {
  cursor: pointer; font-size: 30px; line-height: 1; color: var(--line);
  margin: 0; padding: 0 2px; transition: color .08s ease;
}
.stars-input label:hover,
.stars-input label:hover ~ label,
.stars-input input:checked ~ label { color: #d99b1c; }
.stars-input input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The claim strip inside a panel column rather than spanning the viewport:
   same band, but it cannot use .wrap's centring when it is already inside one. */
.claim-strip.inline {
  border: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 16px 18px; margin-top: 18px;
}
.claim-strip.inline p { max-width: 70ch; line-height: 1.6; }

/* The home page's service grid, reused inside a panel column. Narrower than
   the full-width original, so it wraps at a smaller minimum. Muted a touch:
   these are illustrative, and must not out-shout the confirmed services on a
   listing that has them. */
.service-grid.typical { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.service-grid.typical .service-card { background: var(--surface); }
.service-grid.typical { list-style: none; }

/* ---- directory front page: rated list and country grid ------------------ */
.airports.alt { background: var(--ground); }
.rated-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: none; }
.rated-card {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--rule);
  color: var(--ink); text-decoration: none;
}
.rated-card:hover { border-color: var(--teal); background: #fff; }
.rated-main { min-width: 0; flex: 1 1 auto; }
.rated-name { display: block; font-weight: 700; }
.rated-where { display: block; font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.rated-score { text-align: right; flex: none; }
.rated-n { display: block; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.country-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px;
}
.country-card {
  display: block; padding: 13px 15px; background: var(--surface);
  border: 1px solid var(--rule); color: var(--ink); text-decoration: none;
}
.country-card:hover { border-color: var(--teal); background: #fff; }
.country-name { display: block; font-weight: 600; }
.country-meta { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; }

/* ---- account menu ------------------------------------------------------ */
.acct { position: relative; }
/* display:block, not flex. Safari stops toggling a <summary> whose own display
   is flex: it opens and then will not close again. The flex row lives on the
   span inside it instead, which Safari is perfectly happy with. */
.acct > summary {
  list-style: none; cursor: pointer; display: block;
  color: #C4D0DA; font-weight: 500; padding: 6px 0;
}
.acct-inner { display: flex; align-items: center; gap: 7px; }
.acct > summary::-webkit-details-marker { display: none; }
.acct > summary:hover { color: #fff; }
.acct > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.acct[open] > summary { color: #fff; }
.acct-caret { font-size: 11px; opacity: .7; }
.acct[open] .acct-caret { transform: rotate(180deg); }

.acct-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 40;
  min-width: 208px; background: #fff; border: 1px solid var(--rule);
  box-shadow: 0 8px 28px rgba(16, 34, 51, .16); padding: 6px 0;
}
.acct-menu a, .acct-menu button {
  display: block; width: 100%; text-align: left; padding: 10px 16px;
  color: var(--ink); font-size: 15px; text-decoration: none;
  background: none; border: 0; font: inherit; cursor: pointer;
}
.acct-menu a:hover, .acct-menu button:hover { background: var(--ground); color: var(--navy); }
.acct-menu .nav-signout {
  display: block; border-top: 1px solid var(--rule); margin-top: 6px; padding-top: 6px;
}
.acct-menu .nav-signout button { color: var(--ink-2); padding-left: 16px; }

/* This used to go full-width and push the layout on a phone, because the header
   wrapped and an absolutely positioned menu would have hung off the row. The
   burger means the header no longer wraps, so the dropdown behaves the same at
   every width -- right-aligned below 1024px, see the header rules at the foot
   of this file. */

/* ---- account pages ----------------------------------------------------- */
.review-when { margin-left: auto; font-size: 13px; color: var(--muted); }
.fav-list, .quote-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fav-logo { width: 40px; height: 40px; flex: none; }
.quote-card { background: var(--surface); border: 1px solid var(--rule); padding: 15px 17px; }
.quote-head { display: flex; align-items: center; gap: 12px; }
.quote-ref { font-weight: 700; font-variant-numeric: tabular-nums; }
.quote-status {
  margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 9px; color: #fff; background: var(--muted);
}
.quote-status.quote-open { background: var(--navy); }
.quote-status.quote-quoted { background: var(--teal); }
.quote-status.quote-accepted { background: var(--good, #1f7a4d); }
.quote-where { margin: 6px 0 10px; }
.quote-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.quote-facts dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.quote-facts dd { margin: 2px 0 0; font-weight: 600; }

/* Save sits in the contact row and matches it, so the header reads as one set
   of actions rather than a row plus an oddity. */
.fav-form { display: inline; }
button.fbo-action { cursor: pointer; font: inherit; font-weight: 600; font-size: 15px; }
.fbo-action.is-saved { border-color: var(--accent); color: var(--accent); }
.fbo-action.is-saved .act-icon { color: var(--accent); }
.flash-wrap { padding-top: 18px; }
.flash-wrap .form-ok, .flash-wrap .form-error { margin-bottom: 0; }

/* The profile form: same controls as sign-in, plus a select and a read-only
   field that has to look inert rather than merely unfocused. */
.profile-block { background: #fff; max-width: 560px; }
.auth-form select {
  font: inherit; padding: 11px 13px; border: 1px solid var(--line);
  background: #fff; color: var(--ink);
}
.auth-form select:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.auth-form input[readonly] { background: var(--ground); color: var(--ink-2); cursor: not-allowed; }

/* ---- photographic hero ------------------------------------------------- */
/* The navy underneath is the fallback, not a nicety: if the image 404s or is
   still loading, the text is already white and needs something dark behind it
   from the first paint. */
.hero-photo {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy-deep); border-bottom: 0;
  padding: 72px 0 64px;
}
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 50%;  /* keep the aircraft in frame as it crops */
  z-index: -2;
}
/* Scrim graduated from the left, where the type is, rather than a flat wash
   over the whole picture -- the right side keeps its contrast.
   Tunable per hero: a picture that is already near-black on the left needs a
   lighter scrim, or the two together crush it to a flat rectangle and the
   photograph stops being a photograph. */
.hero-photo {
  --scrim-1: .92;
  --scrim-2: .82;
  --scrim-3: .45;
  --scrim-4: .30;
}
.hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
      rgba(18, 41, 60, var(--scrim-1)) 0%,
      rgba(18, 41, 60, var(--scrim-2)) 38%,
      rgba(18, 41, 60, var(--scrim-3)) 62%,
      rgba(18, 41, 60, var(--scrim-4)) 100%);
}
/* Three steps, because the three photographs are not equally dark on the left
   where the type sits: FBO 15%, services 2.6%, pilots 2.1%. The scrim exists
   to guarantee contrast, and past the point where contrast is already won it
   only destroys the picture that was paid for. */
.hero-photo.hero-lighter  { --scrim-1: .58; --scrim-2: .46; --scrim-3: .22; --scrim-4: .12; }
.hero-photo.hero-lightest { --scrim-1: .34; --scrim-2: .26; --scrim-3: .10; --scrim-4: .04; }
.hero-photo .eyebrow { color: #9FD8CF; }
.hero-photo h1 { color: #fff; }
.hero-photo .lede { color: #D3DEE6; }
.hero-photo .search { border-color: #fff; }
.hero-photo .search button { background: var(--teal); }
.hero-photo .search button:hover { background: #1d7d72; }

@media (max-width: 640px) {
  /* Narrow crops toward the quiet left of the frame, so the type keeps a clean
     ground; and a flatter, darker scrim because there is less room to grade. */
  .hero-photo { padding: 48px 0 44px; }
  .hero-bg { object-position: 32% 50%; }
  .hero-photo::before {
    background: linear-gradient(180deg, rgba(18, 41, 60, .90), rgba(18, 41, 60, .82));
  }
}

/* The pilots hero is the only one with a secondary button in it; on navy the
   default dark outline all but disappears. */
.hero-photo .btn-secondary { border-color: #fff; color: #fff; }
.hero-photo .btn-secondary:hover { background: rgba(255,255,255,.12); }

/* ---------- Quote Me: the request form ---------- */

/* A form is read down a single column, not across 1200px of it -- but LEFT
   aligned, not centred: the heading above it sits at the edge of the ordinary
   wrap, and a centred column below leaves the two visibly out of line. */
.wrap-form { max-width: 784px; margin-left: 0; margin-right: auto; }
@media (min-width: 1249px) { .wrap-form { margin-left: calc((100vw - 1200px) / 2); } }

/* The step strip already separates the form from the header; the section's
   usual 40px on top of that leaves the first question adrift. */
.qm-section { padding-top: 26px; }
.qm-steps { background: var(--surface); border-bottom: 1px solid var(--rule); }
.qm-steps-inner { display: flex; gap: 0; overflow-x: auto; }
.qm-step {
  display: flex; align-items: center; gap: 9px; padding: 14px 20px 12px 0;
  font-family: var(--display); font-size: 17px; font-weight: 600;
  color: var(--ink-3); white-space: nowrap;
}
.qm-step-n {
  width: 24px; height: 24px; flex: none; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  background: var(--rule); color: var(--ink-2);
}
.qm-step.is-now  { color: var(--navy); }
.qm-step.is-now .qm-step-n  { background: var(--navy); color: #fff; }
.qm-step.is-done { color: var(--teal); }
.qm-step.is-done .qm-step-n { background: var(--teal); color: #fff; }
.qm-step.is-done:hover { color: var(--navy); }

.qm-h2 {
  font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--navy);
  margin: 28px 0 6px; letter-spacing: -0.01em;
}
.qm-h2:first-child { margin-top: 0; }

.qm-block, .qm-subblock {
  border: 0; margin: 0 0 18px; padding: 0;
}
.qm-block legend {
  font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--navy);
  padding: 0; margin-bottom: 8px;
}
.qm-subblock {
  background: var(--surface); border: 1px solid var(--rule); padding: 14px 16px; margin-top: 10px;
}

.qm-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 10px; }
.qm-field { display: grid; gap: 4px; flex: 1 1 160px; min-width: 0; }
.qm-field > span { font-weight: 600; font-size: 14px; }
.qm-field-wide { flex: 2 1 260px; }
.qm-field-full { flex: 1 1 100%; margin-top: 6px; }
.qm-field input, .qm-field select, .qm-field textarea, .qm-param input, .qm-param select {
  font: inherit; padding: 9px 11px; border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink); width: 100%;
}
.qm-field textarea { resize: vertical; }
.qm-field input:focus-visible, .qm-field select:focus-visible,
.qm-field textarea:focus-visible, .qm-param input:focus-visible, .qm-param select:focus-visible {
  outline: 2px solid var(--teal); outline-offset: -1px;
}

/* One row per way of answering, each carrying its own input: without script
   nothing can be hidden and revealed, so everything stays reachable. */
.qm-choice {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--rule);
  padding: 11px 14px; margin-bottom: 7px; cursor: pointer;
}
.qm-choice:hover { border-color: var(--teal); }
.qm-choice:has(input:checked) { border-color: var(--navy); box-shadow: inset 3px 0 0 var(--navy); }
/* margin: 0 is not cosmetic. A radio carries a default margin of several px,
   and the row's widths are worked out in calc() against the box beside it --
   with the browser's margin still there the label no longer fits on the line
   and drops under the button. */
.qm-choice input[type=radio] { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--teal); }
.qm-choice-main { flex: 1 1 200px; }
.qm-choice-main strong { display: block; }
.qm-choice-extra {
  display: flex; align-items: center; gap: 7px; flex: none;
  font-size: 14px; color: var(--ink-2);
}
.qm-choice-extra input {
  font: inherit; padding: 6px 8px; border: 1px solid var(--rule); background: var(--surface);
  width: auto; max-width: 140px;
}

.qm-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin-bottom: 6px; }
.qm-check input[type=checkbox] { flex: none; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--teal); }

.qm-dim { color: var(--ink-2); font-size: 14px; font-weight: 400; }
.qm-block-dim { display: block; font-size: 13px; }
.qm-warn { color: var(--alert-ink); }

.qm-details { margin-bottom: 18px; }
.qm-details > summary {
  cursor: pointer; font-family: var(--display); font-size: 19px; font-weight: 600;
  color: var(--navy); padding: 10px 0;
}
.qm-details > summary:hover { color: var(--teal); }

.qm-actions { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.qm-back { font-weight: 600; color: var(--ink-2); }
.qm-legal { margin-top: 12px; }
.btn-inline {
  font-size: 15px; padding: 9px 16px; margin-left: 0; flex: none; align-self: flex-end;
}

/* Services: an accordion, because a pilot must be able to see everything they
   have asked for before sending. */
.qm-group { background: var(--surface); border: 1px solid var(--rule); margin-bottom: 8px; }
.qm-group > summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 13px 16px;
}
.qm-group > summary:hover { background: var(--ground); }
.qm-group-name { font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--navy); flex: 1 1 auto; }
.qm-count {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  background: var(--teal); color: #fff; padding: 3px 8px;
}
.qm-service { padding: 10px 16px 12px; border-top: 1px solid var(--rule-soft); }
.qm-service.is-on { background: #F6FBFA; }
.qm-params { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0 27px; }
.qm-param { display: grid; gap: 3px; flex: 0 1 190px; }
.qm-param > span { font-size: 12px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }

.qm-presets { margin-bottom: 26px; }
.qm-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qm-chip { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--surface); padding: 7px 12px; font-size: 15px; }
.qm-chip:has(input:checked) { border-color: var(--navy); }
.qm-chip input { accent-color: var(--teal); }

.qm-summary { background: var(--surface); border: 1px solid var(--rule); padding: 14px 16px; }
.qm-edit { margin: 8px 0 0; font-size: 14px; }
.qm-chosen { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; }
.qm-chosen li { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.qm-verbatim { background: var(--surface); border-left: 3px solid var(--teal); padding: 10px 14px; margin-top: 12px; }
.qm-verbatim p { margin: 3px 0 0; }
.qm-recipient {
  background: var(--surface); border: 1px solid var(--rule); padding: 11px 14px; margin-bottom: 7px;
}
.qm-recipient:has(input:checked) { border-color: var(--navy); }

/* The account, asked for last: the request is filled in behind it. */
.qm-gate { background: var(--surface); border: 1px solid var(--rule); padding: 20px 22px; margin-top: 26px; }
.qm-gate-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 8px; }
.qm-gate-forms h3 { font-family: var(--display); font-size: 20px; color: var(--navy); margin: 0; }
.qm-gate-forms .auth-form { margin-top: 4px; }
@media (max-width: 640px) { .qm-gate-forms { grid-template-columns: 1fr; gap: 8px; } }

.qm-search { margin-top: 22px; }
.qm-matches { margin-top: 16px; }

/* ---------- Quote Me: the comparison ---------- */

.qd-recipients { list-style: none; margin: 8px 0 22px; padding: 0; display: grid; gap: 4px; }
.qd-recipients li {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--rule); padding: 9px 14px;
}
.qd-state { font-size: 14px; color: var(--ink-2); }
.qd-state.is-replied { color: var(--teal); font-weight: 600; }

.qd-sort { font-size: 14px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.qm-chip-link { border: 1px solid var(--rule); background: var(--surface); padding: 4px 11px; font-size: 14px; }
.qm-chip-link.is-on { border-color: var(--navy); background: var(--navy); color: #fff; }

.qd-card {
  background: var(--surface); border: 1px solid var(--rule); padding: 16px 18px; margin-bottom: 14px;
}
.qd-card.is-accepted { border-color: var(--teal); border-width: 2px; }
.qd-card.is-lapsed { opacity: .62; }
.qd-card-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.qd-card-head h3 { font-family: var(--display); font-size: 22px; color: var(--navy); margin: 0; flex: 1 1 auto; }
.qd-rating { font-size: 14px; color: #d99b1c; }
.qd-total {
  font-family: var(--display); font-size: 34px; font-weight: 700; color: var(--navy);
  margin: 8px 0 0; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.qd-total-note { margin: 0; font-size: 13px; color: var(--ink-2); }

/* Never a bare converted number: what will actually be invoiced sits here. */
.qd-fx {
  background: var(--ground); border: 1px solid var(--rule-soft); padding: 9px 12px;
  margin: 9px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.5;
}
.qd-gaps {
  background: var(--alert-bg); border: 1px solid var(--alert-ink); color: var(--alert-ink);
  padding: 8px 12px; margin: 9px 0 0; font-size: 14px;
}
.qd-valid { margin: 9px 0 0; font-size: 14px; color: var(--ink-2); }
.qd-valid.is-lapsed { color: #A3372F; font-weight: 600; }
.qd-lines { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--rule-soft); display: grid; gap: 4px; }
.qd-lines li { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.qd-line-amount { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qd-notes { margin: 12px 0 0; font-size: 15px; color: var(--ink-2); }
.qd-card-foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 16px; }
.qd-contact { font-weight: 600; }
.qd-accept { margin-left: auto; }
.qd-accepted-tag { margin-left: auto; font-weight: 700; color: var(--teal); }
.qd-cancel { margin-top: 26px; }
.qd-cancel > summary { font-size: 16px; color: var(--ink-2); }

.quote-ref { color: var(--navy); }
.quote-open { margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.quote-status.quote-expired, .quote-status.quote-cancelled { background: var(--ink-3); }

/* Quote Me on a phone.
   Several of these rows have a flex-basis that only fits on a wide screen --
   two 160px fields plus the panel's own padding is already past 390px -- and
   with nothing set to overflow, the body simply grew and took the header with
   it. Below this width every row becomes a single column. */
@media (max-width: 560px) {
  .qm-field { flex-basis: 100%; }
  .qm-row { gap: 10px; }
  .qm-subblock { padding: 12px; }
  .qm-choice { padding: 11px 12px; }
  /* Beside the radio, not under it: 100% would wrap the label onto its own
     line and leave the button orphaned above it. */
  .qm-choice-main { flex: 1 1 calc(100% - 30px); }
  /* Its own line, and left-aligned under the label it belongs to. */
  .qm-choice-extra { flex: 1 1 100%; padding-left: 27px; }
  .qm-choice-extra input { max-width: 50%; }
  .btn-inline { width: 100%; margin-top: 4px; }
  .qm-params { margin-left: 0; }
  .qm-param { flex: 1 1 100%; }
  .qm-service { padding: 10px 12px 12px; }
  .qm-group > summary { padding: 12px; }
  .qm-gate { padding: 16px 14px; }
  .qd-card { padding: 14px; }
  .qd-total { font-size: 28px; }
  .qm-steps-inner { gap: 0; }
  .qm-step { padding-right: 14px; font-size: 15px; }
}
/* A long service label beside its price must wrap, not widen the card. */
.qd-lines li { flex-wrap: wrap; }

/* ---------- the Quote Me band, under the home page hero ---------- */

/* The only teal band on the site. Everything else here is white, ground or
   navy, so this reads as the featured thing without a second dark slab
   competing with the claim strip at the foot of the page. */
.quote-band {
  background: #E6F3F1; border-bottom: 1px solid #BEDFDA;
  padding: 34px 0 36px;
}
.quote-band-inner {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px; align-items: start;
}
.quote-band h2 {
  font-family: var(--display); font-size: clamp(28px, 3.2vw, 38px); font-weight: 700;
  color: var(--navy); margin: 0; letter-spacing: -0.01em; line-height: 1.08;
}
.quote-band .eyebrow { margin-bottom: 10px; color: #14766B; }
.quote-band-lede { font-size: 17px; line-height: 1.6; margin: 10px 0 0; max-width: 56ch; }
.quote-band-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 20px 0 0; }
.quote-band-note { font-size: 14px; color: var(--ink-2); max-width: 34ch; }

.quote-band-steps {
  counter-reset: qstep; list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px; align-self: center;
}
.quote-band-steps li {
  counter-increment: qstep; position: relative; padding-left: 40px;
  font-size: 15px; line-height: 1.5; color: var(--ink-2);
}
.quote-band-steps li::before {
  content: counter(qstep); position: absolute; left: 0; top: 0;
  width: 27px; height: 27px; display: flex; align-items: center; justify-content: center;
  background: var(--teal); color: #fff;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
}
.quote-band-steps strong { color: var(--ink); font-weight: 600; }

@media (max-width: 820px) {
  .quote-band-inner { grid-template-columns: 1fr; gap: 24px; }
  .quote-band { padding: 28px 0 30px; }
}
@media (max-width: 560px) {
  /* Beside a full-width button the note is a two-word-per-line column. */
  .quote-band-cta { display: block; }
  .quote-band-note { display: block; max-width: none; margin-top: 10px; }
}

/* The nav's one action among five destinations, so it is coloured like one. */
.nav-links .nav-quote { color: #6FD3C6; font-weight: 600; }
.nav-links .nav-quote:hover { color: #fff; }

/* The Quote Me picture puts its first lit hangar at 39% of the frame, which is
   almost exactly where a 60ch lede ends -- so the sentence finished across the
   lights. Narrower here, and it lands on the dark apron instead. Scoped to this
   hero because it is a fact about this photograph, not about ledes. */
.hero-quote .lede { max-width: 44ch; }

/* ---------- the header below 1024px: one row, and a burger ---------- */

/* 1024, not 640. Measured: the bar is a single 68px row down to 1050px, then
   wraps to 111px, 167px and finally 250px on a phone -- a quarter of the
   screen spent on navigation before the page has said anything. The burger
   starts where the wrapping does.

   A checkbox drives it, not a <details>. The disclosure element was the
   obvious choice and it is what the account menu uses, but built that way the
   burger opened in Safari and would not close again -- through two attempted
   fixes, including moving the flex box off the <summary>, which is the usual
   remedy. :checked is plain CSS with no element behaviour behind it, and it
   still needs no JavaScript. */

.nav-toggle { display: none; }
.nav-burger { display: none; }

@media (max-width: 1024px) {
  /* Off screen but NOT display:none: it has to stay focusable, because it is
     the only thing a keyboard can operate the menu with. */
  .nav-toggle {
    display: block; position: absolute; width: 1px; height: 1px;
    opacity: 0; pointer-events: none; margin: 0;
  }

  .nav-burger {
    display: block; order: 3; margin-right: -10px;
    cursor: pointer; color: #C4D0DA;
  }
  .nav-burger-inner {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
  }
  .nav-burger:hover { color: #fff; }
  .nav-toggle:focus-visible + .nav-burger { outline: 2px solid var(--teal); outline-offset: -2px; }

  /* Three bars from one element: the middle is the box, the other two are its
     pseudo-elements, so there is no markup carrying pure decoration. */
  .nav-burger-bars,
  .nav-burger-bars::before,
  .nav-burger-bars::after {
    display: block; width: 22px; height: 2px; background: currentColor;
    transition: transform .18s ease, opacity .18s ease;
  }
  .nav-burger-bars { position: relative; }
  .nav-burger-bars::before,
  .nav-burger-bars::after { content: ""; position: absolute; left: 0; }
  .nav-burger-bars::before { top: -7px; }
  .nav-burger-bars::after  { top: 7px; }

  .nav-toggle:checked + .nav-burger .nav-burger-bars { background: transparent; }
  .nav-toggle:checked + .nav-burger .nav-burger-bars::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked + .nav-burger .nav-burger-bars::after  { transform: translateY(-7px) rotate(-45deg); }

  /* A panel under the whole bar rather than a box hanging off the button, so
     it does not shift the row it opens from. */
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    display: none;
    flex-direction: column; gap: 0;
    background: var(--navy-deep); border-top: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .28);
    padding: 6px 0;
  }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-links a {
    padding: 13px 24px; font-size: 17px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links a:hover { background: rgba(255, 255, 255, .06); color: #fff; }

  /* Brand left, then whoever is signed in, then the burger. The spacer does
     the pushing, as it already did. */
  .brand { order: 0; }
  .nav-spacer { order: 1; }
  .nav-signin, .acct { order: 2; }
  .nav-inner { flex-wrap: nowrap; gap: 12px; }

  /* The account dropdown hangs off the right edge here, not the left. */
  .acct-menu { left: auto; right: 0; }

  /* The panel is positioned against the bar, so the bar has to be a containing
     block. "Nothing sticky on a phone" sets position:static below 640px, and
     static is not one; relative is not sticky, so that rule's intent survives. */
  .nav { position: relative; }
}

/* ---------- how you do it, in four moves (/operators) ----------
   Labels and arrows, no prose: it is read in one glance and every step is the
   heading of a panel below, so any explanation here would be said twice.

   The arrows are list items of their own rather than ::after on each step.
   That keeps them out of the flex basis maths -- a pseudo-element would have
   made every step a different width depending on whether it had an arrow -- and
   it means they can simply not render when the row wraps to a column, where a
   left-to-right arrow would be pointing the wrong way. */
.steps-strip { background: var(--surface); padding: 40px 0 44px; border-bottom: 1px solid var(--rule); }
.hsteps {
  list-style: none; padding: 0; margin: 26px 0 0;
  display: flex; align-items: stretch; gap: 10px;
}
.hstep { flex: 1 1 0; min-width: 0; }
.hstep > a {
  display: flex; flex-direction: column; align-items: flex-start; height: 100%;
  padding: 18px 18px 20px; text-decoration: none; color: inherit;
  background: var(--ground); border: 1px solid var(--rule);
  border-top: 3px solid var(--rule-strong);
}
.hstep > a:hover { border-top-color: var(--teal); background: #fff; }
.hstep-icon { color: var(--teal); }
.hstep-icon .benefit-icon { width: 24px; height: 24px; margin: 0; }
.hstep-n {
  display: block; margin-top: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3);
}
.hstep-t {
  display: block; margin-top: 3px;
  font-family: var(--display); font-size: 20px; font-weight: 600;
  line-height: 1.2; color: var(--navy);
}
.hstep > a:hover .hstep-t { text-decoration: underline; text-underline-offset: 3px; }
/* The last step is the outcome rather than a question, so it is picked out the
   way the site picks out anything it wants read last. */
.hstep-last > a { border-top-color: var(--teal); }
.hstep-arrow {
  flex: 0 0 auto; align-self: center; color: var(--ink-3);
  display: flex; align-items: center;
}
.hstep-arrow svg { width: 20px; height: 20px; display: block; }

@media (max-width: 1000px) {
  /* Two up, and the arrows go: at this width they would be pointing across a
     line break. The numerals already carry the order. */
  .hsteps { flex-wrap: wrap; gap: 12px; }
  .hstep { flex: 1 1 calc(50% - 6px); }
  .hstep-arrow { display: none; }
}
@media (max-width: 560px) {
  .hstep { flex: 1 1 100%; }
}

/* A section heading carrying its own glyph, so a panel and the step in the
   strip above it are recognisably the same thing. Sized against the 34px
   display face rather than the 22px one the benefit cards use, and the card
   rule's optical nudge is reset -- at this size it is not needed. */
.section-head h2.h2-icon { display: flex; align-items: center; gap: 13px; }
.h2-icon .benefit-icon { flex: none; width: 30px; height: 30px; margin: 0; color: var(--teal); }
@media (max-width: 720px) {
  .h2-icon .benefit-icon { width: 25px; height: 25px; }
  .section-head h2.h2-icon { gap: 10px; }
}

/* The one-line claim that closes /operators. Its own band and nothing else in
   it: a sentence this short reads as a caption if it has to share a section
   with anything. Display face at hero scale, but on the light ground so it does
   not compete with the navy CTA a little further down. */
.tagline { background: var(--surface); padding: 46px 0 50px; border-bottom: 1px solid var(--rule); }
.tagline p {
  margin: 0; max-width: 24ch;
  font-family: var(--display); font-size: 38px; font-weight: 600;
  line-height: 1.15; color: var(--navy);
}
@media (max-width: 720px) {
  .tagline { padding: 34px 0 36px; }
  .tagline p { font-size: 28px; }
}

/* ---------- the three audience pages, on the home page ----------
   Not a content section: the fork in the road. Everything below this band is
   the directory itself, so it sits above the Quote Me band and reads as
   navigation -- whole card is the link, and the h2s are the audience names
   rather than a section title, because there is no section title to have.

   The teal top rule arriving on hover is the same signal the /operators and
   /for-fbos step strips use, which is deliberate: these three cards are where
   those strips are reached from. */
.audience { background: var(--surface); padding: 34px 0 38px; border-bottom: 1px solid var(--rule); }
.audience-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.audience-card > a {
  display: flex; flex-direction: column; height: 100%;
  padding: 22px 24px 20px; text-decoration: none; color: inherit;
  background: var(--ground); border: 1px solid var(--rule);
  border-top: 3px solid var(--rule-strong);
}
.audience-card > a:hover { border-top-color: var(--teal); background: #fff; }
.audience-icon { color: var(--teal); }
.audience-icon .benefit-icon { width: 26px; height: 26px; margin: 0; }
.audience-card h2 {
  font-family: var(--display); font-size: 25px; font-weight: 600; color: var(--navy);
  margin: 12px 0 0; line-height: 1.15;
}
.audience-card p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
/* margin-top:auto so the call to action sits on the bottom edge of every card
   whatever the description length, rather than three of them at three heights. */
.audience-go {
  margin-top: auto; padding-top: 16px;
  font-family: var(--body); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--teal);
}
.audience-arrow { margin-left: 8px; display: inline-block; transition: transform .15s ease; }
.audience-card > a:hover .audience-arrow { transform: translateX(4px); }
.audience-card > a:hover h2 { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) { .audience-grid { grid-template-columns: 1fr; gap: 12px; } }

/* The parenthetical rides at the size of the lede, not the headline -- at 38px
   it read as part of the name rather than a note about it. */
.qb-unique { font-size: 0.5em; font-weight: 600; color: #14766B; white-space: nowrap; }


/* ---------- legal pages ---------- */

.foot-nav { display: flex; gap: 48px; margin-left: auto; flex-wrap: wrap; }
/* Once the footer has wrapped, the columns sit under the brand block rather
   than being pushed to the right edge of a line they now have to themselves. */
@media (max-width: 640px) { .foot-nav { margin-left: 0; gap: 32px; } }
.foot-col-label {
  margin: 0 0 2px; font-family: var(--display); font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #7C8FA0;
}
.foot-col-label a { color: inherit; text-decoration: none; }
.foot-col-label a:hover { color: #fff; }

.legal-meta {
  margin: 14px 0 0; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.02em; color: var(--ink-3);
}

/* The contents list. Only rendered above three sections, so a short policy
   does not get a table of contents longer than the policy. */
.legal-toc {
  margin: 0 0 34px; padding: 18px 22px;
  background: var(--ground); border-left: 3px solid var(--teal);
}
.legal-toc ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 32px; }
.legal-toc li { margin-bottom: 4px; font-size: 15px; break-inside: avoid; }
.legal-toc a { color: var(--ink-2); }
.legal-toc a:hover { color: var(--teal); }
.legal-toc-label {
  margin: 0 0 8px; font-family: var(--display); font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
@media (max-width: 640px) { .legal-toc ul { columns: 1; } }

/* An anchored heading must not land under the sticky header. */
.prose h2[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

.legal-more { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--rule); }
.legal-more ul { margin: 0; padding-left: 1.1rem; }
.legal-more li { font-size: 16px; }

/* Cookie names, header flags and the placeholders still to be filled. Nothing
   else on the site sets inline code, so this is the only rule for it. */
.prose code {
  font-family: var(--mono); font-size: 0.88em;
  background: var(--rule-soft); color: var(--navy);
  padding: 1px 5px; border-radius: 3px;
}
.score-table code { font-size: 0.92em; }

/* Policy tables carry sentences, not scores, so cells align to their top edge
   rather than centring a one-word cell against a three-line one. */
.prose .score-table td { vertical-align: top; }

/* Analytics consent panel.
   Bottom of the viewport, not a full-screen overlay: it asks about counting
   visits, which does not warrant blocking the page behind it. Nothing here is
   sticky-positioned on a phone -- see the rule further up -- so it is fixed and
   its own height is bounded instead. */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--navy-deep); color: #fff;
  border-top: 3px solid var(--teal);
  box-shadow: 0 -6px 24px rgba(18, 41, 60, 0.28);
}
/* The no-JavaScript path for the footer's Cookie Settings link: the panel is
   rendered with [hidden] once a choice is made, and the anchor un-hides it.
   With JavaScript, consent.js intercepts the click and this never fires. */
.cookie-bar[hidden]:target { display: block; }

.cookie-bar-inner {
  display: flex; align-items: center; gap: 28px;
  padding-top: 18px; padding-bottom: 18px;
}
.cookie-bar-copy { flex: 1; min-width: 0; }
.cookie-bar-copy p { margin: 0; font-size: 15px; color: #D7E0E8; }
.cookie-bar-copy .cookie-bar-title {
  margin: 0 0 4px;
  font-family: var(--display); font-size: 17px; font-weight: 600;
  letter-spacing: 0.02em; color: #fff;
}
.cookie-bar-copy a { color: #fff; text-decoration: underline; }
.cookie-bar-copy a:hover { color: var(--teal); }

.cookie-bar-actions { display: flex; gap: 10px; flex-shrink: 0; }
/* .btn and .btn-secondary are written for anchors everywhere else on the site.
   These two are real <button>s -- the choice is an action, not a destination --
   so they need the three things a button does not inherit: the UA border, the
   pointer, and .btn-secondary's margin, which is what separates the pair
   elsewhere and here double-counts against the flex gap. */
.cookie-bar-actions .btn,
.cookie-bar-actions .btn-secondary { border-width: 0; cursor: pointer; margin-left: 0; }
.cookie-bar-actions .btn-secondary { border-width: 2px; }
/* .btn-secondary is navy-on-white elsewhere, which is invisible on this panel.
   Same shape, inverted for a dark ground. */
.cookie-bar .btn-secondary {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5);
}
.cookie-bar .btn-secondary:hover { background: #fff; color: var(--navy); }

@media (max-width: 720px) {
  .cookie-bar-inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .cookie-bar-actions .btn, .cookie-bar-actions .btn-secondary { flex: 1; text-align: center; }
  /* A long policy panel must not eat a small screen whole. */
  .cookie-bar { max-height: 70vh; overflow-y: auto; }
}

/* Sits in the Legal column with the policy links, so it reads as one of them. */
.foot-consent { cursor: pointer; }