/* Emirates Trains — steel-and-glass design system
   Palette sourced from the real Etihad Rail livery (light grey rolling
   stock, red bands) and the network's own framing: brand-new engineered
   infrastructure, not a heritage line — cool graphite and slate rather
   than a warm desert palette, with the livery red and a digital-ticketing
   cyan as the only two accent colors. */

:root {
  --graphite-950: #14212b;
  --graphite-900: #1c2e3a;
  --graphite-800: #28414f;
  --graphite-700: #375866;
  --mist-50: #f2f6f7;
  --mist-100: #e6edef;
  --mist-200: #d3e0e3;
  --cyan-600: #1e9db8;
  --cyan-700: #167e94;
  --cyan-800: #115f70;
  --slate-700: #45606b;
  --slate-500: #6e8891;
  --slate-300: #a9c0c7;
  --slate-100: #e1ebed;
  --red-600: #d6394a;
  --red-700: #c6303e;
  --red-800: #9c2530;
  --white: #ffffff;
  --ink: #16232b;
  --ink-soft: #4c6169;
  --line: #d7e1e4;
  --radius: 14px;
  --shadow: 0 12px 30px -12px rgba(14, 33, 43, 0.28);
  --maxw: 1340px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--mist-50);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  color: var(--graphite-900);
  line-height: 1.12;
  margin: 0 0 0.5em;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: var(--red-700); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
section { padding: 72px 0; }
.section-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.section-head p { color: var(--ink-soft); font-size: 1.05rem; }
.kicker {
  display: inline-block;
  font-size: 0.76rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red-700);
  font-weight: 700;
  margin-bottom: 10px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--red-700);
  color: var(--white);
  box-shadow: 0 8px 20px -8px rgba(156, 37, 48, 0.6);
}
.btn-primary:hover { background: var(--red-800); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.btn-outline {
  background: transparent;
  color: var(--graphite-900);
  border: 1.5px solid var(--slate-300);
  padding: 10px 20px;
}
.btn-outline:hover { background: var(--mist-100); }

/* ---------- Header ---------- */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--graphite-950);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 18px;
  height: 68px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.12rem;
  white-space: nowrap;
}
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--white);
  padding: 7px;
  box-sizing: border-box;
  object-fit: contain;
  display: block;
  flex: none;
}
nav.primary-nav { display: flex; gap: 14px; justify-self: center; flex-wrap: nowrap; min-width: 0; }
nav.primary-nav a { color: rgba(255, 255, 255, 0.85); font-size: 0.85rem; font-weight: 500; white-space: nowrap; }
nav.primary-nav a:hover { color: var(--white); }
.header-cta { justify-self: end; }
.nav-toggle { display: none; background: none; border: none; color: var(--white); cursor: pointer; padding: 8px; justify-self: end; }
.nav-toggle svg { width: 24px; height: 24px; }
.mobile-panel { display: none; }

@media (max-width: 1080px) {
  .header-cta .btn { padding: 8px 14px; font-size: 0.85rem; }
}
@media (max-width: 860px) {
  .header-inner { grid-template-columns: auto 1fr auto; height: 62px; }
  nav.primary-nav { display: none; }
  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .mobile-panel {
    position: absolute;
    top: 62px;
    left: 0;
    right: 0;
    background: var(--graphite-900);
    padding: 10px 16px 22px;
    box-shadow: var(--shadow);
  }
  .mobile-panel.open { display: block; }
  .mobile-panel a { display: block; padding: 12px 0; color: var(--white); border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-weight: 500; }
  .mobile-panel a.mobile-panel-cta {
    display: block;
    margin-top: 14px;
    padding: 13px 0;
    border: none;
    border-radius: 999px;
    background: var(--red-700);
    color: var(--white) !important;
    font-weight: 700;
    text-align: center;
  }
}

