.services{position:relative;height:480svh;margin-inline:-14px;background:#171613}
.services-stage{position:sticky;top:0;height:100svh;overflow:clip;isolation:isolate;color:#fff1d7}
.services-label{position:absolute;z-index:8;top:100px;left:max(36px,calc((100vw - 1440px)/2));font:11px monospace;letter-spacing:.15em;margin:0}
.service-scene{position:absolute;inset:0;overflow:hidden;transform:translateY(100%);transition:transform 1.15s cubic-bezier(.602,.001,.175,1);--warm-light:#E68447;--warm-dark:#621606;background:radial-gradient(ellipse at 50% 32%,var(--warm-light) 0%,var(--warm-dark) 100%)}
.service-scene:first-of-type,.service-scene.is-current,.service-scene.is-past{transform:translateY(0)}
.service-scene::after{content:'';pointer-events:none;position:absolute;inset:0;background:linear-gradient(transparent 50%,#100e0b80);z-index:1}
.service-artwork{position:absolute;top:10%;left:50%;width:min(65vw,950px);height:69%;transform:translate(-50%,var(--lift,0));transition:transform .3s linear;perspective:1000px}
.service-caption{position:absolute;left:max(36px,calc((100vw - 1440px)/2));right:36px;bottom:32%;z-index:3;display:flex;justify-content:space-between;align-items:end;gap:32px}.service-caption h3{font:500 clamp(24px,2.2vw,34px)/1.2 Poppins,Arial;margin:0;letter-spacing:-.045em}.service-caption p{font:15px/1.6 Arial;max-width:440px;margin:0;color:#f6e8d8d9}
.service-ticker{position:absolute;left:0;bottom:9%;z-index:3;width:max-content;white-space:nowrap;font:700 clamp(90px,15vw,240px)/1.1 Poppins,Arial;letter-spacing:-.065em;color:#fff1d7;-webkit-text-stroke:0;display:flex;animation:service-travel 140s linear infinite;animation-play-state:paused;pointer-events:none}
.service-nav{position:absolute;z-index:10;bottom:28px;left:max(36px,calc((100vw - 1440px)/2));right:max(36px,calc((100vw - 1440px)/2));display:flex;gap:20px}.service-nav button{flex:1;border:0;border-radius:0;padding:12px 0;background:none;backdrop-filter:none;color:#fff1d7a6;text-align:left;font:10px monospace;cursor:pointer;position:relative}.service-nav button::before,.service-nav button::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:#fff3}.service-nav button::after{background:#fff1d7;transform-origin:left;transform:scaleX(var(--fill,0))}.service-nav button[aria-current=true]{color:#fff1d7}.service-nav button:focus-visible{outline:1px solid #fff1d7;outline-offset:4px}
@media(max-width:700px){.services{margin-inline:-8px;height:420svh}.services-label{top:88px;left:20px}.service-artwork{width:100vw;height:58%;top:14%}.service-object{padding:7%;inset:4% 8%}.service-caption{left:20px;right:20px;bottom:29%;display:block}.service-caption p{font-size:13px;max-width:420px;margin-top:10px}.service-ticker{font-size:24vw;bottom:15%}.service-nav{left:20px;right:20px;gap:12px}.service-nav button{font-size:8px;line-height:1.5}.mock-interface div{height:85px}.mock-interface div:nth-child(2){height:65px}.system-grid{gap:8px}.service-object strong{font-size:30px}}
.services-static{height:auto}.services-static .services-stage{height:auto;position:relative}.services-static .services-label{display:none}.services-static .service-scene{position:relative;height:90svh;transform:none;transition:none}.services-static .service-nav{display:none}.services-static .service-artwork{transform:translateX(-50%)}.services-static .service-ticker{transform:none}
@media(prefers-reduced-motion:reduce){.service-scene,.service-artwork{transition:none}}

.service-ticker>span{display:block;flex:none;white-space:pre}
.service-scene.is-current .service-ticker{animation-play-state:running}
@keyframes service-travel{to{transform:translateX(-50%)}}
.services-static .service-ticker{animation:none}
@media(prefers-reduced-motion:reduce){.service-ticker{animation:none}}


/* Warm variations share the same radial lighting as Discovery. */
.service-scene:nth-of-type(2){--warm-light:#DAA05B;--warm-dark:#613018}
.service-scene:nth-of-type(3){--warm-light:#D97658;--warm-dark:#621D16}
.service-scene:nth-of-type(4){--warm-light:#C58A60;--warm-dark:#54291B}

/* Reusable photograph + independently replaceable HTML/image/video screen. */
.service-artwork.device-mockup{top:-4svh;left:48.3%;width:auto;height:132svh;aspect-ratio:2/3;z-index:2;perspective:none}
.device-mockup>img{display:block;width:100%;height:100%;object-fit:contain}
.device-screen{position:absolute;left:34.2%;top:7.65%;width:37%;height:51.2%;border-radius:16% / 8%;overflow:hidden;background:#12100e;color:#fff1d7;display:flex;flex-direction:column;justify-content:space-between;padding:6% 3%;box-sizing:border-box}
.device-screen span,.device-screen i{font:8px/1.5 monospace;letter-spacing:.08em;font-style:normal;color:#d7b696}
.device-screen b{font:700 clamp(15px,2vw,30px)/1.18 Poppins,Arial;letter-spacing:-.04em}
.device-screen>img,.device-screen>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.service-caption h3{max-width:23%}.service-caption p{max-width:24%;font-size:14px}
@media(max-width:700px){.service-artwork.device-mockup{height:72svh;top:-3%;left:48.3%}.service-caption{bottom:24%}.service-caption h3,.service-caption p{max-width:100%}.service-caption p{font-size:13px}.device-screen b{font-size:17px}.device-screen span,.device-screen i{font-size:6px}.service-ticker{bottom:11%}}
@media(max-width:700px){.service-artwork.device-mockup{height:62svh;top:3%}.device-mockup>img{mask-image:linear-gradient(#000 56%,transparent 78%);-webkit-mask-image:linear-gradient(#000 56%,transparent 78%)}}
@media(max-width:700px){.service-ticker{font-size:clamp(72px,24vw,100px)}}

/* A single stationary device bridges the moving service scenes. */
.services:not(.services-static) .service-scene{transform:none;transition:none;background:none;overflow:visible;pointer-events:none}
.services:not(.services-static) .service-scene::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 32%,var(--warm-light) 0%,var(--warm-dark) 100%);z-index:0}
.services:not(.services-static) .service-scene::before,
.services:not(.services-static) .service-scene::after,
.services:not(.services-static) .service-content{translate:0 100%;transition:translate 1.15s cubic-bezier(.602,.001,.175,1)}
.services:not(.services-static) .service-scene:is(:first-of-type,.is-current,.is-past)::before,
.services:not(.services-static) .service-scene:is(:first-of-type,.is-current,.is-past)::after,
.services:not(.services-static) .service-scene:is(:first-of-type,.is-current,.is-past) .service-content{translate:0 0}
.service-content{position:absolute;inset:0;z-index:3}
.services:not(.services-static) .service-scene>.device-mockup{display:none}
.service-artwork.device-shared{transform:translateX(-50%);transition:none;pointer-events:none}
.device-shared .device-screen{opacity:1;transition:none;clip-path:inset(100% 0 0 0)}
.device-shared .device-screen:first-of-type{clip-path:inset(0)}
.device-shared .device-screen.is-active{opacity:1}
.services-static .device-shared{display:none}
@media(prefers-reduced-motion:reduce){.service-content,.device-shared .device-screen{transition:none}}
.services:not(.services-static) .service-content{opacity:0;transition:translate 1.15s cubic-bezier(.602,.001,.175,1),opacity .45s ease}
.services:not(.services-static) .service-scene.is-current .service-content{opacity:1}
/* Research archive: responsive interface inside the stationary phone. */
.device-screen.device-screen-research{padding:0;container-type:inline-size;background:#eee9df;color:#292821}
.research-deck{position:absolute;inset:0}
.research-page{position:absolute;inset:0;padding:10% 7% 6%;display:flex;flex-direction:column;gap:3cqw;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .65s ease;pointer-events:none}
.research-page.is-selected{opacity:1;transform:none}
.research-page .research-header{display:flex;justify-content:space-between;border-bottom:1px solid #29282125;padding-bottom:3cqw}
.device-screen .research-page .research-header span{font:500 2.7cqw/1.4 monospace;color:#6d6c5d;letter-spacing:0}
.research-project{font:600 3cqw/1.4 Arial;letter-spacing:.06em;color:#72634c}
.research-page h4{font:700 8.6cqw/1.04 Poppins,Arial;letter-spacing:-.055em;margin:0 0 1cqw}
.research-page figure{margin:0;background:#ded8cb;border-radius:3cqw;overflow:hidden}
.research-page figure img{display:block;width:100%;aspect-ratio:1.45;object-fit:cover}
.research-page figcaption{font:3cqw/1.4 Arial;padding:2cqw 3cqw;color:#655e51}
.research-method{font:700 4.8cqw/1.2 Poppins,Arial;margin-top:1cqw}
.research-description{font:400 4.1cqw/1.45 Arial;margin:0;color:#49483e}
.research-tags{display:flex;gap:1.5cqw;flex-wrap:wrap}
.device-screen .research-tags span{font:3cqw/1.3 Arial;letter-spacing:0;color:#4b5140;background:#dce0cd;border:1px solid #a8af943f;border-radius:6cqw;padding:1.5cqw 2.7cqw}
.research-outcome{margin-top:auto;font:500 3.5cqw/1.4 Arial;border-top:1px solid #29282125;padding-top:3cqw;color:#68604f}
.research-progress{display:flex;gap:2cqw;padding-top:1cqw}
.research-progress span{height:2px;background:#29282122;flex:1}
.research-progress span.is-on{background:#99703e}
.kano-sheet{background:#faf8f2;border:1px solid #c8c6b9;border-radius:3cqw;overflow:hidden}
.kano-sheet-heading{font:600 4cqw/1.4 Arial;padding:3cqw;background:#dbe1ce;display:flex;justify-content:space-between}
.device-screen .kano-sheet-heading span{font:4cqw/1.4 monospace;color:#4b5140}
.kano-question{padding:3cqw;border-bottom:1px solid #d7d4c7}
.kano-question small{font:600 2.8cqw/1.4 Arial;letter-spacing:.05em;color:#7b7463}
.kano-question p{font:4cqw/1.4 Arial;margin:1cqw 0}
.kano-options{font:3.2cqw/1.7 Arial;padding:3cqw}
.kano-sheet .kano-note{font:2.6cqw/1.4 Arial;padding:2cqw 3cqw;background:#eeece3;color:#777062}
.services-static .device-screen-research{overflow-y:auto}
.services-static .research-deck{position:relative}
.services-static .research-page{position:relative;opacity:1;transform:none;min-height:100%;box-sizing:border-box}
@media(prefers-reduced-motion:reduce){.research-page{transition:none}}
/* Screen curvature follows the inner glass, independent of the metal bezel. */
.device-screen{border-radius:15.5% / 6.2%;container-type:inline-size;padding-top:16%;padding-bottom:12%}
.device-screen.device-screen-research{padding:0}
.ios-status{position:absolute;inset:0 0 auto;height:14cqw;z-index:6;display:flex;align-items:center;justify-content:space-between;padding:0 7cqw;pointer-events:none;color:inherit}
.device-screen .ios-time{font:600 4.1cqw/1 Arial;color:inherit;letter-spacing:-.02em}
.ios-island{position:absolute;width:29cqw;height:8cqw;left:50%;top:3cqw;transform:translateX(-50%);border-radius:10cqw;background:#050505}
.ios-island::after{content:'';position:absolute;right:3cqw;top:2.5cqw;width:2.8cqw;height:2.8cqw;border-radius:50%;background:radial-gradient(circle at 40% 35%,#23344b,#0c111a 65%);box-shadow:0 0 0 .4cqw #111}
.ios-indicators{display:flex;align-items:center;gap:1cqw}
.ios-indicators svg{width:4cqw;height:3cqw}.ios-indicators svg:last-child{width:6cqw}
.ios-bottom{position:absolute;bottom:0;left:0;right:0;z-index:6;background:#161410ed;color:#fff1d7;padding:3cqw 7cqw 2.5cqw;border-top:1px solid #ffffff18}
.device-screen-research .ios-bottom{background:#eee9dff5;color:#363b35;border-color:#29282122}
.ios-toolbar{display:flex;align-items:center;justify-content:space-between}
.ios-toolbar svg{width:5cqw;height:5cqw;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ios-toolbar svg:nth-child(2){opacity:.3}
.ios-home{width:34cqw;height:1.3cqw;border-radius:2cqw;margin:4cqw auto 0;background:currentColor}
.research-deck{top:14cqw;bottom:18cqw}
.research-page{padding:2cqw 7cqw 2cqw;gap:2.5cqw}
.research-page .research-header{position:static;inset:auto;height:auto;min-height:0;flex:none;gap:0;padding:0 0 2cqw;margin:0;align-items:center}
.research-page figure{flex-shrink:0}
.research-page figure img{aspect-ratio:1.65}
.research-page h4{font-size:8cqw}
.research-description{font-size:3.7cqw}
.research-page-kano{gap:2cqw}
.research-page-kano h4{font-size:6.5cqw}
.research-page-kano .research-outcome{display:none}
.research-page-kano .research-progress{margin-top:auto}
.kano-sheet{border-radius:0;flex-shrink:0;background:#e4ddce;color:#39362e}
.kano-sheet table{width:100%;border-collapse:collapse;table-layout:fixed;font:400 2.8cqw/1.18 Arial;letter-spacing:0}
.kano-sheet th{background:#cbc3ae;font-weight:700;padding:1cqw .5cqw;text-align:center;border-top:1px solid #aaa18d}
.kano-sheet td{vertical-align:middle;padding:1.7cqw .7cqw;border-bottom:1px solid #aaa18d;overflow-wrap:normal}
.kano-sheet td:last-child{border-left:1px solid #aaa18d;vertical-align:top}
.kano-sheet ol{margin:0;padding-left:3.6cqw;line-height:1.35}
.kano-sheet .kano-note{font-size:2.4cqw;padding:1cqw}
.research-page-kano{gap:1.5cqw}
.kano-sheet table{font-size:2.7cqw}

.research-page-kano .research-tags{display:flex;margin-top:1cqw}
.kano-sheet .kano-note{background:#d9d2c2;color:#655d4e}
/* Strategy: a compact decision workspace, with no invented priority scores. */
.strategy-app{position:absolute;inset:14cqw 0 18cqw;padding:2cqw 6.5cqw;display:flex;flex-direction:column;gap:3cqw;color:#302e26}
.strategy-topline{display:flex;justify-content:space-between;font:500 2.7cqw/1.4 monospace;border-bottom:1px solid #b5ac973f;padding-bottom:2cqw;color:#746b57}
.device-screen .strategy-topline span{font:4cqw/1 monospace;color:#8c6244}
.strategy-project{font:600 2.8cqw/1.4 Arial;letter-spacing:.06em;color:#7b6d55}
.strategy-app h4{font:700 8cqw/1.04 Poppins,Arial;letter-spacing:-.055em;margin:0}
.strategy-subtitle{font:3.5cqw/1.4 Arial;color:#736956}
.strategy-segments{display:flex;background:#dcd5c6;padding:1cqw;border-radius:3cqw;gap:1cqw}
.device-screen .strategy-segments span{flex:1;text-align:center;font:500 3.1cqw/1.4 Arial;color:#796e59;letter-spacing:0;padding:2cqw 0;border-radius:2cqw}
.device-screen .strategy-segments .selected{background:#eee9df;color:#342f25;box-shadow:0 1px 3px #33271115}
.strategy-board-label{display:flex;justify-content:space-between;align-items:center;font:3.4cqw/1.4 Arial}
.device-screen .strategy-board-label span{font:3cqw monospace;color:#82765d;letter-spacing:0}
.strategy-card{padding:3.5cqw;border:1px solid #b6aa8e55;border-radius:3.5cqw;background:#e3ddce;display:flex;flex-direction:column;gap:2cqw}
.strategy-card-meta{display:flex;justify-content:space-between;align-items:center;font:500 2.4cqw/1.4 monospace;color:#796a50}
.device-screen .strategy-card-meta span{font:2.5cqw/1.2 Arial;letter-spacing:0;color:#805532;background:#d9c7ad;padding:1cqw 1.5cqw;border-radius:5cqw}
.strategy-card h5{font:600 5.2cqw/1.1 Poppins,Arial;letter-spacing:-.035em;margin:0}
.strategy-card p,.strategy-decision p{font:3.3cqw/1.4 Arial;color:#625a4a;margin:0}
.strategy-evidence{display:flex;gap:2cqw;align-items:center;padding-top:2cqw;border-top:1px solid #b6aa8e55}
.device-screen .strategy-evidence span{font:2.4cqw monospace;color:#8a795c;letter-spacing:.04em}
.strategy-evidence strong{font:500 2.9cqw/1.4 Arial}
.strategy-tags{display:flex;gap:1.5cqw}
.device-screen .strategy-tags span{font:2.8cqw/1.3 Arial;letter-spacing:0;background:#d1d6bf;color:#4b5140;padding:1cqw 2cqw;border-radius:6cqw}
.strategy-decision{display:flex;gap:2cqw;padding:3cqw;background:#d8c4a845;border-left:2px solid #a77448;border-radius:0 2cqw 2cqw 0;margin-top:auto}
.strategy-decision-icon{font:6cqw/1 Arial;color:#a77448}
.strategy-decision strong{display:block;font:600 3.1cqw/1.3 Arial;margin-bottom:1.5cqw}
.strategy-decision p{font-size:2.9cqw}
.strategy-footnote{font:2.5cqw/1.4 Arial;color:#7e725d}
.device-shared .device-screen-strategy.is-active .strategy-card{animation:strategy-enter .7s cubic-bezier(.16,1,.3,1) both}
.device-shared .device-screen-strategy.is-active .strategy-card:nth-of-type(2){animation-delay:.12s}
@keyframes strategy-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.strategy-card{animation:none!important}}
.strategy-app{gap:1.8cqw}
.strategy-app h4{font-size:7cqw}
.strategy-card{padding:2.7cqw;gap:1.4cqw}
.strategy-card h5{font-size:4.7cqw}
.strategy-evidence{padding-top:1.3cqw}
.strategy-decision{padding:2cqw}
.strategy-career{display:flex;align-items:center;gap:1.4cqw;padding:2.5cqw 0;border-block:1px solid #b6aa8e55}
.device-screen .strategy-career span{font:500 2.8cqw/1.3 Arial;letter-spacing:0;color:#695a43;display:flex;align-items:center;gap:1.4cqw}
.strategy-career span+span::before{content:'→';color:#a77448}
.jira-app{position:absolute;inset:14cqw 0 18cqw;display:flex;flex-direction:column;gap:3cqw;color:#34352e;padding:0 5cqw;overflow:hidden;font-family:Arial,sans-serif}
.jira-top{display:flex;align-items:center;gap:2cqw;border-bottom:1px solid #b6aa8e55;padding:2cqw 0;font-size:4cqw}
.device-screen .jira-mark{color:#467292;font:6cqw/1 Arial}.device-screen .jira-tools{margin-left:auto;font:4cqw Arial;color:#706854}
.jira-breadcrumb{font:2.8cqw/1.3 Arial;color:#897b63}
.jira-project{display:flex;align-items:center;gap:3cqw}.device-screen .jira-project>span{background:#507897;color:#f6efe0;border-radius:2cqw;padding:2cqw 3cqw;font:600 5cqw Arial}
.jira-project h4{font:700 5.6cqw/1.2 Arial;margin:0;letter-spacing:-.03em}.jira-project p{font:3cqw/1.4 Arial;color:#81745d;margin:1cqw 0 0}
.jira-tabs{display:flex;gap:4cqw;border-bottom:1px solid #b6aa8e55}.device-screen .jira-tabs span{font:3.4cqw/1.4 Arial;color:#7c735f;padding-bottom:2cqw;letter-spacing:0}.device-screen .jira-tabs .selected{color:#345e80;border-bottom:2px solid #507897}
.jira-filter{display:flex;align-items:center;gap:2cqw}.device-screen .jira-filter span{font:3cqw Arial;letter-spacing:0;color:#7c735f}.jira-filter span:first-child{padding:2cqw;border:1px solid #b6aa8e55;border-radius:1cqw;flex:1}.device-screen .jira-filter b,.jira-ticket-footer b{font:600 2.6cqw Arial;background:#9d7150;border-radius:50%;color:#fff1d7;padding:1.7cqw}
.jira-sprint{display:flex;justify-content:space-between;font:3.4cqw Arial}.device-screen .jira-sprint span{font:3cqw Arial;color:#7c735f}
.jira-board-window{overflow:hidden;margin:0 -5cqw;padding:0 5cqw;flex-shrink:0;height:73cqw}
.jira-board{position:relative;display:flex;gap:3cqw;width:max-content;height:100%;transform:translateX(calc(-1 * var(--board-pan,0cqw)));will-change:transform}
.jira-column{width:59cqw;background:#ded8c9;border-radius:2cqw;padding:3cqw;flex:none}
.jira-column-title{font:600 2.6cqw Arial;display:flex;gap:2cqw;color:#706954}.device-screen .jira-column-title span{font:2.5cqw Arial;color:#81765c}
.jira-placeholder{height:31cqw;margin-top:3cqw;border:1px dashed #b9ae9755;border-radius:2cqw}
.jira-ticket{padding:3cqw;background:#efeade;border:1px solid #b6aa8e55;border-radius:2cqw;box-shadow:0 1px 2px #49372012;margin-top:2cqw}
.jira-ticket h5{font:500 3.6cqw/1.35 Arial;margin:0 0 3cqw}
.device-screen .jira-tag{font:2.5cqw/1.3 Arial;color:#536248;background:#d2dac4;padding:.8cqw 1.5cqw;border-radius:1cqw;letter-spacing:0}
.jira-ticket-footer{display:flex;align-items:center;justify-content:space-between;margin-top:3cqw}.device-screen .jira-ticket-footer span{font:2.7cqw Arial;color:#796e59;letter-spacing:0}
.jira-moving{position:absolute;left:3cqw;top:8cqw;width:53cqw;transform:translateX(var(--card-x,0cqw));z-index:2;will-change:transform}.jira-moving .jira-ticket{box-shadow:0 2cqw 5cqw #4a362030;border-color:#6688a2}.device-screen .jira-cursor{position:absolute;bottom:-2cqw;right:2cqw;background:#507897;color:#fff1d7;padding:1cqw 2cqw;border-radius:1cqw;font:2.5cqw Arial;letter-spacing:0}
.jira-progress{display:flex;gap:3cqw;align-items:center}.device-screen .jira-live-status{font:600 2.8cqw Arial;color:#507897;letter-spacing:0;min-width:18cqw}.jira-progress>div{height:1cqw;background:#d9d0bc;flex:1;border-radius:2cqw;overflow:hidden}.jira-progress i{display:block;height:100%;background:#507897;transform:scaleX(var(--board-progress,0));transform-origin:left}
.jira-story{border-top:1px solid #b6aa8e55;padding-top:3cqw}.device-screen .jira-story>span{font:600 2.7cqw Arial;color:#8f7659;letter-spacing:.04em}.jira-story h5{font:700 5cqw/1.1 Poppins,Arial;letter-spacing:-.03em;margin:2cqw 0}.jira-story p{font:3.3cqw/1.45 Arial;color:#665f4f;margin:0 0 2.5cqw}.jira-note{font:2.5cqw Arial;color:#8a7b60;margin-top:auto}
@media(prefers-reduced-motion:reduce){.jira-board,.jira-moving{transform:none;will-change:auto}}
.jira-app{gap:1.7cqw}.jira-board-window{height:62cqw}.jira-ticket{padding:2.3cqw}.jira-ticket h5{font-size:3.3cqw;margin-bottom:2cqw}.jira-ticket-footer{margin-top:2cqw}.jira-placeholder{height:28cqw}.jira-story p{font-size:3cqw}.jira-story h5{font-size:4.5cqw}

/* Owner-supplied product screens retain their own app navigation. */
.device-screen-product{padding:0;background:#fff;color:#151515}
.product-shot{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;pointer-events:none}
.product-shot.is-selected{opacity:1}
.product-shot img{display:block;width:100%;height:100%;object-fit:fill}
.device-screen-product .ios-status{background:#fff;color:#151515;transition:background .55s ease,color .55s ease}
.device-screen-product.product-dark .ios-status{background:#1d1a23;color:#fff}
.device-screen-product .ios-bottom{display:none}
.device-screen-product::after{content:'';position:absolute;bottom:2.2cqw;left:33%;width:34%;height:1.2cqw;border-radius:2cqw;background:#343434;z-index:7}
.device-screen-product.product-dark::after{display:none}
@media(prefers-reduced-motion:reduce){.product-shot,.device-screen-product .ios-status{transition:none}}

/* AtomUI uses the same warm editorial language as the research screens. */
.device-screen-system{padding:0;background:#eee9df;color:#292821}
.atomui-showcase{position:absolute;inset:0;overflow:hidden;background:#eee9df}
.atomui-editorial{position:absolute;top:16cqw;left:7cqw;right:7cqw;z-index:2}
.atomui-topline{display:flex;justify-content:space-between;border-bottom:1px solid #29282125;padding-bottom:2cqw;font:500 2.7cqw/1.4 monospace;color:#6d6c5d}
.device-screen .atomui-topline span{font:inherit;letter-spacing:0;color:inherit}
.atomui-logo{display:block;width:34cqw;height:auto;margin:4cqw 0 3cqw}
.atomui-context h4{font:700 8cqw/1.04 Poppins,Arial;letter-spacing:-.055em;margin:0 0 3cqw}
.atomui-context p{font:400 3.7cqw/1.45 Arial,sans-serif;color:#49483e;margin:0 0 3cqw}
.atomui-context .research-tags{gap:1.5cqw;margin-bottom:3cqw}
.atomui-context a{display:inline-flex;align-items:center;min-height:8cqw;font:600 3.3cqw/1.4 Arial,sans-serif;color:#78532e;text-decoration:underline;text-underline-offset:1cqw}
.device-screen-system.is-active .atomui-context a,.services-static .atomui-context a{pointer-events:auto}
.atomui-context a:focus-visible{outline:2px solid #99703e;outline-offset:3px;border-radius:2px}
/* The glass is the only crop: full-size, straight sheets on the existing cream. */
.atomui-gallery{position:absolute;top:105cqw;left:7cqw;width:max-content}
.atomui-row{display:flex;align-items:start;gap:5cqw;width:max-content;will-change:transform}
.atomui-row img{display:block;width:112cqw;height:112cqw;object-fit:cover;object-position:left top;border-radius:3cqw;flex:none}
.device-screen-system .ios-status{background:#eee9df;color:#292821}
.device-screen-system .ios-bottom{background:#eee9dff5;color:#363b35;border-color:#29282122}
.device-shared .device-screen{contain:paint;will-change:clip-path}
@media(prefers-reduced-motion:reduce){.atomui-row{transform:none;will-change:auto}}

/* Mobile: prioritise the phone content and readable supporting copy. */
@media(max-width:700px){
 .service-artwork.device-mockup{height:78svh;top:1%;left:48.3%}
 .service-caption{bottom:24%}
 .service-caption h3{font-size:clamp(25px,6.5vw,32px)}
 .service-caption p{font-size:clamp(14px,3.8vw,17px);line-height:1.5;margin-top:12px}
 .service-ticker{font-size:clamp(64px,21vw,88px)}
}
@media(max-width:700px) and (max-height:700px){
 .service-artwork.device-mockup{height:70svh;top:0}
 .service-caption{bottom:23%}
 .service-caption h3{font-size:23px}
 .service-caption p{font-size:13px;line-height:1.45}
}