/* ================= Why work together ================= */
[id="custom-edge"].aw-why {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0;
  overflow: clip;
  background: #fff;
  color: var(--aw-ink);
  font-family: var(--aw-font);
}
[id="custom-edge"].aw-why :is(h2, h3, p, a, span, figure) { font-family: var(--aw-font); margin: 0; }

/* the headline: white columns rise over the blue section, the title turning ink where they pass */
[id="custom-edge"] .aw-why__wipe { position: relative; height: 230vh; }
[id="custom-edge"] .aw-why__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--aw-indigo);
}
[id="custom-edge"] .aw-why__light,
[id="custom-edge"] .aw-why__ink {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 24px;
  text-align: center;
}
[id="custom-edge"] .aw-why__light { z-index: 1; color: #fff; }
[id="custom-edge"] .aw-why__light .aw-why__accent { color: var(--aw-orange); }
[id="custom-edge"] .aw-why__bars {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
[id="custom-edge"] .aw-why__bars span {
  display: block;
  margin: 0 -0.5px;
  background: #fff;
  transform: scaleY(var(--h, 1));
  transform-origin: 50% 100%;
}
[id="custom-edge"] .aw-why__bars span:nth-child(1) { --h: var(--h0, 1); }
[id="custom-edge"] .aw-why__bars span:nth-child(2) { --h: var(--h1, 1); }
[id="custom-edge"] .aw-why__bars span:nth-child(3) { --h: var(--h2, 1); }
[id="custom-edge"] .aw-why__bars span:nth-child(4) { --h: var(--h3, 1); }
[id="custom-edge"] .aw-why__bars span:nth-child(5) { --h: var(--h4, 1); }
[id="custom-edge"] .aw-why__ink {
  z-index: 3;
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0% 100%, 25% 100%, 50% 100%, 75% 100%, 100% 100%;
  mask-position: 0% 100%, 25% 100%, 50% 100%, 75% 100%, 100% 100%;
  -webkit-mask-size: 20.2% calc(var(--h0, 1) * 100%), 20.2% calc(var(--h1, 1) * 100%), 20.2% calc(var(--h2, 1) * 100%), 20.2% calc(var(--h3, 1) * 100%), 20.2% calc(var(--h4, 1) * 100%);
  mask-size: 20.2% calc(var(--h0, 1) * 100%), 20.2% calc(var(--h1, 1) * 100%), 20.2% calc(var(--h2, 1) * 100%), 20.2% calc(var(--h3, 1) * 100%), 20.2% calc(var(--h4, 1) * 100%);
}
[id="custom-edge"] .aw-why__title {
  font-size: min(150px, 10.4vw);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--aw-ink);
  transform: translate3d(0, var(--why-y, 0px), 0) scale(var(--why-s, 1));
}
[id="custom-edge"] .aw-why__light .aw-why__title { color: #fff; }
[id="custom-edge"] .aw-why__line { display: block; }
[id="custom-edge"] .aw-why__accent { display: block; color: var(--aw-orange); }

/* the three reasons, one at a time over a big number */
[id="custom-edge"] .aw-why__steps { position: relative; }
[id="custom-edge"] .aw-why__numbers {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh;
  display: grid;
  place-items: center;
  pointer-events: none;
}
[id="custom-edge"] .aw-why__numbers span {
  grid-area: 1 / 1;
  font-size: min(78vh, 46vw);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: #eceef7;
  opacity: 0;
  transform: translate3d(0, 6%, 0) scale(0.96);
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
[id="custom-edge"] .aw-why__numbers[data-on="0"] span:nth-child(1),
[id="custom-edge"] .aw-why__numbers[data-on="1"] span:nth-child(2),
[id="custom-edge"] .aw-why__numbers[data-on="2"] span:nth-child(3) { opacity: 1; transform: none; }

[id="custom-edge"] .aw-why__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 92vh;
  padding: 14vh 24px 6vh;
  text-align: center;
}
[id="custom-edge"] .aw-why__head {
  position: relative;
  display: inline-block;
  max-width: min(1180px, 92vw);
  padding-bottom: 26px;
  opacity: var(--t, 1);
  transform: translate3d(0, calc((1 - var(--t, 1)) * 70px), 0);
}
[id="custom-edge"] .aw-why__head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(var(--rule-w, 100%) + 32px);
  margin-left: calc((var(--rule-w, 100%) + 32px) / -2);
  height: 2px;
  background: var(--aw-orange);
  transform: scaleX(var(--t, 1));
  transform-origin: center;
}
[id="custom-edge"] .aw-why__word {
  font-size: min(112px, 7.8vw);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--aw-ink);
}
[id="custom-edge"] .aw-why__text {
  max-width: 36ch;
  margin-top: 44px;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(18, 17, 51, 0.72);
  opacity: var(--t, 1);
  transform: translate3d(0, calc((1 - var(--t, 1)) * 40px), 0);
}

