@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url('/assets/fonts/dm-sans-variable.woff2') format('woff2')}
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/manrope-variable.woff2') format('woff2')}
/* Pearl glass, expressive typography, and deliberate motion. */
:root{--ease-out:cubic-bezier(.16,1,.3,1)}
body{overflow-x:clip}
@media(max-width:700px){.hero-art{overflow:clip}}
.reading-progress{height:2px;position:fixed;inset:0 0 auto;background:linear-gradient(90deg,var(--gradient-start),var(--gradient-end));z-index:30;transform-origin:left;transform:scaleX(0);pointer-events:none}
.hero{padding-top:94px;min-height:820px;align-items:center;isolation:isolate}
.hero-copy{position:relative;z-index:2;padding-top:8px}
.hero .eyebrow{letter-spacing:1.8px;font-size:9px}
.hero h1{font-size:clamp(58px,6.1vw,86px);line-height:1.08;letter-spacing:-5px;margin:32px 0 27px;font-weight:600}
.hero h1>[data-bind]{display:inline-block;animation:headline-arrive 1.05s var(--ease-out) both}
.hero h1>[data-bind]:nth-of-type(2){animation-delay:100ms}
.hero h1>[data-bind]:nth-of-type(3){animation-delay:200ms}
.hero-copy>p{max-width:400px;font-size:14px}
.hero-actions{margin-top:34px;gap:25px}
.hero-note{margin-top:30px}
.hero-art{min-height:565px;scale:1;perspective:1100px;isolation:isolate;--pointer-x:0deg;--pointer-y:0deg;--scene-scroll:0px;--scene-turn:0deg}
.hero-art:before{content:'';position:absolute;inset:7% -12%;border-radius:50%;background:radial-gradient(ellipse at 55% 40%,color-mix(in srgb,var(--gradient-start) 18%,transparent),transparent 65%);z-index:-1}
.hero-stage{width:100%;height:100%;position:absolute;inset:0;display:grid;place-items:center;transform:translateY(var(--scene-scroll));transition:transform 120ms linear;transform-style:preserve-3d}
.sculpture-gimbal{width:390px;height:390px;position:relative;transform-style:preserve-3d;transform:rotateX(calc(var(--pointer-y) * -1)) rotateY(var(--pointer-x)) rotateZ(var(--scene-turn))}
.hero-art .glass-sculpture{width:100%;height:100%;border:0;border-radius:0;background:none;box-shadow:none;transform-style:preserve-3d;animation:glass-breathe 10s ease-in-out infinite!important}
.sculpture-ring{position:absolute;inset:15px;border-radius:32%;padding:38px;background:conic-gradient(from 40deg,#ffffffef,color-mix(in srgb,var(--gradient-start) 47%,#fff) 20%,#fff8 37%,color-mix(in srgb,var(--gradient-end) 70%,#fff) 58%,#ffffffd9 73%,color-mix(in srgb,var(--gradient-start) 56%,#fff) 90%,#fff);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;box-shadow:inset 5px 4px 13px white,inset -7px -7px 20px #9167ba66;transform:rotate(-27deg) rotateX(16deg) rotateY(-12deg)}
.sculpture-ring.ring-back{inset:40px 0 0 40px;opacity:.56;transform:translateZ(-46px) rotate(-14deg) rotateY(-19deg);background:conic-gradient(from 80deg,#dab9eea0,#ffd8c6bb,#fff,#b696d8cc,#fff)}
.sculpture-ring.ring-middle{inset:25px 10px 10px 25px;transform:translateZ(-20px) rotate(-20deg) rotateX(5deg);opacity:.82}
.sculpture-ring.ring-front{filter:drop-shadow(2px 3px 1px #fff8)}
.sculpture-core{position:absolute;width:116px;height:116px;left:calc(50% - 58px);top:calc(50% - 58px);border-radius:32px;display:grid;place-items:center;border:1px solid #fff;background:linear-gradient(135deg,#fff9,#ffffff30);box-shadow:inset 0 2px 15px #fff9,0 25px 60px #79629118;transform:translateZ(45px) rotate(-8deg)}
.sculpture-core img{width:72px;opacity:.64;transform:rotate(8deg)}
.sculpture-shadow{position:absolute;width:260px;height:40px;background:radial-gradient(ellipse,#aa7fc32b,transparent 68%);bottom:32px;left:calc(50% - 130px);transform:rotate(-9deg);animation:shadow-breathe 10s ease-in-out infinite}
.hero-art .art-orbit{width:470px;height:390px;left:calc(50% - 235px);top:calc(50% - 195px);border-color:#a887c729;transform:rotate(-25deg);background:none}
.hero-art .orbit-two{width:400px;height:465px;left:calc(50% - 200px);top:calc(50% - 232px);transform:rotate(38deg);border-color:#ffffffc9}
.hero-art .label-one{top:70px;right:-6px;left:auto;transform:rotate(5deg);animation:float-note-one 8s ease-in-out infinite}
.hero-art .label-two{bottom:80px;left:-14px;top:auto;transform:rotate(-5deg);animation:float-note-two 9s ease-in-out infinite}
.hero-art .floating-label{width:max-content;max-width:250px;padding:17px 20px;border-radius:20px;box-shadow:0 18px 55px #8d74a312;background:linear-gradient(120deg,#ffffffe0,#ffffff90);backdrop-filter:blur(12px);font-size:12px}
.hero-art .label-two{right:auto}
.hero-art .floating-label small{font-size:9px;margin-top:5px}
.hero-art .star-one{right:22px;top:320px;font-size:45px;color:var(--gradient-end)}
.hero-art .star-two{left:28px;top:145px;color:var(--gradient-start)}
.hero-art .art-caption{bottom:10px;font-size:8px;letter-spacing:2.5px;opacity:.75}
.scene-index{position:absolute;left:22px;bottom:80px;writing-mode:vertical-rl;font-size:8px;letter-spacing:2px;color:var(--muted);opacity:.55}
.hero-bottom{margin-top:34px;padding:24px 0 26px}
.hero-bottom a .icon-arrow{animation:scroll-cue 2.8s ease-in-out infinite}
.skills-strip{margin-top:38px;letter-spacing:1px;font-size:11px}
.motion-ready .reveal{transition-duration:850ms;transition-timing-function:var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
.project-card{--pointer-x:0deg;--pointer-y:0deg;perspective:1000px;position:relative}
.project-card .project-visual{transform:rotateX(calc(var(--pointer-y) * -1)) rotateY(var(--pointer-x));transition:box-shadow 500ms,border-color 500ms;transform-style:preserve-3d;border:1px solid #ffffffc4;box-shadow:0 12px 40px #85739a0c}
.project-card:hover .project-visual{transform:rotateX(calc(var(--pointer-y) * -1)) rotateY(var(--pointer-x));box-shadow:0 28px 65px #79619222}
.project-card .project-visual:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,20%),#ffffff40,transparent 55%);opacity:0;transition:opacity 350ms}
.project-card:hover .project-visual:after{opacity:1}
.project-card .project-meta h3{transition:color 250ms}
.project-card:hover .project-meta h3{color:var(--accent)}
.project-card .jw-browser picture{display:block;line-height:0}
.project-card .jw-browser img{width:100%;height:auto}
.project-grid{row-gap:40px}
.project-featured .jw-browser{transition:transform 700ms var(--ease-out)}
.project-featured:hover .jw-browser{transform:translateY(-6px)}
.button.primary,.nav-contact{--pointer-x:0px;--pointer-y:0px;transform:translate(var(--pointer-x),var(--pointer-y));transition:box-shadow 350ms,background 350ms;position:relative}
.button.primary:hover{transform:translate(var(--pointer-x),var(--pointer-y));box-shadow:0 15px 35px #49345a24}
.button.primary:active,.nav-contact:active{scale:.97}
.button.primary .icon-arrow{transition:transform 350ms var(--ease-out)}
.button.primary:hover .icon-arrow{transform:translate(3px,-3px)}
.process-card{transition:border-color 350ms,box-shadow 350ms}
.process-card:hover{border-color:#dac8ed;box-shadow:0 15px 40px #a484b912}
body[data-page=home] #contact{min-height:450px;text-align:left;overflow:hidden;display:grid;grid-template-columns:1.3fr .7fr;align-content:center;gap:22px 60px;padding:62px 62px;background:linear-gradient(115deg,#fff9,color-mix(in srgb,var(--gradient-start) 12%,#fff) 50%,color-mix(in srgb,var(--gradient-end) 18%,#fff));border:1px solid #fff;border-radius:32px;position:relative;isolation:isolate}
body[data-page=home] #contact .eyebrow,body[data-page=home] #contact h2,body[data-page=home] #contact>p{grid-column:1;margin:0;position:relative;z-index:1}
body[data-page=home] #contact h2{font-size:clamp(40px,4.5vw,62px);line-height:1.15;letter-spacing:-2.8px}
body[data-page=home] #contact>p{max-width:360px;font-size:13px}
body[data-page=home] #contact>.button{grid-column:1;justify-self:start;width:auto;margin:0}
body[data-page=home] #contact .contact-pending{grid-column:1;text-align:left;margin:0;font-size:10px}
body[data-page=home] #contact .contact-star{display:none}
.contact-glow{position:absolute;inset:-70% -25%;background:radial-gradient(ellipse at 65% 60%,color-mix(in srgb,var(--gradient-end) 35%,transparent),transparent 45%),radial-gradient(ellipse at 35% 55%,color-mix(in srgb,var(--gradient-start) 24%,transparent),transparent 40%);animation:contact-aura 15s ease-in-out infinite;z-index:-1}
.contact-invitation{grid-column:2;grid-row:1/6;align-self:center;width:100%;max-width:290px;min-height:275px;padding:27px;position:relative;border:1px solid #fff;border-radius:26px;background:linear-gradient(130deg,#ffffffb8,#ffffff50);box-shadow:0 20px 65px #916ba61c;backdrop-filter:blur(14px);transform:rotate(7deg);animation:float-note-one 10s ease-in-out infinite;display:flex;flex-direction:column;justify-content:space-between}
.invitation-kicker{font-size:8px;letter-spacing:1.8px;color:var(--muted)}
.invitation-symbol{font-size:64px;color:var(--accent);line-height:1;margin:18px 0}
.contact-invitation strong{font-family:Manrope,sans-serif;font-size:26px;letter-spacing:-1px;font-weight:500;line-height:1.2}
.invitation-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:23px;font-size:10px;color:var(--muted)}
.invitation-bottom .icon-arrow{width:20px;height:20px;color:var(--ink)}
.brief-layout{scroll-margin-top:100px}
.brief-form{box-shadow:0 20px 75px #8f70ab10;border-radius:28px}
.brief-progress>div{height:5px}
.brief-draft{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:16px;margin:-10px 0 24px;color:var(--muted);font-size:10px;line-height:1.6}
.brief-draft button{font-size:10px;border-bottom:1px solid var(--line);padding:3px 0;flex-shrink:0}
.brief-form fieldset{animation:none}
.brief-form legend{font-family:Manrope,sans-serif;letter-spacing:-1px}
.brief-form .choice>span{transition:background 300ms,box-shadow 300ms,border-color 300ms,transform 300ms}
.brief-form .choice input:checked+span{box-shadow:0 4px 20px #b29cc51f;background:linear-gradient(110deg,#f1e8fc,#fff7f3);transform:translateY(-2px)}
.brief-form .choice input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.brief-form input:focus-visible,.brief-form textarea:focus-visible,.brief-form select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.brief-features{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0 25px}
.brief-form .feature-choice{margin:0;position:relative}
.feature-choice input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.feature-choice span{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:99px;background:#fff8;font-size:11px;transition:background 250ms,border-color 250ms,color 250ms}
.feature-choice input:checked+span{background:#e9def7;border-color:#bea0db;color:var(--ink)}
.feature-choice input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.brief-summary{padding:17px 20px;border-radius:16px;background:linear-gradient(110deg,#f0e7fa80,#ffeae480);border:1px solid #fff;margin-bottom:25px}
.brief-summary>span{font-size:9px;letter-spacing:1.2px;color:var(--muted)}
.brief-summary dl{margin:12px 0 0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:11px;line-height:1.6}
.brief-summary dt{color:var(--muted)}
.brief-summary dd{margin:0;text-align:right;overflow-wrap:anywhere}
#brief-step-title:focus{outline:none}
.case-study-dialog .dialog-body h2{font-size:clamp(30px,4vw,48px);letter-spacing:-2px}
.case-section{transition:background 250ms}
.case-section:hover{background:#ffffffa3}
.site-footer-block{position:relative;overflow:hidden}
.site-footer-block:before{content:'';position:absolute;right:-100px;top:-80px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,#e5d4f740,transparent 68%);pointer-events:none}
@keyframes headline-arrive{from{opacity:0;transform:translateY(30px) rotate(1deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes glass-breathe{0%,100%{transform:translateY(8px) rotateZ(-3deg)}50%{transform:translateY(-20px) rotateZ(4deg)}}
@keyframes shadow-breathe{50%{transform:scale(.82) rotate(-9deg);opacity:.65}}
@keyframes float-note-one{50%{transform:translateY(-10px) rotate(3deg)}}
@keyframes float-note-two{50%{transform:translateY(12px) rotate(-2deg)}}
@keyframes contact-aura{50%{transform:translate(5%,3%) rotate(6deg)}}
@keyframes scroll-cue{50%{transform:translateY(4px)}}
.scene-paused *, .experience-paused *{animation-play-state:paused!important}
body.no-motion .hero *,body.no-motion .contact-invitation,body.no-motion .contact-glow{animation:none!important}
body.no-motion .hero-art,body.no-motion .project-card{--pointer-x:0deg!important;--pointer-y:0deg!important;--scene-scroll:0px!important;--scene-turn:0deg!important}
body.no-motion .button.primary,body.no-motion .nav-contact{transform:none!important}
@media(min-width:1400px){.hero{min-height:860px;padding-top:110px}.hero-art{min-height:590px}.sculpture-gimbal{width:420px;height:420px}}
@media(max-width:1050px){.hero{padding-top:90px;min-height:740px}.hero h1{font-size:64px;letter-spacing:-3.7px}.sculpture-gimbal{width:320px;height:320px}.hero-art .art-orbit{width:365px;height:310px;left:calc(50% - 182px);top:calc(50% - 155px)}.hero-art .orbit-two{width:300px;height:365px;left:calc(50% - 150px);top:calc(50% - 182px)}.hero-art .label-one{right:-10px;top:95px}.hero-art .label-two{left:0;bottom:110px}.hero-art .floating-label{padding:14px;font-size:10px}.sculpture-ring{padding:32px}.sculpture-core{width:96px;height:96px;left:calc(50% - 48px);top:calc(50% - 48px)}body[data-page=home] #contact{padding:48px 40px;gap:20px 30px}}
@media(max-width:700px){.hero{padding-top:56px;min-height:0;display:flex;flex-direction:column;align-items:stretch}.hero h1{font-size:clamp(45px,11.8vw,68px);line-height:1.12;letter-spacing:-3.2px;margin:27px 0 22px}.hero .eyebrow{font-size:7px;letter-spacing:1px}.hero-copy>p{font-size:13px}.hero-actions{gap:20px;margin-top:27px}.hero-art{min-height:380px;height:380px;max-width:430px;margin:25px auto 0;transform:none}.sculpture-gimbal{width:285px;height:285px}.sculpture-ring{padding:30px;inset:15px}.sculpture-ring.ring-back{inset:33px 0 0 33px}.sculpture-ring.ring-middle{inset:23px 8px 8px 23px}.sculpture-core{width:86px;height:86px;left:calc(50% - 43px);top:calc(50% - 43px);border-radius:24px}.sculpture-core img{width:55px}.hero-art .floating-label{padding:12px 13px;font-size:9px;backdrop-filter:none;background:#fffdf9dd;border-radius:16px}.hero-art .floating-label small{font-size:8px}.hero-art .label-one{right:0;top:20px}.hero-art .label-two{left:0;bottom:38px}.hero-art .art-caption{bottom:0;font-size:7px}.hero-art .art-orbit{width:315px;height:255px;left:calc(50% - 157px);top:calc(50% - 128px)}.hero-art .orbit-two{width:250px;height:305px;left:calc(50% - 125px);top:calc(50% - 152px)}.hero-art .star-one{top:240px;right:6px;font-size:27px}.hero-art .star-two{left:0;top:110px;font-size:25px}.scene-index{display:none}.sculpture-shadow{bottom:25px;width:190px;left:calc(50% - 95px)}.hero-bottom{margin-top:23px;padding-bottom:20px}.skills-strip{margin-top:25px;overflow:hidden}.project-grid{row-gap:26px}.project-card .project-visual,.project-card:hover .project-visual{transform:none}.project-card .project-visual:after{display:none}body[data-page=home] #contact{display:block;padding:35px 25px;min-height:0;border-radius:26px}body[data-page=home] #contact h2{font-size:39px;letter-spacing:-2px;margin:22px 0 20px}body[data-page=home] #contact>p{margin-bottom:25px}body[data-page=home] #contact .contact-pending{display:block;margin-top:15px}.contact-invitation{margin:36px auto 8px;max-width:250px;min-height:225px;padding:24px;backdrop-filter:none;animation:none;transform:rotate(4deg)}.contact-invitation strong{font-size:24px}.invitation-symbol{font-size:45px;margin:15px 0}.brief-form{border-radius:23px}.brief-features{gap:7px}.feature-choice span{padding:9px 11px;font-size:10px}.brief-summary{padding:15px}.brief-summary dl{font-size:10px;gap:8px 12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero *, .contact-invitation,.contact-glow,.hero-bottom a .icon-arrow{animation:none!important}.hero-stage,.project-card .project-visual,.button.primary,.nav-contact{transform:none!important;transition:none!important}.motion-ready .reveal{transition:none}.brief-progress i{transition:none}}
@media(min-width:701px) and (max-width:1050px){.hero{overflow:clip}.hero h1{font-size:clamp(45px,6.1vw,62px);letter-spacing:-3px}}