/* Responsive hero: each background and its robots share one scene.
   Match the picture breakpoint below: desktop 2:1; mobile/tablet 1366:1151. */
.hero{
  container-type:size;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  height:min(960px,88svh);
  min-height:680px;
  aspect-ratio:auto;
  background:#063b80;
}
.hero::before,.hero header::before{content:none}
.hero-scene{
  position:absolute;
  z-index:0;
  left:50%;
  bottom:0;
  width:max(100cqw,200cqh);
  height:auto;
  aspect-ratio:2 / 1;
  transform:translateX(-50%);
  pointer-events:none;
}
.hero-picture,.hero-landscape{
  display:block;
  width:100%;
  height:100%;
  mask-image:none;
  -webkit-mask-image:none;
}
.hero-landscape{object-fit:fill}
.hero-scene .robot-lineup{
  position:absolute;
  left:50%;
  width:min(85cqw,78%);
  height:30%;
  bottom:3.5%;
  transform:translateX(-50%);
}
.hero-scene .robot-lineup img{object-position:center bottom}
.hero header.container{
  position:relative;
  z-index:4;
  isolation:auto;
  width:91%;
  max-width:960px;
  min-height:94px;
  padding-block:16px;
  gap:24px;
  flex-wrap:nowrap;
}
.hero header .brand img{width:160px;height:auto}
.hero header nav{
  display:flex;
  position:static;
  width:auto;
  margin-left:auto;
  padding:0;
  background:none;
  gap:clamp(16px,2vw,28px);
  flex-wrap:nowrap;
}
.hero header .menu-toggle{display:none}
.hero-copy{margin-top:clamp(20px,3.5vh,42px)}
.hero .eyebrow{color:#e2ecff}
.hero-note{top:23%;right:5%;bottom:auto;z-index:2}
@media(min-width:1000px) and (max-height:850px){
  .hero{min-height:620px}
  .hero header.container{min-height:80px;padding-block:10px}
  .hero-copy{margin-top:12px}
  .hero h1{font-size:72px;margin:20px 0 16px}
}
@media(max-width:999px){
  .hero{height:min(960px,92svh);min-height:740px}
  .hero-scene{width:max(100cqw,118.679409cqh);aspect-ratio:1366 / 1151}
  .hero header .brand img{width:145px}
  .hero header .menu-toggle{
    display:block;
    margin-left:auto;
    order:3;
    background:transparent;
    border:1px solid #ffffff65;
    border-radius:8px;
    color:white;
    padding:10px 14px;
    font-size:14px;
    cursor:pointer;
  }
  .hero header nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    margin:0;
    padding:16px;
    border-radius:12px;
    background:#073b80;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px 24px;
  }
  .hero header nav.is-open{display:flex}
  .hero header nav a{font-size:14px}
  .hero-copy{margin-top:30px}
  .hero-note{top:auto;bottom:30%;right:5%;font-size:20px}
  .hero-scene .robot-lineup{width:94cqw;height:25%;bottom:3.5%}
}
@media(max-width:600px){
  .hero{height:720px;min-height:0}
  .hero header.container{min-height:84px}
  .hero header .brand img{width:135px}
  .hero-copy{margin-top:24px}
  .hero h1{font-size:clamp(35px,9.5vw,57px);margin:22px 0 18px}
  .hero .eyebrow{font-size:10px;letter-spacing:3px}
  .hero-note{bottom:24%;font-size:17px}
  .hero-scene .robot-lineup{height:22%;bottom:4%}
}
/* Leave visible pavement between the robot feet and the section transition. */
.hero::after{height:4%}
.hero-scene .robot-lineup{bottom:6%}

/* Calibration uses visible head/sole landmarks, excluding each PNG's shadow.
   Desktop shoreline: 79%, soles: 93%. Original mobile scene: 61%, soles: 84%.
   All measurements below are relative to the image, not the viewport. */
