/* ════════════════════════════════════════════════════════════
   HOMEPAGE STYLES.

   Extracted from the <style> block in index-public.html on 25 Aug 2026, on the
   way to serving the homepage from the App Router. It is lifted VERBATIM and
   linked from exactly where the block used to sit, immediately after
   tssa-theme.css — CSS is order-dependent and this file must keep its place in
   the cascade, both here and in any route that renders the same markup.

   Shared deliberately: one source, two consumers. A copy would drift.

   The four small section-scoped <style> blocks further down the body were left
   where they are. They sit AFTER this in the cascade on purpose, they are a
   few lines each, and moving them would risk a specificity change for nothing.
   ════════════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--t1);overflow-x:hidden}
a{text-decoration:none;color:inherit}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:500;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
nav.scrolled{background:rgba(9,8,6,.97);backdrop-filter:blur(24px);border-bottom-color:var(--b1)}
.nav-w{max-width:1640px;margin:0 auto;padding:0 clamp(18px,3.5vw,56px);display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,44px);height:76px}
.logo{cursor:pointer;display:flex;flex-direction:column;gap:2px}
.logo .m{font-family:var(--serif);font-size:18px;font-weight:600;color:#fff;letter-spacing:.16em;text-transform:uppercase}
.logo .s{font-size:9px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold)}
.nav-links{display:flex;align-items:center;gap:clamp(3px,.5vw,8px);flex-wrap:nowrap;flex:0 1 auto;min-width:0}
/* Real pressable objects, in the same language as the section tab bar
   below the hero — Rudy asked for these to feel like those. They were
   flat text with a 30px gap, which both read as labels and overflowed:
   at 1280px the nav wanted 1211px of content in 1152px of space, so the
   wordmark, the links and the buttons all sat at a ZERO gap and touched. */
/* THE ROW HAS TO ACTUALLY FIT.
   `.nav-links` carries min-width:0, so flex happily SHRINKS its box while
   the nowrap pills inside keep their size and spill straight over the
   buttons. Measuring the gap between the three container boxes therefore
   reports healthy spacing while the content is overlapping — which is
   exactly how this got called fixed once already. The pills are trimmed
   here so the row genuinely fits, and the breakpoint below hands over to
   the menu before it cannot. */
.nav-links a{white-space:nowrap;font-size:clamp(9.5px,.75vw,10.5px);font-weight:500;
             color:var(--t2);letter-spacing:.09em;text-transform:uppercase;
             position:relative;cursor:pointer;border-radius:99px;
             padding:8px clamp(7px,.7vw,10px);min-height:38px;
             display:inline-flex;align-items:center;
             background:linear-gradient(180deg,rgba(27,24,17,.55),rgba(16,14,10,.55));
             border:1px solid rgba(201,168,76,.16);
             box-shadow:0 1px 0 rgba(232,208,138,.10) inset,0 4px 10px -7px rgba(0,0,0,.9);
             transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,
                        color .18s ease,border-color .18s ease,background .18s ease}
.nav-links a:hover{color:var(--gold-l);border-color:var(--gold);transform:translateY(-2px);
                   background:linear-gradient(180deg,#1b1811,#100e0a);
                   box-shadow:0 1px 0 rgba(232,208,138,.22) inset,
                              0 10px 20px -10px rgba(0,0,0,.95),
                              0 0 16px -4px rgba(201,168,76,.35)}
.nav-links a:active{transform:translateY(1px);
                    box-shadow:0 2px 6px -3px rgba(0,0,0,.9) inset}
.nav-links a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-links a:hover{color:var(--gold)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-r{display:flex;align-items:center;gap:10px;flex:none}
.wa-btn{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:none;background:none;transition:color .2s}
.wa-btn:hover{color:#25D366}
.wa-dot{width:8px;height:8px;border-radius:50%;background:#25D366}
.cta-btn{background:var(--gold);color:var(--bg);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:11px 22px;border:none;cursor:pointer;transition:all .22s}
.cta-btn:hover{background:var(--gold-l)}

/* HAMBURGER */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;border:none;background:none}
.hb-line{width:22px;height:1px;background:var(--t2);transition:all .3s}
.hamburger.open .hb-line:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.hamburger.open .hb-line:nth-child(2){opacity:0}
.hamburger.open .hb-line:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

/* ── DISCOVER MEGA-MENU (Phase 1 signature element) ── */
.discover-trigger{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:500;color:var(--t2);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border:none;background:none;position:relative;padding:0;font-family:inherit}
.discover-trigger .dt-caret{width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .3s}
.discover-trigger[aria-expanded="true"]{color:var(--gold)}
.discover-trigger[aria-expanded="true"] .dt-caret{transform:rotate(-135deg) translateY(-1px)}
.discover-trigger::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:scaleX(0);transition:transform .35s ease}
.discover-trigger:hover::after,.discover-trigger[aria-expanded="true"]::after{transform:scaleX(1)}

.mega{position:fixed;top:var(--nav-h);left:0;right:0;z-index:480;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease,visibility .3s;pointer-events:none}
.mega.open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mega-scrim{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;background:rgba(6,5,4,.55);opacity:0;transition:opacity .3s}
.mega.open .mega-scrim{opacity:1}
.mega-panel{position:relative;background:rgba(14,12,9,.82);backdrop-filter:blur(28px) saturate(1.3);-webkit-backdrop-filter:blur(28px) saturate(1.3);border-bottom:1px solid var(--b2);box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.mega-inner{max-width:1440px;margin:0 auto;padding:30px 5% 38px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mega-tile{position:relative;display:block;height:190px;border-radius:12px;overflow:hidden;border:1px solid var(--b1);cursor:pointer;text-decoration:none;opacity:0;transform:translateY(14px);transition:border-color .3s,transform .3s}
.mega.open .mega-tile{opacity:1;transform:none;transition:opacity .5s ease var(--d,0s),transform .5s cubic-bezier(.2,.7,.2,1) var(--d,0s),border-color .3s}
/* Discover moved out of the overlay and onto the page, and the tiles stayed
   invisible: they only ever became visible inside `.mega.open`, and on a page
   section there is no such ancestor. Eleven tiles, all present, all at
   opacity 0 — "no data under Discover". In-page tiles are visible on their
   own terms; the stagger belongs to the overlay it was written for. */
.disc-grid .mega-tile{opacity:1;transform:none}
.mega-tile:hover{border-color:var(--b3)}
.mega-tile-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02);transition:transform 6s ease}
.mega-tile:hover .mega-tile-bg{animation:kenburns 14s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-2%,-2%)}}
.mega-tile-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,8,6,.15) 0%,rgba(9,8,6,.55) 55%,rgba(9,8,6,.9) 100%)}
.mega-tile-c{position:absolute;left:0;right:0;bottom:0;padding:18px}
.mega-tile-k{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:5px}
.mega-tile-t{font-family:var(--serif);font-size:23px;font-weight:400;color:#fff;line-height:1.05}
.mega-tile-d{font-size:11px;color:var(--t2);margin-top:4px;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.mega-tile:hover .mega-tile-d{opacity:1;transform:none}
.mega-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding-top:6px;border-top:1px solid var(--b1);margin-top:4px}
.mega-foot span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--t4)}
.mega-foot a{font-size:11px;color:var(--gold);letter-spacing:.06em}
@media(prefers-reduced-motion:reduce){
  .mega,.mega-tile{transition:opacity .01s!important}
  .mega.open .mega-tile{transform:none;opacity:1;transition:none}
  .mega-tile-bg,.mega-tile:hover .mega-tile-bg{animation:none;transition:none}
  .discover-trigger::after{transition:none}
}

/* ── WOW BUTTONS (persistent, every surface) ── */
.wow{position:relative;display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:11px 20px;border-radius:99px;cursor:pointer;border:none;text-decoration:none;color:#fff;background:var(--bg2);contain:paint;transition:transform .18s ease;font-family:inherit;white-space:nowrap}
.wow-i{font-size:13px;line-height:1}
/* ✦ Signature Experiences — breathing gold/teal conic border + shimmer */
.wow-exp{background:linear-gradient(var(--bg2),var(--bg2)) padding-box,conic-gradient(from var(--a,0deg),var(--gold),#3fb6a8,var(--gold-l),#2f8f86,var(--gold)) border-box;border:1.5px solid transparent;animation:wowspin 6s linear infinite}
.wow-exp::after{content:'';position:absolute;inset:0;border-radius:99px;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-120%);animation:wowsheen 6s ease-in-out infinite}
.wow-exp .wow-i{color:var(--gold-l)}
/* ◈ Meet ARIA — electric violet/blue pulse ring + particle flicker */
.wow-aria{background:linear-gradient(var(--bg2),var(--bg2)) padding-box,linear-gradient(135deg,#7c5cff,#3d7bff) border-box;border:1.5px solid transparent}
.wow-aria::before{content:'';position:absolute;inset:-3px;border-radius:99px;border:1.5px solid rgba(124,92,255,.6);animation:wowpulse 2.8s ease-out infinite}
.wow-aria .wow-i{color:#a99bff;animation:wowflick 3.5s steps(1) infinite}
.wow:hover{transform:translateY(-2px)}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes wowspin{to{--a:360deg}}
@keyframes wowsheen{0%,55%{transform:translateX(-120%)}72%,100%{transform:translateX(120%)}}
@keyframes wowpulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.25);opacity:0}}
@keyframes wowflick{0%,92%,100%{opacity:1}94%{opacity:.35}96%{opacity:.85}}
@media(prefers-reduced-motion:reduce){
  .wow-exp{animation:none}.wow-exp::after,.wow-aria::before,.wow-aria .wow-i{animation:none}
  .wow-aria::before{opacity:.4}.wow:hover{transform:none}
}

/* MOBILE MENU */
.mobile-menu{position:fixed;top:68px;left:0;right:0;bottom:0;z-index:490;background:rgba(9,8,6,.98);backdrop-filter:blur(20px);transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);padding:40px 6%;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--b1);overflow-y:auto}
.mobile-menu.open{transform:none}
.mm-link{font-family:var(--serif);font-size:32px;font-weight:300;color:var(--t2);padding:18px 0;border-bottom:1px solid var(--b1);cursor:pointer;transition:color .2s;display:flex;align-items:center;justify-content:space-between}
.mm-link:hover{color:var(--gold)}
.mm-link span{font-size:16px;color:var(--t4)}
.mm-btns{margin-top:32px;display:flex;flex-direction:column;gap:12px}
.mm-wa{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--t2);padding:14px 0;cursor:pointer;border:none;background:none}
.mm-wa:hover{color:#25D366}
/* mobile mega tiles + WOW buttons inside the drawer */
.mm-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 8px}
.mm-tile{position:relative;height:96px;border-radius:10px;overflow:hidden;border:1px solid var(--b1);text-decoration:none}
.mm-tile-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.mm-tile-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,8,6,.2),rgba(9,8,6,.85))}
.mm-tile-t{position:absolute;left:0;right:0;bottom:0;padding:9px 11px;font-family:var(--serif);font-size:15px;color:#fff}
.mm-wows{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.mm-wows .wow{justify-content:center;padding:14px;font-size:12px}

/* ── LANDING SEARCH (Phase 3 signature WOW) ── */
.lsearch{position:relative;max-width:680px;margin:0 0 18px;opacity:0;transform:translateY(14px);transition:opacity .8s ease .15s,transform .8s ease .15s}
.lsearch.in{opacity:1;transform:none}
.lsearch-box{position:relative;display:flex;align-items:center;gap:12px;background:rgba(19,17,13,.72);backdrop-filter:blur(18px);border:1px solid var(--b2);border-radius:14px;padding:15px 18px;transition:border-color .3s,box-shadow .3s;overflow:hidden}
.lsearch-box::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(201,168,76,.14),transparent);transform:translateX(-120%)}
.lsearch:not(.focused) .lsearch-box::before{animation:lshimmer 6s ease-in-out infinite}
@keyframes lshimmer{0%,72%{transform:translateX(-120%)}86%,100%{transform:translateX(120%)}}
.lsearch.focused .lsearch-box{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.12),0 14px 44px rgba(0,0,0,.4)}
.lsearch-ic{width:18px;height:18px;flex-shrink:0;color:var(--gold);opacity:.85}
.lsearch-inp{flex:1;background:none;border:none;outline:none;color:var(--t1);font-family:inherit;font-size:16px;font-weight:300;caret-color:var(--gold);min-width:0}
.lsearch-inp::placeholder{color:transparent}
.lsearch-ph{position:absolute;left:48px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--t3);font-size:16px;font-weight:300;display:flex;gap:6px}
.lsearch-ph .lsearch-ph-lead{color:var(--t4)}
.lsearch.has-val .lsearch-ph,.lsearch.focused .lsearch-ph .lsearch-ph-cycle{opacity:0}
.lsearch-ph-cycle{color:var(--gold);transition:opacity .4s}
.lsearch-kbd{flex-shrink:0;font-size:9px;letter-spacing:.1em;color:var(--t4);border:1px solid var(--b1);border-radius:5px;padding:3px 7px;text-transform:uppercase}
.lsearch-clear{flex-shrink:0;background:none;border:none;color:var(--t3);cursor:pointer;font-size:16px;line-height:1;padding:2px 4px;display:none}
.lsearch.has-val .lsearch-clear{display:block}
.lsearch.has-val .lsearch-kbd{display:none}
/* dropdown */
.lsearch-drop{position:absolute;top:calc(100% + 8px);left:0;right:0;background:rgba(14,12,9,.97);backdrop-filter:blur(24px);border:1px solid var(--b2);border-radius:14px;max-height:min(60vh,460px);overflow-y:auto;z-index:40;box-shadow:0 22px 60px rgba(0,0,0,.55);padding:6px;display:none}
.lsearch.open .lsearch-drop{display:block}
.lsearch-grp-h{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;padding:12px 12px 6px}
.lsearch-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:9px;cursor:pointer;text-decoration:none;color:inherit;transition:background .12s}
.lsearch-row:hover,.lsearch-row.active{background:rgba(201,168,76,.1)}
.lsearch-row.active{outline:1px solid var(--b2)}
.lsearch-th{width:44px;height:44px;flex-shrink:0;border-radius:8px;background:var(--s2) center/cover;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--gold)}
.lsearch-main{flex:1;min-width:0}
.lsearch-nm{font-size:13.5px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}
.lsearch-meta{font-size:10.5px;color:var(--t3);display:flex;gap:8px;margin-top:2px;flex-wrap:wrap}
.lsearch-chip{background:rgba(201,168,76,.1);color:var(--gold);border-radius:99px;padding:1px 7px;font-size:9.5px;letter-spacing:.04em}
.lsearch-price{flex-shrink:0;font-size:12.5px;color:var(--gold);font-weight:600;text-align:right}
.lsearch-price small{display:block;font-size:9px;color:var(--t4);font-weight:400}
.lsearch-empty{padding:24px 14px;text-align:center;color:var(--t3);font-size:12.5px}
/* Discover quick-bar beneath the search */
.dbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 34px;opacity:0;transform:translateY(12px);transition:opacity .8s ease .3s,transform .8s ease .3s}
.dbar.in{opacity:1;transform:none}
.dbar-lbl{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--t4);margin-right:2px}
.dbar a,.dbar button{font-size:11px;letter-spacing:.06em;color:var(--t2);background:rgba(19,17,13,.6);border:1px solid var(--b1);border-radius:99px;padding:7px 15px;cursor:pointer;font-family:inherit;text-decoration:none;transition:all .2s}
.dbar a:hover,.dbar button:hover{border-color:var(--gold);color:var(--gold)}
@media (prefers-reduced-motion:reduce){
  .lsearch,.dbar{transition:none;opacity:1;transform:none}
  .lsearch-box::before{animation:none}
}
@media(max-width:640px){
  .lsearch-kbd{display:none}
  .lsearch-inp,.lsearch-ph{font-size:15px}
  .lsearch-ph{left:44px}
}

