/* ============================================================
   POLAR — structural rebuild. Tokens mirror the reference system:
   dark-blue text on white, Oswald display, serif headings,
   Inter Tight UI, 2px pill radius, 0.2-alpha glass pills.
   ============================================================ */
:root{
  --bg:#fff;
  --dark-blue:#1f2a44;
  --deep-blue:#0e1118;
  --ash-blue:#2c374b;
  --grey:#323640;
  --orange:#ff7e15;
  --turquoise:#6af0ff;
  --mushroom:#e9e7e1;
  --light-grey:#f3f1ec;
  --beige:#dcd8cc;
  --white:#fff;
  --blue-faded:rgba(31,42,68,.2);
  --blue-faded-15:rgba(31,42,68,.15);
  --blue-half:rgba(31,42,68,.5);

  --font-ui:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-serif:"Cormorant Garamond",ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;
  --font-display:"Oswald","Arial Narrow",Arial,sans-serif;

  /* vw-based fluid scale — reference renders 14.22px body @1280 = 1.111vw */
  --fs-body:clamp(13px,1.111vw,18px);
  --fs-h3:clamp(24px,2.917vw,44px);      /* 37.33 @1280 */
  --fs-h3-lg:clamp(32px,4.167vw,64px);   /* 53.33 @1280 */
  --fs-h2:clamp(18px,1.875vw,28px);      /* 24 @1280 */
  --fs-hero:17.778vw;                    /* 227.5 @1280 */
  --fs-route:22.222vw;                   /* 284.4 @1280 */

  --space-large:22.222vw;                /* 284.4 @1280 */
  --space-medium:11.111vw;               /* 142.2 @1280 */
  --gutter:clamp(16px,2.5vw,40px);
  --nav-h:71px;
  --radius:2px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--dark-blue);
  font-family:var(--font-ui);font-size:var(--fs-body);line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,p,blockquote,ol{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
ol{padding:0;list-style:none}

.grain{
  position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- placeholder imagery (gradient "photographs") ---------- */
.img{background-size:cover;background-position:center;position:relative}
.img--ridge{background:linear-gradient(180deg,#c9d3dc 0%,#eef2f5 45%,#8d9aa8 46%,#3d4a5c 100%)}
.img--tunnel{background:radial-gradient(120% 80% at 50% 100%,#0e5f8f 0%,#0a2e4d 45%,#050f1c 100%)}
.img--pole{background:linear-gradient(180deg,#dfe8f0 0%,#f6f8fa 55%,#c2ccd6 56%,#5a6a7c 100%)}
.img--river{background:linear-gradient(160deg,#e6eef4 0%,#9fc3dc 50%,#1e5f8c 100%)}
.img--long{background:linear-gradient(180deg,#f2f5f7 0%,#cbd5de 50%,#2c374b 100%)}
.img--day{background:linear-gradient(180deg,#8fb7d6 0%,#e8f0f6 60%,#9aa9b8 100%)}
.img--night{background:radial-gradient(90% 60% at 50% 20%,#2c374b 0%,#0e1118 70%)}
.img--rock{background:linear-gradient(175deg,#e8ecef 0%,#a7b0b9 40%,#3a3f47 41%,#1f2429 100%)}
.img--pod{background:linear-gradient(180deg,#d7e1ea 0%,#f4f7f9 60%,#6a7684 61%,#2f3843 100%)}
.img--chalet{background:linear-gradient(180deg,#e9eff4 0%,#b9c5d0 55%,#5b4a3a 56%,#2a241f 100%)}
.img--berg{background:linear-gradient(180deg,#0e1118 0%,#1f2a44 40%,#6f8aa8 100%)}

/* ---------- pills ---------- */
.pill{
  display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 1em;
  border-radius:var(--radius);font-size:var(--fs-body);font-weight:400;color:var(--white);
  background:var(--blue-faded);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  white-space:nowrap;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.pill:hover{background:var(--white);color:var(--dark-blue)}
.pill--solid{background:var(--blue-faded-15)}
.pill--ghost{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35)}
.pill--dark{background:var(--dark-blue);color:var(--white)}
.pill--dark:hover{background:var(--deep-blue);color:var(--white)}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:50;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gutter);
  color:var(--white);transition:color .4s var(--ease);
}
.nav__col{display:flex;gap:.5em}
.nav__col--right{justify-content:flex-end}
.nav__logo{display:block;line-height:0}
.nav.is-dark{color:var(--dark-blue)}
.nav.is-dark .pill{color:var(--dark-blue);background:var(--blue-faded-15)}
.nav.is-dark .pill:hover{background:var(--dark-blue);color:var(--white)}

/* ---------- hero ---------- */
.hero{position:relative;height:200vh;color:var(--white)}
.hero__media{position:sticky;top:0;height:100vh;overflow:hidden;background:#b9c4cf}
.hero__video,.hero__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__fallback{background:linear-gradient(180deg,#8796a6 0%,#c7d1da 40%,#eef2f5 100%)}
.hero__fog{
  position:absolute;inset:-20% -30%;pointer-events:none;
  background:radial-gradient(60% 45% at 30% 60%,rgba(255,255,255,.95),transparent 70%),
             radial-gradient(50% 40% at 75% 50%,rgba(255,255,255,.85),transparent 70%);
  filter:blur(24px);
}
.hero__fog--a{animation:drift 26s ease-in-out infinite alternate}
.hero__fog--b{animation:drift 34s ease-in-out infinite alternate-reverse;opacity:.8}
@keyframes drift{from{transform:translate3d(-4%,2%,0) scale(1)}to{transform:translate3d(4%,-3%,0) scale(1.08)}}

.hero__top{
  position:absolute;top:calc(var(--nav-h) + 3vw);left:0;right:0;padding:0 var(--gutter);
  display:flex;justify-content:space-between;align-items:center;gap:2em;z-index:2;
}
.hero__tag{font-family:var(--font-serif);font-weight:500;font-size:clamp(15px,1.25vw,20px);max-width:32ch}
.hero__word{
  position:absolute;left:0;right:0;bottom:-.14em;text-align:center;z-index:2;
  font-family:var(--font-display);font-weight:400;font-size:var(--fs-hero);line-height:1;
  text-transform:uppercase;letter-spacing:-.01em;color:var(--white);
  will-change:transform;
}

/* ---------- intro ---------- */
.intro{padding:var(--space-medium) var(--gutter);text-align:center;max-width:64ch;margin:0 auto}
.eyebrow{font-family:var(--font-ui);font-size:var(--fs-body);text-transform:uppercase;letter-spacing:.14em;font-weight:500}
.eyebrow--serif{font-family:var(--font-serif);text-transform:none;letter-spacing:0;font-size:clamp(15px,1.25vw,20px)}
.eyebrow--light{color:rgba(255,255,255,.75)}
.intro__lede{font-family:var(--font-serif);font-weight:500;font-size:var(--fs-h3);line-height:1.15;text-transform:uppercase;margin-top:2em}
.intro__rule{width:1px;height:6vw;background:var(--blue-half);margin:3em auto 0}

/* ---------- season ---------- */
.season{position:relative;height:84.375vw;min-height:520px;color:var(--dark-blue)}
.season__img{position:absolute;inset:0}
.season__body{position:absolute;left:var(--gutter);right:var(--gutter);top:12%;max-width:48ch}
.season__text{font-family:var(--font-serif);font-weight:500;font-size:clamp(18px,1.6vw,26px);line-height:1.35;margin-top:1.5em}

/* ---------- trips ---------- */
.trips-head{background:var(--white);padding:var(--space-large) var(--gutter) var(--space-medium);text-align:center}
.display-serif{font-family:var(--font-serif);font-weight:500;font-size:var(--fs-h3-lg);text-transform:uppercase;line-height:1.05}
.trips{overflow:hidden}
.trips__track{
  display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;cursor:grab;
  scrollbar-width:none;-ms-overflow-style:none;
}
.trips__track::-webkit-scrollbar{display:none}
.trips__track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.trip{
  flex:0 0 49.14vw;min-width:320px;height:47.8vw;min-height:420px;scroll-snap-align:start;
  color:var(--white);padding:1.75em;display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;
}
.trip__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,17,24,.35),transparent 30%,transparent 55%,rgba(14,17,24,.7));pointer-events:none}
.trip__top,.trip__bottom{position:relative;z-index:1}
.trip__top{display:flex;justify-content:space-between;align-items:flex-start;gap:1em}
.trip__title{font-family:var(--font-serif);font-weight:500;font-size:var(--fs-h3);line-height:1.05;max-width:12ch}
.trip__season{font-size:var(--fs-body);text-transform:uppercase;letter-spacing:.1em;padding-top:.5em;white-space:nowrap}
.trip__price{font-family:var(--font-serif);font-weight:500;font-size:clamp(18px,1.6vw,26px)}
.trip__desc{max-width:46ch;margin-top:.75em;opacity:.9}

/* ---------- quote ---------- */
.quote{padding:var(--space-large) var(--gutter);text-align:center;max-width:70ch;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.quote__mark{font-family:var(--font-serif);font-size:clamp(48px,6vw,96px);line-height:.6;color:var(--dark-blue);margin-bottom:.4em}
.quote__text{font-family:var(--font-serif);font-weight:500;font-size:clamp(20px,2.1vw,34px);line-height:1.3}
.quote__text--sm{font-size:clamp(18px,1.8vw,28px)}
.quote__dash{margin:2em 0 .75em;opacity:.6}
.quote__name{text-transform:uppercase;letter-spacing:.14em;font-weight:500}
.quote__role{opacity:.6;margin-top:.25em}

/* ---------- pinned horizontal scroll ---------- */
.hscroll{position:relative;color:var(--white)}
.hscroll__sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--deep-blue)}
.hscroll__track{display:flex;height:100%;will-change:transform}
.panel{flex:0 0 100vw;height:100%;position:relative;overflow:hidden}
.panel__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,17,24,.1),rgba(14,17,24,.75))}
.panel__scrim--dark{background:linear-gradient(180deg,rgba(14,17,24,.5),rgba(14,17,24,.85))}
.panel__body{position:absolute;left:var(--gutter);right:var(--gutter);bottom:8vh;max-width:56ch}
.panel__title{font-family:var(--font-serif);font-weight:500;font-size:var(--fs-h3);text-transform:uppercase;line-height:1.05;margin:.5em 0 .75em}
.panel__text{font-family:var(--font-serif);font-weight:500;font-size:clamp(16px,1.35vw,22px);line-height:1.4}

.panel--camp{background:var(--deep-blue)}
.camp{height:100%;display:grid;grid-template-columns:47.2vw 41.6vw;gap:6vw;align-items:center;padding:0 var(--gutter)}
.camp__img{height:34.7vw;min-height:280px;border-radius:var(--radius)}
.camp__title{font-family:var(--font-serif);font-weight:500;font-size:var(--fs-h3);text-transform:uppercase;line-height:1.05}
.camp__text{font-family:var(--font-serif);font-weight:500;font-size:clamp(16px,1.35vw,22px);line-height:1.4;margin-top:1em;max-width:36ch}
.camp__coord{margin-top:2em;letter-spacing:.06em;opacity:.7}

.panel--quote{background:var(--deep-blue);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gutter)}
.panel--quote .quote__mark{color:var(--white)}
.panel--quote .quote__text{max-width:44ch}

.panel--route{color:var(--white)}
.route__word{
  position:absolute;left:0;right:0;bottom:-.14em;text-align:center;
  font-family:var(--font-display);font-weight:400;font-size:var(--fs-route);line-height:1;
  text-transform:uppercase;letter-spacing:-.02em;opacity:.9;pointer-events:none;
}
.route__corner{position:absolute;padding:var(--gutter)}
.route__corner--tl{top:var(--nav-h);left:0}
.route__corner--br{top:var(--nav-h);right:0;text-align:right}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.06em;opacity:.8}
.route__place{font-family:var(--font-serif);font-size:clamp(16px,1.35vw,22px);margin-top:.25em}
.route__centre{position:absolute;left:var(--gutter);top:36%;max-width:44ch}

.panel--map{background:var(--deep-blue)}
.map{height:100%;position:relative;padding:calc(var(--nav-h) + 2vw) var(--gutter) 6vh;display:grid;grid-template-columns:1fr 24vw;gap:4vw;align-items:center}
.map__svg{width:100%;height:auto;max-height:78vh;border-radius:var(--radius)}
.map__route{stroke-dashoffset:0;animation:dash 6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-100}}
.map__stats{display:flex;flex-direction:column;gap:2em}
.stat__label{text-transform:uppercase;letter-spacing:.14em;opacity:.6;font-size:.9em}
.stat__value{font-family:var(--font-serif);font-weight:500;font-size:clamp(22px,2.4vw,40px);line-height:1.1;margin-top:.3em}
.map__film{position:absolute;right:var(--gutter);bottom:6vh}

.panel--cta{background:var(--white);color:var(--dark-blue);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5em;text-align:center;padding:0 var(--gutter)}

/* ---------- flyout ---------- */
.flyout{position:fixed;top:0;right:0;bottom:0;z-index:55;pointer-events:none}
.flyout__tab{
  position:absolute;right:0;top:50%;transform:translateY(-50%);pointer-events:auto;
  background:var(--orange);color:var(--white);writing-mode:vertical-rl;
  padding:1.25em .6em;border-radius:var(--radius) 0 0 var(--radius);
  display:flex;align-items:center;gap:.75em;font-size:var(--fs-body);letter-spacing:.06em;
  transition:transform .5s var(--ease),background .3s;
}
.flyout__tab:hover{background:#ff9640}
.flyout__tab-arrow{display:inline-block;transform:rotate(180deg);transition:transform .4s var(--ease)}
.flyout.is-open .flyout__tab{transform:translate(-50vw,-50%)}
.flyout.is-open .flyout__tab-arrow{transform:rotate(0)}
.flyout__panel{
  position:absolute;top:0;right:0;bottom:0;width:50vw;min-width:320px;max-width:720px;
  background:var(--light-grey);color:var(--dark-blue);pointer-events:auto;
  transform:translateX(100%);transition:transform .6s var(--ease);
  overflow-y:auto;padding:var(--nav-h) 3vw 4vw;
}
.flyout.is-open .flyout__panel{transform:translateX(0)}
.flyout__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2.5em}
.flyout__title{font-family:var(--font-serif);font-weight:500;font-size:clamp(20px,2.2vw,32px);text-transform:uppercase}
.flyout__close{text-decoration:underline;text-underline-offset:.3em}
.steps{display:flex;flex-direction:column;gap:2em}
.step__title{font-family:var(--font-serif);font-weight:600;font-size:clamp(15px,1.25vw,18px)}
.step__text{margin-top:.5em;max-width:60ch;color:var(--grey)}
.flyout__backdrop{position:fixed;inset:0;background:rgba(14,17,24,.35);opacity:0;pointer-events:none;transition:opacity .5s}
.flyout.is-open ~ .flyout__backdrop{opacity:1;pointer-events:auto}

/* ---------- footer ---------- */
.footer{background:var(--white);color:var(--dark-blue);padding:var(--space-medium) var(--gutter) 3vw}
.footer__grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:3vw}
.footer__col{display:flex;flex-direction:column;gap:.45em}
.footer__col a{transition:opacity .2s}
.footer__col a:hover{opacity:.55}
.footer__label{text-transform:uppercase;letter-spacing:.14em;font-weight:500;opacity:.5;margin:1.6em 0 .6em}
.footer__col .footer__label:first-child{margin-top:0}
.footer__link-ul{text-decoration:underline;text-underline-offset:.3em}
.footer__bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:var(--space-medium);padding-top:2em;border-top:1px solid var(--blue-faded)}
.footer__legal{display:flex;gap:2em;opacity:.6}

/* ---------- film modal ---------- */
.film{position:fixed;inset:0;z-index:70;background:rgba(14,17,24,.96);display:grid;place-items:center;padding:4vw}
.film[hidden]{display:none}
.film__close{position:absolute;top:var(--gutter);right:var(--gutter)}
.film__frame{width:min(90vw,1400px);aspect-ratio:16/9;background:#000;position:relative;display:grid;place-items:center}
.film__video{width:100%;height:100%;object-fit:cover}
.film__placeholder{position:absolute;color:rgba(255,255,255,.6);font-family:var(--font-serif);font-size:1.3em}

/* ---------- cookie ---------- */
.cookie{
  position:fixed;left:50%;bottom:1.5vw;transform:translateX(-50%);z-index:58;
  background:var(--white);color:var(--dark-blue);box-shadow:0 8px 40px rgba(14,17,24,.18);
  padding:1em 1.25em;display:flex;align-items:center;gap:2em;max-width:min(92vw,720px);border-radius:var(--radius);
  transition:opacity .4s,transform .4s var(--ease);
}
.cookie a{text-decoration:underline;text-underline-offset:.25em}
.cookie__actions{display:flex;gap:.5em}
.cookie .pill{color:var(--dark-blue);background:var(--blue-faded-15);border:0}
.cookie .pill:hover{background:var(--dark-blue);color:var(--white)}
.cookie.is-hidden{opacity:0;transform:translate(-50%,20px);pointer-events:none}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].is-visible{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav{grid-template-columns:auto 1fr auto}
  .nav__col--left .pill:not(:first-child){display:none}
  .hero{height:150vh}
  .hero__top{flex-direction:column;align-items:flex-start;gap:1em}
  .season{height:auto;min-height:100vh;padding-bottom:12vw}
  .season__body{position:relative;top:auto;padding-top:12vw}
  .trip{flex-basis:84vw;height:110vw}
  .camp{grid-template-columns:1fr;gap:5vw;align-content:center}
  .camp__img{height:46vw}
  .map{grid-template-columns:1fr;padding-top:var(--nav-h)}
  .map__stats{flex-direction:row;flex-wrap:wrap;gap:1.5em 2.5em}
  .map__film{position:static;margin-top:1em}
  .route__centre{top:auto;bottom:30%}
  .flyout__panel{width:100vw;max-width:none}
  .flyout.is-open .flyout__tab{transform:translate(-100vw,-50%)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__col--contact{grid-column:1/-1}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:1.5em}
  .cookie{flex-direction:column;align-items:flex-start;gap:1em}
}

@media (prefers-reduced-motion:reduce){
  .hero__fog--a,.hero__fog--b,.map__route{animation:none}
  [data-reveal]{opacity:1;transform:none;transition:none}
}