/* Intro (logo + EST. 2002 flies into the header) and first-screen hero fit. Loaded last. */

/* ---- intro: header logo and hero scene wait until the animation hands over ---- */
html.intro-on .nav-logo{visibility:hidden}
html.intro-scene .ea-scene-mount{opacity:0!important;transition:none}
.intro-brand{position:fixed;z-index:1500;margin:0;pointer-events:none;transform-origin:50% 50%;will-change:transform}
.intro-veil{position:fixed;inset:0;z-index:1400;background:#fff;pointer-events:none}

/* ---- first screen: text + award card on the left, scene on the right, expertise strip and stats visible without scrolling ---- */
#hero .hero-slider{grid-template-rows:auto minmax(0,1fr)}
#hero .slide-content .hero-showcase{position:relative;inset:auto;transform:none;width:min(400px,100%);max-width:none;margin:26px 0 0;grid-row:auto;z-index:5}
#hero .slide-content .stage{padding:0}
#hero .slide-content .award-card{padding:10px;border-radius:20px}
#hero .slide-content .award-card figcaption{padding:12px 6px 4px}
#hero .slide-content .award-card strong{font-size:17px}
#hero .slide-content .award-card small,#hero .slide-content .award-card figcaption span{display:block}
#hero .slide-content .award-tabs{display:flex}

@media (min-width:1100px){
  #hero{--below:260px;min-height:100svh}
  #hero .slide,#hero .slide.active{align-items:center;padding:12px 3% 12px 4%}
  #hero .slide-content{align-self:center;margin-top:0;flex:0 0 min(34%,500px);max-width:min(34%,500px)}
  #hero .ea-scene-mount{width:min(100%,calc((100svh - 72px - var(--below) - 24px)*1.247));min-width:0}
}
/* shorter laptop screens: slimmer award card so everything still fits */
@media (min-width:1100px) and (max-height:900px){
  #hero .slide-content .hero-showcase{width:min(330px,100%);margin-top:18px}
  #hero .slide-content .award-tabs,#hero .slide-content .award-card figcaption span{display:none}
}
@media (min-width:1100px) and (max-height:760px){
  #hero .slide-content .award-card figcaption{display:none}
  #hero .slide-content .hero-showcase{width:min(280px,100%)}
  #hero .slide-desc{margin-bottom:22px}
}

/* phones / tablets: text, buttons, then the factory scene, and the award card AFTER the scene */
@media (max-width:1099px){
  #hero .slide,#hero .slide.active{display:flex;flex-direction:column}
  #hero .slide-content{display:contents}
  #hero .slide-visual{order:2}
  #hero .slide-content .hero-showcase{order:3;align-self:center;width:min(420px,100%);margin:20px 0 0}
}

/* tablets / small laptops: the Siemens banner sits in the page flow above the text instead of floating over it */
@media (min-width:900px) and (max-width:1279px){
  #hero .hero-partner{position:relative;top:auto;left:auto;right:auto;margin:14px 4% 0}
}

/* video scene (phones, iPad): its white background is multiplied away, so no parent may create its own stacking context */
#hero .slide:has(.ea-video),#hero .slide.active:has(.ea-video){transform:none}
#hero .slide-visual:has(.ea-video){perspective:none}
/* stacked layout (under 1100px): the scene keeps its full height and width */
@media (max-width:1099px){
  #hero .slide-visual{flex:0 0 auto;width:100%;padding:0;align-items:center}
  #hero .ea-scene-mount{width:min(100%,720px);margin:0 auto}
}