/* ── HERO ── */
.hero{min-height:100vh;min-height:100svh;position:relative;display:flex;align-items:center;overflow:hidden;padding-top:calc(var(--nav-h) + clamp(24px,4vh,64px));padding-bottom:118px}
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease;background-size:cover;background-position:center}
.hero-slide.active{opacity:1}
/* Perf: only the first slide loads eagerly; slides 2-5 lazy-load via data-bg
   in the rotator (one cycle ahead) — keeps 4 large JPGs off the critical path. */
.hs1{background-image:url('destinations/capetown.jpg')}
.hero-over{position:absolute;inset:0;background:linear-gradient(105deg,rgba(9,8,6,.92) 0%,rgba(9,8,6,.72) 50%,rgba(9,8,6,.28) 100%)}
.hero-over2{position:absolute;bottom:0;left:0;right:0;height:200px;background:linear-gradient(transparent,var(--bg))}
.hero-c{position:relative;z-index:2;padding:0 6%;max-width:1440px;margin:0 auto;width:100%}
.hero-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:24px;opacity:0;transform:translateY(16px);transition:opacity .8s ease .2s,transform .8s ease .2s}
.hero-eyebrow.in{opacity:1;transform:none}
.hero-line{width:32px;height:1px;background:var(--gold)}
.hero-eyebrow span{font-size:10px;color:var(--gold);letter-spacing:.32em;text-transform:uppercase}
.hero-h1{font-family:var(--serif);font-size:clamp(2.4rem,5.5vw,5.5rem);font-weight:300;line-height:1.08;color:#fff;opacity:0;transform:translateY(24px);transition:opacity .9s ease .4s,transform .9s ease .4s}
.hero-h1.in{opacity:1;transform:none}
.hero-h1 em{font-style:italic;color:var(--gold);display:block;text-shadow:var(--glow-g);animation:tssa-glow-pulse 3.4s ease-in-out infinite}
.dest-rotate{display:inline-block;min-width:200px;vertical-align:bottom}
.dest-word{display:none;animation:wordSlide .5s ease}
.dest-word.show{display:inline}
@keyframes wordSlide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero-desc{font-size:clamp(13px,1.5vw,15px);font-weight:300;color:var(--t2);max-width:460px;line-height:1.82;margin:22px 0 40px;opacity:0;transform:translateY(16px);transition:opacity .8s ease .7s,transform .8s ease .7s}
.hero-desc.in{opacity:1;transform:none}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;opacity:0;transition:opacity .8s ease .9s}
.hero-btns.in{opacity:1}
.btn-gold{background:var(--gold);color:var(--bg);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:16px 36px;border:none;cursor:pointer;transition:all .22s;display:inline-block;position:relative;overflow:hidden}
.btn-gold::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transform:translateX(-100%);transition:transform .5s}
.btn-gold:hover::before{transform:translateX(100%)}
.btn-gold:hover{background:var(--gold-l)}
.btn-ghost{background:transparent;color:#fff;font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;padding:15px 36px;border:1px solid rgba(255,255,255,.18);cursor:pointer;transition:all .22s;display:inline-block}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.hero-scroll{position:absolute;bottom:36px;left:6%;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-pulse{width:1px;height:52px;background:linear-gradient(var(--gold),transparent);animation:scrollpulse 2.2s ease-in-out infinite}
@keyframes scrollpulse{0%,100%{opacity:.2;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}
.scroll-lbl{font-size:9px;color:var(--t4);letter-spacing:.3em;text-transform:uppercase;writing-mode:vertical-rl}
.hero-stats{position:absolute;bottom:36px;right:6%;z-index:2;display:flex;gap:28px}
.h-stat .n{font-family:var(--serif);font-size:28px;font-weight:300;color:var(--gold);line-height:1}
.h-stat .l{font-size:9px;color:var(--t4);letter-spacing:.2em;text-transform:uppercase;margin-top:3px}
.hero-dots{position:absolute;bottom:44px;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:8px}
.hdot{width:20px;height:2px;background:var(--t4);cursor:pointer;transition:all .3s}
.hdot.active{background:var(--gold);width:36px}

/* ── TRUST ── */
.trust{background:var(--s1);border-top:1px solid var(--b1);border-bottom:1px solid var(--b1);padding:14px 6%;overflow-x:auto;scrollbar-width:none}
.trust::-webkit-scrollbar{display:none}
.trust-i{max-width:1440px;margin:0 auto;display:flex;align-items:center;white-space:nowrap;gap:0}
.ti{display:flex;align-items:center;gap:9px;padding:6px 24px;border-right:1px solid var(--b1);flex-shrink:0}
.ti:last-child{border-right:none}
.ti-dot{width:4px;height:4px;background:var(--gold);flex-shrink:0}
.ti span{font-size:10px;color:var(--t4);letter-spacing:.18em;text-transform:uppercase}

/* ── SECTION BASE ── */
.sec{padding:80px 6%}
.si{max-width:1440px;margin:0 auto}
.sl{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.sl span{font-size:10px;color:var(--gold);letter-spacing:.32em;text-transform:uppercase}
.sl::after{content:'';flex:1;height:1px;background:var(--b1)}
.sh2{font-family:var(--serif);font-size:clamp(32px,4.5vw,60px);font-weight:300;line-height:1.04;color:#fff;text-shadow:var(--glow-w-soft)}
/* The signature breathing gold — tokens + keyframe live in /tssa-theme.css so
   the public site and the app glow identically. */
.sh2 em{font-style:italic;color:var(--gold);text-shadow:var(--glow-g-soft);animation:tssa-glow-pulse 3.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.sh2 em{animation:none}}

/* ── GEMS ── */
.gems-sec{background:var(--bg2);padding:70px 0 0}
.gems-hd{padding:0 6% 40px;max-width:1440px;margin:0 auto}
.gems-strip{display:flex;gap:3px;height:480px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gems-strip::-webkit-scrollbar{display:none}
.gem{flex:0 0 200px;position:relative;overflow:hidden;cursor:pointer;transition:flex .55s cubic-bezier(.4,0,.2,1)}
.gem.open{flex:0 0 480px}
.gem-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s ease}
.gem:hover .gem-img{transform:scale(1.04)}
.gem-over{position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(9,8,6,.92) 100%)}
.gem-over2{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,8,6,.1) 20%,rgba(9,8,6,.65) 100%)}
.gem-info{position:absolute;bottom:0;left:0;right:0;padding:22px 18px;transform:translateY(6px);transition:transform .35s}
.gem.open .gem-info{transform:none}
.gem-region{font-size:9px;color:var(--gold);letter-spacing:.28em;text-transform:uppercase;margin-bottom:6px}
.gem-name{font-family:var(--serif);font-size:clamp(16px,2vw,26px);color:#fff;line-height:1.1;margin-bottom:8px}
.gem-body{font-size:12px;font-weight:300;color:rgba(242,237,227,.6);line-height:1.65;max-height:0;overflow:hidden;transition:max-height .45s ease}
.gem.open .gem-body{max-height:100px}
.gem-cta{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:500;color:var(--gold);letter-spacing:.18em;text-transform:uppercase;margin-top:10px;opacity:0;transition:opacity .3s .1s}
.gem.open .gem-cta{opacity:1}
.gem-tabs{padding:14px 6%;max-width:1440px;margin:0 auto;display:flex;gap:6px;flex-wrap:wrap}
.gt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--b1);color:var(--t3);cursor:pointer;transition:all .2s;background:none}
.gt.on{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.gt:hover:not(.on){border-color:var(--gold);color:var(--gold)}

/* ── EXPERIENCES ── */
.exp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--b1);margin-top:50px}
.ec{background:var(--bg2);padding:36px 28px;cursor:pointer;transition:background .3s;position:relative;overflow:hidden}
.ec:hover{background:var(--s2)}
.ec-n{font-family:var(--serif);font-size:56px;font-weight:300;color:rgba(201,168,76,.07);line-height:1;transition:color .4s;position:absolute;top:24px;right:24px}
.ec:hover .ec-n{color:rgba(201,168,76,.16)}
.ec-bar{width:24px;height:1px;background:var(--gold-dim);margin-bottom:16px;transition:width .35s,background .35s}
.ec:hover .ec-bar{width:44px;background:var(--gold)}
.ec-t{font-family:var(--serif);font-size:22px;color:#fff;margin-bottom:12px}
.ec-d{font-size:13px;font-weight:300;color:var(--t2);line-height:1.75;margin-bottom:24px}
.ec-link{font-size:10px;font-weight:500;color:var(--gold);letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:8px;transition:gap .2s}
.ec:hover .ec-link{gap:14px}

/* ── DEST MOSAIC ── */
/* Six tiles, two rows of twelve columns. Rows reduced 240px -> 200px on
   Rudy's note that the tiles were too large. */
.dmosaic{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:200px 200px;gap:3px;margin-top:44px}
.dc{position:relative;overflow:hidden;cursor:pointer}
.dc .di{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .65s ease}
.dc:hover .di{transform:scale(1.08)}
.dc-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,8,6,.05) 0%,rgba(9,8,6,.78) 100%);transition:opacity .3s}
.dc:hover .dc-ov{opacity:.7}
.dc-info{position:absolute;bottom:0;left:0;right:0;padding:16px}
.dc-r{font-size:9px;color:var(--gold);letter-spacing:.24em;text-transform:uppercase;margin-bottom:4px}
.dc-n{font-family:var(--serif);font-size:clamp(13px,1.6vw,20px);color:#fff;line-height:1.2}
/* Row 1: 5 + 4 + 3 = 12   ·   Row 2: 4 + 5 + 3 = 12
   Cape Town keeps the widest slot in row one; the coastal run gets the widest
   in row two because it carries five place names and needs the room. Dropping
   the old double-height hero is what makes space for the sixth tile. */
.da{grid-column:span 5}.db{grid-column:span 4}.dc2{grid-column:span 3}
.de{grid-column:span 4}.df{grid-column:span 5}.dg{grid-column:span 3}
.da .dc-n{font-size:clamp(16px,1.9vw,24px)}
/* The coastal tile is a list, not a name — it needs to wrap and sit smaller. */
.df .dc-n{font-size:clamp(12px,1.25vw,15px);line-height:1.35}

@media (max-width:900px){
  /* Two across rather than a 12-column mosaic, or the tiles become slivers. */
  .dmosaic{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:4px}
  .da,.db,.dc2,.de,.df,.dg{grid-column:span 1}
  .dc{min-height:150px}
}

/* ── PACKAGES ── */
.pkg-sec{background:var(--bg2)}
.pkg-filter{display:flex;gap:6px;flex-wrap:wrap;margin:36px 0 0;overflow-x:auto;scrollbar-width:none}
.pkg-filter::-webkit-scrollbar{display:none}
.pf{font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:9px 16px;border:1px solid var(--b1);color:var(--t3);cursor:pointer;transition:all .2s;background:none;white-space:nowrap;flex-shrink:0}
.pf.on{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.pf:hover:not(.on){border-color:var(--gold);color:var(--gold)}
.pkg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--b1);margin-top:16px}
.pk{background:var(--bg2);overflow:hidden;cursor:pointer;transition:background .3s}
.pk:hover{background:var(--s2)}
.pk-top{height:4px}
.pk-t1 .pk-top{background:rgba(255,255,255,.08)}
.pk-t2 .pk-top{background:var(--gold-d)}
.pk-t3 .pk-top{background:var(--gold)}
.pk-t4 .pk-top{background:linear-gradient(90deg,var(--gold),var(--gold-l))}
.pk-b{padding:26px 22px}
.pk-tier{font-size:9px;color:var(--t3);letter-spacing:.24em;text-transform:uppercase;margin-bottom:8px}
.pk-name{font-family:var(--serif);font-size:20px;color:#fff;margin-bottom:4px}
.pk-dur{font-size:11px;font-weight:300;color:var(--t3);margin-bottom:20px}
.pk-p{font-family:var(--serif);font-size:30px;font-weight:300;color:var(--gold);line-height:1}
.pk-usd{font-size:11px;font-weight:300;color:var(--t3);margin-top:4px}
.pk-items{margin-top:18px;padding-top:16px;border-top:1px solid var(--b1)}
.pk-item{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;font-size:12px;font-weight:300;color:var(--t2);line-height:1.4}
.pk-dot{width:4px;height:4px;border-radius:50%;background:var(--gold);flex-shrink:0;margin-top:5px}

/* ── QUIZ ── */
.quiz-wrap{max-width:720px;margin:0 auto}
.qstep{display:none}
.qstep.on{display:block}
.q-label{font-size:11px;color:var(--gold);letter-spacing:.28em;text-transform:uppercase;margin-bottom:12px}
.q-title{font-family:var(--serif);font-size:clamp(26px,4vw,36px);font-weight:300;color:#fff;margin-bottom:32px}
.q-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.qopt{background:var(--bg2);border:1px solid var(--b1);padding:16px 14px;cursor:pointer;transition:all .22s;position:relative}
.qopt:hover{border-color:var(--gold);background:var(--s2)}
.qopt.sel{border-color:var(--gold);background:rgba(201,168,76,.08)}
.qopt.sel::after{content:'✓';position:absolute;top:8px;right:10px;font-size:10px;color:var(--gold)}
.qopt-icon{font-size:18px;margin-bottom:8px}
.qopt-label{font-size:12px;color:var(--t2)}
.q-nav{display:flex;align-items:center;justify-content:space-between;margin-top:36px}
.q-back{background:none;border:1px solid var(--b1);color:var(--t3);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:12px 22px;cursor:pointer;transition:all .2s}
.q-back:hover{border-color:var(--gold);color:var(--gold)}
.q-next{background:var(--gold);color:var(--bg);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:13px 28px;border:none;cursor:pointer;transition:all .2s}
.q-next:hover{background:var(--gold-l)}
.q-prog{display:flex;gap:6px}
.qp{width:22px;height:2px;background:var(--b2)}
.qp.done{background:var(--gold)}
.q-result{display:none;text-align:center;padding:16px 0}
.q-result.on{display:block}
.q-result-type{font-family:var(--serif);font-size:clamp(28px,4vw,42px);font-weight:300;color:var(--gold);margin-bottom:12px}
.q-result-desc{font-size:14px;font-weight:300;color:var(--t2);line-height:1.7;max-width:520px;margin:0 auto 28px}

/* ── SPIN ── */
.spin-sec{background:var(--bg);padding:80px 6%}
.spin-w{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.wheel-wrap{display:flex;flex-direction:column;align-items:center;gap:20px}
.wheel-c{position:relative;width:280px;height:280px}
canvas#wheel{border-radius:50%;display:block}
.wheel-ptr{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;background:var(--gold);border-radius:50%;z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--bg);font-weight:700}
.wheel-result{text-align:center;min-height:48px}
.wr-name{font-family:var(--serif);font-size:22px;color:var(--gold);opacity:0;transition:opacity .4s}
.wr-name.show{opacity:1}

/* ── CULINARY ── */
.dine-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--b1);margin-top:16px}

