:root{
  --cream:#F2ECE3;
  --navy:#133874;
  --sage:#58635C;
  --olive:#546221;
  --gold:#EBD08E;
  --ink:#1c2420;
  --mid:#5b6158;
  --white:#fffdf9;
  --radius:14px;
  --p:0;
  --tile-navy:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34"%3E%3Cpath d="M17 3 L21 14 L32 17 L21 20 L17 31 L13 20 L2 17 L13 14 Z" fill="%23133874"/%3E%3Ccircle cx="17" cy="17" r="3.2" fill="%23F2ECE3"/%3E%3C/svg%3E');
  --tile-sage:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34"%3E%3Cpath d="M17 3 L21 14 L32 17 L21 20 L17 31 L13 20 L2 17 L13 14 Z" fill="%2358635C"/%3E%3Ccircle cx="17" cy="17" r="3.2" fill="%23F2ECE3"/%3E%3C/svg%3E');
  --tile-olive:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34"%3E%3Cpath d="M17 3 L21 14 L32 17 L21 20 L17 31 L13 20 L2 17 L13 14 Z" fill="%23546221"/%3E%3Ccircle cx="17" cy="17" r="3.2" fill="%23F2ECE3"/%3E%3C/svg%3E');
  --tile-gold:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34"%3E%3Cpath d="M17 3 L21 14 L32 17 L21 20 L17 31 L13 20 L2 17 L13 14 Z" fill="%23EBD08E"/%3E%3Ccircle cx="17" cy="17" r="3.2" fill="%23F2ECE3"/%3E%3C/svg%3E');
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Fraunces","Georgia",serif; line-height:1.05; margin:0 0 .5rem; font-weight:600; letter-spacing:-.01em;}
p{font-family:"Inter","Helvetica Neue",Arial,sans-serif; line-height:1.65; color:var(--mid); margin:0 0 1rem;}
a{color:inherit;}
.container{max-width:1120px; margin:0 auto; padding:0 1.5rem;}
img{max-width:100%; display:block;}
::selection{background:var(--gold); color:var(--navy);}

/* ===== Azulejo tile motifs (SVG, drawn in code) ===== */
.tile-frieze{
  height:34px;
  background-repeat:repeat-x;
  background-size:34px 34px;
  background-position:center;
}
.tile-frieze.tone-navy{background-image:var(--tile-navy);}
.tile-frieze.tone-sage{background-image:var(--tile-sage);}
.tile-frieze.tone-olive{background-image:var(--tile-olive);}
.tile-frieze.tone-gold{background-image:var(--tile-gold);}

/* ===== Scroll progress — "coast to huerta" bar ===== */
.coast-bar{
  position:fixed; top:0; left:0; right:0; height:4px; z-index:999;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--navy) 100%, transparent) 0%,
    color-mix(in srgb, var(--sage) 100%, transparent) 40%,
    color-mix(in srgb, var(--olive) 100%, transparent) 70%,
    color-mix(in srgb, var(--gold) 100%, transparent) 100%);
  transform-origin:left;
  transform:scaleX(var(--p));
}

/* ===== Header — floating glass pill ===== */
header{
  position:sticky; top:0; z-index:200;
  padding:1.1rem 1.5rem 0; background:transparent; pointer-events:none;
}
.nav-grid{
  pointer-events:auto;
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:1rem; padding:.7rem .7rem .7rem 1.3rem;
  max-width:1120px; margin:0 auto;
  background-color:rgba(255,255,255,.16);
  background-image:linear-gradient(135deg, rgba(255,255,255,.4), rgba(255,255,255,0) 50%);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.4);
  border-radius:999px;
  box-shadow:
    0 8px 32px rgba(19,56,116,.2),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.1);
}
@supports not (backdrop-filter:blur(1px)){
  .nav-grid{background-color:rgba(255,253,249,.92);}
}
.logo{
  font-family:"Fraunces",Georgia,serif; font-weight:700; font-size:1.15rem;
  color:var(--navy); text-decoration:none; letter-spacing:.2px;
  display:flex; align-items:center; gap:.5rem;
}
.logo .mark{
  width:30px; height:30px; border-radius:50%;
  background:var(--navy); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:"Inter",Arial,sans-serif; font-weight:800; font-size:.8rem;
}
nav.main-links{
  display:flex; justify-self:center; gap:1.8rem;
  font-family:"Inter",Arial,sans-serif; font-size:.92rem;
}
nav.main-links a{text-decoration:none; color:var(--ink); opacity:.85;}
nav.main-links a:hover{opacity:1; color:var(--navy);}
.nav-cta{
  justify-self:end; display:flex; align-items:center; gap:.8rem;
}
.btn{
  font-family:"Inter",Arial,sans-serif; font-weight:700; font-size:.88rem;
  padding:.6rem 1.2rem; border-radius:999px; text-decoration:none; white-space:nowrap;
  display:inline-block; border:2px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--navy); color:var(--white);}
