/* 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;

  --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; }

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

/* ---------- nav ---------- */

.nav { background: var(--navy); }
.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(--mono); 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(--mono); 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(--mono); 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(--mono); 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(--mono); 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(--mono); 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(--mono); 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(--mono); 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; }
.cta .btn { margin-left: auto; }

.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; margin-left: auto; }
.foot-links a { text-decoration: none; }

@media (max-width: 640px) {
  .cta .btn, .claim-strip.big .btn { margin-left: 0; }
  .foot-links { 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(--mono); 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(--mono); 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;
}
.benefit p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.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(--mono); 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; }

.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(--mono); 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(--mono); 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: 0; 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(--mono); 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(--mono); 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 ---------- */

.airport-map-wrap { margin-top: 22px; }
.airport-map-wrap .airport-map { border: 0; border-top: 1px solid var(--rule); }

#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; }