/* ---------- Hero: desert dusk photo behind the countdown train,
   with a dark gradient over it so the white text stays legible. ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(20, 33, 43, 0.6) 0%, rgba(24, 39, 50, 0.28) 45%, rgba(20, 33, 43, 0.7) 100%),
    url('/images/hero-desert-dusk.jpg') center 65% / cover no-repeat,
    linear-gradient(180deg, var(--graphite-950) 0%, var(--graphite-900) 100%);
  color: var(--white);
  padding: 60px 0 56px;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px 16px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
  gap: 20px 40px;
  align-items: start;
}
.hero-copy { max-width: 760px; }
@media (max-width: 900px) {
  .hero-inner { padding-top: 20px; grid-template-columns: 1fr; }
}
.hero h1 { color: var(--white); }

/* Quick facts, styled as a compact spec sheet next to the headline —
   a departure-board-style list (label / value pairs, hairline rules)
   rather than the repeating stat-card grid used on the other sites. */
.hero-facts {
  margin: 0;
  padding: 10px 30px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}
.hero-fact {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.hero-fact:last-child { border-bottom: none; }
.hero-fact-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(30, 157, 184, 0.14);
  color: var(--cyan-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.hero-fact-icon svg { width: 23px; height: 23px; }
.hero-fact dt { grid-column: 2; margin: 0; font-size: 0.92rem; color: rgba(255, 255, 255, 0.62); }
.hero-fact dd {
  grid-column: 3;
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--white);
  white-space: nowrap;
  text-align: right;
}
@media (max-width: 900px) {
  .hero-facts { max-width: 460px; }
}
.hero-sub { font-size: 1.1rem; color: rgba(255, 255, 255, 0.86); max-width: 540px; }
.hero-actions { display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; }

/* The countdown, drawn as a train arriving into the hero: a full-width
   car with glass windows standing in for the digits, a rounded bullet
   nose on the right, a livery stripe, and wheels on a dashed rail. */
.countdown-panel {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 32px auto 0;
  padding: 0 16px;
}

/* Destination-board headsign, sitting above the train like a route display */
.countdown-headsign {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cyan-600);
  background: rgba(14, 33, 43, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 6px 14px;
  margin: 0 0 14px 4px;
}
.countdown-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red-600); box-shadow: 0 0 0 3px rgba(214, 57, 74, 0.3); animation: pulse 2s ease-in-out infinite; flex: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.countdown-train {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: clamp(120px, 14vw, 156px);
  filter: drop-shadow(0 22px 30px rgba(4, 9, 12, 0.55));
}

/* Cabin: the real Etihad Rail livery — a light steel body (not the same
   dark tone as the page background, so it actually reads as a vehicle),
   a dark glazing band with lit-up digits, a red stripe, and a dark
   underbody skirt the wheels tuck into. Flat roof, flat floor — only
   the nose (below) tapers, which is what makes it read as "train". */
.train-body {
  position: relative;
  flex: 1;
  min-width: 0;
  background: linear-gradient(180deg, var(--slate-100) 0%, var(--slate-300) 62%, var(--slate-500) 100%);
  border-radius: 8px 0 0 3px;
  overflow: hidden;
}
.train-body::before {
  /* roofline highlight */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: rgba(255, 255, 255, 0.85);
}
.train-body::after {
  /* livery stripe */
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 17px;
  height: 8px;
  background: linear-gradient(90deg, var(--red-800), var(--red-600) 55%, var(--red-800));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}
.train-skirt {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 17px;
  background: linear-gradient(180deg, var(--graphite-800), var(--graphite-950));
}
.countdown-windows {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: clamp(6px, 1.3vw, 14px);
  padding: 15px clamp(14px, 3vw, 30px) 33px;
}
.countdown-window { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1 1 0; min-width: 0; max-width: 76px; }
.countdown-window--plain { opacity: 0.82; }
.countdown-window--plain .countdown-unit { visibility: hidden; }
.window-glass {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1;
  border-radius: 5px;
  background: linear-gradient(165deg, #223642 0%, var(--graphite-950) 70%);
  border: 2px solid var(--graphite-900);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5);
}
.window-glass::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -70%;
  width: 45%;
  height: 180%;
  background: rgba(255, 255, 255, 0.14);
  transform: rotate(20deg);
}
.countdown-num {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  font-weight: 700;
  color: #eaf9ff;
  text-shadow: 0 0 10px rgba(30, 157, 184, 0.85);
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}
.countdown-unit { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--graphite-800); font-weight: 700; white-space: nowrap; }

