/* ==========================================================================
   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; }

/* flex-direction: column is load-bearing, not decoration. The button is
   display:flex at <=860px, and flex's default row direction laid the three
   bars out side by side inside a 46px box — they squashed to 10px each and
   rendered as one continuous dash. The hamburger looked like a single
   horizontal line on every phone. */
.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid rgba(20, 51, 45, .15);
  border-radius: 11px;
  width: 46px; height: 46px;
  cursor: pointer;
  flex-direction: column;
  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; }

/* "Apply for this role" — the link between a listing and the form. Styled as a
   quiet text action rather than a filled button so three stacked job cards don't
   read as three competing calls to action against the real submit button. */
.job-card__apply, .link-button {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px; padding: 0; border: none; background: none; cursor: pointer;
  font: 700 14.5px var(--font-body); color: var(--color-accent-deep);
  transition: gap .15s ease, color .15s ease;
}
.job-card__apply:hover, .link-button:hover { gap: 11px; color: var(--color-accent); }
.job-card__apply:focus-visible, .link-button:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px;
}
.link-button { margin-top: 0; font-size: inherit; font-weight: 700; vertical-align: baseline; }

/* Careers page: listings full width on top, then the collapsible application
   form, then what-happens-next. Job cards flow into as many columns as fit, so
   the layout holds whether there is one advertised role or eight. */
.job-list--grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px; align-items: start;
}
.careers-next .phone-callout { margin-top: 32px; max-width: 420px; }
.step-list--columns {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px;
}

/* Collapsible "Apply now" panel.
   The whole header is the control, so it needs to look like one: pointer, full
   width, and a chevron that turns. Rendered expanded and collapsed by JS, so the
   collapsed state keys off a class the script adds rather than being the CSS
   default — with no JS the form is simply open rather than sealed shut. */
/* The site header is sticky, so scrolling the panel to the top of the viewport
   tucks its own heading underneath it. scroll-margin-top reserves the header's
   height plus a little breathing room. */
.apply-panel { padding-top: 26px; padding-bottom: 26px; scroll-margin-top: 96px; }
.apply-panel__head { margin: 0; }
.apply-panel__toggle {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 0; border: none; background: none; cursor: pointer; text-align: left;
  font: 700 21px var(--font-body); color: var(--color-dark);
}
.apply-panel__toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 6px; border-radius: 6px; }
.apply-panel__title { flex: none; }
.apply-panel__state { flex: 1; font: 600 13.5px var(--font-body); color: var(--color-accent-deep); }
.apply-panel__chevron { flex: none; color: var(--color-accent-deep); transition: transform .2s ease; }
.apply-panel.is-collapsed .apply-panel__chevron { transform: rotate(-90deg); }
.apply-panel.is-collapsed .apply-panel__body { display: none; }
.apply-panel__body { margin-top: 24px; }
/* .form-panel gives every h2 an accent dot via ::after; the chevron is the
   affordance here, so suppress the second ornament. */
.form-panel h2.apply-panel__head::after { content: none; }

@media (max-width: 620px) {
  .apply-panel__toggle { flex-wrap: wrap; font-size: 19px; }
  .apply-panel__state { flex: 1 0 100%; order: 3; }
}

/* 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 { counter-reset: formsection; }
.form-panel h2,
.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 h2::after,
.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; }
/* Safety net: if CF7's wpautop is ever re-enabled (see synex_cf7_disable_autop()
   in functions.php) it wraps a .form-row's labels in one <p> joined by <br>,
   which would collapse the two columns into one. Collapsing the <p> and hiding
   the <br> keeps the labels as direct grid items either way. */
.form-row > p, .form-row--3 > p { display: contents; }
.form-row br, .form-row--3 br { display: none; }
.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; }
/* Both columns of a .form-row must start at the same baseline. Without this only
   the first child clears its margin-top, so the second column's label sits ~18px
   lower than the first. */
.form-row > .form-field, .form-row--3 > .form-field { 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;
}
/* Spans nested inside a field label — the required asterisk, CF7's own wrapper
   spans — must not inherit the block display above, or they break onto their
   own line under the label text. */
.form-field span span,
.form-field .form-required { display: inline; margin-bottom: 0; }
.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; }
/* Was #8A968F, which measured 2.90:1 against the page background — below the
   4.5:1 WCAG AA minimum for body text. --color-text-muted is the design system's
   existing secondary tone and clears 5.4:1; hints stay de-emphasised by size and
   weight rather than by unreadable contrast. */
.form-note { font: 400 13px/1.5 var(--font-body); color: var(--color-text-muted); 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; }

/* Referral branches. Visibility belongs entirely to Synex CF7 Builder, which
   ships `.synex-cf7-group { display: none }` and adds `.synex-cf7-group-visible`
   to whichever branch the rules select — so the theme must NOT set `display`
   here or it fights the plugin. Only the section counter lives with the theme. */
.refer-fieldset { counter-reset: formsection; }

/* Optional form sections, using native <details>.
   Native disclosure rather than scripted: keyboard operation, the expanded
   state and screen-reader announcement all come for free, and it still works
   with JavaScript unavailable. Nothing required may live inside one — a closed
   <details> still submits its fields, so a required field the visitor can't see
   would block submission with an error they can't reach. */
