/* =========================================================================
   ABOUT US — PROFESSIONAL LAYER (matches the home & master-class dark/gold
   system). Loaded last on /about-us/.
   ========================================================================= */
:root {
  --ab-gold: #e9b965;
  --ab-gold-2: #f6d389;
  --ab-ink: #13100c;
  --ab-head: var(--font-heading, 'Poppins', system-ui, sans-serif);
}

/* ── Hero: dark cinematic, same family as the home/master-class heroes ── */
main .ab-hero {
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(233, 185, 101, .16), transparent 70%),
    radial-gradient(45% 40% at 90% 90%, rgba(37, 99, 235, .06), transparent 70%),
    linear-gradient(180deg, #0e0b07 0%, var(--ab-ink) 100%) !important;
  border-bottom: 1px solid rgba(233, 185, 101, .22);
  color: #fff;
}
main .ab-hero.about-hero-texture::before { opacity: .14; filter: invert(1) sepia(1) saturate(.6); }
main .ab-hero > .pointer-events-none { display: none; }
main .ab-hero { padding-bottom: 88px !important; }
.ab-nowrap { white-space: nowrap; }

main .ab-hero .about-hero-badge {
  background: rgba(233, 185, 101, .08);
  border-color: rgba(233, 185, 101, .35);
  color: var(--ab-gold-2);
}
main .ab-hero h1 { color: #fff !important; font-family: var(--ab-head); text-wrap: balance; }
/* restore the bright gold shimmer on dark (site.css darkens it for light .text-ink headings) */
main .ab-hero h1 .text-gold-gradient:not(#qm-x):not(#ab-x) {
  background-image: linear-gradient(110deg, #d8a153 0%, #f5c879 25%, #fff1c9 50%, #f5c879 75%, #d8a153 100%) !important;
}
main .ab-hero p { color: #cbd5e1 !important; }
main .ab-hero p strong { color: #fff; }

.ab-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.ab-btn-gold,
.ab-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: 14px;
  font-weight: 700; font-size: 15.5px; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.ab-btn-gold { color: #1a1205 !important; background: linear-gradient(135deg, var(--ab-gold-2), #d39a3f); box-shadow: 0 14px 30px -12px rgba(233, 185, 101, .65); }
.ab-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(233, 185, 101, .85); }
.ab-btn-ghost { color: #fff !important; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .2); }
.ab-btn-ghost:hover { background: rgba(255, 255, 255, .1); }

/* Stats: glass tiles on dark */
main .ab-hero .ab-stats > div {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
}
main .ab-hero .ab-stats > div:hover { border-color: rgba(233, 185, 101, .35) !important; }
main .ab-hero .ab-stats > div > div:first-child { color: var(--ab-gold) !important; }
main .ab-hero .ab-stats > div > div:nth-child(2) { color: #fff !important; font-family: var(--ab-head); white-space: nowrap; }
main .ab-hero .ab-stats > div > div:last-child { color: #94a3b8 !important; }

/* Infrastructure cards: gold line icons instead of emoji */
main .ab-icon { color: #a8701f; background: linear-gradient(145deg, #fff6e2, #f8e6c2) !important; }
main .ab-icon svg { width: 24px; height: 24px; }

/* Consistent section heading rhythm with the rest of the site */
main section h2 { text-wrap: balance; }

/* ── Mobile (most visitors) ── */
@media (max-width: 760px) {
  main .ab-hero { padding-bottom: 56px !important; }
  main .ab-hero h1 { font-size: clamp(28px, calc((100vw - 32px) / 10.6), 44px) !important; line-height: 1.1 !important; }
  main .ab-hero p { font-size: 16px !important; }
  .ab-hero-actions { flex-direction: column; margin-top: 24px; }
  .ab-btn-gold, .ab-btn-ghost { width: 100%; }

  main .ab-hero .ab-stats { gap: 10px !important; margin-top: 32px !important; }
  main .ab-hero .ab-stats > div { padding: 14px !important; border-radius: 14px !important; }
  main .ab-hero .ab-stats > div > div:first-child { font-size: 9.5px !important; letter-spacing: .1em !important; }
  main .ab-hero .ab-stats > div > div:nth-child(2) { font-size: clamp(19px, 5.6vw, 24px) !important; margin-top: 6px !important; white-space: normal; }
  main .ab-hero .ab-stats > div > div:last-child { font-size: 12px !important; line-height: 1.4 !important; }

  /* Tighter cards so the page doesn't feel endless on a phone */
  main section .rounded-2xl.p-6,
  main section [class*="p-6"][class*="rounded"],
  main section [class*="p-7"][class*="rounded"],
  main section [class*="p-8"][class*="rounded"] { padding: 18px !important; }
  main section [class*="rounded"] h3 { margin-top: 10px !important; }
  main section.py-20, main section[class*="py-20"] { padding-top: 56px !important; padding-bottom: 56px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-btn-gold:hover { transform: none; }
}

/* Eyebrow lives inside the H1 for SEO (academy name + city) but keeps its badge look */
main .ab-hero h1 .ab-h1-kicker {
  display: table; margin: 0 auto 24px;
  font-family: Inter, system-ui, sans-serif; font-weight: 700; line-height: 1.5;
  -webkit-text-fill-color: currentColor;
}

/* Eyebrow lives inside the H1 for SEO (academy name + city) but keeps its badge look */
main .ab-hero h1 .ab-h1-kicker {
  display: table; margin: 0 auto 24px;
  font-family: Inter, system-ui, sans-serif; font-weight: 700; line-height: 1.5;
}

/* Desktop/tablet: headline on exactly two lines — "Empowering the Next Generation of" / "Visual Storytellers." */
@media (min-width: 768px) {
  main .ab-hero .max-w-4xl { max-width: 1200px !important; }
  main .ab-hero .max-w-4xl > p, main .ab-hero .ab-stats { max-width: 56rem; margin-left: auto; margin-right: auto; }
  main .ab-hero h1:not(#ab-x) { font-size: clamp(34px, calc((100vw - 64px) / 17.5), 64px) !important; }
  main .ab-hero h1 .ab-l1, main .ab-hero h1 .ab-nowrap { display: block; white-space: nowrap; }
}