/* ── CORPORATE ── */
.corp-sec{background:var(--bg2)}
.corp-g{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:50px}
.corp-l{padding-right:50px}
.corp-svcs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--b1);margin-top:28px}
.csv{background:var(--bg2);padding:16px;border-left:2px solid var(--gold-dim);transition:border-color .2s}
.csv:hover{border-left-color:var(--gold)}
.csv-t{font-size:13px;font-weight:500;color:#fff;margin-bottom:3px}
.csv-d{font-size:11px;font-weight:300;color:var(--t3);line-height:1.45}
.corridors{margin-top:32px;padding-top:26px;border-top:1px solid var(--b1)}
.corridor{display:flex;align-items:center;margin-bottom:10px;opacity:.5;transition:opacity .3s}
.corridor:hover{opacity:1}
.city-pill{font-size:11px;font-weight:500;color:#fff;background:var(--s2);padding:5px 12px;white-space:nowrap}
.corridor-line{flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--gold) 0,var(--gold) 4px,transparent 4px,transparent 10px);position:relative;margin:0 4px}
.corridor-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:14px;height:14px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px}
.corp-vis{position:relative;overflow:hidden;min-height:420px}
.corp-bg{position:absolute;inset:0;background:url('marketing/fleet/executive-hero.webp') center/cover}
.corp-bg-ov{position:absolute;inset:0;background:linear-gradient(90deg,var(--bg2) 0%,transparent 35%)}
.corp-stats-box{position:absolute;bottom:24px;right:24px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--b2)}
.csb{background:rgba(9,8,6,.85);padding:14px 16px}
.csb .n{font-family:var(--serif);font-size:24px;color:var(--gold);line-height:1}
.csb .l{font-size:9px;color:var(--t4);letter-spacing:.15em;text-transform:uppercase;margin-top:4px}

