/* ============================================================
   KANZ CARE — Design System
   A warm, editorial NDIS site. Purple + soft orange accent.
   ============================================================ */

/* ---------- 1. RESET & TOKENS ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; } /* prevents any rogue element from causing horizontal scroll on mobile */
img, svg, video { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }

:root {
  /* Brand */
  --kc-purple:        #9031a4;
  --kc-purple-deep:   #6b1f7c;
  --kc-purple-soft:   #f5ebf8;
  --kc-purple-tint:   #faf3fc;
  --kc-orange:        #de611a;
  --kc-orange-soft:   #fdf1e6;

  /* Neutrals */
  --kc-ink:           #1a1414;     /* primary text, warmer than pure black */
  --kc-ink-2:         #4a4242;     /* secondary text */
  --kc-ink-3:         #7a7272;     /* tertiary text */
  --kc-paper:         #fbf9f5;     /* warm off-white page background */
  --kc-cream:         #f5efe6;     /* cream accent surface */
  --kc-line:          rgba(26,20,20,.08);
  --kc-line-2:        rgba(26,20,20,.14);

  /* Type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --container:    1240px;
  --gutter:       clamp(1.25rem, 4vw, 2.5rem);
  --section-y:    clamp(4.5rem, 9vw, 7.5rem);

  /* Radii */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  32px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--kc-ink);
  background: var(--kc-paper);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

/* ---------- 2. TYPOGRAPHY ---------- */

.h-display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--kc-ink);
  margin: 0;
}

h1 { font-size: clamp(2.5rem, 5.5vw, 4.75rem); }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.875rem); line-height: 1.15; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kc-purple);
  margin: 0 0 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--kc-purple);
}

.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--kc-ink-2);
  max-width: 58ch;
  font-weight: 400;
}

p { margin: 0 0 1rem; color: var(--kc-ink-2); }

/* Italic accent inside headings */
em, .h-display em, h1 em, h2 em {
  font-style: italic;
  font-family: var(--font-display);
  color: var(--kc-purple);
  font-weight: 300;
}

/* ---------- 3. LAYOUT PRIMITIVES ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--cream { background: var(--kc-cream); }
.section--ink { background: var(--kc-ink); color: var(--kc-paper); }
.section--ink p, .section--ink .lede { color: rgba(251,249,245,.78); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--kc-paper); }
.section--purple { background: var(--kc-purple); color: #fff; }
.section--purple h1, .section--purple h2, .section--purple h3 { color: #fff; }
.section--purple p { color: rgba(255,255,255,.85); }

/* ---------- 4. NAVBAR ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
  background: transparent;
}
.nav.is-scrolled,
.nav.is-light {
  background: rgba(251,249,245,.95);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--kc-line);
}
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.05rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

@media (min-width: 1600px) {
  .nav__inner { max-width: 1700px; padding-inline: clamp(2.5rem, 5vw, 5rem); }
}
.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.nav__brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 72px;
  text-decoration: none;
}
.nav__logo {
  height: 72px;
  width: auto;
  display: block;
}

.nav__links {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  color: #fff;
  position: relative;
  padding: .5rem 0;
  transition: color .25s var(--ease);
}
.nav.is-scrolled .nav__link,
.nav.is-light .nav__link { color: var(--kc-ink); }
.nav__link:hover { color: var(--kc-orange); }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  opacity: .6;
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: var(--kc-purple);
  color: #fff !important;
  text-decoration: none;
  padding: .7rem 1.15rem;
  border-radius: var(--r-pill);
  font-size: .9rem;
  font-weight: 500;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.nav__cta:hover { background: var(--kc-purple-deep); transform: translateY(-1px); }

/* Mobile hamburger */
.nav__toggle {
  display: none;
  background: none;
  border: 0;
  padding: .5rem;
  color: #fff;
  position: relative;
  z-index: 110; /* above .nav__menu when collapsed */
}
.nav.is-scrolled .nav__toggle,
.nav.is-light .nav__toggle { color: var(--kc-ink); }
.nav__toggle svg { width: 28px; height: 28px; display: block; }

