/* ===========================================================================
   Ability Access — About Us page components
   Built at 1440px design width. Loaded AFTER styles.css.
   Only NEW class names here (ab-*) — shared classes live in styles.css.
   =========================================================================== */

/* ---- About hero (text left + photo right) ------------------------------- */
.ab-hero { position: relative; padding: 118px 0 40px; }
.ab-hero-grid {
  display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: 60px; align-items: center;
}
.ab-hero-text .eyebrow { margin-bottom: 18px; }
.ab-hero h1 { font-size: 52px; line-height: 1.1; letter-spacing: -.01em; }
.ab-hero h1 .accent { display: block; }
.ab-hero-sub { font: italic 500 22px/1.35 var(--serif); color: var(--teal); margin: 16px 0 22px; }
.ab-hero .lead { max-width: 470px; font-size: 16px; }
.ab-hero-cta { display: flex; gap: 16px; margin-top: 30px; }
.ab-hero-photo { background: var(--ph-bg); border-radius: 18px; aspect-ratio: 7/5; }

/* ---- Our Purpose (pale) — heading left + values grid right --------------- */
.ab-purpose { background: var(--pale); padding: 50px 0 54px; }
.ab-purpose-grid {
  display: grid; grid-template-columns: 0.82fr 1.18fr;
  gap: 56px; align-items: start;
}
.ab-purpose-intro .eyebrow { margin-bottom: 14px; }
.ab-purpose-intro h2 { font-size: 40px; line-height: 1.12; margin-bottom: 20px; }
.ab-purpose-intro p { font-size: 15.5px; line-height: 1.75; color: var(--body); }

.ab-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 28px; }
.ab-value { }
.ab-value .ab-ic {
  width: 50px; height: 50px; border-radius: 14px; background: #e2eff0;
  display: grid; place-items: center; margin-bottom: 16px;
}
.ab-value .ab-ic svg { width: 24px; height: 24px; color: var(--teal); }
.ab-value h3 { font-family: var(--sans); font-size: 16.5px; font-weight: 700; color: var(--ink); margin-bottom: 9px; line-height: 1.3; }
.ab-value p { font-size: 14px; line-height: 1.62; color: var(--body); }

/* ---- Our Story split (text left + photo right + coral quote) ------------- */
.ab-story { padding: 48px 0; }
.ab-story-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.ab-story-text .eyebrow { margin-bottom: 14px; }
.ab-story-text h2 { font-size: 42px; line-height: 1.12; margin-bottom: 22px; }
.ab-story-text p { font-size: 15.5px; line-height: 1.75; color: var(--body); margin-bottom: 18px; }
.ab-story-text .btn { margin-top: 12px; }
.ab-story-media { position: relative; }
.ab-story-photo { background: var(--ph-bg); border-radius: 18px; aspect-ratio: 16/11; }
.ab-quote {
  position: absolute; right: -18px; bottom: 30px; width: 250px;
  background: var(--coral); color: #fff; border-radius: 16px; padding: 24px 24px 22px;
  box-shadow: 0 30px 50px -28px rgba(230,123,106,.6);
}
.ab-quote .mark { font: 700 44px/0.6 var(--serif); display: block; height: 22px; }
.ab-quote p { font: italic 500 15px/1.5 var(--serif); }

/* ---- Impact stat band (dark, text left + photo right) -------------------- */
.ab-impact { background: var(--dark); color: #cfe0e0; position: relative; overflow: hidden; }
.ab-impact-grid { display: grid; grid-template-columns: 1.32fr 1fr; }
.ab-impact-body { padding: 50px 60px 52px 0; }
.ab-impact .eyebrow { color: #6fc3bb; margin-bottom: 12px; }
.ab-impact h2 { color: #fff; font-size: 42px; line-height: 1.12; }
.ab-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 54px; }
.ab-stat .ab-ic { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 18px; }
.ab-stat .ab-ic svg { width: 26px; height: 26px; color: #6fc3bb; }
.ab-stat b { font: 600 40px/1 var(--serif); color: #fff; display: block; margin-bottom: 8px; }
.ab-stat span { font: 500 13.5px/1.45 var(--sans); color: #9fbdbc; display: block; }
.ab-impact-photo { position: absolute; top: 0; bottom: 0; right: 0; left: 60%; background: var(--ph-bg); }

/* =========================================================================
   RESPONSIVE  (improvised below source width; harness validates 1440 only)
   ========================================================================= */
@media (max-width: 1024px) {
  .ab-hero { padding-top: 104px; }
  .ab-hero-grid, .ab-story-grid { grid-template-columns: 1fr; gap: 44px; }
  .ab-hero-photo, .ab-story-media { max-width: 620px; }
  .ab-purpose-grid { grid-template-columns: 1fr; gap: 36px; }
  .ab-values { grid-template-columns: repeat(3, 1fr); }
  .ab-impact-grid { grid-template-columns: 1fr; }
  .ab-impact-body { padding: 56px 0; }
  .ab-impact-photo { display: none; }
  .ab-quote { right: 0; }
}
@media (max-width: 768px) {
  .ab-hero h1 { font-size: 38px; }
  .ab-hero-sub { font-size: 19px; }
  .ab-purpose-intro h2, .ab-story-text h2, .ab-impact h2 { font-size: 32px; }
  .ab-values { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .ab-stats { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .ab-quote { position: static; width: auto; margin-top: 18px; }
  .ab-story-media { max-width: none; }
  .ab-hero-cta { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .ab-hero h1 { font-size: 32px; }
  .ab-values { grid-template-columns: 1fr; }
  .ab-stats { grid-template-columns: 1fr; gap: 26px; }
}

/* ---- Hover micro-interactions ---- */
.ab-value { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.ab-value:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.ab-value .ab-ic { transition: transform var(--dur-2) var(--ease-out); }
.ab-value:hover .ab-ic { transform: scale(1.1); }

.ab-purpose, .ab-story { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.ab-impact-body { padding-top: var(--section-y); padding-bottom: var(--section-y); }