:root {
  --meet-night: #06080d;
  --meet-ink: #0d2d55;
  --meet-blue: #145da8;
  --meet-sky: #7ec7ff;
  --meet-paper: #e8edf2;
  --meet-ease: cubic-bezier(.22, 1, .36, 1);
}

.meet-page {
  background: var(--meet-paper);
  color: var(--meet-ink);
}

.meet-page main { overflow: clip; }

.meet-skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  transform: translateY(-150%);
}

.meet-skip-link:focus { transform: none; }

.meet-header {
  position: absolute;
  z-index: 20;
  top: 48px;
  left: clamp(20px, 5.8vw, 88px);
  right: clamp(20px, 5.8vw, 88px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(22px, 4vw, 72px);
  color: #fff;
  font-size: calc(clamp(.62rem, .64vw, .74rem) + 2px);
  font-weight: 400;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.meet-header__brand { justify-self: center; width: 124px; line-height: 0; }
.meet-header__brand img { display: block; width: 100%; filter: brightness(0) invert(1); }
.meet-header__nav,
.meet-header__utility { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 25px); }
.meet-header__nav { justify-self: start; }
.meet-header__utility { justify-self: end; }
.meet-header__nav a,
.meet-header__utility button {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  white-space: nowrap;
}
.meet-header__nav a::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: 7px;
  left: 0;
  height: 1px;
  background: currentColor;
  transition: right 180ms ease;
}
.meet-header__nav a:hover::after,
.meet-header__nav a:focus-visible::after,
.meet-header__nav a[aria-current="page"]::after { right: 0; }
.meet-header__utility button {
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-transform: uppercase;
  text-underline-offset: 3px;
}

.meet-header a:focus-visible,
.meet-header button:focus-visible,
.meet-hero__cta:focus-visible,
.meet-story a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 5px;
}

.meet-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 150px clamp(20px, 6vw, 96px) 58px;
  overflow: hidden;
  isolation: isolate;
  background: #050505;
  color: #fff;
}

.meet-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(0, 0, 0, .58);
  pointer-events: none;
}

.meet-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .5), transparent 25%, transparent 68%, rgba(0, 0, 0, .38)),
    linear-gradient(90deg, rgba(0, 0, 0, .3), transparent 28%, transparent 72%, rgba(0, 0, 0, .3));
  pointer-events: none;
}

.meet-hero__video {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.meet-hero__content {
  width: min(100%, 1420px);
  margin-top: 3vh;
  text-align: center;
}

.meet-hero__kicker {
  margin: 0 0 clamp(24px, 3vh, 38px);
  color: rgba(255, 255, 255, .66);
  font-size: clamp(.7rem, .75vw, .84rem);
  letter-spacing: .04em;
}

.meet-hero h1 {
  position: static;
  display: block;
  height: auto;
  margin: 0;
  color: #fff;
  font-size: clamp(3.1rem, 7.55vw, 8.9rem);
  font-weight: 300;
  line-height: .96;
  letter-spacing: -.065em;
  text-wrap: balance;
  text-shadow: 0 8px 38px rgba(0, 0, 0, .18);
}

.meet-hero__intro {
  max-width: 62ch;
  margin: clamp(28px, 4vh, 46px) auto 0;
  color: rgba(255, 255, 255, .72);
  font-size: clamp(.96rem, 1.25vw, 1.28rem);
  line-height: 1.5;
  letter-spacing: -.02em;
}

.meet-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 58px;
  margin-top: clamp(34px, 5vh, 58px);
  padding: 0 28px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: .84rem;
  font-weight: 400;
  transition: color 220ms ease, background-color 220ms ease, transform 220ms var(--meet-ease);
}
.meet-hero__cta:hover { color: #fff; background: var(--meet-blue); transform: translateY(-2px); }
.meet-hero__cta svg { width: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }

.meet-hero__note {
  position: absolute;
  bottom: 28px;
  left: clamp(20px, 5.8vw, 88px);
  margin: 0;
  color: rgba(255, 255, 255, .42);
  font-size: .68rem;
}

.meet-story {
  padding: clamp(90px, 11vw, 176px) clamp(20px, 7.5vw, 118px) clamp(102px, 12vw, 190px);
  background: var(--meet-paper);
}

.meet-story__heading,
.meet-story__layout,
.meet-values__intro,
.meet-values__grid { max-width: 1440px; margin-inline: auto; }
.meet-story__heading > p,
.meet-values__intro > p { margin: 0 0 20px; font-size: .76rem; letter-spacing: .02em; }
.meet-story__heading h2,
.meet-values__intro h2 {
  margin: 0;
  font-size: clamp(3rem, 6.2vw, 7.5rem);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.065em;
}

.meet-story__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr);
  align-items: end;
  gap: clamp(42px, 7vw, 120px);
  margin-top: clamp(66px, 9vw, 140px);
}

