:root{
  --navy-deep:#081B33;
  --navy-mid:#0A2340;
  --navy-mid-2:#0E2E52;
  --blue:#0878D8;
  --blue-light:#10A0F8;
  --gold:#F8C000;
  --gold-dim:#DB9B00;
  --paper:#EDF4F7;
  --paper-2:#E2ECF0;
  --ink:#0C2A3A;
  --ink-soft:#3C5B6B;
  --muted:#9FB9C7;
  --muted-dim:#7F9DAE;
  --gold-deep:#8A5F00;
  --field-line:#3F7391;
  --line:#154A68;
  --font-display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:'Open Sans', 'Segoe UI', Arial, sans-serif;
  --font-mono:'Open Sans', 'Segoe UI', Arial, sans-serif;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
}

*{ box-sizing:border-box; }
html{ color-scheme:dark; }

body{
  margin:0;
  background:var(--navy-deep);
  color:var(--paper);
  font-family:var(--font-body);
  line-height:1.55;
}

.page{
  position:relative;
  max-width:1100px;
  margin:0 auto;
  padding:40px 24px 56px;
}

h1, h2, h3{ text-wrap:balance; margin:0; font-family:var(--font-display); }

/* ---------- top bar ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.brand{ display:block; }
.logo{ display:block; width:210px; height:auto; }

/* ---------- hero copy ---------- */
.hero{ padding:40px 0 26px; max-width:700px; }
.hero .kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:14px;
}
.hero .kicker::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.hero h1{
  font-size:clamp(32px, 5vw, 50px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:0;
  color:var(--paper);
}
.hero p{ margin-top:16px; font-size:16px; color:var(--muted); max-width:56ch; }
.hero .trust{
  margin-top:18px;
  font-size:12.5px;
  font-weight:600;
  color:var(--muted-dim);
  letter-spacing:0.02em;
}

/* ---------- map ---------- */
.map-panel{
  position:relative;
  margin-top:8px;
  background:var(--navy-mid);
  border:1px solid var(--line);
  border-radius:4px;
  padding:8px;
}
.map-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 10px 2px;
  flex-wrap:wrap;
  gap:8px;
}
.map-tag{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gold);
  background:rgba(248,192,0,0.14);
  border:1px solid rgba(248,192,0,0.4);
  border-radius:20px;
  padding:4px 10px;
}
.map-sub{ font-size:11.5px; color:var(--muted-dim); }
.map-view{ overflow:hidden; }
.map-svg{ width:100%; height:auto; display:block; }

.grid-dot{ fill:var(--line); }
.landmass{ fill:var(--navy-mid-2); }
.route-line{
  fill:none;
  stroke:var(--gold);
  stroke-width:1.8;
  stroke-dasharray:1 7;
  stroke-linecap:round;
}
.route-line.draw{ animation:fade-in 1.2s ease-out 0.15s both; }
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }

.pin-stub{ stroke:var(--line); stroke-width:1; stroke-dasharray:2 3; }
.pin-dot{ fill:var(--navy-deep); stroke-width:2; }
.pin-dot.home{ stroke:var(--paper); }
.pin-dot.dest{ stroke:var(--gold); }
.pin-dot.dest.quiet{ stroke:var(--blue); }
.pin-label{ font-family:var(--font-body); font-weight:700; font-size:12px; fill:var(--paper); }
.pin-label.quiet{ fill:var(--muted); font-weight:600; }
.pin-sub{ font-family:var(--font-mono); font-size:9.5px; fill:var(--muted-dim); }
.compass text{ font-family:var(--font-mono); font-size:10px; fill:var(--muted); }
.compass circle, .compass path, .compass line{ stroke:var(--muted-dim); }
.plane-glyph path{ fill:var(--gold); stroke:var(--navy-deep); stroke-width:0.5; }

/* ---------- note ---------- */
.note{
  margin-top:28px;
  background:var(--navy-mid);
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  border-radius:3px;
  padding:18px 22px;
  max-width:620px;
}
.note p{ font-size:15.5px; color:var(--paper); font-weight:500; line-height:1.5; }
.note .sign{ margin-top:10px; font-size:12.5px; font-weight:700; color:var(--muted); letter-spacing:0.02em; }

/* ---------- packages ---------- */
.packages{ margin-top:58px; }
.group{ margin-bottom:40px; }
.group:last-child{ margin-bottom:0; }
.group-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px; }
.group-head h2{ font-size:21px; font-weight:700; color:var(--paper); }
.group-head .count{ font-family:var(--font-mono); font-size:12.5px; color:var(--muted-dim); }