/* Nose: a short wedge with a curved point, built from a many-point
   clip-path so it reads as an aerodynamic bullet-train front rather
   than a sharp triangle. Everything inside it (stripe, skirt, light)
   is clipped to the same silhouette automatically. */
.train-nose {
  position: relative;
  flex: 0 0 clamp(44px, 8.5%, 80px);
  background: linear-gradient(180deg, var(--slate-100) 0%, var(--slate-300) 62%, var(--slate-500) 100%);
  clip-path: polygon(
    0% 0%, 58% 2%, 78% 8%, 90% 18%, 97% 30%, 100% 50%,
    97% 70%, 90% 82%, 78% 92%, 58% 98%, 0% 100%
  );
}
.nose-cab {
  position: absolute;
  top: 22%;
  bottom: 40%;
  left: 8%;
  width: 34%;
  border-radius: 4px;
  background: linear-gradient(165deg, #223642, var(--graphite-950));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}
.train-nose::before {
  /* livery stripe continues into the nose, narrowing with it */
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 17px;
  height: 8px;
  background: var(--red-600);
}
.train-nose::after {
  /* underbody skirt continues into the nose */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 17px;
  background: var(--graphite-900);
}
.nose-light {
  position: absolute;
  top: 50%;
  right: 14%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--cyan-600);
  box-shadow: 0 0 8px 2px rgba(30, 157, 184, 0.85);
  z-index: 1;
}

.countdown-wheels {
  display: flex;
  justify-content: space-between;
  padding: 0 clamp(26px, 6.5%, 52px) 0 clamp(28px, 7.5%, 56px);
  margin-top: -7px;
  position: relative;
  z-index: 1;
}
.wheel {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--slate-300), var(--graphite-950) 70%);
  border: 2px solid var(--graphite-950);
  box-shadow: 0 3px 5px rgba(4, 9, 12, 0.6);
}
.countdown-rail {
  width: 100%;
  height: 2px;
  margin: 12px 0 16px;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0 14px, transparent 14px 28px);
  background-size: 28px 100%;
  animation: railDash 0.7s linear infinite;
}

/* Speed lines flying past under the train, front to back, to sell the
   sense of motion alongside the moving rail dashes. */
