/* ============================================
   JASAA TRAVEL & TOURS — Design Tokens
   Color: navy base + orange/sky accents (from mark)
   Type:  Fraunces (display) / Manrope (body) / JetBrains Mono (ticket labels)
   Signature: boarding-pass / luggage-tag travel-document motif
   ============================================ */

:root{
  --navy-950:#05071a;
  --navy-900:#0a0e2a;
  --navy-800:#121736;
  --navy-700:#1b2148;
  --orange-500:#f5821f;
  --brand-orange:#db711c;   /* sampled from the logo wordmark; for dark backgrounds */
  --brand-orange-ink:#a75615;  /* same hue, darkened to stay legible on light backgrounds */
  --orange-600:#dd6c10;
  --sky-400:#2fb6e8;
  --sky-300:#6accf0;
  --sand-100:#f3ede1;
  --sand-200:#ece2cf;
  --paper-50:#faf8f4;
  --ink-900:#1a1c22;
  --ink-600:#5b5e6b;
  --ink-400:#8b8e9c;
  --line: rgba(26,28,34,0.1);
  --line-light: rgba(250,248,244,0.16);

  --font-display:'Fraunces', serif;
  /* Matched to the logo artwork: heavy grotesque for the name,
     condensed bold for the line under it. */
  --font-brand:'Archivo Black', 'Arial Black', sans-serif;
  --font-brand-sub:'Oswald', 'Arial Narrow', sans-serif;
  --font-body:'Manrope', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --container: 1200px;
  --radius: 14px;
  --shadow-lg: 0 30px 60px -20px rgba(5,7,26,0.35);
  --shadow-md: 0 14px 30px -12px rgba(5,7,26,0.25);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--paper-50);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ font-family:var(--font-display); margin:0; font-weight:600; color:var(--navy-900); }
p{ margin:0; line-height:1.65; color:var(--ink-600); }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2.5px solid var(--sky-400); outline-offset:3px; }
section{ position:relative; }

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

/* ---------- shared bits ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--orange-600);
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
}
.eyebrow--light{ color:var(--sky-300); }
.eyebrow-dash{ width:22px; height:1px; background:currentColor; display:inline-block; }

.section-title{
  font-size:clamp(30px, 4vw, 46px);
  line-height:1.12;
  letter-spacing:-0.01em;
  margin-bottom:18px;
}
.section-title em{ font-style:italic; color:var(--orange-500); }
.section-title--light{ color:var(--paper-50); }

.lede{ font-size:17px; color:var(--ink-600); max-width:46ch; margin-bottom:14px; }

.section-head{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px 48px;
}
.section-head--light{ padding-top:8px; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 26px;
  border-radius:999px;
  font-weight:700;
  font-size:14.5px;
  letter-spacing:0.01em;
  border:1.5px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn--primary{ background:var(--orange-500); color:#fff; }
.btn--primary:hover{ background:var(--orange-600); transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(245,130,31,0.55); }
.btn--ghost{ background:transparent; color:var(--navy-900); border-color:var(--line); padding:10px 20px; font-size:13.5px; }
.btn--ghost:hover{ border-color:var(--navy-900); }
.btn--outline-light{ background:transparent; color:#fff; border-color:var(--line-light); }
.btn--outline-light:hover{ background:rgba(250,248,244,0.1); transform:translateY(-2px); }
.btn--small{ padding:9px 16px; font-size:13px; background:var(--navy-900); color:#fff; }
.btn--small:hover{ background:var(--orange-500); }
.btn--wide{ width:100%; padding:16px; font-size:15px; }

.link-arrow{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--navy-900); border-bottom:2px solid var(--orange-500); padding-bottom:3px; }
.link-arrow span{ transition:transform .18s ease; }
.link-arrow:hover span{ transform:translateX(4px); }

/* ---------- top strip ---------- */
.top-strip{ background:var(--navy-950); color:var(--sand-200); font-family:var(--font-mono); font-size:12px; }
.strip-inner{ max-width:var(--container); margin:0 auto; padding:8px 32px; display:flex; justify-content:space-between; align-items:center; }
.strip-item a{ color:var(--sky-300); }
.strip-item a:hover{ color:var(--orange-500); }
.dot{ margin:0 8px; color:var(--ink-400); }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(5,7,26,0.7);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-light);
}
.header-inner{
  max-width:var(--container); margin:0 auto; padding:14px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ width:44px; height:44px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px rgba(245,130,31,0.5); }
