/*
Theme Name: Aspire2
Theme URI: https://aspire2edu.com.au
Description: Custom Kadence child theme for Aspire2 — leadership in education. Editorial-advisory aesthetic for boards, school systems, and dioceses.
Author: Aspire2
Author URI: https://aspire2edu.com.au
Template: kadence
Version: 1.17.15
Text Domain: aspire2
*/

/* ==========================================================================
   ASPIRE2 DESIGN SYSTEM
   ========================================================================== */

/* CSS Custom Properties - Design tokens
   ------------------------------------------------------------------------- */

:root {
  /* Primary palette — deep navy as confident, editorial primary */
  --a2-primary: #0F3A5F;
  --a2-primary-soft: #1A4A70;
  --a2-primary-deep: #0A2945;

  /* Surfaces — warm cream, the editorial heart of the design */
  --a2-bg: #F7F5F0;
  --a2-bg-card: #FFFFFF;
  --a2-bg-deep: #E3DFD2;
  --a2-bg-secondary: #EDEAE0;

  /* Text — warm rich black */
  --a2-text: #1A1A1A;
  --a2-text-muted: #5C5B57;
  --a2-text-tertiary: #8C8B85;

  /* Borders */
  --a2-border: rgba(26, 26, 26, 0.10);
  --a2-border-strong: rgba(26, 26, 26, 0.22);

  /* Editorial accent — banner burgundy */
  --a2-accent: #B22928;
  --a2-accent-soft: #EBD4D0;
  --a2-accent-deep: #8F1E1D;

  /* Reserved brand colours — logo only */
  --a2-brand-blue: #1866A4;
  --a2-brand-red: #E5312C;

  /* Typography */
  --a2-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --a2-font-sans: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Type scale */
  --a2-text-xs: 12px;
  --a2-text-sm: 14px;
  --a2-text-base: 16px;
  --a2-text-md: 17px;
  --a2-text-lg: 19px;
  --a2-text-xl: 22px;

  --a2-h1: clamp(40px, 5.5vw, 64px);
  --a2-h2: clamp(28px, 3.5vw, 40px);
  --a2-h3: clamp(22px, 2.5vw, 28px);
  --a2-h4: 20px;

  /* Spacing scale */
  --a2-space-1: 4px;
  --a2-space-2: 8px;
  --a2-space-3: 12px;
  --a2-space-4: 16px;
  --a2-space-5: 24px;
  --a2-space-6: 32px;
  --a2-space-7: 48px;
  --a2-space-8: 64px;
  --a2-space-9: 96px;
  --a2-space-10: 128px;

  /* Layout */
  --a2-container: 1080px;
  --a2-container-wide: 1280px;
  --a2-container-narrow: 720px;
  --a2-pad-x: 32px;

  /* Radius */
  --a2-radius-sm: 6px;
  --a2-radius-md: 10px;
  --a2-radius-lg: 14px;
}

/* Google Fonts loaded via functions.php */

/* ==========================================================================
   GLOBAL RESETS & BASE
   ========================================================================== */

body,
.site,
.content-area,
.entry-content {
  background: var(--a2-bg) !important;
  color: var(--a2-text);
  font-family: var(--a2-font-sans);
  font-size: var(--a2-text-base);
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
}

/* Heading defaults */
h1, h2, h3, h4, h5, h6,
.entry-title,
.wp-block-heading {
  font-family: var(--a2-font-serif) !important;
  font-weight: 500;
  color: var(--a2-text);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

h1, .wp-block-heading.has-h-1-font-size,
h1.wp-block-heading {
  font-size: var(--a2-h1);
  line-height: 1.05;
}

h2, .wp-block-heading.has-h-2-font-size,
h2.wp-block-heading {
  font-size: var(--a2-h2);
  line-height: 1.1;
}

h3, .wp-block-heading.has-h-3-font-size,
h3.wp-block-heading {
  font-size: var(--a2-h3);
  line-height: 1.2;
}

h4, .wp-block-heading.has-h-4-font-size,
h4.wp-block-heading {
  font-size: var(--a2-h4);
  line-height: 1.3;
}

/* Body paragraph defaults */
p, .wp-block-paragraph {
  font-size: var(--a2-text-base);
  line-height: 1.65;
  color: var(--a2-text);
}

/* Links */
a {
  color: var(--a2-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--a2-primary-soft);
  text-decoration: underline;
}

/* ==========================================================================
   ASPIRE2 COMPONENT CLASSES
   ========================================================================== */

/* Kicker label — small uppercase orientation text */
.a2-kicker {
  font-family: var(--a2-font-sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--a2-text-muted);
  margin-bottom: var(--a2-space-4) !important;
  display: block;
}

.a2-kicker-light {
  color: rgba(255, 255, 255, 0.7);
}

/* Lead text — first paragraph after a hero */
.a2-lead {
  font-size: var(--a2-text-lg);
  line-height: 1.55;
  color: var(--a2-text);
  margin-bottom: var(--a2-space-7) !important;
  max-width: 640px;
}

/* Body text muted */
.a2-text-muted {
  color: var(--a2-text-muted);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.a2-hero {
  background: var(--a2-bg);
  padding: var(--a2-space-10) var(--a2-pad-x) var(--a2-space-9);
}

.a2-hero__container {
  max-width: var(--a2-container);
  margin: 0 auto;
}

.a2-hero__headline {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-h1);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-7);
  max-width: 920px;
}

/* ==========================================================================
   REFRAME SECTION
   ========================================================================== */

.a2-reframe {
  background: var(--a2-bg);
  padding: var(--a2-space-7) var(--a2-pad-x) var(--a2-space-9);
}

.a2-reframe__container {
  max-width: var(--a2-container-narrow);
  margin: 0 auto;
}

.a2-reframe__headline {
  font-family: var(--a2-font-sans);
  font-size: var(--a2-text-lg);
  font-weight: 500;
  line-height: 1.5;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-5);
}

.a2-reframe__body {
  font-size: var(--a2-text-md);
  line-height: 1.7;
  color: var(--a2-text-muted);
  margin: 0;
}

/* ==========================================================================
   OUR MODEL — THE USP BLOCK
   ========================================================================== */

.a2-model {
  padding: var(--a2-space-7) var(--a2-pad-x);
}

.a2-model__container {
  max-width: var(--a2-container);
  margin: 0 auto;
  background: var(--a2-primary);
  color: var(--a2-bg-card);
  padding: var(--a2-space-8) var(--a2-space-7);
  border-radius: var(--a2-radius-lg);
}

.a2-model__claim {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-h2);
  font-weight: 500;
  line-height: 1.2;
  color: var(--a2-bg-card);
  margin: 0 0 var(--a2-space-5);
  max-width: 820px;
}

.a2-model__qualifier {
  font-size: var(--a2-text-md);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 var(--a2-space-8);
  max-width: 680px;
}

.a2-model__triad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--a2-space-5);
  margin-top: var(--a2-space-7);
}

.a2-model__pillar {
  padding-top: var(--a2-space-5);
  border-top: 2px solid var(--a2-accent);
}

.a2-model__pillar-kicker {
  font-family: var(--a2-font-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 var(--a2-space-2);
}

.a2-model__pillar-name {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-text-xl);
  font-weight: 500;
  color: var(--a2-bg-card);
  margin: 0 0 var(--a2-space-2);
}

.a2-model__pillar-desc {
  font-size: var(--a2-text-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

@media (max-width: 768px) {
  .a2-model__triad {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   SERVICES — THREE PRACTICES
   ========================================================================== */

.a2-services {
  padding: var(--a2-space-9) var(--a2-pad-x);
}

.a2-services__container {
  max-width: var(--a2-container);
  margin: 0 auto;
}

.a2-services__header {
  margin-bottom: var(--a2-space-7);
}

.a2-services__title {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-h2);
  margin: 0;
  color: var(--a2-text);
}

.a2-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--a2-space-5);
}

.a2-service-card {
  background: var(--a2-bg-card);
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-radius-md);
  padding: var(--a2-space-6);
  transition: border-color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.a2-service-card:hover {
  border-color: var(--a2-border-strong);
  transform: translateY(-2px);
}

.a2-service-card__kicker {
  font-family: var(--a2-font-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--a2-accent);
  margin: 0 0 var(--a2-space-3);
}

.a2-service-card__title {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-text-xl);
  font-weight: 500;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-3);
  line-height: 1.25;
}

.a2-service-card__desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--a2-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .a2-services__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   METHOD — SIX STAGES
   ========================================================================== */

.a2-method {
  padding: var(--a2-space-9) var(--a2-pad-x);
}

.a2-method__container {
  max-width: var(--a2-container);
  margin: 0 auto;
}

.a2-method__header {
  margin-bottom: var(--a2-space-7);
}

.a2-method__title {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-h2);
  margin: 0;
  color: var(--a2-text);
}

.a2-method__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--a2-space-7) var(--a2-space-6);
}

.a2-method__step {
  /* Each step in the method */
}

.a2-method__num {
  font-family: var(--a2-font-serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--a2-accent);
  margin: 0 0 var(--a2-space-3);
  line-height: 1;
}

.a2-method__name {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-text-xl);
  font-weight: 500;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-3);
}

.a2-method__desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--a2-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .a2-method__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   ENGAGEMENT PATHWAYS
   ========================================================================== */

.a2-pathways {
  padding: var(--a2-space-9) var(--a2-pad-x);
}

.a2-pathways__container {
  max-width: var(--a2-container);
  margin: 0 auto;
}

.a2-pathways__header {
  margin-bottom: var(--a2-space-7);
}

.a2-pathways__title {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-h2);
  margin: 0;
  color: var(--a2-text);
}

.a2-pathways__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--a2-space-5);
}

.a2-pathway {
  background: var(--a2-bg-secondary);
  border-radius: var(--a2-radius-lg);
  padding: var(--a2-space-7) var(--a2-space-6);
  border-top: 3px solid var(--a2-primary);
}

.a2-pathway__name {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-text-lg);
  font-weight: 500;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-3);
}

.a2-pathway__desc {
  font-size: var(--a2-text-sm);
  line-height: 1.6;
  color: var(--a2-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .a2-pathways__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   FEATURED INSIGHTS
   ========================================================================== */

.a2-insights {
  padding: var(--a2-space-9) var(--a2-pad-x);
}

.a2-insights__container {
  max-width: var(--a2-container);
  margin: 0 auto;
}

.a2-insights__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--a2-space-7);
  gap: var(--a2-space-5);
}

.a2-insights__title {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-h2);
  margin: 0;
  color: var(--a2-text);
}

.a2-insights__viewall {
  font-family: var(--a2-font-sans);
  font-size: var(--a2-text-sm);
  color: var(--a2-primary);
  text-decoration: none;
  white-space: nowrap;
}

.a2-insights__viewall:hover {
  text-decoration: underline;
}

.a2-insights__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--a2-space-5);
}

.a2-content-card {
  background: var(--a2-bg-card);
  border-radius: var(--a2-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--a2-border);
  transition: border-color 0.2s ease;
}

.a2-content-card:hover {
  border-color: var(--a2-border-strong);
}

.a2-content-card__image {
  aspect-ratio: 4/3;
  background: var(--a2-bg-secondary);
  position: relative;
}

.a2-content-card__type-badge {
  position: absolute;
  bottom: var(--a2-space-3);
  left: var(--a2-space-3);
  background: var(--a2-bg-card);
  color: var(--a2-text);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 4px;
}

.a2-content-card__body {
  padding: var(--a2-space-5);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.a2-content-card__taxonomy {
  font-family: var(--a2-font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--a2-text-muted);
  margin: 0 0 var(--a2-space-3);
}

.a2-content-card__title {
  font-family: var(--a2-font-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-3);
  flex-grow: 1;
}

.a2-content-card__meta {
  font-size: 12px;
  color: var(--a2-text-tertiary);
  margin: 0;
}

@media (max-width: 768px) {
  .a2-insights__grid {
    grid-template-columns: 1fr;
  }
  .a2-insights__header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   TESTIMONIAL & SECTORS
   ========================================================================== */

.a2-testimonial-block {
  padding: var(--a2-space-9) var(--a2-pad-x);
}

.a2-testimonial-block__container {
  max-width: var(--a2-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--a2-space-8);
}

.a2-testimonial__quote {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-text-xl);
  line-height: 1.4;
  font-weight: 400;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-4);
  padding-left: var(--a2-space-5);
  border-left: 3px solid var(--a2-accent);
}

.a2-testimonial__attribution {
  font-size: var(--a2-text-sm);
  color: var(--a2-text-muted);
  margin: 0;
}

.a2-sectors__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--a2-space-3);
}

.a2-sectors__item {
  font-size: var(--a2-text-md);
  color: var(--a2-text);
}

@media (max-width: 768px) {
  .a2-testimonial-block__container {
    grid-template-columns: 1fr;
    gap: var(--a2-space-6);
  }
}

/* ==========================================================================
   CLOSING CTA
   ========================================================================== */

.a2-closing {
  padding: var(--a2-space-9) var(--a2-pad-x) var(--a2-space-10);
  text-align: center;
}

.a2-closing__container {
  max-width: 640px;
  margin: 0 auto;
}

.a2-closing__title {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-h2);
  margin: 0 0 var(--a2-space-4);
  color: var(--a2-text);
}

.a2-closing__lead {
  font-size: var(--a2-text-md);
  line-height: 1.6;
  color: var(--a2-text-muted);
  margin: 0 0 var(--a2-space-6);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.a2-btn {
  display: inline-block;
  font-family: var(--a2-font-sans);
  font-size: 15px;
  font-weight: 500;
  padding: 14px 28px;
  border-radius: var(--a2-radius-sm);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.1s ease;
  border: none;
  cursor: pointer;
}

.a2-btn-primary {
  background: var(--a2-primary);
  color: var(--a2-bg-card);
}

.a2-btn-primary:hover {
  background: var(--a2-primary-soft);
  color: var(--a2-bg-card);
  text-decoration: none;
}

.a2-btn-secondary {
  background: transparent;
  color: var(--a2-primary);
  border: 1px solid var(--a2-primary);
}

.a2-btn-secondary:hover {
  background: var(--a2-primary);
  color: var(--a2-bg-card);
  text-decoration: none;
}

/* WordPress button overrides */
.wp-block-button .wp-block-button__link {
  background: var(--a2-primary) !important;
  color: var(--a2-bg-card) !important;
  border-radius: var(--a2-radius-sm) !important;
  padding: 14px 28px !important;
  font-family: var(--a2-font-sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  border: none !important;
  transition: background 0.2s ease !important;
}

.wp-block-button .wp-block-button__link:hover {
  background: var(--a2-primary-soft) !important;
  color: var(--a2-bg-card) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--a2-primary) !important;
  border: 1px solid var(--a2-primary) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--a2-primary) !important;
  color: var(--a2-bg-card) !important;
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */

.site-header,
.header-row .site-branding {
  background: var(--a2-bg) !important;
}

.site-branding .site-title,
.site-branding .site-title a {
  font-family: var(--a2-font-serif) !important;
  font-weight: 500 !important;
  color: var(--a2-brand-blue) !important;
  letter-spacing: -0.01em !important;
}

.site-branding .site-title::after {
  content: '•';
  color: var(--a2-brand-red);
  margin-left: 4px;
  font-size: 0.8em;
  vertical-align: super;
}

.main-navigation .menu-item a,
.menu-item-link {
  font-family: var(--a2-font-sans) !important;
  font-size: var(--a2-text-sm) !important;
  font-weight: 500 !important;
  color: var(--a2-text) !important;
  letter-spacing: 0.01em;
}

.main-navigation .current-menu-item > a,
.menu-item.current-menu-item > a {
  color: var(--a2-primary) !important;
  border-bottom: 2px solid var(--a2-primary);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer,
.footer-wrap,
.site-footer-wrap {
  background: var(--a2-primary-deep) !important;
  color: var(--a2-bg-card) !important;
}

.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.site-footer h5, .site-footer h6 {
  color: var(--a2-bg-card) !important;
}

.site-footer p,
.site-footer .widget,
.site-footer .menu-item a {
  color: rgba(255, 255, 255, 0.8) !important;
}

.site-footer a {
  color: var(--a2-bg-card) !important;
}

/* ==========================================================================
   CONTAINER WIDTHS — overriding Kadence defaults
   ========================================================================== */

.entry-content > .alignwide {
  max-width: var(--a2-container-wide);
}

.entry-content > .alignfull {
  max-width: 100%;
}

.entry-content > * {
  max-width: var(--a2-container);
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.a2-narrow {
  max-width: var(--a2-container-narrow) !important;
}

.a2-wide {
  max-width: var(--a2-container-wide) !important;
}

.a2-text-center {
  text-align: center;
}

.a2-mb-3 { margin-bottom: var(--a2-space-3) !important; }
.a2-mb-4 { margin-bottom: var(--a2-space-4) !important; }
.a2-mb-5 { margin-bottom: var(--a2-space-5) !important; }
.a2-mb-6 { margin-bottom: var(--a2-space-6) !important; }
.a2-mb-7 { margin-bottom: var(--a2-space-7) !important; }


/* ==========================================================================
   PACKAGE 2a — SERVICE PAGE COMPONENTS
   Added v1.1
   ========================================================================== */

/* Page hero — for inner pages (smaller than homepage hero) */

/* ==========================================================================
   PAGE HERO (v1.11.7). Navy treatment for all secondary pages.
   Visually consistent with the homepage navy hero, but proportional to
   secondary pages' lighter content density (min-height: 55vh rather than
   100vh). Used by: about, for-leaders, international, boards-overview,
   service-search, service-advisory, service-development,
   service-assessment, start-a-conversation.
   ========================================================================== */

.a2-page-hero {
  background: var(--a2-primary);
  color: var(--a2-bg-card);
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: calc(var(--a2-space-9) + 80px) 0 var(--a2-space-8);
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
}

.a2-page-hero__container {
  max-width: var(--a2-container);
  margin: 0 auto;
  width: 100%;
  padding-left: var(--a2-pad-x);
  padding-right: var(--a2-pad-x);
  box-sizing: border-box;
}

.a2-page-hero__breadcrumb {
  font-family: var(--a2-font-sans);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 var(--a2-space-6);
  letter-spacing: 0.01em;
}

.a2-page-hero__breadcrumb a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 160ms ease-out;
}

.a2-page-hero__breadcrumb a:hover {
  color: var(--a2-bg-card);
}

.a2-page-hero__separator {
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.3);
}

.a2-page-hero__title {
  font-family: var(--a2-font-serif);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--a2-bg-card);
  margin: 0 0 var(--a2-space-5);
  max-width: 880px;
}

.a2-page-hero__lead {
  font-family: var(--a2-font-serif);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  max-width: 720px;
}

/* Override the kicker colour when inside a navy page hero, without
   changing the kicker's default usage elsewhere on cream surfaces. */
.a2-page-hero .a2-kicker {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Tablet and mobile */
@media (max-width: 900px) {
  .a2-page-hero {
    padding: calc(var(--a2-space-8) + 70px) 0 var(--a2-space-7);
    min-height: auto;
  }
}

/* Service tabs / sub-navigation */

.a2-service-nav {
  background: var(--a2-bg);
  padding: 0 var(--a2-pad-x) var(--a2-space-6);
}

.a2-service-nav__container {
  max-width: var(--a2-container);
  margin: 0 auto;
  border-bottom: 1px solid var(--a2-border);
  display: flex;
  gap: var(--a2-space-5);
  flex-wrap: wrap;
}

.a2-service-nav__item {
  font-family: var(--a2-font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--a2-text-muted);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.a2-service-nav__item:hover {
  color: var(--a2-text);
  text-decoration: none;
}

.a2-service-nav__item--active {
  color: var(--a2-primary);
  border-bottom-color: var(--a2-primary);
}

/* Service intro section */

.a2-svc-intro {
  padding: var(--a2-space-7) var(--a2-pad-x);
}

.a2-svc-intro__container {
  max-width: var(--a2-container);
  margin: 0 auto;
}

.a2-svc-intro__body {
  font-size: var(--a2-text-md);
  line-height: 1.7;
  color: var(--a2-text-muted);
  max-width: 720px;
  margin: 0 0 var(--a2-space-6);
}

/* What we do — feature grid */

.a2-whatwedo {
  padding: var(--a2-space-7) var(--a2-pad-x) var(--a2-space-9);
}

.a2-whatwedo__container {
  max-width: var(--a2-container);
  margin: 0 auto;
}

.a2-whatwedo__title {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-h3);
  margin: 0 0 var(--a2-space-6);
  color: var(--a2-text);
}

.a2-whatwedo__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--a2-space-6) var(--a2-space-7);
}

.a2-whatwedo__item {
  /* Each capability item */
}

.a2-whatwedo__num {
  font-family: var(--a2-font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--a2-accent);
  margin: 0 0 var(--a2-space-2);
}

.a2-whatwedo__name {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-text-xl);
  font-weight: 500;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-3);
  line-height: 1.25;
}

.a2-whatwedo__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--a2-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .a2-whatwedo__grid {
    grid-template-columns: 1fr;
  }
}

/* When to engage us — situation-based block */

