.about-hero {
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  position: relative;
}
.about-hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-bottom: clamp(52px, 7vh, 80px);
  padding-top: clamp(128px, 16vh, 172px);
  position: relative;
}
.about-hero h1 {
  font-size: clamp(80px, 15vw, 200px);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .86;
  margin-top: 28px;
  position: relative;
  z-index: 2;
}
.about-hero h1 span { display: block; width: fit-content }
.about-hero h1[data-reveal] { transition-delay: .08s }
.about-hero__cluster {
  height: clamp(280px, 34vw, 460px);
  position: absolute;
  right: var(--gutter);
  top: 13%;
  width: clamp(240px, 30vw, 410px);
  z-index: 1;
}
.about-hero__cluster[data-reveal] { transition-delay: .16s }
.about-hero__tile { background-position: center; background-size: cover; border-radius: var(--radius); display: block; position: absolute }
.about-hero__tile:nth-child(1) { background-image: url("https://ripplestrategies.b-cdn.net/northline/about-tile1.webp"); height: 58%; right: 0; top: 0; transform: rotate(2deg); width: 62%; z-index: 3 }
.about-hero__tile:nth-child(2) { background-image: url("https://ripplestrategies.b-cdn.net/northline/about-tile2.webp"); height: 44%; left: 0; top: 33%; transform: rotate(-3deg); width: 52%; z-index: 2 }
.about-hero__tile:nth-child(3) { background-image: url("https://ripplestrategies.b-cdn.net/northline/about-tile3.webp"); bottom: 0; height: 44%; right: 7%; transform: rotate(1deg); width: 58% }
.about-hero__foot {
  align-items: flex-end;
  display: flex;
  gap: 32px;
  justify-content: space-between;
  margin-top: clamp(48px, 7vh, 76px);
  position: relative;
  z-index: 3;
}
.about-hero__foot[data-reveal] { transition-delay: .24s }
.about-hero__foot p { font-size: 18px; max-width: 520px }

.story { padding-top: clamp(110px, 13vw, 160px) }
.story__grid { align-items: start; display: grid; gap: 28px 80px; grid-template-columns: 1.35fr 1fr }
.story__grid > .bracket { grid-column: 1 / -1 }
.story h2 {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.08;
}
.story__copy { color: var(--ash); display: grid; gap: 24px }

.team { padding-top: clamp(110px, 13vw, 160px) }
.team__head h2 {
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1;
  margin-top: 16px;
}
.team__lead { color: var(--ash); margin-top: 26px; max-width: 52ch }
.team__grid {
  display: grid;
  gap: clamp(24px, 2.4vw, 32px);
  grid-template-columns: repeat(5, 1fr);
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: clamp(30px, 4vw, 46px);
  position: relative;
}
/* The rule is absolutely positioned rather than a border on .wrap, so it stops at
   the gutter and lines up with the heading instead of bleeding past it. */
.team__grid::before {
  border-top: 1px solid var(--stone);
  content: "";
  inset: 0 var(--gutter) auto;
  position: absolute;
}
.member[data-reveal]:nth-child(2) { transition-delay: .06s }
.member[data-reveal]:nth-child(3) { transition-delay: .12s }
.member[data-reveal]:nth-child(4) { transition-delay: .18s }
.member[data-reveal]:nth-child(5) { transition-delay: .24s }
.member__card { display: block }
.member__frame {
  aspect-ratio: 4 / 5;
  /* Portraits are shot on white; the frame carries that white so the roster
     reads as one studio set against the dark page. */
  background: var(--cream);
  border-radius: var(--radius);
  display: block;
  overflow: hidden;
}
.member__photo { height: 100%; object-fit: cover; transition: transform .6s var(--ease); width: 100% }
.member__name { display: block; font-size: clamp(17px, 1.35vw, 20px); letter-spacing: -.02em; margin-top: 18px }
.member__role { color: var(--ash); display: block; font-size: 13px; margin-top: 5px }
.member__phone {
  align-items: center;
  color: var(--scot-lift);
  display: flex;
  font-size: 14px;
  gap: 9px;
  margin-top: 14px;
}
.member__arrow {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: inline-flex;
  flex: none;
  font-size: 10px;
  height: 19px;
  justify-content: center;
  transition: transform .3s var(--ease);
  width: 19px;
}