@media (max-width: 900px) {
  /* By default, hide the menu wrapper entirely on mobile so it can't
     interfere with the page until the user opens it. */
  .nav__menu { display: none; }
  .nav__links, .nav__cta-wrap { display: none; }
  .nav__toggle {
    display: inline-flex !important; /* never let other rules hide it on mobile */
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px; /* iOS tap-target minimum */
  }
  /* When open: full-viewport overlay with explicit top/right/bottom/left
     (avoids any shorthand-resolution edge cases) and an opaque background. */
  .nav.is-open .nav__menu {
    display: flex;
    position: fixed;
    top: 72px;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - 72px);
    height: calc(100dvh - 72px); /* dynamic vh on mobile, falls back if unsupported */
    background-color: #fbf9f5; /* opaque fallback */
    background-color: var(--kc-paper);
    flex-direction: column;
    align-items: stretch;
    padding: 1.75rem var(--gutter) 2rem;
    gap: 1.5rem;
    z-index: 100;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav.is-open .nav__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .nav.is-open .nav__link {
    color: var(--kc-ink) !important;
    font-size: 1.4rem;
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.3;
  }
  /* Keep the CTA close to the link list (not pushed to the bottom of
     the viewport, which made it feel disconnected on tall phones). */
  .nav.is-open .nav__cta-wrap {
    display: block;
    margin-top: 1.5rem;
    width: 100%;
  }
  .nav.is-open .nav__cta {
    width: 100%;
    justify-content: center;
    padding: 1rem 1.5rem;
    font-size: 1rem;
  }
}

/* ---------- 5. HERO ---------- */

.hero {
  position: relative;
  min-height: min(92vh, 880px);
  display: flex;
  flex-direction: column;
  background: #1a1414;
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(8rem, 16vh, 12rem);
  padding-bottom: clamp(5rem, 10vh, 7rem);
}

/* Ultra-wide screens (your design viewport) — give the image
   more vertical room so it doesn't feel cropped/squished. */
@media (min-width: 1600px) {
  .hero { min-height: 100vh; padding-top: 11rem; }
}
@media (min-width: 2000px) {
  .hero { min-height: 105vh; padding-top: 12rem; padding-bottom: 8rem; }
}
.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  transition: transform 8s linear;
}
.hero__slide.is-active .hero__slide-bg { transform: scale(1); }
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.55) 80%, rgba(26,20,20,.92) 100%),
    linear-gradient(90deg, rgba(0,0,0,.5) 0%, transparent 55%);
}

.hero__container {
  position: relative;
  z-index: 3;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
  width: 100%;
  color: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* On ultra-wide viewports, widen the hero content area so the
   title sits further from centre — feels more left-justified. */
@media (min-width: 1600px) {
  .hero__container { max-width: 1700px; padding-inline: clamp(2.5rem, 5vw, 5rem); }
}

.hero__eyebrow {
  color: rgba(255,255,255,.85);
  margin-bottom: 1.5rem;
}
.hero__eyebrow::before { background: rgba(255,255,255,.6); }

.hero__title-stack {
  display: grid;
  grid-template-areas: "slide";
}
.hero__title-slide {
  grid-area: slide;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  pointer-events: none;
  visibility: hidden;
}
.hero__title-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .25s;
  pointer-events: auto;
  visibility: visible;
}
.hero__title {
  color: #fff;
  font-size: clamp(2.25rem, 5.2vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  max-width: 20ch;
  margin: 0 0 1.5rem;
  line-height: 1.02;
}
.hero__title em {
  color: #f4d4ff;
  font-weight: 400;
  font-style: italic;
}
.hero__sub {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  max-width: 50ch;
  color: rgba(255,255,255,.85);
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
  align-items: center;
}

.hero__bottom {
  position: relative;
  z-index: 3;
  max-width: var(--container);
  margin: clamp(3rem, 8vh, 5rem) auto 0;
  padding-inline: var(--gutter);
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 2rem;
  color: rgba(255,255,255,.8);
}

@media (min-width: 1600px) {
  .hero__bottom { max-width: 1700px; padding-inline: clamp(2.5rem, 5vw, 5rem); }
}
.hero__dots {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.hero__dot {
  width: 28px;
  height: 2px;
  background: rgba(255,255,255,.3);
  border: 0;
  padding: 0;
  border-radius: 1px;
  cursor: pointer;
  transition: background .3s var(--ease), width .3s var(--ease);
}
.hero__dot.is-active { background: #fff; width: 44px; }
@media (max-width: 768px) {
  .hero { min-height: auto; padding-top: 7rem; padding-bottom: 3rem; }
  .hero__bottom { flex-direction: column; align-items: flex-start; margin-top: 2.5rem; }
}

/* ---------- 6. BUTTONS ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem 1.6rem;
  border-radius: var(--r-pill);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  border: 0;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap;
}
.btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  transition: transform .3s var(--ease), background .25s var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary {
  background: var(--kc-purple);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(144, 49, 164, .5);
}
.btn--primary:hover {
  background: var(--kc-purple-deep);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -10px rgba(144, 49, 164, .6);
}

.btn--ghost {
  background: rgba(255,255,255,.08);
  color: #fff;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
}
.btn--ghost:hover { background: rgba(255,255,255,.16); }
.btn--ghost .btn__arrow { background: rgba(255,255,255,.18); }

.btn--ink {
  background: var(--kc-ink);
  color: #fff;
}
.btn--ink:hover { background: #2c2222; transform: translateY(-1px); }

.btn--outline {
  background: transparent;
  color: var(--kc-ink);
  border: 1px solid var(--kc-line-2);
}
.btn--outline:hover { background: var(--kc-ink); color: #fff; }
.btn--outline .btn__arrow { background: var(--kc-purple-soft); color: var(--kc-purple); }
.btn--outline:hover .btn__arrow { background: rgba(255,255,255,.18); color: #fff; }

/* ---------- 7. INTRO + STATS BAND ---------- */

.intro {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.intro__title { max-width: 14ch; }
.intro__body p { font-size: 1.05rem; color: var(--kc-ink-2); }
.intro__body p + p { margin-top: 1rem; }
@media (max-width: 900px) { .intro { grid-template-columns: 1fr; } }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--kc-line);
  border-bottom: 1px solid var(--kc-line);
  margin-top: 4rem;
}
.stat {
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--kc-line);
}
.stat:last-child { border-right: 0; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--kc-purple);
  line-height: 1;
  margin-bottom: .35rem;
}
.stat__label {
  font-size: .85rem;
  color: var(--kc-ink-3);
  letter-spacing: .02em;
}
@media (max-width: 720px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { border-right: 0; border-bottom: 1px solid var(--kc-line); }
  .stat:nth-child(odd)  { border-right: 1px solid var(--kc-line); }
  .stat:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ---------- 8. SERVICES GRID ---------- */

.services-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 3.5rem;
}
.services-head h2 { max-width: 16ch; }
@media (max-width: 900px) {
  .services-head { grid-template-columns: 1fr; gap: 1.5rem; }
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}
.service-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 1.75rem;
  border: 1px solid var(--kc-line);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -22px rgba(26,20,20,.18);
  border-color: var(--kc-line-2);
}
/* Featured cards span more */
.service-card.is-feature { grid-column: span 3; }
.service-card.is-half    { grid-column: span 2; }
.service-card.is-third   { grid-column: span 2; }
@media (max-width: 960px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card,
  .service-card.is-feature,
  .service-card.is-half,
  .service-card.is-third { grid-column: span 1; }
  .service-card.is-feature { grid-column: span 2; }
}
@media (max-width: 540px) {
  .services-grid { grid-template-columns: 1fr; }
  .service-card.is-feature { grid-column: span 1; }
}

