/* Work is presented as a collection of complete scenes. */
.horizontal-work .project-card{flex-basis:clamp(320px,32vw,470px);width:clamp(320px,32vw,470px)}
.horizontal-work .showcase-card{height:clamp(450px,62svh,660px);border-radius:18px!important;overflow:hidden!important;background:#17232c!important;isolation:isolate}
.horizontal-work .showcase-card .showcase-scene{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit!important;background:transparent!important;overflow:hidden;display:block;perspective:1200px}
.scene-backdrop{position:absolute;inset:-9%;background-image:linear-gradient(180deg,#04132133 0%,#07121a55 50%,#06090ff2 87%),var(--scene-image);background-size:cover;background-position:center;filter:blur(2px);opacity:.65;transform:scale(1.04);animation:scene-breathe 16s ease-in-out infinite alternate;animation-play-state:paused}
.scene-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 20%,#5687d166,transparent 65%)}
.scene-metro .scene-glow{background:radial-gradient(ellipse at 25% 35%,#ffb34766,transparent 60%)}
.scene-2050 .scene-glow{background:radial-gradient(ellipse at 75% 25%,#ddcc9966,transparent 65%)}
.scene-tags{position:absolute;top:22px;right:20px;max-width:75%;font:10px Manrope,sans-serif;border:1px solid #ffffff55;border-radius:30px;padding:7px 11px;color:white;background:#050a1488}
.horizontal-work .showcase-card .rail-number{top:23px;left:18px}
.device-stage{position:absolute;top:60px;bottom:120px;left:20px;right:20px;display:flex;align-items:center;justify-content:center;perspective:1200px}
.show-device{position:relative;flex:none;filter:drop-shadow(0 20px 18px #0008);animation:show-float 8s ease-in-out infinite alternate;animation-play-state:paused;transform:rotate(-7deg) rotateY(-10deg);width:84%}
.show-screen{position:relative;overflow:hidden;background:#111;border:7px solid #151719;box-shadow:0 0 0 1px #b4bcc2,0 0 0 3px #363c40;border-radius:12px;aspect-ratio:16/10;isolation:isolate}
.show-screen iframe{position:absolute;top:0;left:0;border:0;transform-origin:top left;pointer-events:none;background:#111;max-width:none!important}
.show-screen video{width:100%;height:100%;object-fit:contain;display:block;background:#0b0e12}
.macbook .show-screen{border-top-width:10px;border-bottom-width:12px;border-radius:10px 10px 4px 4px}
.macbook .device-detail{position:absolute;top:100%;left:-7%;width:114%;height:10px;background:linear-gradient(#c2c8ce,#7a828c 55%,#292e33);border-radius:0 0 50% 50%/0 0 100% 100%;box-shadow:0 2px 0 #272b2e}
.macbook .device-detail:before{content:'';position:absolute;top:0;left:42%;width:16%;height:3px;background:#687078;border-radius:0 0 7px 7px}
.iphone{width:auto;height:88%;aspect-ratio:390/844;transform:rotate(8deg) rotateY(-12deg)}
.iphone .show-screen{height:100%;aspect-ratio:auto;border:6px solid #101214;border-radius:29px;box-shadow:0 0 0 1px #89929c,0 0 0 3px #34383c}
.iphone .device-detail{position:absolute;top:11px;left:35%;width:30%;height:10px;border-radius:20px;background:#090b0d;box-shadow:inset -4px 0 #131d26}
.iphone:after{content:'';position:absolute;bottom:12px;left:35%;width:30%;height:3px;border-radius:8px;background:#fffc}
.ipad{width:88%;transform:rotate(6deg) rotateY(14deg)}
.ipad .show-screen{aspect-ratio:4/3;border:10px solid #171a1d;border-radius:17px}
.ipad .device-detail{position:absolute;top:49%;right:1px;width:3px;height:3px;border-radius:100%;background:#3d4a50}
.portrait-tablet{width:auto;height:78%;aspect-ratio:4/5;transform:rotate(-8deg) rotateY(-12deg)}
.portrait-tablet .show-screen{height:100%;aspect-ratio:auto}
.scene-join .macbook{width:82%;left:-5%;top:-9%}
.iphone.companion{position:absolute;height:67%;right:0;bottom:0;transform:rotate(9deg);z-index:2}
.scene-infra .macbook{transform:rotate(7deg) rotateY(14deg)}
.horizontal-work .showcase-card .project-meta{position:absolute;bottom:0;left:0;right:0;z-index:4;padding:22px 24px!important;min-height:115px;pointer-events:none;text-align:right;direction:rtl}
.horizontal-work .showcase-card .project-meta h3{font-size:clamp(23px,2vw,30px);margin:0 0 9px;letter-spacing:-.6px;line-height:1.1;padding-left:30px;color:#fff}
.horizontal-work .showcase-card .project-meta p{font-size:13px;line-height:1.55;margin:0;color:#d5dce0;max-width:88%}
.horizontal-work .showcase-card .project-meta button,.showcase-open{pointer-events:auto}
.showcase-open,.horizontal-work .showcase-card .film-play{position:absolute;left:20px;bottom:24px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#f5ff2e;color:#20251b;font-size:23px;z-index:6;transition:transform .3s}
.horizontal-work .showcase-card .film-play{bottom:26px}
.showcase-card .project-meta>span{font-size:10px!important;margin-top:8px!important}
.horizontal-work .scene-app .project-phone{border:6px solid #16191c!important;border-radius:30px!important;box-shadow:0 0 0 1px #adb4bc,0 18px 40px #0007!important;overflow:hidden!important;background:#101216!important}
.horizontal-work .scene-app .phone-island{display:block;z-index:4}
.is-animating .show-device,.is-animating .scene-backdrop{animation-play-state:running}
@keyframes show-float{from{translate:0 5px}to{translate:0 -8px}}
@keyframes scene-breathe{from{translate:-1% 0;scale:1}to{translate:2% -2%;scale:1.06}}
.desktop-nav a,.journey-sidebar nav a,.float-nav a,.mobile-nav a{display:inline-block;transform-origin:center;transition:transform .28s cubic-bezier(.2,.8,.2,1),color .25s,background-color .25s!important}
@media(hover:hover) and (pointer:fine){.desktop-nav a:hover,.journey-sidebar nav a:hover,.float-nav a:hover,.mobile-nav a:hover{transform:translateY(-3px) scale(1.07)}.showcase-open:hover{transform:rotate(-12deg) scale(1.1)}}
.desktop-nav a:focus-visible,.journey-sidebar nav a:focus-visible{transform:translateY(-3px) scale(1.05);outline:2px solid currentColor;outline-offset:5px;border-radius:3px}
@media(min-width:900px) and (max-height:759px){.horizontal-work .showcase-card{height:59svh;min-height:340px}.device-stage{top:48px;bottom:100px}.scene-tags{font-size:8px;top:16px;right:12px}.horizontal-work .showcase-card .rail-number{top:16px;left:12px}.horizontal-work .showcase-card .project-meta{padding:15px 18px!important;min-height:92px}.horizontal-work .showcase-card .project-meta h3{font-size:21px}.horizontal-work .showcase-card .project-meta p{font-size:11px}.horizontal-work .work-sticky{padding-top:22px;padding-bottom:18px}.horizontal-work .section-heading h2{font-size:33px}.horizontal-work .section-heading{margin-bottom:14px}.horizontal-work .filter-row{margin-bottom:14px}}
@media(max-width:700px){.horizontal-work .project-card{width:85vw;flex-basis:85vw}.horizontal-work .showcase-card{height:540px;max-height:72svh;min-height:420px}.device-stage{top:60px;bottom:115px}.horizontal-work .showcase-card .project-meta h3{font-size:26px}.scene-tags{font-size:9px}.horizontal-work .showcase-card .project-meta{padding:20px!important}}
@media(prefers-reduced-motion:reduce){.show-device,.scene-backdrop{animation:none!important}.desktop-nav a,.journey-sidebar nav a,.float-nav a,.mobile-nav a{transition:none!important;transform:none!important}}

.reveal-track{height:155svh}.skills-section{padding-top:40px}@media(max-width:700px){.reveal-track{height:160svh}}
.timeline-ready .journey-card{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s!important;transform:none!important;translate:none!important}
.timeline-ready .journey-card.incoming{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s!important;transform:none!important}
.portrait-backdrop img{mask-image:linear-gradient(to bottom,transparent,black 15%,black 82%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,black 15%,black 82%,transparent)}
.hero-transition,.portrait-hero{border:0!important;box-shadow:none!important}
@media(prefers-reduced-motion:reduce){.timeline-ready .journey-card{transition:none!important}}
.morph-piece[href]{transition:scale .28s ease,translate .28s ease!important}
@media(hover:hover) and (pointer:fine){.morph-piece[href]:hover{scale:1.07!important;translate:0 -3px!important}}
.hero-person{mask-image:linear-gradient(to bottom,transparent 0%,black 7%,black 92%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 7%,black 92%,transparent 100%)}
@media(prefers-reduced-motion:reduce){.morph-piece[href]{transition:none!important}}
/* v13: a readable, animated automation story and the creator origin. */
.horizontal-work .automation-scene{background:radial-gradient(ellipse at 50% 42%,#244f4a 0%,#132e2e 48%,#0b191e 100%);width:100%;height:100%!important;position:relative;display:block;text-align:right;color:white}
.automation-scene:before{content:'';position:absolute;inset:0;background-image:radial-gradient(#b8ffe520 1px,transparent 1px);background-size:19px 19px;mask-image:linear-gradient(transparent,#000 30%,transparent)}
.automation-map{position:absolute;top:72px;left:10px;right:10px;bottom:155px;display:flex;align-items:center;justify-content:center}
.automation-map svg{width:100%;max-height:100%;overflow:visible;filter:drop-shadow(0 12px 17px #0005)}
.automation-halo{position:absolute;top:21%;left:23%;width:54%;aspect-ratio:1;border-radius:50%;background:#ad79ff25;filter:blur(34px);animation:automation-glow 5s ease-in-out infinite alternate;animation-play-state:paused}
.is-animating .automation-halo{animation-play-state:running}
.automation-caption{position:absolute;bottom:137px;left:22px;right:22px;text-align:center;font-size:12px;color:#c1d6cc}
.horizontal-work .scene-automation .project-meta h3{font-size:clamp(25px,2.2vw,32px);line-height:1.15}
.scene-automation .project-meta h3 button{text-align:right;font:inherit;color:inherit}
.journey-tiktok .journey-year{font-size:clamp(48px,6vw,76px);letter-spacing:-4px;color:#27342b;text-shadow:3px 2px #f5ff2e}
.creator-skills{display:flex;flex-wrap:wrap;gap:7px;margin-top:19px}.creator-skills span{font-size:11px;padding:5px 9px;border:1px solid #53674740;border-radius:30px;color:#46533c}
.creator-profile{display:inline-block;font:700 13px Manrope,sans-serif;padding:10px 15px;background:#f5ff2e;color:#20251b;border-radius:8px;transition:transform .25s}.creator-profile:hover{transform:translateY(-2px)}
@keyframes automation-glow{to{transform:scale(1.4);opacity:.5}}
@media(max-height:759px) and (min-width:900px){.automation-map{top:45px;bottom:120px}.automation-caption{bottom:103px;font-size:10px}.horizontal-work .scene-automation .project-meta h3{font-size:23px}}
@media(prefers-reduced-motion:reduce){.automation-halo{animation:none}.automation-map circle{display:none}.creator-profile{transition:none}}
/* Fixed-button quick roll: only the label moves, including morph clones. */
.desktop-nav .nav-roll-link,.desktop-nav .nav-roll-link:hover{transform:none!important;translate:none!important;scale:1!important;transition:color .25s!important}
.morph-piece.nav-roll-link,.morph-piece.nav-roll-link:hover{scale:1!important;translate:none!important;transition:none!important}
.nav-roll-window{display:block!important;position:relative!important;overflow:hidden!important;line-height:1.5!important}
.nav-roll-label{display:block!important;position:relative!important;transform:translateY(0)!important;transition:transform .3s cubic-bezier(.22,.75,.25,1)!important;white-space:nowrap!important}
.nav-roll-label:after{content:attr(data-label);position:absolute;top:100%;left:0;right:0;color:inherit;line-height:inherit}
@media(hover:hover) and (pointer:fine){.nav-roll-link:hover .nav-roll-label{transform:translateY(-100%)!important}}
.nav-roll-link:focus-visible .nav-roll-label{transform:translateY(-100%)!important}
@media(prefers-reduced-motion:reduce){.nav-roll-label{transition:none!important}.nav-roll-link:hover .nav-roll-label,.nav-roll-link:focus-visible .nav-roll-label{transform:none!important}}
/* v15: one coherent signature/contact area, with image trails inside the name. */
.signature-section{padding:90px 0 65px;color:#20251d}
.signature-art{position:relative;width:100%;margin:0 0 30px;outline-offset:8px;touch-action:pan-y}
.signature-art svg{width:100%;display:block;overflow:visible}
.signature-art text{font:800 360px Manrope,sans-serif;letter-spacing:-20px}
.signature-base{fill:#f5ff2e}
.signature-photo{opacity:0;transition:opacity .65s ease;pointer-events:none}.signature-photo.visible{opacity:1;transition:opacity .12s ease}
.signature-section .chat-invite{justify-content:center;margin:15px 0 45px}
.signature-section .contact-bottom{display:flex;flex-direction:column;align-items:center;gap:25px;text-align:center;padding:0}
.signature-section .contact-bottom p{color:#5c634f;font-size:14px;margin:0 0 12px}
.signature-section .email-link{color:#20251d!important;font-size:clamp(20px,3.2vw,46px);line-height:1.4;overflow-wrap:anywhere}
.signature-section .email-link:hover{color:#526321!important}.signature-section .contact-links{justify-content:center;flex-wrap:wrap;margin:0;color:#20251d;gap:22px}
.signature-section .contact-links a,.signature-section .contact-links button{color:#20251d;border-color:#8b937b}
.signature-section .copy-status{text-align:center;color:#20251d;min-height:20px;margin:14px 0 0}
.page-content>.footer{background:transparent;border-top:1px solid #949a7e55;padding:25px 0;margin-top:35px;margin-bottom:0;color:#4d5641;gap:20px}
.page-content>.footer .wordmark{color:#20251d}.faq{padding-top:45px}
@media(max-width:700px){.signature-section{padding:55px 0 25px}.signature-art{margin-bottom:25px}.signature-section .chat-invite{margin:0 0 28px;align-items:flex-end}.signature-section .chat-bubble{max-width:calc(100% - 55px);font-size:14px}.signature-section .contact-links{gap:18px;font-size:12px}.page-content>.footer{justify-content:center;text-align:center;padding:22px 0}.signature-section .email-link{font-size:clamp(17px,5.4vw,25px)}}
@media(prefers-reduced-motion:reduce){.signature-photo{transition:none}}
.signature-art svg,.signature-art text{direction:ltr;unicode-bidi:embed;text-anchor:start}
.signature-section .email-link span{color:#20251d}
/* v16: stable CTAs, three larger metrics, and consistent film scenes. */
.hero-buttons{align-items:center;flex-wrap:nowrap}
.hero-buttons>a,.hero-buttons>a:hover{transform:none!important;translate:none!important;scale:1!important;transition:background-color .22s,color .22s,box-shadow .22s!important}
.hero-buttons>a:hover,.hero-buttons>a:focus-visible{background:#e8efb8!important;color:#20251d!important;box-shadow:0 0 0 2px #20251d55}
#impact{grid-template-columns:repeat(3,minmax(0,1fr));gap:25px 20px}
#impact .impact-intro{grid-column:1/-1}#impact .impact-intro p br{display:none}#impact .impact-intro strong{margin-right:6px}
#impact .metric>strong{font-size:60px;line-height:1.25}#impact .metric-note{grid-column:1/-1}
.app-film-stage{position:absolute;inset:70px 18px 130px;display:flex;align-items:center;justify-content:center}
.app-film-stage video{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:contain;background:#10161c;border-radius:10px;box-shadow:0 20px 45px #0006}
.signature-section .contact-links>a,.signature-section .contact-links>button{padding:10px 14px;border:1px solid #8b937b;border-radius:7px;transition:background-color .22s,color .22s,transform .22s,border-color .22s}
.signature-section .contact-links>a:hover,.signature-section .contact-links>button:hover,.signature-section .contact-links>a:focus-visible,.signature-section .contact-links>button:focus-visible{background:#f5ff2e;color:#20251d;border-color:#c0c72c;transform:translateY(-3px)}
@media(max-width:700px){#impact{grid-template-columns:1fr;gap:28px}#impact .metric{padding-bottom:20px;border-bottom:1px solid #a3a88e50}#impact .metric>strong{font-size:60px}#impact .metric p{max-width:none}.app-film-stage{inset:60px 16px 125px}}
@media(prefers-reduced-motion:reduce){.signature-section .contact-links>a,.signature-section .contact-links>button{transition:none;transform:none!important}}

/* v17: four updated achievement metrics */
#impact{grid-template-columns:repeat(4,minmax(0,1fr))}
#impact .metric{min-width:0}
#impact .metric>strong{white-space:nowrap}
@media(min-width:701px) and (max-width:1200px){#impact{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){#impact{grid-template-columns:1fr}}

/* v18: contained tool ribbon and synchronized hero CTA exit. */
.journey .software-strip{position:relative;isolation:isolate;width:100%;min-width:0;clear:both}
.journey .software-strip .marquee{width:100%;overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent)}