/* One viewport: artwork uses remaining height after readable content and dock. */
@media(max-width:700px){
html,body{margin:0;background:#272b58}
:root .service-selector{width:100%;height:100svh;height:100dvh;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}
:root .pp-sample-header{height:auto;padding:clamp(10px,2dvh,20px) 4% 1dvh}
:root .pp-sample-header nav{width:100%;height:auto;padding:8px 4%;gap:0;justify-content:space-around;box-sizing:border-box;box-shadow:none}
:root .pp-sample-header a{font-size:clamp(14px,4.2vw,19px)}
:root .pp-sample-start{display:none}
:root .selector-main{width:100%;height:100%;min-height:0!important;box-sizing:border-box;padding:0 0 calc(82px + env(safe-area-inset-bottom))!important;display:block!important}
:root .service-slider{width:100%!important;height:100%;max-width:100%!important;margin:0!important;overflow:hidden}
:root .service-track{height:100%;align-items:stretch;transition-property:transform;transition-timing-function:cubic-bezier(.45,0,.2,1)}
:root .service-slide{height:100%;padding:0 5%!important;width:100%;flex-basis:100%;box-sizing:border-box;min-width:0}
:root .service-stage{height:100%;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) auto auto!important;align-items:stretch!important;gap:clamp(5px,1.1dvh,12px)!important;min-height:0!important;width:100%!important;max-width:none!important;margin:0!important}
:root .website-sample{display:contents!important}
:root .website-art{grid-column:1!important;grid-row:1!important;align-self:stretch!important;position:relative;display:grid;place-items:center;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;aspect-ratio:auto;padding:0!important;margin:0!important;container-type:size;overflow:visible}
:root .website-art:before,:root .service-stationary-divider{display:none}
:root .actual-macbook{width:min(100cqw,calc(100cqh * 1.638))!important;max-height:100%!important}
:root .vibrance-vector-showcase{position:relative!important;inset:auto!important;width:min(100cqw,calc(100cqh * 1.5))!important;height:100%!important;max-height:none!important;justify-self:center}
:root .vibrance-card-stack{width:62%!important;height:auto!important}
:root .vibrance-swatches{width:30%!important}
:root .greek-showcase{width:min(100cqw,calc(100cqh * 1.2))!important;height:100%!important;max-height:none!important}
:root .urban-display-showcase{height:auto!important;width:min(94cqw,calc(100cqh * 1.35))!important}
:root .website-sample figcaption{grid-column:1!important;grid-row:2!important;display:flex!important;min-height:0!important;height:auto!important;width:100%;margin:0!important;padding:0!important;border:0!important;text-align:left}
:root .website-sample figcaption strong{font:clamp(17px,4.5vw,23px)/1.05 Bryson!important;text-transform:uppercase}
:root .website-sample figcaption>div>span{font:clamp(10px,2.7vw,12px)/1.3 Montserrat!important;margin-top:3px!important}
:root .service-copy{grid-column:1!important;grid-row:3!important;display:grid!important;grid-template-columns:minmax(0,1fr);gap:clamp(6px,1.2dvh,12px);align-content:start;align-items:stretch!important;text-align:left;min-height:0!important;padding:0!important;width:100%}
:root .service-copy h2{font:clamp(30px,min(10.5vw,5.4dvh),50px)/.98 Bryson!important;margin:0!important;letter-spacing:0;text-transform:uppercase}
:root .service-copy h2 em{color:#ea8000;font-style:normal}
:root .service-label{display:none}
:root .service-description{font:clamp(12px,3.25vw,15px)/1.45 Montserrat!important;max-width:100%!important;margin:0!important;color:#eeedf4!important}
:root .website-benefits{width:100%;display:grid!important;gap:clamp(5px,.8dvh,8px)!important;margin:0!important;padding:0!important}
:root .website-benefits li{display:flex!important;align-items:center;gap:3.5%!important;font:clamp(12px,3.15vw,15px)/1.25 Montserrat!important;padding:0!important;border:0!important}
:root .benefit-icon,:root .website-benefits .external-play-circle{width:clamp(30px,4.4dvh,40px)!important;height:clamp(30px,4.4dvh,40px)!important;flex:0 0 clamp(30px,4.4dvh,40px)!important;border:0!important;background:#f4f2eb!important;color:#272b58!important;border-radius:50%;display:grid;place-items:center;box-shadow:none!important}
:root .benefit-icon img{width:55%!important;height:55%!important;filter:brightness(0) saturate(100%) invert(15%) sepia(22%) saturate(1520%) hue-rotate(197deg) brightness(95%) contrast(92%)}
:root .website-benefits .external-play-circle svg{width:55%;height:55%;color:#272b58}
:root .website-benefits .placement-benefit{font-size:inherit!important;gap:3.5%!important;width:100%;color:inherit}
:root .website-enquire{display:grid!important;place-items:center;width:100%;box-sizing:border-box;text-align:center;min-height:40px;height:clamp(40px,5.2dvh,50px);padding:6px 3%!important;margin:0!important;border:0!important;border-radius:12px;background:#ea8000!important;color:#f4f2eb!important;font:clamp(20px,5.2vw,25px)/1.1 Bryson!important;white-space:normal;text-transform:uppercase}
:root .service-controls{position:fixed!important;left:50%!important;right:auto!important;bottom:calc(12px + env(safe-area-inset-bottom))!important;transform:translateX(-50%)!important;width:90%!important;max-width:390px;z-index:50;margin:0!important}
:root .service-dock{width:100%!important;height:60px!important;box-sizing:border-box!important;padding:9px!important;gap:4%!important;background:#fff!important;border-radius:999px!important;box-shadow:0 8px 30px #17193430!important}
:root .service-slots{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-around;gap:8%!important;padding:0 2%!important}
:root .service-slot{width:auto!important;flex:1 1 0;min-width:0;height:auto!important;aspect-ratio:1;padding:5px!important;border:0!important;max-width:40px;max-height:40px;border-radius:50%!important}
:root .service-slot>svg{width:100%!important;height:100%!important;display:block}
:root .service-slot.selected{transform:scale(1.25)}
:root .service-arrow{width:13%!important;height:auto!important;aspect-ratio:1;max-width:42px;max-height:42px;flex-shrink:0;border:0!important;background:#272b58!important;color:#fff!important}
:root .service-arrow svg{width:45%;height:45%}
:root .service-tooltip,:root .selector-hint{display:none!important}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){.service-track{transition:none!important}}