:root{--bg:#040405;--tx:#e6e7e8;--mut:#8a8d91;--line:#1f2023;--card:#0a0a0c}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--tx);font:1rem/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--tx);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--tx);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--tx);color:var(--bg);padding:.6rem 1rem;z-index:10}
.skip:focus{top:.5rem}
.wrap{width:100%;max-width:64rem;margin:0 auto;padding:0 1.25rem}
header.site{border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:1rem}
.mark{display:inline-flex;align-items:center;min-height:3.5rem;font-size:.95rem;font-weight:650;letter-spacing:.2em;text-transform:uppercase;text-decoration:none}
nav ul{display:flex;gap:.25rem;margin:0;padding:0;list-style:none}
nav a{display:inline-flex;align-items:center;min-height:3.5rem;padding:0 .7rem;font-size:1rem;color:#c4c7cb;text-decoration:none;letter-spacing:.01em}
nav a:hover{color:var(--tx)}
nav a[aria-current="page"]{color:var(--tx);text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1px}
main{flex:1}
h1,h2,h3{line-height:1.15;font-weight:600}
h1{font-size:clamp(2rem,6vw,3.25rem);letter-spacing:-.02em;margin:0 0 1rem}
h2{font-size:1.5rem;letter-spacing:-.015em;margin:2.5rem 0 .75rem}
h3{font-size:1.15rem;letter-spacing:-.01em;margin:0 0 .5rem}
p{margin:0 0 1rem;max-width:65ch}
.label{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0 0 .75rem}
.muted{color:var(--mut)}
.page{padding-block:3rem 4rem}
.page .eff{color:var(--mut);margin-bottom:2rem}
.hero{position:relative;height:min(62vh,36rem);min-height:18rem;overflow:hidden;background:var(--bg)}
.hero canvas{display:block;width:100%;height:100%}
.vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,rgba(4,4,5,0) 55%,#040405 100%)}
.grain{position:absolute;inset:-50%;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:gr 1.2s steps(6) infinite}
@keyframes gr{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}
.intro{padding-block:2.5rem 1rem}
.intro h1{margin-bottom:1rem}
.intro .lead{font-size:1.15rem;color:var(--tx)}
.card{border:1px solid var(--line);background:var(--card);border-radius:.5rem;padding:1.5rem;max-width:40rem}
.card p{margin-bottom:1.25rem}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:0 1.25rem;border:1px solid var(--tx);border-radius:.375rem;color:var(--tx);text-decoration:none;font-weight:600;font-size:.95rem}
.btn:hover{background:var(--tx);color:var(--bg)}
.sec-link{display:inline-flex;align-items:center;min-height:2.75rem}
dl{margin:1.5rem 0 0;max-width:40rem}
dl div{display:grid;grid-template-columns:9rem 1fr;gap:.25rem 1rem;padding:.75rem 0;border-top:1px solid var(--line)}
dl div:last-child{border-bottom:1px solid var(--line)}
dt{color:var(--mut)}
dd{margin:0;overflow-wrap:anywhere}
address{font-style:normal;margin:0 0 1rem}
footer.site{border-top:1px solid var(--line);padding:2rem 0 2.5rem;color:var(--mut);font-size:.875rem}
footer.site p{margin:0 0 .5rem;max-width:none}
footer.site a{color:var(--mut)}
footer.site a:hover{color:var(--tx)}
footer.site ul{display:flex;flex-wrap:wrap;gap:0 1.25rem;margin:.25rem 0 0;padding:0;list-style:none}
footer.site li a{display:inline-flex;align-items:center;min-height:2.75rem}
@media (max-width:600px){.hero{height:42vh;min-height:16rem}dl div{grid-template-columns:1fr}.card{padding:1.25rem}nav a{padding:0 .5rem}.wrap{padding:0 1rem}}
@media (prefers-reduced-motion:reduce){.grain{animation:none}html{scroll-behavior:auto}}

.shots{margin:2rem 0;display:grid;grid-template-columns:1fr 11rem;gap:1.25rem;align-items:end;max-width:52rem}
.frame{border:1px solid var(--line);background:var(--card);overflow:hidden}
.frame img{display:block;width:100%;height:auto}
.frame.desk{border-radius:.5rem}
.frame.phone{border-radius:1.25rem}
.shots figcaption{grid-column:1/-1;color:var(--mut);font-size:.875rem}
.list{padding-left:1.25rem}.list li{margin:.25rem 0}
@media (max-width:600px){.shots{grid-template-columns:1fr}.frame.phone{display:none}}

.hero-grid{display:grid;grid-template-columns:1fr;padding-block:1rem 0}
.hero-copy{order:2;padding-block:.5rem 1rem}
.hero-copy h1{margin-bottom:1rem}
.hero-copy .lead{font-size:1.15rem;max-width:34ch}
.hero-copy .actions{margin:1.5rem 0 1.25rem}
.hero-copy .tag{margin:0}
@media (min-width:900px){.hero-grid{grid-template-columns:minmax(0,26rem) minmax(0,1fr);align-items:center;gap:2rem;padding-block:2rem 1rem}.hero-copy{order:0}.hero{height:min(62vh,34rem)}.hero-copy h1{font-size:3.5rem}}
.with-aside{display:grid;grid-template-columns:1fr;gap:2rem}
.facts{display:none}
@media (min-width:900px){.with-aside{grid-template-columns:minmax(0,1fr) 15rem;gap:4rem}.facts{display:block;align-self:start;position:sticky;top:2rem;margin-top:.75rem;padding:1.5rem;border:1px solid var(--line);background:var(--card);border-radius:.5rem;font-size:.9rem;line-height:1.5}.facts p{margin:0 0 .75rem}.facts p:last-child{margin:0}.facts strong{font-weight:600}}

.lead{font-size:1.15rem}
.steps{list-style:none;padding:0;margin:2rem 0 1rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:.5rem;overflow:hidden}
.steps li{position:relative;padding:1.25rem 1.25rem 1.25rem;border-left:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;gap:.35rem}
.steps li:first-child{border-left:0}
.steps li:not(:last-child)::after{content:"";position:absolute;right:-.45rem;top:1.55rem;width:.8rem;height:.8rem;border-top:1px solid var(--mut);border-right:1px solid var(--mut);transform:rotate(45deg);background:var(--card);z-index:1}
.n{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:1px solid var(--tx);border-radius:50%;font-size:.8rem;font-weight:600}
.steps .t{font-weight:600;font-size:1.05rem}
.steps .d{color:var(--mut);font-size:.9rem;line-height:1.45}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:1.25rem 0 1rem}
.tile{display:block;padding:1.25rem;border:1px solid var(--line);background:var(--card);border-radius:.5rem;text-decoration:none;color:var(--tx);transition:border-color .15s ease}
.tile:hover{border-color:var(--mut)}
.tile:active{transform:scale(.99)}
.tile h3{margin:.75rem 0 .4rem;font-size:1.05rem}
.tile p{margin:0;color:var(--mut);font-size:.92rem;line-height:1.5}
@media (max-width:900px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.steps li:nth-child(3){border-left:0}.steps li:nth-child(n+3){border-top:1px solid var(--line)}.steps li::after{display:none}}
@media (max-width:600px){.grid4{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.steps li{border-left:0;border-top:1px solid var(--line)}.steps li:first-child{border-top:0}nav a{padding:0 .45rem}}
@media (prefers-reduced-motion:reduce){.tile{transition:none}.tile:active{transform:none}}

/* motion and visuals */
:root{--ease:cubic-bezier(.2,.8,.2,1)}
header.site{position:sticky;top:0;z-index:20;background:rgba(4,4,5,.62);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom-color:rgba(255,255,255,.07);view-transition-name:site-header}
@media (prefers-reduced-transparency:reduce){header.site{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}
.js .rise{opacity:0;transform:translateY(14px);filter:blur(4px)}
.js .go .rise{opacity:1;transform:none;filter:none;transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
.js .go .rise:nth-child(2){transition-delay:.12s}.js .go .rise:nth-child(3){transition-delay:.24s}.js .go .rise:nth-child(4){transition-delay:.36s}
.rv{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.hero canvas{transform:translateY(var(--py,0));opacity:var(--po,1);will-change:transform,opacity}
canvas.glyph{display:block;width:100%;max-width:9rem;aspect-ratio:4/3;margin:0 0 .5rem}
.tile canvas.glyph{max-width:7.5rem;margin:-.25rem 0 .25rem -.5rem}
.steps canvas.glyph{margin:0 0 .25rem -.4rem;max-width:8rem}
.steps{position:relative}
.steps::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--tx);box-shadow:0 0 10px rgba(255,255,255,.55);z-index:2}
.steps.go::before{width:100%;transition:width 1.8s var(--ease)}
.steps .n{transition:background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}
.steps.go .n{background:var(--tx);color:var(--bg);box-shadow:0 0 0 5px rgba(255,255,255,.06)}
.steps.go li:nth-child(2) .n{transition-delay:.5s}.steps.go li:nth-child(3) .n{transition-delay:1s}.steps.go li:nth-child(4) .n{transition-delay:1.5s}
.lit{position:relative;overflow:hidden;--x:50%;--y:50%;transition:transform .25s var(--ease),border-color .25s}
.lit::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(15rem circle at var(--x) var(--y),rgba(255,255,255,.08),transparent 60%);opacity:0;transition:opacity .25s}
.lit:hover::before{opacity:1}.card.lit:hover,.tile.lit:hover{transform:translateY(-2px);border-color:#3a3b40}
.lit>*{position:relative}
.frame.desk{position:relative;transform-origin:50% 50%;box-shadow:0 30px 60px -24px rgba(0,0,0,.9)}
.frame.desk::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.1) 50%,transparent 65%);transform:translateX(-120%);animation:sweep 7s var(--ease) infinite}
@keyframes sweep{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.fsec{position:relative}
canvas.field{position:absolute;left:0;right:0;top:-1.5rem;width:100%;height:9rem;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 60%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 60%,transparent)}
.fsec>*:not(canvas){position:relative}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s var(--ease) both}
::view-transition-new(root){animation:vt-in .42s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.js .rise,.rv{opacity:1!important;transform:none!important;filter:none!important}.frame.desk::after{animation:none}.steps::before{width:100%}.lit{transition:none}::view-transition-old(root),::view-transition-new(root){animation:none}}
@media (min-width:900px){.facts.lit{position:sticky;top:5rem}}