.a2-whenengage {
  background: var(--a2-bg-secondary);
  padding: var(--a2-space-9) var(--a2-pad-x);
}

.a2-whenengage__container {
  max-width: var(--a2-container);
  margin: 0 auto;
}

.a2-whenengage__title {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-h3);
  margin: 0 0 var(--a2-space-3);
  color: var(--a2-text);
}

/* v1.11.26: intro paragraph between headline and grid, outro line below */
.a2-whenengage__intro {
  font-family: var(--a2-font-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--a2-text-muted);
  margin: 0 0 var(--a2-space-6);
  max-width: 720px;
}

.a2-whenengage__outro {
  font-family: var(--a2-font-sans);
  font-size: 15px;
  line-height: 1.55;
  font-style: italic;
  color: var(--a2-text-muted);
  margin: var(--a2-space-6) 0 0;
  max-width: 720px;
}

.a2-whenengage__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--a2-space-5);
}

.a2-whenengage__item {
  background: var(--a2-bg);
  border-radius: var(--a2-radius-md);
  padding: var(--a2-space-5) var(--a2-space-5);
  border-left: 3px solid var(--a2-accent);
}

.a2-whenengage__item-name {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-text-lg);
  font-weight: 500;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-2);
}

.a2-whenengage__item-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--a2-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .a2-whenengage__grid {
    grid-template-columns: 1fr;
  }
}

/* Service page CTA */

.a2-svc-cta {
  padding: var(--a2-space-9) var(--a2-pad-x);
}

.a2-svc-cta__container {
  max-width: var(--a2-container);
  margin: 0 auto;
  background: var(--a2-primary);
  color: var(--a2-bg-card);
  padding: var(--a2-space-7) var(--a2-space-7);
  border-radius: var(--a2-radius-lg);
  display: grid;
  grid-template-columns: 1.5fr auto;
  gap: var(--a2-space-6);
  align-items: center;
}

.a2-svc-cta__copy {
  /* Left side text */
}

.a2-svc-cta__title {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-h3);
  font-weight: 500;
  color: var(--a2-bg-card);
  margin: 0 0 var(--a2-space-3);
  line-height: 1.2;
}

.a2-svc-cta__lead {
  font-size: var(--a2-text-md);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.a2-svc-cta__btn {
  display: inline-block;
  background: var(--a2-bg-card);
  color: var(--a2-primary);
  font-family: var(--a2-font-sans);
  font-size: 15px;
  font-weight: 500;
  padding: 14px 28px;
  border-radius: var(--a2-radius-sm);
  text-decoration: none;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.a2-svc-cta__btn:hover {
  background: var(--a2-bg-secondary);
  color: var(--a2-primary);
  text-decoration: none;
}

@media (max-width: 768px) {
  .a2-svc-cta__container {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

/* Boards overview — three service line cards (larger format than homepage) */

.a2-boards-services {
  padding: var(--a2-space-7) var(--a2-pad-x) var(--a2-space-9);
}

.a2-boards-services__container {
  max-width: var(--a2-container);
  margin: 0 auto;
}

.a2-boards-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--a2-space-5);
}

.a2-boards-card {
  background: var(--a2-bg-card);
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-radius-md);
  padding: var(--a2-space-7) var(--a2-space-6);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.a2-boards-card:hover {
  border-color: var(--a2-border-strong);
  transform: translateY(-2px);
  text-decoration: none;
}

.a2-boards-card__num {
  font-family: var(--a2-font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--a2-accent);
  margin: 0 0 var(--a2-space-3);
}

.a2-boards-card__title {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-text-xl);
  font-weight: 500;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-3);
  line-height: 1.25;
}

.a2-boards-card__desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--a2-text-muted);
  margin: 0 0 var(--a2-space-5);
  flex-grow: 1;
}

.a2-boards-card__more {
  font-family: var(--a2-font-sans);
  font-size: 14px;
  color: var(--a2-primary);
  font-weight: 500;
}

@media (max-width: 768px) {
  .a2-boards-services__grid {
    grid-template-columns: 1fr;
  }
}

/* Boards overview — methodology section */

.a2-boards-method {
  padding: var(--a2-space-9) var(--a2-pad-x);
}

.a2-boards-method__container {
  max-width: var(--a2-container);
  margin: 0 auto;
}

.a2-boards-method__title {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-h2);
  margin: 0 0 var(--a2-space-5);
  color: var(--a2-text);
  max-width: 720px;
}

.a2-boards-method__body {
  font-size: var(--a2-text-md);
  line-height: 1.7;
  color: var(--a2-text-muted);
  margin: 0 0 var(--a2-space-7);
  max-width: 760px;
}



/* ==========================================================================
   PACKAGE 3 — FLUENT FORMS STYLING
   Custom form styling to match the Aspire2 design system
   ========================================================================== */

/* Form container — wrap the form in a card-like surface */

.fluentform,
.fluentform-embed {
  max-width: 780px;
  margin: 0 auto;
  font-family: var(--a2-font-sans);
}

.ff-el-form-control,
.ff_el_group input[type="text"],
.ff_el_group input[type="email"],
.ff_el_group input[type="tel"],
.ff_el_group input[type="url"],
.ff_el_group input[type="number"],
.ff_el_group textarea,
.ff_el_group select,
.ff-el-group input[type="text"],
.ff-el-group input[type="email"],
.ff-el-group input[type="tel"],
.ff-el-group input[type="url"],
.ff-el-group input[type="number"],
.ff-el-group textarea,
.ff-el-group select {
  font-family: var(--a2-font-sans) !important;
  font-size: 15px !important;
  color: var(--a2-text) !important;
  background: var(--a2-bg-card) !important;
  border: 1px solid var(--a2-border-strong) !important;
  border-radius: var(--a2-radius-sm) !important;
  padding: 12px 14px !important;
  width: 100% !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

.ff_el_group input[type="text"]:focus,
.ff_el_group input[type="email"]:focus,
.ff_el_group input[type="tel"]:focus,
.ff_el_group textarea:focus,
.ff_el_group select:focus,
.ff-el-group input[type="text"]:focus,
.ff-el-group input[type="email"]:focus,
.ff-el-group input[type="tel"]:focus,
.ff-el-group textarea:focus,
.ff-el-group select:focus {
  outline: none !important;
  border-color: var(--a2-primary) !important;
  background: var(--a2-bg-card) !important;
  box-shadow: 0 0 0 3px rgba(15, 58, 95, 0.10) !important;
}

/* Placeholder text */

.ff_el_group input::placeholder,
.ff_el_group textarea::placeholder,
.ff-el-group input::placeholder,
.ff-el-group textarea::placeholder {
  color: var(--a2-text-tertiary) !important;
  opacity: 1 !important;
  font-family: var(--a2-font-sans) !important;
}

/* Labels — proper typography */

.ff_el_group > label,
.ff-el-group > label,
.ff-el-input--label label,
.fluentform label {
  font-family: var(--a2-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--a2-text) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-bottom: 8px !important;
  display: inline-block !important;
}

/* Required indicator */

.ff_el_group > label .ff-el-is-required,
.ff-el-group > label .ff-el-is-required,
.fluentform label .ff-el-is-required {
  color: var(--a2-accent) !important;
  font-weight: 500 !important;
  margin-left: 2px !important;
}

/* Form group spacing */

.fluentform .ff-el-group,
.fluentform .ff_el_group {
  margin-bottom: 20px !important;
}

/* Textarea — specific */

.ff_el_group textarea,
.ff-el-group textarea,
.fluentform textarea {
  min-height: 130px !important;
  line-height: 1.6 !important;
  padding: 14px !important;
  resize: vertical !important;
  font-family: var(--a2-font-sans) !important;
}

/* Radio buttons (v1.11.8 rewrite). Editorial styling.

   This block replaces the v1.2 / v1.3 radio styling. The earlier rules
   relied on an inline-block layout that broke when newer Fluent Forms
   versions introduced a flex/grid wrapper around each option, plus an
   optional 'button-style' radio mode that draws a card border around
   each option. The new rules handle both the default and button-style
   markup variants, force inline alignment, and explicitly strip any
   container border/background that Fluent Forms applies. */

/* Step 1: Reset container styling on every wrapper variant Fluent
   Forms might use to group radio options. v1.11.9 extends this to
   cover :focus-within and state classes (.ff_active, .is-checked,
   .ff-el-checked) which Fluent Forms applies to the option container.
   v1.11.10 deliberately keeps labels OUT of this reset because the
   label now carries the selected-state navy border treatment. */
.fluentform .ff_list_radio,
.fluentform .ff_list_buttons,
.fluentform .ff_item_panel,
.fluentform .ff-el-form-check,
.fluentform .ff-el-form-check:focus-within,
.fluentform .ff-el-form-check:hover,
.fluentform .ff-el-form-check.ff_active,
.fluentform .ff-el-form-check.is-active,
.fluentform .ff-el-form-check.is-checked,
.fluentform .ff-el-form-check.ff-el-checked,
.fluentform .ff_radio_check_inline,
.fluentform .ff_radio_check_block {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Step 2: Each option block stacks vertically with comfortable spacing.
   v1.11.11: Increased from 6px to 10px so adjacent option borders
   (selected + hovered) have visible breathing room between them. */
.fluentform .ff-el-form-check {
  display: block !important;
  margin: 10px 0 !important;
}

/* Step 3: The label wraps the radio + text. Use inline-flex so the
   radio circle and text sit on a single line, vertically centred,
   with controlled spacing between them.

   v1.11.10: The label itself is now the "selectable card". It carries
   the padding, transparent default border, and border-radius. The
   border becomes navy when this option is selected (Step 7). All
   options have an identical 1px transparent border in their default
   state so selection doesn't cause layout shift. */
.fluentform .ff-el-form-check label,
.fluentform .ff-el-form-check-label,
.fluentform label.ff-el-form-check-label,
.fluentform .ff_button_label_wrap,
.fluentform .ff_item_panel label,
.fluentform .ff_list_buttons label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 14px 20px !important;
  border: 1px solid transparent !important;
  border-radius: var(--a2-radius-sm) !important;
  font-family: var(--a2-font-sans) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--a2-text) !important;
  cursor: pointer !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: border-color 160ms ease, color 160ms ease !important;
}

/* Step 4: The radio input itself. flex-shrink: 0 prevents the circle
   from being squished on narrow viewports when the label text wraps. */
.fluentform .ff-el-form-check-input[type="radio"],
.fluentform input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex-shrink: 0 !important;
  border: 2px solid var(--a2-border-strong) !important;
  border-radius: 50% !important;
  margin: 0 !important;
  position: relative !important;
  cursor: pointer !important;
  background: var(--a2-bg-card) !important;
  transition: border-color 160ms ease !important;
}

.fluentform input[type="radio"]:checked,
.fluentform .ff-el-form-check-input[type="radio"]:checked,
body .fluentform input[type="radio"]:checked {
  border-color: var(--a2-primary) !important;
  background: var(--a2-bg-card) !important;
  background-color: var(--a2-bg-card) !important;
}

.fluentform input[type="radio"]:checked::after,
.fluentform .ff-el-form-check-input[type="radio"]:checked::after {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--a2-primary) !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.fluentform input[type="radio"]:hover {
  border-color: var(--a2-primary-soft) !important;
}

/* v1.11.9: Suppress browser default focus ring on radio inputs and
   replace with a subtle navy halo. Keeps the option keyboard-accessible
   without the blocky default outline that visually merges with the
   adjacent label text. */
.fluentform input[type="radio"]:focus,
.fluentform input[type="radio"]:focus-visible,
.fluentform .ff-el-form-check-input[type="radio"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(15, 58, 95, 0.18) !important;
}

/* Step 5: Span element holding the option text. Some Fluent Forms
   versions wrap the label text in a span, particularly in button-style
   variants. Strip any styling so the text inherits cleanly. */
.fluentform .ff_button_label,
.fluentform .ff-el-form-check-label > span,
.fluentform label.ff-el-form-check-label > span,
.fluentform .ff_list_buttons label > span,
.fluentform .ff_item_panel label > span {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
}

/* Step 6: Hover state on the entire option row, subtle text colour shift
   to signal interactivity without changing the layout.
   v1.11.11: Added explicit transparent background to suppress any
   Fluent Forms hover tint that bleeds through. */
.fluentform .ff-el-form-check label:hover,
.fluentform .ff-el-form-check-label:hover {
  color: var(--a2-primary) !important;
  background: transparent !important;
}

/* Step 7 (v1.11.10): Selected state border. The label gets a visible
   navy border when its child radio is checked. Uses :has() as the
   primary selector (well-supported in modern browsers as of 2024+),
   with Fluent Forms state classes as fallback. The transparent default
   border in Step 3 means selection causes zero layout shift, just a
   smooth fade-in of the border colour over 160ms. */
.fluentform .ff-el-form-check:has(input[type="radio"]:checked) label,
.fluentform .ff-el-form-check:has(input[type="radio"]:checked) .ff-el-form-check-label,
.fluentform .ff-el-form-check.ff_active label,
.fluentform .ff-el-form-check.is-active label,
.fluentform .ff-el-form-check.is-checked label,
.fluentform .ff-el-form-check.ff-el-checked label,
.fluentform .ff_list_radio:has(input[type="radio"]:checked) label,
.fluentform .ff_item_panel:has(input[type="radio"]:checked) label,
.fluentform .ff_list_buttons:has(input[type="radio"]:checked) label {
  border-color: var(--a2-primary) !important;
}

/* Hover preview on unselected options: hint at the selectable-card
   nature with a faint border before the user commits. */
.fluentform .ff-el-form-check:not(:has(input[type="radio"]:checked)) label:hover {
  border-color: var(--a2-border-strong) !important;
}

/* Checkboxes — matching radio style but square */

.fluentform .ff-el-form-check-input[type="checkbox"],
.fluentform input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid var(--a2-border-strong) !important;
  border-radius: 3px !important;
  margin-right: 10px !important;
  position: relative !important;
  cursor: pointer !important;
  background: var(--a2-bg-card) !important;
  vertical-align: middle !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

.fluentform input[type="checkbox"]:checked,
.fluentform .ff-el-form-check-input[type="checkbox"]:checked {
  border-color: var(--a2-primary) !important;
  background: var(--a2-primary) !important;
}

.fluentform input[type="checkbox"]:checked::after,
.fluentform .ff-el-form-check-input[type="checkbox"]:checked::after {
  content: '' !important;
  width: 5px !important;
  height: 9px !important;
  border: solid var(--a2-bg-card) !important;
  border-width: 0 2px 2px 0 !important;
  transform: translate(-50%, -60%) rotate(45deg) !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
}

/* Submit button — deep navy, editorial rhythm */

