.about-section {
  padding-top: var(--Scale-1000);
  padding-bottom: var(--Scale-1000);
  scroll-margin-top: var(--Scale-1200);
}

.about-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--Lime-500);
  padding-top: var(--Scale-1000);
  min-width: 0;
  max-width: 100%;
  --about-gap-bio-testimonials: var(--Scale-1700);
  --about-gap-testimonials-banners: var(--Scale-1700);
}

.about-lede {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--Font-Body-About-lede-text-size);
  line-height: var(--Font-Body-About-lede-line-height);
  font-weight: var(--font-weight-regular);
  color: var(--Foundation-Black);
  letter-spacing: -0.02em;
}

.about-bio {
  display: flex;
  flex-direction: column;
  gap: var(--Scale-1000);
}

.about-bio-row {
  display: flex;
  flex-direction: column;
  gap: var(--Scale-1000);
}

.about-photo-frame {
  width: min(100%, 400px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  margin-inline: auto;
}

.about-photo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.about-bio-content {
  display: flex;
  flex-direction: column;
  gap: var(--Scale-1000);
}

.about-bio-body {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--Font-Body-Large-text-size);
  line-height: var(--Scale-700);
  font-weight: var(--font-weight-regular);
  color: var(--Foundation-Black);
  letter-spacing: -0.02em;
}

.about-pill-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Scale-400);
}

.about-pill-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--Scale-300) var(--Scale-400);
  text-decoration: none;
}

.about-testimonials-wrap {
  position: relative;
  margin-top: var(--about-gap-bio-testimonials);
  min-width: 0;
  max-width: 100%;
}

.about-testimonials {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: var(--Scale-1000);
  overflow-x: clip;
  min-width: 0;
  max-width: 100%;
}

.about-endorsements-quote-decor {
  position: absolute;
  top: -51px;
  left: -56px;
  z-index: 0;
  width: auto;
  height: 132px;
  pointer-events: none;
  user-select: none;
}

.about-endorsement-card {
  position: relative;
  z-index: 1;
  height: 100%;
  min-width: 0;
  border-top: 1px solid var(--Lime-500);
  padding-top: var(--Scale-1000);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.about-endorsement-quote,
.about-endorsement-name,
.about-endorsement-role {
  margin: 0;
}

.about-endorsement-quote {
  color: var(--Foundation-Black);
  font-family: var(--font-family-primary);
  font-size: var(--Font-Body-Endorsement-text-size);
  line-height: var(--Font-Body-Endorsement-line-height);
  font-weight: var(--font-weight-regular);
}

.about-endorsement-meta {
  display: flex;
  flex-direction: column;
  gap: var(--Scale-100);
  margin-top: auto;
  padding-top: var(--Scale-1000);
}

.about-endorsement-logo {
  display: block;
  flex-shrink: 0;
  width: var(--Scale-600);
  height: var(--Scale-600);
  object-fit: contain;
  margin-bottom: var(--Scale-100);
}

.about-endorsement-name {
  color: var(--Foundation-Black);
  font-family: var(--font-family-primary);
  font-size: var(--Font-Body-Paragraph-text-size);
  line-height: var(--Font-Body-Paragraph-line-height);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}

.about-endorsement-role {
  color: var(--Foundation-Black);
  font-family: var(--font-family-primary);
  font-size: var(--Font-Body-Paragraph-text-size);
  line-height: var(--Font-Body-Paragraph-line-height);
  font-weight: var(--font-weight-regular);
}

.about-client-logos {
  display: flex;
  flex-direction: column;
  gap: var(--Scale-1000);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  /* Sum of row-1 optical logo widths (lumosity + apple + post-pilot + playboy) */
  --about-logo-row1-width: 521px;
}

.about-client-logo-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--Scale-400);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Fixed-height cell; each logo gets its own optical width/height inside */
.about-client-logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: var(--Scale-1200);
}

.about-client-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.about-client-logo-link:focus-visible {
  outline: 2px solid var(--Foundation-Black);
  outline-offset: 2px;
}

.about-client-logo {
  display: block;
  object-fit: contain;
  object-position: center;
  transform: translate(var(--logo-offset-x, 0), var(--logo-offset-y, 0));
}

/*
 * Per-logo optical sizes from Figma logo-row (node 391:18025).
 * --logo-offset-x/y: nudge individual marks for visual balance in the 56px row.
 */
.about-client-logo--lumosity {
  width: 135px;
  height: 26px;
  --logo-offset-y: 2px;
}

.about-client-logo--taschen {
  width: 98px;
  height: 18px;
  --logo-offset-y: 1px;
}

.about-client-logo--apple {
  width: 105px;
  height: 32px;
  --logo-offset-y: -2px;
}

.about-client-logo--originate {
  width: 114px;
  height: 28px;
  --logo-offset-x: 4px;
  --logo-offset-y: 2px;
}