.brand-word{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{
  font-family:var(--font-brand); font-size:21px; font-weight:400;
  color:var(--brand-orange); letter-spacing:0.04em; text-transform:uppercase;
}
/* The bracketed brand word inside a phone number. Defaults to the
   darker tone so it stays readable on the light sections; the dark
   navy strip gets the exact logo orange. */
.phone-brand{ color:var(--brand-orange-ink); font-weight:700; }
.top-strip .phone-brand{ color:var(--brand-orange); }
.brand-sub{
  font-family:var(--font-brand-sub); font-weight:600; font-size:11.5px;
  letter-spacing:0.13em; text-transform:uppercase; color:var(--sky-300);
}

.main-nav{ display:flex; gap:30px; }
.main-nav a{ color:var(--sand-200); font-size:14.5px; font-weight:500; position:relative; padding:4px 0; }
.main-nav a::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background:var(--orange-500); transition:width .2s ease; }
.main-nav a:hover{ color:#fff; }
.main-nav a:hover::after{ width:100%; }

.header-cta{ display:flex; align-items:center; gap:14px; }
.header-cta .btn--ghost{ color:#fff; border-color:var(--line-light); }
.header-cta .btn--ghost:hover{ border-color:#fff; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.nav-toggle span{ width:22px; height:2px; background:#fff; border-radius:2px; }

/* ---------- hero ---------- */
.hero{
  position:relative;
  /* Fill exactly the room left under the bars stacked above the hero, so
     the headline, buttons, cards and slider controls all land on the first
     screen with nothing cut off.

     --chrome-h is the measured height of the top strip + header. It is set
     from script.js rather than hard-coded, because those bars change
     height: their text wraps at narrow widths. The value here is only the
     fallback used before the script runs. */
  min-height:calc(100vh - var(--chrome-h, 131px));
  min-height:calc(100dvh - var(--chrome-h, 131px));
  display:flex; align-items:center;
  padding:clamp(24px, 4.5vh, 64px) 32px clamp(32px, 6vh, 88px);
  color:#fff;
  overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,7,26,0.75) 0%, rgba(5,7,26,0.55) 45%, rgba(5,7,26,0.92) 100%);
}
.hero-content{ position:relative; z-index:1; max-width:640px; }
.hero-title{
  font-size:clamp(46px, 8vw, 88px);
  line-height:0.98;
  letter-spacing:-0.02em;
  margin-bottom:22px;
}
.hero-title-em{ font-style:italic; color:var(--orange-500); display:block; }
.hero-sub{ color:var(--sand-200); font-size:18px; max-width:50ch; margin-bottom:34px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-actions--center{ justify-content:center; }

/* boarding pass signature card */
.boarding-pass{
  position:absolute;
  /* The hero clips its overflow (for the slider rail's mask), so a pass that
     hangs past the hero bottom is sliced through the middle rather than
     overhanging the board. Sit it inside the hero instead. */
  right:6%; bottom:clamp(24px, 5vh, 56px);
  z-index:2;
  width:360px;
  background:var(--paper-50);
  color:var(--navy-900);
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  padding:22px 22px 20px;
  transform:rotate(-3deg);
}
.bp-row--head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.bp-airline{ font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:0.04em; }
.bp-class{ font-family:var(--font-mono); font-size:10px; color:var(--orange-500); font-weight:700; letter-spacing:0.08em; }
.bp-route{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.bp-city{ display:flex; flex-direction:column; }
.bp-city--end{ align-items:flex-end; }
.bp-code{ font-family:var(--font-display); font-size:30px; font-weight:700; letter-spacing:0.02em; }
.bp-label{ font-family:var(--font-mono); font-size:9.5px; color:var(--ink-400); text-transform:uppercase; letter-spacing:0.08em; }
.bp-plane{ flex:1; position:relative; height:24px; margin:0 14px; display:flex; align-items:center; }
.bp-line{ width:100%; height:24px; position:absolute; }
.bp-line line{ stroke:var(--line); stroke-width:1.5; stroke-dasharray:3 4; }
.bp-icon{ width:20px; height:20px; margin:0 auto; color:var(--orange-500); position:relative; background:var(--paper-50); }
.bp-perf{
  height:0; border-top:1.5px dashed var(--line); margin:0 -22px 16px;
  position:relative;
}
.bp-perf::before,.bp-perf::after{
  content:''; position:absolute; top:-9px; width:18px; height:18px; background:var(--navy-950); border-radius:50%;
}
.bp-perf::before{ left:-9px; }
.bp-perf::after{ right:-9px; }
.bp-details{ display:flex; justify-content:space-between; }
.bp-details div{ display:flex; flex-direction:column; gap:2px; }
.bp-k{ font-family:var(--font-mono); font-size:9px; color:var(--ink-400); text-transform:uppercase; letter-spacing:0.06em; }
.bp-v{ font-size:13px; font-weight:700; }

/* ---------- departure board stats ---------- */
/* No pull-up here. section{position:relative} (top of this file) makes the
   board a positioned sibling painted after the hero, so a negative margin does
   not tuck the board under the hero — it paints the board's opaque navy over
   the bottom of the hero image. Now that the hero sizes itself to the foot of
   the screen, any overlap reads as the picture stopping short of the bottom. */
.board{ background:var(--navy-950); padding:56px 32px 120px; }
.board-inner{
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:24px;
}
.board-item{ display:flex; flex-direction:column; gap:4px; text-align:center; flex:1; min-width:140px; }
.board-num{ font-family:var(--font-mono); font-size:clamp(26px,3vw,36px); font-weight:700; color:var(--sky-300); letter-spacing:0.02em; }
.board-label{ font-family:var(--font-mono); font-size:11px; color:var(--sand-200); text-transform:uppercase; letter-spacing:0.1em; }
.board-sep{ width:1px; height:40px; background:var(--line-light); }

/* ---------- about ---------- */
.about{ padding:110px 32px; background:var(--paper-50); }
.about-inner{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:0.85fr 1fr; gap:72px; align-items:center; }
.about-media{ position:relative; }
.about-media img{ border-radius:var(--radius); box-shadow:var(--shadow-md); aspect-ratio:4/5; object-fit:cover; }
.about-tag{
  position:absolute; left:-24px; bottom:-24px;
  background:var(--orange-500); color:#fff;
  width:96px; height:96px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md);
  transform:rotate(-8deg);
}
.about-tag-est{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; }
.about-tag-year{ font-family:var(--font-display); font-size:22px; font-weight:700; }
.about-copy p + p{ margin-top:14px; margin-bottom:22px; }

/* ---------- services ---------- */
.services{ padding:110px 32px; background:var(--sand-100); }
.tag-grid{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
.tag-card{
  position:relative;
  background:var(--paper-50);
  border-radius:12px;
  padding:32px 26px 28px;
  border:1px solid var(--line);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tag-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }
.tag-hole{
  position:absolute; top:18px; right:18px;
  width:14px; height:14px; border-radius:50%;
  background:var(--sand-100);
  border:1px solid var(--line);
}
.tag-icon{ font-size:30px; display:block; margin-bottom:16px; }
.tag-card h3{ font-size:19px; margin-bottom:10px; }
.tag-card p{ font-size:14.5px; }

/* ---------- destinations ---------- */
.destinations{ padding:110px 32px 120px; background:var(--navy-950); }
.dest-grid{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:18px;
}
.dest-card{ position:relative; border-radius:12px; overflow:hidden; grid-column:span 1; }
.dest-card--wide{ grid-column:span 2; }
.dest-card img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.dest-card:hover img{ transform:scale(1.08); }
.dest-card::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,7,26,0) 40%, rgba(5,7,26,0.85) 100%);
  z-index:1;
}
.dest-info{ position:absolute; left:18px; bottom:16px; z-index:2; color:#fff; display:flex; flex-direction:column; }
.dest-code{ font-family:var(--font-mono); font-size:11px; color:var(--orange-500); letter-spacing:0.1em; font-weight:700; }
.dest-name{ font-family:var(--font-display); font-size:22px; font-weight:600; }

/* ---------- packages ---------- */
.packages{ padding:110px 32px; background:var(--paper-50); }
.pkg-grid{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.pkg-card{ border-radius:var(--radius); overflow:hidden; background:#fff; border:1px solid var(--line); transition:box-shadow .2s ease, transform .2s ease; }
.pkg-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-5px); }
.pkg-media{ position:relative; height:210px; }
.pkg-media img{ width:100%; height:100%; object-fit:cover; }
.pkg-badge{
  position:absolute; top:14px; left:14px;
  background:var(--navy-950); color:#fff;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px;
}
.pkg-body{ padding:24px 22px 26px; }
.pkg-days{ font-family:var(--font-mono); font-size:11px; color:var(--orange-600); letter-spacing:0.08em; font-weight:700; }
.pkg-body h3{ font-size:21px; margin:8px 0 10px; }
.pkg-body p{ font-size:14px; margin-bottom:18px; }
.pkg-foot{ display:flex; align-items:center; justify-content:space-between; padding-top:16px; border-top:1px dashed var(--line); }
.pkg-price{ font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--navy-900); }
.pkg-price small{ font-family:var(--font-body); font-size:12px; font-weight:500; color:var(--ink-400); display:block; }

