/* ============================================================
   CIPU GLOBAL — Master Stylesheet v2
   Single file. No inline CSS needed.
   ============================================================ */

/* ── CSS Variables ────────────────────────────────────────── */
:root {
  --navy:         #1E3A8A;
  --navy-dark:    #152d6e;
  --navy-light:   #2a4fa8;
  --navy-deep:    #0d1f4f;
  --gold:         #D4AF37;
  --gold-dark:    #B8960F;
  --white:        #ffffff;
  --pearl:        #F7F8FA;
  --gray-50:      #F9FAFB;
  --gray-100:     #F3F4F6;
  --gray-200:     #E5E7EB;
  --gray-400:     #9CA3AF;
  --gray-500:     #6B7280;
  --gray-700:     #374151;
  --gray-900:     #111827;
  --text-base:    #374151;
  --text-light:   #6B7280;
  --text-dim:     #9CA3AF;
  --border:       #E5E7EB;
  --border-light: #F3F4F6;
  --shadow-sm:    0 1px 3px rgba(30,58,138,.08);
  --shadow:       0 4px 16px rgba(30,58,138,.10);
  --shadow-lg:    0 8px 32px rgba(30,58,138,.14);
  --radius:       .625rem;
  --radius-lg:    .875rem;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  --transition:   .2s ease;

  /* Section spacing — REDUCED */
  --section-py:     3.5rem;
  --section-py-sm:  2rem;
  --section-py-lg:  5rem;

  /* Fixed-header heights — topbar sits above the white nav */
  --topbar-h:       40px;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--gray-700);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  padding-top: calc(72px + var(--topbar-h)); /* offset for fixed topbar + nav */
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
h1,h2,h3,h4,h5,h6 { line-height: 1.2; margin: 0; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
ul,ol { margin: 0; padding: 0; list-style: none; }

/* ── Container ────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media(min-width:640px)  { .container { padding-left: 2rem;   padding-right: 2rem;   } }
@media(min-width:1024px) { .container { padding-left: 3.5rem; padding-right: 3.5rem; } }
@media(min-width:1280px) { .container { padding-left: 5rem;   padding-right: 5rem;   } }

/* ── Accessibility ────────────────────────────────────────── */
.skip-link {
  position: absolute; top: -100%; left: 1rem;
  background: var(--gold); color: var(--navy-deep);
  padding: .5rem 1rem; font-weight: 700; border-radius: 0 0 .5rem .5rem;
  z-index: 9999; transition: top .2s;
}
.skip-link:focus { top: 0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ── Navigation ───────────────────────────────────────────── */
.main-nav {
  position: fixed; top: var(--topbar-h); left: 0; right: 0;
  z-index: 9999; background: #fff;
  border-bottom: 1px solid var(--border-light);
  transition: box-shadow .3s;
}
.main-nav.is-scrolled { box-shadow: var(--shadow); }
.main-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; max-width: 90rem; margin: 0 auto; padding: 0 1.25rem;
}
@media(min-width:1024px) { .main-nav__inner { padding: 0 3.5rem; } }
@media(min-width:1280px) { .main-nav__inner { padding: 0 5rem; } }
.main-nav__logo img { height: 56px; width: auto; display: block; }
.main-nav__desktop { display: none; align-items: center; gap: 0; }
@media(min-width:1280px) { .main-nav__desktop { display: flex; } }
.main-nav__cta { display: none; }
@media(min-width:1280px) { .main-nav__cta { display: inline-flex; } }
.nav-btn {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .5rem .75rem; font-size: .875rem; font-weight: 600;
  color: var(--navy); background: none; border: none; cursor: pointer;
  white-space: nowrap; transition: color var(--transition);
}
.nav-btn:hover { color: var(--gold-dark); }
.nav-btn svg { width: .875rem; height: .875rem; transition: transform .2s; }
.has-dropdown { position: relative; }
.has-dropdown:hover .nav-btn svg { transform: rotate(180deg); }
.dropdown {
  display: none; position: absolute; top: 100%; left: 0;
  min-width: 16rem; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: .5rem 0; z-index: 1000;
}
.has-dropdown:hover .dropdown { display: block; }
.has-sub .dropdown { left: 100%; top: 0; }
.dropdown__link {
  display: block; padding: .625rem 1.25rem;
  font-size: .875rem; font-weight: 500; color: var(--navy);
  transition: background var(--transition), color var(--transition), padding-left var(--transition);
  white-space: nowrap;
}
.dropdown__link:hover {
  background: var(--pearl); color: var(--gold-dark);
  padding-left: 1.5rem;
}
/* ── Nested submenu (Events & Initiatives: Webinars / Roundtables / BHES) ── */
.dropdown__group { position: relative; }
.dropdown__link--parent {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.dropdown__link--parent .dropdown__caret {
  font-size: 1rem; line-height: 1; color: var(--text-light); transition: color var(--transition);
}
.dropdown__group:hover > .dropdown__link--parent { background: var(--pearl); color: var(--gold-dark); }
.dropdown__sub {
  display: none; position: absolute; left: 100%; top: -.5rem;
  min-width: 17rem; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: .5rem 0; z-index: 1001;
}
.dropdown__group:hover > .dropdown__sub { display: block; }
.nav-mobile-btn {
  display: flex; align-items: center; justify-content: center;
  padding: .5rem; color: var(--navy);
  background: none; border: none; cursor: pointer;
}
/* Make sure taps on the SVG/path inside register on the button.
   Without this, mobile Safari/Chrome sometimes deliver the click
   to the inner <path> and the button-scoped handler never fires. */
.nav-mobile-btn svg,
.nav-mobile-btn svg * { pointer-events: none; }
@media(min-width:1280px) { .nav-mobile-btn { display: none; } }

/* ── Mobile Drawer ────────────────────────────────────────── */
.mobile-drawer {
  display: none;
  position: fixed; top: 72px; left: 0; right: 0;
  z-index: 99999; background: #fff;
  border-top: 2px solid var(--gold);
  padding: .25rem 1rem 1.5rem; max-height: calc(100vh - 72px);
  overflow-y: auto; box-shadow: var(--shadow-lg);
  -webkit-overflow-scrolling: touch;
}
.mobile-drawer.is-open {
  display: block !important;
  animation: mobileDrawerSlide .22s ease-out;
}
@keyframes mobileDrawerSlide {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
/* Make sure the Join Now CTA in the navbar stays HIDDEN on mobile
   (the generic .btn rule's `display: inline-flex` was overriding
   the original `display: none` because .btn is declared later). */
.main-nav__cta { display: none !important; }
@media(min-width:1280px) { .main-nav__cta { display: inline-flex !important; } }
.mobile-drawer a {
  display: block; padding: .625rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: .875rem; font-weight: 600; color: var(--navy);
  text-decoration: none; transition: color var(--transition);
}
.mobile-drawer a:hover { color: var(--gold-dark); }
.mobile-drawer details summary {
  padding: .625rem 0; font-size: .875rem; font-weight: 600;
  color: var(--navy); cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  list-style: none; display: flex; align-items: center; justify-content: space-between;
}
.mobile-drawer details[open] summary { color: var(--gold-dark); }
.mobile-drawer__sub-link {
  padding: .5rem 0 .5rem 1rem !important;
  font-size: .8125rem !important; color: var(--gray-500) !important; font-weight: 500 !important;
}
/* Nested mobile group (Webinars / Roundtables / BHES inside Events) */
.mob-group--sub { padding-left: 1rem; }
.mob-group--sub > summary { font-size: .8125rem !important; color: var(--gray-500) !important; font-weight: 600 !important; }
.mobile-drawer__sub-link--deep { padding-left: 2rem !important; }
.mobile-drawer__join-btn {
  display: block; margin: 1rem 0 .5rem; padding: .75rem;
  background: var(--gold); color: var(--navy-deep); font-weight: 700;
  font-size: .875rem; text-align: center; border-radius: var(--radius);
  text-decoration: none;
}

/* ── Topbar ───────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  height: var(--topbar-h); display: flex; align-items: center;
  background: var(--navy-dark); color: rgba(191,219,254,.85); font-size: .75rem;
}
.topbar > .container { width: 100%; }
.topbar a { color: rgba(191,219,254,.85); }
.topbar a:hover { color: #fff; }

/* ── Ticker ("University Bytes") ───────────────────────────────
   Markup: app/Views/layouts/ticker.php — rendered from the DB, so the
   number of items is unknown at author time. The track holds TWO identical
   copies of the item list side by side and slides by exactly -50% (one full
   copy), which loops seamlessly for any item count. Loop duration comes from
   the inline --ticker-duration set per page from the admin speed setting. */
.ticker {
  background: var(--navy);
  border-bottom: 2px solid var(--gold);
  overflow: hidden; padding: .5rem 0;
}
.ticker__inner { display: flex; align-items: center; min-width: 0; }
.ticker__badge {
  flex-shrink: 0; background: var(--gold); color: var(--navy-deep);
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; padding: .25rem .75rem; margin-right: 1rem;
  white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem;
}
.ticker__badge-icon { flex-shrink: 0; }
.ticker__overflow {
  overflow: hidden; flex: 1; min-width: 0;
  /* Fade the headlines out at the right edge instead of clipping mid-word. */
  -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, #000 92%, transparent 100%);
}
.ticker__track {
  display: flex; width: max-content;
  animation: tickerMarquee var(--ticker-duration, 60s) linear infinite;
  font-size: .875rem; color: rgba(255,255,255,.9); font-weight: 500;
}
/* Pause on hover and while a headline has keyboard focus, so links are
   actually clickable. */
.ticker__track:hover,
.ticker__track:focus-within { animation-play-state: paused; }

.ticker__list {
  display: flex; align-items: center;
  margin: 0; padding: 0; list-style: none;
}
.ticker__item {
  display: inline-flex; align-items: center;
  white-space: nowrap; color: rgba(255,255,255,.9);
}
/* Bullet separator between headlines, matching cipuglobal.org. */
.ticker__item::after {
  content: '•';
  color: var(--gold); opacity: .75;
  padding: 0 1.25rem; font-weight: 700;
}
.ticker__link { color: rgba(255,255,255,.9); text-decoration: none; }
.ticker__link:hover,
.ticker__link:focus-visible { color: var(--gold); text-decoration: underline; }
.ticker__cta { color: var(--gold); font-weight: 700; }

@keyframes tickerMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Respect the OS "reduce motion" setting: stop the scroll and let the strip
   scroll horizontally by hand instead. The duplicate copy is hidden so the
   list isn't repeated when it's no longer moving. */
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; width: auto; }
  .ticker__track > .ticker__list[aria-hidden="true"] { display: none; }
  .ticker__overflow { overflow-x: auto; }
}

/* ── Page Hero (inner pages) ─────────────────────────────── */
/* REDUCED by ~30% from 5.5rem to 3.75rem */
.page-hero-v2 {
  background: linear-gradient(110deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-light) 100%);
  position: relative; overflow: hidden;
  padding: 3.75rem 0 3rem; /* was 5.5rem 0 4.5rem */
  color: #fff;
}
.page-hero-v2__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 24px 24px;
}
.page-hero-v2::before {
  content: '';
  position: absolute; right: -4rem; top: -4rem;
  width: 32rem; height: 32rem; z-index: 0;
  background: radial-gradient(circle, rgba(212,175,55,.12) 0%, transparent 65%);
}
.page-hero-v2__inner {
  position: relative; z-index: 2; max-width: 52rem; /* FULL WIDTH: text spans container */
}
.page-hero-v2__kicker {
  font-size: .7rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .875rem;
  display: flex; align-items: center; gap: .625rem;
}
.page-hero-v2__kicker span {
  display: inline-block; width: 2rem; height: 2px; background: var(--gold);
}
.page-hero-v2 h1 {
  font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800; color: #fff; line-height: 1.12; margin-bottom: 1rem;
}
.page-hero-v2 .hero-sub {
  font-size: 1rem; color: rgba(191,219,254,.88); line-height: 1.72;
  max-width: 44rem; margin-bottom: 1.75rem;
}
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem;
  font-size: .8rem; color: rgba(191,219,254,.65); margin-bottom: 1.25rem;
}
.breadcrumb a { color: rgba(191,219,254,.65); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { opacity: .4; }

/* ── Sections ─────────────────────────────────────────────── */
.section { padding: var(--section-py) 0; }
.section--sm { padding: var(--section-py-sm) 0; }
.section--lg { padding: var(--section-py-lg) 0; }
.section--white { background: #fff; }
.section--pearl { background: var(--pearl); }
.section--navy { background: var(--navy-deep); color: #fff; }
.section--dark { background: var(--navy-deep); color: #fff; }

/* ── Section headings ─────────────────────────────────────── */
.section-header { margin-bottom: 2rem; }
.section-header--center { text-align: center; }
.eyebrow {
  font-size: .7rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-dark);
  display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem;
}
.eyebrow--center { justify-content: center; }
.eyebrow::before,
.eyebrow::after {
  content: ''; display: inline-block;
  width: 1.75rem; height: 2px; background: var(--gold);
  flex-shrink: 0;
}
.eyebrow::before { display: none; }
.eyebrow--center::before { display: inline-block; }
.section-title {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700; color: var(--navy); line-height: 1.2; margin-bottom: .625rem;
}
.section-lead {
  font-size: 1rem; color: var(--text-light); max-width: 40rem; line-height: 1.7;
}
.section-lead--center { margin-left: auto; margin-right: auto; }
.gold-rule { width: 3.5rem; height: 3px; background: var(--gold); margin: .75rem 0; }
.gold-rule--center { margin-left: auto; margin-right: auto; }

/* ── Grids ────────────────────────────────────────────────── */
.grid-2 { display: grid; gap: 1.75rem; }
.grid-3 { display: grid; gap: 1.5rem; }
.grid-4 { display: grid; gap: 1.25rem; }
@media(min-width:640px)  { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media(min-width:768px)  { .grid-3 { grid-template-columns: repeat(3,1fr); } }
@media(min-width:1024px) { .grid-4 { grid-template-columns: repeat(4,1fr); } .grid-2-lg { grid-template-columns: 1fr 1fr; } }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body); font-size: .875rem; font-weight: 700;
  padding: .75rem 1.625rem; border-radius: var(--radius);
  border: 2px solid transparent; cursor: pointer;
  transition: all var(--transition); white-space: nowrap;
  text-decoration: none;
}
.btn-primary { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }
.btn-primary:hover { background: var(--gold-dark); border-color: var(--gold-dark); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-navy:hover { background: var(--navy-dark); border-color: var(--navy-dark); transform: translateY(-1px); }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn-outline:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn-outline-navy { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }
.btn-sm { padding: .5rem 1.125rem; font-size: .8125rem; }
.btn-gold { background: var(--gold); color: var(--navy-deep); }
.btn-gold:hover { background: var(--gold-dark); }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.card:hover {
  box-shadow: var(--shadow-lg); transform: translateY(-3px);
  border-color: rgba(30,58,138,.2);
}
.card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.card__img--contain { object-fit: contain; background: var(--pearl); padding: .75rem; }
.card__body { padding: 1.25rem; }
.card__tag {
  display: inline-block; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--navy); background: rgba(30,58,138,.08);
  padding: .2rem .625rem; border-radius: .25rem; margin-bottom: .75rem;
}
.card__title {
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  color: var(--navy); line-height: 1.4; margin-bottom: .75rem;
}
.card__meta { font-size: .8125rem; color: var(--text-dim); }
.card__meta--lead { line-height: 1.65; }
.card__cta { margin-top: 1rem; }
.card__footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: .875rem; border-top: 1px solid var(--border-light); margin-top: .875rem;
}
.card--accent-navy { border-top: 3px solid var(--navy); }
.card--accent-gold { border-top: 3px solid var(--gold-dark); }
.card--accent-green { border-top: 3px solid #059669; }

/* ── Event strip (stats bar) ──────────────────────────────── */
.ev-strip { background: var(--navy); padding: 1.25rem 0; }
.ev-strip__inner { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; align-items: center; }
.ev-strip__item { text-align: center; min-width: 6rem; }
.ev-strip__num { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; color: var(--gold); line-height: 1; }
.ev-strip__label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(191,219,254,.7); margin-top: .25rem; }

/* ── Event card ───────────────────────────────────────────── */
.event-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--transition), transform var(--transition); display: flex; flex-direction: column; }
.event-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.event-card__thumb { position: relative; aspect-ratio: 16/9; background: var(--pearl); overflow: hidden; }
.event-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.event-card:hover .event-card__thumb img { transform: scale(1.05); }
.event-card__body { padding: 1.125rem 1.25rem; flex: 1; display: flex; flex-direction: column; }
.event-card__date { font-size: .75rem; color: var(--text-dim); margin-bottom: .375rem; }
.event-card__title { font-family: var(--font-display); font-size: .9375rem; font-weight: 700; color: var(--navy); line-height: 1.4; flex: 1; margin-bottom: .875rem; }
.event-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--border-light); }
.event-card__tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--navy); background: rgba(30,58,138,.08); padding: .2rem .5rem; border-radius: .25rem; }
.event-card__link { font-size: .8125rem; font-weight: 700; color: var(--gold-dark); display: flex; align-items: center; gap: .25rem; }

/* ── Webinar card ─────────────────────────────────────────── */
.webinar-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--transition), transform var(--transition); }
.webinar-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.webinar-card__thumb { position: relative; padding-top: 56.25%; background: var(--navy-dark); overflow: hidden; }
.webinar-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.webinar-card__body { padding: 1rem 1.125rem 1.25rem; }
.webinar-card__date { font-size: .75rem; color: var(--text-dim); margin-bottom: .375rem; }
.webinar-card__title { font-family: var(--font-display); font-size: .9rem; font-weight: 700; color: var(--navy); line-height: 1.4; margin-bottom: .75rem; }

/* ── People / Speaker cards ───────────────────────────────── */
.person-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--transition), transform var(--transition); text-align: center; }
.person-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.person-card__img { width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: top; }
.person-card__body { padding: 1rem; }
.person-card__name { font-family: var(--font-display); font-size: .9rem; font-weight: 700; color: var(--navy); line-height: 1.3; margin-bottom: .25rem; }
.person-card__role { font-size: .78rem; color: var(--text-light); line-height: 1.4; }

/* ── VoUG card ────────────────────────────────────────────── */
.voug-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--transition), transform var(--transition); display: flex; flex-direction: column; }
.voug-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.voug-card__thumb { position: relative; padding-top: 56.25%; background: var(--navy-dark); overflow: hidden; }
.voug-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.voug-card__body { padding: 1.125rem 1.5rem 1.5rem; flex: 1; display: flex; flex-direction: column; }

/* ── News card ────────────────────────────────────────────── */
.news-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--transition), transform var(--transition); display: flex; flex-direction: column; }
.news-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.news-card__thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--pearl); }
.news-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.news-card:hover .news-card__thumb img { transform: scale(1.05); }
.news-card__body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }

/* ── Membership cards ─────────────────────────────────────── */
.benefit-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.benefit-card:hover {
  box-shadow: var(--shadow); transform: translateY(-2px); border-color: rgba(30,58,138,.2);
}
.benefit-icon {
  width: 3rem; height: 3rem; border-radius: var(--radius);
  background: rgba(30,58,138,.08); display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem; color: var(--navy);
}

/* ── Testimonial card ─────────────────────────────────────── */
.testi-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.5rem; position: relative; transition: box-shadow var(--transition);
}
.testi-card:hover { box-shadow: var(--shadow); }
.testi-card::before {
  content: '"'; position: absolute; top: .75rem; left: 1.25rem;
  font-family: var(--font-display); font-size: 4rem; color: var(--gold);
  line-height: 1; opacity: .25;
}

/* ── FAQ new design ───────────────────────────────────────── */
.faq-v2 { display: flex; flex-direction: column; gap: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.faq-v2-item { border-bottom: 1px solid var(--border-light); background: #fff; transition: background var(--transition); position: relative; }
.faq-v2-item:last-child { border-bottom: none; }
.faq-v2-item.is-open { background: #F8FAFF; }
.faq-v2-item.is-open::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gold); }
.faq-v2-btn { width: 100%; display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-body); transition: background var(--transition); }
.faq-v2-btn:hover { background: #F8FAFF; }
.faq-v2-item.is-open .faq-v2-btn { background: #F0F4FF; }
.faq-v2-btn-num { font-size: .75rem; font-weight: 800; color: var(--gold-dark); min-width: 1.5rem; flex-shrink: 0; }
.faq-v2-btn-text { flex: 1; font-size: 1rem; font-weight: 600; color: var(--navy); line-height: 1.5; }
.faq-v2-btn-arrow { width: 1.75rem; height: 1.75rem; flex-shrink: 0; border-radius: .375rem; background: #EFF6FF; display: flex; align-items: center; justify-content: center; transition: background var(--transition); }
.faq-v2-btn-arrow svg { width: .875rem; height: .875rem; color: var(--navy); transition: transform .25s; display: block; }
.faq-v2-item.is-open .faq-v2-btn-arrow { background: var(--gold); }
.faq-v2-item.is-open .faq-v2-btn-arrow svg { transform: rotate(180deg); color: #fff; }
.faq-v2-answer { display: none; padding: .75rem 1.5rem 1.25rem; font-size: .9375rem; color: var(--text-light); line-height: 1.82; border-top: 1px dashed var(--border); }
.faq-v2-item.is-open .faq-v2-answer { display: block; }

/* ── FAQ accordion (premium pages) ───────────────────────── */
.faq-accordion { display: flex; flex-direction: column; gap: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.faq-item { border-bottom: 1px solid var(--border-light); background: #fff; transition: background var(--transition); position: relative; }
.faq-item:last-child { border-bottom: none; }
.faq-item.is-open { background: #F8FAFF; }
.faq-item.is-open::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gold); }
.faq-btn { width: 100%; display: flex; align-items: center; gap: 1.125rem; padding: 1.25rem 1.5rem; background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--navy); text-align: left; line-height: 1.5; transition: background var(--transition); }
.faq-btn:hover { background: #F8FAFF; }
.faq-item.is-open .faq-btn { background: #F0F4FF; }
.faq-btn-text { flex: 1; }
.faq-icon { width: 1.75rem; height: 1.75rem; flex-shrink: 0; border-radius: .375rem; background: #EFF6FF; display: inline-flex; align-items: center; justify-content: center; transition: background var(--transition); min-width: 1.75rem; }
.faq-icon svg { width: .875rem; height: .875rem; display: block; transition: transform .25s; color: var(--navy); }
.faq-item.is-open .faq-icon { background: var(--gold); }
.faq-item.is-open .faq-icon svg { transform: rotate(180deg); color: #fff; }
.faq-answer { display: none; padding: .75rem 1.75rem 1.5rem; font-size: .9375rem; color: var(--text-light); line-height: 1.82; border-top: 1px dashed var(--border); }
.faq-item.is-open .faq-answer { display: block; }

/* ── CTA Block ────────────────────────────────────────────── */
.cta-block {
  background: linear-gradient(110deg, var(--navy-deep) 0%, var(--navy) 60%, var(--navy-light) 100%);
  padding: 3.5rem 0; position: relative; overflow: hidden;
}
.cta-block__inner { position: relative; z-index: 2; text-align: center; }
.cta-block h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: #fff; margin-bottom: .875rem; }
.cta-block p { color: rgba(191,219,254,.88); font-size: 1rem; margin-bottom: 1.5rem; }
.cta-block__btns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer { background: var(--navy-deep); color: #C8D8E8; border-top: 3px solid var(--gold); }
.footer__top { padding: 3rem 0 2rem; }
.footer__grid { display: grid; gap: 2.5rem; }
@media(min-width:768px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer__heading {
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--gold); margin-bottom: 1.25rem; padding-bottom: .625rem;
  border-bottom: 1px solid rgba(212,175,55,.3);
}
.footer__link {
  display: block; color: #C8D8E8; font-size: .875rem;
  margin-bottom: .625rem; text-decoration: none;
  transition: color var(--transition);
}
.footer__link:hover { color: #fff; }
.footer__bottom {
  padding: 1.25rem 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; font-size: .75rem; color: #B8C8DD;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__legal-link { color: #B8C8DD; font-size: .75rem; text-decoration: none; }
.footer__legal-link:hover { color: #fff; }
.footer__social { margin-top: 1.75rem; }
.footer__social-title {
  display: block; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--gold); margin-bottom: .875rem;
}
.footer__social-links { display: flex; gap: .625rem; }
.footer__social-links a {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(200,216,232,.22);
  color: #C8D8E8;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.footer__social-links a svg { width: 18px; height: 18px; }
.footer__social-links a:hover {
  background: var(--gold); border-color: var(--gold); color: var(--navy-deep);
  transform: translateY(-2px);
}

/* ── Lightbox ─────────────────────────────────────────────── */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.88); align-items: center; justify-content: center;
}
.lightbox.open { display: flex; flex-direction: column; gap: 1rem; }
#lightbox-close { position: absolute; top: 1.25rem; right: 1.5rem; color: #fff; font-size: 2rem; cursor: pointer; line-height: 1; background: none; border: none; }
#lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--radius); }
#lightbox-caption { color: rgba(255,255,255,.7); font-size: .875rem; text-align: center; }
#lightbox-prev, #lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 2.5rem; cursor: pointer; background: rgba(255,255,255,.1); border: none; padding: .5rem 1rem; border-radius: var(--radius); }
#lightbox-prev { left: 1rem; }
#lightbox-next { right: 1rem; }

/* ── Filmstrip ────────────────────────────────────────────── */
.filmstrip-section {
  background: #0B1829; position: relative; overflow: hidden;
  padding: 2.5rem 0;
}
.filmstrip-header { text-align: center; padding: 0 1rem 1.5rem; position: relative; z-index: 5; }
.filmstrip-footer { text-align: center; padding: 1.5rem 1rem 0; position: relative; z-index: 5; }
.filmstrip-row { overflow: hidden; position: relative; }
.filmstrip-row::before, .filmstrip-row::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 6rem; z-index: 4; pointer-events: none;
}
.filmstrip-row::before { left: 0; background: linear-gradient(to right, #0B1829, transparent); }
.filmstrip-row::after  { right: 0; background: linear-gradient(to left, #0B1829, transparent); }
.film-track-left  { display: flex; gap: .625rem; animation: filmLeft  28s linear infinite; width: max-content; will-change: transform; }
.film-track-right { display: flex; gap: .625rem; animation: filmRight 32s linear infinite; width: max-content; will-change: transform; }
.film-track-left:hover, .film-track-right:hover { animation-play-state: paused; }
.film-card { position: relative; flex-shrink: 0; width: 220px; height: 148px; border-radius: var(--radius); overflow: hidden; cursor: pointer; }
.film-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.film-card:hover img { transform: scale(1.08); }
.film-caption { position: absolute; inset: 0; background: rgba(13,31,79,.72); display: flex; flex-direction: column; justify-content: flex-end; padding: .75rem; opacity: 0; transition: opacity .3s; }
.film-card:hover .film-caption { opacity: 1; }
.film-caption p { color: #fff; font-size: .72rem; line-height: 1.4; font-weight: 500; margin: 0; }
.film-tag { display: inline-block; background: var(--gold); color: var(--navy-deep); font-size: .65rem; font-weight: 700; padding: .15rem .5rem; border-radius: .25rem; margin-bottom: .375rem; text-transform: uppercase; letter-spacing: .05em; }
@keyframes filmLeft  { 0% { transform: translateX(0); }    100% { transform: translateX(-50%); } }
@keyframes filmRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); }   }

/* ── Reveal animation ─────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ── Utility colours ──────────────────────────────────────── */
.c-navy { color: var(--navy); }
.c-gold { color: var(--gold); }
.c-gold-dark { color: var(--gold-dark); }
.c-slate { color: #B8C8DD; }
.bg-navy { background: var(--navy); }
.bg-pearl { background: var(--pearl); }
.text-eyebrow-line { display: inline-block; width: 1.75rem; height: 2px; background: var(--gold); vertical-align: middle; }

/* ── Event Hero (BHES, events) ────────────────────────────── */
.event-hero { position: relative; min-height: 440px; display: flex; align-items: flex-end; overflow: hidden; color: #fff; padding-bottom: 2.5rem; }
.event-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center top; z-index: 0; }
.event-hero__overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(13,31,79,.98) 0%, rgba(13,31,79,.88) 35%, rgba(13,31,79,.70) 65%, rgba(13,31,79,.50) 100%);
}
.event-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: rgba(10,22,55,.3);
}
.event-hero__inner { position: relative; z-index: 3; width: 100%; }

/* ── Stat number (gold) ───────────────────────────────────── */
.stat-num { font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; color: var(--gold); line-height: 1; }
.stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(191,219,254,.75); margin-top: .25rem; }

/* ── Image placeholder ────────────────────────────────────── */
.img-placeholder { background: var(--navy-deep); display: flex; align-items: center; justify-content: center; color: rgba(191,219,254,.2); }

/* ── Tabs ─────────────────────────────────────────────────── */
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-btn { transition: all var(--transition); }
.tab-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── Partner logo strip ───────────────────────────────────── */
.partner-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem; }
.partner-img { opacity: .8; transition: opacity var(--transition), transform var(--transition); max-height: 48px; width: auto; filter: none; }
.partner-img:hover { opacity: 1; transform: scale(1.05); }

/* ── Scroll to top / progress ─────────────────────────────── */
.scroll-mt-20 { scroll-margin-top: 80px; }


/* ═══════════════════════════════════════════════════
   UX & DESIGN IMPROVEMENTS — v5.1
   Trust signals, authority indicators, polish
   ═══════════════════════════════════════════════════ */

/* Trust badge (Padma, awards) */
.trust-badge {
  display: inline-block;
  background: linear-gradient(135deg, #D4AF37, #B8960F);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .2rem .55rem;
  border-radius: .25rem;
  line-height: 1.3;
}

/* Person card improvements */
.person-card {
  transition: box-shadow .25s, transform .25s;
}
.person-card:hover {
  box-shadow: 0 12px 40px rgba(30,58,138,.14);
  transform: translateY(-4px);
}
.person-card__img,
.person-card img {
  transition: transform .5s;
}
.person-card:hover .person-card__img,
.person-card:hover img {
  transform: scale(1.04);
}

/* Section eyebrow line variant */
.eyebrow-plain {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: .75rem;
}
.eyebrow-plain::before { display: none !important; }
.eyebrow-plain::after  { display: none !important; }

/* Stat highlight block */
.stat-highlight {
  text-align: center;
  padding: 1.5rem 1rem;
}
.stat-highlight__num {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  display: block;
}
.stat-highlight__num--gold { color: var(--gold-dark); }
.stat-highlight__label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dim);
  margin-top: .375rem;
  display: block;
}

/* Testimonial quote card */
.quote-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
}
.quote-card::before {
  content: '\201C';
  position: absolute;
  top: .875rem;
  left: 1.375rem;
  font-family: var(--font-display);
  font-size: 5rem;
  color: var(--gold);
  line-height: .7;
  opacity: .18;
}
.quote-card__text {
  font-size: 1rem;
  line-height: 1.78;
  color: var(--gray-700);
  font-style: italic;
  margin: 0 0 1.25rem;
  position: relative;
  z-index: 1;
}
.quote-card__author {
  display: flex;
  align-items: center;
  gap: .875rem;
}
.quote-card__author img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.quote-card__name {
  font-weight: 700;
  color: var(--navy);
  font-size: .875rem;
  margin: 0;
}
.quote-card__title {
  font-size: .775rem;
  color: var(--text-dim);
  margin: 0;
}

/* Timeline */
.timeline-item {
  display: grid;
  gap: 2rem;
  margin-bottom: 3.5rem;
  align-items: start;
}
@media(min-width: 768px) {
  .timeline-item { grid-template-columns: 1fr 1fr; }
  .timeline-item:nth-child(even) .timeline-img { order: 2; }
  .timeline-item:nth-child(even) .timeline-content { order: 1; }
}
.timeline-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: .75rem;
  font-weight: 700;
  padding: .3rem .875rem;
  border-radius: 2rem;
  margin-bottom: 1rem;
}

/* News / blog strip card */
.news-strip {
  display: flex;
  gap: 1.25rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--border-light);
  text-decoration: none;
  transition: background var(--transition);
}
.news-strip:last-child { border-bottom: none; }
.news-strip:hover { background: var(--pearl); }
.news-strip__img {
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius);
  object-fit: cover;
  flex-shrink: 0;
}
.news-strip__date {
  font-size: .72rem;
  color: var(--text-dim);
  margin: 0 0 .25rem;
}
.news-strip__title {
  font-size: .875rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  margin: 0;
}

/* Featured card (home page) */
.featured-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: block;
  text-decoration: none;
}
.featured-card__img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  transition: transform .6s;
}
.featured-card:hover .featured-card__img { transform: scale(1.05); }
.featured-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,31,79,.95) 0%, rgba(13,31,79,.7) 45%, transparent 100%);
}
.featured-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
}
.featured-card__tag {
  display: inline-block;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .2rem .625rem;
  border-radius: .25rem;
  margin-bottom: .625rem;
}
.featured-card__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin: 0;
}

