/* Motion follows attention; copy and native navigation remain stable. */
:root{--ease-out:cubic-bezier(.22,1,.36,1)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--orange);outline-offset:6px}
.reading-progress{position:fixed;inset:0 0 auto;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;z-index:20;pointer-events:none}
.hero-image{isolation:isolate;clip-path:inset(var(--aperture,0%) round var(--curve,0px))}
.hero-image img{animation:none;transform:scale(1.045) translateY(var(--image-drift,0px));transition:none}
.hero-shutters{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);z-index:4;pointer-events:none}
.hero-shutters i{background:var(--bg);transform-origin:top;animation:shutter-open 1.05s var(--ease-out) both;animation-delay:calc(var(--i)*65ms);border-right:1px solid #d6532526}
.hero-shutters i:nth-child(even){transform-origin:bottom}
@keyframes shutter-open{from{transform:scaleY(1)}to{transform:scaleY(0)}}
.hero-map{position:absolute;inset:9%;z-index:1;pointer-events:none;opacity:.75}
.hero-map svg{width:100%;height:100%;overflow:visible}
.hero-map path{fill:none;stroke:#f5f4e9;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:var(--route,1)}
.hero-map circle{fill:var(--orange);stroke:#f5f4e9;stroke-width:2;vector-effect:non-scaling-stroke}
.hero-map .map-ring{fill:none;stroke:#f5f4e9;stroke-width:1;opacity:.65}
.work-section,.about,.contact{position:relative;isolation:isolate}
.work-section:before,.about:before,.contact:before{content:'';position:absolute;top:-1px;left:0;width:100%;height:34px;background:var(--bg);clip-path:polygon(0 0,100% 0,100% 100%,0 0);transform:scaleY(var(--seam,1));transform-origin:top;pointer-events:none;z-index:-1}
.about:before{height:46px;clip-path:polygon(0 0,100% 0,0 100%)}
.contact:before{height:34px}
.about:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#cee0d60b 1px,transparent 1px),linear-gradient(90deg,#cee0d60b 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,#000,transparent 75%)}
.section-head h2,.faq-title h2,.contact h2{position:relative}
.section-head h2:after,.faq-title h2:after,.contact h2:after{content:'';display:block;width:52px;height:3px;background:var(--orange);margin-top:20px;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out)}
.in-view h2:after,h2.in-view:after{transform:scaleX(1)}
.project-preview{transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .5s var(--ease-out),box-shadow .5s;transform-origin:50% 50%;border:1px solid #153e4014}
.project-card:hover .project-preview,.project-card:focus-visible .project-preview{box-shadow:0 18px 36px -24px #153e4099}
.project-preview:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(280px circle at var(--light-x,50%) var(--light-y,50%),#ffffff24,transparent 75%);opacity:0;transition:opacity .4s}
.project-card:hover .project-preview:after{opacity:1}
.project-card .preview-open{overflow:hidden;transition:background .3s,color .3s;z-index:2}
.project-card:hover .preview-open,.project-card:focus-visible .preview-open{background:var(--orange);color:white}
.project-card:hover img{transform:none}
.browser-bar{position:relative;z-index:1}
.step{position:relative;border-top-color:var(--line)}
.step:before{content:'';position:absolute;top:-2px;left:0;width:100%;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .85s var(--ease-out);transition-delay:var(--step-delay,0ms)}
.step:after{content:'';position:absolute;top:-5px;left:0;width:8px;height:8px;border-radius:50%;background:var(--orange);transform:scale(0);transition:transform .4s var(--ease-out);transition-delay:var(--step-delay,0ms)}
.step.in-view:before{transform:scaleX(1)}.step.in-view:after{transform:scale(1)}
.button{position:relative;overflow:hidden;isolation:isolate}
.button:before{content:'';position:absolute;inset:0;background:var(--ink);clip-path:circle(0 at var(--button-x,85%) var(--button-y,50%));transition:clip-path .6s var(--ease-out);z-index:-1}
.button:hover:before,.button:focus-visible:before{clip-path:circle(150% at var(--button-x,85%) var(--button-y,50%))}
.button:hover{transform:none;background:var(--orange)}
.button span{transition:transform .4s var(--ease-out)}.button:hover span{transform:translate(3px,-3px)}
.price-card{transition:box-shadow .35s}.price-card:hover,.price-card:focus-within{box-shadow:inset 0 3px var(--orange)}
summary:after{transition:transform .3s var(--ease-out)}details[open] summary:after{transform:rotate(180deg)}
details[open] p{animation:answer-open .45s var(--ease-out)}
@keyframes answer-open{from{opacity:.3;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(hover:none){.project-preview{transform:none!important}.project-preview:after{display:none}}
@media(max-width:650px){.hero-map{inset:15% 8%}.work-section:before,.about:before,.contact:before{height:20px}.hero-shutters{grid-template-columns:repeat(7,1fr)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-image{clip-path:none}.hero-image img{transform:none}.hero-shutters,.hero-map{display:none}.step:before{transform:scaleX(1)}.step:after{transform:scale(1)}.section-head h2:after,.faq-title h2:after,.contact h2:after{transform:scaleX(1)}.project-preview{transform:none!important}*,*:before,*:after{animation:none!important;transition:none!important}}
@supports(background-clip:text){
@media(prefers-reduced-motion:no-preference){h1 em{color:transparent;background:linear-gradient(100deg,var(--teal) 35%,var(--orange) 48%,var(--teal) 61%);background-size:300% 100%;background-position:100% 0;background-clip:text;-webkit-background-clip:text;animation:ink-discovery 2.1s var(--ease-out) .25s both}}
}
@keyframes ink-discovery{from{background-position:100% 0}to{background-position:0% 0}}
.hero-image .image-label{right:max(25px,3.3%)}
.hero-image .image-caption{left:max(30px,3.3%)}
@media(max-width:650px){.hero-image .image-label{right:18px}.hero-image .image-caption{left:18px}}