/* =================================================================
   ABOUT PAGE — bespoke styling (v3)
   Every colour, gradient and font references the dynamic theme
   tokens declared in css/stylenew.css. Changing a school's brand
   palette in  School Settings → Theme & Brand Colours  instantly
   re-skins the entire about page.

   Font sizes are kept in lock-step with the rest of the site
   (admissions.php uses .pg-hero / .pg-section-* / .pg-btn etc.
   from stylenew.css; the about page uses its own .ab-* classes
   but the size scale here mirrors that one — see comments next
   to each font-size rule).
   ================================================================= */

/* ---------- 1. Base & reveal animations ---------- */
.ab-page { background: var(--bg); color: var(--text); overflow-x: hidden; }
.ab-page .container { max-width: 124rem; margin: 0 auto; padding: 0 2.4rem; }

.ab-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.ab-reveal.is-in { opacity: 1; transform: none; }
.ab-reveal[data-delay="2"] { transition-delay: .12s; }
.ab-reveal[data-delay="3"] { transition-delay: .24s; }
.ab-reveal[data-delay="4"] { transition-delay: .36s; }
.ab-reveal[data-delay="5"] { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  .ab-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- 2. Hero ---------- */
/* Hero h1 size matches .pg-hero h1 in stylenew.css (clamp 3.2 → 5rem) */
.ab-hero {
  position: relative;
  padding: 9rem 0 12rem;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--white);
  isolation: isolate;
  overflow: hidden;
}
.ab-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ab-hero-bg .ab-orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .35;
  animation: ab-orb-float 18s ease-in-out infinite;
}
.ab-orb-1 { width: 380px; height: 380px; background: var(--primary-light); top: -120px; left: -100px; }
.ab-orb-2 { width: 460px; height: 460px; background: var(--accent);       bottom: -160px; right: -120px; animation-delay: -6s; }
.ab-orb-3 { width: 300px; height: 300px; background: var(--primary-light); top: 40%; left: 50%; animation-delay: -12s; }
.ab-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at center, var(--text) 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, var(--text) 30%, transparent 75%);
}
@keyframes ab-orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(30px, -40px) scale(1.08); }
}

.ab-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 6rem;
  align-items: center;
}
.ab-hero-text { color: var(--white); }

/* Hero eyebrow — mirrors .pg-tag */
.ab-tag {
  display: inline-flex; align-items: center; gap: .8rem;
  background: rgb(255 255 255 / .12);
  border: 1px solid rgb(255 255 255 / .18);
  color: var(--white);
  padding: .8rem 1.6rem;
  border-radius: var(--r-full);
  font-size: 1.3rem; font-weight: 600; letter-spacing: .4px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.ab-tag i { color: var(--gold); }

/* Hero h1 — same scale as .pg-hero h1 */
.ab-hero-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(3.2rem, 5vw, 5rem);
  line-height: 1.05;
  margin: 2.2rem 0 1.8rem;
  letter-spacing: -.025em;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .3);
}
.ab-hero-title .ab-line { display: block; }
.ab-hero-title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--gold) 0%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ab-hero-title .ab-mute { color: rgb(255 255 255 / .55); }

/* Hero lead — same scale as .pg-hero-lead */
.ab-hero-lead {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 1.7vw, 1.85rem);
  line-height: 1.65;
  color: rgb(255 255 255 / .88);
  max-width: 56rem;
  margin: 0 0 2.4rem;
}
.ab-hero-lead strong { color: var(--white); font-weight: 700; }
.ab-abbr { color: var(--gold); font-weight: 700; }

