/* Layout: full-bleed photography and video carry the page; type sits on the image or on quiet white space beside it. One bold moment: the full-screen opening film. */
:root{
  --night:#0F2236;      /* deep alpine blue: dark bands, text */
  --snow:#FFFFFF;       /* page */
  --frost:#EDF1F3;      /* quiet alternate band */
  --slate:#5A6773;      /* secondary text on light */
  --line:#D6DDE2;       /* hairlines on light */
  --mist:#B9C6D1;       /* secondary text on dark */
  --glacier:#2F6FA3;    /* links and focus */

  --font-display:"Funnel Display","Helvetica Neue",Arial,sans-serif;
  --font-text:"Funnel Sans","Helvetica Neue",Arial,sans-serif;

  --t-hero:clamp(2.55rem,6.1vw,5.6rem);
  --t-1:clamp(2.1rem,4vw,3.6rem);
  --t-2:clamp(1.65rem,2.8vw,2.5rem);
  --t-3:1.45rem;
  --t-body:1.0625rem;
  --t-small:.9rem;

  --gutter:max(20px,env(safe-area-inset-left,0px));
  --gutter-r:max(20px,env(safe-area-inset-right,0px));
  --max:1320px;
  color-scheme:light;
}
@media (min-width:900px){:root{--gutter:max(48px,env(safe-area-inset-left,0px));--gutter-r:max(48px,env(safe-area-inset-right,0px))}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--snow);color:var(--night);font-family:var(--font-text);font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:90;background:var(--night)}
h1,h2,h3,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
h1,h2,h3{font-family:var(--font-display);font-weight:300;text-wrap:balance;letter-spacing:-.02em}
a{color:inherit}
img,video{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--glacier);outline-offset:3px}
.on-dark :focus-visible{outline-color:#fff}

.wrap{max-width:var(--max);margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;font-family:var(--font-text);font-weight:600;font-size:1rem;text-decoration:none;border:1.5px solid transparent;transition:background-color .2s,color .2s,border-color .2s;white-space:nowrap}
.btn-light{background:#fff;color:var(--night)}
.btn-light:hover{background:var(--frost)}
.btn-dark{background:var(--night);color:#fff}
.btn-dark:hover{background:#1B3A58}
.btn-line{border-color:currentColor}
.btn-line:hover{background:rgba(255,255,255,.12)}
.text-link{font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.text-link:hover{text-decoration-thickness:2.5px}

/* ---------- Header ---------- */
.site-header{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:80;color:#fff;transition:background-color .3s,color .3s,box-shadow .3s}
.site-header.is-solid{background:rgba(255,255,255,.97);color:var(--night);box-shadow:0 1px 0 var(--line)}
.header-row{display:flex;align-items:center;gap:32px;height:76px}
.wordmark{text-decoration:none;font-family:var(--font-display);font-weight:500;font-size:1.2rem;letter-spacing:-.01em;margin-right:auto;line-height:1.1}
.wordmark small{display:block;font-family:var(--font-text);font-weight:400;font-size:.8rem;letter-spacing:0;opacity:.75}
.main-nav{display:none;gap:30px}
.main-nav a{text-decoration:none;font-size:.95rem;font-weight:500;padding-block:8px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .25s}
.main-nav a:hover,.main-nav a[aria-current="page"]{background-size:100% 1.5px}
.header-cta{display:none;min-height:44px;padding:0 22px;font-size:.95rem}
.site-header .header-cta{background:#fff;color:var(--night)}
.site-header.is-solid .header-cta{background:var(--night);color:#fff}
.menu-toggle{display:inline-flex;align-items:center;gap:10px;background:none;border:0;color:inherit;font:600 1rem var(--font-text);cursor:pointer;padding:10px 0}
.menu-toggle span{display:grid;gap:5px}
.menu-toggle span i{display:block;width:22px;height:1.5px;background:currentColor}
@media (min-width:1080px){.main-nav{display:flex}.header-cta{display:inline-flex}.menu-toggle{display:none}}

.menu-panel{position:fixed;inset:0;z-index:100;background:var(--night);color:#fff;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:max(24px,env(safe-area-inset-bottom,0px))}
.menu-panel > .wrap{width:100%}
.menu-panel .header-row{flex:none}
.menu-panel nav{flex:1;display:flex;align-items:center}
.menu-panel ul{display:grid;gap:6px}
.menu-panel nav a{font-family:var(--font-display);font-weight:300;font-size:clamp(2rem,9vw,3.2rem);letter-spacing:-.02em;text-decoration:none;line-height:1.2}
.menu-panel nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.menu-panel .menu-contact{color:var(--mist);font-size:var(--t-small)}

/* ---------- Media slots (placeholders until Jean's photos and films arrive) ---------- */
.slot{position:relative;overflow:hidden;background:#C9D6DF;max-width:100%}
.slot > img,.slot > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot-snow{background:linear-gradient(170deg,#BFD3E2 0%,#DCE6EE 48%,#F1F5F8 100%);color:var(--night)}
.slot-night{background:radial-gradient(120% 90% at 70% 20%,#2A4C6E 0%,#16304A 45%,#0C1C2D 100%);color:#fff}
.slot-stone{background:linear-gradient(160deg,#D9D6D0 0%,#C7C9C9 55%,#B4BBC1 100%);color:var(--night)}
.slot-note{position:absolute;display:grid;gap:6px;max-width:300px;padding:16px 18px;border-radius:14px;font-size:.84rem;line-height:1.45;z-index:1}
.slot-snow .slot-note,.slot-stone .slot-note{background:rgba(255,255,255,.72);backdrop-filter:blur(6px)}
.slot-night .slot-note{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.slot-note strong{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem}
.slot-note svg{width:18px;height:18px;flex:none}
.slot-note span{opacity:.82}
.note-center{left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 40px)}
.note-top-right{top:max(96px,calc(env(safe-area-inset-top,0px) + 96px));right:var(--gutter-r)}
.note-top-left{top:20px;left:20px;width:calc(100% - 40px)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;min-height:100vh;display:flex;align-items:flex-end;color:#fff;isolation:isolate}
@supports (min-height:100svh){.hero{min-height:100svh}}
.hero .slot{position:absolute;inset:0;z-index:-1}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,20,32,.42) 0%,rgba(8,20,32,0) 22%,rgba(8,20,32,0) 38%,rgba(8,20,32,.72) 100%)}
@media (min-width:900px){.hero::after{background:
  linear-gradient(180deg,rgba(8,20,32,.4) 0%,rgba(8,20,32,0) 22%),
  linear-gradient(90deg,rgba(8,20,32,.62) 0%,rgba(8,20,32,.38) 42%,rgba(8,20,32,0) 68%),
  linear-gradient(180deg,rgba(8,20,32,0) 55%,rgba(8,20,32,.45) 100%)}}
.hero .slot img{object-position:72% 50%}
.hero h1,.hero-sub{text-shadow:0 1px 24px rgba(8,20,32,.35)}
.hero-content{width:100%;padding-block:140px clamp(40px,7vh,88px);display:grid;gap:28px}
.hero h1{font-size:var(--t-hero);line-height:1.02}
.hero h1 .line{display:block;animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero h1 .line:nth-child(2){animation-delay:.08s}
.hero h1 .line:nth-child(3){animation-delay:.16s}
.hero-sub{font-size:clamp(1.05rem,1.4vw,1.25rem);max-width:44ch;color:rgba(255,255,255,.88);animation:rise .9s .24s cubic-bezier(.2,.7,.2,1) both}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;animation:rise .9s .32s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:.001;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero h1 .line,.hero-sub,.hero-actions{animation:none}}

/* ---------- Intro statement ---------- */
.intro{padding-block:clamp(80px,12vw,160px)}
.intro-grid{display:grid;gap:clamp(40px,6vw,96px);align-items:end}
@media (min-width:960px){.intro-grid{grid-template-columns:1.25fr .75fr}}
.statement{font-family:var(--font-display);font-weight:300;font-size:var(--t-2);line-height:1.18;letter-spacing:-.015em;max-width:24ch;text-wrap:pretty}
.intro-text{display:grid;gap:20px;max-width:52ch;color:var(--slate);margin-top:32px}
.intro-text .text-link{color:var(--night);justify-self:start}
.intro .slot{aspect-ratio:4/5;border-radius:4px}

/* ---------- Two paths ---------- */
.paths{display:grid}
@media (min-width:820px){.paths{grid-template-columns:1fr 1fr}}
.path{position:relative;display:flex;align-items:flex-end;min-height:min(92vh,880px);color:#fff;text-decoration:none;isolation:isolate;overflow:hidden}
@media (max-width:819px){.path{min-height:78vh}}
.path .slot{position:absolute;inset:0;z-index:-1;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.path:hover .slot{transform:scale(1.03)}
.path::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,20,32,0) 40%,rgba(8,20,32,.66) 100%)}
.path-body{display:grid;gap:12px;padding:clamp(28px,4vw,56px);max-width:520px}
.path h2{font-size:var(--t-1);line-height:1.02}
.path p{color:rgba(255,255,255,.88);max-width:36ch}
.path .go{font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;margin-top:6px}

/* ---------- Method gallery ---------- */
.method{padding-block:clamp(80px,11vw,150px)}
.method-head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px)}
@media (min-width:960px){.method-head{grid-template-columns:1fr 1fr;align-items:end}}
.method-head h2{font-size:var(--t-1);line-height:1.04;max-width:14ch}
.method-head p{color:var(--slate);max-width:46ch}
.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,78%);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin;padding-left:var(--gutter);padding-right:var(--gutter-r);scroll-padding-left:var(--gutter)}
@media (min-width:900px){.gallery{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;max-width:var(--max);margin-inline:auto}}
.tile{scroll-snap-align:start;display:grid;gap:16px;min-width:0}
.tile .slot{aspect-ratio:3/4;border-radius:4px}
.tile h3{font-size:var(--t-3);font-weight:400}
.tile p{color:var(--slate);font-size:var(--t-small);margin-top:4px;max-width:30ch}

/* ---------- Film band ---------- */
.film{background:var(--night);color:#fff;padding-block:clamp(80px,11vw,150px)}
.film-grid{display:grid;gap:clamp(32px,5vw,72px);align-items:center}
@media (min-width:1000px){.film-grid{grid-template-columns:.7fr 1.3fr}}
.film h2{font-size:var(--t-1);line-height:1.04}
.film-copy{display:grid;gap:20px}
.film-copy p{color:var(--mist);max-width:40ch}
.film .slot{aspect-ratio:4/5;border-radius:4px;max-height:780px;width:100%}
@media (min-width:1000px){.film .slot{aspect-ratio:16/11}}
.play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);display:grid;place-items:center;z-index:1}
.play::before{content:"";margin-left:6px;border-left:22px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent}
.film .slot .note-top-left{width:auto;max-width:300px}

/* ---------- Plans ---------- */
.plans{background:var(--frost);padding-block:clamp(80px,11vw,150px)}
.plans-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 40px;margin-bottom:clamp(40px,5vw,72px)}
.plans-head h2{font-size:var(--t-1);line-height:1.04;max-width:13ch}
.plans-head p{color:var(--slate);max-width:40ch}
.plan-row{display:grid;gap:0;border-top:1.5px solid var(--night)}
@media (min-width:900px){.plan-row{grid-template-columns:repeat(3,1fr)}}
.plan{display:grid;gap:14px;align-content:start;padding:28px 0 36px;border-bottom:1px solid var(--line)}
@media (min-width:900px){.plan{padding:32px 36px 8px 0;border-bottom:0}.plan + .plan{padding-left:36px;border-left:1px solid var(--line)}}
.plan h3{font-size:clamp(2rem,3vw,2.6rem);font-weight:400;line-height:1}
.plan .for{font-weight:600}
.plan ul{display:grid;gap:8px;color:var(--slate);font-size:var(--t-small)}
.plan .price{font-size:var(--t-small);color:var(--slate);margin-top:6px}
.plans-foot{margin-top:clamp(36px,5vw,56px);display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}

/* ---------- Closing image ---------- */
.closing{position:relative;min-height:min(86vh,820px);display:flex;align-items:center;color:#fff;isolation:isolate;text-align:center}
.closing .slot{position:absolute;inset:0;z-index:-1}
.closing::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(8,20,32,.35)}
.closing-body{display:grid;gap:28px;justify-items:center;width:100%}
.closing h2{font-size:var(--t-hero);line-height:1.02;max-width:14ch}

/* ---------- Footer ---------- */
.site-footer{background:var(--night);color:#fff;padding-block:clamp(64px,8vw,100px) max(32px,env(safe-area-inset-bottom,0px))}
.footer-top{display:grid;gap:48px}
@media (min-width:900px){.footer-top{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.footer-brand .wordmark{font-size:1.5rem}
.footer-brand p{color:var(--mist);margin-top:14px;max-width:32ch;font-size:var(--t-small)}
.site-footer h2{font-family:var(--font-text);font-weight:600;font-size:.95rem;letter-spacing:0;margin-bottom:14px}
.site-footer ul{display:grid;gap:10px;font-size:var(--t-small);color:var(--mist)}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.footer-bottom{margin-top:64px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;font-size:.84rem;color:var(--mist)}
.selectable{user-select:all}

/* ===================== Inner pages ===================== */
[hidden]{display:none!important}
.hero--page{min-height:min(80vh,780px)}
@supports (min-height:100svh){.hero--page{min-height:min(80svh,780px)}}
.hero--page h1{font-size:var(--t-hero);line-height:1.02;max-width:12ch}

/* Text-only page header (pages without an opening image) */
.page-head{padding-top:calc(76px + env(safe-area-inset-top,0px) + clamp(48px,8vw,104px));padding-bottom:clamp(40px,6vw,80px)}
.page-head h1{font-size:var(--t-hero);line-height:1.02;max-width:14ch}
.page-head .lead{margin-top:24px;font-size:clamp(1.1rem,1.5vw,1.3rem);color:var(--slate);max-width:52ch;line-height:1.5}
.band-frost{background:var(--frost)}

/* Generic section rhythm */
.block{padding-block:clamp(72px,10vw,140px)}
.block-head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px)}
@media (min-width:960px){.block-head{grid-template-columns:1fr 1fr;align-items:end}}
.block-head h2{font-size:var(--t-1);line-height:1.04;max-width:15ch}
.block-head p{color:var(--slate);max-width:46ch}
.on-dark .block-head p{color:var(--mist)}

/* Numbered process (real sequence) */
.process{display:grid;gap:0;border-top:1.5px solid var(--night)}
@media (min-width:760px){.process{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.process{grid-template-columns:repeat(3,1fr)}}
.process li{display:grid;gap:10px;align-content:start;padding:28px 28px 36px 0;border-bottom:1px solid var(--line);counter-increment:step}
.process{counter-reset:step}
.process li::before{content:counter(step);font-family:var(--font-display);font-weight:300;font-size:2.6rem;line-height:1;color:var(--glacier)}
.process h3{font-size:var(--t-3);font-weight:400}
.process p{color:var(--slate);max-width:34ch}

/* Image + text split */
.split{display:grid;gap:clamp(36px,6vw,96px);align-items:center}
@media (min-width:960px){.split{grid-template-columns:1fr 1fr}.split--flip > :first-child{order:2}}
.split .slot{aspect-ratio:4/5;border-radius:4px;width:100%}
.split h2{font-size:var(--t-1);line-height:1.04;max-width:14ch}
.split-copy{display:grid;gap:24px;max-width:540px}
.split-copy > p{color:var(--slate)}
.on-dark .split-copy > p{color:var(--mist)}

/* Plain list with short bold leads */
.facts-list{display:grid;gap:0;border-top:1px solid var(--line)}
.facts-list li{padding:16px 0;border-bottom:1px solid var(--line);color:var(--slate)}
.facts-list strong{color:var(--night);font-weight:600}
.on-dark .facts-list,.on-dark .facts-list li{border-color:rgba(255,255,255,.16)}
.on-dark .facts-list li{color:var(--mist)}
.on-dark .facts-list strong{color:#fff}

/* Ski year */
.year{display:grid;gap:0;border-top:1.5px solid var(--night)}
@media (min-width:1000px){.year{grid-template-columns:repeat(5,1fr)}}
.year li{display:grid;gap:8px;align-content:start;padding:24px 24px 28px 0;border-bottom:1px solid var(--line)}
@media (min-width:1000px){.year li{border-bottom:0}.year li + li{padding-left:24px;border-left:1px solid var(--line)}}
.year .months{color:var(--glacier);font-weight:600;font-size:var(--t-small)}
.year h3{font-size:1.3rem;font-weight:400}
.year p{color:var(--slate);font-size:var(--t-small)}

/* Three formats */
.formats{display:grid;gap:clamp(28px,4vw,48px)}
@media (min-width:900px){.formats{grid-template-columns:repeat(3,1fr)}}
.format{display:grid;gap:12px;align-content:start;border-top:1.5px solid var(--night);padding-top:24px}
.format h3{font-size:clamp(1.7rem,2.4vw,2.2rem);font-weight:300}
.format p{color:var(--slate)}

/* Full-bleed image with a text panel */
.panel-band{position:relative;isolation:isolate;min-height:min(84vh,820px);display:flex;align-items:flex-end;color:#fff}
.panel-band .slot{position:absolute;inset:0;z-index:-1}
.panel-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,20,32,0) 15%,rgba(8,20,32,.55) 55%,rgba(8,20,32,.82) 100%)}
.panel-body{padding-block:clamp(48px,7vw,96px);display:grid;gap:20px;max-width:640px}
.panel-body h2{font-size:var(--t-1);line-height:1.04}
.panel-body p{color:rgba(255,255,255,.9)}

/* CTA band */
.cta-band{background:var(--night);color:#fff;padding-block:clamp(72px,10vw,130px)}
.cta-inner{display:grid;gap:28px;align-items:end}
@media (min-width:900px){.cta-inner{grid-template-columns:1.4fr auto}}
.cta-band h2{font-size:var(--t-1);line-height:1.04;max-width:16ch}
.cta-band p{color:var(--mist);margin-top:14px;max-width:44ch}

/* Plans page */
.plan-cols{display:grid;gap:0;border-top:1.5px solid var(--night)}
@media (min-width:960px){.plan-cols{grid-template-columns:repeat(3,1fr)}}
.plan-col{display:grid;gap:16px;align-content:start;padding:32px 0 40px;border-bottom:1px solid var(--line)}
@media (min-width:960px){.plan-col{padding:36px 36px 12px 0;border-bottom:0}.plan-col + .plan-col{padding-left:36px;border-left:1px solid var(--line)}}
.plan-col h2{font-size:clamp(2.4rem,3.6vw,3.2rem);font-weight:300;line-height:1}
.plan-col .for{font-weight:600}
.plan-col .desc{color:var(--slate)}
.plan-col ul{display:grid;gap:10px;font-size:var(--t-small);color:var(--slate)}
.plan-col li{padding-left:18px;position:relative}
.plan-col li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1.5px;background:var(--glacier)}
.plan-col .price{font-size:var(--t-small);color:var(--night);font-weight:600;margin-top:4px}
.table-wrap{overflow-x:auto;border-top:1.5px solid var(--night)}
.compare{width:100%;min-width:680px;border-collapse:collapse;font-size:var(--t-small)}
.compare th,.compare td{padding:16px 18px 16px 0;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.compare thead th{font-family:var(--font-display);font-weight:400;font-size:1.35rem;padding-top:20px}
.compare tbody th{font-weight:600;color:var(--night)}
.compare td{color:var(--slate)}
.compare td.yes{color:var(--night);font-weight:600}
.faq{display:grid;border-top:1.5px solid var(--night)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;font-family:var(--font-display);font-size:1.25rem;font-weight:400;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-9px;border-right:1.5px solid var(--night);border-bottom:1.5px solid var(--night);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq details p{padding-bottom:24px;color:var(--slate);max-width:62ch}

/* About */
.about-hero{display:grid;gap:clamp(36px,6vw,96px);align-items:end;padding-top:calc(76px + env(safe-area-inset-top,0px) + clamp(40px,6vw,80px));padding-bottom:clamp(56px,8vw,112px)}
@media (min-width:960px){.about-hero{grid-template-columns:1fr .85fr}}
.about-hero h1{font-size:var(--t-hero);line-height:1.02}
.about-hero .lead{margin-top:20px;font-size:clamp(1.1rem,1.5vw,1.3rem);color:var(--slate)}
.about-hero .slot{aspect-ratio:4/5;border-radius:4px}
.creds{display:grid;border-top:1.5px solid var(--night)}
.creds div{display:grid;gap:4px 24px;padding:18px 0;border-bottom:1px solid var(--line)}
@media (min-width:700px){.creds div{grid-template-columns:200px 1fr}}
.creds dt{font-weight:600}
.creds dd{margin:0;color:var(--slate)}
.principles{display:grid;gap:clamp(28px,4vw,48px)}
@media (min-width:900px){.principles{grid-template-columns:repeat(3,1fr)}}
.principle{display:grid;gap:12px;border-top:1.5px solid var(--night);padding-top:24px}
.principle h3{font-size:1.6rem;font-weight:300;line-height:1.15}
.principle p{color:var(--slate)}

/* Journal */
.posts{display:grid;gap:clamp(48px,6vw,72px)}
@media (min-width:900px){.posts{grid-template-columns:repeat(3,1fr);gap:28px}}
.post{display:grid;gap:18px;text-decoration:none;align-content:start}
.post .slot{aspect-ratio:4/3;border-radius:4px}
.post .slot img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.post:hover .slot img{transform:scale(1.03)}
.post .meta{font-size:var(--t-small);color:var(--slate)}
.post h2{font-size:1.65rem;line-height:1.15;font-weight:400}
.post:hover h2{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.post p{color:var(--slate);font-size:var(--t-small)}
.article-head{padding-top:calc(76px + env(safe-area-inset-top,0px) + clamp(48px,8vw,96px));padding-bottom:clamp(32px,4vw,56px);max-width:900px}
.article-head .meta{color:var(--slate);font-size:var(--t-small);margin-bottom:20px}
.article-head .meta a{color:var(--night)}
.article-head h1{font-size:var(--t-1);line-height:1.06}
.article-head .lead{margin-top:22px;font-size:clamp(1.1rem,1.5vw,1.3rem);color:var(--slate);max-width:56ch}
.article-image{aspect-ratio:21/9;border-radius:4px}
@media (max-width:700px){.article-image{aspect-ratio:4/3}}
.prose{max-width:68ch;display:grid;gap:1.1em;padding-block:clamp(48px,7vw,88px);font-size:1.0625rem}
.prose h2{font-size:1.75rem;line-height:1.2;font-weight:400;margin-top:1.1em}
.prose p,.prose li{color:#33414E}
.prose ul{display:grid;gap:.5em;padding-left:1.2em;list-style:disc}
.prose strong{color:var(--night)}
.prose .note{border-left:2px solid var(--glacier);padding-left:18px;color:var(--night)}
.prose table{width:100%;border-collapse:collapse;font-size:var(--t-small);min-width:520px}
.prose th,.prose td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.prose thead th{font-weight:600;border-bottom:1.5px solid var(--night)}
.prose .table-wrap{border-top:0}

/* Start page: questionnaire */
.quest{display:grid;gap:clamp(36px,5vw,72px);align-items:start;padding-bottom:clamp(72px,10vw,130px)}
@media (min-width:1000px){.quest{grid-template-columns:1.5fr .7fr}}
.qform{display:grid;gap:32px;min-width:0}
.steps-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.steps-bar div{display:grid;gap:8px;font-size:var(--t-small);color:var(--slate)}
.steps-bar div::before{content:"";height:3px;border-radius:2px;background:var(--line)}
.steps-bar .on{color:var(--night);font-weight:600}
.steps-bar .on::before,.steps-bar .done::before{background:var(--night)}
.qform fieldset{border:0;margin:0;padding:0;display:grid;gap:22px;min-width:0}
.qform legend{font-family:var(--font-display);font-weight:300;font-size:clamp(1.8rem,3vw,2.4rem);padding:0;margin-bottom:6px}
.fields-2{display:grid;gap:22px}
@media (min-width:700px){.fields-2{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:8px;min-width:0}
.field > label,.field-label{font-weight:600;font-size:.95rem}
.field .hint{font-weight:400;color:var(--slate)}
.qform input[type=text],.qform input[type=email],.qform input[type=date],.qform select,.qform textarea{font:inherit;color:var(--night);background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:13px 14px;width:100%;min-width:0}
.qform input:focus,.qform select:focus,.qform textarea:focus{outline:none;border-color:var(--night)}
.qform textarea{min-height:110px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative}
.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.chip span{display:flex;align-items:center;gap:10px;padding:11px 16px;border:1.5px solid var(--line);border-radius:999px;font-size:.95rem;background:#fff}
.chip input:checked + span{border-color:var(--night);background:var(--night);color:#fff}
.chip input:focus-visible + span{outline:2px solid var(--glacier);outline-offset:2px}
.chips--stack{display:grid}
.chips--stack .chip span{border-radius:12px;padding:14px 16px}
.dot{width:12px;height:12px;border-radius:50%;flex:none}
.dot-green{background:#1F8A4D}.dot-blue{background:#1F5FC4}.dot-red{background:#CF3A2E}.dot-black{background:#111;box-shadow:0 0 0 1.5px #fff}
.q-actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.btn-ghost{border-color:var(--night);color:var(--night);background:transparent}
.btn-ghost:hover{background:var(--frost)}
.q-error{color:#B3261E;font-weight:600;min-height:1.5em}
.q-aside{display:grid;gap:20px;border-top:1.5px solid var(--night);padding-top:24px}
.q-aside h2{font-family:var(--font-text);font-size:1rem;font-weight:600}
.q-aside ol{display:grid;gap:10px;padding-left:1.2em;color:var(--slate);font-size:var(--t-small);list-style:decimal}
.q-aside p{color:var(--slate);font-size:var(--t-small)}
.result{display:grid;gap:28px;scroll-margin-top:110px}
.result-plan{background:var(--frost);border-radius:12px;padding:28px;display:grid;gap:10px}
.result-plan .label{font-weight:600;color:var(--glacier);font-size:var(--t-small)}
.result-plan h2{font-size:clamp(2.4rem,4vw,3.2rem);font-weight:300;line-height:1}
.result-plan p{color:var(--slate)}
.summary{display:grid;border-top:1px solid var(--line);font-size:var(--t-small)}
.summary div{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.summary dt{color:var(--slate)}
.summary dd{margin:0;overflow-wrap:anywhere}
.copy-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.copy-row code{font-family:inherit;background:var(--frost);border-radius:8px;padding:8px 12px;user-select:all}
.status{color:var(--glacier);font-weight:600;min-height:1.5em;font-size:var(--t-small)}
.btn-sm{min-height:42px;padding:0 18px;font-size:.92rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===================== v9: credibility, method page, readability ===================== */
:root{--slate:#4D5A66;--t-small:.9375rem}
ol{margin:0;padding:0;list-style:none}
.tile p,.plan ul,.plan-col ul,.year p,.compare,.post p{font-size:1rem}
.band-night{background:var(--night);color:#fff}
.on-dark .tile p{color:var(--mist)}
.after{margin-top:clamp(28px,4vw,44px)}

/* Header: six links, and a short call to action on small screens once the header is solid */
@media (max-width:1179px){
  .main-nav{display:none}
  .header-row{gap:16px}
  .header-cta{display:none;min-height:40px;padding:0 18px}
  .site-header.is-solid .header-cta{display:inline-flex}
  .header-cta .long{display:none}
  .menu-toggle{display:inline-flex}
  .site-header.is-solid .menu-toggle b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .site-header.is-solid .menu-toggle{padding:10px 4px}
}
@media (min-width:1180px){.header-cta .short{display:none}.main-nav{gap:26px}}
.menu-toggle b{font-weight:600}

/* Credentials under the opening film */
.proof{background:var(--night);color:#fff}
.proof ul{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
@media (min-width:900px){.proof ul{grid-template-columns:repeat(4,1fr);column-gap:32px}}
.proof li{display:grid;gap:3px;align-content:start;padding:20px 0 24px;border-top:1px solid rgba(255,255,255,.18);min-width:0}
.proof .k{color:var(--mist);font-size:var(--t-small)}
.proof .v{font-family:var(--font-display);font-weight:400;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.25}

/* Research figures */
.figures{display:grid;border-top:1.5px solid var(--night)}
@media (min-width:700px){.figures{grid-template-columns:1fr 1fr;column-gap:40px}}
@media (min-width:1100px){.figures{grid-template-columns:repeat(4,1fr)}.figures--3{grid-template-columns:repeat(3,1fr)}}
.figure{display:grid;gap:12px;align-content:start;padding:28px 0 34px;border-bottom:1px solid var(--line);min-width:0}
.figure .num{font-family:var(--font-display);font-weight:300;font-size:clamp(2.8rem,4.6vw,4rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--night)}
.figure p{color:var(--slate);max-width:40ch}
.figure .means{color:var(--night);font-weight:600}
.figure .src{font-size:var(--t-small)}
.cite{font-size:.7em;line-height:0;vertical-align:super;margin-left:1px}
.cite a{color:var(--glacier);text-decoration:none;font-weight:700;padding:0 2px}
.cite a:hover{text-decoration:underline}

/* Muscle map */
.musclemap{display:grid;gap:clamp(32px,5vw,72px);align-items:start}
@media (min-width:960px){.musclemap{grid-template-columns:.85fr 1.15fr}}
.map-photo{position:relative;margin:0;aspect-ratio:1320/1638;border-radius:4px;overflow:hidden;background:#E4E6E6;max-width:100%}
.map-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pin,.muscles .n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--night);color:#fff;font-weight:600;font-size:.9rem;font-variant-numeric:tabular-nums;line-height:1}
.pin{position:absolute;margin:-15px 0 0 -15px;box-shadow:0 0 0 3px rgba(255,255,255,.92)}
@media (min-width:700px){.pin,.muscles .n{width:34px;height:34px;font-size:.95rem}.pin{margin:-17px 0 0 -17px}}
.muscles{display:grid;border-top:1.5px solid var(--night)}
.muscles li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 18px;padding:20px 0;border-bottom:1px solid var(--line)}
.muscles h3{font-size:1.3rem;font-weight:400;margin-bottom:6px;line-height:1.3}
.muscles p{color:var(--slate)}
.muscles .how{color:var(--night);margin-top:6px;font-size:var(--t-small);font-weight:600}

/* Qualities: three columns on wide screens, labelled lines on small ones */
.qrows{display:grid;margin-top:clamp(40px,5vw,64px);border-top:1.5px solid rgba(255,255,255,.7)}
.qrow{display:grid;gap:6px 32px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.qrow h3{font-size:1.3rem;font-weight:400;line-height:1.3}
.qrow p{color:var(--mist)}
.qrow--head{display:none;color:var(--mist);font-size:var(--t-small);font-weight:600;padding:14px 0}
@media (max-width:899px){
  .qrow p:nth-of-type(1)::before{content:"On snow. ";color:#fff;font-weight:600}
  .qrow p:nth-of-type(2)::before{content:"In your programme. ";color:#fff;font-weight:600}
}
@media (min-width:900px){.qrow{grid-template-columns:.8fr 1fr 1.2fr;align-items:baseline}.qrow--head{display:grid}.qrow p:nth-of-type(2){color:#fff}}

/* Assessment tests */
.tests{display:grid;border-top:1.5px solid var(--night);margin:0}
.tests div{display:grid;gap:4px 24px;padding:16px 0;border-bottom:1px solid var(--line)}
@media (min-width:700px){.tests div{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.tests dt{font-weight:600}
.tests dd{margin:0;color:var(--slate)}

/* Example week reuses the year strip with four columns */
@media (min-width:1000px){.year.week{grid-template-columns:repeat(4,1fr)}}
.year h3{line-height:1.25}

/* References */
.refs-grid{display:grid;gap:clamp(40px,6vw,96px);align-items:start}
@media (min-width:960px){.refs-grid{grid-template-columns:.9fr 1.1fr}}
.refs-title{font-family:var(--font-text);font-weight:600;font-size:1rem;letter-spacing:0;margin-bottom:14px}
.refs{display:grid;gap:14px;padding:18px 0 0 1.6em;list-style:decimal;font-size:var(--t-small);color:var(--slate);border-top:1.5px solid var(--night)}
.refs li{scroll-margin-top:110px;overflow-wrap:anywhere;padding-left:4px}
.refs li:target{color:var(--night)}
.refs a{color:var(--night);font-weight:600}
.prose .refs{margin-top:.6em}
.prose h2.refs-title{font-size:1rem;margin-top:2em}

/* Home: four steps */
@media (min-width:1100px){.process--4{grid-template-columns:repeat(4,1fr)}}
.process li{padding-right:28px}

/* Plans: rhythm of each plan, ticks in the comparison */
.plan-col .rhythm{display:grid;gap:6px;padding:16px 18px;background:#fff;border-radius:8px}
.plan-col .rhythm h3{font-family:var(--font-text);font-weight:600;font-size:var(--t-small);letter-spacing:0}
.plan-col .rhythm p{color:var(--slate);font-size:var(--t-small)}
.includes{display:grid;border-top:1.5px solid var(--night)}
@media (min-width:760px){.includes{grid-template-columns:1fr 1fr;column-gap:40px}}
@media (min-width:1100px){.includes{grid-template-columns:repeat(4,1fr)}}
.includes li{display:grid;gap:8px;align-content:start;padding:24px 0 28px;border-bottom:1px solid var(--line)}
.includes h3{font-size:1.3rem;font-weight:400;line-height:1.25}
.includes p{color:var(--slate)}
.compare{min-width:560px}
.compare td,.compare thead th{width:22%}
.tick{display:inline-block;width:17px;height:9px;border-left:2px solid var(--night);border-bottom:2px solid var(--night);transform:translateY(-3px) rotate(-45deg)}
.dash{display:inline-block;width:14px;height:2px;background:#AEB9C2;vertical-align:middle}

/* Journal: one lead article, then a row of four */
.posts{grid-template-columns:1fr}
@media (min-width:700px){.posts{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,56px) 28px}}
@media (min-width:1100px){.posts{grid-template-columns:repeat(4,1fr)}}
.post--lead{grid-column:1/-1}
.post-text{display:grid;gap:14px;align-content:start}
@media (min-width:900px){.post--lead{grid-template-columns:1.25fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}.post--lead .slot{aspect-ratio:16/10}.post--lead h2{font-size:var(--t-2);line-height:1.1}.post--lead .post-text p:last-child{font-size:var(--t-body)}}
.post h2{font-size:1.4rem}

/* Stance photo */
@media (min-width:960px){.map-photo{position:sticky;top:104px}}
.table-wrap{position:relative}

/* Alignment and reading comfort */
.tile{align-content:start}
.nb{white-space:nowrap}
.post.post--lead h2{font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.1}
article > .wrap:last-child{max-width:900px}
@media (max-width:899px){.hero::after{background:linear-gradient(180deg,rgba(8,20,32,.45) 0%,rgba(8,20,32,0) 20%,rgba(8,20,32,.1) 34%,rgba(8,20,32,.82) 100%)}}
@media (min-width:960px){
  @supports (grid-template-rows:subgrid){
    .plan-cols{row-gap:16px}
    .plan-col{grid-row:span 6;grid-template-rows:subgrid}
  }
}

.hero h1 .line:nth-child(4){animation-delay:.24s}
.plan-col .rhythm{align-content:start}
.wrap.panel-body{max-width:var(--max)}
.panel-body > *{max-width:640px}

/* In-page contents and skip link */
.toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.toc a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1.5px solid var(--line);border-radius:999px;text-decoration:none;font-weight:500;font-size:var(--t-small);background:#fff}
.toc a:hover{border-color:var(--night)}
section[id]{scroll-margin-top:84px}
.skip{position:absolute;left:16px;top:-80px;z-index:200;background:#fff;color:var(--night);padding:12px 18px;border-radius:8px;font-weight:600;text-decoration:none;box-shadow:0 2px 12px rgba(8,20,32,.25)}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}

/* Home opening. The camera stands still at the edge of the piste and the skier crosses the whole
   picture before he passes it, so nothing is ever laid over the film: the headline sits under it,
   or beside it on wide, low screens */
.hero:not(.hero--page){display:block;min-height:0;background:var(--night)}
.hero:not(.hero--page)::after{display:none}
.hero:not(.hero--page) .slot{position:relative;inset:auto;z-index:0;width:100%;height:clamp(300px,calc(100svh - 214px),84svh);background:var(--night)}
.hero:not(.hero--page) .slot video{object-position:40% 10%}
.hero:not(.hero--page) .slot::before{content:"";position:absolute;inset:0 0 auto 0;height:24%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(8,20,32,.5),rgba(8,20,32,0))}
.hero:not(.hero--page) .slot::after{content:"";position:absolute;inset:auto 0 0 0;height:16%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(15,34,54,0),var(--night))}
.hero:not(.hero--page) .hero-content{position:relative;z-index:1;margin-top:-20px;padding-block:0 28px;gap:16px;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:end}
.hero:not(.hero--page) h1{grid-column:1 / -1;font-size:clamp(1.9rem,3.9vw,3.4rem);line-height:1.08;text-shadow:none}
.hero:not(.hero--page) h1 .line{display:inline}
.hero:not(.hero--page) .hero-sub{max-width:54ch;text-shadow:none}
/* Upright screens: the header keeps its own band, the film comes under it, then the headline on four lines */
@media (orientation:portrait){
  .hero:not(.hero--page){padding-top:62px}
  .hero:not(.hero--page) .slot{height:auto;aspect-ratio:10/9;max-height:56svh}
  .hero:not(.hero--page) .slot video{object-position:50% 20%}
  .hero:not(.hero--page) .slot::before{display:none}
  .hero:not(.hero--page) .hero-content{margin-top:-16px;padding-block:0 36px;gap:18px;grid-template-columns:minmax(0,1fr)}
  .hero:not(.hero--page) h1{grid-column:auto;font-size:clamp(2.4rem,6.4vw,3.6rem);line-height:1.04}
  .hero:not(.hero--page) h1 .line{display:block}
  .hero:not(.hero--page) .hero-sub{max-width:44ch}
}
@media (max-width:370px) and (orientation:portrait){.hero:not(.hero--page) h1{font-size:2rem}.hero:not(.hero--page) .hero-content{gap:15px}}
/* Very low screens (a phone on its side): the header keeps its own band here too */
@media (max-height:480px) and (orientation:landscape){
  .hero:not(.hero--page){padding-top:60px}
  .hero:not(.hero--page) .slot::before{display:none}
}
/* Wide, low screens: the film fills the left of the screen at full height, the headline stands on the right */
@media (min-aspect-ratio:19/10) and (min-height:481px){
  .hero:not(.hero--page){--col:calc(min(100vw - var(--gutter-r),50vw + 660px - var(--gutter-r)) - 58vw - 36px);display:flex;min-height:100svh;align-items:flex-end}
  .hero:not(.hero--page) .slot{position:absolute;inset:0 42% 0 0;width:auto;height:auto}
  .hero:not(.hero--page) .slot video{object-position:30% 50%}
  .hero:not(.hero--page) .slot::after{inset:0 0 0 auto;width:10%;height:auto;background:linear-gradient(90deg,rgba(15,34,54,0),var(--night))}
  .hero:not(.hero--page) .hero-content{margin-top:0;padding-block:112px clamp(28px,6vh,64px);gap:22px;grid-template-columns:minmax(0,var(--col));justify-content:end}
  .hero:not(.hero--page) h1{grid-column:auto;font-size:min(calc(var(--col) / 9.2),9vh);line-height:1.04}
  .hero:not(.hero--page) h1 .line{display:block}
  .hero:not(.hero--page) .hero-sub{max-width:32ch}
}