:root{
  --haze:#f5f5f5; --sky:#d9d9d9; --ink:#1c1c1c; --ink-soft:#555;
  --ground:#2e2e2e; --on-ground:#ececec; --on-ground-soft:#a8a8a8; --line:rgba(255,255,255,.16);
  --pill:rgba(255,255,255,.7); --pill-line:rgba(0,0,0,.14);
  --font:"Outfit","Helvetica Neue",Arial,sans-serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --haze:#262626; --sky:#101010; --ink:#f0f0f0; --ink-soft:#a5a5a5; --ground:#0d0d0d;
    --pill:rgba(30,30,30,.7); --pill-line:rgba(255,255,255,.18);
  }
}
:root[data-theme="dark"]{
  --haze:#262626; --sky:#101010; --ink:#f0f0f0; --ink-soft:#a5a5a5; --ground:#0d0d0d;
  --pill:rgba(30,30,30,.7); --pill-line:rgba(255,255,255,.18);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 5rem)}
body{margin:0;font-family:var(--font);font-weight:300;color:var(--on-ground);background:var(--ground);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--sky)}

header{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:1rem 1.5rem;pointer-events:none}
.logo{position:absolute;left:1.5rem;font-weight:400;letter-spacing:.22em;font-size:.95rem;text-decoration:none;color:var(--ink);pointer-events:auto}
nav{pointer-events:auto;display:flex;gap:.25rem;padding:.35rem;border-radius:999px;background:var(--pill);border:1px solid var(--pill-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
nav a{padding:.45rem 1.1rem;border-radius:999px;text-decoration:none;font-size:.95rem;color:var(--ink);transition:background .2s}
nav a:hover{background:rgba(128,128,128,.2)}
@media (max-width:760px){.logo{display:none}nav a{padding:.45rem .8rem;font-size:.9rem}}

.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:linear-gradient(180deg,var(--sky) 0%,var(--haze) 62%)}
.hero-copy{position:absolute;left:0;right:0;top:27%;text-align:center;padding:0 1rem;color:var(--ink)}
h1{margin:0;font-weight:200;font-size:clamp(3rem,13vw,10rem);letter-spacing:.14em;padding-left:.14em;line-height:1}
h1 span{display:inline-block;animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i)*90ms)}
@keyframes rise{from{opacity:0;transform:translateY(.4em);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.tag{margin:1.2rem 0 0;font-size:clamp(1rem,2.2vw,1.3rem);color:var(--ink-soft);letter-spacing:.04em}
#scene{position:absolute;left:0;bottom:0;width:100%;height:64%;display:block}

main section{padding:6rem 1.5rem}
.wrap{max-width:68rem;margin:0 auto}
h2{margin:0 0 2rem;font-weight:300;font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:.02em}
p{margin:0}
.lead{max-width:38rem;font-size:1.2rem;color:var(--on-ground)}
.tech-stack{padding-top:4rem}
.tech-stack h2{margin-bottom:0}
.tech-orbit{position:relative;isolation:isolate;height:clamp(20rem,38vw,26rem);margin-top:1.5rem;overflow:hidden;touch-action:pan-y;cursor:grab}
.tech-orbit:active{cursor:grabbing}
.tech-orbit__path{position:absolute;left:50%;top:50%;width:72%;height:64%;border:1px solid var(--line);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.tech-orbit__center{position:absolute;z-index:2;left:50%;top:50%;display:grid;place-content:center;width:9rem;height:9rem;border:1px solid var(--line);border-radius:50%;background:var(--ground);text-align:center;transform:translate(-50%,-50%);pointer-events:none}
.tech-orbit__center span{color:var(--on-ground-soft);font-size:.6rem;letter-spacing:.17em}
.tech-orbit__center strong{margin-top:.4rem;font-size:.9rem;font-weight:400;line-height:1.25;letter-spacing:.05em}
.tech-orbit__item{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:.35rem;width:6rem;color:var(--on-ground);font-size:.85rem;letter-spacing:.02em;pointer-events:none;will-change:transform,opacity}
.tech-orbit__logo{display:grid;place-items:center;width:4rem;height:4rem;border:1px solid rgba(0,0,0,.08);border-radius:1.2rem;background:#f5f4ef;box-shadow:0 8px 22px rgba(0,0,0,.16)}
.tech-orbit__logo img{display:block;width:2.75rem;height:2.75rem;object-fit:contain}
@media (max-width:700px){.tech-stack{padding-top:3rem}.tech-orbit{height:20rem}.tech-orbit__item{width:5rem;font-size:.75rem}.tech-orbit__logo{width:3.4rem;height:3.4rem;border-radius:1rem}.tech-orbit__logo img{width:2.35rem;height:2.35rem}.tech-orbit__center{width:7rem;height:7rem}.tech-orbit__center strong{font-size:.75rem}}
.services{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.service{padding:2rem 2rem 2rem 0}
.service+.service{padding-left:2rem;border-left:1px solid var(--line)}
.service h3{margin:0 0 .6rem;font-weight:400;font-size:1.4rem}
.service p{color:var(--on-ground-soft);max-width:30rem}
@media (max-width:700px){.services{grid-template-columns:1fr}.service,.service+.service{padding:1.5rem 0;border-left:0}.service+.service{border-top:1px solid var(--line)}}

.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:2rem}
.stat{display:flex;flex-direction:column;padding:1.5rem 2rem 1.5rem 0}
.stat+.stat{padding-left:2rem;border-left:1px solid var(--line)}
.stat strong{font-size:clamp(2rem,5vw,3.2rem);font-weight:300;line-height:1.1}
.stat span{margin-top:.45rem;color:var(--on-ground-soft)}
.section-note{max-width:42rem;margin-top:1.5rem;color:var(--on-ground-soft)}
.project-intro,.contact-intro{margin-bottom:1.5rem}
@media (max-width:700px){.stat{padding:1.25rem 1rem 1.25rem 0}.stat+.stat{padding-left:1rem}}

.scroll-expand{position:relative;width:100%}
.scroll-expand__track{position:relative;height:255svh}
.scroll-expand__stage{position:sticky;top:0;width:100%;height:100svh;overflow:hidden;--se-title-size:clamp(1.6rem,6vw,4.5rem)}
.scroll-expand__frame{position:absolute;inset:0;clip-path:inset(18% 14% 18% 14% round 18px);will-change:clip-path}
.scroll-expand__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.3);transform-origin:center;will-change:transform}
.scroll-expand__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.08) 48%,rgba(0,0,0,.28));opacity:0}
.scroll-expand__title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0 8%;text-align:center;font-size:var(--se-title-size);font-weight:300;letter-spacing:.01em;line-height:1.1;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.45);pointer-events:none;will-change:opacity,transform}
.scroll-expand__hint{position:absolute;left:0;right:0;bottom:1.25rem;margin:0;text-align:center;font-size:.85rem;letter-spacing:.04em;color:rgba(255,255,255,.78);pointer-events:none;will-change:opacity,transform}
.scroll-expand__overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6%;text-align:center;color:#fff;opacity:0;will-change:opacity,transform}
.scroll-expand__overlay h2{margin:0 0 .75rem;font-size:clamp(2rem,6vw,4.5rem);font-weight:300}
.scroll-expand__overlay p{max-width:34rem;color:rgba(255,255,255,.82)}
.scroll-expand__overlay .btn{margin-top:1.5rem}
.scroll-expand__overlay.is-visible{pointer-events:auto}
.image-credit{margin-top:2rem;color:rgba(255,255,255,.72);font-size:.75rem}
.image-credit a{color:inherit}
@media (max-width:600px){.scroll-expand__frame{clip-path:inset(22% 7% round 14px)}.image-credit{max-width:90%;line-height:1.5}}
@media (prefers-reduced-motion:reduce){.scroll-expand__frame,.scroll-expand__media,.scroll-expand__title,.scroll-expand__hint,.scroll-expand__overlay{will-change:auto}}