.btn-primary:hover{background:#0d2a58;}
.btn-outline{background:transparent; border-color:var(--navy); color:var(--navy);}
.btn-outline:hover{background:var(--navy); color:var(--white);}
.btn-gold{background:var(--gold); color:var(--navy);}
.btn-gold:hover{background:#e2c073;}
.btn-outline-light{background:transparent; border-color:rgba(255,253,249,.55); color:var(--white);}
.btn-outline-light:hover{background:rgba(255,253,249,.12); border-color:var(--white);}

.nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  width:34px; height:34px; padding:0; position:relative;
}
.nav-toggle span{
  position:absolute; left:6px; right:6px; height:2px; background:var(--navy);
  transition:transform .2s, opacity .2s;
}
.nav-toggle span:nth-child(1){top:11px;}
.nav-toggle span:nth-child(2){top:17px;}
.nav-toggle span:nth-child(3){top:23px;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ===== Hero — full-bleed photo, iOS-glass search panel ===== */
.hero{
  position:relative; overflow:hidden; min-height:94vh;
  display:flex; align-items:flex-end; margin-top:-5.6rem; padding-top:5.6rem;
}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;}
.hero-scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(13,30,58,.18) 0%, rgba(13,30,58,.4) 55%, rgba(8,20,40,.8) 100%);
}
.hero-content{position:relative; z-index:1; width:100%; padding:6rem 1.5rem 4rem;}
.eyebrow{
  font-family:"Inter",sans-serif; text-transform:uppercase; letter-spacing:.16em;
  font-size:.74rem; color:var(--gold); font-weight:700; margin-bottom:1.2rem;
  display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--gold);}
.hero-title{
  font-family:"Inter",sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size:clamp(2.3rem,5.8vw,4.4rem); color:var(--white); line-height:1.06;
  max-width:17ch; margin:0 0 2.2rem; text-shadow:0 12px 34px rgba(0,0,0,.25);
}

/* Glass search panel */
.glass-search{
  position:relative;
  background-color:rgba(19,56,116,.12);
  background-image:linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.4);
  border-radius:26px; padding:.5rem;
  width:100%; /* no max-width: the embedded widget mis-renders (collapsed date field) when an ancestor has any max-width set */
  box-shadow:
    0 14px 34px rgba(5,14,28,.2),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(255,255,255,.08);
}
@supports not (backdrop-filter:blur(1px)){
  .glass-search{background-color:rgba(13,30,58,.7);}
}
.hero-footer-row{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap;
  gap:1.8rem; margin-top:2.2rem; max-width:1000px;
}
.hero-note{border-left:2px solid var(--gold); padding-left:1rem; max-width:36ch;}
.hero-note p{color:#e7ecf5; font-size:.92rem; margin:0;}
.hero-mini-stats{display:flex; gap:1.8rem; flex-wrap:wrap;}
.hero-mini-stats .num{
  display:block; font-family:"Inter",sans-serif; font-weight:800;
  font-size:1.3rem; color:var(--white);
}
.hero-mini-stats .lbl{font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:#c8d3e8;}

@media (max-width:900px){
  .hero{min-height:82vh;}
  .hero-content{padding:5.5rem 1.2rem 3rem;}
}
@media (max-width:600px){
  .glass-search{border-radius:22px; padding:.6rem;}
  .hero-footer-row{flex-direction:column; align-items:flex-start; gap:1.4rem;}
}

/* ===== Sections ===== */
section{padding:3.4rem 0;}
.section-label{
  font-family:"Inter",Arial,sans-serif; text-transform:uppercase; letter-spacing:.12em;
  font-size:.75rem; font-weight:700; color:var(--olive); margin-bottom:.7rem;
  display:flex; align-items:center; justify-content:center; gap:.55rem;
}
.section-label::before{
  content:""; width:15px; height:15px; flex-shrink:0;
  background-image:var(--tile-olive); background-size:contain; background-repeat:no-repeat;
}
.tone-navy-deep .section-label::before{background-image:var(--tile-gold);}
h2{font-size:clamp(1.5rem,2.6vw,2.05rem); color:var(--navy); text-align:center;}
.section-intro{max-width:none; margin-left:auto; margin-right:auto; text-align:center; font-size:1.02rem;}

/* Direct-route section keeps its text column left-aligned — it sits beside the map, not full-width */
.direct-grid .section-label{justify-content:flex-start;}
.direct-grid h2,.direct-grid .section-intro{text-align:left; margin-left:0; margin-right:0;}

/* Direct-route text + map, side by side */
.direct-grid{display:grid; grid-template-columns:1fr 1fr; gap:2.4rem; align-items:center;}
@media (max-width:860px){ .direct-grid{grid-template-columns:1fr;} }

/* Direct-route illustrated map — floating glass frame, echoes the hero's glass-search panel */
.direct-map{
  position:relative;
  margin:0; border-radius:26px; padding:.9rem;
  background-color:rgba(255,255,255,.3);
  background-image:linear-gradient(135deg, rgba(255,255,255,.32), rgba(255,255,255,0) 55%);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:
    0 20px 44px rgba(19,56,116,.18),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.1);
}
@supports not (backdrop-filter:blur(1px)){ .direct-map{background-color:rgba(255,253,249,.92);} }
.direct-map img{width:100%; height:auto; display:block; border-radius:18px;}
/* Glossy iOS-glass sheen riding on top of the photo itself */
.direct-map::after{
  content:""; position:absolute; inset:.9rem; border-radius:18px; pointer-events:none;
  background:linear-gradient(125deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.12) 22%,
    rgba(255,255,255,0) 42%,
    rgba(255,255,255,0) 70%,
    rgba(255,255,255,.22) 100%);
  mix-blend-mode:screen;
}
.direct-map figcaption{
  padding:.9rem .5rem 0; font-family:"Inter",Arial,sans-serif; font-size:.85rem;
  color:var(--mid);
}
/* ===== Section backdrops — soft mesh-gradient color washes (echo the hero's colorfulness instead of flat fills) =====
   Blobs anchor to edges with an absolute px offset (not a %) so they read the
   same near the top/bottom of a section regardless of how tall its content
   makes it — a pure percentage position gets lost in the middle of tall sections. */