/* Stamps — same size as .pg-stamp (1.25rem) */
.ab-hero-stamps { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0 0 2.4rem; }
.ab-stamp {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .6rem 1.1rem;
  background: rgb(255 255 255 / .10);
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: var(--r-md);
  font-size: 1.25rem;
  color: rgb(255 255 255 / .88);
  font-weight: 600;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.ab-stamp i { color: var(--green-300); font-size: 1.1rem; }

.ab-hero-motto {
  display: inline-flex; align-items: center; gap: 1.2rem;
  margin-top: 1rem; padding: 1.2rem 1.8rem;
  background: rgba(var(--gold-rgb), .10);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  font-family: var(--font-serif);
  font-style: italic; font-size: 1.5rem; font-weight: 500;
  color: var(--cream);
}
.ab-hero-motto i { color: var(--gold); }

/* Hero card */
.ab-hero-card { perspective: 1000px; }
.ab-hero-card-inner {
  position: relative;
  background: rgb(255 255 255 / .06);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: var(--r-xl);
  padding: 3.2rem 3rem;
  box-shadow: var(--shadow-2xl);
  transform: rotate(-1.2deg);
  transition: transform .5s ease;
}
.ab-hero-card-inner:hover { transform: rotate(0); }
.ab-hero-card-ribbon {
  position: absolute; top: -1.4rem; left: 2.4rem;
  background: linear-gradient(135deg, var(--gold) 0%, var(--accent) 100%);
  color: var(--on-accent);
  font-weight: 800; font-size: 1.1rem; letter-spacing: 1.4px;
  padding: .6rem 1.4rem; border-radius: 6px;
  box-shadow: 0 8px 18px rgba(var(--gold-rgb), .4);
}
.ab-hero-card-name { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 800; line-height: 1.2; color: var(--white); }
.ab-hero-card-abbr { display: block; font-size: 1.4rem; color: var(--gold); margin-top: .2rem; font-weight: 600; }
.ab-hero-card-est {
  display: inline-block; margin-top: 1rem;
  font-size: 1.2rem; font-weight: 700; letter-spacing: 1.2px;
  color: var(--gold); text-transform: uppercase;
}
.ab-hero-card-list { list-style: none; margin: 2.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.ab-hero-card-list li {
  display: grid; grid-template-columns: 3.2rem 1fr auto;
  align-items: center; gap: 1.2rem;
  padding: 1rem 1.2rem;
  background: rgb(255 255 255 / .05);
  border: 1px solid rgb(255 255 255 / .08);
  border-radius: 1rem;
  font-size: 1.3rem;
}
.ab-hero-card-ico { width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center; background: rgba(var(--gold-rgb), .18); color: var(--gold); border-radius: .8rem; font-size: 1.4rem; }
.ab-hero-card-lbl { color: rgb(255 255 255 / .7); font-size: 1.3rem; font-weight: 600; }
.ab-hero-card-val { color: var(--white); font-weight: 700; font-size: 1.4rem; text-align: right; }
.ab-hero-card-foot { margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px dashed rgb(255 255 255 / .18); }
.ab-hero-card-tick { display: inline-flex; align-items: center; gap: .8rem; color: var(--gold); font-size: 1.3rem; font-weight: 600; }
.ab-hero-card-tick i { background: var(--gold); color: var(--on-accent); width: 1.8rem; height: 1.8rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; }

.ab-scroll-cue {
  position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  color: rgb(255 255 255 / .6);
}
.ab-scroll-cue span {
  display: block; width: 1.8rem; height: 1.8rem;
  border-bottom: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg);
  animation: ab-scroll 2s infinite;
}
.ab-scroll-cue span:nth-child(2) { animation-delay: .15s; }
.ab-scroll-cue span:nth-child(3) { animation-delay: .3s; opacity: .5; }
@keyframes ab-scroll {
  0%   { opacity: 0; transform: rotate(45deg) translate(-6px, -6px); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(45deg) translate(6px, 6px); }
}

/* ---------- Generic section ---------- */
.ab-sec { position: relative; padding: 8rem 0; }
.ab-sec-head { text-align: center; max-width: 72rem; margin: 0 auto 4.5rem; }

/* Section eyebrow — matches .pg-eyebrow */
.ab-eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .6rem 1.6rem;
  background: rgba(var(--primary-rgb), .08);
  color: var(--primary);
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-size: 1.25rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
}
.ab-eyebrow i { color: var(--accent); font-size: 1rem; }
.ab-eyebrow-2 { background: rgba(var(--primary-rgb), .10); color: var(--primary-light); }
.ab-eyebrow-3 { background: rgba(var(--accent-rgb),  .10); color: var(--accent-dark); }
.ab-eyebrow-4 { background: rgba(var(--gold-rgb),    .16); color: var(--gold-deep); }