.motion-lines { position: relative; height: 0; overflow: visible; z-index: 0; }
.motion-lines span {
  position: absolute;
  right: -60px;
  height: 2px;
  width: 46px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: streakMove linear infinite;
}
.motion-lines span:nth-child(1) { top: -20px; animation-duration: 0.9s; animation-delay: 0s; }
.motion-lines span:nth-child(2) { top: -6px; width: 34px; animation-duration: 1.15s; animation-delay: 0.35s; }
.motion-lines span:nth-child(3) { top: 8px; animation-duration: 1s; animation-delay: 0.65s; }
@keyframes railDash {
  from { background-position-x: 0; }
  to { background-position-x: -28px; }
}
@keyframes streakMove {
  0% { right: -60px; opacity: 0; }
  12% { opacity: 0.85; }
  85% { opacity: 0.85; }
  100% { right: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .countdown-rail, .motion-lines span { animation: none; }
}
.countdown-note { font-size: 0.9rem; color: rgba(255, 255, 255, 0.75); margin: 0 0 0 4px; text-align: left; }
.countdown-note strong { color: var(--white); }
@media (max-width: 640px) {
  .countdown-num { font-size: 0.92rem; }
  .countdown-unit { font-size: 0.54rem; }
  .countdown-note { font-size: 0.82rem; }
}


/* ---------- Widget strip ---------- */
.widget-strip { background: var(--mist-100); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0 14px; }
.widget-strip .container { max-width: 1324px; padding: 0 26px; }
.widget-strip .section-head { margin-bottom: 2px; }
.widget-strip .section-head .kicker { margin-bottom: 4px; }
.widget-strip .section-head p { margin-bottom: 0; }

/* ---------- First screen: compact hero so the search widget sits above the fold ---------- */
.hero { padding: 20px 0 18px; }
.hero-inner { padding: 12px 16px 0; gap: 16px 40px; align-items: center; }
.hero h1 { font-size: clamp(1.9rem, 3vw, 2.55rem); margin-bottom: 0.4em; }
.hero-sub { font-size: 1rem; line-height: 1.55; max-width: 660px; margin-bottom: 0; }
.hero-actions { margin-top: 16px; }
.hero-actions .btn { padding: 11px 24px; }
.hero-facts { padding: 2px 24px; }
.hero-fact { grid-template-columns: 38px 1fr auto; gap: 14px; padding: 10px 0; }
.hero-fact-icon { width: 38px; height: 38px; }
.hero-fact-icon svg { width: 19px; height: 19px; }
.hero-fact dt { font-size: 0.88rem; }
.hero-fact dd { font-size: 1.2rem; }
.countdown-panel { margin-top: 14px; }
.countdown-headsign { margin-bottom: 8px; padding: 4px 12px; }
.countdown-train { height: clamp(96px, 8vw, 106px); }
.countdown-windows { padding: 10px clamp(14px, 3vw, 30px) 27px; }
.countdown-rail { margin: 8px 0 8px; }
.countdown-note { font-size: 0.86rem; }
.widget-strip { padding: 8px 0 0; }
.widget-strip .section-head { margin-bottom: 0; }
.widget-strip .section-head h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin-bottom: 2px; }
.widget-strip .section-head p { font-size: 0.95rem; }
/* the widget carries ~64px of its own inner padding above the form and ~100px below it: pull it up, trim the tail */
.widget-strip #firebird-search-widget { min-height: 311px; margin: -40px 0 -62px; }

/* Phones / small tablets: headline + intro first, then the search widget, then the quick facts and the countdown.
   The nodes are only re-ordered with flex order / display:contents (nothing is duplicated). */
@media (max-width: 860px) {
  main#top { display: flex; flex-direction: column; }
  .hero, .hero-inner { display: contents; }
  .hero-copy {
    order: 1;
    max-width: none;
    padding: 14px 16px 16px;
    color: var(--white);
    background:
      linear-gradient(180deg, rgba(20, 33, 43, 0.62) 0%, rgba(24, 39, 50, 0.4) 50%, rgba(20, 33, 43, 0.72) 100%),
      url('/images/hero-desert-dusk.jpg') center 62% / cover no-repeat,
      var(--graphite-950);
  }
  .hero h1 { font-size: 1.62rem; line-height: 1.14; margin-bottom: 8px; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); }
  .hero-sub { font-size: 0.88rem; line-height: 1.5; max-width: none; color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55); }
  .hero-actions { display: none; }
  #search { order: 2; }
  .hero-facts { order: 3; }
  .countdown-panel { order: 4; }
  main#top > section:not(.hero):not(#search) { order: 5; }

  .widget-strip { padding: 10px 0 0; border-top: 0; }
  .widget-strip .container { padding: 0 8px; }
  .widget-strip .section-head { margin-bottom: 0; }
  .widget-strip .section-head .kicker, .widget-strip .section-head p { display: none; }
  .widget-strip .section-head h2 { font-size: 1.28rem; margin-bottom: 0; }
  .widget-strip #firebird-search-widget { min-height: 329px; margin: 0 0 -30px; }

  .hero-facts {
    max-width: none;
    margin: 0;
    padding: 12px 16px 6px;
    border: 0;
    border-radius: 0;
    background: var(--graphite-950);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
  }
  .hero-fact { grid-template-columns: 36px 1fr; grid-template-rows: auto auto; gap: 0 10px; padding: 8px 0; border-bottom: 0; align-items: center; }
  .hero-fact-icon { grid-row: 1 / span 2; width: 36px; height: 36px; }
  .hero-fact dt { grid-column: 2; grid-row: 1; font-size: 0.74rem; line-height: 1.25; align-self: end; }
  .hero-fact dd { grid-column: 2; grid-row: 2; text-align: left; font-size: 1.08rem; line-height: 1.2; align-self: start; }
  .countdown-panel {
    margin: 0;
    max-width: none;
    padding: 14px 16px 18px;
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(20, 33, 43, 0.9) 0%, rgba(24, 39, 50, 0.45) 55%, rgba(20, 33, 43, 0.75) 100%),
      url('/images/hero-desert-dusk.jpg') center 80% / cover no-repeat,
      var(--graphite-950);
    color: var(--white);
  }
}

