/*
Theme Name:  Campion International
Theme URI:   https://campioninternational.com
Author:      Campion International
Author URI:  https://campioninternational.com
Description: Official WordPress theme for Campion International — global pediatric therapy, staffing, teletherapy, training, scholarships, and clinic development. Mirrors the approved design mockup exactly. Swap brand colors via CSS variables in :root.
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: campion
Tags:        healthcare, pediatric, therapy, custom-colors, custom-menu, full-width-template
*/

/* ============================================================
   BRAND COLOR TOKENS — swap these to update the whole theme
   ============================================================ */
:root {
  /* Primary palette */
  /* --teal-deep:       #2E7E84; */ --teal-deep:       #1D8E96; /* main CTA / accent colour */
  /*--teal:            #7FB3B7; */ --teal:            #49B7BE; /* light teal highlights    */
  /*--navy:            #2A3F44; */ --navy:            #2E7E84; /* headings / dark UI       */
  --navy-deep:       #1E2D31;   /* footer / darkest bg      */

  --campion-teal-deeper: #1D8E96;   /* Active / pressed states */
  --campion-teal-light:  #49B7BE;   /* Tints, badges */
  --campion-teal-pale:   #F3F6F6;   /* Soft Mist — section backgrounds */
  --campion-champagne:   #D9C39A;   /* Warm Champagne — premium accent */
  --campion-silver:      #C9D1D3;   /* Silver Grey — borders, dividers */
  --campion-charcoal:    #585c5c;   /* Charcoal Grey — headlines */
  --campion-gray:        #70777B;   /* Slate Grey — body text, subheadings */
  --campion-gray-light:  #A0A7AB;   /* Muted text, captions */
  --campion-gray-line:   #C9D1D3;   /* Borders, dividers */


  /* Gold / champagne */
  --champagne:       #C2AC80;   /* decorative gold          */
  --champagne-soft:  #EFE9DC;   /* very light gold wash     */

  /* Backgrounds */
  --paper:           #F7F4EE;   /* page background          */
  --paper-2:         #EFEAE0;   /* alternate section bg     */

  /* Text */
  --ink:             #2B393C;   /* primary body text        */
  --ink-soft:        #5C6B6C;   /* secondary body text      */

  /* Borders / lines */
  --line:            #E2DBCC;
  --line-strong:     #D2C9B5;

  /* Whites */
  --white:           #ffffff;

  /* Shadows */
  --shadow:          0 24px 60px -40px rgba(42,63,68,.5);
  --shadow-sm:       0 14px 34px -28px rgba(42,63,68,.45);

  /* Shape */
  --radius:          3px;
  --radius-lg:       4px;
  --maxw:            1200px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  font-family: 'Montserrat', sans-serif;
  background: var(--paper);
  color: var(--ink-soft);
  line-height: 1.7;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4 {
  font-family: 'Cormorant Garamond', serif;
  line-height: 1.04;
  font-weight: 500;
  color: var(--navy);
}
h1 { font-size: clamp(2.9rem,6vw,5rem);   letter-spacing: -.8px; font-weight: 500; }
h2 { font-size: clamp(2.1rem,4vw,3.4rem); letter-spacing: -.5px; }
h3 { font-size: clamp(1.45rem,2.4vw,1.95rem); }
p  { font-weight: 300; color: var(--ink-soft); }
a  { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* ============================================================
   EYEBROW LABELS
   ============================================================ */
.eyebrow {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: .66rem;
  font-weight: 600;
  color: var(--teal-deep);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--champagne); display: inline-block; }
.sec-head.center .eyebrow,
.cta-band .eyebrow { justify-content: center; }
.eyebrow.light { color: var(--champagne); }
.eyebrow.light::before { background: rgba(255,255,255,.45); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  padding: 15px 28px;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn-teal          { background: linear-gradient(var(--teal-deep)); color: white;}
.btn-teal:hover    { background: var(--navy); }
.btn-champagne     { background: var(--champagne); color: black; }
.btn-champagne:hover { background: #b39a68; color:white;}
.btn-outline       { background: transparent; color: var(--navy); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.btn-ghost-light   { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost-light:hover { background: #fff; color: var(--navy); }
.btn-white         { background: #fff; color: var(--navy); }
.btn-white:hover   { background: var(--champagne); }
.btn .arw          { transition: transform .2s ease; }
.btn:hover .arw    { transform: translateX(4px); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251,250,247,.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  gap: 18px;
}
.site-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  text-decoration: none;
}
.site-brand .brand-logo { width: 34px; height: 34px; flex-shrink: 0; }
.site-brand .brand-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .01em;
}

/* Custom logo uploaded via Customizer → Site Identity
   !important overrides WordPress's inline width/height attrs on <img> */
.site-brand .custom-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.site-brand .custom-logo {
  display: block;
  max-height: 48px !important;  /* header logo height cap */
  max-width: 200px !important;  /* header logo width cap  */
  width: auto !important;
  height: auto !important;
}

/* Footer logo — same image, smaller sizing for dark background */
.foot-brand .custom-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.foot-brand .custom-logo {
  display: block;
  max-height: 55px !important;  /* footer logo height cap */
  max-width: 175px !important;
  width: auto !important;
  height: auto !important;
  /* invert to white on the dark footer; remove if logo is already light */
  /*filter: brightness(0) invert(1);*/
	background: floralwhite;
  opacity: .88;

}
.main-nav { display: flex; align-items: center; gap: 2px; }
.main-nav a {
  font-size: .74rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 10px 14px;
  letter-spacing: .04em;
  position: relative;
  transition: color .15s ease;
}
.main-nav a:hover,
.main-nav a.current-menu-item { color: var(--navy); }
.main-nav a.current-menu-item::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 1px;
  background: var(--champagne);
}
.nav-utility {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.nav-utility .util-link {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.nav-utility .util-link:hover  { color: var(--navy); }
.nav-utility .util-pay         { color: var(--teal-deep); font-weight: 600; }
.nav-utility .util-pay:hover   { color: var(--navy); }

/* WordPress wp_nav_menu outputs <li> elements directly inside the nav when
   items_wrap = '%3$s'. Reset browser list-item bullets and apply the same
   link styles as the fallback so both render identically. */
.main-nav li { width:100%; list-style: none; display: inline-flex; align-items: center; }
.nav-utility li { list-style: none; display: inline-flex; align-items: center; }
.nav-utility li a {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-soft);
  transition: color .15s ease;
}
.nav-utility li a:hover { color: var(--navy); }
/* Pay Online is always the last menu item in the utility nav */
.nav-utility li:last-child a { color: var(--teal-deep); font-weight: 600; }
.nav-utility li:last-child a:hover { color: var(--navy); }
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
.menu-toggle span { width: 24px; height: 1.5px; background: var(--navy); transition: .2s; }

/* ============================================================
   SUBMENU / DROPDOWN  (desktop: hover-reveal | mobile: tap-toggle)
   ============================================================ */
.main-nav li.menu-item-has-children { position: relative; }
.main-nav li.menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.main-nav li.menu-item-has-children > a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  opacity: .6;
  transition: transform .2s ease;
}
.main-nav .sub-menu {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 2px solid var(--champagne);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 200;
}
.main-nav li.menu-item-has-children:hover > .sub-menu,
.main-nav li.menu-item-has-children > a:focus + .sub-menu,
.main-nav .sub-menu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.main-nav .sub-menu li { display: block; width: 100%; }
.main-nav .sub-menu li a {
  display: block;
  width: 100%;
  padding: 10px 18px;
  font-size: .76rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.main-nav .sub-menu li a:hover {
  color: var(--teal-deep);
  background: var(--paper-2);
}
/* Nested (3rd level) submenus, if any — flyout to the right */
.main-nav .sub-menu .sub-menu {
  top: -9px;
  left: 100%;
}

/* ============================================================
   SECTIONS
   ============================================================ */
section { padding: 104px 0; }
form section {padding: 0 !important;}
section.tight { padding: 74px 0; }
.lead { font-size: 1.18rem; max-width: 600px; font-weight: 300; line-height: 1.75; }

/* brand corner accent */
.tri { position: relative; overflow: hidden; }
.tri::before {
  content: "";
  position: absolute;
  top: 18px; left: 18px;
  width: 14px; height: 14px;
  border-top: 1px solid var(--champagne);
  border-left: 1px solid var(--champagne);
  z-index: 3;
  opacity: .85;
}
.tri.tl::before {
  border-top: 1px solid rgba(255,255,255,.6);
  border-left: 1px solid rgba(255,255,255,.6);
}

.sec-head { margin-bottom: 56px; }
.sec-head.center { text-align: center; margin: 0 auto 60px; }
.sec-head h2 { margin-top: 4px; }
.sec-head p  { margin-top: 18px; font-size: 1.08rem; }

/* ============================================================
   DARK BAND
   ============================================================ */
.band-dark {
  background: linear-gradient(var(--campion-teal-deeper), var(--teal-deep), var(--teal));
  color: rgba(255,255,255,1);
}
.band-dark h2 { color: #fff; }
.band-dark p  { color: rgba(255,255,255,1); }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  background: linear-gradient(var(--campion-teal-deeper), var(--teal-deep), var(--teal));
  color: #fff;
  border-top: 2px solid var(--champagne);
}
.cta-band .wrap { padding: 74px 26px; text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: 14px; }
.cta-band p  { color: rgba(255,255,255,.8); margin-bottom: 34px; }
.cta-band .btns { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; margin-top: 24px; }

/* ============================================================
   CARDS / GRID
   ============================================================ */
.grid { display: grid; gap: 0; }
.g2   { grid-template-columns: repeat(2,1fr); }
.g3   { grid-template-columns: repeat(3,1fr); }
.g6   { grid-template-columns: repeat(3,1fr); }
/* shared-border tile system */
.grid.g2,
.grid.g3,
.grid.g6 {
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.card {
  background: transparent;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
  transition: background .25s ease;
}
.card h3    { margin-bottom: 11px; }
.card p     { font-size: .92rem; margin-bottom: 20px; }
.card:hover { background: var(--white); }

/* Duplicate of .card without hover state — used for image-overlay service cards */
.services-card {
  background: transparent;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
}
.services-card h3 { margin-bottom: 11px; }
.services-card p  { font-size: .92rem; margin-bottom: 20px; }
.subchip {
  display: inline-block;
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--teal-deep);
  background: transparent;
  padding: 0;
  border-radius: 0;
  margin-bottom: 18px;
}
.more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--navy);
  text-transform: uppercase;
  margin-top: 16px;
  cursor: pointer;
  transition: gap .2s ease, color .2s ease;
}
.card:hover .more { color: var(--teal-deep); gap: 12px; }
.ic-wrap {
  width: 44px; height: 44px;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--champagne);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding-bottom: 8px;
  margin-bottom: 22px;
}
.sn {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.6rem;
  font-style: italic;
  color: var(--champagne);
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1;
}

/* ============================================================
   SPLIT / TWO-COL
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid rgba(42,63,68,.15); }
.split-card {
  padding: 54px 46px;
  border-radius: 0;
  color: #fff;
}
.split-card + .split-card { border-left: 1px solid rgba(255,255,255,.15); }
.split-card h3 { color: #fff; margin-bottom: 14px; }
.split-card p  { color: rgba(255,255,255,.85); margin-bottom: 28px; }
.split-card.parents { background: var(--teal-deep); }
.split-card.schools { background: var(--navy); }

/* ============================================================
   STEPS / PROCESS
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.step {
  background: transparent;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 38px 32px;
}
.step:hover { background: var(--white); }
.step h4 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 500; margin-bottom: 8px; color: var(--navy); }
.step p  { font-size: .88rem; }

/* ============================================================
   CHIPS / SPEC STRIP
   ============================================================ */
.spec-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  font-size: .7rem;
  font-weight: 500;
  color: var(--navy);
  background: transparent;
  letter-spacing: .04em;
  transition: border-color .2s ease, color .2s ease;
}
.chip:hover { border-color: var(--teal-deep); color: var(--teal-deep); }

/* ============================================================
   CHECKLIST
   ============================================================ */
.checklist { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px 40px; }
.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1rem;
  color: var(--navy);
  font-weight: 300;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.check svg { flex-shrink: 0; color: var(--teal-deep); margin-top: 3px; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.phero {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--teal-deep), var(--teal));
  border-bottom: none;
  color: #fff;
}
.phero h1,
.phero .breadcrumb { color: #fff; }
.phero .breadcrumb b { color: var(--champagne); font-weight:bold;}
.phero .lead { color: rgba(255,255,255,.85); }
.phero.tealbg { background: linear-gradient(var(--campion-teal-deeper), var(--teal-deep), var(--teal))}
.phero-grid {
  display: grid;
  grid-template-columns: 1.04fr .86fr;
  gap: 56px;
  align-items: center;
}
.breadcrumb {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.breadcrumb b { color: var(--teal-deep); }
.phero h1 { max-width: 700px; margin-bottom: 22px; }
.phero .lead { margin-bottom: 32px; }
.phero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.phero .btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,.5);
}
.phero .btn-outline:hover {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}
.phero-img {
  height: 440px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid rgba(42,63,68,.1);
}
.phero-img.photo {
  background-size: cover;
  background-position: center;
}