/* ---------- why us ---------- */
.why{ padding:110px 32px; background:var(--sand-100); }
.why-inner{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:0.8fr 1.2fr; gap:64px; }
.why-list{ display:flex; flex-direction:column; }
.why-row{ display:flex; gap:22px; padding:26px 0; border-bottom:1px solid var(--line); }
.why-row:first-child{ padding-top:6px; }
.why-num{ font-family:var(--font-mono); font-size:14px; color:var(--orange-500); font-weight:700; padding-top:3px; }
.why-row h3{ font-size:18px; margin-bottom:6px; }
.why-row p{ font-size:14.5px; }

/* ---------- testimonials ---------- */
.testimonials{ padding:110px 32px; background:var(--paper-50); }
.testi-grid{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.testi-card{
  position:relative; background:#fff; border-radius:12px; padding:30px 26px 24px;
  border:1px solid var(--line); margin:0;
}
.testi-perf{ position:absolute; left:26px; right:26px; bottom:66px; border-top:1px dashed var(--line); }
.testi-card blockquote{ margin:0 0 34px; font-family:var(--font-display); font-size:16.5px; line-height:1.55; color:var(--navy-900); font-style:italic; }
.testi-card figcaption{ display:flex; flex-direction:column; }
.testi-name{ font-weight:700; font-size:14px; }
.testi-trip{ font-family:var(--font-mono); font-size:11px; color:var(--ink-400); letter-spacing:0.04em; }

/* ---------- CTA banner ---------- */
.cta-banner{ background:var(--navy-950); padding:100px 32px; text-align:center; }
.cta-inner{ max-width:640px; margin:0 auto; }
.cta-inner h2{ font-family:var(--font-display); color:#fff; font-size:clamp(28px,4vw,42px); margin-bottom:16px; }
.cta-inner p{ color:var(--sand-200); margin-bottom:34px; font-size:16.5px; }

/* ---------- contact ---------- */
.contact{ padding:110px 32px; background:var(--sand-100); }
.contact-inner{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:0.8fr 1.2fr; gap:64px; }
.contact-list{ margin-top:30px; display:flex; flex-direction:column; gap:16px; }
.contact-list li{ display:flex; flex-direction:column; gap:2px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.contact-list li span:first-child{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-400); }
.contact-list li a,.contact-list li span:last-child{ font-weight:700; font-size:15.5px; }
.contact-list li a:hover{ color:var(--orange-500); }

.contact-form{ background:#fff; border-radius:var(--radius); padding:36px; box-shadow:var(--shadow-md); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:12.5px; font-weight:700; margin-bottom:7px; color:var(--navy-900); }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border-radius:8px; border:1.5px solid var(--line);
  font-family:var(--font-body); font-size:14.5px; background:var(--paper-50); color:var(--ink-900);
  transition:border-color .18s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--sky-400); outline:none; }
.field textarea{ resize:vertical; }
.form-note{ text-align:center; font-size:12.5px; color:var(--ink-400); margin-top:12px; }

/* ---------- footer ---------- */
.site-footer{ background:var(--navy-950); color:var(--sand-200); padding:80px 32px 0; }
.footer-inner{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:50px;
  padding-bottom:60px; border-bottom:1px solid var(--line-light);
}
.footer-mark{ width:52px; height:52px; border-radius:50%; margin-bottom:16px; }
.footer-brand p{ color:var(--ink-400); font-size:14px; margin-bottom:18px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line-light);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px;
}
.footer-social a:hover{ border-color:var(--sky-400); color:var(--sky-400); }
.footer-col h4{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:#fff; margin-bottom:18px; }
.footer-col a{ display:block; color:var(--ink-400); font-size:14px; margin-bottom:12px; }
.footer-col a:hover{ color:var(--orange-500); }
.footer-bottom{
  max-width:var(--container); margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  padding:26px 0; font-size:12.5px; color:var(--ink-400);
}
.footer-tag{ font-family:var(--font-mono); letter-spacing:0.08em; }

/* ---------- dynamic content loading state ---------- */
.grid-loading{
  grid-column:1/-1;
  text-align:center;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.06em;
  color:var(--ink-400);
  padding:40px 0;
}
.grid-loading--light{ color:var(--sand-200); }

/* ---------- whatsapp float ---------- */
.whatsapp-float{
  position:fixed; right:26px; bottom:26px; z-index:60;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(37,211,102,0.5);
  transition:transform .2s ease;
}
.whatsapp-float svg{ width:28px; height:28px; }
.whatsapp-float:hover{ transform:scale(1.08); }

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .about-inner, .why-inner, .contact-inner{ grid-template-columns:1fr; gap:44px; }
  .tag-grid, .pkg-grid, .testi-grid{ grid-template-columns:repeat(2,1fr); }
  .dest-grid{ grid-template-columns:repeat(2,1fr); }
  .dest-card--wide{ grid-column:span 2; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width:860px){
  .main-nav{
    position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px;
    background:var(--navy-950); flex-direction:column; padding:100px 32px; gap:26px;
    transform:translateX(100%); transition:transform .3s ease; z-index:40;
  }
  .main-nav.open{ transform:translateX(0); }
  .nav-toggle{ display:flex; }
  .header-cta .btn--ghost{ display:none; }
  .boarding-pass{ display:none; }
}

@media (max-width:640px){
  .tag-grid, .pkg-grid, .testi-grid, .dest-grid{ grid-template-columns:1fr; }
  .dest-card--wide{ grid-column:span 1; }
  .form-row{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; }
  .hero{ padding:130px 20px 90px; text-align:left; }
  .strip-inner{ flex-direction:column; gap:4px; align-items:flex-start; }
}

/* ============================================
   ADMIN-DRIVEN MARKUP
   Nav links, stats, chips, footer links and the
   card grids are injected by script.js from the
   content managed in admin.html. These wrappers
   must not break the flex layouts around them.
   ============================================ */
#navLinks{ display:contents; }

/* ============================================
   HERO HORIZONTAL SLIDER
   A sideways-scrolling card rail on the right of
   the hero. The headline, text, buttons and the
   background image all follow the leading card.
   Managed from admin.html → Hero → Slides.
   ============================================ */

/* two stacked backgrounds so slides cross-fade */
.hero-bg img{ position:absolute; inset:0; transition:opacity .7s ease; }
.hero-bg img.is-under{ opacity:0; }

/* when the rail is on, the copy shares the row with it */
/* With the rail on, the hero becomes a two-column row: copy on the
   left, cards on the right, both vertically centred. Height is capped
   so the cards and the arrows are always inside the first screen. */
.hero--slider{
  /* Same measured sizing as .hero above. This rule comes later in the file
     and has equal specificity, so it wins — it must therefore repeat the
     calculation rather than leaving a hard-coded guess here, which is what
     previously stopped the hero reaching the bottom of the screen. */
  min-height:calc(100vh - var(--chrome-h, 131px));
  min-height:calc(100dvh - var(--chrome-h, 131px));
  padding:clamp(18px, 3vh, 44px) 0 clamp(22px, 4vh, 56px) 32px;
  gap:clamp(24px, 4vw, 64px);
}
.hero--slider .hero-content{ flex:1 1 480px; max-width:560px; }
.hero--slider .hero-sub{ margin-bottom:28px; font-size:17px; }

/* the copy swaps out with a short fade */
.hero-content .is-swapping{ opacity:0; transform:translateY(8px); }
#heroEyebrow, #heroTitle, #heroTitleEm, #heroSub, .hero-actions{
  transition:opacity .32s ease, transform .32s ease;
}

