/* KLEIN (UK) mobile/tablet hero rebuild, 15 November 2026.
   Same switch point as the mobile navigation (900 px).
   Uses a lightweight mobile motion film and a real image fallback for printing.
   The protected original logo is not modified. */
body.klein-experience .km-hero .brand-hero__media{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:0!important;overflow:hidden!important;transform:none!important;background:#090909!important}
body.klein-experience .km-hero .brand-hero__media .km-hero-photo{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 38%!important;filter:grayscale(1) contrast(1.25) brightness(.75)!important;opacity:1!important;z-index:0!important}
body.klein-experience .km-hero .brand-hero__media video{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 40%!important;opacity:.88!important;z-index:1!important;filter:grayscale(1) contrast(1.13) brightness(.83)!important}
body.klein-experience .km-hero .brand-hero__film-overlay{position:absolute!important;inset:0!important;z-index:2!important;opacity:1!important;background:linear-gradient(180deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.20) 28%,rgba(0,0,0,.48) 56%,rgba(0,0,0,.96) 100%)!important}
body.klein-experience .km-hero .brand-hero__media:after{display:none!important;content:none!important}
body.klein-experience .km-hero .brand-hero__brand h1{animation:none!important;transform:none!important;position:static!important;margin:0!important;line-height:1!important}
body.klein-experience .km-hero .brand-hero__brand .hero-vector-logo{height:auto!important;object-fit:contain!important;filter:drop-shadow(0 5px 24px rgba(0,0,0,.7))!important}
body.klein-experience .km-hero .km-scroll-cue{display:none!important}

