/* ============================================================
   Wild Latitude — home page
   Brand: Montserrat + Open Sans, navy #16304A, waypoint orange
   #C3541D, sand #F4F1DE. Signature element: topographic lines.
   ============================================================ */

:root{
  --navy:#16304A;
  --navy-deep:#0E2136;
  --ember:#C3541D;
  --ember-lt:#E0763A;          /* lifted orange for dark + photographic contexts */
  --sand:#F4F1DE;
  --paper:#fff;
  --muted:#5A6B7C;
  --muted-rev:rgba(244,241,222,.78);
  --hair:rgba(22,48,74,.14);
  --hair-rev:rgba(244,241,222,.22);
  --maxw:1240px;
  --head:'Montserrat',system-ui,sans-serif;
  --body:'Open Sans',system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--navy);background:var(--paper);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%}
.section{padding:clamp(48px,6.2vw,82px) 0}

h1,h2,h3,h4{font-family:var(--head);text-transform:uppercase;line-height:1.06;letter-spacing:-.01em;font-weight:800}
h2{font-size:clamp(28px,4.4vw,52px)}
h3{font-size:clamp(21px,2.5vw,30px);letter-spacing:0}
.lead{font-size:clamp(17px,1.5vw,19.5px);color:var(--muted);max-width:64ch}

/* eyebrow — the waypoint dot sitting on a latitude line */
.eyebrow{
  font-family:var(--head);font-weight:700;text-transform:uppercase;
  letter-spacing:.22em;font-size:12px;color:var(--ember);
  display:inline-flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.55}
.eyebrow::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ember);flex:none}
.eyebrow.rev{color:var(--ember-lt)}
.eyebrow.rev::after{background:var(--ember-lt)}
.eyebrow.center{justify-content:center}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  font-size:13.5px;padding:15px 30px;border:2px solid transparent;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--ember);color:#fff;border-color:var(--ember)}
.btn-primary:hover{background:transparent;color:var(--ember)}
.btn-primary.on-dark:hover{color:var(--ember-lt);border-color:var(--ember-lt)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-line{background:transparent;color:var(--navy);border-color:var(--navy);padding:13px 26px}
.btn-line:hover{background:var(--navy);color:var(--sand)}

/* ============ NINE10 PROOF GATE ============ */
html.gate-lock,body.gate-lock{overflow:hidden}
/* keyboard focus: a clear ring everywhere, components can restyle it */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,select:focus-visible{outline:3px solid var(--ember);outline-offset:3px}

#proofgate{
  position:fixed;inset:0;z-index:1200;background:var(--navy-deep);
  display:flex;align-items:center;justify-content:center;padding:24px;
  transition:opacity .5s ease,visibility .5s ease;
}
#proofgate::before{content:"";position:absolute;inset:0;background:url('img/topo-blue.jpg') center/cover;opacity:.15;mix-blend-mode:screen}
#proofgate.done{opacity:0;visibility:hidden;pointer-events:none}
#proofgate .card{
  position:relative;z-index:1;width:min(440px,100%);background:var(--paper);
  padding:clamp(30px,5vw,44px);text-align:center;
  border-top:4px solid var(--ember);box-shadow:0 40px 90px -40px rgba(0,0,0,.8);
}
#proofgate .gate-logo{width:min(230px,72%);height:auto;margin:0 auto 22px}
#proofgate .kicker{
  display:block;font-family:var(--head);font-weight:700;text-transform:uppercase;
  letter-spacing:.24em;font-size:10.5px;color:var(--ember);margin-bottom:10px;
}
#proofgate h2{font-size:23px;margin-bottom:12px}
#proofgate .sub{font-size:14.5px;color:var(--muted);margin-bottom:24px;line-height:1.6}
#proofgate .field{margin-bottom:15px;text-align:left}
#proofgate .field label{
  display:block;font-family:var(--head);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:10px;color:var(--muted);margin-bottom:6px;
}
#proofgate .field input{
  width:100%;background:transparent;border:none;border-bottom:1.5px solid var(--hair);
  color:var(--navy);font-family:var(--body);font-size:16px;padding:9px 2px;outline:none;
  transition:border-color .2s ease;
}
#proofgate .field input:focus{border-bottom-color:var(--ember)}
#proofgate .err{display:none;font-size:13.5px;color:var(--ember);margin:4px 0 12px}
#proofgate button{width:100%;margin-top:8px}
#proofgate .foot{margin-top:22px;font-size:11.5px;color:var(--muted);letter-spacing:.04em}
@keyframes gateShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
#proofgate.shake .card{animation:gateShake .42s ease}
@media (prefers-reduced-motion:reduce){#proofgate.shake .card{animation:none}}

/* ============ PRELOADER / SPLASH ============ */
#preloader{
  position:fixed;inset:0;z-index:1000;background:var(--navy-deep);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:opacity 1.1s cubic-bezier(.4,0,.2,1),visibility 1.1s;will-change:opacity;
}
#preloader video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:opacity .75s ease}
#preloader::after{
  content:"";position:absolute;inset:0;z-index:1;transition:opacity .75s ease;
  background:linear-gradient(180deg,rgba(14,33,54,.68),rgba(14,33,54,.42) 45%,rgba(14,33,54,.85));
}
#preloader .splash{position:relative;z-index:2;text-align:center;padding:0 24px;transition:opacity .55s ease,transform .55s ease}
#preloader .splash img{
  width:min(74vw,520px);height:auto;margin:0 auto;opacity:0;transform:scale(.93);
  animation:splashLogo 1s .3s cubic-bezier(.2,.7,.3,1) forwards;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.55));
}
#preloader .splash .tag{
  margin-top:20px;font-family:var(--head);font-weight:600;text-transform:uppercase;
  letter-spacing:.42em;font-size:clamp(10px,1.5vw,13px);color:var(--sand);
  opacity:0;animation:splashTag .8s 1.05s ease-out forwards;
}
@keyframes splashLogo{to{opacity:1;transform:scale(1)}}
@keyframes splashTag{to{opacity:.92}}
#preloader.fading video,#preloader.fading::after{opacity:0}
#preloader.fading .splash{opacity:0;transform:translateY(-12px) scale(.97)}
#preloader.done{opacity:0;visibility:hidden;pointer-events:none}
html.splash-lock,body.splash-lock{overflow:hidden}
#preloader{touch-action:none;overscroll-behavior:contain}

/* ============ HEADER ============ */
header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  transition:background .3s ease,box-shadow .3s ease,backdrop-filter .3s ease;
}
header::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:1;transition:opacity .3s ease;
  background:linear-gradient(180deg,rgba(14,33,54,.62),rgba(14,33,54,0));
}
header.scrolled{background:var(--navy);box-shadow:0 10px 34px -16px rgba(0,0,0,.65)}
header.scrolled::after{opacity:0}
.bar{max-width:var(--maxw);margin:0 auto;padding:18px 24px;display:flex;align-items:center;gap:26px;transition:padding .3s ease}
header.scrolled .bar{padding:10px 24px}
.brand img{height:72px;width:auto;transition:height .3s ease}
header.scrolled .brand img{height:44px}

nav.main{margin-left:auto;display:flex;align-items:center;gap:4px}
nav.main .lnk{
  font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  font-size:13px;color:#fff;padding:9px 13px;position:relative;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;transition:color .18s ease;
}
nav.main .lnk::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;
  background:var(--ember-lt);transform:scaleX(0);transform-origin:left;transition:transform .22s ease;
}
nav.main .lnk:hover{color:var(--ember-lt)}
nav.main .lnk:hover::after{transform:scaleX(1)}

/* current page and current section — a quiet sand rule, deliberately NOT the
   orange used for hover, so "you are here" can never be misread as "you are
   hovering". Hover still takes over and turns it orange. */
nav.main .lnk[aria-current="page"]::after,
nav.main .lnk.is-section::after{background:var(--sand);transform:scaleX(1);opacity:.85}
nav.main .lnk[aria-current="page"]:hover::after,
nav.main .lnk.is-section:hover::after{background:var(--ember-lt);opacity:1}
.drop a[aria-current="page"]{border-left-color:var(--ember);background:var(--sand);font-weight:700}
.caret{width:11px;height:11px;flex:none;transition:transform .22s ease}
.has-drop:hover .caret{transform:rotate(180deg)}

.has-drop{position:relative}
.drop{
  position:absolute;top:100%;left:6px;min-width:262px;background:var(--paper);
  border-top:3px solid var(--ember);box-shadow:0 22px 46px -20px rgba(14,33,54,.55);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;padding:6px 0;
}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{
  display:block;padding:11px 20px;font-size:14.5px;color:var(--navy);
  border-left:3px solid transparent;transition:background .16s ease,border-color .16s ease,padding-left .16s ease;
}
.drop a:hover{background:var(--sand);border-left-color:var(--ember);padding-left:25px}

.hright{display:flex;align-items:center;gap:14px;margin-left:auto}
.menu-btn{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:6px}
.nav-follow{display:none}          /* shown only inside the mobile panel */

