@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#111310;--panel:#1a1d18;--line:#30342b;--text:#f1f2e9;--muted:#969c90;--green:#c6f36b}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--green);outline-offset:5px}.wrap{max-width:1240px;margin:auto;padding-left:48px;padding-right:48px}.header{height:110px;display:flex;align-items:center;justify-content:space-between}.brand{font-family:'Manrope',sans-serif;font-size:39px;letter-spacing:-5px;font-weight:800}.brand span{color:var(--green)}nav{display:flex;align-items:center;gap:36px;font-size:13px}nav>a{transition:color .2s}nav>a:hover,.text-link:hover{color:var(--green)}.nav-contact{border:1px solid #4b5143;border-radius:30px;padding:12px 19px}.nav-contact span{margin-left:15px}.hero{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:53px}.hero-copy{position:relative;z-index:2;padding-bottom:80px}.eyebrow{font-size:10px;letter-spacing:2.3px;font-weight:600;display:flex;align-items:center;gap:10px}.status-dot{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 15px #c6f34b66}h1{font-family:Manrope,sans-serif;font-weight:500;font-size:clamp(75px,8.7vw,112px);letter-spacing:-7px;line-height:1.04;margin:28px 0 25px}h1>span{color:var(--green)}h1 i{color:var(--green);font-style:normal}.roles{display:flex;align-items:center;gap:13px;font-size:15px;letter-spacing:-.3px}.roles b{color:var(--green);font-size:18px;font-weight:400}.intro{color:var(--muted);font-size:14px;line-height:1.9;margin:22px 0 30px}.button{display:inline-flex;justify-content:space-between;align-items:center;gap:30px;background:var(--green);color:#171d0f;border:0;padding:17px 23px;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;transition:background .2s,transform .2s}.button:hover{background:#d7ff8d;transform:translateY(-2px)}.button span{font-size:19px;font-weight:400}.text-link{display:inline-block;font-size:11px;margin-left:20px}.text-link span{margin-left:10px}.portrait-stage{position:relative;perspective:1000px;min-width:0;margin-top:5px;height:485px}.portrait-card{position:absolute;inset:8px 25px 0 35px;transform:rotate(5deg);border-radius:14px;overflow:hidden;border:1px solid #626658;box-shadow:20px 25px 55px #0007;transition:transform .3s ease-out;will-change:transform;background:#292c27}.portrait-card img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(.65)}.portrait-card:after{content:'';position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#0009)}.photo-bottom{position:absolute;bottom:22px;left:23px;right:23px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:2px;z-index:1}.orbit{position:absolute;inset:35px -10px 20px -10px;border:1px solid #56613b;border-radius:50%;transform:rotate(-30deg) scaleX(1.12);opacity:.45}.orbit-two{transform:rotate(35deg) scaleX(1.06);inset:0 8px -4px}.floating-label{position:absolute;z-index:3;display:flex;align-items:center;background:#20241eea;backdrop-filter:blur(16px);border:1px solid #515b40;box-shadow:0 12px 32px #0005;border-radius:10px}.audio-label{left:-3px;top:85px;gap:12px;padding:15px 17px;transform:rotate(-5deg)}.label-icon{font-size:25px;color:var(--green)}.floating-label small{display:block;font-size:7px;letter-spacing:1.7px;color:var(--muted);margin-bottom:5px}.floating-label strong{font-size:11px;font-weight:500}.mini-bars{display:flex;align-items:center;gap:3px;margin-left:8px;height:25px}.mini-bars i{width:3px;background:var(--green);height:12px}.mini-bars i:nth-child(2){height:23px}.mini-bars i:nth-child(3){height:17px}.code-label{right:-10px;bottom:38px;gap:14px;padding:17px 20px;transform:rotate(5deg);font-size:11px}.code-icon{font-family:monospace;color:var(--green);font-size:23px}.green{color:var(--green)}.stage-coordinate{position:absolute;bottom:-27px;left:70px;color:#737a69;font-size:7px;letter-spacing:2px}.hero-footer{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:23px 0 27px;font-size:8px;letter-spacing:1.8px;color:var(--muted)}.scroll-icon{border:1px solid #4d5443;padding:8px 10px;border-radius:20px;margin-right:12px;color:var(--text)}.tiny-star{font-size:25px;color:var(--green)}.ticker{overflow:hidden;background:var(--green);color:#29341c;padding:18px 0;transform:rotate(-1.4deg);margin:16px 0 15px}.ticker div{width:max-content;font-size:16px;font-weight:600;letter-spacing:2px}.ticker span{margin:0 40px;font-size:20px}.section{padding-top:100px;padding-bottom:95px}.about{display:grid;grid-template-columns:1fr 1fr;gap:75px}.muted{color:var(--muted);margin-top:0}h2{font-family:Manrope,sans-serif;font-weight:500;font-size:44px;line-height:1.25;letter-spacing:-2px;margin:22px 0 0}h2 em{font-style:normal;color:var(--green)}.about-copy{padding-top:22px;font-size:15px;line-height:1.9;color:var(--muted)}.about-copy p:first-child{color:#ccd0c4;margin-top:0}.about-copy strong{color:var(--text);font-weight:500}.signature{color:var(--text);font-size:16px;margin-top:24px}.signature span{color:var(--green);margin-left:20px}.expertise{border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:38px}.section-heading>p{font-size:12px;line-height:1.8;color:var(--muted)}.expertise-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.expertise-card{position:relative;background:linear-gradient(135deg,#20251a,#181c16);border:1px solid #39432d;border-radius:12px;padding:28px;overflow:hidden}.software-card{background:linear-gradient(135deg,#1d211d,#171a18);border-color:#333b32}.card-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:8px;letter-spacing:1.7px}.card-symbol{color:var(--green);font-family:monospace;font-size:26px;letter-spacing:0}.waveform{height:155px;display:flex;align-items:center;justify-content:center;gap:4px;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}.waveform i{display:block;width:3px;max-height:100px;border-radius:4px;background:var(--green);opacity:.8;transition:height .15s}.waveform.playing i{animation:wave .7s ease-in-out infinite alternate;animation-delay:var(--delay)}@keyframes wave{to{transform:scaleY(.3);opacity:.4}}.code-art{height:155px;font:11px/1.9 monospace;padding:16px 0 0;color:#cdd3c5}.code-art b{color:#c4e499;font-weight:400}.code-art i{color:#a8b783;font-style:normal}.code-dim{color:#535c4e;margin-right:12px}h3{font-family:Manrope,sans-serif;font-size:24px;font-weight:500;letter-spacing:-.7px;margin:10px 0 15px;display:flex;justify-content:space-between}h3 span{color:var(--green)}.expertise-card>p{font-size:12px;line-height:1.9;color:var(--muted);max-width:350px;min-height:46px}.tags{display:flex;gap:7px;margin:22px 0}.tags span{border:1px solid #434b39;padding:6px 11px;border-radius:20px;font-size:9px;color:#b6bfaa}.sound-button,.card-foot{border:0;border-top:1px solid #36402d;background:transparent;color:var(--green);padding:18px 0 0;display:flex;gap:10px;width:100%;font-size:10px;text-align:left}.sound-button{cursor:pointer}.card-foot{color:#7f8c76;font-size:8px;letter-spacing:2px;padding-top:20px}.contact{border-top:1px solid var(--line)}.contact-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:80px}.contact h2{font-size:52px}.contact h2>.green{display:inline-block;margin-left:22px}.contact-layout>div>p{font-size:12px;color:var(--muted);line-height:1.9;margin-top:25px}form{padding-top:20px}label{font-size:10px;color:#c3c9b9;display:block;margin-bottom:10px}input,textarea{display:block;border:0;border-bottom:1px solid #434b39;width:100%;color:var(--text);background:transparent;border-radius:0;padding:8px 0 14px;margin-bottom:24px;font-size:12px;resize:vertical}input::placeholder,textarea::placeholder{color:#707866}form .button{width:100%}.form-status{font-size:10px;color:var(--muted);line-height:1.6;min-height:30px}.footer{border-top:1px solid var(--line);padding-top:26px;padding-bottom:30px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px}.footer .brand{font-size:30px;color:var(--text)}.skip{position:fixed;top:-60px;left:15px;background:var(--green);color:#111;padding:10px;z-index:10}.skip:focus{top:10px}@media(min-width:1450px){.hero{padding-top:70px}.portrait-stage{height:510px}.hero-copy{padding-bottom:100px}}@media(max-width:1000px){.wrap{padding-left:30px;padding-right:30px}h1{font-size:86px}.roles{font-size:12px;gap:8px}.portrait-stage{height:445px}.portrait-card{inset:15px 15px 5px 20px}.audio-label{left:0;top:65px;padding:12px}.mini-bars{display:none}.code-label{right:0}.text-link{display:block;margin:20px 0 0}.section{padding-top:70px;padding-bottom:70px}.about,.contact-layout{gap:40px}h2{font-size:37px}.expertise-card{padding:22px}h3{font-size:21px}.code-art{font-size:9px}}@media(max-width:700px){.wrap{padding-left:23px;padding-right:23px}.header{height:88px}nav{gap:18px;font-size:11px}.nav-contact{padding:9px 12px}.nav-contact span{margin-left:4px}.brand{font-size:33px}nav>a:first-child{display:none}.hero{padding-top:28px;grid-template-columns:1fr;gap:0}.hero-copy{padding-bottom:15px}h1{font-size:86px;letter-spacing:-5px;margin-top:23px}.roles{font-size:13px;gap:12px}.intro{font-size:13px}.text-link{display:inline-block;margin:0 0 0 18px;font-size:10px}.portrait-stage{height:455px;max-width:440px;width:100%;margin:35px auto 40px}.portrait-card{inset:8px 27px 8px 28px}.audio-label{top:65px;left:0}.code-label{bottom:25px;right:0}.stage-coordinate{left:46px;bottom:-15px}.hero-footer{padding:22px 0}.hero-footer>span:nth-child(2){display:none}.ticker{padding:14px 0}.ticker div{font-size:12px}.ticker span{margin:0 22px}.section{padding-top:60px;padding-bottom:60px}.about{grid-template-columns:1fr;gap:10px}h2{font-size:37px}.about-copy{font-size:14px}.section-heading{display:block}.section-heading>p{margin-top:20px}.expertise-grid{grid-template-columns:1fr;gap:18px}.expertise-card{padding:25px}.code-art{font-size:11px}h3{font-size:24px}.contact-layout{grid-template-columns:1fr;gap:15px}.contact h2{font-size:45px}.footer{gap:15px;font-size:9px}.footer .brand{font-size:28px}.eyebrow{font-size:8px}.waveform{height:145px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.portrait-card{will-change:auto}}

