/* The opening remains familiar; it now leaves the screen in the normal flow. */
.experience--intro{overflow:clip}
.experience--intro .experience-stage{position:absolute;inset:0;height:100%;pointer-events:none}
.experience--intro .experience-chapters{margin-top:0}
.experience--intro .experience-chapter{min-height:100svh}
.experience--intro .chapter-copy{transform:translateY(-3svh)}
.experience--intro .experience-interface{position:absolute;inset:0;height:auto;margin:0;pointer-events:none}
.experience--intro .scene-explainer a{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:10px;color:#9a9e9b;pointer-events:auto}
.experience--intro .scene-bottomline{pointer-events:auto}
.experience--intro .scene-bottomline a{display:inline-flex;align-items:center;min-height:44px}
.experience--intro .scene-explainer a:hover,.experience--intro .scroll-hint:hover{color:#b6ed79}

.services-section{position:relative;z-index:2;padding-block:108px 90px;scroll-margin-top:0}
.services-heading{display:grid;grid-template-columns:1.4fr 1fr;align-items:end;gap:48px;margin-bottom:48px}
.services-heading .section-label{margin-bottom:24px}
.services-heading h2{font-size:clamp(36px,4.4vw,62px);line-height:1.08;letter-spacing:-.05em}
.services-heading h2 span{color:#777e79}
.services-heading>p{max-width:330px;justify-self:end;color:#a9aeaa;font-size:14px;line-height:1.7;margin:0 0 3px}
.service-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.service-card{--card-accent:#b6ed79;--tilt-x:0deg;--tilt-y:0deg;--light-x:50%;--light-y:25%;min-width:0;display:block;perspective:1100px;outline-offset:7px;border-radius:14px}
.service-card--software{--card-accent:#b8d5c4}
.service-card--decompile{--card-accent:#bbc8e2}
.service-card__surface{position:relative;display:flex;flex-direction:column;height:100%;padding:26px 26px 0;border:1px solid #ffffff21;border-radius:14px;background:linear-gradient(160deg,#151916,#0b0e0c 68%);transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .3s ease,border-color .3s,box-shadow .3s;overflow:hidden}
.service-card--software .service-card__surface{background:linear-gradient(160deg,#151b19,#0b0e0d 68%)}
.service-card--decompile .service-card__surface{background:linear-gradient(160deg,#171a20,#0c0e11 68%)}
.service-card__surface::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at var(--light-x) var(--light-y),#ffffff0b,transparent 65%);opacity:0;transition:opacity .3s}
.service-card[data-pointer-active=true] .service-card__surface{transition:transform .12s ease-out,border-color .3s,box-shadow .3s}
.service-card:hover .service-card__surface,.service-card:focus-visible .service-card__surface{border-color:#ffffff47;box-shadow:0 16px 38px #0005}
.service-card:hover .service-card__surface::after{opacity:1}
.service-card__meta{display:flex;align-items:center;gap:12px;font-size:9px;line-height:1.5;letter-spacing:.035em;color:#9a9e9b;position:relative;z-index:2}
.service-card__meta>span:first-child{color:var(--card-accent);font-variant-numeric:tabular-nums}
.service-card__marker{margin-left:auto;width:5px;height:5px;border-radius:50%;background:var(--card-accent)}
.service-card__art{height:260px;position:relative;margin:10px -10px 16px;perspective:800px;isolation:isolate;pointer-events:none}
.art-orbit{position:absolute;left:50%;top:50%;width:230px;height:230px;border:1px solid #ffffff05;border-radius:50%;transform:translate(-50%,-50%)}
.art-orbit::after{content:'';position:absolute;inset:30px;border:1px solid #ffffff05;border-radius:50%}
.service-card__copy{position:relative;z-index:2;flex:1}
.service-card__copy h3{font-size:clamp(26px,2.65vw,39px);font-weight:450;letter-spacing:-.05em;line-height:1.12;margin-bottom:17px;overflow-wrap:anywhere}
.service-card__copy h3>span{color:var(--card-accent)}
.service-card__copy p{font-size:14px;line-height:1.7;color:#a9aeaa;max-width:37ch;margin:0 0 24px}
.service-card__tags{display:flex;flex-wrap:wrap;gap:8px 14px;color:#878e89;font-size:10px;margin-bottom:28px}
.service-card__tags>span+span::before{content:'·';margin-right:14px;color:var(--card-accent)}
.service-card__footer{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #ffffff1c;min-height:66px;font-size:11px;line-height:1.4;color:#d9dfda}
.service-card__footer>span:last-child{font-size:23px;color:var(--card-accent);transition:transform .25s}
.service-card:hover .service-card__footer>span:last-child{transform:translate(2px,-2px)}
.services-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 32px;margin-top:26px;font-size:11px;color:#878e89}
.services-foot a{display:inline-flex;gap:22px;align-items:center;min-height:44px;color:#c6cdc7}
.services-foot a:hover{color:#b6ed79}

/* Web: a real layout translated into two lightweight dimensional surfaces. */
.web-window,.web-sheet,.web-mobile{position:absolute;border-radius:7px}
.web-window{width:224px;height:163px;left:50%;top:46px;margin-left:-122px;background:#e7e9e2;border:1px solid #f3f5ee;box-shadow:8px 10px 0 #626b5e,18px 26px 30px #0006;transform:rotateX(10deg) rotateY(-18deg) rotateZ(-8deg);animation:web-float 8s ease-in-out infinite}
.web-chrome{height:20px;display:flex;align-items:center;gap:4px;padding:0 8px;background:#d5d9cf;border-radius:6px 6px 0 0;border-bottom:1px solid #bcc1b6}
.web-chrome>span{width:3px;height:3px;border-radius:50%;background:#8d9487}
.web-chrome>i{font-size:6px;letter-spacing:.03em;font-style:normal;color:#6f7869;margin-left:40px}
.web-layout{padding:12px;position:relative;height:140px;color:#232c22}
.web-menu{display:flex;align-items:center;gap:6px;margin-bottom:18px}
.web-menu>b{width:28px;height:5px;background:#293426;margin-right:auto}
.web-menu>i{width:15px;height:2px;background:#959f8d}
.web-headline{display:flex;flex-direction:column;gap:4px;width:105px}
.web-headline>span{height:7px;background:#384431;width:100%;border-radius:1px}
.web-headline>span:nth-child(2){width:80%}
.web-headline>span:last-child{width:54%;background:#7b896a}
.web-caption{width:69px;height:2px;background:#9ca58f;margin-top:10px}
.web-cta{width:37px;height:11px;background:#a7c97c;margin-top:9px;border:1px solid #91ad6b}
.web-bottom{position:absolute;left:12px;right:12px;bottom:10px;display:flex;gap:8px;border-top:1px solid #a2ac963b;padding-top:7px}
.web-bottom>span{height:2px;background:#abb39f;flex:1}
.web-sculpture{position:absolute;right:17px;top:49px;display:flex;gap:4px;align-items:end;transform:skewY(-14deg)}
.web-sculpture i{display:block;width:16px;height:37px;background:#647653;box-shadow:4px 2px 0 #b3c89b}
.web-sculpture i:nth-child(2){height:60px;background:#8ca96c}
.web-sculpture i:nth-child(3){height:46px;background:#b3ce91}
.web-sheet--back{width:219px;height:157px;left:50%;top:33px;margin-left:-109px;border:1px solid #7c8b6659;background:#172013;transform:rotateX(10deg) rotateY(-18deg) rotateZ(5deg);animation:sheet-float 8s ease-in-out infinite}
.web-mobile{left:calc(50% + 60px);top:115px;width:58px;height:100px;background:#e5e9df;border:3px solid #7e8875;box-shadow:4px 5px 0 #394331,7px 10px 15px #0004;transform:rotateY(-18deg) rotateZ(8deg);padding:7px;animation:mobile-float 8s ease-in-out infinite}
.web-mobile>span{width:13px;height:2px;background:#75806a;display:block;margin:0 auto 12px}
.web-mobile>div{height:30px;background:#a0b38c;margin-bottom:7px}
.web-mobile>i{display:block;height:2px;background:#96a289;margin-bottom:4px}
.web-mobile>i:nth-of-type(2){width:65%}
.web-mobile>b{display:block;width:19px;height:6px;background:#789e56;margin-top:7px}
@keyframes web-float{0%,100%{transform:translateY(0) rotateX(10deg) rotateY(-18deg) rotateZ(-8deg)}50%{transform:translateY(-8px) rotateX(14deg) rotateY(-14deg) rotateZ(-6deg)}}
@keyframes sheet-float{0%,100%{transform:translateY(0) rotateX(10deg) rotateY(-18deg) rotateZ(5deg)}50%{transform:translateY(4px) rotateX(12deg) rotateY(-15deg) rotateZ(8deg)}}
@keyframes mobile-float{0%,100%{transform:translateY(0) rotateY(-18deg) rotateZ(8deg)}50%{transform:translateY(7px) rotateY(-12deg) rotateZ(5deg)}}

/* Software: a workspace, a connected record and a small logic layer. */
.software-window{position:absolute;left:50%;top:44px;margin-left:-120px;width:240px;height:165px;border:1px solid #77877c;border-radius:7px;display:flex;background:#27352e;box-shadow:6px 8px 0 #121b16,15px 22px 30px #0006;transform:rotateX(10deg) rotateY(17deg) rotateZ(-7deg);animation:software-float 9s ease-in-out infinite}
.software-rail{width:31px;background:#18271e;border-right:1px solid #48594c;padding:12px 9px;border-radius:6px 0 0 6px}
.software-rail>b{display:block;width:12px;height:12px;border:1px solid #9abd9e;border-radius:3px;margin-bottom:22px}
.software-rail>i{display:block;width:9px;height:3px;margin-bottom:12px;background:#65806b}
.software-workspace{flex:1;padding:12px}
.software-topline{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #74897a38;padding-bottom:8px;color:#b2c4b7;font-size:6px;letter-spacing:.03em}
.software-topline>i{width:6px;height:6px;border-radius:50%;background:#b6ed79}
.software-heading{width:80px;height:5px;background:#bdcfc1;margin-block:13px}
.software-columns{display:flex;gap:7px;height:66px}
.software-columns>div{flex:1;background:#1b2a21;border:1px solid #4d6553;border-radius:3px;padding:6px}
.software-columns>div>i{display:block;background:#82a18a;width:60%;height:2px;margin-bottom:9px}
.software-columns span{display:block;height:15px;border:1px solid #6b8775;background:#4a6453;margin-top:5px;border-radius:2px}
.software-columns>div:nth-child(2)>span{background:#a1c18c;border-color:#b6d9a1}
.software-columns>div:nth-child(3)>span{background:#33473a}
.software-progress{height:3px;background:#485c4c;margin-top:13px;overflow:hidden}
.software-progress>span{display:block;width:45%;height:100%;background:#a6cc95;animation:record-progress 5s ease-in-out infinite;transform-origin:left}
.software-record{position:absolute;left:50%;top:182px;width:177px;display:flex;align-items:center;gap:10px;padding:11px 12px;background:#d3dfd3;border:1px solid #edf3e9;border-radius:5px;color:#213627;box-shadow:4px 5px 0 #627c64,10px 12px 19px #0004;transform:translateX(-64%) rotateY(12deg) rotateZ(-4deg);animation:record-float 9s ease-in-out infinite}
.record-check{display:grid;place-items:center;border:1px solid #7c9b7f;border-radius:50%;width:21px;height:21px;font-size:12px;flex:none}
.software-record b{font-size:7px;font-weight:600;display:block;line-height:1.5}
.software-record div>span{font-size:6px;font-family:monospace;display:block;color:#66806a;margin-top:2px}
.software-chip{position:absolute;right:20px;top:25px;width:43px;height:43px;border:1px solid #7a9b80;border-radius:8px;background:#536b54;box-shadow:3px 4px 0 #263e2b;display:grid;place-items:center;transform:rotateY(15deg) rotateZ(10deg);color:#d4ebd0;font-size:15px;font-family:monospace;animation:chip-float 9s ease-in-out infinite}
@keyframes software-float{0%,100%{transform:translateY(0) rotateX(10deg) rotateY(17deg) rotateZ(-7deg)}50%{transform:translateY(-7px) rotateX(13deg) rotateY(12deg) rotateZ(-5deg)}}
@keyframes record-float{0%,100%{transform:translateX(-64%) translateY(0) rotateY(12deg) rotateZ(-4deg)}50%{transform:translateX(-64%) translateY(6px) rotateY(8deg) rotateZ(-2deg)}}
@keyframes chip-float{0%,100%{transform:translateY(0) rotateY(15deg) rotateZ(10deg)}50%{transform:translateY(9px) rotateY(10deg) rotateZ(4deg)}}
@keyframes record-progress{0%,15%,100%{transform:scaleX(.65)}60%,80%{transform:scaleX(1.8)}}

/* Decompilation: separated binary and interface documents, with a data bridge. */
.decode-sheet{position:absolute;width:130px;height:163px;border:1px solid #6d7d95;border-radius:6px;box-shadow:5px 7px 0 #202b3b,12px 18px 23px #0005}
.decode-sheet--binary{left:calc(50% - 127px);top:40px;background:#1f2938;transform:rotateX(12deg) rotateY(-24deg) rotateZ(-12deg);animation:binary-float 10s ease-in-out infinite}
.decode-label{font-size:7px;color:#a9b7cb;letter-spacing:.08em;padding:11px 12px;border-bottom:1px solid #9fb6d426;font-family:monospace}
.binary-lines{font-size:13px;letter-spacing:.12em;line-height:1.8;color:#7489a8;font-family:monospace;padding:11px 13px}
.decode-sheet--source{left:calc(50% - 3px);top:62px;background:#bfc9d8;border-color:#e3e8ef;transform:rotateX(12deg) rotateY(-24deg) rotateZ(-12deg);animation:source-float 10s ease-in-out infinite}
.decode-sheet--source .decode-label{color:#4b5f7b;border-bottom-color:#465d792f}
.source-brace{position:absolute;top:37px;left:12px;color:#516b8d;font-family:monospace;font-size:21px}
.source-brace--end{top:auto;bottom:9px}
.source-lines{position:absolute;top:64px;left:25px;right:18px;display:flex;flex-direction:column;gap:8px}
.source-lines i{height:3px;background:#758ba9;width:85%;border-radius:1px}
.source-lines i:nth-child(2){width:64%;background:#455d7c}
.source-lines i:nth-child(3){width:100%}
.source-lines i:nth-child(4){width:52%;background:#455d7c}
.decode-bridge{position:absolute;left:calc(50% - 22px);top:121px;width:49px;height:2px;background:#8ba7d14a;transform:rotateZ(-12deg)}
.decode-bridge i{position:absolute;width:4px;height:4px;top:-1px;background:#d4e6ff;border-radius:50%;animation:decode-flow 3s linear infinite;opacity:0}
.decode-bridge i:nth-child(2){animation-delay:1s}
.decode-bridge i:nth-child(3){animation-delay:2s}
.decode-port{position:absolute;left:50%;top:223px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;color:#7e91ac;font-family:monospace;font-size:8px;letter-spacing:.06em}
.decode-port i{width:4px;height:4px;background:#a6bcd9;border-radius:50%}
@keyframes binary-float{0%,100%{transform:translateY(0) rotateX(12deg) rotateY(-24deg) rotateZ(-12deg)}50%{transform:translateY(-8px) rotateX(15deg) rotateY(-18deg) rotateZ(-10deg)}}
@keyframes source-float{0%,100%{transform:translateY(0) rotateX(12deg) rotateY(-24deg) rotateZ(-12deg)}50%{transform:translateY(5px) rotateX(9deg) rotateY(-20deg) rotateZ(-14deg)}}
@keyframes decode-flow{0%{transform:translateX(0);opacity:0}20%{opacity:.85}80%{opacity:.85}100%{transform:translateX(49px);opacity:0}}

/* Animation only runs for visible cards, respecting the existing global pause. */
.service-card__art *{animation-play-state:paused}
.service-card[data-visible=true] .service-card__art *{animation-play-state:running}
.is-home[data-motion=paused] .service-card .service-card__art *{animation-play-state:paused}
@media(min-width:1600px){.service-card__art{height:290px;margin-top:20px}.web-window,.web-sheet--back{margin-top:14px}.web-mobile{margin-top:14px}.software-window,.software-record,.software-chip{margin-top:14px}.decode-sheet,.decode-port,.decode-bridge{margin-top:14px}}
@media(max-width:1100px) and (min-width:761px){.service-cards{gap:14px}.service-card__surface{padding:20px 20px 0}.service-card__art{margin-inline:-20px;transform:scale(.86);height:230px;margin-top:4px;margin-bottom:2px}.service-card__meta{font-size:8px;gap:9px}.service-card__copy h3{font-size:27px}.service-card__copy p{font-size:13px}.service-card__footer{font-size:10px}.service-card__tags{gap:7px 10px;font-size:9px}.service-card__tags>span+span::before{margin-right:10px}}
@media(max-width:760px){.services-section{padding-block:64px 58px;scroll-margin-top:80px}.services-heading{grid-template-columns:1fr;gap:22px;margin-bottom:32px}.services-heading h2{font-size:clamp(32px,6.5vw,46px)}.services-heading>p{justify-self:start;max-width:47ch;font-size:14px}.service-cards{grid-template-columns:minmax(0,1fr);gap:20px;max-width:520px;margin-inline:auto}.service-card__surface{padding:25px 26px 0}.service-card__art{height:235px;margin-top:4px;margin-bottom:8px}.service-card__copy h3{font-size:32px;margin-bottom:14px}.service-card__copy p{max-width:40ch;margin-bottom:20px}.service-card__tags{margin-bottom:24px}.service-card__footer{min-height:62px;font-size:12px}.services-foot{margin-top:22px;gap:5px;font-size:10px}.services-foot>span{width:100%}.services-foot a{font-size:11px}}
@media(max-width:360px){.service-card__surface{padding-inline:21px}.service-card__art{margin-inline:-21px;transform:scale(.9);margin-top:0;margin-bottom:0;height:225px}.service-card__copy h3{font-size:29px}.service-card__meta{font-size:8px}.service-card__copy p{font-size:14px}}
@media(hover:none){.service-card__surface{transform:none!important}.service-card:hover .service-card__surface{box-shadow:none}}
@media(prefers-reduced-motion:reduce){.service-card__art *{animation:none!important}.service-card__surface{transform:none!important;transition:none}.service-card__surface::after,.service-card__footer>span:last-child{transition:none}}
@media(max-width:760px){.services-section{scroll-margin-top:0}}