/* Gradient divider */
.gradient-divider {
  height: 3px;
  background: linear-gradient(to right, var(--gold), var(--navy-light), var(--gold));
  opacity: .35;
  margin: 0;
  border: none;
}

/* Partner logo strip */
.partner-strip-item {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4rem;
  transition: box-shadow .2s, border-color .2s;
}
.partner-strip-item:hover {
  box-shadow: var(--shadow);
  border-color: rgba(30,58,138,.2);
}

/* Key figure highlight */
.kpi-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  text-align: center;
  transition: box-shadow .25s, transform .25s;
  border-top: 3px solid var(--navy);
}
.kpi-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.kpi-card__num {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  display: block;
  margin-bottom: .375rem;
}
.kpi-card__gold .kpi-card__num { color: var(--gold-dark); }
.kpi-card__label {
  font-size: .8125rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Mobile nav link active state */
.mobile-drawer__link.active { color: var(--gold-dark); }

/* Smooth page transitions */
main { animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Print optimisation */
@media print {
  .topbar, .main-nav, .ticker, .cta-block, .site-footer { display: none !important; }
  body { padding-top: 0; }
}

/* ═══════════════════════════════════════════════════════
   PHOTO GALLERY — masonry grid + lightbox
   ═══════════════════════════════════════════════════════ */

/* Gallery grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .625rem;
}
@media(min-width:640px)  { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: .75rem; } }
@media(min-width:1024px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: .875rem; } }

/* Featured hero photo — spans 2 cols / 2 rows on desktop */
.gallery-grid .gallery-item--hero {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy-deep);
  cursor: pointer;
  aspect-ratio: 4/3;
}
.gallery-item--hero { aspect-ratio: unset; }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.gallery-item:hover img { transform: scale(1.06); }

/* Hover overlay */
.gallery-item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(13,31,79,.0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s;
}
.gallery-item:hover .gallery-item__overlay {
  background: rgba(13,31,79,.45);
}
.gallery-item__overlay svg {
  color: #fff;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .3s, transform .3s;
}
.gallery-item:hover .gallery-item__overlay svg {
  opacity: 1;
  transform: scale(1);
}

/* Caption tooltip */
.gallery-item__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: .5rem .75rem;
  background: linear-gradient(to top, rgba(13,31,79,.9) 0%, transparent 100%);
  color: rgba(255,255,255,.9);
  font-size: .72rem;
  font-weight: 500;
  transform: translateY(100%);
  transition: transform .3s;
  line-height: 1.3;
}
.gallery-item:hover .gallery-item__caption {
  transform: translateY(0);
}

/* ── Lightbox ────────────────────────────────────────── */
.cipu-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,.94);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.cipu-lightbox.is-open { display: flex; }

.cipu-lightbox__img {
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
}
.cipu-lightbox__caption {
  color: rgba(255,255,255,.65);
  font-size: .875rem;
  margin-top: 1rem;
  text-align: center;
  max-width: 40rem;
}
.cipu-lightbox__counter {
  position: absolute;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.5);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .05em;
}
.cipu-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: rgba(255,255,255,.1);
  border: none;
  color: #fff;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  font-size: 1.25rem;
}
.cipu-lightbox__close:hover { background: rgba(255,255,255,.2); }

.cipu-lightbox__prev,
.cipu-lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.1);
  border: none;
  color: #fff;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  font-size: 1.25rem;
}
.cipu-lightbox__prev:hover,
.cipu-lightbox__next:hover { background: rgba(255,255,255,.2); }
.cipu-lightbox__prev { left: 1.25rem; }
.cipu-lightbox__next { right: 1.25rem; }