/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,33,54,.66) 0%,rgba(14,33,54,.34) 42%,rgba(14,33,54,.88) 100%);
}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:150px 24px 110px;width:100%;will-change:transform,opacity}
.hero h1{font-size:clamp(40px,7.6vw,92px);margin:20px 0 0;text-shadow:0 6px 34px rgba(0,0,0,.45)}
.hero h1 .accent{color:var(--ember-lt)}
.hero .sub{font-size:clamp(16.5px,1.9vw,21px);max-width:640px;margin:24px 0 36px;color:#EDEAE0}
.hero .cta-row{display:flex;gap:16px;flex-wrap:wrap}
.scroll-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.28em;
  font-size:10.5px;color:rgba(255,255,255,.8);display:flex;flex-direction:column;align-items:center;gap:8px;
}
.scroll-cue span{width:1px;height:44px;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));animation:cue 2.1s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}

/* ============ ORIENT STRIP ============ */
.orient{background:var(--navy);color:var(--sand);position:relative;overflow:hidden}
.orient::before{
  content:"";position:absolute;inset:0;background:url('img/topo-blue.jpg') center/cover;
  opacity:.16;mix-blend-mode:screen;
}
.orient-in{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr)}
.cell{padding:30px 26px;border-left:1px solid var(--hair-rev);transition:background .22s ease}
.cell:first-child{border-left:none}
.cell:hover{background:rgba(244,241,222,.06)}
.cell .k{
  font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  font-size:10.5px;color:var(--ember-lt);display:flex;align-items:center;gap:8px;
}
.cell .k::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ember-lt);flex:none}
.cell .v{font-family:var(--head);font-weight:700;text-transform:uppercase;font-size:19px;margin-top:10px;line-height:1.2}
.cell .v small{display:block;font-family:var(--body);font-weight:400;text-transform:none;font-size:13.5px;color:var(--muted-rev);margin-top:5px;letter-spacing:0}

/* ============ SPLIT / TEASER ROWS ============ */
.teaser{padding:clamp(46px,5.8vw,78px) 0}
.teaser.alt{background:var(--sand)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,74px);align-items:center}
.split.rev .copy{order:2}
.split.rev .media{order:1}
.teaser-tag{
  font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  font-size:11.5px;color:var(--ember);margin-bottom:16px;display:inline-flex;align-items:center;gap:10px;
}
.teaser-tag::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--ember)}
.teaser h2{margin-bottom:20px}
.teaser p{color:var(--muted);margin-bottom:30px;max-width:56ch}
.media{position:relative;overflow:hidden}
.media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
/* portrait frames beside a tall copy column — let the photo stand up rather
   than forcing it into the landscape box */
.media.tall img{aspect-ratio:3/4}
.media:hover img{transform:scale(1.055)}
.media::after{
  content:"";position:absolute;left:0;bottom:0;width:64px;height:5px;background:var(--ember);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.3,1) .1s;
}
.media.in::after{transform:scaleX(1)}

/* ============ PARALLAX BAND (fixed attachment) ============ */
.band{
  position:relative;min-height:min(78vh,620px);display:flex;align-items:center;
  color:#fff;background-size:cover;background-position:center;background-attachment:fixed;
}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,33,54,.86),rgba(14,33,54,.55))}
.band .wrap{position:relative;z-index:2}
.band .inner{max-width:620px}
.band h2{margin:18px 0 20px;text-shadow:0 4px 24px rgba(0,0,0,.45)}
.band p{color:#E5E1D4;margin-bottom:32px}

/* ============ STICKY VIDEO BAND ============ */
.videoband{position:relative;height:150vh;background:var(--navy-deep)}
.videoband .pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.videoband video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.videoband .pin::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(14,33,54,.62),rgba(14,33,54,.38) 45%,rgba(14,33,54,.78));
}
.vb-content{position:relative;z-index:2;color:#fff;max-width:720px;padding:0 24px}
/* Corner bug. Positioned against the section, not the video — the video is
   object-fit:cover, so anything burned into its corner gets cropped away at
   common desktop aspect ratios. */
.vb-bug{position:absolute;right:clamp(18px,3vw,40px);bottom:clamp(18px,3vw,40px);z-index:3}
.vb-bug img{width:auto;height:clamp(74px,9vw,124px);filter:drop-shadow(0 3px 12px rgba(0,0,0,.55))}
.vb-content h2{margin:18px 0 20px;text-shadow:0 4px 26px rgba(0,0,0,.5)}
.vb-content p{color:#E5E1D4;margin-bottom:32px}

/* ============ THE TWO REGIONS ============ */
.regions{background:var(--sand);position:relative;overflow:hidden}
.regions::before{content:"";position:absolute;inset:0;background:url('img/topo-sand.jpg') center/cover;opacity:.3}
.regions .wrap{position:relative;z-index:1}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,40px);margin-top:clamp(34px,4.5vw,54px)}
.rcard{background:var(--paper);border:1px solid var(--hair);display:flex;flex-direction:column;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.rcard:hover{border-color:var(--ember);transform:translateY(-4px);box-shadow:0 30px 60px -40px rgba(14,33,54,.6)}
.rmedia{overflow:hidden}
.rmedia img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.rcard:hover .rmedia img{transform:scale(1.05)}
.rbody{padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;flex:1}
.rprov{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  font-size:10.5px;color:var(--ember);display:inline-flex;align-items:center;gap:9px}
.rprov::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--ember)}
.rcard h3{margin:12px 0 12px}
.rcard p{color:var(--muted);margin-bottom:18px}
.rlist{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.rlist li{font-size:12.5px;padding:5px 11px;background:var(--sand);border:1px solid var(--hair);color:var(--navy)}
.rlinks{margin-top:auto;padding-top:18px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:7px}
.rlabel{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  font-size:9.5px;color:var(--muted);margin-bottom:2px}
.rlinks a{font-size:14.5px;color:var(--navy);font-weight:600;transition:color .18s ease}
.rlinks a:hover{color:var(--ember)}

/* ============ PARTNERS ============ */
.partners{background:var(--navy);color:var(--sand);position:relative;overflow:hidden}
.partners::before{content:"";position:absolute;inset:0;background:url('img/topo-blue.jpg') center/cover;opacity:.13;mix-blend-mode:screen}
.partners .wrap{position:relative;z-index:1}
.sec-head{text-align:center;max-width:70ch;margin:0 auto}
.sec-head h2{margin:16px 0 16px}
.logowall{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(36px,5vw,58px)}
/* two partners rather than six — keep them centred instead of stretched wide */
.logowall.two{grid-template-columns:repeat(2,1fr);max-width:760px;margin-left:auto;margin-right:auto}
.swap{
  border:1px solid var(--hair-rev);padding:30px 24px;min-height:150px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;
  transition:border-color .22s ease,background .22s ease,transform .22s ease;
}
.swap:hover{border-color:var(--ember-lt);background:rgba(244,241,222,.05);transform:translateY(-3px)}
.swap{cursor:default}
.swap .brandlink,.swap .mark{cursor:pointer}
.swap .big{font-family:var(--head);font-weight:700;text-transform:uppercase;font-size:16.5px;line-height:1.25;display:block}
.swap .sm{display:block;font-size:13px;color:var(--muted-rev);margin-top:6px}
.swap .tag{
  font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:9.5px;color:var(--ember-lt);border:1px solid rgba(224,118,58,.4);padding:4px 10px;
}

/* ============ FOLLOW + CONTACT ============ */
.follow{background:var(--sand);position:relative;overflow:hidden}
.follow::before{content:"";position:absolute;inset:0;background:url('img/topo-sand.jpg') center/cover;opacity:.28}
.follow .wrap{position:relative;z-index:1}
.follow-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,70px);margin-top:clamp(30px,4vw,48px);align-items:start}
.social-row{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 16px}
.soc{
  width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--hair);color:var(--navy);
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.soc svg{width:21px;height:21px;fill:currentColor}
.soc:hover{background:var(--navy);border-color:var(--navy);color:var(--sand);transform:translateY(-3px)}
.note{font-size:14.5px;color:var(--muted)}
.note b{color:var(--ember)}

.form{background:var(--paper);padding:clamp(26px,3.4vw,38px);border:1px solid var(--hair);box-shadow:0 26px 54px -34px rgba(14,33,54,.5)}
.field{margin-bottom:17px}
.field label{
  display:block;font-family:var(--head);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:10.5px;color:var(--muted);margin-bottom:7px;
}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:none;border-bottom:1.5px solid var(--hair);
  color:var(--navy);font-family:var(--body);font-size:16px;padding:10px 2px;outline:none;
  transition:border-color .2s ease;
}
.field textarea{min-height:100px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--ember)}
.success{display:none;margin-top:16px;padding:13px 16px;background:var(--sand);border-left:3px solid var(--ember);font-size:14.5px}
.form.sent .success{display:block}

