@font-face{font-family:Sora;src:url(assets/sora.ttf) format("truetype");font-weight:100 800;font-display:block}

:root{
  --base:#16171a;
  --graphit:#1c1d20;
  --surface:#28292d;
  --line:rgba(227,228,224,.12);
  --ink:#ecedea;
  --mute:#9a9da3;
  --light:#b6c6d6;
  --seal:#c2412f;
  --gutter:clamp(16px,4vw,64px);
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--base);color:var(--ink);font:400 16px/1.6 Sora,system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--seal);color:#fff}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
.defs{position:absolute;width:0;height:0}
svg{width:1em;height:1em}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--ink);color:var(--base);padding:10px 14px}
.skip:focus{top:16px}
:focus-visible{outline:1.5px solid var(--light);outline-offset:4px}

/* Canvas & atmosphere */
#ink{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 55% at 70% 45%,rgba(182,198,214,.09),transparent 70%),radial-gradient(80% 60% at 10% 110%,rgba(194,65,47,.06),transparent 70%)}
main,.nav{position:relative;z-index:2}

.loader{position:fixed;inset:0;z-index:50;background:var(--base);display:grid;place-content:center;justify-items:center;gap:28px;transition:opacity .9s var(--ease),visibility .9s}
.loader-mark,.mark{display:inline-block;background:currentColor;-webkit-mask:url(assets/icon.svg) center/contain no-repeat;mask:url(assets/icon.svg) center/contain no-repeat}
.loader-mark{width:54px;height:62px;color:var(--ink);animation:breathe 1.6s ease-in-out infinite}
.loader-bar{width:120px;height:1px;background:var(--line);overflow:hidden}
.loader-bar i{display:block;height:100%;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .4s}
body.ready .loader{opacity:0;visibility:hidden}
@keyframes breathe{50%{opacity:.4}}

/* Nav */
.nav{position:fixed;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:22px var(--gutter);z-index:20;transition:transform .6s var(--ease),background .4s}
.nav.hide{transform:translateY(-110%)}
.nav.solid{background:linear-gradient(rgba(22,23,26,.85),rgba(22,23,26,0))}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.04em;font-size:17px}
.brand .mark{width:22px;height:26px}
.nav nav{display:flex;align-items:center;gap:clamp(16px,3vw,40px);font-size:14px}
.nav nav a{color:var(--mute);transition:color .3s}
.nav nav a:hover{color:var(--ink)}
.nav .nav-cta{color:var(--ink);display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line);border-radius:100px;transition:border-color .3s,background .3s}
.nav .nav-cta:hover{border-color:var(--ink);background:rgba(236,237,234,.06)}

