@charset "UTF-8";
/* =========================================================
   Eagle Overland — Global Styles
   Brand: Africano Paraiso
   Notes: Dark luxe theme, gold accents, section-scoped rules
========================================================= */

/* CSS Variables */
:root{
  --gold:#C6A664; --charcoal:#2C2C2C; --ink:#0B0B0B; --muted:#9B8B64;
  --card:#121212; --border:rgba(255,255,255,.08); --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35); --focus:0 0 0 3px rgba(198,166,100,.35);
}

/* Base / Reset */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{
  margin:0;padding:0;
  background:
    radial-gradient(1200px 600px at 8% 12%,rgba(198,166,100,.09),transparent 55%),
    linear-gradient(180deg,var(--ink),#000);
  color:#eee;
  font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  max-width:100%;
  overflow-x:hidden; /* Horizontal overflow fix */
}
@supports (overflow: clip){
  html,body{ overflow-x: clip; } /* Modern clipping (no hidden overflow areas) */
}
a{color:var(--gold);text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1180px,92%);margin-inline:auto}

.small{font-size:.98rem;color:#cfcfcf}
.sr-only{position:absolute;left:-9999px}

/* Non-interactive texture overlay */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.10;mix-blend-mode:soft-light;background:
  radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0/3px 3px,
  radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px) 1.5px 1.5px/3px 3px;
}

/* Foil accent */
.foil{
  background:conic-gradient(from 10deg at 20% 40%, #bda165, #e8d6a3, #a68847, #dec98e, #bda165);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 20px rgba(198,166,100,.15));
  background-size:200% 200%;animation:foilshine 12s linear infinite
}
@keyframes foilshine{to{background-position:200% 0}}

/* Buttons (shared) */
.btn{cursor:pointer}
.btn-primary{
  background:linear-gradient(180deg,#f4e6bf,#c6a664);color:#111;border:none;border-radius:12px;
  padding:12px 14px;font-weight:700;position:relative;overflow:hidden;
  box-shadow:0 10px 22px rgba(198,166,100,.28)
}
.btn-primary::after{
  content:"";position:absolute;inset:-1px;background:
  linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,0) 40%,rgba(255,255,255,.28));
  transform:translateX(-100%);transition:transform .8s ease
}
.btn-primary:hover::after{transform:translateX(0)}
.btn-primary:hover{filter:brightness(1.02)}