/* Section title — same scale as .pg-section-title (clamp 2.6 → 4rem) */
.ab-sec-title {
  font-family: var(--font-heading);
  font-weight: 800; font-size: clamp(2.6rem, 4vw, 4rem);
  line-height: 1.1; margin: 1.4rem 0 1.4rem;
  letter-spacing: -.025em;
  color: var(--text);
}
.ab-sec-title em {
  font-style: italic;
  font-weight: 900;
  background: linear-gradient(135deg, var(--accent) 0%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Section sub — same scale as .pg-section-sub (1.55rem) */
.ab-sec-sub {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 68rem;
  margin: 0 auto;
}

/* ---------- 3. General About ---------- */
.ab-sec-general { background: var(--white); }
.ab-general-card {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 0;
  background: var(--white);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(var(--primary-rgb), .15);
  border: 1px solid rgba(var(--primary-rgb), .08);
}
.ab-general-photo {
  position: relative;
  min-height: 46rem;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  overflow: hidden;
}
.ab-general-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(1.05);
}
.ab-general-photo-badge {
  position: absolute; bottom: 2.4rem; left: 2.4rem;
  background: rgb(255 255 255 / .95);
  padding: 1.2rem 2rem;
  border-radius: 1.4rem;
  display: flex; flex-direction: column; gap: .2rem;
  box-shadow: var(--shadow-lg);
  transform: rotate(-3deg);
}
.ab-general-photo-badge .num { font-size: 1.1rem; font-weight: 700; color: var(--text-muted); letter-spacing: 1.2px; text-transform: uppercase; }
.ab-general-photo-badge .yr { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 800; color: var(--primary); }
.ab-general-body { padding: 5rem 4.8rem; }
.ab-general-body p { color: var(--text-secondary); font-size: 1.5rem; line-height: 1.85; margin: 0 0 1.6rem; }
.ab-general-loc { display: flex; align-items: center; gap: .8rem; color: var(--primary); font-weight: 600; font-size: 1.4rem; }
.ab-general-loc i { color: var(--accent); }
.ab-general-milestones {
  list-style: none; padding: 0; margin: 2.4rem 0 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem;
}
.ab-general-milestones li {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1rem 1.4rem;
  background: rgba(var(--primary-rgb), .04);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
}
.ab-milestone-yr {
  font-family: var(--font-heading);
  font-weight: 800; color: var(--primary); font-size: 1.3rem; letter-spacing: .5px;
  flex-shrink: 0;
}
.ab-milestone-tx { font-size: 1.3rem; color: var(--text-secondary); line-height: 1.4; }

/* ---------- 4. Speaker (Principal + Proprietor) ---------- */
.ab-sec-speaker { background: var(--bg-alt); }
.ab-sec-principal  {
  background:
    linear-gradient(180deg, rgba(var(--primary-mist-rgb), .6) 0%, var(--bg-alt) 100%);
}
.ab-sec-proprietor {
  background:
    linear-gradient(180deg, rgba(var(--gold-rgb), .10) 0%, var(--bg-alt) 100%);
}

.ab-sec-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ab-decor-circle, .ab-decor-blob {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .25;
}
.ab-dc-1 { width: 320px; height: 320px; background: var(--primary-light); top: 10%; left: -100px; }
.ab-dc-2 { width: 280px; height: 280px; background: var(--gold);          bottom: 5%; right: -80px; }
.ab-db-1 { width: 320px; height: 320px; background: var(--accent);        top: 5%; right: -80px; border-radius: 60% 40% 50% 50%; }
.ab-db-2 { width: 280px; height: 280px; background: var(--accent);        bottom: 10%; left: -100px; border-radius: 40% 60% 60% 40%; }
.ab-sec-speaker .container { position: relative; z-index: 1; }

.ab-speaker {
  display: grid;
  grid-template-columns: 38rem 1fr;
  gap: 5.6rem;
  align-items: center;
  max-width: 108rem;
  margin: 0 auto;
}
.ab-speaker-right { grid-template-columns: 1fr 38rem; }
.ab-speaker-right .ab-speaker-body { order: 1; }
.ab-speaker-right .ab-speaker-photo { order: 2; }

.ab-speaker-photo { position: relative; aspect-ratio: 4/5; max-width: 38rem; justify-self: center; }
.ab-speaker-photo-frame {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  box-shadow: 0 30px 60px -10px rgba(var(--primary-rgb), .4);
  transition: border-radius .8s ease;
}
.ab-speaker-photo-frame:hover { border-radius: 50%; }
.ab-speaker-photo-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s ease;
}
.ab-speaker-photo-frame:hover img { transform: scale(1.06); }