/* ============================================================
   LOCATIONS / CITIES
   ============================================================ */
.cities { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 36px; }
.city {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 2px;
  font-family: 'Montserrat', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  transition: border-color .15s, color .15s;
}
.city:hover { border-color: var(--champagne); color: #fff; }
.pin {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--champagne);
  flex-shrink: 0;
  opacity: .8;
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 22px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--navy);
  letter-spacing: -.01em;
  gap: 16px;
}
.faq-q .pm {
  font-size: 1.4rem;
  color: var(--teal-deep);
  line-height: 1;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.faq-item.open .faq-q .pm { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-a p { padding-bottom: 22px; font-size: .9rem; }

/* ============================================================
   HOME — CINEMATIC HERO
   ============================================================ */
.cine {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 84px);  /* 84px = sticky header height */
  overflow: hidden;
  color: #fff;
  background: var(--navy-deep);
}
.cine-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.cine-bg .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.04);
  animation: cineFade 32s infinite;
  will-change: opacity, transform;
}
.cine-bg .slide:nth-child(1) { animation-delay: 0s;  }
.cine-bg .slide:nth-child(2) { animation-delay: 8s;  }
.cine-bg .slide:nth-child(3) { animation-delay: 16s; }
.cine-bg .slide:nth-child(4) { animation-delay: 24s; }
@keyframes cineFade {
  0%   { opacity: 0; transform: scale(1.04); }
  3%   { opacity: 1; }
  22%  { opacity: 1; }
  27%  { opacity: 0; transform: scale(1.13); }
  100% { opacity: 0; transform: scale(1.13); }
}
@media (prefers-reduced-motion: reduce) {
  .cine-bg .slide { animation: none; }
  .cine-bg .slide:nth-child(1) { opacity: 1; }
}
.cine-logo {
  display: block;
  height: clamp(46px,6.5vw,82px);
  width: auto;
  margin: 0 auto 30px;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,.4));
}
.cine-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(26,40,44,.66) 0%, rgba(26,40,44,.46) 40%, rgba(26,40,44,.86) 100%),
    radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(26,40,44,.5) 100%);
}
.cine-main {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 60px 0 40px;
}
.cine-inner {
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}
.cine-eyebrow {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}
.cine-eyebrow::before,
.cine-eyebrow::after { content: ""; width: 30px; height: 1px; background: rgba(255,255,255,.4); }
.cine-tag {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  color: #fff;
  font-size: clamp(3.4rem,9vw,7rem);
  line-height: .96;
  letter-spacing: -1px;
  text-shadow: 0 6px 40px rgba(0,0,0,.35);
}
.cine-tag .tm {
  font-style: normal;
  font-size: .34em;
  vertical-align: super;
  color: var(--champagne);
  margin-left: .05em;
}
.cine-sub {
  font-size: clamp(1rem,1.5vw,1.18rem);
  color: rgba(255,255,255,.85);
  max-width: 600px;
  margin: 26px auto 0;
  font-weight: 300;
  line-height: 1.7;
}
.cine-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }
.cine-serv-label {
  margin-top: 54px;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 18px;
}
.cine-services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-top: 1px solid rgba(255,255,255,.22);
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.cine-services a {
  padding: 17px 26px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  cursor: pointer;
  border-right: 1px solid rgba(255,255,255,.16);
  transition: color .2s ease, background .2s ease;
}
.cine-services a:last-child { border-right: none; }
.cine-services a:hover { color: var(--navy); background: var(--champagne); }

