/* ==========================================================================
   ABOUT US PAGE — story section, points grid, driver-guide block, pull-quote
   ========================================================================== */

.story { background: var(--color-white); }
.story__row { --bs-gutter-x: 4rem; }
@media (max-width: 991px) { .story__row { --bs-gutter-x: 1.5rem; } }
.story__col--offset { padding-top: var(--space-8); }
.story__para { color: var(--color-ink-soft); max-width: 60ch; }
.story h2 { font-size: var(--text-h2); }

.story p { margin-top: var(--space-5); color: var(--color-ink-soft); max-width: 60ch; }
.story p:first-of-type { margin-top: var(--space-3); }

/* ---------------------------------------------------------------------- *
 * Difference points — 4-up grid, distinct from the homepage why-choose list
 * ---------------------------------------------------------------------- */
.difference { background: var(--color-ocean-100); }
.difference__grid { margin-top: var(--space-7); }
.difference-card {
  height: 100%;
  background: var(--color-white);
  border: var(--border-width) solid var(--color-ocean-800);
  padding: var(--space-6);
}
.difference-card__num {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--color-teal-700);
}
.difference-card h3 { margin-top: var(--space-3); font-size: var(--text-body-lg); }
.difference-card p { margin-top: var(--space-2); font-size: var(--text-small); color: var(--color-ink-soft); }

/* ---------------------------------------------------------------------- *
 * Driver-guide feature block — real photo + text split
 * ---------------------------------------------------------------------- */
.driver-feature { background: var(--color-white); }
.driver-feature__row { --bs-gutter-x: 3rem; }
@media (max-width: 991px) { .driver-feature__row { --bs-gutter-x: 1.5rem; } }
.driver-feature__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: var(--border-width) solid var(--color-ocean-800);
}
.driver-feature h2 { font-size: var(--text-h3); }
.driver-feature p { margin-top: var(--space-3); color: var(--color-ink-soft); max-width: 68ch; }

@media (max-width: 991px) {
  .driver-feature__media { margin-bottom: var(--space-6); }
}

/* ---------------------------------------------------------------------- *
 * Pull quote
 * ---------------------------------------------------------------------- */
.pull-quote { background: var(--color-ocean-900); color: var(--color-white); padding-block: var(--space-8); }
.pull-quote__row { --bs-gutter-x: 3rem; }
@media (max-width: 991px) { .pull-quote__row { --bs-gutter-x: 1.5rem; } }
.pull-quote__photo {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 16px 80px 16px 80px;
  box-shadow: var(--shadow-md);
  border: 4px solid var(--color-white);
}
.pull-quote__mark { width: 28px; height: 22px; }
.pull-quote blockquote {
  margin: var(--space-4) 0 0;
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  max-width: 40ch;
}
.pull-quote cite {
  display: block;
  margin-top: var(--space-3);
  font-style: normal;
  font-size: var(--text-small);
  color: var(--color-ink-on-dark-soft);
}

@media (max-width: 991px) {
  .pull-quote__row > div:first-child { margin-bottom: var(--space-5); }
  .pull-quote__photo { max-width: 240px; margin-inline: auto; display: block; }
}