/* ============ TOKENS ============ */
:root{
  --navy: #0E2036;
  --navy-2: #16314F;
  --navy-3: #0A1626;
  --paper: #F7F3EA;
  --paper-2: #EFE9DB;
  --ink: #1C2B3A;
  --ink-soft: #4B5A6B;
  --brass: #C6963C;
  --brass-light: #E0BD73;
  --red: #C1443D;
  --sky: #6E97A8;
  --perf: #D8D2C2;
  --perf-dark: rgba(255,255,255,0.18);

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Source Serif 4', serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius: 4px;
  --wrap: 1180px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; margin:0; letter-spacing:0.01em; }
p{ margin:0; }
.wrap{ max-width: var(--wrap); margin:0 auto; padding:0 28px; }

.eyebrow{
  font-family: var(--font-mono);
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color: var(--brass);
  margin:0 0 14px;
}
.eyebrow.light{ color: var(--brass-light); }

:focus-visible{
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-mono);
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:13px 22px;
  border-radius: var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{
  background: var(--red);
  color: #fff;
}
.btn-primary:hover{ background:#a83630; }
.btn-ghost{
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}
.btn-ghost:hover{ background: rgba(255,255,255,0.1); }
.btn-arrow{ transition: transform .15s ease; }
.btn:hover .btn-arrow{ transform: translateX(3px); }

/* ============ HEADER ============ */
.site-header{
  position: sticky;
  top:0;
  z-index: 50;
  background: var(--navy);
  border-bottom: 1px solid rgba(198,150,60,0.35);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:24px;
  padding-top:16px;
  padding-bottom:16px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--paper);
  font-family: var(--font-mono);
  font-size:15px;
  font-weight:600;
  margin-right:auto;
}
.logo em{ color: var(--brass-light); font-style:normal; }
.logo-mark{ width:26px; height:26px; color: var(--brass-light); flex-shrink:0; }
.main-nav{ display:flex; gap:28px; }
.main-nav a{
  font-family: var(--font-mono);
  font-size:13px;
  letter-spacing:0.04em;
  color: rgba(247,243,234,0.8);
  transition: color .15s ease;
}
.main-nav a:hover{ color: var(--brass-light); }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--paper); margin:5px 0; }

/* ============ HERO ============ */
.hero{
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-3) 100%);
  color: var(--paper);
  padding: 15px;
  position: relative;
  overflow: hidden;
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:2px;
  background: repeating-linear-gradient(90deg, var(--perf) 0 10px, transparent 10px 20px);
  opacity:0.15; 
}
.hero-inner{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap:56px;
  align-items:start;
}
.hero h1{
  font-size: clamp(34px, 4.4vw, 54px);
  line-height:1.05;
  margin: 6px 0 18px;
  color:#fff;
}
.hero-sub{
  font-size:17px;
  line-height:1.6;
  color: rgba(247,243,234,0.78);
  max-width:46ch;
  margin-bottom:30px;
}