/* Cinematic hero footer bar */
.cine-foot {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,.16);
  background: rgba(20,31,34,.5);
  backdrop-filter: blur(4px);
}
.cine-foot .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  padding-top: 20px;
  padding-bottom: 20px;
}
.cine-foot .intl {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--champagne);
}
.cine-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}
.cine-cities span {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.cine-cities span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--champagne);
}

/* ============================================================
   HOME — ECOSYSTEM CARDS  (uses standard .grid.g6 + .card system)
   ============================================================ */
/* no custom .eco-grid needed — front-page uses class="grid g6" */

/* ============================================================
   HOME — MARQUEE TICKER
   ============================================================ */
.marquee {
  background: var(--paper);
  padding: 26px 0;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.marquee-track {
  display: inline-flex;
  gap: 46px;
  animation: scrollx 38s linear infinite;
  align-items: center;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 46px;
  font-style: italic;
}
.marquee-track span::after {
  content: "·";
  color: var(--champagne);
  font-size: 1.2rem;
  font-style: normal;
}
@keyframes scrollx {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   HOME — PROBLEM GRID
   ============================================================ */
.prob-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.16);
  margin-top: 40px;
  margin-bottom: 32px;
}
.prob {
  padding: 36px 32px;
  border-right: 1px solid rgba(255,255,255,.16);
}
.prob:last-child { border-right: none; }
.prob h4 { font-size: 1.5rem; font-weight: 500; color: #fff; margin-bottom: 10px; }
.prob p  { font-size: .88rem; color: rgba(255,255,255,.65); }
.italic-line {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.6rem,2.8vw,2.3rem);
  color: var(--champagne);
  margin-top: 30px;
  line-height: 1.25;
}