.fluentform .ff-btn,
.fluentform .ff-btn-submit,
.fluentform button[type="submit"],
.fluentform input[type="submit"] {
  background: var(--a2-primary) !important;
  color: var(--a2-bg-card) !important;
  font-family: var(--a2-font-sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 14px 32px !important;
  border: none !important;
  border-radius: var(--a2-radius-sm) !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.1s ease !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  width: auto !important;
  min-width: 180px !important;
}

.fluentform .ff-btn:hover,
.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover {
  background: var(--a2-primary-soft) !important;
  color: var(--a2-bg-card) !important;
  transform: translateY(-1px) !important;
}

.fluentform .ff-btn:active {
  transform: translateY(0) !important;
}

/* Dropdown / select — custom arrow */

.fluentform select,
.ff_el_group select,
.ff-el-group select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: var(--a2-bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235C5B57' d='M6 9L1 4h10z'/%3E%3C/svg%3E") no-repeat right 14px center !important;
  background-size: 12px !important;
  padding-right: 36px !important;
  cursor: pointer !important;
}

/* Error states */

.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error textarea,
.fluentform .ff-el-is-error select {
  border-color: var(--a2-accent) !important;
  background: var(--a2-accent-soft) !important;
}

.fluentform .error,
.fluentform .ff-el-input--label .error,
.fluentform .ff-message-normal,
.fluentform .text-danger {
  color: var(--a2-accent) !important;
  font-family: var(--a2-font-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  margin-top: 6px !important;
}

/* Success message after submission */

.fluentform_wrapper_ff-success,
.ff-message-success,
.ff_submit_success,
.fluentform .ff-message-success {
  background: var(--a2-bg-card) !important;
  border: 1px solid var(--a2-border) !important;
  border-left: 3px solid var(--a2-primary) !important;
  color: var(--a2-text) !important;
  padding: 32px 40px !important;
  border-radius: var(--a2-radius-md) !important;
  max-width: 780px !important;
  margin: 0 auto !important;
}

.fluentform_wrapper_ff-success h1,
.fluentform_wrapper_ff-success h2,
.fluentform_wrapper_ff-success h3,
.ff-message-success h1,
.ff-message-success h2,
.ff-message-success h3 {
  font-family: var(--a2-font-serif) !important;
  color: var(--a2-text) !important;
  margin: 0 0 12px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

.fluentform_wrapper_ff-success p,
.ff-message-success p {
  color: var(--a2-text-muted) !important;
  font-family: var(--a2-font-sans) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Section titles within form if any */

.ff-el-section-title {
  font-family: var(--a2-font-serif) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--a2-text) !important;
  margin: 32px 0 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--a2-border) !important;
}

/* Help text / hints */

.ff-el-input--label .ff_el_group_desc,
.ff-el-help-message {
  font-family: var(--a2-font-sans) !important;
  font-size: 13px !important;
  color: var(--a2-text-muted) !important;
  margin-top: 4px !important;
}

/* Two-column layout (First Name / Last Name) refinement */

.ff-el-group .ff-el-input--content {
  padding: 0 8px !important;
}

.ff-el-group .ff_t_container {
  margin: 0 -8px !important;
}


/* ==========================================================================
   FORM PAGE WRAPPER — visual container for the form section
   ========================================================================== */

.a2-form-wrap {
  padding: var(--a2-space-7) var(--a2-pad-x) var(--a2-space-10);
  background: var(--a2-bg);
}

.a2-form-wrap__container {
  max-width: 900px;
  margin: 0 auto;
  background: var(--a2-bg-card);
  padding: var(--a2-space-8) var(--a2-space-7);
  border-radius: var(--a2-radius-lg);
  border: 1px solid var(--a2-border);
}

@media (max-width: 768px) {
  .a2-form-wrap__container {
    padding: var(--a2-space-6) var(--a2-space-5);
  }
}


/* ==========================================================================
   HEADER — Start a conversation CTA on the right of nav
   ========================================================================== */

/* Kadence header CTA styling — if using Kadence header builder,
   we style the button that sits after the nav */

.header-button-wrap .button,
.header-button-wrap a.button,
.site-header .header-button-inner-wrap .button {
  background: var(--a2-primary) !important;
  color: var(--a2-bg-card) !important;
  font-family: var(--a2-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 10px 20px !important;
  border-radius: var(--a2-radius-sm) !important;
  border: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: background 0.2s ease !important;
}

.header-button-wrap .button:hover,
.header-button-wrap a.button:hover,
.site-header .header-button-inner-wrap .button:hover {
  background: var(--a2-primary-soft) !important;
  color: var(--a2-bg-card) !important;
  text-decoration: none !important;
}


/* ==========================================================================
   FOOTER — initial pass at Aspire2 footer styling
   ========================================================================== */

.site-footer,
.footer-wrap,
.site-footer-wrap,
.site-middle-footer-wrap,
.site-bottom-footer-wrap {
  background: var(--a2-primary-deep) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: var(--a2-font-sans) !important;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .widget-title {
  color: var(--a2-bg-card) !important;
  font-family: var(--a2-font-serif) !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  margin-bottom: 16px !important;
}

.site-footer p,
.site-footer li,
.site-footer .widget {
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: var(--a2-font-sans) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none !important;
}

.site-footer a:hover {
  color: var(--a2-bg-card) !important;
  text-decoration: underline !important;
}

.site-footer .menu,
.site-footer .menu ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.site-footer .menu-item a {
  padding: 4px 0 !important;
  display: inline-block !important;
}


/* ==========================================================================
   CONDITIONAL FIELD ANIMATION — smooth reveal when paths change
   ========================================================================== */

.fluentform .ff-el-group.ff_conditional_show {
  animation: a2FadeIn 0.3s ease;
}

@keyframes a2FadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* ==========================================================================
   PACKAGE 4 — FORM MODERNISATION (v1.3)
   Card-based radios, floating labels, section numbering, character counters,
   refined submit button. Designed as a coherent system.
   These styles override and replace the v1.2 form styling where they overlap.
   ========================================================================== */


/* ==========================================================================
   Reset v1.2 radio button styling — we're replacing with card-based approach
   ========================================================================== */

.fluentform .ff-el-form-check {
  margin: 0 0 10px 0 !important;
  display: block !important;
}

/* ==========================================================================
   CARD-BASED RADIO BUTTONS
   Each path becomes a full-width selectable card with hover and selected states
   ========================================================================== */

.fluentform .ff-el-form-check-label {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  cursor: pointer !important;
  padding: 18px 20px !important;
  background: var(--a2-bg-card) !important;
  border: 1px solid var(--a2-border) !important;
  border-radius: var(--a2-radius-md) !important;
  font-family: var(--a2-font-sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--a2-text) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease !important;
  position: relative !important;
}

.fluentform .ff-el-form-check-label:hover {
  border-color: var(--a2-border-strong) !important;
  background: var(--a2-bg) !important;
  transform: translateY(-1px) !important;
}

/* Radio input inside the label — custom circular mark */

.fluentform .ff-el-form-check-label input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid var(--a2-border-strong) !important;
  border-radius: 50% !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  position: relative !important;
  background: var(--a2-bg-card) !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease !important;
}

.fluentform .ff-el-form-check-label input[type="radio"]:checked {
  border-color: var(--a2-primary) !important;
  border-width: 6px !important;
  background: var(--a2-bg-card) !important;
}

/* Selected state — the entire card shifts to primary emphasis */

.fluentform .ff-el-form-check-label:has(input[type="radio"]:checked) {
  border-color: var(--a2-primary) !important;
  background: var(--a2-bg-card) !important;
  box-shadow: 0 0 0 1px var(--a2-primary) !important;
}

/* Fallback for browsers without :has() support */

.fluentform .ff-el-form-check.ff-el-checked .ff-el-form-check-label {
  border-color: var(--a2-primary) !important;
}

/* Label text span */

.fluentform .ff-el-form-check-label span {
  flex-grow: 1 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}


/* ==========================================================================
   CHECKBOX CARDS — same treatment as radio cards
   ========================================================================== */

.fluentform .ff-el-form-check-label input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid var(--a2-border-strong) !important;
  border-radius: 4px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  position: relative !important;
  background: var(--a2-bg-card) !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
}

.fluentform .ff-el-form-check-label input[type="checkbox"]:checked {
  border-color: var(--a2-primary) !important;
  background: var(--a2-primary) !important;
}

.fluentform .ff-el-form-check-label input[type="checkbox"]:checked::after {
  content: '' !important;
  position: absolute !important;
  left: 5px !important;
  top: 1px !important;
  width: 6px !important;
  height: 11px !important;
  border: solid var(--a2-bg-card) !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}


/* ==========================================================================
   INPUT FOCUS TREATMENT
   Deep navy bottom-border emphasis on focus, subtle cream fill
   ========================================================================== */

.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="url"],
.fluentform input[type="number"],
.fluentform textarea,
.fluentform select,
.fluentform .ff-el-form-control {
  font-family: var(--a2-font-sans) !important;
  font-size: 15px !important;
  color: var(--a2-text) !important;
  background: var(--a2-bg-card) !important;
  border: 1px solid var(--a2-border) !important;
  border-bottom: 2px solid var(--a2-border) !important;
  border-radius: var(--a2-radius-sm) !important;
  padding: 14px 16px !important;
  width: 100% !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, background 0.2s ease, border-bottom-color 0.2s ease !important;
  line-height: 1.4 !important;
}

.fluentform input[type="text"]:focus,
.fluentform input[type="email"]:focus,
.fluentform input[type="tel"]:focus,
.fluentform input[type="url"]:focus,
.fluentform input[type="number"]:focus,
.fluentform textarea:focus,
.fluentform select:focus,
.fluentform .ff-el-form-control:focus {
  outline: none !important;
  border-color: var(--a2-border) !important;
  border-bottom-color: var(--a2-primary) !important;
  background: var(--a2-bg) !important;
  box-shadow: none !important;
}

/* Placeholder — softer, more visible when filled looks more deliberate */

.fluentform input::placeholder,
.fluentform textarea::placeholder {
  color: var(--a2-text-tertiary) !important;
  opacity: 1 !important;
  font-family: var(--a2-font-sans) !important;
}


/* ==========================================================================
   LABELS — clean, Geist, proper weight
   ========================================================================== */

.fluentform .ff-el-input--label label,
.fluentform label {
  font-family: var(--a2-font-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--a2-text-muted) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  margin-bottom: 8px !important;
  display: inline-block !important;
}

/* Required indicator — burgundy, restrained */

.fluentform .ff-el-input--label.ff-el-is-required::after,
.fluentform .asterisk-right::after {
  color: var(--a2-accent) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

/* Group spacing — more breathing room than v1.2 */

.fluentform .ff-el-group {
  margin-bottom: 24px !important;
}


/* ==========================================================================
   TEXTAREA specifically
   ========================================================================== */

.fluentform textarea {
  min-height: 140px !important;
  line-height: 1.6 !important;
  padding: 16px !important;
  resize: vertical !important;
  font-family: var(--a2-font-sans) !important;
}


/* ==========================================================================
   DROPDOWN / SELECT — custom chevron, proper padding
   ========================================================================== */

.fluentform select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: var(--a2-bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230F3A5F' d='M6 9L1 4h10z'/%3E%3C/svg%3E") no-repeat right 16px center !important;
  background-size: 12px !important;
  padding-right: 40px !important;
  cursor: pointer !important;
}

.fluentform select:focus {
  background-color: var(--a2-bg) !important;
}


/* ==========================================================================
   SECTION NUMBERING — using CSS counters
   The form has three implicit sections:
   - Path selection (radio)
   - Common fields (name, email, organisation)
   - Path-specific fields (conditional)
   We add numbered headings via CSS
   ========================================================================== */

/* Note: Section headings would require JavaScript to inject reliably since
   Fluent Forms doesn't provide section markers. We use :nth-child and
   :first-of-type to approximate. See also optional JS below for precise injection. */


/* ==========================================================================
   SUBMIT BUTTON — refined, with arrow animation
   ========================================================================== */

.fluentform .ff-btn,
.fluentform .ff-btn-submit,
.fluentform button[type="submit"],
.fluentform input[type="submit"] {
  background: var(--a2-primary) !important;
  color: var(--a2-bg-card) !important;
  font-family: var(--a2-font-sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 16px 32px !important;
  border: none !important;
  border-radius: var(--a2-radius-sm) !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: 0 1px 2px rgba(15, 58, 95, 0.1) !important;
  min-width: 200px !important;
  position: relative !important;
  padding-right: 48px !important;
}

/* Arrow icon on the right of the button — slides on hover */

.fluentform .ff-btn::after,
.fluentform .ff-btn-submit::after,
.fluentform button[type="submit"]::after {
  content: '→' !important;
  position: absolute !important;
  right: 22px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  transition: transform 0.2s ease !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.fluentform .ff-btn:hover::after,
.fluentform .ff-btn-submit:hover::after,
.fluentform button[type="submit"]:hover::after {
  transform: translateY(-50%) translateX(4px) !important;
}

.fluentform .ff-btn:hover,
.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover {
  background: var(--a2-primary-soft) !important;
  color: var(--a2-bg-card) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(15, 58, 95, 0.18) !important;
}

.fluentform .ff-btn:active,
.fluentform .ff-btn-submit:active,
.fluentform button[type="submit"]:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(15, 58, 95, 0.1) !important;
}

/* Submit wrapper — add spacing above */

.fluentform .ff_submit_btn_wrapper {
  margin-top: 32px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--a2-border) !important;
}


/* ==========================================================================
   CHARACTER COUNTERS FOR TEXTAREAS
   Added via JavaScript (assets/js/form-enhancements.js)
   This CSS just styles the counter that the JS injects
   ========================================================================== */

.a2-char-counter {
  display: block !important;
  text-align: right !important;
  font-family: var(--a2-font-sans) !important;
  font-size: 12px !important;
  color: var(--a2-text-tertiary) !important;
  margin-top: 6px !important;
  letter-spacing: 0.02em !important;
}

.a2-char-counter.a2-char-counter--warning {
  color: var(--a2-accent) !important;
}


/* ==========================================================================
   CONDITIONAL FIELD REVEAL ANIMATION — refined
   ========================================================================== */

.fluentform .ff-el-group.has-conditions {
  animation: a2FormFieldReveal 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes a2FormFieldReveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 500px;
  }
}


/* ==========================================================================
   CARD-BASED RADIO / CHECKBOX GROUP SPACING
   When a radio/checkbox field is in a group, give the group the right layout
   ========================================================================== */

.fluentform .ff-el-group:has(.ff-el-form-check) .ff-el-input--content {
  display: block !important;
}

/* Remove the v1.2 success message styling that might conflict */

.fluentform_wrapper_ff-success,
.ff-message-success {
  background: var(--a2-bg-card) !important;
  border: 1px solid var(--a2-border) !important;
  border-left: 4px solid var(--a2-primary) !important;
  color: var(--a2-text) !important;
  padding: 40px 48px !important;
  border-radius: var(--a2-radius-md) !important;
  max-width: 780px !important;
  margin: 0 auto !important;
}


/* ==========================================================================
   SMALL REFINEMENT: label above inputs, not inside
   (We opted against floating labels due to Fluent Forms DOM structure —
   the label-before-input pattern is more reliable and arguably cleaner)
   ========================================================================== */

.fluentform .ff-el-input--label {
  margin-bottom: 6px !important;
}




/* ==========================================================================
   SECTION HEADINGS — injected by form-enhancements.js
   ========================================================================== */

.a2-section-heading {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 40px 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--a2-border);
}

.a2-section-heading:first-child {
  margin-top: 0;
}

.a2-section-heading__number {
  font-family: var(--a2-font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--a2-accent);
  letter-spacing: 0.02em;
}

.a2-section-heading__title {
  font-family: var(--a2-font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--a2-text);
  letter-spacing: -0.005em;
}



/* ==========================================================================
   PACKAGE 5 — PAGE-SPECIFIC COMPONENTS (v1.4)
   For leaders, About, and International pages
   Plus: dropdown menu styling rolled in from Customizer CSS
   ========================================================================== */


/* ==========================================================================
   DROPDOWN NAV — rolled in from Customizer so it's maintained in the theme
   ========================================================================== */

.main-navigation ul.sub-menu,
.main-navigation .sub-menu,
.menu .sub-menu {
  background: var(--a2-bg-card) !important;
  border: 1px solid var(--a2-border) !important;
  border-radius: var(--a2-radius-sm) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  padding: 8px 0 !important;
}

.main-navigation .sub-menu li a,
.menu .sub-menu li a {
  color: var(--a2-text) !important;
  background: transparent !important;
  font-family: var(--a2-font-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 10px 20px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-bottom: none !important;
}

.main-navigation .sub-menu li a:hover,
.menu .sub-menu li a:hover {
  background: var(--a2-bg-secondary) !important;
  color: var(--a2-primary) !important;
}


/* ==========================================================================
   FOR LEADERS PAGE
   ========================================================================== */

/* Reframe variant — softer, more intimate than boards reframe */

.a2-leaders-reframe {
  padding: var(--a2-space-7) var(--a2-pad-x);
  background: var(--a2-bg);
}

.a2-leaders-reframe__container {
  max-width: var(--a2-container-narrow);
  margin: 0 auto;
}

.a2-leaders-reframe__body {
  font-size: var(--a2-text-md);
  line-height: 1.7;
  color: var(--a2-text-muted);
  margin: 0;
  font-weight: 400;
}

/* What we offer leaders — three-column overview */

.a2-leaders-offer {
  padding: var(--a2-space-7) var(--a2-pad-x) var(--a2-space-9);
}

.a2-leaders-offer__container {
  max-width: var(--a2-container);
  margin: 0 auto;
}

.a2-leaders-offer__title {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-h2);
  margin: 0 0 var(--a2-space-6);
  color: var(--a2-text);
  max-width: 720px;
}

.a2-leaders-offer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--a2-space-5);
  margin-top: var(--a2-space-6);
}

.a2-leaders-offer__item {
  padding: var(--a2-space-6);
  background: var(--a2-bg-card);
  border: 1px solid var(--a2-border);
  border-top: 3px solid var(--a2-primary);
  border-radius: var(--a2-radius-md);
}

.a2-leaders-offer__item-name {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-text-xl);
  font-weight: 500;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-3);
}

.a2-leaders-offer__item-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--a2-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .a2-leaders-offer__grid {
    grid-template-columns: 1fr;
  }
}

/* Open roles section — for the Niceboard embed */

.a2-open-roles {
  padding: var(--a2-space-9) var(--a2-pad-x);
  background: var(--a2-bg-secondary);
}

.a2-open-roles__container {
  max-width: var(--a2-container);
  margin: 0 auto;
}

.a2-open-roles__header {
  margin-bottom: var(--a2-space-6);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--a2-space-5);
}

.a2-open-roles__title {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-h2);
  margin: 0;
  color: var(--a2-text);
}

.a2-open-roles__lead {
  font-size: var(--a2-text-md);
  line-height: 1.6;
  color: var(--a2-text-muted);
  margin: var(--a2-space-3) 0 0;
  max-width: 560px;
}

/* Niceboard iframe embed (v1.11.22)
   Replaced the placeholder card with a live feed from jobs.aspire2edu.com.au.
   Frame mirrors the placeholder card styling so the editorial register is
   preserved at the seam between Aspire2 site and Niceboard widget. */

.a2-open-roles__embed {
  background: var(--a2-bg-card);
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-radius-md);
  padding: var(--a2-space-2);
  overflow: hidden;
}

.a2-open-roles__iframe {
  width: 100%;
  min-height: 450px;
  border: 0;
  display: block;
  background: var(--a2-bg-card);
  border-radius: calc(var(--a2-radius-md) - 4px);
}

.a2-open-roles__alt-link {
  font-family: var(--a2-font-sans);
  font-size: 14px;
  color: var(--a2-text-muted);
  text-align: center;
  margin: var(--a2-space-4) 0 var(--a2-space-2);
  padding: 0 var(--a2-space-3);
}

.a2-open-roles__alt-link a {
  color: var(--a2-primary);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease, color 160ms ease;
}

.a2-open-roles__alt-link a:hover {
  border-bottom-color: var(--a2-primary);
}

@media (max-width: 768px) {
  .a2-open-roles__iframe {
    min-height: 400px;
  }

  .a2-open-roles__embed {
    padding: var(--a2-space-1);
  }
}

/* Legacy placeholder styles retained as comments for reference. The new
   embed-based markup makes them inactive; can be deleted in future cleanup.
   .a2-open-roles__placeholder { ... } removed v1.11.22
   .a2-open-roles__placeholder-text { ... } removed v1.11.22 */

/* Leadership Collective feature block */

.a2-collective {
  padding: var(--a2-space-9) var(--a2-pad-x);
}

.a2-collective__container {
  max-width: var(--a2-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--a2-space-8);
  align-items: center;
}

.a2-collective__copy {
  /* Left side */
}

.a2-collective__title {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-h2);
  margin: 0 0 var(--a2-space-5);
  color: var(--a2-text);
}

.a2-collective__body {
  font-size: var(--a2-text-md);
  line-height: 1.65;
  color: var(--a2-text-muted);
  margin: 0 0 var(--a2-space-5);
}

.a2-collective__features {
  background: var(--a2-primary);
  color: var(--a2-bg-card);
  padding: var(--a2-space-7);
  border-radius: var(--a2-radius-lg);
}

.a2-collective__feature-item {
  padding: var(--a2-space-4) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.a2-collective__feature-item:last-child {
  border-bottom: none;
}

.a2-collective__feature-name {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-text-lg);
  font-weight: 500;
  color: var(--a2-bg-card);
  margin: 0 0 var(--a2-space-2);
}

.a2-collective__feature-desc {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

@media (max-width: 768px) {
  .a2-collective__container {
    grid-template-columns: 1fr;
    gap: var(--a2-space-6);
  }
}


/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */

/* Our story — long-form editorial paragraph */

.a2-story {
  padding: var(--a2-space-7) var(--a2-pad-x) var(--a2-space-9);
}

.a2-story__container {
  max-width: var(--a2-container-narrow);
  margin: 0 auto;
}

.a2-story__title {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-h2);
  margin: 0 0 var(--a2-space-6);
  color: var(--a2-text);
}

.a2-story__body p {
  font-size: var(--a2-text-md);
  line-height: 1.75;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-5);
}

.a2-story__body p:last-child {
  margin-bottom: 0;
}

/* Our approach — three-pillar editorial */

.a2-approach {
  padding: var(--a2-space-9) var(--a2-pad-x);
  background: var(--a2-bg-secondary);
}

.a2-approach__container {
  max-width: var(--a2-container);
  margin: 0 auto;
}

.a2-approach__header {
  margin-bottom: var(--a2-space-7);
  max-width: 720px;
}

.a2-approach__title {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-h2);
  margin: 0 0 var(--a2-space-4);
  color: var(--a2-text);
}

.a2-approach__lead {
  font-size: var(--a2-text-md);
  line-height: 1.65;
  color: var(--a2-text-muted);
  margin: 0;
}

.a2-approach__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--a2-space-6);
}

.a2-approach__pillar {
  padding-top: var(--a2-space-5);
  border-top: 2px solid var(--a2-primary);
}

.a2-approach__pillar-name {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-text-xl);
  font-weight: 500;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-3);
}

.a2-approach__pillar-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--a2-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .a2-approach__grid {
    grid-template-columns: 1fr;
  }
}

/* Our people grid — placeholder cards ready for team data */

.a2-people {
  padding: var(--a2-space-9) var(--a2-pad-x);
}

.a2-people__container {
  max-width: var(--a2-container);
  margin: 0 auto;
}

.a2-people__header {
  margin-bottom: var(--a2-space-6);
}

.a2-people__title {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-h2);
  margin: 0;
  color: var(--a2-text);
}

.a2-people__intro {
  font-size: var(--a2-text-md);
  line-height: 1.65;
  color: var(--a2-text-muted);
  margin: var(--a2-space-4) 0 0;
  max-width: 640px;
}

.a2-people__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--a2-space-5);
  margin-top: var(--a2-space-7);
}

.a2-people__card {
  background: var(--a2-bg-card);
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-radius-md);
  padding: var(--a2-space-6);
}

.a2-people__card-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--a2-bg-secondary);
  margin-bottom: var(--a2-space-4);
  border: 1px solid var(--a2-border);
}

.a2-people__card-name {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-text-lg);
  font-weight: 500;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-2);
}

.a2-people__card-role {
  font-family: var(--a2-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--a2-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--a2-space-3);
}

.a2-people__card-bio {
  font-size: 14px;
  line-height: 1.55;
  color: var(--a2-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .a2-people__grid {
    grid-template-columns: 1fr;
  }
}

/* Partnerships block — OutsideIn / ialign / Wadmore naming */

.a2-partnerships {
  padding: var(--a2-space-9) var(--a2-pad-x);
  background: var(--a2-bg-secondary);
}

.a2-partnerships__container {
  max-width: var(--a2-container);
  margin: 0 auto;
}

.a2-partnerships__header {
  margin-bottom: var(--a2-space-7);
}

.a2-partnerships__title {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-h2);
  margin: 0 0 var(--a2-space-4);
  color: var(--a2-text);
  max-width: 720px;
}

.a2-partnerships__body {
  font-size: var(--a2-text-md);
  line-height: 1.65;
  color: var(--a2-text-muted);
  margin: 0;
  max-width: 720px;
}

.a2-partnerships__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--a2-space-5);
  margin-top: var(--a2-space-7);
}

.a2-partnerships__item {
  background: var(--a2-bg-card);
  padding: var(--a2-space-6);
  border-radius: var(--a2-radius-md);
  border: 1px solid var(--a2-border);
}

.a2-partnerships__item-name {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-text-xl);
  font-weight: 500;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-3);
}

.a2-partnerships__item-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--a2-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .a2-partnerships__grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   INTERNATIONAL PAGE
   ========================================================================== */

/* Contexts we've worked with — horizontal region cards */

.a2-intl-contexts {
  padding: var(--a2-space-9) var(--a2-pad-x);
  background: var(--a2-bg-secondary);
}

.a2-intl-contexts__container {
  max-width: var(--a2-container);
  margin: 0 auto;
}

.a2-intl-contexts__header {
  margin-bottom: var(--a2-space-7);
  max-width: 720px;
}

.a2-intl-contexts__title {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-h2);
  margin: 0 0 var(--a2-space-4);
  color: var(--a2-text);
}

.a2-intl-contexts__lead {
  font-size: var(--a2-text-md);
  line-height: 1.65;
  color: var(--a2-text-muted);
  margin: 0;
}

.a2-intl-contexts__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--a2-space-5);
}

.a2-intl-contexts__region {
  background: var(--a2-bg-card);
  padding: var(--a2-space-5);
  border-radius: var(--a2-radius-md);
  border-top: 2px solid var(--a2-accent);
}

.a2-intl-contexts__region-name {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-text-lg);
  font-weight: 500;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-2);
}

.a2-intl-contexts__region-detail {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--a2-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .a2-intl-contexts__list {
    grid-template-columns: 1fr 1fr;
  }
}

/* Michael Boots lead block — featured person */

.a2-intl-lead {
  padding: var(--a2-space-9) var(--a2-pad-x);
}

.a2-intl-lead__container {
  max-width: var(--a2-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--a2-space-7);
  align-items: center;
}

.a2-intl-lead__portrait {
  aspect-ratio: 1;
  background: var(--a2-bg-secondary);
  border-radius: var(--a2-radius-lg);
  border: 1px solid var(--a2-border);
  overflow: hidden;
}

.a2-intl-lead__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.a2-intl-lead__copy {
  /* Right side text */
}

