/* LEV27 — landing page prototype.
   Built from tokens.css and lev.css; nothing here invents a colour or a face.

   How the page is put together
   - Every section opens the same way: a hairline, a number, a label, then the name.
   - One motion idea, taken from the name: things rise. Names rise from behind their
     baseline, pictures rise into their frames, and things under the pointer lift with the
     hard shadow of the LEV block.
   - One timed loop, in the hero: the photo waterfall. (In the denim version the hero's
     texture also loops, through three frames.) Everything else follows the scroll
     or the pointer: the buttons pull, the reel can be thrown.
   All motion is an enhancement: without the .js class (no script, or reduced motion)
   every element is simply in place and every answer is open. */
*,*::before,*::after{box-sizing:border-box}
:root{--pad:clamp(20px,4vw,56px);--navh:64px;--chrome:64px;--railh:0px}
:root:has(.proto){--chrome:100px}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--lev-white);color:var(--lev-midnight);font:400 17px/1.55 var(--lev-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--lev-lime);color:var(--lev-midnight)}
:focus-visible{outline:3px solid var(--lev-navy);outline-offset:3px}
.f-navy :focus-visible,.nav :focus-visible,.hero :focus-visible{outline-color:var(--lev-lime)}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--lev-lime);color:var(--lev-midnight);font-weight:800;padding:12px 16px;text-decoration:none}
.skip:focus{top:12px}
.c-lime{color:var(--lev-lime)} .c-sky{color:var(--lev-sky)}

.name{font-family:var(--lev-display);font-weight:700;text-transform:uppercase;line-height:.84;color:var(--lev-navy)}
.label{font:700 12px/1.3 var(--lev-data);letter-spacing:.1em;text-transform:uppercase}

/* placeholder facts: marked so nobody mistakes one for a decision */
.ph{background-image:linear-gradient(var(--lev-lime),var(--lev-lime));background-size:100% .34em;background-position:0 92%;background-repeat:no-repeat}
.hero .ph,.cta .ph{background-image:linear-gradient(rgba(218,229,134,.45),rgba(218,229,134,.45))}
.tier .ph{background-image:linear-gradient(var(--lev-lime),var(--lev-lime));background-size:100% 3px;background-position:0 100%;padding-bottom:.06em}
.tier--first .ph{background-image:linear-gradient(var(--lev-navy),var(--lev-navy))}

/* ---------- rising: the mask and what moves inside it ---------- */
.rise{display:block;overflow:hidden;padding:.16em .04em .1em;margin:-.16em -.04em -.1em}
.rise>span{display:block;transition:transform var(--lev-dur-rise) var(--lev-rise) calc(var(--d,0) * var(--lev-stagger))}
.settle{transition:transform var(--lev-dur-settle) var(--lev-settle) .16s,opacity .5s linear .16s}
.js [data-in]:not(.in) .rise>span{transform:translateY(114%)}
.js [data-in]:not(.in) .settle{transform:translateY(22px);opacity:0}
@keyframes lp-rise{from{transform:translateY(114%)}}
/* while the loading screen is up the first screen waits, and plays as the field lifts */
html.intro:not(.intro-out) :is(.hero h1 .rise>span,.hero__eyebrow,.hero__cta,.fall__col){animation-play-state:paused}
@keyframes lp-settle{from{transform:translateY(22px);opacity:0}}

/* ---------- small parts ---------- */
.lev-btn.go{gap:.7em}
.lev-btn[data-mag]{transition:transform .28s var(--lev-settle),box-shadow .28s var(--lev-settle),translate .45s var(--lev-settle)}
.go svg{width:.8em;height:.8em;fill:currentColor;transition:translate .5s var(--lev-pop)}
.go:hover svg{translate:.22em 0}
.more{display:inline-flex;align-items:center;gap:10px;font:700 12px/1 var(--lev-data);letter-spacing:.1em;text-transform:uppercase;color:var(--lev-white);text-decoration:none;padding:8px 0}
.more::after{content:"";width:8px;height:8px;border-right:2px solid var(--lev-lime);border-bottom:2px solid var(--lev-lime);transform:translateY(-3px) rotate(45deg);transition:transform .45s var(--lev-pop)}
.more:hover::after{transform:translateY(2px) rotate(45deg)}
.more--navy{color:var(--lev-navy)}
.more--navy::after{border-color:var(--lev-navy);transform:rotate(-45deg)}
.more--navy:hover::after{transform:translateX(5px) rotate(-45deg)}

/* ---------- prototype ribbon ---------- */
.proto{background:var(--lev-lime);color:var(--lev-midnight);font:600 13px/1.35 var(--lev-text);padding:8px var(--pad);display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:space-between}
.proto a{font-weight:800}
.proto__sw{display:inline-flex;align-items:center;gap:2px;font:700 11px/1 var(--lev-data);letter-spacing:.1em;text-transform:uppercase}
.proto__sw a{margin-left:6px;padding:5px 8px 4px;text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--lev-midnight)}
.proto__sw a+a{margin-left:0}
html:not(.denim) .proto__sw a[data-v=flat],.denim .proto__sw a[data-v=denim]{background:var(--lev-midnight);color:var(--lev-lime)}

