/* TheDesignSpider v1.1 — interaction polish. Intentionally layered over site.css.
   All portfolio imagery remains full colour. No extra runtime dependencies. */
:root{--focus:#f5f7f1;--motion-ease:cubic-bezier(.2,.75,.2,1)}
html{scroll-padding-top:calc(var(--header) + 14px)}
body{overscroll-behavior-x:none}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.light-section a:focus-visible,.light-section button:focus-visible,.home-next a:focus-visible,.client-strip a:focus-visible,.work-feature button:focus-visible,.pricing-area button:focus-visible{outline-color:#171a18}
.site-header{transition:background .3s,border-color .3s,box-shadow .3s}
.site-header.is-scrolled{background:rgba(8,10,9,.96);border-color:#ffffff28;box-shadow:0 10px 28px #0000001c}
.nav-link{position:relative}
.nav-link.current:after{content:"";position:absolute;width:4px;height:4px;left:calc(50% - 2px);bottom:3px;border-radius:50%;background:#fff}
.nav-cta,.button,.slider-arrow,.dialog-close,.dock-item,.service-choice{touch-action:manipulation}
.button{position:relative;overflow:hidden;isolation:isolate;transition:transform .3s var(--motion-ease),background .25s,color .25s,box-shadow .3s}
.button:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#ffffff24 48%,transparent 66%);transform:translateX(-160%);transition:transform .6s var(--motion-ease);pointer-events:none}
.button:hover:after{transform:translateX(160%)}
.button:active,.nav-cta:active{transform:scale(.975)}
.button-round,.button>.icon{transition:transform .3s var(--motion-ease)}
.button:hover .button-round,.button:hover>.icon{transform:translate(3px,-2px)}
.button:hover{box-shadow:0 9px 25px #00000015}
.hero-backdrop{transform:translate3d(var(--hero-dx,0px),var(--hero-dy,0px),0);transition:transform .9s var(--motion-ease)}
.hero-display{transform:rotate(3deg) translate3d(var(--art-x,0px),var(--art-y,0px),0);transition:transform .8s var(--motion-ease),box-shadow .5s var(--motion-ease)}
.hero-display:hover{box-shadow:0 50px 125px #00000080}
.hero .web-orbit,.hero .web-diamond{will-change:auto}
.hero-copy .eyebrow{animation:hero-appear .8s .04s var(--motion-ease) both}
.hero-copy h1{animation:hero-appear .9s .14s var(--motion-ease) both}
.hero-copy .hero-sub{animation:hero-appear .9s .26s var(--motion-ease) both}
.hero-copy .hero-buttons{animation:hero-appear .9s .36s var(--motion-ease) both}
.hero-copy .hero-note{animation:hero-appear .9s .44s var(--motion-ease) both}
.hero-display{animation:art-appear 1s .25s var(--motion-ease) both}
@keyframes hero-appear{from{opacity:0;transform:translateY(24px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes art-appear{from{opacity:0;translate:0 22px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}
.page-hero .wrap>*{animation:hero-appear .8s var(--motion-ease) both}
.page-hero .wrap>.kicker{animation-delay:.06s}
.page-hero .wrap>h1{animation-delay:.16s}
.page-hero .wrap>p{animation-delay:.28s}
/* IntersectionObserver only attaches these classes when JS is active. */
.motion-enter{opacity:0;transform:translateY(23px);transition:opacity .75s var(--motion-ease),transform .75s var(--motion-ease)}
.motion-enter.is-visible{opacity:1;transform:none}
/* A short, light-weight transition between actual HTML pages. */
.page-wipe{pointer-events:none;position:fixed;z-index:250;inset:0;background:#101211;color:#fff;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
.page-wipe.active{visibility:visible;opacity:1;transition:opacity .25s ease,visibility 0s}
.page-wipe-mark{display:flex;align-items:center;gap:13px;font-size:clamp(16px,3vw,22px);letter-spacing:-.07em;font-weight:650}
.page-wipe-mark svg{width:35px;height:35px}
.page-wipe-dot{height:5px;width:5px;border-radius:50%;background:white;animation:wipe-pulse .5s ease infinite alternate}
@keyframes wipe-pulse{from{opacity:.2}to{opacity:1}}
/* Service selector: preserve native dialog keyboard and focus management. */
.starter-dialog{background:rgba(9,12,11,.83);background-image:radial-gradient(circle at 94% 12%,#2b302d96 0%,transparent 42%);}
.starter-window{position:relative}
.starter-head{position:sticky;top:0;z-index:3;padding:5px 0 10px;background:linear-gradient(#111413ef 0%,#111413dc 65%,transparent 100%)}
.dialog-close{transition:transform .25s var(--motion-ease),background .2s}
.dialog-close:hover{transform:rotate(90deg)}
.service-choice{transition:background .24s,border-color .24s,transform .24s var(--motion-ease),box-shadow .24s}
.service-choice:hover{transform:translateY(-2px)}
.service-choice:active{transform:scale(.99)}
.service-choice.selected{box-shadow:inset 0 0 0 1px #fff;transform:none}
.service-choice.selected .choice-mark{color:#101211;font-weight:700}
.service-choice.selected .choice-mark:before{content:"✓";display:inline-block;font-size:13px;margin-right:12px;vertical-align:middle}
.starter-status-block{display:grid;gap:8px}
.starter-selected-label{margin:0;font-size:12px;color:#ecefeb;letter-spacing:.02em}
.starter-bottom .button{min-width:225px}
.starter-dialog:focus{outline:0}
.starter-dialog .service-choice:focus-visible{outline-color:#fff;outline-offset:3px}
/* Mobile navigation: clear touch targets, stronger active state and a tiny status marker. */
@media (max-width:800px){
 .mobile-dock{padding:8px;bottom:max(12px,env(safe-area-inset-bottom));border-color:#ffffff35;box-shadow:0 11px 42px #00000069,0 1px 0 #ffffff12 inset}
 .dock-item{position:relative;min-height:54px;transition:background .22s,color .22s,transform .22s var(--motion-ease)}
 .dock-item:active{transform:scale(.94)}
 .dock-item.current{box-shadow:0 2px 9px #0000002b inset}
 .dock-item.current:before{content:"";position:absolute;top:5px;right:calc(50% - 17px);width:4px;height:4px;border-radius:50%;background:#111413}
 .hero-display{transform:translate3d(0,0,0)}
 .work-stepper{margin-top:18px}
 .work-stepper .work-progress-track{max-width:none}
}
/* Gallery progress: horizontal on desktop, native swipe gestures on phones. */
.work-stepper{display:flex;align-items:center;gap:20px;justify-content:space-between;margin-top:5px;flex:none}
.work-progress-track{width:100%;max-width:430px;height:3px;background:#cfd2cb;border-radius:99px;overflow:hidden}
.work-progress-track>span{display:block;width:33.333%;height:100%;background:#1b211e;border-radius:99px;transition:width .4s var(--motion-ease)}
.work-pagination{display:flex;align-items:center;gap:5px}
.work-dot{background:none;border:1px solid transparent;color:#90948f;min-width:31px;height:31px;border-radius:50%;font-size:10px;font-weight:750;transition:background .2s,color .2s,border-color .2s}
.work-dot:hover,.work-dot.is-current{color:#101310;background:#dce0d9;border-color:#aeb6ab}
.slider-arrow:disabled{opacity:.35;cursor:not-allowed}
.work-feature .work-bottom{margin-top:8px}
@media (max-width:600px){
 .hero-copy h1{animation-duration:.75s}
 .hero-display{animation-duration:.8s}
 .work-stepper{width:calc(100% - 38px);gap:14px;flex-wrap:nowrap;margin-top:17px}
 .work-progress-track{height:3px;flex:1}
 .work-pagination{gap:3px}
 .work-dot{min-width:28px;height:29px;font-size:9px}
 .starter-dialog{height:100dvh;overscroll-behavior:contain}
 .starter-window{width:calc(100% - 34px);padding-top:16px;min-height:100dvh}
 .starter-head{padding:8px 0 12px}
 .starter-title{margin:16px 0 18px}
 .starter-title h2{font-size:clamp(47px,12vw,69px)}
 .service-choices{gap:7px}
 .service-choice{min-height:79px;padding:12px 14px}
 .choice-main{gap:5px}
 .starter-bottom{padding-top:17px;gap:9px}
 .starter-bottom .button{min-height:55px}
 .starter-selected-label{font-size:11px}
}
@media (hover:none){.button:hover,.service-choice:hover{transform:none}.button:hover:after{transform:translateX(-160%)}}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
 .hero-backdrop{transform:none}.hero-display{transform:none}.motion-enter{opacity:1;transform:none}
 .page-wipe{transition:none!important}
}

/* Keep the sticky desktop gallery below the fixed-height navigation header. */
@media (min-width:801px){.work-pin{top:var(--header);height:calc(100svh - var(--header))}}