.meet-story__image {
  margin: 0;
  aspect-ratio: 1.35;
  overflow: hidden;
  border-radius: clamp(22px, 2.8vw, 46px);
  background: #d2d9e0;
}
.meet-story__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.meet-story__copy { padding-bottom: 2%; }
.meet-story__copy p { margin: 0; font-size: clamp(.92rem, 1vw, 1.08rem); line-height: 1.62; }
.meet-story__copy .meet-story__lead { margin-bottom: 28px; font-size: clamp(1.35rem, 2vw, 2.1rem); line-height: 1.25; letter-spacing: -.035em; }
.meet-story__copy a { display: inline-flex; gap: 22px; margin-top: 42px; padding-bottom: 8px; border-bottom: 1px solid currentColor; font-size: .78rem; font-weight: 400; }

.meet-values {
  padding: clamp(92px, 10vw, 160px) clamp(20px, 7.5vw, 118px) clamp(110px, 12vw, 190px);
  background: #092849;
  color: #fff;
}
.meet-values__intro > p { color: rgba(255, 255, 255, .55); }
.meet-values__grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(74px, 9vw, 132px); border-top: 1px solid rgba(255, 255, 255, .25); }
.meet-values__grid article { padding: 30px clamp(20px, 3vw, 46px) 0 0; }
.meet-values__grid article + article { padding-left: clamp(20px, 3vw, 46px); border-left: 1px solid rgba(255, 255, 255, .25); }
.meet-values__grid h3 { margin: 0 0 30px; font-size: clamp(1.25rem, 1.7vw, 1.9rem); font-weight: 400; letter-spacing: -.035em; }
.meet-values__grid p { max-width: 34ch; margin: 0; color: rgba(255, 255, 255, .68); font-size: .9rem; line-height: 1.6; }

.meet-faq {
  --faq-accent: var(--blue);
  padding: clamp(92px, 10vw, 158px) clamp(20px, 7.5vw, 118px) clamp(104px, 12vw, 184px);
  background: #fff;
  color: #111;
}