/* ── TESTIMONIALS ── */
.testi-sec{background:var(--s1)}
.testi-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--b1);margin-top:50px}
.tc{background:var(--s1);padding:36px 28px;position:relative;display:flex;flex-direction:column}
.tc-stars{display:flex;gap:4px;margin-bottom:16px;align-items:center}
.star{width:11px;height:11px;background:var(--gold);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.tc-q{font-family:var(--serif);font-size:17px;font-weight:300;font-style:italic;color:var(--t1);line-height:1.65;margin-bottom:24px;flex:1}
.tc-a{font-size:13px;font-weight:500;color:#fff}
.tc-m{font-size:11px;font-weight:300;color:var(--gold);margin-top:4px}

/* Verified badge — green chip with Google G */
.tc-verified{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#7BC094;background:rgba(123,192,148,.10);padding:3px 8px;border-radius:99px;border:1px solid rgba(123,192,148,.22);margin-left:auto}
.tc-verified::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;background:conic-gradient(from 0deg,#4285F4 0deg 90deg,#EA4335 90deg 180deg,#FBBC05 180deg 270deg,#34A853 270deg 360deg)}

/* Pending placeholder card */
.tc-pending{background:var(--s1);border:1px dashed rgba(201,168,76,.22);padding:36px 28px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:240px}
.tc-pending-icon{width:42px;height:42px;border-radius:50%;border:1px dashed var(--gold-dim);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--gold-d);opacity:.6}
.tc-pending-lbl{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-d)}
.tc-pending-msg{font-size:13px;font-weight:300;color:var(--t3);line-height:1.55;max-width:200px;font-style:italic}

/* Review stats header strip */
.rev-stats{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 28px;background:rgba(201,168,76,.04);border:1px solid var(--b1);border-radius:8px;margin-top:36px;flex-wrap:wrap}
.rev-stats-l{display:flex;align-items:center;gap:18px}
.rev-stat-num{font-family:var(--serif);font-size:42px;font-weight:300;color:var(--gold);line-height:1}
.rev-stat-num em{font-style:italic}
.rev-stat-meta{display:flex;flex-direction:column;gap:4px}
.rev-stat-stars{display:flex;gap:3px}
.rev-stat-stars .star{width:13px;height:13px}
.rev-stat-cap{font-size:11px;letter-spacing:.08em;color:var(--t3);text-transform:uppercase;font-weight:500}
.rev-stats-r{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rev-stats-r a{color:var(--gold);font-size:12px;font-weight:500;letter-spacing:.04em;border-bottom:1px solid var(--b2);padding-bottom:2px;transition:color .25s,border-color .25s}
.rev-stats-r a:hover{color:var(--gold-l);border-color:var(--gold)}
.rev-disclaimer{font-size:10px;color:var(--t3);text-align:center;margin-top:16px;letter-spacing:.04em;font-style:italic;line-height:1.6}

/* ── CTA ── */
.cta-sec{position:relative;overflow:hidden;padding:120px 6%;text-align:center}
.cta-bg-img{position:absolute;inset:0;background:url('destinations/victoriafalls.jpg') center/cover}
.cta-ov{position:absolute;inset:0;background:rgba(9,8,6,.88)}
/* The two-up panel. The copy leads on the left because it carries the ask;
   the film sits right, where the eye lands second. Below 920px they stack and
   the film goes UNDER the buttons — on a phone the CTA has to be reachable
   without scrolling past a video first. */
.cta-duo{position:relative;z-index:2;display:grid;
         grid-template-columns:minmax(0,1fr) minmax(0,1fr);
         gap:clamp(26px,4vw,60px);align-items:center;
         max-width:1180px;margin:0 auto;text-align:left}
.cta-c{position:relative;z-index:2;max-width:640px}
/* No clip assigned yet: the film half stands down entirely and the copy takes
   the panel, rather than pairing the ask with an empty rectangle. */
.d5wrap.is-empty{display:none}
.cta-duo:has(.d5wrap.is-empty){grid-template-columns:minmax(0,1fr);max-width:760px;text-align:center}
.cta-duo:has(.d5wrap.is-empty) .cta-c{margin:0 auto}
.cta-duo:has(.d5wrap.is-empty) .cta-btns{justify-content:center}
@media(max-width:920px){
  .cta-duo{grid-template-columns:1fr;gap:30px;text-align:center}
  .cta-c{margin:0 auto}
}
.cta-c h2{font-family:var(--serif);font-size:clamp(30px,5vw,60px);font-weight:300;color:#fff;line-height:1.04;margin-bottom:16px}
.cta-c h2 em{font-style:italic;color:var(--gold)}
.cta-c p{font-size:14px;font-weight:300;color:var(--t2);margin-bottom:36px;line-height:1.72}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:920px){.cta-btns{justify-content:center}}

/* ── FOOTER ── */
footer{background:var(--s1);border-top:1px solid var(--b1)}
.ft{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding:60px 6% 44px;max-width:1440px;margin:0 auto;border-bottom:1px solid var(--b1)}
.fb-brand p{font-size:13px;font-weight:300;color:var(--t3);line-height:1.75;max-width:240px;margin-top:14px}
.fb-brand .reg{font-size:11px;color:rgba(242,237,227,.18);margin-top:14px;line-height:1.8}
.fb-brand .tag{font-family:var(--serif);font-size:13px;font-style:italic;color:var(--gold-dim);margin-top:10px}
.fc h4{font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--t1);margin-bottom:18px}
.fc a{display:block;font-size:13px;font-weight:300;color:var(--t3);margin-bottom:9px;transition:color .2s}
.fc a:hover{color:var(--gold)}
.fc-row{display:flex;gap:8px;margin-bottom:10px}
.fc-lbl{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);min-width:40px;padding-top:2px}
.fc-row a{font-size:12px;font-weight:300;color:var(--t3);transition:color .2s}
.fc-row a:hover{color:var(--gold)}
.ab{background:rgba(201,168,76,.04);border-top:1px solid var(--b1);border-bottom:1px solid var(--b1);padding:12px 6%;overflow-x:auto;scrollbar-width:none}
.ab::-webkit-scrollbar{display:none}
.ab-i{max-width:1440px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;white-space:nowrap}
.ab-l{font-size:10px;color:var(--t4);letter-spacing:.16em;text-transform:uppercase;flex-shrink:0}
.ab-links{display:flex;gap:22px}
.ab-links a{font-size:10px;color:var(--gold);letter-spacing:.12em;text-transform:uppercase;opacity:.55;transition:opacity .2s}
.ab-links a:hover{opacity:1}
.fbtm{display:flex;align-items:center;justify-content:space-between;padding:18px 6%;max-width:1440px;margin:0 auto;flex-wrap:wrap;gap:10px}
.fbtm p,.fbtm a{font-size:11px;font-weight:300;color:var(--t4)}
.fbtm-l{display:flex;gap:20px}
.fbtm-l a:hover{color:var(--gold)}

/* ── FLOATS ── */
.wa-float{position:fixed;bottom:90px;right:24px;z-index:400;width:50px;height:50px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 20px rgba(37,211,102,.3);transition:transform .2s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:24px;height:24px;fill:#fff}
.sticky-cta{position:fixed;bottom:150px;right:24px;z-index:400;background:var(--gold);color:var(--bg);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:11px 16px;cursor:pointer;border:none;opacity:0;pointer-events:none;transition:opacity .3s;white-space:nowrap}
.sticky-cta.show{opacity:1;pointer-events:all}

/* ── REVEALS ── */
.rev{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s ease}
.rev.in{opacity:1;transform:none}
.rev.d1{transition-delay:.1s}.rev.d2{transition-delay:.2s}

/* ════════════════════════════════
   TABLET — 768px to 1024px
════════════════════════════════ */
@media(max-width:1024px){
  .nav-links{gap:20px}
  .nav-links a{font-size:10px}
  .ft{grid-template-columns:1fr 1fr;gap:36px}
  .exp-grid{grid-template-columns:repeat(2,1fr)}
  .pkg-grid{grid-template-columns:repeat(2,1fr)}
  .dine-grid{grid-template-columns:repeat(2,1fr)}
  .testi-g{grid-template-columns:1fr 1fr}
  .corp-g{grid-template-columns:1fr}
  .corp-l{padding-right:0}
  .corp-vis{min-height:280px;margin-top:32px}
  .spin-w{grid-template-columns:1fr;gap:40px;text-align:center}
  .wheel-wrap{margin:0 auto}
  .dmosaic{grid-template-rows:200px 200px}
}

/* ════════════════════════════════
   MOBILE — below 768px
════════════════════════════════ */
/* The full link row needs roughly 1,200px to itself. Below that the
   hamburger is not a fallback, it is the correct control — 768px was far
   too low and left everything from 768 to 1360 as a cramped, overlapping
   row. The menu already contains every one of these links. */
@media(max-width:1359px){
  .nav-links{display:none}
  .hamburger{display:flex}
}

@media(max-width:768px){
  /* NAV — show hamburger, hide links */
  .nav-links{display:none}
  .wa-btn{display:none}
  .cta-btn{display:none}
  .hamburger{display:flex}
  .nav-w{padding:0 4%}

  /* HERO */
  .hero{min-height:100svh;padding-bottom:96px}
  .hero-c{padding:0 4%}
  .hero-over{background:linear-gradient(180deg,rgba(9,8,6,.7) 0%,rgba(9,8,6,.5) 40%,rgba(9,8,6,.4) 100%)}
  .hero-h1{font-size:clamp(42px,11vw,68px);line-height:1.05}
  .hero-desc{font-size:14px;margin-bottom:32px;max-width:100%}
  .hero-btns{gap:10px}
  .btn-gold,.btn-ghost{padding:14px 28px;font-size:11px}
  .hero-scroll{display:none}
  .hero-stats{bottom:20px;right:4%;gap:18px}
  .h-stat .n{font-size:22px}
  .h-stat .l{font-size:8px}
  .hero-dots{bottom:20px}

  /* SECTIONS */
  .sec{padding:60px 4%}
  .sec.gems-sec{padding:60px 0 0}
  .gems-hd{padding:0 4% 32px}
  .gem-tabs{padding:12px 4%}

  /* GEMS strip — scrollable on mobile */
  .gems-strip{height:360px}
  .gem{flex:0 0 200px}
  .gem.open{flex:0 0 280px}

  /* EXPERIENCES — single column */
  .exp-grid{grid-template-columns:1fr}
  .ec{padding:28px 22px}
  .ec-n{font-size:40px;top:16px;right:16px}

  /* DEST MOSAIC — stack on mobile */
  .dmosaic{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:3px}
  .da,.db,.dc2,.de,.df{grid-column:span 1;grid-row:span 1;height:160px}
  .da .dc-n{font-size:16px}

  /* PACKAGES — single column */
  .pkg-grid{grid-template-columns:1fr}

  /* QUIZ */
  .quiz-wrap{margin-top:36px}
  .q-opts{grid-template-columns:repeat(2,1fr)}
  .q-title{font-size:26px;margin-bottom:24px}

  /* SPIN */
  .spin-sec{padding:60px 4%}
  .spin-w{grid-template-columns:1fr;gap:32px;text-align:center}
  .wheel-c{width:240px;height:240px}
  canvas#wheel{width:240px;height:240px}

  /* CULINARY */
  .dine-grid{grid-template-columns:1fr}

  /* CORPORATE */
  .corp-g{grid-template-columns:1fr}
  .corp-l{padding-right:0}
  .corp-svcs{grid-template-columns:1fr}
  .corp-vis{min-height:240px;margin-top:28px}
  .corp-stats-box{bottom:16px;right:16px}
  .csb{padding:10px 12px}
  .csb .n{font-size:20px}

  /* TESTIMONIALS — single column */
  .testi-g{grid-template-columns:1fr}
  .rev-stats{flex-direction:column;align-items:flex-start;gap:18px;padding:20px}
  .rev-stat-num{font-size:34px}

  /* CTA */
  .cta-sec{padding:80px 4%}

  /* FOOTER — 2 column */
  .ft{grid-template-columns:1fr 1fr;gap:28px;padding:44px 4% 36px}
  .fb-brand{grid-column:span 2}
  .fbtm{flex-direction:column;gap:8px;padding:16px 4%}
  .fbtm-l{flex-wrap:wrap;gap:14px}
  .ab-i{flex-direction:column;align-items:flex-start;gap:10px;white-space:normal}
  .ab-links{flex-wrap:wrap;gap:14px}

  /* FLOATS */
  .wa-float{width:46px;height:46px;bottom:20px;right:16px}
  .sticky-cta{right:72px;bottom:20px;font-size:9px;padding:10px 14px}
}

/* ════════════════════════════════
   SMALL MOBILE — below 420px
════════════════════════════════ */
@media(max-width:420px){
  .hero-h1{font-size:38px}
  .btn-gold,.btn-ghost{padding:13px 22px;width:100%}
  .hero-btns{flex-direction:column;gap:8px}
  .hero-stats{gap:12px}
  .h-stat .n{font-size:18px}
  .q-opts{grid-template-columns:1fr 1fr}
  .ft{grid-template-columns:1fr}
  .fb-brand{grid-column:span 1}
  .pkg-filter{gap:4px}
  .pf{padding:8px 12px;font-size:9px}
}

/* ════════════════════════════════
   V2 ADDITIONS — Vehicle Showcase, Portals, AI Drawer, Social, Login
════════════════════════════════ */

/* ── VEHICLE SHOWCASE ── */
.veh-sec{background:var(--bg);padding:90px 0;position:relative;overflow:hidden}
.veh-sec::before{content:'';position:absolute;top:0;left:50%;width:1px;height:60px;background:linear-gradient(180deg,transparent,var(--gold-dim));transform:translateX(-50%)}
.veh-hd{max-width:1440px;margin:0 auto;padding:0 6%;text-align:center;margin-bottom:48px}
.veh-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.vtab{font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:10px 18px;background:transparent;color:var(--t3);border:1px solid var(--b1);cursor:pointer;transition:all .22s}
.vtab:hover{color:var(--gold);border-color:var(--b2)}
.vtab.on{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.veh-grid{max-width:1440px;margin:0 auto;padding:0 6%;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.vcard{background:var(--bg2);border:1px solid var(--b1);overflow:hidden;transition:all .35s;cursor:pointer;position:relative}
.vcard:hover{border-color:var(--b2);transform:translateY(-4px)}
.vcard::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .3s}
.vcard:hover::before{opacity:1}
.vc-img{height:170px;background:linear-gradient(135deg,var(--s2),var(--s3));position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--b1)}
.vc-img svg{width:75%;height:auto;opacity:.9;transition:transform .55s}
.vcard:hover .vc-img svg{transform:scale(1.06)}
.vc-tier{position:absolute;top:14px;left:14px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:600;background:rgba(9,8,6,.7);padding:5px 10px;backdrop-filter:blur(8px)}
.vc-pax{position:absolute;top:14px;right:14px;font-size:11px;color:var(--t1);background:rgba(9,8,6,.7);padding:5px 10px;backdrop-filter:blur(8px);font-family:var(--serif);font-style:italic}
.vc-body{padding:18px 20px}
.vc-name{font-family:var(--serif);font-size:21px;font-weight:500;line-height:1.15;margin-bottom:6px;color:#fff}
.vc-best{font-size:11px;color:var(--t3);line-height:1.55;margin:8px 0 12px}
.vc-best strong{color:var(--gold);font-weight:500}
.vc-routes{font-size:10px;color:var(--t4);letter-spacing:.08em;font-style:italic;padding-top:10px;border-top:1px solid var(--b1)}

/* ── PORTALS ── */
.portals-sec{background:var(--bg2);padding:100px 0;border-top:1px solid var(--b1);position:relative}
.portals-hd{max-width:1440px;margin:0 auto;padding:0 6%;text-align:center;margin-bottom:48px}
.portals-g{max-width:1200px;margin:0 auto;padding:0 6%;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pcard{position:relative;padding:48px 32px;background:linear-gradient(180deg,var(--s2) 0%,var(--bg2) 100%);border:1px solid var(--b1);transition:all .4s;text-align:center;overflow:hidden;cursor:pointer}
.pcard::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.4;transition:opacity .35s}
.pcard:hover{border-color:var(--b3);transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px var(--b2)}
.pcard:hover::before{opacity:1}
.pcard-emblem{width:72px;height:72px;border-radius:50%;background:rgba(201,168,76,.08);border:1px solid var(--b2);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;font-family:var(--serif);font-size:32px;color:var(--gold);font-weight:400;font-style:italic;transition:all .35s}
.pcard:hover .pcard-emblem{background:rgba(201,168,76,.15);border-color:var(--gold);transform:scale(1.05)}
.pcard-lbl{font-size:10px;letter-spacing:.32em;color:var(--gold);text-transform:uppercase;margin-bottom:10px;font-weight:500}
.pcard h3{font-family:var(--serif);font-size:28px;font-weight:500;margin-bottom:12px;color:#fff}
.pcard-desc{font-size:13px;font-weight:300;color:var(--t2);line-height:1.7;margin-bottom:28px;min-height:75px}
.pcard-btn{display:inline-block;padding:13px 28px;background:var(--gold);color:var(--bg);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;border:none;transition:all .22s}
.pcard-btn:hover{background:var(--gold-l);transform:translateY(-1px)}
.pcard-note{font-size:10px;color:var(--t4);letter-spacing:.06em;margin-top:18px;font-style:italic;line-height:1.5}

/* ── AI FLOATING LAUNCHER ── */
.ai-float{position:fixed;bottom:24px;right:24px;z-index:400;background:linear-gradient(135deg,var(--gold) 0%,var(--gold-d) 100%);color:var(--bg);width:auto;height:auto;border-radius:14px;padding:12px 20px 12px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;box-shadow:0 8px 32px rgba(201,168,76,.4),0 2px 8px rgba(0,0,0,.4);border:none;font-family:var(--serif);transition:all .3s cubic-bezier(.2,.8,.2,1);min-width:220px}
.ai-float:hover{transform:translateY(-3px);box-shadow:0 16px 48px rgba(201,168,76,.55),0 4px 12px rgba(0,0,0,.5)}
.ai-float-icon{width:34px;height:34px;border-radius:8px;background:rgba(9,8,6,.25);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;font-family:var(--serif)}
.ai-float-label{font-size:14px;font-weight:600;letter-spacing:.02em;line-height:1.2;display:block}
.ai-float-label em{font-style:italic;font-weight:400}
.ai-float-sub{font-size:10px;color:rgba(9,8,6,.6);letter-spacing:.08em;font-family:'Inter',sans-serif;font-weight:500;display:block;margin-top:1px}
.ai-float-text{flex:1;min-width:0}
.ai-float-pulse{position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:#25D366;border:1.5px solid var(--gold);animation:aiPulse 2s ease-in-out infinite}
@keyframes aiPulse{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}50%{box-shadow:0 0 0 8px rgba(37,211,102,0)}}

/* ── AI DRAWER ── */
.ai-drawer{position:fixed;bottom:0;right:24px;width:440px;max-width:calc(100% - 48px);height:calc(100vh - 60px);max-height:720px;background:var(--bg2);border:1px solid var(--b2);border-radius:16px 16px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.6),0 0 0 1px var(--b1);z-index:500;display:flex;flex-direction:column;transform:translateY(calc(100% + 30px));transition:transform .4s cubic-bezier(.2,.8,.2,1),width .3s,right .3s;overflow:hidden}
/* ── EXPANDED: ACROSS THE SCREEN ───────────────────────────────────────
   Rudy: "when opened it should expand horizontally across the screen instead."
   It went 440px -> 680px, which is a wider panel, not a workspace. Expanded
   now spans the viewport with a comfortable gutter and a sane reading cap —
   ARIA's itinerary and quote tabs are tables, and tables want width. */
.ai-drawer.expanded{
  width:calc(100vw - 48px);
  max-width:1320px;
  right:50%;
  transform:translateX(50%) translateY(0);
  max-height:calc(100vh - 40px);
}
/* SPECIFICITY, not source order. `.ai-drawer.open{transform:translateY(0)}` is
   declared after `.expanded` and carries the same weight, so it silently threw
   away the centring translateX and the panel hung 608px off the left edge.
   Both classes are present whenever a visitor expands, so that combination
   needs its own rule that outranks each of them. */
.ai-drawer.expanded.open      { transform:translateX(50%) translateY(0) }
.ai-drawer.expanded:not(.open){ transform:translateX(50%) translateY(102%) }

/* ── CRYSTAL ───────────────────────────────────────────────────────────
   "Glass/crystal/diamond lit/sparkling background."

   Four layers, and the order matters:
     1. a frosted ground (backdrop-filter) so the page shows through as light
        rather than as detail — that is what reads as GLASS rather than tint;
     2. angled facets, two linear-gradients crossing at different angles, which
        is what makes a flat pane read as CUT crystal;
     3. a slow specular sweep — the moving highlight a real gem throws;
     4. sparkle points, brighter and larger than the site flakes because this
        is a foreground surface, not a backdrop.

   Kept cheap: no blur animation (that repaints the whole stack every frame),
   only transform and opacity move. */
.ai-drawer{
  background:linear-gradient(158deg,
              rgba(30,26,18,.86) 0%,
              rgba(18,16,12,.92) 46%,
              rgba(24,21,15,.90) 100%);
  backdrop-filter:blur(22px) saturate(1.25);
  -webkit-backdrop-filter:blur(22px) saturate(1.25);
  border:1px solid rgba(201,168,76,.30);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 0 60px -22px rgba(201,168,76,.45),
    0 30px 80px -30px rgba(0,0,0,.95);
  isolation:isolate;
  overflow:hidden;
}
/* Facets — two crossing planes of light. */
.ai-drawer::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(118deg, rgba(255,255,255,.055) 0%, transparent 34%, transparent 66%, rgba(255,255,255,.03) 100%),
    linear-gradient(212deg, rgba(232,208,138,.055) 0%, transparent 40%, transparent 72%, rgba(214,222,232,.035) 100%);
}
/* Specular sweep + sparkle, on one layer so there is one animated element. */
.ai-drawer::after{
  content:'';position:absolute;inset:-40%;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(100deg, transparent 38%, rgba(255,255,255,.10) 47%, rgba(232,208,138,.14) 50%, rgba(255,255,255,.09) 53%, transparent 62%),
    radial-gradient(1.7px 1.7px at 22% 26%, rgba(232,208,138,.85) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 71% 14%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(2px 2px   at 55% 63%, rgba(232,208,138,.7) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 86% 78%, rgba(214,222,232,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 12% 82%, rgba(255,255,255,.6) 50%, transparent 51%);
  background-size:220% 220%, 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px;
  animation:aid-shine 9s ease-in-out infinite;
  opacity:.85;
}
@keyframes aid-shine{
  0%,100%{ transform:translate3d(-12%,-6%,0) }
  50%    { transform:translate3d(12%,6%,0) }
}
/* Everything in the drawer sits above the crystal. */
.ai-drawer > *{ position:relative; z-index:1 }

@media (prefers-reduced-motion:reduce){ .ai-drawer::after{ animation:none } }
@media (max-width:900px){
  .ai-drawer.expanded{ width:calc(100vw - 20px); right:50% }
}
.ai-drawer.open{transform:translateY(0)}
.aid-expand{background:none;border:1px solid var(--b1);color:var(--t3);width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.aid-expand:hover{color:var(--gold);border-color:var(--gold)}
.aid-suggestions{display:flex;gap:6px;flex-wrap:wrap;padding:6px 14px 10px;border-top:1px solid var(--b1)}
.aid-sug-btn{font-size:10.5px;color:var(--t3);background:var(--bg3);border:1px solid var(--b1);border-radius:99px;padding:4px 10px;cursor:pointer;white-space:nowrap;transition:all .15s;font-family:'Inter',sans-serif}
.aid-sug-btn:hover{color:var(--gold);border-color:var(--gold)}
.ai-gen-hero{background:linear-gradient(135deg,rgba(201,168,76,.1),rgba(201,168,76,.03));border:1px solid var(--b1);border-radius:10px;padding:16px 18px;margin:8px 0 12px}
.ai-gen-hero-lbl{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:8px}
.ai-gen-hero-title{font-family:var(--serif);font-size:22px;color:var(--t1);font-weight:400;line-height:1.2;margin-bottom:6px}
.ai-gen-hero-title em{font-style:italic;color:var(--gold)}
.ai-gen-hero-sub{font-size:12px;color:var(--t2);line-height:1.6;font-weight:300}
.ai-sandbox-form{display:flex;flex-direction:column;gap:12px;padding:4px 0}
.ai-sandbox-prompts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:4px}
.ai-sandbox-prompt{font-size:11px;color:var(--t2);background:var(--bg3);border:1px solid var(--b1);border-radius:6px;padding:8px 10px;cursor:pointer;line-height:1.4;transition:all .15s;text-align:left;font-family:'Inter',sans-serif}
.ai-sandbox-prompt:hover{color:var(--gold);border-color:var(--b2);background:var(--s1)}
.ai-sandbox-prompt .ps-icon{color:var(--gold);font-size:10px;display:block;margin-bottom:4px;font-weight:600}
.sandbox-textarea{width:100%;background:var(--bg3);border:1px solid var(--b1);border-radius:8px;padding:12px;color:var(--t1);font-family:'Inter',sans-serif;font-size:13px;resize:vertical;min-height:80px;outline:none;transition:border .15s}
.sandbox-textarea:focus{border-color:var(--b2)}
.sandbox-tabs{display:flex;gap:6px;margin-bottom:10px}
.sandbox-tab{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);background:var(--bg3);border:1px solid var(--b1);border-radius:99px;padding:5px 12px;cursor:pointer;transition:all .15s;font-weight:500}
.sandbox-tab.on{background:rgba(201,168,76,.12);color:var(--gold);border-color:var(--b2)}
.ai-itin-result{background:var(--bg3);border:1px solid var(--b1);border-radius:8px;padding:16px;margin-top:4px;font-size:13px;color:var(--t2);line-height:1.75}
.ai-itin-result strong{color:var(--t1)}
.ai-itin-result em{color:var(--gold);font-style:italic}
.ai-itin-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.ai-itin-action{font-size:10.5px;padding:7px 14px;border-radius:99px;border:1px solid var(--b1);background:var(--bg3);color:var(--t2);cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif;font-weight:500}
.ai-itin-action:hover{border-color:var(--gold);color:var(--gold)}
.ai-itin-action.primary{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.ai-itin-action.primary:hover{background:var(--gold-l)}
.aid-head{padding:20px 22px;background:linear-gradient(135deg,var(--s2),var(--bg2));border-bottom:1px solid var(--b1);display:flex;justify-content:space-between;align-items:center;gap:14px}
.aid-ttl{display:flex;align-items:center;gap:12px}
.aid-mark{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-d));display:flex;align-items:center;justify-content:center;color:var(--bg);font-family:var(--serif);font-weight:600;font-size:18px;font-style:italic}
.aid-ttl h3{font-family:var(--serif);font-size:20px;font-weight:500;color:#fff;margin-bottom:2px}
.aid-ttl h3 em{color:var(--gold);font-style:italic}
.aid-ttl p{font-size:9px;color:var(--gold);letter-spacing:.24em;text-transform:uppercase;font-weight:500}
.aid-close{padding:8px 12px;color:var(--t3);font-size:20px;background:transparent;border:none;cursor:pointer;transition:color .2s}
.aid-close:hover{color:var(--gold)}
.aid-tabs{display:flex;border-bottom:1px solid var(--b1);background:var(--bg)}
.aid-tab{flex:1;padding:13px 8px;text-align:center;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);cursor:pointer;border:none;background:transparent;transition:all .2s;font-weight:600;position:relative}
.aid-tab.on{color:var(--gold);background:var(--bg2)}
.aid-tab.on::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--gold)}
.aid-tab:hover:not(.on){color:var(--t2)}
.aid-body{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin}
.aid-body::-webkit-scrollbar{width:4px}
.aid-body::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}
.aim{padding:12px 15px;border-radius:14px;font-size:13px;font-weight:300;line-height:1.6;max-width:88%;animation:aimIn .3s ease;color:var(--t1)}
@keyframes aimIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.aim.bot{background:var(--bg);border:1px solid var(--b1);align-self:flex-start;border-bottom-left-radius:4px}
.aim.user{background:rgba(201,168,76,.10);border:1px solid var(--b2);align-self:flex-end;border-bottom-right-radius:4px}
.aim.bot strong{color:var(--gold);font-weight:500}
.aim.bot em{color:var(--gold-l);font-style:italic}
.aim-chips{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0}
.aim-chip{padding:7px 12px;background:var(--bg);border:1px solid var(--b1);font-size:10px;font-weight:500;letter-spacing:.06em;color:var(--t2);cursor:pointer;transition:all .2s;text-transform:uppercase;border-radius:99px}
.aim-chip:hover{background:var(--s2);border-color:var(--b2);color:var(--gold)}
.aim-typing{display:inline-flex;gap:4px;padding:0 4px}
.aim-typing span{width:6px;height:6px;border-radius:50%;background:var(--gold-dim);animation:aimDot 1.4s infinite ease-in-out}
.aim-typing span:nth-child(2){animation-delay:.2s}
.aim-typing span:nth-child(3){animation-delay:.4s}
@keyframes aimDot{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.aid-input-wrap{padding:14px 20px;border-top:1px solid var(--b1);background:var(--bg2)}
.aid-input{display:flex;gap:8px;background:var(--bg);border:1px solid var(--b1);border-radius:24px;padding:4px 4px 4px 16px;align-items:center;transition:border-color .22s}
.aid-input:focus-within{border-color:var(--gold)}
.aid-input input{flex:1;background:transparent;border:none;color:var(--t1);font-size:13px;padding:9px 0;font-family:inherit}
.aid-input input:focus{outline:none}
.aid-input input::placeholder{color:var(--t3)}
.aid-send{width:36px;height:36px;border-radius:50%;background:var(--gold);color:var(--bg);display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;transition:all .2s;font-size:16px}
.aid-send:hover{background:var(--gold-l)}
.aid-send:disabled{opacity:.4;cursor:not-allowed}
.aid-foot{padding:10px 20px;background:var(--bg);font-size:9px;color:var(--t4);text-align:center;letter-spacing:.12em;border-top:1px solid var(--b1);text-transform:uppercase}

/* ── ITINERARY FORM ── */
.itin-form{display:flex;flex-direction:column;gap:14px;padding:6px 0}
.itf-field{display:flex;flex-direction:column;gap:5px}
.itf-field label{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600}
.itf-field input,.itf-field select,.itf-field textarea{padding:11px 14px;background:var(--bg);border:1px solid var(--b1);color:var(--t1);font-size:13px;transition:border-color .25s;font-family:inherit;border-radius:6px}
.itf-field input:focus,.itf-field select:focus,.itf-field textarea:focus{outline:none;border-color:var(--gold)}
.itf-field textarea{min-height:70px;resize:vertical}
.itf-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.itf-build{padding:14px;background:var(--gold);color:var(--bg);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;border:none;transition:all .22s;margin-top:8px}
.itf-build:hover{background:var(--gold-l)}

/* ── LOGIN MODAL ── */
.lm-backdrop{position:fixed;inset:0;background:rgba(9,8,6,.85);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:600;padding:24px;animation:lmIn .25s}
.lm-backdrop.on{display:flex}
@keyframes lmIn{from{opacity:0}to{opacity:1}}
.lm-card{background:var(--bg2);border:1px solid var(--b2);max-width:460px;width:100%;padding:40px 36px;position:relative;animation:lmRise .35s cubic-bezier(.2,.8,.2,1)}
@keyframes lmRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.lm-close{position:absolute;top:18px;right:18px;background:none;border:none;color:var(--t3);font-size:22px;cursor:pointer;transition:color .2s}
.lm-close:hover{color:var(--gold)}
.lm-emblem{width:64px;height:64px;border-radius:50%;background:rgba(201,168,76,.08);border:1px solid var(--b2);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-family:var(--serif);font-size:28px;color:var(--gold);font-style:italic}
.lm-lbl{font-size:10px;letter-spacing:.32em;color:var(--gold);text-transform:uppercase;text-align:center;margin-bottom:8px;font-weight:500}
.lm-card h2{font-family:var(--serif);font-size:30px;font-weight:500;text-align:center;color:#fff;margin-bottom:8px}
.lm-card h2 em{color:var(--gold);font-style:italic}
.lm-sub{font-size:13px;color:var(--t3);text-align:center;margin-bottom:28px;line-height:1.6}
.lm-form{display:flex;flex-direction:column;gap:14px}
.lm-field input{width:100%;padding:13px 16px;background:var(--bg);border:1px solid var(--b1);color:var(--t1);font-size:14px;transition:border-color .22s;font-family:inherit;border-radius:6px}
.lm-field input:focus{outline:none;border-color:var(--gold)}
.lm-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--t3)}
.lm-row label{display:flex;align-items:center;gap:6px;cursor:pointer}
.lm-row a{color:var(--gold);cursor:pointer}
.lm-row a:hover{color:var(--gold-l)}
.lm-submit{padding:14px;background:var(--gold);color:var(--bg);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;border:none;transition:all .22s;margin-top:6px}
.lm-submit:hover{background:var(--gold-l)}
.lm-foot{margin-top:20px;text-align:center;font-size:11px;color:var(--t4);line-height:1.7}
.lm-foot a{color:var(--gold);cursor:pointer}
.lm-foot a:hover{color:var(--gold-l)}

