/* Reusable full-width hero; picture remains underneath the optional video. */
.hero{position:relative;isolation:isolate;display:grid;align-items:center;min-height:34rem;background:var(--app-bg)}
.hero--first-screen{min-height:max(0px,calc(var(--app-screen-height) - var(--site-header-height)))}
.hero__media{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero__media picture,.hero__media img,.hero__video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero__media picture,.hero__video{position:absolute;inset:0}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--app-bg) 96%,transparent),color-mix(in srgb,var(--app-bg) 90%,transparent) 25%,color-mix(in srgb,var(--app-bg) 65%,transparent) 42%,transparent 72%)}
/* Bleed beneath the clipped media area to avoid a seam at fractional video edges. */
.hero__video{inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);border:0;outline:none;box-shadow:none;opacity:0;transition:opacity 240ms ease}
.hero.is-video-ready .hero__video{opacity:1}
.hero__body{padding-block:var(--app-section-space)}
.hero__copy{width:52%;max-width:660px;padding-bottom:24px}
.hero .hero__title{font-size:var(--app-hero-title-size);font-weight:600;line-height:1.12;letter-spacing:-.025em;margin:0 0 28px;text-wrap:balance}
.hero__title span{display:block}
.hero .hero__lead{max-width:600px;font-size:clamp(18px,1.2vw,20px);line-height:1.6;color:var(--app-muted);margin:0 0 32px}
.hero .button--large{min-width:240px;white-space:normal}
.hero__controls{position:absolute;bottom:20px;left:0;right:0;display:flex;justify-content:center;align-items:center;pointer-events:none}
.hero__controls .icon-button{width:44px;height:44px;border:0;cursor:pointer;background:color-mix(in srgb,var(--app-bg) 88%,transparent);color:var(--app-text);pointer-events:auto}
.hero__controls .icon-button:hover{background:var(--app-hover)}
.hero__toggle{position:absolute;right:var(--app-content-gutter)}
.hero--product-scene .hero__title{font-size:var(--app-hero-title-size)}
.hero--product-scene .hero__media img{object-position:right center}
@media(max-width:1199px) and (min-width:768px){.hero__copy{width:58%}.hero .hero__title{font-size:clamp(40px,4.5vw,54px)}}
@media(max-width:767px){
 .hero{display:flex;flex-direction:column;align-items:stretch;padding-bottom:clamp(320px,90vw,400px)}
 .hero__body{order:0;flex:none;display:flex;align-items:flex-start;padding-block:32px}
 .hero__copy{width:100%;max-width:600px;padding:0}
 .hero .hero__title{margin-bottom:20px}
 .hero .hero__lead{font-size:18px;margin-bottom:24px}
 .hero .actions,.hero .button--large{width:100%}
 .hero__media{position:absolute;inset:0;z-index:-1}
 .hero__media img,.hero__video{object-position:58% top}
 .hero__media::after{background:linear-gradient(color-mix(in srgb,var(--app-bg) 88%,transparent),color-mix(in srgb,var(--app-bg) 72%,transparent) 30%,color-mix(in srgb,var(--app-bg) 20%,transparent) 48%,transparent 62%)}
 .hero__controls{z-index:1;bottom:12px;min-height:44px}
 .hero--product-scene .hero__title{font-size:var(--app-hero-title-size)}
 .hero--product-scene{padding-bottom:0;min-height:0}
 .hero--product-scene .hero__body{flex:none;padding-block:32px 20px}
 .hero--product-scene .hero__media{position:relative;inset:auto;z-index:0;order:1;flex:none;height:clamp(264px,84vw,400px)}
 .hero--product-scene .hero__media img{object-position:center 85%}
 .hero--product-scene .hero__media::after{background:linear-gradient(var(--app-bg),transparent 8%)}
}
@media(prefers-reduced-motion:reduce){.hero__video{transition:none}}