.about-client-logo--post-pilot {
  width: 141px;
  height: 18px;
  --logo-offset-y: 1px;
}

.about-client-logo--beats {
  width: 189px;
  height: 23px;
  --logo-offset-y: 2px;
}

.about-client-logo--playboy {
  width: 140px;
  height: 28px;
  --logo-offset-y: -2px;
}

.about-banners {
  margin-top: var(--about-gap-testimonials-banners);
  display: flex;
  flex-direction: column;
  gap: var(--Scale-1500);
  min-width: 0;
  max-width: 100%;
}

.about-marquees {
  display: flex;
  flex-direction: column;
  gap: var(--Scale-1500);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  --about-marquee-item-gap: clamp(
    var(--Scale-1000),
    12vw,
    calc(var(--Scale-1000) * 5)
  );
  --about-marquee-icon-size: var(--Scale-800);
}

.about-marquee {
  display: flex;
  width: max-content;
}

.about-marquee-period {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: var(--about-marquee-item-gap);
}

.about-marquee-track {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: max-content;
  justify-content: flex-start;
  gap: var(--about-marquee-item-gap);
}

.about-marquee-item {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--Font-Body-Marquee-text-size);
  line-height: var(--Font-Body-Marquee-line-height);
  letter-spacing: 0;
  color: var(--Foundation-Black);
  white-space: nowrap;
}

.about-marquee-divider {
  display: block;
  flex-shrink: 0;
  width: var(--about-marquee-icon-size);
  height: var(--about-marquee-icon-size);
}

.about-marquee-icon {
  display: block;
  width: 100%;
  height: 100%;
}

/* Two-row centered layout (641px+); vertical stack at max-width 640px */
@media (min-width: 641px) {
  .about-client-logo-row {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    gap: clamp(
      var(--Scale-400),
      calc((100% - var(--about-logo-row1-width)) / 3),
      calc(var(--Scale-1000) * 6)
    );
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 810px) {
  .about-container {
    --about-gap-bio-testimonials: calc(var(--Scale-1500) * 2.1);
    --about-gap-testimonials-banners: var(--Scale-1500);
  }

  .about-pill-links {
    flex-direction: column;
    width: 100%;
    flex-wrap: nowrap;
  }

  .about-pill-link {
    width: 100%;
  }

  .about-marquees {
    --about-marquee-icon-size: var(--Scale-600);
  }
}

@media (max-width: 640px) {
  /* Single centered column; rows flatten via display: contents */
  .about-client-logos {
    align-items: center;
    gap: var(--Scale-1100);
  }

  .about-client-logo-row {
    display: contents;
  }

  .about-client-logo-cell:has(.about-client-logo--lumosity) { order: 1; }
  .about-client-logo-cell:has(.about-client-logo--taschen) { order: 2; }
  .about-client-logo-cell:has(.about-client-logo--apple) { order: 3; }
  .about-client-logo-cell:has(.about-client-logo--originate) { order: 4; }
  .about-client-logo-cell:has(.about-client-logo--post-pilot) { order: 5; }
  .about-client-logo-cell:has(.about-client-logo--beats) { order: 6; }
  .about-client-logo-cell:has(.about-client-logo--playboy) { order: 7; }
}

@media (min-width: 811px) {
  .about-section {
    padding-top: var(--Scale-1100);
    padding-bottom: calc(var(--Scale-1800) / 2);
  }

  .about-bio {
    gap: var(--Scale-1500);
  }

  .about-client-logos {
    gap: var(--Scale-1500);
  }

  .about-client-logo-row {
    overflow-x: visible;
  }

  .about-banners {
    gap: var(--Scale-1500);
  }

  .about-marquees {
    gap: var(--Scale-1700);
  }

  .about-bio-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--Scale-1500);
  }

  .about-photo-frame {
    width: min(100%, 640px);
    justify-self: center;
  }

  .about-bio-content {
    width: 100%;
    max-width: 640px;
    justify-self: center;
  }

  .about-testimonials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--Scale-1500);
  }
}

@media (min-width: 1201px) {
  .about-container {
    --about-gap-bio-testimonials: var(--Scale-1800);
    --about-gap-testimonials-banners: var(--Scale-1800);
  }

  .about-banners {
    gap: var(--Scale-1700);
  }

  .about-testimonials {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--Scale-1500);
  }
}

@media (max-width: 390px) {
  .about-banners,
  .about-marquees {
    gap: var(--Scale-1500);
  }

  .about-marquees {
    --about-marquee-icon-size: var(--Scale-500);
  }

  .about-photo-frame {
    width: 100%;
    max-width: none;
  }

  .about-endorsements-quote-decor {
    top: -40px;
    left: -24px;
    height: 100px;
  }
}