/* ============ FOOTER ============ */
footer{background:var(--navy-deep);color:var(--muted-rev);padding:clamp(50px,6vw,76px) 0 34px}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;padding-bottom:30px;border-bottom:1px solid var(--hair-rev)}
.brand img.foot-logo{height:132px;width:auto}
.foot-soc{display:flex;gap:10px}
.foot-soc .soc{border-color:var(--hair-rev);color:var(--sand);width:44px;height:44px}
.foot-soc .soc:hover{background:var(--ember);border-color:var(--ember);color:#fff}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 26px;padding:26px 0;font-size:14.5px}
.foot-nav a{transition:color .18s ease}
.foot-nav a:hover{color:var(--ember-lt)}
.foot-discl{font-size:13px;line-height:1.7;max-width:88ch;padding-bottom:16px;color:rgba(244,241,222,.55)}
.foot-copy{font-size:13px;padding-top:16px;border-top:1px solid var(--hair-rev);color:rgba(244,241,222,.55)}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ============ MOBILE MENU ============ */
.menu-backdrop{position:fixed;inset:0;background:rgba(14,33,54,.6);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;z-index:898}
.menu-backdrop.open{opacity:1;visibility:visible}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .orient-in{grid-template-columns:repeat(2,1fr)}
  .cell:nth-child(3){border-left:none}
  .cell:nth-child(n+3){border-top:1px solid var(--hair-rev)}
  .logowall{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:940px){
  .menu-btn{display:block}
  nav.main{
    position:fixed;top:0;right:0;width:min(86vw,340px);height:100dvh;background:var(--navy);
    flex-direction:column;align-items:stretch;gap:0;padding:96px 0 40px;overflow-y:auto;
    transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.3,1);z-index:899;
    box-shadow:-24px 0 60px -30px rgba(0,0,0,.8);
  }
  nav.main.open{transform:translateX(0)}
  /* display:flex (not inline-flex) so each row spans the panel and the
     divider rules line up instead of ending at the end of the label */
  nav.main .lnk{display:flex;padding:15px 26px;font-size:14px;border-bottom:1px solid var(--hair-rev);justify-content:space-between}
  .nav-follow{display:flex;margin:22px 26px 0}
  nav.main .lnk::after{display:none}
  .has-drop{position:static}
  .drop{
    position:static;opacity:1;visibility:visible;transform:none;background:rgba(0,0,0,.22);
    border-top:none;box-shadow:none;max-height:0;overflow:hidden;padding:0;
    transition:max-height .3s ease;
  }
  .has-drop.open .drop{max-height:520px}
  .has-drop.open .caret{transform:rotate(180deg)}
  .drop a{color:var(--sand);padding:12px 34px;font-size:14px}
  .drop a:hover{background:rgba(244,241,222,.08);border-left-color:var(--ember-lt);padding-left:39px}
  /* the underline is off in the panel (rows, not a row of tabs), so "you are
     here" becomes a left edge bar instead */
  nav.main .lnk[aria-current="page"],
  nav.main .lnk.is-section{box-shadow:inset 3px 0 0 var(--sand);background:rgba(244,241,222,.06)}
  .drop a[aria-current="page"]{background:rgba(244,241,222,.12);border-left-color:var(--sand);font-weight:700}
  .cta-mini{display:none}
  .menu-btn{margin-right:-6px}          /* optical: align the glyph, not its padding, to the edge */
  .rgrid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split.rev .copy,.split.rev .media{order:0}
  .follow-grid{grid-template-columns:1fr}
  .band{background-attachment:scroll}
  .videoband{height:auto}
  .videoband .pin{position:relative;height:auto;min-height:84vh;padding:90px 0}
}
@media (max-width:620px){
  .orient-in{grid-template-columns:1fr}
  .cell{border-left:none;border-top:1px solid var(--hair-rev)}
  .cell:first-child{border-top:none}
  .logowall,.logowall.two{grid-template-columns:1fr}
  /* the eyebrow wraps at this width, which would strand the trailing dot
     against the right edge — keep the leading rule, drop the dot */
  .eyebrow::after{display:none}
  .brand img{height:55px}
  header.scrolled .brand img{height:38px}
  .hero-inner{padding:130px 24px 96px}
  .btn{width:100%}
  .brand img.foot-logo{height:104px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .media img,.media:hover img{transition:none;transform:none}
  .media::after{transform:scaleX(1);transition:none}
  .btn:hover,.soc:hover,.swap:hover{transform:none}
  .swap .brandlink,.swap .brandlink:hover{transition:none;transform:none}
  .scroll-cue span{animation:none;opacity:.6}
  #preloader .splash img,#preloader .splash .tag{animation:none;opacity:1;transform:none}
  .band{background-attachment:scroll}
  .hero-inner{transform:none!important;opacity:1!important}
}

/* ============================================================
   INTERIOR PAGES (partner features)
   ============================================================ */

/* interior hero — photo rather than video, shorter than the home hero */
.ihero{position:relative;min-height:min(78vh,660px);display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.ihero-media{position:absolute;inset:0;z-index:0}
.ihero-media img,.ihero-media video{width:100%;height:100%;object-fit:cover;object-position:center 48%}
.ihero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,33,54,.72) 0%,rgba(14,33,54,.38) 40%,rgba(14,33,54,.9) 100%)}
.ihero-in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:150px 24px 64px;width:100%}
.ihero h1{font-size:clamp(32px,5.6vw,68px);margin:18px 0 0;text-shadow:0 5px 30px rgba(0,0,0,.45)}
.ihero .sub{font-size:clamp(16px,1.8vw,20px);max-width:640px;margin:20px 0 30px;color:#EDEAE0}
.ihero .cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* breadcrumb */
.crumb{font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  font-size:11px;color:rgba(244,241,222,.72);display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.crumb a{transition:color .18s ease}
.crumb a:hover{color:var(--ember-lt)}
.crumb i{font-style:normal;opacity:.5}

/* thank-you ribbon */
.thanks{background:var(--ember);color:#fff;padding:clamp(15px,2vw,22px) 0}
.thanks .wrap{display:flex;gap:18px 34px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.thanks p{font-size:clamp(14.5px,1.45vw,17px);line-height:1.5;max-width:80ch;margin:0}
.thanks strong{font-weight:700}

/* fact table */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--hair);margin-top:26px}
.facts div{padding:15px 4px;border-bottom:1px solid var(--hair);display:flex;gap:14px;align-items:baseline}
.facts b{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:10px;color:var(--muted);flex:0 0 108px}
.facts span{font-size:15px}
.facts a{color:var(--navy);font-weight:600;border-bottom:1px solid var(--hair);transition:color .18s ease,border-color .18s ease}
.facts a:hover{color:var(--ember);border-color:var(--ember)}

/* three-up feature tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px);margin-top:clamp(30px,4vw,46px)}
.tile{background:var(--paper);border:1px solid var(--hair);padding:clamp(22px,2.6vw,30px);
  transition:border-color .22s ease,transform .22s ease}
.tile:hover{border-color:var(--ember);transform:translateY(-3px)}
.tile .num{font-family:var(--head);font-weight:800;font-size:12px;letter-spacing:.2em;color:var(--ember)}
.tile h3{margin:12px 0 10px;font-size:clamp(18px,2vw,23px)}
.tile p{color:var(--muted);font-size:15.5px}

/* spec list */
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,3vw,44px);margin-top:8px;list-style:none}
.specs li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--hair);font-size:15px}
.specs li b{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:10.5px;color:var(--muted);white-space:nowrap;padding-top:3px}

/* horizontal photo rail */
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;
  margin-top:clamp(28px,3.6vw,44px);scrollbar-width:thin}
.rail figure{flex:0 0 min(78vw,440px);scroll-snap-align:start}
.rail img{width:100%;aspect-ratio:4/3;object-fit:cover}
.rail figcaption{font-size:13px;color:var(--muted);padding-top:9px;
  font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.12em}

/* video frame */
.vframe{position:relative;padding-top:56.25%;background:var(--navy-deep);border:1px solid var(--hair)}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media (max-width:940px){
  .tiles{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
}
@media (max-width:620px){
  .ihero-in{padding:128px 24px 54px}
}
@media (prefers-reduced-motion:reduce){
  .tile:hover,.rcard:hover{transform:none}
}

/* ============================================================
   ADVENTURES — featured film, episode grid, gallery, lightbox
   ============================================================ */
.filmwrap{position:relative;max-width:1040px;margin:clamp(30px,4vw,46px) auto 0}
.filmwrap video{width:100%;display:block;background:var(--navy-deep)}
.filmmeta{display:flex;justify-content:space-between;gap:14px 26px;flex-wrap:wrap;
  padding:16px 2px 0;border-top:3px solid var(--ember);margin-top:0}
.filmmeta .t{font-family:var(--head);font-weight:700;text-transform:uppercase;font-size:clamp(15px,1.7vw,19px)}
.filmmeta .d{font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  font-size:11px;color:var(--muted)}
.filmnote{font-size:13.5px;color:var(--muted);margin-top:10px;font-style:italic}

.epgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px);margin-top:clamp(30px,4vw,46px)}
.ep{background:var(--paper);border:1px solid var(--hair);display:flex;flex-direction:column;
  transition:border-color .22s ease,transform .22s ease}
.ep:hover{border-color:var(--ember);transform:translateY(-3px)}
.epthumb{position:relative;overflow:hidden;background:var(--sand)}
.epthumb img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.3,1)}
/* the yoga frame is 4:3 with Stacie low in it, so a centre crop cut her off at
   the chin — shift the window down the source to sit her mid-card */
.epthumb img.pos-yoga{object-position:center 80%}
.ep:hover .epthumb img{transform:scale(1.05)}
.epthumb .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.epthumb .play span{width:52px;height:52px;border-radius:50%;background:rgba(14,33,54,.72);
  display:flex;align-items:center;justify-content:center;transition:background .22s ease,transform .22s ease}