.ab-speaker-photo-ring {
  position: absolute; inset: -2.2rem;
  border: 2px dashed rgba(var(--primary-rgb), .35);
  border-radius: 50%;
  animation: ab-spin 22s linear infinite;
  z-index: 1;
}
.ab-speaker-photo-ring-alt { border-color: rgba(var(--accent-rgb), .45); }
@keyframes ab-spin { to { transform: rotate(360deg); } }

.ab-speaker-photo-badge {
  position: absolute; bottom: -1rem; right: -1rem;
  width: 6.4rem; height: 6.4rem;
  background: linear-gradient(135deg, var(--gold) 0%, var(--accent) 100%);
  color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem;
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), .5);
  z-index: 3;
  border: 5px solid var(--bg);
}
.ab-speaker-photo-badge-alt {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  box-shadow: 0 10px 24px rgba(var(--primary-rgb), .5);
}

.ab-speaker-card {
  position: relative;
  background: var(--white);
  border-radius: var(--r-xl);
  padding: 4.4rem 4.4rem 3.6rem;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .15);
  border: 1px solid rgba(var(--primary-rgb), .10);
}
.ab-speaker-card-alt {
  border-color: rgba(var(--accent-rgb), .2);
  box-shadow: 0 20px 50px -20px rgba(var(--accent-rgb), .2);
}
.ab-speaker-card::before {
  content: '';
  position: absolute; top: 2.4rem; left: 0;
  width: .4rem; height: 6rem;
  background: linear-gradient(180deg, var(--primary) 0%, transparent 100%);
  border-radius: 0 .4rem .4rem 0;
}
.ab-speaker-card-alt::before { background: linear-gradient(180deg, var(--accent) 0%, transparent 100%); }

.ab-speaker-quote {
  position: absolute; top: 0; left: 2.4rem;
  font-family: var(--font-serif);
  font-size: 9rem; line-height: 1;
  color: rgba(var(--primary-rgb), .12);
  font-weight: 800;
  pointer-events: none;
  transform: translateY(-2rem);
}
.ab-speaker-card-alt .ab-speaker-quote { color: rgba(var(--accent-rgb), .16); }

