/* The introduction sits over the material image in the first viewport. */
.site-header{position:absolute;inset:0 0 auto;z-index:10;background:linear-gradient(180deg,rgba(250,250,248,.88),rgba(250,250,248,.5));border-bottom:1px solid rgba(20,24,22,.12)}
.hero{padding-top:0;display:grid;grid-template-columns:minmax(0,1fr);isolation:isolate;min-height:100svh}
.hero-visual{position:relative;grid-area:1/1;min-width:0}
.hero-visual .hero-media-shell{position:absolute;inset:0;margin:0;width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;overflow:hidden;clip-path:none}
.hero-visual .hero-media{inset:0;clip-path:none;transform:none;cursor:default}
.hero-media img{pointer-events:none;-webkit-user-drag:none}
.hero-visual:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(250,250,248,.92) 0%,rgba(250,250,248,.72) 34%,rgba(250,250,248,.16) 65%,transparent 88%)}
[dir=rtl] .hero-visual:after{transform:scaleX(-1)}
.hero-copy{position:relative;z-index:1;grid-area:1/1;align-self:start;min-width:0;padding:clamp(136px,18svh,182px) var(--gutter) 80px;background:none}
.hero-copy .hero-heading{padding:0}
.hero-copy .hero-heading .eyebrow{margin-bottom:24px}
.hero-copy h1{max-width:960px;font-weight:400}
.hero-copy .hero-intro{width:min(530px,56%);margin:28px 0 0;padding:0}
.hero-copy .hero-intro>p{font-size:18px;line-height:1.75}
.hero-copy .hero-actions{margin-top:28px}
.hero-copy .hero-actions .primary{min-height:48px;padding-inline:24px}
.hero-copy .hero-actions .text-link{min-height:44px}
@media(max-width:767px){
 .hero-copy{padding:118px 24px 64px}
 .hero-visual:after{background:linear-gradient(180deg,rgba(250,250,248,.9) 0%,rgba(250,250,248,.8) 44%,rgba(250,250,248,.24) 76%,transparent 100%)}
 .hero-copy .hero-intro{width:auto;margin:28px 0 0;padding:0}
 .hero-copy .hero-intro>p{font-size:16px;line-height:1.75}
 .hero-copy .hero-actions{gap:20px;margin-top:26px}
 .hero-copy .hero-actions .primary{padding-inline:18px}
 .hero-copy .hero-heading .eyebrow{margin-bottom:22px}
}
@media(max-height:650px) and (min-width:768px){
 .hero-copy{padding-top:110px;padding-bottom:48px}
 .hero-copy .hero-heading .eyebrow{margin-bottom:18px}
 .hero-copy .hero-intro{margin-top:20px}
 .hero-copy .hero-actions{margin-top:22px}
}