.epthumb .play svg{width:18px;height:18px;fill:#fff;margin-left:3px}
.ep:hover .play span{background:var(--ember);transform:scale(1.08)}
.epbody{padding:20px 22px 22px}
.epbody h3{font-size:17.5px;margin-bottom:7px}
.epbody p{font-size:14.5px;color:var(--muted)}
.epsoon{position:absolute;top:12px;left:12px;background:var(--navy);color:var(--sand);
  font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:9.5px;padding:5px 10px}

/* films that aren't shot yet sit back a step, so the one you can actually
   watch reads first. The badge keeps full contrast — it is the label that
   explains the dimming, so muting it too would just look broken. */
.ep.is-soon .epthumb img{filter:grayscale(.65);opacity:.6}
.ep.is-soon .epbody h3,.ep.is-soon .epbody p{opacity:.72}
.ep.is-soon .play span{background:rgba(14,33,54,.42)}
.ep.is-soon:hover .epthumb img{transform:none}
.ep.is-soon:hover .play span{background:rgba(14,33,54,.42);transform:none}

/* the playable card advertises itself */
.epthumb[data-video]{cursor:pointer}
.epthumb[data-video]:focus-visible{outline:3px solid var(--ember);outline-offset:3px}

/* video lightbox — same shell as the gallery one, minus the prev/next arrows */
.lb video{max-width:min(94vw,1400px);max-height:88vh;width:auto;background:#000;display:block}

.ggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:clamp(30px,4vw,46px)}
.ggrid figure{cursor:zoom-in;overflow:hidden;position:relative}
.ggrid img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.3,1),opacity .25s ease}
.ggrid figure:hover img{transform:scale(1.07);opacity:.9}
.ggrid figure.hidden{display:none}
.load-wrap{text-align:center;margin-top:clamp(26px,3.4vw,38px)}

.lb{position:fixed;inset:0;background:rgba(10,20,34,.95);z-index:1100;display:none;
  align-items:center;justify-content:center;padding:34px}
.lb.open{display:flex}
.lb img{max-width:min(94vw,1400px);max-height:88vh;object-fit:contain}
.lb .x,.lb .nav{position:absolute;color:#fff;cursor:pointer;user-select:none;border:0;border-radius:0;padding:0;font-family:inherit;line-height:1;
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);font-size:26px;transition:background .18s ease}
.lb .x:hover,.lb .nav:hover,.lb .x:focus-visible,.lb .nav:focus-visible{background:var(--ember)}
.lb .x:focus-visible,.lb .nav:focus-visible{outline:3px solid #fff;outline-offset:3px}
.lb .x{top:20px;right:20px}
.lb .nav.p{left:20px;top:50%;transform:translateY(-50%)}
.lb .nav.n{right:20px;top:50%;transform:translateY(-50%)}

@media (max-width:940px){
  .epgrid{grid-template-columns:repeat(2,1fr)}
  .ggrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:620px){
  .epgrid{grid-template-columns:1fr}
  .ggrid{grid-template-columns:repeat(2,1fr)}
  .lb .nav{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .ep:hover{transform:none}
  .ggrid img,.ggrid figure:hover img,.epthumb img,.ep:hover .epthumb img{transition:none;transform:none}
}

/* ============================================================
   PARTNER PAGE — vertical reel, coverage grid, feed samples
   ============================================================ */

/* vertical (9:16) reel sat beside copy rather than stretched wide */
.reel{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:clamp(28px,4vw,60px);align-items:center}
.reel-vid{position:relative;background:var(--navy-deep);border:1px solid var(--hair);
  box-shadow:0 30px 60px -40px rgba(14,33,54,.6)}
.reel-vid video{width:100%;display:block;aspect-ratio:9/16;object-fit:cover}
.reel-tag{position:absolute;top:12px;left:12px;z-index:2;background:var(--ember);color:#fff;
  font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  font-size:9.5px;padding:5px 11px}
.reel h2{margin-bottom:16px}
.reel p{color:var(--muted);margin-bottom:16px}

/* six-up coverage grid */
.showup{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);margin-top:clamp(30px,4vw,46px)}
.showup > div{background:var(--paper);padding:clamp(22px,2.6vw,30px);transition:background .22s ease}
.showup > div:hover{background:var(--sand)}
.showup h3{font-family:var(--head);font-weight:700;text-transform:uppercase;font-size:16px;
  margin-bottom:9px;display:flex;align-items:center;gap:9px}
.showup h3::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ember);flex:none}
.showup p{font-size:14.5px;color:var(--muted)}

/* sample social posts */
.feedgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,26px);margin-top:clamp(30px,4vw,46px)}
.post{background:var(--paper);border:1px solid var(--hair);display:flex;flex-direction:column;
  transition:border-color .22s ease,transform .22s ease}
.post:hover{border-color:var(--ember);transform:translateY(-3px)}
.ptop{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--hair)}
.ptop .av{width:32px;height:32px;background:var(--navy);display:flex;align-items:center;justify-content:center;flex:none}
.ptop .av img{width:22px;height:auto}
.ptop .who{font-family:var(--head);font-weight:700;text-transform:uppercase;font-size:11.5px;letter-spacing:.06em;line-height:1.3}
.ptop .who small{display:block;font-family:var(--body);font-weight:400;text-transform:none;
  letter-spacing:0;font-size:11.5px;color:var(--muted)}
.post .pimg img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.post .cap{padding:14px 15px 16px;font-size:14px;color:var(--navy)}
.post .cap .tags{display:block;margin-top:8px;color:var(--ember);font-size:13px}
.feednote{font-size:13.5px;color:var(--muted-rev);font-style:italic;margin-top:20px}

@media (max-width:940px){
  .reel{grid-template-columns:1fr}
  .reel-vid{max-width:340px;margin:0 auto}
  .showup{grid-template-columns:repeat(2,1fr)}
  .feedgrid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .showup{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ .post:hover{transform:none} }

/* ============================================================
   SOCIAL — not-yet-live channels, and per-person LinkedIn
   ============================================================ */
.soc{position:relative}

/* a channel that doesn't exist yet: visibly inactive, not a link */
.soc.soon{opacity:.42;cursor:default;filter:grayscale(1)}
.soc.soon:hover{background:transparent;color:inherit;border-color:var(--hair);transform:none}
.foot-soc .soc.soon:hover{border-color:var(--hair-rev);color:var(--sand)}
.soc.soon b{
  position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);
  font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:7.5px;line-height:1;padding:3px 5px;background:var(--navy);color:var(--sand);
  border-radius:2px;white-space:nowrap;
}
.foot-soc .soc.soon b{background:var(--sand);color:var(--navy)}

/* which of us the LinkedIn profile belongs to */
.soc.li b{
  position:absolute;top:-6px;right:-6px;
  width:17px;height:17px;border-radius:50%;background:var(--ember);color:#fff;
  font-family:var(--head);font-weight:700;font-size:9px;line-height:17px;text-align:center;
}
.soc.li:hover b{background:var(--navy)}
.foot-soc .soc.li:hover b{background:var(--sand);color:var(--navy)}

/* ============================================================
   REGION MAP — fills the gap under the social row
   ============================================================ */
.mapblock{margin-top:clamp(30px,3.6vw,44px);border:1px solid var(--hair);background:var(--paper)}
.maphead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:16px 18px 14px;border-bottom:1px solid var(--hair)}
.mapnote{font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  font-size:10.5px;color:var(--muted)}
.mapfig{overflow:hidden;background:var(--navy-deep)}
.mapfig img{width:100%;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.mapblock:hover .mapfig img{transform:scale(1.03)}
.maplinks{display:flex;flex-wrap:wrap;gap:8px 22px;padding:14px 18px 16px}
.maplinks a{font-size:13.5px;font-weight:600;color:var(--navy);transition:color .18s ease}
.maplinks a:hover{color:var(--ember)}
@media (prefers-reduced-motion:reduce){ .mapblock:hover .mapfig img{transform:none} }

/* photo caption sitting under a .media box (clear of its orange rule) */
.media-fig{display:block}
.media-cap{
  margin-top:16px;padding-left:13px;border-left:3px solid var(--ember);
  font-size:13.5px;line-height:1.55;color:var(--muted);
}

/* ============================================================
   PARTNER PAGE — spec card, logo cards, store card, video bands
   ============================================================ */

/* full-bleed video band (distinct from .videoband, which pins) */
.vband{position:relative;min-height:min(78vh,620px);display:flex;align-items:center;overflow:hidden;color:#fff}
.vband video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vband::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(14,33,54,.88),rgba(14,33,54,.5) 62%,rgba(14,33,54,.35))}
.vband .wrap{position:relative;z-index:2}
.vband .inner{max-width:640px}
.vband h2{margin:18px 0 20px;text-shadow:0 4px 24px rgba(0,0,0,.5)}
.vband p{color:#E5E1D4;margin-bottom:28px}

/* the dark "closer than you think" card, video behind copy */
.vidcard{position:relative;overflow:hidden;min-height:clamp(380px,46vw,540px);display:flex;align-items:flex-end;color:#fff}
.vidcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vidcard::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(14,33,54,.3),rgba(14,33,54,.9))}
.vidcard .vc-in{position:relative;z-index:2;padding:clamp(24px,3vw,36px)}
.vidcard h2{font-size:clamp(24px,3.2vw,40px);margin:14px 0 14px}
.vidcard p{color:#E5E1D4;font-size:15.5px;margin:0}

/* partner logo cards */
.logocards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:20px}
.logocard{background:var(--paper);border:1px solid var(--hair);padding:22px 18px;
  display:flex;align-items:center;justify-content:center;min-height:104px;
  transition:border-color .22s ease,transform .22s ease}