/* Ticket search card */
.ticket-search{
  background: var(--paper);
  color: var(--ink);
  border-radius: 6px;
  padding: 22px 22px 20px;
  position: relative;
  box-shadow: 0 24px 48px rgba(0,0,0,0.35);
}
.ticket-search::before,
.ticket-search::after{
  content:"";
  position:absolute;
  width:22px; height:22px;
  background: var(--navy-3);
  border-radius:50%;
  top:50%;
  transform: translateY(-50%);
}
.ticket-search-row{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:14px;
  align-items:end;
}
.row-perf{
  grid-template-columns: 1fr 1fr 100px;
  margin-top:16px;
  padding-top:16px;
  border-top: 1px dashed var(--perf);
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{
  font-family: var(--font-mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color: var(--ink-soft);
}
.field input, .field select{
  font-family: var(--font-mono);
  font-size:14px;
  padding:10px 10px;
  border:1px solid var(--perf);
  border-radius: var(--radius);
  background:#fff;
  color: var(--ink);
}
.field-icon{
  align-self:center;
  text-align:center;
  color: var(--brass);
  font-size:18px;
  padding-bottom:10px;
}
.field-narrow{ min-width:0; }
.ticket-submit{
  width:100%;
  justify-content:center;
  margin-top:18px;
  font-size:14px;
  padding:15px 22px;
}
.form-msg{
  font-family: var(--font-mono);
  font-size:12.5px;
  color: var(--brass);
  margin-top:10px;
  min-height:16px;
}

/* ============ TRUST STRIP ============ */
.trust-strip{
  background: var(--paper-2);
  border-bottom: 1px solid var(--perf);
}
.trust-inner{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:20px;
  padding: 26px 28px;
  text-align:center;
}
.trust-item strong{
  display:block;
  font-family: var(--font-display);
  font-size:26px;
  color: var(--navy);
}
.trust-item span{
  font-family: var(--font-mono);
  font-size:11.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color: var(--ink-soft);
}

/* ============ ROUTES ============ */
.routes{ padding:80px 0; }
.routes h2{ font-size: clamp(26px,3vw,36px); margin-bottom:10px; color:var(--navy); }
.section-sub{
  color: var(--ink-soft);
  font-size:16px;
  max-width:60ch;
  margin-bottom:40px;
}
.route-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:22px;
}
.route-card{
  position:relative;
  background:#fff;
  border:1px solid var(--perf);
  border-radius:6px;
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.route-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(14,32,54,0.14);
}
.route-img{
  height:190px;
  background-size:cover;
  background-position:center;
}
.route-stamp{
  position:absolute;
  top:14px;
  right:14px;
  font-family: var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  color:#fff;
  background: rgba(14,32,54,0.65);
  border:1px solid rgba(255,255,255,0.5);
  padding:4px 9px;
  border-radius:3px;
  backdrop-filter: blur(2px);
}
.route-body{ padding:16px 18px 20px; }
.route-body h3{ font-size:19px; color:var(--navy); margin-bottom:6px; }
.route-body p{ font-family: var(--font-mono); font-size:13px; color: var(--ink-soft); }
.route-body strong{ color: var(--red); }

/* ============ WHY ============ */
.why{
  background: var(--navy);
  color: var(--paper);
  padding:80px 0;
}
.why h2{ font-size: clamp(26px,3vw,36px); max-width:20ch; margin-bottom:44px; color:#fff; }
.perk-row{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:26px;
}
.perk{
  border-top:2px solid rgba(198,150,60,0.4);
  padding-top:18px;
}
.perk-icon{
  display:inline-flex;
  width:38px; height:38px;
  color: var(--brass-light);
  margin-bottom:14px;
}
.perk-icon svg{ width:100%; height:100%; }
.perk h3{ font-size:17px; color:#fff; margin-bottom:8px; }
.perk p{ font-size:14.5px; line-height:1.55; color: rgba(247,243,234,0.7); }

/* ============ REVIEWS ============ */
.reviews{ padding:80px 0; }
.reviews h2{ font-size: clamp(26px,3vw,36px); margin-bottom:40px; color:var(--navy); }
.review-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:22px;
}
.review-card{
  margin:0;
  background:#fff;
  border:1px solid var(--perf);
  border-left:3px solid var(--brass);
  border-radius:4px;
  padding:24px;
}
.review-card p{
  font-size:15.5px;
  line-height:1.6;
  color: var(--ink);
  margin-bottom:16px;
}
.review-card footer{
  font-family: var(--font-mono);
  font-size:12px;
  color: var(--ink-soft);
  letter-spacing:0.03em;
}

/* ============ CTA BAND ============ */
.cta-band{
  background: var(--navy-3);
  color: var(--paper);
  padding:64px 0;
  border-top: 1px solid rgba(198,150,60,0.25);
}
.cta-inner{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:40px;
  align-items:center;
}
.cta-band h2{ font-size: clamp(24px,2.8vw,32px); color:#fff; margin:6px 0 12px; max-width:18ch; }
.cta-sub{ color: rgba(247,243,234,0.7); font-size:15px; max-width:48ch; }
.signup-form{ display:flex; gap:10px; }
.signup-form input{
  flex:1;
  font-family: var(--font-mono);
  font-size:14px;
  padding:13px 150px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  color:#fff;
}
.signup-form input::placeholder{ color: rgba(247,243,234,0.45); }

/* ============ FOOTER ============ */
.site-footer{ background: var(--navy); color: rgba(247,243,234,0.75); padding-top:56px; }
.footer-inner{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-logo{ margin-bottom:14px; }
.footer-col p{ font-size:13.5px; line-height:1.7; margin-bottom:10px; }
.footer-col h4{
  font-family: var(--font-mono);
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color: var(--brass-light);
  margin-bottom:14px;
}
.footer-col a{
  display:block;
  font-size:14px;
  padding:5px 0;
  color: rgba(247,243,234,0.75);
  transition: color .15s ease;
}
.footer-col a:hover{ color: var(--brass-light); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 28px;
  font-family: var(--font-mono);
  font-size:12px;
  color: rgba(247,243,234,0.45);
}
.to-top{
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2);
  color:#fff;
  width:34px; height:34px;
  border-radius:50%;
  cursor:pointer;
  transition: background .15s ease, transform .15s ease;
}
.to-top:hover{ background: var(--brass); transform: translateY(-2px); }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns:1fr; }
  .route-grid{ grid-template-columns: repeat(2,1fr); }
  .perk-row{ grid-template-columns: repeat(2,1fr); }
  .review-grid{ grid-template-columns: 1fr; }
  .cta-inner{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .main-nav, .nav-cta{ display:none; }
  .main-nav.is-open{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:100%; left:0; right:0;
    background: var(--navy);
    padding:16px 28px 20px;
    gap:16px;
    border-bottom:1px solid rgba(198,150,60,0.35);
  }
  .nav-cta.is-open{
    display:inline-flex;
    position:absolute;
    top:calc(100% + 150px);
    right:28px;
  }
  .site-header{ position:sticky; }
  .nav-toggle{ display:block; }
  .trust-inner{ grid-template-columns: repeat(2,1fr); }
  .route-grid{ grid-template-columns: 1fr; }
  .perk-row{ grid-template-columns: 1fr; }
  .footer-inner{ grid-template-columns: 1fr; }
  .ticket-search-row{ grid-template-columns:1fr; }
  .row-perf{ grid-template-columns:1fr; }
  .field-icon{ display:none; }
}