:root{--bg:#060915;--blue:#075bff;--lime:#d3ff19;--fg:#f4f6ff;--mute:#a3adca;--progress:0;--slide:0}
*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Arial,sans-serif;overflow-x:hidden}button,a{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}img{display:block;max-width:100%}
.noise{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.035;background-image:url("../../assets/images/original-a33ce6cec1babee1.svg")}
.topbar{position:fixed;z-index:75;top:0;left:0;right:0;height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,5vw,74px);background:linear-gradient(180deg,#030610d9,#03061000);border-bottom:1px solid #d3ff1919}
.wordmark{display:flex;align-items:center;gap:10px;min-width:0}.wordmark img{width:175px;height:58px;object-fit:contain;object-position:left center;filter:drop-shadow(0 0 12px #1e68ff33)}
.nav-right{display:flex;align-items:center;gap:28px;font-size:12px;letter-spacing:.12em;font-weight:800;text-transform:uppercase}.nav-right>a:not(.pill){opacity:.74}.nav-right a:hover{opacity:1;color:var(--lime)}.pill{border:1px solid var(--lime);border-radius:99px;padding:12px 18px;background:var(--lime);color:#081324;box-shadow:0 0 28px #ceff2440;font-weight:900}
.scroll-shell{height:320vh;position:relative}.pinned{position:sticky;top:0;height:100svh;min-height:550px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 45%,#12317a 0%,#09172f 32%,#050713 75%)}
.pinned:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 56%,transparent 32%,#040714aa 80%,#03050ae8 100%)}
.pinned:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,#04071470,transparent 24%,transparent 78%,#0407147a)}
.world{position:absolute;inset:0;z-index:0;perspective:850px;perspective-origin:50% 47%;overflow:hidden}
.horizon{position:absolute;left:50%;top:52%;width:9px;height:9px;background:#bbff5a;border-radius:50%;filter:blur(3px);box-shadow:0 0 55px 45px #055fff35;transform:translate(-50%,-50%)}
.tunnel{position:absolute;inset:-15%;transform-style:preserve-3d;transform:translate3d(calc(var(--camX,0)*1px),calc(var(--camY,0)*1px),0) rotateZ(calc(var(--camR,0)*1deg)) scale(var(--camScale,1));will-change:transform}
.floor{position:absolute;left:-70%;bottom:-132%;width:240%;height:190%;transform:perspective(570px) rotateX(66deg);transform-origin:center top;background:repeating-linear-gradient(90deg,transparent 0,transparent 99px,#61b2ff31 101px,#61b2ff31 103px),repeating-linear-gradient(0deg,transparent 0,transparent 83px,#61b2ff3c 85px,#61b2ff3c 87px);mask-image:linear-gradient(180deg,transparent,#000 17%,#000 70%,transparent);}
.ceiling{position:absolute;top:-125%;left:-70%;width:240%;height:165%;transform:perspective(570px) rotateX(-67deg);transform-origin:center bottom;background:repeating-linear-gradient(90deg,transparent 0,transparent 99px,#557cbd21 101px,#557cbd21 103px),repeating-linear-gradient(0deg,transparent 0,transparent 83px,#557cbd25 85px,#557cbd25 87px);mask-image:linear-gradient(0deg,transparent,#000 22%,transparent)}
.pillar{position:absolute;top:0;height:100%;width:3px;background:linear-gradient(#528cff00,#6eacff8c 50%,#528cff00);box-shadow:0 0 24px #2181ff;opacity:.45}.pillar.one{left:12%}.pillar.two{right:12%}.pillar.three{left:26%;opacity:.15}.pillar.four{right:26%;opacity:.15}
.beams{position:absolute;inset:0;pointer-events:none;background:linear-gradient(130deg,transparent 15%,#3f77ff15 21%,transparent 35%),linear-gradient(230deg,transparent 15%,#3f77ff15 21%,transparent 35%)}
.portal{position:absolute;left:50%;top:51%;height:min(66vw,66vh);width:min(70vw,78vh);border:2px solid #5896f96b;border-radius:25px;transform:translate(-50%,-50%) perspective(650px) rotateY(calc(var(--portalAngle,0)*1deg)) scale(var(--portalScale,1));box-shadow:0 0 50px #0a62ff59,inset 0 0 55px #1259c835;transition:opacity .3s;opacity:.7}.portal:before,.portal:after{content:"";position:absolute;inset:16px;border:1px solid #74a9f64f;border-radius:18px;box-shadow:inset 0 0 27px #1087ff35}.portal:after{inset:36px;border-color:#c7ff1c6c}
.ambient{position:absolute;pointer-events:none;border-radius:50%;filter:blur(1px)}.ambient.a{height:330px;width:330px;background:#0069ff2c;top:5%;right:-4%;box-shadow:0 0 70px #0055ff25}.ambient.b{height:250px;width:250px;background:#c5ff1230;bottom:-13%;left:-6%;filter:blur(12px)}
.space-dots{position:absolute;inset:0;background-image:radial-gradient(#fff8 1px,transparent 1px),radial-gradient(#84b7ff7a 1px,transparent 1px);background-size:97px 113px,167px 131px;background-position:10px 17px,67px 37px;opacity:.45}
/* Fixed section chapters: one environment, scroll advances the internal camera and content */
.chapter{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translate3d(0,0,0);will-change:opacity,transform}.chapter.current{pointer-events:auto}
.chapter-inner{position:relative;width:min(1340px,calc(100% - 10vw));height:100%;display:flex;align-items:center;justify-content:space-between;gap:2vw}
.chapter-copy{position:relative;z-index:6;width:48%;max-width:650px;text-shadow:0 4px 18px #030712aa}.overline{font-size:11px;font-weight:900;letter-spacing:.25em;color:var(--lime);display:flex;align-items:center;gap:12px;margin-bottom:20px}.overline:before{content:"";width:32px;height:2px;background:var(--lime)}
h1,.chapter h2{margin:0;font-size:clamp(48px,6.4vw,106px);font-weight:900;letter-spacing:-.085em;line-height:.94;max-width:800px}.chapter h2{font-size:clamp(49px,6.5vw,108px)}.chapter h1 em,.chapter h2 em{font-style:normal;color:var(--lime)}.chapter-copy p{max-width:480px;margin:26px 0 28px;color:#e0e8ffcc;font-size:clamp(14px,1.25vw,18px);line-height:1.72}.action{display:inline-flex;align-items:center;gap:18px;border:1px solid #d5ff33;border-radius:999px;padding:13px 17px;background:#d3ff19;color:#061020;font-size:12px;font-weight:900;letter-spacing:.04em}.action span{font-size:20px}.chapter-index{margin-top:50px;font-weight:800;font-size:11px;color:#aabbd5;letter-spacing:.24em}
.visual{width:52%;height:72%;position:relative;perspective:900px;transform-style:preserve-3d;display:grid;place-items:center}
/* 3D spark / independently moving plates */
.spark-scene{position:relative;width:min(39vw,520px);height:min(39vw,520px);transform-style:preserve-3d;transform:rotateX(calc(-14deg + var(--local,0)*9deg)) rotateY(calc(-25deg + var(--local,0)*80deg)) rotateZ(calc(var(--local,0)*32deg));will-change:transform;filter:drop-shadow(0 0 22px #0084ff65)}.spark-disc{position:absolute;inset:15%;border-radius:50%;border:1px solid #5fafffb6;transform:rotateX(73deg) rotateZ(20deg);box-shadow:0 0 32px #08afff88,inset 0 0 32px #08afff88}.spark-disc.two{transform:rotateY(74deg) rotateZ(34deg);border-color:#d3ff19a4;inset:7%}.spark-main{position:absolute;inset:19%;display:grid;place-items:center;transform:translateZ(92px)}.spark-main img{width:94%;height:94%;object-fit:contain;filter:drop-shadow(0 4px 10px #051bff) drop-shadow(0 0 42px #215fff)}
.satellite{position:absolute;width:68px;height:68px;border:1px solid #c8ff2066;background:linear-gradient(145deg,#3c88ff,#08142d);border-radius:14px;transform-style:preserve-3d;box-shadow:0 0 30px #075bff8c}.satellite.s1{right:2%;top:3%;transform:translateZ(150px) rotate(25deg)}.satellite.s2{left:-3%;bottom:7%;width:100px;height:100px;transform:translateZ(-40px) rotate(-19deg);border-radius:50%;background:radial-gradient(circle at 32% 28%,#d4ff5c,#87ad06 50%,#0d160e)}.satellite.s3{right:11%;bottom:10%;width:36px;height:36px;transform:translateZ(130px) rotate(-40deg);background:var(--lime)}
/* web scene */
.interface-3d{position:relative;width:min(42vw,600px);height:365px;transform-style:preserve-3d;transform:rotateY(calc(-23deg + var(--local,0)*28deg)) rotateX(calc(9deg - var(--local,0)*12deg)) translateZ(calc(var(--local,0)*100px));filter:drop-shadow(0 12px 22px #0008)}.browser-3d{position:absolute;inset:0;border:1px solid #91b7ff8f;border-radius:16px;background:linear-gradient(135deg,#142853f0,#0c1633f7);box-shadow:0 0 50px #135bf84a,inset 0 0 35px #1d52fa1f;overflow:hidden}.browser-head{height:36px;display:flex;gap:6px;padding:12px 16px;border-bottom:1px solid #7797e248}.browser-head b{height:8px;width:8px;border-radius:50%;background:#d3ff19}.browser-head b:nth-child(2){background:#75aaff}.browser-head b:nth-child(3){background:#b58aff}.browser-content{display:grid;grid-template-columns:1fr 1.1fr;gap:16px;padding:19px;height:calc(100% - 36px)}.browser-copy{display:flex;flex-direction:column;justify-content:center;gap:12px}.browser-copy strong{font-size:clamp(24px,3.2vw,48px);letter-spacing:-.07em;line-height:1}.browser-copy strong i{font-style:normal;color:var(--lime)}.browser-copy span{display:block;height:5px;width:85%;background:#8daef54f;border-radius:9px}.browser-copy span:nth-of-type(2){width:65%}.browser-copy small{color:#a5bce6;font-size:9px;letter-spacing:.12em}.browser-content img{height:100%;width:100%;object-fit:cover;object-position:top;border-radius:7px;border:1px solid #456cce}.floating-code{position:absolute;top:-55px;right:-70px;transform:translateZ(90px) rotate(8deg);color:var(--lime);border:1px solid #c4ff42;background:#081d25f5;padding:13px 17px;border-radius:10px;font-size:13px;font-weight:900;box-shadow:0 0 20px #b8ff1950}.mini-browser{position:absolute;left:-90px;bottom:-48px;width:200px;height:135px;border:2px solid #d3ff19;background:#0a122b;border-radius:11px;transform:translateZ(100px) rotate(-11deg);overflow:hidden;box-shadow:0 20px 35px #000b}.mini-browser img{width:100%;height:100%;object-fit:cover;object-position:top}
/* brand 3D objects */
.brand-3d{position:relative;width:min(40vw,540px);height:min(40vw,540px);transform-style:preserve-3d;transform:rotateY(calc(-18deg + var(--local,0)*70deg)) rotateX(calc(6deg + var(--local,0)*10deg))}.brand-orb{position:absolute;inset:13%;border-radius:50%;background:radial-gradient(circle at 27% 20%,#dfff90,#b3f707 35%,#305c04 68%,#0a1907 100%);box-shadow:inset -35px -32px 55px #070d12aa,0 0 80px #c7ff003d;transform:translateZ(25px)}.brand-loop{position:absolute;inset:-4%;border:25px solid #246cff;border-top-color:#57a8ff;border-bottom-color:#102db7;border-radius:50%;transform:rotateY(72deg) rotateZ(32deg);box-shadow:0 0 40px #0664ff}.brand-loop.two{inset:9%;border-width:13px;border-color:#d3ff19;transform:rotateX(72deg) rotateZ(-14deg)}.brand-cube{position:absolute;width:130px;height:130px;right:-5%;top:10%;background:linear-gradient(135deg,#5c9cff,#064afe 48%,#051956);border:1px solid #a8c7ff;border-radius:18px;transform:translateZ(120px) rotateZ(20deg);box-shadow:16px 18px 0 #061b88,0 0 30px #075bff}.brand-type{position:absolute;bottom:3%;left:-16%;font-weight:1000;font-size:clamp(38px,5vw,82px);letter-spacing:-.1em;color:#fff;line-height:.85;transform:translateZ(170px) rotateZ(-9deg);text-shadow:6px 6px 0 #075bff,13px 14px 0 #030d2e}
/* video world */
.motion-3d{position:relative;width:min(42vw,610px);height:410px;transform-style:preserve-3d;transform:rotateY(calc(21deg - var(--local,0)*31deg)) rotateX(calc(-9deg + var(--local,0)*12deg))}.monitor{position:absolute;inset:12px 24px 45px;border:2px solid #98aaff96;border-radius:17px;background:#050a18;overflow:hidden;box-shadow:0 35px 50px #000c,0 0 60px #075bff58}.monitor img{width:100%;height:100%;object-fit:cover;filter:saturate(1.2) brightness(.72)}.play-circle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;background:#d3ff19;width:80px;height:80px;border-radius:50%;color:#080b12;font-size:29px;box-shadow:0 0 45px #d3ff1980}.timeline{position:absolute;left:-45px;right:-35px;bottom:-7px;height:110px;padding:12px;background:#091125;border:1px solid #557bdc;border-radius:8px;box-shadow:0 25px 42px #000a;transform:translateZ(95px) rotateX(22deg)}.track{height:20px;border-radius:5px;margin:6px 0;background:repeating-linear-gradient(90deg,#205bff 0 46px,#143ea5 46px 50px,#caff17 50px 85px,#15315e 85px 89px)}.track.two{background:repeating-linear-gradient(90deg,#9e67ff 0 54px,#372c73 54px 60px,#205bff 60px 100px,#172f64 100px 104px)}.track.three{background:linear-gradient(90deg,#caff17 0 31%,#164cc8 31% 60%,#bb82ff 60%)}.timeline:after{content:"";position:absolute;top:8px;bottom:8px;left:44%;width:3px;background:#fff;box-shadow:0 0 10px #fff}.frame-floating{position:absolute;right:-72px;top:-46px;width:160px;height:125px;transform:translateZ(85px) rotate(11deg);border:2px solid var(--lime);background:#061431;box-shadow:0 13px 22px #0008;overflow:hidden}.frame-floating img{height:100%;width:100%;object-fit:cover}
/* final scene */
.final-shape{position:relative;display:grid;place-items:center;width:min(37vw,480px);height:min(37vw,480px);transform:rotate(calc(var(--local,0)*50deg)) scale(calc(.87 + var(--local,0)*.28));border:2px solid #95c2ff;border-radius:50%;box-shadow:0 0 50px #075bff88,inset 0 0 70px #075bff55}.final-shape:before{content:"";position:absolute;inset:27px;border:2px dashed #d3ff19a4;border-radius:50%}.final-shape img{width:58%;filter:drop-shadow(0 0 30px #006fff)}
.side-rail{position:absolute;z-index:40;right:clamp(12px,3vw,45px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:22px}.rail-dot{display:flex;align-items:center;justify-content:flex-end;gap:10px;cursor:pointer;color:#b6c4de;background:none;border:0;opacity:.7;font-size:10px;font-weight:800;letter-spacing:.08em}.rail-dot i{display:block;width:6px;height:6px;border-radius:50%;border:1px solid #fff8;transition:.2s}.rail-dot.active{color:var(--lime);opacity:1}.rail-dot.active i{height:30px;border-radius:99px;background:var(--lime);border-color:var(--lime)}
.bottom-panel{position:absolute;left:clamp(18px,5vw,74px);right:clamp(18px,5vw,74px);bottom:clamp(20px,5vh,43px);z-index:42;display:flex;align-items:end;justify-content:space-between;gap:35px}.scroll-hint{display:flex;align-items:center;gap:12px;color:#d8e5f2;font-weight:900;font-size:10px;letter-spacing:.18em}.scroll-icon{display:grid;place-items:center;width:30px;height:45px;border:1px solid #d3ff19;border-radius:99px;font-size:20px;color:var(--lime);animation:down 1.6s infinite}.progress-track{background:#ffffff2d;width:230px;height:3px;border-radius:20px;overflow:hidden}.progress-track:before{content:"";display:block;height:100%;width:calc(var(--progress)*100%);background:var(--lime);box-shadow:0 0 15px var(--lime)}.readout{display:flex;gap:22px;align-items:center;color:#c2cbdb;font-size:12px;font-weight:800}.readout strong{color:var(--lime)}@keyframes down{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.after{position:relative;z-index:10;background:#e9eff4;color:#080d18;padding:100px clamp(18px,7vw,105px);border-top:5px solid var(--lime)}.tag{font-size:11px;letter-spacing:.23em;color:#075bff;font-weight:900}.after-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:40px}.after h2{font-size:clamp(36px,6vw,80px);line-height:.97;letter-spacing:-.075em;margin:12px 0 0}.after p{max-width:490px;color:#4b596c;line-height:1.7}.folio-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:17px}.folio-card{min-width:0;display:block;background:white;border:2px solid #081324;box-shadow:5px 5px 0 #081324;border-radius:15px;overflow:hidden;transition:transform .2s}.folio-card:hover{transform:translateY(-7px)}.folio-card img{height:230px;width:100%;object-fit:cover;object-position:top center}.folio-card span{padding:12px 14px;font-size:10px;letter-spacing:.12em;font-weight:900;display:flex;align-items:center;justify-content:space-between}.after-contact{background:#075bff;color:white;display:flex;justify-content:space-between;align-items:center;gap:30px;padding:80px clamp(18px,7vw,105px)}.after-contact h2{margin:0;font-size:clamp(40px,6vw,88px);line-height:.94;letter-spacing:-.08em}.after-contact em{font-style:normal;color:var(--lime)}.footer{background:#040610;color:#c7d5e9;padding:25px clamp(18px,7vw,105px);display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12px}.footer img{width:170px;max-height:55px;object-fit:contain}
@media(max-width:860px){.topbar{height:68px}.wordmark img{width:150px}.nav-right>a:not(.pill){display:none}.chapter-inner{width:calc(100% - 45px);flex-direction:column;justify-content:center;gap:10px;padding:75px 0 75px}.chapter-copy{width:100%;text-align:left}.chapter h1,.chapter h2{font-size:clamp(48px,10vw,75px)}.chapter-copy p{font-size:14px;margin:15px 0}.chapter-index{display:none}.visual{height:40%;width:100%}.spark-scene{width:270px;height:270px}.interface-3d{width:min(85vw,550px);height:265px}.mini-browser{left:-20px;width:120px;height:78px;bottom:-10px}.floating-code{right:-14px;top:-32px}.brand-3d{width:250px;height:250px}.brand-cube{width:70px;height:70px}.motion-3d{width:min(83vw,480px);height:270px}.frame-floating{width:92px;height:73px;right:-18px;top:-22px}.timeline{left:0;right:0;height:84px;bottom:-19px}.track{height:13px;margin:4px 0}.final-shape{width:240px;height:240px}.side-rail{right:12px;gap:14px}.rail-dot span{display:none}.bottom-panel{bottom:18px}.scroll-hint{font-size:9px}.progress-track{width:70px}.readout{gap:8px}.after-head{flex-direction:column;align-items:flex-start}.folio-grid{grid-template-columns:repeat(3,1fr)}.folio-card img{height:205px}}
@media(max-width:540px){.folio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.folio-card img{height:175px}.after-contact{flex-direction:column;align-items:flex-start}.footer{flex-direction:column;align-items:start}.nav-right{gap:0}.pill{padding:9px 12px}.chapter-copy p{max-width:87%}.visual{height:36%}.chapter h1,.chapter h2{font-size:clamp(45px,11vw,59px)}.chapter-inner{padding-bottom:80px}.side-rail{top:52%}.spark-scene{width:230px;height:230px}.interface-3d{height:210px}.browser-content{padding:10px}.browser-copy strong{font-size:22px}.browser-copy span{height:3px}.brand-3d{width:215px;height:215px}.motion-3d{height:215px}.final-shape{width:200px;height:200px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scroll-icon{animation:none}}

/* Performance patch - maintain the visual design without costly invisible layer paints. */
.chapter{visibility:hidden;content-visibility:hidden;contain:layout style paint;will-change:auto;transform:translate3d(0,0,0)}
.chapter.scene-render{visibility:visible;content-visibility:visible;will-change:opacity,transform}
.chapter:not(.current){pointer-events:none}
.world,.pinned{contain:layout paint}
.tunnel{will-change:transform}
@media(max-width:860px){.noise{display:none}.ambient{display:none}.space-dots{opacity:.25}.portal{box-shadow:none}.tunnel{filter:none}}
@media(prefers-reduced-motion:reduce){.chapter{transition:none!important}}

/* --------------------------------------------------------------
   Portfolio kinetic collage, self-contained and scroll-scrubbed.
   Hero above has not been modified.
---------------------------------------------------------------- */
.portfolio-story{height:315svh;position:relative;background:#06070c;color:#f6f7ff;isolation:isolate}
.portfolio-pin{height:100svh;min-height:600px;position:sticky;top:0;overflow:hidden;background:radial-gradient(circle at 49% 50%,#111527 0,#080a12 55%,#05060b 100%);contain:layout paint;}
.portfolio-atmosphere{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 65%,#205bff15,transparent 56%);}
.portfolio-header{position:absolute;z-index:29;top:91px;left:clamp(20px,5.5vw,92px);right:20px;pointer-events:none}
.portfolio-eyebrow{color:#d3ff19;font-weight:900;font-size:10px;letter-spacing:.23em}
.portfolio-header h2{font-size:clamp(21px,2.8vw,38px);letter-spacing:-.055em;line-height:1.1;margin:10px 0 7px;font-weight:800}
.portfolio-header h2 em{font-style:normal;color:#d3ff19}
.portfolio-header p{max-width:590px;color:#a9b2ca;font-size:12px;line-height:1.45;margin:0}
.portfolio-stage{position:absolute;inset:21% 3% 9%;width:94%;max-width:1350px;margin:auto;perspective:1100px;pointer-events:none;}
.project-tile{--travel:0px;position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);display:block;opacity:.13;transform:translate3d(0,0,0);transform-origin:center;will-change:transform,opacity;pointer-events:none;z-index:calc(10 + var(--layer));text-decoration:none;box-shadow:0 15px 32px #0009;outline:1px solid #ffffff0b;border-radius:3px;}
.project-tile.is-assembled{pointer-events:auto}
.project-tile:hover,.project-tile:focus-visible{z-index:41!important;box-shadow:0 22px 65px #000e,0 0 0 2px #d3ff19b0;outline:0}
.project-window{display:block;width:100%;height:100%;overflow:hidden;border-radius:2px;background:#111d34;position:relative}
.project-window img{display:block;width:100%;max-width:none;height:auto;min-height:100%;object-fit:cover;object-position:top;transform:translate3d(0,0,0);transition:transform 0s;will-change:transform;}
.project-tile.is-assembled:hover .project-window img,.project-tile.is-assembled:focus-visible .project-window img{transform:translate3d(0,var(--travel),0);transition:transform var(--hover-duration,3.3s) linear}
.project-count{position:absolute;bottom:7px;left:7px;color:#fff;background:#080e20c9;padding:4px 6px;border-radius:2px;font-size:9px;font-weight:800;letter-spacing:.08em;opacity:0;transition:opacity .2s}
.project-tile:hover .project-count,.project-tile:focus-visible .project-count{opacity:1}
.portfolio-progress{position:absolute;z-index:30;left:clamp(20px,5.5vw,92px);right:clamp(20px,5.5vw,92px);bottom:25px;display:flex;gap:15px;align-items:center;font-size:10px;font-weight:800;letter-spacing:.14em;color:#9ba7c3;pointer-events:none}
.portfolio-meter{flex:1;height:2px;background:#5a6a974a;max-width:300px}.portfolio-meter i{display:block;width:0;height:100%;background:#d3ff19;box-shadow:0 0 12px #d3ff19}
.portfolio-scroll-hint{position:absolute;right:clamp(20px,5.5vw,92px);bottom:57px;font-size:10px;font-weight:800;letter-spacing:.16em;color:#d3ff19;z-index:30;pointer-events:none}
@media(max-width:850px){.portfolio-story{height:280svh}.portfolio-pin{min-height:0}.portfolio-header{top:76px}.portfolio-header h2{font-size:clamp(19px,4vw,28px)}.portfolio-header p{font-size:10px;max-width:80%}.portfolio-stage{inset:22% 3% 10%;width:94%;max-width:none;transform:none}.portfolio-progress{bottom:18px}.portfolio-scroll-hint{bottom:46px;font-size:8px}.project-count{display:none}}
/* Portfolio-only viewport adjustments. The 3D hero and its animation remain untouched. */
@media(max-width:850px){
 .portfolio-pin{overflow:hidden}
 .portfolio-stage{left:3%;right:3%;top:23%;bottom:10%;width:94%;height:auto;overflow:visible}
 .project-tile{--w:28!important;--h:17!important;}
 .project-tile:nth-child(3n + 1){--x:3!important}
 .project-tile:nth-child(3n + 2){--x:36!important}
 .project-tile:nth-child(3n){--x:69!important}
 .project-tile:nth-child(-n + 3){--y:1!important}
 .project-tile:nth-child(n + 4):nth-child(-n + 6){--y:20!important}
 .project-tile:nth-child(n + 7):nth-child(-n + 9){--y:39!important}
 .project-tile:nth-child(n + 10):nth-child(-n + 12){--y:58!important}
 .project-tile:nth-child(n + 13){--y:77!important}
}
@media(max-width:540px){
 .portfolio-header{top:76px;left:16px;right:16px}
 .portfolio-header h2{font-size:clamp(17px,4.7vw,24px);margin:6px 0 4px}
 .portfolio-header p{font-size:9px;line-height:1.3}
 .portfolio-stage{top:24%;bottom:12%}
 .project-tile{--w:29!important;--h:17!important}
 .project-tile:nth-child(3n + 1){--x:1!important}
 .project-tile:nth-child(3n + 2){--x:35.5!important}
 .project-tile:nth-child(3n){--x:70!important}
}
@media(prefers-reduced-motion:reduce){.project-tile,.project-window img{will-change:auto}.project-tile.is-assembled:hover .project-window img{transition-duration:.01s}}

/* Portfolio refinement only: full use of the space below navigation. */
.portfolio-stage{top:13%;bottom:8%;height:auto}
.portfolio-header{
  left:50%;right:auto;top:45%;width:min(90%,980px);
  text-align:center;transform:translate3d(-50%,-50%,0) scale(1);
  transform-origin:center center;will-change:transform,opacity;
  padding:16px 24px;z-index:29;
}
.portfolio-header h2{font-size:clamp(31px,4.4vw,68px);line-height:1.02;letter-spacing:-.06em;margin:14px 0 12px;text-wrap:balance}
.portfolio-header p{margin:0 auto;max-width:590px;font-size:clamp(11px,1.05vw,15px)}
@media(max-width:850px){
  .portfolio-stage{top:12%;bottom:10%;height:auto}
  .portfolio-header{top:43%;left:50%;right:auto;width:92%;padding:8px 12px}
  .portfolio-header h2{font-size:clamp(29px,6.4vw,47px);margin:9px 0 8px}
  .portfolio-header p{font-size:11px;max-width:330px;margin:0 auto}
}
@media(max-width:540px){
  .portfolio-stage{top:12%;bottom:11%;height:auto}
  .portfolio-header{top:43%;left:50%;right:auto;width:94%}
  .portfolio-header h2{font-size:clamp(25px,8vw,39px)}
  .portfolio-header p{font-size:10px;max-width:280px}
}

/* SOCIALCODESTUDIO HOME SECTIONS - appended without changing the 3D hero or portfolio mechanics */
:root{--scx-bg:#070a13;--scx-panel:#0d1220;--scx-line:rgba(255,255,255,.13);--scx-white:#f4f6fb;--scx-muted:#9aa4b7;--scx-lime:#c8ff16;--scx-blue:#145cff}
.scx-wrap{width:min(1320px,calc(100% - 9vw));margin:0 auto}.scx-services,.scx-about,.scx-process,.scx-clients,.scx-standards,.scx-contact{position:relative;isolation:isolate;overflow:hidden;background:var(--scx-bg);color:var(--scx-white);border-top:1px solid rgba(255,255,255,.08);padding:clamp(76px,9vw,142px) 0;font-family:inherit}.scx-kicker,.scx-side-note{font-size:10px;font-weight:850;letter-spacing:.17em;text-transform:uppercase;color:var(--scx-lime)}.scx-section-top,.scx-contact-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:52px}.scx-side-note{color:#7d879a;text-align:right}.scx-services-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;margin-bottom:58px}.scx-services h2,.scx-about h2,.scx-process h2,.scx-clients h2,.scx-standards h2,.scx-contact h2{font-size:clamp(42px,6.4vw,88px);line-height:.96;letter-spacing:-.065em;font-weight:760;margin:0;max-width:850px}.scx-services h2 em,.scx-about h2 em,.scx-process h2 em,.scx-clients h2 em,.scx-standards h2 em,.scx-contact h2 em{font-style:normal;color:var(--scx-lime)}.scx-services-intro>p,.scx-process-heading>p,.scx-client-heading>p{max-width:350px;color:var(--scx-muted);font-size:15px;line-height:1.7;margin:0 0 6px}.scx-service-tabs{display:flex;gap:8px;border-bottom:1px solid var(--scx-line);margin-bottom:18px;overflow-x:auto;scrollbar-width:none}.scx-tab{flex:1;min-width:210px;background:transparent;border:0;border-bottom:2px solid transparent;color:#8e98aa;text-align:left;padding:18px 16px 20px;font:800 12px Arial,sans-serif;letter-spacing:.04em;cursor:pointer;transition:color .25s,border-color .25s}.scx-tab span{float:right;color:#687287}.scx-tab:hover,.scx-tab.is-active{color:#fff;border-color:var(--scx-lime)}.scx-tab.is-active span{color:var(--scx-lime)}.scx-service-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}.scx-service-panel[hidden]{display:none}.scx-service{display:grid;grid-template-columns:38px 1fr 22px;align-items:center;gap:12px;padding:21px 4px;border-bottom:1px solid var(--scx-line);text-decoration:none;color:var(--scx-white);transition:color .2s,transform .2s}.scx-service:hover{color:var(--scx-lime);transform:translateX(5px)}.scx-service-no{font-size:10px;color:#69748a;font-weight:800}.scx-service-name{font-size:14px;font-weight:650;line-height:1.35}.scx-service-arrow{font-size:18px;color:var(--scx-lime);text-align:right}.scx-service-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:30px;color:#7d879a;font-size:11px;letter-spacing:.04em}.scx-service-bottom a,.scx-text-link{color:var(--scx-lime);text-decoration:none;font-weight:800}.scx-service-bottom b{font-size:17px;margin-left:12px}.scx-about{background:radial-gradient(ellipse at 78% 48%,rgba(20,92,255,.15),transparent 38%),#080c17}.scx-about-grid{display:grid;grid-template-columns:1fr .9fr;gap:9vw;align-items:center}.scx-about-copy h2{margin:30px 0}.scx-about-copy p{max-width:590px;color:var(--scx-muted);font-size:15px;line-height:1.8}.scx-about-copy .scx-lead{color:#e5eaf4;font-size:20px;line-height:1.5;max-width:570px}.scx-text-link{display:inline-flex;gap:30px;margin-top:25px;padding-bottom:10px;border-bottom:1px solid rgba(200,255,22,.45)}.scx-about-visual{position:relative;min-height:480px;display:grid;place-items:center}.scx-orbit{position:absolute;border:1px solid rgba(200,255,22,.28);border-radius:50%;transform:rotate(-28deg)}.scx-orbit-one{width:380px;height:250px}.scx-orbit-two{width:280px;height:430px;transform:rotate(55deg);border-color:rgba(20,92,255,.55)}.scx-core{width:180px;height:180px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 25%,#246cff,#09152e 72%);border:1px solid rgba(255,255,255,.35);box-shadow:0 0 90px rgba(20,92,255,.25),inset 0 0 40px rgba(255,255,255,.08);z-index:1}.scx-core span{font-size:55px;line-height:1;font-weight:900;letter-spacing:-.1em}.scx-core small{font-size:8px;letter-spacing:.2em;text-align:center;color:var(--scx-lime);margin-top:8px}.scx-float{position:absolute;z-index:2;padding:13px 17px;background:rgba(10,16,31,.88);border:1px solid rgba(255,255,255,.17);border-radius:8px;font-size:11px;font-weight:850;letter-spacing:.1em;box-shadow:0 15px 50px #0008}.scx-float b{color:var(--scx-lime);margin-right:9px}.scx-float-a{top:16%;left:3%;transform:rotate(-8deg)}.scx-float-b{right:0;top:44%;transform:rotate(7deg)}.scx-float-c{left:15%;bottom:12%;transform:rotate(4deg)}.scx-visual-caption{position:absolute;bottom:0;right:0;font-size:9px;letter-spacing:.2em;color:#7e8ba1}.scx-visual-caption span{color:var(--scx-lime);font-size:18px;margin-left:10px}.scx-process{background:#0b101d}.scx-process-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:68px}.scx-process-heading>p{max-width:370px}.scx-process-line{height:1px;background:var(--scx-line);position:relative;margin:0 0 32px}.scx-process-line span{position:absolute;left:0;top:-1px;width:100%;height:2px;background:linear-gradient(90deg,var(--scx-lime),var(--scx-blue),transparent)}.scx-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}.scx-step{position:relative;padding:0 14px 12px 0}.scx-step-index{font-size:11px;color:var(--scx-lime);letter-spacing:.16em;font-weight:900}.scx-step-icon{width:48px;height:48px;border:1px solid rgba(200,255,22,.5);border-radius:50%;display:grid;place-items:center;color:var(--scx-lime);font-size:22px;margin:24px 0}.scx-step h3{font-size:23px;letter-spacing:-.04em;margin:0 0 12px}.scx-step p{font-size:13px;line-height:1.7;color:var(--scx-muted);min-height:90px;margin:0 0 24px}.scx-step small{font-size:9px;letter-spacing:.15em;color:#657087;font-weight:800}.scx-clients{padding-bottom:100px;background:radial-gradient(ellipse at 50% 100%,rgba(20,92,255,.12),transparent 55%),#070a13}.scx-client-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:54px}.scx-logo-marquee{overflow:hidden;border-top:1px solid var(--scx-line);border-bottom:1px solid var(--scx-line);padding:17px 0}.scx-logo-marquee-reverse{border-top:0}.scx-logo-track{display:flex;align-items:center;gap:18px;width:max-content;animation:scx-marquee 52s linear infinite}.scx-logo-marquee:hover .scx-logo-track{animation-play-state:paused}.scx-logo-marquee-reverse .scx-logo-track{animation-direction:reverse;animation-duration:62s}.scx-logo{width:175px;height:88px;display:grid;place-items:center;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:14px 20px;flex:none}.scx-logo img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .3s,opacity .3s}.scx-logo:hover img{filter:grayscale(0);opacity:1}@keyframes scx-marquee{to{transform:translateX(-50%)}}.scx-standards{background:linear-gradient(130deg,#0b101e,#080b14 65%)}.scx-standards-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:9vw}.scx-standards-lead h2{margin:30px 0}.scx-standards-lead>p{max-width:440px;color:var(--scx-muted);font-size:15px;line-height:1.8}.scx-principle{position:relative;padding:25px 55px 25px 0;border-top:1px solid var(--scx-line)}.scx-principle:last-child{border-bottom:1px solid var(--scx-line)}.scx-principle>span{font-size:9px;letter-spacing:.18em;color:var(--scx-lime);font-weight:900}.scx-principle h3{font-size:clamp(21px,2.5vw,31px);letter-spacing:-.04em;margin:13px 0 8px}.scx-principle p{font-size:13px;line-height:1.65;color:var(--scx-muted);margin:0;max-width:520px}.scx-principle i{position:absolute;right:8px;top:38px;font-style:normal;font-size:25px;color:var(--scx-lime)}.scx-contact{background:radial-gradient(ellipse at 10% 85%,rgba(20,92,255,.18),transparent 42%),#080c17}.scx-contact-grid{display:grid;grid-template-columns:1fr .8fr;gap:10vw}.scx-contact-copy h2{font-size:clamp(50px,7vw,100px);margin:28px 0}.scx-contact-copy>p{max-width:470px;color:var(--scx-muted);font-size:15px;line-height:1.8}.scx-mail-link{display:inline-block;color:var(--scx-lime);font-size:15px;font-weight:800;text-decoration:none;margin-top:25px}.scx-form{display:grid;gap:18px;padding:28px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.13);border-radius:14px}.scx-form label{display:grid;gap:9px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:850;color:#aeb8c9}.scx-form input,.scx-form select,.scx-form textarea{width:100%;background:#0a1020;border:1px solid rgba(255,255,255,.16);border-radius:7px;padding:14px 13px;color:#fff;font:14px Arial,sans-serif;outline:none;letter-spacing:0;text-transform:none}.scx-form input:focus,.scx-form select:focus,.scx-form textarea:focus{border-color:var(--scx-lime)}.scx-form input::placeholder,.scx-form textarea::placeholder{color:#657087}.scx-form select{color:#cbd2df}.scx-submit{display:flex;justify-content:space-between;align-items:center;border:0;border-radius:100px;background:var(--scx-lime);color:#0a1019;padding:16px 20px;font-size:12px;font-weight:900;letter-spacing:.04em;cursor:pointer;transition:transform .2s,box-shadow .2s}.scx-submit:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(200,255,22,.2)}.scx-submit span{font-size:19px}.scx-form-note{font-size:10px;color:#718096;margin:0}.scx-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}.scx-reveal.is-visible{opacity:1;transform:none}
@media(max-width:900px){.scx-service-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.scx-about-grid,.scx-standards-grid{grid-template-columns:1fr;gap:55px}.scx-about-visual{min-height:410px}.scx-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:35px}.scx-contact-grid{grid-template-columns:1fr;gap:45px}.scx-services-intro,.scx-process-heading,.scx-client-heading{align-items:flex-start;flex-direction:column;gap:22px}}
@media(max-width:600px){.scx-wrap{width:calc(100% - 38px)}.scx-services,.scx-about,.scx-process,.scx-clients,.scx-standards,.scx-contact{padding:76px 0}.scx-section-top,.scx-contact-top{margin-bottom:35px}.scx-side-note{font-size:8px}.scx-services h2,.scx-about h2,.scx-process h2,.scx-clients h2,.scx-standards h2,.scx-contact h2{font-size:clamp(40px,12vw,62px)}.scx-services-intro{margin-bottom:36px}.scx-services-intro>p,.scx-process-heading>p,.scx-client-heading>p{font-size:14px}.scx-service-tabs{gap:3px}.scx-tab{min-width:165px;padding:14px 10px;font-size:10px}.scx-service-panel{grid-template-columns:1fr}.scx-service{padding:16px 2px}.scx-service-name{font-size:13px}.scx-service-bottom{flex-direction:column;font-size:10px}.scx-about-visual{min-height:330px;transform:scale(.88);margin:-10px -25px}.scx-orbit-one{width:290px;height:195px}.scx-orbit-two{width:220px;height:330px}.scx-core{width:145px;height:145px}.scx-core span{font-size:45px}.scx-float-a{left:0}.scx-float-b{right:0}.scx-float-c{left:6%}.scx-process-heading{margin-bottom:42px}.scx-steps{grid-template-columns:1fr 1fr;gap:28px 18px}.scx-step p{min-height:0}.scx-step-icon{margin:16px 0}.scx-logo{width:138px;height:72px;padding:12px}.scx-logo-track{gap:10px}.scx-principle{padding-right:38px}.scx-contact-copy h2{font-size:clamp(48px,13vw,72px)}.scx-form{padding:19px}.scx-form input,.scx-form select,.scx-form textarea{font-size:16px}}
@media(prefers-reduced-motion:reduce){.scx-logo-track{animation:none}.scx-reveal{opacity:1;transform:none;transition:none}}


/* === SOCIALCODESTUDIO FINAL HOMEPAGE POLISH === */
:root{--nav-glass:rgba(5,10,24,.62)}
.topbar{height:76px;padding:0 clamp(18px,5vw,76px);background:rgba(5,10,24,.58)!important;background-image:linear-gradient(110deg,rgba(8,16,36,.78),rgba(8,13,28,.48))!important;border-bottom:1px solid rgba(168,194,255,.20)!important;backdrop-filter:blur(22px) saturate(155%);-webkit-backdrop-filter:blur(22px) saturate(155%);box-shadow:0 8px 35px rgba(0,0,0,.16)}
.nav-right{gap:clamp(14px,2.3vw,34px);font-size:12px;letter-spacing:.10em;font-weight:800}
.nav-right>a:not(.pill){opacity:.84;transition:color .25s ease,opacity .25s ease;white-space:nowrap}
.nav-right>a:not(.pill):hover{opacity:1;color:var(--lime)}
.pill.header-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:142px;padding:13px 20px;color:#081324!important;background:var(--lime);border:1px solid var(--lime);font-size:12px;font-weight:900;line-height:1;white-space:nowrap;overflow:visible;opacity:1!important;transform:translateZ(0);transition:transform .25s ease,box-shadow .25s ease,background .25s ease!important}
.pill.header-cta span{display:inline-block;color:#081324!important;opacity:1!important;visibility:visible!important;transform:none!important;transition:transform .25s ease!important}
.pill.header-cta:hover{color:#081324!important;background:#e0ff55;box-shadow:0 0 34px #d3ff1966;transform:translateY(-2px)}
.pill.header-cta:hover span{transform:translate(2px,-2px)!important}
.pill.header-cta:before,.pill.header-cta:after{content:none!important}
/* The five hero chapters now occupy clean 20% scroll beats; keep a final-scene hold. */
.scroll-shell{height:350vh}
h1,h2,h3,h4,h5,h6,.section-title,.scx-client-heading h2,.scx-reviews-head h2,.scx-footer-giant{font-weight:500!important}
/* True full-width, top-aligned website previews in the Web and Motion scenes. */
.chapter[data-scene="1"] .browser-content{display:block;padding:10px;height:calc(100% - 36px);overflow:hidden;background:#f8fafc}
.chapter[data-scene="1"] .browser-copy{display:none}
.chapter[data-scene="1"] .browser-content img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;border:0;border-radius:5px;background:#fff}
.chapter[data-scene="1"] .interface-3d{width:min(44vw,620px);height:min(66vh,560px)}
.chapter[data-scene="1"] .mini-browser{overflow:hidden;background:#fff}
.chapter[data-scene="1"] .mini-browser img{width:100%;height:100%;object-fit:cover;object-position:top center}
.chapter[data-scene="3"] .monitor{overflow:hidden;background:#fff}
.chapter[data-scene="3"] .monitor img{width:100%;height:100%;object-fit:cover;object-position:top center}
.chapter[data-scene="3"] .frame-floating{overflow:hidden;background:#fff}
.chapter[data-scene="3"] .frame-floating img{width:100%;height:100%;object-fit:cover;object-position:top center}
/* Featured ZKR Law project remains the centrepiece of the assembled collage. */
#work .project-tile.zkr-featured-tile{z-index:20!important;box-shadow:0 28px 65px rgba(0,0,0,.46),0 0 0 1px rgba(211,255,25,.18)}
#work .project-tile.zkr-featured-tile .project-window img{object-position:top center}
/* Client marquees: contain every logo inside its own card and clip only the moving track. */
.scx-logo-marquee{width:100%;max-width:100%;overflow:hidden;position:relative;isolation:isolate}
.scx-logo-track{display:flex;align-items:center;width:max-content;max-width:none;gap:18px;will-change:transform}
.scx-logo{box-sizing:border-box;flex:0 0 clamp(138px,14vw,192px);width:clamp(138px,14vw,192px);height:92px;min-width:0;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:14px 18px;border:1px solid rgba(177,197,232,.17);border-radius:15px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018))}
.scx-logo img{display:block;width:auto!important;height:auto!important;max-width:100%!important;max-height:58px!important;object-fit:contain!important;object-position:center!important;flex:0 1 auto;filter:grayscale(1);opacity:.74;transition:filter .3s ease,opacity .3s ease,transform .3s ease}
.scx-logo:hover img{filter:grayscale(0);opacity:1;transform:scale(1.04)}
/* About: supplied favicon mark rotates in response to page scroll. */
.scx-core{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.scx-about-mark{width:clamp(94px,12vw,158px);height:clamp(94px,12vw,158px);object-fit:contain;filter:drop-shadow(0 0 28px rgba(0,91,255,.28));transform:rotate(0deg);will-change:transform}
.scx-core small{font-size:9px;letter-spacing:.24em;line-height:1.5;color:#dce8ff;opacity:.78;text-align:center}
/* Reviews: same source review copy, restyled to the SocialCodeStudio navy/blue/lime system. */
.scx-reviews{position:relative;padding:clamp(74px,9vw,132px) 0 92px;background:linear-gradient(180deg,#070c19,#0a1122 55%,#070c18);overflow:hidden;border-top:1px solid rgba(177,197,232,.12);border-bottom:1px solid rgba(177,197,232,.12)}
.scx-reviews-head{max-width:1440px;margin:0 auto;padding:0 clamp(22px,5vw,78px) 46px}
.scx-reviews-head h2{font-size:clamp(42px,6.4vw,86px);line-height:.98;letter-spacing:-.065em;margin:18px 0 12px;color:#f4f6ff}
.scx-reviews-head h2 em{font-style:normal;color:var(--lime)}
.scx-reviews-head p{color:#9eacc8;font-size:15px;line-height:1.7;margin:0}
.scx-review-lane{width:100%;overflow:hidden;margin:14px 0;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.scx-review-track{display:flex;gap:16px;width:max-content;animation:scxReviewMarquee 72s linear infinite}
.scx-review-track.reverse{animation-direction:reverse;animation-duration:84s}
.scx-review-lane:hover .scx-review-track{animation-play-state:paused}
.scx-review-card{width:clamp(270px,27vw,360px);min-height:190px;padding:22px 23px;border:1px solid rgba(155,183,235,.2);border-radius:18px;background:linear-gradient(145deg,rgba(22,38,70,.88),rgba(9,17,34,.94));box-shadow:0 16px 40px rgba(0,0,0,.16);display:flex;flex-direction:column;gap:12px;white-space:normal}
.scx-review-stars{color:var(--lime);font-size:14px;letter-spacing:2px}
.scx-review-quote{margin:0;color:#e8edfa;font-size:14px;line-height:1.65;flex:1}
.scx-review-name{color:#aebbd4;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
@keyframes scxReviewMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Contact form: two-step service picker with the established site styling. */
.scx-form{display:flex;flex-direction:column;gap:17px}
.scx-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.scx-form label{display:flex;flex-direction:column;gap:8px;color:#cbd7ee;font-size:12px;letter-spacing:.04em;font-weight:600}
.scx-form input,.scx-form select,.scx-form textarea{width:100%;min-width:0;border:1px solid rgba(160,188,238,.25);border-radius:12px;background:rgba(8,16,34,.78);color:#f4f6ff;padding:14px 15px;font-family:inherit;font-size:14px;font-weight:500;line-height:1.4;outline:none;transition:border-color .2s ease,box-shadow .2s ease}
.scx-form input::placeholder,.scx-form textarea::placeholder{color:#7888a7}
.scx-form select:disabled{opacity:.48;cursor:not-allowed}
.scx-form input:focus,.scx-form select:focus,.scx-form textarea:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(211,255,25,.10)}
.scx-form textarea{resize:vertical;min-height:112px}
.scx-submit{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:52px;padding:14px 19px;border:1px solid var(--lime);border-radius:999px;background:var(--lime);color:#07101f;font-weight:800;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.scx-submit:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(211,255,25,.18)}
.scx-form-note{margin:0;color:#8391ad;font-size:11px;line-height:1.6}
/* Large editorial footer with a low-opacity, continuously rotating favicon. */
.scx-footer{position:relative;overflow:hidden;padding:clamp(55px,7vw,100px) clamp(20px,5vw,78px) 22px;background:#030610;color:#eaf0ff;border-top:1px solid rgba(169,193,234,.16)}
.scx-footer-top{position:relative;z-index:2;display:grid;grid-template-columns:minmax(220px,1.5fr) repeat(3,minmax(120px,1fr));gap:36px;max-width:1440px;margin:0 auto 65px}
.scx-footer-brand{display:inline-flex;align-items:center;gap:12px;font-size:20px;font-weight:700;letter-spacing:-.04em}
.scx-footer-brand img{width:42px;height:42px;object-fit:contain}
.scx-footer-intro p{max-width:300px;color:#8e9bb5;line-height:1.7;font-size:13px;margin:18px 0 0}
.scx-footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.scx-footer-col h3{margin:0 0 6px;color:#f3f6ff;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500!important}
.scx-footer-col a{color:#8e9bb5;font-size:13px;transition:color .2s ease,transform .2s ease}
.scx-footer-col a:hover{color:var(--lime);transform:translateX(3px)}
.scx-footer-giant{position:relative;z-index:1;font-size:clamp(76px,18.5vw,290px);line-height:.76;letter-spacing:-.095em;white-space:nowrap;text-align:center;color:var(--lime);font-weight:500!important;overflow:hidden;padding:20px 0 34px}
.scx-footer-bottom{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;padding-top:20px;border-top:1px solid rgba(169,193,234,.16);color:#7785a0;font-size:11px}
.scx-footer-bottom a{color:#b8c5df}
.footer-spin-mark{opacity:.18;animation:footerMarkSpin 22s linear infinite}
@keyframes footerMarkSpin{to{transform:rotate(360deg)}}
@media(max-width:760px){
 .topbar{height:auto;min-height:72px;padding:10px 16px 9px;flex-wrap:wrap;row-gap:7px}
 .wordmark img{width:138px;height:42px}
 .nav-right{width:100%;justify-content:space-between;gap:7px;font-size:9px;letter-spacing:.04em;order:2;padding:2px 0 4px}
 .pill.header-cta{min-width:auto;padding:9px 11px;font-size:9px;gap:5px}
 .chapter[data-scene="1"] .interface-3d{width:min(88vw,560px);height:clamp(230px,42vh,390px)}
 .scx-form-row{grid-template-columns:1fr}
 .scx-footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
 .scx-footer-intro{grid-column:1/-1}
 .scx-footer-giant{font-size:clamp(58px,17vw,140px);letter-spacing:-.09em}
 .scx-footer-bottom{align-items:flex-start;flex-direction:column}
 .scx-review-card{width:280px}
}
@media(max-width:390px){.nav-right{font-size:8px}.wordmark img{width:120px}.pill.header-cta{padding:8px 9px}.scx-footer-giant{font-size:16vw}}
@media(prefers-reduced-motion:reduce){.scx-review-track,.footer-spin-mark{animation:none!important}}


/* SOCIALCODESTUDIO FINAL POLISH - requested refinements only; 3D hero scroll engine untouched */

/* Glass navigation and calm entrance */
.topbar{
  background:rgba(5,9,20,.68)!important;
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  backdrop-filter:blur(18px) saturate(145%);
  border-bottom:1px solid rgba(210,225,255,.13)!important;
  box-shadow:0 8px 30px rgba(0,0,0,.12);
}
.nav-right{font-size:14px!important;font-weight:500!important;letter-spacing:.055em!important;gap:clamp(14px,2vw,28px)!important}
.nav-right>a:not(.pill){font-weight:500!important;opacity:.82}
.pill.header-cta{
  color:#081324!important;
  font-size:12px!important;
  font-weight:700!important;
  opacity:1!important;
  visibility:visible!important;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease!important;
}
.pill.header-cta:hover,.pill.header-cta:focus-visible{
  color:#081324!important;
  background:#d4ff28!important;
  opacity:1!important;
  transform:translateY(-2px);
  box-shadow:0 0 34px rgba(200,255,22,.34)!important;
}
.topbar .wordmark,.topbar .nav-right>*{
  opacity:0;
  animation:scxHeaderArrive .85s cubic-bezier(.2,.72,.22,1) forwards;
}
.topbar .wordmark{animation-delay:.08s}
.topbar .nav-right>*:nth-child(1){animation-delay:.16s}
.topbar .nav-right>*:nth-child(2){animation-delay:.23s}
.topbar .nav-right>*:nth-child(3){animation-delay:.30s}
.topbar .nav-right>*:nth-child(4){animation-delay:.37s}
.topbar .nav-right>*:nth-child(5){animation-delay:.44s}
.topbar .nav-right>*:nth-child(6){animation-delay:.51s}
@keyframes scxHeaderArrive{from{opacity:0;transform:translate3d(0,-9px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
[hidden]{display:none!important}

/* The two hero CTAs are intentionally hidden for now, while their markup remains available. */
#top a.action[hidden]{display:none!important}

/* Portfolio: consistent column gutters, clean card edges and project names on hover. */
.project-tile{overflow:visible}
.project-window{position:relative}
.project-label{
  position:absolute;left:8px;right:8px;bottom:8px;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:max-content;max-width:calc(100% - 16px);
  padding:7px 10px;border:1px solid rgba(255,255,255,.18);border-radius:5px;
  background:rgba(4,9,20,.9);backdrop-filter:blur(9px);
  color:#f6f8ff;font-size:clamp(9px,.72vw,12px);font-weight:600;
  letter-spacing:.015em;line-height:1.2;white-space:normal;
  opacity:0;transform:translateY(7px);
  transition:opacity .22s ease,transform .22s ease;
  pointer-events:none;
}
.project-label:after{content:"↗";color:var(--lime,#c8ff16);font-size:13px;flex:0 0 auto}
.project-tile:hover .project-label,.project-tile:focus-visible .project-label{opacity:1;transform:translateY(0)}
.project-tile.is-assembled{cursor:pointer}
.project-tile.is-assembled:hover{outline:0}

/* About: remove the orb/ball and floating labels; keep a larger favicon as the sole visual focus. */
.scx-core.scx-core-mark-only{
  width:clamp(210px,22vw,290px)!important;height:clamp(210px,22vw,290px)!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
  border-radius:0!important;overflow:visible!important;
}
.scx-core-mark-only .scx-about-mark{
  width:clamp(190px,22vw,270px)!important;height:clamp(190px,22vw,270px)!important;
  object-fit:contain;filter:drop-shadow(0 0 34px rgba(20,92,255,.28));
}
.scx-about-visual{min-height:430px}
.scx-about-visual .scx-orbit{opacity:.42}

/* Keep all major section headings at the requested medium weight. */
.portfolio-header h2,
.scx-services h2,.scx-about h2,.scx-process h2,.scx-clients h2,
.scx-standards h2,.scx-reviews h2,.scx-contact h2,
.scx-footer-service-heading h2,.scx-footer-col h3{font-weight:500!important}

/* Client words heading and supporting copy use the same content width as the site sections. */
.scx-reviews-head{
  width:min(1320px,calc(100% - 9vw))!important;
  max-width:1320px!important;
  margin:0 auto!important;
  padding:0 0 46px!important;
}
.scx-reviews-head h2,.scx-reviews-head p{max-width:100%!important;width:100%}

/* Native select menu: dark options and light text in both dropdowns. */
.scx-form select{
  background-color:#0a1020!important;
  color:#f4f6fb!important;
  color-scheme:dark;
}
.scx-form select option{
  background:#0a1020!important;
  color:#f4f6fb!important;
}

/* Footer brand uses the complete horizontal logo, not a standalone favicon + text. */
.scx-footer-brand{display:inline-flex;align-items:center;gap:0!important}
.scx-footer-brand .footer-full-logo{
  display:block;width:clamp(175px,17vw,230px)!important;height:68px!important;
  object-fit:contain!important;object-position:left center!important;
  opacity:1!important;animation:none!important;
}
.scx-footer-intro p{max-width:360px}

/* Full service directory, grouped exactly like the 9 + 18 + 8 service catalogue. */
.scx-footer-service-index{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,4vw,58px);
  padding:48px 0 54px;
  margin:0 clamp(22px,5vw,78px);
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.scx-footer-service-heading{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:4px}
.scx-footer-service-heading h2{
  max-width:720px;margin:0;color:#f3f6ff;
  font-size:clamp(28px,4vw,52px);line-height:1.02;letter-spacing:-.055em;
}
.scx-footer-service-group{display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:0}
.scx-footer-service-group h3{
  margin:0 0 14px;padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.14);
  color:#d5ff27;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
}
.scx-footer-service-link{
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:7px 0;color:#9ba8c0;font-size:12px;line-height:1.45;
  border-bottom:1px solid rgba(255,255,255,.045);
  transition:color .2s ease,transform .2s ease;
}
.scx-footer-service-link span{color:#c8ff16;opacity:0;transition:opacity .2s ease}
.scx-footer-service-link:hover{color:#fff;transform:translateX(3px)}
.scx-footer-service-link:hover span{opacity:1}

/* Large, low-opacity studio signature and subtle infinite favicon watermark. */
.scx-footer{position:relative;isolation:isolate;overflow:hidden}
.scx-footer-watermark{
  position:absolute;z-index:0;pointer-events:none;
  width:clamp(260px,42vw,620px);height:clamp(260px,42vw,620px);
  object-fit:contain;left:50%;top:52%;transform:translate(-50%,-50%);
  opacity:.055;filter:blur(.1px);
  animation:scxFooterWatermarkSpin 58s linear infinite;
}
@keyframes scxFooterWatermarkSpin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.scx-footer-top,.scx-footer-service-index,.scx-footer-bottom{position:relative;z-index:1}
.scx-footer-giant{
  position:relative;z-index:1;
  font-size:clamp(76px,18.5vw,138px)!important;
  letter-spacing:-.045em!important;
  line-height:.9!important;
  opacity:.22!important;
  white-space:nowrap;
  color:#d9e2f5!important;
  font-weight:500!important;
  padding:30px 0 38px!important;
}

/* Responsive footer and navigation; hero/scene scroll code is intentionally untouched. */
@media(max-width:850px){
  .nav-right{font-size:12px!important;gap:10px!important;letter-spacing:.02em!important}
  .scx-footer-service-index{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 22px}
  .scx-footer-service-heading{grid-column:1/-1;display:block}
  .scx-footer-giant{font-size:clamp(76px,18.5vw,138px)!important;letter-spacing:-.045em!important;white-space:normal}
}
@media(max-width:560px){
  .topbar{background:rgba(5,9,20,.82)!important}
  .nav-right{font-size:11px!important;gap:7px!important;flex-wrap:wrap}
  .pill.header-cta{font-size:10px!important;padding:9px 12px!important}
  .scx-core.scx-core-mark-only{width:190px!important;height:190px!important}
  .scx-core-mark-only .scx-about-mark{width:190px!important;height:190px!important}
  .scx-about-visual{min-height:300px}
  .scx-footer-service-index{grid-template-columns:1fr;gap:28px;margin:0 18px;padding:34px 0}
  .scx-footer-service-heading{grid-column:auto}
  .scx-footer-brand .footer-full-logo{width:175px!important;height:58px!important}
  .scx-footer-giant{font-size:clamp(76px,18.5vw,138px)!important;letter-spacing:-.045em!important;white-space:normal;overflow-wrap:anywhere}
  .scx-footer-watermark{width:280px;height:280px;top:48%}
}
@media(prefers-reduced-motion:reduce){
  .topbar .wordmark,.topbar .nav-right>*{animation:none;opacity:1}
  .scx-footer-watermark{animation:none}
}

/* ===== SocialCodeStudio final refinements - November 2026 ===== */
/* Header/footer brand lockup: exact favicon mark + stacked wordmark. */
.brand-lockup{display:inline-flex!important;align-items:center!important;gap:7px!important;text-decoration:none!important;min-width:0}
.brand-lockup .brand-spin{display:block!important;width:42px!important;height:42px!important;object-fit:contain!important;animation:scxBrandSpin 18s linear infinite;transform-origin:50% 50%;flex:0 0 auto}
.brand-lockup .brand-name{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;color:#f4f7ff;font-size:15px;line-height:.86;letter-spacing:-.045em;font-weight:500!important}
.brand-lockup .brand-name span{display:block;font-weight:500!important}
.topbar .brand-lockup .brand-spin{width:42px!important;height:42px!important}
.scx-footer-brand.brand-lockup{gap:9px!important;font-size:inherit!important}
.scx-footer-brand.brand-lockup .brand-spin{width:46px!important;height:46px!important}
@keyframes scxBrandSpin{to{transform:rotate(360deg)}}

/* Gentle first-visit reveal; the pinned hero scroll controller is untouched. */
.topbar{animation:scxHeaderArrive .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes scxHeaderArrive{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:translateY(0)}}
.chapter[data-scene="0"] .chapter-copy>*{animation:scxHeroTextArrive .85s cubic-bezier(.2,.7,.2,1) both}
.chapter[data-scene="0"] .chapter-copy>*:nth-child(1){animation-delay:.10s}
.chapter[data-scene="0"] .chapter-copy>*:nth-child(2){animation-delay:.20s}
.chapter[data-scene="0"] .chapter-copy>*:nth-child(3){animation-delay:.32s}
.chapter[data-scene="0"] .chapter-copy>*:nth-child(4){animation-delay:.42s}
.chapter[data-scene="0"] .visual{animation:scxHeroVisualArrive 1.05s cubic-bezier(.2,.7,.2,1) .18s both}
@keyframes scxHeroTextArrive{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes scxHeroVisualArrive{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}

/* Portfolio: reduce the horizontal inter-column space to 10px on desktop. */
#work .project-tile{left:calc(var(--x)*1% - var(--old-offset,0%) + var(--new-offset,0px))!important}
@media(max-width:850px){
 #work .project-tile{left:calc(var(--x)*1% - var(--m-old-offset,0%) + var(--m-new-offset,0px))!important}
 #work .project-tile:nth-child(3n + 1){--m-old-offset:0%;--m-new-offset:0px}
 #work .project-tile:nth-child(3n + 2){--m-old-offset:5%;--m-new-offset:8px}
 #work .project-tile:nth-child(3n){--m-old-offset:10%;--m-new-offset:16px}
}

/* Service category tabs are now interactive and visually distinct. */
.scx-service-tabs{gap:10px!important;border:0!important;overflow:visible!important}
.scx-tab{border:1px solid rgba(255,255,255,.14)!important;border-radius:12px!important;background:rgba(255,255,255,.035)!important;padding:18px 16px!important;color:#9aa7bf!important;font-size:13px!important;font-weight:500!important;font-family:inherit!important;transition:background .25s,border-color .25s,color .25s,transform .25s!important}
.scx-tab:hover{transform:translateY(-2px);color:#fff!important}
.scx-tab[data-tab="web"].is-active{background:linear-gradient(135deg,rgba(0,91,255,.30),rgba(0,91,255,.10))!important;border-color:#176bff!important;color:#fff!important;box-shadow:0 8px 28px rgba(0,91,255,.13)}
.scx-tab[data-tab="design"].is-active{background:linear-gradient(135deg,rgba(211,255,25,.18),rgba(211,255,25,.055))!important;border-color:#d3ff19!important;color:#f7ffd9!important;box-shadow:0 8px 28px rgba(211,255,25,.08)}
.scx-tab[data-tab="motion"].is-active{background:linear-gradient(135deg,rgba(130,104,255,.22),rgba(130,104,255,.07))!important;border-color:#8874ff!important;color:#f1edff!important;box-shadow:0 8px 28px rgba(130,104,255,.10)}
.scx-tab span{font-weight:500!important}
.scx-service-panel{padding:16px 20px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:16px!important;min-height:150px;transition:background .25s,border-color .25s}
.scx-service-panel[data-panel="web"]{background:linear-gradient(120deg,rgba(0,91,255,.12),rgba(8,16,34,.42));border-color:rgba(23,107,255,.30)!important}
.scx-service-panel[data-panel="design"]{background:linear-gradient(120deg,rgba(211,255,25,.08),rgba(8,16,34,.42));border-color:rgba(211,255,25,.22)!important}
.scx-service-panel[data-panel="motion"]{background:linear-gradient(120deg,rgba(130,104,255,.10),rgba(8,16,34,.42));border-color:rgba(130,104,255,.25)!important}
.scx-service-panel.is-entering{animation:scxPanelIn .32s ease both}
@keyframes scxPanelIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}

/* Bring back the three process pills around the rotating studio favicon. */
.scx-about-visual{position:relative}
.scx-orbit-pill{position:absolute;z-index:4;display:flex;align-items:center;gap:9px;padding:12px 16px;border:1px solid rgba(190,208,245,.22);border-radius:12px;background:rgba(8,14,29,.78);backdrop-filter:blur(12px);color:#e9efff;font-size:11px;letter-spacing:.10em;font-weight:500!important;box-shadow:0 12px 28px rgba(0,0,0,.18)}
.scx-orbit-pill b{color:var(--scx-lime);font-weight:500!important}
.scx-orbit-pill.pill-think{top:13%;left:4%;transform:rotate(-8deg)}
.scx-orbit-pill.pill-design{top:47%;right:0;transform:rotate(7deg)}
.scx-orbit-pill.pill-build{bottom:9%;left:16%;transform:rotate(4deg)}
.scx-core-mark-only{position:relative;z-index:2}

/* Reviews heading aligns with the same content rails as every main section. */
.scx-reviews-head{width:min(1320px,calc(100% - 9vw))!important;max-width:1320px!important;padding:0!important;margin:0 auto 46px!important}
.scx-reviews-head h2{font-weight:500!important}

/* Dark native select menus, readable in Chrome/Windows. */
.scx-form select{background-color:#080f20!important;color:#f4f6ff!important;color-scheme:dark}
.scx-form select option{background:#080f20!important;color:#f4f6ff!important}
.scx-form select:disabled{color:#8d99b0!important;opacity:1}
.scx-submit{font-size:16px!important;font-weight:500!important;padding:17px 22px!important}
.scx-mail-link{font-weight:500!important}

/* Footer service index: four balanced columns, with graphic design split in two. */
.scx-footer-service-index{
 grid-template-columns:repeat(4,minmax(0,1fr))!important;
 margin-left:calc(-1 * clamp(20px,5vw,78px))!important;
 margin-right:calc(-1 * clamp(20px,5vw,78px))!important;
 padding-left:clamp(20px,5vw,78px)!important;
 padding-right:clamp(20px,5vw,78px)!important;
}
.scx-footer-service-heading{align-items:flex-start!important;flex-direction:column!important;gap:12px!important}
.scx-footer-service-heading .scx-kicker{font-size:24px!important;line-height:1.15!important;font-weight:500!important;letter-spacing:.04em!important}
.scx-footer-service-heading h2{font-size:24px!important;line-height:1.2!important;letter-spacing:-.025em!important;max-width:100%!important;font-weight:500!important}
.scx-footer-service-group h3{font-weight:500!important}
.scx-footer-service-link{font-weight:500!important}
.scx-footer-giant{font-size:clamp(76px,18.5vw,138px)!important;letter-spacing:-.045em!important;font-weight:500!important}
.scx-footer-bottom{border-top:1px solid rgba(169,193,234,.16)!important}
.scx-footer-watermark{opacity:.055!important;animation:scxFooterWatermarkSpin 58s linear infinite!important}

/* A consistent 500 maximum weight throughout the page, including buttons and labels. */
body :is(h1,h2,h3,h4,h5,h6,p,a,button,label,span,small,strong,b,li,input,select,textarea,.overline,.chapter-index,.nav-right){font-weight:500!important}
@media(max-width:900px){
 .scx-footer-service-index{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .scx-reviews-head{width:calc(100% - 38px)!important}
 .scx-orbit-pill{padding:9px 11px;font-size:9px}
}
@media(max-width:560px){
 .brand-lockup .brand-spin{width:35px!important;height:35px!important}
 .brand-lockup .brand-name{font-size:13px}
 .scx-footer-brand.brand-lockup .brand-spin{width:38px!important;height:38px!important}
 .scx-footer-service-index{grid-template-columns:1fr!important}
 .scx-footer-service-heading .scx-kicker,.scx-footer-service-heading h2{font-size:21px!important}
 .scx-orbit-pill.pill-think{left:0;top:8%}
 .scx-orbit-pill.pill-design{right:-2%;top:47%}
 .scx-orbit-pill.pill-build{left:5%;bottom:5%}
}
@media(prefers-reduced-motion:reduce){
 .brand-lockup .brand-spin,.topbar,.chapter[data-scene="0"] .chapter-copy>*,.chapter[data-scene="0"] .visual{animation:none!important}
}


/* Header glass treatment and contained swipeable service tabs on compact screens. */
.topbar{background:rgba(5,9,20,.76)!important;backdrop-filter:blur(18px) saturate(135%)!important;-webkit-backdrop-filter:blur(18px) saturate(135%)!important;border-bottom:1px solid rgba(177,197,232,.16)!important}
@media(max-width:850px){.scx-service-tabs{overflow-x:auto!important;scrollbar-width:none!important}.scx-tab{flex:0 0 auto!important;min-width:190px!important}}


/* Refined portfolio: uniform 10px actual spacing between columns and rows */
#work .project-tile:nth-child(1){left:calc(5.35% + (89.6% - 60px) * 0.000000000 + 0px)!important;width:calc((89.6% - 60px) * 0.079462103)!important;}
#work .project-tile:nth-child(2){left:calc(5.35% + (89.6% - 60px) * 0.079462103 + 10px)!important;width:calc((89.6% - 60px) * 0.130806846)!important;}
#work .project-tile:nth-child(3){left:calc(5.35% + (89.6% - 60px) * 0.210268949 + 20px)!important;width:calc((89.6% - 60px) * 0.173594132)!important;}
#work .project-tile:nth-child(4){left:calc(5.35% + (89.6% - 60px) * 0.079462103 + 10px)!important;width:calc((89.6% - 60px) * 0.130806846)!important;}
#work .project-tile:nth-child(5){left:calc(5.35% + (89.6% - 60px) * 0.616136919 + 40px)!important;width:calc((89.6% - 60px) * 0.173594132)!important;}
#work .project-tile:nth-child(6){left:calc(5.35% + (89.6% - 60px) * 0.789731051 + 50px)!important;width:calc((89.6% - 60px) * 0.130806846)!important;}
#work .project-tile:nth-child(7){left:calc(5.35% + (89.6% - 60px) * 0.920537897 + 60px)!important;width:calc((89.6% - 60px) * 0.079462103)!important;}
#work .project-tile:nth-child(8){left:calc(5.35% + (89.6% - 60px) * 0.383863081 + 30px)!important;width:calc((89.6% - 60px) * 0.232273839)!important;}
#work .project-tile:nth-child(9){left:calc(5.35% + (89.6% - 60px) * 0.210268949 + 20px)!important;width:calc((89.6% - 60px) * 0.173594132)!important;}
#work .project-tile:nth-child(10){left:calc(5.35% + (89.6% - 60px) * 0.383863081 + 30px)!important;width:calc((89.6% - 60px) * 0.232273839)!important;}
#work .project-tile:nth-child(11){left:calc(5.35% + (89.6% - 60px) * 0.616136919 + 40px)!important;width:calc((89.6% - 60px) * 0.173594132)!important;}
#work .project-tile:nth-child(12){left:calc(5.35% + (89.6% - 60px) * 0.789731051 + 50px)!important;width:calc((89.6% - 60px) * 0.130806846)!important;}
#work .project-tile:nth-child(13){left:calc(5.35% + (89.6% - 60px) * 0.210268949 + 20px)!important;width:calc((89.6% - 60px) * 0.173594132)!important;}
#work .project-tile:nth-child(14){left:calc(5.35% + (89.6% - 60px) * 0.383863081 + 30px)!important;width:calc((89.6% - 60px) * 0.232273839)!important;}
#work .project-tile:nth-child(15){left:calc(5.35% + (89.6% - 60px) * 0.616136919 + 40px)!important;width:calc((89.6% - 60px) * 0.173594132)!important;}
#work .project-tile:nth-child(2){top:5%!important;height:calc(47.5% - 5px)!important;}
#work .project-tile:nth-child(4){top:calc(52.5% + 5px)!important;height:calc(47.5% - 5px)!important;}
#work .project-tile:nth-child(3){top:calc(0 * ((100% - 20px) / 3 + 10px))!important;height:calc((100% - 20px)/3)!important;}
#work .project-tile:nth-child(9){top:calc(1 * ((100% - 20px) / 3 + 10px))!important;height:calc((100% - 20px)/3)!important;}
#work .project-tile:nth-child(13){top:calc(2 * ((100% - 20px) / 3 + 10px))!important;height:calc((100% - 20px)/3)!important;}
#work .project-tile:nth-child(8){top:calc(0 * ((100% - 20px) / 3 + 10px))!important;height:calc((100% - 20px)/3)!important;}
#work .project-tile:nth-child(10){top:calc(1 * ((100% - 20px) / 3 + 10px))!important;height:calc((100% - 20px)/3)!important;}
#work .project-tile:nth-child(14){top:calc(2 * ((100% - 20px) / 3 + 10px))!important;height:calc((100% - 20px)/3)!important;}
#work .project-tile:nth-child(5){top:calc(0 * ((100% - 20px) / 3 + 10px))!important;height:calc((100% - 20px)/3)!important;}
#work .project-tile:nth-child(11){top:calc(1 * ((100% - 20px) / 3 + 10px))!important;height:calc((100% - 20px)/3)!important;}
#work .project-tile:nth-child(15){top:calc(2 * ((100% - 20px) / 3 + 10px))!important;height:calc((100% - 20px)/3)!important;}
#work .project-tile:nth-child(6){top:5%!important;height:calc(47.5% - 5px)!important;}
#work .project-tile:nth-child(12){top:calc(52.5% + 5px)!important;height:calc(47.5% - 5px)!important;}

/* Align client words to the exact same horizontal rail as all other sections */
.scx-reviews > .scx-wrap{width:min(1320px,calc(100% - 9vw))!important;max-width:1320px!important;margin-inline:auto!important}
.scx-reviews > .scx-wrap > .scx-reviews-head{width:100%!important;max-width:none!important;margin:0 0 46px!important;padding:0!important}
/* Same logo construction and typography as header, now used in footer */
.scx-footer-brand.brand-lockup{gap:9px!important;display:inline-flex!important;align-items:center!important}
.scx-footer-brand.brand-lockup .brand-spin{width:42px!important;height:42px!important}
.scx-footer-brand.brand-lockup .brand-name{display:flex!important;flex-direction:row!important;gap:.25em!important;align-items:center!important;font-size:18px!important;letter-spacing:-.04em!important;white-space:nowrap!important;font-weight:500!important}
/* Accessible mobile navigation drawer */
.scs-menu-toggle{display:none;position:relative;z-index:102;border:1px solid rgba(214,235,255,.25);border-radius:12px;background:rgba(13,24,51,.8);height:43px;width:46px;flex:none;padding:12px;align-items:center;justify-content:center;flex-direction:column;gap:5px;color:white}
.scs-menu-line{display:block;width:21px;height:2px;background:#f1f6ff;border-radius:3px;transition:transform .2s,opacity .2s}
.scs-menu-toggle[aria-expanded=true] .scs-menu-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.scs-menu-toggle[aria-expanded=true] .scs-menu-line:nth-child(2){opacity:0}
.scs-menu-toggle[aria-expanded=true] .scs-menu-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.scs-mobile-menu{display:none;position:absolute;left:12px;right:12px;top:calc(100% + 8px);z-index:101;padding:15px;border:1px solid rgba(172,199,239,.22);border-radius:17px;background:rgba(6,12,29,.98);box-shadow:0 22px 50px #0009;flex-direction:column;gap:5px;backdrop-filter:blur(20px)}
.scs-mobile-menu a{display:block;padding:12px 14px;border-radius:10px;color:#eaf1ff;font-size:15px;font-weight:500!important;text-decoration:none}
.scs-mobile-menu a:hover,.scs-mobile-menu a:focus-visible{background:rgba(24,77,194,.24);color:#d3ff19}
.scs-mobile-menu .scs-mobile-cta{width:100%;text-align:center;background:#d3ff19;color:#071322!important;margin-top:10px;padding:15px;border-radius:30px}
@media(max-width:860px){
 .topbar{overflow:visible!important;isolation:isolate}
 .topbar .nav-right{display:none!important}
 .scs-menu-toggle{display:flex}
 .scs-mobile-menu.is-open{display:flex}
 .scx-reviews>.scx-wrap{width:calc(100% - 38px)!important}
 .scx-footer-brand.brand-lockup .brand-name{font-size:15px!important;white-space:nowrap!important}
 /* On compact screens use a true 3-column grid, regardless of desktop absolute positions. */
 #work .portfolio-stage{left:4%!important;right:4%!important;width:92%!important;max-width:none!important;inset-inline:4%!important;top:23%!important;bottom:11%!important;transform:none!important}

 #work .project-tile:nth-child(1){left:calc(0 * ((100% - 20px) / 3 + 10px))!important;top:calc(0 * ((100% - 40px) / 5 + 10px))!important;width:calc((100% - 20px) / 3)!important;height:calc((100% - 40px) / 5)!important;}
 #work .project-tile:nth-child(2){left:calc(1 * ((100% - 20px) / 3 + 10px))!important;top:calc(0 * ((100% - 40px) / 5 + 10px))!important;width:calc((100% - 20px) / 3)!important;height:calc((100% - 40px) / 5)!important;}
 #work .project-tile:nth-child(3){left:calc(2 * ((100% - 20px) / 3 + 10px))!important;top:calc(0 * ((100% - 40px) / 5 + 10px))!important;width:calc((100% - 20px) / 3)!important;height:calc((100% - 40px) / 5)!important;}
 #work .project-tile:nth-child(4){left:calc(0 * ((100% - 20px) / 3 + 10px))!important;top:calc(1 * ((100% - 40px) / 5 + 10px))!important;width:calc((100% - 20px) / 3)!important;height:calc((100% - 40px) / 5)!important;}
 #work .project-tile:nth-child(5){left:calc(1 * ((100% - 20px) / 3 + 10px))!important;top:calc(1 * ((100% - 40px) / 5 + 10px))!important;width:calc((100% - 20px) / 3)!important;height:calc((100% - 40px) / 5)!important;}
 #work .project-tile:nth-child(6){left:calc(2 * ((100% - 20px) / 3 + 10px))!important;top:calc(1 * ((100% - 40px) / 5 + 10px))!important;width:calc((100% - 20px) / 3)!important;height:calc((100% - 40px) / 5)!important;}
 #work .project-tile:nth-child(7){left:calc(0 * ((100% - 20px) / 3 + 10px))!important;top:calc(2 * ((100% - 40px) / 5 + 10px))!important;width:calc((100% - 20px) / 3)!important;height:calc((100% - 40px) / 5)!important;}
 #work .project-tile:nth-child(8){left:calc(1 * ((100% - 20px) / 3 + 10px))!important;top:calc(2 * ((100% - 40px) / 5 + 10px))!important;width:calc((100% - 20px) / 3)!important;height:calc((100% - 40px) / 5)!important;}
 #work .project-tile:nth-child(9){left:calc(2 * ((100% - 20px) / 3 + 10px))!important;top:calc(2 * ((100% - 40px) / 5 + 10px))!important;width:calc((100% - 20px) / 3)!important;height:calc((100% - 40px) / 5)!important;}
 #work .project-tile:nth-child(10){left:calc(0 * ((100% - 20px) / 3 + 10px))!important;top:calc(3 * ((100% - 40px) / 5 + 10px))!important;width:calc((100% - 20px) / 3)!important;height:calc((100% - 40px) / 5)!important;}
 #work .project-tile:nth-child(11){left:calc(1 * ((100% - 20px) / 3 + 10px))!important;top:calc(3 * ((100% - 40px) / 5 + 10px))!important;width:calc((100% - 20px) / 3)!important;height:calc((100% - 40px) / 5)!important;}
 #work .project-tile:nth-child(12){left:calc(2 * ((100% - 20px) / 3 + 10px))!important;top:calc(3 * ((100% - 40px) / 5 + 10px))!important;width:calc((100% - 20px) / 3)!important;height:calc((100% - 40px) / 5)!important;}
 #work .project-tile:nth-child(13){left:calc(0 * ((100% - 20px) / 3 + 10px))!important;top:calc(4 * ((100% - 40px) / 5 + 10px))!important;width:calc((100% - 20px) / 3)!important;height:calc((100% - 40px) / 5)!important;}
 #work .project-tile:nth-child(14){left:calc(1 * ((100% - 20px) / 3 + 10px))!important;top:calc(4 * ((100% - 40px) / 5 + 10px))!important;width:calc((100% - 20px) / 3)!important;height:calc((100% - 40px) / 5)!important;}
 #work .project-tile:nth-child(15){left:calc(2 * ((100% - 20px) / 3 + 10px))!important;top:calc(4 * ((100% - 40px) / 5 + 10px))!important;width:calc((100% - 20px) / 3)!important;height:calc((100% - 40px) / 5)!important;}
}
@media(max-width:560px){.brand-lockup .brand-spin{width:35px!important;height:35px!important}.wordmark.brand-lockup .brand-name{font-size:13px!important}.scx-footer-brand.brand-lockup .brand-spin{width:35px!important;height:35px!important}.scx-footer-brand.brand-lockup .brand-name{font-size:13px!important}.scs-mobile-menu{left:10px;right:10px}}

/* Match header + footer lockup and user's horizontal branding */
header .brand-lockup .brand-name,footer .brand-lockup .brand-name{display:flex!important;flex-direction:row!important;align-items:center!important;gap:.25em!important;line-height:1.1!important;white-space:nowrap!important;letter-spacing:-.04em!important;font-size:18px!important}
@media(max-width:560px){header .brand-lockup .brand-name,footer .brand-lockup .brand-name{font-size:13px!important;gap:.2em!important}}

/* New second hero chapter: animated growth dashboard, isolated from other scenes. */
.growth-visual{perspective:1000px;isolation:isolate}
.growth-board{position:relative;width:min(100%,570px);padding:25px 27px 20px;background:linear-gradient(145deg,#132652f2,#080e21fa 62%,#0a1735f5);border:1px solid #6c96e46b;border-radius:23px;box-shadow:0 25px 65px #0009,0 0 50px #075bff3b,inset 0 1px 0 #ffffff24;transform:rotateY(-10deg) rotateX(3deg);overflow:hidden}
.growth-board:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 30%,#1b75ff30,transparent 48%);pointer-events:none}
.growth-board-head,.growth-board-footer{position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:800;letter-spacing:.13em;font-size:10px;color:#b6c9f1}.growth-board-head span:first-child{display:flex;align-items:center;gap:9px}.growth-live,.growth-board-footer i{width:8px;height:8px;display:inline-block;border-radius:50%;background:#d3ff19;box-shadow:0 0 14px #d3ff19;animation:growthPulse 2s ease-in-out infinite}.growth-menu{letter-spacing:4px;color:#d3ff19}.growth-stat{position:relative;margin-top:24px;display:flex;flex-direction:column;gap:7px}.growth-stat>span:first-child{font-size:12px;color:#b9c9e9}.growth-stat strong{font-size:clamp(44px,5vw,70px);line-height:1;letter-spacing:-.06em;color:#fff;font-weight:850!important}.growth-stat strong small{font-size:.48em;color:#c7f6ff}.growth-stat strong b{font-size:.52em;color:#d3ff19;margin-left:12px;display:inline-block;animation:growthArrowUp 2.3s ease-in-out infinite}.growth-positive{font-size:11px;color:#d3ff19;font-weight:750!important}.growth-chart{height:205px;position:relative;margin-top:0;overflow:hidden}.growth-grid{position:absolute;inset:5px 0 10px;background:repeating-linear-gradient(to bottom,#89b8fb1c 0,#89b8fb1c 1px,transparent 1px,transparent 44px)}.growth-bars{position:absolute;inset:0 12px 0;display:flex;align-items:end;justify-content:space-around;gap:13px;padding-bottom:9px}.growth-bars i{display:block;flex:1;max-width:43px;height:var(--h);background:linear-gradient(180deg,#51c9ff,#0860ff 60%,#0a2d87);border:1px solid #8ac7ff70;border-radius:7px 7px 2px 2px;box-shadow:0 0 24px #057cff32;transform-origin:bottom;animation:growthBarRise 2.5s cubic-bezier(.19,1,.22,1) var(--delay) both,growthBarGlow 3s ease-in-out calc(var(--delay) + 2.5s) infinite alternate}.growth-graph{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 9px #008dff)}.growth-drawline{stroke-dasharray:100;stroke-dashoffset:100;animation:growthLineDraw 3s ease 0.2s forwards}.growth-arrow,.growth-endpoint{opacity:0;animation:growthArrowShow .5s ease 2.8s forwards}.growth-chart-labels{display:flex;justify-content:space-between;padding:6px 3px 17px;color:#8197c1;letter-spacing:.15em;font-size:9px}.growth-board-footer{border-top:1px solid #a6c2ff26;padding-top:15px;letter-spacing:.06em}.growth-board-footer>span{display:flex;align-items:center;gap:9px}.growth-board-footer strong{color:#d3ff19;font-size:11px;font-weight:750!important}.growth-float{position:absolute;display:flex;align-items:center;gap:10px;background:#081b38e8;border:1px solid #7fb7ff8c;box-shadow:0 16px 32px #0008,0 0 25px #075bff49;backdrop-filter:blur(14px);border-radius:15px;padding:12px 15px;z-index:2;animation:growthFloat 3.4s ease-in-out infinite alternate}.growth-float>span{font-size:25px;color:#d3ff19}.growth-float div{display:flex;flex-direction:column;gap:3px}.growth-float strong{font-size:15px;color:#f5f8ff;font-weight:800!important}.growth-float small{font-size:10px;color:#abbedc}.growth-float-a{right:-3%;top:12%}.growth-float-b{left:-7%;bottom:5%;animation-delay:-1.5s}
@keyframes growthBarRise{from{transform:scaleY(.05);opacity:.3}to{transform:scaleY(1);opacity:1}}@keyframes growthBarGlow{to{filter:brightness(1.35)}}@keyframes growthLineDraw{to{stroke-dashoffset:0}}@keyframes growthArrowShow{to{opacity:1}}@keyframes growthArrowUp{50%{transform:translate(4px,-5px)}}@keyframes growthPulse{50%{opacity:.45;box-shadow:0 0 23px #d3ff19}}@keyframes growthFloat{to{transform:translateY(-11px)}}
@media(max-width:860px){.growth-visual{height:43%}.growth-board{width:min(80vw,490px);padding:18px 19px 14px;transform:rotateY(-4deg)}.growth-stat{margin-top:13px}.growth-stat strong{font-size:clamp(35px,7vw,58px)}.growth-chart{height:clamp(95px,17vh,170px)}.growth-float-a{right:2%;top:4%}.growth-float-b{left:0;bottom:0}.growth-float{padding:8px 10px}.growth-float strong{font-size:12px}}
@media(max-width:540px){.chapter[data-scene="growth"] .chapter-inner{padding-top:75px;padding-bottom:78px;gap:0}.chapter[data-scene="growth"] .chapter-copy p{font-size:12px;line-height:1.5;margin:11px 0}.chapter[data-scene="growth"] h2{font-size:clamp(43px,10.2vw,56px)}.growth-visual{height:40%}.growth-board{width:min(82vw,370px);padding:13px 13px 10px;border-radius:16px}.growth-board-head{font-size:8px}.growth-stat{margin-top:9px;gap:3px}.growth-stat strong{font-size:37px}.growth-stat>span:first-child,.growth-positive{font-size:9px}.growth-chart{height:clamp(90px,16vh,130px)}.growth-chart-labels{font-size:7px;padding-bottom:7px}.growth-board-footer{padding-top:8px;font-size:7px}.growth-board-footer strong{font-size:8px}.growth-float{padding:6px 8px;border-radius:10px}.growth-float-a{right:-1%;top:-3%}.growth-float-b{left:-1%;bottom:-3%}.growth-float strong{font-size:10px}.growth-float small{font-size:8px}.growth-float>span{font-size:17px}}
@media(prefers-reduced-motion:reduce){.growth-board *,.growth-float{animation:none!important}.growth-drawline{stroke-dashoffset:0}.growth-arrow,.growth-endpoint{opacity:1}}

/* Continuous performance visualization: no scroll-handler changes. */
.chapter[data-scene="growth"] .growth-drawline{animation:growthContinuousTrace 4.4s linear infinite;stroke-dasharray:100;}
@keyframes growthContinuousTrace{0%{stroke-dashoffset:100;opacity:.55}75%{stroke-dashoffset:0;opacity:1}95%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-10;opacity:.55}}
.chapter[data-scene="growth"] .growth-arrow{animation:growthArrowBeacon 2.2s ease-in-out infinite;opacity:1}
.chapter[data-scene="growth"] .growth-endpoint{animation:growthPointBeacon 2.2s ease-in-out infinite;opacity:1}
@keyframes growthArrowBeacon{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes growthPointBeacon{0%,100%{opacity:.5}50%{opacity:1}}
.chapter[data-scene="growth"] .growth-bars i{animation:growthBarRise 2.5s cubic-bezier(.19,1,.22,1) var(--delay) both,growthBarBreathe 3.2s ease-in-out calc(var(--delay) + 2.5s) infinite alternate}
@keyframes growthBarBreathe{from{filter:brightness(.9);transform:scaleY(.97)}to{filter:brightness(1.35);transform:scaleY(1)}}
.chapter[data-scene="growth"] .growth-travel-arrow{filter:drop-shadow(0 0 7px #d3ff19) drop-shadow(0 0 12px #087bff)}
/* Match the header favicon's 18-second linear infinite spin in the last hero scene. */
.chapter[data-scene="4"] .final-shape img{animation:scxBrandSpin 18s linear infinite;transform-origin:center center;will-change:transform}
@media(prefers-reduced-motion:reduce){.chapter[data-scene="growth"] .growth-drawline,.chapter[data-scene="growth"] .growth-arrow,.chapter[data-scene="growth"] .growth-endpoint,.chapter[data-scene="growth"] .growth-bars i,.chapter[data-scene="4"] .final-shape img{animation:none!important}.chapter[data-scene="growth"] .growth-travel-arrow{display:none}}

/* Synchronized drawing: a single timeline drives line, arrow and bars. */
.chapter[data-scene="growth"] .growth-stat strong{font-weight:580!important;letter-spacing:-.045em}
.chapter[data-scene="growth"] .growth-stat strong small{font-weight:500!important}
.chapter[data-scene="growth"] .growth-drawline,
.chapter[data-scene="growth"] .growth-arrow,
.chapter[data-scene="growth"] .growth-endpoint{animation:none!important;opacity:0!important}
.chapter[data-scene="growth"] .growth-bars i{animation:none!important;transform:scaleY(.025);opacity:0;will-change:transform,opacity}
.chapter[data-scene="growth"] .growth-travel-arrow{opacity:0;will-change:transform,opacity}
.chapter[data-scene="growth"] .growth-graph>path[fill^="url("]{opacity:0}
.chapter[data-scene="growth"] .growth-synced-trail{fill:none;stroke:#42baff;stroke-width:4.4;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
@media(prefers-reduced-motion:reduce){
 .chapter[data-scene="growth"] .growth-drawline{opacity:1!important;stroke-dashoffset:0!important}
 .chapter[data-scene="growth"] .growth-bars i{transform:scaleY(1)!important;opacity:1!important}
 .chapter[data-scene="growth"] .growth-travel-arrow{opacity:0!important}
}



/* Requested final refinements - keep existing layout and motion systems intact. */
/* Consistent heading tracking on desktop and mobile. */
h1,h2,h3,h4,h5,h6,.section-title,.scx-client-heading h2,.scx-reviews-head h2,.scx-footer-giant{
  letter-spacing:-0.045em!important;
}
/* Uppercase is intentionally limited to the first hero chapter heading. */
.chapter[data-scene="0"] h1{text-transform:uppercase!important;letter-spacing:-0.045em!important;}
@media(max-width:860px){
  h1,h2,h3,h4,h5,h6,.section-title,.scx-client-heading h2,.scx-reviews-head h2,.scx-footer-giant{letter-spacing:-0.045em!important;}
  .chapter[data-scene="0"] h1{letter-spacing:-0.045em!important;}
}
/* Client logos: monochrome white by default, original brand colours on hover. */
.scx-logo-link{width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-width:0;}
.scx-logo img{filter:grayscale(1) brightness(0) invert(1)!important;opacity:.92!important;transition:filter .35s ease,opacity .35s ease,transform .35s ease!important;}
.scx-logo:hover img,.scx-logo-link:focus-visible img{filter:none!important;opacity:1!important;transform:scale(1.045);}
.scx-logo:hover{border-color:rgba(211,255,25,.42);}
/* Match every primary call-to-action to the existing header pill. */
.action,.scs-mobile-cta,.scx-submit{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;
  min-height:46px!important;padding:12px 20px!important;border:1px solid var(--scx-lime,#d3ff19)!important;
  border-radius:999px!important;background:var(--scx-lime,#d3ff19)!important;color:#081324!important;
  box-shadow:0 0 28px rgba(211,255,25,.22)!important;font:800 12px/1.1 Inter,ui-sans-serif,system-ui,sans-serif!important;
  letter-spacing:.02em!important;text-decoration:none!important;transition:transform .25s ease,box-shadow .25s ease,background .25s ease!important;
}
.action:hover,.scs-mobile-cta:hover,.scx-submit:hover{
  color:#081324!important;background:#e0ff55!important;box-shadow:0 0 34px rgba(211,255,25,.4)!important;transform:translateY(-2px)!important;
}
.scx-submit{cursor:pointer!important;}



/* Final requested heading rhythm across every hero scene and page section. */
h1,h2,h3,h4,h5,h6{line-height:.85!important}
.chapter h1,.chapter h2{letter-spacing:-.045em!important;line-height:.85!important}

/* Match the About text link to the header CTA pill. */
.scx-about-copy .scx-text-link{
 display:inline-flex!important;align-items:center;justify-content:center;gap:9px;
 margin-top:25px;padding:13px 20px;border:1px solid var(--lime);border-radius:99px;
 background:var(--lime);color:#081324!important;text-decoration:none!important;
 font-size:12px;font-weight:600;line-height:1;letter-spacing:.02em;
 box-shadow:0 0 28px #ceff2440;transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.scx-about-copy .scx-text-link:hover{background:#e0ff55;box-shadow:0 0 34px #d3ff1966;transform:translateY(-2px)}
.scx-about-copy .scx-text-link span{display:inline-block;transition:transform .25s ease}
.scx-about-copy .scx-text-link:hover span{transform:translate(2px,-2px)}

/* Form submit: 15px uppercase. */
.scx-form .scx-submit{
 font-size:15px!important;text-transform:uppercase!important;letter-spacing:.045em!important;
 font-weight:600!important;line-height:1.1!important;
}

/* Keep native select controls, but give the chevron comfortable right-side spacing. */
.scx-form select{
 -webkit-appearance:none!important;appearance:none!important;
 padding-right:46px!important;
 background-image:
  linear-gradient(45deg,transparent 50%,#d3ff19 50%),
  linear-gradient(135deg,#d3ff19 50%,transparent 50%)!important;
 background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%!important;
 background-size:6px 6px,6px 6px!important;background-repeat:no-repeat!important;
}
.scx-form select option{background:#080f20!important;color:#f4f6ff!important}
.scx-form select option:hover,.scx-form select option:focus,.scx-form select option:checked{
 background:#d3ff19!important;color:#081324!important;
}


/* HERO: uppercase every scene heading, not only the opening scene. */
.chapter h1,
.chapter h2{
  text-transform:uppercase!important;
}

/* Standard section-heading system outside the hero.
   Keep the hero's intentionally larger, scene-specific typography. */
body h2:not(.chapter h2){
  font-size:clamp(42px,6.1vw,82px)!important;
  line-height:1.08!important;
  letter-spacing:-.045em!important;
  text-wrap:balance;
}
body :is(h3){
  line-height:1.18!important;
}
body h2:not(.chapter h2) em{
  line-height:inherit!important;
}
@media(max-width:860px){
  body h2:not(.chapter h2){
    font-size:clamp(38px,7.2vw,58px)!important;
    line-height:1.08!important;
  }
}
@media(max-width:540px){
  body h2:not(.chapter h2){
    font-size:clamp(34px,8.4vw,46px)!important;
    line-height:1.1!important;
    letter-spacing:-.04em!important;
  }
}

/* CTA buttons: one readable 16px size and normal title-case text. */
body :is(.nav-right .pill,.action,.scs-mobile-cta,.scx-submit,
  .scx-about-copy .scx-text-link,.after-contact a){
  font-size:16px!important;
  line-height:1.15!important;
  text-transform:capitalize!important;
  letter-spacing:0!important;
}
.scx-form .scx-submit{
  font-size:16px!important;
  text-transform:capitalize!important;
  letter-spacing:0!important;
}

/* Restore the browser's original native select chevron; keep it comfortably inset. */
.scx-form select{
  -webkit-appearance:auto!important;
  appearance:auto!important;
  background-image:none!important;
  padding-right:18px!important;
  accent-color:#d3ff19;
}
.scx-form select:hover,
.scx-form select:focus{
  border-color:#d3ff19!important;
  box-shadow:0 0 0 2px rgba(211,255,25,.13)!important;
}
.scx-form select option{
  background-color:#080f20!important;
  color:#f4f6ff!important;
}
.scx-form select option:checked,
.scx-form select option:hover,
.scx-form select option:focus{
  background-color:#d3ff19!important;
  color:#081324!important;
}

/* Same clear hierarchy for all non-hero section headings. */
body h2:not(.chapter h2){font-size:clamp(42px,6.1vw,82px)!important;line-height:1.08!important}
body h3{font-size:clamp(20px,1.8vw,24px)!important;line-height:1.2!important}
@media(max-width:860px){
 body h2:not(.chapter h2){font-size:clamp(38px,7.2vw,58px)!important;line-height:1.08!important}
 body h3{font-size:21px!important;line-height:1.2!important}
}
@media(max-width:540px){
 body h2:not(.chapter h2){font-size:clamp(34px,8.4vw,46px)!important;line-height:1.1!important}
 body h3{font-size:19px!important;line-height:1.22!important}
}


/* Desktop heading rhythm: 1.1 without changing the established type scale. */
@media(min-width:861px){
  .chapter h1,.chapter h2,
  body h2:not(.chapter h2),
  body h3{line-height:1.1!important}
}
/* Restore the footer CTA heading's original size; only adjust its line-height. */
.after-contact h2{
  font-size:clamp(40px,6vw,88px)!important;
  line-height:1.1!important;
  letter-spacing:-.08em!important;
}
/* Keep the existing select chevron design, with its right edge 2px from the control. */
.scx-form select{
  -webkit-appearance:none!important;
  appearance:none!important;
  padding-right:22px!important;
  background-image:
    linear-gradient(45deg,transparent 50%,#d3ff19 50%),
    linear-gradient(135deg,#d3ff19 50%,transparent 50%)!important;
  background-position:
    calc(100% - 8px) 50%,
    calc(100% - 2px) 50%!important;
  background-size:6px 6px,6px 6px!important;
  background-repeat:no-repeat!important;
}


/* Restore the original tight hero heading leading. Do not apply the global 1.1 rule here. */
.chapter h1,
.chapter h2{
  line-height:.94!important;
}
/* Restore the footer CTA heading to its original size, spacing and tight leading. */
.after-contact h2{
  font-size:clamp(40px,6vw,88px)!important;
  line-height:.94!important;
  letter-spacing:-.08em!important;
}
/* Use the browser's original V-shaped select arrow; remove the custom triangle artwork. */
.scx-form select{
  -webkit-appearance:menulist!important;
  appearance:auto!important;
  background-image:none!important;
  background-position:initial!important;
  background-size:initial!important;
  background-repeat:initial!important;
  padding-right:2px!important;
}


/* 1) Only the six hero-scene headings get the requested .85 line-height. */
.chapter h1,
.chapter h2{
  line-height:.85!important;
}

/* 2) About CTA: match the header pill treatment, with glow on hover only. */
.scx-about-copy .scx-text-link{
  box-shadow:none!important;
  text-shadow:none!important;
  transition:background-color .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease!important;
}
.scx-about-copy .scx-text-link:hover{
  box-shadow:0 0 28px #ceff2440!important;
  transform:translateY(-1px)!important;
}

/* 3) Form CTA: no resting shadow; the same restrained hover glow as the header CTA. */
.scx-form .scx-submit{
  box-shadow:none!important;
  text-shadow:none!important;
  transition:transform .2s ease,box-shadow .2s ease!important;
}
.scx-form .scx-submit:hover{
  box-shadow:0 0 28px #ceff2440!important;
  transform:translateY(-1px)!important;
}

/* 4) Keep the V-shaped chevron, recolour it lime, and give it right-side breathing room. */
.scx-form select{
  -webkit-appearance:none!important;
  appearance:none!important;
  padding-right:38px!important;
  background-image:url("../../assets/images/original-fa9714bb30695460.svg")!important;
  background-repeat:no-repeat!important;
  background-position:right 12px center!important;
  background-size:14px 14px!important;
}

/* 5) Footer column titles: 18px. Service index heading: compact 22–24px. */
.scx-footer-col h3{
  font-size:18px!important;
  letter-spacing:.08em!important;
}
.scx-footer-service-heading h2{
  font-size:clamp(22px,2vw,24px)!important;
  line-height:1.2!important;
  letter-spacing:-.035em!important;
}

/* 6) Footer brand wordmark text in lime. */
.scx-footer-brand .brand-name,
.scx-footer-brand .brand-name span{
  color:var(--scx-lime,#c8ff16)!important;
}


/* HERO ONLY: all six tab headings share the requested 80px size. */
.chapter h1,
.chapter h2{
  font-size:80px!important;
  line-height:.85!important;
}
@media(max-width:860px){
  .chapter h1,.chapter h2{
    font-size:clamp(48px,10vw,80px)!important;
    line-height:.85!important;
  }
}

/* Footer navigation column headings: Explore / Services / Connect. */
.scx-footer-col h3{
  font-size:18px!important;
  letter-spacing:.03em!important;
}

/* Keep this footer service-index heading independent from all other h2 rules. */
.scx-footer-service-heading h2{
  font-size:22px!important;
  line-height:1.2!important;
  letter-spacing:-.035em!important;
}

/* Service group headings only. */
.scx-footer-service-group h3{
  margin:0 0 14px!important;
  padding-bottom:12px!important;
  border-bottom:1px solid rgba(255,255,255,.14)!important;
  color:#d5ff27!important;
  font-size:16px!important;
  line-height:1.2!important;
  letter-spacing:.02em!important;
  text-transform:uppercase!important;
}

/* Footer brand lockup stays the same white as the header wordmark. */
.scx-footer-brand .brand-name,
.scx-footer-brand .brand-name span{
  color:#f4f6fb!important;
}

/* Only the large second-last footer signature is lime. */
.scx-footer-giant{
  color:#c8ff16!important;
}


/* Footer service-index title: isolated 22px rule, placed last to defeat inherited section-heading scales. */
footer .scx-footer-service-index .scx-footer-service-heading h2,
.scx-footer-service-index .scx-footer-service-heading h2{
  font-size:22px!important;
  line-height:1.2!important;
  letter-spacing:-.025em!important;
  max-width:100%!important;
  font-weight:500!important;
}

/* Match all primary CTA buttons to the header "Let's Talk" pill. */
.action,
.scs-mobile-cta,
.scx-submit,
.scx-about-copy .scx-text-link,
.after-contact a,
.scx-contact a[href^="mailto:"],
.scx-contact button,
.scx-contact input[type="submit"]{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  min-height:46px!important;
  padding:12px 20px!important;
  border:1px solid var(--lime,#c8ff16)!important;
  border-radius:999px!important;
  background:var(--lime,#c8ff16)!important;
  color:#081324!important;
  box-shadow:0 0 28px #ceff2440!important;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;
  font-size:16px!important;
  font-weight:900!important;
  line-height:1.1!important;
  letter-spacing:0!important;
  text-transform:capitalize!important;
  text-decoration:none!important;
  text-shadow:none!important;
  cursor:pointer!important;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease!important;
}
.action:hover,
.scs-mobile-cta:hover,
.scx-submit:hover,
.scx-about-copy .scx-text-link:hover,
.after-contact a:hover,
.scx-contact a[href^="mailto:"]:hover,
.scx-contact button:hover,
.scx-contact input[type="submit"]:hover{
  background:#e0ff55!important;
  color:#081324!important;
  box-shadow:0 0 34px #d3ff1966!important;
  transform:translateY(-2px)!important;
}
/* Preserve the contact form's full-width submit layout. */
.scx-form .scx-submit{
  display:flex!important;
  width:100%!important;
}


/* All primary CTA buttons, including header and form: medium weight, no resting glow. */
.pill,
.action,
.scs-mobile-cta,
.scx-submit,
.scx-about-copy .scx-text-link,
.after-contact a,
.scx-contact a[href^="mailto:"],
.scx-contact button,
.scx-contact input[type="submit"]{
  font-weight:500!important;
  box-shadow:none!important;
}

/* Glow appears only while hovering/focusing the button. */
.pill:hover,
.pill:focus-visible,
.action:hover,
.action:focus-visible,
.scs-mobile-cta:hover,
.scs-mobile-cta:focus-visible,
.scx-submit:hover,
.scx-submit:focus-visible,
.scx-about-copy .scx-text-link:hover,
.scx-about-copy .scx-text-link:focus-visible,
.after-contact a:hover,
.after-contact a:focus-visible,
.scx-contact a[href^="mailto:"]:hover,
.scx-contact a[href^="mailto:"]:focus-visible,
.scx-contact button:hover,
.scx-contact button:focus-visible,
.scx-contact input[type="submit"]:hover,
.scx-contact input[type="submit"]:focus-visible{
  box-shadow:0 0 34px #d3ff1966!important;
}


/* Mobile CTA typography: desktop remains 16px. */
@media(max-width:860px){
  .pill,
  .action,
  .scs-mobile-cta,
  .scx-submit,
  .scx-about-copy .scx-text-link,
  .after-contact a,
  .scx-contact a[href^="mailto:"],
  .scx-contact button,
  .scx-contact input[type="submit"]{
    font-size:14px!important;
  }
}

/* Slightly shorten the sticky project/hero scroll journey for a quicker progression. */
.scroll-shell{
  height:330vh!important;
}


@media(max-width:860px){
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .pill,
  .action,
  .scs-mobile-cta,
  .scx-submit,
  .scx-about-copy .scx-text-link,
  .after-contact a,
  .scx-contact a[href^="mailto:"]{
    font-size:14px!important;
  }
}


@media screen and (max-width: 860px) {
  /* Header CTA has its own .pill.header-cta font-size rule, so override it explicitly. */
  body .topbar .nav-right a.pill.header-cta,
  body .topbar .nav-right a.pill,
  body a.action,
  body a.scs-mobile-cta,
  body .scx-form button.scx-submit,
  body .scx-form input.scx-submit,
  body .scx-form .scx-submit,
  body .scx-about-copy a.scx-text-link,
  body .after-contact a,
  body .scx-contact a[href^="mailto:"],
  body .scx-contact button,
  body .scx-contact input[type="submit"],
  body button,
  body input[type="button"],
  body input[type="submit"],
  body input[type="reset"] {
    font-size:14px!important;
  }
}


@media(max-width:540px){
  /* Keep the Growth heading at the same scale as the other hero-tab headings. */
  .chapter[data-scene="growth"] h2{
    font-size:clamp(45px,11vw,59px)!important;
    line-height:.85!important;
  }

  /* The copy stays short, but its font size matches the other hero-tab paragraphs. */
  .chapter[data-scene="growth"] .chapter-copy p{
    font-size:14px!important;
    line-height:1.5!important;
    margin:12px 0 0!important;
    max-width:100%!important;
  }

  /* Separate the dashboard from the paragraph so the two never overlap. */
  .chapter[data-scene="growth"] .chapter-inner{
    gap:18px!important;
  }
  .chapter[data-scene="growth"] .growth-visual{
    height:38%!important;
    flex:0 0 38%!important;
    margin-top:8px!important;
    min-height:0!important;
  }
}


@media(max-width:540px){
  /* Make the growth scene a strict vertical stack, not a centered flex layout. */
  .chapter[data-scene="growth"] .chapter-inner{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    gap:0!important;
    padding-top:58px!important;
    padding-bottom:105px!important;
    height:100%!important;
    box-sizing:border-box!important;
  }
  .chapter[data-scene="growth"] .chapter-copy{
    position:relative!important;
    z-index:8!important;
    flex:0 0 auto!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }
  .chapter[data-scene="growth"] .chapter-copy p{
    display:block!important;
    position:relative!important;
    z-index:8!important;
    margin:12px 0 0!important;
    max-width:100%!important;
    font-size:14px!important;
    line-height:1.5!important;
  }
  /* Reserve a separate lower zone for the dashboard, with a clear gap after the copy. */
  .chapter[data-scene="growth"] .growth-visual{
    position:relative!important;
    z-index:4!important;
    display:grid!important;
    place-items:center!important;
    flex:0 0 34vh!important;
    width:100%!important;
    height:34vh!important;
    min-height:250px!important;
    max-height:360px!important;
    margin:28px 0 0!important;
    transform:none!important;
  }
  .chapter[data-scene="growth"] .growth-board{
    width:min(82vw,370px)!important;
    height:100%!important;
    max-height:100%!important;
    box-sizing:border-box!important;
    transform:none!important;
  }
}


@media(max-width:540px){
  .chapter[data-scene="growth"] .chapter-copy{
    padding-top:34px!important;
    overflow:visible!important;
  }
  .chapter[data-scene="growth"] .chapter-copy .overline{
    display:flex!important;
    position:relative!important;
    visibility:visible!important;
    opacity:1!important;
    transform:none!important;
    height:auto!important;
    min-height:14px!important;
    margin:0 0 18px!important;
    z-index:10!important;
  }
  .chapter[data-scene="growth"] .chapter-copy h2{
    margin-top:0!important;
  }
  .chapter[data-scene="growth"] .growth-visual{
    margin-top:18px!important;
    flex-basis:32vh!important;
    height:32vh!important;
  }
}


@media(max-width:560px){
  /* Header and footer: rotating brand mark 48px, wordmark text 16px. */
  header .brand-lockup .brand-spin,
  .topbar .brand-lockup .brand-spin,
  footer .brand-lockup .brand-spin,
  .scx-footer-brand.brand-lockup .brand-spin{
    width:48px!important;
    height:48px!important;
    flex:0 0 48px!important;
  }
  header .brand-lockup .brand-name,
  .topbar .brand-lockup .brand-name,
  footer .brand-lockup .brand-name,
  .scx-footer-brand.brand-lockup .brand-name{
    font-size:16px!important;
    line-height:1!important;
  }

  /* Services categories: three full-width stacked buttons, no horizontal scrolling. */
  #services .scx-service-tabs{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    overflow-x:visible!important;
    overflow-y:visible!important;
    padding:0!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
    scroll-snap-type:none!important;
  }
  #services .scx-service-tabs .scx-tab{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    margin:0!important;
    white-space:normal!important;
    overflow:visible!important;
  }
}


/* Browser page scrollbar - Social Code Studio theme */
html{
  scrollbar-width:thin!important;
  scrollbar-color:#d5ff27 #080d1b!important;
}
body{
  scrollbar-width:thin!important;
  scrollbar-color:#d5ff27 #080d1b!important;
}
::-webkit-scrollbar{
  width:10px!important;
  height:10px!important;
}
::-webkit-scrollbar-track{
  background:#080d1b!important;
  border-left:1px solid rgba(255,255,255,.08)!important;
}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#d5ff27 0%,#a8e900 100%)!important;
  border:2px solid #080d1b!important;
  border-radius:999px!important;
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#e4ff66 0%,#c4f51b 100%)!important;
}
::-webkit-scrollbar-corner{
  background:#080d1b!important;
}