.logocard:hover{border-color:var(--ember);transform:translateY(-2px)}
.logocard img{max-width:100%;max-height:56px;width:auto;height:auto}

/* the Commander build card */
.speccard{background:var(--paper);border:1px solid var(--hair);overflow:hidden;
  box-shadow:0 30px 60px -44px rgba(14,33,54,.55)}
.spechead{background:var(--navy);color:#fff;padding:18px 22px;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.spechead h3{font-size:clamp(17px,2vw,22px);margin:0}
.spechead .built{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:9.5px;color:var(--ember-lt)}
.speccolours{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:15px 22px;border-bottom:1px solid var(--hair)}
.swatch{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;color:var(--navy)}
.swatch i{width:15px;height:15px;border-radius:50%;display:inline-block}
.speccolours .sep{color:var(--hair)}
.specrow{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:15px 22px;border-bottom:1px solid var(--hair)}
.specrow:last-child{border-bottom:none}
.specrow b{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:10px;color:var(--muted)}
.specrow span{font-size:15px}

/* store contact card */
.storecard{background:var(--paper);border:1px solid var(--hair);padding:clamp(24px,3vw,34px);
  box-shadow:0 30px 60px -44px rgba(14,33,54,.5)}
.storecard h3{margin-bottom:5px}
.storecard .since{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:10px;color:var(--ember);display:block;margin-bottom:18px}
.storecard .btns{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}
.storecard .btns .btn{padding:13px 22px;font-size:12.5px}

@media (max-width:940px){
  .logocards{grid-template-columns:repeat(2,1fr)}
  .specrow{grid-template-columns:1fr;gap:4px}
  .vband::after{background:linear-gradient(180deg,rgba(14,33,54,.72),rgba(14,33,54,.88))}
}
@media (prefers-reduced-motion:reduce){ .logocard:hover{transform:none} }

/* store column: card at its natural height, map absorbs the rest so the
   two columns of the section finish level */
.storecol{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px);height:100%}
.storemap{flex:1 1 auto;min-height:260px;border:1px solid var(--hair);overflow:hidden;background:var(--sand)}
.storemap iframe{width:100%;height:100%;min-height:260px;border:0;display:block}
@media (max-width:940px){
  .storecol{height:auto}
  .storemap{min-height:300px}
}

/* "what each side brings" — ticked lists */
.brings{list-style:none;margin-top:4px}
.brings li{position:relative;padding:0 0 14px 30px;font-size:15.5px;color:var(--muted);line-height:1.6}
.brings li::before{
  content:"";position:absolute;left:0;top:8px;width:13px;height:8px;
  border-left:2.5px solid var(--ember);border-bottom:2.5px solid var(--ember);
  transform:rotate(-45deg);
}

/* pickup-day photo with the Commander lockup filling the space beside it */
.pickup-row{display:flex;gap:clamp(18px,2.6vw,34px);align-items:center;margin-top:26px;flex-wrap:wrap}
.pickup-row .media-fig{flex:1 1 300px;max-width:460px;min-width:0}
.pickup-logo{flex:1 1 210px;min-width:0;display:flex;align-items:center;justify-content:center}
.pickup-logo img{width:100%;max-width:330px;height:auto}
@media (max-width:620px){ .pickup-logo{padding-top:6px} .pickup-logo img{max-width:260px} }

/* Every hero on the site is left-aligned, so a subject sitting on the left
   ends up behind the headline. Mirroring the image moves them clear without
   moving the type. Applied per-image, not to the whole hero. */
.ihero-media img.mirror{transform:scaleX(-1)}
/* the Windfall Lake frame is 4:3 against a much wider hero, so the default
   crop clipped Ryan at the top — lift the window to keep both faces in */
.ihero-media img.pos-windfall{object-position:center 38%}

/* ============================================================
   NORTHERN LIGHTS BREAK + BIO PAGES
   ============================================================ */
/* the brand board files the waves under "footers and section breaks".
   Transparent PNG, full-bleed edge to edge, so it reads as part of the page
   ground rather than a dropped-in graphic. Inherits whatever sits behind it. */
.biologo{margin-top:26px;padding-top:22px;border-top:1px solid var(--hair)}
.biologo img{height:44px;width:auto}

/* real partner logos on the navy logowall — white plate so the artwork reads */
.swap .logoplate{display:flex;align-items:center;justify-content:center;gap:18px;
  background:#fff;border-radius:2px;padding:12px 18px;width:100%;max-width:280px;min-height:64px}
/* Each logo is its own link out to that brand's site, so the width limit that
   used to sit on the <img> moves to the anchor around it — otherwise 46% would
   resolve against the anchor rather than the plate and the marks would grow. */
.swap .logoplate .brandlink{display:flex;align-items:center;justify-content:center;
  max-width:46%;flex:0 1 auto;min-height:44px;
  transition:opacity .18s ease,transform .18s ease}
.swap .logoplate .brandlink img{max-height:38px;max-width:100%;width:auto;height:auto}
.swap .logoplate .brandlink:hover{opacity:.72;transform:translateY(-1px)}
.swap .logoplate .brandlink:focus-visible{outline:3px solid var(--ember);outline-offset:3px}
/* a plate carrying one mark instead of a pair — let it use the width */
.swap .logoplate.solo .brandlink{max-width:74%}

/* the card is a <div> now, not a link; the name below the plate is what opens
   our own partner page, and it needs its own focus ring on the navy ground */
.swap .mark{display:block;color:inherit}
.swap .mark:hover .big{color:var(--ember-lt)}
.swap .mark:focus-visible{outline:3px solid var(--ember-lt);outline-offset:4px}

/* ============================================================
   REGION PAGE — hero logo strip, stop list, wide map, film card
   ============================================================ */
.herologos{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.herologos .logoplate{display:flex;align-items:center;justify-content:center;
  max-width:200px;min-height:56px;padding:9px 14px}
.herologos .logoplate img{width:auto;height:auto;max-width:100%}
.herologos .logoplate img{max-height:34px}

/* the stops — native accordion beside the route map */
.stops{border-top:1px solid var(--hair)}
.stops details{border-bottom:1px solid var(--hair)}
.stops summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:12px;
  padding:15px 4px;font-family:var(--head);font-weight:700;text-transform:uppercase;
  font-size:14.5px;color:var(--navy);transition:color .18s ease}
.stops summary::-webkit-details-marker{display:none}
.stops summary::before{content:"+";color:var(--ember);font-weight:800;width:16px;flex:none;transition:transform .2s ease}
.stops details[open] summary::before{content:"–"}
.stops summary:hover{color:var(--ember)}
.stops summary .tag{margin-left:auto;font-size:9.5px;letter-spacing:.14em;color:var(--muted);font-weight:600;white-space:nowrap}
.stops .body{padding:0 4px 16px 28px}
.stops .body .kv{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:10.5px;color:var(--ember);display:block;margin-bottom:6px}
.stops .body p{font-size:14.5px;color:var(--muted);margin:0}

/* wide district map: scrolls sideways inside its frame on smaller screens */
.widescroll{overflow-x:auto;border:1px solid var(--hair);background:var(--paper);scrollbar-width:thin}
.widescroll img{display:block;height:clamp(320px,42vw,560px);width:auto;max-width:none}
.swipehint{font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:10.5px;color:var(--muted);margin-top:10px;display:block}

/* film card with play overlay */
.filmcard{position:relative;display:block;overflow:hidden;cursor:pointer;border:1px solid var(--hair)}
.filmcard .filmsoon{position:absolute;left:14px;top:14px;z-index:2;background:var(--navy);color:#fff;font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:7px 11px}
.filmcard img{width:100%;display:block;transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.filmcard:hover img{transform:scale(1.04)}
.filmcard .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(14,33,54,.1),rgba(14,33,54,.45))}
.filmcard .play span{width:74px;height:74px;border-radius:50%;background:rgba(195,84,29,.94);
  display:flex;align-items:center;justify-content:center;transition:transform .22s ease;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.6)}
.filmcard .play svg{width:26px;height:26px;fill:#fff;margin-left:4px}
.filmcard:hover .play span{transform:scale(1.08)}
.filmcap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:13px 2px 0;
  font-size:13px;color:var(--muted)}

/* visitor guide box */
.guidebox{display:grid;grid-template-columns:minmax(0,240px) 1fr;gap:clamp(22px,3vw,38px);
  align-items:center;background:var(--paper);border:1px solid var(--hair);
  border-top:4px solid var(--ember);padding:clamp(24px,3.4vw,40px);
  box-shadow:0 30px 60px -44px rgba(14,33,54,.5)}
.guidebox img{width:100%;height:auto;box-shadow:0 14px 30px -18px rgba(14,33,54,.55)}
.guidebox h3{margin-bottom:10px}
.guidebox p{color:var(--muted);font-size:15px;margin-bottom:18px}
.guidebox .note{font-size:12.5px;color:var(--muted)}
a.tile{display:block;color:inherit}
@media (max-width:940px){
  .guidebox{grid-template-columns:1fr}
  .guidebox img{max-width:220px}
}

