/* ── About Hero ───────────────────────────────────── */
.about-hero {
  background: linear-gradient(135deg, var(--color-navy-dark, #111D33) 0%, var(--color-navy, #1B2B4B) 60%, #243769 100%);
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C9A84C' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.about-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.about-hero-text h1 {
  color: #fff;
  margin-bottom: 1rem;
  text-align: left;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.2;
}
.about-hero-text p {
  color: rgba(255,255,255,0.85);
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  text-align: left;
}
.about-hero-image {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
}
.about-hero-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.about-hero .breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  padding: 0.6rem 1.2rem;
  border-radius: 50px;
  font-size: 0.85rem;
  color: #ffffff;
}
.about-hero .breadcrumb a {
  color: #ffffff;
  text-decoration: none;
}
.about-hero .breadcrumb a:hover {
  color: var(--color-gold, #C9A84C);
}
.about-hero .breadcrumb span {
  color: var(--color-gold, #C9A84C);
  font-weight: 600;
}
@media (max-width: 900px) {
  .about-hero { padding: 4rem 0 3rem; }
  .about-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-hero-text h1, .about-hero-text p { text-align: center; }
  .about-hero-image { margin: 0 auto; width: 100%; max-width: 500px; }
  .about-hero .breadcrumb { margin: 0 auto 1.5rem auto; display: flex; width: max-content; }
  .about-hero-text .badge { margin: 0 auto 1.5rem auto !important; display: flex !important; width: max-content; }
  .about-hero-text > div[style*="display:flex"] { justify-content: center; }
}

/* ── Mission Section ─────────────────────────────── */
.mission-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:var(--space-16);align-items:start}
.mission-visual-col{position:relative;display:flex;flex-direction:column;gap:var(--space-4)}
.mission-image-wrapper{border-radius:var(--radius-2xl);overflow:hidden;box-shadow:0 24px 48px rgba(17,29,51,0.12)}
.mission-image-wrapper img{width:100%;height:auto;display:block;object-fit:cover}
.arabic-quote-card{background:var(--color-white);padding:var(--space-5) var(--space-6);border-radius:var(--radius-xl);box-shadow:0 16px 40px rgba(17,29,51,0.10);border:1px solid var(--color-cream-dark);border-top:4px solid var(--color-gold);margin-top:-2rem;position:relative;z-index:2}
.arabic-quote-card__verse{font-size:1.35rem;color:var(--color-navy);line-height:1.9;margin-bottom:var(--space-2);text-align:right}
.arabic-quote-card__translation{font-size:var(--text-sm);color:var(--color-text-secondary);font-style:italic;margin-bottom:var(--space-1)}
.arabic-quote-card__source{font-size:var(--text-xs);color:var(--color-gold-dark);font-weight:600;text-transform:uppercase;letter-spacing:0.05em;display:block}
.mission-text h2{font-size:var(--text-3xl);color:var(--color-navy);margin-bottom:var(--space-4);line-height:1.25}
.mission-text__lead{font-size:var(--text-lg);color:var(--color-text-secondary);line-height:1.7;margin-bottom:var(--space-4);font-weight:500}
.mission-text p{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.8;margin-bottom:var(--space-3)}
.mission-text h3{font-size:1rem !important;color:var(--color-navy) !important;margin-top:1.1rem !important;margin-bottom:0.3rem !important}
@media(max-width:900px){.mission-layout{grid-template-columns:1fr;gap:var(--space-10)}.mission-visual-col{order:-1}}

/* ── Mission Trust Badges ────────────────────────── */
.mission-trust-badges{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.mission-trust-badge{display:flex;align-items:flex-start;gap:var(--space-3);background:var(--color-white);border:1px solid var(--color-cream-dark);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);transition:border-color var(--transition)}
.mission-trust-badge:hover{border-color:var(--color-gold)}
.mission-trust-badge__icon{flex-shrink:0;width:36px;height:36px;background:rgba(201,168,76,0.1);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center}
.mission-trust-badge strong{font-size:var(--text-sm);font-weight:600;color:var(--color-navy);display:block;margin-bottom:2px}
.mission-trust-badge span{font-size:var(--text-xs);color:var(--color-text-secondary);line-height:1.4;display:block}
@media(max-width:900px){.mission-trust-badges{display:none}}

/* ── Stats Band ───────────────────────────────────── */
.stats-band{background:linear-gradient(135deg,var(--color-navy-dark) 0%,var(--color-navy) 100%);padding:var(--space-12) 0}
.stats-band__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-6);text-align:center}
.stat-item__number{font-family:var(--font-display);font-size:var(--text-5xl);font-weight:700;color:var(--color-gold);line-height:1;margin-bottom:var(--space-1);display:block}
.stat-item__label{font-size:var(--text-xs);color:rgba(255,255,255,0.7);font-weight:600;text-transform:uppercase;letter-spacing:0.06em;display:block}
@media(max-width:900px){.stats-band__grid{grid-template-columns:repeat(3,1fr);gap:var(--space-5)}}
@media(max-width:640px){.stats-band__grid{grid-template-columns:repeat(2,1fr);gap:var(--space-6)}}