.service-card__num {
  font-family: var(--font-display);
  font-size: .9rem;
  color: var(--kc-ink-3);
  margin-bottom: 1.5rem;
}
.service-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -.01em;
  font-weight: 400;
  margin-bottom: .75rem;
}
.service-card__body {
  font-size: .94rem;
  line-height: 1.55;
  color: var(--kc-ink-2);
  margin: 0 0 1.5rem;
}
.service-card__arrow {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--kc-purple);
  font-weight: 500;
  font-size: .9rem;
  transition: gap .25s var(--ease);
}
.service-card:hover .service-card__arrow { gap: .85rem; }
.service-card__arrow svg { width: 16px; height: 16px; }

.service-card.is-feature {
  background: linear-gradient(135deg, var(--kc-purple) 0%, var(--kc-purple-deep) 100%);
  color: #fff;
  border: 0;
}
.service-card.is-feature .service-card__num { color: rgba(255,255,255,.6); }
.service-card.is-feature .service-card__body { color: rgba(255,255,255,.82); }
.service-card.is-feature .service-card__arrow { color: #fff; }
.service-card.is-feature::after {
  content: "";
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18) 0%, transparent 70%);
  bottom: -120px; right: -100px;
}

/* ---------- 9. PROMISE PILLARS ---------- */

.promise {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.promise-card {
  padding: 2.5rem 2rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--kc-line);
  background: #fff;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), border-color .35s var(--ease);
}
.promise-card.is-visible { opacity: 1; transform: translateY(0); }
.promise-card:nth-child(2) { transition-delay: .12s; }
.promise-card:nth-child(3) { transition-delay: .24s; }
.promise-card:hover { border-color: var(--kc-purple); }
.promise-card__icon {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--kc-purple-soft) 0%, #ede0f2 100%);
  color: var(--kc-purple);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}
.promise-card__icon svg { width: 26px; height: 26px; }
.promise-card h3 {
  font-size: 1.5rem;
  margin-bottom: .6rem;
}
.promise-card p { font-size: .96rem; color: var(--kc-ink-2); margin: 0; }
@media (max-width: 900px) { .promise { grid-template-columns: 1fr; } }