/* ============================================================
   HOME — FLYWHEEL
   ============================================================ */
.fw-bold {
  background: var(--campion-charcoal);
}
.fw-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 64px;
  align-items: start;
}
.fw-words {
  color: #fff;
  font-size: clamp(3.1rem,7.4vw,6rem);
  line-height: .95;
  letter-spacing: -1.5px;
  margin-top: 14px;
}
.fw-words .accent { color: var(--champagne); }
.fw-lead { color: rgba(255,255,255,.85); font-size: 1.12rem; max-width: 520px; margin-bottom: 34px; }
.fw-list { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.22); }
.fw-list .item { display: flex; gap: 22px; padding: 20px 2px; border-bottom: 1px solid rgba(255,255,255,.22); }
.fw-list .n {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-style: italic;
  color: var(--champagne);
  font-weight: 500;
  flex-shrink: 0;
  min-width: 34px;
  line-height: 1;
}
.fw-list h4 { font-size: 1.3rem; font-weight: 500; color: #fff; margin-bottom: 4px; }
.fw-list p  { font-size: .86rem; color: rgba(255,255,255,.6); }

/* ============================================================
   HOME — ROUTER
   ============================================================ */
/* ============================================================
   ECOSYSTEM CARDS — bg image + teal overlay
   ============================================================ */
.eco-card {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  min-height: 260px;
  /* override base .card transparent bg */
  background-color: var(--navy);
}
.eco-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(29 28 28 / 75%);
  z-index: 0;
  transition: background .25s ease;
}
/* all child elements sit above the overlay */
.eco-card > * { position: relative; z-index: 1; }
.eco-card h3  { color: #fff; }
.eco-card p   { color: rgba(255,255,255,.88); }
.eco-card .subchip   { color: var(--champagne); opacity: 1; transition: font-size .2s ease; }
.eco-card .more      { color: var(--champagne); transition: font-size .2s ease, gap .2s ease; }
.eco-card .more span { color: var(--champagne); }
/* hover — no zoom, no colour shift; grow subchip + Explore by 25% */
.eco-card:hover .subchip { font-size: .75rem; }
.eco-card:hover .more    { font-size: .825rem; color: var(--champagne); gap: 8px; }

.router-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.router-card {
  background: transparent;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 34px 30px;
  cursor: pointer;
  transition: background .25s ease;
}
.router-card:hover { background: var(--white); }
.router-card .who { font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: var(--teal-deep); margin-bottom: 8px; }
.router-card .act { font-family: 'Cormorant Garamond',serif; font-size: 1.55rem; color: var(--navy); display: flex; align-items: center; gap: 8px; }

/* ============================================================
   HOME — CARE IN ACTION PHOTO GRID
   ============================================================ */
.care-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 10px;
  height: 320px;
}
.care-grid .ph {
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  background: var(--navy);
}
.care-grid .ph.photo { background-size: cover; background-position: center; }
.care-grid .ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent 50%,rgba(30,45,49,.7));
}
.care-grid .ph span {
  position: relative;
  z-index: 2;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}