/* Shared type */
h1,h2,h3{font-weight:700;letter-spacing:-.025em;line-height:1.02}
.soft{color:var(--mute);font-weight:300}
.accent{color:var(--seal)}
.num{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:flex;gap:14px;align-items:center;margin-bottom:28px}
.num span{color:var(--ink)}
.num::after{content:"";height:1px;width:48px;background:var(--line)}
.btn{display:inline-flex;align-items:center;gap:14px;padding:17px 26px;background:var(--ink);color:var(--base);border:0;border-radius:100px;font-weight:600;font-size:15px;cursor:pointer;position:relative;overflow:hidden;transition:transform .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--seal);transform:translateY(101%);transition:transform .5s var(--ease)}
.btn:hover::before{transform:none}
.btn:hover{color:#fff}
.btn>*{position:relative}
.btn svg{transition:transform .5s var(--ease)}
.btn:hover svg{transform:rotate(45deg)}
.link{font-size:15px;color:var(--mute);border-bottom:1px solid var(--line);padding-bottom:3px;transition:color .3s,border-color .3s}
.link:hover{color:var(--ink);border-color:var(--ink)}

/* Hero */
.hero{min-height:100svh;display:flex;align-items:center;padding:120px var(--gutter) 80px;position:relative}
.hero-copy{max-width:640px}
.kicker{display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:34px}
.seal{display:grid;place-items:center;width:30px;height:30px;background:var(--seal);color:#fff;font-size:16px;letter-spacing:0;border-radius:3px;font-family:"Yu Mincho","Hiragino Mincho ProN",serif}
h1{font-size:clamp(46px,7.4vw,118px);line-height:.98}
h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
h1 .line>span{display:block}
.hero-text{max-width:460px;margin:34px 0 42px;color:var(--mute);font-size:clamp(16px,1.3vw,18px)}
.hero-actions{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.scroll-hint{position:absolute;left:var(--gutter);bottom:34px;display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.scroll-hint i{width:60px;height:1px;background:var(--line);position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;inset:0;background:var(--ink);animation:hint 2.2s var(--ease) infinite}
@keyframes hint{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* Meaning */
.meaning{min-height:120vh;display:flex;align-items:center;padding:0 var(--gutter)}
.reveal-words{font-size:clamp(28px,4.2vw,64px);line-height:1.18;font-weight:600;letter-spacing:-.02em;max-width:1180px}
.reveal-words em{font-style:normal;color:var(--light)}
.reveal-words .w{opacity:.14;transition:none}

/* Story chapters */
.chapter{min-height:165vh;padding:0 var(--gutter);position:relative}
.chapter-copy{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;max-width:520px;padding:100px 0}
.chapter h2{font-size:clamp(38px,5vw,78px);margin-bottom:28px}
.chapter-copy>p:not(.num){color:var(--mute);font-size:clamp(16px,1.25vw,18px);max-width:440px}
.chapter ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.chapter li{font-size:13px;padding:8px 14px;border:1px solid var(--line);border-radius:100px;color:var(--ink);background:rgba(22,23,26,.45);backdrop-filter:blur(6px)}

/* Process — horizontal on desktop */
.process{position:relative;overflow:hidden}
.process-track{display:flex;gap:clamp(20px,3vw,48px);padding:20vh var(--gutter);align-items:stretch;width:max-content}
.process-intro{width:min(560px,80vw);display:flex;flex-direction:column;justify-content:center;flex-shrink:0;padding-right:6vw}
.process-intro h2{font-size:clamp(38px,5vw,78px)}
.step{flex-shrink:0;width:clamp(280px,28vw,420px);min-height:60vh;padding:36px;border:1px solid var(--line);border-radius:6px;background:linear-gradient(160deg,rgba(40,41,45,.72),rgba(22,23,26,.55));backdrop-filter:blur(10px);display:flex;flex-direction:column}
.step-n{font-size:clamp(72px,8vw,128px);font-weight:200;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(236,237,234,.35);margin-bottom:auto}
.step h3{font-size:26px;margin:40px 0 14px}
.step p{color:var(--mute)}
.step:hover .step-n{color:var(--seal);-webkit-text-stroke-color:var(--seal);transition:color .5s}

/* Care */
.care{padding:22vh var(--gutter)}
.care-inner{max-width:1280px}
.reveal-lines{font-size:clamp(44px,7vw,112px);margin-bottom:80px}
.reveal-lines span{display:block}
.care-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.care-grid>div{padding:36px 36px 0 0}
.care-grid>div+div{padding-left:36px;border-left:1px solid var(--line)}
.care-grid h3{font-size:20px;margin-bottom:12px}
.care-grid p{color:var(--mute)}

/* Contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px);padding:18vh var(--gutter) 14vh;align-items:start}
.contact-head h2{font-size:clamp(56px,8vw,132px);margin-bottom:28px}
.contact-head>p:last-child{color:var(--mute);font-size:18px}
form{padding:clamp(24px,3vw,44px);border:1px solid var(--line);border-radius:6px;background:rgba(28,29,32,.72);backdrop-filter:blur(14px)}
fieldset{border:0}
legend,.field-label{font-size:14px;color:var(--mute);margin-bottom:16px;display:block}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.chips input{position:absolute;opacity:0}
.chips span{display:block;padding:11px 18px;border:1px solid var(--line);border-radius:100px;cursor:pointer;font-size:14px;transition:all .3s}
.chips input:checked+span{background:var(--ink);color:var(--base);border-color:var(--ink)}
.chips input:focus-visible+span{outline:1.5px solid var(--light);outline-offset:3px}
textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0 14px;font-size:20px;resize:vertical;outline:none;transition:border-color .3s}
textarea:focus{border-color:var(--ink)}
textarea::placeholder{color:#5f6268}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:30px;flex-wrap:wrap}
.form-foot p{font-size:13px;color:var(--mute);max-width:280px}
#status{font-size:14px;color:var(--light);margin-top:14px}

/* Footer */
.footer{padding:0 var(--gutter) 30px;overflow:hidden}
.footer-word{display:flex;align-items:center;gap:.12em;font-size:clamp(64px,19vw,320px);font-weight:700;letter-spacing:-.04em;line-height:.9;margin-bottom:28px}
.footer-word .mark{width:.62em;height:.72em;color:var(--seal)}
.footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--mute);border-top:1px solid var(--line);padding-top:22px}
.footer-row button{background:none;border:0;cursor:pointer;color:var(--mute);text-decoration:underline;text-underline-offset:4px}
.footer-row button:hover{color:var(--ink)}

/* Mobile */
@media (max-width:900px){
  .nav nav a:not(.nav-cta){display:none}
  .hero{align-items:flex-end;padding-bottom:34px}
  .scroll-hint{display:none}
  .kicker{margin-bottom:20px}
  .hero-text{margin:16px 0 22px;font-size:15px}
  .chapter{min-height:150vh}
  .chapter-copy{justify-content:flex-end;padding-bottom:10svh}
  .process-track{flex-direction:column;width:auto;padding:14vh var(--gutter)}
  .process-intro{width:auto;padding:0 0 20px}
  .step{width:auto;min-height:0}
  .step h3{margin-top:24px}
  .care-grid{grid-template-columns:1fr}
  .care-grid>div,.care-grid>div+div{padding:28px 0;border-left:0;border-bottom:1px solid var(--line)}
  .contact{grid-template-columns:1fr}
}

/* Split headlines: per-char transforms need inline-block and stable kerning */
h1,h2{font-kerning:none}
h1 .line>span>div,h2 div{will-change:transform}

/* Cursor ring (mouse only) */
.cursor{position:fixed;left:0;top:0;z-index:60;pointer-events:none;opacity:0;transition:opacity .3s}
.cursor.on{opacity:1}
.cursor i{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(236,237,234,.55);border-radius:50%;transition:transform .45s var(--ease),background .3s,border-color .3s}
.cursor i::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--ink)}
.cursor.big i{transform:scale(1.9);background:rgba(194,65,47,.14);border-color:var(--seal)}
body:not(.has-cursor) .cursor{display:none}

/* Chapter rail */
.rail{position:fixed;left:var(--gutter);bottom:30px;z-index:15;display:flex;flex-direction:column-reverse;gap:12px;width:min(420px,40vw);transform:translateY(16px);opacity:0;pointer-events:none;transition:opacity .5s,transform .7s var(--ease)}
.rail.show{opacity:1;transform:none}
.rail-track{height:1px;background:var(--line);position:relative}
.rail-fill{position:absolute;inset:0;background:var(--seal);transform-origin:left;transform:scaleX(0)}
.rail ol{list-style:none;display:flex;justify-content:space-between;font-size:12px;letter-spacing:.12em;color:#7a7d83}
.rail li{display:flex;gap:10px;transition:color .4s}
.rail li span{opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s var(--ease);text-transform:uppercase}
.rail li.on{color:var(--ink)}
.rail li.on span{opacity:1;transform:none}
@media (max-width:900px){.rail{display:none}}

/* Without WebGL the brush mark carries the hero alone */
.no-webgl .hero::after{content:"";position:absolute;right:8vw;top:50%;width:min(36vw,420px);aspect-ratio:629/729;transform:translateY(-50%);background:var(--ink);opacity:.9;-webkit-mask:url(assets/icon.svg) center/contain no-repeat;mask:url(assets/icon.svg) center/contain no-repeat}

/* Still mode */
body.still .reveal-words .w{opacity:1}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Works: case studies as stacked cards with a live, self-scrolling site preview */
.works{padding:16vh var(--gutter) 10vh;position:relative}
.works-head{max-width:1280px;margin-bottom:9vh}
.works-head h2{font-size:clamp(40px,5.6vw,92px);margin-bottom:26px}
.works-head>p:last-child{color:var(--mute);max-width:46ch;font-size:clamp(16px,1.25vw,18px)}
.work-stack{display:flex;flex-direction:column;gap:6vh}
.work{position:sticky;top:11vh;height:78svh;min-height:480px;border-radius:10px;overflow:hidden;display:block;isolation:isolate;transform-origin:50% 0;box-shadow:0 -30px 80px -40px rgba(0,0,0,.9);background:#0d0e10}
.work-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.4s var(--ease),filter .8s}
.work-dim{position:absolute;inset:0;z-index:4;background:#0d0e10;opacity:0;pointer-events:none}
.work::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(0deg,rgba(13,14,16,.85),rgba(13,14,16,.1) 45%,rgba(13,14,16,.45));transition:background .8s}
.work-top,.work-bottom{position:absolute;left:clamp(20px,3vw,44px);right:clamp(20px,3vw,44px);z-index:2;display:flex;justify-content:space-between;gap:20px}
.work-top{top:clamp(20px,3vw,40px);align-items:flex-start}
.work-n{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(236,237,234,.75)}
.work-logo{width:clamp(180px,22vw,320px);display:block}
.work-logo svg{width:100%;height:auto}
.work-bottom{bottom:clamp(20px,3vw,40px);align-items:flex-end}
.work h3{font-size:clamp(30px,4vw,64px);max-width:14ch;margin-bottom:10px}
.work-bottom p{color:rgba(236,237,234,.75);font-size:15px}
.work-cta{flex:none;display:inline-flex;align-items:center;gap:12px;padding:14px 22px;border-radius:100px;background:var(--ink);color:var(--base);font-weight:600;font-size:14px;transition:background .4s,color .4s}
.work-cta svg{transition:transform .5s var(--ease)}
.work:is(:hover,.is-hover) .work-cta{background:var(--seal);color:#fff}
.work:is(:hover,.is-hover) .work-cta svg{transform:rotate(45deg)}
.work:is(:hover,.is-hover) .work-img{transform:scale(1.06);filter:blur(3px) brightness(.55)}
.work-preview{position:absolute;z-index:1;right:clamp(20px,3vw,44px);top:55%;width:min(50%,820px);border-radius:10px;overflow:hidden;background:#111;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 100px -20px rgba(0,0,0,.9);pointer-events:none;
  transform:translate(0,-30%) rotateX(14deg) scale(.92);transform-origin:50% 100%;opacity:0;transition:transform 1s var(--ease),opacity .6s}
.work:is(:hover,.is-hover) .work-preview{transform:translate(0,-50%);opacity:1}
.pv-chrome{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#1d1e21;border-bottom:1px solid rgba(255,255,255,.08)}
.pv-chrome i{width:9px;height:9px;border-radius:50%;background:#3a3b3f}
.pv-chrome span{flex:1;text-align:center;font-size:11px;color:var(--mute)}
.pv-screen{position:relative;aspect-ratio:1440/900;overflow:hidden;background:#000}
.pv-screen iframe{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;transform-origin:0 0}
@media (max-width:900px){
  .work{position:relative;top:auto;height:auto;aspect-ratio:4/5;min-height:0}
  .work-preview{display:none}
  .work-bottom{flex-direction:column;align-items:flex-start}
}
@media (hover:none){.work-preview{display:none}}