.ab-speaker-eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.15rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .6rem;
}
.ab-speaker-card-alt .ab-speaker-eyebrow { color: var(--accent-dark); }
.ab-speaker-name {
  font-family: var(--font-serif);
  font-size: 2.4rem; font-weight: 800; margin: 0;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.ab-speaker-title {
  margin: .4rem 0 1.8rem;
  font-size: 1.4rem; font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .2px;
}
/* Dynamic role (Principal / Director / …) below the speaker's name —
   set in the founder's handwritten script family (Caveat is loaded
   site-wide in inc/header.inc.php) so it reads as a signature line.
   Script faces render small, hence the larger size. The school-name
   suffix stays in the plain muted style for readability. */
.ab-speaker-title .ab-speaker-role {
  font-family: 'Caveat', var(--font-serif), cursive;
  font-size: 2.4rem; font-weight: 700;
  letter-spacing: .3px;
  color: var(--primary);
}
.ab-speaker-card-alt .ab-speaker-title .ab-speaker-role { color: var(--accent-dark); }
.ab-speaker-title .ab-speaker-school {
  display: block;
  margin-top: .2rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.7rem; font-weight: 600;
  letter-spacing: .3px;
  text-transform: capitalize;
  color: var(--accent-dark);
}
.ab-speaker-card-alt .ab-speaker-title .ab-speaker-school { color: var(--primary); }
.ab-speaker-speech {
  font-family: var(--font-serif);
  font-size: 1.55rem; line-height: 1.85; color: var(--text-secondary);
  margin: 0 0 2.2rem;
  position: relative; z-index: 1;
}
.ab-speaker-empty { color: var(--text-muted); font-style: italic; padding: 1rem 0; }
.ab-speaker-sig {
  display: flex; flex-direction: column; gap: .4rem;
  padding-top: 1.8rem; border-top: 1px solid var(--border);
}
.ab-speaker-sig-line {
  display: block; width: 6rem; height: 2px;
  background: linear-gradient(90deg, var(--primary) 0%, transparent 100%);
  margin-bottom: .6rem;
}
.ab-speaker-card-alt .ab-speaker-sig-line { background: linear-gradient(90deg, var(--accent) 0%, transparent 100%); }
/* Name + role sit inside the signature block (below the speech) — the
   title is the last element in the card, so it carries no bottom margin. */
.ab-speaker-sig .ab-speaker-title { margin-bottom: 0; }

/* ---------- 5. Founder (overlapping portrait) ---------- */
.ab-sec-founder {
  background: linear-gradient(180deg, var(--text) 0%, var(--primary) 100%);
  color: var(--white);
  position: relative;
  isolation: isolate;
}
.ab-sec-founder::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(var(--gold-rgb), .12) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(var(--primary-rgb), .25) 0%, transparent 40%);
}
.ab-decor-wave {
  position: absolute; top: 0; left: 0; right: 0; height: 8rem;
  background: var(--bg);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
}
.ab-sec-founder .ab-eyebrow { background: rgba(var(--gold-rgb), .16); color: var(--gold); }
.ab-sec-founder .ab-eyebrow i { color: var(--gold); }
.ab-sec-founder .ab-sec-title { color: var(--white); }
.ab-sec-founder .ab-sec-title em {
  background: linear-gradient(135deg, var(--gold) 0%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ab-sec-founder .ab-sec-sub { color: rgb(255 255 255 / .78); }

.ab-founder {
  display: grid;
  grid-template-columns: 36rem 1fr;
  gap: 3rem;
  align-items: stretch;
  max-width: 108rem;
  margin: 0 auto;
  position: relative;
}
.ab-founder-photo {
  position: relative;
  min-height: 48rem;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.ab-founder-photo-inner {
  width: 32rem; height: 40rem;
  border-radius: 200px 200px 20px 20px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--gold) 0%, var(--accent) 100%);
  padding: .8rem;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
  position: relative;
}
.ab-founder-photo-inner img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 200px 200px 12px 12px;
  display: block;
}
.ab-founder-sig {
  margin-top: 1.6rem;
  background: rgb(255 255 255 / .96);
  padding: 1.2rem 2.2rem;
  border-radius: 1.4rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  max-width: 28rem;
}
.ab-founder-sig img { width: 100%; height: auto; max-height: 6rem; object-fit: contain; }

.ab-founder-body { position: relative; }
.ab-founder-card {
  position: relative;
  background: rgb(255 255 255 / .05);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: var(--r-xl);
  padding: 4rem 4.2rem;
  color: var(--white);
  height: 100%;
}
.ab-founder-quote {
  position: absolute; top: -1rem; right: 3rem;
  font-family: var(--font-serif);
  font-size: 11rem; line-height: 1;
  color: rgba(var(--gold-rgb), .18);
  font-weight: 800;
  pointer-events: none;
}
.ab-founder-meta { position: relative; z-index: 1; margin-bottom: 1.2rem; }
.ab-founder-eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 1.15rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .6rem;
}
.ab-founder-title { margin: .4rem 0 2.2rem; font-size: 1.4rem; font-weight: 600; color: rgb(255 255 255 / .7); }
/* Inside the closing sign-off (below the speech) the title is the last
   element, so it carries no bottom margin. */
