/* ============================================================
   madridvalencia.com — "The Fast Lane"
   A departure-board-inspired design: this is one of Spain's
   fastest, most frequent high-speed corridors, so the whole
   site is built around a split-flap (Solari) board motif.
   ============================================================ */

:root{
  --maroon:#721121;
  --maroon-deep:#4A0B15;
  --coral:#F15156;
  --coral-deep:#C93338;
  --sand:#CDC5B4;
  --sand-light:#E7E1D5;
  --sand-dark:#B8AE99;
  --sky:#83BCFF;
  --ink:#241A16;
  --ink-soft:#4A3C35;
  --paper:#FBF7F0;
  --board:#241017;      /* the physical "board" housing colour */
  --board-flap:#33141d;

  --font-display:"Space Grotesk", "Archivo", sans-serif;
  --font-body:"Inter", sans-serif;
  --font-mono:"Space Mono", "JetBrains Mono", monospace;

  --wrap:1180px;
  --radius:14px;
  --shadow-sm:0 2px 10px rgba(36,26,22,.08);
  --shadow-md:0 12px 32px rgba(36,26,22,.14);
  --shadow-lg:0 24px 60px rgba(36,26,22,.22);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.12;margin:0 0 .4em;color:var(--maroon)}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:none;width:100%}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
a{color:var(--maroon)}
.kw{color:var(--maroon);font-weight:700} /* keyword-emphasis inline accent */

::selection{background:var(--coral);color:#fff}

img{max-width:100%;display:block}

button{font-family:inherit;cursor:pointer}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--coral-deep);font-weight:700;margin-bottom:.6em;
}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--coral-deep);display:inline-block}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--maroon);color:#fff;border:none;
  padding:14px 26px;border-radius:999px;font-weight:700;font-size:.95rem;
  text-decoration:none;transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
  box-shadow:var(--shadow-sm);
}
.btn:hover{background:var(--coral-deep);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--maroon);border:2px solid var(--maroon);box-shadow:none}
.btn-ghost:hover{background:var(--maroon);color:#fff}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal-stagger > *{transition-delay:calc(var(--i,0) * 80ms)}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- scroll progress bar ---------- */
#scrollbar{position:fixed;top:0;left:0;height:3px;background:var(--coral);z-index:999;width:0%}

/* ============================================================
   HEADER
   ============================================================ */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(251,247,240,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--sand-dark);
  transition:padding .25s ease, box-shadow .25s ease;
}
header.shrink{box-shadow:var(--shadow-sm)}
.nav-inner{
  max-width:var(--wrap);margin:0 auto;padding:18px 24px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;
  transition:padding .25s ease;
}
header.shrink .nav-inner{padding:11px 24px}
.logo{
  font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--maroon);
  text-decoration:none;display:flex;align-items:center;gap:8px;letter-spacing:-.01em;
}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--coral);animation:blink 2.4s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.nav-links{display:flex;gap:28px;justify-content:center;list-style:none;margin:0;padding:0}
.nav-links a{
  color:var(--ink-soft);text-decoration:none;font-size:.92rem;font-weight:600;
  position:relative;padding:4px 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;background:var(--coral-deep);
  transition:width .25s ease;
}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{display:inline-flex}
.nav-toggle{display:none;background:none;border:none;padding:6px;flex-direction:column;gap:5px}
.nav-toggle span{width:24px;height:2px;background:var(--maroon);border-radius:2px;transition:transform .25s ease, opacity .25s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-panel{display:none}

@media(max-width:860px){
  .nav-inner{grid-template-columns:auto auto}
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:flex}
  .nav-panel{
    display:block;position:fixed;inset:0;top:64px;background:var(--paper);
    transform:translateX(100%);transition:transform .3s ease;z-index:59;overflow-y:auto;
  }
  .nav-panel.open{transform:translateX(0)}
  .nav-panel ul{list-style:none;margin:0;padding:20px 24px;display:flex;flex-direction:column;gap:4px}
  .nav-panel a{
    display:block;padding:14px 4px;color:var(--ink);text-decoration:none;font-weight:600;
    border-bottom:1px solid var(--sand-dark);
  }
  .nav-panel .btn{margin:20px 24px;justify-content:center;background:var(--maroon);color:#fff}
}

/* ---------- side rail nav dots (desktop) ---------- */
#railnav{
  position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:50;
  display:flex;flex-direction:column;gap:14px;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
#railnav.visible{opacity:1;pointer-events:auto}
#railnav a{
  width:9px;height:9px;border-radius:50%;background:var(--sand-dark);display:block;position:relative;
  transition:background .25s ease, transform .25s ease;
}
#railnav a.active{background:var(--coral-deep);transform:scale(1.4)}
#railnav a::before{
  content:attr(data-label);position:absolute;right:20px;top:50%;transform:translateY(-50%);
  background:var(--maroon);color:#fff;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:6px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease;
}
#railnav a:hover::before{opacity:1}
@media(max-width:1100px){#railnav{display:none}}

/* ============================================================
   HERO — full-bleed background illustration
   ============================================================ */
/* NOTE: no overflow:hidden here — the embedded search widget opens
   dropdown popups (calendar, passenger selector) that must be able
   to render outside the hero's own box. Clipping the section would
   silently cut those popups off and make the form look broken. */
.hero{position:relative;padding:0;min-height:460px}

/* full-screen illustration behind everything, edge to edge —
   overflow is contained here instead, scoped to just the image */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  display:block;
}
/* flat tint over the whole illustration so the text stays readable
   without needing a separate card/backdrop behind it */