@media (max-width: 767px) {
  .widget-strip #firebird-search-widget { min-height: 514px; margin: 0 0 -30px; }
}
/* Phones: scale the search widget down a little so the SEARCH button lands on the first screen */
@media (max-width: 600px) {
  .widget-strip #firebird-search-widget { zoom: 0.86; min-height: 555px; margin: -8px 0 -46px; }
}
@media (max-width: 380px) {
  .hero-copy { padding: 12px 14px 14px; }
  .hero h1 { font-size: 1.5rem; margin-bottom: 6px; }
  .hero-sub { font-size: 0.84rem; line-height: 1.45; }
}

/* ---------- Route text ---------- */
.route-columns { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .route-columns { grid-template-columns: 1fr; } }
.route-text { text-align: left; }
.route-context {
  background: var(--graphite-950);
  color: rgba(255, 255, 255, 0.82);
  border-radius: var(--radius);
  padding: 26px 28px;
}
.route-context-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cyan-600);
  margin-bottom: 14px;
}
.route-context p { font-size: 0.88rem; margin-bottom: 14px; }
.route-context p:last-child { margin-bottom: 0; }

/* ---------- Rollout line: the required route map, built as a
   phase-by-phase station diagram that reflects real opening dates ---------- */
.rollout-wrap { margin-top: 46px; }
.rollout-frame {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px 20px 24px;
  overflow-x: auto;
}
.rollout-track {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0;
  min-width: 960px;
  padding: 0 6px;
}
.rollout-node { flex: 1; position: relative; text-align: center; padding-top: 20px; opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.rollout-node.is-visible { opacity: 1; transform: translateY(0); }
.rollout-node::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -50%;
  width: 100%;
  height: 3px;
  background: var(--slate-300);
  z-index: 0;
}
.rollout-node:first-child::before { display: none; }
.rollout-node.is-open::before { background: var(--red-600); }
.rollout-dot {
  position: relative;
  z-index: 1;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--slate-500);
  margin: 0 auto 14px;
}
.rollout-node.is-open .rollout-dot { border-color: var(--red-700); background: var(--red-700); box-shadow: 0 0 0 5px rgba(198, 48, 62, 0.15); }
.rollout-city { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 0.98rem; color: var(--graphite-900); margin-bottom: 2px; }
.rollout-emirate { font-size: 0.78rem; color: var(--ink-soft); margin-bottom: 8px; }
.rollout-pill { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--mist-200); color: var(--ink-soft); white-space: nowrap; }
.rollout-node.is-open .rollout-pill { background: var(--red-700); color: var(--white); }
.rollout-note { font-size: 0.72rem; color: var(--ink-soft); margin-top: 8px; max-width: 150px; margin-left: auto; margin-right: auto; min-height: 2.6em; }
@media (max-width: 760px) {
  .rollout-track { min-width: 720px; }
}

/* ---------- Comparison table ---------- */
.compare-wrap { overflow-x: auto; margin-top: 30px; }
table.compare { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); min-width: 640px; }
table.compare th, table.compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--mist-100); font-size: 0.95rem; }
table.compare thead th { background: var(--slate-100); color: var(--graphite-900); font-family: "Space Grotesk", sans-serif; font-weight: 600; }
table.compare tr:last-child td { border-bottom: none; }
table.compare a.btn-outline { font-size: 0.85rem; padding: 8px 16px; white-space: nowrap; }