.cards-row{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding-bottom:10px;
  margin:0 -2px;
  padding-left:2px;
  padding-right:2px;
}
.card{
  flex:0 0 268px;
  scroll-snap-align:start;
  background:var(--paper);
  color:var(--ink);
  border-radius:3px;
  padding:16px 16px 14px;
  display:flex;
  flex-direction:column;
}
.card .stars{ color:var(--gold-deep); font-size:12px; letter-spacing:1px; }
.card .name{ font-size:16.5px; font-weight:700; font-family:var(--font-body); color:var(--ink); margin-top:6px; line-height:1.25; }
.card .meta{ font-size:12px; color:var(--ink-soft); margin-top:5px; }
.card .highlight{
  font-size:12.5px;
  color:var(--navy-mid);
  background:var(--paper-2);
  border-radius:3px;
  padding:7px 9px;
  margin-top:10px;
  font-weight:600;
  line-height:1.35;
}
.card .price-row{ margin-top:auto; padding-top:14px; }
.card .price{ font-size:19px; font-weight:800; color:var(--navy-mid); font-variant-numeric:tabular-nums; }
.card .price .pps{ font-size:11px; font-weight:600; color:var(--ink-soft); }
.card .fine{
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--ink-soft);
  margin-top:6px;
  line-height:1.5;
}
.card .enquire{
  margin-top:12px;
  width:100%;
  background:var(--gold);
  color:var(--navy-deep);
  border:none;
  border-radius:3px;
  padding:9px 10px;
  font-family:var(--font-body);
  font-weight:800;
  font-size:13px;
  cursor:pointer;
}
.card .enquire{ display:block; text-align:center; text-decoration:none; }
.card .enquire:hover{ background:#e3ae00; }

/* ---------- inquiry form ---------- */
.inquiry{
  margin-top:64px;
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:34px;
  align-items:start;
}
.inquiry .intro h2{ font-size:23px; font-weight:700; color:var(--paper); }
.inquiry .intro p{ margin-top:10px; font-size:14px; color:var(--muted); max-width:34ch; }

.form-card{
  background:var(--navy-mid);
  border:1px solid var(--line);
  border-radius:4px;
  padding:22px;
}
.field{ margin-bottom:14px; }
.field label{
  display:block;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}
.field input, .field select, .field textarea{
  width:100%;
  background:var(--navy-deep);
  border:1px solid var(--field-line);
  border-radius:2px;
  color:var(--paper);
  font-family:var(--font-body);
  font-size:14px;
  padding:9px 10px;
}
.field textarea{ resize:vertical; min-height:70px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--gold);
  outline-offset:1px;
}
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.send-btn{
  margin-top:4px;
  background:var(--gold);
  color:var(--navy-deep);
  border:none;
  border-radius:2px;
  padding:11px 20px;
  font-family:var(--font-body);
  font-weight:800;
  font-size:14px;
  cursor:pointer;
}
.send-btn:hover{ background:#e3ae00; }
.form-note{ margin-top:10px; font-size:12px; color:var(--muted-dim); }

/* ---------- footer ---------- */
footer{
  margin-top:56px;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.footer-note{ font-size:13px; color:var(--muted); }
.footer-note a{ color:var(--gold); text-decoration:none; border-bottom:1px solid var(--gold-dim); }
.footer-note a:hover{ color:var(--paper); border-color:var(--paper); }
.footer-copy{ font-family:var(--font-mono); font-size:12px; color:var(--muted-dim); }

a:focus-visible, button:focus-visible, select:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

@media (max-width:720px){
  .inquiry{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .page{ padding:30px 16px 40px; }
  .logo{ width:160px; }
  .two-col{ grid-template-columns:1fr; }
  .card{ flex-basis:240px; }
}

/* honeypot: off-screen, not display:none, so naive bots still fill it */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.field input[aria-invalid="true"], .field select[aria-invalid="true"]{ border-color:#FF8A7A; }
.field-error{ margin-top:5px; font-size:12px; color:#FFA89B; }
.form-status{ margin-top:12px; font-size:13.5px; font-weight:600; padding:10px 12px; border-radius:3px; }
.form-status:empty{ display:none; }
.form-status.ok{ color:var(--paper); background:rgba(248,192,0,0.14); border:1px solid rgba(248,192,0,0.4); }
.form-status.err{ color:#FFD2CB; background:rgba(255,138,122,0.12); border:1px solid rgba(255,138,122,0.45); }
.form-status a{ color:var(--gold); }
.send-btn:disabled{ opacity:0.6; cursor:progress; }
.empty-note{ color:var(--muted); font-size:15px; }

/* phones: app.js crops the map viewBox to the main route, so enlarge SVG-unit sizes to stay readable */
@media (max-width:640px){
  .pin-label{ font-size:17px; }
  .pin-sub{ font-size:13px; }
  .route-line{ stroke-width:2.5; }
  .pin-dot{ r:6px; }
  .plane-scale{ transform:scale(1.1); }
  .map-view{ overflow:hidden; }
  .map-svg{ width:155%; max-width:none; margin-top:-20.7%; }
}

/* skip link, section nav */
.skip{ position:absolute; left:-9999px; top:8px; background:var(--gold); color:var(--navy-deep); font-weight:700; padding:8px 14px; border-radius:3px; z-index:10; text-decoration:none; }
.skip:focus{ left:8px; }
.nav{ display:flex; gap:22px; }
.nav a{ color:var(--paper); font-size:14px; font-weight:600; text-decoration:none; border-bottom:2px solid transparent; padding:4px 0; }
.nav a:hover{ border-bottom-color:var(--gold); }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
@media (max-width:520px){ .nav{ gap:16px; } }