.hero-scene .robot-lineup{
  display:block;
  inset:0;
  width:100%;
  height:100%;
  transform:none;
  --shoreline:79%;
  --foot-line:93%;
  --landmark-span:14%;
}
.hero-scene .robot-lineup img{
  position:absolute;
  width:auto;
  max-width:none;
  margin:0;
  object-fit:contain;
  transform:translateX(-50%);
  filter:none;
}
.hero-scene .robot-lineup .green{height:calc(var(--landmark-span) * 1.376720);top:calc(var(--foot-line) - var(--landmark-span) * 1.179850);left:35.65%}
.hero-scene .robot-lineup .blue{height:calc(var(--landmark-span) * 1.026226);top:calc(var(--foot-line) - var(--landmark-span) * 0.910262);left:44.05%}
.hero-scene .robot-lineup .yellow-robot{height:calc(var(--landmark-span) * 0.877500);top:calc(var(--foot-line) - var(--landmark-span) * 0.786240);left:51.75%}
.hero-scene .robot-lineup .purple{height:calc(var(--landmark-span) * 0.807382);top:calc(var(--foot-line) - var(--landmark-span) * 0.709689);left:58.4%}
.hero-scene .robot-lineup .red{height:calc(var(--landmark-span) * 1.444043);top:calc(var(--foot-line) - var(--landmark-span) * 1.236101);left:66.45%}

@media(min-width:1000px){
  .hero-scene .robot-lineup .green{height:calc(var(--landmark-span) * 1.652065);top:calc(var(--foot-line) - var(--landmark-span) * 1.415820)}
  .hero-scene .robot-lineup .blue{height:calc(var(--landmark-span) * 1.231471);top:calc(var(--foot-line) - var(--landmark-span) * 1.092314)}
  .hero-scene .robot-lineup .yellow-robot{height:calc(var(--landmark-span) * 1.053000);top:calc(var(--foot-line) - var(--landmark-span) * 0.943488)}
  .hero-scene .robot-lineup .purple{height:calc(var(--landmark-span) * 0.968858);top:calc(var(--foot-line) - var(--landmark-span) * 0.851627)}
  .hero-scene .robot-lineup .red{height:calc(var(--landmark-span) * 1.732852);top:calc(var(--foot-line) - var(--landmark-span) * 1.483321)}
}

@media(max-width:999px){
  /* Fit the original scenery to the screen width; extend only its sky above. */
  .hero{background:linear-gradient(90deg,rgb(52,51,122),rgb(1,61,148) 50%,rgb(2,45,114))}
  .hero-scene{width:100cqw}
  .hero-landscape{
    mask-image:linear-gradient(to bottom,transparent,#000 16%);
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%);
  }
  .hero-scene .robot-lineup{
    --shoreline:61%;
    --foot-line:84%;
    --landmark-span:23%;
  }
  .hero-note{bottom:38%;font-size:18px}
}
@media(max-width:999px){.hero-scene .robot-lineup .green{left:15.1%}}
@media(max-width:999px){.hero-scene .robot-lineup .blue{left:33.5%}}
@media(max-width:999px){.hero-scene .robot-lineup .yellow-robot{left:52.3%}}
@media(max-width:999px){.hero-scene .robot-lineup .purple{left:68.4%}}
@media(max-width:999px){.hero-scene .robot-lineup .red{left:85.8%}}
/* Use one compact, vertical navigation menu at every viewport width. */
.hero header .menu-toggle{
  display:block;
  margin-left:auto;
  order:3;
  background:transparent;
  border:1px solid #ffffff65;
  border-radius:8px;
  color:white;
  padding:10px 14px;
  font-size:14px;
  cursor:pointer;
}
.hero header nav{
  display:none;
  position:absolute;
  top:calc(100% - 4px);
  left:auto;
  right:0;
  width:min(240px,100%);
  margin:0;
  padding:8px;
  border:1px solid #ffffff25;
  border-radius:12px;
  background:#073b80;
  box-shadow:0 12px 30px #001c4940;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:0;
}
.hero header nav.is-open{display:flex}
.hero header nav a{
  display:block;
  padding:13px 16px;
  border:0;
  border-radius:7px;
  font-size:14px;
}
.hero header nav a:hover,.hero header nav a:focus-visible{background:#ffffff15}
/* Centre the logo within the header, independently of the menu button. */
.hero header .brand{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
@media(max-width:350px){
  .hero header .brand img{width:115px}
}
/* Right-aligned menu; logo remains independently centred. */
.hero header .menu-toggle{margin-left:auto;margin-right:0}
.hero header nav{left:auto;right:0}