/* ---------- 10. EDITORIAL SPLIT (image + text) ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 5/6;
}
.split__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.split__caption {
  position: absolute;
  inset: auto 1.5rem 1.5rem 1.5rem;
  background: rgba(251,249,245,.92);
  backdrop-filter: blur(10px);
  padding: 1.1rem 1.4rem;
  border-radius: var(--r-md);
  font-size: .9rem;
  color: var(--kc-ink);
}
.split__caption strong { color: var(--kc-purple); }

.split__copy h2 { max-width: 16ch; margin-bottom: 1.5rem; }
.split__copy p  { margin-bottom: 1.25rem; }
.split__list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.split__list li {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  color: var(--kc-ink);
  font-size: 1rem;
}
.split__list svg {
  flex-shrink: 0;
  width: 22px; height: 22px;
  color: var(--kc-purple);
  margin-top: 2px;
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}

/* ---------- 11. CTA BAND ---------- */

.cta-band {
  background: var(--kc-ink);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(2.5rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(144,49,164,.4) 0%, transparent 70%);
  top: -200px; right: -180px;
  pointer-events: none;
}
.cta-band__title {
  position: relative;
  color: #fff;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  margin: 0 0 1rem;
}
.cta-band__title em { color: #f4d4ff; }
.cta-band__body {
  position: relative;
  color: rgba(255,255,255,.78);
  margin: 0;
  max-width: 48ch;
}
.cta-band__actions {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  justify-self: end;
  align-self: center;
}
.cta-band__phone {
  color: rgba(255,255,255,.65);
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.cta-band__phone strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 400;
  color: #fff;
  letter-spacing: -.01em;
  text-transform: none;
  margin-top: .2rem;
}
@media (max-width: 900px) {
  .cta-band { grid-template-columns: 1fr; }
  .cta-band__actions { justify-self: stretch; }
}

/* ---------- 12. FOOTER ---------- */

.footer {
  background: #2a2424;  /* slightly lighter than --kc-ink (#1a1414) */
  color: rgba(251,249,245,.7);
  padding: clamp(3.5rem, 6vw, 5rem) 0 2rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 3rem;
  margin-bottom: 3.5rem;
}
.footer__brand-logo {
  height: 48px;
  width: auto;
  margin-bottom: 1.25rem;
}
.footer__ndis-badge {
  width: 120px;
  height: auto;
  margin-top: 2rem;
  display: block;
  opacity: .95;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.footer__ndis-badge:hover {
  opacity: 1;
  transform: rotate(-4deg) scale(1.04);
}
.footer__tag {
  color: rgba(251,249,245,.62);
  font-size: .95rem;
  max-width: 32ch;
  margin-bottom: 1.5rem;
}
.footer__socials {
  display: flex;
  gap: .65rem;
}
.footer__social {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.footer__social:hover { background: var(--kc-purple); transform: translateY(-2px); }
.footer__social svg { width: 18px; height: 18px; }

.footer__col h4 {
  color: #fff;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
}
.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.footer__col a {
  text-decoration: none;
  color: rgba(251,249,245,.7);
  font-size: .95rem;
  transition: color .25s var(--ease);
}
.footer__col a:hover { color: #fff; }
.footer__contact-line {
  display: block;
  color: rgba(251,249,245,.7);
  font-size: .95rem;
  margin-bottom: .65rem;
}
.footer__contact-line strong {
  display: block;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  margin-top: .15rem;
}

.footer__acknowledgement {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 2rem 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: center;
  font-size: .88rem;
  color: rgba(251,249,245,.6);
  line-height: 1.55;
}
.footer__flags { display: flex; gap: .35rem; }
.footer__flag {
  width: auto; height: 24px;
  border-radius: 3px;
  display: block;
  object-fit: contain;
}

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  font-size: .82rem;
  color: rgba(251,249,245,.5);
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.5rem;
  align-items: center;
}
.footer__legal a {
  color: rgba(251,249,245,.55);
  text-decoration: none;
  font-size: .82rem;
  transition: color .25s var(--ease);
}
.footer__legal a:hover { color: #fff; }

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__acknowledgement { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- 13. INNER-PAGE HEADER (smaller hero) ---------- */

.page-header {
  padding-top: 10rem;
  padding-bottom: 7rem; /* extra space so the curved arc doesn't overlap the headline */
  background: var(--kc-cream);
  position: relative;
  overflow: hidden;
}
.page-header__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: end;
}
.page-header h1 { font-size: clamp(2.5rem, 5vw, 4rem); max-width: 18ch; margin: 0; }
.page-header__lede { color: var(--kc-ink-2); max-width: 42ch; }
@media (max-width: 900px) {
  .page-header__inner { grid-template-columns: 1fr; }
  .page-header { padding-top: 8rem; padding-bottom: 6rem; }
}

/* Curved bottom for page header */
.page-header__arc {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 60px;
  background: var(--kc-paper);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: scaleX(1.4);
  z-index: 1;
}

/* ---------- 14. FORMS ---------- */

.form-shell {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .form-shell { grid-template-columns: 1fr; } }

.form-side {
  position: sticky;
  top: 100px;
  background: var(--kc-purple);
  color: #fff;
  padding: 2.5rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}
/* On mobile the side panel is stacked above the form (single column).
   The `top: 100px` was intended to offset a sticky desktop sidebar but,
   because the later `position: relative` overrides `sticky`, it instead
   shifted the panel down by 100px while leaving its grid cell at the
   original position — so the form rendered underneath it. Reset both
   on mobile. */
@media (max-width: 900px) {
  .form-side { position: relative; top: auto; }
}
.form-side::after {
  content: "";
  position: absolute;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  bottom: -120px; right: -100px;
}
.form-side h3 { color: #fff; margin-bottom: 1rem; position: relative; }
.form-side p, .form-side a { color: rgba(255,255,255,.82); }
.form-side__line { display: block; position: relative; margin-bottom: 1.25rem; }
.form-side__line strong {
  display: block;
  font-family: var(--font-display);
  color: #fff;
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  margin-top: .25rem;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.form__group { display: flex; flex-direction: column; gap: .45rem; }
.form__group--row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 540px) { .form__group--row { grid-template-columns: 1fr; } }

.form label {
  font-size: .85rem;
  font-weight: 500;
  color: var(--kc-ink);
  letter-spacing: .02em;
}
.form label .req { color: var(--kc-orange); }

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="date"],
.form input[type="number"],
.form select,
.form textarea {
  font: inherit;
  width: 100%;
  padding: .9rem 1rem;
  background: #fff;
  border: 1px solid var(--kc-line-2);
  border-radius: var(--r-sm);
  color: var(--kc-ink);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: 0;
  border-color: var(--kc-purple);
  box-shadow: 0 0 0 4px rgba(144,49,164,.12);
}
.form textarea { resize: vertical; min-height: 120px; }

.form__hint { font-size: .8rem; color: var(--kc-ink-3); }

/* Radio cards (for referrals "I am a..." picker) */
.option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .65rem;
  min-width: 0;
}
@media (max-width: 720px) { .option-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .option-grid { grid-template-columns: 1fr !important; } }
/* The rating row (5 buttons across) should stay horizontal but compress */
@media (max-width: 480px) {
  .option-grid.rating-row { grid-template-columns: repeat(5, 1fr) !important; gap: .3rem; }
  .rating-row .option-tile__face { padding: .6rem .3rem; font-size: .8rem; }
}

.option-tile {
  position: relative;
  cursor: pointer;
}
.option-tile input { position: absolute; opacity: 0; pointer-events: none; }
.option-tile__face {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1rem;
  background: #fff;
  border: 1px solid var(--kc-line-2);
  border-radius: var(--r-sm);
  font-size: .9rem;
  font-weight: 500;
  transition: all .2s var(--ease);
}
.option-tile__face::before {
  content: "";
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--kc-line-2);
  background: #fff;
  flex-shrink: 0;
  transition: all .2s var(--ease);
}
.option-tile input:checked + .option-tile__face {
  border-color: var(--kc-purple);
  background: var(--kc-purple-tint);
  color: var(--kc-purple-deep);
}
.option-tile input:checked + .option-tile__face::before {
  border-color: var(--kc-purple);
  background: var(--kc-purple);
  box-shadow: inset 0 0 0 3px #fff;
}
.option-tile input:focus-visible + .option-tile__face {
  box-shadow: 0 0 0 4px rgba(144,49,164,.18);
}

/* Checkbox tiles */
.check-tile { position: relative; cursor: pointer; }
.check-tile input { position: absolute; opacity: 0; pointer-events: none; }
.check-tile__face {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 1rem;
  background: #fff;
  border: 1px solid var(--kc-line-2);
  border-radius: var(--r-sm);
  font-size: .9rem;
  transition: all .2s var(--ease);
}
.check-tile__face::before {
  content: "";
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 2px solid var(--kc-line-2);
  background: #fff;
  flex-shrink: 0;
  transition: all .2s var(--ease);
}
.check-tile input:checked + .check-tile__face {
  border-color: var(--kc-purple);
  background: var(--kc-purple-tint);
}
.check-tile input:checked + .check-tile__face::before {
  border-color: var(--kc-purple);
  background: var(--kc-purple);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l3 3 7-7' stroke='white' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Form fieldset (groups personal/ndis details) */
.form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
  min-width: 0; /* prevents fieldset from forcing parent to intrinsic content width on mobile */
}
.form fieldset legend {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -.01em;
  margin: 0 0 1.5rem;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: .85rem;
  /* allow legend text to wrap */
  white-space: normal;
}
.form fieldset legend::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--kc-line);
}

