/* Golden Kraken motion and enquiry confirmation. */
:root{--motion-ease:cubic-bezier(.19,1,.22,1)}
body{overflow-x:clip}
::selection{background:#ccb078;color:#0b150e}
.site-motion-mode .hero{min-height:850px;height:100svh;max-height:1200px;isolation:isolate}
.site-motion-mode .hero video{scale:1.025;transition:scale 2.8s var(--motion-ease),filter 1.5s;filter:saturate(.85);object-position:65% center}
.site-motion-mode .hero-content{position:relative;z-index:4;padding-top:clamp(156px,19svh,220px)}
.site-motion-mode .hero-shade{background:linear-gradient(90deg,#07100bf5 0%,#07100bc9 37%,#07100b10 74%),linear-gradient(0deg,#07100b,transparent 45%)}
.site-motion-mode .hero:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at var(--mx,74%) var(--my,42%),#efc57b10 0%,transparent 45%);mix-blend-mode:screen}
.site-motion-mode .hero h1{letter-spacing:-4px!important;font-weight:450;transition:opacity .32s,translate .5s var(--motion-ease),filter .4s}
.site-motion-mode .hero h1.headline-changing{translate:0 18px;filter:blur(7px)}
.site-motion-mode .hero-pagination button[aria-pressed=true] i{box-shadow:0 0 12px #e7c98a66}
.site-motion-mode .hero-pagination button[aria-pressed=true] i:after{content:'';display:block;width:100%;height:100%;background:#fff;opacity:.25;transform-origin:left;animation:claim-progress 2.7s linear both}
.site-motion-mode .header{z-index:25;background:linear-gradient(#07100b40,transparent);border-bottom-color:#d7c28c22}
.site-motion-mode .button{position:relative;isolation:isolate;overflow:hidden;transition:translate .45s var(--motion-ease),background .3s,box-shadow .3s;border-radius:2px}
.site-motion-mode .button.gold{background:linear-gradient(110deg,#c4a267 0%,#eddaab 45%,#d4b775 100%);color:#142014;box-shadow:0 4px 20px #0001}
.site-motion-mode .button.gold:after{content:'';position:absolute;inset:-100% -50%;background:linear-gradient(105deg,transparent 37%,#fff6 50%,transparent 63%);transform:translateX(-100%);transition:transform .8s var(--motion-ease);z-index:-1}
.site-motion-mode .button.gold:hover:after{transform:translateX(90%)}
.site-motion-mode .button:hover{box-shadow:0 7px 30px #0c160c26}
.site-motion-mode .button>span:last-child{transition:transform .4s var(--motion-ease)}
.site-motion-mode .button:hover>span:last-child{transform:translate(3px,-3px)}
.site-motion-mode .hero-offer{width:fit-content;transition:color .3s;border-bottom-color:#b99c6244}
.site-motion-mode .hero-offer:hover{color:#f0ddb2}
.site-motion-mode .hero-bottom{z-index:5}
.site-motion-mode .scroll-down{border-color:#e7c98a55;animation:scroll-nudge 2.5s ease-in-out infinite}
.hero-dust{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.site-motion-mode .discipline-strip{position:relative;overflow:hidden;border-color:#ccb07836}
.site-motion-mode .discipline-strip .asterisk{display:inline-block;animation:slow-turn 18s linear infinite}
.site-motion-mode .case-study{border-radius:6px;box-shadow:0 25px 65px #12271a08;transition:box-shadow .8s,border-color .5s;--case-x:50%;--case-y:50%}
.site-motion-mode .case-study:after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(500px circle at var(--case-x) var(--case-y),#fff2,transparent 65%);opacity:0;transition:opacity .5s}
.site-motion-mode .case-study:hover:after{opacity:1}
.site-motion-mode .case-study:hover{box-shadow:0 30px 75px #142c261a}
.site-motion-mode .case-device{transition:transform .5s var(--motion-ease),filter .6s}
.site-motion-mode .case-visual:hover .case-device{filter:drop-shadow(10px 36px 28px #0b211b55)}
.site-motion-mode .case-traffic .case-visual:hover .case-device{filter:drop-shadow(10px 36px 28px #0009)}
.site-motion-mode .case-floating{animation:case-float 7s ease-in-out infinite}
.site-motion-mode .case-traffic .case-floating{animation-delay:-3s}
.site-motion-mode .case-orbits{animation:orbit-breathe 9s ease-in-out infinite}
.site-motion-mode .services,.site-motion-mode .contact{isolation:isolate;position:relative}
.motion-tendrils{position:absolute;inset:0;z-index:-1;width:100%;height:100%;color:#b89c5a;opacity:.19;pointer-events:none}
.motion-tendrils path{fill:none;stroke:currentColor;stroke-width:.65;vector-effect:non-scaling-stroke;stroke-dasharray:1900;stroke-dashoffset:calc(1900 * (1 - var(--draw,0)));transition:stroke-dashoffset .2s linear}
.site-motion-mode .services{background:radial-gradient(ellipse at 80% 40%,#243a221c,transparent 60%),#101c12}
.site-motion-mode .contact{background:radial-gradient(ellipse at 0% 60%,#21371c55,transparent 55%),#080f0b}
.site-motion-mode .whole-manifesto{position:relative;color:#e0c99b;max-width:100%;padding-bottom:10px}
.site-motion-mode .section-intro h2 em,.site-motion-mode .contact h2 em{color:inherit}
.site-motion-mode .service-tab:hover{padding-left:7px;transition:padding-left .35s var(--motion-ease)}
.site-motion-mode input:focus,.site-motion-mode textarea:focus,.site-motion-mode select:focus{outline:none;border-bottom-color:#e7c98a;box-shadow:0 1px 0 #e7c98a;transition:box-shadow .2s,border-color .2s}
.site-motion-mode .honey+label{margin-top:0}
/* Two beats, then a shared transition into the live hero footage. */
.site-intro {
 position:fixed; inset:0; z-index:1000; display:grid; place-items:center;
 overflow:hidden; pointer-events:none; animation:intro-done 0s 2.34s both;
}
.site-intro::before {
 content:''; position:absolute; inset:0; background:#020202;
 animation:intro-veil 1.12s cubic-bezier(.42,0,.24,1) 1.12s both;
}
.intro-center {
 position:relative;
 animation:intro-flight 1.26s cubic-bezier(.42,0,.19,1) .98s both,
           intro-merge 1.26s ease .98s both;
}
.intro-mark {
 display:block; width:148px; height:155px;
 background:linear-gradient(135deg,#b18948,#f0d59b 48%,#c49a53);
 mask:url('/assets/kraken-mark-small.png') center/contain no-repeat;
 animation:kraken-pulse .98s cubic-bezier(.25,.7,.24,1) both;
}
.intro-skip {
 pointer-events:auto; position:absolute; right:6%; bottom:42px;
 display:flex; align-items:center; gap:24px; font-size:10px;
 color:#ccb078; border:0; background:none; padding:15px; opacity:0;
}
.intro-skip:focus-visible {opacity:1}
.skip-intro .site-intro {display:none}
.intro-running #kraken-cursor {visibility:hidden}
.site-motion-mode.intro-running:not(.motion-calm) .hero-content > * {
 animation:landing-arrive .58s var(--motion-ease) 1.67s both;
}
.site-motion-mode.intro-running:not(.motion-calm) .hero-content > .hero-buttons {animation-delay:1.76s}
.site-motion-mode.intro-running:not(.motion-calm) .hero-content > .hero-offer {animation-delay:1.78s}

/* Project layers follow scroll in either direction. */
.site-motion-mode.motion-scroll-active .case-study.scroll-reveal {
 opacity:1; transform:none; transition-property:box-shadow;
}
.motion-scroll-active .case-copy {
 opacity:calc(.58 + var(--case-arrive,1) * .42);
 translate:0 calc((1 - var(--case-arrive,1)) * 29px);
}
.motion-scroll-active .case-copy:focus-within {opacity:1;translate:none}
.motion-scroll-active .case-visual {--case-depth:112px}
.motion-scroll-active .case-device {
 translate:0 calc(var(--case-travel,0) * var(--case-depth) * -1);
}
.motion-scroll-active .case-floating {
 animation:none;
 translate:0 calc(var(--case-travel,0) * var(--case-depth) * -.68);
}
.motion-scroll-active .case-orbits {
 animation:none;
 translate:0 calc(var(--case-travel,0) * var(--case-depth) * .65);
}
@media(max-width:760px) {
 .motion-scroll-active .case-visual {--case-depth:64px}
 .motion-scroll-active .case-copy {translate:0 calc((1 - var(--case-arrive,1)) * 18px)}
}
/* The Kraken remains a precise pointer, with a native text cursor for fields. */
#kraken-cursor{position:fixed;left:0;top:0;width:30px;height:32px;z-index:2000;pointer-events:none;opacity:0;will-change:transform;transition:opacity .15s}
.cursor-mark{display:block;width:100%;height:100%;background:linear-gradient(135deg,#fff0bf,#c6a364 65%,#ead5a3);mask:url('/assets/kraken-mark-small.png') center/contain no-repeat;filter:drop-shadow(0 1px 2px #000b);transition:scale .2s,filter .2s}
.cursor-glow{position:absolute;inset:-12px;border:1px solid #e5c8814a;border-radius:50%;scale:.65;opacity:0;transition:scale .25s,opacity .25s}
#kraken-cursor.is-link .cursor-mark{scale:1.15;filter:drop-shadow(0 0 7px #d7ba79aa)}
#kraken-cursor.is-link .cursor-glow{scale:1;opacity:1}
#kraken-cursor.is-down .cursor-mark{scale:.8}
@media(hover:hover) and (pointer:fine){.has-kraken-cursor #kraken-cursor.is-visible{opacity:1}.has-kraken-cursor,.has-kraken-cursor a,.has-kraken-cursor button,.has-kraken-cursor summary,.has-kraken-cursor [role=tab]{cursor:none}.has-kraken-cursor input,.has-kraken-cursor textarea{cursor:text}.has-kraken-cursor select{cursor:default}}
.motion-ripple{position:fixed;width:12px;height:12px;margin:-6px;z-index:900;pointer-events:none;border:1px solid #e5c582;border-radius:50%;animation:click-ripple .7s var(--motion-ease) both}
/* The confirmation is a small celebration, with a real, accessible dialog. */
#enquiry-confetti{position:fixed;inset:0;z-index:1600;pointer-events:none;width:100%;height:100%;max-width:none;max-height:none;background:transparent;border:0;padding:0;margin:0}
#enquiry-confetti::backdrop{background:none;pointer-events:none}
.has-kraken-cursor dialog,.has-kraken-cursor dialog *{cursor:auto}
.has-kraken-cursor dialog button{cursor:pointer}
dialog.enquiry-confirmation{position:fixed;inset:0;margin:auto;background:radial-gradient(ellipse at 50% 15%,#26351d,#0b150f 66%);color:#f4eedc;border:1px solid #c3a66b66;border-radius:8px;box-shadow:0 40px 100px #0007;max-height:90svh;overflow:auto}
dialog.enquiry-confirmation{width:min(560px,calc(100vw - 32px));padding:44px 48px 42px;text-align:center}
dialog.enquiry-confirmation[open]{animation:success-arrive .55s var(--motion-ease) both}
dialog.enquiry-confirmation::backdrop{background:#020804c9;backdrop-filter:blur(12px)}
.motion-dialog-close{position:absolute;top:13px;right:15px;width:36px;height:36px;font-size:24px;line-height:1;background:none;color:#b9c1a7;border:1px solid #a9b09233;border-radius:50%;display:grid;place-items:center;z-index:2}
.motion-dialog-close:hover{color:#fff1c7;border-color:#ccb078}
.success-mark-stage{width:150px;height:150px;position:relative;margin:0 auto 26px;display:grid;place-items:center}
.success-orbit{position:absolute;inset:0;border:1px solid #ddbc753b;border-radius:50%;box-shadow:0 0 0 17px #ccb07805,0 0 0 35px #ccb07803}
.success-mark{display:block;width:92px;height:97px;background:linear-gradient(135deg,#b58d4a,#f0dbab 45%,#bf9959);mask:url('/assets/kraken-mark-small.png') center/contain no-repeat;filter:drop-shadow(0 0 16px #d5b16b22)}
.motion-dialog-eyebrow{font-size:8px!important;letter-spacing:2.3px;color:#cbb078!important;margin:0!important}
.enquiry-confirmation h2{font-size:42px;line-height:1.1;letter-spacing:-1.8px;margin:21px 0 17px;font-weight:450}
.motion-dialog-description{font-size:12px!important;line-height:1.85!important;color:#b7c0a8!important;max-width:380px;margin:0 auto!important}
.enquiry-confirmation .button{margin:28px auto 0;display:flex;width:100%;justify-content:space-between}
.motion-calm .hero-content>*{animation:none!important;opacity:1!important}
.motion-calm .hero:after,.motion-calm .hero-dust,.motion-calm .motion-tendrils{display:none}
.motion-calm .case-floating,.motion-calm .case-orbits,.motion-calm .asterisk,.motion-calm .scroll-down{animation:none!important}
.motion-calm .hero video{transform:none!important;scale:1}
.motion-calm .has-scroll-motion,.motion-calm .scroll-reveal{opacity:1!important;transform:none!important;transition:none!important}
.motion-calm .case-device,.motion-calm .case-traffic .case-device{transform:none!important}
.motion-calm .mix-brand-card{animation:none}
.motion-calm .motion-art *,.motion-calm .scene-orbit{animation-play-state:paused!important;transition:none!important}
@keyframes intro-done {to{visibility:hidden}}
@keyframes intro-veil {from{opacity:1}to{opacity:0}}
@keyframes kraken-pulse {
 0%{transform:scale(.92);opacity:.8}
 19%{transform:scale(1.14);opacity:1}
 41%{transform:scale(.93);opacity:.83}
 64%{transform:scale(1.19);opacity:1}
 100%{transform:scale(1);opacity:1}
}
@keyframes intro-flight {
 from{transform:translate3d(0,0,0) scale(1)}
 to{transform:translate3d(var(--intro-x,0px),var(--intro-y,0px),0) scale(var(--intro-scale,3))}
}
@keyframes intro-merge {0%,29%{opacity:1}100%{opacity:0}}
@keyframes landing-arrive{from{opacity:0;translate:0 24px;filter:blur(5px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes claim-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes slow-turn{to{rotate:360deg}}
@keyframes scroll-nudge{50%{translate:0 5px}}
@keyframes case-float{50%{translate:0 -9px}}
@keyframes orbit-breathe{50%{scale:1.04;opacity:.65}}
@keyframes click-ripple{from{scale:.5;opacity:.8}to{scale:8;opacity:0}}
@keyframes success-arrive{from{opacity:0;transform:translateY(24px) scale(.95)}to{opacity:1;transform:none}}
@media(min-width:1600px){.site-motion-mode .hero-content{padding-top:22svh}.site-motion-mode .hero{min-height:950px}}
@media(max-width:1100px){.site-motion-mode .hero{min-height:860px;height:auto}.site-motion-mode .hero-content{padding-top:180px}}
@media(max-width:760px){.site-motion-mode .hero{min-height:860px;height:auto;max-height:none}.site-motion-mode .hero-content{padding-top:145px;padding-bottom:125px}.site-motion-mode .hero h1{letter-spacing:-2px!important}.site-motion-mode .hero video{object-position:67% center;opacity:.9;scale:1}.site-motion-mode .hero-shade{background:linear-gradient(90deg,#061009d9,#07100b50),linear-gradient(0deg,#07100b 0%,#07100b35 60%,#07100b20)}.site-motion-mode .hero .eyebrow{font-size:7px;max-width:245px}.site-motion-mode .hero-pagination{margin-bottom:20px}.site-motion-mode .hero-offer{max-width:300px}.site-motion-mode .case-floating{animation-duration:9s}.intro-mark{width:112px;height:118px}.intro-skip{bottom:30px;right:6%;font-size:9px}dialog.enquiry-confirmation{padding:38px 26px 28px}.enquiry-confirmation h2{font-size:35px}.success-mark-stage{width:120px;height:120px;margin-bottom:24px}.success-mark{width:78px;height:83px}.motion-dialog-description{font-size:11px!important}}
@media(prefers-reduced-motion:reduce){.site-intro{display:none!important}.site-motion-mode .hero-content>*{animation:none!important;opacity:1!important;filter:none!important;translate:none!important}.site-motion-mode .hero:after,.site-motion-mode .hero-dust,.motion-tendrils,#kraken-cursor,#enquiry-confetti{display:none!important}.site-motion-mode .hero{background-image:url('/assets/kraken-hero.webp')}.site-motion-mode .hero video{display:none}.site-motion-mode .case-floating,.site-motion-mode .case-orbits,.site-motion-mode .asterisk,.site-motion-mode .scroll-down{animation:none!important}.site-motion-mode .button,.site-motion-mode .hero h1{transition:none!important}.site-motion-mode .case-device,.site-motion-mode .case-traffic .case-device{transform:none!important}.site-motion-mode .button{translate:none!important}.enquiry-confirmation[open]{animation:none!important}}