/* ==========================================================================
   Design tokens — from 03-Design-System/design-system-template.md
   Helping Hands Disability Care — approved mockup values
   ========================================================================== */
:root {
  /* Backgrounds */
  --color-bg: #FBF8F2;
  --color-white: #ffffff;

  /* Dark greens (headings, dark sections) */
  --color-dark: #15332D;
  --color-dark-deep: #0F2A24;
  --color-footer-bg: #12352D;

  /* Accent green family */
  --color-accent: #1E9E78;
  --color-accent-deep: #176B50;
  --color-accent-bright: #42BF95;
  --color-accent-light: #7FD2B6;
  --color-accent-lighter: #CDEBDF;
  --color-accent-pale: #BFE6D6;
  --color-accent-bg: #EAF6F1;

  /* Warm orange family */
  --color-warm: #EBA62E;
  --color-warm-deep: #C77E12;
  --color-warm-pale: #FBEFD6;

  /* Text */
  --color-text: #4C5B56;
  --color-text-muted: #5B6862;
  --color-text-soft: #536059;
  --color-text-on-dark: #B7CDC4;
  --color-text-on-dark-soft: #9FB8AE;
  --color-text-on-dark-light: #D6E5DF;
  --color-nav: #2A3A35;
  --color-heading-alt: #3A4A44;
  --color-error: #D8483B;
  --color-border: rgba(20, 51, 45, .08);
  --color-border-soft: rgba(20, 51, 45, .07);

  /* Fonts */
  --font-heading: 'Newsreader', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 1120px;
  --container-tight: 1000px;
  --container-form: 920px;
  --container-center: 640px;
  --gutter: 24px;
  --section-padding: 92px;
  --section-padding-mobile: 48px;

  /* Radius / shadow */
  --radius: 12px;
  --radius-card: 22px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --shadow-card: 0 18px 40px -28px rgba(20, 51, 45, .3);
  --shadow-card-hover: 0 26px 50px -28px rgba(20, 51, 45, .4);
  --shadow-card-lg: 0 18px 44px -30px rgba(20, 51, 45, .35);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500; line-height: 1.15; margin: 0 0 1rem; color: var(--color-dark); }
p { margin: 0 0 1rem; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); }
::selection { background: var(--color-accent-pale); color: var(--color-dark); }
.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;
}
.eyebrow {
  display: inline-block;
  font: 700 13px var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.section-head { max-width: var(--container-center); margin: 0 auto 46px; text-align: center; }
.section-head h2 { font: 500 clamp(30px,4vw,46px)/1.1 var(--font-heading); color: var(--color-dark); margin: 10px 0 0; }
.prose-muted { color: var(--color-text-muted); font-size: 16.5px; line-height: 1.7; }
.prose-lead { font-size: 16.5px; color: var(--color-text-soft); }

/* ==========================================================================
   Layout utilities
   ========================================================================== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--tight { max-width: var(--container-tight); }
.container--form { max-width: var(--container-form); }
.container--center { max-width: var(--container-center); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 17px 30px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font: 700 16px var(--font-body);
  border: none;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary,
.btn--warm {
  background: var(--color-warm);
  color: var(--color-dark);
  box-shadow: 0 14px 30px -12px rgba(235, 166, 46, .7);
}
.btn--secondary,
.btn--accent {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 12px 26px -12px rgba(30, 158, 120, .7);
}
.btn--outline {
  background: transparent;
  color: var(--color-dark);
  border: 1.5px solid rgba(20, 51, 45, .16);
  box-shadow: none;
}
.btn--outline:hover { border-color: var(--color-accent); }
.btn--outline-dark {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .45);
  box-shadow: none;
}
.btn--outline-dark:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.btn--ghost-dark {
  background: transparent;
  color: #fff;
  border: 1.6px solid rgba(255, 255, 255, .55);
  box-shadow: none;
}
.btn--ghost-dark:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.btn--block { width: 100%; justify-content: center; }
.btn--sm { padding: 13px 22px; font-size: 15px; }
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  font: 700 14px var(--font-body);
  color: var(--color-accent-deep);
  text-decoration: none;
  cursor: pointer;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 248, 242, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 78px;
  padding: 0 var(--gutter);
}
.site-branding__link { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.site-branding__mark { width: 44px; height: 44px; border-radius: 11px; display: block; }
.site-branding__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.site-branding__name { font: 800 18px var(--font-body); color: var(--color-dark); letter-spacing: -.01em; }
.site-branding__tag { font: 600 11px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent); }
.site-title { font: 800 18px var(--font-body); color: var(--color-dark); text-decoration: none; }

.primary-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.primary-nav__list a {
  position: relative;
  display: inline-block;
  font: 600 15px var(--font-body);
  color: var(--color-nav);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 10px;
}
.primary-nav__list li.current-menu-item > a,
.primary-nav__list li.current_page_item > a { color: var(--color-dark); }
/* Uses ::before (not ::after) so it never collides with the dropdown
   chevron ::after below — a menu item can be both "current" and
   "has-children" at once (e.g. Our Services), and two different ::after
   rules fighting over the same pseudo-element is exactly what produced the
   stray blob artifact under "Our Services". */
.primary-nav__list li.current-menu-item > a::before,
.primary-nav__list li.current_page_item > a::before {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2.5px; border-radius: 2px;
  background: var(--color-accent);
}

.header-actions { display: flex; align-items: center; gap: 14px; }
.header-phone {
  display: flex; align-items: center; gap: 7px;
  font: 700 15px var(--font-body); color: var(--color-dark); text-decoration: none;
}
.header-phone svg { color: var(--color-accent); }
.header-cta { padding: 13px 24px; font-size: 15px; }

.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid rgba(20, 51, 45, .15);
  border-radius: 11px;
  width: 46px; height: 46px;
  cursor: pointer;
  align-items: center; justify-content: center;
  color: var(--color-dark);
}
.nav-toggle__bar { display: block; width: 20px; height: 2px; background: currentColor; margin: 3px 0; }

@media (max-width: 860px) {
  .header-actions, .primary-nav { display: none; }
  .nav-toggle { display: flex; }
  .primary-nav.is-open {
    display: block;
    position: absolute;
    left: 0; right: 0; top: 78px;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    padding: 14px 24px 22px;
  }
  .primary-nav.is-open .primary-nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
  .primary-nav.is-open .primary-nav__list a { font-size: 17px; padding: 13px 8px; }
  .site-header { position: relative; }
}