/* ============================================================
   LOGO WALL (Partners)
   ============================================================ */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin-top: 32px;
}
.logo-cell {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  transition: color .2s ease, background .2s ease;
}
.logo-cell:hover { color: var(--navy); background: var(--white); }

/* ============================================================
   ACADEMY — PROGRAM GRID
   ============================================================ */
.prog-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.prog {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
  background: transparent;
}
.prog .top {
  height: 128px;
  padding: 22px;
  display: flex;
  align-items: flex-end;
}
.prog .top.t1 { background: var(--teal-deep); color: #fff; }
.prog .top.t2 { background: var(--navy); color: #fff; }
.prog .top.t3 { background: #3c5a60; color: #fff; }
.prog .body { padding: 30px 28px; background: var(--white); }
.prog .tag {
  display: inline-block;
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--teal-deep);
  margin-bottom: 10px;
}
.prog h4 { margin-bottom: 8px; font-size: 1.6rem; font-weight: 500; color: var(--navy); }
.prog p  { font-size: .86rem; margin-bottom: 18px; }
.prog.featured { border-color: var(--navy); }

/* ============================================================
   FOUNDATION — STAT BAND
   ============================================================ */
.stat-band {
  background: transparent;
  border: none;
  border-radius: 0;
  border-top: 1px solid var(--line-strong);
  padding: 48px 0 0;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 24px;
}
.stat-big {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.4rem,4.4vw,3.6rem);
  font-weight: 500;
  color: var(--navy);
  line-height: 1;
}
.stat-big small {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: .8rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: 8px;
  line-height: 1.5;
}
.cost-img {
  width: 100%;
  height: 280px;
  border-radius: var(--radius-lg);
  background: var(--navy);
  background-size: cover;
  background-position: center;
  margin-bottom: 0;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; }
.pathbtn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 18px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 2px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
  transition: .15s;
}
.pathbtn:hover    { border-color: var(--teal-deep); color: var(--teal-deep); }
.pathbtn.active   { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.contact-form-box { box-shadow: var(--shadow); }
#formfields, .wpcf7-form p { display: flex; flex-direction: column; gap: 12px; }
#formfields input, .wpcf7-form input, .wpcf7-form textarea,
#formfields textarea {
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: 'Montserrat', sans-serif;
  font-size: .9rem;
  background: var(--paper);
  color: var(--ink);
  outline: none;
  transition: border-color .15s;
  width: 100%;
}
#formfields input:focus, .wpcf7-form input:focus,
#formfields textarea:focus { border-color: var(--teal-deep); }
#formfields select, .wpcf7-form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-family: 'Montserrat', sans-serif;
  font-size: .9rem;
  background-color: var(--paper);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%232B393C'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
