/* Section: hero */
/* ---------- HERO (Figma 468:2952) ---------- */
.hero{position:relative;height:max(calc(659 * var(--u)), calc(100svh - 401 * var(--u)), 560px)}
.head{position:absolute;left:50%;top:max(calc(222 * var(--u)), calc(150px * var(--f)));width:min(calc(913 * var(--u)), calc(100% - 32 * var(--p)));transform:translateX(-50%);text-align:center}
.h1{font-family:var(--xh);font-weight:var(--fw);font-size:var(--fs-display);line-height:1.1;letter-spacing:-.019em}
.h1 .l{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.h1 .l>span{display:block}
/* three line spans: two lines on desktop (the last two share a line), three on phones */
.h1 .l:nth-child(n+2){display:inline-block;vertical-align:top}
.ctas{display:flex;justify-content:center;flex-wrap:wrap;gap:max(calc(12px * var(--f)), calc(16 * var(--u)));margin-top:max(calc(36px * var(--f)), calc(52 * var(--u)))}
/* desktop: the copy sits in the middle between the nav and the card, the card only peeks at the bottom (~120 at 1920) */
@media (min-width:821px){
  .hero{height:max(560px, calc(100svh - 120 * var(--u)));display:flex;align-items:center;justify-content:center;padding-top:calc(120 * var(--u))}
  .head{position:relative;left:auto;top:auto;transform:none}
}
.desc{margin:max(calc(24px * var(--f)), calc(32 * var(--u))) auto 0;max-width:calc(707 * var(--u) + 2em);font-size:var(--fs-body-l);line-height:1.4;color:var(--ink)}



@media (max-width:820px){
  .hero{height:auto;padding:158px 16px 82px}
  .head{position:relative;left:auto;top:auto;transform:none;width:100%}
  .h1{font-size:min(var(--fs-display), 11vw);line-height:1.1;letter-spacing:-.031em;text-wrap:balance}
  /* three lines; "Human experience." is about 8.2em wide, so below ~430px the size follows the screen to keep it on one line */
  .h1 .l,.h1 .l:nth-child(n+2){display:block}
  .h1 .l>span{display:block}
  .desc{margin-top:32px;max-width:none;font-size:var(--fs-body-l);line-height:1.4}
  .ctas{margin-top:48px;gap:16px}
}