:root{
  --ink:#111; --paper:#fff; --cream:#f2efe8; --line:rgba(17,17,17,.09); --chip:#dde4c3;
  --sans:"Space Grotesk",ui-sans-serif,system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace;
  --gut:clamp(16px,2vw,30px); --col:7.5vw;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:#c9d3e8;line-height:1.35;font-weight:500;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

#sky,#stage{position:fixed;inset:0;width:100%;height:100%;display:block}
#sky{z-index:0}
#stage{z-index:5;pointer-events:none}
main,.contact{position:relative;z-index:1}

/* ---------- header */
.top{position:fixed;z-index:20;inset:0 0 auto 0;height:96px;padding:0 var(--gut);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:var(--ink);transition:color .35s;pointer-events:none}
.top>*{pointer-events:auto}
.top.dark{color:var(--cream)}
.mark{justify-self:start;display:block;width:40px;height:40px}
.brand{font-size:1.35rem;font-weight:500;letter-spacing:-.02em}
.menu-btn{justify-self:end;font-size:1.3rem;font-weight:500;text-transform:uppercase;letter-spacing:-.01em;padding:8px 0 8px 12px}
.menu{position:fixed;z-index:19;inset:0;background:#0f0f0f;color:var(--cream);display:flex;flex-direction:column;justify-content:center;padding:110px var(--col) 40px;opacity:0;transition:opacity .35s}
.menu[hidden]{display:none}
.menu.on{opacity:1}
.menu ol{counter-reset:m}
.menu li{counter-increment:m;border-bottom:1px solid rgba(242,239,232,.14)}
.menu li a{display:flex;align-items:baseline;gap:18px;font-size:clamp(2rem,6vw,4.4rem);letter-spacing:-.03em;padding:.12em 0;transition:padding .3s}
.menu li a::before{content:"0" counter(m);font:400 .8rem var(--mono);opacity:.5}
.menu li a:hover{padding-left:.4em}
.menu-foot{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:28px;font-size:1rem;opacity:.8}

/* ---------- hero */
.hero{height:230vh;color:var(--ink);transition:color .6s}
html[data-tod=night] .hero{color:var(--cream)}
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero-h{position:absolute;top:clamp(92px,11vh,120px);left:0;right:0;text-align:center;font-weight:400;font-size:clamp(2rem,5.5vw,5.2rem);line-height:1.02;letter-spacing:-.035em;padding:0 16px}
.hero-h span{display:block;opacity:0;transform:translateY(.5em);animation:up .9s cubic-bezier(.2,.7,.2,1) .15s forwards}
.hero-h span+span{animation-delay:.3s}
@keyframes up{to{opacity:1;transform:none}}
.hero-note{position:absolute;left:68%;top:54%;display:flex;gap:10px;align-items:flex-start;font-size:1.02rem;line-height:1.3;opacity:0;animation:up .8s .9s forwards}
.hero-note svg{flex:none;margin-top:-10px}
.hero-intro{position:absolute;right:var(--gut);bottom:clamp(28px,5vh,52px);max-width:27.5rem;text-align:right;font-size:1.02rem;line-height:1.32;opacity:0;animation:up .8s .7s forwards}
.tod{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:124px;opacity:0;animation:up .8s 1.1s forwards}
.tod-btns{display:flex;justify-content:space-between}
.tod button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid transparent;opacity:.5;transition:opacity .3s,border-color .3s}
.tod button[aria-pressed=true]{opacity:1;border-color:currentColor}
.tod-rail{height:1px;background:currentColor;opacity:.55;margin:8px 0 0;position:relative}
.tod-rail i{position:absolute;top:-3px;left:14px;width:7px;height:7px;border-radius:50%;background:currentColor;transition:left .5s cubic-bezier(.3,.7,.2,1)}
html[data-tod=dusk] .tod-rail i{left:58px}
html[data-tod=night] .tod-rail i{left:102px}

/* ---------- white sheets with column lines */
.sheet{background:var(--paper);position:relative;padding:0 var(--gut)}
.sheet::before,.process::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(var(--line),var(--line)) 7.5vw 0/1px 100% no-repeat,linear-gradient(var(--line),var(--line)) 26vw 0/1px 100% no-repeat,linear-gradient(var(--line),var(--line)) 44.5vw 0/1px 100% no-repeat,linear-gradient(var(--line),var(--line)) 63vw 0/1px 100% no-repeat,linear-gradient(var(--line),var(--line)) 81.5vw 0/1px 100% no-repeat}
.sheet>*{position:relative}
.giant{font-weight:500;font-size:clamp(2.9rem,9.6vw,9.4rem);line-height:.95;letter-spacing:-.045em;text-align:center;white-space:nowrap}
.mono-label{font:400 .72rem var(--mono);text-transform:uppercase;letter-spacing:.12em;color:rgba(242,239,232,.7)}
.mono-label.dark{color:rgba(17,17,17,.6)}
.chip{display:inline-flex;align-items:center;gap:12px;background:var(--chip);color:var(--ink);padding:6px 6px 6px 15px;font-size:1.02rem;border-radius:3px;transition:background .25s}
.chip i{width:34px;height:34px;background:var(--ink);color:#fff;display:grid;place-items:center;border-radius:2px;transition:transform .3s}
.chip:hover{background:#cfd8ae}
.chip:hover i{transform:rotate(45deg)}
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- intro */
.intro{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto auto;padding-top:132px;padding-bottom:22px}
.intro-lead{margin-left:calc(var(--col) - var(--gut) + 12px);max-width:29rem;font-size:1.05rem}
.intro-title{align-self:center;margin:8vh 0 3vh}
.intro-list{justify-self:end;text-align:right;display:grid;gap:18px;font-size:1.02rem;line-height:1.4;margin-bottom:6vh}
.intro-list b{display:block;font-weight:700}
.intro-tags{display:flex;justify-content:space-between;gap:12px;font:400 .76rem var(--mono);text-transform:uppercase;letter-spacing:.06em}

/* ---------- work */
.work{padding-top:14vh;padding-bottom:16vh}
.work-head{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:31rem;margin:46vh 0 12vh;font-size:1.05rem}
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,5vw,80px) clamp(20px,4vw,64px);padding:0 calc(var(--col) - var(--gut))}
.case:nth-child(even){margin-top:14vh}
.shot{background:var(--cream);aspect-ratio:4/3;overflow:hidden;border-radius:4px;padding:6%}
.shot img{width:100%;height:100%;object-fit:contain;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.shot.tall{padding:6% 22% 0}
.shot.tall img{object-fit:cover;object-position:top;box-shadow:0 10px 40px rgba(0,0,0,.12)}
.case:hover .shot img{transform:scale(1.035)}
.case-meta{display:flex;justify-content:space-between;font:400 .72rem var(--mono);text-transform:uppercase;letter-spacing:.08em;margin:16px 0 8px;opacity:.65}
.case h3{font-size:clamp(1.5rem,2.4vw,2.2rem);font-weight:500;letter-spacing:-.03em;line-height:1.05}
.case p{margin-top:8px;max-width:30rem;color:#333;font-weight:400}
.case dl{display:flex;gap:28px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.case dt{font-size:1.35rem;letter-spacing:-.02em}
.case dd{font:400 .68rem var(--mono);text-transform:uppercase;letter-spacing:.08em;opacity:.6}

/* ---------- open the laptop */
.open{height:320vh}
.open-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;justify-content:center;padding-top:clamp(104px,14vh,132px)}
.open-h{text-align:center;font-size:clamp(1.3rem,2.7vw,2.5rem);line-height:1.08;letter-spacing:-.03em;font-weight:500;transform-origin:50% 0}

/* ---------- proof (aurora) */
.proof{color:#fff;padding:22vh 0 26vh;overflow:hidden}
.proof-in{padding:0 var(--col)}
.proof h2{font-size:clamp(2.4rem,4.4vw,3.6rem);letter-spacing:-.04em;font-weight:500}
.proof-sub{max-width:36rem;margin-top:14px;font-size:1.05rem;color:rgba(255,255,255,.72)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:9vh 0 12vh}
.stats dt{font-size:clamp(2.4rem,5.4vw,5rem);letter-spacing:-.045em;line-height:1;font-weight:400}
.stats dd{font:400 .72rem var(--mono);text-transform:uppercase;letter-spacing:.1em;margin-top:10px;color:rgba(255,255,255,.7)}
.rows{margin-top:26px;display:grid;gap:clamp(18px,3.2vw,44px)}
.row{display:flex;gap:clamp(40px,7vw,120px);white-space:nowrap;font-size:clamp(1.5rem,3vw,2.7rem);letter-spacing:-.03em;font-weight:400;will-change:transform;padding-left:var(--col)}
.row span:nth-child(3n+2){font-family:var(--mono);font-size:.74em;letter-spacing:0;text-transform:uppercase;align-self:center}
.row span:nth-child(3n){font-weight:700}
.slide{margin-top:30vh;font-size:clamp(3rem,9.6vw,9.4rem);line-height:1;letter-spacing:-.045em;font-weight:500;white-space:nowrap}
.slide span{display:block;will-change:transform}
.slide-b{text-align:right;padding-right:var(--col)}
.slide-a{padding-left:var(--col)}

/* ---------- services */
.services{padding-top:20vh;padding-bottom:18vh}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:end;padding:0 calc(var(--col) - var(--gut));margin-bottom:9vh}
.sec-head h2{font-size:clamp(2.8rem,7vw,6.6rem);letter-spacing:-.045em;line-height:.95;font-weight:500}
.sec-head p{max-width:31rem;justify-self:end;font-size:1.05rem}
.core,.also,.services .mono-label{margin-left:calc(var(--col) - var(--gut));margin-right:calc(var(--col) - var(--gut))}
.core li.rv{display:grid;grid-template-columns:5rem 1.25fr 1fr;gap:10px 28px;align-items:start;padding:34px 0;border-top:1px solid rgba(17,17,17,.9)}
.core .n{font:400 .8rem var(--mono);padding-top:.9em}
.core h3{font-size:clamp(1.7rem,3.6vw,3.3rem);font-weight:500;letter-spacing:-.04em;line-height:1}
.core p{font-size:1.05rem;color:#222}
.core ul{grid-column:3;display:flex;flex-wrap:wrap;gap:6px}
.core ul li{font:400 .7rem var(--mono);text-transform:uppercase;letter-spacing:.06em;border:1px solid rgba(17,17,17,.3);padding:5px 9px;border-radius:2px}
.services .mono-label{margin-top:9vh;margin-bottom:18px}
.also{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(17,17,17,.9)}
.also li{padding:26px 26px 30px 0;border-bottom:1px solid var(--line)}
.also h3{font-size:1.4rem;font-weight:500;letter-spacing:-.025em}
.also p{margin-top:8px;color:#333;font-weight:400;max-width:22rem}

/* ---------- reviews */
.reviews{padding:6vh var(--col) 20vh}
.quotes{display:grid;margin-top:26px}
.quotes figure{grid-area:1/1;opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s;pointer-events:none}
.quotes figure.on{opacity:1;transform:none;pointer-events:auto}
.quotes blockquote{font-size:clamp(1.6rem,4vw,3.6rem);line-height:1.06;letter-spacing:-.035em;font-weight:500;max-width:22em}
.quotes figcaption{margin-top:26px;font-size:1rem;color:#444}
.quotes figcaption b{display:block;color:var(--ink)}
.q-nav{display:flex;align-items:center;gap:16px;margin-top:34px;font:400 .8rem var(--mono)}
.q-nav button{width:44px;height:44px;border:1px solid rgba(17,17,17,.35);border-radius:50%;display:grid;place-items:center;transition:background .25s,color .25s}
.q-nav button:hover{background:var(--ink);color:#fff}

/* ---------- process */
.process{background:var(--cream);position:relative;height:340vh}
.process-pin{position:sticky;top:0;height:100vh;height:100svh;padding:104px var(--gut) 40px;display:grid;grid-template-columns:27vw 1fr 30vw;grid-template-rows:auto 1fr auto;gap:18px 0}
.process h2{grid-column:1/-1;font-size:clamp(2rem,3.7vw,3.3rem);letter-spacing:-.04em;font-weight:500}
.p-panel{grid-column:2;background:#151515;color:var(--cream);position:relative;overflow:hidden;display:grid;place-items:center;min-height:0;max-height:46vh;border-radius:2px}
.p-panel span{font-size:clamp(5rem,15vw,13rem);letter-spacing:-.06em;font-weight:400;line-height:1;transition:opacity .25s,transform .4s}
.p-panel span.sw{opacity:0;transform:translateY(.25em)}
.p-panel i{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--chip);transform-origin:0 50%;transform:scaleX(.25);transition:transform .5s}
.p-steps{grid-column:3;grid-row:2;text-align:right;padding-right:calc(var(--col) - var(--gut));align-self:start}
.p-steps li{color:rgba(17,17,17,.36);transition:color .4s}
.p-steps h3{font-size:clamp(2rem,3.9vw,3.5rem);letter-spacing:-.04em;font-weight:500;line-height:1.35}
.p-steps p{font-size:1rem;line-height:1.35;max-width:21rem;margin-left:auto;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s,opacity .4s,margin .4s}
.p-steps li.on{color:var(--ink)}
.p-steps li.on p{max-height:8em;opacity:1;margin-bottom:14px}
.p-foot{grid-column:1/3;font-size:clamp(1.3rem,2.6vw,2.4rem);line-height:1.08;letter-spacing:-.03em;max-width:46rem;align-self:end}

/* ---------- faq */
.faq{padding-top:18vh;padding-bottom:20vh}
.faq-list{margin:0 calc(var(--col) - var(--gut));border-top:1px solid rgba(17,17,17,.9)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 0;font-size:clamp(1.2rem,2.2vw,1.9rem);letter-spacing:-.025em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.4rem var(--mono);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{max-width:44rem;padding:0 0 26px;font-size:1.05rem;color:#222;font-weight:400}

/* ---------- contact */
.contact{padding:38vh var(--gut) var(--gut)}
.card{position:relative;background:#040404;color:var(--cream);padding:clamp(40px,6vw,72px) clamp(20px,5vw,72px) 34px;overflow:hidden}
.ghost{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);font:700 clamp(9rem,31vw,30rem)/1 var(--mono);letter-spacing:-.06em;color:#131313;pointer-events:none;user-select:none}
.card>*:not(.ghost){position:relative}
.c-kick{color:rgba(242,239,232,.7);font-size:1rem}
.c-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-top:14px;padding-bottom:44px;border-bottom:1px solid rgba(242,239,232,.16)}
.c-top h2{font-size:clamp(2.6rem,5.4vw,4.8rem);line-height:1;letter-spacing:-.04em;font-weight:400}
.c-mail{text-align:right;display:grid;gap:8px;justify-items:end;margin-left:auto}
.c-mail span{color:rgba(242,239,232,.7)}
.c-mail>a{font-size:clamp(1.25rem,3.3vw,3rem);letter-spacing:-.035em;word-break:break-word}
.c-mail>a:hover{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}
.c-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:10px}
.ghost-chip{background:transparent;color:var(--cream);border:1px solid rgba(242,239,232,.4)}
.ghost-chip i{background:var(--cream);color:var(--ink)}
.ghost-chip:hover{background:rgba(242,239,232,.08)}
.c-cols{display:grid;grid-template-columns:1.25fr 1.25fr 1.25fr 1fr;gap:28px;padding:30px 0 60px}
.c-cols h3{font:400 .68rem var(--mono);text-transform:uppercase;letter-spacing:.14em;color:rgba(242,239,232,.6);margin-bottom:14px}
.c-cols li,.c-cols p{font-size:1.02rem;font-weight:700;line-height:1.75}
.c-cols a:hover{text-decoration:underline;text-underline-offset:.2em}
.c-cols .two{columns:2;max-width:17rem}
.dim{color:rgba(242,239,232,.55)}
.status{display:flex;align-items:center;gap:10px}
.status i{width:9px;height:9px;border-radius:50%;background:var(--chip);box-shadow:0 0 0 0 rgba(221,228,195,.7);animation:pulse 2s infinite}
@keyframes pulse{to{box-shadow:0 0 0 10px rgba(221,228,195,0)}}
.c-end{display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:700}
.c-end span{display:flex;align-items:center;gap:10px;color:rgba(242,239,232,.75)}

/* ---------- small screens */
@media (max-width:900px){
  .top{height:76px}
  .brand{font-size:1.15rem}.menu-btn{font-size:1.1rem}
  .hero{height:190vh}
  .hero-h{top:104px}
  .hero-note{left:auto;right:var(--gut);top:30%;font-size:.95rem}
  .hero-note svg{transform:scaleY(-1);margin-top:14px}
  .hero-intro{left:var(--gut);right:var(--gut);bottom:88px;text-align:left;max-width:none;font-size:.95rem}
  .tod{left:var(--gut);transform:none;bottom:26px}
  .giant{white-space:normal}
  .intro{padding-top:104px}
  .intro-lead{margin-left:0}
  .intro-title{margin:34vh 0 5vh}
  .intro-tags{flex-wrap:wrap;font-size:.66rem}
  .work-head{margin:40vh 0 8vh}
  .cases{grid-template-columns:1fr;padding:0}
  .case:nth-child(even){margin-top:0}
  .stats{grid-template-columns:repeat(2,1fr);gap:34px 20px}
  .sec-head{grid-template-columns:1fr;padding:0}
  .sec-head p{justify-self:start}
  .core,.also,.services .mono-label,.faq-list{margin-left:0;margin-right:0}
  .core li.rv{grid-template-columns:2.6rem 1fr}
  .core p,.core ul{grid-column:2}
  .also{grid-template-columns:1fr}
  .process{height:auto}
  .process-pin{position:static;height:auto;display:block;padding:90px var(--gut) 70px}
  .p-panel{display:none}
  .p-steps{text-align:left;padding:0;margin:26px 0 34px}
  .p-steps li{color:var(--ink)}
  .p-steps p{max-height:none;opacity:1;margin:0 0 16px}
  .contact{padding-top:30vh}
  .c-top{flex-direction:column;align-items:flex-start}
  .c-mail{text-align:left;justify-items:start;margin-left:0}
  .c-btns{justify-content:flex-start}
  .c-cols{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.hero-h span,.hero-note,.hero-intro,.tod{opacity:1;transform:none;animation:none;transition:none}
  .tod{transform:translateX(-50%)}
}