/* ── Values Grid ─────────────────────────────────── */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.value-card{background:var(--color-white);border:1px solid var(--color-cream-dark);border-radius:var(--radius-xl);padding:var(--space-6);position:relative;overflow:hidden;transition:all var(--transition)}
.value-card:hover{border-color:var(--color-gold);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.value-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-gold),var(--color-gold-light));transform:scaleX(0);transition:transform var(--transition)}
.value-card:hover::before{transform:scaleX(1)}
.value-card__icon{width:48px;height:48px;background:rgba(201,168,76,0.1);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--color-gold-dark);margin-bottom:var(--space-4)}
.value-card h3{font-size:var(--text-base);font-weight:600;color:var(--color-navy);margin-bottom:var(--space-2)}
.value-card p{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.65;margin:0}
@media(max-width:1024px){.values-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.values-grid{grid-template-columns:1fr}}

/* ── Team Grid ───────────────────────────────────── */
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);}
.team-card{display:flex;align-items:flex-start;gap:var(--space-4);background:var(--color-white);border:1px solid var(--color-cream-dark);border-radius:var(--radius-xl);padding:var(--space-5);transition:all var(--transition)}
.team-card:hover{border-color:var(--color-gold);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.team-card__avatar{width:60px;height:60px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--color-navy),var(--color-navy-light));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:var(--text-base);font-weight:700;color:var(--color-gold);flex-shrink:0;box-shadow:var(--shadow-sm)}
.team-card__body{flex:1;min-width:0}
.team-card__name{font-size:var(--text-base);font-weight:600;color:var(--color-navy);margin-bottom:2px;line-height:1.3}
.team-card__role{font-size:var(--text-xs);color:var(--color-gold-dark);font-weight:600;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:var(--space-2);display:block}
.team-card__bio{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.6;margin-bottom:var(--space-3)}
.team-card__link{font-size:var(--text-sm);font-weight:600;color:var(--color-navy);text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:color var(--transition),gap var(--transition)}
.team-card__link:hover{color:var(--color-gold-dark);gap:8px}
@media(max-width:768px){.team-grid{grid-template-columns:1fr}}

/* ── About CTA Section ───────────────────────────── */
.about-cta-section{background:linear-gradient(135deg,var(--color-navy-dark) 0%,var(--color-navy) 60%,#1e3f6b 100%);padding:var(--space-20) 0;position:relative;overflow:hidden}
.about-cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(201,168,76,0.08) 0%,transparent 60%);pointer-events:none}
.about-cta-inner{max-width:640px;margin:0 auto;text-align:center;position:relative;z-index:1}
.about-cta-badge{display:inline-flex;align-items:center;gap:var(--space-2);background:rgba(201,168,76,0.15);border:1px solid rgba(201,168,76,0.3);color:var(--color-gold);font-size:var(--text-xs);font-weight:700;padding:var(--space-1) var(--space-4);border-radius:var(--radius-full);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:var(--space-5)}
.about-cta-title{font-size:var(--text-4xl);color:var(--color-white);margin-bottom:var(--space-4);line-height:1.2}
.about-cta-text{font-size:var(--text-base);color:rgba(255,255,255,0.8);line-height:1.7;margin-bottom:var(--space-8);max-width:520px;margin-left:auto;margin-right:auto}
.about-cta-actions{display:flex;align-items:center;justify-content:center;gap:var(--space-5);flex-wrap:wrap;margin-bottom:var(--space-6)}
.about-cta-link{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);font-weight:600;color:rgba(255,255,255,0.8);text-decoration:none;transition:color var(--transition),gap var(--transition)}
.about-cta-link:hover{color:var(--color-gold);gap:10px}
.about-cta-note{display:flex;align-items:center;justify-content:center;gap:var(--space-2);font-size:var(--text-xs);color:rgba(255,255,255,0.5)}
.about-cta-note svg{color:var(--color-gold);opacity:0.7;flex-shrink:0}
@media(max-width:640px){.about-cta-title{font-size:var(--text-3xl)}.about-cta-actions{flex-direction:column;gap:var(--space-4)}}