.a2-intl-lead__kicker {
  font-family: var(--a2-font-sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--a2-accent);
  margin: 0 0 var(--a2-space-3);
}

.a2-intl-lead__name {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-h3);
  font-weight: 500;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-2);
}

.a2-intl-lead__role {
  font-family: var(--a2-font-sans);
  font-size: var(--a2-text-md);
  color: var(--a2-text-muted);
  margin: 0 0 var(--a2-space-5);
}

.a2-intl-lead__bio {
  font-size: var(--a2-text-md);
  line-height: 1.65;
  color: var(--a2-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .a2-intl-lead__container {
    grid-template-columns: 1fr;
  }
  .a2-intl-lead__portrait {
    max-width: 200px;
    margin: 0 auto;
  }
}





/* ==========================================================================
   PACKAGE 7 — POINTS OF INTEREST (v1.6)
   Three coordinated moments across the site that earn attention by doing
   something, not by decorating. Each has a specific job:
   (1) USP triad Venn diagram
   (2) Editorial pull quote
  }
}


/* ==========================================================================
   MOMENT 2 — EDITORIAL PULL QUOTE
   A single quote that interrupts the homepage rhythm with a different voice
   ========================================================================== */

.a2-pullquote {
  padding: var(--a2-space-9) var(--a2-pad-x) var(--a2-space-10);
  background: var(--a2-bg);
}

.a2-pullquote__container {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
}

.a2-pullquote__mark {
  font-family: var(--a2-font-serif);
  font-size: 120px;
  font-weight: 400;
  color: var(--a2-accent);
  line-height: 0.8;
  margin: 0 0 var(--a2-space-2) 0;
  display: block;
  letter-spacing: -0.05em;
}

.a2-pullquote__text {
  font-family: var(--a2-font-serif);
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.25;
  font-weight: 400;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-6) 0;
  letter-spacing: -0.015em;
}

.a2-pullquote__attribution {
  display: flex;
  align-items: center;
  gap: var(--a2-space-3);
}

.a2-pullquote__attribution::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--a2-text-muted);
}

.a2-pullquote__attribution-text {
  font-family: var(--a2-font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--a2-text-muted);
  letter-spacing: 0.01em;
  margin: 0;
}


/* ==========================================================================
   MOMENT 3 — INTERACTIVE METHOD STAGES
   The six-stage method becomes a progressive-disclosure interaction.
   Each stage initially shows name + one-liner. Clicking expands it.
   ========================================================================== */

.a2-method-interactive {
  padding: var(--a2-space-9) var(--a2-pad-x);
}

.a2-method-interactive__container {
  max-width: var(--a2-container);
  margin: 0 auto;
}

.a2-method-interactive__header {
  margin-bottom: var(--a2-space-6);
}

.a2-method-interactive__title {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-h2);
  margin: 0 0 var(--a2-space-3);
  color: var(--a2-text);
}

.a2-method-interactive__lead {
  font-size: var(--a2-text-md);
  line-height: 1.6;
  color: var(--a2-text-muted);
  margin: 0;
  max-width: 640px;
}

.a2-method-interactive__instruction {
  font-family: var(--a2-font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--a2-text-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 var(--a2-space-5);
  display: flex;
  align-items: center;
  gap: 8px;
}

.a2-method-interactive__instruction::after {
  content: '↓';
  font-size: 14px;
  animation: a2Hint 2s ease-in-out infinite;
}

@keyframes a2Hint {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(3px); opacity: 1; }
}

/* The list of stages */
.a2-method-interactive__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--a2-border);
}

.a2-method-stage {
  border-bottom: 1px solid var(--a2-border);
}

.a2-method-stage__summary {
  display: grid;
  grid-template-columns: 60px 200px 1fr 24px;
  align-items: center;
  gap: var(--a2-space-5);
  padding: var(--a2-space-5) var(--a2-space-3);
  cursor: pointer;
  transition: background 0.2s ease;
  list-style: none;
}

.a2-method-stage__summary::-webkit-details-marker {
  display: none;
}

.a2-method-stage[open] .a2-method-stage__summary,
.a2-method-stage__summary:hover {
  background: var(--a2-bg-secondary);
}

.a2-method-stage__num {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-text-xl);
  font-weight: 500;
  color: var(--a2-accent);
  line-height: 1;
}

.a2-method-stage__name {
  font-family: var(--a2-font-serif);
  font-size: var(--a2-text-xl);
  font-weight: 500;
  color: var(--a2-text);
  line-height: 1.2;
}

.a2-method-stage__oneliner {
  font-size: 14.5px;
  color: var(--a2-text-muted);
  line-height: 1.5;
}

.a2-method-stage__toggle {
  font-family: var(--a2-font-serif);
  font-size: 24px;
  font-weight: 300;
  color: var(--a2-text-muted);
  text-align: right;
  transition: transform 0.25s ease, color 0.2s ease;
  line-height: 1;
}

.a2-method-stage[open] .a2-method-stage__toggle {
  transform: rotate(45deg);
  color: var(--a2-primary);
}

/* Expanded detail content */
.a2-method-stage__detail {
  padding: 0 var(--a2-space-3) var(--a2-space-6);
  display: grid;
  grid-template-columns: 60px 200px 1fr 24px;
  gap: var(--a2-space-5);
}

.a2-method-stage__detail-body {
  grid-column: 3;
  max-width: 680px;
}

.a2-method-stage__detail-body p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--a2-text-muted);
  margin: 0 0 var(--a2-space-4);
}

.a2-method-stage__detail-body p:last-child {
  margin-bottom: 0;
}

.a2-method-stage__detail-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--a2-space-4);
  margin-top: var(--a2-space-5);
  padding-top: var(--a2-space-4);
  border-top: 1px solid var(--a2-border);
}

.a2-method-stage__meta-label {
  font-family: var(--a2-font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--a2-text-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.a2-method-stage__meta-value {
  font-family: var(--a2-font-sans);
  font-size: 14px;
  color: var(--a2-text);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .a2-method-stage__summary {
    grid-template-columns: 40px 1fr 20px;
  }
  .a2-method-stage__oneliner {
    display: none;
  }
  .a2-method-stage__detail {
    grid-template-columns: 1fr;
    padding: 0 var(--a2-space-3) var(--a2-space-5);
  }
  .a2-method-stage__detail-body {
    grid-column: 1;
  }
  .a2-method-stage__detail-meta {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   Hide the old non-interactive method when the interactive one is present
   (handled by content replacement in the pattern, not CSS)
   ========================================================================== */



/* ==========================================================================
   PACKAGE 10 — CONVICTIONS v2 (v1.9)
   Three convictions expressing one core belief: rigour applied to the whole.
   Staggered editorial typography — numeral, qualifier, emphatic noun, body.
   Each conviction reads as a display header in a serious magazine.
   ========================================================================== */

.a2-convictions {
  padding: var(--a2-space-7) var(--a2-pad-x) var(--a2-space-9);
  background: var(--a2-bg);
}

.a2-convictions__container {
  max-width: var(--a2-container);
  margin: 0 auto;
}

/* Navy panel for the opening declaration.
   Sits as a contained block within the cream section. */
.a2-convictions__header {
  background: var(--a2-primary);
  color: var(--a2-bg-card);
  border-radius: var(--a2-radius-lg);
  padding: var(--a2-space-8);
  margin-bottom: var(--a2-space-8);
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--a2-space-6);
  align-items: start;
}

.a2-convictions__label {
  font-family: var(--a2-font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  padding-top: 4px;
}

.a2-convictions__intro {
  font-family: var(--a2-font-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  color: var(--a2-bg-card);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 820px;
}

.a2-convictions__intro-emphasis {
  font-style: italic;
  color: var(--a2-bg-card);
}

.a2-convictions__intro-lead {
  display: block;
  font-family: var(--a2-font-serif);
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: var(--a2-space-3);
  color: var(--a2-bg-card);
}

.a2-convictions__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Each conviction — grid with numeral left, content right */
.a2-conviction {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--a2-space-6);
  padding: var(--a2-space-8) 0;
  border-top: 1px solid var(--a2-border);
  align-items: start;
}

.a2-conviction:last-child {
  border-bottom: 1px solid var(--a2-border);
}

.a2-conviction__num {
  font-family: var(--a2-font-serif);
  font-size: 64px;
  font-weight: 400;
  color: var(--a2-accent);
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin: 0;
  padding-top: 8px;
}

.a2-conviction__body {
  max-width: 820px;
}

/* The staggered display headline — qualifier + emphatic noun */
.a2-conviction__display {
  margin: 0 0 var(--a2-space-5) 0;
  line-height: 1;
}

.a2-conviction__qualifier {
  display: block;
  font-family: var(--a2-font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--a2-text-muted);
  margin-bottom: var(--a2-space-2);
}

.a2-conviction__noun {
  display: block;
  font-family: var(--a2-font-serif);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--a2-text);
  margin: 0;
}

.a2-conviction__detail {
  font-family: var(--a2-font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--a2-text-muted);
  margin: 0;
  max-width: 680px;
}

@media (max-width: 768px) {
  .a2-convictions__header,
  .a2-conviction {
    grid-template-columns: 1fr;
    gap: var(--a2-space-4);
  }
  .a2-convictions__header {
    padding: var(--a2-space-6);
  }
  .a2-conviction__num {
    font-size: 48px;
    padding-top: 0;
  }
  .a2-conviction__noun {
    font-size: clamp(32px, 8vw, 44px);
  }
}



/* ==========================================================================
   PACKAGE 11 — UNIFIED NAVY HERO ZONE (v1.11)
   Hero headline + convictions intro on a single continuous navy background
   that fills roughly the first viewport. Then clean break to cream for
   the three Process/Context/Applicant convictions below.
   ========================================================================== */


/* The navy hero zone container.
   Uses min-height: 100vh so it fills at least one screen but grows if needed.
   Full-bleed approach: target the parent containers directly, forcing them
   to full-width when they contain a navy hero. This is more reliable than
   margin/transform escape tricks because it works WITH the WordPress DOM
   structure rather than against it. */

/* Step 1: When the page content contains a navy hero, make the WordPress
   content containers full-width so the navy section can fill them. */

/* Step 1: When the page content contains a navy hero, make the WordPress
   content containers full-width so the navy section can fill them.

   v1.11.5 fix: Scoped to content area only (#primary descendants).
   The previous version targeted .site-container globally which also caught
   the header's .site-container, causing the logo to sit hard-left. */

body:has(.a2-navy-hero) #primary .site-container,
body:has(.a2-navy-hero) #primary .content-container,
body:has(.a2-navy-hero) #primary,
body:has(.a2-navy-hero) #main,
body:has(.a2-navy-hero) #main .content-wrap,
body:has(.a2-navy-hero) #main .entry,
body:has(.a2-navy-hero) #main .entry-content-wrap,
body:has(.a2-navy-hero) #main .entry-content,
body:has(.a2-page-hero) #primary .site-container,
body:has(.a2-page-hero) #primary .content-container,
body:has(.a2-page-hero) #primary,
body:has(.a2-page-hero) #main,
body:has(.a2-page-hero) #main .content-wrap,
body:has(.a2-page-hero) #main .entry,
body:has(.a2-page-hero) #main .entry-content-wrap,
body:has(.a2-page-hero) #main .entry-content {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Fallback for browsers without :has() support — apply to homepage only,
   still scoped to content area only. */
body.home #primary .site-container,
body.home #primary .content-container,
body.home #primary,
body.home #main,
body.home #main .content-wrap,
body.home #main .entry,
body.home #main .entry-content-wrap,
body.home #main .entry-content {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Step 2: The navy section now sits naturally at full width
   without needing margin escape tricks.

   v1.11.4 fix: Kadence applies max-width: 1080px directly to .a2-navy-hero
   as a direct child of .entry-content. Override with !important to force
   the section to viewport width. */

.a2-navy-hero {
  background: var(--a2-primary);
  color: var(--a2-bg-card);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--a2-space-10) 0 var(--a2-space-8);
  width: 100% !important;
  max-width: none !important;
  border-radius: 0;
  box-sizing: border-box;
  position: relative;

  /* Pull up so the navy begins at the very top of the page,
     sitting behind the transparent header. */
  margin-top: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;

  /* Offset for the header — keeps content from hiding under it */
  padding-top: calc(var(--a2-space-10) + 80px);
}

/* The inner container holds content within the normal max-width,
   even though the section background extends to viewport edges. */
.a2-navy-hero__container {
  max-width: var(--a2-container);
  margin: 0 auto;
  width: 100%;
  padding-left: var(--a2-pad-x);
  padding-right: var(--a2-pad-x);
  box-sizing: border-box;
}

/* Step 3: Override Kadence's non-transparent header on the homepage.
   Force the header to be truly transparent so the navy shows through. */

body.home .site-header,
body.home .site-header-wrap,
body.home .site-header-inner-wrap,
body.home .site-header-upper-wrap,
body.home .site-header-upper-inner-wrap,
body.home .site-main-header-wrap,
body.home .site-header-row-container-inner,
body.home .site-main-header-inner-wrap,
body.home .site-header-row {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* v1.11.5: Constrain the header's inner container to align logo/menu
   with the page content max-width below. The header's .site-container
   should match the page content container so the Aspire2 logo sits
   directly above the kicker in the navy hero, not at the page edge. */

.site-header .site-container,
.site-header-wrap .site-container,
.site-main-header-wrap .site-container {
  max-width: var(--a2-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--a2-pad-x) !important;
  padding-right: var(--a2-pad-x) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Step 4: Defensive — make sure all Aspire2 full-width sections can
   actually be full-width by overriding Kadence's content child max-width. */

.entry-content > .a2-navy-hero,
.entry-content > .a2-page-hero,
.entry-content > .a2-convictions,
.entry-content > .a2-pullquote,
.entry-content > .a2-method-interactive,
.entry-content > section,
.entry-content > .wp-block-group {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Beat 1: the hero kicker + headline */

.a2-navy-hero__intro {
  margin-bottom: var(--a2-space-8);
}

.a2-navy-hero__kicker {
  font-family: var(--a2-font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 var(--a2-space-5);
}

.a2-navy-hero__headline {
  font-family: var(--a2-font-serif);
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--a2-bg-card);
  margin: 0;
  max-width: 920px;
}

/* Divider between the two beats */

.a2-navy-hero__divider {
  width: 80px;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  margin: 0 0 var(--a2-space-7) 0;
  border: none;
}

/* Beat 2: the convictions intro declaration */

.a2-navy-hero__declaration {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--a2-space-6);
  align-items: start;
}

.a2-navy-hero__declaration-label {
  font-family: var(--a2-font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  padding-top: 6px;
}

.a2-navy-hero__declaration-body {
  max-width: 820px;
}

.a2-navy-hero__declaration-lead {
  display: block;
  font-family: var(--a2-font-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--a2-bg-card);
  margin-bottom: var(--a2-space-3);
}

.a2-navy-hero__declaration-question {
  display: block;
  font-family: var(--a2-font-serif);
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--a2-bg-card);
  margin-bottom: var(--a2-space-4);
  padding-left: var(--a2-space-3);
  border-left: 2px solid rgba(255, 255, 255, 0.35);
}

.a2-navy-hero__declaration-intro {
  font-family: var(--a2-font-serif);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}

.a2-navy-hero__declaration-emphasis {
  font-style: italic;
  color: var(--a2-bg-card);
}

.a2-navy-hero__tagline {
  font-family: var(--a2-font-sans);
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.7);
  margin: var(--a2-space-5) 0 0;
  padding-top: var(--a2-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  max-width: 640px;
}


/* Tablet and mobile breakpoint */

@media (max-width: 900px) {
  .a2-navy-hero {
    padding: var(--a2-space-8) var(--a2-pad-x) var(--a2-space-7);
    padding-top: calc(var(--a2-space-8) + 70px);
    min-height: auto;
  }

  .a2-navy-hero__intro {
    margin-bottom: var(--a2-space-6);
  }

  .a2-navy-hero__declaration {
    grid-template-columns: 1fr;
    gap: var(--a2-space-4);
  }

  .a2-navy-hero__divider {
    margin-bottom: var(--a2-space-5);
  }
}


/* ==========================================================================
   CONVICTIONS LIST (cream section) — adjusted for v1.11
   The three Process/Context/Applicant convictions now start fresh on cream
   without the navy header block. We keep the structure but remove the
   navy-panel container styles for the header.
   ========================================================================== */

.a2-convictions--list-only {
  padding: var(--a2-space-9) var(--a2-pad-x) var(--a2-space-9);
  background: var(--a2-bg);
}


/* ==========================================================================
   HEADER INVERSION — when above the navy hero zone
   Applied via body class 'a2-header-inverted' toggled by JS on scroll.
   Targets Kadence's header structure.
   ========================================================================== */

/* Make the header itself transparent so the navy shows through */
body.a2-header-inverted .site-header,
body.a2-header-inverted .site-header-row-container-inner,
body.a2-header-inverted .site-header-main-section-left,
body.a2-header-inverted .site-header-main-section-center,
body.a2-header-inverted .site-header-main-section-right,
body.a2-header-inverted .site-header-inner-wrap,
body.a2-header-inverted .site-header-row,
body.a2-header-inverted .site-main-header-wrap {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Make the menu text and links light */
body.a2-header-inverted .main-navigation ul li > a,
body.a2-header-inverted .main-navigation .menu > li > a,
body.a2-header-inverted .header-navigation a,
body.a2-header-inverted .site-header-item a {
  color: var(--a2-bg-card) !important;
}

/* Hover state for inverted menu */
body.a2-header-inverted .main-navigation ul li > a:hover,
body.a2-header-inverted .main-navigation .menu > li > a:hover {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Dropdown arrow / caret in Kadence */
body.a2-header-inverted .dropdown-nav-special-toggle,
body.a2-header-inverted .menu-item-has-children > a::after {
  color: var(--a2-bg-card) !important;
}

/* The Aspire2 logo — if it's an SVG or text-based logo, it inherits.
   If it's a raster image, we can add a CSS filter to invert its luminance.
   Since the current logo is "Aspire2" wordmark in blue with red dot,
   we nudge the brightness so it reads against navy while keeping identity. */
body.a2-header-inverted .site-branding a.brand,
body.a2-header-inverted .site-title a,
body.a2-header-inverted .site-description {
  color: var(--a2-bg-card) !important;
}

/* If the logo is an uploaded image, force it to render with high contrast
   on navy. This is a safe fallback; can be refined when we see rendering. */
body.a2-header-inverted .site-branding img,
body.a2-header-inverted .custom-logo,
body.a2-header-inverted .custom-logo-link img {
  /* A light touch — raises brightness just enough that blue-on-navy reads,
     without making the logo look washed out on cream when not inverted. */
  filter: brightness(1.35) contrast(1.1);
}

/* Mobile hamburger icon inversion (Kadence uses various classes) */
body.a2-header-inverted .drawer-toggle .drawer-bar,
body.a2-header-inverted .menu-toggle-icon .bar,
body.a2-header-inverted .mobile-toggle-open-container .drawer-bar {
  background-color: var(--a2-bg-card) !important;
}

/* Smooth transitions on the inversion so the scroll change feels considered */
.site-header,
.main-navigation a,
.site-branding img,
.custom-logo {
  transition: background-color 0.3s ease, color 0.3s ease, filter 0.3s ease;
}


/* ==========================================================================
   SUBMENU STYLING (v1.11.6)
   Dropdown submenus are opaque panels overlaid on content. They are always
   cream with dark text, regardless of whether the parent header is currently
   transparent, inverted, or stuck. These rules override .a2-header-inverted
   for submenu links specifically, leaving top-level nav untouched.
   ========================================================================== */

/* The submenu panel itself */
.main-navigation .sub-menu,
.main-navigation ul ul {
  background: var(--a2-bg) !important;
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-radius-sm);
  box-shadow: 0 8px 24px rgba(15, 58, 95, 0.08);
  padding: var(--a2-space-2) 0;
  min-width: 260px;
}

/* Submenu list items: clean rhythm, no inherited margins */
.main-navigation .sub-menu li,
.main-navigation ul ul li {
  margin: 0;
}

/* Submenu links: dark text on cream, override inverted state explicitly */
.main-navigation .sub-menu li > a,
.main-navigation ul ul li > a,
body.a2-header-inverted .main-navigation .sub-menu li > a,
body.a2-header-inverted .main-navigation ul ul li > a {
  color: var(--a2-text) !important;
  background: transparent !important;
  font-family: var(--a2-font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
  padding: var(--a2-space-3) var(--a2-space-5);
  display: block;
  text-decoration: none;
  transition: color 160ms ease-out;
}

/* Submenu hover: burgundy text, background unchanged. The colour shift
   alone signals interactivity, in keeping with the editorial register. */
.main-navigation .sub-menu li > a:hover,
.main-navigation .sub-menu li > a:focus,
.main-navigation ul ul li > a:hover,
.main-navigation ul ul li > a:focus,
body.a2-header-inverted .main-navigation .sub-menu li > a:hover,
body.a2-header-inverted .main-navigation .sub-menu li > a:focus,
body.a2-header-inverted .main-navigation ul ul li > a:hover,
body.a2-header-inverted .main-navigation ul ul li > a:focus {
  color: var(--a2-accent) !important;
  background: transparent !important;
}

/* Current page indicator inside submenu */
.main-navigation .sub-menu li.current-menu-item > a,
.main-navigation ul ul li.current-menu-item > a {
  color: var(--a2-accent) !important;
}

/* Dropdown caret on the parent item: keep visible against navy.
   Override Kadence's default if it inherits text colour incorrectly. */
body.a2-header-inverted .menu-item-has-children > a::after {
  color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   HEADER CTA (v1.11.7). "Start a conversation" button.
   Placed via Kadence Header Builder as an HTML element containing:
     <a href="/start-a-conversation/" class="a2-header-cta">Start a conversation</a>
   Solid navy by default, ghost outline when over the navy hero, returns to
   solid when the header is stuck over cream content.
   ========================================================================== */

.a2-header-cta {
  display: inline-block;
  font-family: var(--a2-font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 10px 18px;
  background: var(--a2-primary) !important;
  color: var(--a2-bg) !important;
  border: 1px solid var(--a2-primary);
  border-radius: var(--a2-radius-md);
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 180ms ease-out,
              color 180ms ease-out,
              border-color 180ms ease-out;
}

.a2-header-cta:hover,
.a2-header-cta:focus {
  background: var(--a2-primary-soft) !important;
  border-color: var(--a2-primary-soft);
  color: var(--a2-bg) !important;
  text-decoration: none !important;
}

/* Inverted state (over navy hero): ghost button — transparent fill,
   cream outline, cream text. Returns to solid navy automatically once
   the user scrolls past the hero, because the body class drops. */
body.a2-header-inverted .a2-header-cta {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--a2-bg-card) !important;
}

body.a2-header-inverted .a2-header-cta:hover,
body.a2-header-inverted .a2-header-cta:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.75);
  color: var(--a2-bg-card) !important;
}

/* Mobile: scale down slightly. Keep visible rather than hiding behind
   the hamburger because this CTA is the site's primary conversion path. */
@media (max-width: 900px) {
  .a2-header-cta {
    font-size: 12px;
    padding: 8px 14px;
  }
}

@media (max-width: 600px) {
  .a2-header-cta {
    font-size: 11px;
    padding: 7px 12px;
  }
}

/* ==========================================================================
   SINGLE ARTICLE TEMPLATE (v1.11.12)
   Editorial reading experience for individual posts. Navy hero matching
   the rest of the site, featured image below, body in a 720px reading
   column with Fraunces serif typography, author bio block, closing CTA.
   ========================================================================== */

.a2-article {
  background: var(--a2-bg);
}

/* The article hero extends .a2-page-hero with article-specific meta */

.a2-article-hero .a2-page-hero__title {
  margin-bottom: var(--a2-space-5);
  max-width: 920px;
}

.a2-article-hero .a2-kicker {
  color: rgba(255, 255, 255, 0.6) !important;
  margin-bottom: var(--a2-space-4) !important;
}

.a2-article-hero__meta {
  font-family: var(--a2-font-sans);
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.01em;
  margin-top: var(--a2-space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2-space-3);
  align-items: center;
}

.a2-article-hero__byline {
  font-weight: 500;
}

.a2-article-hero__author-link {
  color: var(--a2-bg-card);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: border-color 160ms ease;
}

.a2-article-hero__author-link:hover {
  border-bottom-color: var(--a2-bg-card);
  color: var(--a2-bg-card);
}

.a2-article-hero__author-title {
  font-style: italic;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
}

.a2-article-hero__separator {
  color: rgba(255, 255, 255, 0.4);
}

.a2-article-hero__date,
.a2-article-hero__reading-time {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
}

/* Featured image: sits between hero and body, full width within container */

.a2-article-featured-image {
  background: var(--a2-bg);
  padding: var(--a2-space-7) var(--a2-pad-x) 0;
  margin: 0;
  text-align: center;
}

.a2-article-featured-image img {
  max-width: var(--a2-container);
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: var(--a2-radius-sm);
}

/* Body: 720px reading column, Fraunces serif, generous spacing */

.a2-article-body {
  background: var(--a2-bg);
  padding: var(--a2-space-9) 0;
}

.a2-article-body__container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--a2-pad-x);
}

.a2-article-body__container p {
  font-family: var(--a2-font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-5);
  letter-spacing: -0.005em;
}

/* Auto-lead first-paragraph removed in v1.11.14: misfires on imported
   articles where the first paragraph is an internal label like
   "Article #12 – Author Name" rather than a true lead paragraph. */

.a2-article-body__container h2 {
  font-family: var(--a2-font-serif);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--a2-text);
  margin: var(--a2-space-7) 0 var(--a2-space-4);
}

.a2-article-body__container h3 {
  font-family: var(--a2-font-serif);
  font-size: clamp(22px, 2.5vw, 26px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--a2-text);
  margin: var(--a2-space-6) 0 var(--a2-space-4);
}

.a2-article-body__container h4 {
  font-family: var(--a2-font-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--a2-text);
  margin: var(--a2-space-5) 0 var(--a2-space-3);
}

.a2-article-body__container h5,
.a2-article-body__container h6 {
  font-family: var(--a2-font-sans);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--a2-text-muted);
  margin: var(--a2-space-5) 0 var(--a2-space-3);
}

.a2-article-body__container ul,
.a2-article-body__container ol {
  font-family: var(--a2-font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-5);
  padding-left: var(--a2-space-5);
}

.a2-article-body__container li {
  margin-bottom: var(--a2-space-2);
}

.a2-article-body__container blockquote {
  font-family: var(--a2-font-serif);
  font-size: 24px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  color: var(--a2-primary);
  margin: var(--a2-space-7) 0;
  padding: 0 0 0 var(--a2-space-5);
  border-left: 3px solid var(--a2-accent);
}

.a2-article-body__container blockquote p {
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}

.a2-article-body__container a {
  color: var(--a2-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--a2-primary);
  transition: color 160ms ease, border-color 160ms ease;
}

.a2-article-body__container a:hover {
  color: var(--a2-accent);
  border-bottom-color: var(--a2-accent);
}

.a2-article-body__container strong,
.a2-article-body__container b {
  font-weight: 600;
  color: var(--a2-text);
}

.a2-article-body__container em,
.a2-article-body__container i {
  font-style: italic;
}

.a2-article-body__container img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--a2-space-7) auto;
  border-radius: var(--a2-radius-sm);
}

