/* ==========================================================================
   about.css — Access Level Up | About Page Styles
   Path: wp-content/themes/maaz-developer/css/about.css
   ========================================================================== */

/* ── CSS VARIABLES (scoped — style.css .ba-home mein hain, yahan .alu-about ke liye) */
.alu-about {
  --ba-purple:      #149a8e;
  --ba-purple-600:  #0f8579;
  --ba-purple-700:  #1e3c4d;
  --ba-purple-deep: #16313f;
  --ba-violet-band: #21465a;
  --ba-lav-50:      #f1f7f6;
  --ba-lav-100:     #e2efed;
  --ba-lav-200:     #c7e1dd;
  --ba-ink:         #173140;
  --ba-body:        #4a5b62;
  --ba-line:        #d8e8e5;
  --ba-paper:       #ffffff;
  --ba-radius:      14px;
  --ba-radius-sm:   10px;
  --ba-shadow:      0 18px 40px -18px rgba(20,49,63,.26);
  --ba-shadow-sm:   0 8px 22px -12px rgba(20,49,63,.22);
  --ba-font-head:   'Poppins', system-ui, sans-serif;
  --ba-font-body:   'Inter', system-ui, sans-serif;
  font-family: var(--ba-font-body);
  color: var(--ba-body);
}

/* ── SHARED UTILS ─────────────────────────────────────────────────────────── */
.ab-wrap        { max-width: 1160px; margin-inline: auto; padding-inline: 24px; }
.ab-section     { padding: 88px 0; }
.ab-center      { text-align: center; }

.ab-eyebrow {
  font-family: var(--ba-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ba-purple);
  margin-bottom: 14px;
}
.ab-eyebrow-light { color: rgba(255,255,255,.7); }

/* ── 1. HERO ──────────────────────────────────────────────────────────────── */
.ab-hero {
  position: relative;
  background: var(--ba-purple-deep);
  color: #fff;
  padding: 110px 0 90px;
  overflow: hidden;
  text-align: center;
}

.ab-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ab-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .18;
}
.ab-blob-1 {
  width: 520px; height: 520px;
  background: var(--ba-purple);
  top: -140px; left: -120px;
}
.ab-blob-2 {
  width: 400px; height: 400px;
  background: #149a8e;
  bottom: -100px; right: -80px;
}

.ab-hero .ab-wrap   { position: relative; z-index: 1; max-width: 820px; }
.ab-hero .ab-eyebrow { color: rgba(255,255,255,.6); margin-bottom: 18px; }

.ab-hero h1 {
  font-family: var(--ba-font-head);
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: 22px;
}
.ab-hero h1 span { color: var(--ba-purple); }

.ab-hero-sub {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255,255,255,.75);
  max-width: 640px;
  margin: 0 auto 36px;
}

.ab-hero-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* scroll indicator */
.ab-hero-scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
}
.ab-hero-scroll span {
  display: block;
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
  margin: auto;
  animation: ab-scroll-drop 1.6s ease-in-out infinite;
}
@keyframes ab-scroll-drop {
  0%   { opacity: 1; transform: scaleY(1)   translateY(0); }
  100% { opacity: 0; transform: scaleY(.4)  translateY(24px); }
}

/* ── 2. MISSION ───────────────────────────────────────────────────────────── */
.ab-mission { background: #fff; }

.ab-mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.ab-mission-left h2 {
  font-family: var(--ba-font-head);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: var(--ba-ink);
  letter-spacing: -.02em;
  margin-bottom: 20px;
  line-height: 1.15;
}
.ab-mission-left p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ba-body);
  margin-bottom: 16px;
}

.ab-mission-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.ab-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ba-lav-100);
  color: var(--ba-purple);
  font-family: var(--ba-font-head);
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--ba-lav-200);
}
.ab-badge-pill svg { width: 14px; height: 14px; }

.ab-story-card {
  background: var(--ba-lav-50);
  border: 1px solid var(--ba-line);
  border-radius: var(--ba-radius);
  padding: 36px 32px;
  margin-bottom: 20px;
}

.ab-story-icon {
  width: 52px; height: 52px;
  background: var(--ba-lav-100);
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--ba-purple);
  margin-bottom: 18px;
}
.ab-story-icon svg { width: 26px; height: 26px; }