.tone-cream{
  background-color:var(--cream);
  background-image:
    radial-gradient(640px 640px at 6% -10%, rgba(235,208,142,.85), transparent 52%),
    radial-gradient(600px 600px at 98% 5%, rgba(84,98,33,.55), transparent 52%),
    radial-gradient(640px 640px at 30% 105%, rgba(19,56,116,.4), transparent 52%),
    radial-gradient(520px 520px at 75% 55%, rgba(88,99,92,.35), transparent 55%);
}
.tone-sand{
  background-color:#ece2cd;
  background-image:
    radial-gradient(640px 640px at 95% -10%, rgba(235,208,142,.85), transparent 52%),
    radial-gradient(600px 600px at 5% 105%, rgba(19,56,116,.35), transparent 55%);
}
.tone-mist{
  background-color:#eef2ef;
  background-image:
    radial-gradient(660px 660px at 96% -8%, rgba(19,56,116,.5), transparent 52%),
    radial-gradient(600px 600px at 3% -5%, rgba(88,99,92,.45), transparent 55%),
    radial-gradient(640px 640px at 42% 108%, rgba(235,208,142,.5), transparent 52%);
}
.tone-navy-deep{
  background-color:var(--navy); color:var(--white);
  background-image:
    radial-gradient(680px 680px at 96% -10%, rgba(235,208,142,.4), transparent 52%),
    radial-gradient(620px 620px at 5% 108%, rgba(88,99,92,.6), transparent 55%);
}
.tone-navy-deep h2, .tone-navy-deep .section-label{color:var(--gold);}
.tone-navy-deep p{color:#cfd9ea;}

/* Per-section accent tint — same base wash, different color story per topic */
#corridor{
  background-image:
    radial-gradient(660px 660px at 4% -8%, rgba(84,98,33,.6), transparent 52%),
    radial-gradient(600px 600px at 96% -5%, rgba(235,208,142,.6), transparent 52%),
    radial-gradient(640px 640px at 33% 108%, rgba(19,56,116,.3), transparent 55%);
}
#onboard{
  background-image:
    radial-gradient(660px 660px at 96% -8%, rgba(235,208,142,.7), transparent 52%),
    radial-gradient(600px 600px at 4% -5%, rgba(84,98,33,.4), transparent 55%),
    radial-gradient(640px 640px at 42% 108%, rgba(88,99,92,.35), transparent 52%);
}
#cities{
  background-image:
    radial-gradient(640px 640px at 3% -8%, rgba(19,56,116,.45), transparent 52%),
    radial-gradient(620px 620px at 97% -5%, rgba(235,208,142,.7), transparent 52%),
    radial-gradient(640px 640px at 46% 108%, rgba(84,98,33,.4), transparent 55%);
}
#faq{
  background-image:
    radial-gradient(660px 660px at 96% -8%, rgba(19,56,116,.4), transparent 52%),
    radial-gradient(600px 600px at 4% 105%, rgba(235,208,142,.45), transparent 55%);
}
#tips{
  background-image:
    radial-gradient(660px 660px at 5% -8%, rgba(235,208,142,.8), transparent 52%),
    radial-gradient(600px 600px at 95% -5%, rgba(19,56,116,.3), transparent 55%),
    radial-gradient(640px 640px at 40% 108%, rgba(84,98,33,.35), transparent 52%);
}