/* Rating row (feedback page) */
.rating-row { display: flex; gap: .5rem; }
.rating-row .option-tile__face { padding: .8rem 1.1rem; justify-content: center; }
.rating-row .option-tile__face::before { display: none; }

/* Submit button */
.form__submit {
  align-self: flex-start;
  margin-top: .5rem;
}

/* Form success message (Netlify form action target) */
.form-success {
  background: var(--kc-purple-tint);
  border: 1px solid var(--kc-purple);
  border-radius: var(--r-md);
  padding: 1.25rem 1.5rem;
  color: var(--kc-purple-deep);
  font-size: .95rem;
}

/* ---------- 15. NDIS + INFO PAGES ---------- */

.info-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: 4rem;
}
@media (max-width: 720px) {
  .info-block { grid-template-columns: 1fr !important; gap: 1.5rem; }
}
.info-block__card {
  background: #fff;
  border: 1px solid var(--kc-line);
  border-radius: var(--r-lg);
  padding: 2.5rem 2rem;
}
.info-block__card h3 { margin-bottom: 1rem; }
.info-block__card p:last-child { margin-bottom: 0; }

.callout {
  background: var(--kc-orange-soft);
  border-left: 3px solid var(--kc-orange);
  padding: 1.4rem 1.6rem;
  border-radius: var(--r-md);
  font-size: .96rem;
  color: var(--kc-ink);
  margin: 1.5rem 0;
}
.callout strong { color: var(--kc-orange); }

