/* ==========================================================================
   About Us page — components unique to this page. Hero, stats, section,
   feature rows and close/.row/.btn all come from service-page.css (this
   design shares the same DNA), already enqueued alongside this file.
   ========================================================================== */

/* — approach grid — */
.approach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--leading); margin-top: var(--leading); }
@media (max-width: 880px) { .approach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .approach-grid { grid-template-columns: 1fr; } }
.approach-grid .card-kicker { font-feature-settings: "tnum" 1; }

/* — imagery split (leadership) — */
.split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: center;
  padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading));
}
body.aeo-blank-canvas .split-copy .note {
  font-size: 15.5px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: 48ch;
}
body.aeo-blank-canvas .split-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 32px; line-height: calc(1.5 * var(--leading)); letter-spacing: -0.012em; margin: 0;
}
.split-figure { margin: 0; }
.split-figure img { width: 100%; aspect-ratio: 1600 / 1261; object-fit: cover; border-radius: var(--radius-lg); }
@media (max-width: 720px) {
  .split { grid-template-columns: 1fr; }
  .split-figure { order: -1; }
}

/* — pull quote (hanging punctuation) — */
.quote { padding: calc(2.5 * var(--leading)) 0 calc(3.5 * var(--leading)); }
body.aeo-blank-canvas .quote blockquote {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 2.6vw, 34px); line-height: calc(1.5 * var(--leading));
  letter-spacing: -0.01em; max-width: 32ch; margin: 0;
  text-indent: -0.474em;
}
body.aeo-blank-canvas .quote figcaption {
  font-size: 15.5px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 64%, transparent);
  margin: calc(2 * var(--leading) - 1cap) 0 0; text-align: right; text-indent: -1.267em;
}
.quote-links { font-size: 15.5px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 64%, transparent); text-align: right; margin: var(--half) 0 0; }
@media (max-width: 720px) {
  body.aeo-blank-canvas .quote blockquote, body.aeo-blank-canvas .quote figcaption { text-indent: 0; }
}

/* — close (flex row variant: text left, CTAs right) — */
.close.close-flex { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 72px); flex-wrap: wrap; }
.close.close-flex > div:first-child { max-width: var(--measure); }
body.aeo-blank-canvas .close h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: var(--leading); margin: 0;
}
.close.close-flex .row { justify-content: flex-end; margin-top: 0; flex-shrink: 0; }
@media (max-width: 720px) {
  .close.close-flex .row { justify-content: flex-start; width: 100%; }
  .close.close-flex .row .btn { flex: 1 1 auto; }
}