#formfields select:focus, .wpcf7-form select:focus { outline: none; border-color: var(--teal-deep); }

/* ============================================================
   RESOURCES — TOPIC CARDS
   ============================================================ */
.topic {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  cursor: pointer;
  transition: box-shadow .2s ease;
}
.topic:hover { box-shadow: var(--shadow-sm); }
.topic h4 { font-family: 'Montserrat',sans-serif; font-weight: 700; font-size: .9rem; color: var(--navy); margin: 12px 0 6px; }
.topic p  { font-size: .84rem; }
.topic .lk { font-size: .72rem; font-weight: 700; color: var(--teal-deep); text-transform: uppercase; letter-spacing: .1em; display: inline-block; margin-top: 10px; }

/* ============================================================
   ABOUT — MISSION / VISION
   ============================================================ */
.mission-card { padding: 40px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.mission-card h3 { margin: 8px 0 14px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer.site-footer {
  background: var(--teal-deep);
  color: rgba(255,255,255,1);
  padding: 80px 0 32px;
  position: relative;
  border-top: 2px solid var(--champagne);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 52px;
  margin-bottom: 48px;
}
.foot-brand .name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
}
.foot-logo {
  display: block;
  margin-bottom: 16px;
}
.foot-brand p    { font-size: .88rem; max-width: 320px; margin-bottom: 18px; line-height: 1.7; color: rgb(255,255,255,1);}
.foot-cities     { font-size: .65rem; letter-spacing: .1em; color: var(--champagne); font-weight:bold;}
footer h5 {
  font-family: 'Montserrat', sans-serif;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,1);
  margin-bottom: 20px;
}
.foot-col { display: flex; flex-direction: column; }
.foot-col a {
  display: block;
  font-size: .88rem;
  color: rgba(255,255,255,1);
  padding: 6px 0;
  transition: color .15s ease, padding .15s ease;
  cursor: pointer;
}
.foot-col a:hover { color: var(--champagne); padding-left: 5px; font-weight:bold;}
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .72rem;
  color: rgba(255,255,255,1);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .g6,
  .g3,
  .prob-grid,
  .logo-wall  { grid-template-columns: repeat(2,1fr); }
  .fw-grid    { grid-template-columns: 1fr; gap: 48px; }
  .phero-grid { grid-template-columns: 1fr; }
  .phero-img  { display: none; }
  .foot-grid  { grid-template-columns: 1fr 1fr; gap: 36px; }
  .router-grid { grid-template-columns: repeat(2,1fr); }
  .care-grid  { grid-template-columns: repeat(2,1fr); height: auto; }
  .care-grid .ph { aspect-ratio: 1 / 1; }
  .prog-grid  { grid-template-columns: 1fr 1fr; }
}
/* Mobile-only nav extras — hidden on desktop, shown inside drawer */
.nav-mobile-extra { display: none; }

