/* The case study retains its original 1440px canvas and all original content. */
/* Match Safeway's gentle native snapping after manual scrolling. The header
   is the initial snap target, so opening the page still starts at the top. */
html{scroll-snap-type:y proximity}
.sp-site-header,.sp-cover{scroll-snap-align:start;scroll-snap-stop:normal}
/* Match the responsive navigation used on Design Sphere and Assistive Design. */
.sp-site-header{height:clamp(110px,11.875vw,185px);padding:0 3.55%;display:flex;align-items:center;gap:4vw;background:#fff;position:relative;z-index:2}
.sp-site-header .brand{display:block;margin-right:auto;flex-shrink:0;width:clamp(130px,10vw,190px)}
.sp-site-header .brand img{width:100%;display:block;aspect-ratio:143 / 53;height:auto}
.sp-site-header nav{display:flex;align-items:center;gap:3.4vw}
.sp-site-header nav a{white-space:nowrap;font-size:clamp(13px,1.12vw,20px);padding:7px 0;border-bottom:1px solid transparent}
.sp-site-header nav a:hover,.sp-site-header nav a.active{border-color:currentColor}
.sp-site-header .socials{display:flex;gap:15px;align-items:center}
.sp-site-header .socials a{width:18px;display:flex;align-items:center}
.sp-site-header .socials svg{width:100%;height:18px;object-fit:contain}
.sp-site-header a:focus-visible{outline:2px solid #4bade9;outline-offset:6px}
@media(max-width:900px){.sp-site-header{gap:20px;flex-wrap:wrap;height:auto;min-height:130px;padding:20px 5%}.sp-site-header .brand{width:130px}.sp-site-header .socials{margin-left:auto}.sp-site-header nav{order:3;width:100%;justify-content:space-between;gap:12px}.sp-site-header nav a{font-size:13px}}
@media(max-width:600px){.sp-site-header nav{flex-wrap:wrap;justify-content:flex-start;column-gap:20px;row-gap:2px}.sp-site-header nav a{font-size:12px}.sp-site-header{min-height:150px}}
.sp-cover{position:relative;width:100%;height:min(58.541667vw,100svh);overflow:hidden;background:#fcfcfc;container-type:size}
.sp-cover-art{position:absolute;right:0;top:0;height:100%;aspect-ratio:632 / 843}
.sp-cover-art img{display:block;width:100%;height:100%;object-fit:contain;object-position:right center}
.sp-cover-copy{--u:min(.069444444cqw,.118623962cqh);position:absolute;left:6.805556%;top:calc(50% - 185 * var(--u));width:50%}
.sp-cover h1{font-size:calc(80 * var(--u));font-weight:600;line-height:1;letter-spacing:0}
.sp-cover-subtitle{margin-top:calc(34 * var(--u));width:calc(610 * var(--u));max-width:95%;font-size:calc(18 * var(--u));font-weight:600;line-height:1.4;text-wrap:balance}
.sp-cover-meta{margin-top:calc(18 * var(--u));width:calc(650 * var(--u));max-width:100%;font-size:calc(16 * var(--u));line-height:1.4}
.sp-cover-cta{margin-top:calc(28 * var(--u));font-size:calc(18 * var(--u));padding:calc(17 * var(--u)) calc(22 * var(--u));gap:calc(16 * var(--u));border-radius:calc(6 * var(--u))}
.case-content{position:absolute;left:0;top:0;width:1440px}
.wrap{height:calc((16914px + var(--sp-prototype-height) - 1015px) * var(--scale));overflow:hidden}
.canvas{top:calc(-1015px * var(--scale));height:calc(16914px + var(--sp-prototype-height))}
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:none}}