/* Expressive motion stays separate from the established visual tokens. */
.ambient-lines{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.72}
.site-header,main,.site-footer{position:relative;z-index:1}.site-header{position:sticky;z-index:20}
.hero{grid-template-columns:1.35fr 1fr;position:relative;gap:32px;padding-block:48px 0;min-height:620px;overflow:clip}
.hero-copy{padding-bottom:54px;position:relative;z-index:2}
.hero-portrait{position:relative;align-self:end;justify-self:center;width:100%;max-width:450px;min-width:0;isolation:isolate}
.hero-portrait img{display:block;width:100%;height:auto;max-height:590px;object-fit:contain;object-position:center bottom;position:relative;z-index:1;filter:drop-shadow(0 20px 25px rgb(0 0 0 / .1))}
.portrait-frame{position:absolute;inset:16% 0 9%;pointer-events:none}
.portrait-frame:before,.portrait-frame:after{content:'';position:absolute;width:48px;height:48px;border-color:var(--line);border-style:solid}
.portrait-frame:before{left:0;top:0;border-width:1px 0 0 1px}
.portrait-frame:after{right:0;bottom:0;border-width:0 1px 1px 0}
.site-header:after{content:'';height:2px;background:var(--fg);position:absolute;bottom:-1px;left:0;width:100%;transform:scaleX(var(--reading-progress,0));transform-origin:left;opacity:.65}
a,button{transition:color .2s,background-color .2s,border-color .2s,box-shadow .25s,transform .35s cubic-bezier(.16,1,.3,1)}
a:not(.brand):not(.card-screenshot):hover svg,button:not(.icon-button):hover svg{transform:translate(3px,-2px)}
a svg,button svg{transition:transform .35s cubic-bezier(.16,1,.3,1)}
a:active,button:not(:disabled):active{transform:scale(.965)}
.icon-button:hover{transform:rotate(-9deg) scale(1.08)}
.button-primary:hover{box-shadow:0 8px 20px rgb(0 0 0 / .15);transform:translateY(-3px)}
.site-header nav a,.text-link,.case-action,.footer-links a{position:relative}
.site-header nav a:after,.text-link:after,.case-action:after{content:'';position:absolute;left:0;bottom:6px;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.site-header nav a:hover:after,.site-header nav a:focus-visible:after,.text-link:hover:after,.text-link:focus-visible:after,.case-action:hover:after{transform:scaleX(1);transform-origin:left}
.project-visual{transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .5s}
.project-card:hover .project-visual{transform:translateY(-5px);box-shadow:0 18px 35px rgb(0 0 0 / .07)}
.card-screenshot img{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.card-screenshot:hover img{transform:scale(.98)}
.capability-row{transition:background .25s,padding-inline .4s cubic-bezier(.16,1,.3,1)}
.capability-row:hover{background:var(--bg);padding-inline:14px}
.motion-toggle[aria-pressed=true]{background:var(--surface)}
.motion-toggle:focus-visible,.button:focus-visible,.filter-button:focus-visible{box-shadow:0 0 0 5px var(--surface)}
body.motion-paused .ambient-lines{opacity:.35}
body.motion-paused *,body.motion-paused *:before,body.motion-paused *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(max-width:1100px){.hero{min-height:550px}.hero-portrait{max-width:390px}.hero-portrait img{max-height:540px}}
@media(max-width:760px){.hero{grid-template-columns:1fr;padding-block:45px 0;gap:20px;min-height:0}.hero-copy{padding-bottom:0}.hero-portrait{max-width:320px;width:85%}.hero-portrait img{max-height:415px}.portrait-frame{inset:6% -4%}.header-inner{gap:6px}.header-actions{gap:0}.header-actions .icon-button{min-width:40px;width:40px}.brand{gap:7px;font-size:14px}.brand-sub{font-size:9px}.project-card:hover .project-visual{transform:none}.capability-row:hover{padding-inline:0}.ambient-lines{opacity:.55}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ambient-lines{display:none}.hero-portrait img{filter:none}a,button,.project-visual,.card-screenshot img,.capability-row{transition:color .12s,background-color .12s,border-color .12s!important;transform:none!important}.site-header nav a:after,.text-link:after,.case-action:after{transition:none}.portrait-frame{opacity:.5}}
@media print{.ambient-lines,.motion-toggle{display:none}}
.availability{display:inline-flex;align-items:center;gap:13px;min-height:44px;font-size:13px;font-weight:600;white-space:nowrap;letter-spacing:-.01em}
.availability:hover{color:var(--muted)}
.availability-dot{position:relative;display:block;width:7px;height:7px;border-radius:50%;background:var(--fg);flex-shrink:0}
.availability-dot:after{content:'';position:absolute;inset:-5px;border:1px solid var(--fg);border-radius:50%;animation:availability-pulse 2.4s ease-out infinite}
@keyframes availability-pulse{0%{transform:scale(.65);opacity:.6}70%,100%{transform:scale(1.65);opacity:0}}
.hero+.about-section{border-top:1px solid var(--line)}
@media(max-width:760px){.availability{font-size:12px;gap:11px}}
@media(prefers-reduced-motion:reduce){.availability-dot:after{animation:none;opacity:0}}
/* Hero-only particle tide: ink on paper / silver on charcoal. */
.hero{isolation:isolate}
.hero-wave{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;mask-image:linear-gradient(to bottom,transparent 10%,#000 36%,#000 85%,transparent 100%)}
.hero-copy:before{content:'';position:absolute;inset:-48px -32px -10px -48px;background:linear-gradient(90deg,var(--bg) 15%,transparent 100%);z-index:-1;pointer-events:none}
@media(max-width:760px){.hero-wave{mask-image:linear-gradient(to bottom,transparent 20%,#000 55%,#000 88%,transparent 100%)}.hero-copy:before{inset:-45px -24px -20px;background:linear-gradient(to bottom,var(--bg) 25%,transparent 100%)}}
@media print{.hero-wave{display:none}}