/* ---------- nav ----------
   Three zones: the mark, the five sections, Register. The links are set like the labels that
   open each section, and the one you are in carries the same filled chip its section does.
   A lime line along the foot shows how far down the page you are. Once the page has moved,
   the bar lifts off it with a hairline and a soft shadow. On a small screen the links move
   into a full-height sheet behind a Menu button. */
.nav{position:sticky;top:0;z-index:30;background:var(--lev-navy);color:var(--lev-white);transition:box-shadow .45s}
.stuck .nav{box-shadow:0 1px 0 rgba(255,255,255,.16),0 18px 36px -24px rgba(5,31,118,.9)}
.nav__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:clamp(12px,2vw,28px);min-height:var(--navh)}
.nav__logo{justify-self:start;display:block}
.nav__logo img{height:40px;width:auto}
.nav nav{display:flex;align-items:center;gap:clamp(0px,.5vw,8px)}
.nav nav a{display:flex;align-items:center;gap:8px;padding:10px clamp(6px,.8vw,12px);font:700 11.5px/1 var(--lev-data);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.nav nav a span{opacity:.78;transition:opacity .25s}
.nav nav a b{display:grid;place-items:center;min-width:26px;height:20px;padding:1px 5px 0;font:inherit;font-size:10.5px;letter-spacing:.04em;color:var(--lev-sky);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);transition:background .3s,color .3s,box-shadow .3s}
.nav nav a:hover span,.nav nav a.on span{opacity:1}
.nav nav a span{box-shadow:inset 0 -2px 0 transparent;padding-bottom:3px;transition:opacity .25s,box-shadow .25s}
.nav nav a.on span{box-shadow:inset 0 -2px 0 var(--lev-lime)}
.nav nav a:hover b{color:var(--lev-lime);box-shadow:inset 0 0 0 1px var(--lev-lime)}
.nav nav a.on b{background:var(--lev-lime);color:var(--lev-midnight);box-shadow:none}
.nav__end{justify-self:end;display:flex;align-items:center;gap:6px}
.nav__cta{font-size:14.5px;padding:.86em 1.15em}
.nav__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--lev-lime);transform-origin:0 50%;transform:scaleX(var(--sp,0))}
.nav__menu{display:none;appearance:none;border:0;border-radius:0;background:none;color:inherit;cursor:pointer;height:44px;padding:0 2px 0 12px;align-items:center;gap:10px;
  font:700 11.5px/1 var(--lev-data);letter-spacing:.1em;text-transform:uppercase}
.nav__menu i{position:relative;width:22px;height:12px;flex:none}
.nav__menu i::before,.nav__menu i::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--lev-lime);transition:transform .45s var(--lev-settle)}
.nav__menu i::before{top:0}
.nav__menu i::after{bottom:0}
.nav.open .nav__menu i::before{transform:translateY(5px) rotate(45deg)}
.nav.open .nav__menu i::after{transform:translateY(-5px) rotate(-45deg)}
.menu-open{overflow:hidden}
@media (max-width:1100px){
  .nav__in{grid-template-columns:1fr auto}
  .nav nav{display:none}
  .scripted .nav__menu{display:inline-flex}
  /* the sheet: the same five links, large, under the bar */
  .nav.open nav{display:flex;position:fixed;left:0;right:0;top:var(--menu-top,64px);bottom:0;flex-direction:column;align-items:stretch;gap:0;
    padding:clamp(8px,3vh,28px) var(--pad) 32px;background:var(--lev-navy);overflow-y:auto}
  .nav.open nav a{gap:16px;padding:clamp(14px,2.7vh,24px) 0;border-top:1px solid rgba(255,255,255,.24);white-space:normal;
    font:900 clamp(32px,9.4vw,58px)/1 var(--lev-text);letter-spacing:-.045em;text-transform:none}
  .nav.open nav a:first-child{border-top:0}
  .nav.open nav a span{opacity:1}
  .nav.open nav a b{min-width:34px;height:24px;font:700 12px/1 var(--lev-data);letter-spacing:.04em}
  .js .nav.open nav a{animation:lp-settle .7s var(--lev-settle) both}
  .js .nav.open nav a:nth-child(2){animation-delay:.05s}
  .js .nav.open nav a:nth-child(3){animation-delay:.1s}
  .js .nav.open nav a:nth-child(4){animation-delay:.15s}
  .js .nav.open nav a:nth-child(5){animation-delay:.2s}
}
@media (max-width:400px){ .nav__cta{padding:.86em .9em} .nav__cta svg{display:none} }