.ab-founder-closing .ab-founder-title { margin: .2rem 0 0; }
/* School name on its own line below the founder's role — elegant serif
   italic in gold so it differs from the muted role line above. */
.ab-founder-title .ab-founder-school {
  display: block;
  margin-top: .2rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.7rem; font-weight: 600;
  letter-spacing: .3px;
  text-transform: capitalize;
  color: var(--gold);
}
.ab-founder-speech {
  font-size: 1.55rem; line-height: 1.85;
  color: rgb(255 255 255 / .88);
  margin: 0 0 2.4rem;
  font-family: var(--font-serif);
  font-style: italic;
}
.ab-founder-closing {
  display: flex; flex-direction: column; gap: .4rem;
  padding-top: 2rem; border-top: 1px solid rgb(255 255 255 / .15);
}
.ab-founder-closing-line { font-size: 1.3rem; color: rgb(255 255 255 / .65); }
.ab-founder-closing-name {
  font-weight: 800; font-size: 1.8rem; color: var(--gold);
  font-style: italic;
  font-family: 'Caveat', var(--font-serif), cursive;
}

/* ---------- 6. Vision / Mission / Values / CTA ---------- */
.ab-sec-vm { background: var(--white); }
.ab-vm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.6rem; max-width: 108rem; margin: 0 auto; }
.ab-vm-card {
  background: var(--white);
  border: 1px solid rgba(var(--primary-rgb), .10);
  border-radius: var(--r-xl);
  padding: 4rem 3.6rem;
  box-shadow: 0 14px 36px -18px rgba(var(--primary-rgb), .2);
  transition: transform var(--t-base), box-shadow var(--t-base);
  position: relative;
  overflow: hidden;
}
.ab-vm-card::before {
  content: ''; position: absolute; top: -5rem; right: -5rem;
  width: 18rem; height: 18rem;
  background: radial-gradient(circle, rgba(var(--primary-rgb), .08) 0%, transparent 70%);
  border-radius: 50%;
}
.ab-vm-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -18px rgba(var(--primary-rgb), .3); }
.ab-vm-icon {
  width: 6rem; height: 6rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: var(--white);
  border-radius: var(--r-md);
  font-size: 2.4rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 18px rgba(var(--primary-rgb), .3);
}
.ab-vm-card h4 { font-family: var(--font-serif); font-size: 2rem; font-weight: 800; color: var(--primary); margin: 0 0 1.2rem; }
.ab-vm-card p { color: var(--text-secondary); line-height: 1.7; font-size: 1.5rem; margin: 0; }
.ab-mission-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.ab-mission-list li { display: flex; align-items: flex-start; gap: 1rem; color: var(--text-secondary); line-height: 1.55; font-size: 1.4rem; }
.ab-mission-list i { color: var(--primary); margin-top: .4rem; flex-shrink: 0; font-size: 1.4rem; }

.ab-sec-values { background: var(--bg-alt); }
.ab-values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.4rem; max-width: 108rem; margin: 0 auto; }
.ab-value-chip {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.4rem 1.8rem;
  background: var(--white);
  border: 1px solid rgba(var(--primary-rgb), .10);
  border-radius: var(--r-md);
  font-family: var(--font-heading);
  font-weight: 700; color: var(--primary);
  font-size: 1.4rem;
  transition: all var(--t-base);
  box-shadow: 0 6px 18px -10px rgba(var(--primary-rgb), .2);
}
.ab-value-chip i { font-size: 1.6rem; color: var(--accent); transition: transform var(--t-base); }
.ab-value-chip:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: 0 10px 24px -8px rgba(var(--primary-rgb), .3); }
.ab-value-chip:hover i { transform: scale(1.2) rotate(-8deg); }

