/* GSK Navigator — Experience design / wireframing / prototyping */
.design-process{padding-top:clamp(76px,8vw,145px);padding-bottom:clamp(56px,6vw,110px)}
.design-process+.design-process{padding-top:clamp(72px,7vw,126px)}
.design-process-intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:clamp(25px,6vw,110px);align-items:end;margin:clamp(44px,6vw,100px) 0 clamp(35px,4vw,74px)}
.design-process-intro h2{font-size:clamp(48px,6vw,102px);line-height:.98;letter-spacing:-.075em;font-weight:800;margin:12px 0 0;max-width:14ch}
.design-process-intro p:not(.process-index){font-size:clamp(16px,1.55vw,23px);letter-spacing:-.025em;line-height:1.4;margin:0 0 7px;max-width:550px}
.process-index{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--mute);margin:0 0 24px}
.process-dot{color:var(--orange)}
.process-figure{margin:0;min-width:0}
.process-figure-wide{margin-bottom:clamp(40px,5vw,82px)}
.process-figure-wide img{display:block;width:100%;height:auto;background:#fff}
.process-figure figcaption{display:flex;gap:18px;justify-content:space-between;align-items:baseline;border-top:1px solid #bdbdbd;padding:13px 0 0;margin-top:15px;font-size:11px;font-weight:800;letter-spacing:.035em;line-height:1.45}
.process-figure figcaption span:first-child{color:var(--orange);white-space:nowrap}
.process-figure figcaption span:last-child{text-align:right}
.process-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(50px,7vw,135px) clamp(22px,5vw,98px)}
.process-expand{position:relative;display:block;width:100%;padding:0;border:0;background:#a3a3a3;overflow:hidden;cursor:zoom-in;text-align:left}
.process-expand img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;transition:transform .24s ease}
.process-expand:hover img{transform:scale(1.025)}
.process-expand-icon{position:absolute;bottom:15px;right:15px;width:38px;height:38px;background:white;color:#111;display:grid;place-items:center;font-weight:800;font-size:20px}
.process-expand:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.process-dialog{width:min(94vw,1600px);max-width:94vw;max-height:94vh;padding:0;background:#a3a3a3;border:0;box-shadow:0 15px 70px #0008}
.process-dialog::backdrop{background:#000c}
.process-dialog-head{background:#fff;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:13px 18px;font-size:12px;font-weight:800;letter-spacing:.035em}
.process-dialog-head button{border:0;background:#111;color:#fff;padding:10px 13px;font-size:11px;font-weight:800}
.process-dialog>img{display:block;width:100%;height:auto;max-height:calc(94vh - 58px);object-fit:contain}
@media(max-width:850px){.design-process-intro{grid-template-columns:1fr;gap:24px}.design-process-intro h2{font-size:clamp(48px,8vw,74px)}.design-process-intro p:not(.process-index){max-width:680px}.process-grid{gap:50px 22px}}
@media(max-width:560px){.design-process{padding-top:68px;padding-bottom:48px}.design-process-intro{margin:37px 0 35px}.design-process-intro h2{font-size:clamp(43px,11vw,64px)}.process-grid{grid-template-columns:1fr;gap:48px}.process-figure figcaption{font-size:10px}.process-figure-wide{margin-bottom:44px}.process-dialog{width:96vw;max-width:96vw}}
@media(prefers-reduced-motion:reduce){.process-expand img{transition:none}}