/* body scroll is frozen while the mobile panel is open; a class rather than an
   inline style so it can't fight the lightbox's own lock */
html.menu-lock, html.menu-lock body{overflow:hidden}

/* ============================================================
   MODE CARDS + STAGE CAROUSEL (Jumping Jack)
   ============================================================ */
.modes{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.8vw,32px);margin-top:clamp(30px,4vw,46px)}
.mode{background:var(--paper);border:1px solid var(--hair);display:flex;flex-direction:column;
  box-shadow:0 30px 60px -46px rgba(14,33,54,.5)}
.mode-media{position:relative;background:#fff;padding:clamp(14px,2vw,22px)}
.mode-media img{width:100%;height:clamp(190px,22vw,300px);object-fit:contain;display:block}
.mode-badge{position:absolute;top:clamp(14px,2vw,22px);left:clamp(14px,2vw,22px);z-index:2;
  font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:10.5px;padding:8px 15px;border-radius:999px;color:#fff;background:var(--navy)}
.mode-badge.camp{background:var(--ember)}
.mode-body{padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;flex:1}
.mode-body h3{margin-bottom:8px}
.mode-body .sub{color:var(--muted);font-size:15px;margin-bottom:20px}
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);background:var(--navy);color:var(--sand)}
.statstrip div{padding:16px 8px;text-align:center;border-left:1px solid rgba(244,241,222,.16)}
.statstrip div:first-child{border-left:none}
.statstrip b{display:block;font-family:var(--head);font-weight:800;font-size:clamp(18px,2.2vw,25px);color:var(--ember-lt);line-height:1.1}
.statstrip span{display:block;margin-top:5px;font-family:var(--head);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:9px;color:var(--muted-rev);line-height:1.35}
.mode .specs{grid-template-columns:1fr;margin-top:20px}