.form-optional { margin-top: 30px; border-top: 1px solid rgba(20,51,45,.1); padding-top: 22px; }
.form-optional > summary {
  cursor: pointer; list-style: none; margin: 0 0 4px; padding-top: 0; border-top: none;
}
.form-optional > summary::-webkit-details-marker { display: none; }
/* The counter badge from .form-section-title stays; this adds the affordance. */
.form-optional > summary::after {
  content: ""; width: 9px; height: 9px; margin-left: auto; flex: none;
  border-right: 2.2px solid var(--color-accent-deep); border-bottom: 2.2px solid var(--color-accent-deep);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease;
}
.form-optional[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.form-optional > summary:hover { color: var(--color-accent-deep); }
.form-optional > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 6px; }
.form-optional__badge {
  font: 600 11.5px var(--font-body); letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-accent-deep); background: var(--color-accent-bg);
  padding: 4px 9px; border-radius: var(--radius-pill); margin-left: 10px;
}
.form-optional[open] > summary { margin-bottom: 16px; }
.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; }

/* The 3-way referral toggle is now a real CF7 [radio] field rather than raw
   <input> markup, so CF7 wraps it in .wpcf7-form-control-wrap > .wpcf7-form-control
   > .wpcf7-list-item. Collapse those three wrappers with display:contents so the
   <label> cards remain direct grid items of .refer-type-toggle and every
   .refer-type-toggle label rule above keeps working unchanged.
   CF7 also runs wpautop over the form body, which adds a <p> around the field —
   that has to collapse too or it becomes the single grid item. */
.refer-type-toggle > p,
.refer-type-toggle .wpcf7-form-control-wrap,
.refer-type-toggle .wpcf7-form-control,
.refer-type-toggle .wpcf7-list-item { display: contents; }
.refer-type-toggle .wpcf7-not-valid-tip { grid-column: 1 / -1; }

/* Privacy / marketing consent checkboxes sit below the branches. Each is its own
   full-width row rather than a wrapped flex item, since the label text is a
   sentence and not a short option chip. */
.consent-block { margin-top: 26px; display: grid; gap: 12px; }
/* wpautop puts both consent labels inside one <p> separated by <br>, so the
   grid + gap goes on that <p>, not on .consent-block itself. */
.consent-block > p { display: contents; }
.consent-block br { display: none; }
.consent-block .checkbox-group { display: block; }
.consent-block .wpcf7-list-item { margin: 0; }
.consent-block .wpcf7-list-item label {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  font: 500 14px/1.5 var(--font-body); color: var(--color-heading-alt);
  background: var(--color-bg); border: 1.5px solid var(--color-border);
  border-radius: 12px; padding: 13px 16px;
  transition: border-color .15s ease, background-color .15s ease;
}
.consent-block .wpcf7-list-item label:hover { border-color: var(--color-accent-light); }
.consent-block .wpcf7-list-item label:has(input:checked) {
  border-color: var(--color-accent); background: var(--color-accent-bg);
}
.consent-block input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--color-accent); cursor: pointer;
  margin-top: 2px; flex: none;
}
.consent-block a { color: var(--color-accent-deep); text-decoration: underline; }

/* Cloudflare Turnstile widget — CF7 renders it as a block-level div. */
.wpcf7-form .cf7-turnstile, .wpcf7-form .cf-turnstile { margin: 22px 0 4px; }

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

/* ==========================================================================
   Back-to-top button (mobile only)

   Why it exists: at <=860px the header drops out of the sticky flow
   (.site-header { position: relative } in the nav breakpoint above), so once
   a visitor scrolls past the first screen there is no way back to the menu
   except swiping the whole page up. The pages are long enough for that to
   matter — Home is ~12,200px tall on a 390px-wide phone, Refer Someone
   ~10,100px, Gallery ~8,400px. That is 15-30 screens of scrolling.

   Deliberately hidden above 860px: on desktop the header IS sticky, so the
   nav is always one glance away and a floating button would be noise.
   ========================================================================== */
.to-top {
  position: fixed;
  right: 16px;
  /* env() keeps it clear of the iOS home indicator / Android gesture bar.
     The fallback in the first argument covers browsers without env(). */
  bottom: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 12px 26px -10px rgba(20, 51, 45, .6);
  /* visibility (not just opacity) so the button is out of the tab order and
     the accessibility tree until it is actually on screen. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s, background-color .15s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--color-accent-deep); }
.to-top:focus-visible { outline: 3px solid var(--color-warm); outline-offset: 3px; }
.to-top svg { display: block; }

@media (max-width: 860px) {
  .to-top { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}

/* ==========================================================================
   Touch target sizing (mobile)

   WCAG 2.2 AA 2.5.8 Target Size (Minimum) asks for 24x24 CSS px. Everything
   below cleared that on the spacing exception but was still fiddly to hit on
   a phone. Each rule below adds padding and removes the same amount from the
   surrounding margin/gap, so the text sits exactly where it did before and
   the section heights are unchanged — only the hit area grows.

   Checked and deliberately NOT changed: the form checkboxes and radios. The
   inputs themselves are 18px, but CF7 nests each one inside its own <label>
   chip (~45px tall, full width), and the label is the target. They pass.
   ========================================================================== */
@media (max-width: 860px) {
  /* Footer column links were 19px tall with an 11px gap. Now ~31px tall with
     no gap — same pitch, same footer height, 60% more to aim at. */
  .footer-col-list { gap: 0; }
  .footer-col-list a,
  .footer-col-list button { display: block; padding: 6px 0; }
  .footer-address { display: block; padding: 6px 0; }

  /* Copyright bar links: 16px -> 28px. */
  .footer-bottom a { display: inline-block; padding: 6px 0; }

  /* "Apply for this role" is a text-styled button with no padding at all —
     19px tall. margin-top drops from 14px to 2px and 12px comes back as
     padding, so the label does not move but the hit area is 43px.

     .link-button ("Send a general application") is left alone on purpose: it
     is inline-flex inside a sentence, so vertical padding would push that one
     line taller than its neighbours. It also falls under 2.5.8's exception
     for a target inside a block of text. */
  .job-card__apply { margin-top: 2px; padding: 12px 0; }
}