.ab-story-card h3 {
  font-family: var(--ba-font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--ba-ink);
  margin-bottom: 12px;
}
.ab-story-card p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ba-body);
  margin-bottom: 12px;
}
.ab-story-card p:last-child { margin-bottom: 0; }

.ab-story-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ab-mini-stat {
  background: #fff;
  border: 1px solid var(--ba-line);
  border-radius: var(--ba-radius-sm);
  padding: 18px 14px;
  text-align: center;
  box-shadow: var(--ba-shadow-sm);
}
.ab-mini-stat strong {
  display: block;
  font-family: var(--ba-font-head);
  font-size: 20px;
  font-weight: 800;
  color: var(--ba-purple);
  margin-bottom: 4px;
}
.ab-mini-stat span {
  font-size: 12px;
  color: var(--ba-body);
}

/* ── 3. IMPACT STATS ──────────────────────────────────────────────────────── */
.ab-impact { background: var(--ba-violet-band); }

.ab-impact .ab-eyebrow { color: rgba(255,255,255,.6); }
.ab-impact h2 {
  font-family: var(--ba-font-head);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  margin-bottom: 52px;
}

.ab-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.ab-stat {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--ba-radius);
  padding: 36px 24px;
  text-align: center;
  backdrop-filter: blur(8px);
  transition: background .2s ease, transform .2s ease;
}
.ab-stat:hover {
  background: rgba(255,255,255,.12);
  transform: translateY(-4px);
}

.ab-stat-icon {
  width: 54px; height: 54px;
  background: rgba(20,154,142,.25);
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  color: #5ed4c8;
}
.ab-stat-icon svg { width: 26px; height: 26px; }

.ab-stat-number {
  font-family: var(--ba-font-head);
  font-size: 48px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -.03em;
}
.ab-stat-number span { color: var(--ba-purple); font-size: 36px; }

.ab-stat-label {
  font-size: 13.5px;
  color: rgba(255,255,255,.65);
  line-height: 1.4;
}

/* ── 4. VALUES ────────────────────────────────────────────────────────────── */
.ab-values { background: var(--ba-lav-50); }

.ab-values h2 {
  font-family: var(--ba-font-head);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: var(--ba-ink);
  letter-spacing: -.02em;
  margin-bottom: 52px;
}

.ab-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ab-value-card {
  background: #fff;
  border: 1px solid var(--ba-line);
  border-radius: var(--ba-radius);
  padding: 34px 28px;
  box-shadow: var(--ba-shadow-sm);
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ab-value-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ba-shadow);
}

.ab-value-num {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--ba-font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--ba-lav-200);
  letter-spacing: .04em;
}

.ab-value-ic {
  width: 50px; height: 50px;
  background: var(--ba-lav-100);
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--ba-purple);
  margin-bottom: 18px;
}
.ab-value-ic svg { width: 24px; height: 24px; }

.ab-value-card h3 {
  font-family: var(--ba-font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--ba-ink);
  margin-bottom: 10px;
}
.ab-value-card p {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--ba-body);
}

/* ── 5. PROCESS ───────────────────────────────────────────────────────────── */
.ab-process { background: #fff; }

.ab-process-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 72px;
  align-items: start;
}

.ab-process-left h2 {
  font-family: var(--ba-font-head);
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 800;
  color: var(--ba-ink);
  letter-spacing: -.02em;
  margin-bottom: 16px;
  line-height: 1.18;
}
.ab-process-left p {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ba-body);
  margin-bottom: 28px;
}
.ab-process-left .ba-btn svg { width: 16px; height: 16px; }

.ab-process-steps { display: flex; flex-direction: column; gap: 0; }

.ab-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--ba-line);
  transition: background .15s;
}
.ab-step:first-child { padding-top: 0; }
.ab-step:last-child  { border-bottom: none; }

.ab-step-num {
  flex-shrink: 0;
  width: 38px; height: 38px;
  background: var(--ba-lav-100);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-family: var(--ba-font-head);
  font-size: 15px;
  font-weight: 800;
  color: var(--ba-purple);
}