.hero-bg::after{
  content:"";position:absolute;inset:0;background:var(--sand);opacity:.5;
}

.hero-grid{position:relative;z-index:1;padding-top:56px}
/* A flat tint over the whole illustration isn't reliable contrast for text —
   busy areas of the image (rooflines, cypress trees) can still fight with it.
   Give the copy block its own solid-ish backing panel instead, so legibility
   never depends on which part of the image happens to sit behind it. */
.hero-copy{
  max-width:640px;padding:24px 28px;margin-bottom:28px;
  background:rgba(251,247,240,.92);border-radius:var(--radius);
}
.hero h1{margin-bottom:.35em}
.hero .lead{font-size:1.08rem;color:#000;margin-bottom:1.4em}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}

.widget-shell{
  background:var(--paper);border-radius:var(--radius);padding:10px 22px;box-shadow:var(--shadow-md);
  border:1px solid var(--sand-dark);
}
.widget-shell h2{font-size:1rem;margin-bottom:6px;color:var(--ink)}
/* the embedded search widget needs real horizontal room for its own
   internal fields (FROM/TO/DEPART/PASSENGERS/SEARCH) — on wide
   screens let it bleed a bit past the normal content width, capped
   so it never overflows the viewport */
.hero-widget-full{margin-top:8px;margin-bottom:0}
@media(min-width:1300px){
  .hero-widget-full{
    margin-left:calc(-1 * min(220px, (100vw - var(--wrap)) / 2));
    margin-right:calc(-1 * min(220px, (100vw - var(--wrap)) / 2));
  }
}

@media(max-width:760px){
  .hero{min-height:0}
  .hero-grid{padding-top:32px}
  .hero-copy{max-width:none}
  .hero-widget-full{margin-bottom:0}
  .hero-bg img{object-position:70% center}
}

/* ============================================================
   SECTION HEAD
   ============================================================ */
section{padding:84px 0}
.section-head{max-width:none;margin:0 0 44px}
.section-head p{color:var(--ink-soft);max-width:none}

/* Long section titles: force a single line without moving the left edge —
   widen just the heading (not the whole section-head block, so intro
   paragraphs keep their original reading width) and let it use the full
   .wrap width to grow into. Reverts to normal wrapping on narrow screens. */
@media(min-width:700px){
  #operators .section-head h2,
  #amenities .section-head h2,
  #stations .section-head h2,
  #explore .section-head h2,
  #tickets .section-head h2,
  #compare .section-head h2{
    white-space:nowrap;
    max-width:none;
    width:max-content;
  }
}
.alt-bg{background:var(--sand-light)}

/* placeholder image label, reused across op/amenity/station/spot/tip photo boxes */
.op-photo-label{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.9);text-align:center;padding:5px 12px;background:rgba(0,0,0,.22);
  border-radius:999px;
}

/* ============================================================
   STAT BAND
   ============================================================ */
