:root{--intro-progress:0}
body{isolation:isolate}
main,.site-footer{position:relative;z-index:1}
.fluid-background{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:strict;background:#101114}
#fluid-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s}
.fluid-ready #fluid-canvas{opacity:1}
.fluid-background:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#10111457,transparent 65%),radial-gradient(ellipse at 50% 40%,transparent 30%,#10111466 100%)}
.fluid-fallback{position:absolute;inset:-25%;background:radial-gradient(ellipse at 25% 40%,#93635333,transparent 45%),radial-gradient(ellipse at 80% 65%,#77739130,transparent 50%);filter:blur(65px);animation:fluid-drift 24s ease-in-out infinite alternate}
.fluid-ready .fluid-fallback{display:none}
@keyframes fluid-drift{to{transform:translate(8%,-5%) rotate(12deg)}}
.hero-portrait{position:relative;z-index:2;justify-self:end;width:min(100%,360px);margin:10px 0 20px 38px;animation:hero-in 1s .12s ease both}
.portrait-eyebrow{font-size:6px;letter-spacing:1.8px;color:#9c9ba5;display:flex;align-items:center;gap:9px;margin:0 0 19px 2px}
.portrait-eyebrow .coral-dot{width:4px;height:4px}
.portrait-frame{padding:8px;border:1px solid #ffffff24;border-radius:24px;background:linear-gradient(140deg,#ffffff10,#ffffff03);box-shadow:0 25px 90px #0005;position:relative}
.portrait-frame:after{content:'';position:absolute;inset:-1px;border-radius:24px;border:1px solid transparent;border-top-color:#ffb9a34d;pointer-events:none}
.portrait-frame img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:17px;background:#f0ece2}
.hero-portrait figcaption{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:19px 4px 0;font-size:11px;color:#d1cdd2}
.portrait-handle{font-size:10px;color:#76747e;margin-left:4px}
.hero-portrait figcaption a{display:flex;align-items:center;gap:7px;color:#a49ca9;font-size:9px;transition:color .2s}
.hero-portrait figcaption a:hover{color:var(--accent)}
.hero-portrait figcaption svg{width:12px;height:12px}
.about-signature img{filter:none}
@media(min-width:1600px){.hero-portrait{width:390px;margin-right:10px}}
@media(max-width:1180px){.hero-portrait{width:310px;margin-left:24px}.portrait-eyebrow{font-size:5px;letter-spacing:1.2px}}
@media(max-width:900px){.hero-portrait{width:260px;margin-left:20px}.portrait-frame{padding:6px;border-radius:20px}.portrait-frame img{border-radius:14px}.portrait-eyebrow{font-size:4px;letter-spacing:1px}.hero-portrait figcaption{font-size:10px;padding-top:15px}}
@media(max-width:650px){.hero-portrait{width:min(100%,285px);margin:40px auto 22px}.portrait-eyebrow{font-size:5px;letter-spacing:1.1px;margin-bottom:13px}.portrait-frame{padding:7px;border-radius:22px}.portrait-frame img{border-radius:15px}.hero-portrait figcaption{padding-top:15px}.fluid-background:after{background:#10111422}}
@media(prefers-reduced-motion:reduce){.fluid-fallback,.hero-portrait{animation:none}}