/* The only height scale for page-top heroes. Mid-page films/photos and CTA are outside these classes. */
:root{--hero-home-height:clamp(560px,70svh,760px);--hero-page-height:clamp(360px,40svh,480px);--hero-text-height:clamp(220px,24svh,280px);--hero-safe-top:112px;--hero-safe-bottom:28px;--hero-stack-gap:16px;--hero-media-gradient:linear-gradient(90deg,rgba(16,44,80,.8),rgba(16,44,80,.6) 52%,rgba(16,44,80,.16));--hero-media-gradient-mobile:linear-gradient(90deg,rgba(16,44,80,.82),rgba(16,44,80,.76) 45%,rgba(16,44,80,.54))}
body.aubiwe-site.aw-hero-system-page .av-main{padding-top:0!important}
body.aubiwe-site .av-main .aw-top-hero{box-sizing:border-box;position:relative;isolation:isolate;min-width:0;height:auto;max-height:none;display:flex;flex-direction:column;justify-content:center;padding:var(--hero-safe-top) 0 var(--hero-safe-bottom);overflow:hidden}
body.aubiwe-site .av-main .hero--home-media{min-height:var(--hero-home-height);background-size:cover}
body.aubiwe-site .av-main .hero--page-media{min-height:var(--hero-page-height);background-size:cover}
body.aubiwe-site .av-main .hero--text-only{min-height:var(--hero-text-height)}
body.aubiwe-site .av-main .aw-top-hero :is(.aw-hh-copy,.aw-hero-copy,.abe-hero-content,.app-container,.ars-container,.av-container){width:var(--aw-content-width,calc(100% - 48px));max-width:1360px;margin-inline:auto;box-sizing:border-box}
body.aubiwe-site .av-main .aw-top-hero :is(.aw-hero-kicker,.hv-kicker,.abe-eyebrow,.ars-eyebrow){margin-bottom:12px}
body.aubiwe-site .av-main .aw-top-hero h1{margin-top:0;margin-bottom:var(--hero-stack-gap)}
body.aubiwe-site .av-main .hero--page-media h1{max-width:960px}
body.aubiwe-site .av-main .hero--page-media .aw-hero-copy>p:not([class*="kicker"]):not(.abe-eyebrow){max-width:780px}
body.aubiwe-site .av-main .aw-top-hero .abe-hero-intro{margin-top:0}
body.aubiwe-site .av-main .aw-top-hero :is(.aw-hero-copy,.app-container,.ars-container) > p:last-child{margin-bottom:0}
/* Full background layers share cover geometry; foreground product artwork remains separate. */
body.aubiwe-site .av-main .hero--page-media::after{opacity:var(--hero-overlay-strength,1)}
body.aubiwe-site .aw-top-hero.aw-photo-hero{--hero-native-x:70%;--hero-native-y:58%;--hero-native-mobile-x:50%;--hero-native-mobile-y:50%}
body.aubiwe-site .aw-top-hero.aw-photo-hero--oem{--hero-native-x:75%;--hero-native-y:72%}
body.aubiwe-site .aw-top-hero.abe-hero{--hero-native-x:72%;--hero-native-y:61%;--hero-native-mobile-x:100%;--hero-native-mobile-y:62%}
body.aubiwe-site .aw-top-hero.pf-hero{--hero-native-x:70%;--hero-native-y:65%;--hero-native-mobile-x:80%;--hero-native-mobile-y:65%}
body.aubiwe-site .av-main .aw-top-hero :is(.aw-inner-hero-media,.abe-hero-photo,.pf-hero-media,.aw-hh-background,.aw-hh-video,.wp-block-cover__image-background,.wp-block-cover__video-background){position:absolute!important;inset:0!important;display:block;width:100%;height:100%;max-width:none;margin:0!important;aspect-ratio:auto;border-radius:0}
body.aubiwe-site .av-main .aw-top-hero :is(.aw-inner-hero-media img,.aw-inner-hero-media video,.abe-hero-photo img,.abe-hero-photo video,.pf-hero-media img,.pf-hero-media video,.aw-hh-background img,.aw-hh-video,.wp-block-cover__image-background,.wp-block-cover__video-background){width:100%;height:100%;object-fit:cover}
body.aubiwe-site .av-main .aw-top-hero[style*="--hero-focus-"] :is(.aw-inner-hero-media img,.aw-inner-hero-media video,.abe-hero-photo img,.abe-hero-photo video,.pf-hero-media img,.pf-hero-media video,.wp-block-cover__image-background,.wp-block-cover__video-background){object-position:var(--hero-focus-x,var(--hero-native-x,50%)) var(--hero-focus-y,var(--hero-native-y,50%))}
body.aubiwe-site .av-main .aw-top-hero :is(.aw-hero-copy,.abe-hero-content,.app-container,.ars-container){position:relative;z-index:2}
body.aubiwe-site .av-main .aw-top-hero .aw-hero-copy{padding-block:0;}
/* Category introductions retain their split composition inside the same media height. */
body.aubiwe-site .av-main .aw-top-hero .av-breadcrumb{margin-bottom:16px}
body.aubiwe-site .av-main .aw-top-hero .av-category-intro-media .av-media{min-height:0;height:max(160px,calc(var(--hero-page-height) - var(--hero-safe-top) - var(--hero-safe-bottom) - 40px));aspect-ratio:auto}
body.aubiwe-site .av-main .aw-top-hero .av-category-intro-media img{width:100%;height:100%;object-fit:cover}
@media(min-width:768px){body.aubiwe-site .av-main .aw-top-hero .av-category-intro-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
/* Copy-only introductions that do not already have an inner container. */
body.aubiwe-site .av-main .aw-top-hero:is(.aw-contact-intro,.ars-article-header,.aw-simple-hero){width:100%;max-width:none;margin:0;padding-inline:max(var(--aw-gutter,24px),calc((100% - 1360px)/2));background:var(--aw-silver-surface,#e8edf1)}
body.aubiwe-site .aw-contact-wrap{padding-top:0}
/* Extend only the Contact hero background; retain its grid, text width and scrollbar-safe layout. */
body.aubiwe-site .aw-contact-intro.aw-top-hero{box-shadow:0 0 0 100vmax var(--aw-silver-surface,#e8edf1);clip-path:inset(0 -100vmax)}
body.aubiwe-site .ars-article:has(>.aw-top-hero){padding-top:0}
/* Composite mode retains the real foreground product's contain framing. */
body.home.aubiwe-site .av-main .hero--home-media.aw-hh--composite{height:var(--hero-home-height);padding-block:0}
body.home.aubiwe-site .av-main .hero--home-media.aw-hh--composite .br-desktop-product[hidden]{top:16%;bottom:10%;height:auto;max-height:78%;--hh-desktop-width:calc(var(--hero-home-height)*1.15)}
body.home.aubiwe-site .av-main .hero--home-media.aw-hh--composite .br-hero-title{top:20%;max-width:1360px;margin-inline:auto}
body.home.aubiwe-site .av-main .hero--home-media.aw-hh--composite .br-hero-side{top:43%}
body.home.aubiwe-site .av-main .hero--home-media.aw-hh--composite>.aw-v5-hero-explore{top:auto;bottom:12%}
body.home.aubiwe-site .av-main .hero--home-media .aw-hh-copy{flex:none}
body.home.aubiwe-site .av-main .hero--home-media .hv-hero-actions{margin-top:24px}
/* The legacy composite switches artwork at 782px; it shares the same height tokens. */
@media(min-width:783px){body.home.aubiwe-site .av-main .hero--home-media.aw-hh--composite>.aw-v5-hero-explore{display:inline-flex}}
@media(max-width:782px){
 body.home.aubiwe-site .av-main .hero--home-media.aw-hh--composite{padding:var(--hero-safe-top) 20px var(--hero-safe-bottom)}
 body.home.aubiwe-site .av-main .hero--home-media .aw-mobile-hero[hidden]{width:100%;height:100%;min-height:0;flex:1;padding:0;display:flex;gap:12px;background:transparent}
 body.home.aubiwe-site .av-main .hero--home-media .aw-mobile-copy{flex:none}
 body.home.aubiwe-site .av-main .hero--home-media .aw-mobile-product{height:auto;min-height:70px;max-height:none;flex:1;margin:0;width:var(--hh-mobile-width,min(100%,460px))}
 body.home.aubiwe-site .av-main .hero--home-media .aw-mobile-product img{object-fit:contain}
 body.home.aubiwe-site .av-main .hero--home-media .aw-mobile-hero-cta{flex:none}
 body.home.aubiwe-site .av-main .hero--home-media .aw-mobile-copy h1{font-size:clamp(42px,12vw,58px)}
}
/* A single breakpoint owns geometry; typography and original alignments remain page-owned. */
@media(max-width:767px){
 :root{--hero-home-height:clamp(430px,60svh,600px);--hero-page-height:clamp(280px,43svh,380px);--hero-text-height:clamp(190px,26svh,260px);--hero-safe-top:100px;--hero-safe-bottom:24px;--hero-stack-gap:14px}
 body.aubiwe-site .av-main .aw-top-hero.aw-photo-hero::after{display:block}
 body.aubiwe-site .av-main .aw-top-hero .aw-inner-hero-media{order:0;z-index:-2}
 body.aubiwe-site .av-main .aw-top-hero[style*="--hero-focus-"] :is(.aw-inner-hero-media img,.aw-inner-hero-media video,.abe-hero-photo img,.abe-hero-photo video,.pf-hero-media img,.pf-hero-media video,.wp-block-cover__image-background,.wp-block-cover__video-background){object-position:var(--hero-focus-mobile-x,var(--hero-focus-x,var(--hero-native-mobile-x,50%))) var(--hero-focus-mobile-y,var(--hero-focus-y,var(--hero-native-mobile-y,50%)))}
 body.aubiwe-site .av-main .aw-top-hero .aw-hero-copy{padding-bottom:0}
 body.aubiwe-site .av-main .aw-top-hero .av-category-intro-media .av-media{height:140px}
}

/* Shared appearance only; existing video controllers retain playback ownership. */
body.aubiwe-site button.aw-video-control{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;min-height:40px;padding:0;border:0;border-radius:8px;background:rgba(16,44,80,.65);color:#fff;box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;line-height:1;transition:background-color 150ms ease,opacity 150ms ease}
body.aubiwe-site button.aw-video-control[hidden]{display:none!important}
body.aubiwe-site button.aw-video-control:hover{background:rgba(28,79,140,.75);color:#fff}
body.aubiwe-site button.aw-video-control:active{opacity:.75}
body.aubiwe-site button.aw-video-control:focus-visible{outline:2px solid #fff;outline-offset:3px}
body.aubiwe-site button.aw-video-control svg{position:absolute;inset:0;margin:auto;display:block;width:18px;height:18px;color:#fff;pointer-events:none;transition:opacity 150ms ease}
body.aubiwe-site .aw-video-control .aw-video-control-play{opacity:1}
body.aubiwe-site .aw-video-control .aw-video-control-pause{opacity:0}
body.aubiwe-site .aw-video-control[data-playing=true] .aw-video-control-play{opacity:0}
body.aubiwe-site .aw-video-control[data-playing=true] .aw-video-control-pause{opacity:1}
@media(max-width:767px){body.aubiwe-site button.aw-video-control{width:44px;height:44px;min-width:44px;min-height:44px;left:auto;right:16px;bottom:16px}}
@media(prefers-reduced-motion:reduce){body.aubiwe-site button.aw-video-control,body.aubiwe-site button.aw-video-control svg{transition:none}}