@view-transition{navigation:auto}::view-transition-old(root){animation:depart .24s ease both}::view-transition-new(root){animation:arrive .4s ease both}@keyframes depart{to{opacity:0;transform:translateY(-8px)}}@keyframes arrive{from{opacity:0;transform:translateY(12px)}}
:root{--page-progress:0;--hero-drift:0px;--hero-turn:0deg;--reveal-ease:cubic-bezier(.2,.75,.2,1)}
.scroll-progress{position:fixed;z-index:110;inset:0 auto auto 0;width:100%;height:3px;background:var(--accent);transform:scaleX(var(--page-progress));transform-origin:left;pointer-events:none;box-shadow:0 0 15px var(--accent)}
.mark{position:relative;overflow:visible;box-shadow:0 4px 12px #11253312;transition:transform .4s var(--reveal-ease),box-shadow .4s}.mark .newBrandMark{width:35px;height:35px}.brand:hover .mark{transform:rotate(-9deg) scale(1.07);box-shadow:0 8px 24px #11253325}.brand .newBrandMark path{transition:opacity .4s}.brand:hover .newBrandMark path:first-child{opacity:1}.newBrandMark{filter:drop-shadow(0 2px 5px #09261a15)}
@media(min-width:901px){body:not(:has(.fullsample)) header{position:sticky;top:0;z-index:40;transition:box-shadow .3s,background .3s}body.is-scrolled:not(:has(.fullsample)) header{box-shadow:0 8px 24px #111c250c}body.is-scrolled .nav{min-height:78px}.nav{transition:min-height .3s}}
.navlinks a{position:relative}.navlinks a:after{content:"";position:absolute;bottom:-6px;left:0;right:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s}.navlinks a:hover:after,.navlinks a[aria-current="location"]:after{transform:scaleX(1)}
.btn{position:relative;isolation:isolate;overflow:hidden;transition:transform .3s var(--reveal-ease),box-shadow .3s,filter .3s}.btn:after{content:"";position:absolute;z-index:-1;inset:-100% -40%;background:linear-gradient(110deg,transparent 38%,#ffffff28 50%,transparent 62%);transform:translateX(-65%);transition:transform .65s}.btn:hover:after{transform:translateX(65%)}.btn:hover{box-shadow:0 9px 28px #0c29251d;transform:translateY(-3px)}.btn:active{transform:translateY(0)}.switcher a{transition:background .3s,transform .3s}.switcher a:hover{transform:translateY(-2px)}
.motion-ready .reveal{opacity:0;transform:translate3d(0,32px,0);transition:opacity .75s var(--reveal-ease),transform .85s var(--reveal-ease);transition-delay:var(--reveal-delay,0ms)}.motion-ready .reveal.is-visible{opacity:1;transform:translate3d(0,0,0)}.motion-ready .hero .copy{animation:copy-in .8s var(--reveal-ease) both}.motion-ready .hero .visual{animation:visual-in 1s var(--reveal-ease) both;animation-delay:.12s}@keyframes copy-in{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}@keyframes visual-in{from{opacity:0;scale:.94}to{opacity:1;scale:1}}
.visual{transform:translate3d(0,var(--hero-drift),0);transition:border-color .4s;background-position:center;perspective:1100px}.visual:before{mask-image:radial-gradient(ellipse,#000,transparent 75%)}.sitepreview{transition:transform .6s var(--reveal-ease),box-shadow .6s;transform:translate3d(var(--tilt-x,0px),var(--tilt-y,0px),0) rotate(calc(-3deg + var(--hero-turn))) rotateY(var(--tilt-angle,0deg));will-change:transform}.sitepreview:hover{box-shadow:0 35px 65px #102b3535}.phone{transition:transform .7s var(--reveal-ease);transform:translateY(calc(var(--hero-drift) * -.75)) rotate(5deg)}.floatcard{transition:transform .6s var(--reveal-ease),box-shadow .4s}.floatcard.top{transform:translateY(calc(var(--hero-drift) * -.5))}.floatcard.bottom{transform:translateY(calc(var(--hero-drift) * .5))}.visual:hover .floatcard.top{transform:translateY(-6px)}.visual:hover .floatcard.bottom{transform:translateY(6px)}
.proof{position:relative}.proof b span{transition:transform .4s,color .4s;display:inline-block}.proof b:hover span{transform:translateY(-4px) rotate(-7deg);color:var(--primary)}.step,.plan{transition:transform .35s var(--reveal-ease),box-shadow .35s,border-color .35s}.step:hover,.plan:hover{transform:translateY(-7px);box-shadow:0 18px 45px #132f2910;border-color:var(--muted)}.step .num{transition:background .35s,color .35s,transform .35s}.step:hover .num{background:var(--ink);color:var(--bg);transform:rotate(-5deg)}.socialpost{transition:transform .45s var(--reveal-ease),box-shadow .45s;transform-origin:center}.socialpost:hover{transform:translateY(-8px) rotate(-3deg);box-shadow:0 20px 28px #071b242b}.socialpost:nth-child(2):hover{transform:translateY(16px) rotate(3deg)}.socialpost:nth-child(3):hover{transform:translateY(-4px) rotate(1deg)}.sampleart svg{transition:transform .6s var(--reveal-ease)}.sitepreview:hover .sampleart svg,.samplecards article:hover .sampleart svg{transform:translateY(-5px) scale(1.035)}
.featureblock{position:relative;overflow:hidden;isolation:isolate}.featureblock:before{content:"";z-index:-1;pointer-events:none;position:absolute;inset:-40%;background:radial-gradient(ellipse at 60% 50%,#ffffff0b,transparent 55%);transform:translateY(calc(var(--hero-drift) * -2))}.request{transition:box-shadow .4s,border-color .4s}.request.plan-selected{animation:plan-glow .9s ease}@keyframes plan-glow{50%{box-shadow:0 0 0 6px var(--accent)}}.form input,.form textarea,.form select{transition:box-shadow .25s,border-color .25s}.form input:focus,.form textarea:focus,.form select:focus{box-shadow:0 0 0 4px var(--soft)}.faq details[open] p{animation:answer-in .35s ease}@keyframes answer-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}.faq summary:after{transition:transform .3s}.faq summary:hover:after{transform:rotate(90deg)}dialog[open]{animation:dialog-in .3s var(--reveal-ease)}@keyframes dialog-in{from{opacity:0;transform:translateY(15px) scale(.98)}to{opacity:1;transform:none}}
/* Signal: precise depth, soft green spotlights, and a moving grid. */
body[data-design="1"] .visual{background:radial-gradient(ellipse at calc(40% + var(--spot-x,0%)) calc(35% + var(--spot-y,0%)),#d3ebbb,transparent 68%),var(--hero)}body[data-design="1"] .hero h1 em{background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 94% / 100% 15%;text-decoration:none}body[data-design="1"] .step:before{content:"";display:block;height:2px;background:var(--accent);width:0;transition:width .5s;margin-bottom:20px}body[data-design="1"] .step:hover:before{width:100%}
/* Afterglow: a drifting aurora and panels with violet edge light. */
body[data-design="2"] .hero{position:relative;isolation:isolate}body[data-design="2"] .hero:before{content:"";position:absolute;z-index:-1;top:-20%;left:-15%;right:-15%;height:85%;pointer-events:none;background:radial-gradient(ellipse at 35% 55%,#7f54e326,transparent 50%),radial-gradient(ellipse at 75% 20%,#51d8b218,transparent 48%);filter:blur(30px);transform:translateY(calc(var(--hero-drift) * -2))}body[data-design="2"] .sitepreview{transform:translate3d(var(--tilt-x,0px),var(--tilt-y,0px),0) rotate(calc(-2deg + var(--hero-turn))) rotateY(var(--tilt-angle,0deg))}body[data-design="2"] .visual{border-color:#74609180;box-shadow:0 0 65px #8e62dc12,inset 0 1px 0 #cfb8ff25}body[data-design="2"] .step:hover,body[data-design="2"] .plan:hover{border-color:#b9a4ff;box-shadow:0 0 35px #936ce518}body[data-design="2"] .sectionhead h2{background:linear-gradient(100deg,#f3f0ff 35%,#b9a4ff 85%);background-clip:text;color:transparent}
/* Mainstreet: postcards lift, blue lines draw, and the sample artwork floats. */
body[data-design="3"] .sitepreview{transform:translate3d(var(--tilt-x,0px),var(--tilt-y,0px),0) rotate(calc(3deg + var(--hero-turn))) rotateY(var(--tilt-angle,0deg))}body[data-design="3"] .phone{transform:translateY(calc(var(--hero-drift) * -.75)) rotate(-5deg)}body[data-design="3"] .sectionhead{position:relative}body[data-design="3"] .sectionhead:after{content:"";position:absolute;bottom:-13px;left:0;width:70px;height:3px;background:#e50914;transform:scaleX(0);transform-origin:left;transition:transform 1s .25s}body[data-design="3"] .sectionhead.is-visible:after{transform:scaleX(1)}body[data-design="3"] .step:hover .num{background:transparent;color:#e50914;transform:translateX(8px)}
.samplehero>.sampleart{transition:transform .5s}.samplehero>.sampleart:hover{transform:rotate(-2deg)}.fullsample .samplecards article{transition:transform .4s}.fullsample .samplecards article:hover{transform:translateY(-6px)}
@media(max-width:650px){.visual{transform:translateY(calc(var(--hero-drift) * .35))}.floatcard.top,.floatcard.bottom{transform:none}.phone{transform:rotate(5deg)}.motion-ready .reveal{transform:translateY(20px);transition-duration:.65s}.mark .newBrandMark{width:29px;height:29px}.step:hover,.plan:hover{transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.visual,.sitepreview,.phone,.floatcard,.reveal,.step,.plan,.socialpost{transform:none!important}.motion-ready .reveal{opacity:1!important}.scroll-progress{display:none}::view-transition-old(root),::view-transition-new(root){animation:none!important}}
@media(hover:hover){.motion-ready .step.is-visible:hover,.motion-ready .plan.is-visible:hover{transform:translateY(-7px)}.motion-ready .samplecards article.is-visible:hover{transform:translateY(-6px)}}
/* A browser window with its missing panel being filled: the service in one mark. */
.mark .completionLogo{width:37px;height:35px;overflow:visible}.completionLogo .completionTile{transform:translate(0,0);transition:transform .45s var(--reveal-ease)}.brand:hover .completionLogo .completionTile{transform:translate(-6px,3px)}body[data-design="2"] .completionLogo .completionTile path{stroke:#b9a4ff}body[data-design="3"] .completionLogo .completionTile path{stroke:#e50914}.brand:hover .completionLogo>path:first-child{opacity:1}@media(max-width:650px){.mark .completionLogo{width:32px;height:30px}}@media(prefers-reduced-motion:reduce){.completionLogo .completionTile{transform:none!important}}