/* ── FOOTER SOCIAL BAR ── */
.fsoc{padding:24px 6%;border-top:1px solid var(--b1);border-bottom:1px solid var(--b1);background:rgba(201,168,76,.02);display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.fsoc-lbl{font-size:10px;color:var(--t4);letter-spacing:.24em;text-transform:uppercase;margin-right:12px}
.fsoc a{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--b2);border-radius:50%;transition:all .25s;color:var(--t2);padding:0}
.fsoc a:hover{background:rgba(201,168,76,.06);border-color:var(--b2);color:var(--hc,var(--gold))}
.fsoc a svg{width:15px;height:15px;fill:currentColor}

/* MOBILE — V2 RESPONSIVE */
@media(max-width:1024px){
  .portals-g{grid-template-columns:1fr;max-width:480px}
}
@media(max-width:768px){
  .ai-float{right:12px;left:auto;transform:none;bottom:14px;min-width:0;padding:10px 14px}
  .ai-float:hover{transform:translateX(-50%) translateY(-2px)}
  .ai-drawer{right:8px;left:8px;width:auto;max-width:none;border-radius:14px 14px 0 0;height:80vh;bottom:0}
  .wa-float{bottom:80px;right:16px}
  .sticky-cta{bottom:140px;right:16px}
  .veh-sec,.portals-sec{padding:60px 0}
  .veh-tabs{gap:4px}
  .vtab{padding:8px 12px;font-size:9px}
  .pcard{padding:32px 22px}
  .lm-card{padding:32px 24px}
  .fsoc{padding:18px 6%;gap:8px}
  .fsoc a{width:34px;height:34px}
}