/* ---------- hero ----------
   Two halves on one navy field, and the facts on a rail beneath.
   Left: the line, as large as the screen allows, and Register. Right: the waterfall, edge to edge. */
.hero{background:var(--lev-navy);color:var(--lev-white);overflow:clip}
.hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr)}
.hero__main{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(22px,4vh,48px) clamp(24px,3.4vw,56px) clamp(24px,4.2vh,48px) max(var(--pad),calc((100vw - 1440px) / 2 + var(--pad)))}
.hero__eyebrow{color:var(--lev-white);font-size:13px}
.hero__eyebrow .lev{color:var(--lev-lime)}
/* four lines: as wide as the column takes, or as tall as the screen leaves room for, whichever is smaller */
.hero h1{font:900 clamp(40px,min(7.4vw,calc((100svh - var(--chrome) - var(--railh) - 214px) / 3.8)),96px)/.93 var(--lev-text);letter-spacing:-.05em;margin-top:clamp(12px,2vh,22px)}
.hero h1 .rise+.rise{margin-top:.03em}
.hero__cta{display:flex;align-items:center;gap:clamp(16px,2vw,28px);margin-top:clamp(20px,3.4vh,40px)}
.hero__cta .lev-btn{font-size:clamp(17px,1.5vw,20px);padding:1.1em 1.7em}
.hero__fall{position:relative;min-height:0}
.hero__tex{display:none}   /* the three frames of texture the denim version loops through */
@media (min-width:901px){
  /* the first screen is the hero and nothing else: the facts rail always sits on its bottom edge */
  .hero{display:flex;flex-direction:column;min-height:calc(100svh - var(--chrome))}
  .hero__in{flex:1}
}
@media (max-width:900px){
  .hero h1{font-size:clamp(44px,14.4vw,96px)}
  .hero__in{grid-template-columns:1fr}
  .hero__main{padding-right:var(--pad);padding-top:34px;padding-bottom:34px}
  .hero__fall{height:clamp(300px,92vw,520px)}
}
/* load: the line rises, half a beat apart, then the rest settles */
.js .hero h1 .rise>span{animation:lp-rise var(--lev-dur-rise) var(--lev-rise) .12s both}
.js .hero h1 .rise+.rise>span{animation-delay:.26s}
.js .hero__eyebrow{animation:lp-settle 1s var(--lev-settle) .05s both}
.js .hero__cta{animation:lp-settle 1s var(--lev-settle) .6s both}
/* scroll: the line leaves a little ahead of the page. --p runs 0 to 1 as the hero goes */
.js .hero__main{translate:0 calc(var(--p,0) * -56px)}
/* the window artwork, wherever a page is asked to use it: its letters can be moved one by one */
.lev-window .lt{transform-box:fill-box;transform-origin:50% 100%}

/* the waterfall: tiles touch, columns run opposite ways, slowly. It keeps moving under the pointer (Jake, 2026-10-21). */
.fall{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden}
.fall__col{min-width:0}
.fall__track{display:flex;flex-direction:column;animation:fall-up 84s linear infinite}
.fall__col--down .fall__track{animation-name:fall-down;animation-duration:96s}
.fall__col:nth-child(3) .fall__track{animation-duration:108s}
.fall .t{display:block;width:100%;height:auto;max-width:none}
.fall .t--t{aspect-ratio:4/5} .fall .t--w{aspect-ratio:3/2} .fall .t--b{aspect-ratio:1}
.fall .t--b img{display:block;width:100%;height:100%}
@keyframes fall-up{to{transform:translateY(-50%)}}
@keyframes fall-down{from{transform:translateY(-50%)}to{transform:none}}
@keyframes lp-col{from{transform:translateY(46%)}}
.js .fall__col{animation:lp-col 1.5s var(--lev-rise) .1s both;translate:0 calc(var(--p,0) * -120px)}
.js .fall__col:nth-child(2){animation-delay:.24s}
.js .fall__col:nth-child(3){animation-delay:.38s}
.js .fall__col--down{translate:0 calc(var(--p,0) * 120px)}

/* the facts: a rail of four, in hairlines, at the foot of the first screen */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border-top:1px solid rgba(255,255,255,.26);
  padding:0 max(var(--pad),calc((100vw - 1440px) / 2 + var(--pad)));position:relative;background:var(--lev-navy)}
.fact{padding:16px clamp(14px,2vw,28px) 18px;border-left:1px solid rgba(255,255,255,.26)}
.fact:first-child{border-left:0;padding-left:0}
.fact dt{font:700 11.5px/1.3 var(--lev-data);letter-spacing:.1em;text-transform:uppercase;color:var(--lev-lime)}
.fact dd{font:800 clamp(16px,1.45vw,21px)/1.2 var(--lev-text);letter-spacing:-.02em;margin-top:5px}
.fact dd.fact__more{font:500 13px/1.35 var(--lev-text);letter-spacing:0;margin-top:4px}
@media (max-width:860px){
  .facts{grid-template-columns:1fr 1fr}
  .fact{min-height:0;padding:14px 14px 16px}
  .fact:nth-child(odd){border-left:0;padding-left:0}
  .fact:nth-child(n+3){border-top:1px solid rgba(255,255,255,.26)}
}