.owner-line{font-size:12px;color:var(--muted);margin:18px 0 0}.owner-line a,.business-link,.email-link,.contact-social a{color:var(--green)}.owner-line a{margin-left:5px}.owner-line a:hover,.business-link:hover,.email-link:hover,.contact-social a:hover{text-decoration:underline;text-underline-offset:4px}.email-link{display:inline-block;font-size:20px;margin:4px 0 0;overflow-wrap:anywhere}.contact-layout>div>.contact-social{font-size:11px;margin-top:16px}
/* Keep the upper portrait clear at every viewport size. */
.audio-label{top:auto;bottom:120px}
@media(max-width:700px){.audio-label{top:auto;bottom:115px}}

/* Fade in/out on re-entry; content stays visible without JavaScript. */
.scroll-reveal{opacity:0;translate:0 24px;transition:opacity .6s ease,translate .6s cubic-bezier(.2,.65,.3,1)}
.scroll-reveal.is-visible,.scroll-reveal:focus-within{opacity:1;translate:0 0}
.hero-copy,.portrait-stage,.about>div,.contact-layout>div,.expertise-card,form{min-width:0}
.roles,.tags{flex-wrap:wrap}
@media(max-width:700px){
  .scroll-reveal{translate:0 16px;transition-duration:.45s}
  .scroll-reveal.is-visible,.scroll-reveal:focus-within{translate:0 0}
  .hero-copy>.button{margin-bottom:12px}
  input,textarea{font-size:16px}
  .code-art{font-size:clamp(8px,2.55vw,11px)}
}
@media(max-width:380px){
  .wrap{padding-left:18px;padding-right:18px}
  h1{font-size:clamp(60px,22vw,80px)}
  h2{font-size:32px}.contact h2{font-size:38px}
  .roles{font-size:12px;gap:8px}
  .hero-copy>.text-link{margin:5px 0 12px;display:block}
  .portrait-stage{height:405px}
  .audio-label{padding:11px;gap:8px}
  .floating-label strong{font-size:10px}
  .code-label{padding:13px 15px}
  .stage-coordinate{left:20px;font-size:6px}
  .footer{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  .scroll-reveal{opacity:1;translate:none;transition:none}
}

/* Ambient motion uses separate translate/rotate properties to preserve 3D tilt. */
@keyframes portrait-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes label-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes orbit-turn{to{rotate:360deg}}
@keyframes ticker-travel{to{transform:translateX(-50%)}}
@keyframes status-breathe{0%,100%{opacity:.6;scale:.9}50%{opacity:1;scale:1.15}}
.portrait-card{animation:portrait-float 7s ease-in-out infinite}
.audio-label{animation:label-float 5s ease-in-out infinite}
.code-label{animation:label-float 6s ease-in-out -2s infinite}
.orbit{animation:orbit-turn 55s linear infinite;pointer-events:none}
.orbit-two{animation-direction:reverse;animation-duration:70s}
.status-dot{animation:status-breathe 3s ease-in-out infinite}
.ticker>div{display:flex;animation:ticker-travel 38s linear infinite}
.ticker .ticker-group{display:block;flex:none;white-space:nowrap;margin:0;font-size:inherit}
.ticker:hover>div{animation-play-state:paused}
.motion-toggle{background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:9px 12px;font-size:10px;cursor:pointer}
.motion-toggle:hover{color:var(--green);border-color:var(--green)}
body.motion-paused *,body.motion-paused *::before,body.motion-paused *::after{animation-play-state:paused!important}
@media(max-width:700px){.footer{flex-wrap:wrap}.motion-toggle{margin-left:auto}.orbit{inset-inline:12px}}
@media(prefers-reduced-motion:reduce){.motion-toggle{display:none}.ticker>div{animation:none}.portrait-card,.floating-label,.orbit,.status-dot{animation:none}}