/* The higher-specificity selectors keep this art direction independent of legacy overrides. */
html:root{--bg:#f7fafb;--text:#122d42;--muted:#516a7b;--line:#173e5729;--ice:#246acc;--accent-soft:#e6f0f8;--btn-bg:#246acc;--btn-text:#fff;--btn-fill:#163f79;--btn-hover-text:#fff;--btn-rim:#246acc}
html body{background:var(--bg);color:var(--text)}
html body header,html body .hero{--text:#122d42;--muted:#516a7b;--ice:#246acc;--line:#173e5729;--btn-bg:#246acc;--btn-text:#fff;--btn-fill:#163f79;--btn-hover-text:#fff;--btn-rim:#246acc;color:var(--text)}
html body header{height:108px;border:0;padding:28px 5%;z-index:5}
html body .brand{font-size:25px;letter-spacing:.19em}
html body .brand span{font-size:10px;letter-spacing:.24em}
html body nav a,html body .nav-cta{font-size:14px;color:#314d63}
html body .nav-cta{border-bottom:1px solid var(--line);padding-bottom:10px}
html body .hero{isolation:isolate;min-height:850px;height:100svh;max-height:1100px;background:#edf4f9;overflow:hidden}
html body .hero-media{inset:125px 4% 48px 43%;border-radius:48% 48% 5px 5px;overflow:hidden;transform:none!important;z-index:0}
html body .hero-media img,html body .hero-media video{filter:brightness(1.18) saturate(.85);object-position:60% center;height:100%;transform:translateY(var(--landscape-shift,0px)) scale(1.16)}
html body .hero-media:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#edf4f9b8,transparent 55%);pointer-events:none}
html body .hero-shade{background:none}
html body .hero-content{position:relative;z-index:2;margin:0;width:100%;max-width:1600px;padding:190px 7% 140px}
html body .hero h1{font-size:clamp(60px,6.7vw,104px);line-height:.95;letter-spacing:-.045em;max-width:820px;margin:0 0 34px;font-weight:400}
html body .hero h1 em{display:block;max-width:640px;font-size:.62em;line-height:1.05;letter-spacing:-.025em;margin-top:22px;color:#246acc}
html body .hero h1>br{display:none}
html body .hero-bottom{gap:26px;display:flex;flex-direction:column;align-items:flex-start}
html body .hero-bottom p{max-width:470px;font-size:16px;line-height:1.7;color:#314d63;text-wrap:pretty}
html body .button{border-radius:100px;min-height:62px;padding:19px 26px;font-size:14px;gap:32px;box-shadow:none}
html body .button .icon{font-size:24px}
html body .hero-foot{bottom:24px;left:0;right:0;padding:0 7%;font-size:12px;color:#38566c}
html body .hero-foot>a{font-size:11px;letter-spacing:.13em}
html body .side-note{display:none}
html body .progress{background:#246acc;height:2px}
html body h2{font-size:clamp(48px,5.4vw,82px);line-height:1;letter-spacing:-.035em}
html body h2 em{color:#246acc}
html body .section{max-width:1600px;padding:115px 7%;margin-inline:auto}
html body .legend{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:10%;padding-top:120px;padding-bottom:130px}
html body .portrait-wrap{aspect-ratio:4/4.5;overflow:visible;background:transparent;position:relative}
html body .portrait-wrap img{height:100%;width:100%;object-fit:cover;object-position:48% center;border-radius:44% 44% 4px 4px;filter:none;transform:none}
html body .portrait-wrap:after{display:none}
html body .portrait-wrap>span{position:absolute;left:-10px;bottom:30px;padding:20px 26px;background:#246acc;color:white;font-size:22px;transform:rotate(-5deg);letter-spacing:.12em}
html body .portrait-wrap>span small{font-size:11px}
html body .legend-copy h2{font-size:clamp(64px,7.7vw,110px);line-height:.92;margin:0 0 34px}
html body .legend-copy p{font-size:16px;line-height:1.8;max-width:400px;color:var(--muted)}
html body .text-link{font-size:14px;min-height:52px;align-items:center}
html body .selection-band{margin:0 3% 30px;max-width:none}
html body .selection{padding:90px 7%;min-height:460px;grid-template-columns:1.2fr 1fr;gap:12%;border:0;border-radius:8px;overflow:hidden;box-shadow:none;background:#cce3ed}
html body .selection-media img,html body .selection-media video{filter:none}
.selection-media img{filter:none}
html body .selection-shade{background:linear-gradient(90deg,#0b2433d1 0%,#0b2433a6 34%,#0b24333d 58%,transparent 76%)}
html body .selection h3{font-size:clamp(48px,5vw,76px);line-height:.98;margin:24px 0}
html body .selection .eyebrow{font-size:12px}
html body .selection .selection-copy>p{font-size:16px;max-width:340px;color:#fff}
html body .selection .selection-action{padding:34px;background:#f7fbffeb;border:1px solid #fff7;border-radius:4px;backdrop-filter:blur(18px);color:#122d42;--btn-bg:#246acc;--btn-text:#fff;--btn-fill:#163f79;--btn-hover-text:#fff}
html body .selection .selection-action>p{font-size:22px;line-height:1.35}
html body .selection .selection-action>small{font-size:14px;color:#516a7b;line-height:1.7}
html body .selection .button{width:100%}
html body .section-heading{align-items:end;gap:35px}
html body .section-heading>.muted{max-width:330px;font-size:16px}
html body .pillar-grid{border:0;gap:32px;margin-top:65px}
html body .pillar-grid article,html body .pillar-grid article:first-child,html body .pillar-grid article:last-child{border:0;padding:0 24px 0 0;display:flex;flex-direction:column;align-items:flex-start}
html body .pillar-symbol{display:flex;align-items:center;justify-content:center;width:190px;height:190px;border:1px solid #246acc26;border-radius:50%;background:radial-gradient(circle at 32% 25%,white,#d7eafa 65%,#a8c8e9);margin-bottom:35px;box-shadow:inset -8px -12px 30px #246acc0d,0 24px 40px -30px #246acc55}
html body .pillar-symbol svg{width:100px;height:100px;stroke:#246acc;stroke-width:1.2}
html body .pillar-grid article:nth-child(2){padding-top:55px}
html body .pillar-grid article:nth-child(3){padding-top:110px}
html body .pillar-grid h3{font-size:42px;margin:0 0 18px;line-height:1}
html body .pillar-grid p{font-size:16px;line-height:1.7;max-width:290px}
html body .program{position:relative;background:#e5eff8;max-width:none;grid-template-columns:1fr 1fr;gap:10%;padding-top:105px;padding-bottom:105px}
html body .program-title h2{font-size:clamp(46px,5.1vw,76px)}
html body .program-title .muted{font-size:16px;line-height:1.7}
html body summary{padding:26px 0}
html body summary h3{font-size:18px}
html body details>div{font-size:16px;line-height:1.75;color:var(--muted)}
html body .interlude{height:650px;min-height:0;display:flex;align-items:center;justify-content:center;text-align:center;isolation:isolate;background:#d6e8f4;color:#173a51}
html body .interlude img{filter:brightness(1.3) saturate(.65);opacity:.65;object-position:center 45%}
html body .interlude:after{content:'';position:absolute;inset:0;background:linear-gradient(#e5eff8 0%,#e5eff850 35%,#f7fafb1a 70%,#f7fafb);z-index:-1}
html body .interlude>div{z-index:2;position:relative}
html body .interlude h2{font-size:clamp(64px,7.8vw,120px);line-height:.97;margin:28px 0}
html body .interlude h2 em{color:#246acc}
html body .interlude .eyebrow{font-size:12px;color:#34576c}
html body .circle-link{color:#246acc;border-color:#246acc80;margin:30px auto 0}
html body .pricing{border:0;gap:20px;margin-top:60px}
html body .pricing article{border:1px solid #244d701c;background:#edf3f8;padding:36px 30px;border-radius:5px}
html body .pricing .featured{background:#246acc;color:white;border:0;transform:translateY(-12px);--text:#fff;--muted:#e0ebff;--ice:#fff;--btn-bg:#fff;--btn-text:#246acc;--btn-fill:#153d77;--btn-hover-text:#fff;--line:#ffffff40}
html body .pricing h3{font-size:34px;margin:30px 0 12px}
html body .pricing .price{font-size:66px;letter-spacing:-.04em;line-height:1;margin:24px 0}
html body .pricing article>p{font-size:14px}
html body .pricing article>p.eyebrow{font-size:12px;color:inherit}
html body .pricing .button,html body .pricing .text-link{margin-top:34px;width:100%;font-size:14px;gap:12px}
html body .pricing-note{font-size:13px;color:var(--muted);margin-top:25px}
html body .apply{max-width:none;background:#e4eff8;border:0;grid-template-columns:1.25fr 1fr;gap:10%;position:relative}
html body .apply h2{font-size:clamp(52px,5.6vw,84px)}
html body .apply p{font-size:16px}
html body .application-box{padding:44px;background:#f9fcff;border:0;border-radius:50% 50% 5px 5px;text-align:center;display:flex;flex-direction:column;justify-content:center;min-height:390px}
html body .application-box h3{font-size:48px;line-height:1.05;margin:24px 0}
html body .application-box>.eyebrow{font-size:12px}
html body .application-box .button{margin:20px 0 0}
html body .curator img{width:72px;height:72px;flex-basis:72px;border:3px solid white}
html body footer{background:#e4eff8;border-top:1px solid #173e5720;padding:32px 7%;color:#173a51}
html body .reveal{transition:opacity .85s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
html body .hero h1,html body .hero-bottom{animation:expedition-arrive 1.2s both cubic-bezier(.2,.7,.2,1)}
html body .hero-bottom{animation-delay:.18s}
html body .pillar-symbol{transition:transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .7s}
@media(hover:hover){html body .pillar-grid article:hover .pillar-symbol{transform:translateY(-10px) rotate(-6deg);box-shadow:inset -8px -12px 30px #246acc15,0 30px 45px -25px #246acc50}}
@keyframes expedition-arrive{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){html body .hero-content{padding-top:23vh}}
@media(max-width:1000px){html body .hero h1{font-size:76px;max-width:620px}html body .hero h1 em{font-size:48px;max-width:520px}html body .legend{gap:6%}html body .section{padding:80px 6%}html body .selection{padding:60px 6%;gap:6%}html body .pricing article{padding:28px 20px}html body .pricing .price{font-size:54px}html body .pillar-symbol{width:155px;height:155px}html body .application-box{padding:32px;min-height:370px}}
@media(max-width:700px){
 html body header{height:86px;padding:20px 6%;gap:20px}html body .brand{font-size:20px}html body .brand span{font-size:8px}html body .nav-cta{font-size:12px;white-space:nowrap}
 html body .hero{min-height:900px;height:auto;max-height:none;display:block;padding-bottom:300px}
 html body .hero-content{padding:130px 6% 22px;margin:0;width:100%}
 html body .hero h1{font-size:clamp(49px,12.8vw,75px);line-height:.94;max-width:100%;margin:0 0 24px}
 html body .hero h1 em{font-size:.7em;line-height:1.02;margin-top:18px;max-width:100%}
 html body .hero-bottom p{max-width:100%;font-size:16px;line-height:1.65}
 html body .hero-bottom{gap:22px}html body .hero-bottom .button{width:auto;max-width:100%}
 html body .hero-media{inset:auto 6% 52px 6%;height:245px;border-radius:130px 130px 4px 4px}
 html body .hero-media:after{display:none}html body .hero-media img,html body .hero-media video{object-position:50% 60%;filter:brightness(1.15)}
 html body .hero-foot{position:absolute;bottom:19px;padding:0 6%;font-size:11px}html body .hero-foot>a{font-size:10px}
 html body .section{padding:70px 6%}html body h2{font-size:46px;line-height:1.03}
 html body .legend{grid-template-columns:1fr;gap:40px;padding-top:65px;padding-bottom:65px}
 html body .portrait-wrap{aspect-ratio:1/1;max-width:440px;width:90%;margin:auto}
 html body .portrait-wrap>span{bottom:20px;padding:15px 22px;font-size:18px}
 html body .legend-copy h2{font-size:60px;max-width:100%;line-height:.98;margin-bottom:24px}html body .legend-copy h2 br{display:none}html body .legend-copy h2 em{display:block}
 html body .legend-copy p{max-width:none}html body .legend-copy .text-link{margin-top:20px}
 html body .selection-band{margin:0 4%}html body .selection{padding:42px 7%;grid-template-columns:1fr;gap:28px;border-radius:5px}
 html body .selection h3{font-size:48px}html body .selection .selection-copy>p{font-size:16px;line-height:1.65}html body .selection .selection-action{padding:25px}html body .selection .selection-action>p{font-size:20px}
 html body .section-heading{display:block}html body .section-heading>.muted{margin-top:20px}
 html body .pillar-grid{display:grid;grid-template-columns:1fr;gap:32px;margin-top:38px}
 html body .pillar-grid article,html body .pillar-grid article:first-child,html body .pillar-grid article:last-child{display:grid;grid-template-columns:88px minmax(0,1fr);gap:0 22px;padding:0;align-items:center}
 html body .pillar-grid article:nth-child(n){padding:0}html body .pillar-symbol{width:88px;height:88px;margin:0;grid-row:1/3;align-self:center}html body .pillar-symbol svg{width:58px;height:58px}html body .pillar-grid h3{font-size:34px;margin:0 0 10px}html body .pillar-grid p{font-size:16px;line-height:1.6;margin:0}
 html body .program{grid-template-columns:1fr;gap:28px}html body .program-title h2{font-size:46px}html body summary h3{font-size:17px}html body details>div{padding-left:28px}
 html body .interlude{height:470px;padding:50px 6%}html body .interlude h2{font-size:clamp(48px,12.6vw,68px)}
 html body .pricing{display:grid;grid-template-columns:1fr;gap:16px;margin-top:38px}html body .pricing .featured{transform:none}html body .pricing article{padding:30px}html body .pricing h3{margin:20px 0 0}html body .pricing .price{font-size:60px}
 html body .apply{grid-template-columns:1fr;gap:42px}html body .apply h2{font-size:48px}html body .application-box{min-height:340px;padding:48px 28px 32px}html body .application-box h3{font-size:42px}
 html body footer{padding:30px 6%;gap:24px}html body .button{min-height:58px;padding:17px 22px}html body .curator{margin-top:28px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}html body .reveal{transition:none;transform:none;opacity:1}html body .hero h1,html body .hero-bottom{animation:none}html body .hero-media img,html body .hero-media video{transform:scale(1.08)}}

html body .selection .selection-action{border-radius:28px}

/* Review: equal headline scale, unframed method symbols, readable scenic copy. */
html body .hero h1{font-size:clamp(56px,5.8vw,88px);line-height:1.02;max-width:1040px}
html body .hero h1 em{font-size:1em;line-height:inherit;max-width:1040px;margin-top:8px}
html body .hero{height:auto;min-height:100svh;max-height:none}
html body .pillar-grid{gap:0;border-top:1px solid var(--line)}
html body .pillar-grid article:nth-child(n){padding:44px 32px 0;border-right:1px solid var(--line)}
html body .pillar-grid article:first-child{padding-left:0}
html body .pillar-grid article:last-child{border-right:0}
html body .pillar-grid article .pillar-symbol{width:80px;height:80px;border:0;border-radius:0;background:none;box-shadow:none;transform:none;margin-bottom:40px}
html body .pillar-symbol svg{width:80px;height:80px}
html body .interlude{color:#122d42;background:#eef5fb}
html body .interlude img{filter:brightness(1.25) saturate(.6);opacity:.38}
html body .interlude:after{z-index:1;background:linear-gradient(#e5eff8,#f3f8fcaa 32%,#f3f8fcaa 70%,#f7fafb)}
html body .interlude h2{color:#122d42;text-shadow:0 2px 18px #ffffffb3}
html body .interlude h2 em{color:#164e9d}
html body .interlude .eyebrow{color:#274961;font-weight:500}
@media(max-width:700px){
 html body .hero h1{font-size:clamp(38px,10.4vw,54px);line-height:1.05}
 html body .hero h1 em{font-size:1em;margin-top:10px}
 html body .hero{min-height:900px}
 html body .pillar-grid{gap:0;margin-top:30px}
 html body .pillar-grid article:nth-child(n){grid-template-columns:48px minmax(0,1fr);gap:0 20px;padding:26px 0;border-right:0;border-bottom:1px solid var(--line)}
 html body .pillar-grid article .pillar-symbol{width:48px;height:48px;margin:0;align-self:start}
 html body .pillar-symbol svg{width:48px;height:48px}
}
/* the left column sits on footage, the right card brings its own light surface:
   give the copy an explicit light colour instead of inheriting the page's navy */
html body .selection .selection-copy{color:#f3f9fd}
html body .selection .selection-copy h3{color:#f3f9fd}
html body .selection .selection-copy h3 em{color:#a9cdf2}
html body .selection .selection-copy .eyebrow{color:#a9cdf2}

/* Interlude: the photo was washed out to 38% opacity under a milky film, with
   dark type glowing white on top. Show the frame cleanly and set light type on it. */
html body .interlude{background:#0e2a39;color:#f3f9fd}
html body .interlude img{filter:brightness(.56) saturate(.8);opacity:1}
html body .interlude:after{z-index:1;background:linear-gradient(#0e2a39d9 0%,#0e2a3959 26%,#0e2a3959 74%,#0e2a39d9 100%)}
html body .interlude h2{color:#f3f9fd;text-shadow:none}
html body .interlude h2 em{color:#a9cdf2}
html body .interlude .eyebrow{color:#a9cdf2;font-weight:500}
html body .interlude .circle-link{border-color:#ffffff59;color:#f3f9fd;background:transparent}
html body .interlude .circle-link:hover{background:#ffffff1f}

/* Deeper, quieter navy in place of the azure */
html:root{--ice:#173f6b;--btn-bg:#001d3d;--btn-rim:#001d3d;--btn-fill:#dce8f4;--btn-hover-text:#001d3d}
html body header,html body .hero{--ice:#173f6b;--btn-bg:#001d3d;--btn-rim:#001d3d}
html body .progress{background:#001d3d}
html body .portrait-wrap>span{background:#001d3d}
html body .pricing .featured{background:#001d3d;--btn-text:#001d3d}
html body .selection .selection-action{--btn-bg:#001d3d;--btn-fill:#dce8f4;--btn-hover-text:#001d3d}
html body .pillar-symbol{border-color:#001d3d29;box-shadow:inset -8px -12px 30px #001d3d12,0 24px 40px -30px #001d3d5c}
html body .pillar-grid article:hover .pillar-symbol{box-shadow:inset -8px -12px 30px #001d3d1a,0 30px 45px -25px #001d3d69}
html body .pillar-symbol svg{stroke:#001d3d}
html body .circle-link{color:#001d3d;border-color:#001d3d59}
/* italic accents keep one step of lift so they still read as an accent */
html body h2 em,html body .hero h1 em{color:#173f6b}
/* square buttons, as before the pill treatment */
html body .button{border-radius:0}

/* No veil over the frame: instead keep the headline clear of the arch, so the
   photo stays exactly as shot and the type never lands on the dark rock. */


/* Own the button colours here: style.css still carries a legacy
   .button{background:var(--ice);color:#0b2528} that otherwise wins. */
html body .button{background:var(--btn-bg);color:var(--btn-text)}
html body .button::before{background:var(--btn-fill)}
html body .button:hover,html body .button:focus-visible{background:var(--btn-bg);color:var(--btn-hover-text);box-shadow:inset 0 0 0 1px var(--btn-rim)}

/* ── Hero: full-bleed footage, type over it ──────────────────────────────
   No arch. The clip fills the screen and a directional scrim keeps the
   headline readable without washing the frame. */
html body .hero{background:#0b2433;isolation:isolate}
html body .hero-media{inset:0;border-radius:0;overflow:hidden;transform:none!important}
html body .hero-media img,html body .hero-media video{border-radius:0;filter:brightness(.74) saturate(.92);object-position:center}
html body .hero-shade{display:block;z-index:1;background:
 linear-gradient(90deg,#08202ee6 0%,#08202eb8 40%,#08202e63 68%,#08202e33 100%),
 linear-gradient(#08202e94 0%,#08202e42 14%,transparent 30%,transparent 62%,#08202e6b 88%,#08202e99 100%)}
html body .hero-content{position:relative;z-index:2;max-width:1600px}
html body .hero h1{max-width:min(1040px,68%);color:#f4fafe}
html body .hero h1 em{color:#a9cdf2}
html body .hero-bottom p{max-width:560px;color:#dbe7f0}
html body .hero-foot,html body .side-note{z-index:2}
html body .hero-foot,html body .hero-foot a,html body .side-note{color:#fff}
html body header{color:#f4fafe}
html body header nav a{color:#dfeaf3}
html body header .nav-cta{color:#f4fafe;border-bottom-color:#ffffff5c}
/* inverted button: dark navy would sink into the footage */
html body .hero{--btn-bg:#f4fafe;--btn-text:#001d3d;--btn-fill:#001d3d;--btn-hover-text:#f4fafe;--btn-rim:#ffffff73}
@media(max-width:1000px){html body .hero h1{max-width:none}}
/* portrait crop: head sat too close to the top edge, show more headroom */
html body .portrait-wrap img{object-position:48% 12%}

/* Mobile hero: the arch-era rules left the footage as a 245px band inside a
   900px-tall block with 300px of padding below it. Fill the screen instead. */
@media(max-width:700px){
 html body .hero{display:grid;place-items:stretch;height:100svh;min-height:600px;max-height:none;padding-bottom:0}
 html body .hero-media{inset:0;height:100%;width:100%;border-radius:0}
 html body .hero-media img,html body .hero-media video{height:100%;width:100%;object-fit:cover}
}
/* Invitation band: a light, even wash like the hero, so the copy sits on tone
   rather than straight on the ice */
html body .selection-media video,html body .selection-media img{filter:brightness(.8) saturate(.92)}
html body .selection-shade{background:linear-gradient(90deg,#0b2433cc 0%,#0b2433a3 38%,#0b243357 66%,#0b243338 100%)}

/* A human first: a large photographic portrait opens into the mountain film. */
.premiere{padding:80px 0 100px;background:#f7fafb;color:#122d42;overflow:hidden}
.premiere-intro{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:0 7% 42px}
.premiere-intro>p{font-family:'Cormorant Garamond',Georgia,serif;font-size:36px;line-height:1.1;margin:0}
.premiere-intro em{color:#45647b}.premiere-intro>span{font-size:12px;letter-spacing:.2em;color:#516a7b}
.premiere-scene{position:relative;isolation:isolate;min-height:650px;height:82svh;max-height:940px;margin:0 3%;border-radius:28px;overflow:hidden;background:#17394e;clip-path:inset(0 var(--scene-inset,0%) round 28px)}
.premiere-media,.premiere-overlay{position:absolute;inset:0;z-index:-1;pointer-events:none}
.premiere-media img,.premiere-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;transform:scale(var(--scene-scale,1.05));filter:saturate(.7)}
.premiere-media video{opacity:0;transition:opacity 1s}.premiere-media video.playing{opacity:1}
.premiere-overlay{background:linear-gradient(90deg,#072b3d9e,#072b3d26 70%),linear-gradient(0deg,#072b3dbb,transparent 50%,#072b3d26)}
.premiere-title{position:relative;padding:65px 7% 150px;display:flex;flex-direction:column;min-height:100%;justify-content:center}
html body .premiere h2{font-size:clamp(96px,13vw,195px);font-weight:400;line-height:.96;letter-spacing:-.055em;color:#fff;margin:0 0 32px}
html body .premiere h2 em{color:#d1e9f6}
.premiere-title>p{font-size:20px;line-height:1.55;color:#fff;margin:0}
.premiere-link{position:absolute;bottom:44px;right:7%;left:7%;display:flex;align-items:center;justify-content:space-between;color:#fff;border-top:1px solid #ffffff60;padding-top:24px;font-size:14px;letter-spacing:.02em}
.premiere-link svg{width:48px;height:48px;padding:12px;border:1px solid #ffffff70;border-radius:50%;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .3s,background .3s}
.premiere-link:hover svg{transform:rotate(45deg);background:#ffffff24}
.premiere-story{padding:52px 7% 0;display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:start}
.premiere-story h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(36px,3.6vw,54px);font-weight:400;line-height:1.05;margin:0;letter-spacing:-.025em}
.premiere-story h3 em{color:#173f6b}.premiere-story p{font-size:16px;line-height:1.8;color:#516a7b;margin:0}
.premiere-story .premiere-note{font-size:13px;letter-spacing:.015em;color:#173f6b;margin-top:22px}
@media(max-width:700px){
 .premiere{padding:48px 0 60px}.premiere-intro{padding:0 6% 28px;display:block}.premiere-intro>p{font-size:30px}.premiere-intro>span{display:block;margin-top:20px;font-size:11px}
 .premiere-scene{margin:0 4%;height:580px;min-height:0;max-height:none;border-radius:20px;clip-path:none}
 .premiere-title{padding:50px 7% 145px;justify-content:center}html body .premiere h2{font-size:clamp(66px,18vw,112px);line-height:.98;margin-bottom:30px}
 .premiere-title>p{font-size:18px}.premiere-link{bottom:28px;padding-top:20px;font-size:13px}.premiere-story{grid-template-columns:1fr;gap:25px;padding:32px 6% 0}.premiere-story h3{font-size:36px}
}
@media(prefers-reduced-motion:reduce){.premiere-scene{clip-path:none}.premiere-media img,.premiere-media video{transform:none}.premiere-link svg{transition:none}}

html body .hero{min-height:850px;overflow:hidden}
html body .hero-portrait{position:absolute;z-index:1;top:90px;right:0;bottom:0;width:57%;pointer-events:none;mask-image:linear-gradient(90deg,transparent 0%,#000 26%),linear-gradient(0deg,transparent 0%,#000 18%,#000 91%,transparent 100%);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%),linear-gradient(0deg,transparent 0%,#000 18%,#000 91%,transparent 100%);-webkit-mask-composite:source-in}
html body .hero-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%;filter:saturate(.65)}
html body .hero-portrait:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#092331 0%,#092331b3 24%,transparent 49%)}
html body .hero-media:after{display:none}
html body .hero-shade{background:linear-gradient(90deg,#092331e8 0%,#092331bd 43%,#09233155 70%,#09233140),linear-gradient(#09233180,transparent 35%,#09233166)}
html body .hero-content{padding:180px 6% 140px}
html body .hero h1{max-width:55%;font-size:clamp(52px,5.05vw,78px);line-height:1.01;letter-spacing:-.035em}
html body .hero h1 em{font-size:1em;max-width:none;line-height:inherit;margin-top:12px}
html body .hero-bottom p{max-width:43%;font-size:16px;line-height:1.7}
html body .hero-foot{padding-inline:6%}
html body .hero-foot>span{text-shadow:0 1px 12px #092331}
@media(min-width:1600px){html body .hero{min-height:950px}html body .hero-content{padding-top:210px}}
@media(min-width:701px) and (max-width:1000px){html body .hero h1{font-size:54px;max-width:62%}html body .hero-bottom p{max-width:49%}html body .hero-portrait{width:57%;top:115px}html body .hero-portrait img{object-position:51% 18%}}
@media(max-width:700px){
 html body .hero{display:block;height:auto;min-height:0;padding-bottom:0;background:#0b2737}
 html body .hero-portrait{top:72px;bottom:auto;right:0;width:100%;height:450px;mask-image:linear-gradient(0deg,transparent,#000 32%,#000 90%,transparent);-webkit-mask-image:linear-gradient(0deg,transparent,#000 32%,#000 90%,transparent)}
 html body .hero-portrait img{object-fit:cover;object-position:50% 25%;filter:saturate(.65)}
 html body .hero-portrait:after{display:none}
 html body .hero-media{height:100%;opacity:.5}
 html body .hero-shade{background:linear-gradient(#0b2737aa 0%,#0b273744 32%,#0b2737ed 53%,#0b2737f5 100%)}
 html body .hero-content{padding:438px 6% 38px}
 html body .hero h1{max-width:100%;font-size:clamp(38px,10.4vw,56px);line-height:1.04;margin-bottom:25px}
 html body .hero h1 em{font-size:1em;margin-top:10px}
 html body .hero-bottom p{max-width:100%;font-size:16px}
 html body .hero-bottom .button{width:100%}
 html body .hero-foot{position:relative;inset:auto;padding:0 6% 28px}
 html body .hero-foot>a{font-size:10px}
}

/* All the copy now lives on the footage, so the headline gives way a little and
   the facts get their own measure under it */
html body .premiere h2{font-size:clamp(72px,10vw,150px);margin:0 0 26px}
html body .premiere-sub{font-size:clamp(19px,1.8vw,24px);line-height:1.45;color:#fff;margin:0}
html body .premiere-facts{margin:26px 0 0;max-width:46ch;font-size:clamp(16px,1.35vw,19px);line-height:1.62;color:#dbe9f2}
html body .premiere-title{padding-bottom:170px}
@media(max-width:820px){
 html body .premiere h2{font-size:clamp(54px,12vw,84px);margin-bottom:20px}
 html body .premiere-facts{max-width:none;margin-top:20px}
 html body .premiere-title{padding-bottom:150px}
}

/* Hero portrait: it began 90px down and faded out over only 68px, leaving a
   visible horizontal seam where the glacier sky met the dark header band.
   Start it at the very top and dissolve it into the dark instead of cutting it. */
html body .hero-portrait{top:0;
 mask-image:linear-gradient(90deg,transparent 0%,#000 26%),linear-gradient(0deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
 -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%),linear-gradient(0deg,transparent 0%,#000 16%,#000 84%,transparent 100%)}
html body .hero-portrait img{object-position:50% 24%}
html body .hero-portrait:after{background:
 linear-gradient(90deg,#092331 0%,#092331b3 24%,transparent 49%),
 linear-gradient(180deg,#0b2a3b 0%,#0b2a3bd9 9%,#0b2a3b8c 19%,#0b2a3b3d 30%,transparent 44%)}
@media(max-width:820px){
 html body .hero-portrait{top:0;height:520px;
  mask-image:linear-gradient(0deg,transparent,#000 30%,#000 86%,transparent);
  -webkit-mask-image:linear-gradient(0deg,transparent,#000 30%,#000 86%,transparent)}
 html body .hero-portrait:after{display:block;background:linear-gradient(180deg,#0b2a3b 0%,#0b2a3bcc 12%,#0b2a3b4d 26%,transparent 42%)}
}

/* Premiere scene: headline had grown to twice the hero's h1 (135px vs 68px);
   bring it under the hero so the first screen keeps the lead. Copy on the left,
   the interview card on the right, both on the footage. */
html body .premiere h2{font-size:clamp(48px,5vw,80px);margin:0 0 22px;letter-spacing:-.035em}
html body .premiere-title{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);
 gap:6%;align-items:center;padding:70px 7% 140px}
html body .premiere-copy{min-width:0}
html body .premiere-facts{max-width:42ch}
html body .premiere-card{align-self:center}
html body .premiere .selection-action{padding:34px;border-radius:4px;border:1px solid #ffffff7a;
 background:#f7fbffeb;backdrop-filter:blur(18px);color:#122d42;
 --btn-bg:#001d3d;--btn-text:#fff;--btn-fill:#dce8f4;--btn-hover-text:#001d3d}
html body .premiere .selection-action>p{font-family:Inter,'Helvetica Neue',Arial,sans-serif;
 font-size:19px;line-height:1.35;margin:0 0 12px;color:#122d42}
html body .premiere .selection-action>small{display:block;font-size:14px;line-height:1.6;color:#516a7b;margin-bottom:24px}
html body .premiere .selection-action .button{width:100%}
@media(max-width:980px){
 html body .premiere-title{grid-template-columns:1fr;gap:34px;align-items:start;padding-bottom:150px}
 html body .premiere-card{max-width:420px}
 html body .premiere-facts{max-width:none}
}

/* ── Premiere, rebuilt to sell: label, statement, what it is, hard numbers ── */
html body .premiere{padding-top:clamp(48px,6vw,96px)}
html body .premiere-scene{min-height:0;height:auto;max-height:none}
html body .premiere-title{display:block;padding:clamp(56px,6vw,84px) 7% clamp(170px,14vw,210px)}
html body .premiere-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,372px);gap:7%;align-items:start}
html body .premiere-label{display:flex;gap:22px;align-items:center;margin:0 0 26px;
 font-size:11px;letter-spacing:.28em;color:#bcd5e4;text-transform:uppercase}
html body .premiere-label span:first-child:after{content:'';display:inline-block;width:46px;height:1px;
 background:#bcd5e480;vertical-align:middle;margin-left:22px}
html body .premiere h2{font-size:clamp(46px,4.8vw,76px);margin:0 0 18px;letter-spacing:-.035em}
html body .premiere-sub{font-size:clamp(18px,1.7vw,23px);margin:0 0 26px;color:#fff}
html body .premiere-facts{margin:0;max-width:52ch;font-size:clamp(15px,1.25vw,17px);line-height:1.7;color:#d5e5f0}
html body .premiere-stats{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:4%;
 margin:clamp(44px,5vw,66px) 0 0;padding:34px 0 0;border-top:1px solid #ffffff33}
html body .premiere-stats li{display:flex;gap:18px;align-items:center}
html body .premiere-stats strong{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
 font-size:clamp(50px,5vw,76px);line-height:.9;color:#fff}
html body .premiere-stats span{font-size:13px;line-height:1.5;color:#bcd5e4}
@media(max-width:980px){
 html body .premiere-inner{grid-template-columns:1fr;gap:34px}
 html body .premiere-card{max-width:430px}
 html body .premiere-facts{max-width:none}
 html body .premiere-stats{grid-template-columns:1fr;gap:20px;padding-top:26px}
 html body .premiere-stats li{gap:16px}
 html body .premiere-stats strong{font-size:52px;min-width:72px}
}

/* ── Hero portrait, take two ────────────────────────────────────────────────
   It was drawn 603px wide from a 675px source — 1.79x undersampled on a 2x
   screen, hence the softness. Cap it near its native size, give it an arch and
   a caption instead of bleeding it across the frame. */
html body .hero-portrait{position:absolute;z-index:3;right:7%;bottom:120px;top:auto;left:auto;
 width:clamp(230px,24vw,330px);margin:0;pointer-events:none;
 mask-image:none;-webkit-mask-image:none;display:block}
html body .hero-portrait:after{display:none}
html body .hero-portrait figcaption{display:block;margin:0 0 18px;padding-bottom:14px;
 border-bottom:1px solid #ffffff59;color:#fff}
html body .hero-portrait-name{display:block;font-size:13px;letter-spacing:.26em}
html body .hero-portrait-role{display:block;margin-top:6px;font-size:11px;letter-spacing:.14em;color:#bcd5e4}
html body .hero-portrait-frame{display:block;aspect-ratio:4/5;overflow:hidden;
 border-radius:50% 50% 5px 5px / 34% 34% 5px 5px;
 box-shadow:0 0 0 1px #ffffff3d,0 40px 70px -34px #04131ce6}
html body .hero-portrait img{display:block;width:100%;height:100%;object-fit:cover;
 object-position:50% 16%;filter:saturate(.78)}
/* keep the headline clear of the frame */
html body .hero h1{max-width:min(1040px,56%)}
@media(max-width:1000px){html body .hero-portrait{right:6%;bottom:104px;width:clamp(180px,22vw,240px)}
 html body .hero h1{max-width:min(1040px,62%)}}
@media(max-width:700px){
 html body .hero-portrait{position:absolute;right:6%;bottom:86px;width:126px;height:auto}
 html body .hero-portrait figcaption{margin-bottom:12px;padding-bottom:9px}
 html body .hero-portrait-name{font-size:10px;letter-spacing:.18em}
 html body .hero-portrait-role{font-size:8px;margin-top:4px}
 html body .hero h1{max-width:none}
}

/* ── Premiere: darken the footage the way the hero used to ───────────────── */
html body .premiere-media video,html body .premiere-media img{filter:brightness(.72) saturate(.88)}
html body .premiere-overlay{background:
 linear-gradient(90deg,#072b3de0 0%,#072b3da8 42%,#072b3d5c 70%,#072b3d38 100%),
 linear-gradient(0deg,#072b3dcc 0%,transparent 46%,transparent 62%,#072b3d8f 100%)}

/* ── Hero, rebuilt without video: a light field and the portrait ─────────── */
html body .hero{background:linear-gradient(165deg,#eaf1f7 0%,#dde9f2 46%,#f4f8fb 100%);
 color:#122d42;--text:#122d42;--muted:#516a7b;--line:#173e5726;--ice:#173f6b;
 --btn-bg:#001d3d;--btn-text:#fff;--btn-fill:#dce8f4;--btn-hover-text:#001d3d;--btn-rim:#001d3d40;
 min-height:700px;height:100svh;max-height:1000px;overflow:hidden}
html body header{color:#122d42}
html body header nav a{color:#31506b}
html body header .nav-cta{color:#122d42;border-bottom-color:#173e5745}
html body .hero h1{color:#122d42;max-width:min(1040px,50%)}
html body .hero h1 em{color:#173f6b}
html body .hero-bottom p{color:#44607a}
html body .hero-foot,html body .hero-foot a,html body .side-note{color:#44607a}
html body .hero-foot .icon svg{stroke:#44607a}
/* portrait becomes the focal image, still inside its native resolution */
html body .hero-portrait{right:7%;bottom:auto;top:50%;transform:translateY(-50%);
 width:clamp(260px,29vw,400px)}
html body .hero-portrait figcaption{border-bottom-color:#173e5745;color:#122d42}
html body .hero-portrait-name{color:#122d42}
html body .hero-portrait-role{color:#516a7b}
html body .hero-portrait-frame{box-shadow:0 0 0 1px #173e5733,0 44px 80px -40px #0f2a3f80}
html body .hero-portrait img{filter:none}
@media(max-width:1000px){html body .hero-portrait{width:clamp(210px,27vw,300px)}
 html body .hero h1{max-width:min(1040px,56%)}}
@media(max-width:700px){
 html body .hero{height:auto;min-height:0;max-height:none;padding-bottom:40px}
 html body .hero-portrait{position:static;transform:none;width:min(260px,62%);margin:34px 0 0}
 html body .hero h1{max-width:none}
}
/* 215px of empty light after a full-bleed dark card reads as a hole, not as air */
html body .premiere{padding-bottom:clamp(28px,3vw,44px)}
html body .pillars{padding-top:clamp(60px,7vw,84px)}

/* ── Hero back to the dark cinematic field, still no video ───────────────── */
html body .hero{background:#0b2433;color:#f4fafe;
 --text:#f4fafe;--muted:#c3d3e0;--line:#ffffff26;--ice:#a9cdf2;
 --btn-bg:#f4fafe;--btn-text:#001d3d;--btn-fill:#001d3d;--btn-hover-text:#f4fafe;--btn-rim:#ffffff73;
 min-height:700px;height:100svh;max-height:1000px;overflow:hidden;isolation:isolate}
html body .hero-media{position:absolute;inset:0;z-index:0;border-radius:0;overflow:hidden;transform:none!important}
html body .hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;
 filter:brightness(.72) saturate(.88);border-radius:0}
html body .hero-shade{position:absolute;inset:0;z-index:1;display:block;background:
 linear-gradient(90deg,#08202ee6 0%,#08202eb8 42%,#08202e63 70%,#08202e38 100%),
 linear-gradient(#08202e94 0%,#08202e42 14%,transparent 32%,transparent 62%,#08202e8f 100%)}
html body .hero-content{position:relative;z-index:2}
html body header{color:#f4fafe}
html body header nav a{color:#dfeaf3}
html body header .nav-cta{color:#f4fafe;border-bottom-color:#ffffff5c}
html body .hero h1{color:#f4fafe}
html body .hero h1 em{color:#a9cdf2}
html body .hero-bottom p{color:#dbe7f0}
html body .hero-foot,html body .hero-foot a,html body .side-note{color:#fff;z-index:2}
html body .hero-portrait{z-index:3;right:7%;top:50%;bottom:auto;transform:translateY(-50%)}
html body .hero-portrait figcaption{border-bottom-color:#ffffff59;color:#fff}
html body .hero-portrait-name{color:#fff}
html body .hero-portrait-role{color:#bcd5e4}
html body .hero-portrait-frame{box-shadow:0 0 0 1px #ffffff3d,0 44px 80px -36px #04131ce6}
html body .hero-portrait img{filter:saturate(.82)}
@media(max-width:700px){
 html body .hero{height:100svh;min-height:600px;padding-bottom:0}
 html body .hero-portrait{position:absolute;right:6%;bottom:84px;top:auto;transform:none;width:124px;margin:0}
}

/* Hero: no landscape at all — a dark field and Wim, nothing else */
html body .hero{background:
 radial-gradient(120% 90% at 78% 28%,#1a4a6b4d,transparent 62%),
 linear-gradient(158deg,#0c2637 0%,#08202e 52%,#061a26 100%);
 height:auto;min-height:0;max-height:none;padding:0 0 clamp(70px,8vw,110px)}
html body .hero-content{padding-top:clamp(190px,20vh,250px);padding-bottom:0}
html body .hero-portrait{top:auto;bottom:auto;transform:none;position:absolute;right:7%;
 top:50%;translate:0 -50%;width:clamp(250px,27vw,340px)}
html body .hero-foot{position:relative;inset:auto;margin-top:clamp(56px,7vw,92px);padding:0 5.2%}
@media(max-width:820px){
 html body .hero{padding-bottom:56px}
 html body .hero-content{padding-top:150px}
 html body .hero-portrait{position:static;translate:none;width:min(250px,60%);margin:32px 0 0}
 html body .hero-foot{margin-top:40px;padding:0 6%}
}
/* caption removed from the markup; nothing left to style */

/* Hero: the ice-hole frame stretched across the top, copy beneath it */
html body .hero{padding-bottom:clamp(56px,6vw,88px)}
html body .hero-banner{position:relative;width:100%;height:clamp(300px,44vh,520px);overflow:hidden}
html body .hero-banner img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;
 filter:saturate(.88) brightness(.94);display:block}
html body .hero-banner:after{content:'';position:absolute;inset:0;pointer-events:none;background:
 linear-gradient(#08202eb8 0%,#08202e42 22%,transparent 46%),
 linear-gradient(0deg,#0c2637 0%,#0c263780 22%,transparent 52%)}
html body .hero-content{padding-top:clamp(46px,5vw,70px);max-width:1600px;margin:auto}
html body .hero h1{max-width:min(1040px,86%)}
html body .hero-bottom{display:flex;align-items:center;gap:60px}
html body .hero-bottom p{max-width:520px}
@media(max-width:820px){
 html body .hero-banner{height:clamp(240px,34vh,320px)}
 html body .hero-content{padding-top:40px}
 html body .hero h1{max-width:none}
 html body .hero-bottom{display:block}
 html body .hero-bottom p{max-width:none}
}
/* the column direction came from elsewhere; align-items:center then centred the
   paragraph and button instead of seating them next to each other */
html body .hero-bottom{flex-direction:row;align-items:center;justify-content:flex-start}
@media(max-width:820px){html body .hero-bottom{flex-direction:column;align-items:flex-start;gap:26px}}
/* the flex row squeezed the button until its label broke into three lines */
html body .hero-bottom p{flex:1 1 auto}
html body .hero-bottom .button{flex:0 0 auto;white-space:nowrap;width:auto;max-width:none}
/* Show the frame as shot: no filter, no scrim. The header moves off the photo
   onto the dark field, so nothing has to be dimmed for legibility. */
html body .hero-banner{margin-top:108px;height:clamp(320px,48vh,560px)}
html body .hero-banner img{filter:none}
html body .hero-banner:after{display:none}
@media(max-width:820px){html body .hero-banner{margin-top:86px;height:clamp(230px,32vh,320px)}}

/* Photo moves to the side: a tall panel on the right, copy on the left.
   It starts below the header so nothing has to be dimmed for legibility. */
html body .hero{position:relative;padding-bottom:clamp(64px,7vw,96px);overflow:hidden}
html body .hero-banner{position:absolute;top:108px;right:0;bottom:0;left:auto;
 width:46%;height:auto;margin:0;z-index:1}
html body .hero-banner img{width:100%;height:100%;object-fit:cover;object-position:52% 42%;filter:none}
html body .hero-banner:after{display:none}
html body .hero-content{position:relative;z-index:2;padding-top:clamp(170px,22vh,240px);max-width:1600px;margin:auto}
html body .hero h1{max-width:48%}
html body .hero-bottom{flex-direction:column;align-items:flex-start;gap:30px}
html body .hero-bottom p{max-width:44%}
html body .hero-foot{position:relative;inset:auto;z-index:2;margin-top:clamp(48px,6vw,80px);padding:0 5.2%}
@media(max-width:900px){
 html body .hero-banner{position:relative;top:auto;right:auto;width:100%;height:clamp(240px,34vh,340px);margin-top:26px}
 html body .hero-content{padding-top:150px}
 html body .hero h1,html body .hero-bottom p{max-width:none}
 html body .hero-foot{margin-top:34px;padding:0 6%}
}
/* stacked layout: the photo belongs under the copy, not beneath the header */
@media(max-width:900px){
 html body .hero{display:flex;flex-direction:column}
 html body .hero-content{order:1}
 html body .hero-banner{order:2;margin-top:30px}
 html body .hero-foot{order:3}
}
/* the bottom line ran under the photo panel and vanished on the snow */
@media(min-width:901px){html body .hero-foot{padding-right:calc(46% + 2.6%)}}
/* the portrait is vertical and matches the panel's proportions, so it needs
   almost no cropping — but it is only 675px wide, so keep the panel narrower */
html body .hero-banner{width:40%}
html body .hero-banner img{object-position:50% 18%}
@media(min-width:901px){html body .hero-foot{padding-right:calc(40% + 2.6%)}}

/* Final hero layout: one grid owns both columns and all responsive sizing. */
html body .hero-refined .hero-film{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#0c2637 url('assets/river.jpg') center/cover no-repeat}
html body .hero-refined .hero-film video{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s}
html body .hero-refined .hero-film video.playing{opacity:1}
html body .hero-refined .hero-film:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,25,39,.83),rgba(6,25,39,.65)),linear-gradient(0deg,rgba(6,25,39,.4),transparent 50%)}
html body .hero.hero-refined{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:1fr auto;gap:28px 6%;align-items:center;padding:145px 6% 42px;min-height:850px;height:auto;max-height:none;background:#0c2637}
html body .hero-refined .hero-content{grid-column:1;grid-row:1;position:relative;padding:0;margin:0;width:100%;max-width:none;order:0}
html body .hero-refined h1{font-size:clamp(44px,4.5vw,72px);line-height:1.06;letter-spacing:-.035em;max-width:none;margin:0 0 30px;text-wrap:pretty}
html body .hero-refined h1 em{font-size:1em;line-height:inherit;max-width:none;margin-top:14px;display:block}
html body .hero-refined .hero-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:28px;width:100%}
html body .hero-refined .hero-bottom p{width:100%;max-width:480px;flex:none;font-size:16px;line-height:1.75;margin:0}
html body .hero-refined .hero-bottom .button{width:auto;max-width:100%;min-height:60px;white-space:normal;margin:0;padding:18px 24px}
html body .hero-refined .hero-banner{grid-column:2;grid-row:1 / 3;position:relative;inset:auto;order:0;width:100%;height:100%;min-height:610px;max-height:760px;margin:0;border-radius:8px;overflow:hidden;align-self:stretch}
html body .hero-refined .hero-banner img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:none}
html body .hero-refined .hero-foot{grid-column:1;grid-row:2;position:static;order:0;inset:auto;margin:0;padding:0;display:flex;align-items:center;justify-content:flex-start;width:100%}
html body .hero-refined .hero-foot>span{display:none}
html body .hero-refined .hero-foot>a{font-size:11px;letter-spacing:.1em;max-width:100%}
html body .hero-refined .side-note{display:none}
@media(min-width:1600px){html body .hero.hero-refined{padding-inline:max(6%,calc((100vw - 1440px)/2));min-height:950px}}
@media(max-width:900px){
 html body .hero.hero-refined{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);padding:130px 5% 38px;gap:30px 5%;min-height:780px}
 html body .hero-refined h1{font-size:clamp(38px,5.1vw,48px)}
 html body .hero-refined .hero-banner{min-height:560px;max-height:none}
}
@media(max-width:700px){
 html body .hero.hero-refined{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:32px;padding:100px 6% 32px;min-height:0}
 html body .hero-refined .hero-banner{grid-column:1;grid-row:1;min-height:0;height:360px;max-height:none;width:100%;border-radius:6px}
 html body .hero-refined .hero-banner img{object-position:50% 24%}
 html body .hero-refined .hero-content{grid-column:1;grid-row:2;padding:0}
 html body .hero-refined h1{font-size:clamp(37px,10vw,56px);line-height:1.06;margin-bottom:24px}
 html body .hero-refined .hero-bottom p{font-size:16px;line-height:1.65}
 html body .hero-refined .hero-bottom .button{width:100%;font-size:14px;gap:16px}
 html body .hero-refined .hero-foot{grid-column:1;grid-row:3;padding:0;justify-content:center}
}

/* Hero portrait as part of the moving water scene, without a card edge. */
html body .hero.hero-refined{display:block;position:relative;min-height:clamp(820px,100svh,980px);padding:0;overflow:hidden}
html body .hero-refined .hero-film:after{background:
 radial-gradient(ellipse 48% 68% at 80% 44%,rgba(116,187,220,.16),transparent 72%),
 linear-gradient(90deg,rgba(3,18,29,.92) 0%,rgba(4,22,34,.78) 46%,rgba(6,26,39,.4) 72%,rgba(5,22,34,.58) 100%),
 linear-gradient(0deg,rgba(3,17,27,.82) 0%,transparent 46%,rgba(4,17,27,.3) 100%)}
html body .hero-refined .hero-banner{position:absolute;z-index:1;top:0;right:-3%;bottom:-2%;left:auto;width:min(56vw,820px);height:auto;min-height:0;max-height:none;margin:0;overflow:visible;border-radius:0;align-self:auto;pointer-events:none}
html body .hero-refined .hero-banner:before{content:'';position:absolute;z-index:-1;inset:10% 2% 3% 4%;background:radial-gradient(ellipse at center,rgba(119,196,225,.2),transparent 68%);filter:blur(32px)}
html body .hero-refined .hero-banner:after{content:'';display:block;position:absolute;z-index:2;inset:0 0 0 -180px;pointer-events:none;background:
 linear-gradient(90deg,transparent 0%,rgba(4,21,33,.74) 13%,rgba(4,21,33,1) 25%,rgba(4,22,34,.78) 36%,rgba(4,22,34,.28) 48%,transparent 61%),
 linear-gradient(180deg,rgba(4,21,33,.98) 0%,rgba(4,22,34,.58) 9%,transparent 25%),
 linear-gradient(0deg,rgba(3,18,29,.96) 0%,rgba(3,18,29,.34) 14%,transparent 30%)}
html body .hero-refined .hero-banner img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:saturate(.68) contrast(1.04) brightness(.86);border-radius:0;
 -webkit-mask-image:radial-gradient(ellipse 77% 91% at 52% 46%,#000 0 55%,rgba(0,0,0,.96) 62%,rgba(0,0,0,.58) 76%,transparent 100%);
 mask-image:radial-gradient(ellipse 77% 91% at 52% 46%,#000 0 55%,rgba(0,0,0,.96) 62%,rgba(0,0,0,.58) 76%,transparent 100%)}
html body .hero-refined .hero-content{position:relative;z-index:3;width:min(56%,780px);max-width:none;margin:0;padding:clamp(178px,20vh,230px) 0 0 6%}
html body .hero-refined h1{font-size:clamp(48px,4.7vw,76px);line-height:1.02;letter-spacing:-.04em;margin-bottom:34px;text-shadow:0 3px 30px rgba(0,12,20,.28)}
html body .hero-refined h1 em{margin-top:12px}
html body .hero-refined .hero-bottom p{max-width:540px;color:#e2edf4;text-shadow:0 2px 18px rgba(0,10,18,.35)}
html body .hero-refined .hero-foot{position:absolute;z-index:4;left:6%;bottom:38px;width:auto;margin:0;padding:0}

@media(max-width:980px){
 html body .hero.hero-refined{min-height:780px}
 html body .hero-refined .hero-content{width:58%;padding-left:5%;padding-top:160px}
 html body .hero-refined .hero-banner{right:-9%;width:58vw}
 html body .hero-refined h1{font-size:clamp(40px,5vw,52px)}
}

@media(max-width:700px){
 html body .hero.hero-refined{display:flex;flex-direction:column;min-height:0;padding:0 6% 32px;background:#071c2a}
 html body .hero-refined .hero-film{inset:0 -8% 0 -8%}
 html body .hero-refined .hero-film:after{background:
  linear-gradient(0deg,rgba(3,17,27,.96) 0%,rgba(4,21,33,.48) 42%,rgba(4,19,30,.32) 68%,rgba(3,16,26,.72) 100%),
  radial-gradient(ellipse 85% 42% at 50% 20%,rgba(126,204,231,.18),transparent 76%)}
 html body .hero-refined .hero-banner{position:relative;order:1;top:auto;right:auto;bottom:auto;width:calc(100% + 12vw);height:clamp(300px,41vh,410px);margin:76px -6vw -38px;overflow:visible}
 html body .hero-refined .hero-banner:before{inset:8% 6% 8%;filter:blur(24px)}
 html body .hero-refined .hero-banner:after{inset:0;background:
  linear-gradient(90deg,rgba(4,21,33,.72) 0%,transparent 22%,transparent 78%,rgba(4,21,33,.72) 100%),
  linear-gradient(180deg,rgba(4,21,33,.92) 0%,transparent 18%),
  linear-gradient(0deg,rgba(3,17,27,1) 0%,rgba(3,17,27,.42) 18%,transparent 40%)}
 html body .hero-refined .hero-banner img{object-position:50% 13%;filter:saturate(.72) contrast(1.03) brightness(.84);
  -webkit-mask-image:radial-gradient(ellipse 72% 88% at 50% 46%,#000 0 57%,rgba(0,0,0,.9) 66%,rgba(0,0,0,.42) 78%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 88% at 50% 46%,#000 0 57%,rgba(0,0,0,.9) 66%,rgba(0,0,0,.42) 78%,transparent 100%)}
 html body .hero-refined .hero-content{order:2;width:calc(100% + 12vw);margin:-72px -6vw 0;padding:90px 6vw 0;position:relative;background:linear-gradient(180deg,transparent 0,rgba(3,17,27,.92) 64px,rgba(3,17,27,1) 118px)}
 html body .hero-refined h1{font-size:clamp(36px,10.4vw,48px);line-height:1.03;margin-bottom:24px}
 html body .hero-refined h1 em{margin-top:9px}
 html body .hero-refined .hero-bottom{gap:24px}
 html body .hero-refined .hero-bottom p{font-size:15px;line-height:1.62}
 html body .hero-refined .hero-bottom .button{width:100%;min-height:58px}
 html body .hero-refined .hero-foot{order:3;position:relative;left:auto;bottom:auto;width:100%;margin:30px 0 0;justify-content:center}
}

/* Softer hand-off from the photo to the dark column: the elliptical mask alone
   fell off too steeply on the left, so a long horizontal dissolve is layered
   over it and the film's own gradient reaches further right to meet it. */
@media(min-width:981px){
 html body .hero-refined .hero-banner img{
  -webkit-mask-image:
   linear-gradient(90deg,transparent 0%,rgba(0,0,0,.10) 14%,rgba(0,0,0,.34) 26%,rgba(0,0,0,.66) 38%,rgba(0,0,0,.88) 48%,#000 60%),
   radial-gradient(ellipse 77% 91% at 52% 46%,#000 0 55%,rgba(0,0,0,.96) 62%,rgba(0,0,0,.58) 76%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
   linear-gradient(90deg,transparent 0%,rgba(0,0,0,.10) 14%,rgba(0,0,0,.34) 26%,rgba(0,0,0,.66) 38%,rgba(0,0,0,.88) 48%,#000 60%),
   radial-gradient(ellipse 77% 91% at 52% 46%,#000 0 55%,rgba(0,0,0,.96) 62%,rgba(0,0,0,.58) 76%,transparent 100%);
  mask-composite:intersect}
 html body .hero-refined .hero-film:after{background:
  radial-gradient(48% 68% at 80% 44%,rgba(116,187,220,.16),rgba(0,0,0,0) 72%),
  linear-gradient(90deg,rgba(3,18,29,.94) 0%,rgba(3,19,30,.88) 28%,rgba(4,21,33,.66) 46%,rgba(4,22,34,.34) 62%,rgba(4,22,34,.12) 78%,transparent 92%),
  linear-gradient(0deg,rgba(3,18,29,.96) 0%,rgba(3,18,29,.34) 14%,transparent 30%)}
}

/* The river footage ran the full width, so it met the portrait and left a
   vertical seam plus ice texture across Wim's face. Fade it out before him and
   let the hero's own dark ground carry the right-hand side. */
@media(min-width:981px){
 html body .hero.hero-refined{background:#071c2a}
 html body .hero-refined .hero-film{
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 26%,rgba(0,0,0,.82) 38%,rgba(0,0,0,.42) 50%,rgba(0,0,0,.14) 60%,transparent 70%);
  mask-image:linear-gradient(90deg,#000 0%,#000 26%,rgba(0,0,0,.82) 38%,rgba(0,0,0,.42) 50%,rgba(0,0,0,.14) 60%,transparent 70%)}
 /* with the film gone on the right, the portrait no longer needs to dissolve so early */
 html body .hero-refined .hero-banner img{
  -webkit-mask-image:
   linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 12%,rgba(0,0,0,.52) 24%,rgba(0,0,0,.84) 36%,#000 46%),
   radial-gradient(ellipse 82% 94% at 54% 46%,#000 0 62%,rgba(0,0,0,.94) 71%,rgba(0,0,0,.5) 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
   linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 12%,rgba(0,0,0,.52) 24%,rgba(0,0,0,.84) 36%,#000 46%),
   radial-gradient(ellipse 82% 94% at 54% 46%,#000 0 62%,rgba(0,0,0,.94) 71%,rgba(0,0,0,.5) 84%,transparent 100%);
  mask-composite:intersect}
}

/* No backdrop image at all, and a lighter ground tuned to the photograph:
   its water samples at #c4dae3 and its top band at #e8e5e8, so a near-black
   field was fighting it. Deeper on the copy side for contrast, opening toward
   the ice blue where it meets the portrait. */
html body .hero.hero-refined{background:
 radial-gradient(90% 76% at 88% 40%,#3f6b81a6,transparent 68%),
 linear-gradient(104deg,#16394e 0%,#1c4459 40%,#27566d 72%,#33647a 100%)}
html body .hero-refined .hero-banner img{
 -webkit-mask-image:
  linear-gradient(90deg,transparent 0%,rgba(0,0,0,.2) 12%,rgba(0,0,0,.56) 24%,rgba(0,0,0,.86) 36%,#000 46%),
  radial-gradient(ellipse 84% 96% at 54% 46%,#000 0 64%,rgba(0,0,0,.94) 73%,rgba(0,0,0,.5) 86%,transparent 100%);
 -webkit-mask-composite:source-in;
 mask-image:
  linear-gradient(90deg,transparent 0%,rgba(0,0,0,.2) 12%,rgba(0,0,0,.56) 24%,rgba(0,0,0,.86) 36%,#000 46%),
  radial-gradient(ellipse 84% 96% at 54% 46%,#000 0 64%,rgba(0,0,0,.94) 73%,rgba(0,0,0,.5) 86%,transparent 100%);
 mask-composite:intersect;
 filter:saturate(.82) contrast(1.02)}
/* a multi-stop gradient across a large dark area bands into a visible edge;
   two stops on a single axis render clean */
html body .hero.hero-refined{background:linear-gradient(97deg,#17394d 0%,#2f5e74 100%)}
/* this curtain hit full opacity at 25% of the panel — a hard dark column with
   visible edges. The image mask already handles the dissolve, so soften it to
   a gentle bottom-only fade. */
@media(min-width:981px){
 html body .hero-refined .hero-banner:after{background:linear-gradient(0deg,rgba(9,32,46,.82) 0%,rgba(9,32,46,.28) 12%,transparent 26%)}
 html body .hero-refined .hero-banner:before{display:none}
}

/* The left-to-right gradient muddied into teal across a large area. Flat navy
   from the site's own palette instead, with one soft lift behind the portrait
   so the field is not dead — no visible transition to band or discolour. */
html body .hero.hero-refined{background:
 radial-gradient(78% 68% at 82% 46%,rgba(70,122,158,.20) 0%,rgba(70,122,158,.07) 42%,transparent 72%),
 #16354f}

/* ── Hero on the light ground ────────────────────────────────────────────── */
html body .hero.hero-refined{background:linear-gradient(180deg,#eaf2f8 0%,#e4eef6 62%,#eef4f9 100%);
 color:#122d42;--text:#122d42;--muted:#51697d;--line:#173e5726;--ice:#1b4a74;
 --btn-bg:#001d3d;--btn-text:#fff;--btn-fill:#dce8f4;--btn-hover-text:#001d3d;--btn-rim:#001d3d40;
 min-height:0;height:auto;max-height:none;padding-bottom:clamp(64px,7vw,96px);overflow:hidden}
html body header{color:#122d42}
html body header nav a{color:#31506b}
html body header .nav-cta{color:#122d42;border-bottom-color:#173e5745}
html body .hero-refined h1{color:#122d42;text-shadow:none}
html body .hero-refined h1 em{color:#1b4a74}
html body .hero-refined .hero-bottom p{color:#44607a;text-shadow:none}
html body .hero-refined .hero-foot,html body .hero-refined .hero-foot a{color:#51697d}
html body .hero-refined .hero-foot .icon svg{stroke:#51697d}
/* the photograph: a clean panel, no mask needed on a light ground */
html body .hero-refined .hero-banner{position:absolute;z-index:1;right:6%;top:132px;bottom:auto;left:auto;
 width:clamp(280px,31vw,420px);height:auto;aspect-ratio:4/4.6;overflow:visible;pointer-events:none}
html body .hero-refined .hero-banner:before,html body .hero-refined .hero-banner:after{display:none}
html body .hero-refined .hero-banner img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;
 border-radius:6px;filter:none;-webkit-mask-image:none;mask-image:none;
 box-shadow:0 34px 70px -34px #0f2a3f59}
html body .hero-plate{position:absolute;left:-22px;bottom:34px;z-index:2;
 background:#001d3d;color:#fff;padding:17px 24px;border-radius:3px;
 font-size:18px;letter-spacing:.14em;line-height:1.25;transform:rotate(-4deg);
 box-shadow:0 18px 36px -18px #0f2a3f8c}
html body .hero-plate small{display:block;margin-top:5px;font-size:10px;letter-spacing:.3em;color:#a9cdf2}
html body .hero-refined .hero-content{width:min(52%,700px);padding-top:clamp(180px,20vh,236px)}
html body .hero-refined .hero-foot{position:relative;left:auto;bottom:auto;margin-top:clamp(52px,6vw,80px);padding:0 6%}
@media(max-width:900px){
 html body .hero-refined .hero-banner{position:relative;right:auto;top:auto;width:min(300px,68%);margin:32px 0 0;order:2}
 html body .hero-refined .hero-content{width:100%;order:1;padding-top:150px}
 html body .hero-refined .hero-foot{order:3;margin-top:36px}
 html body .hero-plate{left:-14px;bottom:26px;font-size:16px;padding:14px 20px}
}
/* hover fill was #dce8f4 — only 1.10 against the pale field, so the button
   dissolved into the page. A lighter navy keeps it a solid block that shifts
   tone instead of vanishing. */
html:root{--btn-fill:#1b4a74;--btn-hover-text:#fff}
html body .hero.hero-refined{--btn-fill:#1b4a74;--btn-hover-text:#fff}
html body .premiere .selection-action{--btn-fill:#1b4a74;--btn-hover-text:#fff}

/* A whisper of the water behind the light ground, plus a larger headline */
html body .hero-refined .hero-film{position:absolute;inset:0;z-index:0;pointer-events:none;
 overflow:hidden;background:none;opacity:.13;mix-blend-mode:multiply;
 -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.8) 34%,#000 62%);
 mask-image:linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.8) 34%,#000 62%)}
html body .hero-refined .hero-film video{position:absolute;inset:0;width:100%;height:100%;
 object-fit:cover;filter:saturate(.5) contrast(.95)}
html body .hero-refined .hero-film:after{display:none}
html body .hero-refined h1{font-size:clamp(54px,5.6vw,92px);line-height:1.0;margin-bottom:36px}
@media(max-width:900px){html body .hero-refined h1{font-size:clamp(40px,8.4vw,58px)}}
/* multiply at .13 greyed the pale blue out and read too strongly;
   soft-light keeps the hue and leaves only a hint of texture */
html body .hero-refined .hero-film{opacity:.5;mix-blend-mode:soft-light}
html body .hero-refined .hero-film video{filter:saturate(.35) contrast(.9) brightness(1.04)}



/* ── Главный экран: кадр во всю ширину, имя поперёк, Вим перед буквами ──
   Раскладка по образцу insiderexpeditions.com/wimhof. Кадр с ледниковой
   лагуной лежит фоном целиком; поверх него — имя; поверх имени тем же самым
   кадром, но с вырезанным фоном, положен только сам Вим, поэтому буквы
   уходят за него. Оба слоя масштабируются одинаково (object-fit/position),
   поэтому совпадают пиксель в пиксель на любом экране. Кадр затемнён и внизу
   уходит в тёмный градиент — на нём заголовок, подзаголовок и кнопка. */
html body .hero.hero-stage{
 position:relative;display:block;height:100svh;min-height:740px;max-height:1120px;overflow:hidden;
 isolation:isolate;background:#050e18;color:#f1f7fb;--text:#f1f7fb;--muted:#b7cad8;--line:#ffffff2b;--ice:#9ec9ee;
 --btn-bg:#fff;--btn-text:#0b2033;--btn-fill:#cfe2f3;--btn-hover-text:#0b2033;--btn-rim:#ffffff52}
html body .hero-scene{position:absolute;inset:0;z-index:0;pointer-events:none}
html body .hero-scene img{position:absolute;inset:0;width:100%;height:100%;
 object-fit:cover;object-position:100% 50%;filter:saturate(.92) brightness(.97) contrast(1.02);
 scale:1;translate:0 0;transform-origin:50% 38%}
html body .hero-scene-front{z-index:2}

/* имя: буквы расходятся в стороны, в просвете оказывается голова */
html body .hero-wordmark{position:absolute;z-index:1;left:auto;top:30%;transform:translateY(-50%);
 right:clamp(20px,calc(.505 * clamp(740px,100svh,1120px) - 23.85vw),340px);
 margin:0;display:flex;justify-content:flex-end;gap:clamp(104px,17vw,340px);
 font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:clamp(54px,7.8vw,150px);
 line-height:.86;letter-spacing:-.045em;color:#f4f9fd;user-select:none;
 text-shadow:0 0 70px rgba(4,14,24,.6),0 18px 56px rgba(3,10,18,.5)}

/* тёмная подложка под шапкой: пункты меню всегда лежат на тёмном */
html body .hero-cap{position:absolute;z-index:3;left:0;right:0;top:0;height:260px;pointer-events:none;
 background:linear-gradient(180deg,rgba(4,13,22,.84) 0%,rgba(4,13,22,.74) 26%,rgba(4,13,22,.42) 52%,rgba(4,13,22,.14) 76%,rgba(4,13,22,0) 100%)}

/* кадр уходит в тёмный градиент, на котором лежит текстовый блок */
html body .hero-veil{position:absolute;z-index:3;inset:0;height:auto;pointer-events:none;
 background:
  linear-gradient(0deg,#050e18 0%,rgba(5,14,24,.78) 7%,rgba(6,16,27,.32) 16%,rgba(8,20,33,0) 27%),
  linear-gradient(90deg,rgba(5,14,24,.93) 0%,rgba(5,14,24,.88) 15%,rgba(5,14,24,.76) 28%,rgba(6,16,27,.5) 40%,rgba(8,20,33,.2) 52%,rgba(10,26,42,.04) 63%,rgba(10,26,42,0) 72%)}

/* плёночное зерно поверх кадра */
html body .hero-grain{position:absolute;z-index:4;inset:0;pointer-events:none;opacity:.5;
 mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.9' intercept='-0.45'/%3E%3CfeFuncG type='linear' slope='1.9' intercept='-0.45'/%3E%3CfeFuncB type='linear' slope='1.9' intercept='-0.45'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
 background-size:180px 180px}

html body .hero-stage .hero-content{position:absolute;z-index:5;left:6%;right:auto;top:auto;bottom:clamp(96px,13vh,152px);
 transform:none;display:block;width:min(47%,610px);max-width:none;margin:0;padding:0;text-align:left}
html body .hero-stage h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
 font-size:clamp(34px,4.3vw,64px);line-height:1.06;letter-spacing:-.012em;
 margin:0 0 24px;width:auto;max-width:100%;white-space:normal;color:#f4f9fd;text-shadow:0 2px 26px rgba(4,17,28,.45)}
html body .hero-stage h1 em{display:block;margin-top:0;font-style:normal;font-weight:inherit;
 font-size:1em;line-height:inherit;letter-spacing:inherit;color:inherit}
html body .hero-lede{max-width:440px;margin:0 0 32px;font-size:16px;line-height:1.7;color:#c6d8e5;
 text-shadow:0 1px 18px rgba(4,17,28,.4)}
html body .hero-stage .hero-content .button{display:inline-flex;width:auto;min-width:290px}

html body .hero-stage .hero-foot{position:absolute;z-index:6;left:6%;right:6%;bottom:30px;
 display:flex;justify-content:space-between;align-items:center;margin:0;padding:0;color:#94afc3}
html body .hero-stage .hero-foot a{color:#94afc3}
html body .hero-stage .hero-foot .icon svg{stroke:#94afc3}

/* шапка лежит на затемнённом кадре */
html body header{color:#f2f8fc}
html body header nav a{color:#eaf3fa;text-shadow:0 1px 16px rgba(3,12,20,.6)}
html body header .nav-cta{color:#f2f8fc;border-bottom-color:#ffffff59;text-shadow:0 1px 16px rgba(3,12,20,.6)}
html body header .nav-cta .icon svg{stroke:#f2f8fc}

@media(max-width:1100px){
 /* Центрированная раскладка: сверху кадр, он уходит в тёмное, ниже — заголовок,
    подзаголовок и кнопка. Ничего не лежит поверх лица. */
 html body .hero.hero-stage{--scene-h:clamp(296px,45svh,430px);
  height:auto;min-height:100svh;max-height:none;display:block;padding:var(--scene-h) 0 0}
 html body .hero-scene{inset:0 0 auto 0;height:var(--scene-h)}
 html body .hero-wordmark{left:0;right:0;justify-content:center;transform:translate(0,-50%)}
 html body .hero-scene img{height:100%;object-position:50% 16%;scale:1;translate:0 0;
  filter:saturate(.88) brightness(.9) contrast(1.03)}
 html body .hero-cap{height:150px;
  background:linear-gradient(180deg,rgba(4,13,22,.82) 0%,rgba(4,13,22,.62) 38%,rgba(4,13,22,.24) 70%,rgba(4,13,22,0) 100%)}
 html body .hero-veil{inset:0 0 auto 0;height:var(--scene-h);
  background:linear-gradient(180deg,rgba(5,14,24,0) 56%,rgba(5,14,24,.28) 73%,rgba(5,14,24,.7) 87%,rgba(5,14,24,.94) 96%,#050e18 100%)}
 html body .hero-wordmark{top:max(150px,calc(var(--scene-h) * .34));
  font-size:clamp(46px,14.6vw,98px);gap:clamp(56px,17vw,120px);text-shadow:0 14px 40px rgba(3,10,18,.5)}
 html body .hero-stage .hero-content{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;
  display:block;width:auto;max-width:none;margin:0;padding:clamp(20px,6vw,32px) 7% 0;text-align:center}
 html body .hero-stage h1{font-size:clamp(30px,9.7vw,46px);line-height:1.06;white-space:normal;
  margin:0 auto 22px;text-shadow:none}
 html body .hero-lede{font-size:15px;line-height:1.6;margin:0 auto 26px;max-width:420px;text-shadow:none}
 html body .hero-stage h1{text-align:center}
 html body .hero-stage h1 em{font-size:1em;margin-top:0}
 html body .hero-stage .hero-content .button{display:flex;width:100%;min-width:0;
  max-width:420px;margin:0 auto;min-height:56px}
 html body .hero-stage .hero-foot{position:relative;left:auto;right:auto;bottom:auto;margin:clamp(28px,8vw,44px) 0 0;
  padding:0 7% clamp(26px,7vw,38px);justify-content:center}
 html body .hero-stage .hero-foot>span{display:none}
}


/* Планшет: кадр шире полосы, имя чуть компактнее, чтобы буквы не упирались
   в края экрана. */
@media(min-width:601px) and (max-width:1100px){
 html body .hero-wordmark{font-size:clamp(56px,9.5vw,110px);gap:clamp(60px,12vw,150px)}
}

/* ── Переключатель языка в шапке ───────────────────────────────────────
   Русская версия лежит в корне, английская — в /en/. Обе тянут одни и те же
   стили, шрифты и картинки, поэтому переключение — обычная ссылка. */
html body .header-left{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
html body .lang-switch{display:flex;align-items:center;gap:9px;
 font-size:11px;letter-spacing:.16em;line-height:1}
html body .lang-switch a,html body .lang-switch span{color:#9db6ca;text-decoration:none;
 text-shadow:0 1px 16px rgba(3,12,20,.6);transition:color .3s}
html body .lang-switch [aria-current]{color:#f2f8fc}
html body .lang-switch a:hover,html body .lang-switch a:focus-visible{color:#f2f8fc}
html body .lang-switch i{display:block;width:1px;height:11px;background:#ffffff42}
@media(max-width:700px){
 /* На телефоне в шапке остаются только логотип и переключатель языка:
    кнопку «Подать заявку» прячем — она есть в первом экране и внизу.
    display:contents растворяет обёртку, и переключатель уходит вправо
    по space-between самой шапки. */
 html body header .nav-cta{display:none}
 html body .header-left{display:contents}
 html body .lang-switch{gap:7px;font-size:10px;letter-spacing:.12em}
}