/* =========================================================================
   Beverly Hills Lux Ride — HUB DESIGN SYSTEM  (hub.css)
   Premium pillar/hub pages: LAX · Hourly · World Cup · Beverly Hills
   ------------------------------------------------------------------------
   · Prefix .hub- (scoped — no global leakage)
   · Light-first (site default theme=light), flips for dark mode
   · Contrast-armored: always-dark bands force light text (!important) so
     the global :where(h*,p,span):not(...) repaint rule can't white them out
   · Mobile-first · 44px+ tap targets · reuses .lux-cta buttons + .faq-q JS
   · NO @import, NO JS — accordion uses the footer's external .faq-q handler
   ========================================================================= */

.hub{
  /* light tokens (day) */
  --h-bg:#faf6ee; --h-bg-soft:#f3eddf; --h-bg-white:#ffffff; --h-card:#fffdf8;
  --h-ink:#161410; --h-muted:rgba(28,24,16,.74); --h-faint:rgba(28,24,16,.52);
  --h-line:rgba(28,24,16,.12); --h-line-soft:rgba(28,24,16,.06);
  --h-acc:var(--accent-color,#0E9F6E); --h-acc-bg:rgba(14,159,110,.10);
  --h-gold:#D4AF37; --h-gold-ink:#8a6d12;            /* gold text readable on light (4.9:1) */
  --h-gold-grad:linear-gradient(135deg,#e9cc6b 0%,#d4af37 55%,#b08d28 100%);
  --h-dark:#14110c; --h-dark-2:#1c1915; --h-onmark:#f5f1e8;
  --h-serif:'Cormorant Garamond',Georgia,serif;
  --h-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --h-shadow:0 24px 60px -30px rgba(60,48,20,.30);
  --h-radius:18px;
  background:var(--h-bg);color:var(--h-ink);font-family:var(--h-sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
[data-theme="dark"] .hub{
  --h-bg:#0c0b09; --h-bg-soft:#121009; --h-bg-white:#171511; --h-card:#191610;
  --h-ink:#f5f1e8; --h-muted:rgba(245,241,232,.74); --h-faint:rgba(245,241,232,.48);
  --h-line:rgba(255,255,255,.12); --h-line-soft:rgba(255,255,255,.06);
  --h-gold-ink:#e9cc6b;
  --h-shadow:0 30px 80px -34px rgba(0,0,0,.85);
}
.hub *,.hub *::before,.hub *::after{box-sizing:border-box}
.hub :focus-visible{outline:2px solid var(--h-acc);outline-offset:3px;border-radius:6px}
.hub img{max-width:100%;display:block}

/* ---------- shared layout ---------- */
.hub-container{max-width:1200px;margin:0 auto;padding:0 5%}
.hub-section{padding:clamp(54px,7vw,86px) 0;position:relative}
.hub-section--soft{background:var(--h-bg-soft);border-top:1px solid var(--h-line-soft);border-bottom:1px solid var(--h-line-soft)}
.hub-section--white{background:var(--h-bg-white);border-top:1px solid var(--h-line-soft);border-bottom:1px solid var(--h-line-soft)}
.hub-head{max-width:760px;margin:0 auto clamp(34px,5vw,50px);text-align:center}
.hub-head--left{text-align:left;margin-left:0}
.hub-label{display:inline-block;color:var(--h-gold-ink);font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;margin:0 0 12px}
.hub-h2{font-family:var(--h-serif);font-size:clamp(28px,4.2vw,46px);font-weight:600;line-height:1.12;margin:0 0 14px;color:var(--h-ink);text-wrap:balance}
.hub-h2 em{font-style:italic;color:var(--h-gold-ink)}
.hub-desc{font-size:clamp(15px,1.6vw,17.5px);line-height:1.7;color:var(--h-muted);font-weight:300;margin:0 auto;max-width:680px}
.hub-head--left .hub-desc{margin-left:0}

/* ---------- HERO (always dark band) ---------- */
.hub-hero{position:relative;isolation:isolate;padding:clamp(116px,16vh,170px) 5% clamp(48px,6vw,76px);
  background:var(--h-dark);color:var(--h-onmark);overflow:hidden}
.hub-hero__bg{position:absolute;inset:0;z-index:0}
.hub-hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.30}
.hub-hero__bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(1100px 560px at 78% 8%,rgba(212,175,55,.18),transparent 60%),
            linear-gradient(180deg,rgba(12,10,8,.74),rgba(12,10,8,.92))}
.hub-hero__inner{position:relative;z-index:2;max-width:1100px;margin:0 auto}
.hub-kicker{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;
  background:rgba(212,175,55,.14);border:1px solid rgba(212,175,55,.42);
  color:#f0d98c!important;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:0 0 22px}
.hub-kicker svg{width:15px;height:15px}
.hub-hero h1{font-family:var(--h-serif);font-size:clamp(40px,6.4vw,86px);font-weight:600;line-height:1.03;
  letter-spacing:.2px;margin:0 0 20px;color:var(--h-onmark)!important;text-wrap:balance}
.hub-hero h1 em{font-style:italic;color:#e9cc6b!important;display:block}
.hub-hero__lede{font-size:clamp(15.5px,1.7vw,19px);line-height:1.7;max-width:680px;
  color:rgba(245,241,232,.86)!important;font-weight:300;margin:0 0 30px}
.hub-hero__lede strong{color:#fff!important;font-weight:600}
.hub-hero__lede .g{color:#e9cc6b!important;font-weight:700}

.hub-cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:0 0 26px}
@media (max-width:560px){.hub-cta-row{flex-direction:column;align-items:stretch}.hub-cta-row .lux-cta,.hub-cta-row .hub-btn{justify-content:center;width:100%}}

/* fallback button if .lux-cta isn't present */
.hub-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 28px;border-radius:999px;
  font-size:13.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:0;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .2s,color .2s}
.hub-btn--gold{background:var(--h-gold-grad);color:#1a1206!important;box-shadow:0 12px 30px -10px rgba(212,175,55,.6)}
.hub-btn--gold:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px rgba(212,175,55,.82)}
.hub-btn--ghost{background:transparent;color:#f5f1e8!important;border:1.5px solid rgba(245,241,232,.4)}
.hub-btn--ghost:hover{border-color:#e9cc6b;color:#e9cc6b!important;transform:translateY(-1px)}

.hub-trust-row{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
.hub-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(245,241,232,.16);
  color:rgba(245,241,232,.92)!important;font-size:12.5px;font-weight:600;letter-spacing:.01em}
.hub-chip svg{width:15px;height:15px;color:#e9cc6b}
.hub-chip b{color:#fff!important;font-weight:700}

/* hero stat strip */
.hub-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:34px 0 0;max-width:780px}
.hub-stat{padding:16px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(245,241,232,.14);border-radius:14px;text-align:center}
.hub-stat b{display:block;font-family:var(--h-serif);font-size:30px;font-weight:600;color:#e9cc6b!important;line-height:1}
.hub-stat span{display:block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(245,241,232,.62)!important;margin-top:7px;font-weight:700}

/* ---------- booking widget mount band ---------- */
.hub-widget{padding:clamp(34px,5vw,52px) 0}
.hub-widget .hub-head{margin-bottom:22px}

/* ---------- SPOKE / SERVICE CARD GRID (the key hub component) ---------- */
.hub-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.hub-grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.hub-card{position:relative;display:flex;flex-direction:column;padding:26px 24px;background:var(--h-card);
  border:1px solid var(--h-line);border-radius:var(--h-radius);text-decoration:none;color:var(--h-ink);
  box-shadow:0 12px 30px -26px rgba(60,48,20,.34);overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .3s}
.hub-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--h-gold-grad);transform:scaleY(0);transform-origin:top;transition:transform .3s ease}
.hub-card:hover{transform:translateY(-5px);border-color:var(--h-gold);box-shadow:0 26px 56px -30px rgba(60,48,20,.4)}
.hub-card:hover::before{transform:scaleY(1)}
.hub-card__ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:15px;
  background:linear-gradient(140deg,#f0d98c,#d4af37 60%,#a97e2b);color:#1a1206}
.hub-card__ico svg{width:23px;height:23px}
.hub-card__t{font-family:var(--h-serif);font-size:22px;font-weight:600;margin:0 0 7px;color:var(--h-ink)!important;line-height:1.18}
.hub-card__d{font-size:14px;line-height:1.62;color:var(--h-muted)!important;font-weight:300;margin:0 0 14px;flex:1}
.hub-card__go{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--h-gold-ink)!important;margin-top:auto}
.hub-card__go svg{width:15px;height:15px;transition:transform .25s ease}
.hub-card:hover .hub-card__go svg{transform:translateX(4px)}
.hub-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 13px}
.hub-card__tag{font-size:10px;padding:4px 9px;border-radius:999px;background:var(--h-acc-bg);color:var(--h-acc)!important;font-weight:800;letter-spacing:.05em;text-transform:uppercase}

/* ---------- ROUTE LINK GRID (compact — for LAX 20-route hub) ---------- */
.hub-routes{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.hub-route{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;
  background:var(--h-card);border:1px solid var(--h-line);border-radius:13px;text-decoration:none;color:var(--h-ink);
  transition:transform .22s ease,border-color .22s,box-shadow .25s;box-shadow:0 8px 22px -20px rgba(60,48,20,.3)}
.hub-route:hover{transform:translateY(-3px);border-color:var(--h-gold);box-shadow:0 18px 40px -26px rgba(60,48,20,.4)}
.hub-route__main{display:flex;flex-direction:column;gap:3px;min-width:0}
.hub-route__t{font-weight:700;font-size:15px;color:var(--h-ink)!important;line-height:1.25}
.hub-route__m{font-size:12px;color:var(--h-faint)!important;font-weight:500}
.hub-route__go{flex-shrink:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--h-acc-bg);color:var(--h-acc)!important;transition:background .22s,color .22s}
.hub-route:hover .hub-route__go{background:var(--h-gold);color:#1a1206!important}
.hub-route__go svg{width:15px;height:15px}

/* ---------- "HOW IT WORKS" steps ---------- */
.hub-steps{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));counter-reset:step}
.hub-step{position:relative;padding:26px 22px 24px;background:var(--h-card);border:1px solid var(--h-line);border-radius:var(--h-radius);box-shadow:0 12px 30px -28px rgba(60,48,20,.3)}
.hub-step__n{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-family:var(--h-serif);
  font-size:20px;font-weight:700;background:var(--h-dark);color:#e9cc6b;margin-bottom:14px}
.hub-step__t{font-family:var(--h-serif);font-size:20px;font-weight:600;margin:0 0 6px;color:var(--h-ink)!important}
.hub-step__d{font-size:13.5px;line-height:1.6;color:var(--h-muted)!important;font-weight:300;margin:0}

/* ---------- TRUST / VIP band ---------- */
.hub-vip{display:grid;gap:18px;grid-template-columns:1.1fr 1fr;align-items:center}
@media (max-width:860px){.hub-vip{grid-template-columns:1fr}}
.hub-vip__media{border-radius:var(--h-radius);overflow:hidden;box-shadow:var(--h-shadow);aspect-ratio:4/3;background:var(--h-dark)}
.hub-vip__media img{width:100%;height:100%;object-fit:cover}
.hub-vip__list{display:flex;flex-direction:column;gap:14px;margin:18px 0 0;padding:0;list-style:none}
.hub-vip__list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55;color:var(--h-muted)!important;font-weight:300}
.hub-vip__list li b{color:var(--h-ink)!important;font-weight:700}
.hub-vip__list svg{flex-shrink:0;width:22px;height:22px;color:var(--h-gold-ink);margin-top:1px}

/* ---------- FAQ (uses footer .faq-q accordion JS) ---------- */
.hub-faqs{max-width:840px;margin:0 auto}
.hub-faqs .faq-item{background:var(--h-card);border:1px solid var(--h-line);border-radius:14px;margin:0 0 12px;overflow:hidden;transition:border-color .2s}
.hub-faqs .faq-item:hover{border-color:var(--h-gold)}
.hub-faqs .faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;
  padding:20px 24px;font-family:var(--h-serif);font-size:19px;font-weight:600;color:var(--h-ink)!important;line-height:1.3}
.hub-faqs .faq-q::after{content:"";flex-shrink:0;width:11px;height:11px;border-right:2px solid var(--h-gold-ink);border-bottom:2px solid var(--h-gold-ink);transform:rotate(45deg);transition:transform .25s ease}
.hub-faqs .faq-item.open .faq-q::after{transform:rotate(-135deg)}
.hub-faqs .faq-a{max-height:0;opacity:0;padding:0 24px;font-size:15px;line-height:1.7;color:var(--h-muted)!important;font-weight:300;
  transition:max-height .3s ease,opacity .25s ease,padding .3s ease}
.hub-faqs .faq-item.open .faq-a{max-height:520px;opacity:1;padding:0 24px 22px}
.hub-faqs .faq-a a{color:var(--h-gold-ink)!important;text-decoration:underline;text-underline-offset:3px}

/* ---------- prose ---------- */
.hub-prose{max-width:840px;margin:0 auto;font-size:16.5px;line-height:1.85;color:var(--h-muted)!important;font-weight:300}
.hub-prose p{margin:0 0 18px}
.hub-prose strong{color:var(--h-ink)!important;font-weight:600}
.hub-prose a{color:var(--h-gold-ink)!important;text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* ---------- FINAL CTA (always dark) ---------- */
.hub-final{padding:clamp(54px,7vw,84px) 5%}
.hub-final__inner{max-width:780px;margin:0 auto;text-align:center;border-radius:26px;padding:clamp(42px,6vw,70px) 28px;
  background:radial-gradient(680px 320px at 50% 0%,rgba(212,175,55,.14),transparent 64%),linear-gradient(160deg,var(--h-dark-2),var(--h-dark));
  border:1px solid rgba(212,175,55,.36);box-shadow:var(--h-shadow);color:var(--h-onmark)}
.hub-final h2{font-family:var(--h-serif);font-size:clamp(28px,4.4vw,48px);font-weight:600;margin:0 0 16px;color:var(--h-onmark)!important}
.hub-final h2 em{font-style:italic;color:#e9cc6b!important}
.hub-final p{font-size:16.5px;max-width:580px;margin:0 auto 30px;color:rgba(245,241,232,.78)!important;line-height:1.65;font-weight:300}
.hub-final .hub-cta-row{justify-content:center}
.hub-powered{margin:22px 0 0;font-size:13px;color:rgba(245,241,232,.66)!important;text-align:center}
.hub-powered a{color:#e9cc6b!important;text-decoration:none;font-weight:700}
.hub-powered a:hover{text-decoration:underline}

/* ---------- breadcrumb ---------- */
.hub-crumb{max-width:1100px;margin:0 auto;padding:14px 5% 0;font-size:12.5px;color:rgba(245,241,232,.6)!important;position:relative;z-index:3}
.hub-crumb a{color:rgba(245,241,232,.82)!important;text-decoration:none}
.hub-crumb a:hover{color:#e9cc6b!important}

/* ---------- responsive ---------- */
@media (max-width:768px){
  .hub-section{padding:clamp(44px,9vw,60px) 0}
  .hub-card__t{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .hub *{animation:none!important;transition:none!important}
}