/* About page */

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 650px;
  padding: 100px clamp(22px, 7vw, 100px);
  color: var(--cream);
  background: linear-gradient(135deg, var(--teal), #c0609c 62%, var(--pink));
  background-size: 170% 170%;
  animation: gradient-drift 11s ease-in-out infinite alternate;
}

.page-hero > :not(.hero-shapes) {
  position: relative;
  z-index: 2;
}

.page-hero h1 {
  max-width: 1050px;
  color: var(--yellow);
  font-size: clamp(58px, 9vw, 128px);
  font-weight: 700;
}

.hero-about {
  color: var(--ink);
  background: linear-gradient(130deg, #fd718f, var(--orange), var(--yellow));
}

.hero-about .eyebrow {
  background: var(--cream);
  color: var(--pink);
}

.hero-subtitle {
  max-width: 900px;
  margin-top: 18px;
  color: var(--cream);
  font-size: clamp(30px, 4vw, 54px);
  font-weight: 700;
}

.page-hero .hero-copy {
  max-width: 610px;
  margin: 34px 0;
  font-size: 18px;
  line-height: 1.55;
}

.hero-cta {
  margin-top: 8px;
  padding: 20px 30px;
  font-size: 15px;
}

.content-flow {
  background: var(--white);
}

.content-section {
  display: grid;
  grid-template-columns: 80px 1fr 1.15fr;
  gap: 45px;
  padding: 80px clamp(22px, 7vw, 100px);
  border-top: 1px solid var(--line);
}

.content-section.tone-1 {
  background: linear-gradient(120deg, #fff19b80, #ff88391f);
}

.content-section.tone-2 {
  background: linear-gradient(120deg, #4fa3a32b, #ed3e961a);
}

.section-number {
  color: var(--pink);
  font: 700 13px var(--font-space-mono), monospace;
}

.section-heading h2 {
  font-size: clamp(35px, 4.5vw, 62px);
  font-weight: 700;
  overflow-wrap: break-word;
  hyphens: none;
}

.section-body {
  max-width: 690px;
}

.section-body p {
  font-size: 17px;
  line-height: 1.55;
}

.section-body > p + p,
.team-copy > p + p {
  margin-top: 18px;
}

.paragraph-lead {
  font-family: var(--font-space-mono), monospace;
  font-weight: 900;
}

.team-section {
  grid-template-columns: 80px minmax(220px, 0.55fr) minmax(0, 2fr);
}

.team-members {
  display: grid;
  gap: 54px;
}

.team-member {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.15fr);
  align-items: start;
  gap: clamp(28px, 4vw, 58px);
}

.team-photo {
  position: relative;
  padding: 12px 12px 46px;
  overflow: visible;
  background: var(--white);
  border: 1px solid var(--ink);
  box-shadow: 13px 15px 0 var(--pink);
  transform: rotate(-2deg);
  transition: transform 0.35s, box-shadow 0.35s;
}

.team-member:nth-child(2) .team-photo {
  box-shadow: 13px 15px 0 var(--teal);
  transform: rotate(2deg);
}

.team-photo::after {
  content: "KOKONUTS · TEAM";
  position: absolute;
  bottom: 14px;
  left: 18px;
  color: var(--ink);
  font: 700 11px/1 var(--font-space-mono), monospace;
  letter-spacing: 0.08em;
}

.team-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.team-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  border: 1px solid #063e4247;
  background: linear-gradient(135deg, #fff19b, #ff8839 55%, #4fa3a3);
  font: 700 14px var(--font-space-mono), monospace;
  text-align: center;
}

.team-member:nth-child(2) .team-photo-placeholder {
  background: linear-gradient(135deg, #4fa3a3, #ed3e96 55%, #fff19b);
}

.team-member:hover .team-photo {
  box-shadow: 17px 20px 0 var(--orange);
  transform: rotate(0) translateY(-5px);
}

.team-copy h3 {
  margin: 0 0 12px;
  color: var(--pink);
  font-size: clamp(25px, 2.4vw, 34px);
  font-weight: 700;
}

.team-copy p {
  font-size: 16px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .content-section,
  .team-section {
    grid-template-columns: 1fr;
  }

  .team-members {
    grid-column: 1;
  }
}

@media (max-width: 560px) {
  .page-hero {
    min-height: auto;
    padding: 70px 20px;
  }

  .page-hero h1 {
    font-size: clamp(43px, 13vw, 54px);
  }

  .content-section {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 62px 20px;
  }

  .section-heading h2 {
    font-size: 37px;
  }

  .section-body p,
  .section-body li {
    font-size: 16px;
  }

  .team-members {
    gap: 44px;
  }

  .team-member {
    grid-template-columns: 1fr;
  }

  .team-photo {
    padding: 8px 8px 38px;
    box-shadow: 8px 9px 0 var(--pink);
  }

  .team-member:nth-child(2) .team-photo {
    box-shadow: 8px 9px 0 var(--teal);
  }
}