.a2-article-body__container hr {
  border: none;
  height: 1px;
  background: var(--a2-border);
  margin: var(--a2-space-7) 0;
}

/* Style for inline CTAs preserved from migration (.a2-article-cta is the
   class my transform script applied to button widgets that we kept) */
.a2-article-body__container .a2-article-cta {
  margin: var(--a2-space-6) 0;
  padding: var(--a2-space-4) var(--a2-space-5);
  background: var(--a2-bg-secondary);
  border-radius: var(--a2-radius-sm);
  font-family: var(--a2-font-sans);
  font-size: 16px;
}

.a2-article-body__container .a2-article-cta a {
  color: var(--a2-primary);
  font-weight: 500;
  border-bottom: none;
}

.a2-article-body__container .a2-article-cta a:hover {
  color: var(--a2-accent);
}

/* Author bio block: subtle bg, photo + name + title + link */

.a2-article-author-bio {
  background: var(--a2-bg-secondary);
  padding: var(--a2-space-7) 0;
  margin: 0;
}

.a2-article-author-bio__container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--a2-pad-x);
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--a2-space-5);
  align-items: center;
}

.a2-article-author-bio__avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--a2-bg-deep);
}

.a2-article-author-bio__avatar img,
.a2-article-author-bio__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.a2-article-author-bio__avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--a2-bg-deep) 0%, var(--a2-bg-secondary) 100%);
}

.a2-article-author-bio__name {
  font-family: var(--a2-font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--a2-text);
  margin: 0 0 4px;
}

.a2-article-author-bio__title {
  font-family: var(--a2-font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--a2-text-muted);
  margin: 0 0 var(--a2-space-3);
}

.a2-article-author-bio__link {
  font-family: var(--a2-font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--a2-primary);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 160ms ease;
}

.a2-article-author-bio__link:hover {
  color: var(--a2-accent);
}

/* Closing CTA: editorial reuse of the homepage closing-cta pattern */

.a2-article-closing-cta {
  background: var(--a2-primary);
  color: var(--a2-bg-card);
  padding: var(--a2-space-9) 0;
  text-align: center;
}

.a2-article-closing-cta__container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--a2-pad-x);
}

.a2-article-closing-cta .a2-kicker {
  color: rgba(255, 255, 255, 0.6) !important;
  margin-bottom: var(--a2-space-4) !important;
}

.a2-article-closing-cta__title {
  font-family: var(--a2-font-serif);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--a2-bg-card);
  margin: 0 0 var(--a2-space-4);
}

.a2-article-closing-cta__lead {
  font-family: var(--a2-font-sans);
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 auto var(--a2-space-6);
  max-width: 580px;
}

.a2-article-closing-cta .a2-btn {
  display: inline-block;
  font-family: var(--a2-font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 14px 28px;
  background: var(--a2-bg-card);
  color: var(--a2-primary);
  border: 1px solid var(--a2-bg-card);
  border-radius: var(--a2-radius-md);
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}

.a2-article-closing-cta .a2-btn:hover {
  background: transparent;
  color: var(--a2-bg-card);
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  .a2-article-hero__meta {
    font-size: 13px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--a2-space-2);
  }

  .a2-article-hero__separator {
    display: none;
  }

  .a2-article-body {
    padding: var(--a2-space-7) 0;
  }

  .a2-article-body__container p,
  .a2-article-body__container ul,
  .a2-article-body__container ol {
    font-size: 16px;
    line-height: 1.6;
  }

  .a2-article-author-bio__container {
    grid-template-columns: 64px 1fr;
    gap: var(--a2-space-4);
  }

  .a2-article-author-bio__avatar {
    width: 64px;
    height: 64px;
  }

  .a2-article-author-bio__name {
    font-size: 18px;
  }
}

/* ==========================================================================
   INSIGHTS ARCHIVE PAGE (v1.11.12)
   The /insights/ listing page. Navy hero, 3-column card grid, no filters
   in v1 (taxonomies not yet populated). Pagination via WordPress paginate_links.
   ========================================================================== */

.a2-insights-page {
  background: var(--a2-bg);
}

/* Hero reuses .a2-page-hero, no overrides needed */

.a2-insights-list {
  padding: var(--a2-space-9) 0;
  background: var(--a2-bg);
}

.a2-insights-list__container {
  max-width: var(--a2-container);
  margin: 0 auto;
  padding: 0 var(--a2-pad-x);
}

/* The 3-column card grid */

.a2-insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--a2-space-7) var(--a2-space-6);
  margin-bottom: var(--a2-space-9);
}

@media (max-width: 1024px) {
  .a2-insights-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--a2-space-6) var(--a2-space-5);
  }
}

@media (max-width: 640px) {
  .a2-insights-grid {
    grid-template-columns: 1fr;
    gap: var(--a2-space-6);
  }
}

/* Individual card */

.a2-insights-card {
  background: var(--a2-bg-card);
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-radius-md);
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.a2-insights-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 58, 95, 0.08);
  border-color: var(--a2-border-strong);
}

.a2-insights-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.a2-insights-card__image {
  width: 100%;
  /* v1.17.9: was 16/10 (1.6:1). The article header images are
     1024x427 (≈2.4:1) — far wider than the old box, so object-fit:
     cover scaled them up to fill the too-tall frame and cropped heavy
     amounts off every edge ("cut off on all sides"). The box now
     matches the actual source ratio, so cover has essentially nothing
     to crop and the images sit correctly. If header images of other
     ratios are added later, object-position keeps the crop sensible. */
  aspect-ratio: 1024 / 427;
  overflow: hidden;
  background: var(--a2-bg-secondary);
}

.a2-insights-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 400ms ease;
}

.a2-insights-card:hover .a2-insights-card__image img {
  transform: scale(1.03);
}

.a2-insights-card__image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--a2-bg-secondary) 0%, var(--a2-bg-deep) 100%);
}

.a2-insights-card__body {
  padding: var(--a2-space-5) var(--a2-space-5) var(--a2-space-5);
}

.a2-insights-card__kicker {
  font-family: var(--a2-font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--a2-accent);
  margin: 0 0 var(--a2-space-3);
}

.a2-insights-card__title {
  font-family: var(--a2-font-serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-3);
}

.a2-insights-card__excerpt {
  font-family: var(--a2-font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--a2-text-muted);
  margin: 0 0 var(--a2-space-4);
}

.a2-insights-card__meta {
  font-family: var(--a2-font-sans);
  font-size: 12px;
  color: var(--a2-text-muted);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: var(--a2-space-2);
  flex-wrap: wrap;
}

.a2-insights-card__author {
  font-weight: 500;
  color: var(--a2-text);
}

.a2-insights-card__separator {
  color: var(--a2-text-tertiary);
}

.a2-insights-card__date {
  color: var(--a2-text-muted);
}

/* Pagination */

.a2-insights-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--a2-space-2);
  flex-wrap: wrap;
  padding: var(--a2-space-7) 0 0;
  border-top: 1px solid var(--a2-border);
}

.a2-insights-pagination .page-numbers {
  font-family: var(--a2-font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--a2-text-muted);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--a2-radius-sm);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.a2-insights-pagination .page-numbers:hover {
  color: var(--a2-primary);
  border-color: var(--a2-border);
}

.a2-insights-pagination .page-numbers.current {
  color: var(--a2-bg-card);
  background: var(--a2-primary);
  border-color: var(--a2-primary);
}

.a2-insights-pagination .page-numbers.dots {
  border: none;
  cursor: default;
}

.a2-insights-pagination .page-numbers.prev,
.a2-insights-pagination .page-numbers.next {
  font-weight: 500;
  color: var(--a2-primary);
}

/* Empty state */

.a2-insights-empty {
  padding: var(--a2-space-9) 0;
  text-align: center;
  font-family: var(--a2-font-serif);
  font-size: 19px;
  color: var(--a2-text-muted);
}

/* When .a2-insights-page is on the body, kill Kadence's content max-width
   the same way we did for navy-hero pages. */

body:has(.a2-insights-page) #primary .site-container,
body:has(.a2-insights-page) #primary .content-container,
body:has(.a2-insights-page) #primary,
body:has(.a2-insights-page) #main,
body:has(.a2-insights-page) #main .content-wrap,
body:has(.a2-insights-page) #main .entry,
body:has(.a2-insights-page) #main .entry-content-wrap,
body:has(.a2-insights-page) #main .entry-content {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Same for the article body wrapper */

body:has(.a2-article) #primary .site-container,
body:has(.a2-article) #primary .content-container,
body:has(.a2-article) #primary,
body:has(.a2-article) #main,
body:has(.a2-article) #main .content-wrap,
body:has(.a2-article) #main .entry,
body:has(.a2-article) #main .entry-content-wrap,
body:has(.a2-article) #main .entry-content {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ==========================================================================
   PAGE HERO LEAD WRAP (v1.11.13)
   When a page hero pulls its subheading from the page body content via
   the_content(), wrap it in .a2-page-hero__lead-wrap. Style any paragraphs
   inside with the lead-paragraph treatment (matching the original
   .a2-page-hero__lead styling, but accepting multiple paragraphs).
   ========================================================================== */

.a2-page-hero__lead-wrap {
  max-width: 720px;
}

.a2-page-hero__lead-wrap p {
  font-family: var(--a2-font-serif);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 var(--a2-space-3);
}

.a2-page-hero__lead-wrap p:last-child {
  margin-bottom: 0;
}

/* If editors put links in the lead, style consistently with the navy hero */
.a2-page-hero__lead-wrap a {
  color: var(--a2-bg-card);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: border-color 160ms ease;
}

.a2-page-hero__lead-wrap a:hover {
  border-bottom-color: var(--a2-bg-card);
}

/* Suppress any unexpected heading or list tags from appearing in the hero
   awkwardly. If editors paste complex content, it'll fall back to the lead
   typography rather than rendering as an oversized H2. */
.a2-page-hero__lead-wrap h1,
.a2-page-hero__lead-wrap h2,
.a2-page-hero__lead-wrap h3,
.a2-page-hero__lead-wrap h4,
.a2-page-hero__lead-wrap h5,
.a2-page-hero__lead-wrap h6 {
  font-family: var(--a2-font-serif);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  color: var(--a2-bg-card);
  margin: 0 0 var(--a2-space-3);
}

/* ==========================================================================
   MOBILE DRAWER MENU (v1.11.15)
   The hamburger menu drawer uses Kadence's .popup-drawer container with
   a dark background. Submenus inside the drawer were inheriting Kadence's
   default white background, making white menu text invisible. Override
   to match the drawer's dark treatment.
   ========================================================================== */

/* Submenus inside the mobile drawer: transparent bg, white text */
.popup-drawer .sub-menu,
.popup-drawer ul.sub-menu,
.mobile-toggle-open-container .sub-menu,
.mobile-toggle-open-container ul.sub-menu {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.popup-drawer .sub-menu li,
.popup-drawer .sub-menu .menu-item,
.mobile-toggle-open-container .sub-menu li,
.mobile-toggle-open-container .sub-menu .menu-item {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.popup-drawer .sub-menu li:last-child,
.popup-drawer .sub-menu .menu-item:last-child,
.mobile-toggle-open-container .sub-menu li:last-child,
.mobile-toggle-open-container .sub-menu .menu-item:last-child {
  border-bottom: none;
}

.popup-drawer .sub-menu li a,
.popup-drawer .sub-menu .menu-item a,
.popup-drawer .sub-menu li a:link,
.popup-drawer .sub-menu li a:visited,
.mobile-toggle-open-container .sub-menu li a,
.mobile-toggle-open-container .sub-menu .menu-item a {
  color: rgba(255, 255, 255, 0.85) !important;
  background: transparent !important;
  padding-left: var(--a2-space-5) !important;
}

.popup-drawer .sub-menu li a:hover,
.popup-drawer .sub-menu li a:focus,
.popup-drawer .sub-menu .menu-item a:hover,
.mobile-toggle-open-container .sub-menu li a:hover,
.mobile-toggle-open-container .sub-menu .menu-item a:hover {
  color: var(--a2-bg-card) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Top-level items in the drawer should also use clean dark styling */
.popup-drawer .menu-item a,
.mobile-toggle-open-container .menu-item a {
  color: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   FOOTER (v1.11.16)
   Editorial-advisory layout: brand + firm statement, three nav columns,
   minimal legal bar with trading name disclosure. Navy bg, restrained
   typography, no social grid, no membership badges.
   Replaces Kadence's parent footer via footer.php override.
   ========================================================================== */

.a2-footer-wrapper {
  background: var(--a2-primary);
  color: var(--a2-bg-card);
}

.a2-footer {
  background: var(--a2-primary);
  color: var(--a2-bg-card);
  padding: var(--a2-space-9) 0 var(--a2-space-6);
}

.a2-footer__container {
  max-width: var(--a2-container);
  margin: 0 auto;
  padding: 0 var(--a2-pad-x);
}

/* Top zone: 4-column grid. Brand column wider than nav columns. */

.a2-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--a2-space-7);
  padding-bottom: var(--a2-space-7);
  margin-bottom: var(--a2-space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.a2-footer__col--brand {
  padding-right: var(--a2-space-4);
}

.a2-footer__brand-link {
  display: inline-block;
  text-decoration: none;
  margin-bottom: var(--a2-space-4);
  line-height: 0; /* prevent inline-image whitespace below */
}

/* v1.11.17: actual logo image replacing the v1.11.16 text wordmark.
   Height fixed, width auto to preserve aspect ratio. Path resolves via
   home_url() so works on both new.aspire2edu.com.au and aspire2edu.com.au. */
.a2-footer__logo-img {
  height: 64px;
  width: auto;
  max-width: 100%;
  display: block;
}

.a2-footer__statement {
  font-family: var(--a2-font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  max-width: 340px;
}

/* Nav columns */

.a2-footer__heading {
  font-family: var(--a2-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 var(--a2-space-4);
}

.a2-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.a2-footer__links li {
  margin-bottom: var(--a2-space-2);
}

.a2-footer__links a {
  font-family: var(--a2-font-sans);
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition: color 160ms ease, opacity 160ms ease, text-decoration-color 160ms ease;
}

.a2-footer__links a:hover,
.a2-footer__links a:focus {
  color: var(--a2-bg-card);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

/* Legal bar at bottom */

.a2-footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--a2-space-3);
}

.a2-footer__copyright {
  font-family: var(--a2-font-sans);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  letter-spacing: 0.005em;
}

.a2-footer__legal-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  margin-left: var(--a2-space-3);
  padding-left: var(--a2-space-3);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  transition: color 160ms ease;
}

.a2-footer__legal-link:hover,
.a2-footer__legal-link:focus {
  color: var(--a2-bg-card);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.a2-footer__location {
  font-family: var(--a2-font-sans);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  letter-spacing: 0.005em;
}

/* If Kadence's default footer markup somehow renders alongside ours
   (in case footer.php override doesn't take), hide it. Defensive. */

.kadence-footer-wrap:not(.a2-footer-wrapper),
.site-footer:not(.a2-footer-wrapper),
.kb-footer-row,
.footer-wrap-section:not(.a2-footer) {
  display: none !important;
}

/* Tablet breakpoint: 4 columns -> 2 columns with brand spanning full width */

@media (max-width: 900px) {
  .a2-footer {
    padding: var(--a2-space-7) 0 var(--a2-space-5);
  }

  .a2-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--a2-space-6);
  }

  .a2-footer__col--brand {
    grid-column: 1 / -1;
    padding-right: 0;
    margin-bottom: var(--a2-space-3);
  }

  .a2-footer__statement {
    max-width: 480px;
  }
}

/* Mobile breakpoint: stack everything */

@media (max-width: 540px) {
  .a2-footer__top {
    grid-template-columns: 1fr;
    gap: var(--a2-space-5);
  }

  .a2-footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--a2-space-2);
  }

  .a2-footer__copyright {
    line-height: 1.55;
  }

  .a2-footer__legal-link {
    display: inline-block;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    margin-top: var(--a2-space-2);
  }
}

/* ==========================================================================
   TEAM CARDS — ABOUT PAGE (v1.11.19)
   Editorial-advisory team grid: photo + name + role + LinkedIn,
   click-to-expand bio using <details>/<summary> (no JS).
   Two grids: leadership (5 cards, 4-up) and experts (7 cards, 4-up but more
   compact). Mobile collapses to 2 cols then 1 col.
   ========================================================================== */

/* Section structure */

.a2-people__section {
  margin-top: var(--a2-space-9);
}

.a2-people__section:first-of-type {
  margin-top: var(--a2-space-7);
}

.a2-people__section-title {
  font-family: var(--a2-font-serif);
  font-size: clamp(24px, 2.8vw, 30px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-3);
  padding-bottom: var(--a2-space-3);
  border-bottom: 1px solid var(--a2-border);
}

.a2-people__section-intro {
  font-family: var(--a2-font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--a2-text-muted);
  margin: 0 0 var(--a2-space-6);
  max-width: 720px;
}

/* Grid layouts */

.a2-team-grid {
  display: grid;
  gap: var(--a2-space-6) var(--a2-space-5);
}

.a2-team-grid--leadership {
  grid-template-columns: repeat(4, 1fr);
}

.a2-team-grid--experts {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
  .a2-team-grid--leadership,
  .a2-team-grid--experts {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .a2-team-grid--leadership,
  .a2-team-grid--experts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .a2-team-grid--leadership,
  .a2-team-grid--experts {
    grid-template-columns: 1fr;
  }
}

/* The card itself uses <details> for native expand/collapse */

.a2-team-card {
  background: var(--a2-bg-card);
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-radius-md);
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.a2-team-card[open] {
  border-color: var(--a2-border-strong);
  box-shadow: 0 8px 24px rgba(15, 58, 95, 0.08);
}

/* When a card is expanded, span the full grid row so the bio has reading width */
.a2-team-card[open] {
  grid-column: 1 / -1;
}

/* The summary serves as the always-visible card head */

.a2-team-card__head {
  cursor: pointer;
  list-style: none;
  display: block;
  outline: none;
}

.a2-team-card__head::-webkit-details-marker {
  display: none;
}

.a2-team-card__head::marker {
  display: none;
  content: '';
}

/* Photo zone: portrait aspect ratio, top of card */

.a2-team-card__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--a2-bg-secondary);
  border-bottom: 1px solid var(--a2-border);
}

