/* hero section */
.about-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--black);
  background-image: url("../images/about-hero-bg.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

.about-hero-gradient {
  position: absolute;
  top: var(--announcement-bar-height, 34px);
  left: 0;
  width: 100%;
  height: auto;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  min-width: 1440px;
}

.about-hero-inner {
  --hero-top-space: 100px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding-top: calc(var(--header-height, 0px) + var(--hero-top-space));
  padding-bottom: 100px;
  @media (max-width: 1179px) {
    --hero-top-space: 80px;
    gap: 40px;
    padding-bottom: 80px;
  }
  @media (max-width: 767px) {
    --hero-top-space: 60px;
    gap: 32px;
    padding-bottom: 60px;
  }
}

.about-hero-heading {
  align-items: flex-start;
  text-align: left;
}

.about-hero-media {
  display: grid;
  grid-template-columns: 1.49fr 1fr;
  align-items: stretch;
  gap: 24px;
  @media (max-width: 1179px) {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  @media (max-width: 767px) {
    grid-template-columns: 1fr;
  }
}

.about-hero-media-primary {
  position: relative;
  @media (max-width: 767px) {
    aspect-ratio: 762 / 460;
  }
}

.about-hero-media-primary img {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-8);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero-media-secondary img {
  aspect-ratio: 495 / 318;
  border-radius: var(--radius-8);
  max-height: 318px;
  display: block;
  width: 100%;
  object-fit: cover;
  @media (max-width: 1179px) {
    aspect-ratio: unset;
  }
  @media (max-width: 767px) {
    max-height: unset;
    height: auto;
  }
}

/* Below 1179px the images stay side by side and the paragraph drops under both,
   so the side column dissolves and its children become grid items themselves. */
.about-hero-media-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
  @media (max-width: 1179px) {
    display: contents;
  }
}

.about-hero-description {
  margin: 0;
  color: var(--gray);
  font: var(--body-b1);
  @media (max-width: 1179px) {
    grid-column: 1 / -1;
  }
}

.about-hero-bottom-bg {
  position: absolute;
  left: 0;
  width: 100%;
  top: 24%;
  pointer-events: none;
  @media (max-width: 1179px) {
    display: none;
  }
}

.about-hero-bottom-bg img {
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* problem section */
.about-problem-section {
  padding: 100px 0;
  @media (max-width: 1179px) {
    padding: 80px 0;
  }
  @media (max-width: 767px) {
    padding: 60px 0;
  }
}

.about-problem-section-wrapper {
  display: flex;
  flex-direction: column;
  gap: 100px;
  @media (max-width: 1179px) {
    gap: 80px;
  }
  @media (max-width: 767px) {
    gap: 60px;
  }
}

.about-problem-top-section {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding-bottom: 100px;
  border-bottom: 1px solid var(--stone);
  z-index: 1;
  @media (max-width: 1179px) {
    padding-bottom: 80px;
    gap: 40px;
  }
  @media (max-width: 767px) {
    padding-bottom: 60px;
    gap: 32px;
  }
}

.about-problem-bottom-section {
  display: flex;
  flex-direction: column;
  gap: 60px;
  z-index: 1;
  @media (max-width: 1179px) {
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.about-problem-section-wrapper .title-section {
  max-width: 720px;
  @media (max-width: 1179px) {
    max-width: 100%;
  }
}

.about-problem-bottom-description {
  margin: 0;
  color: var(--off-black);
  font: var(--body-b2);
  max-width: 720px;
  width: 100%;
  margin-left: auto;
  @media (max-width: 1179px) {
    max-width: 100%;
    margin-left: 0;
  }
}

.about-problem-top-section-content {
  display: flex;
  align-items: flex-end;
  gap: 60px;
  @media (max-width: 1179px) {
    gap: 40px;
    align-items: flex-start;
    flex-direction: column;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.image-wrapper {
  max-width: 512px;
  width: 100%;
  display: flex;
  @media (max-width: 1179px) {
    max-width: 100%;
  }
}

.image-wrapper img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-8);
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  max-width: 724px;
  width: 100%;
  @media (max-width: 1179px) {
    max-width: 100%;
  }
}

.about-problem-top-description {
  margin: 0;
  color: var(--off-black);
  font: var(--body-b2);
}

/* why coredrive section */
.about-why-coredrive-section {
  padding: 100px 0;
  background-color: var(--pearl);
  position: relative;
  @media (max-width: 1179px) {
    padding: 80px 0;
  }
  @media (max-width: 767px) {
    padding: 60px 0;
  }
}

.about-why-coredrive-content {
  display: flex;
  gap: 60px;
  @media (max-width: 1179px) {
    flex-direction: column;
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.about-why-coredrive-content .title-section {
  max-width: 520px;
  @media (max-width: 1179px) {
    max-width: 100%;
  }
}

.about-why-coredrive-right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  @media (max-width: 767px) {
    gap: 20px;
  }
}

.about-why-coredrive-card {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 32px;
  background-color: var(--white);
  border-radius: var(--radius-12);
  @media (max-width: 1179px) {
    gap: 20px;
    padding: 24px;
  }
  @media (max-width: 767px) {
    gap: 16px;
    padding: 20px;
  }
}

.about-why-coredrive-card-icon {
  display: flex;
  flex-shrink: 0;
}

.about-why-coredrive-card-icon svg {
  @media (max-width: 1179px) {
    width: 30px;
    height: 30px;
  }
  @media (max-width: 767px) {
    width: 26px;
    height: 26px;
  }
}

.about-why-coredrive-card-text {
  margin: 0;
  color: var(--off-black);
  font: var(--heading-h6);
  letter-spacing: var(--letter-spacing-m0-5);
}

/* leadership section css */
.about-leadership-section {
  padding: 100px 0;
  @media (max-width: 1179px) {
    padding: 80px 0;
  }
  @media (max-width: 767px) {
    padding: 60px 0;
  }
}

.about-leadership-inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  @media (max-width: 1179px) {
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.about-leadership-inner .crew-card {
  border: none;
}

/* Heading left, CTA right, bottom-aligned so the button sits level with the
   heading rather than the tag above it. Stacks at tablet. */
.about-leadership-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  @media (max-width: 1179px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  @media (max-width: 767px) {
    gap: 24px;
  }
}

.about-leadership-header .title-section {
  max-width: 620px;
  @media (max-width: 1179px) {
    max-width: 100%;
  }
}

.about-leadership-cta {
  flex-shrink: 0;
}

.about-leadership-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(308px, 1fr));
  gap: 24px;
  z-index: 1;
  @media (max-width: 1179px) {
    gap: 20px;
  }
  @media (max-width: 600px) {
    grid-template-columns: 1fr;
  }
}

.about-leadership-bottom-bg {
  position: absolute;
  left: 0;
  width: 100%;
  top: -9%;
  pointer-events: none;
  @media (max-width: 1179px) {
    display: none;
  }
}

.about-leadership-bottom-bg img {
  width: 100%;
  height: 100%;
  max-height: 2803px;
  pointer-events: none;
}

/* proof section css */
.about-proof-section {
  padding: 100px 0;
  background-color: var(--pearl);
  position: relative;
  @media (max-width: 1179px) {
    padding: 80px 0;
  }
  @media (max-width: 767px) {
    padding: 60px 0;
  }
}

.about-proof-inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  @media (max-width: 1179px) {
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.about-proof-inner .title-section {
  max-width: 720px;
  @media (max-width: 1179px) {
    max-width: 100%;
  }
}

/* The badge row and the stat row read as one card block, so they sit closer to
   each other than to the title or the logo strip above and below. */
.about-proof-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  @media (max-width: 1179px) {
    gap: 20px;
  }
}

.about-proof-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  @media (max-width: 1179px) {
    gap: 20px;
  }
  @media (max-width: 767px) {
    grid-template-columns: 1fr;
  }
}

.about-proof-badge {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 32px;
  background-color: var(--white);
  border-radius: var(--radius-12);
  @media (max-width: 1179px) {
    padding: 24px;
  }
  @media (max-width: 767px) {
    padding: 20px;
  }
}

.about-proof-badge-icon {
  display: block;
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  object-fit: contain;
  @media (max-width: 767px) {
    width: 64px;
    height: 64px;
  }
}

.about-proof-badge-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  @media (max-width: 1179px) {
    gap: 8px;
  }
}

.about-proof-badge-title {
  font: var(--heading-h6);
  letter-spacing: var(--letter-spacing-m0-5);
  color: var(--off-black);
}

.about-proof-badge-subtitle {
  font: var(--body-b2);
  color: var(--graphite);
}

.about-proof-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  @media (max-width: 1179px) {
    gap: 20px;
  }
  @media (max-width: 767px) {
    grid-template-columns: 1fr;
  }
}

.about-proof-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 32px;
  background-color: var(--white);
  border-radius: var(--radius-12);
  @media (max-width: 1179px) {
    padding: 24px;
    gap: 12px;
  }
  @media (max-width: 767px) {
    padding: 20px;
  }
}

