@view-transition{navigation:auto}
.landscape,.district-image{view-transition-name:city-scene}
.header .wordmark{view-transition-name:city-brand}
.header nav{view-transition-name:city-nav}
.header .contact-pill{view-transition-name:city-contact}
::view-transition-group(city-scene){animation-duration:.85s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-old(city-scene){animation:leave-city .85s cubic-bezier(.2,.7,.2,1) both;transform-origin:var(--journey-x,70%) var(--journey-y,45%);mix-blend-mode:normal}
::view-transition-new(city-scene){animation:arrive-district .85s cubic-bezier(.2,.7,.2,1) both;mix-blend-mode:normal}
::view-transition-old(root){animation:copy-out .3s ease both}
::view-transition-new(root){animation:copy-in .65s .15s ease both}
@keyframes leave-city{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}
@keyframes arrive-district{0%{opacity:0;transform:scale(1.09)}100%{opacity:1;transform:scale(1)}}
@keyframes copy-out{to{opacity:0}}
@keyframes copy-in{from{opacity:0}to{opacity:1}}
html:has(body.product-page)::view-transition-old(city-scene){animation:leave-district .85s cubic-bezier(.2,.7,.2,1) both}
html:has(.hero)::view-transition-new(city-scene){animation:return-city .85s cubic-bezier(.2,.7,.2,1) both}
@keyframes leave-district{to{opacity:0;transform:scale(.9)}}
@keyframes return-city{from{opacity:0;transform:scale(1.25)}to{opacity:1;transform:scale(1)}}
.product-page .page-header{position:absolute;inset:0 0 auto;background:transparent;z-index:5}
.product-page .inner-hero{min-height:780px;height:min(900px,100svh);padding:115px 3.8% 65px;background:#e9f0f2;isolation:isolate}
.district-scene{position:absolute;inset:-6px;z-index:-2;overflow:hidden;transform:translate(var(--district-x,0px),var(--district-y,0px));transition:transform .8s ease-out}
.district-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.product-page .inner-hero:after{background:linear-gradient(90deg,#fbfaf4d9 0%,#faf9f3b3 27%,#faf9f338 43%,transparent 60%);pointer-events:none}
.district-copy{max-width:680px;position:relative;z-index:1}
.product-page .breadcrumbs{margin-bottom:32px}
.product-page .inner-logo{max-width:315px;max-height:85px;margin-bottom:28px}
.product-page .inner-hero h1{max-width:640px;font-size:clamp(56px,5.3vw,86px);line-height:1.02;letter-spacing:-3.5px;margin:19px 0 25px}
.product-page .inner-hero .intro{max-width:510px;font-size:clamp(19px,1.65vw,26px);line-height:1.36}
.product-page .inner-hero .eyebrow{font-size:12px;margin-bottom:18px}
.district-home{position:absolute;bottom:25px;right:4%;font-size:12px;padding:12px 18px;background:#fbfcf1da;border:1px solid #fff9;border-radius:30px;backdrop-filter:blur(10px);z-index:2}
.district-home:hover{background:#fff}
.product-page .benefits{padding-block:55px;background:#fcfaf6}
.product-page .benefits article{border-top:0;border-left:1px solid #d7dcde;padding:4px 0 4px 32px}
.product-page .benefits article:first-child{border-left:0;padding-left:0}
.product-page .benefits h2{font-size:24px}
.product-page .benefits p{font-size:16px;margin-bottom:0}
.district-atmosphere{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 82% 30%,#fff8de2b,transparent 38%);animation:district-light 7s ease-in-out infinite alternate;mix-blend-mode:screen}
.district-paused .district-atmosphere{animation-play-state:paused}
@keyframes district-light{from{opacity:.15}to{opacity:.7}}
@media(min-width:1500px){.product-page .inner-hero{padding-top:130px}.product-page .district-copy{max-width:720px}}
@media(max-width:1050px) and (min-width:701px){.product-page .inner-hero h1{font-size:65px;max-width:570px}.product-page .inner-hero .intro{max-width:420px;font-size:21px}.product-page .inner-logo{max-width:270px}}
@media(max-width:700px){
 .product-page .page-header{min-height:115px;background:transparent}
 .product-page .inner-hero{height:auto;min-height:1040px;padding:140px 6% 430px}
 .district-scene{inset:0;transform:none}
 .district-image{object-position:72% bottom}
 .district-scene picture{display:block;width:100%;height:100%}
 .product-page .inner-hero:after{background:linear-gradient(#f7f8f2ed 0%,#f7f8f2d9 27%,#f7f8f280 46%,transparent 65%)}
 .product-page .breadcrumbs{font-size:12px;margin-bottom:28px}
 .product-page .inner-logo{max-width:240px;max-height:65px;margin-bottom:25px}
 .product-page .inner-hero h1{font-size:clamp(43px,10.4vw,64px);line-height:1.04;letter-spacing:-2.5px;max-width:100%;margin:16px 0 23px}
 .product-page .inner-hero .intro{font-size:18px;max-width:350px}
 .product-page .inner-hero .eyebrow{font-size:10px;letter-spacing:2px}
 .product-page .hero-actions{gap:18px;margin-top:24px}
 .district-home{bottom:22px;right:6%;font-size:11px}
 .product-page .benefits{padding-block:45px}
 .product-page .benefits article,.product-page .benefits article:first-child{border-left:0;border-top:1px solid #d7dcde;padding:23px 0 0}
 .product-page .benefits article:first-child{border-top:0;padding-top:0}
 .district-atmosphere{display:none}
 ::view-transition-group(city-scene){animation-duration:.5s}
 ::view-transition-old(city-scene){animation:copy-out .45s ease both}
 ::view-transition-new(city-scene){animation:copy-in .5s ease both}
}
@media(prefers-reduced-motion:reduce){
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
 ::view-transition-old(city-scene),::view-transition-old(root){display:none}
 .district-scene{transform:none;transition:none}.district-atmosphere{display:none}
}