/* Focused portfolio refinement: typography, native scroll and device depth. */
.attention-heading h1 .attention-first,.attention-heading h1 .attention-ma{color:#fff;display:inline-block}
.is-scroll-led .attention-heading h1{opacity:1;transform:none}
.is-scroll-led .attention-first{opacity:calc(.2 + var(--intro-start,0)*.8);transform:translateY(calc((1 - var(--intro-start,0))*24px))}
.is-scroll-led .attention-ma{opacity:var(--intro-ma,0);transform:translateY(calc((1 - var(--intro-ma,0))*24px))}
.rail-light,.rail-arrow{stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-width:2.5}
.is-scroll-led .rail-arrow{opacity:var(--intro-tip,0)}
.attention-intro.is-scroll-led{height:280svh}
.is-scroll-led .attention-heading{height:min(65svh,580px)}
.attention-summary{max-width:760px;padding-block:90px 140px}
.attention-summary>p{font-size:clamp(23px,2.7vw,33px);line-height:1.5;letter-spacing:-.025em;color:#fff}
.attention-summary>p+p{font-size:17px;line-height:1.75;color:#bcbcc2;margin-top:24px;max-width:640px}
.attention-summary>a{margin-top:35px}
.featured-case .problem-pane h3{color:#ff858b}.featured-case .solution-pane h3{color:#55dca2}
.light-feature .problem-pane h3{color:#a52332}.light-feature .solution-pane h3{color:#087a49}
.featured-case .project-outcome{border:0}.featured-case .project-outcome h3{color:#ff5b16}
.project-outcome strong{font-weight:600;color:#fff}.light-feature .project-outcome strong{color:#111}
.more-work,.lab-invite{border:0}.more-work{padding-top:120px;padding-bottom:80px}.lab-invite{padding-top:80px}
.device-scene{perspective:1400px;transform-style:preserve-3d}
.desktop-device{padding:10px 10px 15px;border-radius:17px;background:linear-gradient(145deg,#73767b,#292b30 30%,#151619 70%,#75777c);border:1px solid #898b90;box-shadow:0 32px 60px #0008;transform:rotateX(5deg) rotateY(-4deg);transform-style:preserve-3d}
.desktop-device>img{border-radius:6px;border:5px solid #08090a}
.device-toolbar{height:12px;padding:0;justify-content:center}.device-toolbar .device-camera{width:4px;height:4px;background:#202b3b;border:1px solid #52657c;margin:0;border-radius:50%}
.desktop-device:after{height:17px;bottom:-16px;left:-7%;right:-7%;background:linear-gradient(#aeb0b5 0%,#65676d 30%,#dddfe2 40%,#67696d 65%,#252629);border-radius:2px 2px 45% 45%;box-shadow:0 14px 20px #0005}
.desktop-device:before{content:'';position:absolute;width:15%;height:4px;bottom:-4px;left:42%;background:#45474a;border-radius:0 0 6px 6px;z-index:3}
.phone-device{border:2px solid #9a9da3;padding:5px;border-radius:28px;background:#090a0b;box-shadow:12px 22px 40px #0007;transform:translateZ(50px) rotateY(-9deg) rotateZ(3deg)}
.phone-device img{border-radius:21px}.phone-notch{height:10px;top:12px;width:34%;left:33%;border:1px solid #202126}
@media(min-width:1050px) and (min-height:800px) and (prefers-reduced-motion:no-preference){.is-enhanced .pinned-stage{perspective:1500px}.is-enhanced .device-scene{transform:translateY(calc(var(--scene-compact,0)*-85px)) translateZ(calc(var(--scene-compact,0)*-150px)) rotateY(calc(var(--scene-compact,0)*-16deg)) rotateX(calc(var(--scene-compact,0)*8deg)) scale(calc(1 - var(--scene-compact,0)*.62));opacity:1}.is-enhanced .pinned-narrative{top:270px}.is-enhanced .featured-heading h2{font-size:39px}.is-enhanced .proskin-scene{transform:translateY(calc(var(--scene-compact,0)*-70px)) rotateY(calc(var(--scene-compact,0)*14deg)) scale(calc(1 - var(--scene-compact,0)*.7))}}
@media(max-width:600px){.is-scroll-led .attention-heading{height:62svh}.attention-summary{padding-block:65px 95px}.attention-summary>p{font-size:23px}.attention-summary>p+p{font-size:16px}.attention-summary>a{font-size:12px}.phone-device{border-radius:15px;padding:3px}.phone-device img{border-radius:11px}.phone-notch{top:7px;height:6px}.desktop-device{padding:6px 6px 9px;border-radius:10px}.desktop-device>img{border-width:2px}.device-toolbar{height:8px}.more-work{padding-top:75px}.more-work .button{font-size:12px}.featured-heading h2{font-size:32px}}
@media(prefers-reduced-motion:reduce){.attention-first,.attention-ma,.attention-summary{opacity:1!important;transform:none!important}.desktop-device,.phone-device{transform:none}}

/* Frontal hardware and three non-overlapping composition zones. */
.device-scene{perspective:none;transform-style:flat}
.desktop-device{transform:none;transform-style:flat;background:#111214;border:2px solid #73767b;padding:5px 6px 8px;border-radius:14px;box-shadow:0 24px 44px #0006}
.desktop-device>img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border:0;border-radius:4px}
.device-toolbar{height:9px;background:#111214}.device-toolbar .device-camera{width:3px;height:3px;background:#223043;border:0}
.desktop-device:after{left:-6%;right:-6%;bottom:-11px;height:10px;background:linear-gradient(#c2c4c7,#9a9da2 35%,#66696e 75%,#2f3135);border-radius:1px 1px 50% 50%;box-shadow:0 10px 18px #0005}
.desktop-device:before{bottom:-4px;height:3px;background:#72757a;width:14%;left:43%;z-index:3}
.phone-device{transform:none;border:2px solid #8e9297;background:#090909;border-radius:28px;padding:5px;box-shadow:8px 18px 30px #0006;width:22%;bottom:0}
.phone-device img{aspect-ratio:9/19.5;object-fit:cover;object-position:top;width:100%;height:auto;border-radius:21px}
.phone-notch{height:8px;top:12px;width:29%;left:35.5%;background:#070707;border:0;border-radius:10px}
.phone-device:after{content:'';position:absolute;bottom:10px;width:32%;left:34%;height:3px;background:#e0e0e0;border-radius:4px}
@media(min-width:1050px) and (min-height:800px) and (prefers-reduced-motion:no-preference){
 .is-enhanced .pinned-stage{perspective:none;padding-top:35px}
 .is-enhanced .featured-heading{max-width:59%;z-index:2}
 .is-enhanced .featured-heading h2{font-size:clamp(30px,3vw,39px);line-height:1.17}
 .is-enhanced .device-scene,.is-enhanced .proskin-scene{width:72%;max-width:800px;left:calc(14% + var(--scene-compact,0)*54%);top:180px;transform:translateY(calc(var(--scene-compact,0)*-70px)) scale(calc(1 - var(--scene-compact,0)*.62));transform-origin:top left;opacity:1;margin:0;z-index:1}
 .is-enhanced .device-scene figcaption{display:none}
 .is-enhanced .pinned-narrative{top:355px;gap:64px;z-index:2}
 .is-enhanced .pinned-narrative h3{font-size:24px;line-height:1.25;margin-bottom:22px}
 .is-enhanced .pinned-narrative p{font-size:14.5px;line-height:1.85}
}
@media(max-width:700px){.desktop-device{border-width:1px;border-radius:9px;padding:4px 4px 6px}.device-toolbar{height:6px}.phone-device{border-width:1px;border-radius:15px;padding:3px}.phone-device img{border-radius:11px}.phone-notch{top:7px;height:5px}.phone-device:after{bottom:6px;height:2px}.device-scene{margin-block:45px 65px}.pinned-narrative{gap:42px}}
/* Automatic opening followed by native scroll storytelling. */
.attention-intro{height:100svh;min-height:650px;padding:120px 0 45px}.attention-intro>.wrap{height:100%}.attention-heading{height:100%;min-height:0;max-height:650px}.attention-intro h1,.attention-intro h2{transform:none}
.is-auto-intro .attention-first{animation:write-phrase .8s steps(15,end) both}.is-auto-intro .attention-ma{animation:write-phrase .2s .85s steps(2,end) both}.is-auto-intro .rail-light{animation:trace-rail .8s 1.1s cubic-bezier(.22,1,.36,1) both}.is-auto-intro .rail-arrow{animation:arrow-arrive .12s 1.85s both}.is-auto-intro h2{animation:arrive-text .5s 1.95s both}
@keyframes write-phrase{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.attention-summary{max-width:1200px;padding-block:90px}.summary-stage>p{max-width:700px;font-size:30px;line-height:1.5;color:#fff}.summary-stage>p+p{font-size:22px;color:#bcbcc2;margin:40px 0}.summary-stage>a{margin-top:30px}
.attention-summary.is-story-summary{height:240svh;padding:0;opacity:1!important;transform:none!important}.is-story-summary .summary-stage{position:sticky;top:80px;height:calc(100svh - 80px)}.is-story-summary .summary-stage>p:first-child{position:absolute;top:80px;left:0;max-width:660px;font-size:clamp(27px,3vw,39px);opacity:var(--summary-one,0);transform:translateY(calc((1 - var(--summary-one,0))*140px));margin:0}.is-story-summary .summary-stage>p+p{position:absolute;top:350px;right:0;max-width:570px;font-size:25px;opacity:var(--summary-two,0);transform:translateY(calc((1 - var(--summary-two,0))*100px));margin:0}.is-story-summary .summary-stage>a{position:absolute;bottom:75px;left:50%;white-space:nowrap;opacity:var(--summary-cta,0);transform:translate(-50%,calc((1 - var(--summary-cta,0))*35px));margin:0}
@media(max-width:700px){.attention-intro{padding-top:120px;min-height:620px}.attention-heading h2{font-size:32px}.is-story-summary .summary-stage{top:70px;height:calc(100svh - 70px)}.is-story-summary .summary-stage>p:first-child{top:65px;font-size:27px}.is-story-summary .summary-stage>p+p{top:310px;font-size:20px}.is-story-summary .summary-stage>a{font-size:11px;bottom:65px}.summary-stage>p{font-size:25px}.summary-stage>p+p{font-size:20px}}
@media(prefers-reduced-motion:reduce){.attention-intro *{animation:none!important}.attention-summary{height:auto!important}.summary-stage{position:static!important;height:auto!important}}
/* Character-by-character writing preserves the original line breaks and colors. */
.attention-heading h1 .intro-letter,.attention-heading h2 .intro-letter{color:inherit;font:inherit;letter-spacing:inherit}
.attention-heading h1,.attention-heading h2{opacity:1!important;color:#ffffff!important;visibility:visible!important}
.attention-heading h1 .attention-first,.attention-heading h1 .attention-ma,.attention-heading h2 .attention-end{color:#ffffff!important;opacity:1!important}
.attention-heading h2 span{color:#ff5b16!important}
.intro-letter{opacity:1;color:inherit;font:inherit;letter-spacing:inherit}