.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://autamedia.b-cdn.net/Website%20uploads/scotty-site/about-hero-1.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://autamedia.b-cdn.net/Website%20uploads/scotty-site/about-hero-2.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://autamedia.b-cdn.net/Website%20uploads/scotty-site/about-hero-3.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 }

.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://autamedia.b-cdn.net/Website%20uploads/scotty-site/about-reach.webp") }
.standard:nth-child(2) .standard__art { background-image: url("https://autamedia.b-cdn.net/Website%20uploads/scotty-site/about-judgment.webp") }
.standard:nth-child(3) .standard__art { background-image: url("https://autamedia.b-cdn.net/Website%20uploads/scotty-site/about-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://autamedia.b-cdn.net/Website%20uploads/scotty-site/about-network.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(14, 16, 15, .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 }
  .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 }
  .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% }
}