.complaint-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.complaint-card {
  background: #fff;
  border: 1px solid var(--kc-line);
  border-radius: var(--r-md);
  padding: 1.5rem;
}
.complaint-card h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  margin: 0 0 .5rem;
}
.complaint-card p { font-size: .9rem; margin: 0 0 .6rem; }
.complaint-card a { color: var(--kc-purple); word-break: break-word; }
@media (max-width: 720px) { .complaint-grid { grid-template-columns: 1fr; } }

/* ---------- 15b. LEGAL / INFO PROSE PAGES ---------- */

.legal-prose {
  max-width: 760px;
  margin: 0 auto;
}
.legal-prose .legal-meta {
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kc-ink-3);
  margin: 0 0 2.5rem;
}
.legal-prose .legal-lead {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  font-weight: 400;
  font-style: italic;
  color: var(--kc-ink);
  line-height: 1.5;
  margin: 0 0 3rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--kc-purple);
}
.legal-prose h2 {
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -.018em;
  color: var(--kc-ink);
  margin: 3rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--kc-line);
}
.legal-prose h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.legal-prose p {
  font-size: 1rem;
  color: var(--kc-ink-2);
  line-height: 1.7;
  margin: 0 0 1rem;
}
.legal-prose ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.legal-prose ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .6rem;
  font-size: 1rem;
  color: var(--kc-ink-2);
  line-height: 1.6;
}
.legal-prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kc-purple);
}
.legal-prose ul li strong {
  color: var(--kc-ink);
  font-weight: 500;
}
.legal-prose a {
  color: var(--kc-purple);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s var(--ease);
}
.legal-prose a:hover { color: var(--kc-purple-deep); }
.legal-prose em { font-style: italic; color: var(--kc-ink); }

/* ---------- 16. ANIMATION HELPERS ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 17. UTILITY ---------- */
.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;
}

/* ---------- 18. PILLARS (Mission / Vision / Values) ---------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 4rem;
}
.pillar {
  padding: 2.5rem 2rem;
  background: #fff;
  border: 1px solid var(--kc-line);
  border-radius: var(--r-lg);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  position: relative;
  overflow: hidden;
}
.pillar:hover {
  border-color: var(--kc-purple);
  transform: translateY(-3px);
  box-shadow: 0 18px 32px -22px rgba(144,49,164,.18);
}
.pillar__num {
  font-family: var(--font-display);
  font-size: 3rem;
  font-style: italic;
  color: var(--kc-purple);
  font-weight: 300;
  line-height: 1;
  margin-bottom: 1.25rem;
  display: block;
  opacity: .9;
}
.pillar h3 {
  color: var(--kc-ink);
  font-size: 1.6rem;
  margin-bottom: .85rem;
}
.pillar p {
  color: var(--kc-ink-2);
  font-size: .96rem;
  margin: 0;
  line-height: 1.6;
}
@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; }
}

/* ---------- 19. COMMUNITY BAND ("1 in 6 Australians") ---------- */

.community {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.community__stat {
  font-family: var(--font-display);
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--kc-purple);
  margin-bottom: 1rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.community__stat-unit {
  font-size: .35em;
  color: var(--kc-ink-2);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
}
.community__caption {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--kc-ink-2);
  max-width: 22ch;
  line-height: 1.3;
}
@media (max-width: 900px) {
  .community { grid-template-columns: 1fr; }
}