.widget-shell{
  background:rgba(255,253,249,.9);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:19px; padding:.3rem;
}
@supports not (backdrop-filter:blur(1px)){
  .widget-shell{background:var(--white);}
}
/* The embedded widget's own root grid ships with 64px top/bottom padding
   (sized for a taller embed on its own site) — trim it so the card doesn't
   trail a slab of empty space below the disclaimer line. */
#firebird-search-widget > div:first-child{
  padding-top:20px !important;
  padding-bottom:20px !important;
}

/* Operator cards — styled as train tickets */
.op-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; margin-top:2.4rem;}
.ticket-card{
  display:flex; border-radius:14px; overflow:visible;
  box-shadow:0 16px 32px rgba(19,56,116,.09);
  transform:rotate(var(--tilt,0deg));
  transition:transform .25s ease, box-shadow .25s ease;
  position:relative;
}
.ticket-card:nth-child(1){--tilt:-1.4deg;}
.ticket-card:nth-child(2){--tilt:1deg;}
.ticket-card:nth-child(3){--tilt:-0.7deg;}
.ticket-card:hover{transform:rotate(0deg) translateY(-4px); box-shadow:0 22px 40px rgba(19,56,116,.14);}
.ticket-main{
  flex:1; min-width:0; padding:1.7rem 1.5rem; border-radius:14px 0 0 14px; overflow:hidden;
  background-color:rgba(255,255,255,.38);
  background-image:linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
@supports not (backdrop-filter:blur(1px)){
  .ticket-main{background-color:rgba(255,253,249,.92);}
}
.ticket-photo{
  position:relative; height:132px;
  margin:-1.7rem -1.5rem 1rem; border-radius:14px 0 0 0;
  overflow:hidden;
}
.ticket-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.ticket-photo .ticket-tag{
  position:absolute; left:.8rem; bottom:.7rem; margin-bottom:0;
  color:var(--white);
  background-color:rgba(19,56,116,.4);
  background-image:linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(255,255,255,.4);
  border-radius:999px; padding:.32rem .8rem;
  box-shadow:0 6px 16px rgba(5,14,28,.25), inset 0 1px 0 rgba(255,255,255,.4);
}
@supports not (backdrop-filter:blur(1px)){
  .ticket-photo .ticket-tag{background-color:rgba(13,30,58,.72);}
}
.ticket-tag{
  display:inline-block; font-family:"Inter",sans-serif; font-size:.68rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; color:var(--op-color, var(--navy));
  margin-bottom:.6rem;
}
.ticket-main h3{color:var(--navy); font-size:1.2rem; margin-bottom:.6rem;}
.ticket-main p{font-size:.9rem; margin:0 0 .9rem;}
.op-cta{
  display:inline-block; font-family:"Inter",Arial,sans-serif; font-weight:700; font-size:.82rem;
  color:var(--op-text, var(--op-color, var(--navy)));
  border-bottom:2px solid var(--op-text, var(--op-color, var(--navy)));
  text-decoration:none; padding-bottom:.1rem;
}
.op-cta:hover{opacity:.75;}
.ticket-perforation{
  width:0; position:relative;
  border-left:2px dashed rgba(19,56,116,.22);
  margin:14px 0;
}
.ticket-perforation::before,.ticket-perforation::after{
  content:""; position:absolute; left:-9px; width:18px; height:18px; border-radius:50%;
  background:var(--cream);
}
.ticket-perforation::before{top:-14px;}
.ticket-perforation::after{bottom:-14px;}
.ticket-stub{
  width:108px; flex-shrink:0; border-radius:0 14px 14px 0;
  color:var(--op-text, var(--white));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem;
  padding:1.4rem .7rem;
  background-color:color-mix(in srgb, var(--op-color, var(--navy)) 48%, transparent);
  background-image:linear-gradient(160deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,.35);
}
@supports not (backdrop-filter:blur(1px)){
  .ticket-stub{background-color:var(--op-color, var(--navy));}
}
.ticket-route{font-family:"Fraunces",Georgia,serif; font-size:1.05rem; font-weight:600; letter-spacing:.02em;}
.ticket-class{font-family:"Inter",sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.1em; opacity:.85;}
.ticket-barcode{
  width:64px; height:26px;
  background-image:repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px);
  opacity:.8;
}
.op-table{
  width:100%; border-collapse:collapse; margin-top:2rem; font-family:"Inter",Arial,sans-serif; font-size:.9rem;
  border-radius:var(--radius); overflow:hidden;
  background-color:rgba(255,255,255,.38);
  background-image:linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.5);
}
@supports not (backdrop-filter:blur(1px)){ .op-table{background-color:rgba(255,253,249,.92);} }
.op-table th,.op-table td{text-align:left; padding:.7rem .9rem; border-bottom:1px solid rgba(19,56,116,.12);}
.op-table th{color:var(--navy); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em;}
.overflow-x{overflow-x:auto;}