/* Nav dropdown — "Our Services" parent item with NDIS / Aged Care children.
   Works with a real nested WP menu (Appearance > Menus, drag a child under
   "Our Services") or the synex_primary_menu_fallback() markup, both of which
   use WordPress's standard .menu-item-has-children / .sub-menu classes. */
.primary-nav__list li.menu-item-has-children { position: relative; }
.primary-nav__list li.menu-item-has-children > a { display: inline-flex; align-items: center; gap: 5px; }
.primary-nav__list li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .55;
  flex: none;
}
/* No margin-top here on purpose — the box sits flush against the trigger
   link (top: 100%, zero gap) with the breathing room done as padding-top
   instead. A margin gap would leave a strip of dead space between the link
   and the menu that belongs to neither element, so moving the mouse straight
   down from "Our Services" into the menu would drop out of :hover and the
   menu would vanish before you could reach "Aged Care Support at Home". */
.primary-nav__list .sub-menu {
  display: none; list-style: none; margin: 0; padding: 14px 8px 8px;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 270px; background: #fff; border: 1px solid var(--color-border);
  border-radius: 14px; box-shadow: 0 22px 46px -22px rgba(20,51,45,.4); z-index: 60;
}
.primary-nav__list li.menu-item-has-children:hover .sub-menu,
.primary-nav__list li.menu-item-has-children:focus-within .sub-menu { display: block; }
.primary-nav__list .sub-menu a {
  display: block; padding: 12px 14px; border-radius: 10px;
  font: 600 14.5px var(--font-body); color: var(--color-dark); text-decoration: none;
}
.primary-nav__list .sub-menu a:hover { background: var(--color-accent-bg); }

@media (max-width: 860px) {
  /* On mobile the sub-menu is always shown, indented under its parent —
     no hover/tap-to-expand interaction, matching the approved mockup. */
  .primary-nav.is-open .sub-menu {
    display: block; position: static; transform: none; width: auto;
    background: none; border: none; box-shadow: none; padding: 0 0 0 14px; margin: 0;
  }
  .primary-nav.is-open .sub-menu a { font-size: 15px; padding: 9px 8px; color: var(--color-heading-alt); }
  .primary-nav.is-open li.menu-item-has-children > a::after { display: none; }
}

/* ==========================================================================
   Hero (home)
   ========================================================================== */