/* ---------- 20. PULLQUOTE / TESTIMONIAL ---------- */

.pullquote {
  text-align: center;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1rem;
}
.pullquote__mark {
  font-family: var(--font-display);
  font-size: clamp(5rem, 10vw, 8rem);
  font-style: italic;
  font-weight: 400;
  color: var(--kc-purple);
  line-height: .8;
  display: block;
  margin-bottom: 1rem;
  opacity: .6;
}
.pullquote__text {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -.018em;
  color: var(--kc-ink);
  margin: 0 0 2.5rem;
}
.pullquote__attribution {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: .95rem;
  color: var(--kc-ink-3);
}
.pullquote__attribution::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--kc-purple);
}
.pullquote__attribution strong {
  color: var(--kc-ink);
  font-weight: 500;
  margin-right: .35rem;
}

/* ---------- 21. JOURNEY STEPS ---------- */

.journey {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 3rem;
  position: relative;
}
.journey::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 36px;
  height: 1px;
  background: var(--kc-line);
  z-index: 0;
}
.journey-step {
  position: relative;
  padding-top: 0;
}
.journey-step__bullet {
  width: 72px;
  height: 72px;
  background: var(--kc-paper);
  border: 1px solid var(--kc-line-2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--kc-purple);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.journey-step:hover .journey-step__bullet {
  background: var(--kc-purple);
  border-color: var(--kc-purple);
  color: #fff;
}
.journey-step h4 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -.01em;
  margin: 0 0 .6rem;
  max-width: 18ch;
  color: var(--kc-ink);
}
.journey-step p {
  font-size: .92rem;
  color: var(--kc-ink-2);
  margin: 0;
  max-width: 24ch;
  line-height: 1.55;
}
@media (max-width: 900px) {
  .journey { grid-template-columns: repeat(2, 1fr); }
  .journey::before { display: none; }
}
@media (max-width: 540px) {
  .journey { grid-template-columns: 1fr; }
}

/* ---------- 22. TRUST STRIP ---------- */

.trust-strip-wrap {
  /* This wrapper breaks out of the container constraint so the strip
     can span the full viewport width on wide screens. */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  border-top: 1px solid var(--kc-line);
  border-bottom: 1px solid var(--kc-line);
  background: var(--kc-paper);
}
.trust-strip {
  display: flex;
  flex-wrap: nowrap; /* force all 5 on one row */
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1.6rem clamp(1.5rem, 5vw, 4rem);
  max-width: 1700px;
  margin: 0 auto;
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  color: var(--kc-ink-2);
  font-size: clamp(.85rem, 1vw, 1rem);
  letter-spacing: .01em;
  font-weight: 500;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0; /* allow text to wrap inside */
}
.trust-item svg {
  width: 32px;
  height: 32px;
  color: var(--kc-purple);
  flex-shrink: 0;
  stroke-width: 1.6;
}
/* Below this width, drop to a wrapping layout (5 across is too cramped). */
@media (max-width: 980px) {
  .trust-strip { flex-wrap: wrap; justify-content: center; gap: 1.25rem 2rem; }
  .trust-item { flex: 0 0 auto; }
  .trust-item svg { width: 24px; height: 24px; }
}

/* ---------- 23. DEDICATED SUPPORT (home page services replacement) ---------- */

.dedicated {
  display: grid;
  /* Image column slightly wider than text column for visual weight */
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch; /* makes columns same height so the card can align to image bottom */
}
.dedicated__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  background: var(--kc-cream);
  /* Lock to a tall portrait aspect — the image is the visual anchor of the section */
  aspect-ratio: 3 / 4;
  max-height: 760px;
}
.dedicated__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.dedicated__content {
  display: flex;
  flex-direction: column;
}
.dedicated__intro { padding-top: .5rem; margin-bottom: 2rem; }
.dedicated__title {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin-bottom: 1.5rem;
}
.dedicated__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--kc-purple);
}
.dedicated__body {
  font-size: 1rem;
  color: var(--kc-ink-2);
  margin-bottom: 1.75rem;
  max-width: 56ch;
}