.statband{background:var(--maroon);color:#fff;padding:40px 0}
.statband .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.stat-item{text-align:center;border-right:1px solid rgba(255,255,255,.16)}
.stat-item:last-child{border-right:none}
.stat-item .num{font-family:var(--font-display);font-size:clamp(1.3rem,2.2vw,1.85rem);font-weight:700;color:#fff;white-space:nowrap}
.stat-item .num .accent{color:#fff}
.stat-item .cap{font-size:.78rem;color:var(--sand-light);margin-top:4px}
@media(max-width:860px){
  .statband .wrap{grid-template-columns:repeat(2,1fr);row-gap:26px}
  .stat-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:16px}
}

/* ============================================================
   ROUTE MAP
   ============================================================ */
.route-layout{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.route-map{
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);
  aspect-ratio:4/5;position:relative;
}
.route-map img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;
  opacity:0;transform:scale(1.04);
  transition:opacity .8s ease, transform 1.4s cubic-bezier(.2,.8,.2,1);
}
.route-map.in img{opacity:1;transform:none}

.route-text h3{margin-top:1.2em}

/* ============================================================
   OPERATORS — click-to-open pop-up cards
   ============================================================ */
#operators{position:relative;overflow:hidden}
.operators-bg{position:absolute;inset:0;z-index:0}
.operators-bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.operators-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(205,197,180,.92) 0%, rgba(205,197,180,.86) 24%, rgba(205,197,180,.9) 100%);
}
#operators .wrap{position:relative;z-index:1}
.op-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.op-trigger{
  background:var(--paper);border-radius:var(--radius);border:1px solid var(--sand-dark);overflow:hidden;
  box-shadow:var(--shadow-sm);cursor:pointer;transition:box-shadow .3s ease, transform .3s ease;
  padding:0;text-align:left;display:block;width:100%;
}
.op-trigger:hover, .op-trigger:focus-visible{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.op-photo{
  height:150px;position:relative;overflow:hidden;background:var(--sand-light);
}
.op-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.op-trigger:hover .op-photo img,.op-trigger:focus-visible .op-photo img{transform:scale(1.08)}
.op-trigger-body{padding:16px 18px 20px}
.op-tag{font-family:var(--font-mono);font-size:.68rem;color:var(--coral-deep);text-transform:uppercase;letter-spacing:.06em}
.op-trigger h3{margin:8px 0 10px;font-size:1.05rem}
.op-hint{
  display:inline-flex;font-size:.82rem;font-weight:700;color:var(--maroon);opacity:0;
  transform:translateX(-6px);transition:opacity .25s ease, transform .25s ease;
}
.op-trigger:hover .op-hint, .op-trigger:focus-visible .op-hint{opacity:1;transform:none}
@media(max-width:960px){.op-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.op-grid{grid-template-columns:1fr}}

/* ---------- shared modal system (operators) ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(20,10,8,.6);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px;z-index:100;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.modal-overlay[data-open="true"]{opacity:1;pointer-events:auto}
.modal-card{
  background:var(--paper);border-radius:18px;max-width:480px;width:100%;overflow:hidden;
  box-shadow:var(--shadow-lg);transform:translateY(18px) scale(.97);transition:transform .3s ease;
  max-height:88vh;overflow-y:auto;position:relative;
}
.modal-overlay[data-open="true"] .modal-card{transform:none}
.modal-photo{
  height:200px;position:relative;overflow:hidden;background:var(--sand-light);
}
.modal-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.modal-card-body{padding:22px 26px 26px}
.modal-card-body h3{margin:8px 0 12px}
.modal-card-body p{color:var(--ink-soft);font-size:.95rem;margin-bottom:0}
.modal-close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:none;
  background:rgba(0,0,0,.35);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;z-index:5;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease, transform .2s ease;
}
.modal-close:hover{background:var(--coral);transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){
  .modal-card{transition:none}
  .modal-close{transition:none}
}

/* ============================================================
   AMENITIES
   ============================================================ */
.amenity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.amenity{
  background:var(--paper);border-radius:14px;overflow:hidden;border:1px solid var(--sand-dark);
  box-shadow:var(--shadow-sm);position:relative;
  opacity:0;transform:scale(.9) translateY(18px);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, opacity .5s ease;
}
.amenity.in{opacity:1;transform:none}
.amenity:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-md)}
.amenity-photo{
  height:110px;position:relative;overflow:hidden;background:var(--sand-light);
}
.amenity-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.amenity:hover .amenity-photo img{transform:scale(1.1)}
/* sits outside .amenity-photo (whose overflow:hidden would otherwise clip it)
   so the badge can overlap the photo/card boundary in full, not just its top half */