.ab-sec-cta { background: var(--white); }
.ab-cta-card {
  display: flex; align-items: center; justify-content: space-between; gap: 3.2rem;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--white);
  border-radius: var(--r-2xl);
  padding: 5rem 5.6rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(var(--primary-rgb), .4);
}
.ab-cta-card::before {
  content: ''; position: absolute; top: -50%; right: -10%;
  width: 50rem; height: 50rem;
  background: radial-gradient(circle, rgba(var(--gold-rgb), .18) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}
.ab-cta-text { position: relative; z-index: 1; }
.ab-cta-eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--font-heading);
  font-size: 1.25rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--gold);
}
.ab-cta-text h3 { font-family: var(--font-serif); font-size: clamp(2.2rem, 3.2vw, 2.8rem); font-weight: 800; margin: 1rem 0 .8rem; line-height: 1.25; letter-spacing: -.01em; color: var(--accent); }
.ab-cta-text p { color: rgb(255 255 255 / .85); font-size: 1.5rem; margin: 0; max-width: 48rem; line-height: 1.7; }
.ab-cta-actions { display: flex; gap: 1.2rem; flex-wrap: wrap; position: relative; z-index: 1; }
.ab-btn {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: 1.4rem 2.4rem;
  border-radius: var(--r-md);
  font-family: var(--font-heading);
  font-weight: 700; font-size: 1.4rem;
  text-decoration: none;
  transition: all var(--t-base);
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
}
.ab-btn-primary {
  background: linear-gradient(135deg, var(--gold) 0%, var(--accent) 100%);
  color: var(--on-accent);
  box-shadow: 0 8px 20px rgba(var(--gold-rgb), .35);
}
.ab-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(var(--gold-rgb), .5); }
.ab-btn-outline { background: transparent; color: var(--white); border-color: rgb(255 255 255 / .3); }
.ab-btn-outline:hover { background: rgb(255 255 255 / .1); border-color: var(--white); }

/* ---------- 7. Responsive ---------- */
@media (max-width: 1024px) {
  .ab-hero-grid { grid-template-columns: 1fr; gap: 4rem; }
  .ab-hero-card-inner { transform: none; max-width: 52rem; margin: 0 auto; }
  .ab-general-card { grid-template-columns: 1fr; }
  .ab-general-photo { min-height: 32rem; }
  .ab-speaker, .ab-speaker-right { grid-template-columns: 1fr; gap: 4rem; }
  .ab-speaker-right .ab-speaker-body { order: 2; }
  .ab-speaker-right .ab-speaker-photo { order: 1; }
  .ab-speaker-photo { max-width: 32rem; margin: 0 auto; }
  .ab-vm-grid { grid-template-columns: 1fr; }
  .ab-founder { grid-template-columns: 1fr; gap: 3rem; }
  .ab-founder-photo { min-height: auto; align-items: center; }
  .ab-cta-card { flex-direction: column; text-align: center; padding: 4rem 2.8rem; }
  .ab-cta-actions { justify-content: center; }
}
@media (max-width: 640px) {
  .ab-hero { padding: 6rem 0 8rem; }
  .ab-sec { padding: 6rem 0; }
  .ab-general-body { padding: 3rem 2.4rem; }
  .ab-general-milestones { grid-template-columns: 1fr; }
  .ab-speaker-card, .ab-founder-card { padding: 3rem 2.4rem; }
  .ab-hero-stamps { gap: .6rem; }
  .ab-stamp { font-size: 1.1rem; padding: .6rem 1rem; }
  .ab-founder-photo-inner { width: 26rem; height: 32rem; }
  .ab-cta-text h3 { font-size: 1.5rem; }
  .ab-btn { padding: 1.2rem 1.8rem; font-size: 1.2rem; }
  .ab-scroll-cue { display: none; }
}

/* ---------- 8. Editorial newspaper wrap (first-principles) ----------
   Root cause of the old breakage: photos lived in their OWN grid column
   (sibling of the text), so a long speech just stretched the column and
   the fixed-size portrait sat stranded beside it — cropped oddly on
   desktop, stacked as a rigid slab on mobile. First principle of print
   layout: the image must live INSIDE the text flow (floated), so inline
   content wraps around it no matter how long the copy runs. about.php now
   nests each portrait as the first child of its text container; the rules
   below float it and keep every image fluid (max-width:100%, never taller
   than its container). Only layout is touched — colours, theme tokens,
   badges and reveal animations are unchanged. */
