html { scroll-behavior: smooth; }
  body { font-family: 'Inter', sans-serif; background-color: #FFFFFF; color: #2B2420; overflow-x: hidden; }
  .font-display { font-family: 'Space Grotesk', sans-serif; }
  .font-mono { font-family: 'IBM Plex Mono', monospace; }

  .bg-dark-gradient { background: linear-gradient(135deg, #2B2420 0%, #26302F 45%, #123B47 100%); }

  /* ---------- Header shrink ---------- */
  #siteHeader { transition: box-shadow .35s ease, padding .35s ease; }
  #siteHeader.scrolled { box-shadow: 0 8px 24px -12px rgba(0,0,0,0.45); }
  #siteHeader .nav-inner { transition: height .35s ease; }
  #siteHeader.scrolled .nav-inner { height: 4.2rem; }
  #siteHeader .logo-badge { transition: transform .35s ease, padding .35s ease; }
  #siteHeader.scrolled .logo-badge { transform: scale(0.92); }

  /* ---------- Cursor glow (reused on hero + footer) ---------- */
  .cursor-glow {
    position: absolute; width: 620px; height: 620px; border-radius: 9999px;
    background: radial-gradient(circle, rgba(31,193,231,0.22) 0%, rgba(31,193,231,0) 70%);
    pointer-events: none; will-change: transform; transition: opacity .4s ease;
    left: -200px; top: -160px; z-index: 0;
  }

  /* ---------- Scroll reveal ---------- */
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.22,.9,.32,1), transform .7s cubic-bezier(.22,.9,.32,1); }
  .reveal.in-view { opacity: 1; transform: translateY(0); }
  .reveal-stagger.in-view > * { opacity: 1; transform: translateY(0); }
  .reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
  .reveal-stagger.in-view > *:nth-child(1) { transition-delay: .05s; }
  .reveal-stagger.in-view > *:nth-child(2) { transition-delay: .12s; }
  .reveal-stagger.in-view > *:nth-child(3) { transition-delay: .19s; }
  .reveal-stagger.in-view > *:nth-child(4) { transition-delay: .26s; }
  .reveal-stagger.in-view > *:nth-child(5) { transition-delay: .33s; }
  .reveal-stagger.in-view > *:nth-child(6) { transition-delay: .40s; }

  @media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  }

  /* ---------- Moving car divider ---------- */
  .road-track {
    background-image: repeating-linear-gradient(to right, rgba(31,193,231,0.5) 0 20px, transparent 20px 38px);
    height: 2px;
  }
  .car-drive { animation: drive 9s linear infinite; }
  @keyframes drive { 0% { left: -8%; } 100% { left: 104%; } }
  @media (prefers-reduced-motion: reduce) { .car-drive { animation: none; left: 46%; } }

  /* ---------- Departures board flap ---------- */
  .flap-tile {
    opacity: 0; transform: translateY(10px); animation: flapIn .5s ease forwards;
    perspective: 300px;
    transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes flapIn { to { opacity: 1; transform: translateY(0); } }
  .flap-tile:not(.flap-static):hover {
    border-color: rgba(31,193,231,0.55);
    background-color: rgba(31,193,231,0.1);
    box-shadow: 0 10px 22px -10px rgba(31,193,231,0.45);
    transform: translateY(-3px) scale(1.04);
    cursor: default;
  }
  .flap-tile.flip-out { border-color: rgba(31,193,231,0.55); background-color: rgba(31,193,231,0.08); }
  .flap-text {
    display: inline-block;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform-origin: 50% 50%;
    transition: transform .3s cubic-bezier(.5,0,.25,1), opacity .22s ease;
  }
  .flap-tile.flip-out .flap-text { transform: rotateX(-100deg); opacity: 0; }
  .flap-text.flap-reset { transition: none !important; transform: rotateX(100deg); opacity: 0; }
  @media (prefers-reduced-motion: reduce) {
    .flap-tile { animation: none; opacity: 1; transform: none; }
    .flap-tile:hover { transform: none; }
    .flap-text { transition: none; }
  }

  /* ---------- Count up ---------- */
  .count-num { font-variant-numeric: tabular-nums; }

  /* ---------- 3D route line + mile beads ---------- */
  .route-wrap { position: relative; }
  .route-line-3d {
    position: absolute; left: 50%; top: 0; bottom: 0; width: 6px; transform: translateX(-50%);
    background: linear-gradient(to right, rgba(43,36,32,0.10), rgba(255,255,255,0.95) 45%, rgba(31,193,231,0.4) 58%, rgba(43,36,32,0.10));
    -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 14px, transparent 14px 27px);
            mask-image: repeating-linear-gradient(to bottom, #000 0 14px, transparent 14px 27px);
    border-radius: 999px;
    box-shadow: 0 0 16px rgba(31,193,231,0.18);
    z-index: 0;
  }
  .mile-bead {
    width: 3.4rem; height: 3.4rem; border-radius: 9999px; flex-shrink: 0;
    background: linear-gradient(135deg, #1FC1E7 0%, #1FC1E7 45%, #F2B84B 100%);
    display: flex; align-items: center; justify-content: center;
    border: 3px solid #ffffff;
    box-shadow: 0 12px 26px -8px rgba(43,36,32,0.45), inset 0 2px 3px rgba(255,255,255,0.65), inset 0 -3px 6px rgba(0,0,0,0.22);
  }
  .mile-bead span { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: #2B2420; font-size: 1.05rem; }

  /* ---------- Fleet / content card tilt ---------- */
  .tilt-card { transition: transform .18s ease, box-shadow .3s ease; transform-style: preserve-3d; will-change: transform; }
  .tilt-card:hover, .tilt-card.tilted {
    box-shadow: 0 24px 48px -18px rgba(43,36,32,0.28), 0 6px 14px -6px rgba(43,36,32,0.15);
  }

  /* ---------- Glass panel (3D depth) ---------- */
  .glass-panel {
    background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 24px 48px -20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  }

  /* ---------- Destination photo cards ---------- */
  .dest-card { position: relative; overflow: hidden; }
  .dest-card img { transition: transform .6s cubic-bezier(.22,.9,.32,1); }
  .dest-card:hover img { transform: scale(1.08); }
  .dest-overlay { background: linear-gradient(to top, rgba(43,36,32,0.92) 0%, rgba(43,36,32,0.35) 55%, rgba(43,36,32,0) 100%); }

  /* ---------- Ambient parallax blobs ---------- */
  .blob { position: absolute; border-radius: 9999px; filter: blur(36px); pointer-events: none; will-change: transform; }

  /* ---------- Testimonial carousel ---------- */
  #testiTrack { transition: transform .55s cubic-bezier(.22,.9,.32,1); }
  .testi-dot { width: 8px; height: 8px; border-radius: 9999px; background: rgba(43,36,32,0.18); transition: background .25s ease, width .25s ease; }
  .testi-dot.active { background: #1FC1E7; width: 22px; }

  /* ---------- Buttons / inputs ---------- */
  input:focus, select:focus, textarea:focus, a:focus-visible, button:focus-visible {
    outline: 3px solid #1FC1E7;
    outline-offset: 2px;
  }
  .btn-glow { position: relative; overflow: hidden; }
  .btn-glow::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(31,193,231,0.55);
    animation: pulseGlow 2.6s ease-out infinite;
  }
  @keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(31,193,231,0.45); }
    70% { box-shadow: 0 0 0 14px rgba(31,193,231,0); }
    100% { box-shadow: 0 0 0 0 rgba(31,193,231,0); }
  }
  @media (prefers-reduced-motion: reduce) { .btn-glow::after { animation: none; } }
  .btn-glow-wa::after { box-shadow: 0 0 0 0 rgba(37,211,102,0.55); animation-name: pulseGlowWa; }
  @keyframes pulseGlowWa {
    0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
    70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
  }

  /* ---------- Success check ---------- */
  .check-circle { stroke-dasharray: 76; stroke-dashoffset: 76; }
  .check-tick { stroke-dasharray: 24; stroke-dashoffset: 24; }
  .success-pop { opacity: 0; transform: scale(.9) translateY(8px); transition: opacity .35s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }
  .success-pop.show { opacity: 1; transform: scale(1) translateY(0); }
  .success-pop.show .check-ring { animation: ringPulse 1.4s ease-out .2s; }
  .success-pop.show .check-circle { animation: drawCircle .5s ease forwards .15s; }
  .success-pop.show .check-tick { animation: drawTick .35s ease forwards .6s, tickBounce .5s ease .95s; }
  .success-pop.show .success-text { animation: fadeUp .5s ease forwards .8s; }
  .success-text { opacity: 0; transform: translateY(10px); }
  .ping-ring { position: absolute; top: 50%; left: 50%; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 9999px; border: 2px solid #1FC1E7; opacity: 0; }
  .success-pop.show .ping-ring { animation: pingOut 1.15s ease-out .05s forwards; }
  .success-pop.show .ping-ring.ring2 { border-color: #F2B84B; animation-delay: .25s; }
  @keyframes pingOut {
    0% { opacity: .55; transform: scale(.55); }
    100% { opacity: 0; transform: scale(2.5); }
  }
  @keyframes drawCircle { to { stroke-dashoffset: 0; } }
  @keyframes drawTick { to { stroke-dashoffset: 0; } }
  @keyframes tickBounce {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.18); }
  }
  @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
  @keyframes ringPulse {
    0% { box-shadow: 0 0 0 0 rgba(31,193,231,0.45); }
    70% { box-shadow: 0 0 0 22px rgba(31,193,231,0); }
    100% { box-shadow: 0 0 0 0 rgba(31,193,231,0); }
  }
  .confetti-dot { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 9999px; opacity: 0; }
  .success-pop.show .confetti-dot { animation: burst 1s ease-out .2s forwards; }
  @keyframes burst {
    0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(180deg) scale(.35); }
  }
  @media (prefers-reduced-motion: reduce) {
    .success-pop, .success-pop.show, .success-text, .check-circle, .check-tick { opacity: 1 !important; transform: none !important; animation: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
    .confetti-dot, .ping-ring { display: none; }
  }

  /* ---------- Back to top ---------- */
  #backToTop { transition: opacity .3s ease, transform .3s ease; }
  #backToTop.hidden-btn { opacity: 0; transform: translateY(10px); pointer-events: none; }

  .quote-mark { font-family: 'Space Grotesk', sans-serif; }
  .gold-star { color: #F2B84B; }

  /* ---------- Social icons in each platform's real brand colour ---------- */
  .social-badge { display: flex; align-items: center; justify-content: center; transition: transform .2s ease, filter .2s ease; flex-shrink: 0; }
  .social-badge:hover { transform: scale(1.08); filter: brightness(1.08); }
  .social-ig { border-radius: 10px; background: linear-gradient(45deg, #F58529 0%, #DD2A7B 45%, #8134AF 70%, #515BD4 100%); }
  .social-x { border-radius: 9999px; background: #000000; }
  .social-fb { border-radius: 9999px; background: #1877F2; }

  /* ---------- Guaranteed-opaque backgrounds for fixed chrome ----------
     These are set with plain CSS (not a Tailwind opacity utility) so the
     header and modal backdrops never render see-through, on any browser. */
  #siteHeader { background-color: rgba(43, 36, 32, 0.98) !important; }
  .modal-overlay { background-color: rgba(43, 36, 32, 0.72) !important; }
  #successOverlay { background-color: rgba(255, 255, 255, 0.99) !important; }

  /* ---------- Legal modals ---------- */
  .modal-overlay { opacity: 0; transition: opacity .25s ease; }
  .modal-overlay.show { opacity: 1; }
  .modal-panel { transform: scale(.95) translateY(10px); transition: transform .3s cubic-bezier(.22,.9,.32,1); }
  .modal-overlay.show .modal-panel { transform: scale(1) translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .modal-overlay, .modal-panel { transition: none; }
  }

  /* ================= INTRO LOGO REVEAL ================= */
  #introOverlay {
    position: fixed; inset: 0; z-index: 300;
    background: linear-gradient(135deg, #2B2420 0%, #26302F 45%, #123B47 100%);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  #introOverlay.intro-hidden { display: none !important; }
  #introOverlay.intro-open { pointer-events: none; }

  .intro-grid {
    position: absolute; z-index: 2; inset: -20% -10% auto -10%; height: 70%;
    background-image:
      linear-gradient(rgba(31,193,231,0.10) 1px, transparent 1px),
      linear-gradient(90deg, rgba(31,193,231,0.10) 1px, transparent 1px);
    background-size: 56px 56px;
    transform: perspective(600px) rotateX(62deg);
    transform-origin: center bottom;
    opacity: 0;
    animation: introGridIn 1.1s ease-out .1s forwards;
  }
  @keyframes introGridIn { to { opacity: .55; } }

  .intro-beam {
    position: absolute; z-index: 3; top: 46%; left: -35%;
    width: 60%; height: 220px; transform: translateY(-50%) skewX(-18deg);
    background: radial-gradient(ellipse at left, rgba(31,193,231,0.4), rgba(31,193,231,0) 72%);
    opacity: 0; filter: blur(6px);
    animation: introBeamIn 1.2s ease-out .2s forwards;
  }
  @keyframes introBeamIn {
    0%   { opacity: 0; transform: translateY(-50%) translateX(-10%) skewX(-18deg); }
    35%  { opacity: .9; }
    100% { opacity: 0; transform: translateY(-50%) translateX(70%) skewX(-18deg); }
  }

  .intro-stage {
    position: relative; z-index: 6;
    perspective: 1200px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
  }

  .intro-logo-wrap { position: relative; transform-style: preserve-3d; }

  .intro-logo-card {
    position: relative; z-index: 2; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: #F5F6F7;
    border-radius: 16px;
    padding: 16px 26px;
    box-shadow: 0 18px 34px rgba(0,0,0,.5), 0 0 26px rgba(31,193,231,.22);
    opacity: 0;
    transform: translateX(-72vw) translateZ(-90px) rotateY(-42deg) scale(.7);
    animation: introDriveIn 1.15s cubic-bezier(.16,.84,.32,1.2) .3s forwards;
    will-change: transform, opacity;
  }
  .intro-logo {
    display: block;
    height: clamp(50px, 8.4vw, 100px); width: auto;
  }
  @keyframes introDriveIn {
    0%   { opacity: 0; transform: translateX(-72vw) translateZ(-90px) rotateY(-42deg) scale(.7); }
    55%  { opacity: 1; }
    78%  { transform: translateX(3%) translateZ(0) rotateY(4deg) scale(1.045); }
    100% { opacity: 1; transform: translateX(0) translateZ(0) rotateY(0deg) scale(1); }
  }

  .intro-shine {
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.9) 48%, rgba(242,184,75,.85) 53%, transparent 68%);
    background-size: 260% 260%;
    background-position: -60% 0;
    opacity: 0;
    animation: introShine 1s ease-in-out 1.4s 1 forwards;
  }
  @keyframes introShine {
    0%   { opacity: 0; background-position: -60% 0; }
    10%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { opacity: 0; background-position: 160% 0; }
  }

  .intro-reflection-wrap {
    position: relative; z-index: 1;
    transform: scaleY(-1);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.26), transparent 68%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.26), transparent 68%);
    opacity: 0; margin-top: -4px;
    animation: introFadeIn .8s ease-out 1.25s forwards;
  }
  .intro-reflection-wrap .intro-logo-card {
    opacity: 1; filter: none; transform: none; animation: none;
    box-shadow: none;
  }
  @keyframes introFadeIn { to { opacity: 1; } }

  .intro-tagline {
    opacity: 0; letter-spacing: .34em; font-size: .66rem;
    color: rgba(245,246,247,.72);
    transform: translateY(10px);
    animation: introTagIn .7s ease-out 1.55s forwards;
  }
  @keyframes introTagIn { to { opacity: 1; transform: translateY(0); } }

  .intro-road {
    position: absolute; bottom: 24%; left: 50%; transform: translateX(-50%);
    width: 0; height: 2px;
    background-image: repeating-linear-gradient(to right, rgba(31,193,231,.65) 0 14px, transparent 14px 26px);
    animation: introRoadIn .9s ease-out 1.45s forwards;
  }
  @keyframes introRoadIn { to { width: 220px; } }

  .intro-panel { position: absolute; left: 0; right: 0; z-index: 1; }
  .intro-panel-top {
    top: 0; height: 52%;
    background: linear-gradient(135deg, #2B2420 0%, #26302F 100%);
    box-shadow: 0 6px 0 rgba(31,193,231,.35);
    transition: transform .85s cubic-bezier(.7,0,.2,1);
  }
  .intro-panel-bottom {
    bottom: 0; height: 48%;
    background: linear-gradient(135deg, #26302F 0%, #123B47 100%);
    transition: transform .85s cubic-bezier(.7,0,.2,1);
  }
  #introOverlay.intro-open .intro-panel-top { transform: translateY(-100%); }
  #introOverlay.intro-open .intro-panel-bottom { transform: translateY(100%); }
  #introOverlay.intro-open .intro-stage,
  #introOverlay.intro-open .intro-tagline,
  #introOverlay.intro-open .intro-road,
  #introOverlay.intro-open .intro-grid,
  #introOverlay.intro-open .intro-beam {
    transition: opacity .4s ease, transform .5s ease;
    opacity: 0; transform: scale(.94);
  }

  .intro-skip {
    position: absolute; top: 20px; right: 20px; z-index: 10;
    padding: 8px 14px; font-size: .62rem; letter-spacing: .18em;
    color: rgba(245,246,247,.65); border: 1px solid rgba(245,246,247,.25);
    border-radius: 999px; background: rgba(0,0,0,.15); cursor: pointer;
    opacity: 0; transition: opacity .3s ease, color .2s, border-color .2s;
    animation: introSkipIn .4s ease .5s forwards;
  }
  .intro-skip:hover { color: #F5F6F7; border-color: rgba(31,193,231,.6); }
  @keyframes introSkipIn { to { opacity: 1; } }

  @media (prefers-reduced-motion: reduce) {
    #introOverlay .intro-grid, #introOverlay .intro-beam, #introOverlay .intro-shine,
    #introOverlay .intro-road, #introOverlay .intro-skip { animation: none !important; opacity: 0 !important; }
    #introOverlay .intro-logo, #introOverlay .intro-reflection, #introOverlay .intro-tagline {
      animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important;
    }
  }
  @media (max-width: 640px) {
    .intro-tagline { font-size: .56rem; letter-spacing: .26em; }
  }

  /* ---------- Standalone pages (about/fleet/destinations/reviews/booking) ---------- */
  /* The nav bar is position:fixed and 5rem (80px) tall, so it doesn't push page content
     down on its own. On the homepage this is fine because About/Fleet/etc. sit below the
     tall Hero section, which already clears the nav. As standalone pages, these sections
     are now the FIRST thing after the nav, so they need their own top clearance or the
     fixed nav overlaps and crops their top content (e.g. the "Mile 01" badge). */
  body.standalone #about,
  body.standalone #fleet,
  body.standalone #booking {
    padding-top: 6rem;
  }
  body.standalone #destinations-gallery,
  body.standalone #testimonials {
    padding-top: 7rem;
  }
  @media (min-width: 768px) {
    body.standalone #about,
    body.standalone #fleet,
    body.standalone #booking {
      padding-top: 7rem;
    }
    body.standalone #destinations-gallery,
    body.standalone #testimonials {
      padding-top: 8rem;
    }
  }

  /* These sections also carry generous bottom padding designed to flow into the NEXT
     section on the homepage. As standalone pages there's nothing after them, so that
     padding (plus the connecting dashed line, which stretches the section's full height)
     leaves an oversized empty gap before the footer. Trim it back on standalone pages only. */
  body.standalone #about,
  body.standalone #destinations-gallery,
  body.standalone #testimonials {
    padding-bottom: 3rem;
  }
  @media (min-width: 768px) {
    body.standalone #about,
    body.standalone #destinations-gallery,
    body.standalone #testimonials {
      padding-bottom: 4rem;
    }
  }
  /* The connecting line was meant to visually link several stacked sections on the
     homepage — on a single standalone section it just trails into empty space, so hide it. */
  body.standalone .route-line-3d { display: none; }

  /* ---------- WhatsApp floating button fix ---------- */
  /* .btn-glow sets position:relative (needed for its pulse-glow ::after effect on regular
     buttons). The WhatsApp button also needs position:fixed to float over the page, but
     since both rules are single-class selectors, .btn-glow was winning by being defined
     later in this file — silently turning the button into a normal in-page element instead
     of a floating one. This raises the specificity so fixed positioning always wins. */
  .btn-glow.fixed { position: fixed; }