.meet-faq__title {
  margin: 0;
  font-size: clamp(3.25rem, 6vw, 7.2rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.065em;
  text-align: center;
}

.meet-faq__title span { color: var(--faq-accent); }

.meet-faq__list {
  width: min(100%, 1160px);
  margin: clamp(76px, 9vw, 138px) auto 0;
  border-bottom: 1px solid #dedede;
}

.faq-item { border-top: 1px solid #dedede; }

.faq-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: center;
  gap: 28px;
  min-height: clamp(92px, 9vw, 126px);
  padding: 22px 6px 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.08rem, 1.5vw, 1.52rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:focus-visible { outline: 2px solid var(--meet-blue); outline-offset: 5px; }

.faq-icon {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ededed;
  transition: background-color 380ms ease, transform 520ms var(--meet-ease);
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 1.5px;
  background: #222;
  transform: translate(-50%, -50%);
  transition: background-color 380ms ease, transform 520ms var(--meet-ease);
}

.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-icon { background: var(--faq-accent); transform: rotate(180deg); }
.faq-item[open] .faq-icon::before,
.faq-item[open] .faq-icon::after { background: #fff; }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0); }

.faq-answer {
  max-width: 79ch;
  padding: 0 72px clamp(38px, 4vw, 56px) 0;
  overflow: hidden;
  will-change: height, opacity, transform;
}

.faq-answer p {
  margin: 0;
  font-size: clamp(.98rem, 1.15vw, 1.18rem);
  line-height: 1.55;
  letter-spacing: -.018em;
}

.faq-answer p + p { margin-top: 24px; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--meet-ease), transform 800ms var(--meet-ease); }
.reveal.is-visible { opacity: 1; transform: none; }

.has-scroll-motion .reveal { transition: none; }

.has-scroll-motion .meet-hero__video,
.has-scroll-motion .meet-hero__content,
.has-scroll-motion .meet-story__image img,
.has-scroll-motion .meet-story__heading,
.has-scroll-motion .meet-values__intro,
.has-scroll-motion .meet-faq__title,
.has-scroll-motion .footer-brand img {
  will-change: transform, opacity;
}

.has-scroll-motion .meet-story__heading h2,
.has-scroll-motion .meet-values__intro h2,
.has-scroll-motion .meet-faq__title {
  will-change: transform, opacity, clip-path;
}

@media (max-width: 900px) {
  .meet-header { top: 20px; grid-template-columns: 1fr auto 1fr; gap: 14px; }
  .meet-header__nav { display: none; }
  .meet-header__utility button:nth-child(-n + 2) { display: none; }
  .meet-header__brand { grid-column: 2; width: 124px; }
  .meet-header__utility { grid-column: 3; }
  .meet-hero { padding-top: 120px; }
  .meet-story__layout { grid-template-columns: 1fr; }
  .meet-story__copy { max-width: 580px; }
  .meet-values__grid { grid-template-columns: 1fr; }
  .meet-values__grid article { padding: 28px 0 34px; }
  .meet-values__grid article + article { padding-left: 0; border-top: 1px solid rgba(255, 255, 255, .25); border-left: 0; }
}

@media (max-width: 600px) {
  .meet-hero { min-height: 760px; padding-inline: 20px; }
  .meet-hero h1 { font-size: clamp(3rem, 14.5vw, 4.5rem); }
  .meet-hero h1 br { display: none; }
  .meet-hero__intro { max-width: 33ch; }
  .meet-hero__note { display: none; }
  .meet-story__heading h2 br,
  .meet-values__intro h2 br { display: none; }
  .meet-story__image { aspect-ratio: .95; }
  .meet-faq__title { text-align: left; }
  .meet-faq__list { margin-top: 58px; }
  .faq-item summary { grid-template-columns: minmax(0, 1fr) 32px; gap: 18px; min-height: 92px; padding-block: 20px; }
  .faq-icon { width: 32px; height: 32px; }
  .faq-answer { padding-right: 8px; }
}

@media (max-height: 520px) and (min-width: 601px) {
  .meet-header { top: 14px; }
  .meet-hero { min-height: 100svh; padding: 82px 40px 22px; }
  .meet-hero__content { margin-top: 0; }
  .meet-hero__kicker { margin-bottom: 10px; }
  .meet-hero h1 { font-size: clamp(2.75rem, 6.6vw, 3.55rem); line-height: .96; }
  .meet-hero__intro { max-width: 68ch; margin-top: 14px; font-size: .82rem; line-height: 1.35; }
  .meet-hero__cta { min-height: 46px; margin-top: 16px; padding-inline: 24px; }
  .meet-hero__note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .meet-hero__cta,
  .reveal { transition: none; }
  .reveal { opacity: 1; transform: none; }
  .faq-icon { transition: none; }
}