/* ---------- controls ---------- */

.hero-ctrl{
  display:flex; align-items:center; gap:14px;
  margin-top:clamp(24px, 4vh, 44px);
}

.hero-arrow{
  width:52px; height:52px; flex:none;
  border-radius:50%;
  border:1px solid var(--line-light);
  background:rgba(250,248,244,0.06);
  color:#fff;
  display:grid; place-items:center;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.hero-arrow svg{ width:22px; height:22px; }
.hero-arrow:hover{ background:rgba(250,248,244,0.14); border-color:rgba(250,248,244,0.4); }
.hero-arrow:active{ transform:scale(.94); }
.hero-arrow--next{ background:var(--orange-500); border-color:var(--orange-500); }
.hero-arrow--next:hover{ background:var(--orange-600); border-color:var(--orange-600); }
.hero-arrow:focus-visible{ outline:2px solid var(--sky-400); outline-offset:3px; }

.hero-progress{
  flex:1; max-width:150px; height:2px;
  background:var(--line-light);
  position:relative; overflow:hidden;
}
.hero-progress i{
  position:absolute; inset:0 auto 0 0;
  width:25%;
  background:var(--orange-500);
  transition:width .45s cubic-bezier(.4,0,.2,1), left .45s cubic-bezier(.4,0,.2,1);
}

.hero-count{
  font-family:var(--font-mono);
  font-size:13px; letter-spacing:0.04em;
  color:var(--sand-200);
  display:flex; align-items:baseline; gap:5px;
}
.hero-count strong{
  font-family:var(--font-display);
  font-size:32px; font-weight:700; color:#fff;
  line-height:1;
}

/* ---------- the rail ---------- */

.hero-rail{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  width:min(46vw, 620px);
  overflow:hidden;
  /* soften both ends: cards drift in from the right and out to the left */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 7%, #000 78%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 7%, #000 78%, transparent 100%);
}

.hero-track{
  display:flex;
  gap:20px;
  padding:14px 0 14px 4px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-behavior:smooth;
  cursor:grab;
}
.hero-track::-webkit-scrollbar{ display:none; }
.hero-track.is-dragging{ cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; }
/* while the rail drifts on its own, smooth scrolling and snapping would
   both fight the per-frame scroll position */
.hero-track.is-marquee{ scroll-behavior:auto; scroll-snap-type:none; }

.hero-card{
  position:relative;
  flex:0 0 auto;
  /* shrink with the viewport so the cards and the arrows below the
     copy always fit on the first screen, laptop or desktop */
  width:clamp(206px, 26vh, 270px);
  height:clamp(298px, 38vh, 390px);
  border-radius:16px;
  overflow:hidden;
  scroll-snap-align:start;
  border:1px solid var(--line-light);
  background:var(--navy-800);
  text-decoration:none;
  color:#fff;
  opacity:.62;
  transform:scale(.94);
  transform-origin:center bottom;
  transition:opacity .45s ease, transform .45s ease, border-color .3s ease;
  -webkit-user-select:none; user-select:none;
}
.hero-card img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
  -webkit-user-drag:none;
}
.hero-card::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,7,26,0) 35%, rgba(5,7,26,.86) 100%);
}
.hero-card span{
  position:absolute; left:22px; right:22px; bottom:22px;
  z-index:1;
  font-family:var(--font-display);
  font-size:25px; font-weight:600; line-height:1.15;
  letter-spacing:-0.01em;
  text-shadow:0 2px 14px rgba(5,7,26,.6);
}
.hero-card:hover{ opacity:.85; }

