:root{
  --canvas:#080A0E;--surface:#11151C;--ink:#ECEDEF;--ink-warm:#F3EFE7;--muted:#9BA1AC;--faint:#3A404A;
  --hair:rgba(236,237,239,.08);--glow-cool:#5E8188;--glow-rose:#9C7E6A;--glow-indigo:#43406A;
  --font-display:"Bodoni Moda",Georgia,serif;--font-sans:"Sora",system-ui,sans-serif;--font-mono:"JetBrains Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--canvas);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.mono{font-family:var(--font-mono)}
img{display:block}
a{color:inherit}

/* top bar */
.topbar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,4vw,56px);font-size:12px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;
  font-family:var(--font-mono);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.topbar .brand{display:flex;align-items:center;gap:10px;color:var(--ink);letter-spacing:.28em;text-decoration:none}
.topbar .brand svg{width:14px;height:14px}
.topbar .right{display:flex;align-items:center;gap:30px}
.topbar .links{display:flex;gap:30px}
.topbar a{color:var(--muted);text-decoration:none;transition:color .3s}
.topbar a:hover,.topbar a.on{color:var(--ink)}
.topbar .pill{border:1px solid var(--faint);border-radius:100px;padding:8px 16px;color:var(--ink);display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.topbar .pill:hover{border-color:color-mix(in srgb,var(--glow-cool) 55%,var(--faint))}

/* page hero band */
.pagehero{position:relative;min-height:62svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:140px clamp(20px,5vw,56px) clamp(48px,7vh,86px);overflow:hidden;isolation:isolate;max-width:1240px;margin:0 auto}
.pagehero .media{position:absolute;inset:0;z-index:-4}
.pagehero .media img{width:100%;height:100%;object-fit:cover;filter:blur(14px) saturate(.85) brightness(.5) contrast(1.04);transform:scale(1.1)}
.pagehero .tint{position:absolute;inset:0;z-index:-2;background:
  linear-gradient(180deg,rgba(8,10,14,.62) 0%,rgba(8,10,14,.34) 40%,rgba(8,10,14,.72) 100%),
  radial-gradient(80% 70% at 30% 80%,rgba(8,10,14,.2) 0%,rgba(8,10,14,.66) 100%)}
.pagehero .glow{position:absolute;inset:-20%;z-index:-3;pointer-events:none;filter:blur(80px);opacity:.3;
  background:radial-gradient(40% 42% at 30% 64%,color-mix(in srgb,var(--glow-cool) 60%,transparent),transparent 70%),
  radial-gradient(40% 42% at 72% 40%,color-mix(in srgb,var(--glow-rose) 50%,transparent),transparent 72%)}
.pagehero .grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pagehero .inner{position:relative;z-index:3;max-width:900px}
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.26em;color:var(--muted);text-transform:uppercase;margin-bottom:22px}
.page-title{font-family:var(--font-display);font-weight:500;font-size:clamp(2.6rem,7vw,5.4rem);line-height:1;letter-spacing:-.02em;color:var(--ink-warm);text-wrap:balance}
.page-title em{font-style:italic;font-weight:400}
.page-lead{font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.6;color:var(--muted);max-width:54ch;margin-top:24px}

/* sections + type */
.wrap{max-width:1140px;margin:0 auto}
.section{position:relative;z-index:2;max-width:1140px;margin:0 auto;padding:clamp(70px,10vh,140px) clamp(20px,5vw,56px);border-top:.5px solid var(--hair);scroll-margin-top:90px}
.h2{font-family:var(--font-display);font-weight:500;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.05;letter-spacing:-.015em;color:var(--ink-warm);max-width:20ch;text-wrap:balance}
.h2 em{font-style:italic;font-weight:400;color:var(--muted)}
.lead{font-family:var(--font-sans);font-size:1.12rem;line-height:1.65;color:var(--muted);max-width:54ch;margin-top:24px}
.reframe{font-family:var(--font-display);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.4;color:#ddd5e0;max-width:32ch}

/* keep / automate */
.hva{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);margin-top:clamp(40px,6vh,72px)}
.hva h3{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;color:var(--muted);margin-bottom:18px;padding-bottom:14px;border-bottom:.5px solid rgba(236,237,239,.12)}
.hva .keep h3{color:var(--ink)}
.hva ul{list-style:none;display:flex;flex-direction:column;gap:16px}
.hva li{font-size:1.04rem;line-height:1.4;color:var(--ink)}
.hva .weight li{color:var(--muted)}
.hva li .d{display:block;font-size:.92rem;color:var(--muted);margin-top:4px}