[id="custom-edge"] .aw-why__hl {
  font-weight: 700;
  color: var(--aw-ink);
  background: linear-gradient(transparent 60%, rgba(242, 104, 40, 0.3) 60%, rgba(242, 104, 40, 0.3) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.08em;
}

/* the close: a picture, Alex's words and the way to start, over a slow running line */
[id="custom-edge"] .aw-why__close {
  position: relative;
  padding: 16vh 24px 140px;
}
[id="custom-edge"] .aw-why__marquee {
  position: absolute;
  inset: 50% 0 auto 0;
  transform: translateY(-50%);
  overflow: hidden;
  pointer-events: none;
}
[id="custom-edge"] .aw-why__run {
  display: flex;
  width: max-content;
  animation: aw-why-run 48s linear infinite;
}
[id="custom-edge"] .aw-why__run span {
  font-size: min(300px, 22vw);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #eceef7;
}
@keyframes aw-why-run { to { transform: translate3d(-50%, 0, 0); } }

[id="custom-edge"] .aw-why__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 520px);
  justify-content: center;
  align-items: center;
  gap: clamp(40px, 7vw, 110px);
}
[id="custom-edge"] .aw-why__picture {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 6px;
  background: #e8e9f2;
}
[id="custom-edge"] .aw-why__picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
[id="custom-edge"] .aw-why__copy {
  padding-left: 28px;
  border-left: 2px solid var(--aw-orange);
}
[id="custom-edge"] .aw-why__mark { display: block; width: 44px; height: 37px; margin-bottom: 26px; fill: var(--aw-orange); }
[id="custom-edge"] .aw-why__quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: min(36px, 2.6vw);
  font-style: normal;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--aw-ink);
}
[id="custom-edge"] .aw-why__by {
  margin-top: 26px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aw-orange);
}
[id="custom-edge"] .aw-why__by::before { content: "— "; }
[id="custom-edge"] .aw-why__lead {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--aw-ink);
}
[id="custom-edge"].aw-why a.aw-why__cta {
  display: inline-flex;
  align-items: center;
  height: 50px;
  margin-top: 34px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--aw-orange);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease;
}
[id="custom-edge"].aw-why a.aw-why__cta:hover { background: var(--aw-orange-deep); transform: translateY(-1px); }

@media (max-width: 760px) {
  [id="custom-edge"] .aw-why__wipe { height: 150vh; }
  [id="custom-edge"] .aw-why__pin { height: 75vh; }
  [id="custom-edge"] .aw-why__title { font-size: 16vw; }
  [id="custom-edge"] .aw-why__numbers span { font-size: 70vw; }
  [id="custom-edge"] .aw-why__step { min-height: 80vh; padding: 14vh 20px 4vh; }
  [id="custom-edge"] .aw-why__word { font-size: 12.5vw; }
  [id="custom-edge"] .aw-why__text { font-size: 19px; margin-top: 32px; }
  [id="custom-edge"] .aw-why__close { padding: 10vh 20px 96px; }
  [id="custom-edge"] .aw-why__marquee { inset: 24% 0 auto 0; }
  [id="custom-edge"] .aw-why__row { grid-template-columns: 1fr; gap: 36px; }
  [id="custom-edge"] .aw-why__picture { max-width: 420px; }
  [id="custom-edge"] .aw-why__lead { font-size: 19px; }
  [id="custom-edge"] .aw-why__quote { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  [id="custom-edge"] .aw-why__run { animation: none; }
  [id="custom-edge"] .aw-why__wipe { height: auto; }
  [id="custom-edge"] .aw-why__pin { position: relative; height: 70vh; }
  [id="custom-edge"] .aw-why__numbers span { transition: none; }
}

/* the Edit button sees everything at rest */
html.wz-editing [id="custom-edge"] :is(.aw-why__title, .aw-why__head, .aw-why__text) { opacity: 1 !important; transform: none !important; }
html.wz-editing [id="custom-edge"] .aw-why__light { display: none; }
html.wz-editing [id="custom-edge"] .aw-why__bars span { transform: none !important; }
html.wz-editing [id="custom-edge"] .aw-why__ink { -webkit-mask: none !important; mask: none !important; }
html.wz-editing [id="custom-edge"] .aw-why__wipe { height: auto; }
html.wz-editing [id="custom-edge"] .aw-why__pin { position: relative; height: 70vh; }
html.wz-editing [id="custom-edge"] .aw-why__head::after { transform: none !important; }