/* ── Collapsible sections (public/tssa-sections.js) ── mirrored from
   app/globals.css so both layers share one visual language. */
/* Tighter rows for the three collapsed sections. Rudy: reduce the sizing and
   space, keep the font size. So the padding comes down and the type does not
   move — three stacked bars at 18px of padding each was a lot of empty band
   between the hero and the content. */
.csec-bar{display:flex;align-items:center;gap:11px;width:100%;max-width:1440px;margin:0 auto;padding:7px 6%;cursor:pointer;background:none;border:none;border-bottom:1px solid var(--b1);font-family:inherit;text-align:left;color:var(--t1);transition:border-color .2s}
.csec-bar:hover{border-bottom-color:var(--b2)}
.csec-rule{width:3px;height:15px;border-radius:99px;flex-shrink:0;background:linear-gradient(180deg,var(--gold-l),var(--gold-d));box-shadow:0 0 10px rgba(201,168,76,.45);transition:height .25s cubic-bezier(.2,.8,.2,1)}
.csec.open .csec-rule{height:22px}
.csec-title{line-height:1.05;font-family:var(--serif);font-size:20px;font-weight:400}
/* Same idea: a collapsed section should be a bar, not a band. Only the
   CLOSED state is tightened — an open one keeps its breathing room. */
