:root{
  --void:#0a0807; --ink:#f3ede5; --stone:#c9bfb3; --ash:#8f877c; --hair:rgba(243,237,229,.28);
  --sans:"Helvetica Neue",Helvetica,Inter,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--void);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:max(22px,env(safe-area-inset-top)) clamp(20px,4vw,56px) 0}
.wm{font-size:12px;letter-spacing:.34em;color:var(--ink);text-decoration:none;opacity:0;transition:opacity 1.2s ease}
.nav.wm-on .wm{opacity:1}
.nav-r{display:flex;align-items:center;gap:22px}
.quiet{background:none;border:0;color:var(--stone);font:400 12px/1 var(--sans);letter-spacing:.08em;cursor:pointer;padding:12px 2px;
  transition:color .2s,opacity .6s}
@media(hover:hover) and (pointer:fine){.quiet:hover{color:var(--ink)}}
.wm,.quiet,.apply{white-space:nowrap}
.snd{display:inline-flex;align-items:center;gap:8px}
.snd[hidden]{display:none}
.snd svg{width:17px;height:17px}
.snd .wave{display:none}.snd[aria-pressed="true"] .wave{display:inline}.snd.waiting .wave{animation:sndwait 1.8s ease-in-out infinite}@keyframes sndwait{50%{opacity:.35}}.snd[aria-pressed="true"] .mute{display:none}
.short{display:none}
.quiet:focus-visible,.apply:focus-visible,.wm:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.apply{display:inline-flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none;border:1px solid var(--hair);
  font:500 11.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;transition:background .25s,border-color .25s,color .25s,scale .16s cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine){.apply:hover{background:var(--ink);color:#15110e;border-color:var(--ink)}}
.apply-nav{height:38px;padding:0 20px;overflow:hidden}
#skip,#replay{min-width:6.6em;text-align:right}   /* Skip film ↔ Replay film share one slot: nothing jumps */
#pro2{top:50%}

/* stage */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--void)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.fallback{position:absolute;right:8vw;bottom:0;height:92%;width:auto;object-fit:contain;
  -webkit-mask-image:url('media/person-matte.png');mask-image:url('media/person-matte.png');mask-mode:luminance;
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
@media (max-aspect-ratio:4/5){.fallback{top:6%;bottom:auto;left:50%;right:auto;height:60%;transform:translateX(-50%)}}

/* three centre lines */
/* the lines are written by the particles; the HTML copies stay for screen readers and no-WebGL */
.lines{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.line{position:absolute;left:0;top:0;margin:0;white-space:nowrap;text-align:center;font-weight:300;line-height:1.14;letter-spacing:-.012em;
  font-kerning:none;font-feature-settings:"kern" 0,"liga" 0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ink);opacity:0;visibility:hidden;
  transform-origin:50% 50%;text-shadow:0 0 22px rgba(10,8,7,.85);will-change:opacity,transform}
.consider{position:absolute;left:0;top:0;margin:0;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;z-index:4;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(243,237,229,.58);font-weight:500}
.line::before{content:none;position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:.6em;font-size:13.5px;letter-spacing:.32em;
  text-transform:uppercase;color:rgba(243,237,229,.84);text-shadow:none;font-weight:500}
.pro,.rline{position:absolute;margin:0;font-weight:300;letter-spacing:-.018em;color:var(--ink);opacity:0;visibility:hidden;pointer-events:none;z-index:4;white-space:nowrap;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;text-shadow:0 0 22px rgba(10,8,7,.85)}
.pro{left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(44px,4.6vw,78px);letter-spacing:-.028em}
.reading{position:absolute;inset:0;pointer-events:none;z-index:4}
.spots{position:absolute;inset:0;pointer-events:none;z-index:4}
.sp{position:absolute;left:0;top:0;margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0;visibility:hidden;text-align:center;width:min(86vw,11.5em);font-size:clamp(30px,2.9vw,46px)}
.sp-k{font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:rgba(243,237,229,.72);font-weight:500}
.sp-l{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;font-size:1em;line-height:1.12;letter-spacing:-.022em;text-wrap:balance;color:var(--ink);text-shadow:0 0 24px rgba(10,8,7,.9)}
.rline{left:clamp(24px,9vw,150px);top:44%;bottom:auto;transform:translateY(-50%);font-size:clamp(28px,2.7vw,42px)}
.line[data-i="0"]{color:#f4dcd8}.line[data-i="1"]{color:#dde6ee}.line[data-i="2"]{color:#e6ecdc}

/* system names */
.labels{position:absolute;inset:0;pointer-events:none;z-index:4}
.lab.lead-r::before,.lab.lead-l::after{content:'';position:absolute;top:50%;width:var(--lead,0);height:1px;background:rgba(243,237,229,.28)}
.lab.lead-r::before{right:100%;margin-right:8px}.lab.lead-l::after{left:100%;margin-left:8px}
.lab{position:absolute;left:0;top:0;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,237,229,.94);font-weight:500;
  white-space:nowrap;opacity:0;will-change:transform,opacity}

/* endpoint lockup */
.lockup{position:absolute;z-index:6;left:clamp(24px,8vw,132px);top:50%;transform:translateY(-44%);max-width:520px;opacity:0;visibility:hidden}
.lockup.on{visibility:visible}
.eyebrow{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--stone);margin-bottom:22px}
.lockup h1{font-weight:300;font-size:clamp(48px,4.6vw,72px);line-height:1.02;letter-spacing:-.032em}
.sub{font-size:18px;color:var(--stone);margin:22px 0 44px;letter-spacing:-.005em}
.apply-main{height:52px;padding:0 46px;letter-spacing:.26em}

.dev[hidden],.apply-nav[hidden]{display:none}
.dev{position:absolute;z-index:30;left:16px;right:16px;bottom:14px;display:flex;gap:12px;align-items:center;font:12px/1 ui-monospace,Menlo,monospace;color:#aaa}
.dev input{flex:1}

/* phone */
@media (max-aspect-ratio:4/5){
  .lab{font-size:10px;letter-spacing:.18em}
  .consider{font-size:8px;letter-spacing:.26em}
  .pro{font-size:36px;top:50%}
  #pro2{top:50%}
  #skip,#replay{min-width:3.9em}
  .rline{left:50%;top:auto;bottom:calc(9% + env(safe-area-inset-bottom));transform:translateX(-50%);font-size:24px}
  .sp{gap:10px;font-size:26px;width:min(84vw,11.5em)}.sp-k{font-size:10px;letter-spacing:.28em}
  .lockup{left:22px;right:22px;top:auto;bottom:max(30px,env(safe-area-inset-bottom));transform:none;max-width:none}
  .eyebrow{font-size:10px;letter-spacing:.26em;margin-bottom:14px}
  .lockup h1{font-size:clamp(36px,10.4vw,44px)}
  .sub{font-size:15.5px;margin:10px 0 24px}
  .apply-main{height:50px;padding:0 34px}
  .nav-r{gap:12px}
  .snd .lbl,.long{display:none}
  .short{display:inline}
  .wm{letter-spacing:.28em;font-size:11px}
  .apply-nav{height:34px;padding:0 14px}
  .apply-nav{font-size:9px;letter-spacing:.07em}
}
@media (prefers-reduced-motion:reduce){ .wm,.quiet{transition:none} }

.rline-3 .w{display:inline-block}
@media (max-aspect-ratio:4/5){.rline-3{text-align:center;line-height:1.25}.rline-3 .w{display:block}}

/* the closing's lead-in: a label, like "We begin with" */
.rl-k{display:block;font-size:9px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:rgba(243,237,229,.58);margin:0 0 16px}
@media (max-aspect-ratio:4/5){
  .rl-k{font-size:8px;letter-spacing:.26em;margin-bottom:10px}
  .rline{bottom:calc(4.5% + env(safe-area-inset-bottom))}   /* below his feet, never across him */
}

/* enter: one quiet screen, so the film and its sound begin together */
.gate{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;background:var(--void,#0a0807);
  transition:opacity 1.1s ease,visibility 0s linear 1.1s}
.gate[hidden]{display:none}
.gate.gone{opacity:0;visibility:hidden;pointer-events:none}
.gate-wm{margin:0;font-size:12px;font-weight:500;letter-spacing:.52em;margin-right:-.52em;color:rgba(243,237,229,.86);opacity:0;animation:gateIn 1.4s ease .2s forwards}
.gate-go{all:unset;cursor:pointer;box-sizing:border-box;min-width:168px;height:48px;padding:0 28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(243,237,229,.32);
  font-size:11px;font-weight:500;letter-spacing:.34em;margin-right:0;text-transform:uppercase;color:#f3ede5;opacity:0;animation:gateIn 1.2s ease .8s forwards;transition:background .35s,border-color .35s,color .35s,scale .16s cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine){.gate-go:hover{background:#f3ede5;color:#0a0807;border-color:#f3ede5}}
.gate-go:focus-visible,.gate-quiet:focus-visible{outline:1px solid #f1c996;outline-offset:6px}
.gate-quiet{all:unset;cursor:pointer;font-size:11px;letter-spacing:.08em;color:rgba(243,237,229,.46);padding:10px 12px;margin-top:-18px;opacity:0;animation:gateIn 1.2s ease 1.1s forwards;transition:color .3s}
@media(hover:hover) and (pointer:fine){.gate-quiet:hover{color:rgba(243,237,229,.8)}}
@keyframes gateIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.gated #skip,.gated #replay,.gated .snd{visibility:hidden}

/* touch: no grey flash or double-tap delay, and a press you can feel (scale, so it never fights the entrance animations) */
.quiet,.apply,.wm,.gate-go,.gate-quiet{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.apply:active,.gate-go:active{scale:.97}