.hero-card.is-active{
  opacity:1;
  transform:scale(1);
  border-color:rgba(250,248,244,0.34);
  box-shadow:0 22px 50px rgba(5,7,26,.5);
}
.hero-card:focus-visible{ outline:2px solid var(--sky-400); outline-offset:3px; }

/* the boarding pass and the rail would sit on top of each other */
.hero--slider .boarding-pass{ display:none; }

@media (prefers-reduced-motion: reduce){
  .hero-track{ scroll-behavior:auto; }
  .hero-card, .hero-bg img,
  #heroEyebrow, #heroTitle, #heroTitleEm, #heroSub, .hero-actions{ transition:none; }
}

/* ---------- responsive ---------- */

@media (max-width:1100px){
  .hero-rail{ width:min(50vw, 470px); }
  .hero--slider .hero-content{ flex:1 1 380px; }
  .hero-card{ width:clamp(200px, 24vh, 230px); height:clamp(286px, 34vh, 330px); }
  .hero-card span{ font-size:21px; }
}

@media (max-width:860px){
  /* stack: copy on top, rail scrolls full width underneath */
  .hero--slider{
    padding:120px 0 60px;
    min-height:auto;
    display:block;
  }
  .hero--slider .hero-content{
    max-width:none;
    padding:0 24px;
  }
  .hero-ctrl{ margin-top:32px; }
  .hero-arrow{ width:46px; height:46px; }
  .hero-count strong{ font-size:26px; }

  .hero-rail{
    width:100%;
    margin-top:36px;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  .hero-track{ padding:14px 24px; gap:16px; scroll-padding-left:24px; }
  .hero-card{ width:215px; height:300px; }
  .hero-card.is-active{ box-shadow:0 14px 34px rgba(5,7,26,.45); }
}

@media (max-width:520px){
  .hero-progress{ display:none; }
  .hero-card{ width:190px; height:266px; }
  .hero-card span{ font-size:19px; left:16px; right:16px; bottom:16px; }
}


/* ============================================================
   NAV DROPDOWN  (a nav item that has children)
   ============================================================ */
.nav-drop{ position:relative; display:inline-flex; }
.nav-drop-top{ display:inline-flex; align-items:center; gap:6px; }
.nav-caret{
  width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:4px solid currentColor; opacity:.7; transition:transform .2s ease;
}
.nav-drop:hover .nav-caret,
.nav-drop:focus-within .nav-caret{ transform:rotate(180deg); }

.nav-menu{
  position:absolute; top:100%; left:50%; transform:translate(-50%, 6px);
  min-width:190px; padding:8px; display:flex; flex-direction:column; gap:2px;
  background:var(--navy-800); border:1px solid var(--line-light); border-radius:12px;
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.nav-drop:hover .nav-menu,
.nav-drop:focus-within .nav-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%, 0);
}
/* A hover bridge, so the menu does not vanish while the pointer crosses the gap. */
.nav-drop::after{ content:''; position:absolute; top:100%; left:0; right:0; height:10px; }
.nav-menu a{
  padding:9px 12px; border-radius:8px; font-size:14px; color:var(--sand-200);
  white-space:nowrap;
}
.nav-menu a::after{ display:none; }
.nav-menu a:hover{ background:rgba(255,255,255,0.07); color:#fff; }

/* ============================================================
   GLOBAL VISAS
   ============================================================ */
.visas{ padding:110px 32px; background:var(--paper-50); }
.visas .section-head{ max-width:var(--container); margin:0 auto 44px; }
.visa-lede{ max-width:60ch; margin-top:14px; }

.visa-grid{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); gap:20px;
}
.visa-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:17px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px 24px 21px;
  box-shadow:0 1px 2px rgba(5,7,26,0.05);
  transition:transform .28s cubic-bezier(.22,.68,.36,1),
             box-shadow .28s ease, border-color .28s ease;
}
/* A brand-coloured rule that draws itself across the top on hover. */
.visa-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--brand-orange), var(--orange-500));
  transform:scaleX(0); transform-origin:left center;
  transition:transform .4s cubic-bezier(.22,.68,.36,1);
}
.visa-card:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 44px -20px rgba(5,7,26,0.30);
  border-color:rgba(219,113,28,0.34);
}
.visa-card:hover::before{ transform:scaleX(1); }

.visa-card-top{ display:flex; align-items:center; gap:14px; }
.visa-card-title h3{
  font-family:var(--font-display); font-size:19px; font-weight:600;
  line-height:1.15; color:var(--navy-900);
}
.visa-type{
  display:block; margin-top:4px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--ink-400);
}

/* The flag sits in a fixed frame so cards line up whatever the flag's
   proportions. The emoji underneath is the fallback: if the image is
   missing it removes itself and the glyph shows through. On Windows that
   glyph renders as the two-letter country code, which still reads clearly. */
.visa-flag{
  position:relative; flex:none;
  width:54px; height:37px; border-radius:8px; overflow:hidden;
  background:var(--sand-100);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 1px rgba(5,7,26,0.10), 0 2px 6px rgba(5,7,26,0.14);
}
.visa-flag img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.visa-flag-text{ font-size:16px; font-weight:700; letter-spacing:0.02em; }

.visa-meta{ display:flex; flex-direction:column; gap:9px; }
.visa-meta > div{ display:flex; justify-content:space-between; gap:14px; align-items:baseline; }
.visa-meta dt{ font-size:12.5px; color:var(--ink-400); flex:none; }
.visa-meta dd{ font-size:13.5px; font-weight:600; text-align:right; color:var(--ink-900); }

.visa-foot{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
}
.visa-price{
  display:flex; flex-direction:column; line-height:1.2;
  font-weight:700; font-size:16px; color:var(--brand-orange-ink);
}
.visa-price small{
  font-family:var(--font-mono); font-weight:500; font-size:9.5px;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-400);
  margin-bottom:3px;
}

.visa-disclaimer{
  max-width:var(--container); margin:26px auto 0;
  font-size:12.5px; line-height:1.65; color:var(--ink-600);
  padding:14px 16px; background:var(--sand-100); border-radius:10px;
  border-left:3px solid var(--brand-orange);
}