/* Stations */
.station-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; margin-top:1.6rem;}
.station-card{
  border-radius:var(--radius); overflow:hidden; padding-bottom:1.6rem;
  background-color:rgba(255,255,255,.38);
  background-image:linear-gradient(135deg, rgba(255,255,255,.32), rgba(255,255,255,0) 55%);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 10px 24px rgba(19,56,116,.08);
  transition:transform .3s ease, box-shadow .3s ease;
}
.station-card:hover{transform:translateY(-6px); box-shadow:0 22px 40px rgba(19,56,116,.18);}
@supports not (backdrop-filter:blur(1px)){ .station-card{background-color:rgba(255,253,249,.94);} }
.station-card img{width:100%; height:180px; object-fit:cover; display:block; transition:transform .5s ease;}
.station-card:hover img{transform:scale(1.06);}
.station-card .station-body{padding:1.4rem 1.6rem 0;}
.station-card h3{color:var(--navy); font-size:1.1rem;}
.station-code{
  font-family:"Inter",Arial,sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--olive); display:block; margin-bottom:.4rem;
}
.note-card{
  margin-top:1.6rem; border-radius:var(--radius); padding:1.3rem 1.5rem;
  border-left:3px solid var(--olive);
  border-top:1px solid rgba(255,255,255,.5); border-right:1px solid rgba(255,255,255,.5); border-bottom:1px solid rgba(255,255,255,.5);
  background-color:rgba(236,226,205,.42);
  background-image:linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
}
@supports not (backdrop-filter:blur(1px)){ .note-card{background-color:#ece2cd;} }
.note-card h3{color:var(--olive); font-size:1rem;}

/* Schedule table (plain — used for luggage) */
table.data{
  width:100%; border-collapse:collapse; margin-top:1.6rem; font-family:"Inter",Arial,sans-serif; font-size:.92rem;
  border-radius:var(--radius); overflow:hidden;
  background-color:rgba(255,255,255,.38);
  background-image:linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.5);
}
@supports not (backdrop-filter:blur(1px)){ table.data{background-color:var(--white);} }
table.data th,table.data td{padding:.75rem 1rem; text-align:left; border-bottom:1px solid #eee2cf;}
table.data th{background:var(--navy); color:var(--gold); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em;}
table.data td.label{color:var(--navy); font-weight:700;}
.fine-note{font-family:"Inter",Arial,sans-serif; font-size:.85rem; color:var(--mid); margin-top:1rem; text-align:center;}

/* Departure board (schedule section signature element) */
.board{
  margin:2rem auto 0; max-width:600px; border-radius:16px;
  padding:1.6rem 1.8rem 1.2rem; position:relative; overflow:hidden;
  box-shadow:0 20px 44px rgba(19,56,116,.22), inset 0 1px 0 rgba(255,255,255,.16);
  background-color:color-mix(in srgb, var(--navy) 58%, transparent);
  background-image:linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,0) 55%);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.28);
}
@supports not (backdrop-filter:blur(1px)){ .board{background-color:var(--navy);} }
.board::before{
  content:""; position:absolute; inset:0; opacity:.06; pointer-events:none;
  background-image:radial-gradient(circle, var(--gold) 1px, transparent 1.4px);
  background-size:10px 10px;
}
.board-head{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem;
  font-family:"Space Mono",monospace; color:var(--gold); font-size:.74rem;
  text-transform:uppercase; letter-spacing:.12em; padding-bottom:1rem;
  border-bottom:1px solid rgba(235,208,142,.3); margin-bottom:.3rem; position:relative;
}
.board-head .dot{color:#6fbf7a; margin-right:.4rem;}
.board-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.85rem 0; border-bottom:1px dashed rgba(235,208,142,.18); position:relative;
}
.board-row:last-child{border-bottom:none;}
.board-label{
  font-family:"Inter",sans-serif; font-size:.82rem; color:#d7e0f2; letter-spacing:.02em;
}
.board-value{
  font-family:"Space Mono",monospace; font-size:1.15rem; color:var(--gold); font-weight:700;
  letter-spacing:.03em; text-align:right;
}
@media (max-width:600px){
  .board-row{flex-direction:column; align-items:flex-start; gap:.2rem;}
  .board-value{text-align:left; font-size:1.05rem;}
}