.hero { position: relative; overflow: hidden; background: var(--color-dark-deep); }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(13,38,32,.95) 0%, rgba(13,38,32,.9) 34%, rgba(13,38,32,.62) 62%, rgba(13,38,32,.2) 100%);
}
.hero__glow {
  position: absolute; right: -140px; bottom: -160px; width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(66,191,149,.4), transparent 70%);
  z-index: 1;
}
.hero__inner {
  position: relative; z-index: 2;
  max-width: var(--container-max); margin: 0 auto; padding: 96px var(--gutter) 104px;
  min-height: 520px; display: flex; flex-direction: column; justify-content: center;
}
.hero__content { max-width: 660px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(191,230,214,.4);
  color: var(--color-accent-pale);
  font: 700 12px var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 15px; border-radius: var(--radius-pill);
}
.hero__badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent-bright); }
.hero__heading {
  font: 500 clamp(40px,5.6vw,66px)/1.03 var(--font-heading);
  color: #fff; margin: 22px 0 0; letter-spacing: -.015em;
}
.hero__heading em { font-style: italic; color: var(--color-warm); }
.hero__subheading {
  font: 400 19px/1.6 var(--font-body); color: var(--color-text-on-dark-light);
  margin: 22px 0 0; max-width: 540px;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero__checklist { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 38px; list-style: none; padding: 0; }
.hero__checklist li { display: flex; align-items: center; gap: 9px; font: 600 14px var(--font-body); color: #E6F1EC; margin: 0; }
.hero__checklist svg { flex: none; color: var(--color-accent-bright); }

/* "Life with Helping Hands" scroll-to-gallery link, sits below the checklist.
   Plain anchor to #home-gallery — html{scroll-behavior:smooth} (see Reset,
   above) handles the smooth scroll with no extra JS needed. */
.hero__scroll {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 34px;
  text-decoration: none; cursor: pointer;
}
.hero__scroll-icon {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid rgba(191,230,214,.5); color: var(--color-accent-pale);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
.hero__scroll:hover .hero__scroll-icon { background: rgba(66,191,149,.2); transform: translateY(3px); }
.hero__scroll-label { line-height: 1.2; }
.hero__scroll-eyebrow { display: block; font: 700 12px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-light); }
.hero__scroll-title { display: block; font: 500 20px var(--font-heading); color: #fff; margin-top: 2px; }

@media (max-width: 768px) {
  .hero__inner { padding: 64px var(--gutter) 56px; min-height: 0; }
}

/* ==========================================================================
   Intro quote band
   ========================================================================== */
.intro-quote { background: var(--color-dark); padding: 64px 0; }
.intro-quote__text {
  font: 500 clamp(24px,3.2vw,34px)/1.4 var(--font-heading);
  font-style: italic; color: var(--color-accent-bg); margin: 0; text-align: center;
}
.intro-quote__label {
  margin-top: 24px; text-align: center;
  font: 700 13px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--color-warm);
}

/* ==========================================================================
   Services preview (home) + full services grid (Our Services page)
   ========================================================================== */
.services-preview, .services-grid-section { padding: var(--section-padding) 0; background: var(--color-bg); }
.services-preview__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 46px;
}
.services-preview__head h2, .services-preview__head .eyebrow { margin: 0; }
.services-preview__head h2 { font: 500 clamp(30px,4vw,46px)/1.1 var(--font-heading); margin-top: 10px; }

.service-cards, .services-full-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.service-card {
  background: #fff; border: 1px solid var(--color-border-soft); border-radius: var(--radius-card);
  padding: 30px; box-shadow: var(--shadow-card); transition: transform .18s, box-shadow .18s;
}
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
.service-card__icon {
  width: 52px; height: 52px; border-radius: 15px; background: var(--color-accent-bg);
  display: flex; align-items: center; justify-content: center; color: var(--color-accent);
}
.service-card__title { font: 700 19px var(--font-body); color: var(--color-dark); margin: 18px 0 7px; }
.service-card__text { font: 400 15px/1.6 var(--font-body); color: var(--color-text-muted); margin: 0; }

/* Full service card (Our Services page) — has coloured header band + tags + learn more */
.service-card--full {
  overflow: hidden; box-shadow: var(--shadow-card-lg); display: flex; flex-direction: column; padding: 0;
}
.service-card--full:hover { transform: translateY(-6px); box-shadow: 0 30px 56px -30px rgba(20,51,45,.45); }
.service-card__media {
  height: 140px; background: linear-gradient(140deg, var(--color-accent), var(--color-warm));
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.service-card__media::before {
  content: ""; position: absolute; right: -22px; bottom: -34px; width: 120px; height: 120px;
  border-radius: 50%; background: rgba(255,255,255,.1);
}
.service-card__media::after {
  content: ""; position: absolute; left: -30px; top: -30px; width: 90px; height: 90px;
  border-radius: 50%; background: rgba(255,255,255,.07);
}
.service-card__media svg { color: #fff; transform: scale(2.1); position: relative; }
.service-card__body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.service-card__tags { display: flex; flex-wrap: wrap; gap: 10px; }
.service-card__tag {
  font: 600 13px var(--font-body); color: var(--color-accent-deep); background: var(--color-accent-bg);
  padding: 7px 14px; border-radius: var(--radius-pill);
}
.service-card__link { margin-top: auto; padding-top: 18px; align-self: flex-start; }

@media (max-width: 1000px) {
  .service-cards, .services-full-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .service-cards, .services-full-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Why us grid (4 cards)
   ========================================================================== */
.why-us { padding: var(--section-padding) 0; background: var(--color-accent-bg); }
.why-us__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.why-card { background: #fff; border-radius: 20px; padding: 30px; }
.why-card__icon {
  width: 50px; height: 50px; border-radius: 14px; background: var(--color-warm-pale);
  display: flex; align-items: center; justify-content: center; color: var(--color-warm-deep);
}
.why-card__title { font: 700 18px var(--font-body); color: var(--color-dark); margin: 18px 0 7px; }
.why-card__text { font: 400 14.5px/1.55 var(--font-body); color: var(--color-text-muted); margin: 0; }

@media (max-width: 1000px) { .why-us__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .why-us__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   How it works (numbered steps)
   ========================================================================== */
.how-it-works { padding: var(--section-padding) 0; background: var(--color-bg); }
.how-it-works__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.how-step { position: relative; padding-top: 14px; }
.how-step__number { font: 500 64px var(--font-heading); color: var(--color-accent-lighter); line-height: 1; display: block; }
.how-step__title { font: 700 20px var(--font-body); color: var(--color-dark); margin: 6px 0 8px; }
.how-step__text { font: 400 15.5px/1.6 var(--font-body); color: var(--color-text-muted); margin: 0; }

@media (max-width: 1000px) { .how-it-works__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .how-it-works__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Gallery preview (home, dark bg) + full gallery grid (Gallery page)
   ========================================================================== */
.gallery-preview { padding: var(--section-padding) 0; background: var(--color-dark); }
.gallery-preview__head { max-width: 620px; margin-bottom: 44px; }
.gallery-preview__head .eyebrow { color: var(--color-accent-light); }
.gallery-preview__head h2 { font: 500 clamp(30px,4vw,46px)/1.1 var(--font-heading); color: #fff; margin: 10px 0 0; }
.gallery-preview__head p { font: 400 16.5px/1.6 var(--font-body); color: var(--color-text-on-dark); margin: 14px 0 0; }
.gallery-preview__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.gallery-preview__actions { display: flex; justify-content: center; margin-top: 38px; }

.gallery-figure { margin: 0; position: relative; border-radius: var(--radius-card); overflow: hidden; }
.gallery-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 14px;
  background: linear-gradient(transparent, rgba(20,51,45,.82));
  color: #fff; font: 600 14px var(--font-body);
}
.gallery-preview__grid .gallery-figure { aspect-ratio: 3 / 4; }
.gallery-preview__grid .gallery-figure--span2 { grid-column: span 2; }
.gallery-preview__grid .gallery-figure--span3 { grid-column: span 3; aspect-ratio: 16 / 10; }

.gallery-full { padding: 64px 0 96px; background: var(--color-bg); }
.gallery-full__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery-full__grid .gallery-figure { aspect-ratio: 4 / 5; }
.gallery-full__grid .gallery-figure figcaption { padding: 34px 18px 16px; font-size: 15px; }
.gallery-full__note { text-align: center; font: 400 14.5px var(--font-body); color: #7A8880; margin: 38px auto 0; max-width: 560px; }

@media (max-width: 1000px) {
  .gallery-preview__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-preview__grid .gallery-figure { grid-column: span 1 !important; aspect-ratio: 3/4 !important; }
  .gallery-full__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .gallery-preview__grid, .gallery-full__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Success stories
   ========================================================================== */
.success-stories { padding: var(--section-padding) 0; background: var(--color-bg); }
.success-stories__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.story-card {
  background: #fff; border: 1px solid var(--color-border-soft); border-radius: 24px;
  padding: 38px; box-shadow: var(--shadow-card-lg);
}
.story-card__tag {
  display: inline-block; font: 700 12px var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-warm-deep); background: var(--color-warm-pale); padding: 6px 13px; border-radius: var(--radius-pill);
}
.story-card__title { font: 500 24px/1.2 var(--font-heading); color: var(--color-dark); margin: 18px 0 12px; }
.story-card__text { font: 400 15.5px/1.7 var(--font-body); color: var(--color-text-muted); margin: 0; }

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

/* ==========================================================================
   Partners strip
   ========================================================================== */
.partners-strip { padding: 74px 0; background: #fff; border-top: 1px solid var(--color-border); }
.partners-strip__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px 64px; }
.partners-strip__trilogy { display: flex; align-items: center; gap: 10px; }
.partners-strip__mark { display: flex; flex-direction: column; line-height: 0; }
.partners-strip__mark span { display: flex; gap: 2px; }
.partners-strip__mark span + span { margin-top: 2px; }
.partners-strip__mark i { width: 11px; height: 11px; border-radius: 2px; transform: rotate(45deg); display: block; }
.partners-strip__wordmark { font: 700 26px var(--font-body); color: #3A4A44; letter-spacing: -.01em; }
.partners-strip__wordmark b { font-weight: 400; }
.partners-strip__row img { height: 64px; width: auto; display: block; }
.partners-strip__row img.partners-strip__synex { height: 52px; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band { padding: 0 var(--gutter) 96px; background: var(--color-bg); }
.cta-band__panel {
  max-width: var(--container-max); margin: 0 auto; background: var(--color-accent);
  border-radius: 32px; padding: 64px 56px; position: relative; overflow: hidden;
}
.cta-band__panel::before {
  content: ""; position: absolute; right: -60px; top: -60px; width: 300px; height: 300px;
  border-radius: 50%; background: rgba(255,255,255,.1);
}
.cta-band__panel::after {
  content: ""; position: absolute; right: 120px; bottom: -90px; width: 220px; height: 220px;
  border-radius: 50%; background: rgba(255,255,255,.08);
}
.cta-band__inner {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 30px;
}
.cta-band__copy { max-width: 600px; }
.cta-band__heading { font: 500 clamp(28px,3.6vw,42px)/1.12 var(--font-heading); color: #fff; margin: 0; }
.cta-band__text { font: 400 17px/1.6 var(--font-body); color: rgba(255,255,255,.92); margin: 14px 0 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.cta-band .btn--primary { background: #fff; color: #15604A; }

@media (max-width: 768px) { .cta-band__panel { padding: 44px 28px; } }

/* Dark CTA panel variant (e.g. Services page "Not sure which supports you need?") */
.cta-panel--dark {
  max-width: var(--container-narrow); margin: 0 auto; background: var(--color-dark);
  border-radius: 28px; padding: 54px 48px; text-align: center;
}
.cta-panel--dark h2 { color: #fff; font: 500 clamp(26px,3.4vw,38px)/1.15 var(--font-heading); margin: 0; }
.cta-panel--dark p { font: 400 17px/1.6 var(--font-body); color: var(--color-text-on-dark); margin: 14px auto 28px; max-width: 560px; }

/* Gradient CTA panel variant (Aged Care page) */
.cta-panel--gradient {
  max-width: var(--container-narrow); margin: 0 auto;
  background: linear-gradient(120deg, #15604A, var(--color-accent));
  border-radius: 28px; padding: 56px 52px; position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
}
.cta-panel--gradient::before {
  content: ""; position: absolute; right: -70px; top: -70px; width: 260px; height: 260px;
  border-radius: 50%; background: rgba(255,255,255,.08);
}
.cta-panel--gradient__copy { max-width: 620px; position: relative; z-index: 1; }
.cta-panel--gradient__copy h2 { font: 500 clamp(28px,3.6vw,42px)/1.12 var(--font-heading); color: #fff; margin: 0; }
.cta-panel--gradient__copy p { font: 400 17px/1.6 var(--font-body); color: rgba(255,255,255,.92); margin: 14px 0 0; }
.cta-panel--gradient__actions { display: flex; flex-wrap: wrap; gap: 14px; position: relative; z-index: 1; }
@media (max-width: 768px) { .cta-panel--gradient { padding: 40px 28px; } }

/* ==========================================================================
   Inner page hero band (all secondary page templates)
   ========================================================================== */
.page-hero {
  background: linear-gradient(135deg, var(--color-accent-bg) 0%, #FCF3E0 100%);
  padding: 72px 0 80px;
}
.page-hero__inner { max-width: var(--container-tight); margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.page-hero h1 { font: 500 clamp(34px,5vw,54px)/1.06 var(--font-heading); color: var(--color-dark); margin: 12px 0 0; }
.page-hero p { font: 400 18px/1.6 var(--font-body); color: var(--color-text-soft); margin: 18px auto 0; max-width: 640px; }
.page-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 32px; }

/* Aged Care page — vertical stat card stack, service category cards,
   short-term pathway cards, numbered access steps */
.aged-stats-col { display: flex; flex-direction: column; gap: 16px; }

.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.category-card { background: var(--color-bg); border: 1px solid var(--color-border-soft); border-radius: var(--radius-card); padding: 32px 30px; }
.category-card__icon {
  display: flex; width: 56px; height: 56px; border-radius: 15px; margin-bottom: 20px;
  background: linear-gradient(140deg, var(--color-accent), var(--color-warm));
  color: #fff; align-items: center; justify-content: center;
}
.category-card h3 { font: 700 20px var(--font-body); color: var(--color-dark); margin: 0 0 10px; }
.category-card p { font: 400 15.5px/1.65 var(--font-body); color: var(--color-text-muted); margin: 0 0 14px; }
@media (max-width: 1000px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .category-grid { grid-template-columns: 1fr; } }

.pathway-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pathway-card { background: #fff; border: 1px solid var(--color-border-soft); border-radius: var(--radius-card); padding: 34px 32px; box-shadow: 0 18px 44px -34px rgba(20,51,45,.4); }
.pathway-card h3 { font: 700 21px var(--font-body); color: var(--color-dark); margin: 0 0 10px; }
.pathway-card p { font: 400 16px/1.65 var(--font-body); color: var(--color-text-muted); margin: 0; }
@media (max-width: 768px) { .pathway-grid { grid-template-columns: 1fr; } }

.access-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.access-step { background: var(--color-bg); border: 1px solid var(--color-border-soft); border-radius: 20px; padding: 28px 26px; }
.access-step__number {
  display: flex; width: 44px; height: 44px; border-radius: 50%; margin-bottom: 16px;
  background: var(--color-accent); color: #fff; align-items: center; justify-content: center;
  font: 700 18px var(--font-body);
}
.access-step h3 { font: 700 17px var(--font-body); color: var(--color-dark); margin: 0 0 8px; }
.access-step p { font: 400 14.5px/1.6 var(--font-body); color: var(--color-text-muted); margin: 0; }
@media (max-width: 1000px) { .access-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .access-grid { grid-template-columns: 1fr; } }

/* Dark hero variant (Service detail) */
.page-hero--dark { background: var(--color-dark); padding: 54px 0 64px; text-align: left; }
.page-hero--dark .page-hero__back {
  display: inline-flex; align-items: center; gap: 7px; background: none; border: none;
  font: 700 13px var(--font-body); letter-spacing: .04em; color: var(--color-warm); text-decoration: none; padding: 0;
}
.page-hero--dark h1 { color: #fff; margin: 0; }
.page-hero--dark .page-hero__rule { display: block; width: 66px; height: 4px; border-radius: 2px; background: var(--color-warm); margin: 18px 0 0; }
.page-hero--dark p { color: var(--color-text-on-dark); margin: 20px 0 28px; max-width: 520px; text-align: left; }

.generic-section { padding: 84px 0; }
.generic-section--bg { background: var(--color-bg); }
.generic-section--tint { background: var(--color-accent-bg); }
.generic-section--white { background: #fff; }

@media (max-width: 768px) {
  .page-hero, .generic-section, .services-preview, .services-grid-section,
  .why-us, .how-it-works, .gallery-preview, .success-stories { padding-top: var(--section-padding-mobile); padding-bottom: var(--section-padding-mobile); }
}

/* ==========================================================================
   Two-column layout helper (about/refer/work/contact grids)
   ========================================================================== */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split-grid--top { align-items: start; }
.split-grid--narrow-left { grid-template-columns: .9fr 1.1fr; gap: 48px; }
.split-grid--narrow-right { grid-template-columns: .85fr 1.15fr; gap: 48px; }
@media (max-width: 900px) {
  .split-grid, .split-grid--narrow-left, .split-grid--narrow-right { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   Stat cards / mini stat grid (About page)
   ========================================================================== */
.stat-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat-mini {
  background: #fff; border: 1px solid var(--color-border); border-radius: 20px; padding: 26px 24px;
}
.stat-mini__figure { font: 500 34px var(--font-heading); color: var(--color-warm-deep); }
.stat-mini__label { font: 600 14px/1.4 var(--font-body); color: var(--color-heading-alt); margin-top: 6px; }

.promise-panel { background: var(--color-accent); border-radius: 24px; padding: 36px; color: #fff; box-shadow: 0 26px 50px -30px rgba(20,51,45,.5); }
.promise-panel p { font: 500 22px/1.5 var(--font-heading); font-style: italic; margin: 16px 0 0; }
.promise-panel__label { margin-top: 18px; font: 700 12px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.82); }

.stats-band { padding: 84px 0; background: var(--color-bg); }
.stats-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stats-band__figure { font: 500 clamp(38px,5vw,56px) var(--font-heading); color: var(--color-warm-deep); }
.stats-band__label { font: 600 15px var(--font-body); color: var(--color-text-muted); margin-top: 4px; }
@media (max-width: 768px) { .stats-band__grid { grid-template-columns: repeat(2, 1fr); } }

/* Vision / mission split cards */
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vm-card { background: #fff; border-radius: 22px; padding: 38px; }
.vm-card--vision { border-left: 5px solid var(--color-accent); }
.vm-card--mission { border-left: 5px solid var(--color-warm); }
.vm-card span.eyebrow { color: var(--color-accent); }
.vm-card--mission span.eyebrow { color: var(--color-warm-deep); }
.vm-card p { font: 400 17px/1.65 var(--font-body); color: var(--color-heading-alt); margin: 14px 0 0; }
@media (max-width: 768px) { .vm-grid { grid-template-columns: 1fr; } }

/* Values grid (numbered) */
.values-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.value-card { background: #fff; border-radius: 18px; padding: 22px; }
.value-card__number { font: 600 22px var(--font-heading); color: var(--color-warm-deep); }
.value-card__title { font: 700 16px var(--font-body); color: var(--color-dark); margin: 6px 0 6px; }
.value-card__text { font: 400 13.5px/1.5 var(--font-body); color: var(--color-text-muted); margin: 0; }
@media (max-width: 900px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }

/* Areas-we-service dark band */
.areas-band {
  margin-top: 36px; background: var(--color-dark); border-radius: 22px; padding: 34px 38px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.areas-band__left { display: flex; align-items: center; gap: 18px; }
.areas-band__icon {
  flex: none; width: 54px; height: 54px; border-radius: 14px; background: rgba(127,210,182,.18);
  display: flex; align-items: center; justify-content: center; color: var(--color-accent-light);
}
.areas-band__eyebrow { font: 700 12px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-light); }
.areas-band__title { font: 500 22px var(--font-heading); color: #fff; margin-top: 2px; }
.areas-band p { font: 400 15px/1.6 var(--font-body); color: var(--color-text-on-dark); margin: 0; max-width: 420px; }

/* Team section */
.team-photo { margin: 0 0 40px; border-radius: 24px; overflow: hidden; box-shadow: 0 22px 50px -30px rgba(20,51,45,.4); }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.team-card {
  display: flex; gap: 22px; background: var(--color-bg); border: 1px solid var(--color-border-soft);
  border-radius: 22px; padding: 24px;
}
.team-card__photo { flex: none; width: 128px; height: 150px; object-fit: cover; object-position: center top; border-radius: 16px; display: block; }
.team-card__name { font: 700 19px var(--font-body); color: var(--color-dark); margin: 0; }
.team-card__role { font: 600 13.5px var(--font-body); color: var(--color-accent); margin: 3px 0 10px; }
.team-card__bio { font: 400 14px/1.55 var(--font-body); color: var(--color-text-muted); margin: 0; }
@media (max-width: 768px) { .team-grid { grid-template-columns: 1fr; } .team-card { flex-direction: column; } }

/* ==========================================================================
   Icon badge cards (Refer Someone "why refer" grid + reused patterns)
   ========================================================================== */
.icon-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.icon-card { background: #fff; border: 1px solid var(--color-border-soft); border-radius: 20px; padding: 26px; }
.icon-card__icon {
  width: 46px; height: 46px; border-radius: 13px; background: var(--color-warm-pale);
  display: flex; align-items: center; justify-content: center; color: var(--color-warm-deep);
}
.icon-card__title { font: 700 17px var(--font-body); color: var(--color-dark); margin: 16px 0 6px; }
.icon-card__text { font: 400 14px/1.55 var(--font-body); color: var(--color-text-muted); margin: 0; }
@media (max-width: 900px) { .icon-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .icon-card-grid { grid-template-columns: 1fr; } }

/* Numbered step list (Refer Someone / How referrals work) */
.step-list { display: flex; flex-direction: column; gap: 24px; }
.step-list__item { display: flex; gap: 16px; }
.step-list__bullet {
  flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--color-accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font: 700 16px var(--font-body);
}
.step-list__item h3 { font: 700 17px var(--font-body); color: var(--color-dark); margin: 6px 0 4px; }
.step-list__item p { font: 400 15px/1.6 var(--font-body); color: var(--color-text-muted); margin: 0; }

.phone-callout { margin-top: 30px; background: var(--color-accent-bg); border-radius: 18px; padding: 24px; }
.phone-callout p { font: 600 15px/1.5 var(--font-body); color: var(--color-dark); margin: 0 0 4px; }
.phone-callout a { font: 700 19px var(--font-body); color: var(--color-accent-deep); text-decoration: none; }

/* Refer Someone page — form now stacks below the info column (not beside it) */
.refer-info + .form-panel { margin-top: 44px; }

/* Perk cards (Work With Us) */
.perk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.perk-card { background: #fff; border-radius: 20px; padding: 28px; border-top: 4px solid var(--color-warm); }
.perk-card h3 { font: 700 17px var(--font-body); color: var(--color-accent-deep); margin: 0 0 8px; }
.perk-card p { font: 400 14.5px/1.55 var(--font-body); color: var(--color-text-muted); margin: 0; }
@media (max-width: 900px) { .perk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .perk-grid { grid-template-columns: 1fr; } }

/* Job listing cards (Work With Us) */
.job-list { display: flex; flex-direction: column; gap: 14px; }
.job-card { background: #fff; border: 1px solid var(--color-border); border-radius: 18px; padding: 22px 24px; }
.job-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.job-card__head h3 { font: 700 17px var(--font-body); color: var(--color-dark); margin: 0; }
.job-card__type { font: 600 12px var(--font-body); color: var(--color-accent-deep); background: var(--color-accent-bg); padding: 5px 12px; border-radius: var(--radius-pill); }
.job-card p { font: 400 14.5px/1.55 var(--font-body); color: var(--color-text-muted); margin: 10px 0 0; }

/* Contact info cards (Contact page) */
.contact-info { display: flex; flex-direction: column; gap: 16px; }
.contact-info__item {
  display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--color-border);
  border-radius: 18px; padding: 22px; text-decoration: none;
}
.contact-info__icon {
  flex: none; width: 48px; height: 48px; border-radius: 13px; background: var(--color-accent-bg);
  display: flex; align-items: center; justify-content: center; color: var(--color-accent);
}
.contact-info__label { display: block; font: 600 13px var(--font-body); color: #7A867F; }
.contact-info__value { display: block; font: 700 18px var(--font-body); color: var(--color-dark); }

/* Success/received confirmation panel (forms) */
.form-success { text-align: center; padding: 40px 10px; }
.form-success__icon {
  display: inline-flex; width: 70px; height: 70px; border-radius: 50%; background: var(--color-accent-bg);
  color: var(--color-accent); align-items: center; justify-content: center; margin-bottom: 18px;
}
.form-success h3 { font: 500 26px var(--font-heading); color: var(--color-dark); margin: 0 0 10px; }
.form-success p { font: 400 16px/1.6 var(--font-body); color: var(--color-text-muted); margin: 0; }

/* ==========================================================================
   Forms (Refer Someone / Work With Us / Contact)
   ========================================================================== */
.form-panel {
  background: #fff; border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg);
  padding: 46px; box-shadow: 0 34px 74px -38px rgba(20,51,45,.4);
  position: relative; overflow: hidden;
}
.form-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-warm));
}
.form-panel h3 {
  font: 700 21px var(--font-body); color: var(--color-dark); margin: 0 0 24px;
  display: flex; align-items: center; gap: 11px;
}
.form-panel h3::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); flex: none;
  order: -1;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.form-field { display: block; margin-top: 18px; }
.form-row + .form-field, .form-field:first-child { margin-top: 0; }
.form-field span,
.form-field label.form-label {
  display: block; font: 600 13px var(--font-body); letter-spacing: .01em; color: var(--color-heading-alt); margin-bottom: 7px;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="date"],
.form-field input[type="file"],
.form-field select,
.form-field textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  font: 500 15px var(--font-body);
  color: var(--color-dark);
  background: var(--color-bg);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-field input:hover, .form-field select:hover, .form-field textarea:hover,
input:hover, select:hover, textarea:hover { border-color: rgba(20, 51, 45, .26); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus,
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--color-accent); background: #fff;
  box-shadow: 0 0 0 4px var(--color-accent-lighter);
}
textarea { resize: vertical; min-height: 122px; }
select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 42px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C5B56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.form-field input[type="file"] { padding: 12px; font-size: 14px; cursor: pointer; }
.form-note { font: 400 12.5px/1.5 var(--font-body); color: #8A968F; margin: 16px 0 0; }
.form-required { color: var(--color-error); }

.radio-group, .checkbox-group { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.radio-group label, .checkbox-group label {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font: 600 14.5px var(--font-body); color: var(--color-dark);
  background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: 12px;
  padding: 12px 15px; transition: border-color .15s ease, background-color .15s ease;
}
.radio-group label:hover, .checkbox-group label:hover { border-color: var(--color-accent-light); }
.radio-group label:has(input:checked), .checkbox-group label:has(input:checked) {
  border-color: var(--color-accent); background: var(--color-accent-bg);
}
.checkbox-group label { font: 500 14.5px/1.4 var(--font-body); color: var(--color-heading-alt); align-items: flex-start; }
.radio-group input, .checkbox-group input { width: 18px; height: 18px; accent-color: var(--color-accent); cursor: pointer; margin-top: 1px; flex: none; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 11px 14px; }

/* Segmented "choose your option" toggle — a real card/tab control rather
   than a plain stacked radio list, with the native radio dot hidden (the
   whole card is the click target) and the checked card highlighted. */
.refer-type-toggle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 6px; }
.refer-type-toggle label {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 16px 14px; border: 1.5px solid var(--color-border); border-radius: 14px;
  font: 700 14.5px var(--font-body); color: var(--color-heading-alt); cursor: pointer;
  background: var(--color-bg); transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.refer-type-toggle label:hover { border-color: var(--color-accent-light); }
.refer-type-toggle input[type="radio"] {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);
}
.refer-type-toggle label {
  position: relative; /* anchors the checkmark badge below */
}
.refer-type-toggle label:has(input:checked) {
  border-color: var(--color-accent); background: var(--color-accent-bg); color: var(--color-accent-deep);
  box-shadow: 0 10px 22px -12px rgba(30,158,120,.6);
}
/* Small checkmark badge on the selected card — a second visual confirmation
   beyond just the border/background change, so it reads instantly even at
   a glance. */
.refer-type-toggle label:has(input:checked)::before {
  content: "✓"; position: absolute; top: -8px; right: -8px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--color-accent); color: #fff;
  font: 700 12px/20px var(--font-body); text-align: center;
}
.refer-type-toggle label:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.refer-fieldset { display: none; counter-reset: formsection; }
.refer-fieldset.is-active { display: block; }
.form-section-title {
  font: 700 19px var(--font-body); color: var(--color-dark); margin: 30px 0 14px; padding-top: 26px;
  border-top: 1px solid rgba(20,51,45,.1); display: flex; align-items: center; gap: 10px;
}
.form-section-title:first-of-type { border-top: none; padding-top: 0; }
/* Auto-numbered section badge — purely visual wayfinding through the long
   NDIS section (no markup changes needed in the CF7 form content, since
   each .refer-fieldset resets its own counter independently). */
.form-section-title::before {
  counter-increment: formsection;
  content: counter(formsection);
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-accent-bg); color: var(--color-accent-deep);
  font: 700 13px/26px var(--font-body); text-align: center;
}
/* .form-section-title is also an <h3> inside .form-panel, which already
   gives every h3 a small accent-dot ::after — suppress that here so the
   numbered badge above is the only marker (avoids two ornaments stacked
   on the same heading). */
.form-panel h3.form-section-title::after { content: none; }

@media (max-width: 620px) {
  .form-row, .form-row--3 { grid-template-columns: 1fr; }
  .form-panel { padding: 30px 24px; }
}
/* The 3-way referral toggle stays horizontal (3-across) at every width,
   including mobile — it's just a short label each, and stacking it to one
   column made it look like a plain vertical radio list again instead of a
   segmented control. Padding/font shrink a little on narrow phones so the
   longer "Aged Care" label doesn't force awkward wrapping. */
@media (max-width: 480px) {
  .refer-type-toggle { gap: 8px; }
  .refer-type-toggle label { padding: 12px 6px; font-size: 12.5px; }
}

/* ==========================================================================
   Service detail (single-service.php)
   ========================================================================== */
.service-card__media--detail { height: 300px; border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.service-card__media--detail svg { transform: scale(2.6); }
.service-detail__grid { grid-template-columns: .8fr 1.2fr; gap: 56px; }
.service-detail__about p { color: var(--color-text-muted); font-size: 16.5px; line-height: 1.7; }
.service-detail__steps-box { background: #FCF3E0; border-radius: 20px; padding: 30px 32px; margin: 26px 0 34px; }
.service-detail__step { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 14px; }
.service-detail__step:last-child { margin-bottom: 0; }
.service-detail__step-icon {
  flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--color-warm); color: #fff;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.service-detail__step p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--color-heading-alt); }
.service-detail__step strong { color: var(--color-dark); }
.service-detail__getting-started { background: var(--color-warm); border-radius: 22px; padding: 34px 36px; position: relative; overflow: hidden; }
.service-detail__getting-started h3 { margin-bottom: 8px; }
.service-detail__getting-started p { color: #3A2E10; max-width: 460px; margin-bottom: 20px; }
.service-detail__getting-started .btn { background: var(--color-dark); color: #fff; }
@media (max-width: 900px) { .service-detail__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Inner pages (default page.php template)
   ========================================================================== */
.inner-page__header { padding: 3rem var(--gutter) 1rem; }
.inner-page__content { padding-bottom: var(--section-padding); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--color-footer-bg); color: #fff; padding: 68px 0 32px; }
.site-footer a { color: var(--color-text-on-dark-soft); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand__logo { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-brand__logo img { width: 46px; height: 46px; border-radius: 12px; display: block; }
.footer-brand__name { display: block; font: 800 18px var(--font-body); color: #fff; }
.footer-brand__tag { display: block; font: 600 11px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent-light); }
.footer-brand__text { font: 400 14.5px/1.6 var(--font-body); color: var(--color-text-on-dark-soft); margin: 0 0 16px; max-width: 300px; }
.footer-brand__badge { display: inline-flex; align-items: center; background: #fff; padding: 12px 18px; border-radius: 14px; box-shadow: 0 12px 28px -16px rgba(0,0,0,.5); }
.footer-brand__badge img { height: 46px; width: auto; }
.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-social a {
  width: 42px; height: 42px; border-radius: 12px; background: rgba(127,210,182,.12);
  display: flex; align-items: center; justify-content: center; color: var(--color-accent-pale);
  transition: background .15s, color .15s;
}
.footer-social a:hover { background: var(--color-accent); color: #fff; }

.footer-col h4 { font: 700 14px var(--font-body); color: #fff; margin: 0 0 16px; letter-spacing: .04em; }
.footer-col-list { display: flex; flex-direction: column; gap: 11px; list-style: none; margin: 0; padding: 0; }
.footer-col-list a, .footer-col-list button {
  background: none; border: none; cursor: pointer; text-align: left; padding: 0;
  font: 500 14.5px var(--font-body); color: var(--color-text-on-dark-soft);
}
.footer-col-list a:hover, .footer-col-list button:hover { color: #fff; }
.footer-address { font: 500 14.5px/1.5 var(--font-body); color: var(--color-text-on-dark-soft); }

.footer-ack { display: flex; align-items: flex-start; gap: 18px; margin: 40px 0 0; border-top: 1px solid rgba(127,210,182,.16); padding-top: 26px; max-width: 860px; }
.footer-ack__flags { display: flex; gap: 8px; flex: none; }
.footer-ack__flag { width: 46px; height: 31px; border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.footer-ack p { font: 400 13px/1.65 var(--font-body); color: var(--color-text-on-dark-soft); margin: 0; }

.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(127,210,182,.16);
}
.footer-bottom span, .footer-bottom a { font: 400 13px var(--font-body); color: #7F988E; }
.footer-widgets { margin-top: 24px; }

@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Contact Form 7 — aligns CF7's own markup with the .form-field/.form-row/
   .btn/.refer-* conventions above, since the Contact + Refer Someone pages
   now render real CF7 forms via do_shortcode() instead of static HTML.
   ========================================================================== */
.wpcf7-form-control-wrap { display: block; }
.wpcf7-form-control-wrap + .wpcf7-form-control-wrap { margin-top: 8px; }

/* file input + plain-text notes CF7 renders outside any wrapper class */
.wpcf7 p { margin: 0 0 1rem; }
.wpcf7 p:last-child { margin-bottom: 0; }

/* CF7's own [submit] tag, styled like .btn in case it's used instead of a
   custom <button> — most forms in this theme use a custom button instead. */
.wpcf7-form input[type="submit"] {
  display: inline-flex; align-items: center; gap: 9px; padding: 17px 30px;
  border-radius: var(--radius-pill); font: 700 16px var(--font-body); border: none; cursor: pointer;
  background: var(--color-accent); color: #fff; box-shadow: 0 12px 26px -12px rgba(30,158,120,.7);
  transition: transform .15s ease;
}
.wpcf7-form input[type="submit"]:hover { transform: translateY(-2px); }
.wpcf7-spinner { margin-left: 10px; vertical-align: middle; }

/* Field-level validation */
.wpcf7-not-valid-tip { display: block; color: var(--color-error); font: 500 13px var(--font-body); margin-top: 6px; }
.wpcf7-form-control.wpcf7-not-valid { border-color: var(--color-error) !important; }

/* Form-level success/error banner */
.wpcf7-response-output {
  border-radius: 12px; padding: 14px 18px; margin: 20px 0 0 !important;
  font: 500 14.5px var(--font-body); border: 1.5px solid var(--color-border) !important;
}
.wpcf7-form.sent .wpcf7-response-output {
  border-color: var(--color-accent) !important; color: var(--color-accent-deep); background: var(--color-accent-bg);
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output {
  border-color: var(--color-error) !important; color: var(--color-error); background: #FDEDEC;
}

/* Acceptance checkbox (the "I would like updates..." opt-in) */
.wpcf7-acceptance .wpcf7-list-item { margin: 0; display: block; }
.wpcf7-acceptance .wpcf7-list-item-label { cursor: pointer; }

/* Checkbox/radio groups rendered inside .checkbox-grid / .radio-group wrappers
   in the CF7 Form-tab content — CF7 nests each option in its own
   <span class="wpcf7-list-item"><label><input>...</label></span>, so target
   the actual .wpcf7-form-control (the direct parent of the list items) rather
   than the outer wrapper to get the grid/flex layout applied correctly. */
.checkbox-grid .wpcf7-form-control,
.radio-group .wpcf7-form-control {
  display: contents;
}
.checkbox-grid .wpcf7-list-item,
.radio-group .wpcf7-list-item {
  margin: 0;
}
.checkbox-grid .wpcf7-list-item label {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font: 500 14.5px/1.4 var(--font-body); color: var(--color-heading-alt);
  background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: 12px;
  padding: 12px 15px; transition: border-color .15s ease, background-color .15s ease;
}
.radio-group .wpcf7-list-item label {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font: 600 14.5px var(--font-body); color: var(--color-dark);
  background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: 12px;
  padding: 12px 15px; transition: border-color .15s ease, background-color .15s ease;
}
.checkbox-grid .wpcf7-list-item label:hover,
.radio-group .wpcf7-list-item label:hover { border-color: var(--color-accent-light); }
.checkbox-grid .wpcf7-list-item label:has(input:checked),
.radio-group .wpcf7-list-item label:has(input:checked) {
  border-color: var(--color-accent); background: var(--color-accent-bg);
}
.checkbox-grid input[type="checkbox"],
.radio-group input[type="radio"] {
  width: 18px; height: 18px; accent-color: var(--color-accent); cursor: pointer; margin-top: 1px; flex: none;
}
/* Note: .checkbox-grid and .radio-group base layout (display/gap) are already
   defined earlier in this file — the .wpcf7-form-control { display: contents }
   rule above just makes CF7's extra wrapper span transparent to that layout. */

/* ==========================================================================
   Blog — listing grid (home.php) + single post (single.php)
   ========================================================================== */
.blog-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.post-card {
  background: #fff; border: 1px solid var(--color-border-soft); border-radius: var(--radius-card);
  overflow: hidden; box-shadow: var(--shadow-card); transition: transform .18s, box-shadow .18s;
  display: flex; flex-direction: column;
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
.post-card__media {
  display: block; height: 190px; background: linear-gradient(140deg, var(--color-accent), var(--color-warm));
  position: relative; overflow: hidden;
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__media svg {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(1.8); color: rgba(255,255,255,.85);
}
.post-card__body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.post-card__tag {
  align-self: flex-start; font: 600 12.5px var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-accent-deep); background: var(--color-accent-bg); padding: 6px 12px; border-radius: var(--radius-pill);
  margin-bottom: 12px;
}
.post-card__title { font: 700 19px/1.3 var(--font-body); color: var(--color-dark); margin: 0 0 10px; }
.post-card__title a { color: inherit; text-decoration: none; }
.post-card__title a:hover { color: var(--color-accent); }
.post-card__excerpt { font: 400 15px/1.6 var(--font-body); color: var(--color-text-muted); margin: 0; }
.post-card__excerpt p { margin: 0; }
.post-card__meta { display: block; font: 600 12.5px var(--font-body); color: #8A9791; margin-top: 14px; }
.post-card__link { margin-top: 16px; align-self: flex-start; }
.post-card--empty { padding: 44px; text-align: center; }
.post-card--empty .post-card__title { margin-bottom: 8px; }

@media (max-width: 1000px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .blog-grid { grid-template-columns: 1fr; } }

/* Pagination (blog listing) */
.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 48px; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
  padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--color-border-soft);
  font: 600 14px var(--font-body); color: var(--color-dark); text-decoration: none; background: #fff;
}
.pagination .page-numbers.current { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.pagination .page-numbers.dots { border: none; background: none; }
.pagination .page-numbers:hover:not(.current) { border-color: var(--color-accent); color: var(--color-accent); }

/* Single post meta under the dark hero title */
.post-meta--dark { font: 600 14px var(--font-body); color: var(--color-text-on-dark); margin: 14px 0 0; max-width: none; }

/* Full-width featured image band between hero and content */
.single-post__image { max-width: var(--container-narrow); margin: -40px auto 0; padding: 0 var(--gutter); position: relative; z-index: 1; }
.single-post__image img { width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: var(--shadow-card-lg); }

/* Prose typography for the_content() output — not styled anywhere else in
   the theme since every other template's copy is hand-marked-up. */
.entry-content { font: 400 17px/1.75 var(--font-body); color: var(--color-heading-alt); }
.entry-content > *:first-child { margin-top: 0; }
.entry-content p { margin: 0 0 22px; }
.entry-content h2 { font: 500 clamp(24px,3vw,32px)/1.25 var(--font-heading); color: var(--color-dark); margin: 44px 0 16px; }
.entry-content h3 { font: 600 21px/1.3 var(--font-body); color: var(--color-dark); margin: 34px 0 14px; }
.entry-content ul, .entry-content ol { margin: 0 0 22px; padding-left: 22px; }
.entry-content li { margin-bottom: 8px; }
.entry-content a { color: var(--color-accent-deep); text-decoration: underline; }
.entry-content img { border-radius: var(--radius-card); margin: 8px 0 22px; }
.entry-content blockquote {
  margin: 28px 0; padding: 20px 26px; border-left: 4px solid var(--color-warm);
  background: var(--color-accent-bg); border-radius: 0 14px 14px 0; font-style: italic; color: var(--color-heading-alt);
}
.entry-content blockquote p:last-child { margin-bottom: 0; }

.post-pages-nav { margin: 28px 0 0; font: 600 14px var(--font-body); }

/* Prev/next post nav */
.post-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; padding-top: 32px;
  border-top: 1px solid var(--color-border);
}
.post-nav__item--next { text-align: right; }
.post-nav__item a { display: block; text-decoration: none; }
.post-nav__label { display: block; font: 700 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 6px; }
.post-nav__title { display: block; font: 600 16px/1.4 var(--font-body); color: var(--color-dark); }
.post-nav__item a:hover .post-nav__title { color: var(--color-accent); }
@media (max-width: 620px) { .post-nav { grid-template-columns: 1fr; } .post-nav__item--next { text-align: left; } }