/* home 1 and 2: the hero from a reference's terrace picture (from explore/hero-study-1), and the names under it. The stage under v6's hero text. Type, sizes, spacing and buttons are v6's (site.css and the change sheets); only the
   picture is new. Desktop: the picture full-bleed behind the words (v3's composition). Phone: v6's phone hero. */
.hs .hs-stage{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.hs .hs-stage canvas,.hs .hs-still{position:absolute;inset:0;width:100%;height:100%;display:block}
.hs .hs-still{object-fit:cover;object-position:100% 100%;opacity:0;transition:opacity .6s}
.hs .hs-stage.no-gl .hs-still{opacity:1}
.hs .hs-stage.no-gl canvas{display:none}

/* over the open sky the two grey lines (the label and the second line) go white, at v5's sizes and weights, so they read
   as well as the headline does (v5's grey was set for its dark ground) */
@media (min-width:761px){
  /* the hero is exactly the first screen: the picture's ground ends at its foot, where the names begin (v6's extra foot
     padding, kept there for a fade this picture does not have, is dropped) */
  .hs.hero{height:100svh;min-height:600px}
  .hs .hero-copy{padding-bottom:0;transform:translateY(calc(var(--hs-lift,0px) * -1))}
  .hs .hero-copy .eyebrow{color:rgba(255,255,255,.9)}
  .hs .hero-copy .hero-sub{color:rgba(255,255,255,.88)}
}

/* under the ground: a quiet line, then the names, large, one wordmark treatment, drifting slowly sideways. The line sits
   midway: the gap from the platform's foot to it equals the gap from it to the names (measured on the letters, --g) */
.hs-nb.nb{--g:34.5px;margin-top:0;padding:var(--g) 0 clamp(56px,6vw,88px)}
.hs-nb-cap{margin:0;text-align:center;font:400 var(--s-small)/1 var(--f);letter-spacing:0;color:var(--fg2)}   /* v6's small text, its grey */
.hs-marq-wrap{margin-top:calc(var(--g) - 2.5px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.hs-marq{display:flex;width:max-content;animation:hsMarq 72s linear infinite}
.hs-marq-wrap:hover .hs-marq{animation-play-state:paused}
.hs-marq-row{display:flex;list-style:none;margin:0;padding:0}
.hs-marq-row li{display:block;padding:0 clamp(26px,3vw,48px);white-space:nowrap;
  font:650 clamp(24px,2.3vw,34px)/1 var(--f);letter-spacing:-.035em;color:rgba(255,255,255,.84)}
@keyframes hsMarq{to{transform:translateX(-50%)}}
@media (max-width:760px){.hs-nb.nb{--g:30.4px}.hs-marq-wrap{margin-top:calc(var(--g) - 1.4px)}.hs-marq{animation-duration:56s}.hs-marq-row li{font-size:22px;padding:0 22px}}
@media (prefers-reduced-motion:reduce){
  .hs-marq{animation:none;width:auto;justify-content:center}.hs-marq-row{flex-wrap:wrap;justify-content:center;row-gap:14px}
  .hs-marq-row[aria-hidden]{display:none}.hs-marq-wrap{-webkit-mask-image:none;mask-image:none}
}

/* the line under the headline in semibold (client, 17 Oct: "make it bold"); its size stays v6's. v6's heading weights are
   lighter (440 to 500 after its heading sheet), so Mona Sans' semibold, 600, is used for a weight that reads as bold */
.hs .hero-copy .hero-line{font-weight:600;letter-spacing:-.012em}

/* phone: v6's phone hero (the picture above, the words under it on the dark ground); its foot fades into the page as v5's did */
@media (max-width:760px){
  .hs .hs-stage{position:relative;inset:auto;width:auto;height:60svh;min-height:360px;margin:60px -1px 0;order:-1}
  .hs .hero-copy{margin-top:-20px}   /* the label stays on the stone's face, below the platform's front edge */
  .hs .hs-stage::after{content:'';position:absolute;z-index:1;left:0;right:0;bottom:0;height:12%;background:linear-gradient(to top,var(--bg),rgba(10,10,10,0));pointer-events:none}
}