:root{--max:1240px}
body{font-family:Arial,Helvetica,sans-serif}
a:focus-visible,button:focus-visible{outline:2px solid var(--cream);outline-offset:5px}
.hero-shell{position:relative;background:#090908;overflow:hidden}
.hero-shell::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 80% 60%,rgba(234,216,189,.045),transparent 55%)}
.hero-inner{position:relative;max-width:var(--max);padding:0 36px;margin:auto}
.site-nav{height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:28px}
.site-brand{display:grid;grid-template-columns:38px auto;column-gap:11px;align-items:center;font-size:15px;font-weight:700;color:var(--cream)}
.brand-mark{grid-row:span 2;width:38px;height:38px;background:var(--cream);color:#090908;display:grid;place-items:center;font-size:28px;font-weight:700;letter-spacing:-3px;padding-right:4px}
.brand-detail{font-size:10px;line-height:1.5;color:var(--muted);font-weight:400}
.nav-links{display:flex;gap:34px;font-size:12px;color:#c9c4bc}
.nav-links a,.nav-contact,.hero-foot a{transition:color .2s}
.nav-links a:hover,.hero-foot a:hover{color:var(--cream)}
.nav-contact{border:1px solid var(--line);min-height:42px;display:flex;align-items:center;gap:35px;padding:0 16px;font-size:12px}
.nav-contact:hover{border-color:var(--cream)}
.hero-content{padding:47px 0 0}
.hero-topline{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px;letter-spacing:.12em;text-transform:uppercase;gap:20px}
.availability{display:flex;align-items:center;gap:9px;color:var(--cream);letter-spacing:.035em;text-transform:none;font-size:12px}
.availability i{width:6px;height:6px;border-radius:50%;background:#b0c697;box-shadow:0 0 0 4px rgba(176,198,151,.08)}
.hero-title{position:relative;color:var(--cream);font-size:clamp(80px,13.2vw,174px);font-weight:800;line-height:1.02;letter-spacing:-.075em;margin:31px 0 24px;padding-right:20px}
.title-dot{display:inline-block;font-size:24px;font-weight:400;letter-spacing:0;vertical-align:top;margin-top:19px;margin-left:16px}
.hero-divider{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:13px;color:#938d84;text-transform:uppercase;font-size:9px;letter-spacing:.14em}
.hero-bottom{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;padding:38px 0 31px}
.hero-description h2{color:var(--cream);font-weight:500;font-size:clamp(26px,3.2vw,42px);line-height:1.1;letter-spacing:-.045em;margin:0 0 20px}
.hero-description h2 span{color:#9b9286}
.hero-description p{color:#a9a299;font-size:14px;line-height:1.7;margin:0 0 27px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.button-primary,.button-secondary{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:0 19px;min-height:49px;font-size:12px;transition:background .2s,transform .2s,border-color .2s}
.button-primary{background:var(--cream);color:#0c0c0a;border:1px solid var(--cream)}
.button-secondary{border:1px solid var(--line);color:var(--cream)}
.button-primary:hover{background:#f3e5d1;transform:translateY(-2px)}
.button-secondary:hover{border-color:var(--cream);background:rgba(234,216,189,.08)}
.hero-art{max-width:440px;width:100%;justify-self:end}
.orbital{display:block;width:100%;height:auto}
.orbital-form{transform-origin:220px 145px;animation:orbit-breathe 10s ease-in-out infinite}
.art-caption{display:flex;justify-content:space-between;text-transform:uppercase;color:#8c8275;font-size:9px;letter-spacing:.15em;padding:0 22px;margin-top:9px}
.hero-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:21px 0;border-top:1px solid var(--line);font-size:10px;color:#a1998d;letter-spacing:.05em}
.hero-foot a{display:flex;gap:18px;align-items:center}
.hero-foot a span{color:var(--cream);font-size:18px}
.cursor-glow{z-index:4;width:320px;height:320px;opacity:0}
.cursor-glow.is-visible{opacity:.5}
.projects-head{grid-template-columns:1fr}
.projects h2{font-size:clamp(38px,5.2vw,64px);line-height:1.03;max-width:800px}
.projects h2 br{display:none}
.thumb{padding:0;width:100%;color:inherit;font:inherit;display:block;text-align:left}
.modal{z-index:80}
.modal:focus{outline:none}
.modal video{max-width:100%}
@keyframes orbit-breathe{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@media(min-width:1500px){.hero-content{padding-top:54px}.hero-title{font-size:174px}}
@media(max-width:900px){
 .hero-inner{padding:0 24px}.nav-links{gap:20px}.hero-bottom{gap:20px}.hero-description p{font-size:13px}.hero-title{font-size:13vw}.title-dot{font-size:18px;margin-left:10px;margin-top:12px}.hero-art{max-width:330px}.hero-actions{gap:8px}.button-primary,.button-secondary{padding:0 13px;gap:15px}.hero-topline{font-size:9px}.availability{font-size:11px}
}
@media(max-width:620px){
 .hero-inner{padding:0 20px}.site-nav{height:76px;gap:12px}.site-brand{font-size:13px;grid-template-columns:32px auto;column-gap:9px}.brand-mark{width:32px;height:32px;font-size:25px}.brand-detail{font-size:9px}.nav-links{display:none}.nav-contact{gap:15px;padding:0 12px;min-height:39px;font-size:11px}.hero-content{padding-top:30px}.hero-topline{align-items:start;flex-direction:column;gap:15px}.hero-title{font-size:13.4vw;letter-spacing:-.08em;line-height:1.1;margin:28px 0 22px;padding:0}.title-dot{font-size:12px;margin-top:3px;margin-left:6px}.hero-divider{font-size:8px;letter-spacing:.08em;gap:10px}.hero-bottom{grid-template-columns:1fr;padding-top:31px;gap:15px;padding-bottom:25px}.hero-description h2{font-size:33px;margin-bottom:17px}.hero-description p{font-size:13px;max-width:320px;margin-bottom:23px}.desktop-break{display:none}.hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.button-primary,.button-secondary{min-height:48px;font-size:11px;padding:0 12px;gap:10px}.hero-art{justify-self:center;max-width:280px;margin-top:2px}.art-caption{font-size:8px}.hero-foot{font-size:8px;gap:12px;padding:18px 0;letter-spacing:0}.hero-foot a{gap:10px}.projects h2 br{display:block}.projects h2{font-size:42px}.mobilebar{z-index:60}.skills-grid .skill{gap:10px}.ctalinks a{overflow-wrap:anywhere;gap:10px;font-size:13px}
}
@media(max-width:360px){.hero-inner{padding:0 16px}.hero-description h2{font-size:29px}.button-primary,.button-secondary{font-size:10px;padding:0 9px}.hero-foot{font-size:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.orbital-form{animation:none}.cursor-glow{display:none!important}*,*::before,*::after{transition:none!important}}

/* Centered typography and a native 3D sphere. */
.hero-title{text-align:center;padding-right:0;letter-spacing:0}
.title-word{display:inline-block;letter-spacing:-.075em;padding-right:.075em}
.hero-description h2{font-size:clamp(30px,3.7vw,48px)}
.hero-description h2 span{color:var(--cream)}
.hero-description p{max-width:430px;font-size:14px;margin-bottom:25px}
.hero-bottom{padding-top:32px;padding-bottom:26px}
.hero-art{max-width:390px;justify-self:center}
.scene-3d{height:294px;position:relative;perspective:700px;isolation:isolate}
.scene-3d::before{content:"";position:absolute;left:50%;top:50%;width:282px;height:282px;border:1px dashed rgba(234,216,189,.13);border-radius:50%;transform:translate(-50%,-50%)}
.sphere-hover{position:absolute;left:50%;top:50%;width:240px;height:240px;margin:-120px 0 0 -120px;transform-style:preserve-3d;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .5s ease-out}
.sphere-rotor{width:100%;height:100%;position:relative;transform-style:preserve-3d;animation:sphere-turn 24s linear infinite}
.sphere-ring{display:block;position:absolute;left:50%;top:50%;border:1px solid rgba(234,216,189,.65);border-radius:50%;box-shadow:0 0 5px rgba(234,216,189,.06);backface-visibility:visible}
.longitude{width:240px;height:240px;margin:-120px;transform:rotateY(var(--angle))}
.latitude{width:var(--diameter);height:var(--diameter);margin:calc(var(--diameter) / -2);transform:rotateX(90deg) translateZ(var(--offset));border-color:rgba(234,216,189,.32)}
.sphere-shadow{position:absolute;width:210px;height:30px;left:50%;bottom:9px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(234,216,189,.09),transparent 70%);filter:blur(8px)}
.orbit-dot{position:absolute;width:8px;height:8px;background:var(--cream);border-radius:50%;left:50%;top:50%;box-shadow:0 0 18px rgba(234,216,189,.45);animation:satellite-turn 16s linear infinite}
.scene-cross{position:absolute;color:#857661;font-size:17px;font-weight:300}.cross-one{left:22px;top:32px}.cross-two{right:22px;bottom:30px}
.business-proof{display:grid;grid-template-columns:1.25fr 1fr 1.1fr auto;gap:32px;padding:22px 0;color:var(--cream)}
.proof-primary{display:flex;align-items:center;gap:16px}.proof-primary strong{font-size:54px;line-height:1;letter-spacing:-.06em;font-weight:500}.proof-primary span{font-size:11px;line-height:1.6;color:#b9b1a6;letter-spacing:0}
.proof-item{display:flex;flex-direction:column;gap:9px}.proof-item b{font-size:12px;font-weight:400;letter-spacing:0}.proof-item span{font-size:10px;color:#a1998d;letter-spacing:0;line-height:1.5}
.proof-scroll{height:42px;width:42px;border:1px solid var(--line);display:grid!important;place-items:center;font-size:21px;gap:0!important}
@keyframes sphere-turn{from{transform:rotateX(-22deg) rotateY(0deg) rotateZ(-12deg)}to{transform:rotateX(-22deg) rotateY(360deg) rotateZ(-12deg)}}
@keyframes satellite-turn{from{transform:rotate(0deg) translateX(141px) rotate(0deg)}to{transform:rotate(360deg) translateX(141px) rotate(-360deg)}}
@media(max-width:900px){.business-proof{gap:18px;grid-template-columns:1.3fr 1fr 1fr}.proof-scroll{display:none!important}.proof-primary strong{font-size:45px}.proof-primary{gap:10px}.scene-3d{height:270px}.hero-art{max-width:320px}}
@media(max-width:620px){.hero-title{padding:0;text-align:center}.title-word{letter-spacing:-.08em;padding-right:.08em}.hero-description h2{font-size:35px}.hero-description p{font-size:13px;line-height:1.7;max-width:100%}.scene-3d{height:254px;perspective:650px}.sphere-hover{scale:.84}.scene-3d::before{width:246px;height:246px}.orbit-dot{animation-name:satellite-mobile}.business-proof{grid-template-columns:1fr 1fr;gap:22px 16px;padding:24px 0}.proof-primary{grid-column:1/-1;justify-content:center;gap:18px;padding-bottom:20px;border-bottom:1px solid var(--line)}.proof-primary strong{font-size:58px}.proof-primary span{font-size:12px}.proof-item b{font-size:11px}.proof-item span{font-size:10px}.hero-art{max-width:280px}.hero-bottom{gap:24px}.art-caption{padding:0;font-size:8px}}
@keyframes satellite-mobile{from{transform:rotate(0deg) translateX(123px) rotate(0deg)}to{transform:rotate(360deg) translateX(123px) rotate(-360deg)}}
@media(prefers-reduced-motion:reduce){.sphere-rotor,.orbit-dot{animation:none}.sphere-rotor{transform:rotateX(-22deg) rotateY(35deg) rotateZ(-12deg)}.sphere-hover{transform:none;transition:none}}

/* 3D motion across the page, with flat readable text and live controls. */
.hero-title{perspective:1000px}
.title-word{animation:title-arrive 1.1s cubic-bezier(.2,.7,.2,1) both;transform-origin:50% 70%}
@keyframes title-arrive{from{transform:rotateX(32deg) translateY(24px);opacity:.35}to{transform:rotateX(0) translateY(0);opacity:1}}
.hero-cube{position:absolute;right:5px;top:4px;width:54px;height:54px;perspective:500px;--cube-size:40px;--cube-half:20px}
.cube-rotor{position:relative;width:var(--cube-size);height:var(--cube-size);transform-style:preserve-3d;animation:cube-turn 15s linear infinite}
.cube-face{position:absolute;inset:0;border:1px solid rgba(234,216,189,.65);background:linear-gradient(135deg,rgba(234,216,189,.09),rgba(234,216,189,.015));backface-visibility:visible}
.face-front{transform:translateZ(var(--cube-half))}.face-back{transform:rotateY(180deg) translateZ(var(--cube-half))}.face-left{transform:rotateY(-90deg) translateZ(var(--cube-half))}.face-right{transform:rotateY(90deg) translateZ(var(--cube-half))}.face-top{transform:rotateX(90deg) translateZ(var(--cube-half))}.face-bottom{transform:rotateX(-90deg) translateZ(var(--cube-half))}
@keyframes cube-turn{from{transform:rotateX(-20deg) rotateY(0) rotateZ(12deg)}to{transform:rotateX(340deg) rotateY(360deg) rotateZ(12deg)}}
.grid{perspective:1400px}
.card{position:relative;transform-style:preserve-3d;transform:perspective(1000px) rotateX(var(--card-x,0deg)) rotateY(var(--card-y,0deg)) translateY(var(--card-lift,0px));transition:transform .35s ease-out;animation:card-drift 8s ease-in-out infinite}
.card:nth-child(2){animation-delay:-2.5s}.card:nth-child(3){animation-delay:-5s}
.card:hover,.card:focus-within{animation:none;--card-lift:-8px}
.thumb{box-shadow:0 10px 30px rgba(0,0,0,.35);transform:translateZ(24px);transition:box-shadow .3s}
.card:hover .thumb{box-shadow:0 22px 45px rgba(0,0,0,.6)}
.thumb::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%),rgba(255,243,223,.2),transparent 55%);opacity:0;transition:opacity .3s}
.card:hover .thumb::before{opacity:1}
.card .meta,.card h3,.card .tags{transform:translateZ(12px)}
@keyframes card-drift{0%,100%{transform:perspective(1000px) rotateX(0deg) rotateY(-1deg) translateY(0)}50%{transform:perspective(1000px) rotateX(1deg) rotateY(1deg) translateY(-5px)}}
.about-motion{display:flex;align-items:center;gap:32px;margin-top:32px;height:150px;color:#a99d8c;font-size:12px;line-height:1.7}
.about-cube{width:120px;height:120px;display:grid;place-items:center;perspective:700px;--cube-size:82px;--cube-half:41px;margin-left:16px}
.about-cube .cube-rotor{animation-duration:22s}
.about-cube .cube-face::after{content:"";position:absolute;inset:15px;border:1px solid rgba(234,216,189,.2)}
.skills-grid{perspective:1000px}
.skill{transform:perspective(700px) rotateX(var(--card-x,0deg)) rotateY(var(--card-y,0deg)) translateY(var(--card-lift,0px));transition:transform .3s,border-color .3s,background .3s}
.skill:hover{--card-lift:-4px;border-color:rgba(234,216,189,.6);background:#191712;box-shadow:0 10px 25px rgba(0,0,0,.3)}
.ctabox{position:relative;isolation:isolate;transform:none;overflow:hidden;background:var(--bg)}
.ctabox h2,.ctalinks{position:relative;z-index:1}
.contact-orbits{position:absolute;right:14%;top:50%;width:180px;height:180px;margin-top:-90px;perspective:800px;opacity:.17;pointer-events:none}
.contact-orbits i{position:absolute;inset:0;border:1px solid var(--cream);border-radius:50%;animation:contact-spin 12s linear infinite;transform-style:preserve-3d}
.contact-orbits i:nth-child(2){inset:15px;animation-duration:16s;animation-direction:reverse}.contact-orbits i:nth-child(3){inset:30px;animation-duration:20s}
@keyframes contact-spin{from{transform:rotateX(55deg) rotateY(0) rotateZ(0)}to{transform:rotateX(55deg) rotateY(360deg) rotateZ(360deg)}}
.motion-offscreen .sphere-rotor,.motion-offscreen .orbit-dot,.motion-offscreen .cube-rotor,.motion-offscreen .card,.motion-offscreen .contact-orbits i{animation-play-state:paused}
@media(max-width:620px){.hero-cube{right:0;top:7px;--cube-size:30px;--cube-half:15px}.about-motion{height:130px;gap:24px}.about-cube{--cube-size:68px;--cube-half:34px;width:100px;height:100px;margin-left:8px}.contact-orbits{right:-30px;opacity:.13}.card{animation-duration:10s}.hero-title{perspective:700px}}
@media(prefers-reduced-motion:reduce){.title-word,.card,.cube-rotor,.contact-orbits i{animation:none!important}.title-word,.card,.skill,.ctabox{transform:none!important}.cube-rotor{transform:rotateX(-20deg) rotateY(30deg) rotateZ(12deg)}}

/* Keep contact controls on a flat layer; isolate decorative motion. */
.hero-actions{position:relative;z-index:2}
.button-primary,.button-secondary,.nav-contact,.ctalinks a{backface-visibility:visible}
.button-secondary{transform:none!important}
.ctalinks{isolation:isolate}
.contact-orbits{z-index:0}

@media(max-width:620px){.mobilebar{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Portrait stays behind live, centered typography. */
.portrait-stage{position:relative;height:340px;margin:26px 0 24px;isolation:isolate}
.portrait-stage::before{content:"";position:absolute;width:480px;height:290px;left:50%;bottom:0;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(234,216,189,.06),transparent 68%);pointer-events:none;z-index:0}
.hero-portrait{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:340px;width:auto;max-width:none;object-fit:contain;z-index:1;pointer-events:none;user-select:none;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 75%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 75%,transparent 100%)}
.portrait-stage .hero-title{position:absolute;bottom:12px;left:0;width:100%;margin:0;z-index:2;perspective:none}
.portrait-stage .title-word{animation:none}
@media(max-width:900px){.portrait-stage{height:310px}.hero-portrait{height:310px}}
@media(max-width:620px){.portrait-stage{height:265px;margin-top:23px;margin-bottom:20px}.hero-portrait{height:265px}.portrait-stage .hero-title{bottom:35px}.portrait-stage::before{width:100%;height:230px}}

/* Larger portrait, keeping navigation and typography clear. */
.portrait-stage{height:400px}
.hero-portrait{height:470px}
@media(max-width:900px){.portrait-stage{height:360px}.hero-portrait{height:405px}}
@media(max-width:620px){.portrait-stage{height:310px}.hero-portrait{height:340px}}