.about-page { padding-bottom: 0; }
.about-wrap { width: min(100% - 104px, var(--wrap)); margin-inline: auto; }
.about-hero { position: relative; display: grid; align-items: center; min-height: 400px; margin-top: 58px; overflow: hidden; background: radial-gradient(ellipse at 18% 100%, #eee1f3, transparent 50%), linear-gradient(115deg, #b5c9f7, #e3f3ff 75%, #c8eaff); }
.about-hero-ribbon { position: absolute; inset: 45% -12% -70%; border-radius: 50%; border-top: 2px solid #ffffffc9; transform: rotate(-9deg); box-shadow: 0 -18px 0 #ffffff35, 0 -42px 0 #ebf6ff45, 0 -68px 0 #b4cefa45, inset 0 24px 36px #91b6f7; background: linear-gradient(170deg, #ecf8ff80, #83acf3a1 35%, #d1e5ff); }
.about-hero-copy { position: relative; z-index: 1; text-align: center; padding-block: 64px 86px; }
.about-hero-copy p { color: #385a90; font-size: 14px; letter-spacing: 3px; margin: 0 0 20px; }
.about-hero h1 { margin: 0 0 18px; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.45; }
.about-hero-copy > span { color: #3b5276; font-size: 18px; }
.about-intro { padding-block: 76px 64px; }
.about-intro-grid { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 64px; }
.about-intro h2 { margin: 0 0 28px; text-align: left; font-size: 36px; }
.about-intro-copy p { margin: 0 0 18px; color: #444b56; font-size: 16px; line-height: 1.95; }
.about-intro-visual { position: relative; margin: 0; overflow: hidden; border-radius: 12px; background: #e7effa; }
.about-intro-visual img { display: block; width: 100%; height: 350px; object-fit: cover; object-position: 75% center; }
.about-intro-visual figcaption { position: absolute; inset: auto 0 0; padding: 40px 28px 22px; color: #fff; background: linear-gradient(transparent, #092d5fb3); font-size: 18px; letter-spacing: 2px; }
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 50px 0 0; padding-top: 36px; border-top: 1px solid #e8edf4; }
.about-stats > div { display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; }
.about-stats > div + div { border-left: 1px solid #e8edf4; }
.about-stats dt { font-size: 14px; color: #626d7c; }
.about-stats dd { margin: 0; font-size: 44px; font-weight: 700; color: #1266da; line-height: 1.2; }
.about-stats dd span { margin-left: 5px; font-size: 18px; font-weight: 500; }
.about-strengths { padding: 72px 0 80px; background: #f6f8fb; }
.about-strengths h2 { margin: 0; font-size: 32px; }
.about-strength-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.about-strength-grid article { padding: 30px; background: #fff; border-top: 2px solid #3381ed; }
.about-number { color: #c1d5f4; font-size: 34px; font-weight: 700; }
.about-strength-grid h3 { margin: 14px 0; font-size: 22px; }
.about-strength-grid p { margin: 0; color: #626d7c; font-size: 15px; line-height: 1.9; }
.about-cta p { margin: 16px 0 0; color: #5e6d83; }
.about-cta a { min-width: 180px; height: 48px; gap: 24px; border-radius: 5px; font-size: 16px; }
.about-page #contact { scroll-margin-top: 80px; }
.about-page a:focus-visible, .about-page button:focus-visible { outline: 2px solid #1266da; outline-offset: 5px; }
@media (max-width: 900px) {
  .about-wrap { width: calc(100% - 40px); }
  .about-hero { margin-top: 61px; min-height: 320px; }
  .about-hero-copy { padding-block: 48px 66px; }
  .about-hero-copy > span { font-size: 15px; }
  .about-intro { padding-block: 44px; }
  .about-intro-grid { grid-template-columns: 1fr; gap: 24px; }
  .about-intro h2 { font-size: 28px; margin-bottom: 20px; }
  .about-intro-visual img { height: 260px; }
  .about-stats { grid-template-columns: repeat(2, 1fr); gap: 30px 12px; margin-top: 32px; }
  .about-stats > div:nth-child(3) { border-left: 0; }
  .about-stats dd { font-size: 36px; }
  .about-stats dt { font-size: 12px; }
  .about-strengths { padding-block: 44px; }
  .about-strengths h2 { font-size: 26px; }
  .about-strength-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .about-strength-grid article { padding: 24px; }
  .about-cta a { width: auto; min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.about-page) { scroll-behavior: auto; }
}