/* ==========================================================================
   About page (about/index). Page-specific styles.
   Shared: hero (.pagehero), CTA/FAQ partials, .btn-blue, helpers — app.css.
   Prefix `ab-`. Interactive bits in about.js.
   ========================================================================== */

/* ---- ONE-STOP SOLUTION ---- */
.ab-h2 { font-size: 34px; font-weight: 600; line-height: 1.25; }
.ab-lead { color: #5f7186; font-size: 15px; line-height: 1.7; margin-top: 18px; }
.ab-youcan { color: #0e2a47; font-weight: 600; font-size: 15px; margin: 16px 0 12px; }
.ab-collage { position: relative; max-width: 520px; height: 520px; margin: 0 auto; }
.ab-collage-dots { position: absolute; background-image: radial-gradient(rgba(63, 155, 255, .55) 2.2px, transparent 2.2px); background-size: 18px 18px; }
.ab-collage-dots1 { top: 130px; right: 8px; width: 108px; height: 84px; }
.ab-collage-dots2 { bottom: 46px; left: 0; width: 90px; height: 84px; }
.ab-collage-img1 { position: absolute; top: 8px; left: 34px; width: 330px; height: 270px; object-fit: cover; border-radius: 18px; box-shadow: 0 20px 45px rgba(13, 60, 120, .16); }
.ab-collage-img2 { position: absolute; bottom: 18px; right: 14px; width: 280px; height: 240px; object-fit: cover; border-radius: 18px; box-shadow: 0 22px 48px rgba(13, 60, 120, .2); border: 5px solid #fff; z-index: 2; }
.ab-exp-badge { position: absolute; bottom: 150px; left: 18px; background: #2f88e8; color: #fff; border-radius: 14px; padding: 20px 26px; box-shadow: 0 16px 36px rgba(47, 136, 232, .42); z-index: 3; }
.ab-exp-num { font-size: 40px; font-weight: 800; line-height: 1; }
.ab-exp-label { font-size: 13px; margin-top: 6px; opacity: .96; line-height: 1.4; }
.ab-check-list { display: flex; flex-direction: column; gap: 14px; }
.ab-check-item { display: flex; gap: 12px; align-items: flex-start; }
.ab-check-ic { color: #d8222a; font-size: 18px; margin-top: 2px; }
.ab-check-text { color: #3a4d65; font-size: 14.5px; line-height: 1.55; }
.ab-avatars-wrap { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.ab-avatars { display: flex; }
.ab-avatar { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; box-shadow: 0 4px 12px rgba(13, 60, 120, .14); }
.ab-avatar:not(:first-child) { margin-left: -12px; }
.ab-av1 { background: linear-gradient(135deg, #f3b07a, #e07a5f); }
.ab-av2 { background: linear-gradient(135deg, #6fa8e6, #2f6fb8); }
.ab-av3 { background: linear-gradient(135deg, #7fc1a4, #3f8f6f); }
.ab-av4 { background: linear-gradient(135deg, #caa0e0, #8a5fb0); }
.ab-clients-text { color: #5f7186; font-size: 14px; }
.ab-clients-strong { color: #d8222a; }

/* ---- OUR IMPACT (stats) ---- */
.ab-impact-row { margin-top: 50px; row-gap: 36px; }
.ab-impact-eyebrow-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ab-eyebrow { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .12em; color: #1f7ae0; }
.ab-eyebrow-line { width: 38px; height: 2px; background: #1f7ae0; }
.ab-impact-h2 { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 40px; line-height: 1.15; color: #0e2a47; margin: 0 0 18px; }
.ab-impact-lead { color: #5f7186; font-size: 16px; line-height: 1.6; max-width: 380px; margin: 0; }
.statcard { transition: transform .28s ease, box-shadow .28s ease; }
.statcard:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(13, 60, 120, .13); }
.ab-statcard { background: #fff; border-radius: 16px; padding: 30px 26px; height: 100%; box-shadow: 0 10px 30px rgba(13, 60, 120, .06); }
.ab-stat-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.ab-stat-ic { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.ab-stat-ic--blue { background: #eaf2fd; }
.ab-stat-ic--green { background: #e9f6ee; }
.ab-stat-ic--orange { background: #fdeee7; }
.ab-stat-ic--blue i { color: #1f7ae0; }
.ab-stat-ic--green i { color: #1ca14a; }
.ab-stat-ic--orange i { color: #e8743b; }
.ab-stat-i { font-size: 26px; }
.ab-stat-num { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 30px; line-height: 36px; }
.ab-num--red { color: #df4a4a; }
.ab-num--green { color: #1ca14a; }
.ab-stat-title { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 16px; color: #0e2a47; }
.ab-stat-sub { color: #5f7186; font-size: 14px; margin-top: 4px; line-height: 1.45; }

/* ---- WHAT MAKES DIFFERENT (interactive) ---- */
.ab-wmd-introrow { margin-bottom: 34px; row-gap: 14px; }
.ab-wmd-h2 { font-size: 32px; font-weight: 600; line-height: 1.25; }
.ab-wmd-lead { color: #1B4977; font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 18px; line-height: 24px; margin: 0; }
.ab-wmd-panel { background: linear-gradient(135deg, #1f7ae0, #1560b8); border-radius: 18px; padding: 38px; color: #fff; height: 100%; position: relative; overflow: hidden; min-height: 320px; }
.ab-wmd-bgicon { position: absolute; top: 24px; right: 30px; font-size: 96px; opacity: .12; }
.ab-wmd-head { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.ab-wmd-badge { width: 46px; height: 46px; border-radius: 12px; background: #d8222a; display: flex; align-items: center; justify-content: center; }
.ab-wmd-icon { font-size: 22px; color: #fff; }
.ab-wmd-bignum { opacity: .82; font-weight: 600; font-size: 15px; }
.ab-wmd-dtitle { color: #fff; font-size: 26px; font-weight: 700; margin: 26px 0 14px; line-height: 1.25; }
.ab-wmd-ddesc { color: #dceaff; font-size: 14px; line-height: 1.8; margin: 0; }
.ab-wmd-foot { border-top: 1px solid rgba(255, 255, 255, .22); margin-top: 26px; padding-top: 18px; }
.ab-wmd-ftitle { font-weight: 700; font-size: 17px; color: #fff; }
.ab-wmd-fsub { opacity: .85; font-size: 13px; margin-top: 2px; }
.ab-wmd-list { border: 1px solid #e9eff6; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(13, 60, 120, .06); background: #fff; }
.wmd-row { display: flex; gap: 14px; align-items: center; padding: 20px 22px; border-bottom: 1px solid #eef2f7; cursor: pointer; transition: background .2s; }
.wmd-row:last-child { border-bottom: none; }
.wmd-row:hover { background: #f6f9fd; }
.wmd-ic { width: 42px; height: 42px; border-radius: 11px; background: #eef4fc; color: #1f7ae0; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none; transition: .2s; }
.wmd-title { font-weight: 600; font-size: 15px; color: #0e2a47; transition: .2s; }
.wmd-num { color: #9aa7b8; font-size: 12px; }
.wmd-row.active .wmd-ic { background: #1f7ae0; color: #fff; }
.wmd-row.active .wmd-title { color: #1f7ae0; }

/* ---- MISSION / VISION (tabbed) ---- */
.ab-mv { background: linear-gradient(120deg, #062a52 0%, #0a3a66 100%); padding: 44px 0; }
.ab-mv-inner { max-width: 1150px; }
.ab-mv-img { width: 100%; height: 340px; object-fit: cover; border-radius: 18px; box-shadow: 0 22px 48px rgba(0, 0, 0, .3); }
.ab-mv-h2 { color: #fff; font-size: 32px; font-weight: 600; line-height: 1.25; }
.ab-mv-tabs { display: flex; gap: 32px; margin: 26px 0 20px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.mv-tab { cursor: pointer; padding-bottom: 8px; font-weight: 600; font-size: 15px; color: #9fc2e8; border-bottom: 2px solid transparent; transition: .2s; }
.mv-tab.active { color: #fff; border-bottom-color: #1f7ae0; }
.ab-mv-text { color: #c4d6ec; font-size: 14.5px; line-height: 1.85; margin: 0; }
.ab-btn-mt { margin-top: 26px; }

@media (max-width: 575.98px) {
  .ab-collage { height: 420px; }
  .ab-impact-h2 { font-size: 30px; }
}