/* JETFUL™ Luxury Design System & Avionics Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --bg-obsidian: #07090e;
  --bg-carbon: #0d121c;
  --bg-card: #111723;
  --bg-card-hover: #161f30;
  --border-subtle: rgba(212, 175, 55, 0.15);
  --border-active: rgba(212, 175, 55, 0.45);
  --gold-primary: #d4af37;
  --gold-light: #f3e5ab;
  --gold-glow: rgba(212, 175, 55, 0.25);
  --crimson-vegas: #e11d48;
  --crimson-glow: rgba(225, 29, 72, 0.35);
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --font-display: 'Cinzel', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --shadow-luxury: 0 20px 50px rgba(0, 0, 0, 0.6);
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

body {
  background-color: var(--bg-obsidian);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* Background Atmosphere */
body::before {
  content: '';
  position: fixed;
  top: -20%;
  left: 20%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, rgba(7, 9, 14, 0) 70%);
  z-index: -2;
  pointer-events: none;
}

body::after {
  content: '';
  position: fixed;
  bottom: -20%;
  right: 10%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(225, 29, 72, 0.04) 0%, rgba(7, 9, 14, 0) 70%);
  z-index: -1;
  pointer-events: none;
}

/* Telemetry Ribbon */
.telemetry-ribbon {
  background: rgba(13, 18, 28, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 6px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-secondary);
  z-index: 100;
  position: relative;
}

.telemetry-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

.telemetry-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.telemetry-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--crimson-vegas);
  box-shadow: 0 0 8px var(--crimson-vegas);
  animation: pulse 2s infinite;
}

.telemetry-dot.gold {
  background-color: var(--gold-primary);
  box-shadow: 0 0 8px var(--gold-primary);
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* Navigation */
.navbar {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(7, 9, 14, 0.88);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 16px 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--transition-fast);
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-primary);
}

.logo-symbol {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--gold-primary) 0%, #8c6d1f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #07090e;
  box-shadow: 0 4px 15px var(--gold-glow);
}

.logo-text {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  background: linear-gradient(180deg, #ffffff 40%, #c4cfde 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-sub {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--gold-primary);
  letter-spacing: 0.2em;
  display: block;
  margin-top: -4px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: var(--transition-fast);
  position: relative;
  padding: 6px 0;
}

.nav-link:hover, .nav-link.active {
  color: var(--gold-light);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1px;
  background: var(--gold-primary);
  transition: var(--transition-fast);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Button System */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-smooth);
  border: 1px solid transparent;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold-primary) 0%, #b89228 100%);
  color: #07090e;
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(212, 175, 55, 0.5);
  background: linear-gradient(135deg, #e5c378 0%, #d4af37 100%);
}