/* ---------- Class cards (Comfort / Premium) ---------- */
.class-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 34px; }
@media (max-width: 760px) { .class-grid { grid-template-columns: 1fr; } }
.class-card { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; overflow: hidden; }
.class-card--premium { border-color: var(--red-700); box-shadow: var(--shadow); }
.class-card-media { position: relative; margin: -30px -28px 20px; aspect-ratio: 3 / 2; overflow: hidden; }
.class-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.class-badge { position: absolute; top: 14px; left: 14px; background: var(--red-700); color: var(--white); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; padding: 4px 12px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.class-tag { display: block; font-size: 0.9rem; font-weight: 600; color: var(--cyan-700); margin: 8px 0 18px; }
.class-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.class-list li { padding-left: 24px; position: relative; font-size: 0.92rem; color: var(--ink-soft); }
.class-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--red-700); font-weight: 700; }
.class-note { font-size: 0.78rem; color: var(--ink-soft); font-style: italic; }
.class-cta { display: flex; justify-content: center; width: 100%; margin-top: 18px; }

/* ---------- Station cards ---------- */
.station-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; }
@media (max-width: 800px) { .station-grid { grid-template-columns: 1fr; } }
.station-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; overflow: hidden; }
.station-card-media { margin: -26px -26px 20px; aspect-ratio: 3 / 2; overflow: hidden; }
.station-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.station-card h3 { color: var(--graphite-900); }
/* The description paragraph absorbs any leftover height so the facts
   list lines up at the same row in every card, regardless of how many
   lines each card's own text happens to wrap to. */
.station-card > p { flex: 1 0 auto; margin-bottom: 0; }
.station-card .tag { display: inline-block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; background: var(--slate-100); color: var(--slate-700); padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; font-weight: 700; }
.station-facts { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--mist-100); display: flex; flex-direction: column; gap: 8px; }
.station-facts li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.86rem; color: var(--ink-soft); }
.station-facts svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--red-700); }
.station-facts strong { color: var(--ink); }

/* ---------- Train vs car comparison, styled as boarding-pass ticket
   stubs — a fresh device tied to the network's own "digital tickets
   first" identity, rather than a row-of-chips comparison list. ---------- */
.mode-tickets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 34px; align-items: start; }
@media (max-width: 860px) { .mode-tickets { grid-template-columns: 1fr; } }
.mode-ticket {
  position: relative;
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 24px 22px;
  text-decoration: none;
  opacity: 0.9;
}
.mode-ticket--train {
  opacity: 1;
  border-color: var(--graphite-950);
  background: var(--graphite-950);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mode-ticket--train:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -14px rgba(14, 33, 43, 0.55); text-decoration: none; }
.mode-stamp { position: absolute; top: -12px; left: 24px; background: var(--red-700); color: var(--white); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.mode-ticket-head { display: flex; align-items: center; gap: 14px; }
.mode-ticket-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--slate-100); color: var(--slate-700); display: flex; align-items: center; justify-content: center; flex: none; }
.mode-ticket-icon svg { width: 21px; height: 21px; }
.mode-ticket--train .mode-ticket-icon { background: rgba(255, 255, 255, 0.15); color: var(--white); }
.mode-ticket-headtext { display: flex; flex-direction: column; gap: 2px; }
.mode-ticket-mode { font-size: 0.86rem; color: var(--ink-soft); }
.mode-ticket--train .mode-ticket-mode { color: rgba(255, 255, 255, 0.7); }
.mode-ticket-time { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.3rem; color: var(--graphite-900); }
.mode-ticket--train .mode-ticket-time { color: var(--white); }
.mode-ticket-perf {
  position: relative;
  height: 0;
  border-top: 2px dashed var(--line);
  margin: 20px -24px 18px;
}
.mode-ticket--train .mode-ticket-perf { border-top-color: rgba(255, 255, 255, 0.25); }
.mode-ticket-perf::before, .mode-ticket-perf::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mist-100);
}
.mode-ticket-perf::before { left: -9px; }
.mode-ticket-perf::after { right: -9px; }
.mode-ticket-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mode-ticket-list li { padding-left: 20px; position: relative; font-size: 0.88rem; color: var(--ink-soft); }
.mode-ticket-list li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--red-700); }
.mode-ticket--train .mode-ticket-list li { color: rgba(255, 255, 255, 0.78); }
.mode-ticket--train .mode-ticket-list li::before { color: var(--cyan-600); }
.mode-ticket-cta { display: block; margin-top: 18px; font-weight: 700; color: var(--white); background: var(--red-700); text-align: center; padding: 11px; border-radius: 999px; font-size: 0.92rem; }
.mode-ticket--train:hover .mode-ticket-cta { background: var(--red-800); }

