/* ============================================================
   TAHJI ADVENTURES — design tokens
   Display + body: Montserrat (bold weights for headlines, regular for body)
   Script:  Caveat (tagline / handwritten warmth, echoes logo script)
   Mono:    Space Mono (flight-board digits: dates, prices, codes)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Caveat:wght@500;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* --- brand palette, pulled from the logo --- */
  --sun:        #FF8A1E;   /* sunset orange   */
  --coral:      #EF4B23;   /* deep coral/red  */
  --palm:       #1F8B4C;   /* palm green      */
  --palm-light: #3CBE6E;
  --ocean:      #159FD6;   /* swoosh blue     */
  --ocean-deep: #0B6E93;
  --jungle:     #0E2A22;   /* deep jungle ink for hero/footer */
  --jungle-2:   #123A2E;
  --sand:       #FFF8EF;   /* warm off-white section bg */
  --ink:        #1A1712;   /* body text */
  --ink-soft:   #55524B;
  --paper:      #FFFFFF;
  --line:       rgba(26,23,18,0.10);

  --grad-sun: radial-gradient(circle at 30% 30%, #FFC24D 0%, var(--sun) 45%, var(--coral) 100%);
  --grad-jungle: linear-gradient(160deg, var(--jungle) 0%, var(--jungle-2) 55%, #0A2A34 100%);
  --grad-ocean: linear-gradient(120deg, var(--ocean) 0%, var(--palm) 100%);

  --radius: 18px;
  --radius-sm: 10px;
  --shadow-lg: 0 24px 60px -20px rgba(14,42,34,0.35);
  --shadow-sm: 0 8px 20px -10px rgba(14,42,34,0.25);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Montserrat', system-ui, sans-serif;
  color:var(--ink);
  background:var(--sand);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-family:'Montserrat', sans-serif; font-weight:800; letter-spacing:-0.01em; line-height:1.02; text-transform:none; }
.script{ font-family:'Caveat', cursive; font-weight:700; text-transform:none; letter-spacing:0; }
.mono{ font-family:'Space Mono', monospace; }
p{ margin:0; line-height:1.6; color:var(--ink-soft); }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
section{ padding:96px 0; }
@media (max-width:720px){ section{ padding:64px 0; } }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--ocean); outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--palm); font-weight:700; display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:''; width:18px; height:2px; background:var(--sun); display:inline-block; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; border-radius:999px; font-weight:700; font-size:15px;
  border:2px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease;
  font-family:'Montserrat',sans-serif;
}
.btn:hover{ transform:translateY(-2px); }
.btn-whatsapp{ background:#25D366; color:#04240F; box-shadow:var(--shadow-sm); }
.btn-whatsapp:hover{ box-shadow:0 14px 30px -10px rgba(37,211,102,0.55); }
.btn-outline{ background:transparent; border-color:rgba(255,255,255,0.4); color:#fff; }
.btn-outline:hover{ border-color:#fff; }
.btn-ink{ background:var(--jungle); color:#fff; }
.btn-ink:hover{ box-shadow:var(--shadow-sm); }
.btn svg{ width:18px; height:18px; flex-shrink:0; }

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(14,42,34,0.92); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.site-nav .container{ display:flex; align-items:center; justify-content:space-between; padding-top:12px; padding-bottom:12px; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:44px; width:auto; }
.brand-word{ font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase; color:#fff; font-size:18px; letter-spacing:0.03em; line-height:1; }
.brand-word span{ display:block; font-family:'Caveat',cursive; text-transform:none; font-size:12px; color:var(--sun); font-weight:700; }
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{ color:rgba(255,255,255,0.82); font-weight:600; font-size:14.5px; position:relative; padding:4px 0; }
.nav-links a::after{ content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--sun); transition:width .2s ease; }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ width:100%; }
.nav-links a[aria-current="page"]{ color:#fff; }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; }
@media (max-width:860px){
  .nav-links{ position:fixed; inset:64px 0 0 0; background:var(--jungle); flex-direction:column; padding:32px 24px; gap:22px; transform:translateX(100%); transition:transform .28s ease; }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{ display:flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
  .nav-toggle span{ width:22px; height:2px; background:#fff; display:block; }
  .nav-cta .btn-whatsapp span.btn-label{ display:none; }
}

/* ---------- floating whatsapp ---------- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:60px; height:60px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 34px -10px rgba(0,0,0,0.4);
  animation:pulse 2.6s ease-in-out infinite;
}
.wa-float svg{ width:30px; height:30px; }
@keyframes pulse{ 0%,100%{ box-shadow:0 16px 34px -10px rgba(37,211,102,0.5);} 50%{ box-shadow:0 16px 34px -10px rgba(37,211,102,0.9), 0 0 0 10px rgba(37,211,102,0.12);} }

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden; background:var(--jungle); color:#fff;
  padding:150px 0 110px;
}
.hero-orb{
  position:absolute; top:-220px; right:-160px; width:620px; height:620px; border-radius:50%;
  background:var(--grad-sun); filter:blur(2px); opacity:0.9;
}
.hero-orb::after{ content:''; position:absolute; inset:0; background:var(--jungle); opacity:0; }
.plane-path{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.plane-path path{ fill:none; stroke:rgba(255,255,255,0.25); stroke-width:1.5; stroke-dasharray:6 8; }
.plane-icon{ position:absolute; width:26px; height:26px; color:#fff; offset-rotate:auto; }

/* sliding image carousel behind the hero copy */
.hero-carousel{ position:absolute; inset:0; z-index:0; }
.hero-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.4s ease;
}
.hero-slide.active{ opacity:1; }
.hero-carousel-overlay{
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(14,42,34,0.92) 0%, rgba(18,58,46,0.80) 48%, rgba(11,42,52,0.88) 100%);
}
.hero-dots{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; gap:9px; z-index:3;
}
.hero-dots button{
  width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.4);
  border:0; cursor:pointer; padding:0; transition:width .3s ease, background .3s ease;
}
.hero-dots button.active{ background:var(--sun); width:24px; border-radius:6px; }

.hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; }
@media (max-width:900px){ .hero-inner{ grid-template-columns:1fr; } .hero-orb{ width:420px; height:420px; top:-160px; right:-140px;} }
.hero-tagline{ font-size:22px; color:var(--sun); margin-bottom:10px; display:block; }
.hero h1{ font-size:clamp(44px,7vw,84px); color:#fff; margin-bottom:22px; }
.hero h1 em{ font-style:normal; color:var(--sun); }
.hero p.lead{ color:rgba(255,255,255,0.78); font-size:18px; max-width:46ch; margin-bottom:34px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* departure-board strip inside hero */
.board{
  background:rgba(0,0,0,0.32); border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius); padding:22px 24px; backdrop-filter:blur(6px);
}
.board-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.board-head .eyebrow{ color:var(--sun); }
.board-head .eyebrow::before{ background:var(--ocean); }
.board-row{ display:flex; justify-content:space-between; align-items:baseline; padding:10px 0; border-top:1px dashed rgba(255,255,255,0.18); font-family:'Space Mono',monospace; color:#fff; }
.board-row:first-of-type{ border-top:none; }
.board-row .route{ font-weight:700; }
.board-row .meta{ color:rgba(255,255,255,0.6); font-size:12px; }
.board-row .price{ color:var(--sun); font-weight:700; }

/* ---------- stat ticker ---------- */
.ticker{ background:var(--jungle-2); color:#fff; padding:22px 0; overflow:hidden; }
.ticker-track{ display:flex; gap:64px; white-space:nowrap; animation:scroll 26s linear infinite; width:max-content; }
.ticker span{ font-family:'Space Mono',monospace; font-size:14px; letter-spacing:0.04em; color:rgba(255,255,255,0.85); }
.ticker span b{ color:var(--sun); }
@keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- section headers ---------- */
.section-head{ max-width:620px; margin-bottom:48px; }
.section-head h2{ font-size:clamp(32px,4.4vw,52px); margin-top:10px; }
.section-head p{ margin-top:16px; font-size:17px; }

/* ---------- ticket / boarding-pass card ---------- */
.ticket{
  display:grid; grid-template-columns:1fr 260px; background:var(--paper);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg);
  position:relative;
}
@media (max-width:760px){ .ticket{ grid-template-columns:1fr; } }
.ticket-main{ padding:38px 40px; }
.ticket-dest{ display:flex; align-items:baseline; gap:14px; margin-bottom:6px; }
.ticket-dest h3{ font-size:38px; }
.ticket-dest .code{ font-family:'Space Mono',monospace; color:var(--ocean-deep); font-weight:700; font-size:14px; }
.ticket-edition{ color:var(--coral); font-weight:700; font-size:14px; margin-bottom:22px; display:block; }
.ticket-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px 28px; margin:26px 0; }
.ticket-grid h4{ font-family:'Space Mono',monospace; text-transform:uppercase; font-size:11px; letter-spacing:0.1em; color:var(--ink-soft); margin-bottom:8px; }
.ticket-grid ul{ margin:0; padding-left:18px; color:var(--ink-soft); font-size:14.5px; line-height:1.7; }
.ticket-stub{
  background:var(--grad-jungle); color:#fff; padding:34px 28px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative;
}
.ticket-stub::before{
  content:''; position:absolute; left:-14px; top:50%; width:28px; height:28px; background:var(--sand);
  border-radius:50%; transform:translateY(-50%);
}
@media (max-width:760px){ .ticket-stub::before{ top:-14px; left:50%; transform:translate(-50%,0); } }
.ticket-stub .barcode{ height:34px; background:repeating-linear-gradient(90deg,#fff 0 2px, transparent 2px 5px); opacity:0.7; margin-top:18px; }
.stub-price{ font-family:'Space Mono',monospace; font-size:34px; color:var(--sun); font-weight:700; }
.stub-price small{ display:block; font-size:11px; color:rgba(255,255,255,0.6); font-weight:400; letter-spacing:0.08em; text-transform:uppercase; }
.stub-dates{ font-family:'Space Mono',monospace; font-size:13px; color:rgba(255,255,255,0.85); margin:14px 0 20px; line-height:1.8; }

/* ---------- value grid ---------- */
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:820px){ .value-grid{ grid-template-columns:1fr; } }
.value-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:32px; }
.value-card .icon{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.value-card h3{ font-size:22px; text-transform:none; font-family:'Montserrat',sans-serif; font-weight:800; margin-bottom:10px; }
.value-card p{ font-size:14.5px; }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; counter-reset:step; }
@media (max-width:820px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding-top:8px; }
.step .num{ font-family:'Space Mono',monospace; font-size:13px; color:var(--ocean-deep); font-weight:700; margin-bottom:14px; display:block; }
.step h3{ font-size:21px; text-transform:none; font-family:'Montserrat',sans-serif; font-weight:800; margin-bottom:8px; }
.step p{ font-size:14.5px; }

/* ---------- gallery teaser ---------- */
.gallery-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:820px){ .gallery-strip{ grid-template-columns:repeat(2,1fr);} }
.g-tile{ aspect-ratio:4/5; border-radius:var(--radius-sm); position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:14px; color:#fff; font-family:'Space Mono',monospace; font-size:12px; font-weight:700; letter-spacing:0.04em; }
.g-tile::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55) 100%); }
.g-tile span{ position:relative; z-index:1; }
.g-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- footer ---------- */
footer{ background:var(--grad-jungle); color:rgba(255,255,255,0.8); padding:72px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:56px; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h4{ font-family:'Montserrat',sans-serif; text-transform:uppercase; font-size:12px; letter-spacing:0.1em; color:#fff; margin-bottom:16px; font-weight:700; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14px; }
.footer-grid a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.12); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:rgba(255,255,255,0.55); }
.flags{ display:inline-flex; gap:6px; font-size:16px; }

/* ---------- page hero (inner pages) ---------- */
.page-hero{ background:var(--grad-jungle); color:#fff; padding:78px 0 60px; position:relative; overflow:hidden; }
.page-hero .eyebrow{ color:var(--sun); }
.page-hero .eyebrow::before{ background:var(--ocean); }
.page-hero h1{ font-size:clamp(38px,6vw,64px); color:#fff; margin-top:12px; }
.page-hero p{ color:rgba(255,255,255,0.75); max-width:56ch; margin-top:16px; font-size:16.5px; }

/* ---------- generic content blocks ---------- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:820px){ .two-col{ grid-template-columns:1fr; } }
.badge-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:24px; }
.badge{ font-family:'Space Mono',monospace; font-size:12px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); color:var(--ink-soft); }

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:32px; }
.contact-card h3{ font-size:22px; font-family:'Montserrat',sans-serif; text-transform:none; font-weight:800; margin-bottom:6px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; font-weight:700; margin-bottom:6px; }
.field input, .field textarea{ width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line); font-family:'Montserrat',sans-serif; font-size:14.5px; background:var(--sand); }
.field textarea{ min-height:110px; resize:vertical; }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