/* numbered steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(24px,3vw,44px)}
.step .n{font-family:var(--font-display);font-style:italic;font-size:2rem;color:var(--muted);line-height:1}
.step h4{font-family:var(--font-sans);font-weight:500;font-size:1.1rem;color:var(--ink);margin:14px 0 8px}
.step p{font-size:.98rem;line-height:1.55;color:var(--muted)}

/* case studies (Work) */
.case{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(48px,8vh,104px) 0;border-top:.5px solid var(--hair)}
.case:nth-child(even) .case-media{order:2}
.case-media{position:relative;border-radius:16px;overflow:hidden;outline:.5px solid rgba(255,255,255,.1);outline-offset:-.5px;aspect-ratio:5/4}
.case-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.82);transition:transform 1s cubic-bezier(.16,1,.3,1),filter .7s}
.case:hover .case-media img{transform:scale(1.05);filter:saturate(1) brightness(.94)}
.case .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.case .who{font-family:var(--font-display);font-weight:500;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.05;color:var(--ink-warm);margin:16px 0 4px}
.case .role{font-size:.96rem;color:var(--muted);margin-bottom:20px}
.case dl{display:flex;flex-direction:column;gap:16px}
.case dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.case dd{font-size:1.02rem;line-height:1.55;color:var(--ink)}
.case .pill{display:inline-block;margin-top:20px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:.5px solid rgba(236,237,239,.16);border-radius:100px;padding:5px 12px}

/* prose blocks (Method / About) */
.prose p{font-size:1.12rem;line-height:1.7;color:#c8cdd5;max-width:62ch;margin-top:20px}
.prose p:first-child{margin-top:0}
.prose em{font-style:italic;color:var(--ink-warm)}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start}
.twocol .label{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);position:sticky;top:100px}

/* contact / cta blocks */
.cta{display:inline-flex;align-items:center;gap:10px;padding:13px 27px;border:1px solid var(--faint);border-radius:100px;color:var(--ink);text-decoration:none;font-family:var(--font-mono);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;background:rgba(236,237,239,.02);transition:border-color .35s,box-shadow .45s,background .35s}
.cta:hover{border-color:color-mix(in srgb,var(--glow-cool) 60%,var(--faint));box-shadow:0 0 34px color-mix(in srgb,var(--glow-cool) 24%,transparent);background:rgba(236,237,239,.05)}
.cta svg{width:15px;height:15px}
.endcta{text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px}
.endcta .h2{max-width:22ch}
.endcta .csub{font-size:1.05rem;line-height:1.6;color:var(--muted);max-width:46ch}

/* footer */
.site-footer{position:relative;z-index:2;border-top:.5px solid var(--hair);padding:38px clamp(20px,5vw,56px);display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--ink)}

@media (max-width:820px){.hva,.twocol{grid-template-columns:1fr;gap:36px}.case{grid-template-columns:1fr;gap:24px}.case:nth-child(even) .case-media{order:0}.twocol .label{position:static}}
@media (max-width:720px){.topbar .links{display:none}}

/* ============================================================
   Motion & atmosphere layer — the site-wide "catch-up" to the hero.
   Shared by every page so the whole site moves as one. Quieter than
   the hero by design: once-on-entrance + subtle-on-hover, never looping
   over content. The hero stays the uncontested ceiling.
   ============================================================ */