.standards { padding-top: clamp(130px, 14vw, 180px) }
.standards__head h2 {
  font-size: clamp(54px, 7vw, 89px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .98;
  margin-top: 16px;
}
.standards__list { margin-top: clamp(56px, 7vw, 88px) }
.standard {
  align-items: center;
  border-top: 1px solid var(--stone);
  display: grid;
  gap: 28px;
  grid-template-columns: 64px 1fr clamp(120px, 18vw, 220px);
  min-height: 220px;
  padding-block: 24px;
}
.standard:last-child { border-bottom: 1px solid var(--stone) }
.standard__number { color: var(--ash); font-size: 14px }
.standard h3 { font-size: clamp(34px, 4vw, 52px); font-weight: 400; letter-spacing: -.03em; line-height: 1 }
.standard p { color: var(--ash); margin-top: 14px; max-width: 52ch }
.standard__art { aspect-ratio: 4 / 3; background-position: center; background-size: cover; border-radius: var(--radius); display: block; justify-self: end; width: 100% }
.standard:nth-child(1) .standard__art { background-image: url("https://ripplestrategies.b-cdn.net/northline/standard-inventory.webp") }
.standard:nth-child(2) .standard__art { background-image: url("https://ripplestrategies.b-cdn.net/northline/standard-judgment.webp") }
.standard:nth-child(3) .standard__art { background-image: url("https://ripplestrategies.b-cdn.net/northline/standard-clarity.webp") }

.network { padding-top: clamp(130px, 14vw, 190px) }
.network__grid { align-items: start; display: grid; gap: clamp(44px, 7vw, 90px); grid-template-columns: 1.05fr .95fr }
.network__visual { aspect-ratio: 4 / 5; background: url("https://ripplestrategies.b-cdn.net/northline/network-visual.webp") center / cover; border-radius: var(--radius); overflow: hidden; position: sticky; top: calc(var(--nav-h) + 24px) }
.network__visual::after {
  background: linear-gradient(to top, rgba(3, 7, 13, .42), transparent 45%);
  content: "";
  inset: 0;
  position: absolute;
}
.network__label { background: var(--cream); border-radius: var(--pill); bottom: 24px; color: var(--void); font-size: 13px; left: 24px; padding: 7px 14px; position: absolute; z-index: 2 }
.network__copy { padding-top: 6px }
.network__copy h2 {
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1;
  margin-top: 18px;
}
.network__copy > p:not(.bracket) { color: var(--ash); margin-top: 28px }
.network__copy ul { border-top: 1px solid var(--stone); margin-top: 44px }
.network__copy li { border-bottom: 1px solid var(--stone); display: flex; font-size: clamp(20px, 2vw, 28px); gap: 24px; padding: 15px 0 }
.network__copy li span { color: var(--ash); font-size: 12px; padding-top: .65em }

.about-close { padding: clamp(130px, 14vw, 190px) 0 }
.about-close__inner { align-items: flex-start; display: flex; flex-direction: column }
.about-close h2 {
  font-size: clamp(58px, 8vw, 108px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .94;
  margin: 24px 0 48px;
}

@media (max-width: 900px) {
  .story__grid { grid-template-columns: 1fr }
  .team__grid { grid-template-columns: repeat(3, 1fr) }
  .story__grid > .bracket { grid-column: auto }
  .network__grid { grid-template-columns: 1fr }
  .network__visual { position: relative; top: auto }
}

@media (max-width: 720px) {
  .about-hero__inner { justify-content: flex-start; padding-bottom: 52px; padding-top: calc(var(--nav-h) + 42px) }
  .about-hero h1 { font-size: clamp(62px, 19vw, 106px); line-height: .91; margin-top: 132px }
  .about-hero__cluster { height: clamp(210px, 58vw, 300px); opacity: .88; right: 14px; top: 20%; width: min(62%, 250px) }
  .about-hero__foot { align-items: flex-start; flex-direction: column; gap: 24px; margin-top: auto; padding-top: 42px }
  .about-hero__foot p { font-size: 16px }
  .story { padding-top: 96px }
  .story h2 { font-size: 30px }
  .team { padding-top: 96px }
  .team__head h2 { font-size: 40px }
  .team__grid { column-gap: 18px; grid-template-columns: repeat(2, 1fr); row-gap: 32px }
  .standards { padding-top: 110px }
  .standards__head h2 { font-size: 48px }
  .standard { align-items: start; grid-template-columns: 36px 1fr; padding-block: 28px }
  .standard__art { grid-column: 1 / -1; justify-self: stretch; margin-top: 10px }
  .standard h3 { font-size: 36px }
  .network { padding-top: 110px }
  .network__visual { aspect-ratio: 4 / 3 }
  .network__copy h2 { font-size: 44px }
  .about-close { padding-block: 120px }
  .about-close h2 { font-size: clamp(50px, 14vw, 72px); margin-bottom: 40px }
  .about-close .pill { width: 100% }
}

@media (hover: hover) and (pointer: fine) {
  .member__card:hover .member__photo { transform: scale(1.04) }
  .member__card:hover .member__arrow { transform: rotate(45deg) }
}