/* The Participant-Focused card */
.dedicated__card {
  background: #fff;
  border: 1px solid var(--kc-line);
  border-radius: var(--r-lg);
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: auto; /* pushes card to bottom of column */
  flex: 0 0 auto;   /* don't grow — card hugs its content */
  width: 100%;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.dedicated__card:hover {
  border-color: var(--kc-purple);
  transform: translateY(-3px);
  box-shadow: 0 18px 32px -22px rgba(144,49,164,.2);
}
.dedicated__card h3 {
  font-size: clamp(1.4rem, 1.8vw, 1.65rem);
  font-weight: 500;
  margin: 0;
  color: var(--kc-ink);
  letter-spacing: -.015em;
}
.dedicated__card p {
  margin: 0;
  font-size: .98rem;
  color: var(--kc-ink-2);
  line-height: 1.6;
  max-width: 50ch;
}
.dedicated__icons {
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: .75rem auto 0; /* center horizontally + small gap above */
  display: block;
}

@media (max-width: 900px) {
  .dedicated { grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
  /* Source is portrait 2:3; use 4:5 to keep heads + feet in frame without
     dominating the viewport. object-position 'top' biases toward faces. */
  .dedicated__media { aspect-ratio: 4 / 5; max-height: 560px; }
  .dedicated__media img { object-position: center 30%; }
  .dedicated__content { gap: 2rem; justify-content: flex-start; }
}

/* ---------- 24. SERVICE IMAGE CARDS (services.html grid) ---------- */

.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.service-img-card {
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--kc-line);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.service-img-card:hover {
  transform: translateY(-4px);
  border-color: var(--kc-purple);
  box-shadow: 0 22px 38px -22px rgba(144,49,164,.22);
}
.service-img-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--kc-cream);
}
.service-img-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease);
}
.service-img-card:hover .service-img-card__media img {
  transform: scale(1.04);
}
.service-img-card__body {
  padding: 1.75rem 1.75rem 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.service-img-card__body .eyebrow {
  margin-bottom: .25rem;
}
.service-img-card__body h3 {
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -.015em;
  margin: 0 0 .5rem;
  color: var(--kc-ink);
}
.service-img-card__body p {
  font-size: .95rem;
  color: var(--kc-ink-2);
  margin: 0 0 1.25rem;
  line-height: 1.55;
}
.service-img-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto; /* pin to bottom of card body */
  padding-top: .25rem;
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .005em;
  color: var(--kc-ink-2);
  transition: color .25s var(--ease), gap .25s var(--ease);
}
.service-img-card__cta svg {
  transition: transform .25s var(--ease);
}
.service-img-card:hover .service-img-card__cta {
  color: var(--kc-purple);
  gap: .75rem;
}
.service-img-card:hover .service-img-card__cta svg {
  transform: translateX(3px);
}

@media (max-width: 980px) {
  .service-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .service-cards { grid-template-columns: 1fr; }
}

/* ---------- 25. WHO WE HELP (split + audience tiles) ---------- */

.who-we-help {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.who-we-help__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--kc-cream);
  aspect-ratio: 3 / 4;
  max-height: 720px;
}
.who-we-help__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.who-we-help__content { min-width: 0; }
@media (max-width: 900px) {
  .who-we-help { grid-template-columns: 1fr; }
  /* Source is portrait 2:3; match it on mobile to keep the nurse + participant
     fully in frame instead of cropping heads off. */
  .who-we-help__media { aspect-ratio: 4 / 5; max-height: 540px; }
  .who-we-help__media img { object-position: center 25%; }
}

.audience {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.audience--compact {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.audience-tile {
  padding: 1.75rem 1.4rem;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--kc-line);
  text-decoration: none;
  color: inherit;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.audience-tile:hover {
  transform: translateY(-3px);
  border-color: var(--kc-purple);
  box-shadow: 0 18px 32px -22px rgba(144,49,164,.25);
}
.audience-tile__icon {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--kc-purple-tint);
  color: var(--kc-purple);
  display: flex; align-items: center; justify-content: center;
}
.audience-tile__icon svg { width: 22px; height: 22px; }
.audience-tile h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  margin: 0;
}
.audience-tile p {
  font-size: .9rem;
  color: var(--kc-ink-2);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 900px) { .audience { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .audience { grid-template-columns: 1fr; } }

/* ---------- 26. MAP BLOCK (contact page) ---------- */

.map-block {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: stretch;
}
.map-block__intro {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0;
}
.map-block__intro h2 {
  margin: 0 0 .5rem;
}
.map-block__intro > p {
  color: var(--kc-ink-2);
  margin: 0 0 1rem;
  max-width: 38ch;
}
.map-block__details {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: 1px solid var(--kc-line);
  padding-top: 1.25rem;
}
.map-block__details li {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: baseline;
  gap: 1rem;
  font-size: .95rem;
}
.map-block__details strong {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kc-ink-3);
  font-weight: 500;
}
.map-block__details span,
.map-block__details a {
  color: var(--kc-ink);
  text-decoration: none;
  line-height: 1.5;
}
.map-block__details a:hover { color: var(--kc-purple); }

.map-block__embed {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--kc-line);
  background: var(--kc-cream);
  min-height: 420px;
  position: relative;
}
.map-block__embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  filter: saturate(.92);
}

@media (max-width: 900px) {
  .map-block { grid-template-columns: 1fr; }
  .map-block__embed { min-height: 360px; }
}