/* Opening scene: the same blue light language as the closing section. */
.site-header{
  color:#f7f7f4;
  border-bottom-color:rgba(235,244,255,.24);
}
.site-header .brand{
  width:62px;
  height:62px;
  justify-content:center;
  background:transparent;
}
.site-header .brand img{filter:brightness(0) invert(1)}
.site-header .menu-button span{background:#f7f7f4}
.menu-open .site-header .menu-button span{background:var(--ink)}
.menu-open .site-header{color:var(--ink)}
.menu-open .site-header .brand img{filter:none}

.hero{
  isolation:isolate;
  color:#f7f7f4;
  background:var(--blue);
  min-height:680px;
  padding-top:132px;
}
.hero::before{
  z-index:0;
  background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(178,214,255,.1),transparent 30%);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent 0 110px,rgba(255,255,255,.035) 111px,transparent 112px);
  animation:blue-field 24s linear infinite;
}
.hero-eyebrow{
  position:relative;
  z-index:3;
  margin-top:2vh;
  font:500 clamp(17px,1.55vw,24px)/1.25 Manrope,Arial,sans-serif;
  letter-spacing:-.015em;
  text-transform:none;
  color:#f7f7f4;
}
.hero-stage{z-index:1;overflow:visible}
.hero-art{
  z-index:0;
  width:min(56vw,760px);
  right:1%;
  top:50%;
  opacity:.52;
  transform:translate(var(--shift-x),calc(-50% + var(--shift-y)));
}
.hero-title{
  z-index:2;
  width:100%;
  font-size:clamp(116px,17vw,250px);
  line-height:.97;
  letter-spacing:-.05em;
  color:#f7f7f4;
  text-shadow:none;
  transform:translate(var(--shift-x),var(--shift-y));
}
.hero-word{width:max-content;max-width:none;overflow:visible;animation:hero-rise 1.2s cubic-bezier(.18,.8,.18,1) both}
.hero-word:first-child{padding:0 .12em .07em 0}
.hero-word:first-child::after{display:none}
.hero-word-second{padding:0 .055em .06em 0;margin-top:-.055em;align-self:flex-end}
.hero-twenty{
  background:none;
  color:inherit;
  filter:none;
  animation:none;
}
@keyframes hero-rise{from{opacity:0;transform:translateY(.15em)}to{opacity:1;transform:translateY(0)}}
.hero-sweep{display:none}
.hero-lower{z-index:3;align-items:end}
.hero-caption{margin-left:0;max-width:650px}
.hero-caption p{color:#e7efff;font-size:clamp(20px,2.1vw,28px);line-height:1.4;letter-spacing:-.02em}
.circle-link{border-color:rgba(235,244,255,.75);color:#f7f7f4}
.circle-link:hover{background:#f7f7f4;color:var(--blue)}

.numbers{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:270px;
  align-items:stretch;
  padding-top:42px;
  padding-bottom:60px;
  background:var(--blue);
  border-top:1px solid rgba(221,237,255,.25);
}
.numbers::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent 0 110px,rgba(255,255,255,.035) 111px,transparent 112px);
  animation:blue-field 24s linear infinite;
}
.number{position:relative;justify-content:center;gap:16px;border-left-color:rgba(233,244,255,.27)}
.number strong{font-size:clamp(68px,7.5vw,124px);letter-spacing:-.065em;color:#f8fbff;transition:transform .5s ease}
.number:hover strong{transform:translateY(-7px)}
.number span{font-size:clamp(14px,1.12vw,17px);line-height:1.4;color:#dceaff}

@media(max-width:1050px){
  .hero-title{font-size:clamp(100px,17.5vw,185px)}
  .hero-art{width:70vw;right:-6%}
}
@media(max-width:700px){
  .site-header{padding:17px 20px}
  .site-header .brand{width:51px;height:51px}
  .site-header .brand img{width:43px;height:auto}
  .hero{height:100svh;min-height:640px;padding:108px 20px 25px}
  .hero-eyebrow{margin-top:2vh;font-size:clamp(16px,4.5vw,20px);max-width:80%}
  .hero-stage{align-items:center}
  .hero-title{font-size:min(24.5vw,112px);line-height:1;letter-spacing:-.045em;transform:none}
  .hero-word:first-child{padding-right:.13em}
  .hero-word-second{padding-right:.05em;margin-top:.015em}
  .hero-art{width:107vw;right:-52%;top:44%;opacity:.42;transform:translateY(-50%)}
  .hero-caption p{font-size:clamp(18px,4.8vw,22px);line-height:1.4}
  .circle-link{width:49px;height:49px}
  .numbers{min-height:0;padding:28px 20px 42px;gap:0 18px}
  .number{min-height:160px;padding:20px 0 16px 15px;gap:10px}
  .number:nth-child(odd){border-left:0;padding-left:0}
  .number:nth-child(-n+2){border-bottom:1px solid rgba(233,244,255,.27)}
  .number:nth-child(2){border-bottom:0}
  .number:nth-child(2)::after{content:"";position:absolute;bottom:0;left:22px;right:0;height:1px;background:rgba(233,244,255,.27)}
  .number strong{font-size:clamp(53px,13vw,76px)}
  .number span{font-size:14px}
}
@media(max-width:380px){
  .hero-title{font-size:24vw}
  .hero-caption p{font-size:18px}
  .number strong{font-size:51px}
}
@media(prefers-reduced-motion:reduce){
  .hero::after,.hero-word,.numbers::before,.numbers::after{animation:none!important}
  .hero-word{opacity:1;transform:none;filter:none}
}