.about-proof-stat-value {
  font: var(--heading-h4);
  color: var(--off-black);
  letter-spacing: var(--letter-spacing-m1);
}

.about-proof-stat-label {
  font: var(--body-b2);
  color: var(--off-black);
  flex: 1;
}

.about-proof-logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
  @media (max-width: 1179px) {
    gap: 32px;
    justify-content: flex-start;
  }
  @media (max-width: 767px) {
    gap: 24px;
  }
}

.about-proof-trusted-label {
  margin: 0;
  font: var(--tag);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-2);
  color: var(--off-black);
  padding-right: 40px;
  border-right: 1px solid var(--stone);
  @media (max-width: 1179px) {
    padding-right: 32px;
  }
  @media (max-width: 767px) {
    padding-right: 24px;
  }
}

.about-proof-logo {
  display: flex;
  align-items: center;
}

.about-proof-logo img {
  display: block;
  max-height: 28px;
  width: auto;
  @media (max-width: 767px) {
    max-height: 24px;
  }
}

/* partner section css */
.about-partner-section {
  padding: 100px 0;
  position: relative;
  background-color: var(--white);
  @media (max-width: 1179px) {
    padding: 80px 0;
  }
  @media (max-width: 767px) {
    padding: 60px 0;
  }
}

.about-partner-inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  @media (max-width: 1179px) {
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.about-partner-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  @media (max-width: 1179px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  @media (max-width: 767px) {
    gap: 24px;
  }
}

.about-partner-header .title-section {
  max-width: 720px;
  @media (max-width: 1179px) {
    max-width: 100%;
  }
}

.about-partner-cta {
  flex-shrink: 0;
}

.about-partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(308px, 1fr));
  gap: 24px;
  @media (max-width: 1179px) {
    gap: 20px;
  }
  @media (max-width: 767px) {
    grid-template-columns: 1fr;
  }
}

/* The icon sits well above the copy, so the gap between them is the card's own
   spacing rather than the tighter title/description pair below it. */
.about-partner-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px;
  background-color: var(--pearl);
  border-radius: var(--radius-12);
  @media (max-width: 1179px) {
    gap: 28px;
    padding: 28px;
  }
  @media (max-width: 767px) {
    padding: 24px;
    gap: 24px;
  }
}

.about-partner-card-icon {
  display: flex;
  flex-shrink: 0;
}

.about-partner-card-icon svg {
  width: 42px;
  height: 42px;
  @media (max-width: 767px) {
    width: 38px;
    height: 38px;
  }
}

.about-partner-card-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  @media (max-width: 1179px) {
    gap: 16px;
  }
  @media (max-width: 767px) {
    gap: 12px;
  }
}

.about-partner-card-title {
  margin: 0;
  color: var(--off-black);
  font: var(--heading-h5);
  letter-spacing: var(--letter-spacing-m1);
}

.about-partner-card-description {
  margin: 0;
  color: var(--graphite);
  font: var(--body-b2);
}