:root{
  --paper:#edf2fd;--ink:#12141c;--muted:#5b6176;--line:rgba(18,20,28,.14);--accent:#3d5afe;
  --glass:rgba(255,255,255,.45);--glass-line:rgba(18,20,28,.1);
  --serif:"Petrona",Georgia,serif;--sans:"Familjen Grotesk",system-ui,sans-serif;--mono:"Red Hat Mono",ui-monospace,monospace;
  --gut:clamp(18px,3.4vw,56px);--ease:cubic-bezier(.2,.7,.1,1);
}
/* inside the form the page goes dark; colours ease over with the camera */
html.is-inside{--ink:#eef1fb;--muted:#9aa1b8;--line:rgba(238,241,251,.16);--accent:#9db0ff;--glass:rgba(14,16,24,.42);--glass-line:rgba(238,241,251,.12)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 18px/1.5 var(--sans);overflow-x:clip;transition:color .7s var(--ease)}
a{color:inherit}
img{display:block;max-width:100%}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.stage{position:fixed;inset:0;z-index:0;background:var(--paper)}
.stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;transition:opacity 1.2s var(--ease)}
.stage.ready canvas{opacity:1}
.stage-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.2s var(--ease)}
.stage.ready .stage-poster{opacity:0}
.sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color;opacity:.75;
  background:radial-gradient(42vmax circle at var(--mx,62%) var(--my,40%),rgba(92,124,255,.95),rgba(186,120,255,.7) 32%,rgba(90,230,210,.45) 55%,transparent 72%)}

.nav{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px var(--gut);transition:color .7s var(--ease)}
.brand{display:flex;align-items:center;gap:10px;font:500 21px/1 var(--sans);letter-spacing:-.02em;text-decoration:none}
.brand-mark{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#9aa3bd 45%,#3a3f52);box-shadow:8px -6px 0 -3px currentColor}
.nav nav{display:flex;gap:28px}
.nav nav a,.nav-cta{font-size:15px;text-decoration:none;position:relative}
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav nav a:hover::after,.nav nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.nav-cta{padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .3s,border-color .7s}
.nav-cta:hover{background:var(--ink);color:var(--paper)}

main,footer{position:relative;z-index:1}
h2{font:300 clamp(44px,6vw,104px)/.95 var(--serif);letter-spacing:-.03em}
h2 em,.hero-title em,.outro em{font-style:italic;font-weight:300}
.eyebrow{color:var(--muted);margin-bottom:22px}

.hero{height:100vh;height:100svh;min-height:600px;position:relative}
.hero-kicker{position:absolute;top:96px;left:var(--gut);color:var(--muted)}
.hero-title{position:absolute;left:var(--gut);bottom:clamp(120px,17vh,190px);font:300 clamp(64px,10.4vw,184px)/.86 var(--serif);letter-spacing:-.045em}
.hero-title span,.hero-title em{display:block}
.hero-title em{padding-left:.9em}
.hero-foot{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(26px,5vh,46px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;border-top:1px solid var(--line);padding-top:18px}
.hero-lede{max-width:420px;font-size:19px;color:var(--muted)}
.scroll-cue{text-decoration:none;display:flex;gap:10px;align-items:center}
.scroll-cue span{display:inline-block;animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}
.fig{position:absolute;right:var(--gut);top:42%;text-align:right;color:var(--muted);line-height:1.7}
.fig span{color:var(--accent)}

/* the dive: a tall runway with one pinned frame; JS lights one layer at a time */
.dive{height:300vh;position:relative}
.dive-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.layers{list-style:none}
.layer{position:absolute;left:var(--gut);top:50%;max-width:440px;transform:translateY(calc(-50% + 30px));opacity:0;transition:opacity .7s var(--ease),transform .9s var(--ease)}
.layer.on{opacity:1;transform:translateY(-50%)}
.layer span{color:var(--accent)}
.layer h2{margin:14px 0 18px}
.layer p{font-size:20px;color:var(--muted)}
.depth{position:absolute;right:var(--gut);bottom:clamp(26px,5vh,46px);display:flex;align-items:center;gap:12px;color:var(--muted)}
.depth-bar{width:140px;height:1px;background:var(--line);position:relative;overflow:hidden}
.depth-bar i{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(var(--d,0))}
.depth-val{color:var(--ink);font-variant-numeric:tabular-nums}

.inside{padding:16vh var(--gut) 14vh}
.inside-head{max-width:900px;margin-bottom:8vh}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{background:var(--glass);border:1px solid var(--glass-line);border-radius:22px;padding:28px 26px 30px;backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);min-height:300px;display:flex;flex-direction:column;transition:transform .5s var(--ease),border-color .4s}
.card:hover{transform:translateY(-6px);border-color:var(--accent)}
.card span{color:var(--accent)}
.card h3{font:300 clamp(34px,3.2vw,48px)/1 var(--serif);letter-spacing:-.02em;margin:auto 0 14px}
.card p{color:var(--muted);font-size:17px}
.figures{display:flex;gap:clamp(24px,6vw,96px);margin-top:9vh;border-top:1px solid var(--line);padding-top:26px}
.figures dt{font:300 clamp(44px,5vw,76px)/1 var(--serif);letter-spacing:-.03em}
.figures dd{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:8px}

.work{padding:12vh var(--gut) 16vh}
.work-head{margin-bottom:7vh}
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.piece:nth-child(2){margin-top:10vh}
.piece img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:18px;transition:transform .9s var(--ease)}
.piece{overflow:hidden}
.piece:hover img{transform:scale(1.03)}
.piece figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 4px 0;font-size:19px}
.piece figcaption .mono{color:var(--muted)}

.outro{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gut) 30px}
.outro h2{font-size:clamp(76px,15vw,260px);line-height:.85;letter-spacing:-.05em;margin-bottom:24px}
.outro-mail{font:400 clamp(22px,2.6vw,36px)/1.2 var(--sans);text-underline-offset:6px;text-decoration-thickness:1px;margin-bottom:8vh;align-self:flex-start}
.outro-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px;color:var(--muted)}
.outro-row a{text-decoration:none}

@media (max-width:900px){
  body{font-size:17px}
  .nav nav{display:none}
  .nav-cta{font-size:14px;padding:9px 14px}
  .hero-kicker{top:84px}
  .hero-title{bottom:clamp(150px,22vh,210px);font-size:clamp(56px,16vw,120px)}
  .hero-title em{padding-left:.5em}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:14px}
  .hero-lede{font-size:16px}
  .fig{top:auto;bottom:clamp(300px,42vh,380px);right:var(--gut)}
  .layer{right:var(--gut);top:auto;bottom:16vh;transform:translateY(30px)}
  .layer.on{transform:none}
  .layer p{font-size:17px}
  .cards,.work-grid{grid-template-columns:1fr}
  .card{min-height:220px}
  .piece:nth-child(2){margin-top:0}
  .figures{gap:22px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important}}