/* ---------- the ticker: the lines, moving only as the page moves ---------- */
.ticker{background:var(--lev-lime);color:var(--lev-midnight);overflow:hidden}
.ticker__row{display:flex;width:max-content;padding:clamp(9px,1.1vw,15px) 0 clamp(7px,.9vw,12px);translate:calc(var(--tx,0) * -1px) 0}
.ticker__row span{display:flex;align-items:center;font:700 clamp(21px,2.5vw,36px)/1 var(--lev-display);text-transform:uppercase;white-space:nowrap}
.ticker__row span::after{content:"";width:.4em;height:.4em;background:var(--lev-navy);margin:0 .75em;translate:0 -.07em}

/* ---------- sections: hairline, number, label, name ---------- */
.sec{padding:clamp(52px,6.4vw,104px) 0}
.sec--mist{background:var(--lev-mist)}
.shead{border-top:1px solid var(--lev-navy);padding-top:14px;margin-bottom:clamp(22px,2.8vw,42px)}
.shead__n{display:flex;align-items:center;gap:12px;font:700 12.5px/1.3 var(--lev-data);letter-spacing:.1em;text-transform:uppercase;color:var(--lev-navy)}
.shead__n b{display:inline-grid;place-items:center;min-width:30px;height:23px;padding:1px 6px 0;background:var(--lev-navy);color:var(--lev-white);font:inherit;letter-spacing:.04em}
.shead .name{font-size:clamp(38px,4.8vw,78px);margin-top:clamp(12px,1.5vw,20px)}
.shead__note{font:500 clamp(15.5px,1.25vw,18px)/1.5 var(--lev-text);max-width:44em;margin-top:clamp(14px,1.6vw,22px)}
.shead--dark{border-top-color:rgba(255,255,255,.42)}
.shead--dark .shead__n{color:var(--lev-white)}
.shead--dark .shead__n b{background:var(--lev-lime);color:var(--lev-midnight)}
@media (max-width:520px){ .shead .name{font-size:11vw} }
/* a two-part section name sits on one line when there is room */
@media (min-width:700px){ .shead .name .rise{display:inline-block;vertical-align:top} }

/* ---------- 01 about ---------- */
.about{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:clamp(24px,4.6vw,76px);align-items:start}
.about__blk{position:sticky;top:calc(var(--navh) + 28px)}
.about__cell{aspect-ratio:1;overflow:hidden}
.about__cell img{width:100%;height:100%;transition:transform 1.1s var(--lev-settle)}
.js .about__blk:not(.in) .about__cell img{transform:translateY(101%)}
.about__blk figcaption{margin-top:12px;font:700 12px/1.3 var(--lev-data);letter-spacing:.1em;text-transform:uppercase;color:var(--lev-navy)}
.intro__say{font:900 clamp(24px,3.05vw,46px)/1.06 var(--lev-text);letter-spacing:-.042em;color:var(--lev-navy)}
.js .intro__say .w{color:var(--lev-sky);transition:color .3s linear}
.js .intro__say .w.on{color:var(--lev-navy)}
.getin{margin-top:clamp(22px,2.8vw,40px)}
.getin .label{color:var(--lev-navy)}
.getin ul{list-style:none;padding:0;margin-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(18px,2.6vw,40px)}
.getin li{border-top:1px solid var(--lev-navy);padding-top:12px;font:900 clamp(17px,1.55vw,24px)/1.08 var(--lev-text);letter-spacing:-.035em;color:var(--lev-navy)}
@media (max-width:860px){
  .about{grid-template-columns:1fr}
  .about__blk{position:static;display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:end}
  .about__blk figcaption{margin:0}
  .getin ul{grid-template-columns:1fr}
  .getin li{padding:10px 0 11px}
}

/* ---------- everyone ---------- */
.js .js @media (max-width:700px){  }

/* ---------- the idea ----------
   The two lines the weekend stands on, on the darkest field on the page.
   Each has the sentence behind it, which lights up word by word as it is read. */
.mani{background:var(--lev-midnight);color:var(--lev-white);padding:14px 0 clamp(72px,10vw,164px)}
.mani__cap{color:var(--lev-sky)}
.mani__row{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(20px,4vw,72px);align-items:end;
  border-top:1px solid rgba(255,255,255,.32);margin-top:clamp(56px,8vw,132px);padding-top:clamp(20px,2.6vw,40px)}