@media (max-width: 768px) {
  .main-nav,
  .nav-utility .util-link { display: none; }
  .main-nav.open {
    display: flex;
    position: absolute;
    top: 84px;
    left: 0; right: 0;
    flex-direction: column;
    background: var(--paper);
    padding: 16px;
    border-bottom: 1px solid var(--line);
    gap: 2px;
    z-index: 99;
  }
  .main-nav.open a { width: 100%; padding: 12px; }
  /* Submenus inside the mobile drawer: stacked, tap-to-expand via JS adding .sub-open */
  .main-nav.open li.menu-item-has-children { width: 100%; flex-direction: column; align-items: stretch; }
  .main-nav.open .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--line);
    border-radius: 0;
    background: transparent;
    padding: 0 0 0 14px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .main-nav.open li.sub-open > .sub-menu { max-height: 600px; }
  .main-nav.open li.menu-item-has-children > a::after { transition: transform .2s ease; }
  .main-nav.open li.sub-open > a::after { transform: rotate(225deg); }
  /*.main-nav.open .nav-mobile-extra {
    display: block;
    width: 100%;
    padding: 12px;
    font-size: .74rem;
    font-weight: 500;
    color: var(--ink-soft);
    border-top: 1px solid var(--line);
    margin-top: 4px;
  }*/
  .main-nav.open .nav-mobile-extra:first-of-type { border-top: none; margin-top: 0; }
  .main-nav.open .nav-mobile-pay { color: var(--teal-deep); font-weight: 600; }
  .menu-toggle { display: flex; }
  .g6, .g3, .g2,
  .prob-grid,
  .steps,
  .split,
  .router-grid,
  .checklist,
  .prog-grid,
  .logo-wall,
  .contact-grid { grid-template-columns: 1fr; }
  .split { border: none; }
  .split-card + .split-card { border-left: none; border-top: 1px solid rgba(255,255,255,.15); }
  .grid.g2, .grid.g3, .grid.g6,
  .steps, .router-grid, .logo-wall { border-left: none; }
  .care-grid  { grid-template-columns: 1fr 1fr; }
  .stat-band  { grid-template-columns: 1fr; }
  .foot-grid  { grid-template-columns: 1fr; }
  section     { padding: 64px 0; }
  section.tight { padding: 48px 0; }
  .cine       { min-height: 80vh; }
  .nav-utility .book { display: none; }
}
@media (max-width: 480px) {
  .wrap         { padding: 0 20px; }
  .care-grid    { grid-template-columns: 1fr; height: auto; }
  .care-grid .ph { aspect-ratio: 1 / 1; }
  .cta-band .btns { flex-direction: column; align-items: center; }
}

/* =====================================================================
   QAC MODALS — CTA popup overlays
   ===================================================================== */
.qac-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.qac-modal.is-open { display: flex; }

.qac-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 28, 32, .72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}
.qac-modal-box {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: var(--radius-lg, 6px);
  width: 100%;
  max-width: 820px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .38);
  animation: modalIn .22s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
