/* Corners: buttons are full pills, logo tiles and photos are 12px, everything else is square. */
@font-face { font-family: Manrope; src: url(fonts/manrope-latin.woff2) format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Manrope; src: url(fonts/manrope-latin-ext.woff2) format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ground: #fafaf9;
  --lift: #eeeeeb;
  --ink: #131317;
  --dim: rgba(19, 19, 23, .68);
  --hair: rgba(19, 19, 23, .16);
  --lemon: #f7c063;
  --navy: #17003b;
  --gutter: clamp(20px, 4.4vw, 72px);
  --m: clamp(40px, min(6.4vw, 12.2vh), 116px);
  --gap: clamp(88px, 13vw, 200px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.6 Manrope, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
address { font-style: normal; }
h2 { color: #050506; font-size: clamp(32px, 4.4vw, 68px); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--lemon); outline-offset: 3px; }
p, small, .faces span { text-wrap: pretty; }
strong, .faces strong { text-wrap: balance; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ln { display: block; text-wrap: balance; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 40; background: var(--lemon); color: var(--navy); padding: 10px 16px; border-radius: 99px; font-weight: 600; }
.skip:focus { top: 12px; }

/* Buttons: a clear rectangle with a lemon border and lemon text. On hover the lemon rises from the bottom, like the nav words. */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .5em; white-space: nowrap; padding: 13px 20px; border: 1.5px solid var(--lemon); border-radius: 0; background: rgba(250, 250, 249, .55); color: var(--ink); font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: -.005em; text-decoration: none; text-shadow: none; transition: color .18s; }
.btn::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--lemon); transform: scaleY(0); transform-origin: bottom; transition: transform .28s cubic-bezier(.16, 1, .3, 1); }
.btn:hover, .btn:focus-visible { color: var(--ink); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }
.btn:active { transform: scale(.98); }
.btn i { font-style: normal; font-size: .82em; font-weight: 400; }
.btn-small { padding: 10px 15px; font-size: 15px; }
.btn-navy { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-navy::before { background: var(--navy); }
.btn-navy:hover, .btn-navy:focus-visible { color: #fff; }
@media (prefers-reduced-motion: reduce) { .btn::before { transition: none; } }

/* nav: logo on the left, words on the page's centre line, waitlist on the right. On hover a square lemon block rises from under each word. */
.nav { position: fixed; inset: 0 0 auto; z-index: 20; height: 84px; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; transition: background-color .3s; }
.nav.solid { background: var(--ground); }
.nav::after { content: ""; position: absolute; inset: 100% 0 auto; height: 18px; background: linear-gradient(to bottom, var(--ground), transparent); opacity: 0; transition: opacity .3s; pointer-events: none; }
.nav.solid::after { opacity: 1; }
.mark { font-weight: 800; font-size: 27px; letter-spacing: -.02em; text-decoration: none; justify-self: start; }
.nav-links { display: flex; gap: 2px; }
.nav-links .word { padding: .3em .5em; font-size: 16.5px; }
.word.now { color: var(--ink); }
.word.now::before { transform: scaleY(1); }
.word { position: relative; isolation: isolate; display: inline-block; padding: .3em .55em; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ink); text-decoration: none; transition: color .18s; }
.word::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lemon); transform: scaleY(0); transform-origin: bottom; transition: transform .28s cubic-bezier(.16, 1, .3, 1); }
.word:hover, .word:focus-visible, .nav-menu[open] summary.word { color: var(--ink); }
.word:hover::before, .word:focus-visible::before, .nav-menu[open] summary.word::before { transform: scaleY(1); }
.nav-end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 12px; }
.nav-menu { display: none; position: relative; }
.nav-menu summary { cursor: pointer; list-style: none; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu nav { position: absolute; right: .55em; top: 50px; min-width: 180px; max-height: calc(100dvh - 80px); overflow-y: auto; padding: 10px; background: var(--lift); display: grid; gap: 2px; box-shadow: 0 0 0 1px var(--hair); }
.nav-menu nav .word { display: block; font-size: 16px; }
@media (max-width: 1060px) {
  .nav { grid-template-columns: auto 1fr; }
  .nav-links { display: none; }
  .nav-end { grid-column: 2; }
  .nav-menu { display: block; margin-right: -.55em; }
}
/* The Romanian waitlist label is longer, so its words move into the menu sooner to keep them from sitting off-centre. */
@media (max-width: 1200px) {
  html:lang(ro) .nav { grid-template-columns: auto 1fr; }
  html:lang(ro) .nav-links { display: none; }
  html:lang(ro) .nav-end { grid-column: 2; }
  html:lang(ro) .nav-menu { display: block; margin-right: -.55em; }
}
@media (max-width: 560px) { html:lang(ro) .nav .btn-small { display: none; } }
@media (max-width: 480px) { .nav .btn-small { display: none; } }
@media (prefers-reduced-motion: reduce) { .word::before { transition: none; } }

/* hero: the headline steps down across the unicorn. Young sits on the left margin, Entrepreneur on the centre line,
   Generation on the right margin, and the button's left edge lines up under the G. */
.hero { --title: clamp(50px, min(6.4vw, 12.2vh), 116px); position: relative; min-height: 100vh; min-height: 100svh; padding: 84px var(--gutter) var(--gutter); display: grid; grid-template-rows: 1fr auto; }
/* No edge: the unicorn's canvas covers the whole screen and is multiplied into the page, so its white is the page's white
   and grains can fly anywhere. It moves with the scroll in the engine. */
.hero-cloud { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: default; mix-blend-mode: multiply; }
.hero-cloud:focus-visible { outline-offset: -8px; }
.hero-cloud.over { cursor: pointer; }
.hero-cloud.drag { cursor: grabbing; }
.hero-still { position: absolute; left: 50%; top: 50%; height: 84%; width: auto; transform: translate(-50%, -50%); }
.js .hero-still { display: none; }
.nogl .hero-still { display: block; filter: invert(1); }
.nogl .hero-cloud { display: none; }
/* Where a letter crosses the sand it shifts colour to contrast with it.
   space-evenly makes the four gaps equal: nav to Young, Young to Entrepreneur, Entrepreneur to Generation, Generation to the row below. */
.hero h1 { position: relative; z-index: 1; display: grid; align-content: space-evenly; font-size: var(--title); font-weight: 700; line-height: 1; letter-spacing: -.045em; color: #fff; mix-blend-mode: difference; pointer-events: none; }
.hero h1 span { display: block; width: fit-content; }
.hero h1 .l0 { justify-self: start; margin-left: .009em; }
.hero h1 .l1 { justify-self: center; }
.hero h1 .l2 { justify-self: end; }
.hero-foot { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; pointer-events: none; }
.hero-lead { max-width: 17em; font-size: clamp(19px, 1.75vw, 28px); font-weight: 500; line-height: 1.28; letter-spacing: -.015em; }
.hero-act { display: grid; justify-items: start; gap: 14px; width: var(--act-w, calc(var(--title) * 5.238)); font-size: 15px; line-height: 1.4; color: var(--ink); text-shadow: 0 0 .3em var(--ground), 0 0 .7em var(--ground); }
.hero-act { flex: none; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-btns .btn { font-size: clamp(14px, 1.05vw, 16px); padding: 12px clamp(13px, 1.1vw, 20px); }
.hero-act .btn { pointer-events: auto; }
.ph { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  .js .hero h1 span, .js .hero-foot > * { animation: hero-rise 1s cubic-bezier(.16, 1, .3, 1) backwards; }
  .js .hero h1 .l1 { animation-delay: .1s; }
  .js .hero h1 .l2 { animation-delay: .2s; }
  .js .hero-foot > * { animation-delay: .32s; }
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } }
/* below this there is no room for the column beside the text, so it stacks underneath on the left margin */
@media (max-width: 800px) {
  .hero-foot { display: grid; gap: 16px; justify-content: stretch; }
  .hero-act { width: auto; gap: 10px; }
}
/* phones and portrait tablets: the same diagonal, with the unicorn above the bottom row */
@media (max-width: 820px), (max-width: 1100px) and (orientation: portrait) {
  .hero { --title: clamp(42px, min(13.2vw, 8.4vh), 84px); padding-bottom: 24px; }
  .hero-lead { font-size: 19px; }
  .hero-still { top: 34%; height: 50%; }
}

/* reveal */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); }
  .js [data-reveal].in { opacity: 1; transform: none; }
}