/* Cards & grids */
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:980px){.grid-3,.grid-2{grid-template-columns:1fr}}
.card{
  position:relative;background:linear-gradient(180deg,#151515,#0f0f0f);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);transition:transform .35s ease,box-shadow .35s ease
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(120deg,rgba(198,166,100,.45),transparent 30%,rgba(198,166,100,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.85
}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(0,0,0,.45)}
.card .p{padding:16px 18px}
.pill{
  display:inline-flex;gap:6px;align-items:center;padding:6px 10px;
  border:1px solid var(--border);border-radius:999px;font-size:.78rem;color:#d9d9d9;background:#0c0c0c
}
.price{color:var(--gold);font-weight:800}

/* Sections */
section{
  padding:72px 0;
  border-top:1px solid var(--border);
  position: relative;
}

.section-title{display:grid;gap:8px;margin-bottom:28px}
.section-title h2{font-family:"Playfair Display",serif;font-size:clamp(1.7rem,2.8vw,2.3rem);color:#fff;margin:0}
.muted{color:#c8c8c8;opacity:.95}
.orn{height:10px;width:120px;margin:6px 0 0;border-top:1px solid rgba(198,166,100,.6);position:relative}
.orn::after{
  content:"";position:absolute;left:50%;top:-4px;transform:translateX(-50%);
  width:14px;height:14px;border-radius:99px;border:1px solid rgba(198,166,100,.7);
  background:radial-gradient(circle at 30% 30%, rgba(198,166,100,.5), rgba(198,166,100,.05) 60%, transparent 70%)
}

/* ===== Header / Nav (desktop + mobile drawer) ===== */
header.navbar{
  position:sticky; top:0; z-index:50;
  background:rgba(12,12,12,.75); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  transition:transform .35s ease, opacity .25s ease;
  will-change:transform, opacity;
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0;
  position:relative; z-index:160; /* keep header content above backdrop */
}
.brand{display:flex;align-items:center;gap:14px}

/* Crest / logo */
.crest{
  width:60px; height:60px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(180deg,#1a1a1a,#0d0d0d); border:1px solid var(--border);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 22px rgba(0,0,0,.35)
}
.crest svg{width:34px;height:34px;fill:var(--gold)}
.crest img{display:block;width:100%;height:100%;object-fit:contain;padding:4px}

/* Brand text */
.brand-title{font-family:"Playfair Display",serif;font-size:1.25rem;letter-spacing:.5px;color:#f3f3f3}
.brand-sub{font-size:.78rem;color:var(--muted)}

/* Desktop nav */
.nav{display:flex;gap:18px;align-items:center}
.nav a{
  font-size:.95rem;color:#e8e8e8;opacity:.95;display:inline-flex;gap:8px;align-items:center;position:relative
}
.nav a:hover{opacity:1}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;
  background:linear-gradient(90deg, rgba(198,166,100,0), rgba(198,166,100,.9), rgba(198,166,100,0));
  transition:right .35s ease
}
.nav a:hover::after{right:0}


/* Active link (desktop + mobile) — supports EO + legacy */
.eo-nav a.is-active,
.eo-nav a.active,
.eo-nav a[aria-current="page"],
.nav a.is-active,
.nav a.active,
.nav a[aria-current="page"]{
  color: var(--gold);
  opacity: 1;
  background: rgba(198,166,100,.08);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(198,166,100,.22);
}

.eo-nav a.is-active::after,
.eo-nav a.active::after,
.eo-nav a[aria-current="page"]::after,
.nav a.is-active::after,
.nav a.active::after,
.nav a[aria-current="page"]::after{
  right: 0;
  height: 2.6px;
  opacity: 1;
}

/* Mobile active (supports .mobile-drawer + #mobileMenu + #eoMobileMenu) */
.mobile-drawer a.is-active,
.mobile-drawer a.active,
.mobile-drawer a[aria-current="page"],
#mobileMenu a.is-active,
#mobileMenu a.active,
#mobileMenu a[aria-current="page"],
#eoMobileMenu a.is-active,
#eoMobileMenu a.active,
#eoMobileMenu a[aria-current="page"]{
  color: var(--gold);
  background: linear-gradient(180deg,#1a1a1a,#121212);
  box-shadow: inset 0 0 0 1px rgba(198,166,100,.35);
  border-color: rgba(198,166,100,.30);
}


/* CTA focus/active (your original, restored and separated correctly) */
.cta:focus{
  outline:none;
  box-shadow:0 0 0 4px rgba(198,166,100,.22);
}
.cta:active{
  transform:translateY(1px);
}


/* Auto-hide (toggled by JS on scroll) */
header.navbar.nav-hidden{
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
}

/* ---------- Mobile drawer styles ---------- */
.nav-toggle,
.nav-close{
  display:none; appearance:none; border:1px solid var(--border); background:#0e0e0e;
  color:#e8e8e8; border-radius:12px; width:40px; height:40px; place-items:center;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; cursor:pointer;
  position:relative; z-index:200; /* above backdrop/drawer edges */
}
.nav-toggle i, .nav-close i{ font-size:18px; color:var(--gold) }

/* Shorter sheet-style drawer */
.mobile-drawer{
  position:fixed;
  top:7vh; right:0; bottom:auto; left:auto;
  width:min(88vw, 360px);
  max-height:86vh;  /* shorter than full height */
  height:auto;      /* shrink until max */
  overflow:auto;    /* scroll if content exceeds */
  z-index:170;
  transform:translateX(100%); opacity:0; pointer-events:none;
  background:linear-gradient(180deg,#151515,#0f0f0f);
  border-left:1px solid var(--border);
  border-top-left-radius:14px;
  box-shadow:-20px 0 40px rgba(0,0,0,.45);
  display:flex; flex-direction:column; gap:6px; padding:16px;
  transition:transform .35s ease, opacity .25s ease;
}
.mobile-drawer a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  color:#e8e8e8; text-decoration:none; border:1px solid var(--border); background:#0e0e0e;
}
.mobile-drawer a i{ color:var(--gold) }
.mobile-drawer a:hover{ filter:brightness(1.06) }
.mobile-drawer .cta-mobile{
  background:linear-gradient(180deg,#f4e6bf,#c6a664); color:#111; border-color:transparent; font-weight:700;
  box-shadow:0 10px 22px rgba(198,166,100,.28);
}
.mobile-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px;
}
.mh-title{ color:#f3f3f3; font-weight:700; letter-spacing:.4px }

/* Backdrop behind drawer */
.mobile-backdrop{
  position:fixed; inset:0; z-index:160; background:rgba(0,0,0,.5);
  opacity:0; transition:opacity .25s ease;
}
.mobile-backdrop[hidden]{ display:none !important; } /* hidden backdrop must not capture taps */

/* Open state (body.mobile-open is toggled by JS) */
body.mobile-open{ overflow:hidden }
body.mobile-open .mobile-drawer{ transform:translateX(0); opacity:1; pointer-events:auto }
body.mobile-open .mobile-backdrop{ opacity:1 }

/* ---------- Responsive rules ---------- */
@media (max-width:900px){
  .nav{ display:none !important }          /* hide desktop nav */
  .nav-toggle{ display:grid !important }   /* show hamburger */
}

@media (max-width:560px){
  .crest{ width:52px; height:52px; }
  .crest svg{ width:30px; height:30px; }
  .crest img{ padding:9px; }
  .brand-title{ font-size:1.15rem; }
  .nav-wrap{ padding:12px 0 }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  header.navbar, .mobile-drawer, .mobile-backdrop{ transition:none }
}


/* ===== HERO (section#top.hero) ===== */
.hero{
  position:relative; isolation:isolate; min-height:86vh; display:grid; align-items:center;
  overflow:hidden; /* prevent accidental horizontal scroll */
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(1200px 600px at 14% 18%, rgba(198,166,100,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.52), rgba(0,0,0,.82)),
    url('/assets/hero/eagle-overland-hero.jpg') center/cover no-repeat;
  animation:heroZoom 28s ease-in-out infinite alternate; will-change:transform;
}
.hero::after{
  content:""; position:absolute; inset:-6rem; z-index:-1;
  background:
    radial-gradient(70% 120% at 85% 20%, rgba(198,166,100,.08), transparent 60%),
    radial-gradient(60% 80% at 10% 90%, rgba(198,166,100,.06), transparent 60%);
  filter:blur(2px); pointer-events:none;
}
@keyframes heroZoom{from{transform:scale(1)} to{transform:scale(1.06)}}
.hero-grid{display:grid; gap:30px; padding:96px 0 80px}
.eyebrow{
  letter-spacing:.25em; text-transform:uppercase; color:var(--muted); font-size:.82rem;
  display:inline-flex; align-items:center; gap:10px; position:relative; padding-left:14px;
}
.eyebrow::before{
  content:""; width:8px; height:8px; border-radius:50%;
  border:1px solid rgba(198,166,100,.7);
  background:radial-gradient(circle at 30% 30%, rgba(198,166,100,.5), rgba(198,166,100,.08) 60%, transparent 70%);
  position:absolute; left:0; top:50%; transform:translateY(-50%);
}
.hero h1{
  font-family:"Playfair Display",serif;
  font-size:clamp(2.6rem,5vw,4.2rem); line-height:1.08; margin:.35rem 0 .5rem; color:#fff;
  text-shadow:0 6px 24px rgba(0,0,0,.45);
}
.hero .foil{
  background:conic-gradient(from 12deg at 22% 40%, #bda165, #e8d6a3, #a68847, #dec98e, #bda165);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 26px rgba(198,166,100,.18));
  background-size:220% 220%; animation:foilshine 14s linear infinite;
}
.hero .subtitle{font-size:1.15rem; opacity:.96; color:#f0f0f0; max-width:64ch}

/* Hero CTAs */
.hero .cta-group{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.hero .cta-primary{
  display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px;
  color:#111; background:linear-gradient(180deg,#f4e6bf,#c6a664);
  font-weight:800; box-shadow:0 10px 22px rgba(198,166,100,.28); position:relative; overflow:hidden;
  border:1px solid rgba(198,166,100,.55);
}
.hero .cta-primary::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background:linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0) 40%, rgba(255,255,255,.28));
  transform:translateX(-100%); transition:transform .8s ease;
}
.hero .cta-primary:hover::after{transform:translateX(0)}
.hero .cta-ghost{
  display:inline-flex; align-items:center; gap:10px; padding:11px 16px; border-radius:999px;
  color:#e8e8e8; background:#0e0e0e; border:1px solid var(--border);
  position:relative; overflow:hidden;
}
.hero .cta-ghost::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg, rgba(198,166,100,.5), transparent 40%, rgba(198,166,100,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.hero .cta-ghost i{color:var(--gold)}

/* Hero badges */
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.badge{
  display:inline-flex;gap:8px;align-items:center;border:1px solid var(--border);
  background:#0e0e0e;color:#e8e8e8;padding:8px 12px;border-radius:999px;font-size:.85rem
}
.hero .badge{position:relative;overflow:hidden}
.hero .badge i{color:var(--gold)}
.hero .badge::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(120deg, rgba(198,166,100,.45), transparent 30%, rgba(198,166,100,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.9;
}

/* Booking (global + hero frame) */
.booking{
  margin-top:10px;background:rgba(12,12,12,.55);border:1px solid var(--border);
  box-shadow:var(--shadow);border-radius:var(--radius);display:grid;gap:12px;padding:16px
}
.booking form{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.field{display:flex;flex-direction:column;gap:8px}
label{font-size:.8rem;color:#cfcfcf}
select,input{background:#0f0f0f;border:1px solid var(--border);border-radius:12px;padding:12px;color:#f5f5f5;outline:none}
select:focus,input:focus,textarea:focus{box-shadow:var(--focus)}
@media (max-width:980px){.booking form{grid-template-columns:repeat(2,1fr)}}
.hero .booking{position:relative;overflow:hidden}
.hero .booking::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(120deg, rgba(198,166,100,.55), transparent 30%, rgba(198,166,100,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.9; pointer-events:none;
}
.hero .booking form{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; padding:0}
.hero label{font-size:.82rem; color:#d6d6d6; display:flex; align-items:center; gap:8px}
.hero label i{color:var(--gold)}
.hero select,.hero input{background:#0f0f0f;border:1px solid var(--border);border-radius:12px;padding:12px;color:#f5f5f5;outline:none}
.hero select:focus,.hero input:focus{ box-shadow:var(--focus) }
@media (max-width:980px){ .hero .booking form{grid-template-columns:repeat(2,1fr)} }

/* Hero scroll cue */
.hero .scroll-cue{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:8px; color:#e8e8e8; font-size:.9rem;
  background:#0e0e0e; border:1px solid var(--border); padding:6px 10px; border-radius:999px; opacity:.9;
}
.hero .scroll-cue i{color:var(--gold)}

/* ===== TRUST BAR (#trust) ===== */
#trust{padding:28px 0;border-top:1px solid var(--border)}
#trust .container{width:min(1260px,94%);margin-inline:auto}
#trust .trustbar{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px;
  padding:18px; position:relative; border-radius:var(--radius);
  background:rgba(12,12,12,.6); backdrop-filter:blur(4px);
  border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden;
}
#trust .trustbar::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg, rgba(198,166,100,.45), transparent 40%, rgba(198,166,100,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
#trust .trust-item{
  display:flex; gap:10px; align-items:center; justify-content:center;
  padding:10px 12px; color:#e6e6e6; border-radius:12px;
  background:#0f0f0f; border:1px solid var(--border);
  position:relative; overflow:hidden; isolation:isolate; text-align:center;
}
#trust .trust-item::after{
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; pointer-events:none;
  background:radial-gradient(220px 80px at var(--mx,50%) 120%, rgba(198,166,100,.22), transparent 60%);
  transition:opacity .25s ease;
}
#trust .trust-item:hover::after{ opacity:1 }
#trust .trust-item i{ font-size:20px; color:var(--gold); filter:drop-shadow(0 6px 14px rgba(198,166,100,.25)) }
#trust .trust-item span{ font-weight:600; letter-spacing:.2px; white-space:nowrap }
#trust .trust-item[data-tip]{ cursor:help }
#trust .trust-item[data-tip]::before{
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  padding:8px 10px; border-radius:8px; white-space:nowrap; font-size:.82rem;
  background:#0e0e0e; border:1px solid var(--border); color:#ddd;
  box-shadow:0 10px 22px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
#trust .trust-item[data-tip]:hover::before{ opacity:1; transform:translateX(-50%) translateY(-2px) }
@media (max-width:1080px){ #trust .trustbar{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:720px){  #trust .trustbar{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* ===== FLEET (#fleet) ===== */
#fleet .container{width:min(1360px,96%)}
#fleet .grid{gap:14px}
#fleet .fleet-head{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
#fleet .fleet-filters{display:flex;flex-wrap:wrap;gap:10px}
#fleet .chip{
  appearance:none;border:none;cursor:pointer;padding:8px 12px;border-radius:999px;
  font-size:.9rem;color:#e8e8e8;background:#0e0e0e;border:1px solid var(--border);
  transition:filter .2s ease, transform .05s ease
}
#fleet .chip:hover{filter:brightness(1.07)}
#fleet .chip:active{transform:translateY(1px)}
#fleet .chip.active{background:linear-gradient(180deg,#f4e6bf,#c6a664);color:#111;border-color:transparent}
#fleet .thumb{position:relative;aspect-ratio:16/10;overflow:hidden}
#fleet .thumb img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .6s ease}
#fleet .card:hover .thumb img{transform:scale(1.06)}
#fleet .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.35))}
#fleet .ribbon{
  position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;gap:6px;align-items:center;
  padding:6px 10px;border-radius:10px;background:rgba(12,12,12,.7);backdrop-filter:blur(6px);
  border:1px solid var(--border);color:#f7f7f7;font-size:.8rem
}
#fleet .ribbon i{color:var(--gold)}
#fleet .title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
#fleet .title-row h3{margin:.6rem 0;color:#fff;font-size:1.15rem}
#fleet .title-row .price{font-size:1.05rem}
#fleet .specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}
#fleet .spec{display:flex;gap:8px;align-items:center;background:#0d0d0d;border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:.92rem;color:#e7e7e7}
@media (max-width:980px){#fleet .specs{grid-template-columns:1fr 1fr}}
#fleet .actions{display:flex;gap:10px;align-items:center;margin-top:8px}
#fleet .btn-ghost{
  display:inline-flex;gap:8px;align-items:center;padding:10px 12px;border-radius:12px;
  background:#0d0d0d;border:1px solid var(--border);color:#e8e8e8;font-weight:600
}
#fleet .btn-ghost:hover{filter:brightness(1.06)}
#fleet details{margin-top:8px;border:1px solid var(--border);border-radius:12px;background:#0d0d0d}
#fleet summary{cursor:pointer;padding:10px 12px;color:#e8e8e8;font-weight:600;list-style:none}
#fleet summary::-webkit-details-marker{display:none}
#fleet details .d-body{padding:10px 12px;color:#cfcfcf}

/* ===== ROUTES (#routes) ===== */
#routes .container{width:min(1360px,96%)}
#routes .grid{gap:14px}
#routes .routes-head{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
#routes .route-filters{position:sticky; top:72px; z-index:20; background:rgba(12,12,12,.6); backdrop-filter:blur(6px); padding:8px 10px; border:1px solid var(--border); border-radius:12px}
@media (max-width:820px){ #routes .route-filters{top:64px} }
#routes .chip{
  appearance:none;border:none;cursor:pointer;padding:8px 12px;border-radius:999px;
  font-size:.9rem;color:#e8e8e8;background:#0e0e0e;border:1px solid var(--border);
  transition:filter .2s ease, transform .05s ease
}
#routes .chip:hover{filter:brightness(1.07)}
#routes .chip:active{transform:translateY(1px)}
#routes .chip.active{background:linear-gradient(180deg,#f4e6bf,#c6a664);color:#111;border-color:transparent}

/* Card media */
#routes .thumb{position:relative;aspect-ratio:16/10;overflow:hidden}
#routes .thumb img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .6s ease}
#routes .card:hover .thumb img{transform:scale(1.06)}
#routes .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.35))}
#routes .ribbon{
  position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;gap:6px;align-items:center;
  padding:6px 10px;border-radius:10px;background:rgba(12,12,12,.7);backdrop-filter:blur(6px);
  border:1px solid var(--border);color:#f7f7f7;font-size:.8rem
}
#routes .ribbon i{color:var(--gold)}

/* Title + meta row */
#routes .title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
#routes .title-row h3{margin:.6rem 0;color:#fff;font-size:1.1rem}
#routes .meta{display:flex;gap:10px;align-items:center;color:#cfcfcf;font-size:.92rem}
#routes .meta .dot{width:6px;height:6px;background:var(--border);border-radius:99px}

/* Features grid (routes only) */
#routes .features{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
#routes .features div{
  display:flex;gap:8px;align-items:center;background:#0d0d0d;border:1px solid var(--border);
  border-radius:10px;padding:8px 10px;font-size:.92rem;color:#e7e7e7
}
@media (max-width:980px){#routes .features{grid-template-columns:1fr 1fr}}

/* Seasonality bar */
#routes .seasons{margin:10px 0 4px}
#routes .months{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
#routes .m{height:10px;border-radius:4px;background:#1a1a1a;border:1px solid var(--border)}
#routes .m.good{background:linear-gradient(180deg,#2a2a2a,#1a1a1a);box-shadow:inset 0 0 0 1px rgba(198,166,100,.35)}
#routes .legend{display:flex;gap:10px;align-items:center;color:#c8c8c8;font-size:.8rem;margin-top:6px}
#routes .swatch{width:14px;height:10px;border-radius:4px;border:1px solid var(--border);background:#1a1a1a}
#routes .swatch.good{background:linear-gradient(180deg,#2a2a2a,#1a1a1a);box-shadow:inset 0 0 0 1px rgba(198,166,100,.35)}
#routes .months-label{display:flex;justify-content:space-between;color:#9e9e9e;font-size:.72rem;margin-top:6px}

/* Difficulty dots */
#routes .difficulty{display:flex;align-items:center;gap:6px;color:#cfcfcf;font-size:.88rem}
#routes .d{width:8px;height:8px;border-radius:50%;background:#2a2a2a;border:1px solid var(--border)}
#routes .d.on{background:var(--gold);border-color:transparent}

/* Actions */
#routes .actions{display:flex;gap:10px;align-items:center;margin-top:10px}
#routes .btn-ghost{
  display:inline-flex;gap:8px;align-items:center;padding:10px 12px;border-radius:12px;
  background:#0d0d0d;border:1px solid var(--border);color:#e8e8e8;font-weight:600
}
#routes .btn-ghost:hover{filter:brightness(1.06)}

/* Details */
#routes details{margin-top:8px;border:1px solid var(--border);border-radius:12px;background:#0d0d0d}
#routes summary{cursor:pointer;padding:10px 12px;color:#e8e8e8;font-weight:600;list-style:none}
#routes summary::-webkit-details-marker{display:none}
#routes .d-body{padding:10px 12px;color:#cfcfcf;font-size:.95rem}
#routes .d-body ul{margin:0 0 0 18px}

/* Route shortlist tray */
.route-tray{
  position:fixed; inset:auto 16px 16px 16px; z-index:70;
  display:none; gap:10px; align-items:center; flex-wrap:wrap;
  background:linear-gradient(180deg,#151515,#0f0f0f); border:1px solid var(--border); border-radius:14px;
  padding:10px 12px; box-shadow:var(--shadow)
}
.route-tray.show{display:flex}
.route-chip{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 10px; border-radius:999px; background:#0d0d0d; border:1px solid var(--border); color:#eaeaea; font-size:.9rem
}
.route-chip .rm{border:none;background:transparent;color:#c8c8c8;cursor:pointer}
.tray-spacer{flex:1}
.btn-ghost-sm{
  display:inline-flex; gap:8px; align-items:center; padding:10px 12px; border-radius:12px;
  background:#0d0d0d; border:1px solid var(--border); color:#e8e8e8; font-weight:600
}
#routes .thumb{position:relative}
#routes .save{
  position:absolute; right:12px; top:12px; z-index:3;
  display:inline-grid; place-items:center; width:38px; height:38px;
  border-radius:12px; border:1px solid var(--border); background:rgba(12,12,12,.65); backdrop-filter:blur(6px);
  cursor:pointer; transition:transform .15s ease, filter .2s ease; color:#eee
}
#routes .save:hover{filter:brightness(1.08)}
#routes .save:active{transform:translateY(1px)}
#routes .save i{font-size:18px}
#routes .save.active{background:linear-gradient(180deg,#f4e6bf,#c6a664); color:#111; border-color:transparent}
#routes .save.active i::before{content:"\f415"} /* bi-heart-fill */
@media (min-width:900px){
  .route-tray{inset:auto 24px 24px auto; max-width:560px}
}

/* ===== EQUIPMENT (#equipment) ===== */
#equipment{ --section-max: 1280px; }
#equipment .container{ width:min(var(--section-max),94%); margin-inline:auto }
#equipment .gear-controls{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}
#equipment .chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  border:1px solid var(--border);background:#0e0e0e;color:#e8e8e8;font-weight:600;cursor:pointer;
  user-select:none;transition:filter .2s ease,transform .15s ease
}
#equipment .chip:hover{filter:brightness(1.06)}
#equipment .chip:active{transform:translateY(1px)}
#equipment .chip.active{background:linear-gradient(180deg,#f4e6bf,#c6a664);color:#111;border-color:transparent}
#equipment .gear-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){#equipment .gear-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){#equipment .gear-grid{grid-template-columns:1fr}}
#equipment .gear{
  position:relative;overflow:hidden;border-radius:var(--radius);background:linear-gradient(180deg,#151515,#0f0f0f);
  border:1px solid var(--border);box-shadow:var(--shadow);transition:transform .28s ease,box-shadow .28s ease
}
#equipment .gear:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(0,0,0,.45)}
#equipment .gear::before{
  content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;
  background:linear-gradient(120deg,rgba(198,166,100,.45),transparent 30%,rgba(198,166,100,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.85;pointer-events:none
}
#equipment .row{display:flex;gap:12px;padding:16px 18px;align-items:flex-start}
#equipment .ic{
  flex:0 0 48px;height:48px;display:grid;place-items:center;border-radius:14px;
  background:linear-gradient(180deg,#1a1a1a,#0d0d0d);border:1px solid var(--border);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)
}
#equipment .ic i{font-size:22px;color:var(--gold)}
#equipment .meta{display:flex;flex-direction:column;gap:6px;min-width:0}
#equipment .ttl{color:#fff;font-weight:700;line-height:1.25}
#equipment .mut{color:#c8c8c8;opacity:.95;font-size:.95rem}
#equipment .tag{
  display:inline-flex;align-items:center;gap:6px;font-size:.78rem;padding:6px 10px;border-radius:999px;
  background:#0c0c0c;border:1px solid var(--border);color:#d9d9d9
}
#equipment .tag.incl{background:rgba(198,166,100,.12);border-color:rgba(198,166,100,.35);color:#e9e0c8}
#equipment .tag.addon{background:#0c0c0c}
#equipment .hide{display:none !important}
#equipment .note{margin-top:12px;color:#c8c8c8;font-size:.95rem}

/* ===== TESTIMONIALS (#testimonials) ===== */
#testimonials .t-slider{
  position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--border);
  background:linear-gradient(180deg,#151515,#0f0f0f);box-shadow:var(--shadow);padding:22px
}
#testimonials .t-track{display:flex;transition:transform .6s ease;will-change:transform}
#testimonials .t-slide{min-width:100%;padding:14px}
#testimonials .guest{display:flex;align-items:center;gap:12px;margin-top:12px}
#testimonials .avatar{width:46px;height:46px;border-radius:50%;overflow:hidden;border:1px solid var(--border);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
#testimonials .avatar img{width:100%;height:100%;object-fit:cover;display:block}
#testimonials .meta{display:grid;gap:2px}
#testimonials .name{color:#fff;font-weight:600}
#testimonials .origin{font-size:.9rem;color:#c8c8c8}
#testimonials .stars{display:inline-flex;gap:2px;font-size:.95rem;color:#C6A664}
#testimonials .trip{
  display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:6px 10px;border-radius:999px;
  border:1px solid var(--border);background:#0e0e0e;color:#e8e8e8;font-size:.85rem
}
#testimonials .trip i{color:var(--gold)}
#testimonials blockquote{font-family:"Playfair Display",serif;font-size:1.2rem;line-height:1.55;margin:0 0 10px;color:#fff}
#testimonials figure{margin:0}
#testimonials .t-dots{display:flex;gap:8px;justify-content:center;margin-top:12px}
#testimonials .t-dots button{width:10px;height:10px;border-radius:50%;border:1px solid var(--gold);background:transparent;opacity:.6;cursor:pointer}
#testimonials .t-dots button.active,#testimonials .t-dots button:hover{background:var(--gold);opacity:1}
/* Prev/Next */
#testimonials .nav-arrows{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
#testimonials .nav-arrows button{
  pointer-events:auto;border:1px solid var(--border);background:rgba(14,14,14,.75);backdrop-filter:blur(4px);
  color:#eee;width:36px;height:36px;border-radius:999px;display:grid;place-items:center;cursor:pointer;opacity:.85
}
#testimonials .nav-arrows button:hover{opacity:1}
@media (max-width:640px){ #testimonials .nav-arrows{display:none} }

/* ===== FOOTER ===== */
footer {
  position: relative;
  padding: 68px 0 20px;
  border-top: 0; /* replaced by gradient line */
  background:
    radial-gradient(900px 400px at 12% 0%, rgba(198,166,100,.10), transparent 55%),
    radial-gradient(700px 300px at 88% 10%, rgba(198,166,100,.06), transparent 60%),
    #0A0A0A;
  overflow: hidden;
  isolation: isolate;
}

/* Luxe gradient divider with side fade — aligned to .cols width */
footer::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1180px, 92%);
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(198,166,100,0) 0%,
    rgba(198,166,100,.65) 12%,
    rgba(198,166,100,.9) 50%,
    rgba(198,166,100,.65) 88%,
    rgba(198,166,100,0) 100%
  );
  opacity: .95;
  z-index: 0;
  pointer-events: none;
}

footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .08;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0/3px 3px,
    radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px) 1.5px 1.5px/3px 3px;
}

footer .cols {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 28px;
  grid-template-columns: 2fr 1fr 1fr 1.25fr;
  width: min(1180px,92%);
  margin-inline: auto;
}
@media (max-width:980px) { footer .cols { grid-template-columns:1fr } }

footer .f-foil {
  background: conic-gradient(from 10deg at 20% 40%, #bda165, #e8d6a3, #a68847, #dec98e, #bda165);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 18px rgba(198,166,100,.18));
  background-size: 200% 200%;
  animation: foilShift 14s linear infinite;
}
@keyframes foilShift { to { background-position:200% 0 } }

footer .brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
footer .crest {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(180deg,#1a1a1a,#0d0d0d);
  border: 1px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06),
              0 10px 26px rgba(0,0,0,.42),
              0 0 0 6px rgba(198,166,100,.06);
  position: relative; overflow: hidden;
}
footer .crest::after {
  content: "";
  position: absolute;
  inset: -40% -60% auto auto;
  height: 200%; width: 200%;
  background: linear-gradient(120deg, rgba(255,255,255,.12), rgba(255,255,255,0) 40%);
  transform: rotate(18deg);
}
footer .crest img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  padding:9px;
}
footer .brand-title {
  font-family: "Playfair Display", serif;
  color: #f3f3f3;
  font-size: 1.1rem;
  letter-spacing: .3px;
}
footer .brand-sub { font-size:.78rem; color:var(--muted) }
footer .mini { font-size:.85rem; color:#a9a9a9 }

footer .f-title {
  font-size:.95rem;
  color:#e8e8e8;
  margin:.2rem 0 .6rem 0;
  letter-spacing:.5px;
}
footer .f-title.subcap {
  opacity:.85;
  font-size:.9rem;
  margin-top: 14px;
}

footer .f-links a {
  display:inline-flex; align-items:center; gap:8px;
  margin:.28rem 0;
  color:#e2e2e2;
  position:relative;
  text-decoration:none;
  opacity:.92;
  transition: color .25s ease, opacity .25s ease, transform .25s ease;
}
footer .f-links a i { color: var(--gold) }
footer .f-links a::after {
  content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1.5px;
  background: linear-gradient(90deg, transparent, rgba(198,166,100,.85), transparent);
  transition:right .35s ease;
}
footer .f-links a:hover {
  color: var(--gold);
  opacity: 1;
  transform: translateX(2px);
}
footer .f-links a:hover::after { right:0 }

footer .cta-pill {
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:999px;
  text-decoration:none;
  background: linear-gradient(180deg,#121212,#0c0c0c);
  border: 1px solid var(--border); color:#e8e8e8;
  box-shadow:0 10px 22px rgba(0,0,0,.28);
  position:relative; overflow:hidden;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
footer .cta-pill i { color: var(--gold) }
footer .cta-pill::before {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(120deg, rgba(198,166,100,.55), transparent 30%, rgba(198,166,100,.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.9;
}
footer .cta-pill:hover {
  filter: brightness(1.05);
  border-color: rgba(198,166,100,.55);
  transform: translateY(-1px);
}

footer .social {
  display:flex; gap:10px; margin-top:10px;
}
footer .social a {
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:999px;
  border:1px solid var(--border);
  background:#0e0e0e; color:#e8e8e8;
  text-decoration:none; position:relative; overflow:hidden;
  transition: color .25s ease, text-shadow .25s ease, transform .25s ease;
}
footer .social a::before {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(140deg, rgba(198,166,100,.5), transparent 40%, rgba(198,166,100,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
footer .social a:hover {
  color: var(--gold);
  text-shadow: 0 0 6px rgba(198,166,100,.6);
  transform: translateY(-1px);
}

/* Partner Badges */
.partner-badges {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.partner-badges a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #121212, #0c0c0c);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.05);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.partner-badges a:hover {
  transform: translateY(-2px);
  border-color: rgba(198,166,100,.6);
  box-shadow: 0 8px 22px rgba(0,0,0,.35), 0 0 8px rgba(198,166,100,.4);
}
.partner-badges img {
  height: 32px;
  max-width: 120px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(.9); /* visible on dark bg */
  transition: filter .25s ease;
}
.partner-badges a:hover img { filter: none; }

/* Chips row: WhatsApp + Email on one line */
footer .chip-row {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;          /* keep same row */
  align-items: center;
  margin-top: 12px;
  white-space: nowrap;        /* prevent text wrap inside chips */
  overflow-x: auto;           /* avoid layout break on tiny screens */
  -webkit-overflow-scrolling: touch;
}
footer .chip-row .cta-pill { flex: 0 0 auto; }

footer .sub {
  position:relative; z-index:1;
  width:min(1180px,92%); margin:18px auto 0;
  padding-top:14px; border-top:1px dashed var(--border);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
@media (max-width:720px){ footer .sub{flex-direction:column;align-items:flex-start} }

footer .top-link {
  display:inline-flex; align-items:center; gap:8px;
  color:#e8e8e8; text-decoration:none;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--border);
  background:#0e0e0e; position:relative; overflow:hidden;
}
footer .top-link i { color: var(--gold) }
footer .top-link::after {
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0) 40%, rgba(255,255,255,.28));
  transform: translateX(-100%);
  transition: transform .8s ease;
}
footer .top-link:hover::after { transform: translateX(0) }

footer address { font-style: normal }

/* ===== Toast & Validation ===== */
.toast {
  position:fixed; bottom:20px; right:20px; z-index:80;
  display:flex; align-items:center; gap:10px;
  background: linear-gradient(180deg,#151515,#0f0f0f);
  border:1px solid var(--border); border-radius:12px;
  padding:12px 14px; color:#eaeaea; box-shadow:var(--shadow);
  opacity:0; transform:translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.toast i { font-size:18px; color:#25D366 }
.toast.show { opacity:1; transform:translateY(0) }
.invalid { border-color:#ff6b6b !important; box-shadow:0 0 0 3px rgba(255,107,107,.25) !important }

/* ===== Floating WhatsApp ===== */
.wa { position:fixed; bottom:20px; right:20px; z-index:60 }
.wa a {
  display:inline-grid; place-items:center;
  width:58px; height:58px; border-radius:50%;
  background:#25D366;
  box-shadow:0 10px 18px rgba(37,211,102,.35);
}
.wa i { font-size:28px; color:#fff }

/* Guards */
body [style*="100vw"]{ width:100% !important }
@media (prefers-reduced-motion: reduce){
  .cta::after,.card,.card::before{transition:none}
}



/* === ABOUT PAGE — LUXE STORY (updated) =======================================
   Goals:
   - Keep luxe aesthetic; improve a11y contrast & fallbacks
   - Expose tuning vars; reduce hard-coded magic numbers
   - Make gradients & effects cheaper and optional
============================================================================= */

/* ---- Tuning variables (override as needed) -------------------------------- */
:root{
  --luxe-foil-strength: 1;               /* 0..1: fade foil effect */
  --luxe-gold-glow: .36;                 /* intensity of gold glow shadows */
  --luxe-card-radius: var(--radius, 18px);
  --luxe-gap: 14px;
  --luxe-dot-size: 8px;
  --luxe-icon-size: 36px;
  --luxe-card-shadow: 0 20px 34px rgba(0,0,0,.36);
  --luxe-badge-shadow: 0 10px 24px rgba(0,0,0,.22);
  --luxe-muted: #CFC6B6;                 /* bumped for contrast */
  --luxe-text-strong: #EFEAE3;
  --luxe-gold: var(--gold, #C6A664);
  --luxe-border: var(--border, rgba(255,255,255,.08));
}

/* Container */
.story.luxe {
  position: relative;
  isolation: isolate;
}

/* ----------------- FOIL HEADLINE with fallbacks ---------------------------- */
.foil-text {
  line-height: 1.1;
  letter-spacing: .2px;
  /* Text fallback color if no gradient-clip support */
  color: color-mix(in oklab, var(--luxe-gold) 72%, white 8%, black 20%);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* Only apply the foil gradient when supported */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .foil-text {
    background: linear-gradient(
        92deg,
        color-mix(in oklab, var(--luxe-gold) 78%, #fff 8%) 0%,
        color-mix(in oklab, var(--luxe-gold) 55%, #fff 14%) 35%,
        color-mix(in oklab, var(--luxe-gold) 75%, #000 10%) 65%,
        color-mix(in oklab, var(--luxe-gold) 85%, #fff 0%) 100%
      );
    -webkit-background-clip: text;
    background-clip: text;
    color: rgba(0,0,0, calc(1 - var(--luxe-foil-strength))); /* fade to transparent with strength */
  }
}

/* Reduced motion or high-contrast users get a simpler solid color */
@media (prefers-reduced-motion: reduce) {
  .foil-text {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: color-mix(in oklab, var(--luxe-gold) 85%, #fff 5%);
    text-shadow: none;
  }
}

/* ----------------- Signature divider under H2 ------------------------------ */
.gold-rule {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: .75rem 0 1.25rem;
}
.gold-rule .dot {
  inline-size: var(--luxe-dot-size);
  block-size: var(--luxe-dot-size);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.22), transparent 55%),
    var(--luxe-gold);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 18px color-mix(in oklab, var(--luxe-gold) calc(var(--luxe-gold-glow)*100%), transparent);
}
.gold-rule .line {
  inline-size: clamp(96px, 10vw, 140px);
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--luxe-gold), transparent);
  opacity: .9;
}

/* ----------------- Copy sizing ------------------------------------------------ */
.story .lead { font-size: 1.06rem; line-height: 1.6; }

/* ----------------- Micro-stats as refined badges --------------------------- */
.facts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.facts .fact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--luxe-border);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.06));
  box-shadow: var(--luxe-badge-shadow);
}
.facts .fact i { color: var(--luxe-gold); font-size: 1rem; }
.facts .fact span { color: var(--luxe-muted); }
.facts .fact strong { color: var(--luxe-text-strong); font-weight: 600; }

/* Ensure AA contrast against --card tones */
@media (prefers-contrast: more) {
  .facts .fact span { color: #E4DED4; }
  .facts .fact { border-color: rgba(255,255,255,.16); }
}

/* ----------------- Prestige card: gold edge + bevel ------------------------ */
.card.prestige {
  position: relative;
  overflow: hidden;
  border-radius: var(--luxe-card-radius);
  background: linear-gradient(180deg, #262422, #1b1917);
  box-shadow:
    var(--luxe-card-shadow),
    inset 0 1px 0 rgba(255,255,255,.04);
  border: 1px solid var(--luxe-border);
  /* paint containment for perf */
  contain: paint layout style;
}
.card.prestige::before {
  /* hairline gold rim */
  content:"";
  position:absolute; inset:0; pointer-events:none;
  border-radius: inherit;
  padding: 1px; /* gold hairline */
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--luxe-gold) 85%, #fff 0%),
    rgba(255,255,255,.06),
    color-mix(in oklab, var(--luxe-gold) 70%, #000 0%));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.card.prestige .card-head {
  padding: 16px 18px 6px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.card.prestige .mini-title {
  margin: 0;
  font-size: clamp(.92rem, .7vw + .7rem, 1rem);
  letter-spacing: .4px;
  color: #F0EADF;
}
.card.prestige .mini-title i { color: var(--luxe-gold); }

/* ----------------- Luxe list spacing + icons ------------------------------- */
.luxe-list {
  display: grid;
  gap: var(--luxe-gap);
  padding: 16px 18px 18px;
}
.luxe-list li {
  display: grid;
  grid-template-columns: var(--luxe-icon-size) 1fr;
  gap: 12px;
  align-items: start;
}
.luxe-list .step-icon {
  inline-size: var(--luxe-icon-size);
  block-size: var(--luxe-icon-size);
  display: grid; place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(45% 45% at 30% 25%, rgba(255,255,255,.12), rgba(255,255,255,.02)),
    linear-gradient(180deg, #2a2723, #1d1b18);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 6px 14px rgba(0,0,0,.28);
}
.luxe-list .step-icon i { color: var(--luxe-gold); }

/* ----------------- Optional crest watermark -------------------------------- */
.card.prestige .crest {
  position: absolute;
  inset: auto -20% -20% auto;
  inline-size: 220px; block-size: 220px;
  opacity: .08;
  filter: saturate(0.9) contrast(1.05);
  background: var(--crest-img, url('/assets/brand/crest-gold.png')) center/contain no-repeat;
  pointer-events: none;
}

/* Left-column crest (if enabled) */
.story-copy { position: relative; }
.story-copy::after{
  content:"";
  position:absolute;
  inset:auto auto -10% -12%;
  inline-size:220px; block-size:220px;
  opacity:.06;
  background: var(--crest-img, url('/assets/brand/crest-gold.png')) center/contain no-repeat;
  pointer-events:none;
}

/* ----------------- Responsiveness & ergonomics ----------------------------- */
@media (max-width: 980px){
  .facts { gap: 10px; }
  .facts .fact { padding: 9px 11px; }
  .luxe-list { padding: 14px; }
}

@media (max-width: 720px){
  .foil-text { font-size: clamp(1.5rem, 4.2vw, 2.05rem); }
}

/* High-DPI tweaks (crisper hairlines) */
@media (min-resolution: 2dppx) {
  .gold-rule .line { opacity: .95; }
  .card.prestige .card-head { border-bottom-color: rgba(255,255,255,.07); }
}

/* Optional: if the page uses .theme-earth scope, keep specificity low but scoped
   (uncomment if you prefer to restrict these styles to that theme)
.theme-earth .story.luxe { ... }
*/

/* ===== Why Us — Luxe + Crest ===== */
.why-us{ position: relative; isolation: isolate; --crest-img: url('/assets/brand/crest-gold.png'); --crest-size: 280px; --crest-x: 0px; --crest-y: 0px; }
.why-us::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: var(--crest-img) center/var(--crest-size) no-repeat;
  background-position: calc(50% + var(--crest-x)) calc(50% + var(--crest-y));
  opacity:.06; filter: saturate(.85) contrast(1.1);
}
.why-us::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(1200px 700px at calc(50% + var(--crest-x)) calc(50% + var(--crest-y)),
              color-mix(in oklab, var(--gold, #C6A664) 12%, transparent) 0%, transparent 60%);
  mix-blend-mode: screen; opacity:.08; transition: opacity .3s ease;
}
.why-us .container{ position: relative; z-index:1; }

.why-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap: clamp(18px, 2.8vw, 32px);
}
@media (max-width:980px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .why-grid{ grid-template-columns:1fr; } }

/* Cards */
.why-card{
  text-align:center; border-radius: var(--radius, 18px);
  padding: clamp(20px, 2.2vw, 26px);
  background: linear-gradient(180deg,#262422,#1a1917);
  border:1px solid var(--border, rgba(255,255,255,.08));
  box-shadow: 0 18px 30px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.why-card:hover{
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--gold, #C6A664) 50%, #fff 0%);
  box-shadow: 0 24px 44px rgba(0,0,0,.36);
}

/* Icon medallion */
.why-card .icon-wrap{
  width:64px; height:64px; margin:0 auto 1rem; display:grid; place-items:center; border-radius:50%;
  background: radial-gradient(50% 50% at 30% 30%, rgba(255,255,255,.12), rgba(255,255,255,.02)),
              linear-gradient(180deg, #2b2824, #1c1a18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 20px rgba(0,0,0,.28);
}
.why-card .icon-wrap i{ font-size:1.6rem; color: var(--gold, #C6A664); }

/* Titles */
.why-card .title{ margin:0 0 .5rem; color:#F3EEE6; font-size: clamp(1.1rem, 1.3vw + .9rem, 1.4rem); }

/* Motion preferences */
@media (max-width:640px){ .why-us{ --crest-size: 220px; } }
@media (prefers-reduced-motion: reduce){
  .why-us{ --crest-x:0px; --crest-y:0px; }
  .why-us::after{ opacity:0; }
}

/* ===== Timeline — Luxe ===== */
.track.luxe { position: relative; isolation: isolate; }
.track-left { position: relative; }
.luxe-timeline{
  margin: 1rem 0 0;
  padding: 0 0 0 1.25rem;
  list-style: none;
  position: relative;
}
.luxe-timeline::before{
  content:"";
  position:absolute; left: .4rem; top: .2rem; bottom: .2rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06));
}
.luxe-timeline li{
  position: relative;
  padding: .35rem 0 .35rem 1rem;
}
.luxe-timeline .t-badge{
  position: absolute; left: -1.25rem; top: .15rem;
  transform: translateX(-50%);
  display: inline-grid; place-items:center;
  min-width: 54px; height: 28px; padding: 0 .5rem;
  font-size: .82rem; line-height: 1;
  border-radius: 999px;
  color: #1b1917;
  background: linear-gradient(180deg, color-mix(in oklab, var(--gold, #C6A664) 90%, #fff 0%), color-mix(in oklab, var(--gold, #C6A664) 70%, #000 0%));
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
  border: 1px solid rgba(0,0,0,.25);
}
.luxe-timeline li.is-today .t-badge{
  background: linear-gradient(180deg, color-mix(in oklab, var(--gold, #C6A664) 95%, #fff 0%), color-mix(in oklab, var(--gold, #C6A664) 75%, #000 0%));
}
.luxe-timeline p{
  margin: 0;
  color: #EDE7DD;
}

/* ===== Quote Split — Luxe ===== */
.quote-split.luxe { position: relative; isolation: isolate; }

/* Prestige big quote with subtle gold halo */
.big-quote.prestige{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius, 18px);
  background: linear-gradient(180deg, #262422, #1b1917);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  box-shadow: 0 18px 30px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
  padding: clamp(18px, 2.5vw, 28px);
}
.big-quote blockquote{
  margin: 0 0 .6rem;
  font-size: clamp(1.15rem, 1.1vw + 1rem, 1.5rem);
  line-height: 1.5;
  color: #F4EEE6;
  position: relative;
}
.big-quote .quote-mark{
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 0;
  color: color-mix(in oklab, var(--gold, #C6A664) 80%, #fff 4%);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.big-quote .quote-mark.open{ margin-right: .25rem; }
.big-quote .quote-mark.close{ margin-left: .25rem; }
.big-quote figcaption{ margin: 0; }

/* optional crest watermark inside quote */
.big-quote .crest{
  position: absolute; inset: auto -18% -18% auto;
  width: 240px; height: 240px; opacity: .07;
  background: var(--crest-img, url('/assets/brand/crest-gold.png')) center/contain no-repeat;
  pointer-events: none;
}

/* Framed image to match prestige card language */
.thumb.framed{
  position: relative; overflow: hidden; border-radius: var(--radius, 18px);
  background: #0f0e0d;
  box-shadow: 0 18px 30px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
  border: 1px solid var(--border, rgba(255,255,255,.08));
}
.thumb.framed img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.framed .ring{
  content:""; position: absolute; inset: 10px; border-radius: 16px; pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--gold, #C6A664) 70%, #fff 0%),
    rgba(255,255,255,.07),
    color-mix(in oklab, var(--gold, #C6A664) 55%, #000 0%)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px; opacity: .7;
}

/* Responsive */
@media (max-width: 980px){
  .luxe-timeline::before{ left: .3rem; }
  .luxe-timeline .t-badge{ min-width: 50px; height: 26px; }
}
@media (max-width: 720px){
  .big-quote blockquote{ font-size: clamp(1.05rem, 3.5vw, 1.3rem); }
}




/*Meet the team*/


/* ===== Luxe Team ===== */
.team-section.luxe { position: relative; }

.team-grid{
  --gap: clamp(16px, 3vw, 28px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--gap);
  align-items: stretch;
}

@media (max-width: 980px){
  .team-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .team-grid{ grid-template-columns: 1fr; }
}

/* Card shell — leverage your dark theme, elevate slightly */
.team-card{
  border-radius: var(--radius, 18px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  background: linear-gradient(180deg, #262422, #1a1917);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  box-shadow: 0 18px 30px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  contain: paint layout style;
}
.team-card:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--gold, #C6A664) 40%, #fff 0%);
  box-shadow: 0 22px 44px rgba(0,0,0,.38);
}

/* Portrait with luxe ring + vignette */
.team-card .portrait{
  position: relative;
  aspect-ratio: 4/3;                     /* stable layout; adjusts with image */
  display: grid; place-items: center;
  overflow: hidden;
  background: #0f0e0d;
}
.team-card .portrait picture,
.team-card .portrait img{
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.01);
  transition: transform .5s ease;
}
.team-card:hover .portrait img{ transform: scale(1.035); }

.team-card .portrait::after{
  /* soft bottom vignette for legibility if you overlay text later */
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.18));
  pointer-events:none;
}

/* Subtle gold ring that hugs the image edge */
.team-card .ring{
  position:absolute; inset:10px;
  border-radius: 16px;
  pointer-events:none;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--gold, #C6A664) 70%, #fff 0%),
    rgba(255,255,255,.07),
    color-mix(in oklab, var(--gold, #C6A664) 55%, #000 0%)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px;
  opacity: .65;
  transition: opacity .35s ease;
}
.team-card:hover .ring{ opacity: .9; }

/* Meta area */
.team-card .meta{
  padding: clamp(14px, 2.2vw, 18px) clamp(14px, 2.2vw, 18px) clamp(16px, 2.4vw, 22px);
}
.team-card .name{
  margin: 0 0 2px;
  font-size: clamp(1.05rem, 1.1vw + .9rem, 1.25rem);
  letter-spacing: .2px;
  color: #F3EEE6;
}
.team-card .role{
  margin: 0 0 8px;
  color: color-mix(in oklab, var(--gold, #C6A664) 72%, #fff 8%);
  font-weight: 500;
}
.team-card .bio{ margin: 0; }

/* Circle portraits variant (if you prefer round): just add .is-round on .team-card */
.team-card.is-round .portrait{ aspect-ratio: 1/1; }
.team-card.is-round .portrait picture,
.team-card.is-round .portrait img{ border-radius: 50%; }
.team-card.is-round .ring{ border-radius: 50%; inset: 12px; }

/* Accessibility tweaks */
@media (prefers-contrast: more){
  .team-card{ border-color: rgba(255,255,255,.16); }
  .team-card .ring{ opacity: .95; }
}

/* Reduce animation for motion-sensitive users */
@media (prefers-reduced-motion: reduce){
  .team-card, .team-card .portrait img, .team-card .ring{
    transition: none !important;
    transform: none !important;
  }
}


/* ===== FAQ (Luxe) ===== */
.faq.luxe { position: relative; isolation: isolate; }
.faq-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(16px, 2.4vw, 28px);
}
@media (max-width: 860px){ .faq-grid{ grid-template-columns: 1fr; } }

.faq-item{
  border-radius: var(--radius, 18px);
  background: linear-gradient(180deg,#262422,#1b1917);
  border:1px solid var(--border, rgba(255,255,255,.08));
  box-shadow: 0 18px 30px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
}
.faq-item summary{
  list-style: none;
  cursor: pointer;
  display:grid;
  grid-template-columns: 28px 1fr 22px;
  align-items:center;
  gap: 12px;
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.2vw, 20px);
  position: relative;
}
.faq-item summary::-webkit-details-marker{ display:none; }

.faq-item .ic i{ color: var(--gold, #C6A664); font-size:1.1rem; }
.faq-item .q{
  color:#F1EBE2;
  font-weight:600;
  letter-spacing:.2px;
}
.faq-item .chev{
  inline-size: 12px; block-size: 12px;
  border: 2px solid color-mix(in oklab, var(--gold, #C6A664) 88%, #fff 0%);
  border-left: 0; border-top: 0;
  transform: rotate(45deg);
  transition: transform .28s ease;
  justify-self: end;
}

.faq-item[open] .chev{ transform: rotate(225deg); }

.faq-item .d-body{
  padding: 0 clamp(16px, 2.2vw, 20px) clamp(16px, 2.2vw, 20px);
  border-top: 1px solid rgba(255,255,255,.06);
  color:#DCD4C9;
}
.faq-item .d-body.small{ line-height:1.65; }

.faq-item:focus-within{
  outline: 2px solid color-mix(in oklab, var(--gold, #C6A664) 55%, #fff 0%);
  outline-offset: 2px;
}

/* ===== CTA (Luxe) ===== */
.cta-wrap{ position: relative; isolation: isolate; }
.cta-wrap .cta-banner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap: clamp(12px, 2vw, 20px);
  border-radius: var(--radius, 18px);
  background: linear-gradient(180deg,#262422,#1b1917);
  border:1px solid var(--border, rgba(255,255,255,.08));
  box-shadow: 0 22px 44px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
  position: relative; overflow:hidden;
  padding: clamp(16px, 2.4vw, 26px);
}
.cta-wrap .cta-banner::before{
  /* hairline gold rim */
  content:""; position:absolute; inset:0; pointer-events:none; border-radius: inherit; padding:1px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--gold, #C6A664) 70%, #fff 0%),
    rgba(255,255,255,.08),
    color-mix(in oklab, var(--gold, #C6A664) 55%, #000 0%));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.cta-wrap .cta-copy{ max-width: 720px; }
.cta-wrap .crest{
  position:absolute; inset:auto -18% -30% auto;
  width: 280px; height: 280px; opacity:.07;
  background: var(--crest-img, url('/assets/brand/crest-gold.png')) center/contain no-repeat;
  pointer-events:none;
}

/* Buttons respect your existing CTA styles; just a subtle lift on hover */
.cta-banner .cta-primary, .cta-banner .cta-ghost{
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cta-banner .cta-primary:hover{ transform: translateY(-1px); box-shadow: 0 12px 22px rgba(198,166,100,.28); }
.cta-banner .cta-ghost:hover{ transform: translateY(-1px); }

/* Motion prefs */
@media (prefers-reduced-motion: reduce){
  .faq-item .chev, .cta-banner .cta-primary, .cta-banner .cta-ghost{ transition:none; }
}

/* ===== style to make the index more luxurious ===== */

/* Better text rendering */
html, body{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Premium card sheen + hover halo (no padding changes) */
.card,
#equipment .gear,
#routes details,
#fleet details,
#testimonials .t-slider,
#trust .trustbar,
.route-tray,
.toast{
  position: relative;
  isolation: isolate;
}

.card::after,
#equipment .gear::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  opacity: .0;
  background:
    radial-gradient(1200px 420px at 18% 0%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(600px 240px at 85% 110%, rgba(198,166,100,.10), transparent 55%);
  transition: opacity .35s ease;
}

.card:hover::after,
#equipment .gear:hover::after{
  opacity: .9;
}

/* Gold “halo” on hover (still no size changes) */
.card:hover,
#equipment .gear:hover{
  box-shadow:
    0 18px 34px rgba(0,0,0,.45),
    0 0 0 1px rgba(198,166,100,.18);
}

/* Cinematic image finishing (Fleet/Routes only) */
#fleet .thumb img,
#routes .thumb img{
  filter: saturate(1.06) contrast(1.05);
}

/* Premium inset frame on thumbnails (no resizing) */
#fleet .thumb::before,
#routes .thumb::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: calc(var(--radius) - 6px);
  pointer-events:none;
  opacity:.55;
  background: linear-gradient(90deg,
    rgba(198,166,100,.55),
    rgba(255,255,255,.10),
    rgba(198,166,100,.38)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding:1px;
}

/* Chips: richer active state without changing size */
#fleet .chip.active,
#routes .chip.active,
#equipment .chip.active{
  box-shadow:
    0 10px 22px rgba(198,166,100,.18),
    inset 0 0 0 1px rgba(255,255,255,.10);
}

/* Ribbon: more “glass” feel */
#fleet .ribbon,
#routes .ribbon{
  backdrop-filter: blur(10px);
}
#fleet .ribbon::after,
#routes .ribbon::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 45%);
  opacity:.6;
}

/* Quiet luxury section divider (lightweight) */
section{
  position: relative;
}
section::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform: translateX(-50%);
  width: min(1180px,92%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198,166,100,.45), transparent);
  opacity: .55;
}

/* ===== Index Luxe Add-ons (NO duplicates, NO conflicts) ===== */

/* Only add what you don't already have */
.card,
#equipment .gear,
#routes details,
#fleet details{
  isolation: isolate;
}

/* Sheen + spotlight overlay (doesn't conflict with existing ::before) */
.card::after,
#equipment .gear::after,
#routes details::after,
#fleet details::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .35s ease;
  background:
    radial-gradient(1200px 420px at 18% 0%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(600px 240px at 85% 110%, rgba(198,166,100,.10), transparent 55%),
    radial-gradient(520px 220px at var(--mx, 20%) var(--my, 0%),
      rgba(255,255,255,.07), transparent 60%),
    radial-gradient(520px 220px at calc(var(--mx, 20%) + 18%) calc(var(--my, 0%) + 12%),
      rgba(198,166,100,.10), transparent 60%);
}

.card:hover::after,
#equipment .gear:hover::after,
#routes details:hover::after,
#fleet details:hover::after{
  opacity: 1;
}

/* Premium inset frame on thumbnails (uses ::before, so it won't override your ::after gradient) */
#fleet .thumb::before,
#routes .thumb::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: calc(var(--radius) - 6px);
  pointer-events:none;
  opacity:.55;
  background: linear-gradient(90deg,
    rgba(198,166,100,.55),
    rgba(255,255,255,.10),
    rgba(198,166,100,.38)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding:1px;
}

/* Ribbon highlight line only (no backdrop-filter override) */
#fleet .ribbon::after,
#routes .ribbon::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 45%);
  opacity:.6;
}

/* Section divider line (IMPORTANT: add position:relative into your existing section{} rule instead of duplicating it) */
section::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform: translateX(-50%);
  width: min(1180px,92%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198,166,100,.45), transparent);
  opacity: .55;
}

/* =========================
   REMOVE ACTIVE UNDERLINE / BAR (desktop + mobile)
   Paste at the very bottom of the main CSS file
========================= */
.eo-nav a.is-active::after,
.eo-nav a[aria-current="page"]::after,
nav.nav a.is-active::after,
nav.nav a[aria-current="page"]::after,
#mobileMenu a.is-active::after,
#mobileMenu a[aria-current="page"]::after,
#eoMobileMenu a.is-active::after,
#eoMobileMenu a[aria-current="page"]::after,
.mobile-drawer a.is-active::after,
.mobile-drawer a[aria-current="page"]::after{
  content: none !important;
  display: none !important;
}

/* If your underline is coming from text-decoration instead */
.eo-nav a.is-active,
.eo-nav a[aria-current="page"],
nav.nav a.is-active,
nav.nav a[aria-current="page"],
#mobileMenu a.is-active,
#mobileMenu a[aria-current="page"],
#eoMobileMenu a.is-active,
#eoMobileMenu a[aria-current="page"],
.mobile-drawer a.is-active,
.mobile-drawer a[aria-current="page"]{
  text-decoration: none !important;
}

/* ===========================================
   FIX: Remove blank space after footer
   (ensures footer is the last "in-flow" element)
=========================================== */

/* Remove any bottom padding/margin that creates extra scroll area */
html, body{
  margin: 0 !important;
  padding: 0 !important;
}
body{
  padding-bottom: 0 !important; /* common cause of empty space */
}

/* Ensure footer itself doesn't add external spacing */
footer.footer.luxe{
  margin-bottom: 0 !important;
}

/* Elements placed AFTER the footer in the HTML must be overlays (not in-flow) */
.wa,
#toast,
#routeTray{
  position: fixed !important;
  z-index: 9998;
}

/* Floating WhatsApp */
.wa{
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
}

/* Toast */
#toast{
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
}

/* Route tray (centered, without using transform so we don’t break any slide animations) */
#routeTray{
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: min(1180px, 92%);
  bottom: calc(14px + env(safe-area-inset-bottom));
}