/* Full-frame visual storytelling. Copy stays HTML; artwork has no labels. */
.hp-hero.hp-hero-immersive{max-width:1800px;padding:0;position:relative;margin:auto;background:#e9eeeb}
.hp-scene{position:relative;isolation:isolate;height:clamp(520px,46vw,700px);overflow:hidden;background:#dce5de}
.hp-scene-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.hp-scene-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(14,39,34,.57),rgba(14,39,34,.08) 42%,transparent 65%),linear-gradient(0deg,rgba(16,35,31,.36),transparent 50%)}
.hp-scene-copy{position:absolute;z-index:2;left:max(40px,calc((100% - 1160px)/2));bottom:48px;color:white;max-width:520px}
.hp-scene-copy h2{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-size:clamp(32px,3.1vw,48px);line-height:1.5;letter-spacing:.035em;font-weight:700;margin:0 0 22px;text-shadow:0 2px 20px #1230264d}
.hp-main .hp-scene-cta{background:#fff;color:#2a5047!important;border:1px solid #ffffffa8;box-shadow:0 4px 20px #102a2514;min-width:220px;justify-content:space-between}
.hp-main .hp-scene-cta:hover{background:#eaf2ee;transform:translateY(-2px)}
.hp-scene-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;min-height:66px;padding:8px max(40px,calc((100% - 1160px)/2));border-bottom:1px solid #eef1ef}
.hp-scene-label{font-size:12px;letter-spacing:.07em;font-weight:500;color:#637b72}
.hp-hero-immersive .hp-dots button{min-width:28px}
.hp-hero-immersive .hp-slider-controls>span{white-space:nowrap}
.hp-main .hp-notice-link{display:inline-block;padding-block:12px;text-decoration:underline;text-underline-offset:4px;color:#536c64}
@media(min-width:1500px){.hp-scene-copy{left:7%}.hp-scene-controls{padding-inline:7%}}
@media(max-width:1000px) and (min-width:701px){.hp-scene{height:560px}.hp-scene-copy{left:32px;bottom:34px}.hp-scene-copy h2{font-size:34px}.hp-scene-shade{background:linear-gradient(0deg,rgba(14,39,34,.65),rgba(14,39,34,.06) 55%,transparent 75%)}.hp-scene-image{object-position:50% 10%}}
@media(max-width:700px){.hp-scene{height:min(110vw,540px);min-height:370px}.hp-scene-image{object-position:50% 20%}.hp-scene[data-scene="search"] .hp-scene-image{object-position:52% 20%}.hp-scene[data-scene="uniforms"] .hp-scene-image{object-position:52% 20%}.hp-scene-shade{background:linear-gradient(0deg,rgba(13,35,29,.79),rgba(13,35,29,.39) 28%,rgba(13,35,29,0) 63%)}.hp-scene-copy{left:22px;right:20px;bottom:22px;max-width:none}.hp-scene-copy h2{font-size:28px;line-height:1.4;margin-bottom:14px;letter-spacing:.01em;text-shadow:0 2px 16px #17372d40}.hp-main .hp-scene-cta{min-height:43px;min-width:205px;width:fit-content;padding:10px 16px;font-size:12px;border-radius:5px}.hp-scene-cta .icon{width:18px;height:18px}.hp-scene-controls{padding:6px 18px;min-height:58px;gap:5px}.hp-scene-label{font-size:10px;letter-spacing:0;max-width:90px}.hp-hero-immersive .hp-slider-controls{gap:3px}.hp-hero-immersive .hp-slider-controls>span{font-size:10px;margin-right:7px}.hp-hero-immersive .hp-dots{gap:0}.hp-hero-immersive .hp-dots button{min-width:21px}.hp-hero-immersive .hp-dots button[aria-pressed=true]:after{width:17px}.hp-hero-immersive .hp-slider-controls>button{min-width:29px}.hp-main .hp-notice-link{font-size:11px;line-height:1.9}}
@media(max-width:374px){.hp-scene-copy h2{font-size:26px}.hp-scene-copy{left:18px;right:16px;bottom:18px}.hp-scene-controls{padding-inline:12px}.hp-scene-label{font-size:9px}.hp-hero-immersive .hp-slider-controls>span{margin-right:2px}.hp-hero-immersive .hp-dots button{min-width:19px}}
@media(prefers-reduced-motion:reduce){.hp-scene{animation:none!important}}
/* Keep the complete 4:3 scenes prominent on wide screens: faces, hands and
   activity context remain visible instead of being enlarged into a thin crop. */
@media(min-width:1001px){
 .hp-hero.hp-hero-immersive{max-width:1600px}
 .hp-scene{height:clamp(520px,50vw,740px);background:var(--scene-tone,#4a5559)}
 .hp-scene[data-scene="arrival"]{--scene-tone:#45575c}
 .hp-scene[data-scene="clubs"]{--scene-tone:#535c50}
 .hp-scene[data-scene="search"]{--scene-tone:#59535c}
 .hp-scene[data-scene="uniforms"]{--scene-tone:#5a605a}
 .hp-scene[data-scene="study"]{--scene-tone:#333c54}
 .hp-scene-image{left:auto;width:70%;object-position:50% 40%}
 .hp-scene-shade{background:linear-gradient(90deg,var(--scene-tone) 30%,transparent 41%)}
 .hp-scene-copy{left:7%;bottom:17%;max-width:370px}
 .hp-scene-copy h2{font-size:clamp(30px,2.9vw,42px)}
}



/* The logo sits above the slide so its exit can continue as the image changes. */
.hp-hero-immersive .hp-hero-brand {
  --hero-brand-offset: -50%;
  position: absolute;
  z-index: 3;
  top: clamp(10px, 2.8vw, 20px);
  left: 50%;
  width: min(92%, 460px);
  height: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(var(--hero-brand-offset), -7px) scale(.985);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(.2,.65,.35,1),
              visibility 0s linear 420ms;
}

.hp-hero-immersive[data-hero-scene="arrival"] .hp-hero-brand {
  opacity: 1;
  visibility: visible;
  transform: translate(var(--hero-brand-offset), 0) scale(1);
  transition: opacity 540ms ease, transform 540ms cubic-bezier(.2,.65,.35,1),
              visibility 0s;
}

@media (min-width: 1001px) {
  .hp-hero-immersive .hp-hero-brand {
    --hero-brand-offset: 0%;
    top: clamp(58px, 8vw, 120px);
    left: 7%;
    width: min(31%, 455px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-hero-immersive .hp-hero-brand,
  .hp-hero-immersive[data-hero-scene="arrival"] .hp-hero-brand {
    transition: none;
    transform: translateX(var(--hero-brand-offset));
  }
}