.ab-page img { max-width: 100%; }
.ab-general-card, .ab-speaker, .ab-founder { display: block; }
.ab-general-card::after, .ab-speaker-card::after, .ab-founder-card::after {
  content: ''; display: block; clear: both;
}
.ab-general-body, .ab-speaker-body { overflow: visible; }

/* General / Who-We-Are photo — floats left inside the body copy. */
.ab-general-body .ab-general-photo {
  float: left;
  width: min(34rem, 44%);
  min-height: 0;
  aspect-ratio: 4 / 4.6;
  margin: 0 3rem 2rem 0;
  border-radius: 1.6rem;
  shape-outside: margin-box;
  shape-margin: 1.2rem;
}
.ab-general-body .ab-general-photo img { height: 100%; }
/* Milestones stay a full-width row beneath the wrapped copy. */
.ab-general-milestones { clear: both; }

/* Speaker portraits — float inside their own speech card. */
.ab-speaker-left .ab-speaker-photo {
  float: left;
  width: min(28rem, 44%);
  max-width: 28rem;
  aspect-ratio: 4 / 5;
  margin: .6rem 2.4rem 1.6rem 0;
  shape-outside: margin-box;
  shape-margin: 1.2rem;
}
.ab-speaker-right .ab-speaker-photo {
  float: right;
  width: min(28rem, 44%);
  max-width: 28rem;
  aspect-ratio: 4 / 5;
  margin: .6rem 0 1.6rem 2.4rem;
  shape-outside: margin-box;
  shape-margin: 1.2rem;
}
/* The spinning dashed ring overflows a floated portrait and collides with
   wrapped text, so it is retired on the in-flow portraits. */
.ab-speaker-card .ab-speaker-photo-ring { display: none; }
.ab-speaker-card .ab-speaker-photo-badge {
  width: 5rem; height: 5rem; font-size: 1.9rem; border-width: 4px;
}

/* Founder portrait — floats left inside the founder card. */
.ab-founder-card .ab-founder-photo {
  float: left;
  width: min(28rem, 44%);
  min-height: 0;
  margin: .4rem 2.6rem 1.6rem 0;
  shape-outside: margin-box;
  shape-margin: 1.2rem;
}
.ab-founder-card .ab-founder-photo-inner { width: 100%; height: auto; aspect-ratio: 4 / 5; }
.ab-founder-card .ab-founder-sig { max-width: 100%; }

/* Tablet: narrower floats so copy keeps room to breathe. */
@media (max-width: 1024px) {
  .ab-general-body .ab-general-photo { width: min(30rem, 46%); }
  .ab-speaker-left .ab-speaker-photo,
  .ab-speaker-right .ab-speaker-photo,
  .ab-founder-card .ab-founder-photo { width: min(25rem, 44%); }
}

/* Mobile: floats retire — each portrait becomes a full-width 16/10 banner
   above its copy, so nothing overflows a 360px viewport however long the
   text runs. These rules sit after the older mobile block so they win. */
@media (max-width: 640px) {
  .ab-general-body .ab-general-photo,
  .ab-speaker-left .ab-speaker-photo,
  .ab-speaker-right .ab-speaker-photo,
  .ab-founder-card .ab-founder-photo {
    float: none;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 10;
    margin: 0 0 1.6rem;
  }
  .ab-speaker-card .ab-speaker-photo { aspect-ratio: 16 / 10; }
  .ab-speaker-card .ab-speaker-photo-frame { border-radius: 1.4rem; }
  .ab-general-body .ab-general-photo { border-radius: 1.4rem; }
  .ab-general-photo-badge { padding: .8rem 1.4rem; }
  .ab-general-photo-badge .yr { font-size: 1.5rem; }
  .ab-founder-card .ab-founder-photo-inner { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 1.4rem; }
  .ab-founder-card .ab-founder-photo-inner img { border-radius: 1.4rem; }
}