/* ============================================================
   Click and Flyward - peer to peer private aircraft hire
   Design system: refined aviation editorial
   Instrument Serif display + Inter body, navy / sky / amber
   ============================================================ */

:root {
  /* palette */
  --navy-900:#081826;
  --navy-800:#0b2239;
  --navy-700:#13314f;
  --navy-600:#1d4467;
  --sky-600:#2a78c6;
  --sky-500:#3a8dde;
  --sky-400:#5aa6ee;
  --sky-300:#9ccaf5;
  --cloud-100:#eef3f8;
  --cloud-50:#f6fafd;
  --paper:#ffffff;
  --amber-500:#ef8b3c;
  --amber-400:#f5a623;
  --ink:#0f1720;
  --muted:#5b6b7d;
  --faint:#8b9aa9;
  --line:rgba(11,34,57,0.10);
  --line-strong:rgba(11,34,57,0.18);
  --green:#1f9d6b;
  --green-bg:#e7f6ee;
  --red:#cf4b46;
  --red-bg:#fbeceb;
  --warn:#d6841f;
  --warn-bg:#fdf2e2;

  /* type */
  --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  --shadow-sm:0 1px 3px rgba(8,24,38,0.06), 0 1px 2px rgba(8,24,38,0.08);
  --shadow:0 6px 24px rgba(8,24,38,0.10);
  --shadow-lg:0 18px 50px rgba(8,24,38,0.18);
  --radius:14px;
  --radius-sm:9px;
  --maxw:1180px;
}

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

html { scroll-behavior:smooth; }

body {
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  color:var(--ink);
  background:var(--cloud-50);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img, svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }

/* ---- typography ---- */
h1, h2, h3 { font-family:var(--serif); font-weight:400; line-height:1.04; letter-spacing:-0.01em; margin:0; }
h1 { font-size:clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size:clamp(2rem, 4vw, 3rem); }
h3 { font-size:1.5rem; }
.serif-em { font-style:italic; color:var(--sky-400); }
p { margin:0 0 1rem; }
.lead { font-size:1.2rem; color:var(--muted); line-height:1.55; }

/* flight-level annotation accent */
.fl {
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--sky-600);
  font-weight:500;
}
.fl::before { content:'\2708\00a0\00a0'; opacity:0.7; }

.eyebrow {
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--sky-600);
  margin:0 0 0.9rem;
}

/* ---- layout ---- */
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section { padding:84px 0; }
.section-tight { padding:54px 0; }
.center { text-align:center; }
.measure { max-width:680px; }
.measure-wide { max-width:820px; }

/* runway centerline divider */
.runway {
  height:0; border:0;
  border-top:2px dashed var(--line-strong);
  max-width:var(--maxw); margin:0 auto;
  opacity:0.5;
}