.btn-outline {
  background: transparent;
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.btn-outline:hover {
  border-color: var(--gold-primary);
  background: rgba(212, 175, 55, 0.08);
  color: var(--gold-light);
}

.btn-crimson {
  background: linear-gradient(135deg, var(--crimson-vegas) 0%, #be123c 100%);
  color: #ffffff;
  box-shadow: 0 4px 20px var(--crimson-glow);
}

.btn-crimson:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(225, 29, 72, 0.6);
  background: linear-gradient(135deg, #f43f5e 0%, var(--crimson-vegas) 100%);
}

/* Hero Section */
.hero-section {
  position: relative;
  padding: 80px 24px 100px;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--gold-primary);
  margin-bottom: 24px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
  text-transform: uppercase;
}

.hero-title span.gold-text {
  background: linear-gradient(135deg, #fce99f 0%, #d4af37 60%, #aa8421 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-title span.crimson-text {
  background: linear-gradient(135deg, #fda4af 0%, #e11d48 60%, #be123c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--text-secondary);
  max-width: 820px;
  margin: 0 auto 40px;
  font-weight: 300;
  line-height: 1.7;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 60px;
  flex-wrap: wrap;
}

/* Key Metrics Telemetry Bar */
.telemetry-metrics-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 40px;
}

.metric-card {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.metric-card:hover {
  border-color: var(--border-active);
  transform: translateY(-4px);
  background: var(--bg-card-hover);
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gold-primary);
  opacity: 0.7;
}

.metric-card.crimson-border::before {
  background: var(--crimson-vegas);
}

.metric-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.metric-val {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.metric-sub {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Section Shells */
.section-wrapper {
  padding: 100px 24px;
  max-width: 1240px;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 60px;
}

.section-pretitle {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--gold-primary);
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 0.03em;
}

.section-desc {
  font-size: 1.05rem;
  color: var(--text-secondary);
  font-weight: 300;
}

/* The Vegas Transit Engine (The 5-Stage Visualizer) */
.transit-engine-container {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-luxury);
  position: relative;
}

.stage-nav-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 40px;
  overflow-x: auto;
  padding-bottom: 12px;
}

.stage-btn {
  flex: 1;
  min-width: 180px;
  background: rgba(13, 18, 28, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-fast);
  position: relative;
}

.stage-btn:hover {
  background: rgba(212, 175, 55, 0.06);
  border-color: var(--border-subtle);
}

.stage-btn.active {
  background: rgba(212, 175, 55, 0.12);
  border-color: var(--gold-primary);
  box-shadow: 0 4px 20px var(--gold-glow);
}

.stage-number {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold-primary);
  margin-bottom: 4px;
  display: block;
}

.stage-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.stage-display-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}

.stage-info h3 {
  font-family: var(--font-display);
  font-size: 2rem;
  margin-bottom: 16px;
  color: var(--gold-light);
}

.stage-info p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin-bottom: 24px;
  line-height: 1.7;
}

.stage-perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}

.stage-perk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text-primary);
}

.stage-perk-icon {
  color: var(--gold-primary);
  font-weight: bold;
}

.stage-visual {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 340px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.stage-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.stage-visual:hover img {
  transform: scale(1.04);
}

.stage-visual-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(7, 9, 14, 0.85);
  backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--gold-light);
}

/* Destinations Grid */
.destinations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.destination-card {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
}

.destination-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-active);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
}

.destination-img-box {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.destination-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.destination-card:hover .destination-img-box img {
  transform: scale(1.05);
}

.destination-flight-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(7, 9, 14, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-subtle);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--gold-primary);
  font-weight: 600;
}

.destination-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.destination-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.destination-craft {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.destination-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 20px;
  flex-grow: 1;
}

.destination-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 16px;
}

.destination-cohort {
  font-size: 0.8rem;
  color: var(--gold-light);
  font-weight: 500;
}

/* 48-Hour Interactive Itinerary */
.itinerary-timeline-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 40px;
}

.day-switcher {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
}

.day-btn {
  padding: 12px 28px;
  border-radius: 8px;
  background: rgba(13, 18, 28, 0.8);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.day-btn:hover {
  color: var(--gold-primary);
  border-color: var(--gold-primary);
}

.day-btn.active {
  background: var(--gold-primary);
  color: #07090e;
  font-weight: 700;
  box-shadow: 0 4px 15px var(--gold-glow);
  border-color: var(--gold-primary);
}

.timeline-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.timeline-event-card {
  background: rgba(7, 9, 14, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  padding: 24px;
  position: relative;
  transition: var(--transition-fast);
}

.timeline-event-card:hover {
  border-color: var(--border-subtle);
  background: rgba(13, 18, 28, 0.8);
}

.event-time {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--gold-primary);
  font-weight: 700;
  margin-bottom: 8px;
}

.event-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.event-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Pricing & Tier Calculator */
.pricing-calculator-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 44px;
}

.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.tier-select-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tier-option {
  /* Rendered as a <button> so keyboard users can reach and pick a tier;
     these resets keep it looking like the original card. */
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 20px;
  cursor: pointer;
  background: rgba(7, 9, 14, 0.5);
  transition: var(--transition-fast);
}

.tier-option:hover {
  border-color: var(--border-subtle);
}

.tier-option:focus-visible,
.modal-close-btn:focus-visible {
  outline: 2px solid var(--gold-primary);
  outline-offset: 2px;
}