.csec:not(.open){padding-top:0;padding-bottom:0}
.csec:not(.open) .csec-bar{padding-top:9px;padding-bottom:9px}
.csec-chev{margin-left:auto;color:var(--t3);font-size:16px;line-height:1;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.csec.open .csec-chev{transform:rotate(180deg);color:var(--gold)}
.csec-wrap{overflow:hidden;transition:height .38s cubic-bezier(.2,.8,.2,1),opacity .26s ease;opacity:0}
.csec.open .csec-wrap{opacity:1}
@media(prefers-reduced-motion:reduce){.csec-wrap,.csec-chev,.csec-rule{transition:none}}

/* ── Radio & themes on the landing page ──────────────────────────────────
   The engine was always here (/tssa-player.js); only the controls were
   missing, because the React Live Slab never renders on a static page. */
.b5-more{margin-top:18px;padding-top:16px;border-top:1px solid var(--b1)}
.b5-tabs{display:flex;gap:6px;margin-bottom:12px}
.b5-tab{padding:5px 14px;border-radius:99px;cursor:pointer;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;background:none;
  border:1px solid var(--b1);color:var(--t3);transition:all .18s}
.b5-tab:hover{color:var(--t1);border-color:var(--b2)}
.b5-tab.on{color:var(--bg);background:var(--gold);border-color:var(--gold)}
.b5-pane{display:none}
.b5-pane.on,.b5-pane:not([hidden]){display:block}
.b5-grid{display:flex;flex-direction:column;gap:5px}
/* Collapsible city regions — one open at a time, so the panel stays about the
   height of a single city instead of stacking all three. */
.b5-city{display:flex;align-items:center;gap:8px;width:100%;
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  margin-top:6px;padding:6px 2px;background:none;border:none;border-bottom:1px solid var(--b1);
  cursor:pointer;font-family:inherit;text-align:left;transition:color .18s}
.b5-city:first-of-type{margin-top:0}
.b5-city:hover{color:var(--gold-l)}
.b5-city-n{flex:1}
.b5-city-c{font-size:9px;letter-spacing:0;color:var(--t4);
  border:1px solid var(--b1);border-radius:99px;padding:1px 6px}
.b5-city-x{font-size:11px;color:var(--t4);transition:transform .22s}
.b5-city.open .b5-city-x{transform:rotate(180deg);color:var(--gold)}
/* Height transition on a wrapper, so the rows slide rather than jump. */
.b5-city-w{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s ease;
  overflow:hidden}
.b5-city-w.open{grid-template-rows:1fr}
.b5-city-w > *{min-height:0}
.b5-city-w.open{padding-top:5px}
.b5-city-w .b5-st + .b5-st{margin-top:5px}
@media (prefers-reduced-motion:reduce){.b5-city-w{transition:none}}
.b5-st{display:flex;align-items:stretch;border-radius:9px;overflow:hidden;
  border:1px solid var(--b1);background:rgba(255,255,255,.02);transition:border-color .18s}
.b5-st:hover{border-color:var(--b2)}
.b5-st.on{border-color:var(--b3);background:rgba(201,168,76,.08)}
.b5-st-b{flex:1;display:flex;align-items:center;gap:9px;padding:7px 10px;background:none;
  border:none;cursor:pointer;text-align:left;color:inherit;font-family:inherit}
.b5-st-p{width:19px;height:19px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid var(--b2);font-size:7px;color:var(--gold-l)}
.b5-st.on .b5-st-p{border-color:var(--gold);box-shadow:0 0 8px rgba(201,168,76,.4)}
.b5-st-n{display:flex;flex-direction:column;gap:1px;min-width:0}
.b5-st-n b{font-size:12px;font-weight:500;color:var(--t1);line-height:1.2}
.b5-st-n em{font-style:normal;font-size:9.5px;color:var(--t4);line-height:1.2}
.b5-st-s{flex:none;display:flex;align-items:center;padding:0 10px;font-size:11px;
  color:var(--t4);text-decoration:none;border-left:1px solid var(--b1);transition:color .18s}
.b5-st-s:hover{color:var(--gold-l)}
.b5-th{display:flex;flex-direction:column;gap:2px;padding:8px 11px;border-radius:9px;
  cursor:pointer;text-align:left;background:rgba(255,255,255,.02);border:1px solid var(--b1);
  transition:all .18s;font-family:inherit}
.b5-th:hover{border-color:var(--b2);background:rgba(255,255,255,.04)}
.b5-th.on{border-color:var(--b3);background:rgba(201,168,76,.09)}
.b5-th b{font-size:12px;font-weight:500;color:var(--t1)}
.b5-th em{font-style:normal;font-size:9.5px;color:var(--t4)}
.b5-note{font-size:9.5px;color:var(--t4);line-height:1.6;margin-top:9px}
.b5-eqnote{font-size:9.5px;color:var(--t4);letter-spacing:.04em;margin:-8px 0 12px}

/* ── SOUND DOCK ──────────────────────────────────────────────────────────
   Fixed top-right, under the nav. z-index sits BELOW the nav (500) so the
   menu always wins, and above page content so the dock is never buried. */
.sd{position:fixed;top:var(--dock-top,111px);right:18px;z-index:470;width:min(340px,calc(100vw - 36px));
  display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.sd-bar{display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 12px;border-radius:99px;cursor:pointer;font-family:inherit;text-align:left;
  background:linear-gradient(180deg,rgba(28,24,16,.96),rgba(16,14,10,.96));
  border:1px solid var(--b2);backdrop-filter:blur(10px);
  box-shadow:var(--d3-lift),0 14px 34px -16px rgba(0,0,0,.9);
  transition:border-color .18s,box-shadow .18s,transform .14s}
.sd-bar:hover{border-color:var(--b3);transform:translateY(-1px);
  box-shadow:var(--d3-lift),0 16px 38px -16px rgba(0,0,0,.95),var(--d3-glow)}
.sd-play{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:9px;color:var(--gold-l);
  border:1px solid var(--b2);background:rgba(201,168,76,.1)}
.sd-play:hover{border-color:var(--gold);box-shadow:0 0 10px rgba(201,168,76,.45)}
.sd-txt{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.sd-txt b{font-size:11.5px;font-weight:500;color:var(--t1);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-txt em{font-style:normal;font-size:9px;letter-spacing:.06em;color:var(--t4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Four bars that move only while something is actually playing — a static
   equaliser next to silence is the same small lie as a flat one next to music. */
.sd-eq{flex:none;display:flex;align-items:flex-end;gap:2px;height:14px}
.sd-eq i{width:2px;height:3px;background:var(--gold-d);border-radius:1px;transition:height .2s}
.sd.playing .sd-eq i{animation:sd-bounce .9s ease-in-out infinite}
.sd.playing .sd-eq i:nth-child(2){animation-delay:.15s}
.sd.playing .sd-eq i:nth-child(3){animation-delay:.3s}
.sd.playing .sd-eq i:nth-child(4){animation-delay:.45s}
@keyframes sd-bounce{0%,100%{height:3px}50%{height:13px}}
.sd-x{flex:none;font-size:12px;color:var(--t4);transition:transform .22s}
.sd.open .sd-x{transform:rotate(180deg);color:var(--gold)}

.sd-panel{width:100%;max-height:min(70vh,560px);overflow-y:auto;
  border-radius:14px;animation:sd-drop .22s ease-out}
@keyframes sd-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* The player panel came out of the hero, where it was centred and capped at
   380px. In the dock it should simply fill the dock. */
.sd-panel .b5{margin:0;max-width:none;width:100%}

@media (prefers-reduced-motion:reduce){
  .sd-panel{animation:none}
  .sd.playing .sd-eq i{animation:none;height:7px}
}
/* On a phone the dock spans the width under the nav rather than floating in a
   corner it would half cover. */
@media (max-width:640px){
  .sd{top:auto;bottom:12px;right:12px;left:12px;width:auto}
  .sd-panel{max-height:60vh}
}

/* ── DISCOVER, as a page section ─────────────────────────────────────────
   The tiles kept .mega-inner so their existing card styling still applies;
   only the container behaviour changes. In the overlay it was a fixed panel;
   here it is a grid that breathes with the page. */
.disc-sec{padding:10px 6% 70px}
.disc-w{max-width:1440px;margin:0 auto}
.disc-lead{font-size:13px;color:var(--t3);letter-spacing:.04em;margin:0 0 22px;text-align:center}
.disc-grid{max-width:none!important;padding:0!important;margin:0!important;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important}
.disc-foot{margin-top:26px;display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--b1)}
.disc-foot span{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--t3)}
.disc-foot a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  text-decoration:none}
.disc-foot a:hover{color:var(--gold-l)}
@media (max-width:640px){ .disc-grid{grid-template-columns:1fr!important} }

/* ── FLIGHT GAME ─────────────────────────────────────────────────────────── */
.fly-sec{padding:70px 6% 80px}
.fly-card-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ARIA inside the section */
.fly-aria{margin-top:34px;padding:32px 30px;border:1px solid var(--b1);border-radius:18px;
          background:var(--s1);position:relative;overflow:hidden}
.fly-aria-h{max-width:62ch}
.fly-aria-k{display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
            color:var(--gold);margin-bottom:10px}
.fly-aria h3{font-family:var(--serif);font-size:clamp(21px,2.6vw,28px);margin:0 0 8px;color:var(--ink)}
.fly-aria h3 em{color:var(--gold);font-style:italic}
.fly-aria p{font-size:14px;line-height:1.75;color:var(--ink2);margin:0}
.fly-aria-chips{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 18px}
.fly-aria-chip{font:inherit;font-size:12.5px;letter-spacing:.02em;cursor:pointer;
               padding:9px 15px;min-height:40px;border-radius:999px;color:var(--ink);
               border:1px solid var(--b1);background:rgba(255,255,255,.03);
               transition:transform .18s ease,border-color .18s ease,background .18s ease}
.fly-aria-chip:hover{transform:translateY(-2px);border-color:var(--gold);
                     background:rgba(201,168,76,.12);color:var(--gold)}
.fly-aria-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.fly-aria-chip b{font-weight:600;letter-spacing:.06em}
.fly-aria-free{display:flex;gap:10px;flex-wrap:wrap}
.fly-aria-free input{flex:1 1 320px;min-width:0;min-height:44px;padding:11px 15px;
                     border-radius:11px;border:1px solid var(--b1);background:var(--bg2);
                     color:var(--ink);font:inherit;font-size:14px}
.fly-aria-free input::placeholder{color:var(--ink2);opacity:.75}
.fly-aria-free input:focus{outline:none;border-color:var(--gold)}
@media(prefers-reduced-motion:reduce){.fly-aria-chip{transition:none}
  .fly-aria-chip:hover{transform:none}}
@media(max-width:640px){.fly-aria{padding:26px 20px}}
.fly-w{max-width:1100px;margin:0 auto}
.fly-head{text-align:center;margin-bottom:26px}
.fly-lead{font-size:14px;font-weight:300;color:var(--t2);line-height:1.75;
  margin:14px auto 0;max-width:520px}
.fly-lead kbd{font-family:inherit;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 8px;border-radius:5px;background:var(--s2);border:1px solid var(--b2);color:var(--gold-l)}

.fly-stage{position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--b2);box-shadow:var(--d3-lift),0 26px 60px -30px rgba(0,0,0,.95)}
#flyCanvas{display:block;width:100%;height:min(58vh,460px);touch-action:manipulation;cursor:pointer}

.fly-hud{position:absolute;top:12px;left:14px;right:14px;z-index:2;
  display:flex;align-items:center;gap:12px;pointer-events:none}
.fly-leg{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-l);
  background:rgba(9,8,6,.6);border:1px solid rgba(201,168,76,.3);border-radius:99px;padding:4px 11px}
.fly-score{margin-left:auto;font-family:var(--serif);font-size:30px;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.9)}
.fly-best{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}

.fly-overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(6,7,11,.62);
  backdrop-filter:blur(3px);transition:opacity .25s ease,visibility .25s}