@media(max-width:900px){
 body.klein-experience .km-hero{
    width:100%!important;min-height:max(690px,100svh)!important;height:auto!important;max-height:none!important;
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:76px 45px minmax(330px,1fr) auto!important;
    padding:0!important;margin:0!important;align-items:stretch!important;overflow:hidden!important;background:#050505!important;
 }
 body.klein-experience .km-hero .brand-hero__media{grid-row:1/-1!important;grid-column:1!important}
 body.klein-experience .km-hero .km-hero-topline{
    grid-row:2!important;grid-column:1!important;position:relative!important;top:auto!important;left:auto!important;right:auto!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    margin:0 24px!important;padding:0!important;gap:10px!important;z-index:3!important;
    color:#f2f2f2!important;font-size:10px!important;line-height:1.25!important;letter-spacing:.12em!important
 }
 body.klein-experience .km-hero .km-hero-topline span{color:#f2f2f2!important;-webkit-text-fill-color:#f2f2f2!important}
 body.klein-experience .km-hero .brand-hero__brand{
    grid-row:3!important;grid-column:1!important;position:relative!important;
    top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
    width:100%!important;min-height:0!important;height:auto!important;max-height:none!important;
    margin:0!important;padding:12px 20px 18px!important;z-index:4!important;
    display:flex!important;align-items:center!important;justify-content:center!important;align-self:center!important;
    transform:none!important;will-change:auto!important
 }
 body.klein-experience .km-hero .hero-vector-logo{
    display:block!important;width:min(67vw,365px)!important;max-width:100%!important;max-height:340px!important;
    margin:0 auto!important
 }
 body.klein-experience .km-hero .brand-hero__meta{
    grid-row:4!important;grid-column:1!important;position:relative!important;
    top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;
    z-index:5!important;width:auto!important;min-width:0!important;max-width:100%!important;
    margin:0!important;padding:0 24px max(34px,env(safe-area-inset-bottom))!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-end!important;gap:15px!important;
    transform:none!important;
 }
 body.klein-experience .km-hero .brand-hero__entity{
    display:block!important;margin:0!important;max-width:100%!important;
    font-size:12px!important;line-height:1.5!important;letter-spacing:.095em!important;
    color:#f1f1f1!important;-webkit-text-fill-color:#f1f1f1!important;
 }
 body.klein-experience .km-hero .brand-hero__actions{
    width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;margin:0!important;align-items:stretch!important
 }
 body.klein-experience .km-hero .brand-hero__actions .button{
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:100%!important;min-width:0!important;min-height:51px!important;
    padding:10px 12px!important;font:700 11px/1.35 Lato,Arial,sans-serif!important;
    letter-spacing:.085em!important;text-align:center!important;white-space:normal!important;
 }
 body.klein-experience .km-hero .brand-hero__media .km-hero-photo{object-position:50% 41%!important}
 body.klein-experience .km-hero .brand-hero__media video{object-position:50% 45%!important}
 body.klein-experience .km-hero .brand-hero__film-overlay{background:linear-gradient(180deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.20) 22%,rgba(0,0,0,.43) 54%,rgba(0,0,0,.97) 100%)!important}
 body.klein-experience .km-overture__line{overflow:hidden!important}
 body.klein-experience .km-overture__line span{transform:none!important;will-change:auto!important;font-size:clamp(39px,9.4vw,77px)!important;max-width:100%!important;line-height:1.04!important;white-space:nowrap!important;letter-spacing:-.05em!important}
 body.klein-experience .km-overture__line--a,body.klein-experience .km-overture__line--b,body.klein-experience .km-overture__line--c{justify-content:center!important;padding-left:16px!important;padding-right:16px!important}
}
@media(max-width:480px){
 body.klein-experience .km-hero{
    min-height:max(700px,100svh)!important;
    grid-template-rows:76px 42px minmax(340px,1fr) auto!important;
 }
 body.klein-experience .km-hero .km-hero-topline{margin:0 20px!important}
 body.klein-experience .km-hero .km-hero-topline span:last-child{display:none!important}
 body.klein-experience .km-hero .brand-hero__brand{padding:10px 12px 8px!important}
 body.klein-experience .km-hero .hero-vector-logo{width:min(78vw,345px)!important;max-height:320px!important}
 body.klein-experience .km-hero .brand-hero__meta{padding:0 20px max(31px,env(safe-area-inset-bottom))!important;gap:12px!important}
 body.klein-experience .km-hero .brand-hero__entity{font-size:11px!important;letter-spacing:.08em!important}
 body.klein-experience .km-hero .brand-hero__actions .button{font-size:11px!important;min-height:52px!important}
 body.klein-experience .km-overture__stage{margin:18px 0!important;padding:10px 0!important}
 body.klein-experience .km-overture__line{min-height:66px!important}
 body.klein-experience .km-overture__line span{font-size:clamp(35px,10.7vw,50px)!important}
 body.klein-experience .km-spotlight__copy h2{font-size:clamp(48px,12.6vw,64px)!important;line-height:1.02!important;letter-spacing:-.035em!important;margin:16px 0 23px!important}
 body.klein-experience .km-spotlight__copy h2 span:last-child{font-size:1.08em!important}
 body.klein-experience .k4 .km-release h3{font-size:clamp(31px,8vw,38px)!important;line-height:1.02!important;margin-bottom:12px!important}
 body.klein-experience .k4 .k4-section-head h2{font-size:clamp(46px,12vw,61px)!important;line-height:1!important}
 body.klein-experience .km-gallery .editorial-heading h2{font-size:clamp(48px,12vw,63px)!important;line-height:1!important}
}
@media(max-width:350px){
 body.klein-experience .km-hero{min-height:700px!important;grid-template-rows:76px 42px minmax(345px,1fr) auto!important}
 body.klein-experience .km-hero .hero-vector-logo{width:82vw!important;max-height:290px!important}
 body.klein-experience .km-hero .brand-hero__meta{padding-left:16px!important;padding-right:16px!important}
 body.klein-experience .km-hero .brand-hero__entity{font-size:10px!important}
 body.klein-experience .km-hero .brand-hero__actions .button{font-size:10px!important}
}
@media(prefers-reduced-motion:reduce){
 body.klein-experience .km-hero .brand-hero__media video{display:none!important}
 body.klein-experience .km-hero .brand-hero__brand,body.klein-experience .km-overture__line span{transition:none!important;transform:none!important}
}
/* Safari's print-to-PDF creates a 832px-wide full-page snapshot. vh-based video heroes
   collapse or overlap there. Keep all labels below, rather than on top of, the logo. */
@media print{
 body.klein-experience .km-hero{
    min-height:650px!important;height:650px!important;max-height:none!important;
    display:grid!important;grid-template-rows:62px 54px minmax(300px,1fr) auto!important;
    grid-template-columns:1fr!important;break-inside:avoid!important;overflow:hidden!important;
 }
 body.klein-experience .km-hero .brand-hero__media video{display:none!important}
 body.klein-experience .km-hero .brand-hero__media .km-hero-photo{display:block!important}
 body.klein-experience .km-hero .brand-hero__brand{position:relative!important;grid-row:3!important;transform:none!important;top:auto!important;bottom:auto!important;padding:0!important}
 body.klein-experience .km-hero .hero-vector-logo{width:270px!important;height:auto!important;max-height:280px!important}
 body.klein-experience .km-hero .km-hero-topline{position:relative!important;grid-row:2!important;top:auto!important;left:auto!important;right:auto!important;align-items:center!important}
 body.klein-experience .km-hero .brand-hero__meta{position:relative!important;grid-row:4!important;top:auto!important;bottom:auto!important;padding:0 34px 30px!important;max-width:100%!important}
 body.klein-experience .km-scroll-cue{display:none!important}
 body.klein-experience .km-overture__line span{transform:none!important;font-size:clamp(50px,8vw,70px)!important}
 body.klein-experience .km-overture__stage{min-height:0!important}
}