.tier-option.selected {
  border-color: var(--gold-primary);
  background: rgba(212, 175, 55, 0.08);
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.15);
}

.tier-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.tier-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.tier-price {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--gold-primary);
  font-weight: 700;
}

.tier-note {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.calc-summary-card {
  background: rgba(7, 9, 14, 0.8);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 32px;
}

.summary-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin-bottom: 20px;
  color: var(--gold-light);
}

.summary-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 20px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.summary-row span:last-child {
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.summary-total-label {
  font-size: 1.1rem;
  font-weight: 700;
}

.summary-total-val {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold-primary);
}

/* Modals */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(7, 9, 14, 0.85);
  backdrop-filter: blur(12px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-backdrop.open {
  display: flex;
}

.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-lg);
  max-width: 650px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
  padding: 36px;
  position: relative;
}

.modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.modal-close-btn:hover {
  color: var(--gold-primary);
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  background: rgba(7, 9, 14, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: var(--transition-fast);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--gold-primary);
  box-shadow: 0 0 10px var(--gold-glow);
}

/* Footer */
.footer {
  background: #040608;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 60px 24px 30px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand p {
  margin-top: 12px;
  max-width: 340px;
  line-height: 1.6;
}

.footer-col h4 {
  font-family: var(--font-display);
  color: var(--text-primary);
  font-size: 1rem;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition-fast);
}

.footer-links a:hover {
  color: var(--gold-primary);
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 12px;
}

/* Responsive Breakpoints */
@media (max-width: 900px) {
  .stage-display-card {
    grid-template-columns: 1fr;
  }
  .calc-grid {
    grid-template-columns: 1fr;
  }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 650px) {
  .telemetry-ribbon {
    display: none;
  }
  .navbar {
    padding: 14px 20px;
  }
  .nav-menu {
    display: none;
  }
  .footer-inner {
    grid-template-columns: 1fr;
  }
}

/* --- Header fit -------------------------------------------------------------
   Between the 650px mobile breakpoint and full desktop, the five nav labels
   plus two action buttons wrapped onto two lines. Keep every label intact and
   tighten the spacing instead of letting the header grow. */
.nav-link,
.nav-actions .btn {
  white-space: nowrap;
}

/* The five labels plus both action buttons need roughly 1250px. Below that the
   labels used to slide under "Deck & Model" and push "Apply for Flight" off the
   edge, so drop the label row early and keep the two buttons — every section it
   pointed at is still reachable by scrolling. */
@media (max-width: 1250px) {
  .nav-menu {
    display: none;
  }
}

@media (max-width: 1400px) {
  .nav-menu {
    gap: 20px;
  }
  .nav-link {
    font-size: 0.82rem;
  }
}

/* The telemetry ribbon reflows into a ragged two-line block on narrow laptops. */
@media (max-width: 1000px) {
  .telemetry-ribbon {
    display: none;
  }
}

/* On phones the brand lockup plus both nowrap action buttons overflow the
   navbar and get cut off by body{overflow-x:hidden}. Drop the secondary button
   and the brand subtitle so the primary CTA always stays reachable. */
@media (max-width: 700px) {
  .navbar {
    gap: 12px;
  }
  .logo-sub {
    display: none;
  }
  .nav-actions .btn-outline {
    display: none;
  }
}

@media (max-width: 420px) {
  .nav-actions .btn {
    padding: 8px 12px;
    font-size: 0.78rem;
  }
}

/* --- Links back to the parent site -----------------------------------------
   This page is published under jkcastor.com/jetful/, so it carries reciprocal
   links home. The nav row hides below 1250px, so the footer copy is the link
   that survives on phones. */
.nav-link-parent {
  color: var(--text-primary);
  font-weight: 600;
}

.footer-parent {
  margin-top: 16px;
  font-size: 0.86rem;
  line-height: 1.7;
}

.footer-parent a,
.footer-bottom-link {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-parent a:hover,
.footer-bottom-link:hover {
  opacity: 0.75;
}