/* Lionheart — prototype site stylesheet
   Palette pulled from the real Lionheart logo (lion/heart mark + "lionheart" wordmark). */

:root {
  --pink: #E85D9E;
  --pink-dark: #C43E80;
  --pink-tint: #FBD3E6;
  --pink-wash: #FFF1F8;
  --teal: #1FA39D;
  --teal-dark: #157873;
  --teal-tint: #BFEFEC;
  --teal-wash: #EEFBFA;
  --ink: #26282B;
  --ink-soft: #55585C;
  --paper: #FFFFFF;
  --cream: #FFF4E9;
  --amber-tint: #FBE4C2;
  --line: #ECE6E9;
  --amber: #C9862E;          /* decorative fills only */
  --amber-text: #8F5D14;     /* 5.6:1 on white — use for any amber TEXT */
  --pink-btn: #C43E80;       /* 4.8:1 with white text */
  --pink-btn-hover: #A32E68; /* 6.7:1 */
  --teal-btn: #157873;       /* 5.3:1 with white text */
  --teal-btn-hover: #0F5C58; /* 7.8:1 */
  --focus: #0B4F8A;          /* high-contrast focus ring */
  --purple: #7A5AA8;

  /* Typography — derived from the logo.
     The wordmark is a geometric sans whose proportions match Poppins Bold almost
     exactly (verified by overlaying the artwork). Poppins is therefore the display
     face. Nunito Sans carries body text: same geometric family feel, but a taller
     x-height and more open apertures, which reads better at length. */
  --font-display: 'Poppins', 'Nunito Sans', Arial, Helvetica, sans-serif;
  --font-body: 'Nunito Sans', 'Poppins', Arial, Helvetica, sans-serif;
  --track-logo: .4em;   /* letter-spacing measured off the logo tagline */
  --purple-tint: #E8DFF5;
  --radius: 14px;
  --shadow: 0 12px 30px rgba(38,40,43,0.08);
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16.5px;
}
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2.5rem, 5.2vw, 3.9rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); letter-spacing: -.01em; }
h3 { font-size: 1.35rem; }
mark.roar {
  background: none; color: inherit; position: relative; font-style: normal;
  background-image: linear-gradient(120deg, var(--pink-tint) 0%, var(--pink-tint) 100%);
  background-repeat: no-repeat; background-size: 100% 38%; background-position: 0 88%;
  padding: 0 .08em;
}
.section.ink mark.roar { background-image: linear-gradient(120deg, rgba(232,93,158,.35), rgba(232,93,158,.35)); color:#fff; }
p { margin: 0 0 1em; color: var(--ink-soft); }
a { color: var(--teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
/* height:auto is load-bearing. Every <img> carries width/height attributes so the
   browser can reserve space and the page doesn't jump while loading. Without
   height:auto, that attribute height is honoured literally whenever max-width
   shrinks the image — which stretches the photo. */
img { max-width: 100%; height: auto; display: block; }
ul { padding-left: 1.2em; color: var(--ink-soft); }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 72px 0; }
.section.tight { padding: 48px 0; }
.section.cream { background: linear-gradient(180deg, var(--cream) 0%, #fff 100%); }
.section.pink-tint { background: linear-gradient(160deg, var(--pink-wash) 0%, var(--pink-tint) 100%); }
.section.teal-tint { background: linear-gradient(160deg, var(--teal-wash) 0%, var(--teal-tint) 100%); }
.section.purple-tint { background: linear-gradient(160deg, #fff 0%, var(--purple-tint) 100%); }
.section.ink { background: var(--ink); color: #fff; }
.section.ink h2, .section.ink h3, .section.ink p { color: #fff; }
/* ...but cards inside a dark section keep their own light background, so their
   text must stay dark. Without this, white-on-white renders as empty boxes. */
.section.ink .card h2,
.section.ink .card h3,
.section.ink .card h4 { color: var(--ink); }
.section.ink .card p,
.section.ink .card li { color: var(--ink-soft); }
.section.ink .card a { color: var(--teal-dark); }
.section.brand-strip .card h2,
.section.brand-strip .card h3,
.section.brand-strip .card h4 { color: var(--ink); }
.section.brand-strip .card p,
.section.brand-strip .card li { color: var(--ink-soft); }
.section.brand-strip {
  background: linear-gradient(100deg, var(--pink) 0%, var(--purple) 55%, var(--teal-dark) 100%);
  color: #fff;
}
.section.brand-strip h2, .section.brand-strip p { color: #fff; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pink-dark);
  margin-bottom: .6em;
}
.section.ink .eyebrow { color: #F5B6D3; }

/* Buttons */
.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  padding: 13px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--pink-btn); color: #fff; }
.btn-primary:hover { background: var(--pink-btn-hover); }
.btn-secondary { background: var(--teal-btn); color: #fff; }
.btn-secondary:hover { background: var(--teal-btn-hover); }
.btn-outline { background: transparent; border-color: currentColor; color: var(--ink); }
.section.ink .btn-outline { color: #fff; }
.btn-outline:hover { background: rgba(0,0,0,0.05); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 1.4em; }

/* Header / nav */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.header-accent { height: 5px; background: linear-gradient(90deg, var(--pink) 0%, var(--purple) 50%, var(--teal) 100%); }
.header-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 8px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { height: 104px; width: auto; flex-shrink: 0; display: block; }

@media (max-width: 760px) {
  .brand-logo { height: 72px; }
}

/* Nav gets its own full-width row so it never fights the logo/CTA for space */
.nav-row { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
nav.main-nav {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 4px;
}
nav.main-nav > .nav-item { position: relative; display:flex; align-items:center; }
nav.main-nav a.nav-link {
  display: block; padding: 13px 14px; font-family: var(--font-display); font-weight:600; font-size:.88rem;
  color: var(--ink); border-radius: 0; white-space: nowrap;
}
nav.main-nav a.nav-link:hover, nav.main-nav .nav-item.active > a.nav-link { color: var(--pink-dark); text-decoration:none; background: var(--pink-wash); }
.dropdown {
  display: none; position: absolute; top: 100%; left: 0; background: #fff; min-width: 270px;
  box-shadow: var(--shadow); border-radius: 10px; padding: 8px; border: 1px solid var(--line); z-index: 60;
}
.nav-item:hover .dropdown { display: block; }
.dropdown a { display: block; padding: 9px 12px; border-radius: 6px; font-size: .9rem; color: var(--ink); }
.dropdown a:hover { background: var(--teal-tint); text-decoration: none; }
.header-cta { display: flex; align-items: center; gap: 14px; }
.header-cta .phone { font-family: var(--font-display); font-weight:700; color: var(--teal-dark); font-size:1rem; white-space:nowrap; }
.mobile-toggle { display:none; }

@media (max-width: 980px) {
  nav.main-nav a.nav-link { padding: 12px 10px; font-size: .84rem; }
}
@media (max-width: 760px) {
  .header-inner { flex-wrap: wrap; }
  nav.main-nav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .header-cta .phone { display:none; }
}

/* Hero */
.hero {
  position: relative;
  background: linear-gradient(135deg, var(--pink-tint) 0%, var(--teal-tint) 100%);
  padding: 76px 0 50px;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), 0 100%);
}
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; z-index: 0; filter: blur(2px);
}
.hero::before { width: 420px; height: 420px; background: radial-gradient(circle, rgba(232,93,158,.28), rgba(232,93,158,0) 70%); top: -160px; right: -100px; }
.hero::after { width: 360px; height: 360px; background: radial-gradient(circle, rgba(31,163,157,.28), rgba(31,163,157,0) 70%); bottom: -180px; left: -120px; }
.hero-grid { position:relative; z-index:1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero .eyebrow { font-size: .85rem; }
.hero .lead { font-size: 1.18rem; max-width: 48ch; }
.hero-badges { display:flex; gap:18px; align-items:center; margin-top: 28px; flex-wrap: wrap; }
.hero-badges img { height: 54px; width:auto; }
.hero-media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 50px rgba(38,40,43,0.18); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-sticker {
  position: absolute; top: -18px; right: -18px; background: var(--teal); color:#fff; z-index:2;
  width: 92px; height: 92px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
  text-align:center; font-family: var(--font-display); font-weight:800; font-size:.72rem; line-height:1.15;
  transform: rotate(8deg); box-shadow: 0 10px 20px rgba(21,120,115,.35); border: 3px solid #fff;
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { transform:none; }
}

/* Roar strip — repeating brand marquee */
.roar-strip {
  background: var(--ink); color: #fff; overflow: hidden; white-space: nowrap; padding: 14px 0;
  position: relative; z-index: 2; margin-top: -12px;
}
.roar-strip .track {
  display: inline-block; font-family: var(--font-display); font-weight:700; font-size: .95rem;
  letter-spacing:.05em; text-transform: uppercase;
  /* The track holds the value list twice, so shifting it exactly half its own
     width lands back on an identical frame — the loop has no visible seam.
     This animation was missing until 4 Aug 2026, which is why the strip sat
     still and the pause button looked broken. */
  animation: roar-scroll 38s linear infinite;
  will-change: transform;
}
@keyframes roar-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.roar-strip:hover .track { animation-play-state: paused; }
.roar-strip .track span { color: var(--pink); margin: 0 18px; }
.roar-strip .track span.t2 { color: var(--teal); }

/* Big statement band */
.statement {
  text-align:center; padding: 64px 0; position:relative;
}
.statement h2 {
  font-size: clamp(1.8rem, 4.4vw, 3.2rem); max-width: 18ch; margin: 0 auto; font-style: italic;
}

/* "I am a..." path selector */
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 10px; }
.path-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px;
  text-align:center; transition: box-shadow .15s ease, transform .15s ease;
}
.path-card:nth-child(1) { background: linear-gradient(160deg,#fff 45%, var(--pink-wash) 100%); border-color: #F6C9DF; }
.path-card:nth-child(2) { background: linear-gradient(160deg,#fff 45%, var(--teal-wash) 100%); border-color: #BDEAE6; }
.path-card:nth-child(3) { background: linear-gradient(160deg,#fff 45%, var(--cream) 100%); border-color: #F2DAB8; }
.path-card:hover { box-shadow: var(--shadow); transform: translateY(-2px) rotate(-.4deg); text-decoration:none; }
.path-card .icon { font-size: 2.1rem; margin-bottom: .3em; }
.path-card h3 { font-size: 1.05rem; margin-bottom: .3em; }
.path-card p { font-size: .92rem; margin-bottom: 0; }
@media (max-width: 760px) { .path-grid { grid-template-columns: 1fr; } }

/* Card grids */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .card-grid, .card-grid.cols-6 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .card-grid, .card-grid.cols-2, .card-grid.cols-6 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: 0 4px 14px rgba(38,40,43,0.04);
  transition: transform .18s ease, box-shadow .18s ease;
}
a.card:hover, .card.hoverable:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 16px 30px rgba(38,40,43,0.12); }
.card.pink { border-top: 4px solid var(--pink); background: linear-gradient(160deg, #fff 55%, var(--pink-wash) 100%); }
.card.teal { border-top: 4px solid var(--teal); background: linear-gradient(160deg, #fff 55%, var(--teal-wash) 100%); }
.card.amber { border-top: 4px solid var(--amber); background: linear-gradient(160deg, #fff 55%, var(--cream) 100%); }
.card.purple { border-top: 4px solid var(--purple); background: linear-gradient(160deg, #fff 55%, var(--purple-tint) 100%); }
.card h3 { margin-bottom: .35em; }
.card p:last-child { margin-bottom: 0; }
.card .tag {
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background: var(--pink); padding: 3px 10px; border-radius:999px; margin-bottom:10px;
}
.card .tag.new { background: var(--teal); }

/* Values grid */
.values-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
@media (max-width: 1000px) { .values-grid { grid-template-columns: repeat(3,1fr);} }
@media (max-width: 640px) { .values-grid { grid-template-columns: repeat(1,1fr);} }
.value-card { text-align:center; padding: 22px 16px; background: rgba(255,255,255,0.06); border-radius: var(--radius); }
.value-card h3, .value-card h4 { font-size: 1.05rem; color: var(--pink); margin-bottom:.5em; }
.value-card p { font-size: .9rem; color: #d9dadd; }
.value-chip {
  width:44px; height:44px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:800; color:#fff; font-size:1.05rem; background: var(--teal);
}
.value-card:nth-child(2n) .value-chip { background: var(--pink); }
.value-card:nth-child(3n) .value-chip { background: var(--amber); }

/* Testimonials */
.testimonial {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 26px;
  position: relative; transition: transform .18s ease, box-shadow .18s ease;
}
.testimonial:hover { transform: translateY(-3px) rotate(.5deg); box-shadow: var(--shadow); }
.testimonial::before {
  content: "\201C"; position:absolute; top:-6px; left:16px; font-family: var(--font-display); font-weight:700; font-size:3.4rem;
  color: var(--pink-tint); line-height:1; z-index:0;
}
.testimonial .quote { position:relative; z-index:1; }
.testimonial .quote { font-size: 1.02rem; font-style: italic; color: var(--ink); }
.testimonial .who { font-family: var(--font-display); font-weight:700; color: var(--teal-dark); font-size:.9rem; margin-top: 10px; }
.sample-flag {
  display:inline-block; margin-top:10px; font-size:.72rem; background: #FFF3CD; color:#8a6d1a;
  padding: 3px 9px; border-radius:6px; font-weight:700; letter-spacing:.03em;
}

/* Two column content */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:center; }
.split.reverse .col-media { order: 2; }
@media (max-width: 860px) { .split, .split.reverse .col-media { grid-template-columns: 1fr; order:0; } }
.col-media img { border-radius: var(--radius); box-shadow: var(--shadow); width:100%; }

/* Page hero (interior pages) */
.page-hero {
  position:relative; overflow:hidden; padding: 56px 0 46px;
  background: linear-gradient(120deg, var(--cream) 60%, var(--pink-tint) 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 0 100%);
}
.page-hero::after {
  content:""; position:absolute; width:280px; height:280px; border-radius:50%;
  background: radial-gradient(circle, rgba(31,163,157,.16), rgba(31,163,157,0) 70%);
  top:-120px; right:-60px;
}
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.page-hero .eyebrow { margin-bottom:.4em; }
.breadcrumb { font-size: .85rem; color: var(--ink-soft); margin-bottom: 14px; }
.breadcrumb a { color: var(--ink-soft); }

/* FAQ */
details.faq { background:#fff; border:1px solid var(--line); border-left: 4px solid var(--teal); border-radius:10px; padding: 16px 20px; margin-bottom:12px; }
details.faq:nth-child(2n) { border-left-color: var(--pink); }
details.faq:nth-child(3n) { border-left-color: var(--amber); }
details.faq summary { font-family: var(--font-display); font-weight:700; cursor:pointer; list-style:none; }
details.faq summary::-webkit-details-marker { display:none; }
details.faq summary:before { content: "+ "; color: var(--pink); }
details.faq[open] summary:before { content: "− "; }
details.faq p { margin-top:10px; margin-bottom:0; }

/* Info banner / CTA band */
/* The gradient starts at --pink-dark, not --pink. White body text on --pink
   is only 3.24:1 — below the 4.5:1 AA minimum. axe-core reports gradients as
   "cannot determine" rather than failing them, so this went unnoticed until a
   manual check. Both ends now clear 4.5:1.
     #C43E80 -> 4.83:1     #A93370 -> 6.19:1
     #157873 -> 5.29:1     #0E5B57 -> 7.92:1                                  */
.cta-band {
  background: linear-gradient(120deg, var(--pink-dark) 0%, var(--cta-deep, #A93370) 100%);
  color:#fff; border-radius: var(--radius); padding: 44px; text-align:center;
}
.cta-band h2, .cta-band p, .cta-band a { color:#fff; }
.cta-band.teal {
  background: linear-gradient(120deg, var(--teal-dark) 0%, var(--cta-deep-teal, #0E5B57) 100%);
}

/* Contact block */
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width:860px) { .contact-grid { grid-template-columns:1fr; } }
.contact-row { display:flex; gap:14px; padding: 14px 0; border-bottom:1px solid var(--line); }
.contact-row:last-child { border-bottom:none; }
.contact-row .who { font-weight:700; font-family: var(--font-display); }
.contact-row .role { color: var(--pink-dark); font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }

table.compare { width:100%; border-collapse: collapse; margin: 1em 0; }
table.compare th, table.compare td { border:1px solid var(--line); padding:10px 14px; text-align:left; font-size:.92rem; }
table.compare th { background: var(--teal-tint); font-family: var(--font-display); }

/* Footer */
footer.site-footer {
  background: var(--ink); color: #d9dadd; padding: 56px 0 26px;
  border-top: 5px solid; border-image: linear-gradient(90deg, var(--pink), var(--purple), var(--teal)) 1;
}
footer .footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 860px) { footer .footer-grid { grid-template-columns: 1fr 1fr; } }
footer h4, footer .footer-h { color:#fff; font-size:.95rem; margin-bottom: .8em; font-family: var(--font-display); font-weight:700; line-height:1.3; }
footer a { color:#c7c9cd; }
footer a:hover { color:#fff; }
footer ul { list-style:none; padding:0; margin:0; }
footer ul li { margin-bottom: 8px; font-size:.9rem; }
footer .brand { margin-bottom: 12px; }
footer .footer-logo { height: 84px; }
footer .fine-print { margin-top: 40px; padding-top: 20px; border-top: 1px solid #3a3c3f; font-size:.8rem; color:#9a9ca0; text-align:center; }
footer .acknowledgement { font-size:.82rem; color:#9a9ca0; max-width: 900px; margin: 14px auto 0; text-align:center; }

.icon-badge {
  width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:800; color:#fff; font-size:.82rem; margin-bottom:14px; letter-spacing:.02em;
  transform: rotate(-6deg); box-shadow: 0 8px 16px rgba(38,40,43,0.18);
}
.card:nth-child(2n) .icon-badge, .path-card:nth-child(2n) .icon-badge { transform: rotate(5deg); }
.card:nth-child(3n) .icon-badge, .path-card:nth-child(3n) .icon-badge { transform: rotate(-2deg); }
.pill-list { display:flex; flex-wrap:wrap; gap:10px; margin: 1em 0; }
/* --teal-dark on --teal-tint is 4.23:1 — just under the 4.5 AA minimum, so
   the pill uses a deeper teal for its text. */
.pill { background: var(--teal-tint); color: var(--pill-text, #0E5B57); font-size:.85rem; font-weight:700; padding:6px 14px; border-radius:999px; }

.prototype-banner {
  background: var(--ink); color:#fff; text-align:center; font-size:.82rem; padding: 8px 12px;
}
.prototype-banner strong { color: #F5B6D3; }

/* ============================================================ Handbook chatbot */
.lh-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.lh-widget { position: fixed; right: 20px; bottom: 20px; z-index: 900; font-family: var(--font-body); }

.lh-launcher {
  display:flex; align-items:center; gap:10px; cursor:pointer;
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%);
  color:#fff; border:none; border-radius:999px; padding:14px 22px;
  font-family: var(--font-display); font-weight:700; font-size:.95rem;
  box-shadow: 0 12px 28px rgba(196,62,128,.4);
  transition: transform .16s ease, box-shadow .16s ease;
}
.lh-launcher:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(196,62,128,.5); }
.lh-launcher:focus-visible { outline:3px solid var(--teal-dark); outline-offset:3px; }
.lh-launcher.lh-is-open .lh-launcher-label { display:none; }
.lh-launcher.lh-is-open { padding:16px; }

/* Must come first: a class-level `display` beats the UA [hidden] rule, so
   without this the panel can never actually be hidden. */
.lh-panel[hidden] { display: none !important; }
.lh-panel {
  position:absolute; right:0; bottom:70px; width: 380px; max-width: calc(100vw - 40px);
  background:#fff; border-radius:18px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow: 0 26px 60px rgba(38,40,43,.28); border:1px solid var(--line);
  max-height: min(560px, calc(100vh - 120px));
}
.lh-head {
  background: linear-gradient(120deg, var(--teal) 0%, var(--teal-dark) 100%); color:#fff;
  padding:16px 18px; display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.lh-head strong { font-family: var(--font-display); font-size:1.02rem; display:block; }
.lh-head span { font-size:.78rem; opacity:.9; display:block; margin-top:2px; }
.lh-close { background:transparent; border:none; color:#fff; font-size:1.7rem; line-height:1; cursor:pointer; padding:0 4px; }
.lh-close:hover { opacity:.75; }

.lh-log { flex:1; overflow-y:auto; padding:16px; background: var(--teal-wash); }
.lh-msg { margin-bottom:12px; max-width:88%; }
.lh-msg p { margin:0 0 6px; font-size:.9rem; line-height:1.5; }
.lh-msg p:last-child { margin-bottom:0; }
.lh-msg.lh-from-bot { background:#fff; border-radius:4px 14px 14px 14px; padding:12px 14px; box-shadow:0 2px 8px rgba(38,40,43,.08); }
.lh-msg.lh-from-user { background: var(--pink); color:#fff; border-radius:14px 4px 14px 14px; padding:12px 14px; margin-left:auto; }
.lh-msg.lh-from-bot a { color: var(--pink-dark); font-weight:700; }
.lh-src { font-size:.72rem !important; color: var(--ink-soft); border-top:1px solid var(--line); padding-top:6px; margin-top:8px !important; }

.lh-chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
.lh-chip {
  background:#fff; border:1.5px solid var(--teal-tint); color: var(--teal-dark);
  border-radius:999px; padding:7px 13px; font-size:.79rem; font-weight:700; cursor:pointer;
  font-family: var(--font-body); transition: background .14s ease, border-color .14s ease;
}
.lh-chip:hover { background: var(--teal-tint); border-color: var(--teal); }

.lh-typing span { display:inline-block; width:7px; height:7px; margin-right:3px; border-radius:50%; background:var(--ink-soft); animation: lhblink 1.2s infinite; }
.lh-typing span:nth-child(2) { animation-delay:.2s; }
.lh-typing span:nth-child(3) { animation-delay:.4s; }
@keyframes lhblink { 0%,60%,100%{opacity:.25;} 30%{opacity:1;} }

.lh-form { display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:#fff; }
.lh-form input {
  flex:1; padding:11px 14px; border:1.5px solid var(--line); border-radius:999px;
  font-family: var(--font-body); font-size:.9rem;
}
.lh-form input:focus { outline:none; border-color: var(--teal); }
.lh-form button {
  background: var(--teal); color:#fff; border:none; border-radius:50%; width:42px; height:42px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.lh-form button:hover { background: var(--teal-dark); }
.lh-foot { margin:0; padding:0 14px 12px; font-size:.7rem; color:var(--ink-soft); background:#fff; text-align:center; }

@media (max-width: 480px) {
  .lh-widget { right:12px; bottom:12px; }
  .lh-launcher-label { display:none; }
  .lh-launcher { padding:16px; }
  .lh-panel { width: calc(100vw - 24px); }
}

/* ============================================================ Pull-quotes (real testimonials) */
.pullquote {
  margin: 1.6em 0; padding: 26px 28px 22px; border-radius: var(--radius);
  position: relative; border-left: 6px solid var(--pink);
  background: linear-gradient(140deg, var(--pink-wash) 0%, #fff 90%);
  box-shadow: var(--shadow);
}
.pullquote.teal { border-left-color: var(--teal); background: linear-gradient(140deg, var(--teal-wash) 0%, #fff 90%); }
.pullquote.amber { border-left-color: var(--amber); background: linear-gradient(140deg, var(--cream) 0%, #fff 90%); }
.pullquote.purple { border-left-color: var(--purple); background: linear-gradient(140deg, var(--purple-tint) 0%, #fff 90%); }
.pullquote p {
  font-size: 1.12rem; line-height: 1.55; color: var(--ink); font-weight: 600;
  font-style: italic; margin: 0 0 .7em;
}
.pullquote cite {
  font-style: normal; font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--pink-dark); font-family: var(--font-display);
}
.pullquote.teal cite { color: var(--teal-dark); }
.pullquote.amber cite { color: var(--amber-text); }
.pullquote.purple cite { color: var(--purple); }
.section.ink .pullquote { background: rgba(255,255,255,.07); border-left-color: var(--pink); }
.section.ink .pullquote p { color: #fff; }
.section.ink .pullquote cite { color: #F5B6D3; }

/* Proof strip — hard credibility numbers */
.proof-strip { display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 2em 0 0; }
.proof { text-align:center; padding: 22px 14px; border-radius: var(--radius); background:#fff; box-shadow: var(--shadow); }
.proof .n { font-family: var(--font-display); font-weight:800; font-size:2.1rem; color: var(--pink-dark); line-height:1; display:block; }
.proof .l { font-size:.84rem; color: var(--ink-soft); margin-top:8px; display:block; }
.proof:nth-child(2n) .n { color: var(--teal-dark); }
@media (max-width: 760px) { .proof-strip { grid-template-columns: 1fr 1fr; } }

/* Press / in the news */
.press-list { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:16px; margin-top:1.4em; }
.press { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:18px 20px; border-top:4px solid var(--teal); }
.press .outlet { font-family: var(--font-display); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--teal-dark); }
.press .headline { font-size:.95rem; color:var(--ink); margin:6px 0 4px; font-weight:600; }
.press .date { font-size:.78rem; color:var(--ink-soft); }
.press:nth-child(2n) { border-top-color: var(--pink); }
.press:nth-child(2n) .outlet { color: var(--pink-dark); }

/* Clinical capability grid */
.cap-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(215px,1fr)); gap:10px; margin:1.4em 0; }
.cap { background:#fff; border:1px solid var(--line); border-left:4px solid var(--teal); border-radius:8px; padding:11px 14px; font-size:.9rem; font-weight:600; color:var(--ink); }
.cap:nth-child(3n) { border-left-color: var(--pink); }
.cap:nth-child(3n+2) { border-left-color: var(--amber-text); }

/* Site/location cards */
.sites { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:1.4em 0; }
@media (max-width:760px){ .sites { grid-template-columns:1fr; } }
.site-card { background:#fff; border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow); border-top:5px solid var(--pink); }
.site-card:nth-child(2) { border-top-color: var(--teal); }
.site-card h3 { margin-bottom:.3em; }
.site-card .addr { font-weight:700; color:var(--ink); margin-bottom:.4em; }

/* Registration badge block */
.reg-note { background: var(--teal-wash); border:1.5px solid var(--teal-tint); border-radius:var(--radius); padding:20px 24px; margin:1.5em 0; }
.reg-note h3 { font-size:1.1rem; margin-bottom:.4em; }
.reg-note p:last-child { margin-bottom:0; }

/* ================================================================
   ACCESSIBILITY
   Targeting WCAG 2.2 Level AA. Notes inline explain the intent so
   this survives future edits.
   ================================================================ */

/* --- Never let a class-level display: override the hidden attribute --- */
[hidden] { display: none !important; }

/* --- Skip link: first tab stop on every page (WCAG 2.4.1) --- */
.skip-link {
  position: absolute; left: 8px; top: -100px; z-index: 2000;
  background: var(--ink); color: #fff; padding: 14px 22px; border-radius: 0 0 10px 10px;
  font-family: var(--font-display); font-weight: 700; text-decoration: none;
  transition: top .12s ease;
}
.skip-link:focus { top: 0; outline: 3px solid var(--focus); outline-offset: 2px; }

/* --- Visible focus on everything interactive (WCAG 2.4.7 / 2.4.11) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
/* On dark backgrounds the navy ring disappears — switch to white */
.section.ink a:focus-visible,
.section.ink button:focus-visible,
footer a:focus-visible,
.cta-band a:focus-visible,
.roar-strip button:focus-visible {
  outline-color: #fff;
}

/* --- Links in body copy are underlined, not colour-only (WCAG 1.4.1) --- */
main p a, main li a, .faq a, .pullquote a, footer li a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Minimum target size 44px (WCAG 2.5.8 exceeds the 24px minimum) --- */
nav.main-nav a.nav-link { min-height: 44px; display: flex; align-items: center; }
.dropdown a { min-height: 44px; display: flex; align-items: center; }
.pill { min-height: 44px; display: inline-flex; align-items: center; }
.lh-chip { min-height: 44px; }
.lh-close { min-width: 44px; min-height: 44px; }

/* --- Keyboard-operable dropdown menus (WCAG 2.1.1) ---
   Previously these opened on :hover only, so keyboard and switch users
   could never reach the NDIS sub-pages from the nav. */
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown,
.nav-item .dropdown.is-open { display: block; }

/* --- Respect reduced-motion preferences (WCAG 2.3.3) --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .roar-strip .track { animation: none !important; transform: none !important; }
  .hero-media, .hero-sticker, .icon-badge,
  .card:nth-child(2n) .icon-badge, .path-card:nth-child(2n) .icon-badge,
  .card:nth-child(3n) .icon-badge, .path-card:nth-child(3n) .icon-badge { transform: none !important; }
  .testimonial:hover, .card:hover { transform: none !important; }
}

/* --- Marquee pause control (WCAG 2.2.2 Pause, Stop, Hide) ---
   Any moving content that lasts more than 5 seconds needs a way to stop it. */
.roar-strip { position: relative; }
.roar-strip.is-paused .track { animation-play-state: paused; }
.roar-pause {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.16); color: #fff; border: 1.5px solid rgba(255,255,255,.5);
  border-radius: 999px; min-width: 44px; min-height: 32px; padding: 4px 14px;
  font-family: var(--font-display); font-weight: 700; font-size: .72rem; cursor: pointer;
  letter-spacing: .04em;
}
.roar-pause:hover { background: rgba(255,255,255,.3); }

/* --- Support user text-spacing overrides (WCAG 1.4.12) --- */
p, li, .lead { overflow-wrap: break-word; }

/* --- Honour Windows High Contrast / forced colours --- */
@media (forced-colors: active) {
  .btn, .lh-chip, .lh-launcher { border: 2px solid ButtonText; }
  .icon-badge, .value-chip { border: 1px solid ButtonText; }
}

/* --- Accessibility page helper --- */
.a11y-list li { margin-bottom: .6em; }

/* Values band: h3 for correct heading order, styled at the old h4 size */
.section.ink .value-card h3 { color: var(--pink); }

/* --- Embedded Snapforms referral form --- */

/* ============================================================ Nurse-led process steps */
.process { list-style: none; padding: 0; margin: 1.6em 0 0; counter-reset: step; }
.process > li {
  position: relative; padding: 0 0 30px 62px; counter-increment: step;
}
.process > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--teal-btn); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}
.process > li::after {
  content: ""; position: absolute; left: 20px; top: 46px; bottom: 6px;
  width: 2px; background: var(--teal-tint);
}
.process > li:last-child { padding-bottom: 0; }
.process > li:last-child::after { display: none; }
.process > li:nth-child(2n)::before { background: var(--pink-btn); }
.process h3 { font-size: 1.08rem; margin-bottom: .25em; }
.process p { margin-bottom: 0; }
.process .who {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--teal-btn); margin-bottom: .3em;
}
.process > li:nth-child(2n) .who { color: var(--pink-btn); }

/* The loop-back note at the end of the process */
.process-loop {
  margin-top: 1.2em; padding: 18px 22px; border-radius: var(--radius);
  background: var(--teal-wash); border: 1.5px dashed var(--teal-tint);
  font-size: .95rem;
}
.process-loop strong { color: var(--teal-btn); }

@media (max-width: 560px) {
  .process > li { padding-left: 52px; }
  .process > li::before { width: 36px; height: 36px; font-size: .95rem; }
  .process > li::after { left: 17px; top: 40px; }
}

/* Founders card spans two columns — they're one entry, not two */
.card.founders { grid-column: span 2; }
@media (max-width: 900px) { .card.founders { grid-column: span 2; } }
@media (max-width: 600px) { .card.founders { grid-column: span 1; } }

/* ============================================================ Programs calendar */
.day-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px; margin: 1.6em 0;
}
.day-card {
  background: #fff; border-radius: var(--radius); padding: 20px 22px;
  box-shadow: var(--shadow); border-top: 4px solid var(--teal);
}
.day-card:nth-child(2n) { border-top-color: var(--pink); }
.day-card:nth-child(3n) { border-top-color: var(--amber); }
.day-card h3 {
  font-size: 1.15rem; margin-bottom: .6em; padding-bottom: .4em;
  border-bottom: 1px solid var(--line);
}
.prog-list { list-style: none; padding: 0; margin: 0; }
.prog-list li {
  display: block; padding: 11px 0; border-bottom: 1px dashed var(--line);
}
.prog-list li:last-child { border-bottom: none; padding-bottom: 0; }
.pt-time {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: .78rem; letter-spacing: .03em; color: var(--teal-btn); text-transform: uppercase;
}
.day-card:nth-child(2n) .pt-time { color: var(--pink-btn); }
.day-card:nth-child(3n) .pt-time { color: var(--amber-text); }
.pt-name { display: block; font-weight: 700; color: var(--ink); margin: 2px 0 3px; font-size: .98rem; }
.pt-cost { display: block; font-size: .86rem; color: var(--ink-soft); }
.pt-cost.is-free {
  color: var(--teal-btn); font-weight: 700;
}

/* ============================================================ Coordinators */
/* The four team blocks used to stack — heading, then grid, four times over.
   That is a lot of vertical space for ten people, and the teams with a single
   coordinator looked stranded. The team name now sits in a narrow column beside
   its people, which halves the height and uses the width. */
.coord-team {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 8px 28px;
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.coord-team:first-of-type { border-top: none; padding-top: 4px; }
.coord-team > h3 {
  font-size: .95rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--pink-btn); margin: 6px 0 0; border: none; padding: 0;
  line-height: 1.35;
}
@media (max-width: 700px) {
  .coord-team { grid-template-columns: 1fr; gap: 10px; }
  .coord-team > h3 { margin-bottom: .2em; }
}
.coord-team:nth-of-type(2n) > h3 { color: var(--teal-btn); }

/* auto-fill with 1fr stretched a lone card across the whole row — Programs and
   Aged Care have one coordinator each, so those rows were mostly empty space.
   Fixed 150px columns keep every card the same size regardless of team size. */
.coord-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
  gap: 20px 26px;
  justify-content: start;
}
@media (max-width: 560px) {
  .coord-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
.coord { text-align: center; }
.coord-photo {
  width: 104px; height: 104px; margin: 0 auto 10px;
  border-radius: 50%; overflow: hidden; background: var(--teal-tint);
  display: flex; align-items: center; justify-content: center;
  border: 4px solid #fff; box-shadow: 0 8px 20px rgba(38,40,43,.14);
}
.coord-photo img { width: 100%; height: 100%; object-fit: cover; }
.coord-photo .initials {
  font-family: var(--font-display); font-weight: 800; font-size: 2.1rem;
  color: var(--teal-btn); letter-spacing: .02em;
}
.coord:nth-child(2n) .coord-photo { background: var(--pink-tint); }
.coord:nth-child(2n) .coord-photo .initials { color: var(--pink-btn); }
.coord:nth-child(3n) .coord-photo { background: var(--amber-tint); }
.coord:nth-child(3n) .coord-photo .initials { color: var(--amber-text); }
.coord h4 {
  font-family: var(--font-display); font-size: 1rem; margin-bottom: .15em; color: var(--ink);
}
.coord p { font-size: .85rem; margin-bottom: 0; }
.coord .jobshare {
  display: inline-block; font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--teal-btn); background: var(--teal-wash);
  border-radius: 999px; padding: 2px 10px; margin-top: 4px;
}

/* ============================================================ Support-coordinator page */
/* Registration groups as a scannable multi-column list rather than a 15-row table */
.reg-groups {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px; margin: 1.4em 0; list-style: none; padding: 0;
}
.reg-groups li {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--teal);
  border-radius: 8px; padding: 12px 15px; margin: 0;
}
.reg-groups li:nth-child(3n) { border-left-color: var(--pink); }
.reg-groups li:nth-child(3n+2) { border-left-color: var(--amber-text); }
.reg-groups .g-name { display:block; font-weight:700; color: var(--ink); font-size:.94rem; }
.reg-groups .g-what { display:block; font-size:.83rem; color: var(--ink-soft); margin-top:2px; }
.reg-groups li.held { border-left-color: var(--ink-soft); background: var(--cream); }

/* Contacts as a grid, not a stacked column */
.contact-card:nth-child(2n) { border-top-color: var(--pink); }
.contact-card:nth-child(3n) { border-top-color: var(--amber-text); }

/* Two-up panels that stay balanced */
.pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start;
}
@media (max-width: 860px) { .pair { grid-template-columns: 1fr; } }
.pair > .reg-note { margin: 0; height: 100%; }

/* Named members inside a team card */
.team-names {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
  font-size: .88rem; color: var(--ink); font-weight: 600;
}
.team-names .lead-name::after {
  content: "lead"; font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; background: var(--teal-btn); color: #fff;
  border-radius: 999px; padding: 1px 6px; margin-left: 5px; vertical-align: middle;
}

/* Respite apartment photo grid */
.photo-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; margin: 1.6em 0;
  align-items: start;   /* photos differ in height; align tops, not stretch */
}
.photo-row figure { margin: 0; }
/* No forced aspect ratio. These are real photos of real people, and a 4:3
   tile was centre-cropping the portrait ones by 44% — which is how Florence
   lost her head on the Community Access page. Each image keeps its own shape;
   the width/height attributes reserve the right space while it loads. */
.photo-row img {
  width: 100%; height: auto;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.photo-row figcaption { font-size: .85rem; color: var(--ink-soft); margin-top: 8px; }

/* A single photograph across the full column width. Same rules as .photo-row —
   no forced aspect ratio, the image keeps its own shape. */
.photo-wide { margin: 1.8em 0 0; }
.photo-wide img {
  width: 100%; height: auto;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.photo-wide figcaption {
  font-size: .9rem; color: var(--ink-soft); margin-top: 10px; max-width: 74ch;
}

/* --- Coordinators section: oversized heading --- */
#coordinators .eyebrow {
  font-size: 1rem;
  letter-spacing: .12em;
  margin-bottom: 14px;
}
#coordinators > .container > h2 {
  font-size: clamp(2.4rem, 5.4vw, 3.8rem);
  line-height: 1.06;
  margin: 0 0 .4em;
  max-width: 24ch;   /* was 16ch, which left half the row empty */
}
.coord-email {
  display: inline-block;
  font-size: .82rem;
  color: var(--teal-btn);
  word-break: break-word;
  margin-top: 4px;
  min-height: 24px;
  padding: 4px 0;
}
.coord-email:hover { text-decoration: underline; }
.coord-qual {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-top: 8px;
  background: var(--teal-wash);
  color: var(--teal-btn);
}
.coord-contact {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  margin-top: 8px;
  padding: 9px 16px;
  min-height: 44px;
  line-height: 26px;
  border-radius: 999px;
  background: var(--teal-btn);
  color: #fff;
}
.coord-contact:hover { background: var(--teal); color: #fff; }

/* --------------------------------------------------------------- print
   Families print service pages to take to plan meetings. Make that work. */
@media print {
  .site-header, .site-footer, .lh-widget, .skip-link,
  .cta-band, .marquee, .btn-row, .mobile-toggle { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding: 0 0 12pt; page-break-inside: avoid; }
  .container { max-width: none; padding: 0; }
  h1, h2, h3 { page-break-after: avoid; color: #000; }
  .card, .reg-note, .coord, figure { page-break-inside: avoid; border: 1px solid #999; }
  a { color: #000; text-decoration: underline; }
  /* Show link targets, so a printed page is still usable */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  main a[href^="tel:"]::after,
  main a[href^="mailto:"]::after,
  main a[href^="#"]::after { content: ""; }
  img { max-width: 100% !important; height: auto !important; }
}

/* --------------------------------------------------- brand tagline
   The logo's strapline set to its measured spec: Poppins 700, uppercase,
   tracked at .4em (measured off the artwork at 0.55 x cap-height).
   Reserved for the strapline itself — this much tracking is a logo
   treatment, not a UI one, and it hurts readability in running text. */
.brand-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-logo);
  font-size: .74rem;
  color: var(--amber-text);
  /* tracking adds space after the final letter; pull it back so the
     block still looks optically centred/left-aligned */
  margin-right: calc(var(--track-logo) * -1);
}

/* ------------------------------------------------------ DCIQ / feedback system */
.dciq {
  display: grid; grid-template-columns: 1.55fr .95fr; gap: 32px;
  background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--teal);
  border-radius: var(--radius); padding: 30px; margin-top: 2em;
  box-shadow: 0 4px 14px rgba(38,40,43,.05);
}
@media (max-width: 860px) { .dciq { grid-template-columns: 1fr; } }
.dciq h3 { color: var(--ink); }
.dir-link {
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  font-size: .86rem; color: var(--teal-btn); padding: 6px 0; min-height: 24px;
}
.dir-link::after { content: " \2192"; }
.dir-link:hover { text-decoration: underline; }

/* Leadership portrait on the About page — matches the founders' treatment */
.leader-photo {
  width: 150px; height: 150px; object-fit: cover; border-radius: 50%;
  margin-bottom: 14px; border: 4px solid #fff;
  box-shadow: 0 8px 20px rgba(38,40,43,.14);
}

/* ------------------------------------------------- referral pathways */
.pathways {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 1.8em;
}
@media (max-width: 860px) { .pathways { grid-template-columns: 1fr; } }
.pathway {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; display: flex; flex-direction: column;
  border-top: 4px solid var(--teal); box-shadow: 0 4px 14px rgba(38,40,43,.05);
}
.pathway:last-child { border-top-color: var(--pink); }
.pathway-tag {
  display: inline-block; align-self: flex-start;
  font-family: var(--font-display); font-weight: 700; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
  background: var(--teal-wash); color: var(--teal-btn);
}
.pathway-tag.alt { background: var(--pink-wash); color: var(--pink-dark); }
.pathway h3 { margin: 0 0 .2em; font-size: 1.45rem; }
.pathway-lead { font-weight: 600; color: var(--ink); }
.pathway ul { margin: 0 0 1em; }
.pathway ul li { margin-bottom: .4em; }
.pathway-note {
  font-size: .88rem; color: var(--ink-soft);
  background: var(--cream); border-radius: 10px; padding: 12px 14px;
  margin-top: auto; margin-bottom: 1.2em;
}
.pathway .btn { align-self: flex-start; }

/* ------------------------------------------------------- partner logos
   Drop a file into images/partners/<slug>.(svg|png|jpg) and the build picks it
   up automatically. Until then a typographic credit stands in, so the page is
   never showing a broken image. */
.partner { margin: 1.4em 0 0; }
.partner-mark {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 20px; min-height: 64px; text-decoration: none;
}
.partner-mark:hover { border-color: var(--teal); }
.partner-img { max-height: 44px; width: auto; }
.partner-text {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--ink); letter-spacing: -.01em;
}
.partner-cap {
  font-size: .82rem; color: var(--ink-soft); margin: 8px 0 0; max-width: 34ch;
}

/* ------------------------------------------------- sponsorships */
.sponsorships {
  margin-top: 52px; padding: 30px;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--amber);
  border-radius: var(--radius); box-shadow: 0 4px 14px rgba(38,40,43,.05);
}
.sponsorships h3 { margin-top: 0; }

/* ===================================================================
   LIONHEART AGED CARE — sub-brand theme
   Applied via <body class="theme-aged"> on aged-care.html only.

   Official palette (from the supplied Colour Codes):
     light purple  #C3B1D6   1.98:1 on white — background and tints only
     deep purple   #8A4299   6.33:1 on white — safe for body text
     grey          #808285   3.85:1 on white — large text and rules only,
                                               NOT body copy
   The accent tokens are remapped rather than the ink and body colours, so
   contrast and readability behave exactly as they do on the rest of the site.
   =================================================================== */
body.theme-aged {
  --pink:        #8A4299;
  --pink-dark:   #6E3479;   /* 8.64:1 — for text on white */
  --pink-btn:    #8A4299;   /* white text on this is 6.33:1 */
  --pink-tint:   #C3B1D6;
  --pink-wash:   #F6F1FA;
  --purple:      #8A4299;
  --purple-tint: #C3B1D6;
  --amber:       #C3B1D6;
  --amber-tint:  #F6F1FA;
  --amber-text:  #6E3479;
  --cream:       #F8F4FB;
  --teal:        #8A4299;
  --teal-dark:   #6E3479;
  --teal-btn:    #7A3A87;
  --teal-tint:   #EDE4F4;
  --teal-wash:   #F8F4FB;
  --focus:       #6E3479;
  --cta-deep:      #5F2D68;   /* white on it: 10.19:1 */
  --pill-text:     #5F2D68;
  --cta-deep-teal: #5F2D68;
}

/* The site header and footer stay Lionheart-branded — this is a service of
   Lionheart, not a separate company. The sub-brand lives inside the page. */
.aged-hero {
  background: linear-gradient(160deg, #F8F4FB 0%, #EDE4F4 100%);
  padding: 44px 0 52px;
}
.aged-logo {
  height: 92px; width: auto; margin: 14px 0 22px;
}
@media (max-width: 760px) { .aged-logo { height: 68px; } }
body.theme-aged .page-hero h1 { color: var(--ink); }

/* Plain FAQ list — answers always visible. Used on the Aged Care page, where
   the audience is older and a collapsed accordion is an unnecessary hurdle. */
.faq-plain { margin-top: 1.2em; }
.faq-plain .faq-item {
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.faq-plain .faq-item:last-child { border-bottom: none; }
.faq-plain h3 {
  font-size: 1.12rem; margin: 0 0 .4em; color: var(--ink);
}
.faq-plain p { margin: 0; max-width: 74ch; }
body.theme-aged .faq-plain p, body.theme-aged main p, body.theme-aged main li {
  font-size: 1.06rem;   /* slightly larger body text for an older readership */
  line-height: 1.75;
}
.sponsor-ask {
  background: var(--amber-tint); border-radius: 10px; padding: 16px 18px;
  margin-top: 1.4em; max-width: 70ch;
}

/* Visually hidden but read aloud — the marquee text is aria-hidden because it
   is duplicated, so the value list is announced once from here instead. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Coordinator headshot beside their contact details (Programs, Aged Care) */
.coord-thumb {
  width: 84px; height: 84px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  border: 3px solid #fff; box-shadow: 0 5px 14px rgba(38,40,43,.14);
}
.coord-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 480px) { .coord-thumb { width: 68px; height: 68px; } }

/* ===================================================================
   BRAVE MINDS COUNSELLING — sub-brand theme
   Applied via <body class="theme-braveminds"> on counselling.html only.

   Taken from bravemindscounselling.care: a warm neutral palette and a light
   serif for headings, which is a deliberate shift away from Lionheart's pink,
   teal and geometric Poppins. The point of the page is that Brave Minds feels
   separate, so it should look separate.

     sand    #E4DCCC   1.36:1 on white — backgrounds only
     tan     #C0B08E   2.13:1 on white — decoration and rules only
     taupe   #736758   5.51:1 on white — safe for text
     deeper  #5E5344   7.51:1 on white — links and small text on sand
     ink     #333333  12.63:1 on white — body copy
   =================================================================== */
body.theme-braveminds {
  --font-display: 'Noto Serif Display', Georgia, 'Times New Roman', serif;
  --ink:        #333333;
  --ink-soft:   #5E5344;
  --line:       #DED6C6;
  --cream:      #F6F2EA;
  --pink:       #736758;
  --pink-dark:  #5E5344;
  --pink-btn:   #736758;
  --pink-tint:  #E4DCCC;
  --pink-wash:  #F6F2EA;
  --teal:       #736758;
  --teal-dark:  #5E5344;
  --teal-btn:   #5E5344;
  --teal-tint:  #E4DCCC;
  --teal-wash:  #F6F2EA;
  --amber:      #C0B08E;
  --amber-tint: #F1EBDF;
  --amber-text: #5E5344;
  --purple:     #736758;
  --focus:      #5E5344;
  --cta-deep:      #4F4639;   /* white on it: 9.26:1 */
  --pill-text:     #4F4639;
  --cta-deep-teal: #4F4639;
}

/* Their headings are a light serif rather than a heavy geometric sans. Weight
   400 with normal tracking — the softness is the whole difference in feel. */
body.theme-braveminds h1,
body.theme-braveminds h2,
body.theme-braveminds h3 {
  font-weight: 400;
  letter-spacing: 0;
}
body.theme-braveminds h1 { font-size: clamp(2rem, 4.6vw, 3rem); }
body.theme-braveminds h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }

/* Buttons and eyebrows stay in the sans — a light serif at small sizes in caps
   is hard to read, and these are interface rather than voice. */
body.theme-braveminds .btn,
body.theme-braveminds .eyebrow,
body.theme-braveminds .nav-link,
body.theme-braveminds .footer-h,
body.theme-braveminds .brand-tagline {
  font-family: 'Poppins', sans-serif;
}
body.theme-braveminds .eyebrow { letter-spacing: .1em; }

/* A calmer page head than the pink gradient the rest of the site uses. */
body.theme-braveminds .page-hero {
  background: linear-gradient(140deg, #F6F2EA 0%, #E4DCCC 100%);
}
body.theme-braveminds .section.cream { background: #F6F2EA; }
body.theme-braveminds main p { line-height: 1.8; }

/* The team cards are short name-lists; the leadership cards carry photos and
   longer bios. In one grid the tall row forced the short cards into mostly
   empty boxes. Split into two grids, and let the compact one size to content. */
.team-grid { align-items: start; }
.team-grid .card { padding: 20px 22px; }
.team-grid .card h3 { font-size: 1.12rem; }
.team-grid .card p { font-size: .92rem; }

/* Brave Minds logo in the page head */
.bm-logo { height: 76px; width: auto; margin: 14px 0 20px; }
@media (max-width: 760px) { .bm-logo { height: 58px; } }
body.theme-braveminds .page-hero h1 { color: var(--ink); }
.bm-contact {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--pink-btn);
  border-radius: 10px; padding: 16px 18px; margin-top: 1.2em;
}

/* ------------------------------------------------- vision & mission
   This is the statement of purpose. It was previously set as two plain
   paragraphs in the least-designed section on the page, which undersold it. */
.vision-band {
  background: linear-gradient(150deg, var(--cream) 0%, var(--pink-tint) 100%);
  text-align: center;
}
.vision-band h2 {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-style: italic;
  max-width: 22ch;
  margin: 0 auto .8em;
}
.vision-text {
  max-width: 46ch;
  margin: 0 auto 1em;
  font-size: clamp(1.06rem, 1.9vw, 1.3rem);
  line-height: 1.65;
  color: var(--ink);
}
.mission {
  max-width: 60ch;
  margin: 2.4em auto 0;
  background: #fff;
  border-radius: var(--radius);
  padding: 26px 30px;
  box-shadow: 0 8px 24px rgba(38,40,43,.08);
}
.mission-label {
  font-family: var(--font-display); font-weight: 700; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--pink-dark); margin-bottom: .7em;
}
.mission p {
  margin: 0; font-size: 1.1rem; line-height: 1.6; color: var(--ink);
}
@media (max-width: 600px) { .mission { padding: 22px; } }

/* Leadership: the founders' card carries a photo and a longer story, so it sits
   on its own row rather than being squeezed into a third of the width. Kirstie
   and Michelle then sit side by side, which also matches their card lengths. */
.founders-row { display: grid; grid-template-columns: 1fr; }
/* Two grid children only: the photo and a wrapper for the text. The card used to
   have six direct children — img, h3, role, two paragraphs and the booking line —
   which the browser dealt into the two columns in pairs, so the photo sat beside
   the name and the role label ended up next to a paragraph. */
.founders-row .founders { display: grid; grid-template-columns: 168px 1fr; gap: 30px; align-items: start; }
.founders-row .founders img { margin: 0; }
.founders-text > *:first-child { margin-top: 0; }
.founders-text > *:last-child { margin-bottom: 0; }
.founders-text p { max-width: 70ch; }
.leads-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; align-items: start; }
@media (max-width: 860px) {
  .founders-row .founders { grid-template-columns: 1fr; gap: 18px; }
  .founders-row .founders img { margin: 0 auto; }
  /* centre the name and role on narrow screens, but leave the prose left-aligned —
     centred body copy is hard to read */
  .founders-text > h3, .founders-text > p:first-of-type { text-align: center; }
  .leads-row { grid-template-columns: 1fr; }
}

/* "Our wider team" is a summary, not a team — full width below the six team
   cards, so the grid stays a tidy 3 x 2 with no empty cells. */
.wider-team { margin-top: 22px; }
.wider-team .card { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.wider-team .card .icon-badge { margin: 0; }
.wider-team .card h3 { margin: 0 0 .3em; grid-column: 2; }
.wider-team .card p { margin: 0; grid-column: 2; }
.wider-team .card .icon-badge { grid-row: 1 / span 2; }
@media (max-width: 560px) {
  .wider-team .card { grid-template-columns: 1fr; }
  .wider-team .card h3, .wider-team .card p { grid-column: 1; }
  .wider-team .card .icon-badge { grid-row: auto; }
}

/* One number, prominently. This is the single most useful thing on the Contact
   page, and it was previously buried in a list of six rows all showing the same
   number. */
.one-number {
  background: var(--pink-wash); border: 1px solid var(--pink-tint);
  border-radius: var(--radius); padding: 24px 26px; margin-top: .6em;
  max-width: 30rem;
}
.big-phone {
  display: inline-block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 4.2vw, 2.5rem);
  color: var(--pink-dark); text-decoration: none; line-height: 1.15;
  letter-spacing: -.01em;
}
.big-phone:hover { text-decoration: underline; }
.always-on { margin: .5em 0 .8em; font-size: .95rem; color: var(--ink); }

/* Marks the sections added to the 2021 privacy statement, so a reviewer can see
   at a glance what is original approved wording and what is new. */
.added-note {
  font-size: .82rem; color: var(--ink-soft); font-style: italic;
  border-left: 3px solid var(--amber); padding-left: 12px; margin: 0 0 .8em;
}

/* Routing list inside the chat — the bot has no backend, so these are links out */
.lh-routes { margin: .4em 0 .6em; padding-left: 1.1em; }
.lh-routes li { margin-bottom: .45em; font-size: .9rem; line-height: 1.45; }
.lh-routes a { font-weight: 700; }

/* ------------------------------------------------------- book a time
   Renders only when BOOKING_URL is configured in build.py. */
.booking-block {
  display: grid; grid-template-columns: auto 1fr; gap: 20px;
  background: #fff; border: 1px solid var(--line);
  border-left: 4px solid var(--teal-btn); border-radius: var(--radius);
  padding: 26px 28px; margin-top: 2em;
  box-shadow: 0 6px 18px rgba(38,40,43,.06);
}
.booking-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--teal-wash); color: var(--teal-btn);
  display: grid; place-items: center;
}
.booking-block h3 { margin: 0 0 .35em; }
.booking-block p { max-width: 62ch; }
/* On a white section the card needs its own fill to read as a card. */
.booking-block.on-white { background: var(--teal-wash); }
.booking-block.on-white .booking-icon { background: #fff; }
@media (max-width: 560px) {
  .booking-block { grid-template-columns: 1fr; padding: 22px; }
}
.dciq-aside {
  background: var(--teal-wash); border-radius: var(--radius); padding: 22px;
  align-self: start;
}
.dciq-aside h3 { margin-top: 0; font-size: 1.08rem; }
.dciq-aside p { font-size: .92rem; }

/* ---- Facebook page embed (news.html) -------------------------------------
   The plugin renders at a fixed 500px internally. Forcing the iframe wider
   with width:100% gives you a 500px feed floating in dead space, so it's
   centred at its natural width instead and simply shrinks on narrow screens.
   min-height holds the space while it loads, so the page doesn't jump. */
.fb-embed { margin: 1.8em 0 0; display: flex; justify-content: center; }
.fb-embed iframe {
  width: 500px; max-width: 100%; min-height: 780px;
  border-radius: var(--radius); box-shadow: var(--shadow); background: #fff;
}
@media (max-width: 560px) { .fb-embed iframe { min-height: 700px; } }