.empty{border:1px dashed var(--line);border-radius:14px;padding:3.5rem 1.5rem;text-align:center;color:var(--on-ground-soft)}
.empty strong{display:block;color:var(--on-ground);font-weight:400;font-size:1.2rem;margin-bottom:.3rem}
#project-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1.25rem}
#project-list:empty{display:none}

.contact-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;max-width:38rem}
.row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 1.4rem;background:var(--ground)}
.row small{display:block;color:var(--on-ground-soft);font-size:.85rem}
.row a,.row span.v{font-size:1.15rem;text-decoration:none;word-break:break-all}
.row a:hover{text-decoration:underline}
button.copy{font:inherit;font-size:.9rem;color:var(--on-ground);background:transparent;border:1px solid var(--line);border-radius:999px;padding:.4rem 1rem;cursor:pointer;min-width:5.5rem;transition:background .2s}
button.copy:hover{background:rgba(255,255,255,.1)}
footer{padding:2rem 1.5rem 3rem;color:var(--on-ground-soft);font-size:.9rem;text-align:center}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}h1 span{animation:none}}
nav a[aria-current="page"]{background:rgba(128,128,128,.22)}
.hero.small{height:46svh;min-height:340px}
.hero.small .hero-copy{top:36%}
h1.page-title{font-size:clamp(2.4rem,8vw,5.5rem)}
.hero.small #scene{height:55%}
.btns{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2rem}
.btn{display:inline-block;padding:.6rem 1.4rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;transition:background .2s}
.btn:hover{background:rgba(255,255,255,.1)}

.eyebrow{margin:0 0 .8rem;color:var(--on-ground-soft);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase}
.home-possibilities h2,.home-process h2{max-width:42rem}
.possibility-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-top:3rem}
.possibility{min-height:15rem;padding:1.6rem;border:1px solid var(--line);border-radius:14px}
.possibility>span{color:var(--on-ground-soft);font-size:.85rem;letter-spacing:.1em}
.possibility h3,.process-step h3{margin:2.4rem 0 .6rem;font-size:1.3rem;font-weight:400}
.possibility p,.process-step p{color:var(--on-ground-soft)}
.home-process{padding-top:2rem}
.process-list{margin-top:2.5rem;border-top:1px solid var(--line)}
.process-step{display:grid;grid-template-columns:5rem 1fr;gap:1rem;padding:1.8rem 0;border-bottom:1px solid var(--line)}
.process-step__number{padding-top:.3rem;color:var(--on-ground-soft);font-size:.9rem;letter-spacing:.1em}
.process-step h3{margin:.1rem 0 .4rem}
.process-step p{max-width:38rem}
.home-cta{padding-top:2rem}
.home-cta__inner{padding:4rem 2rem;border:1px solid var(--line);border-radius:18px;text-align:center}
.home-cta__inner h2{max-width:40rem;margin:0 auto 1rem}
.home-cta__inner>p:not(.eyebrow){max-width:32rem;margin:0 auto;color:var(--on-ground-soft)}
.home-cta__inner .btn{margin-top:1.7rem}
@media (max-width:760px){.possibility-grid{grid-template-columns:1fr;gap:.8rem;margin-top:2rem}.possibility{min-height:0;padding:1.3rem}.possibility h3{margin:1.3rem 0 .5rem}.home-cta__inner{padding:3rem 1.3rem}.process-step{grid-template-columns:3rem 1fr}}