/* Van Hameren Storefront UI 105.0.1
   Desktop navigation refinement, mobile header cleanup and scroll-safe product interaction. */

/* Desktop: benut de lege headerzone voor de zoekfunctie en geef het hoofdmenu
   meer hiërarchie zonder van de Van Hameren huisstijl af te wijken. */
@media (min-width:901px){
  .site-header .header-row{
    grid-template-columns:minmax(205px,250px) minmax(300px,760px) max-content!important;
    justify-content:space-between!important;
    gap:clamp(18px,2.25vw,36px)!important;
    min-height:98px!important;
  }
  .site-header .header-search{
    display:grid!important;
    width:100%!important;
    max-width:760px!important;
    justify-self:center!important;
    border:1px solid #b9d6e5!important;
    border-radius:16px!important;
    background:linear-gradient(180deg,#fff 0%,#fbfdfe 100%)!important;
    box-shadow:0 10px 26px rgba(12,65,93,.08),inset 0 1px 0 rgba(255,255,255,.9)!important;
  }
  .site-header .header-search:focus-within{
    border-color:#4aa9d3!important;
    box-shadow:0 0 0 4px rgba(11,143,197,.11),0 12px 30px rgba(12,65,93,.10)!important;
  }
  .site-header .header-search>button{
    border-radius:12px!important;
    background:linear-gradient(180deg,#1199d6 0%,#007ab9 100%)!important;
    box-shadow:0 5px 12px rgba(0,104,161,.20)!important;
  }
  .site-header .header-action{
    min-height:46px!important;
    padding:8px 11px!important;
    border-radius:12px!important;
    transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease!important;
  }
  .site-header .header-action:hover,.site-header .header-action:focus-visible{
    background:#eef8fc!important;
    box-shadow:0 7px 18px rgba(9,81,117,.08)!important;
    transform:translateY(-1px)!important;
    outline:none!important;
  }

  .main-nav{
    border-top:1px solid rgba(255,255,255,.25)!important;
    border-bottom:1px solid #00659e!important;
    background:linear-gradient(180deg,#0d91cf 0%,#057fbd 58%,#0072ac 100%)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 8px 20px rgba(4,65,101,.16)!important;
  }
  .main-nav__inner{
    height:70px!important;
    justify-content:flex-start!important;
    gap:9px!important;
    padding:0 2px!important;
    font-size:clamp(.72rem,.76vw,.82rem)!important;
  }
  .category-menu-button,
  .main-nav__inner>.nav-main-link,
  .main-nav__inner>.nav-contact-link,
  .nav-more>summary{
    position:relative!important;
    height:46px!important;
    min-height:46px!important;
    margin:0!important;
    padding:0 clamp(14px,1.15vw,20px)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid rgba(255,255,255,.28)!important;
    border-radius:13px!important;
    background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.075))!important;
    color:#fff!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 5px 12px rgba(0,54,88,.10)!important;
    font-weight:900!important;
    line-height:1.1!important;
    text-transform:uppercase!important;
    letter-spacing:.012em!important;
    white-space:nowrap!important;
    cursor:pointer!important;
    transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease!important;
  }
  .category-menu-button{
    gap:10px!important;
    background:linear-gradient(180deg,#ffffff 0%,#e9f7fd 100%)!important;
    border-color:#fff!important;
    color:#075984!important;
    box-shadow:0 5px 0 rgba(0,79,123,.28),0 10px 20px rgba(0,63,99,.16)!important;
  }
  .category-menu-button svg{width:21px!important;height:21px!important;stroke-width:2.2!important}
  .category-menu-button:hover,.category-menu-button:focus-visible{
    background:#fff!important;
    color:#064e75!important;
    transform:translateY(-2px)!important;
    box-shadow:0 7px 0 rgba(0,76,119,.25),0 14px 25px rgba(0,55,88,.19)!important;
    outline:none!important;
  }
  .main-nav__inner>.nav-main-link:hover,
  .main-nav__inner>.nav-main-link:focus-visible,
  .main-nav__inner>.nav-contact-link:hover,
  .main-nav__inner>.nav-contact-link:focus-visible,
  .nav-more>summary:hover,
  .nav-more>summary:focus-visible{
    border-color:rgba(255,255,255,.68)!important;
    background:linear-gradient(180deg,rgba(255,255,255,.27),rgba(255,255,255,.15))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 9px 18px rgba(0,50,82,.16)!important;
    transform:translateY(-2px)!important;
    outline:none!important;
  }
  .main-nav__inner a[aria-current="page"],
  .nav-more.has-current>summary{
    border-color:#fff!important;
    background:#fff!important;
    color:#066b9d!important;
    box-shadow:0 5px 0 rgba(0,73,114,.21),0 11px 20px rgba(0,55,88,.15)!important;
  }
  .main-nav__inner>.nav-contact-link{padding-inline:17px!important}
  .nav-more{height:auto!important}
  .nav-more>summary:after{margin-left:8px!important;font-size:1rem!important;line-height:1!important}
  .nav-more>div{
    top:calc(100% + 11px)!important;
    min-width:260px!important;
    padding:9px!important;
    border-radius:16px!important;
    border-color:#bdd9e7!important;
    box-shadow:0 24px 55px rgba(5,42,62,.25)!important;
  }
  .nav-more>div a{
    min-height:43px!important;
    display:flex!important;
    align-items:center!important;
    border-radius:10px!important;
    padding:9px 12px!important;
    font-weight:780!important;
  }
}

@media (min-width:901px) and (max-width:1180px){
  .main-nav__inner{gap:7px!important}
  .category-menu-button,.main-nav__inner>.nav-main-link,.main-nav__inner>.nav-contact-link,.nav-more>summary{padding-inline:12px!important}
}

/* Mobiel/tablet: één header-grid. Hiermee vervallen de overlappende 3/4-koloms
   regels uit oudere versies die tussen 768 en 900px impliciete kolommen maakten. */
@media (max-width:900px){
  html,body{max-width:100%!important;overflow-x:hidden!important}
  body{padding-bottom:calc(80px + env(safe-area-inset-bottom))!important}
  .site-header{position:relative!important;top:auto!important;z-index:100!important;overflow:visible!important}
  .site-header .header-row{
    width:var(--container)!important;
    height:78px!important;
    min-height:78px!important;
    display:grid!important;
    grid-template-columns:58px minmax(0,1fr) 98px!important;
    align-items:center!important;
    gap:7px!important;
    padding:0!important;
    margin-inline:auto!important;
  }
  #menuButton.mobile-menu-button{
    grid-column:1!important;
    width:54px!important;min-width:54px!important;max-width:54px!important;
    height:54px!important;min-height:54px!important;max-height:54px!important;
    border:1px solid #9ccce2!important;
    border-radius:16px!important;
    background:linear-gradient(180deg,#f5fbfe 0%,#e5f5fb 100%)!important;
    color:#075f90!important;
    box-shadow:0 6px 15px rgba(6,92,134,.10)!important;
  }
  #menuButton.mobile-menu-button:active{transform:scale(.97)!important}
  .site-header .logo{grid-column:2!important;min-width:0!important;width:100%!important;justify-self:center!important;overflow:visible!important}
  .site-header .logo img{width:min(210px,100%)!important;max-width:100%!important;max-height:56px!important;object-fit:contain!important}
  .site-header .header-actions{
    grid-column:3!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    justify-self:end!important;
    width:auto!important;
    min-width:0!important;
    gap:2px!important;
  }
  .site-header .mobile-customer,.site-header .cart-button{
    width:47px!important;min-width:47px!important;max-width:47px!important;
    height:52px!important;min-height:52px!important;
    border-radius:13px!important;
  }
  .site-header .mobile-customer{display:flex!important;font-size:.59rem!important}
  .site-header .mobile-customer:active,.site-header .cart-button:active{background:#eef8fc!important;transform:scale(.97)!important}
  .site-header .mobile-customer span{max-width:47px!important}
  .site-header .cart-button{display:grid!important;place-items:center!important;padding:0!important}
  .site-header .cart-button b{top:0!important;left:auto!important;right:-1px!important}
  .mobile-search{display:block!important;width:100%!important;padding:0 12px 12px!important;background:#fff!important}
  .mobile-search form{
    width:100%!important;
    height:52px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 52px!important;
    border:1px solid #bcd4e0!important;
    border-radius:13px!important;
    background:#fff!important;
    box-shadow:0 6px 18px rgba(14,69,96,.06)!important;
    overflow:visible!important;
  }
  .mobile-search input{height:50px!important;padding:0 13px!important;border:0!important;font-size:16px!important}
  .mobile-search button{width:52px!important;height:50px!important;border-radius:0 12px 12px 0!important;background:linear-gradient(180deg,#1199d6,#007ab9)!important}
  .mobile-bottom-nav{
    height:80px!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    border-top:1px solid #c8dce6!important;
    background:rgba(255,255,255,.97)!important;
    box-shadow:0 -12px 30px rgba(10,51,74,.11)!important;
    backdrop-filter:blur(12px)!important;
  }
  .mobile-bottom-nav a,.mobile-bottom-nav button{
    min-width:0!important;
    min-height:58px!important;
    padding:7px 2px calc(5px + env(safe-area-inset-bottom))!important;
    border-radius:12px!important;
    background:transparent!important;
    font-size:.66rem!important;
    transition:background .15s ease,color .15s ease,transform .15s ease!important;
  }
  .mobile-bottom-nav a:active,.mobile-bottom-nav button:active{transform:scale(.96)!important;background:#eef8fc!important}
  .mobile-bottom-nav a[aria-current="page"]{background:#e9f6fc!important;color:#006fa8!important}
  .mobile-bottom-nav a[aria-current="page"] svg{stroke-width:2.25!important}
  .mobile-bottom-nav b{right:18%!important;top:4px!important}

  .product-page,.product-info,.variant-row,.inline-cut-configurator{scroll-margin-top:12px!important}
  .product-purchase-footer{bottom:80px!important;z-index:25!important}
  .variant-row.is-selected{
    border-color:#65b7da!important;
    background:linear-gradient(180deg,#f4fbfe,#ecf8fd)!important;
    box-shadow:inset 4px 0 0 #078fc5,0 7px 16px rgba(8,103,148,.08)!important;
  }
  .qty-stepper button,.qty-stepper input{min-height:44px!important}
}

@media (max-width:620px){
  .site-header .header-row{grid-template-columns:54px minmax(0,1fr) 94px!important;gap:5px!important}
  #menuButton.mobile-menu-button{width:51px!important;min-width:51px!important;max-width:51px!important;height:51px!important;min-height:51px!important;max-height:51px!important;border-radius:15px!important}
  .site-header .logo img{width:min(186px,100%)!important}
  .site-header .mobile-customer,.site-header .cart-button{width:45px!important;min-width:45px!important;max-width:45px!important}
  .product-card.product-card--calm{display:grid!important;grid-template-columns:118px minmax(0,1fr)!important;align-items:stretch!important}
  .product-card.product-card--calm .product-card__image{width:118px!important;height:100%!important;min-height:178px!important;aspect-ratio:auto!important}
  .product-card.product-card--calm .product-card__body{min-width:0!important;padding:13px 13px 14px!important}
  .product-card.product-card--calm:hover,.product-card.product-card--calm:focus-visible{transform:none!important}
  .product-card__saw-badge{right:6px!important;bottom:7px!important;max-width:106px!important;padding:5px 7px!important;font-size:.57rem!important}
  .product-purchase-footer{margin-inline:-17px!important;padding:11px 13px!important}
  .product-purchase-footer .selected-total small{font-size:.68rem!important}
  .product-purchase-footer .selected-total strong{font-size:1.1rem!important}
}

@media (max-width:390px){
  .site-header .header-row{grid-template-columns:51px minmax(0,1fr) 88px!important;gap:3px!important}
  #menuButton.mobile-menu-button{width:49px!important;min-width:49px!important;max-width:49px!important;height:49px!important;min-height:49px!important;max-height:49px!important}
  .site-header .logo img{width:min(166px,100%)!important}
  .site-header .mobile-customer,.site-header .cart-button{width:42px!important;min-width:42px!important;max-width:42px!important}
  .site-header .mobile-customer span{font-size:.55rem!important;max-width:42px!important}
  .mobile-search{padding-inline:9px!important}
  .mobile-bottom-nav a,.mobile-bottom-nav button{font-size:.61rem!important}
}


/* 105.0.1 stabilisatie: oude inline header-overrides zijn uit index.php verwijderd.
   Deze laag is nu de enige eigenaar van de responsive header/navigatie. */
@media (min-width:901px){
  .site-header{position:relative!important;top:auto!important;z-index:50!important;overflow:visible!important}
  .site-header .header-row{display:grid!important;align-items:center!important}
  .site-header .header-row>.logo{grid-column:1!important;min-width:0!important}
  .site-header .header-row>.header-search{grid-column:2!important;min-width:0!important}
  .site-header .header-row>.header-actions{grid-column:3!important;display:flex!important;align-items:center!important;justify-self:end!important;gap:8px!important;min-width:max-content!important;white-space:nowrap!important}
  .main-nav{position:relative!important;top:auto!important;z-index:10!important}
  .main-nav__inner{display:flex!important;align-items:center!important;max-width:var(--container)!important;overflow:visible!important}
  .hero__eyebrow{display:none!important}
  .hero__content{padding-top:52px!important}
  .hero h1{margin-top:0!important}
  .hero-search{margin-top:18px!important}
}
@media (min-width:901px) and (max-width:1365px){
  .site-header .header-row{grid-template-columns:minmax(175px,220px) minmax(260px,1fr) max-content!important;gap:14px!important}
  .site-header .logo img{max-width:215px!important}
  .main-nav__inner{gap:6px!important;font-size:.69rem!important}
  .category-menu-button,.main-nav__inner>.nav-main-link,.main-nav__inner>.nav-contact-link,.nav-more>summary{padding-inline:10px!important;border-radius:11px!important}
}
@media (min-width:901px) and (max-width:1100px){
  .site-header .header-row{grid-template-columns:minmax(155px,190px) minmax(210px,1fr) max-content!important;gap:10px!important}
  .site-header .logo img{max-width:185px!important}
  .site-header .header-actions .header-action{min-width:46px!important;justify-content:center!important;padding-inline:9px!important}
  .site-header .header-actions .header-action>span{display:none!important}
  .main-nav__inner{gap:4px!important;font-size:.64rem!important}
  .category-menu-button,.main-nav__inner>.nav-main-link,.main-nav__inner>.nav-contact-link,.nav-more>summary{height:44px!important;min-height:44px!important;padding-inline:8px!important}
}

/* Productkeuze moet zichtbaar en herkenbaar blijven. */
.variant-row{scroll-margin-block:18px}
.variant-row.is-selected{position:relative;border-color:#65b7da!important;background:linear-gradient(180deg,#f4fbfe,#ecf8fd)!important;box-shadow:inset 4px 0 0 #078fc5,0 7px 16px rgba(8,103,148,.08)!important}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.variant-row,.product-page{scroll-behavior:auto!important}}
\n\n/* 105.0.2 - mobile/tablet AI saw presentation */\n@media (max-width: 1024px){\n  .hero__content{max-width:760px!important;margin-inline:auto!important;text-align:center!important;padding-left:18px!important;padding-right:18px!important}\n  .hero__content h1,.hero__content p{margin-left:auto!important;margin-right:auto!important;text-align:center!important}\n  .hero__content h1{max-width:680px!important}\n  .hero__content p{max-width:650px!important}\n}\n.home-ai-saw{padding:12px 0!important;background:#f5fafc!important}\n.home-ai-saw__inner{max-width:900px!important;border:1px solid #d8e8ef!important;border-radius:16px!important;background:#fff!important;box-shadow:0 8px 24px rgba(17,59,82,.06)!important;padding:14px 16px!important;grid-template-columns:42px minmax(0,1fr)!important;gap:12px!important}\n.home-ai-saw__icon{width:42px!important;height:42px!important;border-radius:12px!important;background:#eef8fc!important;box-shadow:none!important}\n.home-ai-saw__icon svg{width:21px!important;height:21px!important}\n.home-ai-saw__copy small{font-size:9px!important;letter-spacing:.08em!important}\n.home-ai-saw__copy h2{font-size:18px!important;margin:2px 0 3px!important}\n.home-ai-saw__copy p{font-size:13px!important;line-height:1.4!important}\n@media(max-width:760px){\n  .home-ai-saw{padding:10px 12px!important}\n  .home-ai-saw__inner{grid-template-columns:36px minmax(0,1fr)!important;gap:10px!important;padding:11px 12px!important;border-radius:14px!important}\n  .home-ai-saw__icon{width:36px!important;height:36px!important;border-radius:10px!important}\n  .home-ai-saw__copy h2{font-size:16px!important}\n  .home-ai-saw__copy p{font-size:12.5px!important}\n}\n.product-saw-intro{margin:18px 0 12px;padding:16px;border:1px solid #cfe4ed;border-radius:16px;background:#f5fbfd}\n.product-saw-intro>small{font-size:10px;font-weight:900;letter-spacing:.09em;color:#078fc5}\n.product-saw-intro h2{font-size:20px;line-height:1.15;margin:4px 0 12px;color:#17394a}\n.product-saw-intro__points{display:grid;gap:8px}\n.product-saw-intro__points span{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.4;color:#435f6f}\n.product-saw-intro__points b{flex:0 0 23px;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#078fc5;color:#fff;font-size:11px}\n.saw-info-banner{text-align:center}\n.saw-info-banner .breadcrumbs{justify-content:center}\n.saw-info-banner p{max-width:760px;margin-left:auto;margin-right:auto}\n.saw-info-page{max-width:980px}\n.saw-info-page__head{text-align:center;max-width:760px;margin:0 auto 24px}\n.saw-info-page__head small{font-size:11px;font-weight:900;letter-spacing:.1em;color:#078fc5}\n.saw-info-page__head h2{margin:5px 0 8px;font-size:clamp(27px,4vw,42px);color:#17394a}\n.saw-info-page__head p{margin:0;color:#57717f;line-height:1.55}\n.saw-info-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}\n.saw-info-steps article{display:flex;gap:13px;padding:18px;border:1px solid #dce9ef;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(17,59,82,.05)}\n.saw-info-steps article>span{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#078fc5;color:#fff;font-weight:900}\n.saw-info-steps strong{display:block;color:#17394a;font-size:16px;margin-bottom:3px}\n.saw-info-steps p{margin:0;color:#5a7180;line-height:1.45;font-size:14px}\n.saw-info-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}\n.saw-info-quotes blockquote{margin:0;padding:17px;border-radius:16px;background:#eef8fc;color:#17435a;font-weight:800;font-size:15px;line-height:1.35}\n.saw-info-note{display:flex;align-items:flex-start;gap:13px;padding:18px;border-radius:18px;background:#17394a;color:#fff}\n.saw-info-note svg{width:30px;height:30px;flex:0 0 30px;fill:none;stroke:#55c3ef;stroke-width:1.8}\n.saw-info-note strong{display:block;font-size:17px;margin-bottom:3px}\n.saw-info-note p{margin:0;color:#d8e7ee;line-height:1.45}\n.saw-info-actions{display:flex;justify-content:center;gap:10px;margin-top:20px}\n@media(max-width:760px){\n  .saw-info-steps,.saw-info-quotes{grid-template-columns:1fr}\n  .saw-info-page__head{text-align:left}\n  .saw-info-steps article{padding:15px}\n  .saw-info-quotes{gap:8px}\n  .saw-info-quotes blockquote{padding:14px;font-size:14px}\n  .saw-info-actions{display:grid;grid-template-columns:1fr 1fr}\n  .saw-info-actions .button{width:100%;justify-content:center}\n}\n
/* 105.0.18 - AI Zaagtool video hero */
.saw-video-hero{position:relative;isolation:isolate;min-height:590px;display:flex;align-items:stretch;overflow:hidden;background:#0d3850 url('../img/ai-zaagtool-background-poster.jpg') center/cover no-repeat;color:#fff}
.saw-video-hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;z-index:-3}
.saw-video-hero__overlay{position:absolute;inset:0;z-index:-2;background:linear-gradient(110deg,rgba(4,45,72,.94) 0%,rgba(5,103,153,.82) 48%,rgba(2,39,66,.86) 100%)}
.saw-video-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 78% 24%,rgba(59,190,239,.22),transparent 34%),linear-gradient(180deg,rgba(2,24,39,.08),rgba(2,24,39,.38));pointer-events:none}
.saw-video-hero__inner{width:100%;padding-top:28px;padding-bottom:42px;display:flex;flex-direction:column;justify-content:center}
.saw-video-hero .breadcrumbs{margin-bottom:34px;color:rgba(255,255,255,.82)}
.saw-video-hero .breadcrumbs a,.saw-video-hero .breadcrumbs strong{color:#fff}
.saw-video-hero__copy{max-width:900px}
.saw-video-hero__copy>small{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;font-weight:900;color:#91ddfb;margin-bottom:10px}
.saw-video-hero__copy>small::before{content:"";width:28px;height:2px;border-radius:99px;background:#5ec9f2}
.saw-video-hero__copy h1{max-width:900px;margin:0;font-size:clamp(38px,5.3vw,72px);line-height:1.01;letter-spacing:-.035em;color:#fff;text-wrap:balance;text-shadow:0 3px 24px rgba(0,25,42,.24)}
.saw-video-hero__copy p{max-width:790px;margin:18px 0 0;font-size:clamp(16px,1.45vw,20px);line-height:1.55;color:#e7f5fb}
.saw-video-hero__frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:30px;max-width:1120px}
.saw-video-hero__frames article{display:flex;align-items:flex-start;gap:13px;min-height:128px;padding:18px;border:1px solid rgba(255,255,255,.24);border-radius:18px;background:rgba(8,46,69,.5);box-shadow:0 18px 48px rgba(0,25,42,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.saw-video-hero__frames article>span{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#fff;color:#087fba;font-size:11px;font-weight:900;letter-spacing:.05em;box-shadow:0 8px 22px rgba(0,22,39,.15)}
.saw-video-hero__frames strong{display:block;margin:1px 0 5px;font-size:17px;color:#fff}
.saw-video-hero__frames p{margin:0;font-size:13.5px;line-height:1.45;color:#d9eff8}
.saw-video-hero__hint{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin-top:16px;padding:10px 13px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font-size:13px;color:#eaf8fd}
.saw-video-hero__hint svg{width:19px;height:19px;fill:none;stroke:#72d4f6;stroke-width:1.9}
.saw-video-hero + .section{padding-top:54px}

@media(max-width:1024px){
  .saw-video-hero{min-height:620px}
  .saw-video-hero__copy h1{font-size:clamp(38px,7vw,58px)}
  .saw-video-hero__frames{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .saw-video-hero__frames article{padding:15px;min-height:142px}
}
@media(max-width:760px){
  .saw-video-hero{min-height:auto;background-position:center}
  .saw-video-hero__media{display:none}
  .saw-video-hero__overlay{background:linear-gradient(160deg,rgba(3,48,76,.94),rgba(5,113,164,.86) 58%,rgba(3,45,72,.94))}
  .saw-video-hero__inner{padding-top:18px;padding-bottom:28px}
  .saw-video-hero .breadcrumbs{margin-bottom:22px;font-size:12px}
  .saw-video-hero__copy{text-align:center;margin-inline:auto}
  .saw-video-hero__copy>small{justify-content:center}
  .saw-video-hero__copy h1{font-size:clamp(34px,10vw,48px);line-height:1.02}
  .saw-video-hero__copy p{font-size:15px;line-height:1.5;margin-top:14px}
  .saw-video-hero__frames{grid-template-columns:1fr;gap:9px;margin-top:22px}
  .saw-video-hero__frames article{min-height:0;padding:13px 14px;border-radius:15px;background:rgba(6,48,73,.56)}
  .saw-video-hero__frames article>span{width:34px;height:34px;flex-basis:34px;border-radius:10px}
  .saw-video-hero__frames strong{font-size:15px}
  .saw-video-hero__frames p{font-size:12.5px}
  .saw-video-hero__hint{align-self:stretch;justify-content:center;text-align:center;border-radius:14px;font-size:12px}
  .saw-video-hero + .section{padding-top:34px}
}
@media(prefers-reduced-motion:reduce){
  .saw-video-hero__media{display:none!important}
}