.a2-team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}

.a2-team-card:hover .a2-team-card__photo img {
  transform: scale(1.02);
}

/* Info zone: name, role, LinkedIn, expand toggle */

.a2-team-card__info {
  padding: var(--a2-space-4) var(--a2-space-4) var(--a2-space-5);
}

.a2-team-card__name {
  font-family: var(--a2-font-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-1);
}

.a2-team-card__role {
  font-family: var(--a2-font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--a2-text-muted);
  margin: 0 0 var(--a2-space-3);
  letter-spacing: 0.005em;
}

.a2-team-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a2-space-3);
  padding-top: var(--a2-space-3);
  border-top: 1px solid var(--a2-border);
}

.a2-team-card__linkedin {
  color: var(--a2-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 160ms ease;
  flex-shrink: 0;
}

.a2-team-card__linkedin:hover,
.a2-team-card__linkedin:focus {
  color: var(--a2-primary);
}

.a2-team-card__expand-toggle {
  font-family: var(--a2-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--a2-primary);
  letter-spacing: 0.005em;
  transition: color 160ms ease;
  user-select: none;
}

.a2-team-card__expand-toggle::after {
  content: ' →';
  display: inline-block;
  transition: transform 200ms ease;
}

.a2-team-card[open] .a2-team-card__expand-toggle {
  color: var(--a2-text-muted);
}

.a2-team-card[open] .a2-team-card__expand-toggle::before {
  content: 'Hide bio';
}

.a2-team-card[open] .a2-team-card__expand-toggle {
  font-size: 0;
}

.a2-team-card[open] .a2-team-card__expand-toggle::before {
  font-size: 13px;
}

.a2-team-card[open] .a2-team-card__expand-toggle::after {
  content: ' ↑';
}

.a2-team-card__head:hover .a2-team-card__expand-toggle {
  color: var(--a2-accent);
}

/* Expanded bio area */

.a2-team-card__bio {
  padding: var(--a2-space-5) var(--a2-space-5) var(--a2-space-6);
  border-top: 1px solid var(--a2-border);
  background: var(--a2-bg-secondary);
  max-width: 720px;
  margin: 0 auto;
}

.a2-team-card__bio p {
  font-family: var(--a2-font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-4);
}

.a2-team-card__bio p:last-child {
  margin-bottom: 0;
}

.a2-team-card__bio strong {
  font-weight: 600;
  color: var(--a2-text);
}

/* When expanded card spans full width on desktop, the summary itself becomes
   a 2-column grid (photo left, info right). The bio is a natural sibling
   below the summary, taking full card width. Cleaner than v1.11.19's
   display:contents approach which had auto-placement bugs. */

@media (min-width: 769px) {
  .a2-team-card[open] .a2-team-card__head {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 0;
    align-items: stretch;
  }

  .a2-team-card[open] .a2-team-card__photo {
    aspect-ratio: 3 / 4;
    border-bottom: none;
    border-right: 1px solid var(--a2-border);
  }

  .a2-team-card[open] .a2-team-card__info {
    padding: var(--a2-space-6) var(--a2-space-6) var(--a2-space-5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 0;
  }

  .a2-team-card[open] .a2-team-card__bio {
    border-top: 1px solid var(--a2-border);
    padding: var(--a2-space-6) var(--a2-space-7) var(--a2-space-7);
    max-width: none;
    margin: 0;
    background: var(--a2-bg-card);
  }

  /* When open, the info area's name+role sit at the top, actions at the
     bottom of the photo height. Visual balance with photo column. */
  .a2-team-card[open] .a2-team-card__name {
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.018em;
    margin-bottom: var(--a2-space-1);
  }

  .a2-team-card[open] .a2-team-card__role {
    font-size: 14px;
    margin-bottom: 0;
    min-height: 0;
  }
}

/* Existing .a2-people styles need verification: remove the old ".coming soon"
   note styling if it exists; the new grids replace that section entirely. */

/* ==========================================================================
   TEAM CARDS — POLISH PASS (v1.11.20)
   Sharpening up the v1.11.19 baseline: auto-fill grid so the leadership
   row distributes evenly, consistent role heights, photo zone visually
   anchored, more confident hover, brand colour on links/icons.
   ========================================================================== */

/* Auto-fill grid: cards distribute evenly regardless of count.
   Min 220px per card means 4 cards fit at >=940px viewport,
   3 at 720-940, 2 at 480-720, 1 below. */
.a2-team-grid--leadership,
.a2-team-grid--experts {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Override the v1.11.19 fixed-column rules that caused the orphan-5th-card
   issue on leadership. Auto-fill above takes precedence. */
@media (max-width: 1024px) {
  .a2-team-grid--leadership,
  .a2-team-grid--experts {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (max-width: 768px) {
  .a2-team-grid--leadership,
  .a2-team-grid--experts {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (max-width: 480px) {
  .a2-team-grid--leadership,
  .a2-team-grid--experts {
    grid-template-columns: 1fr;
  }
}

/* Photo zone: subtle bg differentiation so the white-background portraits
   don't float into the card body */
.a2-team-card__photo {
  background: var(--a2-bg-deep);
  position: relative;
}

/* Subtle photo treatment: very mild contrast bump for consistency across
   photos that come from different sources */
.a2-team-card__photo img {
  filter: contrast(1.02) saturate(0.98);
}

/* Info area: tighter padding for less vertical bulk */
.a2-team-card__info {
  padding: var(--a2-space-4) var(--a2-space-4) var(--a2-space-4);
}

/* Role text: min-height to keep card heights consistent regardless of
   whether the role wraps to one or two lines */
.a2-team-card__role {
  min-height: 36px;
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 var(--a2-space-3);
}

/* Actions row: lose the top border (it was redundant given the card has
   its own border). Use vertical spacing alone for separation. */
.a2-team-card__actions {
  border-top: none;
  padding-top: 0;
}

/* LinkedIn icon: brand navy by default, burgundy on hover */
.a2-team-card__linkedin {
  color: var(--a2-primary);
}

.a2-team-card__linkedin:hover,
.a2-team-card__linkedin:focus {
  color: var(--a2-accent);
}

/* "Read full bio" toggle: more refined, brand colour, clear arrow rotation
   on open state */
.a2-team-card__expand-toggle {
  font-family: var(--a2-font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--a2-primary);
}

.a2-team-card__expand-toggle::after {
  content: ' →';
  display: inline-block;
  transition: transform 240ms ease;
}

/* When open: rotate arrow 90deg downward and change text via pseudo */
.a2-team-card[open] .a2-team-card__expand-toggle {
  font-size: 0;
}

.a2-team-card[open] .a2-team-card__expand-toggle::before {
  content: 'Close';
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--a2-text-muted);
}

.a2-team-card[open] .a2-team-card__expand-toggle::after {
  content: ' ×';
  font-size: 13px;
  color: var(--a2-text-muted);
  transform: none;
}

.a2-team-card__head:hover .a2-team-card__expand-toggle {
  color: var(--a2-accent);
}

.a2-team-card[open] .a2-team-card__head:hover .a2-team-card__expand-toggle::before {
  color: var(--a2-accent);
}

/* Hover: more confident lift + navy border + softer shadow */
.a2-team-card {
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.a2-team-card:hover {
  border-color: var(--a2-primary);
  box-shadow: 0 6px 20px rgba(15, 58, 95, 0.07);
  transform: translateY(-2px);
}

.a2-team-card[open]:hover {
  transform: none;
}

/* Names: slightly tighter, very subtle letter-spacing nudge */
.a2-team-card__name {
  font-size: 19px;
  letter-spacing: -0.012em;
  margin: 0 0 var(--a2-space-1);
}

/* ==========================================================================
   INSIGHTS FILTER PILLS (v1.11.24)
   Above the article grid: pill bar showing 8 stream categories + "All".
   Active pill highlighted in navy. Click reloads page with ?stream= param.
   ========================================================================== */

.a2-insights-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2-space-2);
  margin-bottom: var(--a2-space-7);
  padding-bottom: var(--a2-space-5);
  border-bottom: 1px solid var(--a2-border);
  /* v1.17.13: when a filter pill is clicked the page reloads and lands
     at #a2-filter (this nav) rather than the page top, so the result
     appears "in front of you" instead of bouncing to the top. The
     scroll-margin-top gives breathing room so the bar sits a little
     below the viewport edge, not jammed against it. */
  scroll-margin-top: var(--a2-space-7);
}

.a2-insights-filter-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--a2-font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--a2-text-muted);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--a2-border);
  border-radius: 999px;
  background: transparent;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
  white-space: nowrap;
}

.a2-insights-filter-pill:hover,
.a2-insights-filter-pill:focus {
  color: var(--a2-primary);
  border-color: var(--a2-primary);
}

.a2-insights-filter-pill.is-active {
  background: var(--a2-primary);
  color: var(--a2-bg-card);
  border-color: var(--a2-primary);
}

.a2-insights-filter-pill.is-active:hover {
  background: var(--a2-primary);
  color: var(--a2-bg-card);
  opacity: 0.92;
}

@media (max-width: 540px) {
  .a2-insights-filters {
    margin-bottom: var(--a2-space-5);
    padding-bottom: var(--a2-space-4);
  }

  .a2-insights-filter-pill {
    font-size: 12px;
    padding: 6px 12px;
  }
}

/* ==========================================================================
   FILTERED-LOAD BEHAVIOUR (v1.17.13)

   When a stream filter pill is clicked the page reloads to
   ...?stream=X#a2-filter. These rules make that reload land gracefully
   at the filter bar with the new results already shown — instead of
   bouncing to the top of the page and re-running the hero animation.
   The reload still happens (this is the safe, low-risk approach, not
   AJAX) but the felt experience is "click, the list changes in front
   of me" rather than "the whole page resets".
   ========================================================================== */

/* Smooth glide to the #a2-filter anchor rather than an instant teleport,
   so it reads as the page moving to show the result. Scoped to the
   stream-group pages only — does not change global scroll behaviour. */
html:has(.a2-stream-group) {
  scroll-behavior: smooth;
}

/* On a filtered load (.is-filtered set by the template when ?stream= is
   active) the hero is scrolled past anyway, so its 14s ken-burns zoom
   is wasted motion that also makes the reload feel heavier. Suppress it
   on filtered loads; a fresh unfiltered visit still gets the animation. */
.a2-stream-group.is-filtered .a2-page-hero::after {
  animation: none;
}

/* Respect reduced-motion: no smooth-scroll forcing for users who ask
   for less motion (the jump still lands at the filter bar, just
   instantly, which is fine and is the accessible behaviour). */
@media (prefers-reduced-motion: reduce) {
  html:has(.a2-stream-group) {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   SECTION HERO BAND (v1.17.12)

   A mid-page section carrying the SAME text-over-photo treatment as the
   page heroes — same image layer, same filter/blend/opacity, same
   ::before overlay, same heading + subheading typography — but as a
   content band between sections rather than a page-top hero. "Same as
   the heroes, except it's a section."

   Reuses the hero's visual language deliberately so it reads as native.
   Differences from a page hero: shorter (it punctuates, doesn't open a
   page), and it carries its own --a2-section-hero-image variable so each
   placement can use its own photo. Unlike the decorative
   .a2-section-image strip this carries real text, so it is NOT
   aria-hidden and its heading is a real <h2> in the document outline. */

.a2-section-hero {
  position: relative;
  width: 100%;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--a2-space-9) 0;
  background: var(--a2-primary);
  overflow: hidden;
  margin: 0;
}

.a2-section-hero__container {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--a2-container);
  margin: 0 auto;
  padding: 0 var(--a2-pad-x);
}

.a2-section-hero__title {
  font-family: var(--a2-font-serif);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--a2-bg-card);
  margin: 0 0 var(--a2-space-4);
  max-width: 820px;
}

.a2-section-hero__subtitle {
  font-family: var(--a2-font-serif);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  max-width: 680px;
}

.a2-section-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: var(--a2-section-hero-image, none);
  background-size: cover;
  background-position: var(--a2-section-hero-image-position, center);
  background-repeat: no-repeat;
  filter: contrast(1.05) brightness(0.82) saturate(0.45);
  mix-blend-mode: luminosity;
  opacity: 0.50;
  animation: a2-page-hero-kenburns 14s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.a2-section-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image:
    radial-gradient(
      ellipse 50% 45% at 78% 25%,
      rgba(255, 230, 180, 0.06) 0%,
      rgba(255, 230, 180, 0.02) 45%,
      rgba(255, 230, 180, 0) 75%
    ),
    linear-gradient(
      180deg,
      rgba(10, 41, 69, 0.55) 0%,
      rgba(10, 41, 69, 0.30) 28%,
      rgba(10, 41, 69, 0.30) 72%,
      rgba(10, 41, 69, 0.55) 100%
    );
}

@media (max-width: 768px) {
  .a2-section-hero {
    min-height: 320px;
    padding: var(--a2-space-8) 0;
  }
  .a2-section-hero::after {
    opacity: 0.30;
  }
}

/* ==========================================================================
   LEGAL / POLICY PAGES (v1.17.11)

   Reusable container for policy documents (Privacy Collection Statement,
   and any future Terms / policies). Calm, readable, single column, in
   the established type and palette. Generous measure for dense legal
   text; clear heading rhythm so a long statement stays navigable.
   ========================================================================== */

.a2-legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--a2-space-8) 0;
  font-family: var(--a2-font-serif);
  color: var(--a2-text);
}

.a2-legal-page__intro {
  font-size: 15px;
  font-family: var(--a2-font-sans);
  color: var(--a2-text-muted);
  padding-bottom: var(--a2-space-5);
  border-bottom: 1px solid var(--a2-border);
  margin: 0 0 var(--a2-space-7);
}

.a2-legal-page h2 {
  font-family: var(--a2-font-serif);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--a2-text);
  margin: var(--a2-space-7) 0 var(--a2-space-3);
}

.a2-legal-page h2:first-of-type {
  margin-top: 0;
}

.a2-legal-page p {
  font-size: 17px;
  line-height: 1.72;
  color: var(--a2-text-muted);
  margin: 0 0 var(--a2-space-4);
}

.a2-legal-page ul {
  margin: 0 0 var(--a2-space-5);
  padding-left: 1.3em;
}

.a2-legal-page li {
  font-size: 17px;
  line-height: 1.7;
  color: var(--a2-text-muted);
  margin: 0 0 var(--a2-space-2);
}

.a2-legal-page__rule {
  border: none;
  border-top: 1px solid var(--a2-border);
  margin: var(--a2-space-8) 0 var(--a2-space-6);
}

.a2-legal-page__doclink {
  font-family: var(--a2-font-sans);
  font-size: 15px;
}

.a2-legal-page__doclink a {
  color: var(--a2-primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--a2-accent);
  padding-bottom: 1px;
}

.a2-legal-page__doclink a:hover {
  color: var(--a2-accent);
}

/* ==========================================================================
   INSIGHTS HUB (v1.17.4)

   The Insights page is an explanatory hub, not a feed. Three sections,
   each introducing a destination (Voices of Change, Aspire2,
   Publications) and routing to it. Same explain-and-route model as the
   For Boards & Systems landing. Calm editorial treatment in the
   established palette/type — these are orientation, not content cards,
   so they read as considered prose with a clear route, not as a grid.
   ========================================================================== */

.a2-hub {
  max-width: 760px;
  margin: 0 auto;
}

.a2-hub__item {
  padding: var(--a2-space-8) 0;
  border-bottom: 1px solid var(--a2-border);
}

.a2-hub__item:first-child {
  padding-top: var(--a2-space-6);
}

.a2-hub__item:last-child {
  border-bottom: none;
}

.a2-hub__kicker {
  font-family: var(--a2-font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--a2-accent);
  margin: 0 0 var(--a2-space-3);
}

.a2-hub__title {
  font-family: var(--a2-font-serif);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-4);
}

.a2-hub__text {
  font-family: var(--a2-font-serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--a2-text-muted);
  margin: 0 0 var(--a2-space-5);
}

.a2-hub__link {
  display: inline-flex;
  align-items: center;
  font-family: var(--a2-font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--a2-primary);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--a2-accent);
  transition: color 0.18s ease, border-color 0.18s ease;
}

.a2-hub__link:hover {
  color: var(--a2-accent);
}

@media (max-width: 540px) {
  .a2-hub__item {
    padding: var(--a2-space-6) 0;
  }

  .a2-hub__text {
    font-size: 16px;
    line-height: 1.65;
  }
}

/* ==========================================================================
   VOICES OF CHANGE FLAGSHIP SECTION (v1.16.2)


   Full-bleed navy field that breaks out of the Insights content
   container to span the full viewport. The section name is the
   masthead headline, set large. Echoes the home page hero's visual
   language so VoC inherits the firm's most authoritative surface.
   Two-column body at desktop keeps line length readable while using
   the full width. Collapses to one column on tablet and mobile.

   The full-bleed technique: the block lives inside
   .a2-insights-list__container (which has horizontal padding), so we
   pull it out to 100vw with symmetric negative margins, then
   re-establish the 1080 container width on the inner element.
   ========================================================================== */

.a2-voc-flag {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  background: var(--a2-primary);
  padding: var(--a2-space-9) 0;
  margin-top: 0;
  margin-bottom: var(--a2-space-8);
}

/* v1.17.3: gap fix. .a2-insights-list has 96px (space-9) top padding,
   correct on pages where the filter pills are the first element (it
   gives them breathing room under the hero). But on the Voices of
   Change page the flagship navy band is the FIRST child, and after
   v1.17.2 removed its masthead heading, that 96px (stacking with the
   hero's 64px bottom padding) became ~160px of empty white space
   between the hero and the navy band. A full-bleed identity band
   should sit snug under the hero (same as the home page hero ->
   next-section relationship). Scoped strictly to the case where
   .a2-voc-flag is the FIRST child of the container, so pages WITHOUT
   a flagship (Aspire2, Publications, old Insights) keep their pill
   breathing room untouched. */