/* ---------- Onboard: a wide cabin photo banner, then the amenities
   list below it. ---------- */
.onboard-banner {
  margin-top: 34px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 21 / 9;
}
.onboard-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .onboard-banner { aspect-ratio: 16 / 9; } }

/* Onboard amenities: a hairline spec list echoing the hero's
   departure-board facts, instead of a repeating icon-card grid. */
.onboard-panel {
  margin-top: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
}
@media (max-width: 760px) { .onboard-panel { grid-template-columns: 1fr; padding: 6px 22px; } }
.onboard-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--mist-100);
}
.onboard-panel .onboard-item:nth-last-child(-n+2) { border-bottom: none; }
@media (max-width: 760px) {
  .onboard-panel .onboard-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--mist-100); }
  .onboard-panel .onboard-item:last-child { border-bottom: none; }
}
.onboard-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--slate-100); color: var(--red-700); display: flex; align-items: center; justify-content: center; flex: none; }
.onboard-icon svg { width: 20px; height: 20px; }
.onboard-item h4 { margin: 0 0 4px; font-size: 0.98rem; }
.onboard-item p { margin: 0; font-size: 0.86rem; color: var(--ink-soft); }

/* ---------- Booking tips ---------- */
.tips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin-top: 34px; }
.tip-card { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--red-700); border-radius: var(--radius); padding: 24px; }
.tip-card h4 { margin: 0 0 8px; font-size: 1.02rem; }
.tip-card p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.tips-cta { text-align: center; margin-top: 36px; }

/* ---------- Accessibility: a numbered vertical stepper with a
   connecting rail line, distinct from the Tips card grid above it. ---------- */
.access-steps { position: relative; max-width: 720px; margin: 34px auto 0; }
.access-steps::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 19px;
  width: 2px;
  background: var(--line);
}
.access-step { position: relative; display: flex; gap: 20px; padding-bottom: 30px; }
.access-step:last-child { padding-bottom: 0; }
.access-step-num {
  position: relative;
  z-index: 1;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--red-700);
  color: var(--white);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.access-step-body { padding-top: 6px; }
.access-step-body h4 { margin: 0 0 6px; font-size: 1rem; }
.access-step-body p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin: 30px auto 0; }
details.faq-item { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 4px 20px; margin-bottom: 12px; }
details.faq-item summary { cursor: pointer; padding: 16px 0; font-weight: 600; color: var(--graphite-900); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after { content: "+"; font-size: 1.3rem; color: var(--red-700); flex: none; }
details.faq-item[open] summary::after { content: "\2212"; }
details.faq-item p { padding-bottom: 16px; color: var(--ink-soft); }

/* ---------- Footer ---------- */
footer { background: var(--graphite-950); color: rgba(255, 255, 255, 0.78); padding: 46px 0 30px; font-size: 0.88rem; }
footer .container { max-width: var(--maxw); }
footer a { color: rgba(255, 255, 255, 0.9); text-decoration: underline; }
footer p { margin: 0 0 12px; }
.section-alt { background: var(--mist-100); }
.muted { color: var(--ink-soft); }