.visa-panels{
  max-width:var(--container); margin:56px auto 0;
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:40px;
}
.visa-panel h3{ font-family:var(--font-display); font-size:22px; margin-bottom:20px; }

.visa-steps{ list-style:none; display:flex; flex-direction:column; gap:20px; }
.visa-step{ display:flex; gap:16px; }
.visa-step-num{
  flex:none; font-family:var(--font-mono); font-size:12px; font-weight:600;
  color:var(--brand-orange-ink); padding-top:2px;
}
.visa-step h4{ font-size:15.5px; font-weight:700; margin-bottom:4px; }
.visa-step p{ font-size:14px; line-height:1.65; color:var(--ink-600); }

.visa-docs{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.visa-docs li{
  position:relative; padding-left:22px; font-size:14px; line-height:1.6; color:var(--ink-600);
}
.visa-docs li::before{
  content:''; position:absolute; left:0; top:8px; width:7px; height:7px;
  border-radius:50%; background:var(--brand-orange);
}
.visa-docs-note{ margin-top:16px; font-size:13px; line-height:1.6; color:var(--ink-400); font-style:italic; }

.visa-faq{ max-width:var(--container); margin:56px auto 0; }
.visa-faq h3{ font-family:var(--font-display); font-size:22px; margin-bottom:18px; }
.visa-faq-item{ border-bottom:1px solid var(--line); }
.visa-faq-item summary{
  cursor:pointer; list-style:none; padding:16px 34px 16px 0; position:relative;
  font-size:15.5px; font-weight:600;
}
.visa-faq-item summary::-webkit-details-marker{ display:none; }
.visa-faq-item summary::after{
  content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:20px; font-weight:400; color:var(--brand-orange-ink);
}
.visa-faq-item[open] summary::after{ content:'\2212'; }
.visa-faq-item summary:hover{ color:var(--brand-orange-ink); }
.visa-faq-body{ padding:0 34px 18px 0; }
.visa-faq-body p{ font-size:14.5px; line-height:1.75; color:var(--ink-600); }

.visa-cta{
  max-width:var(--container); margin:48px auto 0;
  display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
  padding:26px; background:var(--navy-900); border-radius:var(--radius);
}
.visa-cta p{ color:var(--sand-200); font-size:16.5px; font-weight:600; }

@media (max-width: 900px){
  .visa-panels{ grid-template-columns:1fr; gap:44px; }
}
@media (max-width: 720px){
  .visas{ padding:72px 20px; }
  .visa-grid{ grid-template-columns:1fr; }
  .visa-cta{ flex-direction:column; text-align:center; gap:16px; }
  /* On touch there is no hover, so the dropdown just stacks open. */
  .nav-drop{ display:block; width:100%; }
  .nav-menu{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    background:none; border:none; box-shadow:none; padding:6px 0 0 14px; min-width:0;
  }
  .nav-caret{ display:none; }
}


/* ============================================================
   SCROLL REVEAL
   Elements start slightly offset and settle as they scroll in.
   Delays are staggered per grid so cards arrive one after another
   rather than all at once.
   ============================================================ */
[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.68,.36,1),
             transform .7s cubic-bezier(.22,.68,.36,1);
  transition-delay:var(--reveal-delay, 0ms);
  will-change:opacity, transform;
}
[data-reveal="left"] { transform:translateX(-26px); }
[data-reveal="right"]{ transform:translateX(26px); }
[data-reveal="rise"] { transform:translateY(34px) scale(.985); }
[data-reveal].is-in{ opacity:1; transform:none; }

/* Anyone who has asked their system for less motion gets the finished
   state immediately, with no movement at all. */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{
    opacity:1 !important; transform:none !important;
    transition:none !important;
  }
}

/* ============================================================
   FLIGHT PATH DIVIDER
   A dashed route with a little aircraft that flies across once the
   divider scrolls into view.
   ============================================================ */
.flight-path{
  max-width:var(--container);
  margin:0 auto clamp(26px, 4vw, 44px);
  padding:0 32px;
  display:flex; align-items:center; gap:14px;
}
.flight-path .fp-dot{
  flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--orange-500);
  box-shadow:0 0 0 4px rgba(245,130,31,0.16);
}
.flight-path .fp-line{
  flex:1 1 auto; height:0;
  border-top:1.5px dashed var(--line-light);
}
.flight-path .fp-plane{
  flex:none; font-size:19px; line-height:1; color:var(--orange-500);
  transform:translateX(-14px); opacity:0;
  transition:transform 1.5s cubic-bezier(.3,.7,.3,1), opacity .5s ease;
  transition-delay:.15s;
}
.flight-path.is-in .fp-plane{ transform:translateX(0); opacity:1; }
@media (prefers-reduced-motion: reduce){
  .flight-path .fp-plane{ transform:none; opacity:1; transition:none; }
}

/* The counting statistics keep a steady width while the digits change,
   so the row does not jitter as the numbers climb. */
.board-num{ font-variant-numeric:tabular-nums; }

/* ============================================
   UAE NATIONAL DAY — FIXED DEPARTURES
   A dated campaign band on the navy ground, sitting
   between the destinations board and the evergreen
   packages. Namespaced .natday* / .incl* / .trip*
   so the whole season can be lifted out later.
   ============================================ */

.natday{
  padding:104px 32px 96px;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(47,182,232,0.16), transparent 60%),
    radial-gradient(900px 480px at 92% 8%, rgba(245,130,31,0.16), transparent 62%),
    var(--navy-950);
  color:var(--paper-50);
  overflow:hidden;
}
.natday-inner{ max-width:var(--container); margin:0 auto; position:relative; }

.natday-head{ max-width:66ch; padding-right:190px; }
.natday-head .eyebrow{ color:var(--sky-300); }
.natday-head .section-title{ color:var(--paper-50); margin-bottom:16px; }
.natday-head .section-title em{ color:var(--orange-500); }
.natday-head .lede{ color:rgba(250,248,244,0.74); max-width:58ch; }