.mani__row--r{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.mani__row--r h2{order:2}
.mani h2{font:900 clamp(32px,5.6vw,96px)/.93 var(--lev-text);letter-spacing:-.05em;white-space:nowrap}
.mani [data-words]{font:600 clamp(18px,1.6vw,24px)/1.4 var(--lev-text);letter-spacing:-.01em;max-width:21em;padding-bottom:.45em}
.mani b{font-weight:800;letter-spacing:.03em}
.lev{color:var(--lev-lime)}
.js .mani [data-words] .w{color:rgba(255,255,255,.34);transition:color .3s linear}
.js .mani [data-words] .w.on{color:var(--lev-white)}
.js .mani [data-words] .w:not(.on) .lev{color:inherit}
@media (max-width:860px){
  .mani__row,.mani__row--r{grid-template-columns:1fr}
  .mani__row--r h2{order:0}
  .mani h2{font-size:clamp(28px,8.2vw,60px)}
}

/* ---------- 02 the weekend experience ----------
   With the script: a list on the left and a stage on the right. Point at, tab to or scroll past
   a part of the weekend and its photograph rises into the stage, with its block beside its name.
   Without it, or on a narrow screen: each part carries its own photograph. */
.xplore{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:start}
.xps{list-style:none;padding:0}
.xp{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(14px,1.6vw,24px);padding:clamp(20px,2.3vw,32px) 0;border-top:1px solid var(--lev-rule)}
.xp:first-child{border-top:0;padding-top:0}
.xp__n{display:grid;place-items:center;width:30px;height:23px;padding-top:1px;margin-top:.42em;font:700 12px/1 var(--lev-data);letter-spacing:.06em;color:var(--lev-navy);box-shadow:inset 0 0 0 1px var(--lev-navy);transition:background .3s,color .3s}
.xp__btn{appearance:none;border:0;border-radius:0;background:none;padding:0;text-align:left;cursor:default;font:900 clamp(24px,2.75vw,43px)/1 var(--lev-text);letter-spacing:-.036em;color:var(--lev-navy);transition:translate .5s var(--lev-settle)}
.xp p{font:500 clamp(15px,1.2vw,17.5px)/1.5 var(--lev-text);margin-top:10px;max-width:31em}
.xps{counter-reset:xp}
.xp{counter-increment:xp}
.xp__media{position:relative;margin-top:18px}
.xp__pic{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.xp__blk{display:flex;align-items:center;justify-content:space-between;box-shadow:inset 0 -1px 0 var(--lev-navy)}
.xp__blk img{width:clamp(56px,15vw,76px);height:auto;aspect-ratio:1}
.xp__blk::after{content:counter(xp,decimal-leading-zero) " / 06";font:700 12px/1 var(--lev-data);letter-spacing:.08em;color:var(--lev-navy);padding-right:2px}
.stage{display:none}
@media (min-width:1000px){
  .js .xplore{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .js .xp__media{display:none}
  .js .xp.on .xp__n{background:var(--lev-navy);color:var(--lev-white)}
  .js .xp__btn{cursor:pointer;min-height:44px}
  .js .xp.on .xp__btn{translate:10px 0}
  .js .stage{display:block;position:sticky;top:calc(var(--navh) + 28px)}
  html:not(.js) .xps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,64px)}
  html:not(.js) .xp:nth-child(2){border-top:0;padding-top:0}
}
.stage__frame{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--lev-mist)}
.stage__pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transition:clip-path .95s var(--lev-settle)}
.stage__pic.on{clip-path:inset(0);z-index:2}
.stage__pic.was{clip-path:inset(0);z-index:1;transition:none}
.stage__bar{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:clamp(14px,1.6vw,22px);color:var(--lev-navy);box-shadow:inset 0 -1px 0 var(--lev-navy)}
.stage__blks{position:relative;width:clamp(64px,6.2vw,92px);aspect-ratio:1;overflow:hidden}
.stage__blk{position:absolute;inset:0;width:100%;height:100%;clip-path:inset(100% 0 0 0);transition:clip-path .7s var(--lev-settle)}
.stage__blk.on{clip-path:inset(0);z-index:2}
.stage__blk.was{clip-path:inset(0);z-index:1;transition:none}
.stage__t{font:700 clamp(18px,1.9vw,29px)/.92 var(--lev-display);text-transform:uppercase;padding-top:.1em}
.stage__c{font:700 12.5px/1 var(--lev-data);letter-spacing:.08em;padding-right:2px}
.stage__line{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--lev-navy);transform-origin:0 50%;transform:scaleX(calc((var(--i,0) + 1) / 6));transition:transform .7s var(--lev-settle)}

/* ---------- 03 what you gain ----------
   One photograph, and a two-by-two of compact cards beside it: a block, a number, the gain and
   its sentence. The whole section fits one screen. */
