/* One continuous hero sits behind the navigation shoulders. The white plate
   uses the rendered labels' intrinsic width, including translated fonts. */
@media(min-width:721px){
 .home-intro>header{position:relative;z-index:30;background:#fff}
 .home-intro>header>.main-nav{
  position:absolute;top:100%;left:0;right:0;
  margin-top:0;padding:0 clamp(32px,6vw,112px);background:transparent;
  --home-nav-shoulder:clamp(32px,4.6vw,88px);
 }
 .home-intro>header>.main-nav>.nav-list{
  position:relative;z-index:1;
  width:max-content;max-width:100%;margin:0 auto;
  padding:0 clamp(24px,2.2vw,42px);
  column-gap:clamp(18px,2.2vw,38px);row-gap:0;
  flex-wrap:wrap;background:#fff;
 }
 .home-intro>header>.main-nav>.nav-list::before,
 .home-intro>header>.main-nav>.nav-list::after{
  content:"";position:absolute;top:0;bottom:0;
  width:var(--home-nav-shoulder);pointer-events:none;
  background:url('/assets/home-nav-shoulder.svg') center/100% 100% no-repeat;
 }
 .home-intro>header>.main-nav>.nav-list::before{right:calc(100% - .5px)}
 .home-intro>header>.main-nav>.nav-list::after{left:calc(100% - .5px);transform:scaleX(-1)}
 .home-intro>header>.main-nav .nav-item{max-width:100%}
 .home-intro>header>.main-nav .nav-disclosure.is-open{z-index:2}
 .home-intro>header>.main-nav .nav-trigger{white-space:normal;overflow-wrap:anywhere;text-align:center}
 .home-intro>header>.main-nav .nav-dropdown{max-width:calc(100vw - 32px);translate:var(--home-dropdown-shift,0px) 0}
 .home-intro .hero.hero-clean,
 .home-intro .hero.hero-clean.home-has-video{min-height:calc(var(--home-nav-height,60px) + 160px)}

 /* Keep the decorative sides outside the measured plate in every language. */
 .home-intro>header>.main-nav .seasonal-garland{max-width:var(--home-nav-side-space,20vw)}
 .home-intro>header>.main-nav .seasonal-leaf,
 .home-intro>header>.main-nav .seasonal-blossom{max-width:var(--home-nav-side-space,18vw)}

 /* The continuous Christmas motif needs the same breathing room as before. */
 .home-intro>header:has(.header-seasonal[data-seasonal-motif="christmas02"]){padding-bottom:28px}
 .home-intro>header>.main-nav:has(>.header-seasonal[data-seasonal-motif="christmas02"]){margin-top:0;padding-top:0}
 .home-intro>header>.main-nav:has(>.header-seasonal[data-seasonal-motif="christmas02"])>.nav-list{padding-top:20px}
}
@media(min-width:721px) and (max-width:1100px){
 .home-intro>header:has(.header-seasonal[data-seasonal-motif="christmas02"]){padding-bottom:24px}
 .home-intro>header>.main-nav:has(>.header-seasonal[data-seasonal-motif="christmas02"])>.nav-list{padding-top:18px}
}