:root {
  color-scheme: light dark;
  --site-primary:#48bff0;
  --site-secondary:#17232d;
  --site-background:#080b0e;
  --site-on-primary:#061018;
  --site-on-secondary:#f4f8fa;
  --site-on-background:#f5f7f8;
  --site-font-body:Arial, Helvetica, sans-serif;
  --site-font-heading:Impact, "Arial Narrow", sans-serif;
  --site-heading-scale:1;
  --site-spacing-scale:1;
  --site-radius-scale:1;
  --site-decoration-opacity:1;
  --hero-image:url("/img/hero-background.jpg");
  --ink:#f5f7f8;
  --muted:#aab4bc;
  --line:rgba(255,255,255,.14);
  --panel:#111820;
  --blue:var(--site-primary);
  --orange:#ff7b38;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--site-background);color:var(--site-on-background);font-family:var(--site-font-body);overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer}
#app{min-height:100vh;width:100%;border-radius:0;background-color:light-dark(var(--site-background),var(--site-background));color:var(--site-on-background);overflow:hidden}
a{color:inherit;text-decoration:none}
.site-header{position:absolute;z-index:20;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:24px clamp(20px,5vw,76px);border-bottom:1px solid rgba(255,255,255,.15);background:linear-gradient(180deg,rgba(0,0,0,.42),transparent)}
.brand-mini{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:900;letter-spacing:.22em}
.brand-mini img{width:38px;height:38px;object-fit:contain}
.nav{display:flex;gap:30px;align-items:center;text-transform:uppercase;font-size:11px;letter-spacing:.18em;font-weight:800}
.nav a{opacity:.85;transition:color .2s}
.nav a:hover{color:var(--blue)}
.header-right{display:flex;gap:12px;align-items:center}
.lang-switch{display:flex;gap:4px;border:1px solid rgba(255,255,255,.3);padding:4px;border-radius:99px;background:rgba(0,0,0,.28)}
.lang-switch button{border:0;background:transparent;color:white;font-size:10px;font-weight:800;padding:7px 9px;border-radius:30px}
.lang-switch button.active{background:var(--blue);color:#061018}
.menu-toggle{display:none;background:transparent;border:1px solid var(--line);color:white;border-radius:50%;width:42px;height:42px}
.hero{position:relative;min-height:min(790px,100svh);display:flex;align-items:flex-end;background:#080b0e;isolation:isolate}
.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(0,0,0,.14),rgba(0,0,0,.08) 48%,rgba(0,0,0,.1)),linear-gradient(0deg,rgba(3,7,10,.92),transparent 52%),var(--hero-image);background-size:cover;background-position:center;z-index:-2;transform:scale(1.015);animation:heroReveal 1.4s ease both}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 65%);z-index:-1;pointer-events:none}
.hero-content{width:min(1240px,100%);margin:0 auto;padding:150px 32px 74px;display:grid;grid-template-columns:minmax(300px,530px) 1fr;align-items:end;gap:30px}
.hero-logo{width:min(100%,520px);height:auto;filter:drop-shadow(0 14px 28px rgba(0,0,0,.35));animation:rise .9s .15s both}
.hero-copy{max-width:430px;margin-left:auto;padding-bottom:15px;animation:rise 1s .35s both}
.eyebrow{font-size:10px;font-weight:900;letter-spacing:.32em;text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:12px}
.eyebrow:before{content:"";height:1px;width:30px;background:currentColor}
h1,h2,h3,p{margin-top:0}
.hero h1{font-family:var(--site-font-heading);font-size:clamp(36px,5vw,66px);line-height:.92;text-transform:uppercase;letter-spacing:-.025em;margin:18px 0}
.hero h1 span{color:var(--blue)}
.hero-copy p{color:#e0e6e9;line-height:1.7;font-size:14px;max-width:390px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;padding:14px 20px;font-size:10px;font-weight:900;letter-spacing:.17em;text-transform:uppercase;transition:transform .2s,background .2s,border .2s}
.btn:hover{transform:translateY(-3px)}
.btn-primary{background:var(--blue);color:#061018}
.btn-ghost{border-color:rgba(255,255,255,.45);color:white;background:rgba(0,0,0,.2)}
.scroll-cue{position:absolute;right:clamp(20px,5vw,76px);bottom:28px;writing-mode:vertical-rl;font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.scroll-cue:after{content:"";display:inline-block;width:1px;height:42px;background:var(--blue);margin-top:12px}
.ticker{background:var(--blue);color:#071018;overflow:hidden;white-space:nowrap;padding:13px 0;font-size:11px;font-weight:900;letter-spacing:.22em;text-transform:uppercase}
.ticker-track{display:inline-block;animation:marquee 26s linear infinite}
.ticker span{padding:0 28px}
.section{padding:calc(110px * var(--site-spacing-scale)) clamp(22px,7vw,110px);max-width:1500px;margin:auto}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:42px}
.section-head h2{font-family:var(--site-font-heading);font-size:calc(clamp(42px,6vw,76px) * var(--site-heading-scale));line-height:.9;text-transform:uppercase;letter-spacing:-.025em;margin:13px 0 0}
.section-head h2 span{color:var(--blue)}
.section-intro{max-width:360px;color:var(--muted);font-size:13px;line-height:1.75;margin-bottom:3px}
.trips{background:var(--site-secondary);color:var(--site-on-secondary)}
.trip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(18px * var(--site-spacing-scale))}
.trip-card{position:relative;min-height:420px;background:#18232c;overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.12);border-radius:calc(2px * var(--site-radius-scale))}
.trip-card:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.94),rgba(0,0,0,.06) 70%),var(--trip-image);background-size:cover;background-position:center, var(--trip-position, center);z-index:-1;transition:transform .7s}
.trip-card:hover:before{transform:scale(1.06)}
.trip-tag{position:absolute;top:18px;left:18px;padding:8px 10px;background:var(--blue);color:#071018;font-size:9px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.trip-info{position:absolute;left:24px;right:24px;bottom:24px}
.trip-meta{display:flex;gap:14px;flex-wrap:wrap;color:#d6dfe4;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.trip-info h3{font-family:var(--site-font-heading);font-size:34px;line-height:.95;text-transform:uppercase;margin:12px 0 8px}
.trip-info p{font-size:12px;color:#d1d9de;line-height:1.5;margin-bottom:16px}
.trip-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.28);padding-top:15px}
.trip-price{font-weight:900;font-size:16px}
.trip-price small{display:block;color:#b7c1c7;font-size:9px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;margin-top:3px}
.text-btn{border:0;background:none;color:var(--blue);font-size:10px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;padding:8px 0}
.text-btn:hover{color:white}
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(35px,7vw,110px);align-items:center}
.story-art{min-height:480px;position:relative;overflow:hidden;background:linear-gradient(135deg,#263d4c,#10171e)}
.story-art:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent),var(--hero-image);background-size:auto 100%;background-position:left center;opacity:.9;filter:saturate(.8)}
.story-art:after{content:"TWO ELEMENTS";position:absolute;bottom:24px;left:25px;font-family:var(--site-font-heading);font-size:clamp(38px,5vw,68px);line-height:.85;color:white;letter-spacing:-.03em}
.story-copy h2{font-family:var(--site-font-heading);font-size:calc(clamp(42px,5.5vw,70px) * var(--site-heading-scale));line-height:.9;text-transform:uppercase;margin:15px 0 24px}
.story-copy h2 span{color:var(--blue)}
.story-copy p{font-size:14px;color:var(--muted);line-height:1.9;max-width:500px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:35px;padding-top:25px;border-top:1px solid var(--line)}
.stat strong{font-family:var(--site-font-heading);font-size:34px;display:block;color:var(--blue)}
.stat span{font-size:9px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.recommender{background:var(--site-secondary)}
.reco-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:55px;align-items:start}
.reco-copy h2{font-family:var(--site-font-heading);font-size:calc(clamp(42px,5vw,68px) * var(--site-heading-scale));line-height:.9;text-transform:uppercase;margin:15px 0 20px}
.reco-copy h2 span{color:var(--blue)}
.reco-copy p{color:var(--muted);font-size:13px;line-height:1.8;max-width:420px}
.sport-tabs{display:flex;gap:8px;margin:28px 0}
.sport-tabs button{padding:12px 18px;border:1px solid var(--line);background:transparent;color:#fff;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.sport-tabs button.active{background:var(--blue);color:#071018;border-color:var(--blue)}
.reco-panel{background:#0a0f14;border:1px solid rgba(255,255,255,.13);padding:clamp(22px,4vw,40px);border-radius:calc(3px * var(--site-radius-scale))}
.reco-panel h3{font-family:var(--site-font-heading);font-size:29px;text-transform:uppercase;margin:0 0 7px}
.reco-panel>p{color:var(--muted);font-size:11px;margin-bottom:28px}
.range-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin:23px 0}
.range-row label{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.range-row output{color:var(--blue);font-weight:900;font-size:13px}
.range-row input{grid-column:1/3;width:100%;accent-color:var(--blue)}
.range-limits{grid-column:1/3;display:flex;justify-content:space-between;color:#75828b;font-size:9px;margin-top:-9px}
.reco-result{margin-top:30px;padding:22px;background:linear-gradient(120deg,rgba(72,191,240,.15),rgba(72,191,240,.03));border-left:3px solid var(--blue)}
.result-label{font-size:9px;color:var(--blue);font-weight:900;letter-spacing:.2em;text-transform:uppercase}
.result-value{font-family:var(--site-font-heading);font-size:clamp(32px,4vw,48px);margin:8px 0;text-transform:uppercase}
.result-note{font-size:12px;line-height:1.65;color:#c4cdd2}
.disclaimer{font-size:10px!important;color:#7f8c94!important;margin:14px 0 0!important}
.footer{padding:55px clamp(22px,7vw,110px) 28px;background:#06090c;border-top:1px solid var(--line)}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-bottom:45px}
.footer-logo{width:min(260px,45vw);height:auto}
.footer-line{font-family:var(--site-font-heading);font-size:clamp(25px,4vw,48px);text-transform:uppercase;text-align:right;line-height:.95}
.footer-line span{color:var(--blue)}
.footer-bottom{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:20px;color:#78848c;font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.modal{position:fixed;z-index:100;inset:0;background:rgba(0,0,0,.78);display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(8px)}
.modal.open{display:flex;animation:fade .2s}
.modal-card{position:relative;width:min(680px,100%);max-height:90vh;overflow:auto;background:#111a22;border:1px solid rgba(255,255,255,.18);padding:clamp(25px,5vw,48px)}
.modal-close{position:absolute;right:18px;top:18px;width:38px;height:38px;border:1px solid var(--line);background:transparent;color:white;font-size:20px}
.modal-card h2{font-family:var(--site-font-heading);font-size:clamp(38px,6vw,60px);line-height:.9;text-transform:uppercase;margin:18px 40px 15px 0}
.modal-card p{font-size:13px;color:#b9c4ca;line-height:1.8}
.modal-meta{display:flex;gap:20px;flex-wrap:wrap;color:var(--blue);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin:20px 0}
.modal-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes heroReveal{from{transform:scale(1.08);filter:brightness(.65)}to{transform:scale(1.015);filter:brightness(1)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media(max-width:900px){
 .nav{gap:15px}.hero-content{grid-template-columns:1fr;gap:0;padding-top:145px}.hero-logo{width:min(70vw,430px)}.hero-copy{margin:22px 0 0;max-width:470px}.hero{min-height:850px}
 .trip-grid{grid-template-columns:repeat(2,1fr)}.trip-card:last-child{grid-column:1/-1;min-height:340px}
 .reco-layout{grid-template-columns:1fr;gap:30px}
}
@media(max-width:640px){
 .site-header{padding:15px 18px}.nav{display:none;position:absolute;top:72px;left:15px;right:15px;background:#0c1319;padding:22px;flex-direction:column;align-items:flex-start;border:1px solid var(--line)}
 .nav.open{display:flex}.menu-toggle{display:block}.brand-mini span{display:none}.hero{min-height:810px}.hero:before{background-position:54% center}
 .hero-content{padding:125px 22px 75px}.hero-logo{width:min(94%,390px)}.hero-copy{margin-top:8px}.hero h1{font-size:49px}
 .section{padding:78px 22px}.section-head{display:block}.section-intro{margin-top:20px}
 .trip-grid{grid-template-columns:1fr}.trip-card,.trip-card:last-child{grid-column:auto;min-height:390px}
 .story{grid-template-columns:1fr}.story-art{min-height:350px;order:2}.story-copy{order:1}
 .stats{gap:8px}.stat strong{font-size:28px}.footer-top{align-items:flex-start;flex-direction:column}.footer-line{text-align:left}.footer-bottom{flex-direction:column}
 .scroll-cue{display:none}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Softer edges: subtle rounding that keeps the rugged Mission Zero look. */
button{border-radius:calc(8px * var(--site-radius-scale))}
.btn{border-radius:calc(8px * var(--site-radius-scale))}
.trip-card{border-radius:calc(12px * var(--site-radius-scale))}
.modal-card{border-radius:calc(14px * var(--site-radius-scale))}
.modal-close{border-radius:calc(8px * var(--site-radius-scale))}
.reco-panel{border-radius:calc(12px * var(--site-radius-scale))}
.sport-tabs button{border-radius:calc(8px * var(--site-radius-scale))}


/* Mission Zero cinematic hero + subtle pointer/scroll parallax */
:root { --hero-image: url("/img/mission-zero-hero.jpg"); }
.hero { min-height: min(860px, 100svh); overflow: hidden; }
.hero:before {
  inset: -5%;
  background-image: linear-gradient(0deg, rgba(3,7,10,.12), rgba(3,7,10,.02)), var(--hero-image);
  background-size: cover;
  background-position: center 48%;
  transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0) scale(1.12);
  animation: none;
  will-change: transform;
  transition: transform 180ms cubic-bezier(.2,.7,.2,1);
}
.hero:after { background: linear-gradient(180deg, rgba(3,7,10,.12), transparent 24%, transparent 72%, rgba(3,7,10,.22)); }
.hero-content--parallax-hidden { display: none !important; }
@media (max-width: 700px) {
  .hero { min-height: 760px; }
  .hero:before { background-position: 50% center; transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .hero:before { transform: none !important; transition: none !important; }
}

/* Video hero: replaces the still/parallax background */
.hero { overflow:hidden; background:#080b0e; }
.hero:before { display:none !important; }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:-2; pointer-events:none; }
.hero:after { z-index:-1; background:linear-gradient(0deg,rgba(3,7,10,.85),rgba(3,7,10,.20) 55%,rgba(3,7,10,.28)); }
@media (max-width:680px) { .hero-video { object-position:center; } }

/* Video overlay and centered Mission Zero hero identity */
.hero-video { z-index:0; }
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background: linear-gradient(
    181deg,
    rgb(3 9 15) 0%,
    rgba(3, 9, 15, 0.30) 48%,
    rgb(3 9 15 / 97%) 100%
  );
}
.hero::after { display:none; }
.hero { display:flex; align-items:center; justify-content:center; }
.hero-content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; width:100%; padding:130px 24px 100px; gap:24px; }
.hero-logo { display:block; width:clamp(260px,45vw,620px); max-width:90%; margin:0 auto; }
.hero-copy { margin:0 auto; padding:0; max-width:580px; }
.hero-copy p { margin-left:auto; margin-right:auto; }
.hero-copy .cta-row { justify-content:center; }
.scroll-cue { z-index:2; }
@media(max-width:640px) { .hero-content { padding:120px 20px 80px; gap:18px; } .hero-logo { width:min(85vw,430px); } .hero-copy { margin:0 auto; } }