.gains{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(12px,1.4vw,20px);align-items:stretch}
.gains__pic{margin:0;position:relative;overflow:hidden;background:var(--lev-sky);min-height:300px}
.gains__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;translate:0 calc(var(--py,0) * 1px);transition:transform 1.2s var(--lev-settle)}
.js .gains__pic img{scale:1.12}
.js .gains__pic:not(.in) img{transform:translateY(101%)}
.gains__list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.gain{background:var(--lev-mist);padding:clamp(18px,1.9vw,28px);display:flex;flex-direction:column;
  transition:transform .9s var(--lev-settle) calc(var(--d,0) * 90ms),opacity .5s linear calc(var(--d,0) * 90ms)}
.js .gain:not(.in){transform:translateY(26px);opacity:0}
.gain__top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:clamp(12px,1.4vw,18px)}
.gain__blk{display:block;width:clamp(44px,3.6vw,56px);aspect-ratio:1}
.gain__blk img{width:100%;height:100%}
.gain__n{display:grid;place-items:center;min-width:30px;height:23px;padding:1px 6px 0;font:700 12px/1 var(--lev-data);letter-spacing:.06em;color:var(--lev-navy);box-shadow:inset 0 0 0 1px var(--lev-navy)}
.gain h3{font:900 clamp(20px,1.75vw,26px)/1.05 var(--lev-text);letter-spacing:-.035em;color:var(--lev-navy);text-wrap:balance}
.gain p{font:500 clamp(14.5px,1.05vw,16px)/1.48 var(--lev-text);margin-top:8px}
/* the weekend: the same card, six up, each with its photograph on top */
.gains--six{grid-template-columns:minmax(0,1fr)}
.gains--six .gains__list{grid-template-columns:repeat(3,minmax(0,1fr))}
.gains--four{grid-template-columns:minmax(0,1fr)}
.gains--four .gains__list{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){ .gains--four .gains__list{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* on a phone the cards are one row you swipe, not a long stack */
@media (max-width:700px){
  .gains .swipe{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);
    margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 6px;scrollbar-width:none}
  .gains .swipe::-webkit-scrollbar{display:none}
  .gains .swipe>.gain{flex:0 0 82%;scroll-snap-align:start}
  .js .gains .swipe>.gain:not(.in){transform:none;opacity:1}
}
.gain--photo{padding-top:0}
.gain__pic{display:block;width:calc(100% + 2 * clamp(18px,1.9vw,28px));max-width:none;margin:0 calc(-1 * clamp(18px,1.9vw,28px)) 0;height:auto;aspect-ratio:2/1;object-fit:cover}
.gain--photo .gain__top{position:relative;margin-top:calc(-0.5 * clamp(44px,3.6vw,56px))}
@media (max-width:900px){ .gains--six .gains__list{grid-template-columns:repeat(2,minmax(0,1fr))} }

@media (max-width:1000px){
  .gains{grid-template-columns:1fr}
  .gains__pic{aspect-ratio:16/9;min-height:0}
}
@media (max-width:640px){
  .gains__list{grid-template-columns:1fr}
  .gains__pic{aspect-ratio:4/3}
}

/* ---------- 04 schedule ---------- */
.daytabs{display:none}
.days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,40px)}
.dayc__plate{background:var(--lev-sky);color:var(--lev-navy);font:700 clamp(32px,3.6vw,58px)/.86 var(--lev-display);text-transform:uppercase;padding:.24em .26em .14em;overflow:hidden}
.dayc ul{list-style:none;padding:8px 0 0;position:relative}
.dayc ul::before{content:"";position:absolute;left:5px;top:30px;bottom:30px;width:1px;background:var(--lev-navy);opacity:.4}
.dayc li{position:relative;padding:10px 0 10px 30px;transition:transform .9s var(--lev-settle),opacity .45s linear;transition-delay:calc(var(--d,0) * 120ms + var(--r,0) * 70ms + 260ms)}
.dayc li::before{content:"";position:absolute;left:0;top:14px;width:11px;height:11px;background:var(--lev-navy)}
.dayc li:nth-child(2){--r:1} .dayc li:nth-child(3){--r:2} .dayc li:nth-child(4){--r:3}
.dayc li b{display:block;font:700 12px/1.3 var(--lev-data);letter-spacing:.08em;text-transform:uppercase;color:var(--lev-navy)}
.dayc li span{display:block;font:700 clamp(16px,1.3vw,19px)/1.28 var(--lev-text);letter-spacing:-.015em;margin-top:3px}
.js .days:not(.in) li{transform:translateY(16px);opacity:0}
.notice{margin-top:clamp(20px,2.4vw,32px);background:var(--lev-lime);color:var(--lev-midnight);font:500 16px/1.4 var(--lev-text);padding:14px 18px}
@media (max-width:860px){
  .days{grid-template-columns:1fr;gap:28px}
  .js .daytabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-bottom:2px}
  .daytabs button{appearance:none;border:0;border-radius:0;cursor:pointer;min-height:48px;background:var(--lev-white);color:var(--lev-navy);font:700 clamp(19px,5.6vw,26px)/1 var(--lev-display);text-transform:uppercase;padding:.2em 0 0}
  .daytabs button[aria-selected=true]{background:var(--lev-navy);color:var(--lev-white)}
  .js .dayc{display:none}
  .js .dayc__plate{display:none}
  .js .days[data-day=fri] .dayc[data-d=fri],.js .days[data-day=sat] .dayc[data-d=sat],.js .days[data-day=sun] .dayc[data-d=sun]{display:block}
  .js .dayc ul{background:var(--lev-white);padding:14px 16px 12px}
  .js .dayc ul::before{left:21px;top:44px;bottom:42px}
}

