/* ==========================================================================
   About page [ax_about] — Tailwind-template structure (Studio / Spotlight):
   generous whitespace, oversized display type, ring-1 cards, rounded-3xl dark
   panel, ruled stats. Loaded only on /about/.
   ========================================================================== */

/* Host Elementor section: let the component own the full width + spacing */
.ax-about-host { padding: 0 !important; }
.ax-about-host > .elementor-container { max-width: none !important; }
.ax-about-host .elementor-column > .elementor-element-populated,
.ax-about-host .elementor-widget-wrap { padding: 0 !important; }

.ax-ab { --ab-ring: 0 0 0 1px rgba(20,22,25,.08); background: #fff; color: var(--ax-ink); }
.ax-ab-wrap { max-width: 1200px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.ax-ab-eyebrow { margin: 0 0 1rem; font: 700 .78rem/1 var(--ax-font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ax-ember-text); }
.ax-ab-eyebrow--light { color: var(--ax-ember); }
.ax-ab-h1 { margin: 0; font: 800 clamp(2.4rem, 5.2vw, 4.1rem)/1.04 var(--ax-font-display); letter-spacing: -.035em; color: var(--ax-graphite); text-wrap: balance; }
.ax-ab-h2 { margin: 0; font: 800 clamp(1.9rem, 3.6vw, 2.9rem)/1.1 var(--ax-font-display); letter-spacing: -.03em; color: var(--ax-graphite); text-wrap: balance; }
.ax-ab-h2--light { color: #fff !important; }
.ax-ab-lead { margin: 1.6rem 0 0; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.75; color: var(--ax-fog); max-width: 38rem; }

/* Buttons */
.ax-ab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 2.2rem; }
.ax-ab-btn { display: inline-flex; align-items: center; gap: .45rem; font: 700 .95rem/1.2 var(--ax-font-body); border-radius: .75rem;
  padding: .85rem 1.3rem; border: 1px solid transparent; text-decoration: none !important; transition: all .2s var(--ax-ease); }
.ax-ab-btn--solid { background: var(--ax-graphite); color: #fff !important; box-shadow: 0 10px 24px -10px rgba(20,22,25,.6); }
.ax-ab-btn--solid:hover { background: var(--ax-ember-text); transform: translateY(-1px); }
.ax-ab-btn--link { padding-inline: 0; color: var(--ax-graphite) !important; }
.ax-ab-btn--link span { transition: transform .2s var(--ax-ease); }
.ax-ab-btn--link:hover span { transform: translateX(4px); }
.ax-ab-btn--peach { background: var(--ax-ember); color: var(--ax-graphite) !important; }
.ax-ab-btn--peach:hover { background: #fff; }
.ax-ab-btn--ghost { color: #fff !important; border-color: rgba(255,255,255,.4); }
.ax-ab-btn--ghost:hover { border-color: var(--ax-ember); color: var(--ax-ember) !important; }

/* 1. Hero — text left, offset image tiles right */
.ax-ab-hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4rem);
  background: radial-gradient(60% 60% at 85% 10%, rgba(228,101,42,.10), transparent 70%), linear-gradient(180deg, #F6F5F1 0%, #fff 100%); }
.ax-ab-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.ax-ab-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.ax-ab-tiles-col { display: flex; flex-direction: column; gap: 1rem; }
.ax-ab-tiles-col--1 { padding-top: 7rem; }
.ax-ab-tiles-col--3 { padding-top: 3.5rem; }
.ax-ab-tiles span { display: block; aspect-ratio: 2 / 3; border-radius: 1rem; background-size: cover; background-position: center;
  background-color: #EBE8E0; box-shadow: var(--ab-ring), 0 18px 40px -18px rgba(20,22,25,.35); }
@media (max-width: 960px) {
  .ax-ab-hero-grid { grid-template-columns: 1fr; }
  .ax-ab-tiles { max-width: 34rem; }
  .ax-ab-tiles-col--1 { padding-top: 4rem; }
  .ax-ab-tiles-col--3 { padding-top: 2rem; }
}

/* 2. Stats — ruled row */
.ax-ab-stats-sec { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); }
.ax-ab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin: 0; }
.ax-ab-stats > div { display: flex; flex-direction: column-reverse; gap: .5rem; border-left: 2px solid var(--ax-ember); padding-left: 1.2rem; }
.ax-ab-stats dd { margin: 0; font: 800 clamp(1.9rem, 3.2vw, 2.6rem)/1 var(--ax-font-display); letter-spacing: -.03em; color: var(--ax-graphite); }
.ax-ab-stats dt { font-size: .92rem; line-height: 1.5; color: var(--ax-fog); }
@media (max-width: 900px) { .ax-ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 3. Story — heading left, prose right */
.ax-ab-story { padding-block: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid #EFECE4; }
.ax-ab-story-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); }
.ax-ab-story-body p { margin: 0 0 1.2rem; font-size: 1.05rem; line-height: 1.8; color: var(--ax-fog); }
.ax-ab-quote { margin: 2rem 0 0; padding: 1.6rem 1.8rem; border-radius: 1.25rem; background: #F6F5F1; box-shadow: inset 0 0 0 1px #E8E4DA; position: relative; }
.ax-ab-quote::before { content: "\201C"; position: absolute; top: -.35rem; left: 1.2rem; font: 800 4rem/1 var(--ax-font-display); color: var(--ax-ember); }
.ax-ab-quote blockquote { margin: 0; padding: .6rem 0 0; border: 0; font: 700 1.25rem/1.45 var(--ax-font-display); letter-spacing: -.01em; color: var(--ax-graphite); font-style: normal; }
@media (max-width: 860px) { .ax-ab-story-grid { grid-template-columns: 1fr; } }

/* 4. Principles — dark rounded inset panel */
.ax-ab-values-sec { padding-inline: clamp(.5rem, 2vw, 1.5rem); }
.ax-ab-values { border-radius: clamp(1.5rem, 3vw, 2.5rem); padding-block: clamp(3.5rem, 7vw, 6rem); color: #fff;
  background: radial-gradient(50% 60% at 100% 0%, rgba(228,101,42,.35), transparent 70%),
              radial-gradient(40% 50% at 0% 100%, rgba(228,101,42,.14), transparent 70%),
              linear-gradient(160deg, #22252B 0%, #141619 50%, #0D0F11 100%); }
.ax-ab-values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6rem 2.2rem; margin: 3rem 0 0; }
.ax-ab-values-grid dt { display: flex; align-items: center; gap: .8rem; font: 700 1.1rem/1.3 var(--ax-font-display); color: #fff; }
.ax-ab-values-grid dd { margin: .7rem 0 0; font-size: .95rem; line-height: 1.7; color: #B5B8BD; }
.ax-ab-values-icon { flex: none; width: 2.5rem; height: 2.5rem; border-radius: .75rem; display: grid; place-items: center;
  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: var(--ax-ember); }
.ax-ab-values-icon svg { width: 1.2rem; height: 1.2rem; }
@media (max-width: 960px) { .ax-ab-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ax-ab-values-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* 5. Leadership — Spotlight-style profile */
.ax-ab-team { padding-block: clamp(4rem, 8vw, 7rem); }
.ax-ab-person { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); margin-top: 3rem; align-items: start; }
.ax-ab-person + .ax-ab-person { padding-top: 3rem; border-top: 1px solid #EFECE4; }
.ax-ab-person-media { position: sticky; top: 7rem; }
.ax-ab-portrait { transform: rotate(2.5deg); border-radius: 1.5rem; overflow: hidden; aspect-ratio: 4 / 5; background: #EBE8E0;
  box-shadow: var(--ab-ring), 0 24px 48px -20px rgba(20,22,25,.45); }
.ax-ab-portrait-img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.ax-ab-portrait-initials { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  background: radial-gradient(70% 60% at 80% 10%, rgba(228,101,42,.45), transparent 70%), linear-gradient(160deg, #1E2126, #0D0F11); }
.ax-ab-portrait-initials span { font: 800 5rem/1 var(--ax-font-display); letter-spacing: -.02em; color: var(--ax-ember); }
.ax-ab-portrait-initials small { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #A9ADB3; }
.ax-ab-social { list-style: none; margin: 2.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.ax-ab-social a { display: inline-flex; align-items: center; gap: .8rem; font-size: .92rem; font-weight: 600; color: var(--ax-ink) !important; text-decoration: none !important; }
.ax-ab-social svg { width: 1.2rem; height: 1.2rem; color: var(--ax-fog); transition: color .2s var(--ax-ease); }
.ax-ab-social a:hover { color: var(--ax-ember-text) !important; }
.ax-ab-social a:hover svg { color: var(--ax-ember-text); }
.ax-ab-person-name { margin: 0; font: 800 clamp(1.8rem, 3vw, 2.4rem)/1.1 var(--ax-font-display); letter-spacing: -.03em; color: var(--ax-graphite); }
.ax-ab-person-cred { margin: .8rem 0 0; display: inline-block; font-size: .82rem; font-weight: 600; color: var(--ax-ink-2);
  background: #F3EEE6; border: 1px solid #E3E0D7; border-radius: 999px; padding: .35rem .8rem; }
.ax-ab-person-bio { margin-top: 1.8rem; }
.ax-ab-person-bio p { margin: 0 0 1.15rem; font-size: 1.02rem; line-height: 1.8; color: var(--ax-fog); }
@media (max-width: 860px) {
  .ax-ab-person { grid-template-columns: 1fr; }
  .ax-ab-person-media { position: static; max-width: 20rem; }
}

/* 6. CTA panel */
.ax-ab-cta-sec { padding-bottom: clamp(4rem, 8vw, 6rem); }
.ax-ab-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(2.2rem, 5vw, 3.5rem);
  border-radius: 1.75rem; color: #fff;
  background: radial-gradient(60% 90% at 100% 0%, rgba(228,101,42,.4), transparent 70%), linear-gradient(160deg, #22252B, #0D0F11);
  box-shadow: 0 30px 60px -30px rgba(20,22,25,.6); }
.ax-ab-cta h2 { margin: 0; font: 800 clamp(1.7rem, 3vw, 2.3rem)/1.15 var(--ax-font-display); letter-spacing: -.03em; color: #fff !important; }
.ax-ab-cta p { margin: .7rem 0 0; max-width: 34rem; color: #C9CCD1; line-height: 1.7; }
.ax-ab-cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Registration block (CAC) ---------- */
.ax-ab-reg-sec { padding-block: 0 clamp(3rem, 6vw, 5rem); }
.ax-ab-reg { display: flex; gap: 1.4rem; align-items: flex-start; padding: clamp(1.4rem, 3vw, 2rem); border-radius: 1.25rem; background: var(--ax-paper-warm); box-shadow: 0 0 0 1px rgba(20,22,25,.08); }
.ax-ab-reg-icon { flex: 0 0 auto; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .9rem; background: #fff; color: var(--ax-ember); box-shadow: 0 0 0 1px rgba(20,22,25,.08); }
.ax-ab-reg-icon svg { width: 1.5rem; height: 1.5rem; }
.ax-ab-reg-body .ax-ab-eyebrow { margin-bottom: .6rem; }
.ax-ab-reg-text { margin: 0 0 .8rem; color: var(--ax-text); line-height: 1.65; max-width: 60ch; }
.ax-ab-reg-line { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .95rem; color: var(--ax-graphite); }
.ax-ab-reg-line span { color: var(--ax-text); }
.ax-ab-reg .ax-ab-btn--link { margin-top: .6rem; }
.ax-ab-team-empty { color: var(--ax-text); }
@media (max-width: 600px) { .ax-ab-reg { flex-direction: column; } }