/* ---- nav ---- */
.nav {
  position:sticky; top:0; z-index:50;
  background:rgba(246,250,253,0.82);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-inner { display:flex; align-items:center; gap:28px; height:68px; }
.brand { display:flex; align-items:center; gap:11px; font-weight:600; font-size:1.05rem; letter-spacing:-0.01em; }
.brand .mark { width:30px; height:30px; flex:0 0 auto; }
.brand b { font-weight:600; }
.brand .amp { color:var(--amber-500); font-family:var(--serif); font-style:italic; font-weight:400; }
.nav-links { display:flex; gap:24px; margin-left:auto; align-items:center; }
.nav-links a { font-size:0.94rem; color:var(--navy-700); font-weight:450; transition:color .15s; }
.nav-links a:hover, .nav-links a.active { color:var(--sky-600); }
/* button colours must beat the .nav-links a colour (higher specificity) */
.nav-links a.btn-primary, .nav-links a.btn-primary:hover, .nav-links a.btn-primary.active { color:#2a1404; }
.nav-links a.btn-navy, .nav-links a.btn-navy:hover, .nav-links a.btn-sky, .nav-links a.btn-sky:hover { color:#fff; }
.nav-toggle { display:none; margin-left:auto; background:none; border:0; cursor:pointer; padding:6px; }

/* ---- buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  font-size:0.95rem; font-weight:500;
  padding:12px 22px; border-radius:999px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--amber-500); color:#2a1404; box-shadow:0 6px 18px rgba(239,139,60,0.32); }
.btn-primary:hover { background:var(--amber-400); box-shadow:0 8px 24px rgba(239,139,60,0.42); }
.btn-navy { background:var(--navy-800); color:#fff; }
.btn-navy:hover { background:var(--navy-700); }
.btn-ghost { background:transparent; color:var(--navy-800); border-color:var(--line-strong); }
.btn-ghost:hover { border-color:var(--navy-600); background:rgba(255,255,255,0.6); }
.btn-sky { background:var(--sky-500); color:#fff; box-shadow:0 6px 18px rgba(58,141,222,0.3); }
.btn-sky:hover { background:var(--sky-600); }
.btn-block { width:100%; justify-content:center; }
.btn-lg { padding:15px 28px; font-size:1.02rem; }

/* ---- chips / badges ---- */
.chip {
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.76rem; font-weight:500;
  padding:4px 11px; border-radius:999px;
  background:var(--cloud-100); color:var(--navy-700);
  border:1px solid var(--line);
}
.chip svg { width:13px; height:13px; }
.chip-verify { background:var(--green-bg); color:#127150; border-color:rgba(31,157,107,0.25); }
.chip-sky { background:#e7f1fc; color:var(--sky-600); border-color:rgba(58,141,222,0.22); }

.tail {
  font-family:var(--mono); font-weight:600;
  letter-spacing:0.06em; font-size:0.82rem;
  color:var(--navy-800);
  background:#fff; border:1.5px solid var(--navy-800);
  border-radius:5px; padding:2px 8px;
  box-shadow:1px 1px 0 var(--navy-800);
}

.verdict {
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:0.9rem;
  padding:7px 14px; border-radius:999px;
}
.verdict.pass { background:var(--green-bg); color:#0f6b48; }
.verdict.warn { background:var(--warn-bg); color:#9a5a10; }
.verdict.fail { background:var(--red-bg); color:#a63430; }

/* ---- cards ---- */
.card {
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
  overflow:hidden; transition:transform .18s ease, box-shadow .2s ease;
}
.card-pad { padding:26px; }

/* aircraft listing card */
.listing-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(310px, 1fr));
  gap:24px;
}
.listing-card { display:flex; flex-direction:column; cursor:pointer; }
.listing-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.listing-media {
  position:relative; aspect-ratio:16/10;
  background:linear-gradient(165deg, var(--sky-300) 0%, var(--cloud-100) 64%, #fff 100%);
  display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden;
}
.listing-media .silh { width:84%; margin-bottom:8%; filter:drop-shadow(0 10px 14px rgba(8,24,38,0.22)); }
.listing-media .sun {
  position:absolute; top:-32px; right:-32px; width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,231,189,0.95), rgba(245,166,35,0) 70%);
}
.listing-media .tail-pos { position:absolute; top:12px; left:12px; }
.listing-media .qual-pos { position:absolute; top:12px; right:12px; }
.listing-body { padding:18px 20px 22px; display:flex; flex-direction:column; gap:9px; flex:1; }
.listing-title { font-family:var(--serif); font-size:1.4rem; line-height:1.05; }
.listing-meta { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:0.88rem; }
.listing-meta svg { width:15px; height:15px; color:var(--sky-600); flex:0 0 auto; }
.listing-specs { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.listing-foot { margin-top:auto; padding-top:14px; border-top:1px solid var(--line); display:flex; align-items:baseline; justify-content:space-between; }
.rate { font-family:var(--serif); font-size:1.55rem; color:var(--navy-800); }
.rate small { font-family:var(--sans); font-size:0.8rem; color:var(--faint); font-weight:400; }

/* ---- forms ---- */
label.fld { display:block; margin-bottom:14px; }
label.fld span { display:block; font-size:0.82rem; font-weight:500; color:var(--navy-700); margin-bottom:5px; }
input, select, textarea {
  width:100%; font-family:inherit; font-size:0.95rem; color:var(--ink);
  padding:11px 13px; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:#fff; transition:border .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--sky-500); box-shadow:0 0 0 3px rgba(58,141,222,0.16); }
.filt-bar { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; }
.filt-bar label.fld { margin-bottom:0; min-width:150px; flex:1; }

/* ---- preflight checklist (eligibility engine) ---- */
.checklist { list-style:none; margin:0; padding:0; }
.checklist li {
  display:flex; gap:13px; align-items:flex-start;
  padding:13px 0; border-bottom:1px dashed var(--line);
}
.checklist li:last-child { border-bottom:0; }
.ck-icon { flex:0 0 auto; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; margin-top:1px; }
.ck-icon svg { width:14px; height:14px; }
.ck-icon.pass { background:var(--green-bg); color:var(--green); }
.ck-icon.warn { background:var(--warn-bg); color:var(--warn); }
.ck-icon.fail { background:var(--red-bg); color:var(--red); }
.ck-text strong { display:block; font-weight:550; font-size:0.95rem; }
.ck-text span { font-size:0.85rem; color:var(--muted); }

/* ---- responsibility matrix ---- */
.matrix { width:100%; border-collapse:collapse; font-size:0.92rem; }
.matrix th, .matrix td { text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
.matrix thead th { font-family:var(--mono); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); background:var(--cloud-100); }
.matrix td:first-child { font-weight:500; }
.who { display:inline-block; font-family:var(--mono); font-size:0.72rem; font-weight:600; padding:3px 9px; border-radius:5px; letter-spacing:0.04em; }
.who.pilot { background:#e7f1fc; color:var(--sky-600); }
.who.owner { background:var(--warn-bg); color:#9a5a10; }
.who.platform { background:var(--cloud-100); color:var(--navy-700); }

/* ---- generic grids ---- */
.cols { display:grid; gap:26px; }
.cols-2 { grid-template-columns:repeat(2, 1fr); }
.cols-3 { grid-template-columns:repeat(3, 1fr); }
.split { display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center; }

.step-num {
  font-family:var(--serif); font-size:2.4rem; color:var(--sky-400);
  line-height:1; display:block; margin-bottom:10px;
}

/* ---- hero ---- */
.hero {
  position:relative; overflow:hidden; color:#eaf2fb;
  background:
    radial-gradient(900px 520px at 78% -10%, rgba(245,166,35,0.30), transparent 60%),
    radial-gradient(1100px 700px at 12% 8%, rgba(58,141,222,0.42), transparent 58%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 46%, var(--navy-700) 100%);
}
.hero::after {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0.5;
  background-image:linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.hero .wrap { position:relative; z-index:2; padding-top:96px; padding-bottom:104px; }
.hero h1 { color:#fff; max-width:14ch; }
.hero .lead { color:#b9cde2; max-width:46ch; font-size:1.28rem; }
.hero-path { position:absolute; inset:0; z-index:1; opacity:0.9; }

/* search bar on hero */
.searchbar {
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
  background:rgba(255,255,255,0.97); border-radius:16px; padding:16px;
  box-shadow:var(--shadow-lg); max-width:760px;
}
.searchbar label.fld { margin-bottom:0; flex:1; min-width:150px; }
.searchbar label.fld span { color:var(--navy-700); }

.stat-row { display:flex; gap:40px; flex-wrap:wrap; margin-top:40px; }
.stat .n { font-family:var(--serif); font-size:2.4rem; color:#fff; line-height:1; }
.stat .l { font-size:0.85rem; color:#9fb6cf; }

/* ---- trust strip ---- */
.trust-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.trust-strip div { background:#fff; padding:22px; }
.trust-strip .ic { width:26px; height:26px; color:var(--sky-600); margin-bottom:10px; }
.trust-strip h4 { margin:0 0 4px; font-size:1rem; font-weight:600; }
.trust-strip p { margin:0; font-size:0.86rem; color:var(--muted); }

/* ---- callout / banners ---- */
.callout {
  background:var(--cloud-100); border-left:3px solid var(--sky-500);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:20px 24px;
}
.callout.amber { background:var(--warn-bg); border-left-color:var(--amber-500); }
.callout.navy { background:var(--navy-800); color:#dbe7f4; border-left-color:var(--amber-500); }
.callout.navy a { color:var(--sky-300); }

.note { font-size:0.82rem; color:var(--faint); }

/* ---- detail page ---- */
.detail-hero { display:grid; grid-template-columns:1.3fr 1fr; gap:36px; }
.gallery { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.gallery .listing-media { aspect-ratio:16/9; }
.gallery .silh { width:72%; }
.spec-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0 26px; }
.spec-grid .row { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:0.92rem; }
.spec-grid .row span:first-child { color:var(--muted); }
.spec-grid .row span:last-child { font-weight:500; text-align:right; }
.booking-card { position:sticky; top:88px; }
.req-list { list-style:none; margin:0; padding:0; }
.req-list li { display:flex; gap:9px; align-items:flex-start; padding:8px 0; font-size:0.9rem; border-bottom:1px dashed var(--line); }
.req-list li:last-child { border-bottom:0; }
.req-list svg { width:16px; height:16px; color:var(--sky-600); flex:0 0 auto; margin-top:3px; }

/* profile switcher */
.profile-switch { display:flex; gap:8px; flex-wrap:wrap; }
.profile-switch button {
  border:1px solid var(--line-strong); background:#fff; border-radius:999px;
  padding:7px 14px; font-size:0.85rem; cursor:pointer; transition:all .15s; color:var(--navy-700);
}
.profile-switch button.on { background:var(--navy-800); color:#fff; border-color:var(--navy-800); }

/* ---- modal ---- */
.modal-back { position:fixed; inset:0; background:rgba(8,24,38,0.55); backdrop-filter:blur(3px); display:none; place-items:center; z-index:100; padding:24px; }
.modal-back.open { display:grid; }
.modal { background:#fff; border-radius:var(--radius); max-width:560px; width:100%; max-height:88vh; overflow:auto; box-shadow:var(--shadow-lg); }
.modal-head { padding:22px 26px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.modal-body { padding:26px; }
.x-close { background:none; border:0; cursor:pointer; font-size:1.5rem; color:var(--muted); line-height:1; }

/* ---- map ---- */
.map-wrap { background:linear-gradient(180deg, #eaf2fb, #f6fafd); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.uk-map { width:100%; max-width:500px; height:auto; margin:0 auto; display:block; }
.uk-map .land { fill:#dfeaf3; stroke:#c2d4e4; stroke-width:1.2; }
.map-dot { fill:var(--amber-500); stroke:#fff; stroke-width:2; transition:r .15s; }
.map-mk { cursor:pointer; }
.map-mk:hover .map-dot { r:12; }
.map-num { font-family:var(--mono); font-size:7px; font-weight:600; fill:#fff; pointer-events:none; }
.map-label { font-family:var(--mono); font-size:8px; fill:#9fb6cf; letter-spacing:0.1em; }
.map-legend { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; justify-content:center; }
.map-leg { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-strong); background:#fff; border-radius:999px; padding:6px 13px; font-size:0.85rem; cursor:pointer; color:var(--navy-700); transition:all .15s; }
.map-leg:hover { border-color:var(--sky-500); color:var(--sky-600); }
.map-leg .ld { width:9px; height:9px; border-radius:50%; background:var(--amber-500); }
.map-leg b { color:var(--navy-800); margin-left:2px; }

/* view toggle */
.seg { display:inline-flex; background:var(--cloud-100); border-radius:999px; padding:4px; gap:2px; }
.seg button { border:0; background:none; padding:7px 16px; border-radius:999px; font-size:0.85rem; cursor:pointer; color:var(--navy-700); }
.seg button.on { background:#fff; box-shadow:var(--shadow-sm); color:var(--navy-800); font-weight:500; }

/* ---- footer ---- */
.footer { background:var(--navy-900); color:#9fb6cf; padding:64px 0 34px; }
.footer a { color:#c4d6e8; font-size:0.9rem; }
.footer a:hover { color:#fff; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; }
.footer h5 { font-family:var(--mono); font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color:#6f88a3; margin:0 0 14px; }
.footer ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.footer .brand { color:#fff; margin-bottom:14px; }
.footer-disclaimer { margin-top:42px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.1); font-size:0.8rem; color:#7d96b0; max-width:90ch; }

/* ---- animation ---- */
@keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.rise { animation:rise .7s cubic-bezier(.2,.7,.2,1) both; }
.d1 { animation-delay:.08s; } .d2 { animation-delay:.16s; } .d3 { animation-delay:.24s; } .d4 { animation-delay:.32s; }
@media (prefers-reduced-motion: reduce) { .rise { animation:none; } html { scroll-behavior:auto; } }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .split, .detail-hero, .cols-2, .cols-3 { grid-template-columns:1fr; }
  .trust-strip { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .booking-card { position:static; }
}
@media (max-width: 640px) {
  .nav-links { display:none; }
  .nav-links.open { display:flex; position:absolute; top:68px; left:0; right:0; flex-direction:column; background:#fff; padding:18px 24px; gap:16px; border-bottom:1px solid var(--line); box-shadow:var(--shadow); }
  .nav-toggle { display:block; }
  .section { padding:58px 0; }
  .trust-strip { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .stat-row { gap:26px; }
}