/* CTA image-style divider */
.divider-band{
  position:relative; overflow:hidden;
  color:var(--white); text-align:center; padding:4rem 1.5rem;
}
.divider-band img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
}
.divider-band::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg, rgba(19,56,116,.4), rgba(13,42,88,.48));
}
.divider-glass{
  display:inline-block; position:relative; max-width:100%;
  padding:2rem 2.4rem; border-radius:28px;
  background-color:rgba(19,56,116,.22);
  background-image:linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,0) 55%);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:
    0 14px 34px rgba(5,14,28,.25),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(255,255,255,.08);
}
@supports not (backdrop-filter:blur(1px)){ .divider-glass{background-color:rgba(13,30,58,.6);} }
.divider-band h2{color:var(--gold); margin-bottom:1.2rem; position:relative;}
.divider-band .btn{position:relative;}
@media (max-width:600px){ .divider-glass{padding:1.5rem 1.4rem;} }

/* Corridor stats — editorial numeral strip */
.corridor-stats{display:flex; gap:0; margin:2.8rem 0; flex-wrap:wrap;}
.corridor-stat{flex:1; min-width:170px; padding:0 2.2rem; border-right:1px solid rgba(19,56,116,.16); text-align:center;}
.corridor-stat:first-child{padding-left:2.2rem;}
.corridor-stat:last-child{border-right:none;}
.corridor-stat .big{
  font-family:"Fraunces",Georgia,serif; font-size:clamp(2.6rem,5.2vw,3.7rem);
  font-weight:600; line-height:1; display:block; margin-bottom:.6rem; letter-spacing:-.01em;
}
.corridor-stat:nth-child(1) .big{color:var(--navy);}
.corridor-stat:nth-child(2) .big{color:var(--sage);}
.corridor-stat:nth-child(3) .big{color:var(--olive);}
.corridor-stat p{
  font-size:.8rem; margin:0 auto; font-family:"Inter",sans-serif; text-transform:uppercase;
  letter-spacing:.05em; color:var(--mid); max-width:20ch;
}
@media (max-width:700px){
  .corridor-stat{
    flex:1 1 100%; border-right:none; border-bottom:1px solid rgba(19,56,116,.16);
    padding:1.2rem 0;
  }
  .corridor-stat:first-child{padding-top:0;}
  .corridor-stat:last-child{border-bottom:none; padding-bottom:0;}
}