.amenity-icon{
  position:absolute;left:12px;top:82px;z-index:2;width:44px;height:44px;border-radius:50%;
  background:var(--maroon);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;
  transition:transform .35s cubic-bezier(.3,1.4,.5,1), background .3s ease;
  border:3px solid var(--paper);
}
.amenity:hover .amenity-icon{transform:translateY(-4px) rotate(-8deg) scale(1.08);background:var(--coral-deep)}
.amenity-icon svg{width:22px;height:22px;color:#fff}
.amenity span{display:block;padding:26px 14px 16px;font-size:.86rem;font-weight:700;color:var(--ink)}
@media(max-width:700px){.amenity-grid{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   STATIONS — full split screen, Madrid left / Valencia right
   flip cards: front shows the image + title only, click/tap
   flips to a solid-background back face with the full text
   ============================================================ */
.stations-section{padding-bottom:0}
.station-split{
  display:grid;grid-template-columns:1fr 1fr;min-height:560px;
}
.station-half{
  position:relative;overflow:hidden;
  background:none;border:none;padding:0;margin:0;display:block;width:100%;text-align:left;
  opacity:0;transform:translateY(30px);cursor:pointer;
  transition:opacity .7s ease, transform .7s ease;
}
.station-half.in{opacity:1;transform:none}
.station-half-photo{position:relative;width:100%;min-height:560px;background:var(--sand-light)}
.station-half-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.station-half:hover .station-half-photo img{transform:scale(1.06)}
.station-label-overlay{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  padding:36px;color:#fff;pointer-events:none;
  background:linear-gradient(to top, rgba(36,26,22,.86) 0%, rgba(36,26,22,.35) 45%, transparent 75%);
}
.station-label-overlay h3{color:#fff;margin:8px 0 4px}
.station-flip-hint{
  display:inline-block;font-size:.82rem;font-weight:700;color:rgba(255,255,255,.85);margin-top:8px;
  transition:transform .25s ease;
}
.station-half:hover .station-flip-hint{transform:translateX(4px)}

.station-details{
  max-height:0;overflow:hidden;background:var(--paper);
  transition:max-height .4s ease, padding .4s ease;
  padding:0 44px;
}
.station-half[aria-expanded="true"] .station-details{max-height:420px;padding:32px 44px 40px}
.station-details .op-tag{color:var(--coral-deep)}
.station-details h3{color:var(--maroon);margin:8px 0 14px}
.station-details p{color:var(--ink-soft);font-size:.95rem;margin-bottom:0}

@media(max-width:860px){
  .station-split{grid-template-columns:1fr;min-height:0}
  .station-half{min-height:0}
  .station-half-photo{min-height:320px}
}
@media(prefers-reduced-motion:reduce){
  .station-half-photo img,.station-details{transition:none}
}
/* ============================================================
   EXPLORE — city tabs
   ============================================================ */
.city-tabs{display:flex;gap:10px;margin-bottom:26px}
.city-tab{
  background:transparent;border:2px solid var(--maroon);color:var(--maroon);
  padding:10px 22px;border-radius:999px;font-weight:700;font-family:var(--font-display);
  transition:background .2s ease,color .2s ease, transform .2s ease;
}
.city-tab:hover{transform:translateY(-2px)}
.city-tab.active{background:var(--maroon);color:#fff}
.spot-panel{display:none}
.spot-panel.active{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.spot-card{
  background:var(--paper);border-radius:14px;overflow:hidden;border:1px solid var(--sand-dark);
  box-shadow:var(--shadow-sm);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
  opacity:0;transform:translateY(24px) scale(.96);
  animation:spotIn .6s cubic-bezier(.2,.8,.2,1) forwards;
}
.spot-panel.active .spot-card:nth-child(1){animation-delay:.05s}
.spot-panel.active .spot-card:nth-child(2){animation-delay:.13s}
.spot-panel.active .spot-card:nth-child(3){animation-delay:.21s}
.spot-panel.active .spot-card:nth-child(4){animation-delay:.29s}
@keyframes spotIn{
  from{opacity:0;transform:translateY(24px) scale(.96)}
  to{opacity:1;transform:none}
}
.spot-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-md)}
.spot-photo{
  height:120px;position:relative;overflow:hidden;background:var(--sand-light);
}
.spot-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.spot-card:hover .spot-photo img{transform:scale(1.1)}
.spot-card .num{
  font-family:var(--font-mono);color:var(--coral-deep);font-weight:700;font-size:.75rem;
  display:block;margin:14px 18px 0;
}
.spot-card h4{margin:.4em 18px .3em;font-family:var(--font-display);font-size:1rem;color:var(--ink)}
.spot-card p{font-size:.86rem;color:var(--ink-soft);margin:0 18px 18px}
@media(prefers-reduced-motion:reduce){
  .spot-card{animation:none;opacity:1;transform:none}
}
@media(max-width:900px){.spot-panel.active{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.spot-panel.active{grid-template-columns:1fr}}

/* ============================================================
   TICKETS — horizontal snap carousel
   ============================================================ */
.tip-track{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 6px 26px;
  -webkit-overflow-scrolling:touch;
}
.tip-track::-webkit-scrollbar{height:6px}
.tip-track::-webkit-scrollbar-thumb{background:var(--sand-dark);border-radius:6px}
.tip-card{
  scroll-snap-align:start;flex:0 0 280px;background:var(--paper);border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--sand-dark);box-shadow:var(--shadow-sm);
  position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.tip-card:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:var(--shadow-md)}
.tip-photo{
  height:130px;position:relative;overflow:hidden;background:var(--sand-light);
}
.tip-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.tip-card:hover .tip-photo img{transform:scale(1.1)}
.tip-card h3, .tip-card p{padding-left:20px;padding-right:20px}
.tip-card p{padding-bottom:22px}
.tip-num{
  width:36px;height:36px;border-radius:50%;background:var(--coral);color:#fff;font-family:var(--font-display);
  font-weight:700;display:flex;align-items:center;justify-content:center;
  position:absolute;top:100px;left:16px;box-shadow:var(--shadow-sm);border:3px solid var(--paper);
  transition:transform .3s cubic-bezier(.3,1.4,.5,1);
}
.tip-card:hover .tip-num{transform:scale(1.12) rotate(-8deg)}
.tip-card h3{margin-top:22px}
.tip-dots{display:flex;gap:8px;justify-content:center;margin-top:6px}
.tip-dots button{width:8px;height:8px;border-radius:50%;background:var(--sand-dark);border:none;padding:0;transition:background .2s ease, transform .2s ease}
.tip-dots button.active{background:var(--coral-deep);transform:scale(1.3)}

/* ============================================================
   COMPARE — interactive mode cards
   ============================================================ */
#compare{position:relative;overflow:hidden}
.compare-bg{position:absolute;inset:0;z-index:0}
.compare-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.compare-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(231,225,213,.93) 0%, rgba(231,225,213,.86) 22%, rgba(231,225,213,.9) 100%);
}
#compare .wrap{position:relative;z-index:1}
.compare-toggle{display:inline-flex;gap:6px;background:var(--paper);border:1px solid var(--sand-dark);border-radius:999px;padding:5px;margin-bottom:32px}
.compare-toggle-btn{
  background:transparent;border:none;padding:10px 20px;border-radius:999px;font-weight:700;font-size:.88rem;
  color:var(--ink-soft);font-family:var(--font-display);transition:background .25s ease,color .25s ease;
}
.compare-toggle-btn.active{background:var(--maroon);color:#fff}

.compare-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.compare-card{
  position:relative;background:var(--paper);border-radius:var(--radius);padding:24px 22px;
  border:1px solid var(--sand-dark);box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, order .3s ease;
}
.compare-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.compare-winner{
  position:absolute;top:0;right:0;background:var(--coral);color:#fff;font-family:var(--font-mono);
  font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:6px 14px 6px 18px;border-radius:0 0 0 14px;opacity:0;transform:translateX(12px);
  transition:opacity .3s ease, transform .3s ease;
}
.compare-winner.show{opacity:1;transform:none}
.compare-icon{
  width:52px;height:52px;border-radius:14px;background:var(--sand-light);color:var(--maroon);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  transition:transform .35s cubic-bezier(.3,1.4,.5,1), background .3s ease, color .3s ease;
}
.compare-icon svg{width:26px;height:26px}
.compare-card:hover .compare-icon{transform:scale(1.1) rotate(-6deg)}
.compare-card:hover .compare-icon-train{background:var(--maroon);color:#fff}
.compare-card:hover .compare-icon-car{background:var(--sky);color:var(--maroon-deep)}
.compare-card:hover .compare-icon-flight{background:var(--coral);color:#fff}
.compare-card:hover .compare-icon-bus{background:var(--maroon-deep);color:#fff}
.compare-card h3{margin-bottom:16px;font-size:1.15rem}
.compare-metric-head{display:flex;justify-content:space-between;align-items:baseline;font-size:.82rem;color:var(--ink-soft);margin-bottom:6px}
.compare-metric-head strong{font-family:var(--font-display);color:var(--ink);font-size:1rem}
.bar-track{height:8px;background:var(--sand-light);border-radius:6px;overflow:hidden;margin-bottom:16px}
.bar-fill{height:100%;width:0;background:var(--coral);border-radius:6px;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.bar-fill.train{background:var(--maroon)}
.bar-fill.car{background:var(--sky)}
.bar-fill.flight{background:var(--coral)}
.bar-fill.bus{background:var(--maroon-deep)}
.compare-grid.in .bar-fill{width:var(--w)}
.compare-price{
  font-size:.86rem;color:var(--ink-soft);margin-bottom:12px;padding-bottom:14px;border-bottom:1px dashed var(--sand-dark);
}
.compare-price strong{color:var(--maroon);font-family:var(--font-display)}
.compare-card p{font-size:.86rem;color:var(--ink-soft);margin:0}
@media(max-width:960px){.compare-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.compare-grid{grid-template-columns:1fr}}

/* ============================================================
   FAQ — filterable accordion
   ============================================================ */
.faq-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.faq-filter{
  background:var(--paper);border:1px solid var(--sand-dark);color:var(--ink-soft);
  padding:9px 18px;border-radius:999px;font-size:.85rem;font-weight:600;transition:all .2s ease;
}
.faq-filter.active{background:var(--maroon);color:#fff;border-color:var(--maroon)}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{background:var(--paper);border:1px solid var(--sand-dark);border-radius:12px;overflow:hidden;transition:box-shadow .2s ease}
.faq-item.hidden{display:none}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:18px 20px;background:none;border:none;text-align:left;font-weight:700;color:var(--ink);font-size:.98rem;
}
.faq-q .plus{
  width:26px;height:26px;border-radius:50%;border:2px solid var(--maroon);flex-shrink:0;position:relative;transition:transform .3s ease, background .2s ease;
}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--maroon);top:50%;left:50%;transform:translate(-50%,-50%)}
.faq-q .plus::before{width:10px;height:2px}
.faq-q .plus::after{width:2px;height:10px;transition:opacity .2s ease}
.faq-item[data-open="true"] .plus{transform:rotate(180deg);background:var(--maroon)}
.faq-item[data-open="true"] .plus::before,.faq-item[data-open="true"] .plus::after{background:#fff}
.faq-item[data-open="true"] .plus::after{opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{padding:0 20px 20px;color:var(--ink-soft);font-size:.94rem;margin:0}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{background:var(--coral);color:#fff;text-align:center;padding:70px 24px;border-radius:24px;margin:0 24px;max-width:calc(var(--wrap) - 48px);margin:0 auto}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.9);max-width:50ch;margin:0 auto 24px}
.cta-band .btn{background:var(--maroon)}
.cta-band .btn:hover{background:var(--maroon-deep)}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--ink);color:var(--sand-light);padding:52px 0 28px;margin-top:90px}
footer .wrap{display:flex;flex-direction:column;gap:14px}
footer a{color:var(--sky)}
footer p{font-size:.85rem;color:var(--sand-dark);max-width:70ch}
footer p.footer-disclosure{max-width:none}
footer .copyright{margin-top:18px;font-size:.8rem;color:var(--sand-dark)}

@media(max-width:960px){
  .route-layout{grid-template-columns:1fr}
  .op-grid{grid-template-columns:1fr 1fr}
}