.a2-insights-list__container > .a2-voc-flag:first-child {
  margin-top: calc(-1 * var(--a2-space-9));
}

.a2-voc-flag__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}

.a2-voc-flag__name {
  font-family: var(--a2-font-serif);
  font-size: clamp(34px, 4.6vw, 52px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0 0 var(--a2-space-6);
  max-width: 800px;
}

.a2-voc-flag__body {
  max-width: 740px;
  /* 740px (~72 chars at 19px serif) keeps line length within the
     comfortable reading range while giving the text real presence
     against the full-bleed navy field. (v1.17.2: the headline that
     formerly sat above this was removed — the page hero carries the
     heading now; the .a2-voc-flag__name rule below is retained but
     unused in case a heading is reinstated later.) */
}

.a2-voc-flag__body p {
  font-family: var(--a2-font-serif);
  font-size: 19px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.84);
  margin: 0 0 var(--a2-space-5);
}

.a2-voc-flag__body p:last-child {
  margin-bottom: 0;
}

/* The optional data line. Styled and ready; only renders when the
   template block is uncommented with a verified figure. At flagship
   scale this carries real credibility weight — worth prioritising a
   confirmed number. */
.a2-voc-flag__datum {
  font-family: var(--a2-font-sans);
  font-size: 15px;
  font-weight: 500;
  color: #E8B4B3;
  margin: var(--a2-space-7) 0 0;
  padding-top: var(--a2-space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  max-width: 740px;
}

@media (max-width: 768px) {
  .a2-voc-flag {
    padding: var(--a2-space-8) 0;
  }
}

@media (max-width: 540px) {
  .a2-voc-flag {
    padding: var(--a2-space-7) 0;
    margin-bottom: var(--a2-space-6);
  }

  .a2-voc-flag__body p {
    font-size: 17px;
    line-height: 1.68;
  }
}

/* ==========================================================================
   PUBLICATIONS SHOWCASE (v1.17.0)

   The Publications page (a stream-group page with layout=publications).
   Each entry is the "Publication Entry" block pattern. Designed as an
   editorial showcase — a contributor, a flexible body, and one or more
   labelled links — NOT a product-card grid. Content is deliberately
   irregular (one book or several, PDFs, white papers, citation lists),
   so the frame is consistent but the interior flexes. Single column,
   generous separation, reads like a curated reading list.
   ========================================================================== */

.a2-publications-list {
  max-width: 1000px; /* v1.17.7: widened from 760 to give the text a
                        readable measure beside the doubled (340px)
                        cover. Single source of truth for this width. */
  margin: 0 auto;
}

.a2-publication-entry {
  padding: var(--a2-space-8) 0;
  border-bottom: 1px solid var(--a2-border);
}

.a2-publication-entry:first-child {
  padding-top: var(--a2-space-6);
}

.a2-publication-entry:last-child {
  border-bottom: none;
}

/* v1.17.5: optional cover layout. An entry MAY include a cover image
   (most books) or not (research-citation lists, the partner block).
   .a2-publication-entry__inner is a grid: when a .a2-publication-entry__cover
   is present it becomes two columns (cover | main); with no cover block
   the single __main fills the row, so no-image entries read exactly as
   the original editorial list with no empty gap. Collapses to one
   column on narrow screens. Modest contained cover, not a jacket grid. */
.a2-publication-entry__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--a2-space-6);
  align-items: start;
}

.a2-publication-entry__inner:has(.a2-publication-entry__cover) {
  grid-template-columns: 340px 1fr;
}

/* v1.17.7: covers doubled (170 -> 340). The .a2-publications-list
   width was widened (see its rule above) so the text keeps a readable
   measure beside the larger cover. Consistent left column (not
   alternating) — the entries are deliberately irregular in length, so
   a fixed left image gives the eye a stable line to scan; alternating
   would fight that irregularity rather than complement it. */

.a2-publication-entry__cover {
  margin: 0;
}

.a2-publication-entry__cover img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--a2-border);
  background: var(--a2-bg-secondary);
}

/* Fallback for browsers without :has() — grid stays single column and
   the cover sits above the text: still clean and deliberate, just
   stacked. No entry ever looks broken. */
@supports not (selector(:has(*))) {
  .a2-publication-entry__cover {
    max-width: 340px;
    margin-bottom: var(--a2-space-5);
  }
}

@media (max-width: 900px) {
  .a2-publication-entry__inner:has(.a2-publication-entry__cover) {
    grid-template-columns: 260px 1fr;
  }
}

@media (max-width: 680px) {
  .a2-publication-entry__inner,
  .a2-publication-entry__inner:has(.a2-publication-entry__cover) {
    grid-template-columns: 1fr;
  }
  .a2-publication-entry__cover {
    max-width: 240px;
  }
}

.a2-publication-entry__head {
  margin-bottom: var(--a2-space-5);
}

.a2-publication-entry__contributor {
  font-family: var(--a2-font-serif);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-2);
}

.a2-publication-entry__descriptor {
  font-family: var(--a2-font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--a2-accent);
  margin: 0;
}

.a2-publication-entry__body {
  font-family: var(--a2-font-serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--a2-text-muted);
}

.a2-publication-entry__body p {
  margin: 0 0 var(--a2-space-4);
}

.a2-publication-entry__body p:last-child {
  margin-bottom: 0;
}

.a2-publication-entry__body a {
  color: var(--a2-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.a2-publication-entry__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2-space-3);
  margin-top: var(--a2-space-5);
}

.a2-publication-entry__link {
  display: inline-flex;
  align-items: center;
  font-family: var(--a2-font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--a2-primary);
  text-decoration: none;
  padding: 10px 20px;
  border: 1px solid var(--a2-primary);
  border-radius: 999px;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.a2-publication-entry__link:hover {
  background: var(--a2-primary);
  color: var(--a2-bg-card);
}

@media (max-width: 540px) {
  .a2-publication-entry {
    padding: var(--a2-space-6) 0;
  }

  .a2-publication-entry__body {
    font-size: 16px;
    line-height: 1.65;
  }

  .a2-publication-entry__link {
    font-size: 13px;
    padding: 9px 16px;
  }
}

/* ==========================================================================
   FEATURED ROLES SECTION (v1.11.24)
   Above the standard jobs feed: a smaller "Featured" zone with subtle
   accent treatment to highlight Aspire2's own searches or paid featured
   placements. Burgundy accent stripe distinguishes it without dominating.
   ========================================================================== */

.a2-open-roles__featured {
  margin-bottom: var(--a2-space-5);
  padding: var(--a2-space-3) var(--a2-space-3) var(--a2-space-1);
  background: var(--a2-bg-card);
  border: 1px solid var(--a2-border);
  border-left: 3px solid var(--a2-accent);
  border-radius: var(--a2-radius-sm);
}

.a2-open-roles__featured .a2-kicker {
  color: var(--a2-accent);
  margin: var(--a2-space-1) 0 var(--a2-space-2);
}

.a2-open-roles__iframe--featured {
  min-height: 280px;
}

.a2-open-roles__feed {
  padding: var(--a2-space-3) var(--a2-space-3) var(--a2-space-1);
  background: var(--a2-bg-card);
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-radius-sm);
}

.a2-open-roles__feed .a2-kicker {
  color: var(--a2-text-muted);
  margin: var(--a2-space-1) 0 var(--a2-space-2);
}

@media (max-width: 768px) {
  .a2-open-roles__iframe--featured {
    min-height: 240px;
  }
}

/* ==========================================================================
   SUPPORTING ECOSYSTEM (v1.11.24)
   Three capability groups (Attraction, Leadership, Strategic) with partner
   logos under each. Lighter visual register than the team grid above —
   greyscale logos with hover color reveal, restrained spacing.
   ========================================================================== */

.a2-ecosystem {
  padding: var(--a2-space-9) var(--a2-pad-x);
  background: var(--a2-bg-secondary);
}

.a2-ecosystem__container {
  max-width: var(--a2-container);
  margin: 0 auto;
}

.a2-ecosystem__header {
  margin-bottom: var(--a2-space-8);
  max-width: 720px;
}

.a2-ecosystem__title {
  font-family: var(--a2-font-serif);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--a2-text);
  margin: var(--a2-space-3) 0 var(--a2-space-4);
}

.a2-ecosystem__lead {
  font-family: var(--a2-font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--a2-text-muted);
  margin: 0;
}

.a2-ecosystem__group {
  margin-bottom: var(--a2-space-7);
  padding-bottom: var(--a2-space-7);
  border-bottom: 1px solid var(--a2-border);
}

.a2-ecosystem__group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.a2-ecosystem__group-title {
  font-family: var(--a2-font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--a2-text);
  margin: 0 0 var(--a2-space-2);
}

.a2-ecosystem__group-desc {
  font-family: var(--a2-font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--a2-text-muted);
  margin: 0 0 var(--a2-space-5);
  max-width: 560px;
}

.a2-ecosystem__logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2-space-7);
  align-items: center;
  row-gap: var(--a2-space-5);
}

.a2-ecosystem__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  opacity: 0.85;
  transition: opacity 200ms ease, transform 200ms ease;
}

.a2-ecosystem__logo:hover,
.a2-ecosystem__logo:focus {
  opacity: 1;
  transform: translateY(-1px);
}

.a2-ecosystem__logo img {
  max-height: 128px;
  max-width: 360px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 768px) {
  .a2-ecosystem {
    padding: var(--a2-space-7) var(--a2-pad-x);
  }

  .a2-ecosystem__group {
    margin-bottom: var(--a2-space-6);
    padding-bottom: var(--a2-space-6);
  }

  .a2-ecosystem__logos {
    gap: var(--a2-space-5);
    row-gap: var(--a2-space-4);
  }

  .a2-ecosystem__logo {
    height: 128px;
  }

  .a2-ecosystem__logo img {
    max-height: 104px;
    max-width: 280px;
  }
}


/* ==========================================================================
   Integrated Model — Interactive (v1.12.5)
   The triadic model rendered as concentric rings. Editorial-advisory
   register: typography-led, generous whitespace, animation that serves
   clarity rather than decorates.
   ========================================================================== */

.a2-imodel {
  background: var(--a2-bg-card, #F7F5F0);
  padding: var(--a2-space-9, 96px) var(--a2-pad-x, 32px);
  position: relative;
  overflow: hidden;
}

.a2-imodel__container {
  max-width: 1080px;
  margin: 0 auto;
}

.a2-imodel__intro {
  max-width: 720px;
  margin: 0 auto var(--a2-space-7, 64px);
  text-align: center;
}

.a2-imodel__title {
  font-family: var(--a2-font-serif, "Fraunces", serif);
  font-size: clamp(32px, 3.5vw, 44px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #0F3A5F;
  margin: var(--a2-space-3, 12px) 0 var(--a2-space-4, 20px);
}

.a2-imodel__lead {
  font-family: var(--a2-font-serif, "Fraunces", serif);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  color: rgba(26, 26, 26, 0.78);
  margin: 0;
}

.a2-imodel__stage {
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) minmax(280px, 1fr);
  gap: var(--a2-space-7, 64px);
  align-items: center;
  position: relative;
}

.a2-imodel__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 560px;
  margin: 0 auto;
}

.a2-imodel__svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Ring base state */
.a2-imodel__ring {
  cursor: pointer;
  transition: stroke-width 400ms ease, opacity 400ms ease, stroke 400ms ease;
  outline: none;
}

.a2-imodel__ring:focus-visible {
  stroke: #B22928;
  stroke-width: 2.5;
}

/* When the stage has any active dimension, all rings dim except the active one */
[data-imodel-active="organisational"] .a2-imodel__ring--organisational,
[data-imodel-active="behavioural"] .a2-imodel__ring--behavioural,
[data-imodel-active="cognitive"] .a2-imodel__ring--cognitive {
  stroke: #B22928;
  stroke-width: 2;
}

[data-imodel-active="organisational"] .a2-imodel__ring:not(.a2-imodel__ring--organisational),
[data-imodel-active="behavioural"] .a2-imodel__ring:not(.a2-imodel__ring--behavioural),
[data-imodel-active="cognitive"] .a2-imodel__ring:not(.a2-imodel__ring--cognitive) {
  opacity: 0.32;
}

/* Default state — all three rings present, gentle hierarchy */
[data-imodel-active="default"] .a2-imodel__ring {
  opacity: 1;
  stroke-width: 1.25;
}

/* Labels follow the active state */
.a2-imodel__label {
  transition: opacity 400ms ease, fill 400ms ease;
  opacity: 0.55;
  pointer-events: none;
}

[data-imodel-active="organisational"] .a2-imodel__label--organisational,
[data-imodel-active="behavioural"] .a2-imodel__label--behavioural,
[data-imodel-active="cognitive"] .a2-imodel__label--cognitive {
  opacity: 1;
  fill: #B22928;
}

[data-imodel-active="default"] .a2-imodel__label {
  opacity: 0.65;
}

/* Orbit dots — gentle ambient motion. Disabled if reduced-motion. */
.a2-imodel__orbits {
  transform-origin: 280px 280px;
  animation: a2-imodel-orbit-rotate 64s linear infinite;
}

.a2-imodel__orbit {
  opacity: 0.5;
}

@keyframes a2-imodel-orbit-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Core label fades in on hover/focus of any ring */
.a2-imodel__core circle {
  transition: r 400ms ease;
}

[data-imodel-active="default"] .a2-imodel__core circle {
  r: 38;
}

@media (prefers-reduced-motion: reduce) {
  .a2-imodel__orbits {
    animation: none;
  }
  .a2-imodel__ring,
  .a2-imodel__label,
  .a2-imodel__core circle,
  .a2-imodel__panel {
    transition: none;
  }
}

/* Panels — content for the active dimension */
.a2-imodel__panels {
  position: relative;
  min-height: 320px;
}

.a2-imodel__panel {
  transition: opacity 350ms ease;
}

.a2-imodel__panel[hidden] {
  display: none;
}

.a2-imodel__panel-kicker {
  font-family: var(--a2-font-sans, "Geist", system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B22928;
  margin: 0 0 var(--a2-space-3, 12px);
}

.a2-imodel__panel--default .a2-imodel__panel-kicker {
  color: rgba(15, 58, 95, 0.6);
}

.a2-imodel__panel-title {
  font-family: var(--a2-font-serif, "Fraunces", serif);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: #0F3A5F;
  margin: 0 0 var(--a2-space-4, 20px);
}

.a2-imodel__panel-body {
  font-family: var(--a2-font-serif, "Fraunces", serif);
  font-size: 17px;
  line-height: 1.55;
  color: rgba(26, 26, 26, 0.85);
  margin: 0 0 var(--a2-space-4, 20px);
}

.a2-imodel__panel-prompt {
  font-family: var(--a2-font-sans, "Geist", system-ui, sans-serif);
  font-size: 14px;
  font-style: italic;
  color: rgba(26, 26, 26, 0.55);
  margin: 0;
  padding-top: var(--a2-space-3, 12px);
  border-top: 1px solid rgba(15, 58, 95, 0.12);
}

.a2-imodel__panel-attribution {
  font-family: var(--a2-font-sans, "Geist", system-ui, sans-serif);
  font-size: 14px;
  color: rgba(26, 26, 26, 0.65);
  margin: 0;
  padding-top: var(--a2-space-3, 12px);
  border-top: 1px solid rgba(15, 58, 95, 0.12);
}

.a2-imodel__panel-tool {
  font-family: var(--a2-font-serif, "Fraunces", serif);
  font-style: italic;
  font-weight: 500;
  color: #0F3A5F;
}

/* Mobile — stack the visual above the panels, slightly compress */
@media (max-width: 900px) {
  .a2-imodel {
    padding: var(--a2-space-7, 64px) var(--a2-pad-x, 24px);
  }

  .a2-imodel__stage {
    grid-template-columns: 1fr;
    gap: var(--a2-space-5, 32px);
  }

  .a2-imodel__visual {
    max-width: 400px;
  }

  .a2-imodel__panels {
    min-height: 280px;
    text-align: center;
  }

  .a2-imodel__panel-prompt,
  .a2-imodel__panel-attribution {
    display: inline-block;
  }
}


/* ==========================================================================
   Site-wide motion layer (v1.12.5)
   Subtle scroll-reveal for headlines, body paragraphs, and key visual
   elements. Adds editorial weight without decorative spectacle. Driven
   by IntersectionObserver, falls back to no animation if reduced-motion.
   ========================================================================== */

.a2-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 800ms cubic-bezier(0.2, 0, 0.2, 1),
              transform 800ms cubic-bezier(0.2, 0, 0.2, 1);
}

.a2-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.a2-reveal--delay-1.is-revealed { transition-delay: 80ms; }
.a2-reveal--delay-2.is-revealed { transition-delay: 160ms; }
.a2-reveal--delay-3.is-revealed { transition-delay: 240ms; }
.a2-reveal--delay-4.is-revealed { transition-delay: 320ms; }

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


/* ==========================================================================
   v1.13.0  —  VISUAL GROUNDING (CSS-only, no markup changes)
   ==========================================================================

   Three additions, all CSS-only, all reversible by removing this block:

   1. Hero image grounding
      The navy hero gains a treated photographic background, positioned
      to the right of the typography. The image lives in WordPress media
      at the path defined below as --a2-hero-image. Until that file
      exists, a sophisticated gradient stands in — good enough to ship,
      not embarrassing if shown.

      To go live with the actual photograph:
      1. Upload to /wp-content/uploads/2026/05/aspire2-hero.jpg
         Recommended: a contemplative Australian school environment
         (corridor with light, quiet library, chapel interior, courtyard
         at dusk). 2400 x 1600 minimum, JPEG, 80-85% quality.
      2. The hero will pick up the image automatically.
      3. The duotone treatment is applied at the CSS layer, so any
         photograph works without prior treatment.

      The placeholder gradient is deliberately abstract — light shape
      against deep navy, suggestive of late-afternoon institutional
      light — so the design reads as intentional even before the
      real photograph arrives.

   2. About page headshot duotone treatment
      Existing portraits go duotone navy on hover-out, warm to full
      colour on hover. Uses CSS filter + a navy overlay layered via
      ::after pseudo-element. Combined with the existing 1.02 scale on
      hover (already in the theme), this gives the cards a small
      moment of life without changing markup or motion vocabulary.

   3. Section punctuation rule
      A single burgundy graphic device that appears below major section
      headings and before section close moments. Two variants: a
      static rule (default) and a draw-in rule (uses .a2-reveal to
      animate width on scroll-into-view).

   The motion vocabulary stays restrained — short transitions,
   user-triggered, prefers-reduced-motion respected through the
   existing CSS layer. */


/* ---  1. HERO IMAGE GROUNDING  --- */

/* The image path — change this when the real photograph is uploaded.
   If the file at this path is missing, the hero falls back to its
   prior visual state — just a tiny ambient warm-light bloom at upper
   right. No visible composition elements, no split. */
:root {
  --a2-hero-image: url('/wp-content/uploads/2026/05/aspire2-hero.jpg');
}

/* Two-state hero design:

   PLACEHOLDER STATE (no image at the path)
     The hero displays as pure navy with a faint ambient warm-light
     glow at upper right. Nothing else visible. The typography on the
     left reads cleanly because there are no competing elements. This
     state should feel almost identical to v1.12.5 — quiet, no
     visual seams, no half-composition.

   WITH-IMAGE STATE (photograph uploaded)
     The image appears on the right side of the hero, treated to sit
     inside the navy palette via mix-blend-mode and filter. A
     dissolve-to-navy gradient layered on top of the image fades it
     into the typography on the left. The composition reads as
     typography on a navy ground that has been grounded by an
     environmental photograph.

   The CSS is identical for both states. The difference is whether
   the image file exists at the configured path. Because the dissolve
   gradient is stacked ON the image (not on the navy hero background),
   it only renders meaningfully when there's an image to dissolve.
   With no image, the whole ::after layer has no visible content for
   the blend mode to act on, and the placeholder reads as quiet.

   We use ::after for the image+dissolve, ::before for the ambient
   bloom only. */

.a2-navy-hero {
  position: relative;
  overflow: hidden; /* contain the image and ken-burns scale */
}

/* ::after — the full-bleed photograph. Spans the entire hero area.
   When the image is missing, this layer renders as invisible because
   mix-blend-mode: luminosity has nothing meaningful to blend against. */
.a2-navy-hero::after {
  content: "";
  position: absolute;
  inset: 0; /* full hero — top right bottom left all 0 */
  pointer-events: none;
  z-index: 1;

  background-image: var(--a2-hero-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Treatment that ties the image into the navy palette.
     Slightly more aggressive than the 60%-panel version because the
     image is now the dominant visual element. */
  filter: contrast(1.05) brightness(0.82) saturate(0.45);
  mix-blend-mode: luminosity;
  opacity: 0.50;

  /* Ken-burns scale on load — slower and subtler than the 60%-panel
     version because the scale is more visible across the full hero
     width. 14 seconds, 1.0 → 1.025. */
  animation: a2-hero-kenburns 14s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes a2-hero-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.025); }
}