/* ---------- 05 good to know ---------- */
.know__in{display:grid;gap:clamp(18px,2.2vw,28px)}
.ask{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px}
.ask__note{font:500 15.5px/1.5 var(--lev-text);max-width:26em}
.ask__card{background:var(--lev-mist);padding:12px 18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.ask__card .label{color:var(--lev-navy)}
.ask__who{font:900 clamp(18px,1.5vw,21px)/1.1 var(--lev-text);letter-spacing:-.03em;color:var(--lev-navy)}
.ask__role{font:500 14px/1.4 var(--lev-text)}
.ask__card .more{margin:0}
.qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3.4vw,56px);align-items:start;--qi:calc(30px + clamp(12px,1.6vw,22px))}
.qa__col{border-top:1px solid var(--lev-navy)}
.q{border-bottom:1px solid var(--lev-rule)}
.q button{appearance:none;border:0;border-radius:0;background:none;width:100%;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;column-gap:clamp(12px,1.6vw,22px);padding:clamp(13px,1.3vw,18px) 0;min-height:48px;cursor:pointer;text-align:left;color:var(--lev-navy)}
.q__n{font:700 12px/1 var(--lev-data);letter-spacing:.06em}
.q__t{font:800 clamp(17px,1.35vw,20px)/1.22 var(--lev-text);letter-spacing:-.02em;transition:translate .5s var(--lev-settle)}
.q button:hover .q__t{translate:6px 0}
.q button i{width:14px;height:14px;background:var(--lev-navy);transition:transform .45s var(--lev-pop),background .2s}
.q.open button i{transform:rotate(45deg);background:var(--lev-blue)}
.q__in p{margin:0 28px 0 var(--qi);max-width:42em;font-size:15.5px;line-height:1.5}
.q__in p+p{margin-top:.75em}
.q__in p:last-child{margin-bottom:clamp(18px,2vw,28px)}
.js .q__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--lev-settle)}
.js .q.open .q__a{grid-template-rows:1fr}
.js .q__in{overflow:hidden;min-height:0}
.js .q:not(.open) .q__in{visibility:hidden;transition:visibility 0s .55s}
@media (max-width:900px){
  .qa{grid-template-columns:1fr}
  .qa__col+.qa__col{border-top:0}
  .q__in p{margin-right:0}
}

/* ---------- the reel ----------
   Last year in photographs, a block after every pair. Grab it and throw it, use the
   arrows, or swipe. Without the script it is an ordinary sideways scroll. */
