
/* ShopWordWeb Studio 14 | Lightswind UI native port: Scroll Timeline, 3D Perspective Card, Interactive Cards */
:root{--sww14-ease:cubic-bezier(.22,1,.36,1)}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{overflow-x:clip}
body main :is(h1,h2,h3){text-wrap:balance}
body main :is(p,li){text-wrap:pretty}
body .nav{z-index:1001!important}
body .navin{box-shadow:0 18px 48px #0004,inset 0 1px #fff5!important}
body .nav .logo img{object-fit:contain}
body .nav :is(a,button):focus-visible{outline:2px solid #fff;outline-offset:4px}
body main :is(a,button,input,select,textarea):focus-visible{outline:3px solid #999;outline-offset:3px}
body :is(.hero,.swwHeroB){position:relative;isolation:isolate;overflow:hidden}
body :is(.hero,.swwHeroB):before{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 85% 22%,#ffffff28,transparent 38%),radial-gradient(ellipse at 20% 80%,#9999991f,transparent 40%);animation:sww14Aurora 18s ease-in-out infinite alternate}
body :is(.hero,.swwHeroB)>*{position:relative;z-index:1}
body :is(.hero,.swwHeroB) h1{letter-spacing:-.072em!important;line-height:1.04!important}
body .swwV4Showcase{position:relative;isolation:isolate}
body .swwV4Showcase:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle at var(--sx,70%) var(--sy,30%),#ffffff20,transparent 38%);mix-blend-mode:screen}
body .swwV4Showcase>*{position:relative;z-index:1}
body .sww13ServicesLinkMap{background:linear-gradient(#f2f2f2,#fff)!important}
body main :is(.service,.card,.systemRow,.sww13ServicesGrid>a,.workCard){transform-style:preserve-3d;transition:transform .4s var(--sww14-ease),box-shadow .4s!important}
@media(hover:hover) and (pointer:fine){body main :is(.service,.card,.systemRow,.sww13ServicesGrid>a,.workCard):hover{transform:translateY(-6px) perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))!important;box-shadow:0 24px 56px #0002!important}}
body .sww7HangingSection{background:linear-gradient(130deg,#080809,#252528)!important}
body .sww7HangingSection :is(.sww7HangingEyebrow,.sww7IdentityIntro h2 em){color:#fff!important}
.sww14Progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:2147483000;background:#f5f5f5;transform-origin:left;transform:scaleX(0);pointer-events:none}
.sww14Top{position:fixed;right:20px;bottom:20px;z-index:1000;width:46px;height:46px;border-radius:16px;border:1px solid #ffffff4d;background:#171719;color:#fff;font-size:22px;cursor:pointer;box-shadow:0 12px 32px #0004;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .25s,transform .25s}
.sww14Top.visible{opacity:1;pointer-events:auto;transform:none}
.sww14Reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--sww14-ease),transform .7s var(--sww14-ease)}
.sww14Reveal.visible{opacity:1;transform:none}
/* Interactive agency cockpit: perspective and accessible controls */
.sww14Cockpit{position:relative;isolation:isolate;overflow:hidden;background:#101012;color:#fff;padding:clamp(65px,8vw,115px) 0}
.sww14Cockpit:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 75% 22%,#ffffff22,transparent 40%),linear-gradient(90deg,#ffffff0a 1px,transparent 1px),linear-gradient(#ffffff0a 1px,transparent 1px);background-size:auto,64px 64px,64px 64px}
.sww14CockpitInner{position:relative;display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(35px,6vw,90px);align-items:center;width:min(1240px,calc(100% - 44px));margin:auto}
.sww14Eyebrow{display:inline-flex;align-items:center;gap:12px;font:800 10px ui-monospace,monospace;letter-spacing:.15em;text-transform:uppercase;color:#bcbcbc}
.sww14Eyebrow:before{content:"";width:26px;height:1px;background:currentColor}
.sww14Cockpit h2{font-size:clamp(39px,5.6vw,79px);line-height:1.03;letter-spacing:-.077em;color:#fff;margin:23px 0}
.sww14Cockpit h2 em{font:italic 400 1em Georgia,serif;color:#aaa}
.sww14CockpitCopy>p{color:#bcbcbc;font-size:clamp(14px,1.3vw,17px);line-height:1.85;max-width:550px}
.sww14Tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:30px 0}
.sww14Tabs button{display:flex;align-items:center;gap:12px;text-align:left;min-height:64px;padding:14px 17px;border:1px solid #ffffff36;border-radius:17px;background:#ffffff0a;color:#ddd;cursor:pointer;transition:background .25s,transform .25s}
.sww14Tabs button:hover{transform:translateY(-2px);background:#ffffff18}
.sww14Tabs button[aria-pressed=true]{background:#f5f5f5;border-color:#fff;color:#171717}
.sww14Tabs button span{font:800 10px ui-monospace,monospace;opacity:.55}
.sww14Tabs button strong{font-size:14px}
.sww14Explore{color:#fff;text-decoration:none;font-weight:750;border-bottom:1px solid #fff8;padding-bottom:8px}
.sww14Visual{min-height:450px;display:grid;place-items:center;perspective:1100px}
.sww14Screen{position:relative;width:min(450px,95%);aspect-ratio:1.12;transform-style:preserve-3d;transform:rotateY(var(--ty,-14deg)) rotateX(var(--tx,9deg));transition:transform .45s var(--sww14-ease)}
.sww14Screen:before,.sww14Screen:after{content:"";position:absolute;inset:8%;border:1px solid #ffffff55;border-radius:30px;transform:translate3d(13px,13px,-42px);background:#252527}
.sww14Screen:after{transform:translate3d(24px,24px,-77px);background:#38383b}
.sww14Display{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;gap:16px;padding:clamp(23px,3vw,35px);border:1px solid #ffffff6b;border-radius:30px;background:linear-gradient(145deg,#38383b,#111113 70%);box-shadow:0 35px 90px #0009,inset 0 1px #ffffff35}
.sww14DisplayTop{display:flex;justify-content:space-between;gap:10px;font:750 10px ui-monospace,monospace;letter-spacing:.1em;color:#c9c9c9}
.sww14DisplayArt{flex:1;min-height:140px;position:relative;display:grid;place-items:center}
.sww14DisplayArt:before,.sww14DisplayArt:after{content:"";position:absolute;width:54%;aspect-ratio:1;border:1px solid #ffffff4f;border-radius:28%;transform:rotate(45deg)}
.sww14DisplayArt:after{width:40%;transform:rotate(-23deg)}
.sww14DisplayArt strong{position:relative;z-index:1;font-size:clamp(30px,4vw,53px);letter-spacing:-.075em;color:#fff}
.sww14DisplayBottom{border-top:1px solid #ffffff33;padding-top:18px}
.sww14DisplayBottom strong{font-size:clamp(18px,2vw,25px);letter-spacing:-.04em}
.sww14DisplayBottom p{color:#bbb;font-size:12px;line-height:1.65;margin:8px 0 0}
/* Lightswind Scroll Timeline — 8 source-backed stages, scroll-progress comet */
body.sww14ProcessReady .sww13ProcessExperience{display:none!important}
.sww14Journey{position:relative;overflow:clip;background:#f5f5f5;color:#171719;padding:clamp(75px,8vw,130px) 0}
.sww14Journey:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 80% 10%,#fff,transparent 42%),repeating-linear-gradient(90deg,transparent 0,transparent 79px,#00000008 80px)}
.sww14Wrap{width:min(1230px,calc(100% - 44px));margin:auto;position:relative}
.sww14Intro{max-width:900px;margin-bottom:75px}
.sww14Intro h2{font-size:clamp(42px,6.5vw,90px);letter-spacing:-.075em;line-height:1.04;margin:21px 0}
.sww14Intro h2 em{font:italic 400 1em Georgia,serif;color:#888}
.sww14Intro p{color:#666;line-height:1.85;font-size:clamp(15px,1.5vw,18px);max-width:640px}
.sww14Counter{font:800 11px ui-monospace,monospace;color:#777;margin-top:22px}
.sww14Counter strong{font-size:24px;color:#141414}
.sww14Timeline{position:relative}
.sww14Rail{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:#d1d1d1}
.sww14Fill{width:100%;height:0;background:#191919;box-shadow:0 0 12px #0003}
.sww14Comet{position:absolute;top:var(--progress,0%);left:50%;width:16px;height:16px;border:3px solid #f5f5f5;border-radius:50%;background:#111;box-shadow:0 0 0 5px #0002;transform:translate(-50%,-50%)}
.sww14Step{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center;min-height:305px;margin-bottom:48px;opacity:.46;transition:opacity .4s}
.sww14Step:nth-of-type(odd) .sww14Card{grid-column:1}
.sww14Step:nth-of-type(even) .sww14Card{grid-column:2}
.sww14Step.active,.sww14Step.past{opacity:1}
.sww14Dot{position:absolute;z-index:2;left:50%;top:50%;width:18px;height:18px;border:5px solid #f5f5f5;border-radius:50%;background:#b8b8b8;transform:translate(-50%,-50%)}
.sww14Step.active .sww14Dot,.sww14Step.past .sww14Dot{background:#171717}
.sww14Card{min-height:255px;display:flex;flex-direction:column;justify-content:center;padding:clamp(25px,3.5vw,47px);border:1px solid #00000020;border-radius:28px;background:linear-gradient(145deg,#fff,#fafafa);box-shadow:0 20px 55px #0000000b;transform:translateY(20px) perspective(1100px) rotateX(3deg);transition:transform .65s var(--sww14-ease),box-shadow .4s}
.sww14Step.active .sww14Card,.sww14Step.past .sww14Card{transform:none}
.sww14Step.active .sww14Card{box-shadow:0 25px 65px #00000020;border-color:#888}
.sww14Card .sww14Number{font:800 12px ui-monospace,monospace;color:#888;letter-spacing:.14em;margin-bottom:25px}
.sww14Card h3{font-size:clamp(26px,3vw,42px);letter-spacing:-.065em;line-height:1.15;margin:0 0 15px;color:#171717}
.sww14Card p{color:#666;line-height:1.8;font-size:14px;margin:0}
.sww14Meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.sww14Meta span{padding:8px 10px;background:#f3f3f3;border:1px solid #e3e3e3;border-radius:999px;font:650 10px ui-monospace,monospace;color:#555}
.sww14Artifact{grid-column:2;grid-row:1;display:grid;place-items:center;min-height:240px;pointer-events:none}
.sww14Step:nth-of-type(even) .sww14Artifact{grid-column:1}
.sww14Cube{width:180px;height:180px;display:grid;place-items:center;position:relative;transform:perspective(700px) rotateX(55deg) rotateZ(-35deg);filter:drop-shadow(0 24px 22px #0002)}
.sww14Cube:before,.sww14Cube:after{content:"";position:absolute;inset:10%;border:2px solid #aaa;border-radius:30px;transform:translateZ(-25px);background:#e3e3e3}
.sww14Cube:after{transform:translateZ(25px);background:linear-gradient(135deg,#fff,#dadada)}
.sww14Cube strong{z-index:2;transform:translateZ(35px);font:800 54px ui-monospace,monospace;letter-spacing:-.1em;color:#333}
.sww14Outro{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:32px;border-radius:26px;background:#141416;color:#fff}
.sww14Outro strong{font-size:clamp(23px,3vw,36px);letter-spacing:-.05em}
.sww14Outro a{padding:15px 23px;border-radius:999px;background:#fff;color:#141414;text-decoration:none;font-weight:750}
@keyframes sww14Aurora{to{transform:translate(3%,-3%) rotate(3deg)}}
@media(max-width:900px){.sww14CockpitInner{grid-template-columns:1fr}.sww14Visual{min-height:365px}.sww14Screen{max-width:400px}}
@media(max-width:800px){.sww14Rail{left:12px}.sww14Comet{left:12px}.sww14Step{display:block;min-height:0;margin:0 0 24px;padding-left:36px}.sww14Dot{left:12px;top:45px}.sww14Artifact{display:none}.sww14Card{min-height:0;padding:27px;border-radius:23px}.sww14Intro{margin-bottom:42px}.sww14Outro{padding:25px}}
@media(max-width:540px){.sww14CockpitInner,.sww14Wrap{width:calc(100% - 30px)}.sww14Cockpit h2,.sww14Intro h2{font-size:clamp(39px,10vw,58px)}.sww14Tabs button{padding:12px;gap:8px}.sww14Tabs button strong{font-size:12px}.sww14Visual{min-height:310px}.sww14Screen{width:min(320px,95%)}.sww14Display{border-radius:22px}.sww14Outro a{width:100%;text-align:center}.sww14Top{right:12px;bottom:12px;width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sww14Reveal{opacity:1;transform:none;transition:none}.sww14Card{transform:none;transition:none}body :is(.hero,.swwHeroB):before{animation:none}}