/* ::before — the dissolve gradient and top/bottom anchoring.
   This is what makes the full-bleed composition readable:
   - The left side of the hero gets a strong navy overlay so the
     typography reads cleanly regardless of what's in the image
   - The right side stays open so the photograph is felt
   - Top and bottom get soft anchoring so the hero feels sealed
   - A tiny warm-light bloom at upper right adds the ambient highlight */
.a2-navy-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image:
    /* Ambient warm-light bloom at upper-right. Subtle. */
    radial-gradient(
      ellipse 50% 45% at 78% 25%,
      rgba(255, 230, 180, 0.06) 0%,
      rgba(255, 230, 180, 0.02) 45%,
      rgba(255, 230, 180, 0) 75%
    ),
    /* Left-to-right dissolve: heavy navy on the left third (where the
       typography sits), softening toward transparent on the right.
       This is what makes the typography readable on top of any image. */
    linear-gradient(
      90deg,
      var(--a2-primary) 0%,
      rgba(15, 58, 95, 0.92) 22%,
      rgba(15, 58, 95, 0.68) 45%,
      rgba(15, 58, 95, 0.35) 70%,
      rgba(15, 58, 95, 0.18) 90%,
      rgba(15, 58, 95, 0.10) 100%
    ),
    /* Top and bottom anchoring — keeps the hero feeling sealed. */
    linear-gradient(
      180deg,
      rgba(10, 41, 69, 0.32) 0%,
      rgba(10, 41, 69, 0) 18%,
      rgba(10, 41, 69, 0) 82%,
      rgba(10, 41, 69, 0.38) 100%
    );
}

/* The container needs to sit above both overlay layers so typography
   reads cleanly. */
.a2-navy-hero__container {
  position: relative;
  z-index: 3;
}

/* On smaller screens, the image stays full-bleed but the dissolve
   gradient becomes more uniform because there's no longer a clean
   left-side typography column — the type wraps to fill the width.
   The image needs to be darker overall so the typography on top of
   it reads.

   Placeholder state on mobile is invisible (just navy) since the
   image layer has nothing to blend. */
@media (max-width: 900px) {
  .a2-navy-hero::after {
    opacity: 0.30;
  }

  .a2-navy-hero::before {
    background-image:
      radial-gradient(
        ellipse 60% 30% at 75% 15%,
        rgba(255, 230, 180, 0.06) 0%,
        rgba(255, 230, 180, 0.015) 50%,
        rgba(255, 230, 180, 0) 80%
      ),
      /* On mobile the dissolve is uniform navy overlay rather than
         a left-to-right gradient, because the type wraps full-width. */
      linear-gradient(
        180deg,
        rgba(15, 58, 95, 0.45) 0%,
        rgba(15, 58, 95, 0.30) 50%,
        rgba(15, 58, 95, 0.55) 100%
      );
  }
}

/* Respect prefers-reduced-motion: stop the ken-burns scale. */
@media (prefers-reduced-motion: reduce) {
  .a2-navy-hero::after {
    animation: none;
    transform: none;
  }
}


/* ---  2. ABOUT PAGE HEADSHOT TREATMENT  --- */

/* Default state: portraits show in full colour. On hover, the duotone
   navy treatment lifts in, signalling interaction and giving the cards
   a small brand-aligned moment when the cursor lands. Combined with the
   existing 1.02 scale on hover (already in the theme), this gives the
   cards a deliberate response to engagement without losing the warmth
   of the team's presence by default. */

.a2-team-card__photo {
  position: relative;
  /* Hide overflow already in place, keep it */
}

/* The treatment is layered as a CSS filter on the img itself plus a
   navy overlay via ::before. Default: full colour, no overlay. */
.a2-team-card__photo img {
  filter:
    grayscale(0)
    contrast(1)
    brightness(1);
  transition:
    filter 480ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 400ms ease;
}

.a2-team-card__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--a2-primary);
  mix-blend-mode: color;
  opacity: 0;
  transition: opacity 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* On card hover: duotone treatment activates, navy overlay lifts in.
   The existing 1.02 scale stays. */
.a2-team-card:hover .a2-team-card__photo img,
.a2-team-card:focus-within .a2-team-card__photo img {
  filter:
    grayscale(0.7)
    contrast(1.08)
    brightness(0.92);
}

.a2-team-card:hover .a2-team-card__photo::before,
.a2-team-card:focus-within .a2-team-card__photo::before {
  opacity: 0.32;
}

/* Respect prefers-reduced-motion: skip the filter transition. */
@media (prefers-reduced-motion: reduce) {
  .a2-team-card__photo img,
  .a2-team-card__photo::before {
    transition: none;
  }
}


/* ---  3. SECTION PUNCTUATION RULE  --- */

/* A small burgundy graphic device. Used in two ways:
   - As a static decorative rule below a section heading
   - As a draw-in rule that animates width via .a2-reveal

   This is a single utility class that any pattern can adopt. */

.a2-rule {
  display: block;
  width: 60px;
  height: 2px;
  background: var(--a2-accent);
  border: 0;
  margin: var(--a2-space-5) 0;
}

.a2-rule--center { margin-left: auto; margin-right: auto; }
.a2-rule--short { width: 40px; }
.a2-rule--long  { width: 96px; }

/* Draw-in variant: starts at 0 width, animates to full width when
   .a2-reveal triggers .is-revealed. Uses the existing motion layer. */
.a2-rule.a2-reveal {
  opacity: 1; /* override .a2-reveal's default opacity transition */
  transform: none;
  width: 0;
  transition: width 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.a2-rule.a2-reveal.is-revealed {
  width: 60px;
}

.a2-rule.a2-reveal.a2-rule--short.is-revealed { width: 40px; }
.a2-rule.a2-reveal.a2-rule--long.is-revealed  { width: 96px; }

@media (prefers-reduced-motion: reduce) {
  .a2-rule.a2-reveal,
  .a2-rule.a2-reveal.is-revealed {
    transition: none;
    width: 60px;
  }
  .a2-rule.a2-reveal.a2-rule--short.is-revealed { width: 40px; }
  .a2-rule.a2-reveal.a2-rule--long.is-revealed  { width: 96px; }
}

/* End v1.13.0 visual grounding additions */


/* ==========================================================================
   v1.14.0  —  SECTION IMAGE DIVIDERS
   ==========================================================================

   Treated photographic strips that punctuate the page between content
   sections. Applies the hero's photographic-grounding pattern (image +
   navy-tinted treatment + soft anchoring) at a smaller scale, so the
   visitor's eye gets a moment of environmental grounding between
   textual sections.

   The treatment is the hero's, but adapted for thin-strip viewing:
   - Smaller height (240-320px desktop, 200px mobile)
   - No left-right dissolve (no typography sits on it)
   - Top/bottom soft anchoring instead, so strips feel sealed at edges
   - Lighter ken-burns triggered on scroll-into-view, not on load
   - Lazy-loaded (the strips lower on the page don't block initial paint)

   Markup pattern: a <section> with class .a2-section-image and the
   image set via CSS custom property --a2-section-image at element level.

   Example:
     <section class="a2-section-image" style="--a2-section-image: url('/wp-content/uploads/2026/05/aspire2-hero1.jpg');"></section>

   Three companion pattern files (section-image-1, -2, -3) wire up the
   three uploaded school scene photographs. Tara inserts them at the
   transitions she wants on any page via the WordPress block editor.
   The CSS works on any combination — one, two, three, or more strips
   anywhere on the page. */


/* The strip itself */
.a2-section-image {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
  background: var(--a2-primary); /* navy ground showing if image missing */
  margin: 0;
  padding: 0;
}

/* Image variants — three uploaded school scene photographs.
   Each class sets:
   - --a2-section-image to the corresponding file path
   - --a2-section-image-position to control which part of the image
     is visible in the strip. Default 'center' shows the vertical
     middle of the image. Adjust individually if a specific photograph
     has its focal content above or below the centre.

   Tuning the position per image:
   - 'center 25%'  shifts the visible band toward the top of the image
   - 'center 50%'  is equivalent to 'center' (default)
   - 'center 75%'  shifts the visible band toward the bottom of the image
   This is more robust than inline styles because some block editor
   configurations strip inline style attributes on save. */
.a2-section-image--1 {
  --a2-section-image: url('/wp-content/uploads/2026/05/aspire2-hero1.jpg');
  --a2-section-image-position: center 60%;
}
.a2-section-image--2 {
  --a2-section-image: url('/wp-content/uploads/2026/05/aspire2-hero2.jpg');
  --a2-section-image-position: center 60%;
}
.a2-section-image--3 {
  --a2-section-image: url('/wp-content/uploads/2026/05/aspire2-hero3.jpg');
  --a2-section-image-position: center 60%;
}

/* The image layer — same treatment principle as the hero ::after */
.a2-section-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: var(--a2-section-image, none);
  background-size: cover;
  background-position: var(--a2-section-image-position, center);
  background-repeat: no-repeat;

  /* Slightly more aggressive treatment than the hero because section
     strips aren't expected to carry editorial weight — they're punctuation.
     The image reads as ambient texture, not as the primary content. */
  filter: contrast(1.05) brightness(0.78) saturate(0.40);
  mix-blend-mode: luminosity;
  opacity: 0.55;

  /* Subtle ken-burns triggered on scroll-into-view via .is-revealed.
     Default state is held at scale(1); the in-view state animates to
     scale(1.025) over 6 seconds. Quieter than the hero's 14-second
     auto-on-load animation because these strips are punctuation. */
  transform: scale(1);
  transition: transform 6000ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.a2-section-image.is-revealed::after {
  transform: scale(1.025);
}

/* The overlay layer — top/bottom anchoring + a small warm bloom in the
   upper-right corner that matches the hero's ambient highlight. The
   left-right dissolve isn't needed here because no typography sits
   over the strip. */
.a2-section-image::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image:
    /* Small warm-light bloom — consistent with the hero's ambient highlight */
    radial-gradient(
      ellipse 40% 70% at 82% 30%,
      rgba(255, 230, 180, 0.05) 0%,
      rgba(255, 230, 180, 0.015) 50%,
      rgba(255, 230, 180, 0) 80%
    ),
    /* Top and bottom soft anchoring — the strip feels sealed at its edges,
       transitions cleanly into the cream/navy sections above and below */
    linear-gradient(
      180deg,
      rgba(10, 41, 69, 0.45) 0%,
      rgba(10, 41, 69, 0.10) 25%,
      rgba(10, 41, 69, 0) 50%,
      rgba(10, 41, 69, 0.10) 75%,
      rgba(10, 41, 69, 0.45) 100%
    );
}

/* Mobile: strips shrink to 240px and the treatment becomes slightly
   more uniform because the eye can take in the strip at a single glance */
@media (max-width: 900px) {
  .a2-section-image {
    height: 240px;
  }

  .a2-section-image::before {
    background-image:
      radial-gradient(
        ellipse 50% 60% at 78% 25%,
        rgba(255, 230, 180, 0.05) 0%,
        rgba(255, 230, 180, 0.015) 55%,
        rgba(255, 230, 180, 0) 80%
      ),
      linear-gradient(
        180deg,
        rgba(10, 41, 69, 0.50) 0%,
        rgba(10, 41, 69, 0.15) 30%,
        rgba(10, 41, 69, 0.15) 70%,
        rgba(10, 41, 69, 0.50) 100%
      );
  }
}

/* Reduced motion — no ken-burns scale */
@media (prefers-reduced-motion: reduce) {
  .a2-section-image::after {
    transition: none;
    transform: scale(1);
  }
  .a2-section-image.is-revealed::after {
    transform: scale(1);
  }
}

/* End v1.14.0 section image dividers */


/* ==========================================================================
   v1.14.3  —  PHOTOGRAPHIC GROUNDING FOR INNER-PAGE HEROES
   ==========================================================================

   Applies the home-page hero's photographic-grounding pattern to .a2-page-hero
   (used on About, service pages, sector pages, etc.). Same mechanical moves
   as .a2-navy-hero — image behind content, navy-tinted treatment via
   mix-blend-mode, dissolve gradient ensuring typography readability, gentle
   ken-burns scale on load.

   The treatment activates whenever .a2-page-hero has a --a2-page-hero-image
   variable set. Image-to-page assignment is via variant classes:
     .a2-page-hero--1  → aspire2-hero1.jpg
     .a2-page-hero--2  → aspire2-hero2.jpg
     .a2-page-hero--3  → aspire2-hero3.jpg

   Per-page mapping is applied at the pattern level by adding the
   appropriate variant class to the .a2-page-hero element in each pattern
   PHP file. Specific mapping:
     About                → variant 1
     service-search       → variant 2
     service-advisory     → variant 2
     service-development  → variant 2
     service-assessment   → variant 2
     boards-overview      → variant 3
     for-leaders          → variant 3
     international        → variant 3
     start-conversation   → variant 1

   Pages without a variant class fall back to the navy-only state — no image,
   just the existing typography on navy. This means new pages get clean
   default behaviour until an image is explicitly assigned. */


/* Image assignment strategy for inner-page heroes.

   v1.14.3 attempted body slug targeting — failed (WordPress doesn't
   generate slug classes on this site).

   v1.14.4 added a default image to every .a2-page-hero plus permissive
   body-class matching. Default worked, family-specific variation didn't.

   v1.14.5 used parent-pageid-25 to target service pages as a family.
   Worked. But only two images were used across all inner pages.

   v1.14.6 uses confirmed page IDs from production to target each page
   individually, spreading five images across the inner-page set:

     page-id-81 (About)                 → aspire2-hero1.jpg
     parent-pageid-25 (service pages)   → aspire2-hero2.jpg
     page-id-73 (For Leaders)           → aspire2-hero3.jpg
     page-id-83 (International)         → aspire2-hero4.jpg
     page-id-25 (For Boards & Systems)  → aspire2-hero5.jpg
     page-id-47 (Start a Conversation)  → aspire2-hero1.jpg (form page)
     page-id-7034 (Insights)            → aspire2-hero5.jpg (v1.16.5)
     everything else                    → default (hero1)

   Image files aspire2-hero4.jpg and aspire2-hero5.jpg need to be uploaded
   to /wp-content/uploads/2026/05/ before those pages will display them.
   Until then, those two pages render as navy with the faint warm bloom
   from the hero treatment's placeholder state — same as the original
   hero looked before the photograph was uploaded. */

/* DEFAULT — applies to every .a2-page-hero unless overridden below.
   Variant 1 (aspire2-hero1.jpg). */
.a2-page-hero {
  --a2-page-hero-image: url('/wp-content/uploads/2026/05/aspire2-hero1.jpg');
  --a2-page-hero-image-position: center 60%;
}

/* About (page 81), Start a Conversation (page 47) — explicit variant 1.
   Same as default; named for clarity and to allow future independent tuning. */
body.page-id-81 .a2-page-hero,
body.page-id-47 .a2-page-hero,
.a2-page-hero--1 {
  --a2-page-hero-image: url('/wp-content/uploads/2026/05/aspire2-hero1.jpg');
  --a2-page-hero-image-position: center 60%;
}

/* Service pages (children of For Boards & Systems, page 25) — variant 2.
   Targets Advisory (29), Search & Transitions (27), Leadership Development (31),
   Assessment & Diagnostics (33). */
body.parent-pageid-25 .a2-page-hero,
.a2-page-hero--2 {
  --a2-page-hero-image: url('/wp-content/uploads/2026/05/aspire2-hero2.jpg');
  --a2-page-hero-image-position: center 60%;
}

/* For Leaders (page 73) — variant 3. */
body.page-id-73 .a2-page-hero,
.a2-page-hero--3 {
  --a2-page-hero-image: url('/wp-content/uploads/2026/05/aspire2-hero3.jpg');
  --a2-page-hero-image-position: center 60%;
}

/* International (page 83) — variant 4.
   The image file aspire2-hero4.jpg needs to be uploaded before this
   activates with imagery. Until then this page falls through to the
   navy/placeholder state. */
body.page-id-83 .a2-page-hero,
.a2-page-hero--4 {
  --a2-page-hero-image: url('/wp-content/uploads/2026/05/aspire2-hero4.jpg');
  --a2-page-hero-image-position: center 60%;
}

/* For Boards & Systems landing (page 25) — variant 5.
   Distinct image from the service pages it parents, so the landing reads
   as "section overview" rather than blending with its children.
   Insights (page 7034) also uses variant 5 — added v1.16.5 at Matt's
   request; Insights and the Boards landing share aspire2-hero5.jpg. */
body.page-id-25 .a2-page-hero,
body.page-id-7034 .a2-page-hero,
.a2-page-hero--5 {
  --a2-page-hero-image: url('/wp-content/uploads/2026/05/aspire2-hero5.jpg');
  --a2-page-hero-image-position: center 60%;
}

/* v1.17.8: dedicated hero images for the three stream-group destination
   pages. Targeted by the slug-based data-group attribute the
   stream-group template sets on its wrapper (the hero is nested inside
   that wrapper). Slug-targeting is used here rather than body.page-id-*
   because the slug is the key the stream-group template itself relies
   on — it is the stable, authoritative identifier for these pages and
   does not depend on numeric page IDs. These override the variant-5
   default that Insights (and these pages, before now) fell through to. */
.a2-stream-group[data-group="voices-of-change"] .a2-page-hero {
  --a2-page-hero-image: url('/wp-content/uploads/2026/05/microphone.jpg');
  --a2-page-hero-image-position: center 55%;
}

.a2-stream-group[data-group="aspire2"] .a2-page-hero {
  --a2-page-hero-image: url('/wp-content/uploads/2026/05/leaders.jpg');
  --a2-page-hero-image-position: center 55%;
}

.a2-stream-group[data-group="publications"] .a2-page-hero {
  --a2-page-hero-image: url('/wp-content/uploads/2026/05/library.jpg');
  --a2-page-hero-image-position: center 55%;
}

/* The page hero needs position:relative and overflow:hidden to contain
   the image layer and ken-burns scale. The base rule above doesn't set
   overflow:hidden, so we add it here without disturbing other properties. */
.a2-page-hero {
  overflow: hidden;
}

/* ::after — the full-bleed photograph treated to sit inside the navy palette.
   Activates only when the parent has --a2-page-hero-image set (via a
   variant class). When the variable is unset, background-image evaluates to
   'none' and the ::after element renders invisibly — the hero falls back
   to its prior text-on-navy state cleanly. */
.a2-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: var(--a2-page-hero-image, none);
  background-size: cover;
  background-position: var(--a2-page-hero-image-position, center);
  background-repeat: no-repeat;

  /* Treatment matches the home page hero — same filter, same blend mode,
     same opacity. Consistency across all heroes is the point. */
  filter: contrast(1.05) brightness(0.82) saturate(0.45);
  mix-blend-mode: luminosity;
  opacity: 0.50;

  /* Ken-burns scale on load — same timing as the home page hero (14s,
     1.0 → 1.025) so the motion vocabulary is consistent across heroes. */
  animation: a2-page-hero-kenburns 14s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes a2-page-hero-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.025); }
}

/* ::before — dissolve gradient + ambient bloom + top/bottom anchoring.
   Matches the home page hero's ::before treatment. Only the dissolve
   gradient's specific values are tuned for the smaller hero — slightly
   less aggressive than the home page version since the inner-page hero
   has less horizontal real estate. */
.a2-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image:
    /* Ambient warm-light bloom at upper-right */
    radial-gradient(
      ellipse 50% 45% at 78% 25%,
      rgba(255, 230, 180, 0.06) 0%,
      rgba(255, 230, 180, 0.02) 45%,
      rgba(255, 230, 180, 0) 75%
    ),
    /* Left-to-right dissolve so typography reads cleanly */
    linear-gradient(
      90deg,
      var(--a2-primary) 0%,
      rgba(15, 58, 95, 0.92) 22%,
      rgba(15, 58, 95, 0.68) 45%,
      rgba(15, 58, 95, 0.35) 70%,
      rgba(15, 58, 95, 0.18) 90%,
      rgba(15, 58, 95, 0.10) 100%
    ),
    /* Top and bottom anchoring */
    linear-gradient(
      180deg,
      rgba(10, 41, 69, 0.32) 0%,
      rgba(10, 41, 69, 0) 18%,
      rgba(10, 41, 69, 0) 82%,
      rgba(10, 41, 69, 0.38) 100%
    );
}

/* The container needs z-index so typography sits above both overlay layers */
.a2-page-hero__container {
  position: relative;
  z-index: 3;
}

/* Mobile: ambient texture only, simpler treatment so typography wraps cleanly */
@media (max-width: 900px) {
  .a2-page-hero::after {
    opacity: 0.30;
  }

  .a2-page-hero::before {
    background-image:
      radial-gradient(
        ellipse 60% 30% at 75% 15%,
        rgba(255, 230, 180, 0.06) 0%,
        rgba(255, 230, 180, 0.015) 50%,
        rgba(255, 230, 180, 0) 80%
      ),
      linear-gradient(
        180deg,
        rgba(15, 58, 95, 0.45) 0%,
        rgba(15, 58, 95, 0.30) 50%,
        rgba(15, 58, 95, 0.55) 100%
      );
  }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .a2-page-hero::after {
    animation: none;
    transform: scale(1);
  }
}

/* End v1.14.3 photographic grounding for inner-page heroes */