.natday-dates{
  display:inline-flex; align-items:center; gap:10px;
  margin:6px 0 0;
  font-family:var(--font-mono); font-size:12.5px; font-weight:600;
  letter-spacing:0.09em; text-transform:uppercase;
  color:var(--paper-50);
  background:rgba(250,248,244,0.07);
  border:1px solid var(--line-light);
  padding:9px 16px; border-radius:999px;
}
.natday-dates-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--orange-500);
  box-shadow:0 0 0 4px rgba(245,130,31,0.22);
}

/* ---------- buy now, pay later ---------- */
.paylater{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px;
  margin-top:22px;
}
.paylater-label{
  font-family:var(--font-mono); font-size:11.5px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(250,248,244,0.6);
}
.paylater-chips{ display:inline-flex; gap:8px; }

/* The two wordmarks. Both are set in the body face at a tight
   tracking so they read as logos rather than as running text. */
.pl-chip{
  display:inline-flex; align-items:center;
  padding:7px 16px 8px; border-radius:9px;
  font-family:var(--font-body); font-weight:800; font-size:15px;
  letter-spacing:-0.02em; line-height:1;
}
.pl-chip--tabby{ background:#3EEDBF; color:#0a2a24; }
.pl-chip--tamara{ background:#fff; color:#1a1c22; }

.paylater-note{
  font-size:13.5px; color:rgba(250,248,244,0.62);
  flex-basis:100%;
}

/* On the light packages section the same component inverts. */
.paylater--inline{ margin-top:8px; }
.paylater--inline .paylater-label{ color:var(--ink-400); }
.paylater--inline .paylater-note{ color:var(--ink-600); flex-basis:auto; }
.paylater--inline .pl-chip{ font-size:14px; padding:6px 14px 7px; }
.paylater--inline .pl-chip--tamara{ border:1px solid var(--line); }

/* ---------- "UAE's online travel agency" stamp ---------- */
.seal{
  position:absolute; top:-6px; right:0;
  width:158px; height:158px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; text-align:center;
  background:rgba(250,248,244,0.04);
  border:2.5px solid var(--orange-500);
  transform:rotate(-7deg);
  color:var(--paper-50);
  padding:10px;
}
.seal::after{
  content:''; position:absolute; inset:7px;
  border-radius:50%; border:1px solid rgba(245,130,31,0.42);
}
.seal-l1{ font-family:var(--font-body); font-size:14px; font-weight:700; }
.seal-l2{
  font-family:var(--font-brand); font-size:25px; line-height:1;
  color:var(--orange-500); letter-spacing:0.01em;
}
.seal-l3{ font-family:var(--font-display); font-style:italic; font-size:15px; font-weight:600; }

/* ---------- departure cards ---------- */
.natday-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  margin-top:48px;
}
.natday-card{
  position:relative;
  border-radius:var(--radius); overflow:hidden;
  background:rgba(250,248,244,0.05);
  border:1px solid var(--line-light);
  display:flex; flex-direction:column;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.natday-card:hover{
  transform:translateY(-5px);
  border-color:rgba(245,130,31,0.55);
  box-shadow:var(--shadow-lg);
}
.natday-media{ height:196px; overflow:hidden; }
.natday-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.natday-card:hover .natday-media img{ transform:scale(1.06); }

.natday-body{
  padding:20px 22px 22px;
  display:flex; flex-direction:column; gap:4px; flex:1;
}
.natday-country{ font-size:24px; color:var(--paper-50); }
.natday-city{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--sky-300);
}
.natday-price{
  margin-top:14px;
  font-family:var(--font-display); font-size:15px; font-weight:600;
  color:var(--paper-50);
  display:flex; align-items:baseline; gap:7px;
}
.natday-price small{
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-400);
}
.natday-price b{ font-size:14px; font-weight:600; color:rgba(250,248,244,0.72); }
.natday-amt{ font-family:var(--font-display); font-size:30px; font-weight:700; letter-spacing:-0.01em; }

.natday-actions{ display:flex; gap:10px; margin-top:18px; padding-top:16px; border-top:1px dashed var(--line-light); }
.btn--ghost-dark{
  background:transparent; color:var(--paper-50);
  border-color:var(--line-light);
}
.btn--ghost-dark:hover{ background:rgba(250,248,244,0.1); border-color:var(--paper-50); }

.natday-note{
  margin-top:22px;
  font-family:var(--font-mono); font-size:12.5px;
  color:rgba(250,248,244,0.58);
}

/* ---------- what every departure includes ---------- */
.incl-strip{
  display:flex; flex-wrap:wrap; align-items:stretch;
  gap:0; margin-top:44px;
  border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
}
.incl-item{
  flex:1 1 0; min-width:120px;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:26px 12px;
  font-family:var(--font-mono); font-size:11.5px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(250,248,244,0.8);
  text-align:center;
}
.incl-item + .incl-item{ border-left:1px dashed var(--line-light); }
.incl-icon{ font-size:24px; line-height:1; }

.natday-cta{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:20px; margin-top:40px;
}
.natday-cta p{ color:rgba(250,248,244,0.74); max-width:52ch; }

/* ============================================
   ITINERARY DIALOG
   ============================================ */

body.is-modal-open{ overflow:hidden; }

.trip-modal{ position:fixed; inset:0; z-index:90; display:flex; }
.trip-modal[hidden]{ display:none; }
.trip-modal-scrim{
  position:absolute; inset:0;
  background:rgba(5,7,26,0.72);
  backdrop-filter:blur(3px);
  animation:tripFade .18s ease;
}
@keyframes tripFade{ from{ opacity:0; } }

.trip-modal-panel{
  position:relative; margin:auto;
  width:min(880px, calc(100vw - 32px));
  max-height:min(92vh, 1000px);
  overflow-y:auto; overscroll-behavior:contain;
  background:var(--paper-50);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  animation:tripRise .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes tripRise{ from{ opacity:0; transform:translateY(18px); } }
.trip-modal-panel:focus{ outline:none; }

.trip-modal-close{
  position:sticky; top:14px; float:right; right:14px; z-index:2;
  margin:14px 14px 0 0;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--ink-900);
  font-size:22px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, color .18s ease;
}
.trip-modal-close:hover{ background:var(--navy-900); color:#fff; }

.trip-modal-body{ padding:34px 40px 40px; }

.trip-head{ border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:26px; }
.trip-kicker{
  font-family:var(--font-mono); font-size:11.5px; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--orange-600);
  margin-bottom:10px;
}
.trip-head h2{ font-size:clamp(24px, 3.2vw, 34px); line-height:1.15; margin-bottom:10px; }
.trip-from{
  font-family:var(--font-mono); font-size:12px; color:var(--ink-400);
  letter-spacing:0.04em; margin-bottom:12px;
}
.trip-overview{ font-size:16px; max-width:62ch; }