/* vs plane */
.vs-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; margin-top:1.8rem;}
.vs-card{
  border-radius:var(--radius); padding:1.6rem;
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
}
.vs-card.train{
  color:var(--white);
  background-color:color-mix(in srgb, var(--navy) 54%, transparent);
  background-image:linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,0) 55%);
}
.vs-card.train h3{color:var(--gold);}
.vs-card.plane{
  background-color:rgba(236,226,205,.42);
  background-image:linear-gradient(150deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%);
}
.vs-card.plane h3{color:var(--sage);}
.vs-card.car{
  background-color:rgba(84,98,33,.16);
  background-image:linear-gradient(150deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%);
}
.vs-card.car h3{color:var(--olive);}
.vs-card.bus{
  background-color:rgba(235,208,142,.32);
  background-image:linear-gradient(150deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%);
}
.vs-card.bus h3{color:var(--navy);}
@supports not (backdrop-filter:blur(1px)){
  .vs-card.train{background-color:var(--navy);}
  .vs-card.plane{background-color:#ece2cd;}
  .vs-card.car{background-color:#e4e6da;}
  .vs-card.bus{background-color:var(--gold);}
}
.vs-card ul{margin:0; padding-left:1.1rem; font-family:"Inter",Arial,sans-serif; font-size:.92rem;}
.vs-card.train li{color:#e7ecf5;}
.vs-card.plane li,.vs-card.car li,.vs-card.bus li{color:var(--mid);}
.vs-card li{margin-bottom:.5rem;}
.carbon-note{margin-top:1.6rem; font-size:.92rem; text-align:center;}

/* Onboard grid */
.onboard-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0 3rem; margin-top:2.2rem;}
.onboard-item{display:flex; gap:1.2rem; align-items:flex-start; padding:1.5rem 0; border-bottom:1px solid rgba(19,56,116,.12);}
.onboard-item .idx{
  font-family:"Fraunces",Georgia,serif; font-size:1.7rem; font-weight:600; color:var(--olive);
  line-height:1; flex-shrink:0; width:2.2ch; opacity:.85;
}
.onboard-item h3{font-size:1.02rem; color:var(--navy); margin-bottom:.35rem;}
.onboard-item p{font-size:.88rem; margin:0;}
.onboard-summary{
  margin-top:2rem; font-size:1.02rem; font-family:"Fraunces",Georgia,serif;
  font-style:italic; color:var(--navy); line-height:1.55; text-align:center;
  padding-top:1.2rem; border-top:1px solid rgba(19,56,116,.18);
}

/* Luggage */
.pets-card{
  margin-top:1.6rem; border-radius:var(--radius); padding:1.4rem 1.6rem; border-left:5px solid var(--olive);
  border-top:1px solid rgba(255,255,255,.5); border-right:1px solid rgba(255,255,255,.5); border-bottom:1px solid rgba(255,255,255,.5);
  background-color:rgba(255,255,255,.38);
  background-image:linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
}
@supports not (backdrop-filter:blur(1px)){ .pets-card{background-color:rgba(255,253,249,.92);} }
.pets-card h3{color:var(--olive); font-size:1rem;}

/* Cities tabs */
.city-tabs{display:flex; gap:.8rem; margin:1.8rem 0;}
.city-tab{
  font-family:"Inter",Arial,sans-serif; font-weight:700; font-size:.9rem; padding:.6rem 1.4rem;
  border-radius:999px; border:2px solid var(--navy); background:transparent; color:var(--navy); cursor:pointer;
}
.city-tab.active{
  color:var(--white); border-color:rgba(255,255,255,.45);
  background-color:color-mix(in srgb, var(--navy) 56%, transparent);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
}
@supports not (backdrop-filter:blur(1px)){ .city-tab.active{background-color:var(--navy);} }

/* City highlights — bento grid, full-bleed photo with caption overlay */
.city-panel{display:none; grid-template-columns:repeat(4,1fr); grid-auto-rows:170px; gap:14px;}
.city-panel.active{display:grid;}
.hl-card{position:relative; border-radius:14px; overflow:hidden; isolation:isolate; cursor:pointer;}
.hl-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.hl-card:hover img{transform:scale(1.06);}
.hl-card::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(19,56,116,0) 38%, rgba(13,26,48,.88) 100%);
}
.hl-body{position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:1.1rem 1.2rem;}
.hl-card h3{color:var(--white); font-size:1rem; margin-bottom:.3rem;}
.hl-card p{
  color:#dfe6f2; font-size:.82rem; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hl-card:nth-child(1){grid-column:1/3; grid-row:1/3;}
.hl-card:nth-child(1) h3{font-size:1.5rem;}
.hl-card:nth-child(1) p{-webkit-line-clamp:3; font-size:.9rem; max-width:36ch;}
.hl-card:nth-child(2){grid-column:3/4; grid-row:1/2;}
.hl-card:nth-child(3){grid-column:4/5; grid-row:1/2;}
.hl-card:nth-child(4){grid-column:3/5; grid-row:2/3;}
.hl-card:nth-child(5){grid-column:1/3; grid-row:3/4;}
.hl-card:nth-child(6){grid-column:3/5; grid-row:3/4;}
@media (max-width:760px){
  .city-panel{grid-template-columns:repeat(2,1fr); grid-auto-rows:150px;}
  .hl-card:nth-child(n){grid-column:auto; grid-row:auto;}
  .hl-card:nth-child(1){grid-column:1/3; grid-row:auto; min-height:220px;}
  .hl-card:nth-child(1) h3{font-size:1.25rem;}
}

/* City card lightbox — full, untruncated caption on click */
.hl-lightbox{
  display:flex; position:fixed; inset:0; z-index:1000;
  padding:1.5rem; align-items:center; justify-content:center;
  background-color:rgba(8,16,32,0);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease, background-color .3s ease, visibility 0s linear .3s;
}
.hl-lightbox.open{
  opacity:1; visibility:visible; pointer-events:auto;
  background-color:rgba(8,16,32,.72);
  transition:opacity .3s ease, background-color .3s ease, visibility 0s linear 0s;
}
.hl-lightbox-inner{
  position:relative; width:100%; max-width:520px; max-height:88vh; overflow:auto;
  border-radius:24px; overflow-x:hidden;
  transform:scale(.92) translateY(14px);
  transition:transform .32s cubic-bezier(.2,.9,.32,1.28);
  background-color:rgba(255,255,255,.6);
  background-image:linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 30px 60px rgba(5,14,28,.35);
}
@supports not (backdrop-filter:blur(1px)){ .hl-lightbox-inner{background-color:rgba(255,253,249,.97);} }
.hl-lightbox.open .hl-lightbox-inner{transform:scale(1) translateY(0);}
.hl-lightbox-inner img{width:100%; height:260px; object-fit:cover; display:block;}
.hl-lightbox-text{padding:1.4rem 1.6rem 1.6rem;}
.hl-lightbox-text h3{color:var(--navy); font-size:1.3rem; margin-bottom:.6rem;}
.hl-lightbox-text p{font-size:.98rem; margin:0; color:var(--ink);}
.hl-lightbox-close{
  position:absolute; top:.9rem; right:.9rem; z-index:2; width:34px; height:34px;
  border-radius:50%; border:1px solid rgba(255,255,255,.5); cursor:pointer;
  background-color:rgba(19,56,116,.4);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  color:var(--white); font-size:1.3rem; line-height:1; font-family:Arial,sans-serif;
}
@supports not (backdrop-filter:blur(1px)){ .hl-lightbox-close{background-color:var(--navy);} }
@media (max-width:600px){ .hl-lightbox-inner img{height:200px;} }


/* FAQ */
.faq-list{margin-top:1.8rem; display:flex; flex-direction:column; gap:.7rem;}
.faq-item{
  border-radius:var(--radius); overflow:hidden;
  background-color:rgba(255,255,255,.38);
  background-image:linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.5);
}
@supports not (backdrop-filter:blur(1px)){ .faq-item{background-color:rgba(255,253,249,.92);} }
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-family:"Fraunces",Georgia,serif; font-size:1.02rem; color:var(--navy); font-weight:700;
  padding:1.1rem 1.4rem; display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq-arrow{font-size:1.3rem; color:var(--olive); transition:transform .2s;}
