.about-page {
  --about-ink: #17365c;
  --about-muted: #526b85;
  --about-line: #dbe5f0;
  background: #f4f7fb;
  color: var(--about-ink);
  font: 16px/1.55 'Inter', Arial, sans-serif;
}
.about-page *, .about-page *::before, .about-page *::after { box-sizing: border-box; }
.about-shell { width: min(1280px, calc(100% - 48px)); margin: 0 auto; }
.about-page a { text-decoration: none; }
.about-page a:focus-visible { outline: 3px solid #ffbf25; outline-offset: 3px; }

.about-hero {
  border-bottom: 4px solid #ffbf25;
  background: radial-gradient(circle at 85% 0%, #24578d 0%, transparent 38%), linear-gradient(112deg, #0d2648, #173c6d);
  color: #fff;
}
.about-hero__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 174px; padding: 25px 0; }
.about-eyebrow, .about-kicker { display: block; font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.about-eyebrow { color: #ffce59; }
.about-hero h1 { margin: 5px 0 0; color: #fff; font: 800 clamp(29px, 3.1vw, 42px)/1.14 'Poppins', 'Inter', Arial, sans-serif; letter-spacing: -.035em; }
.about-hero p { margin: 8px 0 0; color: #d0dff0; font-size: 15px; }
.about-hero__link { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 10px 15px; border: 1px solid #7695b7; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 800; }
.about-hero__link:hover { background: #fff; color: #112f59; }

.about-intro { padding: 28px 0; }
.about-intro__inner { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr); align-items: center; gap: clamp(28px, 5vw, 74px); }
.about-intro__image { display: grid; place-items: center; min-height: 292px; overflow: hidden; border: 1px solid var(--about-line); border-radius: 18px; background: #fff; }
.about-intro__image img { display: block; width: min(82%, 300px); max-height: 290px; object-fit: contain; }
.about-kicker { margin-bottom: 8px; color: #2367a8; }
.about-intro h2, .about-approach h2 { margin: 0; color: var(--about-ink); font: 800 clamp(25px, 2.7vw, 35px)/1.18 'Poppins', 'Inter', Arial, sans-serif; letter-spacing: -.03em; }
.about-intro__copy p { max-width: 700px; margin: 14px 0 17px; color: var(--about-muted); font-size: 15px; line-height: 1.7; }
.about-text-link { display: inline-flex; align-items: center; gap: 9px; padding-bottom: 5px; border-bottom: 2px solid #ffbf25; color: #164777; font-size: 13px; font-weight: 800; }
.about-text-link:hover { color: #0d2d53; }

.about-approach { padding: 26px 0 32px; background: #eaf2fa; }
.about-approach__head { margin-bottom: 18px; }
.about-approach__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.about-pillar { min-width: 0; padding: 21px; border: 1px solid var(--about-line); border-radius: 14px; background: #fff; }
.about-pillar__number { display: inline-block; margin-bottom: 17px; color: #d39000; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.about-pillar h3 { margin: 0 0 8px; color: var(--about-ink); font: 800 18px/1.3 'Poppins', 'Inter', Arial, sans-serif; }
.about-pillar p { margin: 0; color: var(--about-muted); font-size: 13px; line-height: 1.6; }

@media (max-width: 760px) {
  .about-hero__inner { align-items: flex-start; flex-direction: column; gap: 15px; min-height: 0; padding: 22px 0; }
  .about-hero p { font-size: 13px; }
  .about-intro__inner { grid-template-columns: 1fr; gap: 20px; }
  .about-intro__image { min-height: 230px; }
  .about-intro__image img { max-height: 230px; }
  .about-approach__grid { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 640px) {
  .about-shell { width: calc(100% - 28px); }
  .about-intro { padding: 20px 0; }
  .about-approach { padding: 22px 0 28px; }
  .about-pillar { padding: 17px; }
  .about-pillar__number { margin-bottom: 9px; }
}