:root{
  --ease-out-cinematic:cubic-bezier(.16,1,.3,1);
  --rise:14px;--dur-reveal:560ms;--stagger:70ms;
  --glow-amb:.08;--parallax-page:10px;--shiftx:10px;
}

/* one faint ambient glow per page, fixed behind the content */
.atmos{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.atmos::before{content:"";position:absolute;inset:-30%;filter:blur(100px);opacity:var(--glow-amb);
  background:
    radial-gradient(38% 40% at 24% 28%,color-mix(in srgb,var(--glow-rose) 50%,transparent),transparent 70%),
    radial-gradient(46% 48% at 78% 66%,color-mix(in srgb,var(--glow-cool) 58%,transparent),transparent 72%),
    radial-gradient(54% 54% at 52% 100%,color-mix(in srgb,var(--glow-indigo) 42%,transparent),transparent 76%)}

/* scroll reveals — enhance an already-visible default (no JS = visible) */
html.js-on .reveal{opacity:.001;transform:translate(var(--rx,0),var(--ry,var(--rise)));
  transition:opacity var(--dur-reveal) var(--ease-out-cinematic),transform var(--dur-reveal) var(--ease-out-cinematic)}
html.js-on .reveal.is-in{opacity:1;transform:none}
.reveal--from-left{--rx:calc(-1*var(--shiftx))}
.reveal--from-right{--rx:var(--shiftx)}
html.js-on .reveal--emphasis{transition-duration:660ms}
.reveal--fade{--ry:0}

/* staggered groups — children cascade in DOM order (--i set by site.js) */
html.js-on [data-stagger]>*{opacity:.001;transform:translateY(var(--rise));
  transition:opacity var(--dur-reveal) var(--ease-out-cinematic) calc(var(--i,0)*var(--stagger)),
             transform var(--dur-reveal) var(--ease-out-cinematic) calc(var(--i,0)*var(--stagger))}
html.js-on [data-stagger].is-in>*{opacity:1;transform:none}

/* media reveal — directional clip + settle (case studies) */
html.js-on .reveal-media{opacity:.001;transform:scale(1.04);
  transition:opacity var(--dur-reveal) var(--ease-out-cinematic),transform var(--dur-reveal) var(--ease-out-cinematic),clip-path var(--dur-reveal) var(--ease-out-cinematic)}
html.js-on .reveal-media[data-from="left"]{clip-path:inset(0 100% 0 0)}
html.js-on .reveal-media[data-from="right"]{clip-path:inset(0 0 0 100%)}
html.js-on .reveal-media.is-in{opacity:1;transform:scale(1);clip-path:inset(0)}

/* lift — quiet, cursor-era responsiveness on structured blocks */
.lift{transition:transform .5s var(--ease-out-cinematic),box-shadow .5s var(--ease-out-cinematic)}
@media (hover:hover){.lift:hover{transform:translateY(-2px);box-shadow:0 22px 60px -34px color-mix(in srgb,var(--glow-cool) 65%,transparent)}}
.lift:focus-within{box-shadow:0 0 0 1px color-mix(in srgb,var(--glow-cool) 35%,transparent)}

/* sub-page hero band: a breath of life, well below the home hero */
@media (prefers-reduced-motion:no-preference){
  .pagehero .media img{animation:pageheroDrift 42s ease-in-out infinite}
  .pagehero .glow{animation:glowPulse 50s ease-in-out infinite}
}
@keyframes pageheroDrift{0%,100%{transform:scale(1.1)}50%{transform:scale(1.16)}}
@keyframes glowPulse{0%,100%{opacity:.22}50%{opacity:.3}}

/* reduced motion: everything lands at rest, instantly */
@media (prefers-reduced-motion:reduce){
  html.js-on .reveal,html.js-on .reveal-media,html.js-on [data-stagger]>*{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .lift{transition:none}.lift:hover{transform:none}
}