.fly-overlay.gone{opacity:0;visibility:hidden;pointer-events:none}
.fly-card{max-width:340px;text-align:center}
.fly-card-k{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.fly-card-t{font-family:var(--serif);font-size:clamp(24px,3.4vw,34px);color:#fff;margin:6px 0 10px}
.fly-card-p{font-size:12.5px;color:var(--t2);line-height:1.7;margin-bottom:18px}
.fly-card-n{font-size:9.5px;color:var(--t4);margin-top:12px}

/* ── OUTBOUND placeholder ── */
.fly-out{margin-top:34px;padding-top:28px;border-top:1px solid var(--b1)}
.fly-out-b{max-width:640px;margin:0 auto;text-align:center}
.fly-out-k{display:inline-block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(201,168,76,.34);border-radius:99px;padding:5px 14px}
.fly-out-b h3{font-family:var(--serif);font-size:clamp(22px,3vw,30px);font-weight:300;
  color:var(--t1);margin:14px 0 10px}
.fly-out-b h3 em{font-style:italic;color:var(--gold-l)}
.fly-out-b p{font-size:13px;font-weight:300;color:var(--t2);line-height:1.8;margin-bottom:20px}

@media (max-width:640px){
  #flyCanvas{height:min(50vh,340px)}
  .fly-sec{padding:50px 5% 60px}
}



/* Airport transfers grid — the public-facing half of the transfers section.
   Same visual language as the corporate service cards beneath it. */
.apt-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:22px}
.apt{padding:16px 18px;border:1px solid var(--b1);border-radius:12px;background:var(--surf);
     transition:border-color .2s ease,transform .2s ease}
.apt:hover{border-color:var(--gold);transform:translateY(-2px)}
.apt-t{font-size:14px;font-weight:600;color:var(--gold);margin-bottom:5px}
.apt-d{font-size:12.5px;color:var(--t3);line-height:1.6}
@media(prefers-reduced-motion:reduce){.apt{transition:none}.apt:hover{transform:none}}


/* Built-by credit. Deliberately quiet — it sits under the legal line and is
   the last thing on the page, not a second brand competing with TSSA's. */
/* NAVY, to match the Rusty Nuts Garage build. The max-width cap came off so
   it reads as a band across the foot of the page rather than a boxed-in
   panel; the 6% gutter is the same one .sl and the rest of the footer use, so
   the credit still lines up with everything above it. */
.wbb{padding:18px 6% 20px;display:flex;flex-wrap:wrap;
     align-items:center;gap:12px 20px;background:#0B1B36;
     border-top:1px solid rgba(255,255,255,.09)}
/* Livery picker on the game's standby card. Quiet by default — it is a
   garnish, not a second call to action next to "Take off". */
.fly-liv{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:14px}
.fly-liv-b{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
           font-family:inherit;font-size:9.5px;letter-spacing:.12em;
           text-transform:uppercase;color:var(--t3);
           padding:5px 10px;border-radius:99px;
           background:rgba(255,255,255,.03);
           border:1px solid rgba(255,255,255,.10);
           transition:border-color .18s ease,color .18s ease,background .18s ease}
.fly-liv-sw{width:9px;height:9px;border-radius:50%;background:var(--lv);
            box-shadow:0 0 0 1px rgba(0,0,0,.45) inset}
.fly-liv-b:hover{color:var(--t1);border-color:rgba(255,255,255,.24)}
.fly-liv-b.on{color:var(--t1);border-color:var(--lv);background:rgba(255,255,255,.06)}
.fly-liv-b:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.wbb-in{display:flex;align-items:center;gap:11px;text-decoration:none}
.wbb-mark{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;font-weight:700;
          letter-spacing:-.5px;color:#F5F1E8;line-height:1}
.wbb-mark b{color:#22D3EE;font-weight:700}
.wbb-mark i{color:#F472B6;font-style:normal;font-weight:700}
.wbb-txt{display:flex;flex-direction:column;gap:2px}
.wbb-n{font-size:11.5px;color:#DDE6F2;letter-spacing:.04em}
.wbb-t{font-size:10px;color:#8FA6C4;letter-spacing:.1em;text-transform:uppercase}
.wbb-in:hover .wbb-n{color:var(--gold)}
.wbb-c{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:10.5px;color:#8FA6C4}
.wbb-c a{color:#8FA6C4;text-decoration:none}
.wbb-c a:hover{color:var(--gold)}
@media(max-width:640px){.wbb-c{margin-left:0}}


/* ── PRIVATE ENTERTAINMENT ─────────────────────────────────
   Section-scoped only. The buttons and tiles come from tssa-theme.css
   (.d3, .landmark-tile), which is why nothing here redeclares them. */
.pe-sec .pe-lead{font-size:14px;font-weight:300;color:var(--t2);max-width:560px;
                 line-height:1.82;margin:16px auto 0}
.pe-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:20px;
         max-width:1140px;margin:34px auto 0}
.pe-card{padding:26px 26px 24px;min-height:360px;display:flex;flex-direction:column;
         justify-content:flex-end;border:1px solid var(--b2);text-align:left}
.pe-card::after{background:linear-gradient(157deg,rgba(9,8,6,.34),rgba(9,8,6,.82) 62%,rgba(9,8,6,.94))!important}
.pe-kicker{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
           color:var(--gold-l);margin-bottom:8px}
.pe-t{font-family:var(--serif);font-size:clamp(26px,3.2vw,36px);line-height:1;color:var(--t1);
      margin:0 0 10px;text-shadow:var(--glow-g-soft)}
.pe-dj .pe-t{color:var(--gold-l)}
.pe-d{font-size:14px;font-weight:300;color:var(--t1);line-height:1.8;margin:0 0 14px;
      max-width:44ch;opacity:.92}
.pe-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.pe-list li{font-size:11.5px;font-weight:500;color:var(--t2);background:rgba(9,8,6,.5);
            border:1px solid var(--b1);padding:5px 11px;border-radius:99px}
.pe-actions{display:flex;gap:10px;flex-wrap:wrap}
.pe-how{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;
        max-width:1140px;margin:26px auto 0}
.pe-step{display:flex;align-items:center;gap:12px;font-size:13.5px;font-weight:300;color:var(--t2);
         line-height:1.5;background:var(--grad-panel);border:1px solid var(--b1);
         border-radius:var(--radius-lg);padding:16px 18px;text-align:left}
.pe-n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
      font-family:var(--serif);font-size:17px;color:var(--bg);background:var(--grad-gold);
      box-shadow:var(--glow-g-soft)}
.pe-cta{text-align:center;margin-top:26px}
.pe-note{font-size:12px;color:var(--t3);margin-top:12px}


/* ── HERO FILM ───────────────────────────────────────────
   Sits under the slideshow (z-index 0 against the slides' own stacking) and
   under the overlay, so existing hero copy contrast is unchanged.

   The iframe is scaled well past the viewport on purpose: a 16:9 film in a
   100vh hero would letterbox, and cover-cropping is the only way to fill it. */
.hero-film{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:0;
           transition:opacity 1.6s ease}
.hero-film.in{opacity:1}
.hero-film iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
                  width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;border:0;
                  pointer-events:none}
.hero-film-cr{position:absolute;right:14px;bottom:14px;z-index:3;font-size:10px;
              letter-spacing:.1em;text-transform:uppercase;color:rgba(242,237,227,.5);
              text-decoration:none;background:rgba(9,8,6,.42);padding:5px 10px;border-radius:99px;
              backdrop-filter:blur(4px);transition:color .2s}
.hero-film-cr:hover{color:var(--gold-l)}
@media(prefers-reduced-motion:reduce){.hero-film{display:none}}


/* nav depth pass — the right-hand buttons pick up the same press as the
   links and the section tab bar, so the whole top of the page behaves like
   one set of controls rather than three unrelated ones. */
.nav-r .wow,.nav-r .wa-btn{transition:transform .18s cubic-bezier(.2,.8,.2,1),
                           box-shadow .18s ease,border-color .18s ease}
.nav-r .wow:hover,.nav-r .wa-btn:hover{transform:translateY(-2px)}
.nav-r .wow:active,.nav-r .wa-btn:active{transform:translateY(1px);
                    box-shadow:0 2px 6px -3px rgba(0,0,0,.9) inset}
.nav-r .wow:focus-visible,.nav-r .wa-btn:focus-visible{outline:2px solid var(--gold);
                    outline-offset:3px}

/* The sticky tab bar sits under a nav that is now 76px, not 68px. */
.htabs{top:var(--nav-h)}

@media(prefers-reduced-motion:reduce){
  .nav-links a,.nav-r .wow,.nav-r .wa-btn{transition:none}
  .nav-links a:hover,.nav-r .wow:hover,.nav-r .wa-btn:hover{transform:none}
}


/* The nav's WhatsApp button is redundant: `.wa-float` is a permanent floating
   bubble on every page, more prominent and always in reach. The nav copy cost
   93px in the tightest row on the site — enough on its own to push the last
   link under the buttons on a 1400px screen. One control, one place. */
.nav-r .wa-btn{display:none}


/* ══ ONE SET OF BUTTONS, TOP AND BOTTOM ═══════════════════════════════
   Rudy: "These buttons should all match the lower bar (the 3D gold buttons
   with black text looks super awesome - maybe just a text sparkle)".

   The nav pills and the section tab bar under the hero were built at
   different times and never quite agreed. The tab bar sits at full opacity
   with a 28% gold border and a 14% inset highlight; the nav pills were at
   55% opacity with a 16% border and a 10% highlight — so the top row read
   as a dimmer, flatter echo of the bottom one rather than the same control
   in a different place. Same construction now.

   The ONE deliberate difference left is size. The tab bar has five buttons
   and the full page width; the nav has eight pills, a wordmark and two
   actions on a single line, and it only stopped overlapping by trimming
   them. Matching 12px/22px here would put the last link back under the
   buttons, which is the bug this row was just rescued from. */
.nav-links a{font-weight:600;
             background:linear-gradient(180deg,#1b1811,#100e0a);
             border:1px solid rgba(201,168,76,.28);
             box-shadow:0 1px 0 rgba(232,208,138,.14) inset,0 6px 14px -8px rgba(0,0,0,.9)}
.nav-links a:hover{border-color:var(--gold);
             box-shadow:0 1px 0 rgba(232,208,138,.22) inset,
                        0 12px 22px -10px rgba(0,0,0,.95),
                        0 0 18px -4px rgba(201,168,76,.35)}

/* THE GOLD PAIR — this is `.htab.on`, the treatment Rudy singled out. Black
   on gold is the highest-contrast pairing on the page, so these two now read
   as the ACTIONS rather than as two more links in a row of eight. Applied in
   the mobile menu too, so the two surfaces cannot disagree. */
.nav-r .wow,.mm-wows .wow{color:#120f09;
             background:linear-gradient(180deg,var(--gold-l),var(--gold-d));
             border:1px solid var(--gold-l);
             box-shadow:0 1px 0 rgba(255,255,255,.35) inset,
                        0 10px 22px -10px rgba(201,168,76,.7);
             overflow:hidden;
             /* retires the conic-gradient border spin on Signature: a moving
                rainbow edge fights a solid gold face */
             animation:none}
.nav-r .wow:hover,.mm-wows .wow:hover{
             background:linear-gradient(180deg,#F0DFA8,var(--gold));
             box-shadow:0 1px 0 rgba(255,255,255,.45) inset,
                        0 14px 26px -10px rgba(201,168,76,.85)}
.nav-r .wow-exp .wow-i,.mm-wows .wow-exp .wow-i{color:#4a3a08}
/* ARIA keeps her mark. The button matches the row; the glyph stays hers —
   deep violet, because her lilac would disappear against gold. */
.nav-r .wow-aria .wow-i,.mm-wows .wow-aria .wow-i{color:#3b2a7a}
.nav-r .wow-aria::before,.mm-wows .wow-aria::before{border-color:rgba(201,168,76,.55)}

/* THE SPARKLE. A narrow light sweeps the face every few seconds, the way it
   does off anything actually metallic, catching the lettering on the way
   past. The two buttons are offset so they glint in turn rather than in
   unison, which is the difference between jewellery and a warning light.
   pointer-events:none so it can never eat a click. */
.nav-r .wow::after,.mm-wows .wow::after{
             content:'';position:absolute;inset:0;border-radius:inherit;
             pointer-events:none;
             background:linear-gradient(105deg,transparent 42%,
                        rgba(255,255,255,.72) 50%,transparent 58%);
             transform:translateX(-130%);
             animation:navSparkle 6s ease-in-out infinite}
.nav-r .wow-aria::after,.mm-wows .wow-aria::after{animation-delay:1.6s}
@keyframes navSparkle{0%,68%{transform:translateX(-130%)}
                      100%{transform:translateX(130%)}}

@media(prefers-reduced-motion:reduce){
  .nav-r .wow::after,.mm-wows .wow::after{animation:none;opacity:0}
}

/* ── THE APP-ROUTER PORT'S ONE STRUCTURAL CONCESSION (8 Sep 2026) ──────
   tssa-theme.css carries `body > *{ position:relative; z-index:1 }`, which
   lifts every top-level element above the flake layer painted on body::before
   and gives each one a positioning context its absolutely-positioned children
   rely on.

   As a React route the page is rendered inside a wrapper div, so the page's
   own top-level elements are `body > div > *` and stopped matching. Only the
   wrapper got lifted; everything inside fell back to position:static and the
   stacking came apart — the mobile menu laid itself out over the wordmark and
   the collapsible sections lost their heights.

   This restores it for the wrapped copy. It is scoped to .tssa-home-root, so
   the static /index-public.html — which has no such wrapper — is untouched
   and the two layers still render identically. Verified side by side on the
   same server.

   SPECIFICITY IS THE WHOLE TRICK HERE. The first version of this rule was
   written as a plain class selector, which outranks .mobile-menu, .ai-drawer
   and every other overlay that sets position:fixed for itself — so all of
   them became position:relative, left their fixed layer and took up flow.
   The nav ended up 2,526px down a page of empty space.

   :where() contributes ZERO specificity, so this now weighs the same as the
   universal selector it wraps and loses to any class rule — exactly like the
   body > * it stands in for. It only ever reaches elements that have not
   asked for a position of their own. */
:where(.tssa-home-root) > *{ position:relative; z-index:1 }