/* stage carousel */
.carousel{position:relative;overflow:hidden;background:#fff;border:1px solid var(--hair)}
.slides{display:flex;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.slide{flex:0 0 100%;position:relative}
.slide img{width:100%;height:clamp(260px,42vw,540px);object-fit:contain;display:block;background:#fff}
.slide .cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,2.4vw,26px);
  background:linear-gradient(180deg,rgba(14,33,54,0),rgba(14,33,54,.82));color:#fff}
.slide .cap b{display:block;font-family:var(--head);font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;font-size:clamp(13px,1.6vw,17px)}
.slide .cap span{display:block;margin-top:5px;font-size:13.5px;color:rgba(244,241,222,.86)}
.cbtn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;
  border:none;border-radius:50%;background:rgba(14,33,54,.72);color:#fff;font-size:22px;line-height:1;
  cursor:pointer;transition:background .18s ease}
.cbtn:hover{background:var(--ember)}
.cbtn.prev{left:14px} .cbtn.next{right:14px}
.cdots{display:flex;gap:8px;justify-content:center;padding:16px 0 0}
.cdots button{width:9px;height:9px;border-radius:50%;border:none;background:var(--hair);cursor:pointer;padding:0;
  transition:background .18s ease,transform .18s ease}
.cdots button.on{background:var(--ember);transform:scale(1.25)}

@media (max-width:940px){
  .modes{grid-template-columns:1fr}
  .statstrip{grid-template-columns:repeat(2,1fr)}
  .statstrip div:nth-child(3){border-left:none}
  .statstrip div:nth-child(n+3){border-top:1px solid rgba(244,241,222,.16)}
}
@media (prefers-reduced-motion:reduce){ .slides{transition:none} }

/* contact: the left column runs shorter than the form, so the lockup takes up
   the slack and the two columns finish level */
.contact-col{display:flex;flex-direction:column}
.contact-lockup{flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  padding:clamp(22px,3vw,40px) 0 0}
.contact-lockup img{width:100%;max-width:340px;height:auto;opacity:.95}
@media (max-width:940px){
  .contact-lockup{padding-top:28px}
  .contact-lockup img{max-width:280px}
}

/* the hero logo strip sits on dark hero imagery — white plates keep the
   partner artwork legible without recolouring anyone's brand */
.ihero .herologos{margin-top:clamp(22px,3vw,32px)}
.ihero .herologos .logoplate{background:rgba(255,255,255,.96);box-shadow:0 10px 26px -14px rgba(0,0,0,.6)}
@media (max-width:620px){
  .herologos .logoplate{max-width:150px;min-height:48px;padding:8px 11px}
  .herologos .logoplate img{max-height:26px}
}

/* Meet Stacie's hero frame has her low and right of centre; the default
   "center 48%" crop pushed her out of view on wide viewports */
.ihero-media img.pos-stacie{object-position:60% 22%}
@media (max-width:940px){ .ihero-media img.pos-stacie{object-position:64% 20%} }

/* Meet Ryan ships two frames, because no single one works at both shapes.
   The trail selfie is 3:4 portrait: lovely on a phone, but in a hero near 2:1
   it is blown up until his face alone is taller than the visible band, so the
   chin or the cap has to go. Desktop gets a landscape frame instead, mirrored
   at export so Ryan sits right of the headline rather than under it.
   The <picture> swaps the file at 941px; these rules position each one. */
.ihero-media picture{display:block;position:absolute;inset:0}
.ihero-media img.pos-ryan{object-position:50% 34%}                              /* landscape frame */
@media (max-width:940px){ .ihero-media img.pos-ryan{object-position:64% 22%} }  /* portrait frame */

/* two navy sections back to back doubled their padding into a dead band;
   the first one gives up its bottom padding so the seam reads as one break */
.section.seam-below{padding-bottom:0}

/* ============================================================
   THE BUILD, UP CLOSE — tabbed render switcher with feature markers
   Used on stojans.html for the Commander build (summer, built) and the
   winter dream board. Ported from the ROVE concept page, retuned from a
   square frame to 16:9 because these are Can-Am configurator renders.

   Markers are real <button>s that TOGGLE, so a phone gets the same thing a
   desktop does. Hover is layered on top for fine pointers only.

   Coordinates are percentages of the frame, never pixels. The frame is 4/3 and
   so is every render, so `cover` is a no-op and a percentage of the frame is a
   percentage of the image. ANY replacement render must be 4:3 or every marker
   on that view drifts. 4:3 rather than the configurator's native 16:9 because
   a 16:9 frame is only ~172px tall on a 375px phone, which is not enough
   vertical room to keep four markers off each other. The sources are cropped
   to 4:3 per render, each window placed to keep the whole machine inside.
   ============================================================ */
.hud{margin-top:clamp(26px,3.4vw,40px)}

/* Orange buttons, not text tabs — a text row reads as a caption and gets
   missed, which is fatal for the one control that hides two thirds of the
   section. Selected is a solid fill, unselected an outline, so all three read
   as buttons at a glance. */
.hud-tabs{display:flex;flex-wrap:wrap;gap:10px}
.hud-tab{appearance:none;cursor:pointer;
  font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:12px;padding:14px 26px;
  background:transparent;color:var(--ember);border:2px solid var(--ember);
  transition:background .18s ease,color .18s ease,transform .18s ease}
.hud-tab:hover{background:rgba(195,84,29,.12);transform:translateY(-2px)}
.hud-tab[aria-selected="true"]{background:var(--ember);color:#fff}
.hud-tab[aria-selected="true"]:hover{background:var(--ember)}
.hud-tab:focus-visible{outline:3px solid var(--navy);outline-offset:3px}

.hud-view[hidden]{display:none}
.hud-stage{position:relative;max-width:860px;margin:clamp(20px,2.6vw,30px) auto 0;
  background:#fff;border:1px solid var(--hair);padding:14px}
.hud-frame{position:relative}
.hud-frame > img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}

.hs{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;padding:0;cursor:pointer;z-index:3;
  border:2px solid #fff;background:var(--ember);
  box-shadow:0 4px 16px rgba(14,33,54,.45);
  transition:transform .2s ease,background .2s ease}
.hs::before,.hs::after{content:"";position:absolute;background:#fff;border-radius:1px;
  top:50%;left:50%;transition:transform .24s ease}
.hs::before{width:13px;height:2px;transform:translate(-50%,-50%)}
.hs::after{width:2px;height:13px;transform:translate(-50%,-50%)}
.hs:hover{transform:translate(-50%,-50%) scale(1.12)}
.hs:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
/* + becomes x: rotate both bars 45deg so they cross rather than overlap */
.hs[aria-expanded="true"]{background:var(--navy)}
.hs[aria-expanded="true"]::before{transform:translate(-50%,-50%) rotate(45deg)}
.hs[aria-expanded="true"]::after{transform:translate(-50%,-50%) rotate(45deg)}
/* a slow ring, so the markers read as interactive without being asked to */
.hs-ring{position:absolute;inset:-9px;border:2px solid var(--ember);border-radius:50%;
  pointer-events:none;animation:hsping 2.8s cubic-bezier(.2,.7,.3,1) infinite}
.hs[aria-expanded="true"] .hs-ring{animation:none;opacity:0}
@keyframes hsping{0%{transform:scale(.72);opacity:.65}70%,100%{transform:scale(1.3);opacity:0}}

/* The notes are a SIBLING of .hud-frame, never a child. As a child they are in
   flow at mobile widths, which grows the frame the moment a note opens — and
   every marker's top:<pct> resolves against that frame, so all four would
   slide down the render. Out here the frame is always exactly the image.
   inset:14px is the stage's own padding, so this box lines up with the frame
   to the pixel and the same percentages still apply. */
.hud-notes{position:absolute;inset:14px;pointer-events:none;z-index:4}
.hs-note{position:absolute;left:var(--x);top:var(--y);width:252px;pointer-events:auto;
  translate:var(--tx,0) var(--ty,-50%);
  background:var(--navy);color:#F4F1DE;padding:15px 17px 16px;
  box-shadow:0 28px 54px -26px rgba(14,33,54,.85);
  opacity:0;visibility:hidden;transform:translateY(7px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s}
.hs-note.is-open{opacity:1;visibility:visible;transform:none}
.hs-note.side-r{--tx:0;margin-left:28px}
.hs-note.side-l{--tx:-100%;margin-left:-28px}
/* for markers low in the frame, where a vertically centred note hangs past
   the bottom of the stage at narrow widths */
.hs-note.up{--ty:-80%}
.hs-note b{display:block;font-family:var(--head);font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;font-size:12px;color:var(--ember-lt);margin-bottom:7px;padding-right:16px}
.hs-note p{font-size:13.5px;line-height:1.55;color:#E5E1D4}
.hs-note .part{display:block;margin-top:8px;font-family:var(--head);font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;font-size:10px;color:var(--muted-rev)}
.hs-x{position:absolute;top:8px;right:8px;width:22px;height:22px;padding:0;cursor:pointer;
  background:none;border:0;color:var(--muted-rev);font-size:17px;line-height:1;
  transition:color .16s ease}
.hs-x:hover{color:#fff}
.hs-x:focus-visible{outline:2px solid var(--ember-lt);outline-offset:1px}

.hud-hint{margin-top:14px;font-size:13px;color:var(--muted);text-align:center;
  max-width:70ch;margin-left:auto;margin-right:auto}
.hud-hint b{font-family:var(--head);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:10.5px;color:var(--ember)}

/* the dream board runs on the navy band, where the plain ember loses too much
   contrast; the stage stays white because the renders have a white ground */
.hud.on-dark .hud-tab{color:var(--ember-lt);border-color:var(--ember-lt)}
.hud.on-dark .hud-tab:hover{background:rgba(224,118,58,.16)}
.hud.on-dark .hud-tab[aria-selected="true"]{background:var(--ember-lt);color:var(--navy-deep)}
.hud.on-dark .hud-tab:focus-visible{outline-color:var(--sand)}
.hud.on-dark .hud-stage{border-color:var(--hair-rev)}
.hud.on-dark .hs-note{background:var(--navy-deep)}
.hud.on-dark .hud-hint{color:var(--muted-rev)}
.hud.on-dark .hud-hint b{color:var(--ember-lt)}

@media (max-width:699px){
  /* three equal columns rather than flex: the labels are uneven and, left to
     themselves, wrap to a ragged two rows on a 375px phone */
  .hud-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
  .hud-tab{padding:12px 4px;font-size:10.5px;letter-spacing:.04em;text-align:center}
  .hud-stage{padding:10px}
  /* even at 4:3 the frame is only ~230px tall on a 375px phone, so the
     markers come down to keep clear hit areas between them */
  .hs{width:26px;height:26px}
  .hs::before{width:10px}
  .hs::after{height:10px}
  .hs-ring{inset:-6px}
  /* the notes container stops being an overlay and becomes flow content under
     the image, because nothing 252px wide fits beside a marker here. It sits
     after .hud-frame, so the stage grows and the frame does not. */
  .hud-notes{position:static;inset:auto;pointer-events:auto}
  /* relative, not static: .hs-x is absolute, and with a static note it anchors
     to .hud-stage instead and flies to the corner of the render. left/top MUST
     be reset with it — a relatively positioned box still honours them, so the
     marker's own coordinates would shove the note off the right edge. */
  .hs-note{position:relative;left:auto;top:auto;width:auto;translate:none;
    margin:0;display:none;transform:none;transition:none}
  /* .side-l/.side-r are two classes deep, so they outrank the margin:0 above
     and would hang the note 28px past the stage edge */
  .hs-note.side-l,.hs-note.side-r{margin-left:0}
  .hs-note.is-open{display:block;margin-top:14px}
}
@media (prefers-reduced-motion:reduce){
  .hs-ring{animation:none}
  .hs-note{transition:none;transform:none}
  .hs,.hud-tab{transition:none}
  .hud-tab:hover,.hs:hover{transform:none}
  .hs:hover{transform:translate(-50%,-50%)}
}

/* the "not everything is shown" caveat, between the two boards */
.buildnote{max-width:70ch;margin:clamp(26px,3.4vw,38px) auto 0;text-align:center;
  font-size:15px;line-height:1.6;color:var(--muted);
  border-top:1px solid var(--hair);padding-top:clamp(20px,2.6vw,26px)}
.buildnote em{font-style:normal;color:var(--navy);font-weight:600}

/* ======== go-overland.html — 2026-09-15 ========
   Ported from the standalone Go Overland concept page, restyled to the site:
   site colours and fonts only (no Go Overland orange or Bayon), site section
   padding, and the site's own sticky .videoband rather than the Rove band. */

/* hero: the stacked lockup and the Go Overland badge are both near-square, so
   they get plates sized to each other rather than the wordmark default */
.herologos .logoplate.sq{max-width:none;min-height:74px;padding:8px 16px;display:inline-flex;align-items:center;justify-content:center}
.herologos .logoplate.sq img{width:auto;height:auto;max-width:100%;max-height:60px}
@media (max-width:940px){ .herologos .logoplate.sq{min-height:60px} .herologos .logoplate.sq img{max-height:46px} }

/* the closing band's logo cards, same reason */
.logocard.sq{min-height:118px}
.logocard.sq img{max-height:84px}

/* the two rigs: photographs fill the frame, unlike the white trailer renders */
.mode-media.photo{padding:0;overflow:hidden}
.mode-media.photo > img{height:clamp(220px,26vw,340px);object-fit:cover}
.mode-media .inset{position:absolute;right:16px;top:16px;z-index:2;width:clamp(104px,13vw,150px);aspect-ratio:1/1;
  border:5px solid #fff;background:#fff;box-shadow:0 14px 30px -14px rgba(14,33,54,.6)}
.mode-media .inset img{width:100%;height:100%;object-fit:cover;display:block}
.mode-media .concept-tag{position:absolute;left:16px;bottom:14px;z-index:2;background:rgba(14,33,54,.82);color:#fff;
  font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:9.5px;padding:5px 9px}

/* the tent lineup */
.lineup{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px);margin-top:clamp(30px,4vw,46px)}
.tentcard{background:var(--paper);border:1px solid var(--hair);display:flex;flex-direction:column;
  transition:border-color .2s ease,transform .2s ease}
.tentcard:hover{border-color:var(--ember);transform:translateY(-3px)}
.tentcard figure{position:relative;overflow:hidden;margin:0}
.tentcard figure img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.tentcard .tbadge{position:absolute;left:12px;top:12px;background:var(--ember);color:#fff;
  font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:9.5px;padding:5px 9px}
.tentcard .tbadge.alt{background:var(--navy);left:auto;right:12px}
.tentcard .tbody{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.tentcard h3{font-size:clamp(17px,1.6vw,20px);margin-bottom:6px}
.tentcard .tmeta{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;color:var(--ember);margin-bottom:10px}
.tentcard p{font-size:14.5px;color:var(--muted);line-height:1.55}
.tentcard .tmore{margin-top:auto;padding-top:14px;font-family:var(--head);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:11px;color:var(--navy);transition:color .18s ease}
.tentcard .tmore:hover{color:var(--ember)}
.tentcard.lead{background:var(--navy);color:var(--sand);border-color:var(--navy);padding:clamp(22px,2.6vw,30px);justify-content:center}
.tentcard.lead:hover{transform:none}
.tentcard.lead h3{font-size:clamp(24px,2.4vw,32px);line-height:1.05;color:#fff;margin:14px 0 0}
.tentcard.lead h3 span{color:var(--ember-lt)}
.tentcard.lead p{color:var(--muted-rev);margin-top:14px}
.tentcard.lead .btn{margin-top:20px;align-self:flex-start}
/* the two units we are actually running: one strip at the top of the card,
   the card's border picked up to match, and the "trailer size" badge dropped
   because the strip now says it better */
.tentcard.ours{border-color:var(--ember);box-shadow:0 20px 44px -28px rgba(195,84,29,.6)}
.tentcard{position:relative}
/* the strip overlays the top of the card rather than sitting above it, so the
   picked cards' photos stay level with the rest of the row */
.tentcard.ours .picklabel{position:absolute;top:0;left:0;right:0;z-index:3;
  display:flex;align-items:center;gap:9px;background:var(--ember);color:#fff;
  font-family:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:10px;padding:11px 14px}
.tentcard.ours .tbadge{top:46px}
.tentcard.ours .picklabel::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;flex:none}
.tentcard.ours.truck{border-color:var(--navy);box-shadow:0 20px 44px -28px rgba(22,48,74,.55)}
.tentcard.ours.truck .picklabel{background:var(--navy)}
.tentcard.ours .tbadge.alt{display:none}
.tentcard .pickwhy{margin-top:12px;padding-top:11px;border-top:1px solid var(--hair);
  font-size:13.5px;line-height:1.5;color:var(--navy);font-weight:600}

.finenote{margin-top:18px;font-size:13.5px;color:var(--muted)}

/* in the box: six features on the navy partners panel */
.kit{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(244,241,222,.16);margin-top:clamp(30px,4vw,46px);border:1px solid rgba(244,241,222,.16)}
.kit div{background:var(--navy);padding:clamp(20px,2.4vw,28px)}
.kit b{display:block;font-family:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:13.5px;color:var(--ember-lt);margin-bottom:8px}
.kit p{font-size:15px;color:var(--muted-rev);line-height:1.6}

/* photo gallery with wide and single frames */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,18px);margin-top:clamp(28px,3.6vw,44px)}
.gal figure{overflow:hidden;margin:0}
.gal .g-wide{grid-column:span 2}
.gal img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.gal .g-band img{aspect-ratio:31/10} /* a wide frame sharing a row with two singles, so all three match in height */
.gal figure:hover img{transform:scale(1.05)}
.credit{margin-top:20px;font-size:13.5px;color:var(--muted)}

/* store card beside a photo, where a map would normally sit */
.storemedia{flex:1 1 auto;min-height:260px;overflow:hidden;border:1px solid var(--hair)}
.storemedia img{width:100%;height:100%;object-fit:cover;display:block}

/* footage credit on the video band */
.vb-credit{position:absolute;left:clamp(18px,3vw,40px);bottom:clamp(18px,3vw,40px);z-index:3;font-size:11.5px;letter-spacing:.06em;color:rgba(255,255,255,.66)}

@media (max-width:1100px){ .lineup{grid-template-columns:repeat(2,1fr)} }
@media (max-width:940px){ .kit{grid-template-columns:1fr} .gal{grid-template-columns:repeat(2,1fr)} .gal .g-band img{aspect-ratio:3/2} }
@media (max-width:560px){ .lineup{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .tentcard,.gal img{transition:none}
  .tentcard:hover,.gal figure:hover img{transform:none}
}

/* ======== northeastern-bc.html hero partner strip — 2026-09-15 ========
   Five marks of very different shapes: two round badges, two stacked
   wordmarks, and one very wide 7.8:1 wordmark. Equal height caps make the
   badges read half the weight of the wordmarks and squash the wide one, so
   each shape gets its own cap and every plate is the same height with a
   floor on its width. Optical match, not equal height. */
.herologos.tall{align-items:stretch}
.herologos.tall .logoplate{height:78px;min-height:0;min-width:124px;max-width:none;padding:10px 18px}
.herologos.tall .logoplate img{max-height:36px}
.herologos.tall .logoplate img.badge{max-height:58px}
.herologos.tall .logoplate img.wide{max-height:26px}
@media (max-width:620px){
  .herologos.tall .logoplate{height:60px;min-width:96px;padding:8px 13px}
  .herologos.tall .logoplate img{max-height:27px}
  .herologos.tall .logoplate img.badge{max-height:44px}
  .herologos.tall .logoplate img.wide{max-height:19px}
}

/* ============================================================
   TRIP-TYPE ICONS (sprite: img/trip-icons.svg, keys in adventure-src/trip-types.json)
   ============================================================ */
.ti{width:1.3em;height:1.3em;flex:none;display:inline-block;vertical-align:middle;color:inherit}

/* ============================================================
   OUR BACKYARD MEGA MENU — built by adventure-src/build_index.py
   Desktop: a full-width panel under the header (hover, focus or tap).
   Phone: the same links as indented rows inside the slide-in panel.
   ============================================================ */
.drop.mega .mega-m-all,.drop.mega .mega-m-latest{display:none}
@media (min-width:941px){
  .has-mega{position:static}
  .drop.mega{left:50%;width:min(1180px,calc(100vw - 40px));transform:translate(-50%,8px);padding:0;
    transition:opacity .2s ease,transform .2s ease,visibility 0s linear .18s}
  .has-mega:hover .drop.mega,.has-mega:focus-within .drop.mega,.has-mega.is-open .drop.mega{
    opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s ease,transform .2s ease,visibility 0s}
  .has-mega.is-closed .drop.mega{opacity:0;visibility:hidden}
  .has-mega.is-open .caret{transform:rotate(180deg)}
  /* invisible bridge over the header padding, so the pointer can travel from the link to the panel */
  .drop.mega::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:30px}
  .drop.mega a,.drop.mega a:hover{display:block;padding:0;border-left:0;background:none;font-size:inherit}
  .mega-in{display:grid;grid-template-columns:minmax(0,1fr) 340px}
  .mega-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:30px 12px 26px}
  .mega-col{padding:0 24px;border-left:1px solid var(--hair);display:flex;flex-direction:column}
  .mega-col:first-child{border-left:none}
  .drop.mega .mega-region{margin-bottom:14px}
  .mega-region .rprov{font-size:10px}
  .mega-region b{display:block;font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:18px;line-height:1.1;color:var(--navy);margin:6px 0 4px;transition:color .18s ease}
  .drop.mega .mega-region:hover b{color:var(--ember)}
  .mega-tag{display:block;font-size:13px;color:var(--muted)}
  .mega-list{list-style:none;border-top:1px solid var(--hair);margin-bottom:14px}
  .mega-list li{border-bottom:1px solid var(--hair)}
  .drop.mega .mega-list a,.mega-soon{display:flex;align-items:center;gap:11px;padding:9px 2px;font-size:15px;color:var(--navy);transition:color .16s ease,transform .16s ease}
  .mega-list .ti{width:24px;height:24px}
  .drop.mega .mega-list a:hover{color:var(--ember);transform:translateX(3px)}
  .mega-list .is-soon .mega-soon{color:var(--muted);cursor:default}
  .mega-list .is-soon .ti,.mega-list .is-soon span{opacity:.55}
  .mega-list em{margin-left:auto;font-style:normal;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:9.5px;padding:3px 7px;white-space:nowrap}
  .mega-list .is-soon em{color:var(--muted);border:1px solid var(--hair)}
  .mega-list .mega-new{background:var(--ember);color:#fff}
  .drop.mega .mega-all{margin-top:4px;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;color:var(--ember)}
  .drop.mega .mega-all:hover{color:var(--navy)}
  .mega-feature{background:var(--sand);padding:22px 22px 20px;display:flex;flex-direction:column}
  .mega-img{display:block;overflow:hidden;background:var(--hair)}
  .mega-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
  .mega-latest .mega-img{aspect-ratio:16/10}
  .drop.mega .mega-latest:hover img,.drop.mega .mega-small:hover img{transform:scale(1.05)}
  .mega-latest-body{display:block;padding-top:12px}
  .mega-latest-body b,.mega-small b{display:block;font-family:var(--head);font-weight:800;text-transform:uppercase;color:var(--navy);line-height:1.1}
  .mega-latest-body b{font-size:19px;margin:5px 0 4px}
  .mega-meta{display:block;font-size:13px;color:var(--muted)}
  .mega-icons{display:flex;gap:8px;margin-top:10px;color:var(--navy)}
  .mega-icons .ti{width:24px;height:24px}
  .mega-also{display:block;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--muted);margin:18px 0 8px;padding-top:14px;border-top:1px solid var(--hair)}
  .mega-smalls{display:grid;gap:10px}
  .drop.mega .mega-small{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center}
  .mega-small .mega-img{aspect-ratio:4/3}
  .mega-small b{font-size:13.5px;margin-top:3px}
  .mega-small .rprov{font-size:9.5px}
  .mega-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 36px;background:var(--navy);color:var(--sand)}
  .drop.mega .mega-foot a{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--ember-lt)}
  .drop.mega .mega-foot a:hover{color:#fff}
  .mega-foot span{font-size:12.5px;color:var(--muted-rev)}
}
@media (max-width:940px){
  .has-drop.open .drop.mega{max-height:1400px}
  .drop.mega .mega-m-all{display:block}
  .drop.mega .mega-m-latest{display:flex;align-items:center;gap:10px}
  .mega-m-latest .ti{width:20px;height:20px}
  .mega-feature,.mega-foot,.mega-tag{display:none}
  .mega-col{padding:6px 0 10px}
  .drop.mega .mega-region{display:block;padding:12px 34px 6px}
  .mega-region .rprov{display:none}
  .mega-region b{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:var(--sand)}
  .mega-list{list-style:none}
  .drop.mega .mega-list a,.mega-soon{display:flex;align-items:center;gap:10px;padding:9px 34px 9px 48px;font-size:14px;color:var(--sand)}
  .mega-list .ti{width:20px;height:20px}
  .mega-list .is-soon .mega-soon{opacity:.5}
  .mega-list em{margin-left:auto;padding-left:10px;font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.85;white-space:nowrap}
  .drop.mega .mega-all{padding:6px 34px 6px 48px;font-size:12.5px;color:var(--ember-lt)}
}
@media (prefers-reduced-motion:reduce){
  .drop.mega,.mega-img img,.drop.mega .mega-list a{transition:none!important}
  .drop.mega .mega-list a:hover{transform:none}
}

/* seven social marks (AllTrails added) no longer fit one row on a phone */
.foot-soc,.social-row{flex-wrap:wrap}
@media (max-width:600px){ .foot-soc{justify-content:flex-start;row-gap:12px} }