.trip-sec{ margin-bottom:34px; }
.trip-sec h3{
  font-size:13px; font-family:var(--font-mono); font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--navy-900);
  padding-bottom:10px; margin-bottom:16px;
  border-bottom:1px solid var(--line);
}
.trip-sec--split{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.trip-note{ font-size:13px; color:var(--ink-400); margin-top:12px; }

/* price table */
.trip-table{ width:100%; border-collapse:collapse; }
.trip-table th{
  text-align:left; font-weight:500; font-size:14.5px;
  color:var(--ink-600); padding:11px 0; border-bottom:1px dashed var(--line);
}
.trip-table td{
  text-align:right; padding:11px 0; border-bottom:1px dashed var(--line);
  font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--navy-900);
  white-space:nowrap;
}

/* flights */
.trip-flights{ display:flex; flex-direction:column; gap:8px; }
.trip-flight{
  display:grid;
  grid-template-columns:1fr auto auto minmax(180px, auto);
  align-items:center; gap:14px;
  padding:13px 16px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  font-size:13.5px;
}
.tf-airline{ font-weight:700; color:var(--navy-900); }
.tf-no, .tf-date{
  font-family:var(--font-mono); font-size:12px; color:var(--ink-400);
  letter-spacing:0.04em;
}
.tf-leg{
  display:inline-flex; align-items:center; gap:10px; justify-self:end;
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink-600);
}
.tf-leg b{ color:var(--navy-900); font-weight:700; }
.tf-leg i{ color:var(--orange-500); font-style:normal; }

/* day by day */
.trip-days{ display:flex; flex-direction:column; gap:2px; list-style:none; margin:0; padding:0; }
.trip-day{
  position:relative; padding:0 0 26px 30px;
  border-left:1px dashed var(--line);
}
.trip-day:last-child{ border-left-color:transparent; padding-bottom:0; }
.trip-day::before{
  content:''; position:absolute; left:-5.5px; top:6px;
  width:10px; height:10px; border-radius:50%;
  background:var(--orange-500); box-shadow:0 0 0 4px var(--paper-50);
}
.trip-day h4{
  font-family:var(--font-display); font-size:18px; font-weight:600;
  color:var(--navy-900); margin:0 0 8px;
}
.trip-day p{ font-size:14.5px; }

/* included / not included */
.trip-tick li, .trip-cross li{
  position:relative; padding:7px 0 7px 26px;
  font-size:14.5px; color:var(--ink-600);
  border-bottom:1px dashed var(--line);
}
.trip-tick li::before, .trip-cross li::before{
  position:absolute; left:0; top:7px;
  font-family:var(--font-mono); font-weight:700;
}
.trip-tick li::before{ content:'✓'; color:#1b7d4f; }
.trip-cross li::before{ content:'✕'; color:var(--ink-400); }

.trip-prose p + p{ margin-top:12px; }
.trip-prose p{ font-size:14.5px; }

/* the small print */
.trip-policy{ display:flex; flex-direction:column; gap:10px; }
.trip-policy-item{
  border:1px solid var(--line); border-radius:10px;
  background:#fff; overflow:hidden;
}
.trip-policy-item summary{
  cursor:pointer; padding:14px 18px; list-style:none;
  font-weight:700; font-size:14.5px; color:var(--navy-900);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.trip-policy-item summary::-webkit-details-marker{ display:none; }
.trip-policy-item summary::after{
  content:'+'; font-family:var(--font-mono); font-size:18px; color:var(--orange-500);
}
.trip-policy-item[open] summary::after{ content:'−'; }
.trip-policy-item ul{ padding:0 18px 16px; }
.trip-policy-item li{
  position:relative; padding:6px 0 6px 16px;
  font-size:13.5px; color:var(--ink-600); line-height:1.6;
}
.trip-policy-item li::before{
  content:''; position:absolute; left:0; top:14px;
  width:5px; height:5px; border-radius:50%; background:var(--orange-500);
}

.trip-foot{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:18px;
  padding-top:24px; border-top:1px solid var(--line);
}
.trip-foot-price{
  font-family:var(--font-display); font-size:30px; font-weight:700; color:var(--navy-900);
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
}
.trip-foot-price small{
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-400);
}
.trip-foot-price i{
  font-family:var(--font-body); font-style:normal; font-size:12.5px;
  font-weight:500; color:var(--ink-400); flex-basis:100%;
}

@media (prefers-reduced-motion: reduce){
  .trip-modal-scrim, .trip-modal-panel{ animation:none; }
  .natday-card:hover .natday-media img{ transform:none; }
}

@media (max-width:1080px){
  .natday-grid{ grid-template-columns:repeat(2,1fr); }
  .natday-head{ padding-right:0; }
  .seal{ position:static; margin:26px 0 0; transform:rotate(-4deg); }
}

@media (max-width:860px){
  .trip-sec--split{ grid-template-columns:1fr; gap:26px; }
  .trip-modal-body{ padding:28px 24px 32px; }
  .trip-flight{ grid-template-columns:1fr auto; row-gap:6px; }
  .tf-leg{ grid-column:1/-1; justify-self:start; }
}

@media (max-width:640px){
  .natday{ padding:80px 20px 76px; }
  .natday-grid{ grid-template-columns:1fr; }
  .incl-item{ flex-basis:33.333%; min-width:0; padding:20px 6px; font-size:10.5px; }
  .incl-item + .incl-item{ border-left:none; }
  .natday-cta{ flex-direction:column; align-items:flex-start; }
  .trip-foot{ flex-direction:column; align-items:flex-start; }
}