/* ===========================================================
   EDP Training - clickable prototype
   Brand colours pulled from the live logo + site:
   orange + amber (primary), silver grey, teal accent, deep teal.
   =========================================================== */

:root {
  --orange:      #F0852C;   /* primary CTA, from Race Ahead badge / logo */
  --orange-600:  #D96E14;   /* hover */
  --amber:       #E6A100;   /* gold accent (logo "Develop") */
  --grey:        #9A9A9A;   /* logo silver-grey */
  --teal:        #5CA6AD;   /* soft teal accent used on live site */
  --teal-700:    #2E7A82;
  --green:       #64AC32;   /* MHFA product-line accent (from Damian's Canva palette) */
  --green-700:   #2E4F17;   /* dark forest green (Canva) - for green text on cream */
  --green-100:   #C7E5CA;   /* pale green tint (Canva) */
  --brown:       #BFA473;   /* tan/brown accent (Canva) */
  --brown-700:   #8A704C;   /* dark brown (Canva) */
  --ink-teal:    #0C3438;   /* deep teal for dark bands */
  --ink:         #262220;   /* body text */
  --muted:       #6F6862;
  --line:        #ECE3D7;
  --paper:       #FDFAF5;   /* warm off-white page bg */
  --paper-2:     #F6EEE2;   /* alt section bg */
  --white:       #ffffff;

  --maxw: 1400px;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 18px 40px -22px rgba(38,34,32,.45);
  --shadow-sm: 0 8px 22px -16px rgba(38,34,32,.5);

  --h-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --b-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- base ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  font-family: var(--b-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family: var(--h-sans); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }
a { color: var(--teal-700); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--h-sans); font-weight: 600; font-size: .98rem;
  padding: .8em 1.45em; border-radius: 999px;
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, background .18s ease, color .18s ease, border-color .18s ease;
  line-height: 1;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn--primary:hover { background: var(--orange-600); border-color: var(--orange-600); color:#fff; }
.btn--ghost { background: transparent; border-color: var(--orange); color: var(--orange-600); }
.btn--ghost:hover { background: var(--orange); color: #fff; }
.btn--light { background:#fff; border-color:#fff; color: var(--ink); }
.btn--light:hover { background: var(--paper-2); border-color: var(--paper-2); }
.btn--onteal { background:#fff; border-color:#fff; color: var(--ink-teal); }
.btn--onteal-ghost { background: transparent; border-color: rgba(255,255,255,.6); color:#fff; }
.btn--onteal-ghost:hover { background: rgba(255,255,255,.12); border-color:#fff; color:#fff; }

/* ---------- header / nav (injected by site.js) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(253,250,245,.92);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 18px; height: 72px; }
.nav__logo img { height: 40px; width: auto; }
.nav__menu { display: flex; align-items: center; gap: 4px; margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--h-sans); font-weight: 600; font-size: .92rem; color: var(--ink);
  padding: 10px 12px; border-radius: 8px; background: none; border: 0; cursor: pointer;
}
.nav__link:hover { color: var(--orange-600); text-decoration: none; background: var(--paper-2); }
.nav__item--has-menu > .nav__link::after { content: "▾"; font-size: .7em; opacity: .6; }
.nav__dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 232px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 8px; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: .16s ease;
}
.nav__item--has-menu:hover .nav__dropdown,
.nav__item--has-menu:focus-within .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__dropdown a {
  display: block; padding: 9px 12px; border-radius: 7px; color: var(--ink);
  font-size: .9rem; font-weight: 500;
}
.nav__dropdown a:hover { background: var(--paper-2); color: var(--orange-600); text-decoration: none; }
.nav__dropdown small { display:block; color: var(--muted); font-weight:400; font-size:.76rem; }
.nav__cta { margin-left: 6px; }
.nav__toggle { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: .2s; }

/* ---------- hero ---------- */
.hero { background: linear-gradient(180deg, var(--paper-2), var(--paper) 78%); padding: clamp(48px,7vw,86px) 0 clamp(40px,6vw,72px); }
.hero__eyebrow { font-family: var(--h-sans); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; color: var(--teal-700); margin-bottom: 14px; }
.hero__content { max-width: 820px; }
.hero__headline { max-width: 18ch; }            /* the "bad island" headline */
.hero__deck { font-family: var(--h-sans); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.25; color: var(--ink); margin: 0 0 18px; max-width: 26ch; }  /* midsize line under the h1 */
.hero__sub { font-size: 1rem; color: var(--muted); max-width: 56ch; }  /* normal body text */
.hl { color: var(--orange-600); font-weight: 700; }  /* inline keyword highlight */
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero__stat { font-family: var(--h-sans); font-weight: 700; font-size: clamp(1.05rem, 1.9vw, 1.35rem); line-height: 1.3; color: var(--green-700); margin: 20px 0 0; max-width: 46ch; }
.hero__stat strong { color: var(--orange-600); }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.hero__quote {
  background:#fff; border: 1px solid var(--line); border-left: 5px solid var(--orange);
  border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm);
}
.hero__quote p { font-size: 1.02rem; font-style: italic; color: var(--ink); }
.hero__quote cite { font-style: normal; font-weight: 700; font-family: var(--h-sans); font-size: .9rem; }
.hero__quote cite span { display:block; font-weight: 500; color: var(--muted); font-size:.84rem; }

/* ---------- sections ---------- */
section { padding: clamp(46px,6vw,82px) 0; }
.band--soft { background: var(--paper-2); }
.band--white { background: #fff; }
.band--dark { background: var(--ink-teal); color: #EAF3F2; }
.band--dark h1,.band--dark h2,.band--dark h3 { color:#fff; }
.band--dark .eyebrow { color: var(--teal); }
.eyebrow { font-family: var(--h-sans); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; color: var(--teal-700); margin-bottom: 12px; }
.section-head { max-width: 60ch; margin-bottom: 38px; }
.section-head--center { margin-inline: auto; text-align: center; }
.lead { font-size: 1.12rem; color: var(--muted); }

/* ---------- logo strip ---------- */
.logos { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: center; }
.logos span {
  font-family: var(--h-sans); font-weight: 700; color: #8c8c8c; font-size: 1.05rem;
  letter-spacing: .02em;
}
.logos__label { text-align:center; color: var(--muted); font-size:.82rem; text-transform: uppercase; letter-spacing:.14em; margin-bottom: 18px; font-family: var(--h-sans); }

/* ---------- scrolling logo marquee (attached under the hero) ---------- */
.logobar { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 34px 0; overflow: hidden; }
.logobar__title { text-align: center; font-family: var(--h-sans); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .82rem; color: var(--muted); margin: 0 0 24px; }
.logobar__viewport { display: flex; align-items: center; width: max-content; animation: logoscroll 65s linear infinite; }
.logobar:hover .logobar__viewport { animation-play-state: paused; }
/* every logo locked to the same height and vertically centred, with even gaps */
.logobar__item { flex: 0 0 auto; margin: 0 40px; display: flex; align-items: center; justify-content: center; }
/* logos are trimmed to their artwork, so normalise on cap-height (one shared height,
   natural widths, even gaps) - the standard "trusted by" strip look.
   Sized up + less faded per Bianca (the smaller marks were hard to recognise). */
.logobar__item img {
  height: 62px; width: auto; max-width: 260px; object-fit: contain;
}
@keyframes logoscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logobar__viewport { animation: none; flex-wrap: wrap; justify-content: center; width: auto; row-gap: 22px; }
}

/* ---------- awards & recognition badges ---------- */
.awards { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.award {
  display: flex; align-items: center; gap: 13px;
  background:#fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 11px 22px 11px 13px; box-shadow: var(--shadow-sm);
}
.award__icon {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; color:#fff;
  background: linear-gradient(135deg, var(--amber), var(--orange));
}
.award__icon svg { width: 19px; height: 19px; }
.award--shortlist .award__icon { background: linear-gradient(135deg, var(--teal), var(--teal-700)); }
.award--speaker .award__icon { background: linear-gradient(135deg, var(--ink-teal), var(--teal-700)); }
.award__t { font-family: var(--h-sans); font-weight: 700; font-size: .82rem; line-height: 1.15; color: var(--ink); }
.award__s { display: block; font-family: var(--b-sans); font-weight: 500; color: var(--muted); font-size: .72rem; margin-top: 2px; }
.awards--flag { /* prototype: styled badges; swap for official badge art */ }
/* Official award artwork, when supplied, sits on a plain white plate at a
   consistent height so badges of different proportions still line up. */
.award--badge { padding: 0; background: none; border: none; border-radius: 0; box-shadow: none; }
.award--badge img { display: block; width: auto; height: auto; max-height: 108px; max-width: 260px; border-radius: 12px; } /* no fixed height + contain: wide badges would letterbox and the radius would round the empty box, not the artwork */
.award--wide img { height: 80px; max-height: none; max-width: none; }
@media (max-width: 600px) { .award--badge img { max-height: 80px; max-width: 220px; } .award--wide img { height: 56px; max-width: 100%; } }

/* "Our Values" - the four cards under Vision and Mission (3 Sep 2026). */
.values__heading { text-align: center; margin: 44px 0 20px; }
.values .card p { font-size: .95rem; }

/* ---------- generic card grids ---------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
/* layout-rhythm helpers: break up the repeated "prose | tick-list" blocks.
   .grid--rev swaps the two columns so consecutive sections zig-zag;
   .checks--grid lays a longer tick-list out in two columns instead of one tall stack. */
.grid--rev > *:first-child { order: 2; }
.checks--grid { grid-template-columns: 1fr 1fr; gap: 12px 34px; }
.card {
  background:#fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
/* whole-card click targets (used when a card is itself the link/CTA) */
a.card, button.card, .card[data-open-modal] { display: block; width: 100%; text-align: left; color: inherit; text-decoration: none; cursor: pointer; font: inherit; }
a.card:hover, button.card:hover, .card[data-open-modal]:hover { transform: translateY(-3px); border-color: var(--orange); box-shadow: var(--shadow); text-decoration: none; }
.card__cue { display: inline-block; margin-top: 14px; font-family: var(--h-sans); font-weight: 700; font-size: .86rem; color: var(--orange-600); }
.card h3 { margin-bottom: .35em; }
.card__tag { font-family: var(--h-sans); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color: var(--orange-600); }
/* card with a top image/media (news & insights) - placeholder bleeds to the card edges;
   swap the .card__media background for a real <img> in the CMS. */
.card.card--media { overflow: hidden; padding-top: 0; }
.card__media { margin: 0 -26px 18px; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--paper-2), var(--green-100)); display: grid; place-items: center; }
.card__media > span { font-family: var(--h-sans); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); opacity: .7; }
.card__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- blog post body ---------- */
.post-body { max-width: 780px; margin-inline: auto; }
.post-body h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-top: 1.6em; }
.post-body h3 { font-size: 1.15rem; margin-top: 1.4em; }
.post-body p { margin-bottom: 1.1em; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 1.2em 0; }
.post-body figure { margin: 1.4em 0; }
.post-body figcaption { font-size: .85rem; color: var(--muted); margin-top: 6px; }
.post-body ul, .post-body ol { margin: 0 0 1.1em 1.2em; }
.post-body li { margin-bottom: .45em; }
.post-body blockquote { margin: 1.4em 0; padding-left: 18px; border-left: 4px solid var(--orange); color: var(--ink); font-style: italic; }
.post-body iframe { max-width: 100%; }
/* pagination */
.pagination a, .pagination span { display: inline-block; padding: 8px 13px; margin: 0 3px; border-radius: var(--radius-sm); font-family: var(--h-sans); font-weight: 600; font-size: .9rem; }
.pagination a { border: 1px solid var(--line); color: var(--ink); }
.pagination a:hover { border-color: var(--orange); text-decoration: none; }
.pagination .current { background: var(--orange); color: #fff; }
.card--media > .card__media:first-child { margin-top: 0; }

/* gated resource cards (Resources page) - guide cover on top, title + CTA below */
.resource-grid { align-items: start; }
.resource-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:16px; box-shadow: var(--shadow-sm); cursor:pointer; text-align:center; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.resource-card:hover { transform: translateY(-3px); border-color: var(--orange); box-shadow: var(--shadow); }
.resource-card__cover { display:block; width:100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; border-radius: var(--radius-sm); border:1px solid var(--line); margin-bottom:14px; }
.resource-card h3 { font-size:1rem; margin:0; }

/* full-width photo banner - real training photography to break up text-heavy pages */
.post-thumb { max-width: 760px; margin: 0 auto 8px; border-radius: var(--radius); overflow: hidden; }
.post-thumb img { display: block; width: 100%; height: auto; }
.photo-banner { position: relative; overflow: hidden; }
/* The source photos are pre-cropped to ~2:1 (the dead ceiling space above the heads is
   removed from the files themselves), so the banner just shows each image in full at its
   own aspect ratio - it scales with the viewport and never re-crops heads off. */
.photo-banner img { display:block; width:100%; height:auto; }
.photo-banner__cap { position:absolute; left:0; bottom:0; padding: 10px 16px; font-family: var(--h-sans); font-weight:600; font-size:.82rem; color:#fff; background: linear-gradient(0deg, rgba(0,0,0,.5), transparent); }

/* stat cards */
.stat { text-align: left; }
.stat__num { font-family: var(--h-sans); font-weight: 800; font-size: 2.6rem; color: var(--orange); line-height: 1; }
.stat__src { font-size: .78rem; color: var(--muted); margin-top: 10px; }

/* case-study supporting quote (outcome-led card, quote is secondary - not a testimonial card) */
.case__quote { font-style: italic; color: var(--muted); font-size: .9rem; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.case__quote span { display: block; font-style: normal; font-weight: 600; color: var(--ink); font-size: .8rem; margin-top: 6px; }

/* dedicated case-study pages */
.case-quote-lg { font-family: var(--h-sans); font-weight: 600; font-size: clamp(1.2rem, 2.4vw, 1.7rem); line-height: 1.45; color: #fff; margin: 0 0 16px; }
.case-quote-cite { color: #9FBDBB; font-family: var(--h-sans); }
.case-quote-cite strong { color: #fff; }
.case-logo-lg { height: 56px; width: auto; max-width: 240px; object-fit: contain; margin-bottom: 18px; }
/* MHFA product theming (green): flips the orange product accents to green
   across the whole page when body carries .theme-mhfa. */
.theme-mhfa .hero__eyebrow, .theme-mhfa .eyebrow { color: var(--green-700); }
.theme-mhfa .checks li::before { background: var(--green); }
.theme-mhfa .btn--primary { background: var(--green); border-color: var(--green); color:#fff; }
.theme-mhfa .btn--primary:hover { background: var(--green-700); border-color: var(--green-700); color:#fff; }
.theme-mhfa .btn--ghost { background: transparent; border-color: var(--green); color: var(--green-700); }
.theme-mhfa .btn--ghost:hover { background: var(--green); border-color: var(--green); color:#fff; }
.theme-mhfa .card__tag { color: var(--green-700); }
.theme-mhfa .card__cue { color: var(--green-700); }
.theme-mhfa a.card:hover, .theme-mhfa button.card:hover, .theme-mhfa .card[data-open-modal]:hover { border-color: var(--green); }
.theme-mhfa .card__icon { color: var(--green); }
.theme-mhfa .stat__num { color: var(--green); }
.theme-mhfa .step__no { background: var(--green); }
.theme-mhfa a.step:hover, .theme-mhfa .step[data-open-modal]:hover { border-color: var(--green); }
.theme-mhfa .step__cue { color: var(--green-700); }
.theme-mhfa .doorway:hover { border-color: var(--green); }
.theme-mhfa .doorway .arr { color: var(--green-700); }
.theme-mhfa .compare .price { color: var(--green-700); }
.theme-mhfa .faq summary::after { color: var(--green); }
.theme-mhfa .strap { background: var(--green); }

/* two-offer split (no coloured top border - differentiate via tag colour + a subtle
   colour wash so Race reads orange and MHFA reads green at a glance) */
.offer { background: linear-gradient(180deg, rgba(240,133,44,.07), #fff 42%); }
.offer .card__tag { color: var(--orange-600); }
.offer--mhfa { background: linear-gradient(180deg, rgba(100,172,50,.10), #fff 42%); }
.offer--mhfa .card__tag { color: var(--green-700); }
.offer--mhfa .card__cue { color: var(--green-700); }
.offer--mhfa:hover { border-color: var(--green); }

/* differentiator list */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.checks li { position: relative; padding-left: 34px; }
.checks li::before {
  content:"✓"; position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%;
  background: var(--orange); color:#fff; font-size:.8rem; display:grid; place-items:center; font-weight:700;
}

/* ---------- journey ladder ---------- */
.ladder { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; counter-reset: step; }
.ladder--3 { grid-template-columns: repeat(3,1fr); }
.ladder--mhfa .step__no { background: var(--green); }

/* Journey cards lead with an image instead of a numbered badge (Aug 2026 review):
   the same photo runs across all three stages for visual continuity.
   Doubled-up class so this beats `.step`'s own padding regardless of source order -
   otherwise the card keeps its 22px top padding and the image sits under a white band. */
.step.step--img { padding-top: 0; overflow: hidden; }
.step__img { margin: 0 -20px 16px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.step__img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Allyship Community wraps around the whole journey - you can join before, during
   or after, so it reads as a band beneath all three stages with arrows at each end. */
.journey-wrap {
  margin-top: 18px; position: relative;
  border: 2px dashed var(--orange); border-radius: var(--radius);
  background: #fff;
  padding: 20px 56px; text-align: center;
}
.journey-wrap__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: var(--orange); font-size: 1.6rem; line-height: 1; font-weight: 700;
}
.journey-wrap__arrow--l { left: 16px; }
.journey-wrap__arrow--r { right: 16px; }
.journey-wrap__title { font-family: var(--h-sans); font-weight: 800; color: var(--orange-600); margin: 0 0 4px; font-size: 1.05rem; }
.journey-wrap__sub { margin: 0; font-size: .92rem; color: var(--muted); }
.journey-wrap__sub a { font-weight: 600; }
@media (max-width: 700px) {
  .journey-wrap { padding: 18px 20px; }
  .journey-wrap__arrow { display: none; }
}
.step {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 22px 20px;
  position: relative; box-shadow: var(--shadow-sm);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
a.step, .step[data-open-modal] { display: block; color: inherit; text-decoration: none; cursor: pointer; font: inherit; text-align: left; width: 100%; }
a.step:hover, .step[data-open-modal]:hover { transform: translateY(-3px); border-color: var(--orange); box-shadow: var(--shadow); text-decoration: none; }
.step__cue { display: inline-block; margin-top: 14px; font-family: var(--h-sans); font-weight: 700; font-size: .84rem; color: var(--orange-600); }
.step__no {
  width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color:#fff;
  font-family: var(--h-sans); font-weight:700; display:grid; place-items:center; margin-bottom: 14px;
}
.step h4 { margin: 0 0 .3em; font-size: 1.05rem; }
.step p { font-size: .9rem; color: var(--muted); margin: 0; }
.step__price { font-family: var(--h-sans); font-weight:700; font-size:.82rem; color: var(--ink); margin-top:10px; }
.ladder__note { text-align:center; color: var(--muted); margin-top: 18px; font-size:.92rem; }
.compare th a { color: inherit; }
.compare th a:hover { color: var(--orange-600); }
/* Allyship Community callout (home) - the "join at any stage" block, pulled out of the ladder */
.community-callout { max-width: 780px; margin-inline: auto; text-align: center; }
.community-callout .lead { margin-inline: auto; }

/* ---------- course "at a glance" spec block (shared across every course page for
   easy comparison: Format / Delivery / Group size / Best for / Price) ---------- */
.spec { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.spec__title { font-family: var(--h-sans); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color: var(--orange-600); margin:0 0 12px; }
.spec dl { margin:0; }
.spec__row { display:flex; justify-content:space-between; gap:18px; padding:11px 0; border-bottom:1px solid var(--line); }
.spec__row:first-of-type { padding-top:0; }
.spec__row dt { font-family: var(--h-sans); font-weight:700; color: var(--muted); font-size:.82rem; flex:0 0 auto; }
.spec__row dd { margin:0; text-align:right; font-weight:600; font-size:.92rem; }
.spec__row--price { border-bottom:0; padding-bottom:0; }
.spec__row--price dd { color: var(--orange-600); font-family: var(--h-sans); font-weight:800; font-size:1rem; }
.spec__row--price-mid { border-bottom:1px solid var(--line); padding-bottom:11px; } /* a highlighted price row that is not the last row */
.spec .btn { width:100%; justify-content:center; margin-top:16px; }
.theme-mhfa .spec__title { color: var(--green-700); }
.theme-mhfa .spec__row--price dd { color: var(--green-700); }

/* ---------- comparison table ---------- */
.compare { width: 100%; border-collapse: collapse; background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: .92rem; }
.compare th, .compare td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { background: var(--ink-teal); color:#fff; font-family: var(--h-sans); font-size:.86rem; }
.compare tbody th { font-family: var(--h-sans); color: var(--ink); white-space: nowrap; }
.compare tr:last-child td, .compare tr:last-child th { border-bottom: 0; }
.compare .price { font-weight: 700; color: var(--orange-600); white-space: nowrap; }
.table-scroll { overflow-x: auto; }

/* ---------- testimonials ---------- */
.quote {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 26px;
  box-shadow: var(--shadow-sm);
}
.quote p { font-style: italic; }
.quote cite { font-style: normal; font-family: var(--h-sans); font-weight:700; font-size:.9rem; }
.quote cite span { display:block; font-weight:500; color: var(--muted); font-size:.82rem; }

/* ---------- testimonials (full-width, scattered - never boxed cards) ---------- */
.testimonial { padding: clamp(32px, 4vw, 56px) 0; }
.testimonial__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.testimonial__avatar {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 16px; box-shadow: 0 10px 26px -12px rgba(38,34,32,.5);
}
.testimonial__avatar--initials {
  display: grid; place-items: center; color:#fff; font-family: var(--h-sans);
  font-weight: 700; font-size: 1.4rem; letter-spacing: .02em;
  background: linear-gradient(135deg, var(--amber), var(--orange));
}
.testimonial blockquote {
  margin: 0 0 14px; font-family: var(--h-sans); font-weight: 600;
  font-size: clamp(1.12rem, 1.9vw, 1.5rem); line-height: 1.3; letter-spacing: -.012em;
}
.testimonial blockquote::before { content: "\201C"; color: var(--orange); font-weight: 800; }
.testimonial blockquote::after { content: "\201D"; color: var(--orange); font-weight: 800; }
.testimonial__cite { font-family: var(--h-sans); font-size: .95rem; color: var(--muted); margin: 0; }
.testimonial__cite strong { color: var(--ink); font-weight: 700; }
.band--dark .testimonial__cite { color: #9FBDBB; }
.band--dark .testimonial__cite strong { color: #fff; }
.band--dark .testimonial blockquote::before, .band--dark .testimonial blockquote::after { color: var(--amber); }

/* Most-popular badges (Damian feedback) */
.badge-popular {
  display:inline-block; vertical-align:middle; margin-left:8px;
  background: linear-gradient(135deg, var(--amber), var(--orange)); color:#fff;
  font-family: var(--h-sans); font-weight:700; font-size:.62rem; letter-spacing:.09em;
  text-transform:uppercase; padding:4px 11px; border-radius:999px; transform:translateY(-2px);
}
.step { position: relative; }
.step--popular { box-shadow: 0 0 0 2px var(--orange) inset; }
.step__badge {
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background: linear-gradient(135deg, var(--amber), var(--orange)); color:#fff;
  font-family: var(--h-sans); font-weight:700; font-size:.62rem; letter-spacing:.09em;
  text-transform:uppercase; padding:4px 12px; border-radius:999px; white-space:nowrap;
  box-shadow:0 6px 16px -6px rgba(214,120,40,.6);
}

/* Card icons (Damian: icons that complement the text) */
.card__icon { width:34px; height:34px; color:var(--orange); margin-bottom:14px; display:block; }
.card__icon svg { width:100%; height:100%; display:block; }
.card__icon--mh { color: var(--green); }

/* Green Mental Health cross-sell on race pages (Damian) */
.cross-mh .eyebrow, .cross-mh h2 { color: var(--green-700); }
.cross-mh .btn--ghost { color: var(--green-700); border-color: var(--green); }
.cross-mh .btn--ghost:hover { background: var(--green); border-color: var(--green); color:#fff; }

/* Page hero image (right column) - keep text left, image right regardless of DOM order */
.hero__grid > .hero__content { order: 1; }
.hero__grid > .hero__media { order: 2; }
.hero__media .hero__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 28%; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
@media (max-width: 720px){ .hero__media .hero__img { aspect-ratio: 16 / 10; } }

/* ---------- hero video placeholder ---------- */
.hero__media { position: relative; }
.hero__video {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--ink-teal); box-shadow: var(--shadow); cursor: pointer;
}
.hero__video img { width: 100%; height: 100%; object-fit: cover; object-position: 34% 32%; display: block; }
.hero__video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,52,56,.04) 40%, rgba(12,52,56,.55)); }
.video-play { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.video-play span { width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; box-shadow: 0 12px 32px -10px rgba(0,0,0,.55); transition: transform .2s ease, background .2s ease; }
.hero__video:hover .video-play span { transform: scale(1.07); background: #fff; }
.video-play span::before { content: ""; border-left: 21px solid var(--orange); border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 6px; }
.video-label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px 18px; color: #fff; font-family: var(--h-sans); font-weight: 600; font-size: .92rem; }

/* ---------- doorways (hub -> sub-page links) ---------- */
.doorways { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.doorway {
  display: flex; flex-direction: column; gap: 5px; padding: 20px 22px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); transition: transform .16s ease, border-color .16s ease;
}
.doorway:hover { transform: translateY(-2px); border-color: var(--orange); text-decoration: none; }
.doorway b { font-family: var(--h-sans); font-size: 1.04rem; }
.doorway small { color: var(--muted); font-size: .85rem; line-height: 1.4; }
.doorway .arr { color: var(--orange-600); font-family: var(--h-sans); font-weight: 700; font-size: .85rem; margin-top: 4px; }

/* ---------- case study tile logo lockup ---------- */
.case__logo { height: 54px; display: flex; align-items: center; margin-bottom: 14px; }
.case__logo img { max-height: 100%; max-width: 170px; width: auto; object-fit: contain; }
.case__logo b { font-family: var(--h-sans); font-weight: 800; font-size: 1.2rem; color: var(--ink); letter-spacing: -.01em; }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin-inline: auto; }
.faq details { background:#fff; border:1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 20px; margin-bottom: 12px; }
.faq summary { font-family: var(--h-sans); font-weight: 600; cursor: pointer; padding: 14px 0; list-style: none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; float:right; color: var(--orange); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content:"–"; }
.faq details p { color: var(--muted); padding-bottom: 14px; margin: 0; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band .container { max-width: 760px; }
.cta-band__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* ---------- race equity health check band (injected on every page) ---------- */
.health-check-band { background: linear-gradient(135deg, var(--orange), var(--orange-600)); color:#fff; text-align:center; }
.health-check-band .container { max-width: 840px; }
.health-check-band .eyebrow { color: rgba(255,255,255,.88); }
.health-check-band h2 { color:#fff; }
.health-check-band p { color: rgba(255,255,255,.96); }
.health-check-band .health-check-band__meta { font-family: var(--h-sans); font-weight:600; font-size:.82rem; letter-spacing:.04em; margin-top:18px; color: rgba(255,255,255,.9); }

/* ---------- race equity health check: floating launcher ---------- */
.hc-launch { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.hc-launch__bubble {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: linear-gradient(135deg, var(--orange), var(--orange-600)); color: #fff;
  border: none; border-radius: 999px; padding: 13px 20px;
  font-family: var(--h-sans); font-weight: 700; font-size: .92rem; letter-spacing: .01em;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); transition: transform .14s ease, box-shadow .18s ease;
}
.hc-launch__bubble:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.24); }
.hc-launch__bubble svg { width: 20px; height: 20px; flex: 0 0 auto; }
.hc-launch.is-open .hc-launch__bubble-label { display: none; }
.hc-launch.is-open .hc-launch__bubble { padding: 13px; }
.hc-launch__card {
  position: relative; width: min(320px, calc(100vw - 40px));
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 22px 20px; box-shadow: 0 14px 40px rgba(0,0,0,.20);
}
.hc-launch__x { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; }
.hc-launch__x:hover { color: var(--ink); }
.hc-launch__eyebrow { font-family: var(--h-sans); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--orange-600); margin: 0 0 8px; }
.hc-launch__lead { font-size: .95rem; color: var(--ink); margin: 0 0 16px; line-height: 1.45; }
.hc-launch__cta { width: 100%; justify-content: center; }
.hc-launch__meta { font-family: var(--h-sans); font-weight: 600; font-size: .74rem; color: var(--muted); margin: 12px 0 0; text-align: center; }
@media (max-width: 600px) { .hc-launch { right: 14px; bottom: 14px; } }

/* ---------- running totals (homepage credibility tally) ---------- */
.tally { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; text-align:center; }
.tally__num { font-family: var(--h-sans); font-weight:800; font-size: clamp(1.9rem,4vw,2.7rem); color: var(--orange-600); line-height:1; }
.tally__label { font-family: var(--h-sans); font-weight:600; color: var(--ink); margin-top:8px; }
@media (max-width:640px){ .tally{ grid-template-columns:1fr; gap:18px; } }

/* ---------- footer ---------- */
.site-footer { background: var(--ink-teal); color: #CFE0DF; padding: 56px 0 30px; font-size: .92rem; }
.site-footer a { color: #EAF3F2; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
.footer__grid h4 { color:#fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.footer__grid ul { list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.footer__brand p { color: #9FBDBB; max-width: 30ch; }
.footer__badges { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.footer__badges span { border:1px solid rgba(255,255,255,.25); border-radius:8px; padding:6px 10px; font-size:.74rem; font-family:var(--h-sans); }
.footer__bottom { border-top:1px solid rgba(255,255,255,.15); margin-top:40px; padding-top:20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:#8FAEAC; font-size:.82rem; }

/* ---------- strapline ribbon ---------- */
.strap { background: var(--orange); color:#fff; text-align:center; padding: 16px 0; }
.strap span { font-family: var(--h-sans); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: clamp(1rem,2.4vw,1.5rem); }
.strap span i { font-style: normal; opacity: .6; padding: 0 .4em; }

/* impact counters (animated count-up) */
.counters { background: var(--orange); color:#fff; padding: 54px 0; text-align:center; }
.counters__title { color:#fff; margin: 0 0 34px; }
.counters__grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
.counter__num { display:block; font-family: var(--h-sans); font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; }
.counter__label { display:block; margin-top: 10px; font-family: var(--h-sans); font-weight: 600; font-size: .98rem; opacity: .95; }
@media (max-width: 720px) { .counters__grid { grid-template-columns: repeat(2,1fr); row-gap: 34px; } }

/* video carousel (Resources) - horizontal scroll-snap of short clips */
.vcarousel { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; -webkit-overflow-scrolling: touch; }
.vcard { flex: 0 0 300px; scroll-snap-align: start; }
.vcarousel--single { overflow: visible; justify-content: center; }
.vcarousel--single .vcard { flex: 0 1 520px; width: 100%; max-width: 520px; }
.vcard__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--green-700, #1f4f4d); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.vcard__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vcard__play { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; }
.vcard__play::before { content: ""; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--orange); margin-left: 3px; }
.vcard__cap { margin-top: 10px; font-family: var(--h-sans); font-weight: 600; font-size: .95rem; }

/* ---------- prototype note flag ---------- */
.note { display:inline-block; background: #FFF4E2; border:1px dashed var(--amber); color:#8a5a00; font-size:.78rem; padding:3px 9px; border-radius:6px; font-family: var(--h-sans); font-weight:600; }

/* ---------- modal (book a call) ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: none; }
.modal.is-open { display: block; }
.modal__overlay { position:absolute; inset:0; background: rgba(12,52,56,.55); backdrop-filter: blur(2px); }
.modal__panel {
  position: relative; max-width: 520px; margin: 7vh auto 0; background:#fff; border-radius: var(--radius);
  padding: 34px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.5); max-height: 86vh; overflow:auto;
}
.modal__close { position:absolute; top:14px; right:16px; background:none; border:0; font-size:1.6rem; cursor:pointer; color: var(--muted); line-height:1; }
.field { margin-bottom: 14px; }
.field label { display:block; font-family: var(--h-sans); font-weight:600; font-size:.85rem; margin-bottom:5px; }
.field input, .field select, .field textarea {
  width:100%; padding: 11px 13px; border:1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; background: var(--paper); color: var(--ink);
}
.field textarea { min-height: 90px; resize: vertical; }

/* ---------- breadcrumb for satellites ---------- */
.crumb { font-size: .82rem; color: var(--muted); padding-top: 22px; }
.crumb a { color: var(--teal-700); }

/* ---------- utility ---------- */
.center { text-align:center; }
.mt-s { margin-top: 14px; } .mt-m { margin-top: 26px; }
.muted { color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr); }
  .ladder { grid-template-columns: repeat(2,1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
/* collapse the nav to a hamburger before the long labels wrap onto two lines.
   Seven top-level items plus the chat button need ~1176px on one line (measured
   2 Sep 2026, after Case Studies was promoted out of the About dropdown), so we
   collapse below 1260px to keep a comfortable margin. */
@media (max-width: 1260px) {
  .nav__menu { display: none; }
  .nav__toggle { display: block; }
  .nav.is-open .nav__menu {
    display: flex; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column;
    align-items: stretch; background:#fff; border-bottom:1px solid var(--line); padding: 12px 18px;
    box-shadow: var(--shadow); gap: 2px; margin-left: 0;
    /* the open menu is taller than a phone screen, and because it hangs off the
       sticky header it does not move with the page. Cap it to the viewport and
       let it scroll on its own (reported by Bianca + Damian on iPad/phone, 7 Sep). */
    max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px);
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  .nav__dropdown { position: static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding: 0 0 8px 14px; }
  .nav__item--has-menu > .nav__link::after { content:""; }
  .nav__cta { margin: 8px 0 4px; }
}
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid--rev > *:first-child { order: 0; }   /* keep prose above the list on mobile */
  .checks--grid { grid-template-columns: 1fr; }
}


/* ================================================================
   Aug/Sep 2026 review components (Bianca, 28-29 Aug)
   ================================================================ */

/* --- "Who it's for": organisations left, individuals right --- */
.audience__col { display: flex; flex-direction: column; gap: 10px; }
.audience__col h3 { margin: 0; }
.audience__col .muted { margin: 0 0 4px; }

/* --- icon cards (what happens every month, what an MHFAider does) --- */
.icon-grid { align-items: stretch; }
/* "What exactly does a Mental Health First Aider do?" block on the MHFA business case:
   breathing room above the heading after the stat cards, and centred title/lead. */
.role-block { margin-top: 56px; }
.role-block__title { text-align: center; max-width: 30ch; margin: 0 auto 10px; font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.role-block .lead { max-width: 60ch; margin: 0 auto 8px; }
.role-block .icon-grid { margin-top: 26px; }
@media (max-width: 700px) { .role-block { margin-top: 40px; } }
.icon-card { display: flex; flex-direction: column; gap: 10px; }
.icon-card h3, .icon-card h4 { margin: 0; font-family: var(--h-sans); font-size: 1.06rem; }
.icon-card p { margin: 0; }
.icon-card__icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  background: var(--paper-2); color: var(--orange-600); flex: none; }
.icon-card__icon svg { width: 24px; height: 24px; }
.theme-mhfa .icon-card__icon { color: var(--green-700); background: var(--green-100); }

/* --- monthly live-session topics --- */
.topic-list { list-style: none; margin: 0 auto; padding: 0; max-width: 820px;
  border-top: 1px solid var(--line); counter-reset: topic; }
.topic-list__item { display: grid; grid-template-columns: 128px 1fr; gap: 18px; align-items: baseline;
  padding: 14px 4px; border-bottom: 1px solid var(--line); }
.topic-list__month { font-family: var(--h-sans); font-weight: 700; color: var(--orange-600); font-size: .92rem; }
.topic-list__topic { font-weight: 500; }

/* --- headline figures --- */
.figures { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 56px; margin-top: 26px; }
.figure { text-align: center; max-width: 260px; }
.figure__num { display: block; font-family: var(--h-sans); font-weight: 800; font-size: 3rem; line-height: 1;
  color: var(--orange); }
.theme-mhfa .figure__num { color: var(--green-700); }
.figure__label { display: block; margin-top: 8px; color: var(--muted); font-size: .94rem; }

/* --- before / after bar chart --- */
.ba-chart { max-width: 760px; margin: 32px auto 0; }
.ba-chart__title { font-family: var(--h-sans); font-weight: 700; text-align: center; margin: 0 0 18px; }
.ba-chart__note { color: var(--muted); font-size: .9rem; text-align: center; margin: 14px 0 0; }
.ba-row + .ba-row { margin-top: 20px; }
.ba-row__label { font-family: var(--h-sans); font-weight: 600; font-size: .95rem; margin: 0 0 8px; }
.ba-row__bars { display: grid; gap: 7px; }
.ba-bar { position: relative; height: 30px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.ba-bar__fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; }
.ba-bar__fill--before { background: var(--grey); opacity: .55; }
.ba-bar__fill--after  { background: var(--orange); }
.theme-mhfa .ba-bar__fill--after { background: var(--green); }
.ba-bar__val { position: relative; z-index: 1; display: flex; align-items: center; height: 100%;
  padding-left: 14px; font-family: var(--h-sans); font-weight: 700; font-size: .82rem; color: var(--ink); }

/* --- unboxed quote strip (short learner comments, not full testimonials) --- */
.quote-strip { max-width: 820px; margin: 30px auto 0; }
.quote-strip__title { font-family: var(--h-sans); font-weight: 700; text-align: center; margin: 0 0 6px; }
.quote-strip__q { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--line);
  font-size: 1.12rem; line-height: 1.55; text-align: center; }
.quote-strip__q::before { content: "\201C"; }
.quote-strip__q::after  { content: "\201D"; }
.quote-strip__q:last-child { border-bottom: 0; }
.quote-strip__q cite { display: block; margin-top: 8px; font-style: normal; font-family: var(--h-sans);
  font-weight: 700; font-size: .86rem; color: var(--muted); }
.quote-strip__q cite::before { content: "\2014 "; }
.quote-strip__q--logo::after { content: none; }
.quote-strip__logo { display: inline-flex; align-items: center; padding: 6px 10px; margin-top: 10px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.quote-strip__logo img { height: 26px; width: auto; max-width: 140px; object-fit: contain; }

/* --- named organisational proof (OVO) --- */
.proof { display: grid; grid-template-columns: 190px 1fr; gap: 40px; align-items: start;
  max-width: 940px; margin: 30px auto 0; }
.proof__logo { display: grid; place-items: center; padding: 22px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); }
.proof__logo img { max-width: 100%; max-height: 74px; }
.proof__list li { font-size: 1.02rem; }

/* --- short case study (Winston's Wish) --- */
.mini-case { max-width: 760px; margin: 26px auto 0; text-align: center; }
.mini-case__logo img { max-height: 62px; width: auto; }
.mini-case__quote { margin: 20px 0 0; font-size: 1.24rem; line-height: 1.55; }
.mini-case__quote::before { content: "\201C"; }
.mini-case__quote::after  { content: "\201D"; }
.mini-case__cite { margin: 12px 0 0; font-family: var(--h-sans); font-weight: 700; font-size: .9rem; }
.mini-case__note { margin: 16px 0 0; color: var(--muted); }

/* --- refresher: why every three years + learner evidence --- */
.why-three { max-width: 640px; margin: 28px auto 0; }
.why-three__title { font-family: var(--h-sans); text-align: center; margin: 0 0 16px; }
.evidence { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line); }
.evidence__title { font-family: var(--h-sans); text-align: center; margin: 0; }
.evidence__lead { text-align: center; font-family: var(--h-sans); font-weight: 700; margin: 34px 0 0; }

/* --- client-attributed quotes with a logo --- */
.client-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; max-width: 940px; margin: 38px auto 0; }
.client-quote { margin: 0; text-align: center; }
.client-quote__logo { max-height: 46px; width: auto; margin-bottom: 14px; }
.client-quote blockquote { margin: 0; font-size: 1.04rem; line-height: 1.55; }
.client-quote blockquote::before { content: "\201C"; }
.client-quote blockquote::after  { content: "\201D"; }
.client-quote figcaption { margin-top: 10px; font-family: var(--h-sans); font-weight: 700; font-size: .84rem; color: var(--muted); }

/* --- single wide stat (Supportive Conversations opener) --- */
.stat--wide { max-width: 900px; margin-inline: auto; text-align: center; }
.stat--wide .stat__lead { margin: 0; font-family: var(--h-sans); font-weight: 600; font-size: 1.3rem; line-height: 1.5; }

/* --- video --- */
.video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); background: var(--ink-teal); }
.video-embed iframe, .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hero__video--pending { border-radius: var(--radius); }
.video-soon { position: absolute; left: 14px; top: 14px; z-index: 2; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.92); font-family: var(--h-sans); font-weight: 700; font-size: .72rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }

@media (max-width: 880px) {
  .proof { grid-template-columns: 1fr; gap: 24px; }
  .proof__logo { max-width: 190px; }
  .client-quotes { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .topic-list__item { grid-template-columns: 1fr; gap: 4px; }
  .figures { gap: 24px 28px; }
  .figure__num { font-size: 2.4rem; }
}

/* ================================================================
   OUR STORY - the EDP Journey timeline
   Vertical (portrait) from 7 Sep 2026: a centre line with the milestone
   cards alternating left and right, each card tucked up a little against
   the one before so the journey reads as one run rather than a stack of
   boxes. On narrow screens it becomes a single column beside the line.
   ================================================================ */
.timeline { position: relative; max-width: 980px; margin: 34px auto 0; }
.timeline__track { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline__track::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: linear-gradient(180deg, var(--brown) 0%, var(--orange) 50%, var(--brown) 100%); opacity: .5; }
.timeline__item { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 52px; }
.timeline__item + .timeline__item { margin-top: -30px; }
.timeline__item.is-left .timeline__card { grid-column: 1; }
.timeline__item.is-right .timeline__card { grid-column: 2; }
/* icon sits to the left of the text (Tom, 7 Sep) so each card is shorter and the whole journey uses less height */
.timeline__card { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: start; }
.timeline__card > .timeline__icon { grid-row: 1 / span 3; }
.timeline__card::after { content: ""; position: absolute; top: 24px; width: 18px; height: 3px; background: var(--orange); opacity: .5; }
.timeline__item.is-left .timeline__card::after { right: -26px; }
.timeline__item.is-right .timeline__card::after { left: -26px; }
.timeline__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--paper-2); color: var(--orange-600); margin: 2px 0 0; }
.timeline__icon svg { width: 21px; height: 21px; }
.timeline__year { font-family: var(--h-sans); font-weight: 800; font-size: 1.15rem; color: var(--teal-700); margin: 0; letter-spacing: -.01em; line-height: 1.2; }
.timeline__title { font-size: 1rem; margin: 0 0 4px; }
.timeline__body { font-size: .86rem; color: var(--muted); margin: 0; line-height: 1.45; }
.timeline__node { position: absolute; left: 50%; top: 18px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--white); z-index: 1; }

/* ===========================================================
   Carousel - "Our Journey in Pictures"
   =========================================================== */
.carousel { position: relative; margin-top: 28px; }
.carousel__viewport { overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding: 4px max(22px, calc((100vw - var(--maxw)) / 2 + 22px)); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__viewport:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.carousel__track { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }
.carousel__slide { flex: 0 0 auto; width: min(430px, 78vw); scroll-snap-align: center; }
.carousel__slide figure { margin: 0; }
.carousel__slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--paper-2); }
.carousel__slide figcaption { font-size: .88rem; color: var(--muted); margin-top: 10px; text-align: center; }
.carousel__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 1.1rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; justify-content: center; }
.carousel__btn:hover { background: var(--paper-2); }
.carousel__btn[disabled] { opacity: .35; cursor: default; }
.carousel__btn--prev, .carousel__btn--next { position: absolute; top: calc(50% - 30px); transform: translateY(-50%); z-index: 2; }
.carousel__btn--prev { left: 14px; }
.carousel__btn--next { right: 14px; }
.carousel__dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.carousel__dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: var(--line); cursor: pointer; }
.carousel__dots button[aria-current="true"] { background: var(--orange); }

/* the My Why video sits where the portrait used to */
.os-why__media .hero__video--pending img,
.os-why__media .video-embed { border-radius: var(--radius); box-shadow: var(--shadow); }

/* ===========================================================
   CASE STUDIES - full-width landscape rows, alternating sides
   =========================================================== */
.caserow { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: center; padding: 42px 0; border-bottom: 1px solid var(--line); }
.caserow:last-of-type { border-bottom: 0; }
.caserow--flip .caserow__media { order: 2; }
.caserow__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.caserow__placeholder { aspect-ratio: 16 / 10; border-radius: var(--radius); border: 1px dashed var(--line); background: var(--white); display: flex; align-items: center; justify-content: center; padding: 34px; }
.caserow__placeholder img { max-height: 88px; max-width: 68%; width: auto; object-fit: contain; }
.caserow__placeholder b { font-family: var(--h-sans); font-weight: 800; font-size: 1.4rem; color: var(--ink); text-align: center; }
.caserow__logo { height: 46px; margin-bottom: 14px; }
.caserow__logo img { max-height: 100%; max-width: 180px; width: auto; object-fit: contain; }
.caserow__result { font-size: clamp(1.25rem, 2vw, 1.7rem); margin: 8px 0 12px; }
.caserow__quote { margin: 0 0 16px; padding-left: 16px; border-left: 3px solid var(--line); }
.caserow__quote p { font-style: italic; color: var(--muted); margin: 0 0 6px; }
.caserow__quote cite { font-style: normal; font-weight: 600; font-size: .85rem; color: var(--ink); }
.caserow__cue { font-family: var(--h-sans); font-weight: 700; font-size: .9rem; color: var(--orange-600); }

@media (max-width: 900px) {
  .caserow { grid-template-columns: 1fr; gap: 22px; padding: 30px 0; }
  .caserow--flip .caserow__media { order: 0; }
}

/* Timeline becomes a single column beside the line on narrow screens */
@media (max-width: 820px) {
  .timeline__track { padding-left: 26px; }
  .timeline__track::before { left: 6px; top: 0; bottom: 0; width: 2px; opacity: .55; }
  .timeline__item { display: block; padding: 0 0 12px 0; }
  .timeline__item + .timeline__item { margin-top: 0; }
  .timeline__card::after { display: none; }
  .timeline__node { left: -20px; top: 26px; margin: 0; }
  .carousel__btn--prev { left: 6px; }
  .carousel__btn--next { right: 6px; }
}

/* Optional client logo under a testimonial citation (white plate keeps
   multi-colour marks legible on the deep-teal band). */
.testimonial__logo { display: inline-flex; align-items: center; justify-content: center; margin-top: 14px; padding: 9px 16px; background: var(--white); border-radius: var(--radius-sm); }
.testimonial__logo img { height: 30px; width: auto; max-width: 190px; object-fit: contain; }

/* ===========================================================
   Client photo credit + client photo band
   (Supportive Conversations: Citizen on the hero, ORX mid-page)
   =========================================================== */
.hero__credit { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: .84rem; color: var(--muted); }
.hero__credit-logo { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); flex: 0 0 auto; }
.hero__credit-logo img { height: 24px; width: auto; max-width: 130px; object-fit: contain; }

.client-band { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.client-band__media { margin: 0; }
.client-band__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.client-band__logo { height: 44px; margin-bottom: 14px; }
.client-band__logo img { max-height: 100%; max-width: 170px; width: auto; object-fit: contain; }

@media (max-width: 900px) {
  .client-band { grid-template-columns: 1fr; gap: 22px; }
}
/* MHFA-themed pages carry the green accent through to the case-study link too. */
.theme-mhfa .caserow__cue { color: var(--green-700); }


/* ================================================================
   8 Sep 2026 review (Bianca): Speaking keynotes stacked, Resources simplified
   ================================================================ */
/* --- Signature Keynotes: one talk after another, essence left, takeaways right --- */
.talks { display: grid; gap: 18px; }
.talk { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 26px 28px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 44px; }
.talk__title { margin: 0 0 6px; font-size: clamp(1.25rem, 2vw, 1.55rem); }
.talk__hook { font-family: var(--h-sans); font-weight: 600; font-style: italic; color: var(--teal-700); margin: 0 0 16px; font-size: 1.02rem; }
.talk__label { font-family: var(--h-sans); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--orange-600); margin: 0 0 8px; }
.talk__essence { margin: 0; }
.talk__leave { border-left: 1px solid var(--line); padding-left: 32px; align-self: start; }
.talk__leave .checks { gap: 10px; }
.talk__leave .checks li { font-size: .95rem; }
@media (max-width: 820px) {
  .talk { grid-template-columns: 1fr; padding: 20px; }
  .talk__leave { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 18px; }
}
/* photo banner that sits inside a container rather than edge to edge */
.photo-banner--inset { border-radius: var(--radius); }
.photo-banner--inset img { aspect-ratio: 21 / 9; object-fit: cover; }
/* Where Bianca speaks: photo beside the list */
.pop-photo { margin: 0; }
.pop-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.pop-photo figcaption { margin-top: 10px; font-family: var(--h-sans); font-weight: 600; font-size: .86rem; color: var(--muted); }

/* --- Resources: Health Check with a results screenshot --- */
.hc-card { display: block; text-align: center; max-width: 820px; margin-inline: auto; }
.hc-card--img { max-width: none; text-align: left; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 36px; align-items: center; }
a.hc-card--img { display: grid; }
.hc-card__media img { display: block; width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--line); box-shadow: var(--shadow); }
@media (max-width: 820px) { .hc-card--img { grid-template-columns: 1fr; } }
/* --- Resources: case-study signpost --- */
.signpost { max-width: 720px; margin-inline: auto; text-align: center; }
.signpost .lead { margin-inline: auto; }
.signpost .btn { margin-top: 8px; }
/* --- Resources: guides two across, cover beside the text --- */
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.guide { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.guide:hover { transform: translateY(-3px); border-color: var(--orange); box-shadow: var(--shadow); }
.guide__cover { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.guide__body h3 { margin: 0 0 6px; font-size: 1.08rem; }
.guide__body p { margin: 0 0 12px; font-size: .92rem; color: var(--muted); }
.guide__cta { display: inline-block; font: inherit; font-family: var(--h-sans); font-weight: 700; font-size: .9rem; color: var(--orange-600); background: none; border: 0; padding: 0; cursor: pointer; }
.guide__cta:hover { text-decoration: underline; }
@media (max-width: 820px) { .guide-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .guide { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; } }
/* guide sign-up popup: Mailchimp's embedded form inherits the site's field styling */
.guide-modal__body { margin-top: 6px; }
/* --- Resources: clickable newsletter sign-up images --- */
.newsletter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); gap: 24px; justify-content: center; }
.newsletter-card { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .16s ease, box-shadow .16s ease; }
.newsletter-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.newsletter-card img { display: block; width: 100%; height: auto; }
@media (max-width: 700px) { .newsletter-grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; } }
.guide-modal__body input[type="text"], .guide-modal__body input[type="email"] { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; margin-bottom: 12px; }
.guide-modal__body label { display: block; font-family: var(--h-sans); font-weight: 600; font-size: .86rem; margin-bottom: 6px; }
.guide-modal__body input[type="submit"], .guide-modal__body button { font-family: var(--h-sans); font-weight: 700; background: var(--orange); color: #fff; border: 0; border-radius: 999px; padding: 12px 22px; cursor: pointer; }
.guide-modal__body .indicates-required, .guide-modal__body .asterisk { display: none; }
.footer__social { display: flex; gap: 12px; margin-top: 4px; }
.footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; transition: border-color .16s ease, background-color .16s ease; }
.footer__social a:hover { border-color: var(--orange); background: rgba(255,255,255,.06); }
.footer__social svg { width: 17px; height: 17px; }

/* "Let's have a chat" enquiry form states */
.enquiry-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquiry-form__error { color: #b3261e; font-size: .9rem; margin: 0 0 12px; }
.enquiry-form__error a { color: inherit; text-decoration: underline; }
.enquiry-form__thanks h3 { margin-top: 0; }