/* Unpublished digital direction: soft graphite, pearl, muted metallic light. */
body:has(.digital-evolution){--ui:'DM Sans','Segoe UI',sans-serif;--paper:#171c20;--ink:#eeece6;--muted:#b7bfc2;--accent:#c8b99d;--line:#485158;background:#171c20;color:#eeece6}
body:has(.digital-evolution) :is(.header,.header nav){background:#171c20}
body:has(.digital-evolution) .header:before{background:#171c20;box-shadow:0 0 0 100vmax #171c20}
body:has(.digital-evolution) .digital-studio .atelier-stage{background:linear-gradient(90deg,#12191ddd,#12191d33),url('/assets/digital-atmosphere.png') center/cover}
.digital-evolution .digital-grid{opacity:.17}
.digital-evolution .digital-glow{background:radial-gradient(ellipse,#d0d8df12,transparent 65%)}
body:has(.digital-evolution) .digital-board{background:#1e252bdd;border-color:#7d898b;box-shadow:0 35px 100px #070b1166;backdrop-filter:blur(20px)}
body:has(.digital-evolution) :is(.canvas-toolbar,.canvas-footer){background:#242d32;color:#cfd5d5;border-color:#485158}
body:has(.digital-evolution) .canvas-layers{background:#20272c;border-color:#485158;color:#b7bfc2}
body:has(.digital-evolution) .canvas-toolbar,body:has(.digital-evolution) .canvas-footer{font-family:var(--ui);font-size:1.05cqw}
body:has(.digital-evolution) .canvas-layers{font-family:var(--ui);font-size:1.05cqw}
body:has(.digital-evolution) .canvas-layers>span:first-child{font-size:.95cqw}
body:has(.digital-evolution) .worlds-stage{background:linear-gradient(#171c20bb,#171c20ed),url('/assets/digital-atmosphere.png') center/cover}
body:has(.digital-evolution) .journey-bridge{background:#171c20}
body:has(.digital-evolution) .bridge-stage:before{background:linear-gradient(#141b2155,#141b2188),url('/assets/digital-atmosphere.png') center/cover}
body:has(.digital-evolution) .bridge-stage{isolation:isolate}
body:has(.digital-evolution) .bridge-stage h2{font-size:clamp(38px,6vw,84px)}
body:has(.digital-evolution) .atelier-intro .eyebrow{color:#dfd4c0}
body:has(.digital-evolution) .atelier-description{color:#d4d9d8}
body:has(.digital-evolution) .motion-toggle,body:has(.digital-evolution) .journey-trail{background:#20282ee8;border-color:#697578}

/* A level, spacious comparison with stable controls. */
body:has(.digital-evolution) .transformation-story{background:#e9e8e2;color:#252b2d;padding-block:65px;overflow:clip}
body:has(.digital-evolution) .transformation-sticky{grid-template-columns:.66fr 1.34fr;gap:5%;align-items:center}
body:has(.digital-evolution) .transformation-copy h2{font-size:clamp(34px,3.2vw,48px);line-height:1.06;margin:14px 0 20px}
body:has(.digital-evolution) .transformation-copy>p:not(.eyebrow){font-size:20px;color:#596263}
body:has(.digital-evolution) .transformation-story .signature-lab{transform:none!important;width:100%;padding:24px;background:#faf9f4;border:1px solid #b5bcba;border-radius:8px;box-shadow:0 20px 60px #15232b15}
body:has(.digital-evolution) .transformation-story .signature-lab .lab-heading h2{font-size:34px;letter-spacing:-.025em;line-height:1.05}
body:has(.digital-evolution) .transformation-story .signature-lab .redesign-comparison{height:370px;border:1px solid #afb8b5;border-radius:4px}
body:has(.digital-evolution) .transformation-story .lab-heading{margin-bottom:14px}
body:has(.digital-evolution) .transformation-story .scene-tabs button{font:12px/1.4 var(--ui);padding:10px 12px;min-height:40px;border-radius:4px;border-color:#bbc2bf}
body:has(.digital-evolution) .transformation-story .scene-tabs button[aria-pressed=true]{background:#2c3a3f;color:#f5f3ec}
body:has(.digital-evolution) .transformation-story .story-chapters{margin-block:22px}
body:has(.digital-evolution) .transformation-story .story-chapters li{border-color:#bac2bd;opacity:.5;padding:12px 0;transition:opacity .6s,transform .6s}
body:has(.digital-evolution) .transformation-story .story-chapters li.is-current{opacity:1;transform:translateX(8px)}
body:has(.digital-evolution) .story-chapters h3{font-size:23px}
body:has(.digital-evolution) .story-chapters p{font-size:17px}
body:has(.digital-evolution) .transformation-copy .story-hint{font-size:16px}
body:has(.digital-evolution) .transformation-story .redesign-explanation{font-size:17px;line-height:1.4;min-height:0;color:#4c5656}
body:has(.digital-evolution) .transformation-story .comparison-note{font-size:14px}
body:has(.digital-evolution) .transformation-story .comparison-presets button{font:12px var(--ui);min-height:38px}
body:has(.digital-evolution) .transformation-story .range-label{font:12px var(--ui);margin-top:12px}
body:has(.digital-evolution) .transformation-story .lab-sample{font-size:17px}
body:has(.digital-evolution) .transformation-story .polish-range{accent-color:#627b80;min-height:32px}
body:has(.digital-evolution) .transformation-story .arrival-scene{height:275px}
@media(min-width:1000px) and (min-height:720px){
 body:has(.digital-evolution) .transformation-story.scroll-story-active{height:285svh;padding:0}
 body:has(.digital-evolution) .scroll-story-active .transformation-sticky{position:sticky;top:var(--stage-top,78px);min-height:calc(100svh - var(--stage-top,78px));padding-block:20px}
 body:has(.digital-evolution) .scroll-story-active .signature-lab{padding:18px}
 body:has(.digital-evolution) .scroll-story-active .signature-lab .redesign-comparison{height:clamp(280px,38svh,370px)}
 body:has(.digital-evolution) .scroll-story-active .arrival-scene{height:calc(clamp(280px,38svh,370px) - 92px)}
 body:has(.digital-evolution) .scroll-story-active .redesign-intro{display:none}
 body:has(.digital-evolution) .scroll-story-active .comparison-presets{margin-block:5px}
 body:has(.digital-evolution) .scroll-story-active .redesign-explanation{margin:6px 0;padding-top:8px}
 body:has(.digital-evolution) .scroll-story-active .lab-sample{margin-top:8px;padding-top:8px}
}

/* A working website resizes through desktop, tablet and mobile. */
.digital-systems{position:relative;background:#1b2228;color:#eeece6;isolation:isolate;scroll-margin-top:78px}
.systems-stage{position:relative;display:grid;grid-template-columns:.6fr 1.4fr;align-items:center;gap:5%;padding:90px 6%;overflow:clip;isolation:isolate}
.systems-stage:before{content:'';position:absolute;inset:-7%;background:linear-gradient(90deg,#172027e8,#17202755),url('/assets/digital-atmosphere.png') center/cover;z-index:-2;transform:translateY(var(--ambient-shift,0px)) scale(1.07)}
.systems-scroll .digital-systems{height:270svh}
.systems-scroll .systems-stage{height:calc(100svh - var(--stage-top,78px));position:sticky;top:var(--stage-top,78px);padding-block:35px}
.systems-intro h2{font-size:clamp(46px,5.3vw,76px);line-height:1;margin:22px 0}
.systems-intro h2 em{color:#bdcfd1}
.systems-intro>p:not(.eyebrow){font-size:21px;line-height:1.45;color:#c6ced0;max-width:28ch}
.device-controls{display:flex;flex-wrap:wrap;gap:7px;margin-top:30px}
.device-controls button{font:12px var(--ui);padding:11px 13px;min-height:44px;border:1px solid #78898d;border-radius:30px;background:#1b252b;color:#dfe7e7;cursor:pointer}
.device-controls button[aria-pressed=true]{background:#c8d6d5;color:#202a2e;border-color:#c8d6d5}
.systems-intro #device-status{font:12px/1.6 var(--ui);margin-top:18px;min-height:58px;color:#becacc}
body:has(.digital-evolution) #device-follow{font:12px var(--ui);background:transparent;border:0;border-bottom:1px solid #869a9c;padding:8px 0;cursor:pointer;color:#d1dddd}
.device-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;perspective:1400px}
.device-orbit{position:absolute;inset:12% -8%;border:1px solid #adc5c530;border-radius:50%;transform:rotate(calc(-25deg + var(--system-progress,0)*60deg));pointer-events:none}
.responsive-device{width:100%;max-width:780px;background:#e9efeb;color:#263b3e;border:1px solid #a9b9b7;border-radius:12px;box-shadow:0 35px 80px #07131966;overflow:hidden;container-type:inline-size;position:relative;z-index:1}
.motion-enabled .responsive-device{transition:width 1.1s cubic-bezier(.22,.75,.2,1),border-radius 1.1s,transform 1.1s;transform:rotateY(calc((.5 - var(--system-progress,0))*8deg))}
.responsive-device[data-device=tablet]{width:70%;border-radius:20px}
.responsive-device[data-device=mobile]{width:37%;min-width:250px;border-radius:28px}
.responsive-chrome{display:flex;justify-content:space-between;gap:10px;padding:12px 16px;background:#303d43;color:#c8d3d3;font:10px var(--ui)}
.responsive-chrome>span:first-child{font-size:6px;letter-spacing:2px}
.responsive-site{padding:22px 5%;font-family:var(--ui)}
.responsive-nav{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #a6bbb655;padding-bottom:15px;gap:10px}
.responsive-nav b{font:500 26px var(--serif);letter-spacing:-.05em}
.responsive-nav>span{font:9px var(--ui)}
.responsive-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:5%;align-items:center;padding:24px 0 25px;min-height:210px}
.responsive-hero .ui-kicker{font:9px var(--ui);letter-spacing:.09em}
.responsive-hero h3{font:500 clamp(30px,5.4cqw,45px)/.98 var(--serif);margin:14px 0;letter-spacing:-.025em}
.responsive-hero p{font:10px/1.6 var(--ui);color:#58716f}
.mesh-object{width:90%;aspect-ratio:1;display:grid;place-items:center;position:relative;border-radius:32%;transform:rotate(calc(10deg + var(--system-progress,0)*60deg));background:conic-gradient(from 45deg,#41585e,#d9e2da,#7c9c9b,#32454f,#dce1cf,#41585e);box-shadow:inset 0 0 30px #fff6,12px 18px 22px #193e4b22}
.mesh-object i{position:absolute;inset:9%;border:1px solid #f5fbef99;border-radius:28%;transform:rotate(15deg)}
.mesh-object i:nth-child(2){inset:20%;transform:rotate(30deg)}.mesh-object i:nth-child(3){inset:31%;transform:rotate(45deg)}
.mesh-object>span{font:60px var(--serif);color:#edf5e9;text-shadow:0 4px 8px #203c4f55}
.responsive-projects>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid #a6bbb6;padding-top:14px;margin-bottom:14px}
.responsive-projects h4{font:12px var(--ui)}
.responsive-projects button{font:10px var(--ui);border:1px solid #799794;border-radius:20px;background:transparent;color:#345351;padding:6px 11px;min-height:32px;cursor:pointer}
.responsive-projects button[aria-pressed=true]{background:#3b5557;color:#f6f8ef}
.mini-projects{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini-projects article{min-width:0}.mini-projects article[hidden]{display:none}
.mini-art{height:95px;background:#a0b5b3;overflow:hidden;position:relative;display:grid;place-items:center}
.art-one i{width:50%;height:150%;border:12px solid #e5e8d9;border-radius:50%;transform:rotate(35deg);box-shadow:10px 10px 20px #16384455}
.art-two{background:#354952}.art-two i{width:70px;height:70px;background:linear-gradient(45deg,#99b4b6,#e7ebdb);border-radius:12px;transform:rotate(-25deg);box-shadow:12px 12px 0 #96b3b755}
.mini-projects article>span{display:block;font:9px var(--ui);margin-top:9px}
.systems-caption{font:11px var(--ui);color:#bfcdd0;margin-top:24px;position:relative;z-index:1}
@container(max-width:420px){.responsive-site{padding:16px}.responsive-nav>span{font-size:8px;max-width:100px;text-align:right}.responsive-hero{min-height:190px;gap:10px;padding:20px 0}.responsive-hero h3{font-size:30px}.responsive-hero p{font-size:9px}.mesh-object>span{font-size:38px}.responsive-projects>div:first-child{display:block}.responsive-projects h4{margin-bottom:10px}.mini-art{height:80px}}
@container(max-width:300px){.responsive-hero{grid-template-columns:1fr .7fr}.responsive-hero h3{font-size:27px}.responsive-nav b{font-size:24px}.responsive-hero .ui-kicker{font-size:7px}.responsive-chrome{font-size:8px;padding-inline:12px}.mini-projects{gap:9px}.mini-projects article>span{font-size:8px}}

/* Distinct motion in each later chapter, with a readable static fallback. */
body:has(.digital-evolution) :is(.composition-play,.home-services:before,.cta){background:linear-gradient(90deg,#151e26e8,#19222a88),url('/assets/digital-atmosphere.png') center/cover}
body:has(.digital-evolution) .composition-play{gap:6%;padding-block:110px}
body:has(.digital-evolution) .compose-board{background:#edf0e9;border:1px solid #829998;border-radius:10px;box-shadow:0 30px 80px #08182777}
body:has(.digital-evolution) .compose-heading p{font-size:5.8cqw}
body:has(.digital-evolution) .compose-image{width:41%;height:67%;right:5%;top:19%}
.compose-dashboard{height:100%;padding:7%;background:#24383e;color:#dae6df;border:1px solid #9fb7b3;border-radius:8px;font:1.25cqw var(--ui);box-shadow:0 15px 30px #10272c44}
.compose-dashboard>div:first-child{display:flex;align-items:center;gap:7%;font-size:1.2cqw}.compose-dashboard>div:first-child b{margin-left:auto}
.compose-dashboard>p{font:500 3.1cqw/1.1 var(--serif);margin:14% 0}
.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:8%;margin-bottom:13%}
.dashboard-grid>span{padding:13%;background:#344a4e;border-radius:4px;font-size:1cqw}
.dashboard-grid i{display:block;height:3px;background:#b4c8bd;margin-top:12%;width:80%}.dashboard-grid i:nth-child(2){width:55%}.dashboard-grid b{display:block;font-size:4cqw;line-height:1;text-align:center;margin-top:8%;color:#bccfc5}
.dashboard-task{font-size:1.1cqw;padding:5% 0;border-bottom:1px solid #acc2bb33}.dashboard-task i{font-style:normal;color:#abcbbd;margin-right:8%}
body:has(.digital-evolution) .compose-colour{background:#b4c9c4}
body:has(.digital-evolution) .design-playground{background:#dce3df;color:#293b3e}
body:has(.digital-evolution) .play-art img{object-fit:cover;mix-blend-mode:normal;border-radius:42% 42% 10px 10px;height:290px;box-shadow:0 15px 30px #15374330}
body:has(.digital-evolution) .art-disc{background:#adc8c4;transform:translateY(calc(var(--journey-progress,.5)*-40px)) rotate(calc(var(--journey-progress,.5)*50deg));border-radius:28%}
body:has(.digital-evolution) .play-preview[data-layout=immersive] .play-art{opacity:.65}
body:has(.digital-evolution) .play-preview[data-layout=immersive] .play-type{background:var(--play-paper);padding:20px;justify-self:center}
body:has(.digital-evolution) .polish-standard{background:#e8ece7}
body:has(.digital-evolution) .standard-grid article{padding:30px 22px;border:1px solid #acbbb4;border-radius:8px;background:#f4f6ef}
.motion-enabled body:has(.digital-evolution) :is(.standard-grid article,.explore-doors>a){transform:translateY(calc((1 - var(--feature-enter,1))*90px)) rotateX(calc((1 - var(--feature-enter,1))*10deg));opacity:calc(.25 + var(--feature-enter,1)*.75)}
.motion-enabled body:has(.digital-evolution) .service-links>a{transform:translateX(calc((1 - var(--feature-enter,1))*100px));background:linear-gradient(90deg,#c4d7d210,transparent);padding-inline:22px;border-color:#83999b66}
body:has(.digital-evolution) .home-services .service-links>a{transition:background .5s,border-color .5s}
body:has(.digital-evolution) .service-links>a:hover{background:#b6cfcb18;border-color:#b6cfcb}
body:has(.digital-evolution) .project-invitation{position:relative;isolation:isolate}
body:has(.digital-evolution) .invitation-steps{position:relative}
body:has(.digital-evolution) .invitation-steps:before{content:'';position:absolute;left:12px;top:10px;bottom:10px;width:1px;background:#9ab7b5;transform:scaleY(var(--journey-progress,1));transform-origin:top}
body:has(.digital-evolution) .invitation-steps li{position:relative;background:#171c20}
.motion-enabled body:has(.digital-evolution) .invitation-steps li{transform:translateX(calc((1 - var(--feature-enter,1))*60px))}
body:has(.digital-evolution) .cta{position:relative;overflow:hidden;background-position:center calc(50% + var(--ambient-shift,0px));padding-block:110px}
body:has(.digital-evolution) .cta h2{font-size:clamp(48px,6vw,85px)}
body:has(.digital-evolution) .explore-doors a{background:linear-gradient(135deg,#2d3a41,#1b252b);border-color:#667e80;border-radius:8px}
body:has(.digital-evolution) .check-panel{background:#27383d;border-color:#93aaa7}
body:has(.digital-evolution) .polish-check{background:#e9e8e2}
body:has(.digital-evolution) .footer{background:radial-gradient(ellipse at 50% 100%,#9bb8bb18,transparent 60%)}

@media(max-width:999px){
 body:has(.digital-evolution) .transformation-sticky{grid-template-columns:1fr;gap:28px}
 body:has(.digital-evolution) .transformation-copy h2{font-size:42px;max-width:22ch}
 body:has(.digital-evolution) .story-chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
 body:has(.digital-evolution) .story-chapters li{opacity:1}
 .systems-stage{grid-template-columns:1fr;padding:65px 6%;gap:35px}
 .systems-intro{max-width:650px}.systems-intro h2{font-size:53px}.systems-intro>p:not(.eyebrow){max-width:45ch}
 .device-controls{margin-top:22px}.systems-intro #device-status{min-height:0}
 .responsive-device{max-width:720px}.responsive-device[data-device=tablet]{width:80%}.responsive-device[data-device=mobile]{width:55%;min-width:250px}
 .responsive-site{padding:18px 5%}.device-stage{min-height:480px}
 body:has(.digital-evolution) .composition-play{padding-block:70px}
}
@media(max-width:600px){
 body:has(.digital-evolution) .transformation-story{padding-block:45px}
 body:has(.digital-evolution) .transformation-copy h2{font-size:36px}
 body:has(.digital-evolution) .story-chapters{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}
 body:has(.digital-evolution) .story-chapters li{display:block;flex:1;min-width:80px;padding:10px 0}
 body:has(.digital-evolution) .story-chapters h3{font-size:19px;line-height:1.2;margin-top:7px}
 body:has(.digital-evolution) .story-chapters p{display:none}
 body:has(.digital-evolution) .transformation-story .signature-lab{padding:12px}
 body:has(.digital-evolution) .transformation-story .signature-lab .lab-heading h2{font-size:29px}
 body:has(.digital-evolution) .transformation-story .scene-tabs button{font-size:10px;padding:8px 5px}
 body:has(.digital-evolution) .transformation-story .signature-lab .redesign-comparison{height:365px}
 body:has(.digital-evolution) .transformation-story .arrival-scene{height:273px}
 body:has(.digital-evolution) .transformation-story .comparison-presets{gap:6px}
 body:has(.digital-evolution) .transformation-story .comparison-presets button{font-size:11px;padding:6px 8px}
 .systems-stage{padding-block:55px}.systems-intro h2{font-size:48px}
 .responsive-device[data-device=tablet]{width:94%}.responsive-device[data-device=mobile]{width:80%;min-width:240px}
 .responsive-chrome{font-size:8px}.responsive-projects button{min-height:36px;padding-inline:12px}
 body:has(.digital-evolution) .standard-grid article{padding:24px 20px}
 body:has(.digital-evolution) .digital-studio .atelier-stage{background-position:63% center}
 body:has(.digital-evolution) .play-art img{height:240px}
 body:has(.digital-evolution) .bridge-stage h2{font-size:31px}
 body:has(.digital-evolution) .composition-play{padding-block:55px}
 body:has(.digital-evolution) .cta{padding-block:70px}
}
@media(prefers-reduced-motion:reduce){.responsive-device,.mesh-object,.device-orbit{transform:none!important;transition:none!important}.systems-stage:before{transform:none}.story-chapters li{transition:none}}
.motion-disabled .responsive-device,.motion-disabled .mesh-object,.motion-disabled .device-orbit{transform:none;transition:none}
body:has(.digital-evolution) .footer .logo-crop{mix-blend-mode:screen}
.systems-intro h2{font-size:clamp(44px,4.3vw,62px)}
.responsive-hero{height:clamp(185px,24vh,240px);grid-template-rows:minmax(0,1fr)}
.mesh-object{height:85%;width:auto;max-width:95%;max-height:100%;min-width:0;justify-self:center}
@media(max-width:999px){
 .systems-scroll .systems-stage{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:18px;padding:20px 6%}
 .systems-scroll .systems-intro{display:grid;grid-template-columns:1fr auto;column-gap:18px;align-items:center}
 .systems-scroll .systems-intro .eyebrow{font-size:13px;grid-column:1/-1}
 .systems-scroll .systems-intro h2{font-size:34px;margin:8px 0;grid-column:1/-1}
 .systems-scroll .systems-intro h2 br{display:none}
 .systems-scroll .systems-intro h2 em{margin-left:.15em}
 .systems-scroll .systems-intro>p:not(.eyebrow){font-size:16px;margin:0;max-width:36ch}
 .systems-scroll .device-controls{margin:0;flex-wrap:nowrap;gap:5px}
 .systems-scroll .device-controls button{font-size:10px;padding:8px 10px;min-height:36px}
 .systems-scroll .systems-intro #device-status{font:10px/1.4 var(--ui);grid-column:1/-1;max-width:none;margin-top:8px;min-height:14px}
 .systems-scroll #device-follow{grid-column:1/-1;justify-self:start;margin:0;padding-block:4px;font-size:10px}
 .systems-scroll .device-stage{min-height:0;flex:1;justify-content:center}
 .systems-scroll .responsive-device{max-width:580px}
 .systems-scroll .responsive-site{padding:12px 5%}
 .systems-scroll .responsive-hero{height:140px;min-height:140px;padding-block:12px}
 .systems-scroll .responsive-hero h3{font-size:30px;margin:8px 0}
 .systems-scroll .responsive-nav{padding-bottom:8px}
 .systems-scroll .responsive-nav b{font-size:23px}
 .systems-scroll .mini-art{height:55px}
 .systems-scroll .responsive-projects>div:first-child{display:flex;padding-top:10px;margin-bottom:9px}
 .systems-scroll .responsive-projects h4{font-size:9px;margin:0}
 .systems-scroll .responsive-projects button{font-size:9px;padding:5px 8px;min-height:32px}
 .systems-scroll .systems-caption{font-size:10px;margin-top:12px}
 .systems-scroll .responsive-device[data-device=mobile]{width:46%;min-width:240px}
}
@media(max-width:480px){
 .systems-scroll .systems-intro{display:block}
 .systems-scroll .systems-intro h2{font-size:31px}
 .systems-scroll .systems-intro>p:not(.eyebrow){font-size:16px}
 .systems-scroll .device-controls{margin-top:12px}
 .systems-scroll .responsive-device[data-device=mobile]{width:80%}
 .systems-scroll .responsive-hero h3{font-size:26px}
 .systems-scroll .responsive-projects>div:first-child{display:block}
 .systems-scroll .responsive-projects h4{margin-bottom:6px}
}