/* Bespoke motion and graphic system — Spectrum studio */
:root{--section-space:110px}
.site-header{background:#030d15dc;backdrop-filter:blur(18px)}
.header-inner nav{gap:25px}
.hero-content{padding-top:112px}
.hero h1{font-size:clamp(48px,5.5vw,82px);line-height:1.08;letter-spacing:-.055em}
.hero-copy{width:55%}
.hero-description{max-width:460px;font-size:17px}
.hero-feature{width:35%;top:180px;right:0;box-shadow:0 28px 90px #0009}
.hero-art{opacity:.8}
.hero-intro{display:flex;align-items:center;gap:12px}
.signal-dot{display:inline-block;width:6px;height:6px;background:#a7e6ff;border-radius:50%;box-shadow:0 0 0 5px #7ad5ff10,0 0 18px #7ad5ff}
.orbital-art{position:absolute;z-index:-1;pointer-events:none;right:1%;top:-65px;width:650px;opacity:.5}
.orbital-art svg{display:block;width:100%;overflow:visible}
.orbit-axis{stroke:url(#orbit-gradient);stroke-width:.8;transform-origin:300px 300px}
.orbit-track{stroke:#8ed7ff;stroke-width:.6;stroke-dasharray:2 14;opacity:.45}
.orbit-satellite{transform-origin:300px 300px}
.orbit-label{position:absolute;font-size:8px;letter-spacing:.23em;color:#b8def0}
.orbit-label-one{left:16%;top:25%}.orbit-label-two{right:5%;bottom:24%}
.studio-ribbon{overflow:hidden;border-block:1px solid #264151;background:#071722;padding:24px 0}
.ribbon-track{display:flex;align-items:center;width:max-content;gap:50px;color:#c4dfef}
.ribbon-track span{font-size:clamp(20px,2.6vw,38px);letter-spacing:-.03em;font-weight:300}
.ribbon-track i{font-size:35px;line-height:1;font-style:normal;color:#7accf4}
.concept-section{background:radial-gradient(ellipse at 10% 0,#12314770,transparent 42%),#06111b}
.concept-heading h2{max-width:750px}
.concept-grid{gap:80px 45px;align-items:start}
.concept-card:nth-child(even){margin-top:85px}
.concept-grid.is-filtered .concept-card{margin-top:0}
.concept-image{border-radius:5px;box-shadow:0 18px 45px #0004}
.concept-card{position:relative}
.concept-card:after{content:'';position:absolute;left:0;bottom:-22px;width:100%;height:1px;background:linear-gradient(90deg,#77d0ff70,#77d0ff05);transform:scaleX(.18);transform-origin:left;transition:transform .6s}
.concept-card:hover:after,.concept-card:focus-within:after{transform:scaleX(1)}
.concept-open:hover .concept-image{box-shadow:0 20px 60px #0006,0 0 0 1px #79cbfa50}
.concept-open:hover h3>span{transform:rotate(45deg)}
.concept-card h3>span{transition:transform .4s}
.concept-view{backdrop-filter:blur(10px)}
.section-caption .eyebrow:before{content:'+';margin-right:15px;color:#88d7ff;font-size:15px}
.section-caption{border-bottom:1px solid #638ca22b;padding-bottom:23px}
.services-section{background:radial-gradient(ellipse at var(--light-x,70%) 45%,#16405b40,transparent 65%)}
.service{transition:background .4s;padding-inline:20px;margin-inline:-20px}
.service:hover,.service[open]{background:linear-gradient(90deg,#122c3f80,transparent)}
.service>summary{grid-template-columns:75px 1fr 1fr 25px;padding-block:28px}
.service-symbol{display:flex;align-items:center;position:relative;color:#86d2fa;width:62px;height:64px}
.studio-icon{width:54px;height:54px;transition:transform .5s;filter:drop-shadow(0 0 9px #55bdff30)}
.service-symbol small{position:absolute;bottom:-2px;right:0;font-size:8px;letter-spacing:.1em;color:#799caf}
.service:hover .studio-icon{transform:translateY(-3px) rotate(-5deg)}
.service[open] .studio-icon{color:#d0f0ff}
.service h3{font-size:clamp(23px,2.4vw,35px);font-weight:300}
.service-content>div{padding-left:100px}
.about-art:before,.about-art:after{content:'';position:absolute;border:1px solid #6abfed28;inset:10%;border-radius:50%;transform:rotate(-30deg) scaleY(.6);pointer-events:none}
.about-art:after{transform:rotate(35deg) scaleY(.7);inset:2% 13%}
.about-art img{position:relative;z-index:1}
.timeline li{padding:0 12px 22px 0}
.timeline .step-number{border-radius:14px;transform:rotate(-8deg);background:#0c2130;box-shadow:0 0 0 7px #030d15}
.timeline li:hover .step-number{transform:rotate(0);background:#183e54}
.step-number{transition:transform .5s,background .5s}
.contact-section{background:radial-gradient(ellipse at 90% 40%,#17486b70,transparent 58%),#07141f;padding-block:105px}
.contact-inner{z-index:2}
.contact-inner h2{max-width:850px}
.contact-links{position:static;flex-direction:row;gap:32px;margin-top:40px}
.contact-sculpture{position:absolute;right:2%;top:10%;width:320px;height:320px;opacity:.45;pointer-events:none}
.contact-sculpture span{position:absolute;inset:0;border:1px solid #72cffc70;border-radius:50%;transform:rotateX(55deg) rotate(-30deg)}
.contact-sculpture span:nth-of-type(2){inset:25px;transform:rotateY(55deg) rotate(40deg)}
.contact-sculpture span:nth-of-type(3){inset:50px;transform:rotate(-30deg)}
.contact-arrow{position:absolute;inset:90px;width:140px;height:140px;color:#b2e9ff;filter:drop-shadow(0 0 22px #4ab6ff80)}
.button-light:before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,#7dd5ff90 50%,transparent 75%);transform:translateX(-130%);transition:transform .65s;z-index:-1}
.button-light:hover:before{transform:translateX(130%)}
@media(prefers-reduced-motion:no-preference){
 body:not(.motion-off):not(.tab-paused) .orbit-axis{animation:orbit-turn 45s linear infinite}
 body:not(.motion-off):not(.tab-paused) .orbit-satellite{animation:orbit-turn 18s linear infinite}
 body:not(.motion-off):not(.tab-paused) .ribbon-track{animation:ribbon-slide 38s linear infinite}
 body:not(.motion-off):not(.tab-paused) .contact-arrow{animation:arrow-float 5s ease-in-out infinite}
 .hero-copy>h1>span{animation:line-arrive .95s cubic-bezier(.16,1,.3,1) both}
 .hero-copy>h1>span:nth-child(2){animation-delay:.12s}
 @keyframes orbit-turn{to{transform:rotate(360deg)}}
 @keyframes ribbon-slide{to{transform:translateX(-50%)}}
 @keyframes arrow-float{50%{transform:translate(8px,-8px)}}
 @keyframes line-arrive{from{opacity:0;transform:translateY(26px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
}
.motion-off .ribbon-track,.tab-paused .ribbon-track,.motion-off .orbit-axis,.motion-off .orbit-satellite,.motion-off .contact-arrow{animation:none}
.motion-off .studio-icon,.motion-off .concept-card:after,.motion-off .concept-card h3>span,.motion-off .button-light:before{transition:none}
@media(max-width:1100px){.header-inner{gap:20px}.header-inner nav{gap:18px}.hero h1{font-size:64px}.hero-feature{width:36%;top:195px}.orbital-art{right:-100px;width:600px}.contact-sculpture{right:-60px;opacity:.25}.contact-links{flex-wrap:wrap}}
@media(max-width:760px){:root{--section-space:65px}.hero-content{padding-top:48px}.hero-copy{width:100%}.hero h1{font-size:clamp(40px,11vw,68px)}.hero-description{font-size:15px}.hero-feature{width:88%;top:auto}.orbital-art{top:230px;right:-140px;width:540px;opacity:.4}.studio-ribbon{padding:17px 0}.ribbon-track{gap:25px}.ribbon-track span{font-size:23px}.ribbon-track i{font-size:23px}.concept-grid{gap:44px}.concept-card:nth-child(even){margin-top:0}.concept-card:after{bottom:-18px}.section-caption{padding-bottom:16px}.service>summary{grid-template-columns:44px 1fr 20px;gap:13px}.service-symbol{width:40px;height:48px}.studio-icon{width:38px;height:38px}.service h3{font-size:22px}.service-content>div{padding-left:57px}.service{padding-inline:10px;margin-inline:-10px}.contact-section{padding-block:65px}.contact-links{flex-direction:column;gap:16px}.contact-sculpture{width:230px;height:230px;top:20px;right:-80px;opacity:.16}.contact-arrow{inset:65px;width:100px;height:100px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@keyframes ribbon-slide{to{transform:translateX(calc(-50% - 25px))}}
.studio-ribbon.is-outside .ribbon-track,.hero.is-outside .orbit-axis,.hero.is-outside .orbit-satellite,.contact-section.is-outside .contact-arrow{animation-play-state:paused!important}
@media(max-width:760px){@keyframes ribbon-slide{to{transform:translateX(calc(-50% - 12.5px))}}}