/* Gallery loading skeleton */
.gallery-item--loading {
  background: linear-gradient(90deg, #1a2f5a 0%, #243d6e 50%, #1a2f5a 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ═══════════════════════════════════════════════════════════════
   Academic–Industry Roundtable photos page
   Class-based replacements for previously inline styles. Visual
   output matches the prior inline-styled implementation 1:1.
   ═══════════════════════════════════════════════════════════════ */
.airr-hero { background: linear-gradient(110deg,#0d1f4f,#1E3A8A); padding: 3.5rem 0 3rem; position: relative; overflow: hidden; }
.airr-hero__pattern { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px); background-size: 24px 24px; }
.airr-hero__container { position: relative; z-index: 2; }
.airr-hero__grid { display: grid; gap: 2.5rem; align-items: center; margin-top: 1rem; }
@media(min-width:1024px){ .airr-hero__grid { grid-template-columns: 1fr 1fr; } }
.airr-hero__badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(212,175,55,.15); border: 1px solid rgba(212,175,55,.3); border-radius: 2rem; padding: .3rem .875rem; margin-bottom: 1.125rem; }
.airr-hero__badge-dot { width: .5rem; height: .5rem; background: #D4AF37; border-radius: 50%; }
.airr-hero__badge-text { font-size: .7rem; font-weight: 700; color: #D4AF37; letter-spacing: .08em; text-transform: uppercase; }
.airr-hero__title { font-family: var(--font-display); font-size: clamp(1.625rem,3.5vw,2.5rem); font-weight: 800; color: #fff; margin: 0 0 1rem; line-height: 1.1; }
.airr-hero__title-accent { color: #D4AF37; }
.airr-hero__quote { font-size: .9375rem; font-style: italic; color: rgba(212,175,55,.85); font-weight: 600; margin: 0 0 .875rem; }
.airr-hero__lead { font-size: .9375rem; color: rgba(191,219,254,.85); line-height: 1.72; max-width: 32rem; margin: 0 0 1.75rem; }
.airr-hero__actions { display: flex; flex-wrap: wrap; gap: .875rem; }
.airr-hero__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.airr-hero__img { width: 100%; display: block; object-fit: cover; aspect-ratio: 4/3; }

.airr-facts { background: var(--navy); padding: 1.25rem 0; }
.airr-facts__inner { display: flex; flex-wrap: wrap; gap: 0; justify-content: center; }
.airr-facts__item { text-align: center; padding: .875rem 2rem; border-right: 1px solid rgba(255,255,255,.1); }
.airr-facts__item:last-child { border-right: 0; }
.airr-facts__icon { font-size: 1.25rem; line-height: 1; margin-bottom: .25rem; }
.airr-facts__label { font-size: .65rem; text-transform: uppercase; letter-spacing: .07em; color: rgba(191,219,254,.55); margin-bottom: .125rem; }
.airr-facts__value { font-size: .8125rem; font-weight: 600; color: #fff; }

.airr-about { max-width: 60rem; margin: 0 auto; }
.airr-about__lead { margin-top: 1.25rem; color: var(--text-light); line-height: 1.8; }
.airr-about__lead strong { color: var(--navy); }

.airr-gallery-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.airr-gallery-head__hint { font-size: .875rem; color: var(--text-dim); margin: 0; }
.airr-gallery-head .section-title { font-size: 1.5rem; }

/* Clean gallery variant — no hover caption strip, no hover search/plus icon */
.gallery-grid--clean .gallery-item__caption,
.gallery-grid--clean .gallery-item__overlay svg { display: none; }
.gallery-grid--clean .gallery-item__overlay { background: rgba(13,31,79,0); transition: background .3s; }
.gallery-grid--clean .gallery-item:hover .gallery-item__overlay { background: rgba(13,31,79,.25); }

/* ═══════════════════════════════════════════════════════════════
   Voices of University Governance page

   The session cards reuse the Past Webinars grid wholesale
   (.webinar-grid / .card.webinar-card / .webinar-card__*, see the
   "Past Webinars" block above) so both video listings stay visually
   identical — same columns, gap, thumbnail ratio, body spacing and CTA.
   Only the page-specific extras live here.
   ═══════════════════════════════════════════════════════════════ */
.voug-intro { max-width: 80rem; margin: 0 auto 2.5rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); }
.voug-intro p { font-size: 1rem; line-height: 1.82; color: var(--gray-700); margin: 0; }

/* Session names run long — show them in full instead of the 3-line
   clamp Past Webinars applies to its shorter titles. */
.voug-vid .webinar-card__title { display: block; -webkit-line-clamp: none; overflow: visible; }

/* Click-to-play: the poster anchor is swapped for the embed in place,
   so the session still plays on this page. */
.voug-vid__media.is-playing { aspect-ratio: 16 / 9; background: #000; }
.voug-vid__frame { width: 100%; height: 100%; border: 0; display: block; }

/* ═══════════════════════════════════════════════════════════════
   Policy Advocacy page — placeholder ("Upcoming Page" mirrors live)
   ═══════════════════════════════════════════════════════════════ */
.policy-upcoming { padding: 1.25rem 1rem; text-align: center; }
.policy-upcoming__title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--navy); margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   e-Newsletter page — University Voice editions grid
   ═══════════════════════════════════════════════════════════════ */
.enews-thumb-link { display: block; }
.enews-thumb { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.enews-card__title { font-size: .9375rem; }

/* ═══════════════════════════════════════════════════════════════
   Government Policy Documents & Reports page
   ═══════════════════════════════════════════════════════════════ */
.gpd-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: stretch; }
.gpd-card { display: flex; flex-direction: column; height: 100%; }
/* The cover fills the card edge to edge — no grey frame around it.
   It used to sit in a 3/4 box with .75rem of pearl padding and object-fit:
   contain, so every cover was ringed by a grey band (most obvious on the
   white document scans). All seven covers are portrait at 0.767-0.773, so
   the box is set to that ratio (305/395 = 0.772) and object-fit: cover now
   crops well under 1% — nothing of the artwork is lost. object-position:
   top keeps that sliver off the document's title end. #fff is only a
   placeholder while the image loads; the image covers it completely. */
.gpd-thumb-link { display: block; overflow: hidden; background: #fff; position: relative; aspect-ratio: 305 / 395; }
.gpd-thumb { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .4s; }
.gpd-thumb-link:hover .gpd-thumb { transform: scale(1.04); }
.gpd-card__body { flex: 1; display: flex; flex-direction: column; }
.gpd-card__title { font-size: .9rem; }
.gpd-card__year { font-size: .8125rem; color: var(--text-light); margin: .5rem 0 1rem; font-weight: 600; }
.gpd-card__cta { margin-top: auto; align-self: flex-start; }

/* ═══════════════════════════════════════════════════════════════
   Blog popup modal — mirrors cipuglobal.org's "Latest Articles"
   modal triggered from a topbar button. Class-based, no inline CSS.
   ═══════════════════════════════════════════════════════════════ */
/* Blog + FCPD share one rule so the two topbar badges can never drift apart.
   FCPD is an <a>, so it needs the extra `.topbar` to outrank
   `.topbar a { color: rgba(191,219,254,.85) }` above — otherwise its label
   and icon render pale blue while the Blog <button> stays gold. */
.topbar__blog-btn,
.topbar .topbar__fcpd-btn {
  display: inline-flex; align-items: center; gap: .375rem;
  background: rgba(212, 175, 55, .18);
  color: var(--gold);
  border: 1px solid rgba(212, 175, 55, .35);
  border-radius: 2rem;
  padding: .15rem .75rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.topbar__blog-btn:hover,
.topbar .topbar__fcpd-btn:hover { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }
.topbar__blog-btn svg,
.topbar .topbar__fcpd-btn svg { width: .875rem; height: .875rem; flex: 0 0 auto; }

.cipu-blog-popup {
  display: none; position: fixed; inset: 0; z-index: 99998;
  background: rgba(0, 0, 0, .5);
  align-items: center; justify-content: center;
  padding: 1rem;
}
.cipu-blog-popup.is-open { display: flex; }
.cipu-blog-popup__dialog {
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
  width: 100%; max-width: 560px;
  max-height: 90vh; overflow: hidden;
  display: flex; flex-direction: column;
  animation: cipuBlogPopupIn .25s ease-out;
}
@keyframes cipuBlogPopupIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.cipu-blog-popup__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  background: linear-gradient(110deg, var(--navy-deep), var(--navy));
  color: #fff;
}
.cipu-blog-popup__title {
  margin: 0; font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 700; color: #fff;
  display: inline-flex; align-items: center; gap: .5rem;
}
.cipu-blog-popup__title svg { color: var(--gold); }
.cipu-blog-popup__close {
  background: rgba(255, 255, 255, .12); border: 0;
  color: #fff; width: 2rem; height: 2rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.25rem; line-height: 1;
  transition: background .15s;
}
.cipu-blog-popup__close:hover { background: rgba(255, 255, 255, .22); }
.cipu-blog-popup__footer {
  display: flex; justify-content: flex-end;
  padding: .625rem 1.25rem;
  background: var(--pearl);
  border-bottom: 1px solid var(--border);
}
.cipu-blog-popup__view-all {
  font-size: .8125rem; font-weight: 700;
  color: var(--gold-dark);
}
.cipu-blog-popup__view-all:hover { color: var(--navy); }
.cipu-blog-popup__body {
  padding: 1rem 1.25rem 1.25rem;
  overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: .875rem;
}
.cipu-blog-popup__card {
  display: flex; gap: .875rem;
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none; color: inherit;
  transition: background .2s, border-color .2s, transform .2s;
}
.cipu-blog-popup__card:hover {
  background: var(--pearl);
  border-color: rgba(30, 58, 138, .25);
  transform: translateY(-1px);
}
.cipu-blog-popup__thumb {
  flex-shrink: 0;
  width: 4rem; height: 4rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--pearl);
}
.cipu-blog-popup__thumb img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  display: block;
}
.cipu-blog-popup__info { flex: 1; min-width: 0; }
.cipu-blog-popup__date {
  font-size: .7rem; color: var(--text-dim);
  margin: 0 0 .25rem;
  display: inline-flex; align-items: center; gap: .25rem;
}
.cipu-blog-popup__post-title {
  font-family: var(--font-display);
  font-size: .875rem; font-weight: 700;
  color: var(--navy);
  margin: 0 0 .25rem;
  line-height: 1.3;
}
.cipu-blog-popup__excerpt {
  font-size: .78rem; color: var(--text-light);
  line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
body.cipu-popup-locked { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════
   Secretariat page — team cards with email + LinkedIn
   ═══════════════════════════════════════════════════════════════ */
.sec-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top; display: block; }
.sec-card__email { display: block; margin-top: .5rem; font-size: .78rem; color: var(--navy); word-break: break-word; }
.sec-card__email:hover { color: var(--gold-dark); }
.sec-card__social { display: flex; justify-content: center; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border-light); }
.sec-card__social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--pearl); color: var(--navy);
  border: 1px solid var(--border);
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.sec-card__social-link:hover { background: var(--navy); color: #fff; border-color: var(--navy); transform: translateY(-2px); }
.sec-card__social-link svg { width: 1rem; height: 1rem; }

/* ═══════════════════════════════════════════════════════════════
   Important Links page (/resources/important-links)
   ═══════════════════════════════════════════════════════════════ */
.imp-links-wrap { display: flex; flex-direction: column; gap: 3rem; }
.imp-links-cat__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--border); }
.imp-links-cat__icon { width: 2.75rem; height: 2.75rem; border-radius: .625rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(30, 58, 138, .1); color: var(--navy); }
.imp-links-cat__icon--navy  { background: rgba(30, 58, 138, .1); color: var(--navy); }
.imp-links-cat__icon--green { background: rgba(5, 150, 105, .1); color: #059669; }
.imp-links-cat__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--navy); margin: 0 0 .125rem; }
.imp-links-cat__desc  { font-size: .875rem; color: var(--text-light); margin: 0; }

.imp-link-card {
  display: block; text-decoration: none;
  background: #fff; border: 1px solid var(--border);
  border-top-width: 3px; border-top-color: var(--navy);
  border-radius: var(--radius-lg);
  padding: 1.625rem;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.imp-link-card:hover { box-shadow: 0 8px 32px rgba(30, 58, 138, .12); transform: translateY(-3px); }
.imp-link-card--navy  { border-top-color: var(--navy); }
.imp-link-card--green { border-top-color: #059669; }
.imp-link-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
/* Plain serial number in a round chip (was the "Sr. 01" pill) */
.imp-link-card__sr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; flex-shrink: 0;
  font-size: .8125rem; font-weight: 700; line-height: 1;
  border-radius: 50%; white-space: nowrap;
  background: rgba(30, 58, 138, .1); color: var(--navy);
}
.imp-link-card--navy  .imp-link-card__sr { background: rgba(30, 58, 138, .1); color: var(--navy); }
.imp-link-card--green .imp-link-card__sr { background: rgba(5, 150, 105, .1); color: #059669; }
/* margin-left:auto keeps the external-link icon on the card's right edge.
   It used to be held there by `justify-content:space-between` against the
   serial-number chip; with that chip removed the icon is the row's only
   child and would otherwise sit flush left. */
.imp-link-card__ext { flex-shrink: 0; margin-top: .1rem; margin-left: auto; color: var(--navy); }
.imp-link-card--navy  .imp-link-card__ext { color: var(--navy); }
.imp-link-card--green .imp-link-card__ext { color: #059669; }
.imp-link-card__title { font-family: var(--font-display); font-size: .9375rem; font-weight: 700; color: var(--navy); line-height: 1.4; margin: 0 0 .5rem; }
.imp-link-card__desc  { font-size: .8125rem; color: var(--text-light); line-height: 1.65; margin: 0 0 .875rem; }
.imp-link-card__url   { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; color: var(--navy); }
.imp-link-card--navy  .imp-link-card__url { color: var(--navy); }
.imp-link-card--green .imp-link-card__url { color: #059669; }

/* ═══════════════════════════════════════════════════════════════
   Regional Councils page — 4 region sections, each with one
   chairperson card centered. Mirrors live cipuglobal.org layout.
   ═══════════════════════════════════════════════════════════════ */
/* Regional Councils — rich card design (kept from local). Each region
   has a colored header (Southern=navy, Eastern=green, Western=purple,
   Northern=amber). Card body shows chair photo, name, role, LinkedIn. */
.region-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: box-shadow .3s, transform .25s;
}
.region-card:hover { box-shadow: 0 12px 40px rgba(30, 58, 138, .12); transform: translateY(-4px); }
.region-card__header {
  padding: 1.5rem 1.75rem;
  display: flex; align-items: center; gap: 1rem;
  border-bottom: 1px solid var(--border);
}
.region-card__icon {
  width: 3rem; height: 3rem; border-radius: .75rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0;
}
.region-card__label {
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  margin: 0 0 .2rem;
}
.region-card__title {
  font-family: var(--font-display);
  font-size: 1.0625rem; font-weight: 700;
  color: var(--navy); margin: 0;
}
.region-card__body { padding: 1.5rem 1.75rem 1.75rem; text-align: center; }
.region-card__chair-img {
  width: 6rem; height: 6rem; border-radius: 50%;
  object-fit: cover; object-position: top;
  border: 3px solid var(--border);
  display: block; margin: 0 auto 1rem;
}
.region-card__chair-name {
  font-family: var(--font-display);
  font-size: .95rem; font-weight: 700;
  color: var(--navy); margin: 0 0 .25rem;
}
.region-card__chair-role {
  font-size: .78rem; color: var(--text-light);
  line-height: 1.55; margin: 0 0 1rem;
}
/* Color modifiers — Southern (navy) / Eastern (green) / Western (purple) / Northern (amber) */
.region-card--south  .region-card__header { background: #EFF6FF; }
.region-card--south  .region-card__icon   { background: rgba(30, 58, 138, .12); }
.region-card--south  .region-card__label  { color: #1E3A8A; }
.region-card--east   .region-card__header { background: #ECFDF5; }
.region-card--east   .region-card__icon   { background: rgba(5, 150, 105, .12); }
.region-card--east   .region-card__label  { color: #059669; }
.region-card--west   .region-card__header { background: #F5F3FF; }
.region-card--west   .region-card__icon   { background: rgba(124, 58, 237, .12); }
.region-card--west   .region-card__label  { color: #7C3AED; }
.region-card--north  .region-card__header { background: #FFFBEB; }
.region-card--north  .region-card__icon   { background: rgba(217, 119, 6, .12); }
.region-card--north  .region-card__label  { color: #D97706; }

.region-cards-grid {
  display: grid; gap: 1.75rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ═══════════════════════════════════════════════════════════════
   National Committees page — original local rich design.
   Header (kicker + number + title) → Convenor row (horizontal) →
   2-col grid: Distinguished Members (left) + Committee Mandate (right).
   Content matches live cipuglobal.org for titles/convenor/members.
   Kicker labels and mandates are local design accents (preserved
   from the original local design — not present on live).
   ═══════════════════════════════════════════════════════════════ */
/* Column-packed layout so all 6 committees are visible together with far less
   scrolling. The committees are split into vertical columns (col1: 01,02 |
   col2: 03,04 | col3: 05,06) — each column stacks its own cards tightly with
   no balancing gaps. 1 col (mobile) → 2 cols (tablet) → 3 cols (desktop). */
.nc-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 640px)  { .nc-list { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } }
@media (min-width: 1024px) { .nc-list { grid-template-columns: repeat(3, 1fr); } }

/* one vertical column = its cards stacked tightly top-to-bottom */
.nc-col { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 640px) { .nc-col { gap: 1.75rem; } }

.nc-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
  transition: box-shadow .25s, transform .25s;
}
.nc-card:hover { box-shadow: 0 10px 36px rgba(30, 58, 138, .1); transform: translateY(-3px); }

.nc-card__header {
  padding: 1.375rem 1.625rem;
  border-bottom: 2px solid var(--border-light);
}
.nc-card__num {
  font-family: var(--font-display);
  font-size: 2.25rem; font-weight: 800;
  opacity: .55; line-height: 1;
  float: right; margin-top: -.25rem;
}
.nc-card__kicker {
  font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  margin: 0 0 .375rem;
}
.nc-card__title {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700;
  color: var(--navy); margin: 0;
  line-height: 1.3;
}

/* Convenor row — horizontal: photo on left, info on right */
.nc-card__convenor {
  display: flex; gap: 1rem; align-items: center;
  padding: 1.25rem 1.625rem;
  background: var(--pearl);
  border-bottom: 1px solid var(--border);
}
.nc-card__conv-img {
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%; object-fit: cover; object-position: top;
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.nc-card__conv-label {
  font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--gold-dark); margin: 0 0 .125rem;
}
.nc-card__conv-name {
  font-weight: 700; color: var(--navy);
  font-size: .875rem; margin: 0 0 .125rem;
}
.nc-card__conv-role {
  font-size: .775rem; color: var(--text-light);
  margin: 0; line-height: 1.35;
}

/* 2-column body: members (left) | mandate (right) */
.nc-card__body { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .nc-card__body--two-col { grid-template-columns: 1fr 1fr; } }

.nc-card__members { padding: 1.25rem 1.625rem; }
.nc-card__members-label {
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-dim); margin: 0 0 .875rem;
}
.nc-member-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--border-light);
}
.nc-member-row:last-child { border-bottom: none; }
.nc-member-row__img {
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%; object-fit: cover; object-position: top;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
}
.nc-member-row__name {
  font-size: .8125rem; font-weight: 700;
  color: var(--navy); margin: 0 0 .1rem;
}
.nc-member-row__role {
  font-size: .72rem; color: var(--text-light);
  margin: 0; line-height: 1.3;
}

/* LinkedIn icon on the convenor / member rows. `margin-left:auto` parks it on
   the row's right edge so it never competes with the name + role block, which
   keeps wrapping exactly as it did before. Same treatment as
   .gac-linkedin-btn, sized down for these tighter rows. */
.nc-linkedin {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: #fff; color: var(--navy);
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.nc-linkedin:hover,
.nc-linkedin:focus-visible {
  background: var(--navy); color: #fff; border-color: var(--navy);
}
.nc-linkedin--sm { width: 1.5rem; height: 1.5rem; }
.nc-linkedin--sm svg { width: 11px; height: 11px; }

.nc-card__mandate {
  padding: 1.25rem 1.625rem;
  border-top: 1px solid var(--border);
}
.nc-card__body--two-col .nc-card__mandate {
  border-top: 0;
  border-left: 1px solid var(--border-light);
}
@media (max-width: 767px) {
  .nc-card__body--two-col .nc-card__mandate {
    border-top: 1px solid var(--border);
    border-left: 0;
  }
}
.nc-card__mandate p {
  font-size: .8125rem; color: var(--text-light);
  line-height: 1.72; margin: 0;
}

/* Per-committee color modifiers — header background + kicker color +
   number color + mandate-label color. Convenor label stays gold-dark. */
.nc-card--c1 .nc-card__header        { background: #EFF6FF; border-bottom-color: rgba(30, 58, 138, .25); }
.nc-card--c1 .nc-card__num           { color: #1E3A8A; opacity: .12; }
.nc-card--c1 .nc-card__kicker        { color: #1E3A8A; }
.nc-card--c1 .nc-card__mandate-label { color: #1E3A8A; }

.nc-card--c2 .nc-card__header        { background: #ECFDF5; border-bottom-color: rgba(5, 150, 105, .25); }
.nc-card--c2 .nc-card__num           { color: #059669; opacity: .12; }
.nc-card--c2 .nc-card__kicker        { color: #059669; }
.nc-card--c2 .nc-card__mandate-label { color: #059669; }

.nc-card--c3 .nc-card__header        { background: #F5F3FF; border-bottom-color: rgba(124, 58, 237, .25); }
.nc-card--c3 .nc-card__num           { color: #7C3AED; opacity: .12; }
.nc-card--c3 .nc-card__kicker        { color: #7C3AED; }
.nc-card--c3 .nc-card__mandate-label { color: #7C3AED; }

.nc-card--c4 .nc-card__header        { background: #FFFBEB; border-bottom-color: rgba(217, 119, 6, .25); }
.nc-card--c4 .nc-card__num           { color: #D97706; opacity: .12; }
.nc-card--c4 .nc-card__kicker        { color: #D97706; }
.nc-card--c4 .nc-card__mandate-label { color: #D97706; }

.nc-card--c5 .nc-card__header        { background: #FEF2F2; border-bottom-color: rgba(220, 38, 38, .25); }
.nc-card--c5 .nc-card__num           { color: #DC2626; opacity: .12; }
.nc-card--c5 .nc-card__kicker        { color: #DC2626; }
.nc-card--c5 .nc-card__mandate-label { color: #DC2626; }

.nc-card--c6 .nc-card__header        { background: #ECFEFF; border-bottom-color: rgba(8, 145, 178, .25); }
.nc-card--c6 .nc-card__num           { color: #0891B2; opacity: .12; }
.nc-card--c6 .nc-card__kicker        { color: #0891B2; }
.nc-card--c6 .nc-card__mandate-label { color: #0891B2; }

/* ═══════════════════════════════════════════════════════════════
   PHASE 1 — Inline-CSS extraction (layouts/header, layouts/footer)
   Each rule maps 1-to-1 to a removed inline style attribute. No
   visual change intended; existing rules are untouched.
   ═══════════════════════════════════════════════════════════════ */

/* ── layouts/header.php ─────────────────────────────────────── */
.topbar__row { display: flex; align-items: center; justify-content: space-between; }
.topbar__left { display: flex; align-items: center; gap: 1.25rem; font-size: .75rem; }
.topbar__email-link { display: flex; align-items: center; gap: .375rem; }
.topbar__addr { display: none; color: rgba(191, 219, 254, .65); }
.main-nav__actions { display: flex; align-items: center; gap: .75rem; }
.topbar__actions { display: flex; align-items: center; gap: .5rem; }
.topbar .topbar__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: rgba(212, 175, 55, .18);
  color: var(--gold);
  border: 1px solid rgba(212, 175, 55, .4);
  transition: background .2s, color .2s, transform .2s, border-color .2s;
}
.topbar .topbar__social:hover { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); transform: translateY(-1px); }
.topbar .topbar__social svg { width: .95rem; height: .95rem; }

/* ── layouts/footer.php ─────────────────────────────────────── */
.footer__logo-link { display: inline-block; }
.footer__logo-img {
  display: block; height: 88px; width: auto;
  background: #fff; padding: .75rem .875rem; border-radius: .75rem;
  margin-bottom: 1.25rem; box-shadow: 0 8px 22px rgba(0,0,0,.20);
}
.footer__brand-name {
  font-size: 1rem; font-weight: 700; color: #fff;
  line-height: 1.45; margin: 0 0 .75rem; max-width: 20rem;
}
.footer__lead { font-size: .875rem; color: #C8D8E8; line-height: 1.75; margin-bottom: 1.25rem; }
.footer__address { font-style: normal; }
.footer__address-line { display: flex; gap: .5rem; line-height: 1.6; }
.footer__address-icon { flex-shrink: 0; margin-top: .2rem; }
.footer__contact-link { display: flex; align-items: center; gap: .5rem; }
.footer__contact-btn { margin-top: 1rem; border-color: rgba(200, 216, 232, .4); color: #C8D8E8; }
.footer__bottom-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.footer__copy { margin: 0; font-size: .75rem; }
.footer__credit-link { color: #B8C8DD; }

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE (pages/home.php) — Phase 1 inline-CSS extraction.
   All rules below were lifted from inline <style> blocks and
   style="..." attributes in app/Views/pages/home.php. No design
   change intended; this is a relocation only.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero Slider — matches demo (v3/public) ─────────
   • Banner has min/max heights at the section level
   • Image height drives the slide's height, not the slide
   • object-position: center top → keeps the top of the image
     (titles, faces, building tops) visible when cover crops
   • filter: brightness(.65) → soft dark wash so the gold tag,
     white headline, and lead text on the bottom-left caption
     remain legible over any photo (this is the "black-tint"
     effect on the demo banners). */
.hp-slider{position:relative;overflow:hidden;background:#0d1f4f;min-height:520px;max-height:680px;}
.hp-slider__track{display:flex;transition:transform .7s cubic-bezier(.4,0,.2,1);will-change:transform;height:100%;}
.hp-slider__slide{min-width:100%;position:relative;overflow:hidden;}
.hp-slider__slide img{width:100%;height:520px;object-fit:cover;object-position:center top;display:block;filter:brightness(.65);}
@media(min-width:768px){.hp-slider__slide img{height:620px;}}
@media(min-width:1200px){.hp-slider__slide img{height:680px;}}
/* Caption: plain descriptive text overlaid on bottom of slide
   (matches live). Hidden when a slide has no caption. */
.hp-slider__caption{
  position:absolute;bottom:0;left:0;right:0;
  padding:.75rem 1rem;
  background:linear-gradient(to top,rgba(13,31,79,.92) 0%,rgba(13,31,79,.55) 60%,transparent 100%);
  pointer-events:none;
}
@media(min-width:768px){.hp-slider__caption{padding:1.5rem 3rem;}}
@media(min-width:1200px){.hp-slider__caption{padding:1.75rem 4rem;}}
.hp-slider__caption-text{
  color:rgba(255,255,255,.96);
  font-size:.78rem;
  line-height:1.45;
  margin:0;
  max-width:60rem;
  font-weight:500;
  display:-webkit-box;
  -webkit-line-clamp:3;
  line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
@media(min-width:768px){
  .hp-slider__caption-text{
    font-size:1rem;line-height:1.65;
    -webkit-line-clamp:unset;line-clamp:unset;display:block;overflow:visible;
  }
}
@media(min-width:1200px){.hp-slider__caption-text{font-size:1.0625rem;}}
/* Nav arrows */
.hp-slider__btn{position:absolute;top:50%;transform:translateY(-50%);width:3rem;height:3rem;border-radius:50%;background:rgba(255,255,255,.15);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;z-index:10;backdrop-filter:blur(4px);}
.hp-slider__btn:hover{background:rgba(255,255,255,.3);}
.hp-slider__btn--prev{left:1rem;}
.hp-slider__btn--next{right:1rem;}
@media(min-width:768px){.hp-slider__btn--prev{left:2rem;}.hp-slider__btn--next{right:2rem;}}
/* Dots */
.hp-slider__dots{position:absolute;bottom:1.25rem;left:50%;transform:translateX(-50%);display:flex;gap:.5rem;z-index:10;}
.hp-slider__dot{width:.55rem;height:.55rem;border-radius:50%;background:rgba(255,255,255,.35);border:none;cursor:pointer;transition:background .2s,transform .2s;}
.hp-slider__dot.active,.hp-slider__dot:hover{background:#D4AF37;transform:scale(1.3);}

/* ── About Section ───────────────────── */
.about-grid{display:grid;gap:3rem;align-items:center;}
@media(min-width:900px){.about-grid{grid-template-columns:1fr 420px;}}
.about-brochure{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);position:relative;}
.about-brochure img{width:100%;display:block;}
.about-brochure__badge{position:absolute;bottom:1.25rem;left:1.25rem;background:linear-gradient(135deg,#D4AF37,#B8960F);color:#fff;font-size:.75rem;font-weight:700;padding:.5rem 1.125rem;border-radius:2rem;display:flex;align-items:center;gap:.5rem;}
.hp-about__lead{color:var(--text-light);line-height:1.82;}
.hp-about__lead--top{margin-top:1.25rem;}
.hp-about__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem;}

/* ── Focus Area Cards ─────────────────── */
.focus-wrap{display:grid;gap:2rem;}
@media(min-width:768px){.focus-wrap{grid-template-columns:1fr 1fr;}}
@media(min-width:1100px){.focus-wrap{grid-template-columns:3fr 2fr;}}
.focus-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem;}
.focus-list--top{margin-top:1.5rem;}
.focus-list li{display:flex;align-items:center;gap:.875rem;padding:1rem 1.25rem;background:#fff;border-radius:var(--radius);border:1px solid var(--border);border-left:3px solid var(--navy);transition:box-shadow .2s,border-left-color .2s;}
.focus-list li:hover{box-shadow:var(--shadow);border-left-color:var(--gold);}
.focus-list__icon{width:2rem;height:2rem;background:rgba(30,58,138,.08);border-radius:.5rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.focus-list__text{font-size:16px;font-weight:600;color:var(--navy);line-height:1.4;}

/* ── Stats Grid ──────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);}
@media(min-width:480px){.stats-grid{grid-template-columns:repeat(3,1fr);}}
.stats-grid__item{background:#fff;padding:1.5rem 1rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.375rem;}
.stats-grid__icon{width:3.25rem;height:3.25rem;object-fit:contain;margin-bottom:.25rem;}
.stats-grid__num{font-family:var(--font-display);font-size:1.875rem;font-weight:800;color:var(--navy);line-height:1;}
.stats-grid__label{font-size:.75rem;color:var(--text-dim);text-align:center;line-height:1.35;}
.hp-landscape__rule{margin-bottom:1.5rem;}
.hp-landscape__source{font-size:.78rem;color:var(--text-dim);margin-top:1rem;text-align:center;}

/* ── Section header row (eyebrow + h2 on left, action btns on right) ── */
.hp-section-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:2.25rem;}
.hp-section-head__nav{display:flex;gap:.625rem;}
.hp-circle-btn{
  width:2.75rem;height:2.75rem;border-radius:50%;
  background:var(--pearl);border:1px solid var(--border);color:var(--navy);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.hp-circle-btn:hover{background:var(--navy);color:#fff;}

/* ── Testimonials ─────────────────────
   Carousel: 1 card visible on mobile, 2 cards side-by-side on
   tablet/desktop, slides one card at a time. Author block always
   anchors at the bottom of the card so heights line up. */
.testimonial-track-wrap{overflow:hidden;}
.testimonial-track{display:flex;gap:1.5rem;transition:transform .6s cubic-bezier(.4,0,.2,1);align-items:stretch;}
.testimonial-card{
  flex:0 0 100%;
  min-width:0;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:2rem 2rem 1.75rem;position:relative;
  display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(13,31,79,.04);
  transition:box-shadow .25s,transform .25s;
}
.testimonial-card:hover{box-shadow:0 12px 32px rgba(13,31,79,.10);transform:translateY(-2px);}
@media(min-width:768px){.testimonial-card{flex:0 0 calc(50% - .75rem);}}
.testimonial-card__quote{position:absolute;top:.875rem;left:1.25rem;font-family:var(--font-display);font-size:4rem;color:var(--gold);opacity:.22;line-height:.7;pointer-events:none;}
.testimonial-card__text{font-size:.9375rem;line-height:1.78;color:var(--gray-700);font-style:italic;margin:0 0 1.25rem;position:relative;z-index:1;flex:1;white-space:pre-line;}
.testimonial-card--long .testimonial-card__text{
  max-height:11rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 75%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 75%,transparent 100%);
}
.testimonial-card--long.is-expanded .testimonial-card__text{
  max-height:none;
  -webkit-mask-image:none;mask-image:none;
}
.testimonial-card__read-more{
  align-self:flex-start;background:none;border:none;cursor:pointer;
  color:var(--gold-dark);font-weight:700;font-size:.85rem;padding:0;
  margin:-.5rem 0 1rem;
}
.testimonial-card__read-more:hover{text-decoration:underline;}
.testimonial-card__author{display:flex;align-items:center;gap:.875rem;margin-top:auto;padding-top:1rem;border-top:1px solid var(--border-light);}
.testimonial-card__author img{width:3.25rem;height:3.25rem;border-radius:50%;object-fit:cover;object-position:top;border:2px solid var(--border);flex-shrink:0;}
.testimonial-card__name{font-weight:700;color:var(--navy);font-size:.9rem;margin:0;}
.testimonial-card__role{font-size:.78rem;color:var(--text-light);margin:.15rem 0 0;line-height:1.4;}
/* ═══════════════════════════════════════════════════════════════
   TESTIMONIALS PAGE (/testimonials) — full-width quote rows
   Added: 2026-08-20
   Affects: app/Views/pages/testimonials.php  (that page only)
   ───────────────────────────────────────────────────────────────
   One testimonial per row, landscape rather than portrait: the
   speaker sits in a narrow left column, the quote fills the rest.
   Deliberately NOT the homepage .testimonial-card (which stacks its
   author underneath) — that component belongs to the carousel and
   is left untouched.

   Below 768px the two columns collapse to speaker-above-quote, so
   the quote keeps a readable measure on a phone.
   ═══════════════════════════════════════════════════════════════ */
.testi-wall { display: grid; gap: 1.5rem; }

.testi-row {
  display: grid;
  gap: 1.25rem;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(13, 31, 79, .04);
  transition: box-shadow .25s, transform .25s;
}
.testi-row:hover {
  box-shadow: 0 12px 32px rgba(13, 31, 79, .10);
  transform: translateY(-2px);
}
@media(min-width:768px) {
  .testi-row {
    grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr);
    gap: 2rem;
    padding: 2rem 2.25rem;
  }
}

/* ── Speaker column ─────────────────────────────────────────── */
.testi-row__author { display: flex; align-items: center; gap: .875rem; }
.testi-row__photo {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--border);
  object-fit: cover;
  object-position: top;
}
.testi-row__name {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
}
.testi-row__role {
  margin: .25rem 0 0;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--text-light);
}
@media(min-width:768px) {
  /* Stack + centre the speaker, and let the column stretch full height
     so its divider runs the whole side of the card. */
  .testi-row__author {
    flex-direction: column;
    justify-content: center;
    gap: .75rem;
    padding-right: 2rem;
    text-align: center;
    border-right: 1px solid var(--border-light);
  }
  .testi-row__photo { width: 5rem; height: 5rem; }
}

/* ── Quote ──────────────────────────────────────────────────── */
.testi-row__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
/* Wrapper so the watermark glyph anchors to the text, not to the whole
   (stretched) cell — otherwise centring the text strands the glyph. */
.testi-row__quoted { position: relative; }
/* Oversized glyph sits behind the text as a watermark, as on the
   homepage card — the text carries z-index so it always wins. */
.testi-row__quote {
  position: absolute;
  top: -1.25rem;
  left: -.625rem;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: .7;
  color: var(--gold);
  opacity: .2;
  pointer-events: none;
}
.testi-row__text {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: .9375rem;
  font-style: italic;
  line-height: 1.78;
  color: var(--gray-700);
  white-space: pre-line;
}

@media(max-width:520px) {
  .testi-row { padding: 1.375rem; }
}
@media(prefers-reduced-motion:reduce) {
  .testi-row { transition: none; }
  .testi-row:hover { transform: none; }
}


/* ── Strategic Partners block ─────────── */
.hp-partners-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;align-items:center;}
@media(min-width:768px){.hp-partners-grid{grid-template-columns:repeat(4,1fr);}}
.hp-partner-cell{min-height:6rem;padding:1.25rem 1.5rem;}
.hp-partner-img-cap{max-height:4rem;}

/* ── Leadership Highlights ───────────── */
.leader-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow .25s,transform .25s;text-decoration:none;display:block;}
.leader-card:hover{box-shadow:0 12px 40px rgba(30,58,138,.14);transform:translateY(-4px);}
.leader-card__img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top;display:block;transition:transform .5s;}
.leader-card:hover .leader-card__img{transform:scale(1.05);}
.leader-card__body{padding:1.125rem 1.25rem;}
.leader-card__badge{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--gold-dark);background:rgba(212,175,55,.12);padding:.2rem .55rem;border-radius:.25rem;display:inline-block;margin-bottom:.5rem;}
.leader-card__name{font-family:var(--font-display);font-size:.9375rem;font-weight:700;color:var(--navy);margin:0 0 .25rem;}
.leader-card__role{font-size:.78rem;color:var(--text-light);margin:0;line-height:1.4;}
.padma-badge{display:inline-block;background:linear-gradient(135deg,#D4AF37,#B8960F);color:#fff;font-size:.6rem;font-weight:700;padding:.18rem .5rem;border-radius:.2rem;margin-bottom:.375rem;}
/* Homepage Board of Advisors cards: the award title sits above the name as
   plain gold text, matching .person-card__eyebrow on /about/board-of-advisors
   instead of a gold chip over the photo. */
.leader-card__eyebrow{
  font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--gold-dark);margin:0 0 .375rem;
}
.hp-leaders-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.25rem;}
/* On laptops (1366×768 etc.) the 180px minimum left room for only 5 tracks,
   so the 6th advisor dropped to a line of its own. A 160px minimum fits all
   6 across, and auto-fit (instead of auto-fill) collapses any leftover empty
   track on wider screens so the cards stretch edge-to-edge instead of
   leaving a gap. Tablet/mobile keep the rule above. */
@media(min-width:1200px){
  .hp-leaders-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
}
.hp-leader-photo-wrap{position:relative;overflow:hidden;}
.hp-padma-pos{position:absolute;top:.5rem;left:.5rem;z-index:2;}

/* ── Events Cards ──────────────────────
   3-column equal-card grid. Poster images use cover + top-position
   so the title at the top of the poster is always preserved (no
   crop on important content). Card body sits below the image with
   tag + title + CTA — same height across all cards. */
.events-grid{display:grid;gap:1.5rem;grid-template-columns:1fr;}
@media(min-width:680px){.events-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.events-grid{grid-template-columns:repeat(3,1fr);}}
/* Two-up variant (app/Views/pages/home.php) — with only two events a third
   empty track left the pair stranded on the left of the row. */
@media(min-width:1024px){.events-grid--two{grid-template-columns:repeat(2,1fr);}}

.event-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
  text-decoration:none;
  transition:box-shadow .25s,transform .25s,border-color .25s;
}
.event-card:hover{
  box-shadow:0 12px 32px rgba(13,31,79,.12);
  transform:translateY(-3px);
  border-color:rgba(30,58,138,.18);
}
.event-card--featured{
  border:2px solid var(--gold);
  box-shadow:0 0 0 4px rgba(212,175,55,.08);
}
.event-card--featured:hover{border-color:var(--gold);}

.event-card__media{position:relative;background:#0d1f4f;aspect-ratio:16/10;overflow:hidden;}
.event-card__media img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .5s;}
.event-card:hover .event-card__media img{transform:scale(1.04);}

.event-card__tag{
  position:absolute;top:.75rem;left:.75rem;z-index:2;
  background:var(--gold);color:var(--navy-deep);
  font-size:.62rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;
  padding:.25rem .6rem;border-radius:.25rem;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.event-card__featured-pill{
  position:absolute;top:.75rem;right:.75rem;z-index:2;
  background:rgba(13,31,79,.92);color:#fff;
  font-size:.6rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;
  padding:.25rem .55rem .25rem .45rem;border-radius:.25rem;
  display:inline-flex;align-items:center;gap:.3rem;
  backdrop-filter:blur(4px);
}

.event-card__body{
  padding:1.125rem 1.25rem 1.25rem;
  display:flex;flex-direction:column;flex:1;
}
.event-card__title{
  font-family:var(--font-display);
  font-size:1.125rem;font-weight:700;   /* 18px — was .95rem (15.2px) */
  color:var(--navy);line-height:1.4;
  margin:0 0 1rem;flex:1;
}
.event-card__cta{
  font-size:.78rem;font-weight:700;
  color:var(--gold-dark);
  display:inline-flex;align-items:center;gap:.35rem;
  margin-top:auto;
}
.event-card:hover .event-card__cta{color:var(--navy);}
.event-card__cta svg{transition:transform .25s;}
.event-card:hover .event-card__cta svg{transform:translateX(3px);}

/* ── Blog Cards ──────────────────────── */
.blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow .25s,transform .25s;text-decoration:none;}
.blog-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);}
.blog-card__img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;display:block;transition:transform .5s;}
.blog-card:hover .blog-card__img{transform:scale(1.04);}
.blog-card__body{padding:1.25rem;flex:1;display:flex;flex-direction:column;}
.blog-card__cat{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-dark);margin:0 0 .5rem;}
.blog-card__publisher{font-size:.8125rem;font-weight:700;color:var(--gold-dark);line-height:1.35;margin:0 0 .5rem;}
.blog-card__title{font-family:var(--font-display);font-size:.9375rem;font-weight:700;color:var(--navy);line-height:1.4;margin:0 0 .875rem;flex:1;}
.blog-card__author{display:flex;align-items:center;gap:.625rem;padding-top:.875rem;border-top:1px solid var(--border-light);}
.blog-card__avatar{width:2.25rem;height:2.25rem;border-radius:50%;object-fit:cover;border:2px solid var(--border-light);flex-shrink:0;}
.blog-card__byline{font-size:.75rem;font-weight:700;color:var(--navy);margin:0;}
.blog-card__date{font-size:.7rem;color:var(--text-dim);margin:.1rem 0 0;}
.hp-blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;}

/* ── Blog Listing (/blog) — search bar + cards ──────────────────
   Matches the live cipuglobal.org/blog layout while reusing our own
   .card primitives. Cards reuse .card / .card__img / .card__body
   from the global card system above; the .blog-list-card-* classes
   only add the listing-specific decorations (LEADERSHIP banner,
   author row with icon, full-width Read More CTA). */
.blog-list-grid{align-items:stretch;}

.blog-list-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;height:100%;}

/* Image area: every card has the same image height (aspect-ratio:2/1 matches
   the majority of the source thumbnails — most are 1200x600 / 830x414).
   object-fit:cover fills the frame edge-to-edge on every page so cards look
   identical across pages 1–5. The 9 thumbnails that ship at 16:9 get a
   ~5% top/bottom trim — that's only the decorative dot pattern; the title
   text and the hexagonal portrait sit in the safe central band of the image
   and are never clipped. */
.blog-list-card__img{
  width:100%;
  aspect-ratio:2/1;
  object-fit:cover;
  object-position:center;
  display:block;
  background:#0d1f4f;
}

.blog-list-card__body{display:flex;flex-direction:column;padding:0;flex:1;}

.blog-list-card__author{
  display:flex;align-items:center;gap:.45rem;
  font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--gold-dark);
  margin:1.25rem 1.25rem .35rem;line-height:1.3;
}
.blog-list-card__author-icon{flex-shrink:0;color:var(--gold-dark);}

.blog-list-card__desig{
  font-size:.85rem;color:var(--text-light);line-height:1.55;
  margin:0 1.25rem .9rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--border-light);
}

.blog-list-card__excerpt{
  font-size:.85rem;color:var(--gray-700);line-height:1.6;
  margin:0 1.25rem 1rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;flex:1;
}

.blog-list-card__cta{
  display:block;text-align:center;
  background:var(--navy);color:#fff;
  font-weight:700;font-size:.9rem;letter-spacing:.02em;
  padding:.85rem 1rem;
  margin-top:auto;
  transition:background var(--transition);
}
.blog-list-card:hover .blog-list-card__cta{background:var(--navy-deep);}

/* Search bar above the card grid */
.blog-search-wrap{
  position:relative;
  max-width:340px;margin:0 0 1.5rem auto;
}
.blog-search{
  display:flex;align-items:center;gap:0;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;
}
.blog-search__label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.blog-search__input{
  flex:1;border:0;outline:0;background:transparent;
  padding:.65rem .9rem;font-size:.9rem;color:var(--navy);min-width:0;
}
.blog-search__input::placeholder{color:var(--text-dim);}
.blog-search__btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:0;background:var(--navy);color:#fff;
  width:2.6rem;height:2.4rem;cursor:pointer;
  transition:background var(--transition);
}
.blog-search__btn:hover{background:var(--navy-deep);}

/* Live-suggest dropdown — appears below the search bar as the user types */
.blog-search__suggest{
  list-style:none;margin:.25rem 0 0;padding:.25rem 0;
  position:absolute;top:100%;left:0;right:0;z-index:30;
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  max-height:24rem;overflow-y:auto;
}
.blog-search__suggest[hidden]{display:none;}
.blog-search__suggest li{margin:0;padding:0;}
.blog-search__suggest a{
  display:block;padding:.55rem .85rem;
  text-decoration:none;color:var(--navy);
  border-bottom:1px solid var(--border-light);
}
.blog-search__suggest li:last-child a{border-bottom:0;}
.blog-search__suggest a:hover,
.blog-search__suggest li.is-active a,
.blog-search__suggest li[aria-selected="true"] a{background:var(--pearl);}
.blog-search__suggest-author{
  display:block;font-size:.85rem;font-weight:700;color:var(--navy);line-height:1.3;
}
.blog-search__suggest-title{
  display:block;font-size:.75rem;color:var(--text-light);
  margin-top:.15rem;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-search__suggest mark{
  background:rgba(212,175,55,.25);color:inherit;padding:0 .1em;border-radius:.15em;
}

/* Empty / no-results state */
.blog-empty{
  text-align:center;padding:3rem 1rem;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
}
.blog-empty p{margin:0 0 1rem;color:var(--text-light);}

/* Pagination — square buttons, navy active state, prev/next arrows */
.blog-pagination{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.5rem;margin:2.5rem 0 .5rem;
}
.blog-pagination__page,
.blog-pagination__nav{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.5rem;height:2.5rem;padding:0 .65rem;
  background:#fff;color:var(--navy);
  border:1px solid var(--border);border-radius:.4rem;
  font-weight:700;font-size:.9rem;text-decoration:none;
  transition:background var(--transition),color var(--transition),border-color var(--transition);
}
.blog-pagination__page:hover,
.blog-pagination__nav:hover{
  background:rgba(30,58,138,.06);border-color:rgba(30,58,138,.25);
}
.blog-pagination__page.is-current{
  background:var(--navy);color:#fff;border-color:var(--navy);cursor:default;
}
.blog-pagination__page.is-current:hover{background:var(--navy);}
.blog-pagination__nav.is-disabled{
  opacity:.4;pointer-events:none;
}
.blog-pagination__nav svg{display:block;}

/* ── Press Coverage (/press-release) — admin-managed ──────────── */
.press-grid-cards{align-items:stretch;}
.press-card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;height:100%;
}
.press-card__link{display:block;}
.press-card__img{
  width:100%;display:block;
  aspect-ratio:3/2;object-fit:contain;
  background:#f5f5f5;
}
.press-card__body{padding:.75rem 1rem;}
.press-card__title{
  font-size:.825rem;font-weight:600;
  color:var(--navy);margin:0;
}
.press-cta{margin-top:2rem;text-align:center;}
.press-empty{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:3rem 1rem;text-align:center;color:var(--text-light);
}

/* ── Leadership Dialogues (/leadership-dialogues) — admin-managed ── */
.dialogue-grid{align-items:stretch;}
.dialogue-card{display:flex;flex-direction:column;height:100%;}
.dialogue-card__media{
  display:block;position:relative;overflow:hidden;
}
.dialogue-card__img{
  width:100%;aspect-ratio:4/3;
  object-fit:cover;display:block;
  transition:transform .4s;
}
.dialogue-card:hover .dialogue-card__img{transform:scale(1.04);}
.dialogue-card__placeholder{
  width:100%;aspect-ratio:4/3;
  background:var(--pearl);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-light);font-size:2rem;
}
.dialogue-card__play{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.25);pointer-events:none;
}
.dialogue-card__body{flex:1;display:flex;flex-direction:column;}
.dialogue-card__title{
  font-family:var(--font-display);font-size:.9rem;font-weight:700;
  color:var(--navy);margin:0 0 .35rem;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.dialogue-card__role{
  font-size:.78rem;color:var(--text-light);
  margin:0 0 .25rem;line-height:1.5;flex:1;
}
.dialogue-card__cta{margin-top:.75rem;align-self:flex-start;}

/* ── Past Webinars (/events/past-webinars) — admin-managed ──────── */
.webinar-grid{
  display:grid;gap:1.375rem;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.webinar-card{display:flex;flex-direction:column;}
.webinar-card__media{display:block;position:relative;overflow:hidden;}
.webinar-card__img{
  width:100%;aspect-ratio:16/9;
  object-fit:cover;display:block;transition:transform .4s;
}
.webinar-card:hover .webinar-card__img{transform:scale(1.04);}
.webinar-card__placeholder{
  width:100%;aspect-ratio:16/9;background:var(--pearl);
}
.webinar-card__play{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.25);pointer-events:none;
}
.webinar-card__body{flex:1;display:flex;flex-direction:column;}
.webinar-card__date{
  font-size:.72rem;color:var(--text-dim);
  margin:0 0 .35rem;
}
.webinar-card__title{
  font-family:var(--font-display);font-size:.9rem;font-weight:700;
  color:var(--navy);margin:0;line-height:1.35;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.webinar-card__cta{margin-top:.875rem;align-self:flex-start;}
.webinar-cta{margin-top:2.5rem;text-align:center;}
.webinar-cta p{color:var(--text-light);margin-bottom:1rem;}

/* ── Board of Advisors (/about/board-of-advisors) — admin-managed ── */

/* When the entire card is a link (.person-card--link) it should still
   *look* exactly like the original .person-card — just clickable across
   the full surface, with a subtle hover affordance. */
.person-card--link{
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.person-card--link:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(30,58,138,.2);
}
.person-card--link:hover .person-card__profile-link{color:var(--gold-dark);}

.person-card__photo{position:relative;overflow:hidden;}
.person-card__img{
  width:100%;aspect-ratio:1/1;
  object-fit:cover;object-position:top;
  display:block;
}
.person-card__placeholder{
  width:100%;aspect-ratio:1/1;
  background:var(--pearl);
}
.person-card__badge{
  position:absolute;top:.625rem;left:.625rem;
  background:linear-gradient(135deg,#D4AF37,#B8960F);
  color:#fff;font-size:.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  padding:.2rem .55rem;border-radius:.25rem;line-height:1.4;
}
/* Award / honorary title placed inside the card body, above the name
   (Board of Advisors + National Advisory Council). Not a badge box — it
   reads as a plain gold eyebrow line, identical to .about-leaders__role
   used by the Leadership Messages cards on /about-us. */
.person-card__eyebrow{
  font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--gold-dark);margin:0 0 .375rem;
}
.person-card__profile-link{
  display:inline-flex;align-items:center;gap:.375rem;
  margin-top:.75rem;font-size:.8125rem;font-weight:700;
  color:var(--navy);text-decoration:none;
}
.person-card__profile-link:hover{color:var(--navy-deep);}

/* Cards in a row are the same height (grid stretch), but the role text
   varies in length, so the card footer — the "Profile" link on Board of
   Advisors, the LinkedIn icon on the councils — used to sit at a different
   height in every card. Making the body a flex column and pushing the
   footer down with margin-top:auto pins it to the bottom of the card, so
   the footers line up across the row. */
.person-card--link .person-card__body,
.person-card--stretch .person-card__body{
  display:flex;flex-direction:column;flex:1;
}
.person-card--stretch{display:flex;flex-direction:column;}
.person-card--link .person-card__profile-link{
  margin-top:auto;align-self:center;padding-top:.75rem;
}
.person-card--stretch .sec-card__social{margin-top:auto;}

/* ── Interviews Listing (/interviews) ───────────────────────────
   Source images are small portrait squares (~250×250). The previous
   page forced a 1:1 ratio at full card width, so headshots showed up
   huge. We use a fixed image height (220px) and a 4:3-feeling card
   header — image sits centered, no upscaling, plenty of breathing
   room around the title block below. */
.interview-list-grid{align-items:stretch;}

.interview-list-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;height:100%;}

/* The uploads are square headshots (~250×250). The old rule stretched them
   across a ~400×260 landscape box, which meant a 1.6x upscale (soft) plus a
   hard crop off the top and bottom of every face. Instead the photo now sits
   as a round thumb, centred on a soft panel: 200px from a 250px source is a
   downscale, so it stays sharp, and a circle only ever trims the corners.
   Matches the round headshots on the detail page and in its sidebar. */
.interview-list-card__media{
  display:flex;align-items:center;justify-content:center;
  margin:1rem 1rem 0;padding:1.25rem;
  background:linear-gradient(160deg,#F8FAFC 0%,#EDF2F9 100%);
  border:1px solid var(--border-light);
  border-radius:.625rem;
}
.interview-list-card__img{
  display:block;
  width:200px;height:200px;max-width:100%;
  object-fit:cover;object-position:top;
  border-radius:50%;
  background:var(--pearl);
  border:4px solid #fff;
  box-shadow:0 6px 20px rgba(13,31,79,.14);
  transition:transform .35s;
}
.interview-list-card:hover .interview-list-card__img{transform:scale(1.04);}
@media(max-width:575px){
  .interview-list-card__media{padding:1rem;}
  .interview-list-card__img{width:170px;height:170px;}
}
.interview-list-card__body{
  display:flex;flex-direction:column;
  padding:1.1rem 1.25rem 1.25rem;
  flex:1;
}
.interview-list-card__name{
  font-family:var(--font-display);font-size:1rem;font-weight:700;
  color:var(--navy);margin:0 0 .35rem;line-height:1.3;
}
.interview-list-card__role{
  font-size:.85rem;color:var(--gray-700);
  margin:0 0 .35rem;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.interview-list-card__org{
  font-size:.8rem;color:var(--text-light);
  margin:0 0 .9rem;line-height:1.5;font-style:italic;
  flex:1;
}
.interview-list-card__date{
  font-size:.75rem;color:var(--text-dim);
  margin:0 0 .9rem;line-height:1.4;
}
.blog-post-author__date{
  font-size:.8rem;color:var(--text-dim);
  margin:.35rem 0 0;line-height:1.4;
}
.blog-related-list__date{
  font-size:.7rem;color:var(--text-dim);
  margin:.15rem 0 0;line-height:1.4;
}
.interview-list-card__cta{
  display:inline-flex;align-items:center;justify-content:center;
  align-self:flex-start;
  margin-top:auto;
  padding:.5rem 1rem;
  background:var(--navy);color:#fff;
  font-weight:700;font-size:.78rem;letter-spacing:.02em;
  border-radius:.4rem;
  transition:background var(--transition);
}
.interview-list-card:hover .interview-list-card__cta{background:var(--navy-deep);}

/* Interview detail header — headshot on the LEFT, name / designation /
   institute / date stacked beside it. The uploaded headshots are ~250×250,
   so 160px keeps them downscaled and sharp. The divider that used to sit
   under .blog-post-author now belongs to this row wrapper. */
.interview-post-head{
  display:flex;align-items:center;gap:1.75rem;
  padding-bottom:1.5rem;margin-bottom:1.75rem;
  border-bottom:1px solid var(--border-light);
}
.interview-post-head .blog-post-author{
  padding-bottom:0;margin-bottom:0;border-bottom:0;min-width:0;
}
.interview-post-cover{
  display:block;
  width:160px;
  max-width:160px;
  height:auto;
  flex-shrink:0;
  border-radius:50%;
  background:var(--pearl);
  border:3px solid var(--border-light);
  margin:0;
  aspect-ratio:1/1;
  object-fit:cover;object-position:top;
}
/* Phones — stack it back up, but keep the text left-aligned with the photo. */
@media(max-width:575px){
  .interview-post-head{flex-direction:column;align-items:flex-start;gap:1.125rem;}
  .interview-post-cover{width:130px;max-width:130px;}
}

/* ── Blog Detail Page (single post) ─────────────────────────────
   Layout shell + responsive sidebar for /blog/<slug>. The sidebar
   shows on every viewport: stacked below the article on mobile,
   beside it (in a 2-column grid) on screens ≥1024px. */
.blog-page-grid{display:grid;gap:2rem;}
.blog-sidebar-col{display:block;}
@media(min-width:1024px){
  .blog-page-grid{grid-template-columns:1fr 320px;}
}
/* 272px was too cramped on desktop — "Latest Articles" / "Latest Interviews"
   titles were being clipped mid-word after two lines. Widening the column on
   larger screens lets them breathe; the article still keeps a comfortable
   reading measure. */
@media(min-width:1280px){
  .blog-page-grid{grid-template-columns:1fr 360px;}
}

/* Hero — title-only banner (no author info, no category pill) */
.blog-post-hero{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(160deg,#0a1336 0%,#0e1c49 100%);
  padding:3.25rem 0 3rem;
}
.blog-post-hero__bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:24px 24px;
}
.blog-post-hero__inner{position:relative;z-index:2;}
.blog-post-hero__crumbs,
.blog-post-hero__crumbs a{color:rgba(255,255,255,.8);}
.blog-post-hero__crumbs strong{color:#fff;}
.blog-post-hero__cat{
  display:inline-block;margin:1.1rem 0 0;
  padding:.34rem .9rem;border-radius:999px;
  background:var(--gold-dark);color:#0a1336;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;
}
.blog-post-hero__title{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3.6vw,2.5rem);
  font-weight:800;color:#fff;line-height:1.18;
  margin:1rem 0 0;max-width:62rem;
}
.blog-post-hero__author{
  display:flex;align-items:center;gap:.75rem;margin-top:1.4rem;
}
.blog-post-hero__avatar{
  width:2.75rem;height:2.75rem;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#0a1336;font-weight:800;font-size:.95rem;
  border:2px solid rgba(255,255,255,.25);
}
.blog-post-hero__meta{min-width:0;}
.blog-post-hero__author-name{margin:0;font-weight:700;color:#fff;font-size:.95rem;line-height:1.3;}
.blog-post-hero__author-date{margin:.1rem 0 0;font-size:.8rem;color:rgba(255,255,255,.7);}

/* Body section wrapper (pearl background) */
.blog-post-section{background:var(--pearl);padding:3rem 0 4.5rem;}

/* Main article card */
.blog-post-article{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:clamp(1.5rem,4vw,2.75rem);
  box-shadow:var(--shadow-sm);
}

/* Cover image at the top of the article card */
.blog-post-cover{
  display:block;width:100%;
  aspect-ratio:2/1;
  object-fit:cover;object-position:center;
  border-radius:var(--radius);
  background:#0d1f4f;
  margin-bottom:1.5rem;
}

/* Author block — text only (cover image is the hero above) */
.blog-post-author{
  padding-bottom:1.5rem;margin-bottom:1.75rem;
  border-bottom:1px solid var(--border-light);
}
.blog-post-author__name{
  font-family:var(--font-display);
  font-weight:700;color:var(--navy);
  font-size:1.125rem;margin:0 0 .25rem;line-height:1.3;
}
.blog-post-author__desig{
  font-size:.875rem;color:var(--text-light);
  margin:0;line-height:1.55;
}

/* Live-fetch fallback box (shown only when DB body is empty) */
.blog-post-fallback{
  padding:2rem;background:var(--pearl);
  border-radius:var(--radius);border:1px solid var(--border);
  text-align:center;margin-bottom:1rem;
}
.blog-post-fallback p{font-size:.9375rem;color:var(--text-light);margin:0 0 1.25rem;}

/* Article footer (Back / View on cipuglobal.org) */
.blog-post-footer{
  margin-top:2rem;padding-top:1.5rem;
  border-top:1px solid var(--border-light);
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:1rem;
}

/* Sidebar shell + cards. Sticky positioning only kicks in on desktop
   where the sidebar sits beside the article; on mobile it's stacked
   underneath, so sticky would cause weird scroll behaviour. */
.blog-sidebar{
  display:flex;flex-direction:column;gap:1.5rem;
}
@media(min-width:1024px){
  .blog-sidebar{position:sticky;top:5.5rem;}
}
.blog-sidebar-card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1.5rem;
}
.blog-sidebar-card__title{
  font-family:var(--font-display);font-size:.9375rem;
  font-weight:700;color:var(--navy);
  margin:0 0 1rem;padding-bottom:.75rem;
  border-bottom:2px solid var(--gold);
}
.blog-sidebar-card__avatar{
  display:block;width:3.5rem;height:3.5rem;
  border-radius:50%;
  object-fit:cover;object-position:top;
  border:2px solid var(--border);
  margin-bottom:.75rem;
}
.blog-sidebar-card__name{
  font-weight:700;color:var(--navy);
  font-size:.875rem;margin:0 0 .25rem;
}
.blog-sidebar-card__desig{
  font-size:.78rem;color:var(--text-light);
  margin:0;line-height:1.5;
}

/* "Latest Articles" related-posts list */
.blog-related-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:.25rem;
}
.blog-related-list__item{
  display:flex;align-items:flex-start;gap:.7rem;
  text-decoration:none;color:inherit;
  padding:.5rem;border-radius:var(--radius);
  transition:background var(--transition);
}
.blog-related-list__item:hover{background:var(--pearl);}
.blog-related-list__avatar{
  width:5rem;height:2.8125rem;flex-shrink:0;   /* 16:9 — matches the article cover banners, so no crop */
  border-radius:.375rem;
  object-fit:cover;object-position:center;
  border:1px solid var(--border-light);
}
.blog-related-list__text{min-width:0;flex:1;}
.blog-related-list__author{
  font-size:.78rem;font-weight:700;color:var(--navy);
  margin:0 0 .15rem;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.blog-related-list__title{
  font-size:.78rem;font-weight:700;color:var(--navy);
  margin:0 0 .2rem;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.blog-related-list__date{
  display:flex;align-items:center;gap:.3rem;
  font-size:.7rem;color:var(--text-dim);margin:0;line-height:1.3;
}
.blog-related-list__date svg{flex-shrink:0;opacity:.75;}
.blog-related-list__cta{
  display:block;text-align:center;
  margin-top:1rem;padding:.5rem;
  font-size:.8rem;font-weight:700;color:var(--navy);
  text-decoration:none;
  border:1.5px solid var(--border);border-radius:.5rem;
  transition:background var(--transition),border-color var(--transition);
}

/* --people: the "Latest Interviews" variant. Interview thumbs are square
   headshots (~250×250), so the 16:9 avatar above was cropping faces down to
   a letterbox strip. Round them off instead, and let the institute line read
   as a secondary caption rather than a second bold title. */
.blog-related-list--people .blog-related-list__item{align-items:center;gap:.85rem;}
.blog-related-list--people .blog-related-list__avatar{
  width:3.25rem;height:3.25rem;border-radius:50%;object-position:top;
}
.blog-related-list--people .blog-related-list__author{
  font-size:.875rem;margin:0 0 .2rem;
}
.blog-related-list--people .blog-related-list__title{
  font-size:.8125rem;font-weight:500;color:var(--text-light);
}
.blog-related-list--people .blog-related-list__date{font-size:.75rem;}
.blog-related-list__cta:hover{
  background:var(--pearl);border-color:rgba(30,58,138,.25);
}

/* Article body — normalises admin-pasted HTML (Summernote output) so
   inline images, legacy <table>-based author cards, headings, lists
   and quotes align inside the article container. The container
   dimensions themselves (padding, max-width, background) are owned
   by the page template — these rules touch only the inner content. */
.blog-article-body img{max-width:100%;height:auto;border-radius:.5rem;}
.blog-article-body table{max-width:100%;width:100%;border-collapse:collapse;margin:0 0 1.25rem;}
.blog-article-body table th,
.blog-article-body table td{vertical-align:top;padding:.6rem .75rem;border:1px solid var(--border);text-align:left;}
.blog-article-body table th{background:var(--navy);color:#fff;font-weight:700;font-family:var(--font-display);}
.blog-article-body table tbody tr:nth-child(even) td{background:var(--pearl);}
/* Layout wrappers (e.g. <table style="border:none"> used to position columns)
   should pass through invisible — keep border/padding off when authors mark
   them as borderless via inline style or border="0". */
.blog-article-body table[border="0"] td,
.blog-article-body table[style*="border: none"] > tbody > tr > td,
.blog-article-body table[style*="border:none"]  > tbody > tr > td{
  border:0;background:transparent;padding:0;
}
.blog-article-body p{margin:0 0 1.1rem;}
.blog-article-body h2,
.blog-article-body h3,
.blog-article-body h4,
.blog-article-body h5,
.blog-article-body h6{font-family:var(--font-display);color:var(--navy);margin:1.6rem 0 .9rem;line-height:1.3;}
.blog-article-body h2{font-size:1.5rem;}
.blog-article-body h3{font-size:1.25rem;}
.blog-article-body h4{font-size:1.1rem;}
.blog-article-body h5{font-size:1rem;font-weight:700;}
.blog-article-body h6{font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.blog-article-body ul,
.blog-article-body ol{margin:0 0 1.1rem;padding-left:1.5rem;}
.blog-article-body ul{list-style:disc;}
.blog-article-body ol{list-style:decimal;}
.blog-article-body li{margin-bottom:.4rem;display:list-item;}
.blog-article-body a{color:var(--navy);text-decoration:underline;}
.blog-article-body blockquote{margin:1.1rem 0;padding:.85rem 1.1rem;border-left:3px solid var(--gold);background:var(--pearl);color:var(--gray-700);}

/* ── Partner Logos ───────────────────── */
.partner-logo{background:#fff;border:1px solid var(--border-light);border-radius:var(--radius);padding:.875rem 1.25rem;display:flex;align-items:center;justify-content:center;min-height:4.5rem;transition:box-shadow .2s,border-color .2s;}
.partner-logo:hover{box-shadow:var(--shadow);border-color:rgba(30,58,138,.2);}
.partner-logo img{max-width:100%;max-height:3rem;object-fit:contain;}

/* ── Signatories scrolling logo strip ─── */
.hp-signatories__wrap{overflow:hidden;position:relative;}
.hp-signatories__strip{display:flex;gap:1rem;width:max-content;animation:logoScroll 90s linear infinite;}
.hp-signatories__strip:hover{animation-play-state:paused;}
.hp-signatory-cell{min-width:120px;flex-shrink:0;}
.hp-signatories__sub{color:var(--text-light);font-size:.9375rem;margin-top:.75rem;max-width:38rem;margin-left:auto;margin-right:auto;}
.hp-section-cta{text-align:center;margin-top:2rem;}
@keyframes logoScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ── CTA Banner ──────────────────────── */
.hp-cta{background:linear-gradient(110deg,#0d1f4f 0%,#1E3A8A 55%,#2a4fa8 100%);padding:2rem 0;position:relative;overflow:hidden;}
.hp-cta::before{content:'';position:absolute;right:-4rem;top:-4rem;width:28rem;height:28rem;background:radial-gradient(circle,rgba(212,175,55,.15) 0%,transparent 65%);pointer-events:none;}
.hp-cta__inner{text-align:center;position:relative;z-index:2;}
.hp-cta__kicker{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:rgba(212,175,55,.8);margin:0 0 .875rem;}
.hp-cta h2{font-family:var(--font-display);font-size:clamp(1.625rem,3.5vw,2.375rem);font-weight:800;color:#fff;margin:0 0 1rem;line-height:1.15;}
.hp-cta p{color:rgba(191,219,254,.82);font-size:1rem;max-width:36rem;margin:0 auto 2rem;line-height:1.72;}
.hp-cta__btns{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;}

/* ── Utilities ───────────────────────── */
.section-divider{height:1px;background:linear-gradient(to right,transparent,var(--border),transparent);margin:0;}

/* Helper for centered section-header with explicit 2.25rem bottom-margin (used on home) */
.section-header--mb-lg { margin-bottom: 2.25rem; }

/* ═══════════════════════════════════════════════════════════════
   STRATEGIC PARTNERS + GOVT LOGOS BAND  (matches live homepage)
   Two stacked sections:
     1. .hp-partners      — 4 partner logos on white background
     2. .hp-govt-band     — 3 government / framework logos on
                            light gray-blue band (#ebf0f4) below
   Both fully responsive (1 col mobile → 2 col tablet → final
   on desktop). Logos are object-fit: contain inside cells of
   matching height, so each row lines up cleanly regardless of
   the source-image aspect ratio.
   ═══════════════════════════════════════════════════════════════ */

/* ── Strategic Partners (white-bg auto-scrolling marquee) ───── */
/* Logos slide continuously right-to-left; hovering the strip (or
   any single logo) pauses the animation. Falls back to a static,
   wrapped flex row when the user prefers reduced motion. */
.hp-partners{
  max-width:1180px;
  margin:0 auto;
}
.hp-partners__viewport{
  overflow:hidden;
  /* soft fade on the left/right edges so logos ease in/out */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.hp-partners__track{
  display:flex;
  width:max-content;
  gap:1.75rem;
  animation:hp-partners-scroll 40s linear infinite;
}
/* Pause when hovering the strip. */
.hp-partners__viewport:hover .hp-partners__track{
  animation-play-state:paused;
}
@keyframes hp-partners-scroll{
  from{transform:translateX(0);}
  /* the track holds 2 identical passes, so -50% loops seamlessly */
  to{transform:translateX(-50%);}
}

.hp-partners__cell{
  flex:0 0 auto;
  width:15rem;
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.75rem 1.5rem;
  min-height:9rem;
  text-decoration:none;
  transition:box-shadow .2s, transform .2s, border-color .2s;
}
.hp-partners__cell:hover{
  box-shadow:0 8px 24px rgba(13,31,79,.08);
  transform:translateY(-2px);
  border-color:rgba(30,58,138,.18);
}
.hp-partners__img{
  max-width:100%;
  max-height:4.5rem;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
@media(max-width:600px){
  .hp-partners__cell{width:12rem;min-height:8rem;}
}
/* Accessibility: no motion, just a static wrapped row. */
@media(prefers-reduced-motion:reduce){
  .hp-partners__viewport{
    -webkit-mask-image:none;mask-image:none;overflow:visible;
  }
  .hp-partners__track{
    animation:none;
    width:auto;
    flex-wrap:wrap;
    justify-content:center;
  }
  /* hide the duplicated second pass when not scrolling */
  .hp-partners__cell[aria-hidden="true"]{display:none;}
}

/* ── Government / framework logos band ──────────────────────── */
.hp-govt-band{
  background:#ebf0f4;
  padding:2.5rem 0;
}
@media(min-width:768px){.hp-govt-band{padding:3rem 0;}}
.hp-govt-band__grid{
  display:grid;
  gap:1.25rem;
  grid-template-columns:1fr;
  max-width:920px;
  margin:0 auto;
}
@media(min-width:600px){.hp-govt-band__grid{grid-template-columns:repeat(3,1fr);gap:1.5rem;}}

.hp-govt-band__cell{
  background:#fff;
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem 1.25rem;
  min-height:8rem;
  transition:box-shadow .2s, transform .2s;
}
.hp-govt-band__cell:hover{
  box-shadow:0 6px 18px rgba(13,31,79,.06);
  transform:translateY(-1px);
}
.hp-govt-band__img{
  max-width:100%;
  max-height:4rem;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}


/* ── Hero slider — rich-caption sub-elements (tag + h2 + p)
   Mirrors the demo banner design at v3/public. The plain
   .hp-slider__caption-text rule above stays for any caption-only
   slides; this block adds the gold pill tag, headline and lead
   text styles used by tag+h2+p slides. */
.hp-slider__caption-tag{
  display:inline-block;
  background:var(--gold);
  color:var(--navy-deep);
  font-size:.7rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  padding:.25rem .75rem;
  border-radius:.25rem;
  margin-bottom:.875rem;
}
.hp-slider__caption h2,
.hp-slider__caption h4{
  font-family:var(--font-display);
  font-size:clamp(1.05rem,2vw,1.4rem);
  font-weight:700;
  color:#fff;
  line-height:1.3;
  margin:0;
  max-width:56rem;
}
.hp-slider__caption p{
  color:rgba(191,219,254,.92);
  font-size:.9375rem;
  margin:0;
  max-width:40rem;
  line-height:1.65;
}
@media(min-width:768px){
  .hp-slider__caption p{font-size:1rem;}
}

/* Caption-only slides (photo slides 3+): single live caption line.
   Crisp white text + a stronger, taller scrim so bright event
   photos don't look washed-out and the caption reads cleanly
   (matches the live site's clean caption strip). */
.hp-slider__caption--plain{
  background:linear-gradient(to top,rgba(13,31,79,.95) 0%,rgba(13,31,79,.7) 45%,rgba(13,31,79,.15) 80%,transparent 100%);
  padding-top:3.5rem;
}
.hp-slider__caption--plain p,
.hp-slider__caption--plain h4{
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}

/* ===== About page (/about-us) ===== */
.about-hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem;}

/* About prose: clean, single-column reading layout */
.about-prose{max-width:54rem;margin:0 auto;}
.about-prose__head{margin-bottom:1.25rem;}
.about-prose__head .gold-rule{margin-top:.75rem;}
.about-prose p{font-size:1rem;line-height:1.85;color:var(--text-light);margin:0 0 1.1rem;}
.about-prose p:last-child{margin-bottom:0;}
.about-prose__lead{font-size:1.075rem;color:var(--gray-700);font-weight:500;}
.about-prose__close{padding-top:1rem;margin-top:.5rem;border-top:1px solid var(--border);font-style:italic;color:var(--navy);font-weight:500;}
@media(min-width:768px){
  .about-prose p{font-size:1.0125rem;}
  .about-prose__lead{font-size:1.125rem;}
}

.about-vm-grid{display:grid;gap:2rem;margin-top:2.5rem;}
@media(min-width:768px){.about-vm-grid{grid-template-columns:1fr 1fr;}}
.about-vm-card{border-radius:1rem;padding:2.5rem;}
.about-vm-card--vision{background:linear-gradient(135deg,var(--navy-deep),var(--navy));color:#fff;}
.about-vm-card--mission{background:#fff;border:1px solid var(--border);}
.about-vm__icon{width:3rem;height:3rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;}
.about-vm__icon--gold{background:rgba(212,175,55,.2);color:#D4AF37;}
.about-vm__icon--navy{background:rgba(30,58,138,.08);color:#1E3A8A;}
.about-vm__title{font-family:var(--font-display);font-size:1.375rem;font-weight:700;margin:0 0 1rem;}
.about-vm__title--gold{color:#D4AF37;}
.about-vm__title--navy{color:var(--navy);}
.about-vm__quote{font-size:1.0625rem;color:rgba(255,255,255,.9);line-height:1.75;margin:0;font-style:italic;}
.about-vm__quote-em{color:#D4AF37;}
.about-vm__list{display:flex;flex-direction:column;gap:.625rem;list-style:none;padding:0;margin:0;}
.about-vm__item{display:flex;align-items:flex-start;gap:.625rem;font-size:.9rem;color:var(--gray-700);}
.about-vm__check{flex-shrink:0;margin-top:.2rem;color:var(--gold-dark);}

.about-leaders__grid{margin-top:2.5rem;}
.about-leaders__role{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-dark);margin:0 0 .375rem;}

/* "Message" footer button on the Leadership Messages cards (/about-us),
   mirroring the live site. The card itself is the <a> (.person-card--link),
   so this is a <span> painted as a full-bleed button — clicking it or
   anywhere else on the card opens the leader's message page. Same pattern
   as .person-card__profile-link on /about/board-of-advisors, just styled as
   a bar instead of an inline link. margin-top:auto pins it to the bottom so
   the buttons line up across a row of unequal-height cards. */
.person-card__msg-btn{
  display:block;margin-top:auto;
  background:var(--navy);color:#fff;
  font-size:.85rem;font-weight:600;letter-spacing:.01em;
  text-align:center;padding:.7rem 1rem;line-height:1.4;
  transition:background var(--transition);
}
.person-card--link:hover .person-card__msg-btn{background:var(--navy-deep);}

/* Tighten section header spacing inside journey section only */
#journey .section-header{margin-bottom:1.25rem;}
#journey .section-header .gold-rule{margin-top:.5rem;}

.about-journey{margin-top:1.25rem;display:flex;flex-direction:column;gap:1.25rem;}
.about-journey__row{display:grid;grid-template-columns:1fr;gap:1rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;box-shadow:0 3px 12px rgba(15,23,42,.05);position:relative;overflow:hidden;}
.about-journey__row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--gold),var(--navy));border-radius:var(--radius-lg) 0 0 var(--radius-lg);}
@media(min-width:768px){
  .about-journey__row{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:1.75rem;row-gap:1rem;padding:1.75rem 1.75rem 1.5rem 2rem;align-items:stretch;}
  .about-journey__row .about-journey__carousel{grid-column:1/-1;}
}
.about-journey__body{display:flex;flex-direction:column;justify-content:center;gap:.85rem;}
.about-journey__media{order:-1;margin:0;display:flex;align-items:stretch;}
@media(min-width:768px){.about-journey__media{order:0;}}
.about-journey__img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius);box-shadow:0 8px 22px rgba(15,23,42,.12);display:block;}
@media(min-width:768px){.about-journey__img{aspect-ratio:auto;height:100%;min-height:280px;}}
.about-journey__placeholder{width:100%;aspect-ratio:3/2;background:linear-gradient(135deg,#EFF6FF,#DBEAFE);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:#93C5FD;}
.about-journey__meta{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:0;}
.about-journey__year{background:var(--gold);color:var(--navy-deep);font-size:.7rem;font-weight:700;padding:.22rem .65rem;border-radius:2rem;letter-spacing:.02em;}
.about-journey__place{font-size:.78rem;color:var(--text-dim);font-weight:500;}
.about-journey__title{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--navy);margin:0;line-height:1.3;}
@media(min-width:768px){.about-journey__title{font-size:1.45rem;}}

.about-journey__actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.15rem;}
.about-journey__btn{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600;padding:.5rem .95rem;border-radius:.45rem;text-decoration:none;border:1px solid transparent;transition:transform .2s,box-shadow .2s,background .2s,color .2s;line-height:1;white-space:nowrap;}
.about-journey__btn:hover{transform:translateY(-1px);}
.about-journey__btn--primary{background:var(--navy);color:#fff;}
.about-journey__btn--primary:hover{background:var(--navy-deep);box-shadow:0 6px 16px rgba(30,58,138,.25);color:#fff;}
.about-journey__btn--outline{background:#fff;color:var(--navy);border-color:var(--navy);}
.about-journey__btn--outline:hover{background:var(--navy);color:#fff;}

.about-journey__carousel{position:relative;display:flex;align-items:center;gap:.5rem;margin-top:.5rem;}
.about-journey__nav{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--navy);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s,opacity .2s;padding:0;}
.about-journey__nav:hover{background:var(--navy);color:#fff;box-shadow:0 4px 12px rgba(30,58,138,.25);}
.about-journey__nav:disabled{opacity:.35;cursor:not-allowed;background:#fff;color:var(--navy);box-shadow:none;}
.about-journey__nav:disabled:hover{background:#fff;color:var(--navy);box-shadow:none;}

.about-journey__thumbs{display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;padding:.15rem 0 .25rem;margin:0;flex:1;min-width:0;scrollbar-width:none;}
.about-journey__thumbs::-webkit-scrollbar{display:none;}
.about-journey__thumb{flex:0 0 calc(50% - .25rem);scroll-snap-align:start;border-radius:.45rem;overflow:hidden;border:1px solid var(--border);background:#f8fafc;display:block;transition:transform .2s,box-shadow .2s;}
.about-journey__thumb:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(15,23,42,.15);}
.about-journey__thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;}
@media(min-width:640px){.about-journey__thumb{flex:0 0 calc(33.333% - .334rem);}}
@media(min-width:992px){.about-journey__thumb{flex:0 0 calc(25% - .375rem);}}

/* ═══════════════════════════════════════════════════════════════
   Global Advisory Council page  (/about/global-advisory-council)
   Moved here from inline <style> in app/Views/about/global-advisory-council.php
   ═══════════════════════════════════════════════════════════════ */

/* ── Chair featured card ──────────────────────────────── */
.gac-chair-card{
  background:linear-gradient(110deg,#0d1f4f 0%,#1E3A8A 60%,#2a4fa8 100%);
  border-radius:var(--radius-lg);
  padding:2.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  align-items:center;
  margin-bottom:3rem;
}
.gac-chair-card__img{
  width:10rem; height:10rem;
  border-radius:50%;
  object-fit:cover; object-position:top;
  border:4px solid rgba(212,175,55,.5);
  flex-shrink:0;
  display:block;
}
.gac-chair-card__kicker{
  font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--gold); margin:0 0 .75rem;
  display:flex; align-items:center; gap:.5rem;
}
.gac-chair-card__kicker::before{
  content:''; display:inline-block;
  width:1.75rem; height:2px; background:var(--gold);
}
.gac-chair-card__name{
  font-family:var(--font-display);
  font-size:clamp(1.375rem,3vw,1.875rem);
  font-weight:800; color:#fff; margin:0 0 .375rem; line-height:1.1;
}
.gac-chair-card__role{
  font-size:.9375rem; font-weight:600;
  color:rgba(212,175,55,.9); margin:0 0 .25rem;
}
.gac-chair-card__org{
  font-size:.875rem; color:rgba(191,219,254,.75); margin:0 0 1.125rem;
}
.gac-chair-card__bio{
  font-size:.9rem; color:rgba(191,219,254,.85);
  line-height:1.75; margin:0 0 1.5rem; max-width:38rem;
}

/* ── Spotlight card (single-convenor pages: International Committees,
      Sports Advisory Board) — white card, gold-ringed circular photo ── */
.spotlight-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:2.5rem; max-width:840px;
  display:flex; flex-wrap:wrap; gap:2rem; align-items:center;
}
.spotlight-card__img{
  width:10rem; height:10rem; border-radius:50%;
  object-fit:cover; object-position:center; background:#fff;
  border:4px solid rgba(212,175,55,.55); flex-shrink:0; display:block;
}
.spotlight-card__body{ flex:1; min-width:260px; }
.spotlight-card__kicker{
  font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; color:var(--gold); margin:0 0 .65rem;
}
.spotlight-card__name{
  font-family:var(--font-display); font-size:clamp(1.375rem,3vw,1.75rem);
  font-weight:800; color:var(--navy); margin:0 0 .5rem; line-height:1.15;
}
.spotlight-card__role{
  font-size:.9375rem; color:var(--text-light); line-height:1.7; margin:0;
}
.spotlight-card__actions{ display:flex; flex-wrap:wrap; gap:.875rem; margin-top:1.125rem; }
.spotlight-card__actions .btn svg{ margin-right:.4rem; }
.spotlight-card__stats{ list-style:none; margin:1.125rem 0 0; padding:0; display:flex; flex-direction:column; gap:.625rem; }
.spotlight-card__stat{ display:flex; align-items:center; gap:.625rem; font-size:.9375rem; color:var(--gray-700); }
.spotlight-card__stat svg{ flex:none; stroke:var(--gold); }

/* ── Member card (4-column responsive) ──────────────────── */
.gac-member-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1.375rem;
}
.gac-member-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:box-shadow .25s, transform .25s;
  text-align:center;
}
.gac-member-card:hover{
  box-shadow:0 10px 36px rgba(30,58,138,.12);
  transform:translateY(-4px);
}
.gac-member-card__img-wrap{
  position:relative; overflow:hidden;
}
.gac-member-card__img{
  width:100%; aspect-ratio:1/1;
  object-fit:cover; object-position:top;
  display:block;
  transition:transform .5s;
}
.gac-member-card:hover .gac-member-card__img{ transform:scale(1.05); }
.gac-member-card__badge{
  position:absolute; top:.625rem; left:.625rem;
  font-size:.6rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; padding:.2rem .55rem;
  border-radius:.25rem; background:#059669; color:#fff;
}
.gac-member-card__body{ padding:1.125rem 1.25rem 1.375rem; }
.gac-member-card__name{
  font-family:var(--font-display);
  font-size:.9375rem; font-weight:700;
  color:var(--navy); margin:0 0 .25rem; line-height:1.3;
}
.gac-member-card__role{
  font-size:.78rem; font-weight:600;
  color:var(--gold-dark); margin:0 0 .25rem;
}
.gac-member-card__org{
  font-size:.78rem; font-weight:600;
  color:var(--navy); margin:0 0 .15rem; line-height:1.4;
}
.gac-member-card__location{
  font-size:.72rem; color:var(--text-light);
  margin:0; line-height:1.4;
}
/* ── LinkedIn icon (match site palette: navy outline → navy fill on hover) ── */
.gac-linkedin-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem;
  margin-top:.875rem;
  border-radius:50%;
  border:1.5px solid var(--navy);
  background:#fff;
  color:var(--navy);
  text-decoration:none;
  transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.gac-linkedin-btn:hover,
.gac-linkedin-btn:focus-visible{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
  transform:translateY(-1px);
}
/* ── Partnership highlight ───────────────────────────── */
.gac-highlight{
  background:linear-gradient(110deg,#EFF6FF,#DBEAFE);
  border:1px solid #BFDBFE;
  border-radius:var(--radius-lg);
  padding:2.5rem;
  margin-top:3.5rem;
  display:grid;
  gap:2.5rem;
  align-items:center;
}
@media(min-width:900px){ .gac-highlight{ grid-template-columns:1fr 1fr; } }
.gac-highlight__check{
  display:flex; align-items:flex-start; gap:.875rem;
  padding:.875rem 1.125rem;
  background:#fff; border-radius:var(--radius);
  border:1px solid #BFDBFE;
}
.gac-highlight__check-icon{
  width:1.625rem; height:1.625rem;
  border-radius:50%; background:#1E3A8A;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.gac-highlight__check-text{
  font-size:.875rem; font-weight:600;
  color:var(--navy); margin:0; line-height:1.4;
}
/* ── Section divider label ───────────────────────────── */
.gac-section-label{
  display:flex; align-items:center; gap:1rem;
  margin-bottom:1.5rem;
}
.gac-section-label span:first-child{
  font-size:16px; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--gold-dark); white-space:nowrap;
}
.gac-section-label::after{
  content:''; flex:1; height:1px; background:var(--border);
}

/* ═══════════════════════════════════════════════════════════════
   Types of Membership page  (/membership/types-of-membership)
   Replaces inline <style> attributes that previously lived inside
   app/Views/membership/types.php. Header, footer, and layout
   primitives (.page-hero-v2, .section, .benefit-card, .cta-block)
   are reused unchanged — these rules add only the page-specific
   accents (member-type cards, accent-colored bullet lists).
   ═══════════════════════════════════════════════════════════════ */

/* Hero CTA buttons row */
.tom-hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem;}

/* Section 1 — Types of Members (2 contrasting cards) */
.tom-types-grid{
  display:grid;gap:1.75rem;margin-top:2rem;
  grid-template-columns:1fr;
}
@media(min-width:768px){.tom-types-grid{grid-template-columns:1fr 1fr;}}

.tom-type-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:2.25rem;
}
.tom-type-card--navy{
  background:linear-gradient(135deg,var(--navy-deep),var(--navy));
  border-color:transparent;
  color:#fff;
}
.tom-type-card__icon{
  width:3rem;height:3rem;border-radius:.75rem;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.25rem;
}
.tom-type-card__icon--gold{background:rgba(212,175,55,.2);color:var(--gold);}
.tom-type-card__icon--navy{background:rgba(30,58,138,.08);color:var(--navy);}
.tom-type-card__title{
  font-family:var(--font-display);
  font-size:1.25rem;font-weight:700;
  margin:0 0 .875rem;
}
.tom-type-card__title--gold{color:var(--gold);}
.tom-type-card__title--navy{color:var(--navy);}
.tom-type-card__lead{
  color:var(--text-light);line-height:1.75;margin:0;
}
.tom-type-card__lead--white{color:rgba(191,219,254,.88);}
.tom-type-card__lead--white strong{color:#fff;}

/* Where the two sections meet, the stock .section padding stacked 3.5rem
   of white under the Types cards on top of 3.5rem of pearl above the
   Benefits heading — a 7rem band taller than the cards themselves. Halved
   here, and the heading pulled a little closer to its own cards. Only the
   seam is touched; the top of the page and the bottom of the last card
   keep the site-wide rhythm. */
.tom-types-section    { padding-bottom: 1.75rem; }
.tom-benefits-section { padding-top: 2rem; }
.tom-benefits-section .section-header { margin-bottom: 1.5rem; }

/* Sections 2-6 — benefit blocks.
   One card per row, full container width, stacked down the page — the way
   cipuglobal.org presents them. It used to be a 2-across grid, which made
   each block a narrow vertical column and forced the long bullet lists to
   wrap early. Single-column at every breakpoint, so there is no responsive
   variant to keep in sync. */
.tom-section-lead{margin-top:.75rem;}
.tom-benefits-grid{
  display:grid;gap:1.5rem;margin-top:2.5rem;
  grid-template-columns:1fr;
}

/* .tom-benefit-card itself adds no chrome — it inherits everything from
   .benefit-card. The per-card accent color is set inline as `--tom-accent`
   on the element and consumed by the icon + bullet checkmarks below. */
.tom-benefit-icon{
  /* Override the default .benefit-icon background to match the card accent. */
  background:color-mix(in srgb, var(--tom-accent) 12%, transparent);
  color:var(--tom-accent);
}
.tom-benefit-card__title{
  font-family:var(--font-display);
  font-size:1.0625rem;font-weight:700;
  color:var(--navy);
  margin:0 0 1rem;
  line-height:1.35;
}
.tom-benefit-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:.625rem;
}
.tom-benefit-list li{
  display:flex;align-items:flex-start;gap:.625rem;
  font-size:16px;color:var(--text-light);line-height:1.6;
}
.tom-benefit-list__check{
  flex-shrink:0;margin-top:.25rem;
  color:var(--tom-accent);
}

/* ═══════════════════════════════════════════════════════════════
   2nd Bharat Higher Education Summit page  (+ shared utilities)
   Primary use: /second-bharat-higher-education-summit (events/bhes2.php)
   Mirrors live structure (banner → about → buttons → speakers →
   press → testimonials) using local design tokens.

   The first four classes below — .bhes2-heading, .bhes2-banner,
   .bhes2-about, .bhes2-actions — are also shared by other inner
   pages that follow the same banner + about + buttons pattern
   (e.g. /internationalization). The rest are page-specific.
   No inline CSS in any of the consuming views.
   ═══════════════════════════════════════════════════════════════ */

/* Section heading — center-aligned, gold underline */
.bhes2-heading{
  font-family:var(--font-display);
  font-size:clamp(1.375rem,2.4vw,1.75rem);
  font-weight:700;
  color:var(--navy);
  text-align:center;
  margin:0 auto 2rem;
  padding-bottom:.75rem;
  position:relative;
}
.bhes2-heading::after{
  content:"";
  position:absolute;
  left:50%; bottom:0;
  transform:translateX(-50%);
  width:3.5rem; height:3px;
  background:var(--gold);
  border-radius:2px;
}

/* Banner — full-width hero image */
.bhes2-banner{
  width:100%;
  margin:0 0 2.5rem;
}
.bhes2-banner img{
  display:block;
  width:100%;
  height:auto;
}

/* About — justified prose with comfortable max-width */
.bhes2-about{
  max-width:60rem;
  margin:0 auto 1.75rem;
  text-align:justify;
  color:var(--text-mid);
  line-height:1.75;
}
.bhes2-about p{margin:0 0 1rem;}
.bhes2-about p:last-child{margin-bottom:0;}

/* Action buttons row (Profile Booklet / Agenda / Photos / Report) */
.bhes2-actions{
  display:flex; flex-wrap:wrap;
  gap:.875rem;
  justify-content:center;
  margin-top:1.5rem;
}

/* ── Distinguished Speakers grid (1 → 2 → 3 → 4 cols) ────── */
.bhes2-speaker-grid{
  display:grid;
  gap:1.5rem;
  margin-top:2.5rem;
  grid-template-columns:1fr;
}
@media(min-width:560px){.bhes2-speaker-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:840px){.bhes2-speaker-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1100px){.bhes2-speaker-grid{grid-template-columns:repeat(4,1fr);}}

.bhes2-speaker-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:box-shadow .25s, transform .25s;
}
.bhes2-speaker-card:hover{
  box-shadow:0 10px 36px rgba(30,58,138,.12);
  transform:translateY(-3px);
}
.bhes2-speaker-card__img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:top;
  display:block;
}
.bhes2-speaker-card__body{
  padding:1.125rem 1.125rem 1.25rem;
  text-align:center;
  flex:1;
  display:flex; flex-direction:column;
}
.bhes2-speaker-card__name{
  font-family:var(--font-display);
  font-size:1rem; font-weight:700;
  color:var(--navy);
  margin:0 0 .5rem;
  line-height:1.3;
}
.bhes2-speaker-card__role{
  font-size:.84rem;
  color:var(--text-light);
  line-height:1.55;
  margin:0;
}

/* ── Press Coverage grid (1 → 2 → 3 → 5 cols) ────────────── */
.bhes2-press-grid{
  display:grid;
  gap:1rem;
  margin-top:2.5rem;
  grid-template-columns:repeat(2,1fr);
  align-items:stretch;
}
@media(min-width:640px){.bhes2-press-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:992px){.bhes2-press-grid{grid-template-columns:repeat(5,1fr);}}

.bhes2-press-logo{
  display:flex;
  align-items:center; justify-content:center;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.25rem 1rem;
  min-height:5.5rem;
  filter:grayscale(100%);
  opacity:.78;
  transition:filter .25s, opacity .25s, box-shadow .25s, transform .25s;
}
.bhes2-press-logo:hover{
  filter:grayscale(0);
  opacity:1;
  box-shadow:0 6px 18px rgba(13,31,79,.08);
  transform:translateY(-2px);
}
.bhes2-press-logo img{
  max-width:100%;
  max-height:2.25rem;
  width:auto; height:auto;
  object-fit:contain;
  display:block;
}
.bhes2-press-more{
  text-align:center;
  margin-top:2rem;
}

/* ── Speaker Testimonials (YouTube video grid 1 → 2 → 3 cols) ── */
.bhes2-video-grid{
  display:grid;
  gap:1.5rem;
  margin-top:2.5rem;
  grid-template-columns:1fr;
}
@media(min-width:640px){.bhes2-video-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:992px){.bhes2-video-grid{grid-template-columns:repeat(3,1fr);}}

.bhes2-video-card{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:#000;
  box-shadow:0 4px 16px rgba(13,31,79,.08);
}
.bhes2-video-card__iframe{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  border:0;
  display:block;
}

/* ═══════════════════════════════════════════════════════════════
   2nd BHES — Photo Gallery
   Used by /second-bharat-higher-education-summit-photos
   (app/Views/pages/bhes2-photos.php)
   Mobile-first responsive grid: 2 → 3 → 4 → 5 columns.
   No inline CSS in the view — all chrome is here.
   ═══════════════════════════════════════════════════════════════ */

/* Featured banner — full-width clickable hero image */
.bhes2-photos-banner{
  display:block;
  width:100%;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:#000;
  box-shadow:0 4px 16px rgba(13,31,79,.08);
  transition:transform .3s, box-shadow .3s;
}
.bhes2-photos-banner:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(13,31,79,.15);
}
.bhes2-photos-banner img{
  display:block;
  width:100%;
  height:auto;
}

/* Gallery grid — mobile-first, scales 2 → 3 → 4 → 5 columns
   Breakpoints (smallest first):
     base   (< 480px) : 2 cols (small phones)
     480px+ : 2 cols (phones, slightly larger gap)
     640px+ : 3 cols (large phones / small tablets)
     768px+ : 3 cols (tablets portrait)
     992px+ : 4 cols (tablets landscape / small laptops)
    1280px+ : 5 cols (desktops)                                    */
.bhes2-photos-grid{
  display:grid;
  gap:.625rem;
  margin-top:1.75rem;
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:480px){.bhes2-photos-grid{gap:.75rem;}}
@media(min-width:640px){.bhes2-photos-grid{grid-template-columns:repeat(3,1fr);gap:.875rem;}}
@media(min-width:992px){.bhes2-photos-grid{grid-template-columns:repeat(4,1fr);gap:1rem;}}
@media(min-width:1280px){.bhes2-photos-grid{grid-template-columns:repeat(5,1fr);}}

.bhes2-photos-item{
  position:relative;
  display:block;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:#0d1f4f;
  aspect-ratio:4/3;
  transition:transform .3s, box-shadow .3s;
}
.bhes2-photos-item:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(13,31,79,.18);
}
.bhes2-photos-item__img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.bhes2-photos-item:hover .bhes2-photos-item__img{
  transform:scale(1.05);
}
/* Subtle gradient overlay on hover (visual only — no text content) */
.bhes2-photos-item::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(13,31,79,.35),transparent 50%);
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
}
.bhes2-photos-item:hover::after{opacity:1;}

/* ═══════════════════════════════════════════════════════════════
   /internationalization page
   Used by app/Views/pages/internationalization.php
   2-column split: content (left) + banner image (right) on desktop;
   stacks vertically on mobile/tablet for proper readability.
   No inline CSS in the view — all chrome is here.
   ═══════════════════════════════════════════════════════════════ */

/* 2-column split layout — stacks on mobile, side-by-side on desktop */
.intl-split{
  display:grid;
  gap:2.5rem;
  align-items:start;
  grid-template-columns:1fr;
}
@media(min-width:1024px){
  .intl-split{
    grid-template-columns:1fr 1fr;
    gap:3rem;
  }
}

/* Left column — about paragraph */
.intl-prose{
  margin:1.25rem 0 1.75rem;
  color:var(--text-light);
  line-height:1.82;
  font-size:.95rem;
  text-align:justify;
}

/* Left column — buttons row (left-aligned, wrap on small) */
.intl-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.875rem;
}

/* Right column — banner image (rounded card with shadow).
   Image renders at its natural aspect ratio — no cropping. The
   internationalization banner is 16:9 landscape; forcing a fixed
   ratio would clip the side text. */
.intl-image-wrap{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#fff;
  align-self:start;
}
.intl-image{
  width:100%;
  height:auto;
  display:block;
}

/* On mobile, give the image breathing room from the content above
   and cap its width so a wide landscape banner doesn't dominate. */
@media(max-width:1023px){
  .intl-image-wrap{
    margin-top:.5rem;
    max-width:38rem;
    margin-left:auto;
    margin-right:auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   1st BHES — added sections (Messages + Press Coverage)
   Used by /events/bharat-higher-education-summit (events/bhes1.php)
   These rules support content NEW to the page (the original page
   never had Messages or Press Coverage sections). Existing chrome
   is untouched — this only styles the additions.
   Mobile-first responsive grids.
   ═══════════════════════════════════════════════════════════════ */

/* ── Messages — 3 video cards (1 → 2 → 3 cols) ──────────────── */
.bhes1-msg-grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:1fr;
  margin-top:2.5rem;
}
@media(min-width:768px){.bhes1-msg-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.bhes1-msg-grid{grid-template-columns:repeat(3,1fr);}}

.bhes1-msg-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.25rem;
  display:flex;
  flex-direction:column;
  gap:.875rem;
  transition:box-shadow .25s, transform .25s;
}
.bhes1-msg-card:hover{
  box-shadow:0 10px 28px rgba(13,31,79,.10);
  transform:translateY(-2px);
}
.bhes1-msg-card__heading{
  font-family:var(--font-display);
  font-size:.9375rem;
  font-weight:700;
  color:var(--navy);
  margin:0;
  line-height:1.4;
  text-align:center;
  min-height:2.6em;
}
.bhes1-msg-card__video{
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--radius);
  background:#000;
  display:block;
}
.bhes1-msg-card__name{
  font-family:var(--font-display);
  font-size:.9rem;
  font-weight:700;
  color:var(--navy);
  text-align:center;
  margin:0;
}

/* ── Press Coverage — feature article cards (1 → 2 → 3 cols) ── */
.bhes1-press-grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:1fr;
  margin-top:2.5rem;
}
@media(min-width:640px){.bhes1-press-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.bhes1-press-grid{grid-template-columns:repeat(3,1fr);}}

.bhes1-press-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:box-shadow .25s, transform .25s;
}
.bhes1-press-card:hover{
  box-shadow:0 10px 28px rgba(13,31,79,.10);
  transform:translateY(-3px);
}
.bhes1-press-card__img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  display:block;
  background:#f5f5f5;
}
.bhes1-press-card__body{
  padding:1.25rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  flex:1;
}
.bhes1-press-card__title{
  font-family:var(--font-display);
  font-size:.95rem;
  font-weight:700;
  color:var(--navy);
  line-height:1.45;
  margin:0;
  flex:1;
}
.bhes1-press-card .btn{
  align-self:flex-start;
}

/* ── Press logos — 31 outlets (2 → 3 → 4 → 5 → 6 cols) ──────── */
.bhes1-logo-grid{
  display:grid;
  gap:.75rem;
  grid-template-columns:repeat(2,1fr);
  margin-top:2.5rem;
}
@media(min-width:480px){.bhes1-logo-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:768px){.bhes1-logo-grid{grid-template-columns:repeat(4,1fr);gap:1rem;}}
@media(min-width:1024px){.bhes1-logo-grid{grid-template-columns:repeat(5,1fr);}}
@media(min-width:1280px){.bhes1-logo-grid{grid-template-columns:repeat(6,1fr);}}

/* Logos render in their natural colour (matches live).
   Card chrome stays subtle so the brand colours pop. */
.bhes1-logo-box{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.125rem 1rem;
  min-height:5.5rem;
  transition:box-shadow .25s, transform .25s, border-color .25s;
}
.bhes1-logo-box:hover{
  box-shadow:0 8px 20px rgba(13,31,79,.10);
  transform:translateY(-3px);
  border-color:rgba(212,175,55,.45);
}
.bhes1-logo-box img{
  max-width:100%;
  max-height:2.75rem;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  transition:transform .25s ease;
}
.bhes1-logo-box:hover img{
  transform:scale(1.06);
}

/* Centered variant — for sections with only 4–5 logos. Wraps logos as a
   flex row with a capped max-width so they don't stretch edge-to-edge.
   Each cell is fixed-ish width (~180px), letting the row center cleanly. */
.bhes1-logo-grid--centered{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  max-width:64rem;
  margin-left:auto;
  margin-right:auto;
  grid-template-columns:none;
}
.bhes1-logo-grid--centered .bhes1-logo-box{
  flex:0 1 180px;
}

/* ── Press-coverage logo marquee (two opposite-scrolling rows) ──
   Row 1 drifts left, row 2 drifts right. Hovering a row pauses ONLY
   that row's track so a reader can rest on a logo while the other
   row keeps moving. The track holds each logo set twice; translating
   by -50% therefore loops seamlessly with no visible jump. */
.logo-marquee{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-top:2.5rem;
  /* Soft fade on the left/right edges so logos enter/exit gracefully. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.logo-marquee__row{
  overflow:hidden;
}
.logo-marquee__track{
  display:flex;
  gap:1rem;
  width:max-content;
  will-change:transform;
}
.logo-marquee__row--ltr .logo-marquee__track{
  animation:logo-marquee-left 45s linear infinite;
}
.logo-marquee__row--rtl .logo-marquee__track{
  animation:logo-marquee-right 45s linear infinite;
}
/* Pause only the hovered row (other row keeps moving). */
.logo-marquee__row:hover .logo-marquee__track{
  animation-play-state:paused;
}
/* Fixed-width cells keep the loop length stable for a seamless wrap. */
.logo-marquee__track .bhes1-logo-box{
  flex:0 0 180px;
  margin:0;
}
@keyframes logo-marquee-left{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
@keyframes logo-marquee-right{
  from{ transform:translateX(-50%); }
  to  { transform:translateX(0); }
}
@media(max-width:767px){
  .logo-marquee__track .bhes1-logo-box{ flex:0 0 140px; }
}
/* Respect reduced-motion: stop the drift and let logos wrap naturally. */
@media(prefers-reduced-motion:reduce){
  .logo-marquee__track{
    animation:none !important;
    flex-wrap:wrap;
    justify-content:center;
    width:auto;
  }
}

/* ── BHES Editions cards (3 posters) — no cropping ────────────
   Used by /events/bharat-higher-education-summit (events/bhes1.php)
   The 3 edition posters have different natural ratios (1.83 / 2.20
   / 2.13). Forcing object-fit:cover with a fixed 16:9 frame crops
   the wider 2nd / 3rd posters. We use object-fit:contain so the
   full poster is visible; a soft background frames the letterbox
   space cleanly. Aspect ratio scales down on mobile for balance. */
.bhes-edition-img{
  width:100%;
  /* Fixed height (not aspect-ratio) so every edition card's image area is
     identical regardless of the banner's own proportions. object-fit:contain
     keeps each banner fully visible (no crop), centered on the bg. */
  height:260px;
  object-fit:contain;
  display:block;
  background:linear-gradient(180deg,#f8f9fc 0%,#eef1f7 100%);
  padding:.75rem;
}
@media(max-width:767px){
  /* On small phones give a touch more height so posters with text
     are easier to read. */
  .bhes-edition-img{height:220px;padding:.5rem;}
}
@media(min-width:1024px){
  /* On desktop, let the images breathe inside the card. */
  .bhes-edition-img{height:320px;padding:1rem;}
}

/* Subtle hover lift for the edition cards (matches local convention) */
.bhes-edition-card{
  transition:box-shadow .25s, transform .25s;
  text-decoration:none;
}
.bhes-edition-card:hover{
  box-shadow:0 12px 32px rgba(13,31,79,.12);
  transform:translateY(-3px);
}
.bhes-edition-card--navy  { border-top:3px solid var(--navy); }
.bhes-edition-card--gold  { border-top:3px solid var(--gold-dark); }
.bhes-edition-card--green { border-top:3px solid #059669; }

/* ═══════════════════════════════════════════════════════════════
   1st BHES — page chrome refactored from inline CSS
   Used by /events/bharat-higher-education-summit (events/bhes1.php)
   These rules replace previously-inline styles 1:1 — visual design
   is unchanged. Scoped under bhes1- prefix so other pages stay
   unaffected. No global classes were modified.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────────────── */
.bhes1-hero{
  background:linear-gradient(to bottom,#0d1f4f 0%,#152d6e 100%);
  position:relative;
  overflow:hidden;
  padding:4rem 0 0;
}
.bhes1-hero__dots{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:28px 28px;
}
.bhes1-hero__inner{
  position:relative;
  z-index:2;
}
.bhes1-hero__grid{
  display:grid;
  gap:2.5rem;
  align-items:end;
  padding-bottom:0;
}
@media(min-width:1024px){
  .bhes1-hero__grid{grid-template-columns:1fr 1fr;}
}
.bhes1-hero__content{
  padding-bottom:3rem;
}
.bhes1-hero__badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:rgba(212,175,55,.15);
  border:1px solid rgba(212,175,55,.3);
  border-radius:2rem;
  padding:.3rem .875rem;
  margin-bottom:1.25rem;
}
.bhes1-hero__badge-text{
  font-size:.7rem;
  font-weight:700;
  color:#D4AF37;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.bhes1-hero__title{
  font-family:var(--font-display);
  font-size:clamp(1.875rem,4vw,2.875rem);
  font-weight:800;
  color:#fff;
  line-height:1.1;
  margin:0 0 1rem;
}
.bhes1-hero__title-year{color:#D4AF37;}
.bhes1-hero__theme{
  font-size:1rem;
  color:rgba(191,219,254,.88);
  line-height:1.72;
  max-width:34rem;
  margin:0 0 2rem;
}
.bhes1-hero__theme-em{
  color:#D4AF37;
  font-style:normal;
  font-weight:700;
}
.bhes1-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.875rem;
}
.bhes1-hero__banner-wrap{align-self:flex-end;}
.bhes1-hero__banner-img{
  width:100%;
  display:block;
  border-radius:.875rem .875rem 0 0;
}

/* ── Stats bar ──────────────────────────────────────────────── */
.bhes1-stats{
  background:var(--navy);
  padding:1.5rem 0;
}
.bhes1-stats__row{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  justify-content:center;
}
.bhes1-stats__item{
  text-align:center;
  padding:1rem 2.5rem;
  border-right:1px solid rgba(255,255,255,.1);
}
.bhes1-stats__num{
  font-family:var(--font-display);
  font-size:2rem;
  font-weight:800;
  color:#D4AF37;
  line-height:1;
}
.bhes1-stats__label{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(191,219,254,.65);
  margin-top:.25rem;
}

/* ── About section ──────────────────────────────────────────────
   2026-08-21: was a 1fr/1fr grid — prose on the left, a Theme/Date/
   Venue/Organised-by sidebar on the right. The sidebar is gone and
   the prose runs the full container width, so the __grid, __sidebar
   and __highlight* rules went with it. Used by bhes1.php + bhes2.php.
   ─────────────────────────────────────────────────────────────── */
.bhes1-about__para{
  color:var(--text-light);
  line-height:1.8;
}
.bhes1-about__prose .gold-rule + .bhes1-about__para{
  margin-top:1.25rem;
}

/* ── Key speaker cards (4 with role addresses) ──────────────── */
.bhes1-key-grid{margin-top:2.5rem;}
.bhes1-key-card{overflow:hidden;}
.bhes1-key-card--navy   {border-top:3px solid #1E3A8A;}
.bhes1-key-card--green  {border-top:3px solid #059669;}
.bhes1-key-card--purple {border-top:3px solid #7C3AED;}
.bhes1-key-card--amber  {border-top:3px solid #D97706;}

.bhes1-key-card__img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:top;
  display:block;
}
.bhes1-key-card .card__title{font-size:.9375rem;}

.bhes1-key-card__role-badge{
  display:inline-block;
  font-size:.65rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  padding:.2rem .55rem;
  border-radius:.25rem;
  margin-bottom:.5rem;
}
.bhes1-key-card__role-badge--navy{
  color:#1E3A8A;
  background:rgba(30,58,138,.094);
}
.bhes1-key-card__role-badge--green{
  color:#059669;
  background:rgba(5,150,105,.094);
}
.bhes1-key-card__role-badge--purple{
  color:#7C3AED;
  background:rgba(124,58,237,.094);
}
.bhes1-key-card__role-badge--amber{
  color:#D97706;
  background:rgba(217,119,6,.094);
}

/* ── 3rd BHES Chief Guest (single centered highlighted card) ── */
.bhes3-chief-guest{display:flex;justify-content:center;margin-top:2.5rem;}
.bhes3-chief-guest .bhes1-key-card{max-width:280px;width:100%;}
/* centre the card text (badge + name + designation) like the speaker cards */
.bhes3-chief-guest .card__body{text-align:center;}
.bhes3-ds-header{margin-top:3.5rem;}

/* ── Distinguished speakers grid (28 speakers) ──────────────── */
.bhes1-speakers-header{margin:3.5rem 0 2rem;}
.bhes1-speakers-header .section-title{font-size:1.5rem;}
.bhes1-speakers__img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:top;
  display:block;
}
.bhes1-speakers__name{font-size:.95rem;}
.bhes1-speakers__role{font-size:.8rem;}

/* ── BHES Editions: top margin + upcoming tag ───────────────── */
.bhes1-editions-grid{margin-top:2.5rem;}
.bhes1-edition-tag--upcoming{
  background:rgba(5,150,105,.094);
  color:#059669;
}

/* ═══════════════════════════════════════════════════════════════
   3rd BHES — Registration Form
   Used by /third-bharat-higher-education-summit (events/bhes3.php)
   Multi-participant registration card with validation states. Replaces
   the inline <style> block in bhes3.php.
   ═══════════════════════════════════════════════════════════════ */
.bhes3-form-wrap { max-width: 48rem; margin: 0 auto; }
.bhes3-form-flash {
  padding: 1rem 1.25rem; border-radius: var(--radius);
  margin-bottom: 1.25rem; font-size: .9375rem; line-height: 1.5;
}
.bhes3-form-flash--ok  { background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; }
.bhes3-form-flash--err { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }

.bhes3-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.bhes3-card__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; padding-bottom: .75rem;
  border-bottom: 1px dashed var(--border);
}
.bhes3-card__title {
  font-family: var(--font-display); font-weight: 700;
  color: var(--navy); font-size: 1rem; margin: 0;
}
.bhes3-card__remove {
  background: #fff; color: #dc2626;
  border: 1px solid #fecaca; border-radius: .375rem;
  font-size: .78rem; font-weight: 600;
  padding: .25rem .65rem; cursor: pointer;
}
.bhes3-card__remove:hover { background: #fef2f2; }

.bhes3-row { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 600px) { .bhes3-row.is-2col { grid-template-columns: 1fr 1fr; } }

.bhes3-field label {
  display: block; font-size: .8125rem; font-weight: 600;
  color: var(--navy); margin-bottom: .375rem;
}
.bhes3-field label .req      { color: #dc2626; margin-left: .15rem; }
.bhes3-field label .optional { color: var(--text-light); font-weight: 400; margin-left: .25rem; }
.bhes3-field input,
.bhes3-field select,
.bhes3-field textarea {
  width: 100%; padding: .65rem .85rem;
  border: 1.5px solid var(--border); border-radius: .5rem;
  font-family: var(--font-body); font-size: .9375rem;
  background: #fff; color: var(--gray-700);
  transition: border-color .15s, box-shadow .15s;
}
.bhes3-field input:focus,
.bhes3-field select:focus,
.bhes3-field textarea:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, .12);
}
.bhes3-field.has-error input,
.bhes3-field.has-error select,
.bhes3-field.has-error textarea {
  border-color: #dc2626; background: #fef2f2;
}
.bhes3-field__err { margin: .3rem 0 0; font-size: .78rem; color: #dc2626; }

.bhes3-form-actions {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: .875rem; margin-top: .75rem;
}
.bhes3-form-actions__right { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* "Registrations Are Now Open" centered CTA */
.bhes3-register-cta { text-align: center; margin-top: 1.5rem; }

/* "Building on Two Landmark Editions" — 2-card grid */
.bhes3-legacy-grid { margin-top: 2.25rem; }
.bhes3-legacy-card__actions {
  display: flex; flex-wrap: wrap; gap: .625rem;
  margin-top: 1.125rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
}

/* ════════════════════════════════════════════════════════════════════
   /national-roundtable — page-scoped styles (nrt-* namespace)
   All classes are prefixed `nrt-` so they cannot bleed into other pages.
   ════════════════════════════════════════════════════════════════════ */

/* Hero */
.nrt-hero {
  background: linear-gradient(110deg, #0d1f4f, #1E3A8A);
  padding: 3.5rem 0 3rem;
  position: relative;
  overflow: hidden;
}
.nrt-hero__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 24px 24px;
}
.nrt-hero__glow {
  position: absolute; right: -4rem; top: -4rem;
  width: 28rem; height: 28rem;
  background: radial-gradient(circle, rgba(212,175,55,.1) 0%, transparent 65%);
}
.nrt-hero__inner { position: relative; z-index: 2; }
.nrt-hero__grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  margin-top: 1rem;
}
@media (min-width: 1024px) {
  .nrt-hero__grid { grid-template-columns: 1fr 1fr; }
}
.nrt-hero__date {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(212,175,55,.15);
  border: 1px solid rgba(212,175,55,.3);
  border-radius: 2rem;
  padding: .3rem .875rem;
  margin-bottom: 1.125rem;
}
.nrt-hero__date-dot {
  width: .5rem; height: .5rem;
  background: #D4AF37;
  border-radius: 50%;
}
.nrt-hero__date-text {
  font-size: .7rem;
  font-weight: 700;
  color: #D4AF37;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nrt-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.625rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 1rem;
  line-height: 1.1;
}
.nrt-hero__title-accent { color: #D4AF37; }
.nrt-hero__lead {
  font-size: 1rem;
  color: rgba(191,219,254,.88);
  line-height: 1.72;
  max-width: 34rem;
  margin: 0 0 1.75rem;
}
.nrt-hero__btns { display: flex; flex-wrap: wrap; gap: .875rem; }
.nrt-hero__photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.nrt-hero__photo img {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}

/* Quick facts strip */
.nrt-facts { background: var(--navy); padding: 1.25rem 0; }
.nrt-facts__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
}
.nrt-facts__item {
  text-align: center;
  padding: .875rem 2rem;
  border-right: 1px solid rgba(255,255,255,.1);
}
.nrt-facts__item:last-child { border-right: 0; }
.nrt-facts__icon { font-size: 1.25rem; line-height: 1; margin-bottom: .25rem; }
.nrt-facts__label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(191,219,254,.55);
  margin-bottom: .125rem;
}
.nrt-facts__value { font-size: .8125rem; font-weight: 600; color: #fff; }

/* About section */
.nrt-about__container { max-width: 54rem; }
.nrt-about__lead { margin-top: 1.25rem; }
.nrt-about__para { color: var(--text-light); line-height: 1.8; }

/* Gallery section heading */
.nrt-gallery__head { margin-bottom: 1.5rem; }
.nrt-gallery__title { font-size: 1.5rem; }

/* ════════════════════════════════════════════════════════════════════
   Simple admin pages — /admin/bhes3-registrations[/(:num)]
   Standalone HTML pages (no main layout). Every selector is scoped
   under `.adm-bhes3` so global element rules (body/table/th/td/pre)
   do not bleed into the rest of the site.
   ════════════════════════════════════════════════════════════════════ */
body.adm-bhes3,
.adm-bhes3 *,
.adm-bhes3 *::before,
.adm-bhes3 *::after { box-sizing: border-box; }

body.adm-bhes3 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f5f7fa;
  margin: 0;
  color: #0f172a;
}

.adm-bhes3__wrap         { max-width: 1200px; margin: 0 auto; padding: 24px; }
.adm-bhes3__wrap--narrow { max-width: 900px; }

.adm-bhes3__head {
  background: #0d1f4f; color: #fff;
  padding: 18px 24px; border-radius: 8px;
  margin-bottom: 18px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
}
.adm-bhes3__head--compact { padding: 14px 22px; }
.adm-bhes3__head h1   { margin: 0; font-size: 18px; }
.adm-bhes3__head--compact h1 { font-size: 17px; }
.adm-bhes3__head a    { color: #cbd5e1; text-decoration: none; font-size: 13px; }
.adm-bhes3__head a:hover { color: #fff; }

.adm-bhes3__stats { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.adm-bhes3__stat {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 1rem 1.25rem; min-width: 160px;
}
.adm-bhes3__stat-lbl {
  font-size: .7rem; color: #64748b; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 700; margin: 0 0 .35rem;
}
.adm-bhes3__stat-val {
  font-size: 1.4rem; color: #0d1f4f; font-weight: 800; margin: 0;
}

.adm-bhes3__group {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  margin-bottom: 1.25rem; overflow: hidden;
}

.adm-bhes3 table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.adm-bhes3 th,
.adm-bhes3 td {
  padding: .6rem .75rem; text-align: left;
  border-bottom: 1px solid #f1f5f9; vertical-align: top;
}
.adm-bhes3 th {
  background: #fafbfd; color: #1e293b;
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 700;
}
.adm-bhes3__idx { font-weight: 700; color: #0d1f4f; width: 36px; }

.adm-bhes3__empty {
  padding: 2rem; text-align: center; color: #64748b;
  background: #fff; border-radius: 8px; border: 1px dashed #cbd5e1;
}

.adm-bhes3__row-link { color: #0d1f4f; text-decoration: none; font-weight: 600; }
.adm-bhes3__row-link:hover { text-decoration: underline; }

/* Detail page (single registration) */
.adm-bhes3__card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  margin-bottom: 1.25rem; overflow: hidden;
}
.adm-bhes3__card-head {
  background: #eff6ff; border-left: 4px solid #d4af37;
  padding: .65rem 1rem; font-weight: 700; color: #0d1f4f; font-size: .95rem;
}
.adm-bhes3 .adm-bhes3__card table   { font-size: .9rem; }
.adm-bhes3 .adm-bhes3__card th      { width: 160px; font-weight: 600; font-size: .8rem; text-transform: none; letter-spacing: 0; }
.adm-bhes3 .adm-bhes3__card th,
.adm-bhes3 .adm-bhes3__card td      { padding: .65rem .9rem; }
.adm-bhes3 .adm-bhes3__card pre     { margin: 0; white-space: pre-wrap; font-family: inherit; }

.adm-bhes3__meta {
  font-size: .8rem; color: #64748b;
  background: #f8fafc; padding: .65rem .9rem;
  border-top: 1px solid #f1f5f9;
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE HERO BANNER  —  Mobile responsive fix (2026-05-11)
   Affects: app/Views/pages/home.php  →  Section 1 (Hero Slider)
   ───────────────────────────────────────────────────────────────
   Problem reported on phones (iPhone SE / XR / 12 / 14 etc.):
     • Slide image was forced to height:520px while the viewport
       was only ~360–414px wide. The 1370×768 (≈16:9) source
       photos therefore had to be heavily cropped by
       object-fit:cover, producing a "zoomed-in" look where faces
       and signage were chopped off.
     • Section min-height:520px also left empty navy space below
       the cropped image, so the banner felt oversized.
   Fix (this block, ≤767px only — tablet/desktop unchanged):
     • Drop section min/max-height so the banner sizes to content.
     • Let the slide image follow its natural 16:9 aspect ratio
       so the full photo is visible without aggressive cropping.
     • Tighten caption padding and clamp the paragraph so the
       gradient overlay doesn't dominate the shorter banner.
     • Shrink prev/next buttons slightly and nudge dots so they
       remain visible against the new caption gradient.
   Rules being overridden (kept intact for ≥768px):
     · Line 1576  .hp-slider             { min-height:520px; max-height:680px; }
     · Line 1579  .hp-slider__slide img  { height:520px; object-position:center top; }
     · Line 1584  .hp-slider__caption    { padding:.75rem 1rem; }
     · Line 2508  .hp-slider__caption h2 { font-size:clamp(1.25rem,3vw,2rem); }
     · Line 2517  .hp-slider__caption p  { font-size:.9375rem; }
     · Line 1613  .hp-slider__btn        { width:3rem; height:3rem; }
     · Line 1615  .hp-slider__btn--prev  { left:1rem; }
     · Line 1616  .hp-slider__btn--next  { right:1rem; }
     · Line 1619  .hp-slider__dots       { bottom:1.25rem; }
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .hp-slider {
    min-height: 0;
    max-height: none;
  }
  .hp-slider__slide img {
    height: auto;
    aspect-ratio: 16 / 9;
    object-position: center center;
  }
  .hp-slider__caption {
    padding: .65rem .95rem 1.4rem;
    background: linear-gradient(to top,
      rgba(13,31,79,.94) 0%,
      rgba(13,31,79,.65) 55%,
      transparent 100%);
  }
  .hp-slider__caption-tag {
    font-size: .62rem;
    padding: .18rem .55rem;
    margin-bottom: .45rem;
    letter-spacing: .08em;
  }
  .hp-slider__caption h2,
  .hp-slider__caption h4 {
    font-size: 1.05rem;
    line-height: 1.25;
    margin: 0 0 .35rem;
  }
  .hp-slider__caption p {
    font-size: .78rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hp-slider__btn {
    width: 2.4rem;
    height: 2.4rem;
  }
  .hp-slider__btn--prev { left: .5rem; }
  .hp-slider__btn--next { right: .5rem; }
  .hp-slider__dots { bottom: .6rem; gap: .35rem; }
  .hp-slider__dot  { width: .45rem; height: .45rem; }
}

/* Extra-small phones (≤374px) — iPhone SE 1st gen / older Android.
   Tighter caption so a 2-line paragraph + tag + heading still
   clear the dots row at this width. */
@media (max-width: 374px) {
  .hp-slider__caption-tag { font-size: .58rem; margin-bottom: .35rem; }
  .hp-slider__caption h2,
  .hp-slider__caption h4  { font-size: .95rem; margin-bottom: .3rem; }
  .hp-slider__caption p   { font-size: .72rem; -webkit-line-clamp: 1; line-clamp: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE EVENTS SECTION  —  Mobile responsive fix (2026-05-11)
   Affects: app/Views/pages/home.php  →  Section 6 (Events)
   ───────────────────────────────────────────────────────────────
   Problem reported on phones:
     • The event posters (BHES 2, BHES 3, Sports Directors, etc.)
       are designed edge-to-edge with the title / dates running
       close to the artwork's left & right margins.
     • The media area uses aspect-ratio:16/10 + object-fit:cover
       with object-position:center top. Because most posters are
       taller / more square than 16:10, "cover" zooms in and
       clips the left + right edges — so headlines like
       "2nd BHARAT HIGHER EDUCATION SUMMIT" become "…nd BHARAT…
       SUMMI…" on small screens.
   Fix (this block, ≤767px only — tablet/desktop unchanged):
     • Loosen the aspect ratio to 4/3 so taller posters get more
       vertical room.
     • Switch object-fit to "contain" so the full poster always
       fits inside the media area with NO content clipped. The
       navy backdrop (already on .event-card__media) provides a
       clean letterbox where needed — it reads as intentional.
     • Slightly downscale the gold tag and "Featured" pill so
       they don't dwarf the smaller mobile card.
   Rules being overridden (kept intact for ≥768px):
     · Line 1751  .event-card__media     { aspect-ratio:16/10; background:#0d1f4f; }
     · Line 1752  .event-card__media img { object-fit:cover; object-position:center top; }
     · Line 1755  .event-card__tag       { font-size:.62rem; padding:.25rem .6rem; }
     · Line 1763  .event-card__featured-pill { font-size:.6rem; padding:.25rem .55rem .25rem .45rem; }
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .event-card__media {
    aspect-ratio: 4 / 3;
  }
  .event-card__media img {
    object-fit: contain;
    object-position: center;
  }
  .event-card__tag {
    font-size: .58rem;
    padding: .22rem .55rem;
    letter-spacing: .06em;
  }
  .event-card__featured-pill {
    font-size: .55rem;
    padding: .22rem .5rem .22rem .4rem;
  }
  .event-card__body {
    padding: 1rem 1.1rem 1.1rem;
  }
  .event-card__title {
    font-size: 1.0625rem;   /* 17px — was .92rem */
    margin: 0 0 .85rem;
  }
}

/* Extra-small phones (≤374px) — keep posters readable but trim a
   touch more so a long title doesn't cause double-line wrap. */
@media (max-width: 374px) {
  .event-card__media { aspect-ratio: 3 / 2; }
  .event-card__title { font-size: 1rem; line-height: 1.35; }   /* 16px — was .88rem */
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE EVENTS SECTION  —  Desktop / tablet fix (2026-05-11)
   Affects: app/Views/pages/home.php  →  Section 6 (Events)
   ───────────────────────────────────────────────────────────────
   Problem reported on desktop:
     • Same root cause as the mobile block above. The third card
       ("2nd Bharat Higher Education Summit") was rendering as
       "…nd BHARAT HIGHER EDUCATION SUMMIT" because the source
       poster is wider than 16:10, and the original rule at
       Line 1752 used object-fit:cover + object-position:center
       top, which scaled the poster to fill height and clipped
       its left + right edges.
   Fix (applies to all viewports — supersedes the line-1752
   declaration, but keeps the 16/10 container shape so the 3-card
   row, gold border, featured pill and overall design are
   unchanged):
     • object-fit:contain → full poster always visible, no clip.
     • object-position:center → centre the image inside the box.
     • Any letterboxing falls onto the navy backdrop already
       declared at Line 1751 (background:#0d1f4f), so it reads as
       a deliberate frame rather than a missing-image gap.
   The earlier mobile block (≤767px) still applies on top of this
   for aspect-ratio / typography tuning.
   Rule being overridden (kept in place for any future revert):
     · Line 1752  .event-card__media img { object-fit:cover; object-position:center top; }
   ═══════════════════════════════════════════════════════════════ */

.event-card__media img {
  object-fit: contain;
  object-position: center;
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE (/about-us)  —  Typography & spacing refinement
   Added: 2026-05-11   |   Updated: 2026-05-11 (lead unified)
   Affects: app/Views/pages/about.php  →  Section "#who-we-are"
   ───────────────────────────────────────────────────────────────
   Scope per request:
     • Copy stays exactly as-is (no text changes in the view).
     • Adjust font-size, font-family and spacing only — to bring
       the About-Us prose into line with the rest of the site's
       editorial rhythm.
     • UPDATE: the first paragraph (.about-prose__lead) was
       previously styled as a stand-first (navy, larger, medium
       weight). Per follow-up feedback, the lead must match the
       other body paragraphs exactly — same font-family, same
       size, same colour, same weight. The .about-prose__lead
       class is therefore neutralised to inherit from
       .about-prose p so the prose reads as one consistent
       block, with the heading/eyebrow/gold-rule above doing all
       of the hierarchy work.
   What this block tunes:
     • All body paragraphs (lead + rest): same family, size,
       colour, weight, line-height. Slightly tighter line-height
       1.85 → 1.75 for a cleaner editorial cadence and a touch
       more inter-paragraph spacing.
     • Closing italic note: more breathing room above the rule,
       a touch of size. The gold rule is unchanged.
     • Section heading row: a small lift in margin below so the
       gold rule doesn't crowd the first paragraph.
   Rules being overridden (kept intact at lines 2532-2542 so the
   refinement is one block to roll back if needed):
     · Line 2532  .about-prose          { max-width:54rem; }
     · Line 2533  .about-prose__head    { margin-bottom:1.25rem; }
     · Line 2535  .about-prose p        { font-size:1rem; line-height:1.85; … }
     · Line 2537  .about-prose__lead    { font-size:1.075rem; color:var(--gray-700); font-weight:500; }
     · Line 2538  .about-prose__close   { padding-top:1rem; margin-top:.5rem; … }
     · Line 2540  @md  .about-prose p   { font-size:1.0125rem; }
     · Line 2541  @md  .about-prose__lead { font-size:1.125rem; }
   ═══════════════════════════════════════════════════════════════ */

.about-prose {
  max-width: 56rem;
}
.about-prose__head {
  margin-bottom: 1.75rem;
}
.about-prose p {
  font-family: var(--font-body);
  line-height: 1.75;
  margin: 0 0 1.25rem;
  color: var(--gray-700);
}
/* Lead paragraph: match the rest of the prose exactly.
   Resets the legacy stand-first styling (size/weight/colour). */
.about-prose__lead {
  font-size: inherit;
  font-weight: 400;
  color: var(--gray-700);
  line-height: inherit;
  margin: 0 0 1.25rem;
}
/* Closing paragraph: also match the rest of the prose exactly.
   Resets the legacy italic/navy/border-top treatment so the
   "Together, we strive…" line reads as a normal body paragraph
   in the same block. */
.about-prose__close {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-style: normal;
  font-weight: 400;
  color: var(--gray-700);
  font-size: inherit;
  line-height: inherit;
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .about-prose p,
  .about-prose__lead,
  .about-prose__close { font-size: 1.05rem; }
}

/* ─── About CIPU prose card ───────────────────────────────────
   Subtle pearl-tinted card that wraps the 5 prose paragraphs
   (introduced by a new <div class="about-prose__body"> in
   app/Views/pages/about.php). The heading row above the card
   is unchanged.
   Design language matches the site's existing focus-list /
   event-card pattern:
     · pearl background (--pearl, #F7F8FA)
     · soft 1px navy-tinted border (--border, #E5E7EB)
     · 4px gold left accent (--gold, #D4AF37) for emphasis
     · 0.875rem rounded corners (--radius-lg)
     · subtle navy shadow (--shadow-sm)
   On mobile the card padding tightens so it doesn't overflow.
   ───────────────────────────────────────────────────────── */
.about-prose__body {
  background: var(--pearl);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 1.5rem 1.5rem 1.75rem;
}
.about-prose__body > p:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .about-prose__body { padding: 2.25rem 2.5rem 2.25rem 2.75rem; }
}
@media (min-width: 1100px) {
  .about-prose__body { padding: 2.5rem 3rem 2.5rem 3.25rem; }
}

/* ═══════════════════════════════════════════════════════════════
   PAST ROUNDTABLES (/past-roundtables) — extracted inline CSS
   Added: 2026-05-11
   Affects: app/Views/pages/past-roundtables.php
   ───────────────────────────────────────────────────────────────
   The page previously had four style="..." attributes:
     · h2 heading (display-font + gold underline)
     · card thumbnail (3:2 cover crop)
     · "Read More" button top margin
     · bottom row top margin
   They've been replaced with the four utility classes below so
   the markup stays inline-CSS-free per project convention.
   ═══════════════════════════════════════════════════════════════ */
/* Shared with the Upcoming Webinar page below: same "Upcoming" rule
   above the featured card, so the sibling pages match. */
.past-rt__heading,
.wb-up__heading {
  font-family: var(--font-display);
  /* Was a flat 1.125rem (18px), which read as a caption next to the hero H1.
     Scales with the viewport like the site's other section titles. */
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  margin: 0 0 2rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--gold);
}
.past-rt__card-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.past-rt__cta { margin-top: .875rem; }
.past-rt__bottom { margin-top: 2rem; }
/* ═══════════════════════════════════════════════════════════════
   UPCOMING ROUNDTABLE (/upcoming-roundtables) — featured event card
   Added: 2026-08-20
   Affects: app/Views/pages/upcoming-roundtables.php  (that page only)
   ───────────────────────────────────────────────────────────────
   Rebuild of the live site's Bootstrap `.rt-upcoming` block on this
   site's own tokens (navy/gold, Playfair display face, --radius-lg).
   Every selector is namespaced `.rt-up`, so nothing here can reach
   another page — it sits beside the PAST ROUNDTABLES block above so
   the two sibling pages stay together in this file.

   The poster is a 2:3 portrait. The column is sized to that ratio so
   `cover` never actually crops; `contain` would letterbox instead.
   ═══════════════════════════════════════════════════════════════ */
.rt-up {
  display: grid;
  gap: 1.75rem;
  align-items: center;
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
/* Two-up only once the text column can hold a comfortable measure. */
@media(min-width:900px) {
  .rt-up {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 2.5rem;
    padding: 2rem;
  }
}

.rt-up__poster { width: 100%; max-width: 20rem; margin: 0 auto; }
.rt-up__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--pearl);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
}

.rt-up__body { min-width: 0; }

.rt-up__label {
  display: inline-block;
  margin-bottom: .875rem;
  padding: .375rem .875rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
  background: rgba(30, 58, 138, .08);
  border-radius: 999px;
}
.rt-up__title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
}

/* Date / time / venue — wraps to as many rows as the viewport needs. */
.rt-up__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem 1.5rem;
  margin: 0 0 1.25rem;
  padding: 0 0 1.25rem;
  list-style: none;
  border-bottom: 1px solid var(--border);
}
.rt-up__meta li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-base);
}
.rt-up__meta svg { flex: 0 0 auto; color: var(--gold-dark); }

.rt-up__text {
  margin: 0 0 .875rem;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--text-base);
}
.rt-up__text:last-of-type { margin-bottom: 1.25rem; }

.rt-up__chair {
  padding: .875rem 1.125rem;
  background: var(--pearl);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.rt-up__chair-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .375rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
}
.rt-up__chair-name {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--text-base);
}
/* The credit is one sentence but reads as two lines — name, then the
   designation it belongs to. Both are block-level so the break holds at
   every width rather than depending on where the text happens to wrap. */
.rt-up__chair-person { display: block; font-weight: 600; }
.rt-up__chair-role   { display: block; }

.rt-up__bottom { margin-top: 2.5rem; text-align: center; }

@media(max-width:520px) {
  .rt-up { padding: 1.125rem; }
  .rt-up__meta { gap: .5rem 1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   UPCOMING WEBINAR (/events/upcoming-webinars) — featured poster
   Added: 2026-08-21
   Affects: app/Views/events/upcoming-webinars.php  (that page only)
   ───────────────────────────────────────────────────────────────
   Same card language as the .rt-up block above (white card, gold
   top rule, --radius-lg, --shadow) so the two "Upcoming …" pages
   read as siblings — the poster is the only thing cipuglobal.org
   publishes for a scheduled webinar, so this page is that poster
   dressed in this site's tokens.

   The card is poster-only — no label/title/meta column like .rt-up
   has. The 3:2 LANDSCAPE poster already carries its own titling,
   dates and panellist credits, so setting them again beside it just
   said the same thing twice. No aspect-ratio/object-fit either: the
   img carries width/height, so the ratio is reserved without ever
   cropping a credit off the edge.

   Every selector is namespaced `.wb-up`, so nothing here can
   reach another page.
   ═══════════════════════════════════════════════════════════════ */
.wb-up {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
@media(min-width:900px) { .wb-up { padding: 1.75rem; } }

/* The poster links to itself: at phone widths the panellist credits
   are unreadable in place, and opening the file is the only zoom
   affordance that works without a lightbox dependency. */
.wb-up__poster { display: block; }
.wb-up__img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--pearl);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  transition: box-shadow var(--transition);
}
.wb-up__poster:hover .wb-up__img,
.wb-up__poster:focus-visible .wb-up__img { box-shadow: var(--shadow-lg); }

.wb-up__bottom { margin-top: 2.5rem; text-align: center; }
/* The page's only call to action, sitting alone under a full-width poster —
   .btn-sm's 13px read as a footnote there, so this one steps up a size. */
.wb-up__bottom .btn { font-size: .9375rem; padding: .7rem 1.75rem; }

@media(max-width:520px) {
  .wb-up { padding: 1.125rem; }
}


/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE TYPOGRAPHY — Readability bump (2026-05-11)
   Affects: app/Views/pages/home.php  →  all section headings + leads
   ───────────────────────────────────────────────────────────────
   Client feedback: section H2s felt small on tablet/desktop.
   These overrides nudge the section-title scale up ~17% across all
   viewport widths, lift the eyebrow line a touch for legibility,
   and bump the about-section lead so the opening paragraph reads
   with more authority.
   Rules being overridden (originals kept intact for reference):
     · Line 297-300  .section-title { font-size: clamp(1.5rem, 3vw, 2rem); }
     · Line 283-287  .eyebrow       { font-size: .7rem; ... }
     · Line 1629     .hp-about__lead{ color:var(--text-light); line-height:1.82; }
     · Line 2412     .hp-cta h2     { font-size: clamp(1.625rem, 3.5vw, 2.375rem); }
     · Line 2411     .hp-cta__kicker{ font-size: .7rem; ... }
   ═══════════════════════════════════════════════════════════════ */
.section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.375rem);
  line-height: 1.18;
}
.eyebrow {
  font-size: .75rem;
  letter-spacing: .18em;
}
.hp-about__lead {
  font-size: 1.0625rem;
  line-height: 1.85;
  /* Tailwind's preflight sets `p { margin: 0 }` and loads AFTER this file, so
     the global `p { margin: 0 0 1rem }` never reaches these paragraphs and the
     About-Us copy ran together as one block. A class beats an element selector
     on specificity, so this restores the gap regardless of load order.
     margin-bottom only — the shorthand would wipe .hp-about__lead--top's
     margin-top, which is declared earlier in this file. */
  margin-bottom: 1rem;
}
.hp-about__lead:last-of-type { margin-bottom: 0; }
@media (min-width: 768px) {
  .hp-about__lead { font-size: 1.125rem; }
}
.hp-cta h2 {
  font-size: clamp(1.875rem, 4vw, 2.625rem);
  line-height: 1.18;
}
.hp-cta__kicker { font-size: .78rem; letter-spacing: .18em; }
.hp-cta p { font-size: 1.0625rem; line-height: 1.75; }


/* ═══════════════════════════════════════════════════════════════
   Body-copy readability bump (≈+2px) — client request.
   ONLY enlarges small paragraph / description / role / meta text.
   No headings or names are touched; no colour/layout/spacing change.
   Values are rem-based, so every device (incl. mobile) gets the same
   comfortable size. Placed last so it overrides the originals.
   ═══════════════════════════════════════════════════════════════ */
/* Card description / meta text (Industry–Academia, BHES editions, etc.) */
.card__meta             { font-size: .9375rem; }   /* was .8125rem (+2px) */

/* Speaker / leader / testimonial designation lines */
.person-card__role      { font-size: .875rem; }    /* was .78rem  */
.bhes1-speakers__role   { font-size: .9rem;   }    /* was .8rem   */
.testimonial-card__role { font-size: .85rem;  }    /* was .78rem  */
.leader-card__role      { font-size: .875rem; }    /* was .78rem  */

/* National Committees — convenor & member role lines */
.nc-card__conv-role     { font-size: .85rem;  }    /* was .775rem */
.nc-member-row__role    { font-size: .8rem;   }    /* was .72rem  */

/* Important-links descriptions */
.imp-links-cat__desc    { font-size: .9375rem; }   /* was .875rem  */
.imp-link-card__desc    { font-size: .9375rem; }   /* was .8125rem */

/* Homepage blog cards — date line was too small to read */
.blog-card__date        { font-size: 14px; }   /* was .7rem   */

/* Footer intro line */
.footer__lead           { font-size: .9375rem; }   /* was .875rem */

/* ═══════════════════════════════════════════════════════════
   BHES ENTRY POPUP (moved here from inline <style> in
   app/Views/pages/home.php on 2026-07-02). Scoped to the
   .bhes-popup* classes only, so no other page is affected.
   ═══════════════════════════════════════════════════════════ */
.bhes-popup{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:1rem;}
.bhes-popup.is-open{display:flex;}
.bhes-popup__backdrop{position:absolute;inset:0;background:rgba(10,20,50,.72);backdrop-filter:blur(2px);}
.bhes-popup__dialog{position:relative;z-index:1;width:100%;max-width:640px;background:#fff;border-radius:1rem;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,.4);animation:bhesPop .35s ease;}
@keyframes bhesPop{from{opacity:0;transform:translateY(20px) scale(.97);}to{opacity:1;transform:none;}}
.bhes-popup__close{position:absolute;top:.75rem;right:.75rem;z-index:2;width:2.25rem;height:2.25rem;border:none;border-radius:50%;background:#fff;color:#0d1f4f;font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;}
.bhes-popup__close:hover{background:#f1f1f1;}
.bhes-popup__imglink,.bhes-popup__img{display:block;}
.bhes-popup__img{width:100%;height:auto;}
.bhes-popup__footer{text-align:center;padding:1rem;}
.bhes-popup__btn{display:inline-block;animation:bhesPulse 1.6s infinite;}
@keyframes bhesPulse{0%{box-shadow:0 0 0 0 rgba(212,175,55,.5);}70%{box-shadow:0 0 0 12px rgba(212,175,55,0);}100%{box-shadow:0 0 0 0 rgba(212,175,55,0);}}
@media(max-width:600px){.bhes-popup__dialog{max-width:94vw;}}

/* ── Courtesy Meeting feature (mirrors live homepage) ───────── */
.hp-courtesy__card{display:grid;grid-template-columns:300px 1fr;gap:2.5rem;align-items:center;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:2.5rem;}
.hp-courtesy__photo{width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:0 12px 32px rgba(13,31,79,.20);object-fit:cover;display:block;}
.hp-courtesy__text{font-family:var(--font-display);font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.55;color:var(--navy);font-weight:600;margin:0;}
.hp-courtesy__rule{width:3.5rem;height:3px;background:var(--navy);margin-top:1.25rem;border-radius:2px;}
@media(max-width:768px){.hp-courtesy__card{grid-template-columns:1fr;gap:1.5rem;padding:1.5rem;}.hp-courtesy__photo{max-width:260px;margin:0 auto;}}

/* ── CIPU Strategic Pillars (mirrors live homepage) ─────────── */
.hp-pillars__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;}
.hp-pillars__card{background:#fff;border:1px solid var(--border);border-top:4px solid var(--_c,var(--navy));border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:1.75rem 1.5rem;transition:transform .18s ease,box-shadow .18s ease;}
.hp-pillars__card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(13,31,79,.12);}
.hp-pillars__title{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--navy);margin:0 0 .5rem;}
.hp-pillars__title::after{content:"";display:block;width:2rem;height:2px;background:var(--_c,var(--gold));margin-top:.55rem;border-radius:2px;}
.hp-pillars__desc{font-size:.9rem;line-height:1.55;color:var(--text-dim);margin:0;}
@media(max-width:960px){.hp-pillars__grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.hp-pillars__grid{grid-template-columns:1fr;}}

/* ── 3rd BHES Speaker Bites (video cards) ──────────────────── */
/* Speaker Bites — auto-scrolling carousel; hovering (or playing) pauses it */
.bhes3-bites{max-width:1180px;margin:0 auto;}
.bhes3-bites__viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.bhes3-bites__track{
  display:flex;
  width:max-content;
  gap:1.5rem;
  padding:.25rem 0;
  animation:bhes3-bites-scroll 55s linear infinite;
}
/* pause on hover, or while a clip is playing */
.bhes3-bites__viewport:hover .bhes3-bites__track,
.bhes3-bites__viewport.is-playing .bhes3-bites__track{
  animation-play-state:paused;
}
@keyframes bhes3-bites-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}   /* two identical passes → seamless loop */
}
.bhes3-bite{position:relative;flex:0 0 auto;width:340px;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:#000;cursor:pointer;box-shadow:var(--shadow-sm);}
@media(max-width:600px){.bhes3-bite{width:260px;}}
/* Accessibility: no motion — static wrapped grid, hide the duplicate pass */
@media(prefers-reduced-motion:reduce){
  .bhes3-bites__viewport{-webkit-mask-image:none;mask-image:none;overflow:visible;}
  .bhes3-bites__track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;}
  .bhes3-bite[aria-hidden="true"]{display:none;}
}
.bhes3-bite__thumb{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;transition:opacity .2s ease,transform .35s ease;}
.bhes3-bite:hover .bhes3-bite__thumb,.bhes3-bite:focus-visible .bhes3-bite__thumb{opacity:1;transform:scale(1.04);}
.bhes3-bite__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));transition:transform .2s ease;}
.bhes3-bite:hover .bhes3-bite__play{transform:scale(1.08);}
.bhes3-bite iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ── 3rd BHES: Press Coverage slider ─────────────────────────── */
.bhes3-press{
  display:flex;
  align-items:center;
  gap:.75rem;
  max-width:1180px;
  margin:0 auto;
}
.bhes3-press__viewport{
  flex:1 1 auto;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.bhes3-press__track{
  display:flex;
  gap:1.5rem;
  width:max-content;
  padding:.5rem .25rem;
  will-change:transform;
}
.bhes3-press__item{
  flex:0 0 auto;
  width:220px;
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem 1.25rem;
  min-height:8rem;
  text-decoration:none;
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.bhes3-press__item:hover,
.bhes3-press__item:focus-visible{
  box-shadow:0 8px 24px rgba(13,31,79,.10);
  transform:translateY(-3px);
  border-color:rgba(30,58,138,.20);
}
.bhes3-press__logo{
  max-width:100%;
  max-height:5rem;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
.bhes3-press__name{
  font-family:var(--font-head,Georgia,serif);
  font-size:1.125rem;
  font-weight:700;
  line-height:1.3;
  color:var(--navy-deep);
  text-align:center;
}
.bhes3-press__nav{
  flex:0 0 auto;
  width:2.75rem;
  height:2.75rem;
  border-radius:50%;
  border:1px solid var(--border-light);
  background:#fff;
  color:var(--navy-deep);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(13,31,79,.08);
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.bhes3-press__nav:hover{background:var(--navy-deep);color:#fff;transform:translateY(-2px);}
.bhes3-press__nav:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
@media(max-width:600px){
  .bhes3-press__item{width:170px;min-height:7rem;padding:1.25rem 1rem;}
  .bhes3-press__name{font-size:1rem;}
  .bhes3-press__nav{width:2.25rem;height:2.25rem;}
}

/* BHES3 registration heading — moved here from the inline <style> block
   in app/Views/events/bhes3.php. The id is unique to that page, so these
   rules cannot affect any other page. */
#reg-h2{font-size:26px;line-height:1.3;}
@media(max-width:600px){
  #reg-h2{font-size:19px;}
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAV / DRAWER  —  moved here from the inline <style> block
   that used to live at the top of app/Views/layouts/header.php.

   KEEP THIS BLOCK LAST IN THE FILE. These rules deliberately
   override the earlier .mobile-drawer / .main-nav__cta declarations
   (around lines 106-210). Previously the header's inline <style>
   won because it was parsed after this stylesheet; now it wins by
   source order within the same file. Moving it earlier would let
   the older rules take over and break the drawer's offset, colours
   and the pure-CSS checkbox toggle.
   ═══════════════════════════════════════════════════════════════ */

/* Hide Join Now on mobile so hamburger has space */
@media (max-width: 1279px) {
  .main-nav__cta { display: none !important; }
}
/* === Pure-CSS mobile drawer using a hidden checkbox toggle ===
   No JavaScript required. The hamburger label is positioned over
   the button area; clicking it flips the checkbox; the checkbox's
   :checked state drives the drawer's visibility.
   This is the most fail-safe pattern — works even if all JS is
   broken or blocked. */
.mobile-nav-toggle-cb { position: absolute; opacity: 0; pointer-events: none; }
.mobile-drawer {
  display: none;
  position: fixed; top: calc(72px + var(--topbar-h, 40px)); left: 0; right: 0;
  z-index: 99999; background: #ffffff;
  border-top: 3px solid #D4AF37;
  padding: .5rem 1rem 1.5rem;
  max-height: calc(100vh - 72px - var(--topbar-h, 40px));
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(30,58,138,.18);
  -webkit-overflow-scrolling: touch;
}
/* Both the legacy is-open class AND the checkbox-checked sibling
   selector open the drawer — belt + braces. */
#mobileDrawer.is-open,
.mobile-drawer.is-open,
.mobile-nav-toggle-cb:checked ~ #mobileDrawer { display: block !important; }
.mobile-drawer a {
  display: block; padding: .75rem .25rem;
  border-bottom: 1px solid #F3F4F6;
  font-size: .95rem; font-weight: 600; color: #1E3A8A;
  text-decoration: none;
}
.mobile-drawer details summary {
  padding: .75rem .25rem; font-size: .95rem; font-weight: 600;
  color: #1E3A8A; cursor: pointer;
  border-bottom: 1px solid #F3F4F6;
  list-style: none; display: flex; align-items: center; justify-content: space-between;
}
.mobile-drawer details summary::-webkit-details-marker { display: none; }
.mobile-drawer__sub-link {
  padding: .55rem 0 .55rem 1rem !important;
  font-size: .85rem !important; color: #6B7280 !important; font-weight: 500 !important;
  border-bottom: 1px dashed #F3F4F6 !important;
}
.mobile-drawer__join-btn {
  display: block !important; margin: 1rem 0 .5rem !important; padding: .85rem !important;
  background: #D4AF37 !important; color: #0d1f4f !important; font-weight: 700 !important;
  font-size: .95rem !important; text-align: center !important;
  border-radius: .5rem !important; text-decoration: none !important;
  border-bottom: 0 !important;
}
/* The <label> that acts as the visible hamburger button */
.nav-mobile-label {
  display: none;
  width: 2.75rem; height: 2.75rem; cursor: pointer;
  align-items: center; justify-content: center;
  color: #1E3A8A; border-radius: .375rem;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 1279px) {
  .nav-mobile-label { display: inline-flex; }
}
.nav-mobile-label svg { pointer-events: none; }
.nav-mobile-label:active { background: rgba(30,58,138,.06); }

/* ══════════════════════════════════════════════════════════════
   FACULTY CONTINUOUS PROFESSIONAL DEVELOPMENT (FCPD)
   /faculty-continuous-professional-development

   Programme card + "Register Now" popup holding the custom CIPU
   registration form (mirrors the live cipuglobal.org page's fields,
   rebuilt on this site's design tokens — the Google Form embed it
   replaced is gone). Self-contained `.fcpd-*` classes only, so no
   other page is affected.
   ══════════════════════════════════════════════════════════════ */
.fcpd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.5rem;
  max-width: 56rem;
  margin: 0 auto;
}
.fcpd-card {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.75rem;
  text-align: center;
  transition: box-shadow var(--transition), transform var(--transition);
}
.fcpd-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
/* Programme poster — bleeds to the card edges, directly under the gold
   top border. No aspect-ratio/crop: the poster carries the title, dates
   and venue as artwork, so it must render whole (same as the live page). */
.fcpd-card__banner {
  margin: -1.75rem -1.75rem 1.5rem;
  background: var(--navy-deep);
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}
.fcpd-card__banner img { display: block; width: 100%; height: auto; }

/* Register CTA — the card holds only the poster and this button, so give
   it a bit more weight and a soft pulse to draw the eye (the live page
   uses a pulsing button here too). */
.fcpd-register-btn {
  padding: .85rem 2rem;
  font-size: .9375rem;
  box-shadow: 0 0 0 0 rgba(212, 175, 55, .55);
  animation: fcpdPulse 2s infinite;
}
.fcpd-register-btn:hover { animation-play-state: paused; }
@keyframes fcpdPulse {
  0%   { box-shadow: 0 0 0 0    rgba(212, 175, 55, .55); }
  70%  { box-shadow: 0 0 0 14px rgba(212, 175, 55, 0); }
  100% { box-shadow: 0 0 0 0    rgba(212, 175, 55, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .fcpd-register-btn { animation: none; }
}
.fcpd-card__tag {
  display: inline-block;
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy); background: rgba(30,58,138,.07);
  padding: .3rem .75rem; border-radius: 999px;
  margin-bottom: .875rem;
}
.fcpd-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 700; line-height: 1.3;
  color: var(--navy);
  margin: 0 0 1.25rem;
}
.fcpd-card__meta {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: grid; gap: .625rem; justify-items: center;
}
.fcpd-card__meta li {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .9375rem; line-height: 1.55;
  color: var(--text-base); text-align: left;
}
.fcpd-card__meta svg { flex: 0 0 auto; margin-top: .2rem; color: var(--gold-dark); }
.fcpd-card__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ── Registration popup ── */
/* z-index must clear the fixed chrome: .topbar (10000), .main-nav (9999)
   and the mobile drawer (99999) — otherwise they paint over the popup. */
.fcpd-modal {
  position: fixed; inset: 0; z-index: 100000;
  display: none; align-items: center; justify-content: center;
  padding: 1rem;
}
.fcpd-modal.is-open { display: flex; }
.fcpd-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(10,20,50,.72);
  backdrop-filter: blur(2px);
}
.fcpd-modal__dialog {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: 100%; max-width: 44rem;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  background: #fff; border-radius: 1rem; overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,.4);
  animation: fcpdPop .35s ease;
}
@keyframes fcpdPop { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
.fcpd-modal__close {
  position: absolute; top: .75rem; right: .75rem; z-index: 2;
  width: 2.25rem; height: 2.25rem;
  border: none; border-radius: 50%;
  background: #fff; color: var(--navy-deep);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
}
.fcpd-modal__close:hover { background: var(--gray-100); }
.fcpd-modal__header {
  flex: 0 0 auto;
  padding: 1.5rem 3rem 1rem;
  border-bottom: 1px solid var(--border-light);
  text-align: center;
}
.fcpd-modal__kicker {
  font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-dark);
  margin: 0 0 .375rem;
}
.fcpd-modal__title {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 2.2vw, 1.375rem);
  font-weight: 700; line-height: 1.35;
  color: var(--navy);
  margin: 0;
}
.fcpd-modal__body {
  flex: 1 1 auto;
  /* min-height:0 lets this flex item shrink past its content so the
     dialog stays inside max-height and the form scrolls internally
     instead of overflowing the viewport on short screens. */
  min-height: 0;
  padding: 1.25rem 1.5rem 1.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.fcpd-modal__sub {
  font-size: .8125rem; color: var(--text-light);
  margin: .375rem 0 0;
}

/* ── Registration form inside the popup ──────────────────────────
   Field styling deliberately matches the 3rd BHES form (.bhes3-field)
   so both registration forms feel like one system. */
.fcpd-form-row {
  display: grid; grid-template-columns: 1fr;
  gap: 1rem; margin-bottom: 1rem;
}
@media (min-width: 600px) { .fcpd-form-row.is-2col { grid-template-columns: 1fr 1fr; } }

.fcpd-field label,
.fcpd-field__legend {
  display: block; font-size: .8125rem; font-weight: 600;
  color: var(--navy); margin-bottom: .375rem;
}
.fcpd-field .req { color: #dc2626; margin-left: .15rem; }
.fcpd-field input[type="text"],
.fcpd-field input[type="email"],
.fcpd-field input[type="tel"],
.fcpd-field select {
  width: 100%; padding: .65rem .85rem;
  border: 1.5px solid var(--border); border-radius: .5rem;
  font-family: var(--font-body); font-size: .9375rem;
  background: #fff; color: var(--gray-700);
  transition: border-color .15s, box-shadow .15s;
}
.fcpd-field input:focus,
.fcpd-field select:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, .12);
}
.fcpd-field.has-error input,
.fcpd-field.has-error select { border-color: #dc2626; background: #fef2f2; }
/* Native arrow + "Please Select" shown as placeholder-grey until chosen. */
.fcpd-field select { cursor: pointer; }
.fcpd-field select:invalid { color: var(--text-light); }

/* Error text only takes up space once it has a message. */
.fcpd-field__err {
  margin: 0; font-size: .78rem; color: #dc2626;
}
.fcpd-field__err:not(:empty) { margin-top: .3rem; }


/* Form-level flash (server / network errors) */
.fcpd-form-flash {
  padding: .75rem 1rem; border-radius: var(--radius);
  margin-bottom: 1rem; font-size: .875rem; line-height: 1.5;
}
.fcpd-form-flash--err { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }

.fcpd-form-actions {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: .875rem;
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--border-light);
}
.fcpd-form-actions__right { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.fcpd-form-note { font-size: .78rem; color: var(--text-light); margin: 0; }
.fcpd-form [data-fcpd-submit][disabled] { opacity: .6; cursor: progress; }

/* Success panel shown in place of the form after a successful submit */
.fcpd-form-done { text-align: center; padding: 1.5rem .5rem .75rem; }
.fcpd-form-done__icon {
  width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem;
  border-radius: 50%;
  background: #ECFDF5; color: #059669;
  display: flex; align-items: center; justify-content: center;
}
.fcpd-form-done__title {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  color: var(--navy); margin: 0 0 .5rem;
}
.fcpd-form-done__text {
  font-size: .9375rem; line-height: 1.6; color: var(--text-base);
  margin: 0 auto 1.25rem; max-width: 26rem;
}

/* Page-level success flash for the no-JS fallback */
.fcpd-page-flash {
  max-width: 56rem; margin: 0 auto 1.5rem;
  padding: 1rem 1.25rem; border-radius: var(--radius);
  font-size: .9375rem; line-height: 1.5;
}
.fcpd-page-flash--ok { background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; }

@media (max-width: 640px) {
  .fcpd-card { padding: 1.25rem; }
  .fcpd-card__banner { margin: -1.25rem -1.25rem 1.25rem; }
  .fcpd-card__meta li { font-size: .875rem; }
  .fcpd-modal { padding: .5rem; }
  .fcpd-modal__dialog {
    max-width: 100%;
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
  }
  .fcpd-modal__header { padding: 1.25rem 2.75rem .875rem; }
  .fcpd-modal__body { padding: 1rem .75rem 1.25rem; }
  .fcpd-form-actions { justify-content: stretch; }
  .fcpd-form-actions__right { width: 100%; }
  .fcpd-form-actions__right .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── Topbar FCPD badge ──────────────────────────────────────────
   Styling is shared with .topbar__blog-btn (see that rule earlier in
   this file) so both badges always look identical. Only the
   responsive fitting rules live here.

   The topbar is a fixed 40px row, so it cannot wrap. Below ~600px the
   extra badge would push the row past the viewport — drop the email
   text and keep the icon, so the mailto link still works. */
@media (max-width: 600px) {
  .topbar__email-text { display: none; }
}
@media (max-width: 400px) {
  .topbar__fcpd-btn, .topbar__blog-btn { padding: .15rem .5rem; font-size: .68rem; }
  .topbar__actions { gap: .375rem; }
}

/* ═══════════════════════════════════════════════════════════════
   Leadership profile hero — app/Views/leadership/profile.php
   (/leadership/<slug> and /about/founders-message).

   Every profile now drops the gold section eyebrow above the name, so the
   text column is much shorter than the portrait beside it. The hero grid
   is aligned to flex-end, which pushed that short block to the bottom of
   a tall band and left a large empty gap under the breadcrumb. Centring
   the text and trimming the portrait closes the band up.

   Scoped under .leader-hero, which only that view renders, so no other
   page is touched. The !important matches the .leader-photo-col rule it
   overrides (declared in the view); this selector is more specific, so
   it wins regardless of source order.
   ═══════════════════════════════════════════════════════════════ */
.leader-hero .leader-hero-text{align-self:center;}
@media(min-width:1024px){
  .leader-hero .leader-photo-col img{max-height:270px!important;}
}

/* ═══════════════════════════════════════════════════════════════
   Global Advisory Council — Chairperson card
   app/Views/about/global-advisory-council.php

   The chairperson is shown as one ordinary .gac-member-card (matching
   cipuglobal.org) rather than a wide featured panel. This wrapper keeps
   that single card at member-card width and centres it, instead of
   letting a lone grid item stretch the full container. Scoped to its own
   class, so the members grid below is untouched.
   ═══════════════════════════════════════════════════════════════ */
.gac-chair-solo{
  display:grid;
  grid-template-columns:minmax(0,260px);
  justify-content:center;
  margin-bottom:2.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   MEMBERSHIP APPLICATION (/membership/application)
   Moved here: 2026-08-21
   Affects: app/Views/membership/application.php  (that page only)
   ───────────────────────────────────────────────────────────────
   The form used to carry its own <style> block in the view, plus three
   style="…" attributes. All of it lives here now, per the project's
   no-inline-CSS convention. Every selector is namespaced `.ma-`, and
   that view is the only consumer, so nothing here can reach another
   page.

   Two rules that were previously written as specificity workarounds
   (`.ma-form-wrap .ma-grid`, `.ma-form-wrap .ma-field label`) are folded
   into the base rules below — with one stylesheet there is no longer a
   source-order race to win.
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout shell ──────────────────────────────────────────── */
/* margin-bottom, not a bigger gap: the grid's own gap separates cells
   INSIDE one row only, so consecutive rows used to sit flush. */
.ma-grid{display:grid;gap:1rem;grid-template-columns:1fr;margin-bottom:1.5rem;}
@media(min-width:640px){.ma-grid.is-2col{grid-template-columns:1fr 1fr;}}
.ma-form-wrap{
  max-width:880px;margin:0 auto;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:2.25rem 2rem;
  box-shadow:0 12px 40px rgba(13,31,79,.08), 0 2px 6px rgba(13,31,79,.04);
  position:relative;
}
/* Navy → gold hairline across the top edge of the card. */
.ma-form-wrap::before{
  content:'';position:absolute;top:0;left:2rem;right:2rem;height:3px;
  background:linear-gradient(90deg,#1E3A8A 0%,#D4AF37 100%);border-radius:0 0 3px 3px;
}

/* ── Section headings ──────────────────────────────────────── */
.ma-section-head{
  display:flex;align-items:center;gap:.75rem;margin:1.75rem 0 1rem;padding-bottom:.625rem;
  border-bottom:2px solid var(--gold);
}
.ma-section-head:first-of-type{margin-top:.5rem;}
.ma-section-head__num{
  width:1.875rem;height:1.875rem;border-radius:50%;background:var(--navy);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:700;flex-shrink:0;
}
.ma-section-head__title{
  font-family:var(--font-display);font-size:1.1875rem;font-weight:700;color:var(--navy);margin:0;
}

/* ── Fields ────────────────────────────────────────────────── */
.ma-field label{display:block;font-size:.9375rem;font-weight:600;color:var(--navy);margin-bottom:.625rem;}
.ma-field label .req{color:#dc2626;margin-left:.15rem;}
.ma-field label .optional{color:var(--text-light);font-weight:400;}
/* 1rem, not .9375rem: under 16px, iOS Safari zooms the page on focus. */
.ma-field input,
.ma-field select,
.ma-field textarea{
  width:100%;padding:.65rem .85rem;border:1.5px solid var(--border);border-radius:.5rem;
  font-family:var(--font-body);font-size:1rem;background:#fff;color:var(--text-mid);
  transition:border-color .15s,box-shadow .15s;
}
.ma-field input:focus,
.ma-field select:focus,
.ma-field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(30,58,138,.12);}
.ma-field.has-error input,
.ma-field.has-error select,
.ma-field.has-error textarea{border-color:#dc2626;background:#fef2f2;}
.ma-field__err{margin:.3rem 0 0;font-size:.8125rem;color:#dc2626;}

/* ── Captcha row ───────────────────────────────────────────────
   Mirrors the contact form's widget: the drawn code sits in a bordered
   chip with a refresh button, the answer box beside it, wrapping
   underneath on narrow screens. The input selector carries the extra
   `.ma-field` so it outranks `.ma-field input { width:100% }` above. */
.ma-captcha-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.ma-captcha{
  display:inline-flex;align-items:center;gap:.5rem;flex:0 0 auto;
  background:#f8f9fb;border:1.5px solid var(--border);
  border-radius:.5rem;padding:.375rem .5rem;
}
.ma-captcha canvas{display:block;}
.ma-captcha__refresh{
  border:none;background:none;cursor:pointer;
  color:var(--navy);font-size:1.25rem;line-height:1;padding:.25rem;
}
.ma-captcha__refresh:hover{color:var(--gold-dark);}
.ma-field .ma-captcha-row input{flex:1 1 200px;min-width:180px;width:auto;}

/* ── Footer actions ────────────────────────────────────────── */
.ma-form-actions{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:.875rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--border-light);
}
.ma-form-actions__btns{display:flex;gap:.5rem;flex-wrap:wrap;}

/* ── Flash messages ────────────────────────────────────────── */
.ma-flash-success,
.ma-flash-error{
  max-width:880px;margin:0 auto 1.75rem;padding:1.125rem 1.25rem;
  border-radius:.625rem;font-size:.9375rem;line-height:1.6;
}
.ma-flash-success{background:#ECFDF5;border:1px solid #A7F3D0;border-left:4px solid #059669;color:#065F46;}
.ma-flash-error  {background:#FEF2F2;border:1px solid #FECACA;border-left:4px solid #DC2626;color:#991B1B;}
.ma-flash-error__detail{margin:.5rem 0 0;}

/* Honeypot — stays invisible to humans, but deliberately NOT
   display:none (some bots skip display:none fields). */
.ma-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ═══════════════════════════════════════════════════════════════
   NATIONAL COMMITTEES — "Quick-Nav Panels" design (scoped: .ncc-)
   app/Views/about/national-committees.php  (/national-committees)

   Ported 1-to-1 from the approved static reference
   (national-committees-option-c-quick-nav-panels.html): sticky jump
   navigation + one light panel per committee with a navy-to-gold spine,
   tinted convenor strip, and a photo-card grid of
   distinguished members.

   Two deliberate deviations from the reference, both forced by this
   site's chrome rather than by taste:
     · the reference's `html{scroll-behavior:smooth}` block is dropped —
       cipu-v2.css already sets it globally at the top of this file;
     · the sticky nav's `top:` and the panels' `scroll-margin-top:` are
       offset by the fixed topbar (--topbar-h) + the 72px white nav,
       where the reference (no fixed header) used a flat 12px / 130px.

   The older `.nc-` block further up this file is the previous design and
   is left untouched, so the page can be rolled back by swapping the view
   alone (see backups/20260820-national-committees-r29/).
   ═══════════════════════════════════════════════════════════════ */
.ncc-wrap{
  --ncc-navy:#1E3A8A; --ncc-navy-deep:#16295F; --ncc-ink:#1F2937;
  --ncc-muted:#5B6472; --ncc-line:#E3E8F2; --ncc-tint:#F5F8FD;
  --ncc-gold:#C79A2A; --ncc-gold-soft:#FBF4E1;
  --ncc-gold-line:#E8D8A8; --ncc-gold-ink:#7A5E12; --ncc-li-blue:#0A66C2;
  /* Height of this site's fixed chrome: navy topbar + white nav bar. */
  --ncc-chrome:calc(72px + var(--topbar-h, 40px));
  margin:0; padding:0;
}
.ncc-wrap *{box-sizing:border-box;}

/* ---- sticky jump navigation ----
   top: clears the site's fixed topbar + main nav, then the 12px gap the
   reference used. */
.ncc-nav{
  position:sticky;top:calc(var(--ncc-chrome) + 12px);z-index:40;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  background:rgba(255,255,255,.96);
  border:1px solid var(--ncc-line);border-radius:16px;
  padding:10px 14px;margin:0 0 38px;
  box-shadow:0 8px 22px rgba(22,41,95,.08);
}
.ncc-nav-label{
  font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ncc-muted);margin-right:4px;
}
.ncc-pill{
  display:inline-flex;align-items:center;gap:7px;max-width:max-content;text-decoration:none;
  font-size:.82rem;font-weight:600;color:var(--ncc-navy);
  background:#F3F6FC;border:1px solid var(--ncc-line);
  border-radius:999px;padding:6px 13px;
  transition:background .18s ease,color .18s ease;
}
.ncc-pill:hover{background:var(--ncc-navy);color:#FFFFFF;border-color:var(--ncc-navy);}
.ncc-pill:focus-visible{outline:3px solid #93B4F5;outline-offset:2px;}

/* ---- one committee = one panel with navy-to-gold spine ---- */
.ncc-committee{
  position:relative;background:#FFFFFF;
  border:1px solid var(--ncc-line);border-radius:12px;
  box-shadow:0 6px 20px rgba(22,41,95,.06);
  overflow:hidden;margin:0 0 44px;
  /* chrome + 12px gap + the sticky nav's own height, so an anchored panel
     lands below the pill bar instead of behind it. */
  scroll-margin-top:calc(var(--ncc-chrome) + 84px);
}
.ncc-committee::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--ncc-navy) 0%,var(--ncc-navy) 55%,var(--ncc-gold) 100%);
}
.ncc-committee:last-child{margin-bottom:0;}

/* ---- panel header: navy title ----
   The reference had a big watermark number (01-06) here and the pills carried
   a matching <b>01</b>. Both were dropped — live cipuglobal.org has no such
   numbering. The title's right padding went with the watermark, so long
   titles now use the full panel width. */
.ncc-head{position:relative;padding:24px 28px 20px;border-bottom:1px solid var(--ncc-line);}
.ncc-head h2{
  position:relative;z-index:1;margin:0;
  font-size:1.32rem;line-height:1.35;font-weight:700;
  color:var(--ncc-navy);letter-spacing:.01em;
}

/* ---- convenor strip ---- */
.ncc-convenor{
  display:flex;align-items:flex-start;gap:24px;
  padding:24px 28px;background:var(--ncc-tint);
  border-bottom:1px solid var(--ncc-line);
}
.ncc-convenor:last-child{border-bottom:0;}
.ncc-convenor-photo{
  flex:0 0 auto;width:120px;height:132px;
  object-fit:cover;object-position:top;border-radius:12px;
  border:3px solid #FFFFFF;box-shadow:0 4px 14px rgba(22,41,95,.14);
  background:#DDE4F2;
}
.ncc-convenor-info{min-width:0;}
.ncc-role-badge{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ncc-gold-ink);background:var(--ncc-gold-soft);
  border:1px solid var(--ncc-gold-line);border-radius:999px;padding:4px 12px;margin:0 0 10px;
}
.ncc-convenor .ncc-person-name{margin:0 0 6px;font-size:1.2rem;font-weight:700;color:var(--ncc-navy);line-height:1.3;}
.ncc-convenor .ncc-person-title{margin:0 0 12px;font-size:.95rem;color:var(--ncc-muted);line-height:1.55;max-width:62ch;}

/* ---- distinguished members ---- */
.ncc-members{padding:24px 28px 30px;}
.ncc-members-label{
  display:flex;align-items:center;gap:14px;margin:0 0 18px;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ncc-navy);
}
.ncc-members-label::after{content:"";flex:1 1 auto;height:1px;background:var(--ncc-line);}
.ncc-members-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;}
.ncc-member{
  display:flex;flex-direction:column;background:#FFFFFF;
  border:1px solid var(--ncc-line);border-radius:12px;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease;
}
.ncc-member:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(22,41,95,.12);}
.ncc-member-photo{
  width:100%;height:210px;object-fit:cover;object-position:top;
  background:#DDE4F2;border-bottom:1px solid var(--ncc-line);
}
.ncc-member-info{display:flex;flex-direction:column;flex:1 1 auto;padding:14px 16px 16px;}
.ncc-member .ncc-person-name{margin:0 0 5px;font-size:1rem;font-weight:700;color:var(--ncc-navy);line-height:1.35;}
.ncc-member .ncc-person-title{margin:0 0 12px;font-size:.85rem;color:var(--ncc-muted);line-height:1.5;flex:1 1 auto;}

/* ---- LinkedIn link (shared) ---- */
.ncc-linkedin{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;max-width:max-content;
  font-size:.82rem;font-weight:600;color:var(--ncc-li-blue);text-decoration:none;
  background:#F3F8FD;border:1px solid #CBDDF0;border-radius:999px;padding:5px 13px;
  transition:background .18s ease,color .18s ease;
}
.ncc-linkedin svg{width:13px;height:13px;fill:currentColor;flex:0 0 auto;}
.ncc-linkedin:hover{background:var(--ncc-li-blue);color:#FFFFFF;border-color:var(--ncc-li-blue);}
.ncc-linkedin:focus-visible{outline:3px solid #93B4F5;outline-offset:2px;}

/* ---- responsive ----
   Tablet / small-laptop: the pill bar wraps onto two or three rows, so the
   anchor offset has to grow with it. */
@media (max-width:1023px){
  .ncc-committee{scroll-margin-top:calc(var(--ncc-chrome) + 122px);}
}
@media (max-width:640px){
  /* The nav stops sticking (the reference's behaviour), so an anchored
     panel only has to clear the site's fixed chrome. */
  .ncc-nav{position:static;border-radius:12px;margin-bottom:28px;}
  .ncc-committee{margin-bottom:32px;scroll-margin-top:calc(var(--ncc-chrome) + 16px);}
  .ncc-head{padding:18px 18px 16px;}
  .ncc-head h2{font-size:1.08rem;}
  .ncc-convenor{flex-direction:column;padding:20px 18px;gap:16px;}
  .ncc-convenor-photo{width:104px;height:116px;}
  .ncc-members{padding:20px 18px 24px;}
  .ncc-members-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
  .ncc-member-photo{height:170px;}
}
@media (prefers-reduced-motion:reduce){
  .ncc-member,.ncc-linkedin,.ncc-pill{transition:none;}
  .ncc-member:hover{transform:none;}
}

/* ═══════════════════════════════════════════════════════════════
   INDUSTRY–ACADEMIA COLLABORATION (/industry-academia-collaboration)
   Added: 2026-08-21
   Affects: app/Views/pages/industry-academia.php  (that page only)
   ───────────────────────────────────────────────────────────────
   The three cards lost their tag pill and title, so the blurb is
   the only thing between the poster and the button — and the three
   blurbs run 3, 4 and 3 lines. Left alone that pushes each Read
   More to a different height.

   The grid already stretches the cards to a common height; these
   rules pass that height down through .card__body so the blurb
   absorbs the slack and the button sits on the card foot in all
   three. Scoped under .iac-grid so the global .card component is
   untouched everywhere else.
   ═══════════════════════════════════════════════════════════════ */
.iac-grid .card       { display: flex; flex-direction: column; }
.iac-grid .card__body { display: flex; flex-direction: column; flex: 1; }
/* The blurb takes the slack; its own margin keeps the gap to the button,
   which margin-top:auto would otherwise collapse to zero. */
.iac-grid .card__meta--lead { flex: 1 1 auto; margin-bottom: 1rem; }
.iac-grid .card__cta        { margin-top: auto; align-self: flex-start; }

/* ═══════════════════════════════════════════════════════════════
   SIGNATORIES TO PUNE DECLARATION (/signatories-to-pune-declaration)
   Added: 2026-08-25
   Affects: app/Views/pages/signatories.php  (that page only)
   ───────────────────────────────────────────────────────────────
   The declaration text now sits above the signatory logos, copied
   verbatim from the CIPU brochure (page 12) — the same wording the
   standalone /pune-declaration-on-higher-education page carries, so
   the two can't drift apart. Card language is that page's: white
   card, pearl point boxes, navy left rule.
   ═══════════════════════════════════════════════════════════════ */
.pdecl{
  max-width:72rem;margin:0 auto 3rem;
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  padding:2.75rem;
}
.pdecl__title{
  font-family:var(--font-display);
  font-size:clamp(1.375rem,2.6vw,1.75rem);
  font-weight:700;color:var(--navy);margin:0 0 .5rem;line-height:1.3;
}
.pdecl__meta{
  font-size:.9375rem;font-style:italic;color:var(--text-light);margin:0 0 1.75rem;
}
.pdecl__body{font-size:.9375rem;line-height:1.85;color:var(--gray-700);}
/* Tailwind's preflight (p{margin:0}) loads after this file and beats the
   global p rule, so the paragraphs need their own gap. Direct children
   only — the text inside .pdecl__point stays flush. */
.pdecl__body > p{margin:0 0 1rem;}
.pdecl__point{
  padding:1.25rem 1.5rem;margin-bottom:1rem;
  background:var(--pearl);border-radius:var(--radius);
  border-left:3px solid var(--navy);
}
.pdecl__point-head{font-weight:700;color:var(--navy);margin:0 0 .5rem;}
.pdecl__point p{margin:0;color:var(--gray-700);}
.pdecl__close{margin-top:1.5rem;font-style:italic;}
@media(max-width:640px){
  .pdecl{padding:1.5rem;}
  .pdecl__point{padding:1rem 1.125rem;}
}