.reel{padding-top:clamp(8px,2vw,24px);overflow:hidden}
.reel__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(14px,1.8vw,24px)}
.reel__hint{margin-left:6px;padding:4px 8px 3px;background:var(--lev-lime);color:var(--lev-midnight)}
.reel__nav{display:flex;gap:2px}
.reel__nav button{appearance:none;border:0;border-radius:0;width:48px;height:48px;display:grid;place-items:center;background:var(--lev-navy);color:var(--lev-white);cursor:pointer;transition:background .2s,color .2s}
.reel__nav button:hover{background:var(--lev-lime);color:var(--lev-midnight)}
.reel__nav svg{width:18px;height:18px;fill:currentColor}
.reel__view{overflow-x:auto;scrollbar-width:none}
.reel__view::-webkit-scrollbar{display:none}
.reel__track{--rh:clamp(180px,22vw,330px);display:flex;width:max-content}
.reel__track img{height:var(--rh);width:auto;flex:none;max-width:none}
.reel__blk{display:block;flex:none;height:var(--rh);aspect-ratio:1}
.reel__blk img{display:block;width:100%}
.js .reel__view{overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.js .reel__view.drag{cursor:grabbing}
.js .reel__track{translate:calc(var(--rx,0) * -1px) 0}
.js .reel__track img{pointer-events:none;-webkit-user-drag:none}
html:not(.js) .reel__nav,html:not(.js) .reel__hint{display:none}

/* ---------- 06 register ---------- */
.cta{padding:clamp(52px,6.4vw,104px) 0}
.cta .shead{margin-bottom:0}
.cta h2{font:900 clamp(48px,8.6vw,132px)/.86 var(--lev-text);letter-spacing:-.055em;color:var(--lev-white);margin-top:clamp(18px,2.6vw,38px);white-space:nowrap}
.tiers{list-style:none;padding:0;margin-top:clamp(26px,3.4vw,48px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.tier{padding:clamp(16px,1.8vw,26px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.36);margin-left:-1px;display:flex;flex-direction:column;gap:clamp(14px,2vw,30px);
  transition:translate .4s var(--lev-settle),box-shadow .4s var(--lev-settle),transform .9s var(--lev-settle) calc(var(--d,0) * 110ms),opacity .5s linear calc(var(--d,0) * 110ms)}
.tier:first-child{margin-left:0}
.tier--first{background:var(--lev-lime);color:var(--lev-midnight);box-shadow:none}
.tier .label{color:var(--lev-sky)}
.tier--first .label{color:var(--lev-navy)}
.tier__p{font:700 clamp(46px,5.6vw,92px)/.84 var(--lev-data);letter-spacing:-.04em}
.tier__t{font:900 clamp(18px,1.6vw,24px)/1 var(--lev-text);letter-spacing:-.03em}
.js .tiers:not(.in) .tier{transform:translateY(34px);opacity:0}
@media (hover:hover){
  .tier:hover{translate:7px -7px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.36),-7px 7px 0 var(--lev-midnight);position:relative;z-index:1}
  .tier--first:hover{box-shadow:-7px 7px 0 var(--lev-midnight)}
}
.tiers__note{font:500 15.5px/1.5 var(--lev-text);max-width:46em;margin-top:18px}
.bigbtn{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:clamp(24px,3vw,44px);background:var(--lev-lime);color:var(--lev-midnight);
  padding:clamp(16px,1.8vw,26px) clamp(20px,2.6vw,40px);font:900 clamp(28px,3.8vw,58px)/1 var(--lev-text);letter-spacing:-.045em;text-decoration:none;
  transition:translate .4s var(--lev-settle),box-shadow .4s var(--lev-settle)}
.bigbtn svg{width:.82em;height:.82em;flex:none;fill:currentColor;transition:translate .5s var(--lev-pop)}
.bigbtn:hover,.bigbtn:focus-visible{translate:9px -9px;box-shadow:-9px 9px 0 var(--lev-midnight)}
.bigbtn:hover svg,.bigbtn:focus-visible svg{translate:.2em 0}
.bigbtn:active{translate:0 0;box-shadow:none}
.cta__note{font:500 16px/1.45 var(--lev-text);margin-top:18px}
@media (max-width:760px){
  .tiers{grid-template-columns:1fr}
  .tier{margin:-1px 0 0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 14px}
  .tier:first-child{margin-top:0}
  .tier .label{grid-column:1}
  .tier__t{grid-column:1}
  .tier__p{grid-column:2;grid-row:1 / span 2;font-size:clamp(40px,12vw,60px)}
}

/* ---------- footer ---------- */
/* the page ends on a navy section, so the closing band sits one step darker and reads as its own strip */
.foot .band{--k:1px;--bh:170;background:var(--lev-midnight)}
.foot .band__stack>i{background:var(--lev-navy);opacity:1}
.foot__note{background:var(--lev-midnight);color:var(--lev-sky);font:500 13px/1.5 var(--lev-text);padding:16px 0}
.foot__note .wrap{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between}
.foot__note a{color:var(--lev-white)}
@media (max-width:900px){ .foot .band{--bh:110} }
@media (max-width:560px){ .foot .band{--bh:64} }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fall__track,.fall__col{animation:none}
  .rise>span,.settle,.gain,.gains__pic img,.nav,.nav__menu i::before,.nav__menu i::after,.stage__pic,.stage__blk,.stage__line,.xp__btn,.xp__n,.q__t,.q button i,}

/* ---------- the language switch (EN / FR), beside Apply ---------- */
.nav__lang{display:inline-grid;place-items:center;min-width:44px;min-height:40px;padding:0 10px;font:700 12.5px/1 var(--lev-data);letter-spacing:.12em;
  color:var(--lev-white);text-decoration:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);transition:background .2s,color .2s,box-shadow .2s}
.nav__lang:hover{background:var(--lev-lime);color:var(--lev-midnight);box-shadow:none}
.nav__lang:focus-visible{outline:3px solid var(--lev-lime);outline-offset:3px}
.nav__end{gap:10px}

/* the contact's name is the link (Michelle, 2026-10-20) */
.ask__who a{color:inherit;text-decoration:underline;text-decoration-color:var(--lev-lime);text-decoration-thickness:3px;text-underline-offset:4px;transition:text-decoration-color .2s}
.ask__who a:hover{text-decoration-color:var(--lev-navy)}