.qac-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.qac-modal-title {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0;
}
.qac-modal-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.65);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 3px;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.qac-modal-close:hover { background: rgba(255,255,255,.15); color: #fff; }
.qac-modal-body {
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.qac-modal-desc {
  padding: 18px 28px 0;
  font-size: .9rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.65;
}
@media (max-width: 600px) {
  .qac-modal { padding: 0; align-items: flex-end; }
  .qac-modal-box { max-height: 95vh; border-radius: var(--radius-lg, 6px) var(--radius-lg, 6px) 0 0; }
}

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

/* Prose block */
.about-prose p { font-size: 1rem; line-height: 1.85; color: var(--ink); margin-bottom: 1.25rem; }

/* Pull quote */
.about-pullquote {
  border-left: 4px solid var(--champagne);
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: rgba(194,172,128,.07);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.about-pullquote p { font-size: 1.1rem; font-style: italic; color: var(--navy); margin: 0 0 .5rem; line-height: 1.7; }
.about-pullquote cite { font-size: .82rem; color: var(--ink-soft); font-style: normal; font-weight: 600; }

/* Timeline */
.about-timeline { display: flex; flex-direction: column; gap: 0; }
.about-tl-item  { display: grid; grid-template-columns: 28px 1fr; gap: 0 24px; }
.about-tl-marker { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.about-tl-dot   { width: 14px; height: 14px; border-radius: 50%; background: var(--teal-deep); flex-shrink: 0; border: 3px solid var(--paper-2); box-shadow: 0 0 0 2px var(--teal-deep); }
.about-tl-line  { width: 2px; flex: 1; background: linear-gradient(to bottom, var(--teal-deep), var(--line)); margin-top: 6px; min-height: 32px; }
.about-tl-item--last .about-tl-marker { padding-bottom: 0; }
.about-tl-content { padding-bottom: 40px; }
.about-tl-item--last .about-tl-content { padding-bottom: 8px; }
.about-tl-year  { display: block; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--teal-deep); margin-bottom: 6px; }
.about-tl-title { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin: 0 0 10px; line-height: 1.4; }
.about-tl-content p { font-size: .92rem; line-height: 1.75; color: var(--ink); margin-bottom: .75rem; }

/* Milestone chips */
.about-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.about-chip  { display: inline-block; font-size: .72rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft); }
.about-chip--teal { background: rgba(46,126,132,.1); border-color: rgba(46,126,132,.3); color: var(--teal-deep); }

/* Values number accent */
.about-v-num { font-size: 2rem; font-weight: 700; color: var(--champagne); line-height: 1; margin-bottom: 10px; }

/* Leader cards (old horizontal style — kept for reference) */
.about-leader-card { display: flex; gap: 20px; align-items: flex-start; }
.about-leader-avatar {
  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
  background: var(--navy); display: flex; align-items: center; justify-content: center;
  overflow: hidden; font-size: 1.6rem; font-weight: 700; color: #fff;
}
.about-leader-avatar img { width: 100%; height: 100%; object-fit: cover; }
.about-leader-info h3 { font-size: 1.05rem; margin: 0 0 2px; color: var(--navy); }
.about-leader-role { display: block; font-size: .78rem; font-weight: 600; color: var(--teal-deep); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
.about-leader-info p { font-size: .9rem; line-height: 1.65; color: var(--ink-soft); margin: 0; }

/* ── NEW LEADER CARDS (5-up centered grid) ─────────────────────── */
.leader-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
/* Push the 4th card to start at col 1 of an offset so the two bottom
   cards sit centered under the three above.
   Trick: start the 4th at column 1 with a half-column left indent via
   a pseudo-first-child on the 4th item's row — easiest achieved by
   wrapping the bottom two in a sub-grid row, but we keep it flat here
   using named grid lines and auto-placement override. */
.leader-grid .leader-card:nth-child(3){
	/* grid-column: 3;   force onto new row col 3 */
	/* margin-left: 0; */
}
.leader-grid .leader-card:nth-child(6) {
  /* grid-column: 2;   */
	/* margin-left: 0;                force onto new row col 2 */
  /* margin-left: calc(50% + 14px);  shift right by one col + half gap */
}
.leader-grid .leader-card:nth-child(7) {
  /* grid-column: 1;                  sit at col 1 */
  /* margin-left: 0; */
}

.leader-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem 1.75rem;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition: background .25s ease, box-shadow .25s ease;
}
.leader-card:hover {
  background: var(--campion-teal-pale);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}
.leader-avatar {
  width: 288px;
  height: 288px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 1.4rem;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.leader-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}
/* Mike's photo shifts down so his head clears the circle crop */
.leader-avatar img.photo-mike {
  object-position: center 0%;
}
.leader-card h3 {
  font-size: 1.25rem;
  margin: 0 0 6px;
  color: var(--navy);
}
.leader-role {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  color: var(--teal-deep);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.leader-card p {
  font-size: .9rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 1024px) {
  .leader-grid { grid-template-columns: repeat(2, 1fr); }
  .leader-grid .leader-card:nth-child(6) { grid-column: auto; margin-left: 0; }
  .leader-grid .leader-card:nth-child(7) { grid-column: auto; }
  /* Centre the lone 5th card on its row */
  .leader-grid .leader-card:nth-child(7):last-child {
    grid-column: 1 / -1;
    /* max-width: calc(50% - 14px); */
    margin: 0 auto;
  }
  .leader-avatar { width: 220px; height: 220px; }
}

@media (max-width: 600px) {
  .about-tl-item  { grid-template-columns: 20px 1fr; gap: 0 16px; }
  .about-tl-dot   { width: 12px; height: 12px; }
  .about-leader-card { flex-direction: column; gap: 14px; }
  .stat-band[style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; }
  .leader-grid { grid-template-columns: 1fr; }
  .leader-grid .leader-card:nth-child(6),
  .leader-grid .leader-card:nth-child(7) { grid-column: auto; margin-left: 0; max-width: 100%; }
  .leader-avatar { width: 200px; height: 200px; }
}

/* ===================================================================
   CONTACT INFO STRIP (contact page + footer)
   =================================================================== */

/* Contact page strip */
.contact-info-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.contact-info-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.contact-info-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: rgba(46,126,132,.1);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.contact-info-item strong { display: block; font-size: .8rem; font-weight: 700; color: var(--navy); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
.contact-info-item p, .contact-info-item a { font-size: .88rem; line-height: 1.6; color: var(--ink); margin: 0; }
.contact-info-item a { color: var(--teal-deep); font-weight: 600; }
.contact-info-item a:hover { color: var(--navy); }

@media (max-width: 900px) { .contact-info-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .contact-info-strip { grid-template-columns: 1fr; } }

/* Footer contact block */
.foot-contact { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.foot-contact-item {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .78rem; color: rgba(255,255,255,.65); line-height: 1.5;
}
.foot-contact-item svg { flex-shrink: 0; margin-top: 2px; opacity: .7; }
.foot-contact-item a { color: rgba(255,255,255,.8); }
.foot-contact-item a:hover { color: #fff; }

/* ===================================================================
   PARTNERSHIP APPLICATION FORM
   =================================================================== */
.campion-application-form {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 2.5rem;
}
@media (max-width: 600px) {
  .campion-application-form {
    padding: 1.5rem 1rem;
    border-radius: .75rem;
    border-left: none;
    border-right: none;
  }
}

#menu-item-25 {
	display: none;
	visibility: hidden;
}