/* ELIOS reference hero. This file intentionally overrides legacy crane geometry in main.css. */
html,body{overflow-x:hidden}
.elios-header::after{content:none!important;display:none!important}
.elios-front-page .elios-header{background:transparent}
.elios-front-page .elios-header__inner{position:relative;z-index:2}
.elios-front-page .elios-hero{min-height:clamp(760px,44.8vw,860px);overflow:visible}
.elios-front-page .elios-hero h1{max-width:900px;font-size:clamp(48px,3.6vw,64px)}

/* The complete crane is one transparent bitmap, so its rails, hook, ropes and cargo cannot separate. */
.elios-front-page .elios-hero__rig{
  position:absolute;
  z-index:3;
  top:max(-906px,calc(6px - 75.6vw));
  left:50%;
  width:min(63vw,760px);
  height:auto;
  translate:-50% 0;
  animation:none;
  pointer-events:none;
}
.elios-front-page .elios-hero__assembly{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  animation:elios-assembly-lift 5s var(--ease) infinite alternate;
  filter:drop-shadow(0 24px 18px rgb(0 0 0/.12));
}
.elios-crane-rails,.elios-hero__lift,.elios-crane-trolley,.elios-hoist-lines,
.elios-crane-hook,.elios-crane-cables,.elios-suspended-container,
.elios-container-brand,.elios-container-safety,.elios-container-side-brand{display:none!important}
@keyframes elios-assembly-lift{from{transform:translateY(-7px)}to{transform:translateY(7px)}}

.elios-front-page .elios-avatars{display:flex;isolation:isolate;padding-left:2px}
.elios-front-page .elios-avatars img{
  display:block!important;
  width:43px!important;
  height:43px!important;
  flex:0 0 43px!important;
  margin-right:-11px!important;
  border:2px solid #fff!important;
  border-radius:50%!important;
  clip-path:circle(50% at 50% 50%);
  object-fit:cover!important;
  overflow:hidden!important;
}
.elios-front-page .elios-avatars img:nth-child(1){z-index:3}
.elios-front-page .elios-avatars img:nth-child(2){z-index:2}
.elios-front-page .elios-avatars img:nth-child(3){z-index:1}

/* This crop is already 1920:300, so the four lower containers are never stretched. */
.elios-front-page .elios-container-stack{
  bottom:-3px;
  height:15.625vw;
  max-height:300px;
  background-image:url('../images/container-stack-wide.png');
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:100% auto;
}

.elios-front-page .elios-hero__summary>div{display:flex;gap:12px}
.elios-front-page .elios-hero__summary .elios-button{
  width:126px;
  margin:0!important;
  padding-inline:12px;
  white-space:nowrap;
}

/* Transparent vessel cutout: no dark rectangle and no cropped bow or stern. */
.elios-partner{grid-template-columns:1fr minmax(360px,24vw) 1fr}
.elios-partner__vessel{display:flex;height:820px;min-height:0;align-items:flex-start;justify-content:center;margin:-90px 0 0!important;overflow:visible}
.elios-partner__vessel img{display:block;width:auto!important;height:820px!important;max-width:none!important;max-height:820px;object-fit:contain}

@media(max-width:1100px){
  .elios-front-page .elios-hero{min-height:740px}
  .elios-front-page .elios-hero__rig{
    top:max(-784px,calc(56px - 93.6vw));
    left:50%;
    width:min(78vw,700px);
  }
  .elios-front-page .elios-hero h1{font-size:42px}
  .elios-front-page .elios-hero__summary{
    top:auto;
    right:24px;
    bottom:calc(15.625vw + 20px);
    left:auto;
    width:290px;
  }
  .elios-front-page .elios-hero__summary p{display:none}
  .elios-front-page .elios-hero__summary .elios-button{flex:1;width:auto}
  .elios-partner{grid-template-columns:1fr minmax(280px,25vw) 1fr}
  .elios-partner__vessel,.elios-partner__vessel img{height:720px!important;max-height:720px}
}

@media(max-width:820px){
  .elios-front-page .elios-hero{min-height:680px}
  .elios-front-page .elios-hero h1{font-size:38px}
  .elios-front-page .elios-hero__rig{
    top:max(-660px,calc(24px - 84vw));
    left:50%;
    width:min(70vw,570px);
    translate:-50% 0;
  }
  .elios-front-page .elios-hero__summary{
    right:auto;
    bottom:calc(15.625vw + 20px);
    left:50%;
    width:min(500px,calc(100% - 40px));
    translate:-50% 0;
  }
  .elios-front-page .elios-hero__summary>div{gap:12px}
  .elios-front-page .elios-hero__summary .elios-button{min-width:0;width:50%;padding-inline:8px}
  .elios-front-page .elios-container-stack{height:15.625vw}
  .elios-partner{grid-template-columns:1fr;gap:40px}
  .elios-partner__vessel{height:560px;min-height:560px;margin:0!important}
  .elios-partner__vessel img{height:560px!important;max-height:560px}
}

@media(max-width:680px){
  .elios-front-page .elios-container-stack{
    height:30.245vw;
    max-height:206px;
    background-image:url('../images/container-stack.png');
    background-size:100% auto;
  }
  .elios-front-page .elios-hero__summary{bottom:calc(30.245vw + 20px)}
}

@media(max-width:540px){
  .elios-front-page .elios-hero{min-height:clamp(570px,calc(21.5vw + 486px),590px)}
  .elios-front-page .elios-hero h1{font-size:clamp(39px,10vw,48px)}
  .elios-front-page .elios-hero__rig{
    top:calc(254px - 84vw);
    left:50%;
    width:70vw;
    max-width:none;
  }
  .elios-front-page .elios-avatars img{width:39px!important;height:39px!important;flex-basis:39px!important;margin-right:-10px!important}
  .elios-partner__vessel{height:500px;min-height:500px}
  .elios-partner__vessel img{height:500px!important;max-height:500px}
}

@media(max-width:420px){
  .elios-front-page .elios-hero__rig{top:calc(274px - 84vw)}
}

@media(prefers-reduced-motion:reduce){
  .elios-front-page .elios-hero__assembly{animation:none;transform:translateY(-7px)}
}