/* Public component contract: background, explanatory and interactive story.
   Load before legacy styles so this important layer owns hero presentation. */
@layer sot-hero-components {
  .site-hero{
    --hero-inset:64px;--hero-block:80px;--hero-title-size:48px;
    --hero-ground:#07121d;
    --hero-scrim:linear-gradient(90deg,rgba(8,19,32,.96) 0%,rgba(8,19,32,.84) 24%,rgba(8,19,32,.52) 40%,rgba(8,19,32,.16) 53%,transparent 65%);
    isolation:isolate!important;box-sizing:border-box!important;
    color:#fff!important;background-color:var(--hero-ground)!important;
  }
  .site-hero__title{
    font-family:Archivo,sans-serif!important;font-size:var(--hero-title-size)!important;
    font-weight:900!important;line-height:1.08!important;letter-spacing:0!important;
    margin:18px 0 20px!important;max-width:640px!important;overflow-wrap:normal!important;
  }
  .site-hero__title span{font:inherit!important;line-height:inherit!important;letter-spacing:inherit!important}
  .site-hero__lead{font-size:18px!important;line-height:1.6!important;color:#d8e4eb!important;margin:0!important;max-width:640px!important}
  .site-hero__eyebrow{margin:0!important;letter-spacing:0!important}
  .site-hero__actions{margin-top:24px!important;display:flex!important;flex-wrap:wrap!important;gap:12px!important}
  .site-hero__inner{box-sizing:border-box!important;width:calc(100% - 2 * var(--hero-inset))!important;max-width:none!important;margin-inline:var(--hero-inset)!important}
  .site-hero__copy{min-width:0!important;transform:none!important}
  .site-hero--background{position:relative!important;display:block!important;inset:auto!important;height:auto!important;min-height:600px!important;max-height:none!important;padding:0!important;overflow:hidden!important}
  .site-hero--background .site-hero__inner{position:relative!important;z-index:2!important;display:block!important;padding:var(--hero-block) 0!important}
  .site-hero--background .site-hero__copy:not(.site-hero__inner){padding:0!important;margin:0!important;width:100%!important;max-width:760px!important}
  .site-hero--background .site-hero__media{position:absolute!important;inset:0!important;z-index:0!important;width:100%!important;height:100%!important;margin:0!important;transform:none!important;mask-image:none!important;-webkit-mask-image:none!important;object-fit:cover!important;object-position:center!important;filter:none!important}
  .site-hero--background .site-hero__media :is(video,img){width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;transform:none!important;filter:none!important}
  .site-hero--background::before{content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:1!important;background:var(--hero-scrim)!important;opacity:1!important;pointer-events:none!important}
  .site-hero--background::after{display:none!important}
  .site-hero__caption{z-index:3!important}
  .site-hero__scroll-hint{position:absolute!important;inset:auto auto 40px 50%!important;transform:translateX(-50%)!important;z-index:3!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:10px!important;width:max-content!important;margin:0!important;pointer-events:none!important}
  .site-hero--explanatory{position:relative!important;height:auto!important;min-height:600px!important;max-height:none!important;padding:0!important;overflow:hidden!important}
  .site-hero--explanatory::before,.site-hero--explanatory::after{display:none!important}
  .site-hero--explanatory .site-hero__inner{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:center!important;gap:48px!important;min-height:inherit!important;padding:64px 0!important}
  .site-hero--explanatory .site-hero__copy{position:relative!important;inset:auto!important;z-index:2!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important}
  .site-hero--explanatory .site-hero__media{position:relative!important;inset:auto!important;z-index:1!important;width:100%!important;max-width:100%!important;height:auto!important;aspect-ratio:16/9!important;margin:0!important;transform:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;mask-image:none!important;-webkit-mask-image:none!important}
  .site-hero--explanatory .site-hero__media::before,.site-hero--explanatory .site-hero__media::after{display:none!important}
  .site-hero--explanatory .site-hero__media video{display:block!important;width:100%!important;height:auto!important;aspect-ratio:16/9!important;object-fit:contain!important;filter:none!important}
  .site-hero__panel{min-width:0!important;max-width:100%!important}
  .site-gallery-section{padding:48px 0!important;background:#07121d!important;color:#fff!important}
  .site-gallery-section__inner{width:min(1180px,calc(100% - 40px))!important;margin-inline:auto!important}
  .site-gallery-section__title{margin:0 0 24px!important;font-family:Archivo,sans-serif!important;font-size:28px!important;line-height:1.2!important;letter-spacing:0!important;color:#fff!important}
  .site-gallery{position:relative!important;margin:0!important;width:100%!important;min-height:0!important;overflow:hidden!important;background:#07121d!important;border:0!important;border-radius:0!important;box-shadow:none!important}
  .site-gallery::before,.site-gallery::after{display:none!important}
  .site-gallery__stage{position:relative!important;aspect-ratio:16/9!important}
  .site-gallery__image{object-fit:contain!important;filter:none!important}
  .site-hero--story .site-hero__copy{max-width:640px!important}
  @media(min-width:761px){
    .site-hero-pin{position:sticky!important;top:var(--story-header-height,84px)!important}
  }
  @media(min-width:1200px){
    .site-hero--story{top:84px!important;height:calc(100svh - 84px)!important;min-height:600px!important}
    .site-hero--story .site-hero__copy{top:var(--hero-block)!important;left:var(--hero-inset)!important;transform:none!important}
  }
  @media(min-width:761px) and (max-width:1199px){.site-hero{--hero-inset:40px}}
  @media(max-width:760px){
    .site-gallery-section{padding:32px 0!important}
    .site-gallery-section__title{font-size:24px!important;margin-bottom:20px!important}
    .site-gallery__stage{aspect-ratio:4/3!important}
    .site-hero__scroll-hint{display:none!important}
    .site-hero{--hero-inset:20px;--hero-block:48px;--hero-title-size:32px;
      --hero-scrim:linear-gradient(90deg,rgba(8,19,32,.88),rgba(8,19,32,.34)),linear-gradient(180deg,rgba(8,19,32,.2),rgba(8,19,32,.78));}
    .site-hero__title{margin:16px 0 18px!important;max-width:100%!important}
    .site-hero__lead{font-size:16px!important;line-height:1.55!important}
    .site-hero--background{min-height:520px!important}
    .site-hero--background .site-hero__inner{padding:var(--hero-block) 0!important}
    .site-hero--background .site-hero__copy{max-width:none!important;transform:none!important}
    .site-hero--background .site-hero__copy:not(.site-hero__inner){margin:0!important}
    .site-hero__caption{position:relative!important;inset:auto!important;margin:0 20px 20px!important;text-align:left!important}
    .site-hero--explanatory{min-height:0!important}
    .site-hero--explanatory .site-hero__inner{grid-template-columns:minmax(0,1fr)!important;gap:28px!important;padding:var(--hero-block) 0!important}
    .site-hero--story .site-hero__copy{max-width:none!important}
  }
}