/* statement */
.statement { padding: var(--gap) var(--gutter); }
.statement p { max-width: 21em; font-size: clamp(34px, 5.6vw, 92px); font-weight: 600; line-height: 1.08; letter-spacing: -.035em; }
.statement span { color: var(--lemon); }

.nb { white-space: nowrap; }

/* program */
.program { padding: 0 var(--gutter) var(--gap); display: grid; grid-template-columns: 5fr 6fr; gap: clamp(48px, 8vw, 140px); align-items: start; }
.program-side { position: sticky; top: 112px; display: grid; gap: 22px; }
.program-side > p { color: var(--dim); max-width: 30em; }
.program-side h3 { margin-top: 18px; font-size: 17px; font-weight: 700; }
.plain { display: grid; gap: 8px; color: var(--dim); }
.modules { counter-reset: m; }
.modules li { counter-increment: m; display: grid; grid-template-columns: 2.6em 1fr; column-gap: 12px; padding: clamp(36px, 5vw, 72px) 0; border-top: 1px solid var(--hair); }
.modules li::before { content: "0" counter(m); grid-row: span 2; color: var(--lemon); font-weight: 600; font-size: 15px; padding-top: .9em; }
.modules strong { font-size: clamp(30px, 3.8vw, 58px); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
.modules span { margin-top: 12px; color: var(--dim); font-size: clamp(17px, 1.4vw, 21px); }

/* quote */
.quote { padding: var(--gap) var(--gutter); background: var(--lift); display: grid; justify-items: center; text-align: center; gap: 32px; }
.quote blockquote { max-width: 21em; font-size: clamp(28px, 4vw, 62px); font-weight: 500; line-height: 1.16; letter-spacing: -.025em; text-wrap: balance; }
.quote figcaption { color: var(--dim); }

/* Team: short and sweet. A portrait, a name, a role, and a LinkedIn mark that turns blue and glows on hover. */
.people { padding: clamp(40px, 7vh, 80px) var(--gutter) clamp(70px, 11vh, 130px); }
.people h2 { font-size: calc(var(--m) * .78); font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.people h2 { text-align: center; }
.team { justify-content: center; display: grid; grid-template-columns: repeat(2, minmax(0, clamp(230px, 23vw, 340px))); gap: 12px; margin-top: clamp(24px, 4vh, 44px); }
.t-frame { display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 4 / 5; overflow: hidden; background: var(--lift); }
.t-frame img { width: 100%; height: 92%; object-fit: contain; object-position: center bottom; }
.t-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 0; background: var(--ground); }
.t-cap h3 { font-size: clamp(17px, 1.5vw, 24px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: #050506; }
.t-cap span { display: block; margin-top: 2px; font-size: clamp(14px, 1.05vw, 16px); color: var(--dim); }
.t-in { flex: none; display: block; width: 26px; height: 26px; color: #050506; transition: color .4s ease, filter .4s ease; }
.t-in svg { display: block; fill: currentColor; }
.t-in:hover, .t-in:focus-visible, .t-card:hover .t-in { color: #311adc; filter: drop-shadow(0 0 7px rgba(49, 26, 220, .75)) drop-shadow(0 0 16px rgba(49, 26, 220, .45)); }

/* believers */
.believers { padding: 0 var(--gutter) var(--gap); }
.believers h2 { max-width: 16em; margin-bottom: clamp(40px, 5vw, 72px); }
.believers h3, .partners h3, .faq-group h3 { font-size: 17px; font-weight: 700; margin-bottom: 28px; }
.faces { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 40px 24px; margin-bottom: clamp(56px, 6vw, 88px); }
.faces:last-child { margin-bottom: 0; }
.faces img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; background: var(--lift); border-radius: 12px; margin-bottom: 14px; filter: grayscale(1); transition: filter .4s; }
.f-link { display: block; }
.f-link:hover img, .f-link:focus-visible img { filter: none; box-shadow: 0 0 0 2px #311adc, 0 0 16px rgba(49, 26, 220, .55); }
.faces strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
.faces span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--dim); }

/* The white page is one canvas. The grains fall in front of the hero and behind everything after it. */
.fall { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.after { position: relative; z-index: 2; }

/* One Program. A Lifetime Mindset. Continues the hero's diagonal: left margin, then right margin. */
.mindset { padding: clamp(96px, 15vh, 200px) var(--gutter) clamp(72px, 11vh, 150px); }
.mindset h2 { display: grid; row-gap: clamp(28px, 7vh, 72px); font-size: var(--m); font-weight: 700; line-height: 1; letter-spacing: -.045em; color: #050506; }
.m-text { width: calc(var(--m) * 8.69); padding-right: calc(var(--m) * 1.9); margin: clamp(14px, 2.4vh, 24px) 0 0 auto; font-size: clamp(19px, 1.75vw, 28px); font-weight: 500; line-height: 1.18; letter-spacing: -.018em; }
.m-one { justify-self: start; margin-left: -.03em; }
.m-two { justify-self: end; text-align: right; }
/* The lemon rises under the word when the section is reached, the same gesture as the nav. */
.m-word { position: relative; isolation: isolate; padding: 0 .12em .06em; }
.m-word::before { content: ""; position: absolute; inset: .02em 0 -.02em; z-index: -1; background: var(--lemon); transform: scaleY(0); transform-origin: bottom; transition: transform .9s cubic-bezier(.16, 1, .3, 1) .45s; }
.in .m-word::before, html:not(.js) .m-word::before { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) { .m-word::before { transition: none; transform: scaleY(1); } }

/* Logos in hairline boxes on two rows that run off both edges of the screen, so nothing fences in the white page.
   Without motion (reduced motion, or no script) the boxes simply wrap inside the margins. */
.partners { padding: 0 0 clamp(96px, 15vh, 200px); }
.partners > h2 { padding: 0 var(--gutter); margin-bottom: clamp(36px, 6vh, 64px); }
.lane { overflow-x: clip; }
.lane + .lane { margin-top: clamp(28px, 4.5vh, 44px); }
.lane h3 { padding: 0 var(--gutter); margin-bottom: 16px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.belt { display: flex; gap: 12px; padding: 0 var(--gutter); will-change: transform; }
.logos { display: flex; flex-wrap: wrap; gap: 12px; }
.belt.moving { padding: 0; width: max-content; }
.belt.moving .logos { flex-wrap: nowrap; }
.logos li { position: relative; isolation: isolate; display: grid; place-items: center; flex: none; --h: clamp(84px, 8vw, 124px); width: clamp(150px, 15.5vw, 240px); height: var(--h); background: var(--ground); box-shadow: inset 0 0 0 1px var(--hair); }
.logos li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lemon); transform: scaleY(0); transform-origin: bottom; transition: transform .28s cubic-bezier(.16, 1, .3, 1); }
.logos li:hover::before, .logos li:focus-within::before { transform: scaleY(1); }
.logos a { display: grid; place-items: center; width: 100%; height: 100%; }
.logos img { max-width: 72%; max-height: calc(var(--h) * .62); width: auto; height: auto; object-fit: contain; filter: grayscale(1) contrast(1.15) brightness(.82); mix-blend-mode: multiply; }
/* Evening out the visual weight of very different logos. */
.logos img[alt="City Grill"] { max-height: calc(var(--h) * .5); }
.logos img[alt="EY"] { max-height: calc(var(--h) * .6); }
.logos img[alt*="Spiru Haret"] { max-width: 82%; }
@media (prefers-reduced-motion: reduce) { .logos li::before { transition: none; } }

.m-text, .lane h3 { text-shadow: 0 0 5px var(--ground), 0 0 5px var(--ground), 0 0 10px var(--ground); }

/* Impact: applicants come in tangled, a selection focuses them, and graduates leave in clean rows. */
.impact { padding: 0 var(--gutter) clamp(90px, 14vh, 180px); }
.funnel { position: relative; height: clamp(460px, 62vh, 640px); margin-top: clamp(36px, 6vh, 64px); }
.f-step { position: absolute; top: 50%; display: grid; gap: 8px; transform: translateY(-50%); text-shadow: 0 0 8px var(--ground), 0 0 8px var(--ground), 0 0 16px var(--ground); }
.js .f-step[data-reveal] { transform: translateY(calc(-50% + 22px)); }
.js .f-step[data-reveal].in { transform: translateY(-50%); }
.f-1 { left: 9%; }
.f-2 { left: 42%; }
.f-3 { right: 3%; }
.f-step b { display: block; font-size: clamp(56px, 7.2vw, 132px); font-weight: 700; line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: #050506; }
.f-step small { width: fit-content; padding: 3px 8px 3px 0; background: var(--ground); font-size: clamp(15px, 1.2vw, 19px); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; }
.i-last { text-shadow: none; }
.i-last b { position: relative; isolation: isolate; padding: 0 .06em; width: fit-content; }
.i-last b::before { content: ""; position: absolute; inset: .02em 0 -.02em; z-index: -1; background: var(--lemon); transform: scaleY(0); transform-origin: bottom; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.i-last b.landed::before, html:not(.js) .i-last b::before { transform: scaleY(1); }
.flow-mark { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
@media (max-width: 820px) {
  .funnel { height: 760px; }
  .f-step { left: 0; right: 0; justify-items: center; text-align: center; }
  .f-1 { top: 14%; }
  .f-2 { top: 52%; }
  .f-3 { top: 86%; right: 0; }
  .f-step small { padding-left: 8px; }
}

/* Where we meet: the tower in sand, on the same open white as everything else. Its canvas is the full screen, so a scatter has no edges.
   The three lines are equally spaced and centred on the tower's measured middle, which runs through the time. */
.venue { position: relative; min-height: 1000px; padding: 0 var(--gutter); overflow-x: clip; }
.venue-cloud { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; mix-blend-mode: multiply; pointer-events: none; touch-action: pan-y; }
.venue-cloud.live { pointer-events: auto; }
.venue-cloud.over { cursor: pointer; }
.venue-slot { position: absolute; top: 4px; bottom: 200px; left: 0; right: 52%; pointer-events: none; }
.venue-mark { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
.venue-text { position: absolute; z-index: 2; left: 50%; right: var(--gutter); top: 300px; display: grid; grid-auto-rows: 1fr; row-gap: clamp(22px, 4vh, 44px); color: #050506; font-size: clamp(28px, 3.25vw, 62px); font-weight: 700; line-height: 1.1; letter-spacing: -.04em; pointer-events: none; text-shadow: 0 0 8px var(--ground), 0 0 8px var(--ground); }
.venue-text a { pointer-events: auto; position: relative; isolation: isolate; display: inline-block; color: inherit; text-decoration: none; box-shadow: inset 0 -.09em 0 var(--lemon); }
.venue-text a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lemon); transform: scaleY(0); transform-origin: bottom; transition: transform .28s cubic-bezier(.16, 1, .3, 1); }
.venue-text a:hover::before, .venue-text a:focus-visible::before { transform: scaleY(1); }
/* The dot sits on the top floor and follows the building as it breathes. */
.venue-pin { position: absolute; z-index: 2; left: 0; top: 0; display: flex; align-items: center; gap: 10px; margin: -9px 0 0 -9px; font-size: clamp(15px, 1.2vw, 19px); font-weight: 700; letter-spacing: -.01em; color: #050506; white-space: nowrap; pointer-events: none; transition: opacity .3s; text-shadow: 0 0 6px var(--ground), 0 0 6px var(--ground); }
.venue-pin i { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--lemon); box-shadow: 0 0 0 1.5px #050506; }
.venue-pin i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--lemon); }
.venue-pin span::before { content: ""; display: inline-block; width: clamp(24px, 4vw, 64px); height: 1px; margin-right: 10px; background: #050506; vertical-align: middle; }
.venue-pin.away { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .venue-pin i::after { animation: pin-pulse 1.8s cubic-bezier(.16, 1, .3, 1) infinite; }
}
@keyframes pin-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3.6); opacity: 0; } }
@media (max-width: 820px) {
  .venue { min-height: 980px; }
  .venue-slot { left: 0; right: 0; top: 4px; bottom: 400px; }
  .venue-text { left: var(--gutter); top: auto !important; bottom: 110px; font-size: clamp(26px, 7.4vw, 50px); }
  .venue-pin span { position: absolute; left: -6px; bottom: 26px; width: 92px; white-space: normal; line-height: 1.15; }
  .venue-pin span::before { display: none; }
}

/* The five pillars: an object made of grains beside its words, swapping sides down the page so the trail weaves through each one. */
.pillars { padding: 0 var(--gutter) clamp(60px, 10vh, 120px); }
.p-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 4vw, 72px); min-height: clamp(500px, 68vh, 680px); margin-top: clamp(10px, 2vh, 28px); scroll-margin-top: 100px; }
.p-slot { height: clamp(340px, 50vh, 500px); cursor: pointer; }
.p-flip .p-slot { order: 2; }
.p-text { max-width: 40em; }
.p-num { display: inline-block; padding: 2px 8px; background: var(--lemon); font-size: 15px; font-weight: 700; color: #050506; }
.p-text h3 { margin: 14px 0 12px; font-size: clamp(36px, 4.4vw, 76px); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: #050506; }
.p-text > p { font-size: clamp(18px, 1.5vw, 24px); font-weight: 500; line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
.p-text > p + p { margin-top: 6px; }
.p-text, .p-text p, .p-list span { text-shadow: 0 0 8px var(--ground), 0 0 8px var(--ground); }
.p-list { margin-top: 22px; display: grid; gap: 10px; }
.p-list li { display: grid; grid-template-columns: 14em minmax(0, 1fr); gap: 6px 18px; padding-top: 10px; border-top: 1px solid var(--hair); }
.p-list strong { font-weight: 700; letter-spacing: -.01em; color: #050506; white-space: nowrap; }
.p-list span { color: var(--dim); }
.p-more { margin-top: 22px; }
.p-more summary { list-style: none; cursor: pointer; width: fit-content; }
.p-more summary::-webkit-details-marker { display: none; }
.p-more .faces { margin: 22px 0 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-row:has(.p-more[open]) { align-items: start; }
@media (max-width: 820px) {
  .p-row { grid-template-columns: minmax(0, 1fr); min-height: 0; margin-top: 44px; }
  .p-flip .p-slot { order: 0; }
  .p-slot { height: 300px; }
  .p-more .faces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faces strong { font-size: 15px; }
  .p-list li { grid-template-columns: minmax(0, 1fr); }
}

/* Who we're looking for: what's in the head, in a tidy grid above the cut, and the words beside it in the same column as the description above. */
.whos { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--m) * 8.69); column-gap: clamp(24px, 3vw, 48px); align-items: center; padding: clamp(40px, 7vh, 80px) var(--gutter) clamp(90px, 13vh, 150px); }
.w-stage { display: grid; row-gap: clamp(52px, 8vh, 84px); }
.w-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.w-box { display: grid; align-content: start; gap: 5px; padding: 12px 14px; background: var(--ground); box-shadow: inset 0 0 0 1px #050506; }
.w-box strong { font-size: clamp(16px, 1.3vw, 21px); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; color: #050506; }
.w-box span { font-size: clamp(13px, 1vw, 15px); line-height: 1.28; text-wrap: balance; }
.w-photo { display: block; width: 100%; height: auto; }
.w-fig figcaption { margin-top: 10px; font-size: 15px; font-weight: 700; color: #050506; }
.w-fig figcaption span { font-weight: 500; color: var(--dim); }
.w-text h2 { font-size: calc(var(--m) * .78); font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.w-lead { margin-top: clamp(16px, 2.6vh, 28px); padding-right: calc(var(--m) * 1.4); font-size: clamp(22px, 2.3vw, 38px); font-weight: 600; line-height: 1.12; letter-spacing: -.028em; color: #050506; text-wrap: balance; }
.w-sub { margin-top: 12px; font-size: clamp(17px, 1.4vw, 22px); font-weight: 500; line-height: 1.25; letter-spacing: -.012em; text-wrap: balance; }
@media (max-width: 1000px) {
  .whos { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .w-text { order: -1; }
  .w-lead { padding-right: 0; }
  .w-text h2 { font-size: clamp(36px, 9.5vw, 64px); }
  .w-stage { max-width: 560px; }
}

@media (max-width: 760px) {
  /* Phones: one left edge, and the longer line sized to fill the width exactly, so it reads the same on every phone. */
  .mindset { padding: 88px var(--gutter) 24px; }
  .mindset h2 { row-gap: .22em; font-size: min(calc((100vw - 2 * var(--gutter)) / 8.66), 64px); }
  .m-two { justify-self: start; text-align: left; margin-left: -.03em; white-space: nowrap; }
  .m-text { width: auto; padding-right: 0; margin: 24px 0 0; line-height: 1.28; }
}
@media (max-width: 1000px) { .m-text { padding-right: 0; } }
@media (max-width: 400px) { .m-text { font-size: 17px; } }

/* FAQ: a heading and a list, nothing else. */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.8fr); column-gap: clamp(40px, 5vw, 80px); padding: clamp(40px, 7vh, 80px) var(--gutter) clamp(70px, 11vh, 130px); }
.faq h2 { font-size: clamp(26px, 2.5vw, 40px); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; text-shadow: 0 0 8px var(--ground), 0 0 8px var(--ground); }
.q-list { background: var(--ground); }
.q-list details { border-top: 1px solid var(--hair); }
.q-list details:last-child { border-bottom: 1px solid var(--hair); }
.q-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 14px 0; font-size: clamp(17px, 1.4vw, 22px); font-weight: 500; line-height: 1.25; letter-spacing: -.012em; color: #050506; text-wrap: balance; }
.q-list summary::-webkit-details-marker { display: none; }
.q-list summary::after { content: "+"; flex: none; font-size: 1.15em; line-height: 1; transition: transform .25s; }
.q-list details[open] summary::after { transform: rotate(45deg); }
.q-list p { max-width: 42em; padding: 0 44px 18px 0; color: var(--dim); }
@media (max-width: 760px) { .faq { grid-template-columns: minmax(0, 1fr); row-gap: 20px; } .q-list p { padding-right: 0; } }

.convince { display: grid; justify-items: start; gap: 18px; padding: clamp(30px, 6vh, 70px) var(--gutter) clamp(70px, 12vh, 140px); }
.convince h2 { font-size: var(--m); font-weight: 700; line-height: 1; letter-spacing: -.045em; }
.btn-big { padding: clamp(14px, 1.2vw, 20px) clamp(20px, 1.8vw, 30px); font-size: clamp(19px, 1.9vw, 30px); letter-spacing: -.02em; }
.convince p { font-size: 15px; line-height: 1.4; }

/* Contact: words and two small boxes on the left, the form on a soft card on the right. */
.contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: start; padding: clamp(40px, 8vh, 100px) var(--gutter) clamp(50px, 8vh, 100px); }
.c-left { grid-column: 1 / span 6; display: grid; justify-items: start; }
.c-left h2 { margin-top: 26px; font-size: calc(var(--m) * .62); font-weight: 700; line-height: 1.06; letter-spacing: -.035em; }
.c-sub { margin: 12px 0 28px; font-size: 16px; }
.c-box { width: min(400px, 100%); padding: 14px 16px; margin-bottom: 12px; font-size: 15px; line-height: 1.55; background: var(--ground); box-shadow: inset 0 0 0 1px var(--hair); }
.c-box a { color: inherit; text-decoration: none; }
.c-box a:hover { text-decoration: underline; text-decoration-color: var(--lemon); text-decoration-thickness: 2px; }
.c-social-h { display: block; margin-bottom: 10px; }
.c-social { display: flex; gap: 16px; }
.c-social a { display: block; color: #050506; transition: color .4s ease, filter .4s ease; }
.c-social svg { display: block; fill: currentColor; }
.c-social a:hover, .c-social a:focus-visible { color: #311adc; filter: drop-shadow(0 0 7px rgba(49, 26, 220, .75)) drop-shadow(0 0 16px rgba(49, 26, 220, .45)); }
.c-card { grid-column: 8 / -1; padding: clamp(24px, 3vw, 44px) clamp(18px, 2.6vw, 40px); background: var(--lift); color: #050506; }
.c-title { margin-bottom: 26px; font-size: clamp(22px, 2vw, 32px); font-weight: 500; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
#contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
#contact-form[hidden] { display: none; }
.c-wide { grid-column: 1 / -1; }
.c-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.c-field { display: grid; gap: 4px; }
.c-field label { font-size: 14px; font-weight: 500; }
.c-field input[type=text], .c-field input[type=email] { width: 100%; padding: 6px 0; background: transparent; border: 0; border-bottom: 1px solid rgba(5, 5, 6, .45); border-radius: 0; font: inherit; color: inherit; outline: 0; transition: border-color .2s; }
.c-field textarea { width: 100%; padding: 8px; background: transparent; border: 1px solid rgba(5, 5, 6, .45); border-radius: 0; font: inherit; color: inherit; resize: vertical; outline: 0; }
.c-field input:focus, .c-field textarea:focus { border-color: #050506; box-shadow: 0 1px 0 #050506; }
.c-field small { display: none; font-size: 13px; color: #a8322a; }
.c-field.bad small { display: block; }
.c-field.bad input, .c-field.bad textarea { border-color: #a8322a; }
.c-check { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; }
.c-check small { grid-column: 1 / -1; }
.c-check a { color: inherit; text-decoration-color: var(--lemon); text-decoration-thickness: 2px; }
input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; background: #fff; border: 1.5px solid #050506; border-radius: 0; cursor: pointer; }
input[type=checkbox]:checked { background: var(--lemon) linear-gradient(#050506, #050506) center / 8px 8px no-repeat; }
.c-send { position: relative; isolation: isolate; overflow: hidden; padding: 15px; background: #050506; color: #fff; font-weight: 700; transition: color .18s; }
.c-send::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lemon); transform: scaleY(0); transform-origin: bottom; transition: transform .28s cubic-bezier(.16, 1, .3, 1); }
.c-send:hover, .c-send:focus-visible { color: #050506; }
.c-send:hover::before, .c-send:focus-visible::before { transform: scaleY(1); }
.c-fail { font-size: 14px; color: #a8322a; }
@media (max-width: 960px) {
  .c-left, .c-card { grid-column: 1 / -1; }
  .c-card { margin-top: 20px; }
}

/* Footer: one quiet line, then everything on the page comes to rest as sand. */
.foot { position: relative; z-index: 2; padding: 0 var(--gutter); }
.foot-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px 24px; padding: 24px 0; font-size: 13px; color: var(--dim); }
.foot-row .mark { font-size: 20px; color: #050506; justify-self: start; }
.foot-mid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 16px; }
.foot-mid i { font-style: normal; }
.foot-row a, .foot-row button { color: inherit; text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: .2em; transition: color .2s; }
.foot-row a:hover, .foot-row button:hover { color: #050506; text-decoration-color: var(--lemon); }
.foot-row .mark { text-decoration: none; }
.foot-lang { justify-self: end; }
.drain { margin: clamp(180px, 30vh, 300px) calc(var(--gutter) * -.5) 0; min-height: 80px; cursor: pointer; }
@media (max-width: 900px) {
  .foot-row { grid-template-columns: 1fr auto; }
  .foot-mid { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .foot-mid i { display: none; }
}

/* Legal pages: plain text on the same white. */
.legal-page .nav { background: var(--ground); }
.legal-page .foot { margin-top: clamp(48px, 8vh, 90px); }
.legal { max-width: 860px; padding: 112px var(--gutter) 0; }
.legal h1 { font-size: calc(var(--m) * .78); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: #050506; margin-bottom: 24px; }
.legal h2 { margin: 40px 0 10px; font-size: clamp(22px, 2vw, 30px); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
.legal p { margin-bottom: 12px; }
.legal ul { margin: 0 0 14px; padding-left: 1.1em; list-style: disc; }
.legal li { margin-bottom: 6px; }
.legal a { text-decoration-color: var(--lemon); text-decoration-thickness: 2px; }
.l-dt { margin-bottom: 0 !important; font-weight: 700; color: #050506; }

/* The cookie box: white, black border, and the same rising lemon as the boxes in the hero. */
.ck { position: fixed; z-index: 30; left: var(--gutter); bottom: 20px; display: grid; gap: 14px; width: min(450px, calc(100vw - 2 * var(--gutter))); padding: clamp(18px, 2vw, 26px); background: #fff; border: 1.5px solid #050506; color: #050506; font-size: 16px; line-height: 1.35; }
.ck[hidden], .ck-more[hidden], .ck-choose[hidden] { display: none; }
.ck h2 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; line-height: 1.05; letter-spacing: -.035em; }
.ck-choose, .ck-link { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--lemon); text-decoration-thickness: 2px; text-underline-offset: .22em; transition: background-color .18s; }
.ck-choose:hover, .ck-link:hover { background: var(--lemon); }
.ck-more { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ck-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ck .btn { width: 100%; padding: 13px 8px; background: #fff; border-color: #050506; color: #050506; font-size: 15px; }
.ck-link { width: fit-content; font-size: 15px; }

@media (max-width: 1100px) {
}
@media (max-width: 820px) {
  body { font-size: 16px; }
  .program { grid-template-columns: 1fr; }
  .program-side { position: static; }
  .who dl { grid-template-columns: 1fr; }
  .who dl > div:nth-child(n) { grid-column: auto; }
  .faces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
}

html { overflow-x: clip; }
@media (max-width: 480px) {
  .t-cap { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* The scrollbar floats over the canvas instead of taking a strip of it: see assets/scrollbar.js. Touch screens keep their own. */
@media (pointer: fine) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
}
.sb { position: fixed; top: 0; right: 0; z-index: 25; width: 18px; opacity: 0; pointer-events: none; cursor: grab; touch-action: none; user-select: none; will-change: transform; transition: opacity .4s; }
.sb[hidden] { display: none; }
.sb.on { opacity: 1; pointer-events: auto; transition-duration: .15s; }
.sb.drag { cursor: grabbing; }
.sb::before { content: ""; position: absolute; top: 0; bottom: 0; right: 4px; width: 5px; border-radius: 99px; background: rgba(19, 19, 23, .36); transition: width .18s, background-color .18s; }
.sb:hover::before, .sb.drag::before { width: 9px; background: var(--lemon); }
@media (prefers-reduced-motion: reduce) { .sb, .sb::before { transition: none; } }