.ab-step-body h4 {
  font-family: var(--ba-font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--ba-ink);
  margin-bottom: 6px;
}
.ab-step-body p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ba-body);
  margin: 0;
}

/* ── 6. LOCATION ──────────────────────────────────────────────────────────── */
.ab-location { background: var(--ba-lav-50); }

.ab-location-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 56px;
  align-items: stretch;
}

.ab-location-info h2 {
  font-family: var(--ba-font-head);
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 800;
  color: var(--ba-ink);
  letter-spacing: -.02em;
  margin-bottom: 16px;
  line-height: 1.18;
}
.ab-location-info > p {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ba-body);
  margin-bottom: 32px;
}

.ab-contact-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}
.ab-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ab-contact-ic {
  flex-shrink: 0;
  width: 42px; height: 42px;
  background: var(--ba-lav-100);
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--ba-purple);
  margin-top: 2px;
}
.ab-contact-ic svg { width: 20px; height: 20px; }
.ab-contact-item strong {
  display: block;
  font-family: var(--ba-font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--ba-ink);
  margin-bottom: 3px;
}
.ab-contact-item span {
  font-size: 14.5px;
  color: var(--ba-body);
  line-height: 1.5;
}
.ab-contact-item a {
  color: var(--ba-purple);
  text-decoration: none;
  font-weight: 500;
}
.ab-contact-item a:hover { text-decoration: underline; }

.ab-map-wrap {
  border-radius: var(--ba-radius);
  overflow: hidden;
  box-shadow: var(--ba-shadow);
  min-height: 420px;
  border: 1px solid var(--ba-line);
}
.ab-map {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: block;
  border: none;
}

/* ── 7. CTA BAND ──────────────────────────────────────────────────────────── */
.ab-cta {
  background: var(--ba-violet-band);
  padding: 80px 0;
}

.ab-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.ab-cta-text { flex: 1; }
.ab-cta-text .ab-eyebrow { margin-bottom: 12px; }
.ab-cta-text h2 {
  font-family: var(--ba-font-head);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  margin-bottom: 14px;
  line-height: 1.15;
}
.ab-cta-text p {
  font-size: 15.5px;
  color: rgba(255,255,255,.72);
  line-height: 1.65;
  max-width: 520px;
  margin: 0;
}

.ab-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0;
}

.ab-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.8);
  font-family: var(--ba-font-head);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.25);
  transition: color .15s, border-color .15s;
}
.ab-cta-link svg { width: 14px; height: 14px; }
.ab-cta-link:hover { color: #fff; border-color: rgba(255,255,255,.6); }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 1024px) {

  .ab-mission-grid    { grid-template-columns: 1fr; gap: 40px; }
  .ab-stats-grid      { grid-template-columns: repeat(2, 1fr); }
  .ab-values-grid     { grid-template-columns: repeat(2, 1fr); }
  .ab-process-grid    { grid-template-columns: 1fr; gap: 40px; }
  .ab-location-grid   { grid-template-columns: 1fr; }
  .ab-cta-inner       { flex-direction: column; align-items: flex-start; }

}

@media (max-width: 680px) {

  .ab-section       { padding: 60px 0; }
  .ab-hero          { padding: 80px 0 70px; }

  .ab-hero h1       { font-size: 32px; }
  .ab-hero-sub      { font-size: 16px; }
  .ab-hero-ctas     { flex-direction: column; align-items: center; }

  .ab-stats-grid    { grid-template-columns: 1fr 1fr; gap: 14px; }
  .ab-stat          { padding: 24px 16px; }
  .ab-stat-number   { font-size: 36px; }

  .ab-values-grid   { grid-template-columns: 1fr; }
  .ab-story-stat-row { grid-template-columns: repeat(3, 1fr); }

  .ab-location-grid { grid-template-columns: 1fr; }
  .ab-map-wrap      { min-height: 300px; }
  .ab-map           { min-height: 300px; }

  .ab-cta-actions   { width: 100%; }
  .ab-cta-actions .ba-btn { width: 100%; justify-content: center; }

}

@media (max-width: 400px) {
  .ab-stats-grid    { grid-template-columns: 1fr; }
  .ab-story-stat-row { grid-template-columns: 1fr 1fr; }
}