/* Material depth for the existing live interfaces. No changes to their controls. */
body:has(.digital-evolution){--screen-edge:#909b9d;--screen-shadow:0 1px 1px #ffffff42 inset,0 -1px 1px #0008 inset,0 2px 2px #0005,0 12px 24px #030b1038,0 42px 70px -22px #030b1080}
body:has(.digital-evolution) :is(.digital-board,.scene-site,.play-preview,.compose-board,.service-machine,.responsive-device){box-shadow:var(--screen-shadow);border-color:var(--screen-edge)}
body:has(.digital-evolution) .digital-board{border:1px solid #94a2a3;border-bottom:4px solid #12191d;border-radius:12px;background:#1c252b}
body:has(.digital-evolution) .digital-board:before,body:has(.digital-evolution) .digital-board:after{display:none}
body:has(.digital-evolution) :is(.canvas-toolbar,.canvas-footer,.machine-top){background:linear-gradient(180deg,#3a444b,#242c32);box-shadow:inset 0 1px #ffffff14,inset 0 -1px #0a101999}
body:has(.digital-evolution) .canvas-layers{background:linear-gradient(100deg,#2a3339,#1c242a);box-shadow:inset -1px 0 #ffffff0c}
body:has(.digital-evolution) .canvas-artboard{box-shadow:0 1px 0 #fff8,0 3px 6px #0003,0 16px 28px #0006;border-color:#a8aaa4}
body:has(.digital-evolution) :is(.demo-browser,.scene-browser,.play-browser,.anatomy-chrome){background:linear-gradient(#f4f4ee,#d8ded9);color:#586366;border-bottom:1px solid #b4bfbb;box-shadow:inset 0 1px #fff9}
body:has(.digital-evolution) .demo-browser>span:nth-child(2){background:#f6f8f2aa;border:1px solid #a2afa844;border-radius:4px;width:61%;text-align:center;line-height:1.7}
body:has(.digital-evolution) .scene-site{border:5px solid #253037!important;border-top-width:7px!important;border-radius:10px;overflow:hidden}
body:has(.digital-evolution) .walk-live .scene-site{box-shadow:0 1px 0 #b6c2bc,0 4px 0 #0c171e,0 26px 60px #0009,0 3px 6px #0008}
.material-surface{isolation:isolate}
.material-surface:is(.play-preview,.service-machine){position:relative}
.material-reflection{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:20;background:linear-gradient(112deg,transparent 12%,#fff0 25%,#fff 42%,#fff0 59%,transparent 75%);background-size:240% 100%;background-position:var(--reflection-x,70%) center;opacity:.045;box-shadow:inset 0 1px 0 #fff7,inset 1px 0 0 #fff2;transition:background-position 650ms ease-out}
/* The responsive example now has a tangible chassis, camera and glass bezel. */
body:has(.digital-evolution) .responsive-device{border:7px solid #202a30;border-top-width:17px;border-bottom-width:11px;border-radius:16px;outline:1px solid #9aa7a7;outline-offset:0;background:#e9efeb;box-shadow:0 1px 0 2px #4c585e,0 5px 0 1px #10191e,0 35px 55px -12px #0009}
.responsive-device:before{content:'';position:absolute;left:50%;top:0;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7896b0,#10232e 55%,#071116);box-shadow:0 0 0 2px #17232a;z-index:23;translate:-50% 3px}
.responsive-chrome{padding-top:15px;background:linear-gradient(#e3e8e4,#d2dbd5);color:#53625f;border-bottom:1px solid #bcc9c1}
.responsive-chrome>span:nth-child(2){background:#f5f7f2;border:1px solid #b8c7bd;border-radius:5px;padding:3px 8px;flex:1;text-align:center;white-space:nowrap}
body:has(.digital-evolution) .responsive-device[data-device=tablet]{border-width:13px;border-radius:25px}
body:has(.digital-evolution) .responsive-device[data-device=mobile]{border-width:8px;border-top-width:19px;border-bottom-width:14px;border-radius:33px}
.responsive-device[data-device=mobile]:after{content:'';position:absolute;bottom:4px;left:36%;right:36%;height:3px;background:#63706b;border-radius:3px;z-index:23}
.responsive-device[data-device=mobile] .responsive-chrome>span:first-child{display:none}
.device-stage:before{content:'';position:absolute;bottom:3%;left:8%;right:8%;height:28px;background:#020d15;opacity:.5;filter:blur(19px);border-radius:50%;pointer-events:none}
/* Original ray-traced style artwork replaces flat symbolic gradient blobs. */
body:has(.digital-evolution) :is(.digital-orb,.mesh-object,.anatomy-orb,.machine-art,.machine-after>i){background:url('/assets/pulida-glass-loop.png') center/contain no-repeat;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(8px 16px 10px #18232630)}
body:has(.digital-evolution) .digital-orb{width:96%;height:96%;transform:rotate(calc((1 - var(--assembly,1))*-12deg))}
body:has(.digital-evolution) .digital-orb:after,body:has(.digital-evolution) .digital-orb>*,body:has(.digital-evolution) .mesh-object>*{display:none}
body:has(.digital-evolution) .mesh-object{transform:rotate(calc(-8deg + var(--system-progress,0)*16deg));height:100%;width:100%;max-width:100%;filter:drop-shadow(7px 16px 9px #19303d30)}
body:has(.digital-evolution) .machine-art{transform:rotate(calc(-8deg + var(--service-local,1)*16deg))}
body:has(.digital-evolution) .art-one{background:radial-gradient(ellipse at 35% 20%,#e2e8df,#97aba8)}
body:has(.digital-evolution) .art-one i{height:100%;width:90%;background:url('/assets/pulida-glass-loop.png') center/contain no-repeat;border:0;border-radius:0;box-shadow:none;transform:rotate(-16deg);filter:drop-shadow(5px 9px 5px #18343844)}
body:has(.digital-evolution) .art-two i{background:linear-gradient(135deg,#eff3e8,#b3c7c4 45%,#6c8b91);border:1px solid #cdded3;box-shadow:inset 1px 1px 1px #ffffffa0,inset -2px -2px 2px #203e5266,3px 5px 0 #5c747b,4px 6px 0 #a4b7b5,10px 16px 18px #061b2666}
body:has(.digital-evolution) .anatomy-orb{width:35%;right:3%;bottom:3%}
/* Layered panels retain sharp contact shadows when assembled. */
body:has(.digital-evolution) .anatomy-base{border:5px solid #33434a;border-radius:11px;background:linear-gradient(140deg,#f9faf5,#dbe3dc);box-shadow:0 1px 0 #c2cfc6,0 4px 0 #18262b,0 27px 40px #243f443d}
body:has(.digital-evolution) .anatomy-layer{border-color:#aabbb1;box-shadow:inset 0 1px #fff9,0 1px 2px #1a323438,0 calc(3px + (1 - var(--sequence,1))*15px) calc(7px + (1 - var(--sequence,1))*17px) #18303930}
body:has(.digital-evolution) .identity-layer{background:linear-gradient(125deg,#f4f5eb,#d2dfd5)}
body:has(.digital-evolution) .information-layer{background:linear-gradient(#f5f7f0,#e3ebe1)}
body:has(.digital-evolution) .action-layer{background:linear-gradient(125deg,#3b5155,#243a40)}
body:has(.digital-evolution) :is(.compose-dashboard,.machine-code){background:linear-gradient(120deg,#2b3b43,#14262f);border:1px solid #879e9b;box-shadow:inset 0 1px #e5f3ee25,0 2px 2px #0004,0 16px 30px #06131c55}
body:has(.digital-evolution) :is(.machine-browser,.care-dashboard,.website-scanner,.finale-windows>div){border:1px solid #a0b3aa;box-shadow:inset 0 1px #fff9,0 2px 3px #09202924,0 16px 32px #09202935}
body:has(.digital-evolution) .machine-browser{background:linear-gradient(135deg,#f7f7ed,#dae5db);top:27%;height:57%;padding:4%;display:grid;grid-template-rows:auto 1fr auto;gap:6px}
body:has(.digital-evolution) .machine-browser>div:first-child{padding-bottom:2%}
body:has(.digital-evolution) .machine-browser>p{margin:0;align-self:center;max-width:72%;font-size:3.8cqw}
body:has(.digital-evolution) .machine-lines{display:none}
body:has(.digital-evolution) .machine-pill{margin:0;justify-self:start;padding:5px 9px}
body:has(.digital-evolution) .care-dashboard{background:linear-gradient(135deg,#f4f6ee,#d6e3d8)}
body:has(.digital-evolution) .care-task{box-shadow:0 1px #fff5}
/* Refined room materials keep the walkthrough digital without the wire-grid look. */
.walk-live .room-floor{background:linear-gradient(180deg,#14212b,#35474c 55%,#53605d);border-color:#91a4a329;box-shadow:inset 0 0 180px #060f1977}
.walk-live .room-frame{border-color:#a9b6ae88;background:linear-gradient(90deg,#d0dac322,transparent 4%,transparent 96%,#9baca422);box-shadow:0 0 0 7px #283940,0 0 0 8px #9facaa66,inset 0 2px 3px #dfebd744,0 12px 25px #0007}
.walk-live .room-wall{background:linear-gradient(90deg,#15232d,#34464e 48%,#182932);border-color:#6e838b33}
@media(max-width:600px){body:has(.digital-evolution) .scene-site{border-width:3px!important}.responsive-chrome{font-size:8px;gap:4px;padding-inline:7px}.responsive-chrome>span:nth-child(2){padding-inline:3px}.material-reflection{opacity:.035}}
@container(max-width:300px){
 body:has(.digital-evolution) .responsive-site .responsive-hero{grid-template-columns:1.35fr .65fr;gap:6px}
 body:has(.digital-evolution) .responsive-site .responsive-hero h3{font-size:22px;line-height:1.05;margin:7px 0}
 body:has(.digital-evolution) .responsive-site .responsive-hero p{font-size:8px;line-height:1.45}
 body:has(.digital-evolution) .responsive-site .ui-kicker{font-size:6px;letter-spacing:.03em}
 body:has(.digital-evolution) .responsive-site .responsive-projects>div:first-child{display:block}
 body:has(.digital-evolution) .responsive-site .responsive-projects h4{margin-bottom:5px}
}
@media(prefers-reduced-motion:reduce){.material-reflection{transition:none!important}body:has(.digital-evolution) .digital-orb,body:has(.digital-evolution) .mesh-object,body:has(.digital-evolution) .machine-art{transform:none!important}}
.motion-disabled .material-reflection{transition:none;background-position:70% center}
/* Deliberate reading space before each pinned demonstration moves on. */
.systems-scroll .digital-systems{height:390svh}
.continuum-live .design-playground.continuum-chapter{height:360svh!important}
.continuum-live .home-services.continuum-chapter{height:390svh!important}
.continuum-live .project-invitation.continuum-chapter{height:250svh!important}
.continuum-live .build-chapter{height:260svh!important}
/* The miniature website has real header, copy and artwork columns. */
body:has(.digital-evolution) .identity-layer{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:6px 12px;padding:12px 4%;align-items:center}
body:has(.digital-evolution) .identity-layer>div{grid-column:1/-1;grid-row:1;padding:0 0 6px;align-items:center;gap:12px;min-width:0}
body:has(.digital-evolution) .identity-layer>div>span{white-space:nowrap;font-size:clamp(6px,1.25cqw,10px)}
body:has(.digital-evolution) .identity-layer b{font-size:clamp(15px,3.4cqw,25px);line-height:1}
body:has(.digital-evolution) .identity-layer>p{grid-column:1;grid-row:2;font-size:clamp(14px,3.5cqw,25px);line-height:1.1;margin:0;align-self:center}
body:has(.digital-evolution) .identity-layer .anatomy-orb{position:relative;grid-column:2;grid-row:2;inset:auto;width:100%;height:100%;max-height:100%;aspect-ratio:auto;margin:0;min-height:0;align-self:stretch}
body:has(.digital-evolution) .information-layer{padding:8px 4%;display:flex;align-items:center}
body:has(.digital-evolution) .information-layer>div{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;font-size:clamp(7px,1.4cqw,11px);line-height:1.3}
body:has(.digital-evolution) .information-layer i{font-size:clamp(6px,1.15cqw,9px);margin-bottom:4px}
body:has(.digital-evolution) .action-layer{padding:7px 4%;gap:8px}
body:has(.digital-evolution) .action-layer p{font-size:clamp(10px,2cqw,16px);line-height:1.15}
body:has(.digital-evolution) .anatomy-cta{font-size:clamp(6px,1.2cqw,10px);padding:6px 8px}
.identity-layer .layer-tag{opacity:calc(1 - var(--identity,1))}
.information-layer .layer-tag{opacity:calc(1 - var(--information,1))}
.action-layer .layer-tag{opacity:calc(1 - var(--action,1))}
/* Give the project explanation the same readable, settled stage. */
body:has(.digital-evolution) .project-invitation.continuum-chapter{display:block;width:100%;max-width:none;padding:0}
.project-invitation>.continuum-stage{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:8%;padding:75px 6%}
.project-invitation .continuum-stage>div>p:not(.eyebrow){font-size:21px;line-height:1.5;color:#b7bfc2}
body:has(.digital-evolution) .project-invitation .invitation-steps li{transform:none}
@media(max-width:999px){
 .project-invitation>.continuum-stage{grid-template-columns:1fr;gap:24px}
 .continuum-live .project-invitation>.continuum-stage{gap:20px;align-items:stretch}
 .project-invitation .continuum-stage h2{font-size:clamp(28px,4.6vw,38px);margin-top:12px}
 .project-invitation .continuum-stage>div>p:not(.eyebrow){font-size:17px;line-height:1.45}
 .project-invitation .project-pipeline{padding:15px 0 35px;margin-bottom:15px}
 .project-invitation .invitation-steps{margin:15px 0}
 body:has(.digital-evolution) .project-invitation .invitation-steps li{font-size:18px;padding:10px 0}
}
@media(max-width:480px){body:has(.digital-evolution) .identity-layer{padding:9px 4%;gap:5px 8px}body:has(.digital-evolution) .identity-layer>p{font-size:14px}.project-invitation .continuum-stage>div>p:not(.eyebrow){font-size:15px}.project-invitation .continuum-stage h2{font-size:28px}}
/* Palette changes blend while layout geometry is animated in experience.js. */
.motion-enabled body:has(.digital-evolution) :is(.play-preview,.play-site,.play-type,.art-disc){transition:background-color 850ms cubic-bezier(.2,.7,.2,1),color 850ms ease,transform 450ms ease}
.motion-enabled body:has(.digital-evolution) .play-art{transition:opacity 850ms ease}
.motion-enabled body:has(.digital-evolution) .play-art img{transition:border-radius 900ms ease}
@media(prefers-reduced-motion:reduce){body:has(.digital-evolution) :is(.play-preview,.play-site,.play-type,.play-art,.play-art img,.art-disc){transition:none!important}}