/* About page only. Shared pieces (hero, bands, cards, buttons, stats, review strip) live in core.css.
   Sections follow the original page: hero, Our Story, Why Clients Choose Us, Our Mission. */

/* ---------- 1. hero ---------- */
.ab-hero .hero__content { max-width: 760px; }
.ab-hero h1 .accent { display: block; }
/* the narrowest phones: keep "It's an experience." on one line */
@media (max-width: 374.98px) {
  .ab-hero h1 { font-size: 2.25rem; }
}

/* ---------- 2. our story ---------- */
/* the hero already ends in a long fade to navy, so the first band needs less top padding */
.ab-story { padding-top: clamp(40px, 1.5rem + 4vw, 96px); }
.ab-story__media { aspect-ratio: 5 / 4; }
.ab-story__media img { object-position: 50% 60%; }
.ab-story__copy p:not(.kicker) { max-width: 30em; }
.ab-story__copy h2 { margin-bottom: 4px; }

/* the three promises: tidy rows with a hairline between them (easy to scan on every width) */
.ab-features { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; }
.ab-feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--line-soft);
}
.ab-feature:last-child { border-bottom: 1px solid var(--line-soft); }
.ab-feature .icon-ring { margin: 0; }
.ab-feature__title { font-size: 1.375rem; line-height: 1.25; font-variation-settings: "opsz" 24; }
.ab-feature .ab-feature__text { margin: 4px 0 0; color: var(--fg-2); }

/* tablets, where the story stacks: the promises sit side by side, as on the original */
@media (min-width: 720px) and (max-width: 899.98px) {
  .ab-features { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .ab-feature { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: 16px; padding: 24px 0 0; }
  .ab-feature:last-child { border-bottom: 0; }
}

/* photo shape per width: a wide frame when the story stacks on tablets, then a portrait and a square
   beside the copy, so the photo roughly matches the height of the story column */
@media (min-width: 600px) and (max-width: 899.98px) {
  .ab-story__media { aspect-ratio: 16 / 9; }
}
@media (min-width: 900px) {
  .ab-story__media { aspect-ratio: 4 / 5; }
  .ab-story__media img { object-position: 46% 60%; }
}
@media (min-width: 1200px) {
  .ab-story__media { aspect-ratio: 1 / 1; }
}

/* ---------- 3. why clients choose us ---------- */
.ab-stats { list-style: none; margin: 0; padding: 0; }
.ab-stat { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 32px 20px 30px; }
.ab-stat p { margin: 0; }
.ab-stat .icon-ring { margin-bottom: 20px; }
.ab-stat .stat__num { font-size: clamp(2.375rem, 1.85rem + 1.5vw, 3.25rem); }
/* the plus and the "/5" use a low optical size so their strokes stay visible at small sizes */
.ab-stat__sym { margin-left: 0.04em; color: var(--accent); font-weight: 400; font-variation-settings: "opsz" 8; }
.ab-stat__of { margin-left: 0.08em; font-size: 0.56em; color: var(--fg-2); font-variation-settings: "opsz" 8; }
.ab-stat .stat__label { margin-top: 12px; line-height: 1.45; }

@media (max-width: 559.98px) {
  .ab-stat { padding: 24px 10px 22px; }
  .ab-stat .icon-ring { width: 46px; height: 46px; margin-bottom: 16px; }
  .ab-stat .icon-ring .icon { width: 22px; height: 22px; }
  .ab-stat .stat__label { letter-spacing: 0.12em; }
}

/* ---------- 4. our mission ---------- */
.ab-mission__media { aspect-ratio: 1170 / 1080; }
.ab-mission__media img { object-position: 50% 45%; }
@media (min-width: 600px) and (max-width: 899.98px) {
  .ab-mission__media { aspect-ratio: 3 / 2; }
}
.ab-mission__copy p:not(.kicker) { max-width: 30em; }
/* the review strip lays itself out by its column width (core.css .review-cta-box) */
.ab-mission__copy .review-cta-box { margin-top: var(--s-5); }