/* About Us page (classic layout, refreshed) */
.ab-wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.ab-kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--secondary); margin: 0 0 1rem; }

/* Buttons */
.ab-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }
.ab-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.6rem; border-radius: 999px; font-weight: 600; font-size: 0.97rem; text-decoration: none; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease; }
.ab-btn-primary { background: var(--primary); color: #fff; border: 2px solid var(--primary); }
.ab-btn-primary:hover { background: #0f3a63; border-color: #0f3a63; transform: translateY(-1px); }
.ab-btn-ghost { color: var(--primary); border: 2px solid rgba(20, 74, 124, 0.25); background: transparent; }
.ab-btn-ghost:hover { border-color: var(--primary); }

/* Hero */
.ab-hero { padding: 9rem 0 4.5rem; }
.ab-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
.ab-hero-text h1 { font-size: clamp(2.3rem, 4.4vw, 3.5rem); line-height: 1.08; letter-spacing: -0.025em; color: #0f172a; margin: 0 0 1.5rem; }
.ab-hero-text p:not(.ab-kicker) { color: #475569; font-size: 1.05rem; line-height: 1.8; margin: 0 0 1rem; max-width: 560px; }

/* Orbit visual */
.ab-orbit { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; margin: 0 auto; }
.ab-orbit-ring { position: absolute; inset: 9%; border: 1px dashed rgba(20, 74, 124, 0.18); border-radius: 50%; animation: abSpin 60s linear infinite; }
.ab-orbit-ring-2 { inset: 22%; border-style: solid; border-color: rgba(59, 185, 159, 0.18); animation-duration: 90s; animation-direction: reverse; }
.ab-hub { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 20px 60px rgba(15, 23, 42, 0.10); display: flex; align-items: center; justify-content: center; }
.ab-hub-blob { position: absolute; width: 68%; height: 68%; background: linear-gradient(135deg, var(--secondary), #2a9d84); border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; animation: abMorph 9s ease-in-out infinite; opacity: 0.95; }
.ab-hub-text { position: relative; text-align: center; line-height: 1.1; }
.ab-hub-text span { display: block; font-size: 1rem; font-weight: 600; color: #fff; letter-spacing: 0.02em; margin-bottom: 0.3rem; }
.ab-hub-text strong { display: block; font-family: "Outfit", "Inter", sans-serif; font-size: 1.9rem; font-weight: 800; color: var(--primary); }
.ab-chip { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); font-size: 0.88rem; font-weight: 600; color: #0f172a; white-space: nowrap; animation: abFloat 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.ab-chip svg { width: 17px; height: 17px; color: #23977f; flex-shrink: 0; }
@keyframes abFloat { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 8px)); } }
@keyframes abMorph { 0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } 50% { border-radius: 60% 40% 35% 65% / 55% 60% 40% 45%; } }
@keyframes abSpin { to { transform: rotate(360deg); } }

/* Mission & vision */
.ab-mv { padding: 1.5rem 0 4.5rem; }
.ab-mv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.ab-mv-card { position: relative; overflow: hidden; padding: 2.5rem 2.5rem 2.6rem; border-radius: 20px; background: linear-gradient(135deg, #2aa38b 0%, #1b6f8c 55%, var(--primary) 100%); color: #fff; box-shadow: 0 14px 40px rgba(20, 74, 124, 0.18); }
.ab-mv-card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); }
.ab-mv-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(255, 255, 255, 0.16); margin-bottom: 1.4rem; }
.ab-mv-icon svg { width: 22px; height: 22px; }
.ab-mv-card h2 { font-size: 1.45rem; letter-spacing: -0.01em; margin: 0 0 0.7rem; color: #fff; }
.ab-mv-card p { margin: 0; font-size: 1.02rem; line-height: 1.75; color: rgba(255, 255, 255, 0.88); max-width: 480px; }

/* What we do */
.ab-do { padding: 3rem 0 6rem; }
.ab-do-head { text-align: center; max-width: 760px; margin: 0 auto 3rem; }
.ab-do-head h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em; color: #0f172a; margin: 0 0 1rem; }
.ab-do-head p:not(.ab-kicker) { color: #475569; font-size: 1.05rem; line-height: 1.75; margin: 0; }
.ab-do-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: #e2e8f0; border: 1px solid #e2e8f0; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(15, 23, 42, 0.06); }
.ab-do-item { background: #fff; padding: 2rem 1.75rem 2.2rem; transition: background 0.25s ease; }
.ab-do-item:hover { background: #fbfdfc; }
.ab-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(59, 185, 159, 0.12); color: #23977f; margin-bottom: 1.25rem; transition: background 0.25s ease, color 0.25s ease; }
.ab-icon svg { width: 22px; height: 22px; }
.ab-do-item:hover .ab-icon { background: var(--secondary); color: #fff; }
.ab-do-item h3 { font-size: 1.08rem; font-weight: 700; color: #0f172a; margin: 0 0 0.5rem; line-height: 1.35; }
.ab-do-item h3 a { color: inherit; text-decoration: none; }
.ab-do-item h3 a:hover { color: var(--primary); }
.ab-do-item p { margin: 0; color: #64748b; font-size: 0.95rem; line-height: 1.65; }
.ab-do-cta { text-align: center; margin-top: 2.5rem; }

/* Responsive */
@media (max-width: 1100px) {
  .ab-do-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .ab-hero { padding: 7.5rem 0 3rem; }
  .ab-hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .ab-orbit { max-width: 460px; }
}
@media (max-width: 640px) {
  .ab-mv-grid { grid-template-columns: 1fr; }
  .ab-mv-card { padding: 2rem 1.6rem; }
  .ab-do { padding: 2rem 0 4rem; }
  .ab-do-grid { grid-template-columns: 1fr; }
  .ab-do-item { padding: 1.6rem 1.5rem; }
  /* Orbit becomes hub + wrapped chips on small phones */
  .ab-orbit { aspect-ratio: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; max-width: none; }
  .ab-orbit-ring { display: none; }
  .ab-hub { position: relative; left: auto; top: auto; transform: none; width: 210px; margin: 0 auto 1.25rem; flex-basis: 100%; max-width: 210px; }
  .ab-chip { position: static; transform: none; animation: none; font-size: 0.82rem; padding: 0.5rem 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-orbit-ring, .ab-hub-blob, .ab-chip { animation: none; }
}