/* Logo / social-proof strip — Figma 12935:3704 (1044 x 133) */

/* The five wordmarks are set in their own brand faces in Figma. Without these
   they all fall back to Inter, which is wider — the longer "Your…" names then
   overflow the 980px row. Imported here rather than in index.html so the
   dependency stays with the only section that uses it. */
@import url("https://fonts.googleapis.com/css2?family=Antonio:wght@400&family=Anybody:wght@500&family=Cabin:wght@600&family=Farro:wght@500&display=swap");

.sec-logos {
  background: var(--color-surface);
  padding-top: 86px;
}

/* keep 1044px as the *content* width (base .container adds 24px inline padding) */
.sec-logos .container--narrow {
  max-width: calc(var(--container-narrow) + 48px);
}

.sec-logos__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.sec-logos__eyebrow {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: -0.5px;
  text-align: center;
  color: var(--color-ink);
}

.sec-logos__strip {
  position: relative;
  width: 100%;
  padding: 24px 32px; /* Figma 12935:3706 — 32px keeps the end logos off the column edge */
  border-radius: 16px;
}

.sec-logos__track {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sec-logos__item {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.sec-logos__mark {
  display: block;
  flex: 0 0 auto;
}

.sec-logos__mark img {
  width: 100%;
  height: 100%;
}

.sec-logos__name {
  color: var(--color-ink);
  font-size: 25.956px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

/* YourConsulting — Figma 20743:1912 is a plain 8px flex row (was absolutely
   positioned when the wordmark was short enough to hard-code a width) */
.sec-logos__item--consulting {
  gap: 8px;
}

.sec-logos__mark--consulting {
  width: 22.387px;
  height: 23.88px;
}

.sec-logos__name--consulting {
  font-family: "Antonio", var(--font-body);
  font-weight: 400;
  font-size: 25.956px;
  line-height: 0.99;
}

/* YourAgency */
.sec-logos__item--agency {
  gap: 8.652px;
}

.sec-logos__mark--agency {
  width: 39.34px;
  height: 22.48px;
}

.sec-logos__name--agency {
  font-family: "Cabin", var(--font-body);
  font-weight: 600;
  font-variation-settings: "wdth" 100;
}

/* YourHustle */
.sec-logos__item--hustle {
  gap: 8.652px;
}

.sec-logos__mark--hustle {
  width: 33.277px;
  height: 25.956px;
}

.sec-logos__name--hustle {
  font-family: "Farro", var(--font-body);
  font-weight: 500;
  font-size: 24.96px;
}

/* YourCohort */
.sec-logos__item--cohort {
  gap: 7.571px;
  align-items: flex-start;
}

.sec-logos__mark--cohort {
  width: 29.201px;
  height: 23.837px;
}

.sec-logos__name--cohort {
  font-family: "Anybody", var(--font-body);
  font-weight: 500;
  font-variation-settings: "wdth" 100;
}

/* YourStartUp */
.sec-logos__item--startup {
  gap: 4.326px;
}

.sec-logos__mark--startup {
  width: 25.956px;
  height: 25.956px;
}

.sec-logos__name--startup {
  font-family: var(--font-body);
  font-weight: 700;
}

@media (max-width: 900px) {
  .sec-logos__strip {
    padding: 24px 0;
  }

  .sec-logos__track {
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
  }

}