/* The opening PPA slide reveals the same parking area before and after the project. */
.hero-switch__selectors button[data-hero-pillar="ppa"][aria-disabled="true"]{border-top-color:var(--color-green-500)}
.hero-switch__selectors button[data-hero-pillar="sap"][aria-disabled="true"]{border-top-color:var(--color-blue-400)}
.hero-switch__media.hero-parking-media{display:flex;align-items:center;justify-content:center;padding:clamp(1.25rem,3vw,2.75rem);background:#edf5e5;overflow:hidden;height:auto;min-height:0}
.hero-parking-media::after{display:none}
.hero-parking{--parking-reveal:50%;width:100%;max-width:52rem;min-width:0;margin:0;color:var(--color-ink)}
.hero-parking>figcaption{font-size:clamp(1.5rem,2.1vw,2rem);line-height:1.2;letter-spacing:-.025em;font-weight:650;max-width:24rem;margin-bottom:1.5rem}
.hero-parking__scene{aspect-ratio:1200/481;position:relative;overflow:hidden;border-radius:12px;background:#d6e0d0;isolation:isolate}
.hero-parking__scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-parking__after{clip-path:inset(0 calc(100% - var(--parking-reveal)) 0 0)}
.hero-parking__divider{position:absolute;top:0;bottom:0;left:clamp(2px,var(--parking-reveal),calc(100% - 2px));width:2px;background:#fff;transform:translateX(-50%);pointer-events:none}
.hero-parking__divider>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#0b2d49;font:600 20px/1 system-ui;box-shadow:0 2px 10px #04122024}
.hero-parking__controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;margin-top:.6rem}
.hero-parking__controls button{min-width:44px;min-height:44px;padding:.5rem .25rem;border:0;background:transparent;font:inherit;font-size:.8125rem;font-weight:650;color:#315c08;text-decoration:underline;text-underline-offset:.25em}
.hero-parking[data-parking-edge="true"] .hero-parking__divider{opacity:0}
.hero-parking__controls input{width:100%;min-width:0;height:44px;margin:0;accent-color:#467a08;cursor:ew-resize;touch-action:pan-y}
.hero-parking__controls :focus-visible{outline:3px solid #006f9f;outline-offset:4px;border-radius:4px}
.hero-parking__caption{margin:.7rem 0 0;font-size:.8125rem;line-height:1.6;color:#405d50;max-width:40rem}
html:not(.js) .hero-parking__controls{display:none}
@media(max-width:48rem){
 .hero-switch__panels{display:block}
 html.js .hero-switch__panel:not(.is-active){display:none}
 .hero-switch__panel{grid-template-rows:auto auto}
 .hero-switch__copy{justify-content:flex-start}
 .hero-switch__panel--ppa .hero-switch__media{grid-row:1}
 .hero-switch__panel--ppa .hero-switch__copy{grid-row:2}
 .hero-switch__media.hero-parking-media{padding:1.5rem 1.25rem;height:auto;min-height:0}
 .hero-parking>figcaption{font-size:1.4rem;margin-bottom:1.1rem;max-width:25rem}
 .hero-parking__scene{aspect-ratio:2}
 .hero-parking__caption{font-size:.75rem}
}
@media(max-width:48rem) and (prefers-reduced-motion:no-preference){.hero-switch__panel.is-active{animation:hero-mobile-reveal 350ms ease}}
@keyframes hero-mobile-reveal{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.hero-parking *{animation:none!important;transition:none!important}}