.faq-item.open .faq-arrow{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 1.4rem;}
.faq-item.open .faq-a{max-height:400px; padding:0 1.4rem 1.2rem;}
.faq-a p{font-size:.94rem; margin:0;}

/* Tips */
.tips-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; margin-top:2rem;}
.tip-card{
  border-radius:12px; border-left:3px solid var(--gold);
  border-top:1px solid rgba(255,255,255,.5); border-right:1px solid rgba(255,255,255,.5); border-bottom:1px solid rgba(255,255,255,.5);
  padding:1.5rem 1.6rem; position:relative; overflow:hidden;
  background-color:rgba(255,255,255,.38);
  background-image:linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
}
@supports not (backdrop-filter:blur(1px)){ .tip-card{background-color:rgba(255,253,249,.92);} }
.tip-card::before{
  content:""; position:absolute; top:0; right:0;
  border-style:solid; border-width:0 22px 22px 0; border-color:transparent rgba(255,255,255,.6) transparent transparent;
}
.tip-card h3{font-size:1.02rem; color:var(--navy);}
.tip-card p{font-size:.9rem; margin:0;}

/* CTA band */
.cta-band{
  text-align:center; padding:3.2rem 1.5rem; background-color:var(--gold);
  background-image:
    radial-gradient(ellipse 700px 500px at 12% -20%, rgba(255,255,255,.4), transparent 55%),
    radial-gradient(ellipse 800px 600px at 100% 120%, rgba(19,56,116,.14), transparent 55%);
}
.cta-band h2{color:var(--navy);}
.cta-band p{color:#5a4a24; max-width:560px; margin:0 auto 1.4rem;}

/* Footer */
footer{
  color:#cfd9ea; padding:2.4rem 1.5rem; font-family:"Inter",Arial,sans-serif; font-size:.85rem;
  background-color:var(--navy);
  background-image:
    radial-gradient(ellipse 700px 500px at 90% -30%, rgba(235,208,142,.14), transparent 55%),
    radial-gradient(ellipse 600px 500px at 0% 120%, rgba(88,99,92,.3), transparent 55%);
}
footer .container{max-width:900px;}
footer a{color:var(--gold); text-decoration:underline;}
footer p{color:#cfd9ea; margin-bottom:.8rem;}

/* Mobile nav panel — glass dropdown beneath the pill */
.mobile-panel{
  display:none; flex-direction:column; gap:0; pointer-events:auto;
  max-width:1120px; margin:.6rem auto 0;
  background-color:rgba(255,255,255,.38);
  background-image:linear-gradient(160deg, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.4);
  border-radius:20px; overflow:hidden;
  box-shadow:
    0 12px 32px rgba(19,56,116,.2),
    inset 0 1px 0 rgba(255,255,255,.5);
}
@supports not (backdrop-filter:blur(1px)){
  .mobile-panel{background-color:rgba(255,253,249,.94);}
}
.mobile-panel a{
  padding:1rem 1.5rem; text-decoration:none; color:var(--navy); font-weight:600;
  font-family:"Inter",Arial,sans-serif; border-bottom:1px solid rgba(19,56,116,.12);
}
.mobile-panel a:last-child{border-bottom:none;}
.mobile-panel.open{display:flex;}

@media (max-width:860px){
  nav.main-links{display:none;}
  .nav-toggle{display:block;}
  .nav-cta .btn{padding:.55rem .9rem; font-size:.78rem; white-space:nowrap;}
  .op-grid,.station-grid,.vs-grid{grid-template-columns:1fr;}
  .onboard-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .onboard-grid{grid-template-columns:1fr;}
  .city-panel{grid-template-columns:1fr;}
  .hl-card:nth-child(n){grid-column:1/2; grid-row:auto; min-height:200px;}
  .hero-mini-stats{gap:1.2rem;}
  .nav-grid{gap:.5rem; padding-left:.5rem;}
  .logo .wordmark{display:none;}
  .nav-cta .btn{padding:.5rem .8rem; font-size:.72rem;}
}