/* =========================================================================
   Butter Fish Services — design system
   Brand palette preserved from the original theme. Where the original colours
   failed WCAG AA as text (white on teal was 2.72:1, white on coral 3.76:1),
   darker "-ink" variants of the same hue are used for text and button fills;
   the original hues remain for large decorative areas.
   ========================================================================= */

/* ---- Brand fonts -------------------------------------------------------- */
@font-face {
  font-family: "Panton";
  src: url("/assets/themes/butterfish-theme/interface/fonts/panton/PantonRegular/font.woff2") format("woff2"),
       url("/assets/themes/butterfish-theme/interface/fonts/panton/PantonRegular/font.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Panton";
  src: url("/assets/themes/butterfish-theme/interface/fonts/panton/PantonBold/font.woff2") format("woff2"),
       url("/assets/themes/butterfish-theme/interface/fonts/panton/PantonBold/font.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Panton";
  src: url("/assets/themes/butterfish-theme/interface/fonts/panton/PantonExtraBold/font.woff2") format("woff2"),
       url("/assets/themes/butterfish-theme/interface/fonts/panton/PantonExtraBold/font.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---- Accessibility fonts ------------------------------------------------
   Only fetched when the reader turns the matching option on: the @font-face
   rules sit unused until a [data-font] value puts them in a font stack.
   OpenDyslexic — SIL Open Font License 1.1.
   Atkinson Hyperlegible — Braille Institute of America, OFL 1.1.            */
@font-face {
  font-family: "OpenDyslexic";
  src: url("/assets/site/fonts/opendyslexic-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "OpenDyslexic";
  src: url("/assets/site/fonts/opendyslexic-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/site/fonts/atkinson-hyperlegible-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/site/fonts/atkinson-hyperlegible-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --c-navy: #222d51;
  --c-navy-deep: #1c2543;
  --c-teal: #48aca7;
  --c-teal-ink: #2f6f6c;
  --c-sage: #abd3b6;
  --c-sky: #7cc7d7;
  --c-coral: #e15636;
  --c-coral-ink: #c43c1b;

  --c-ink: #1c2543;
  --c-body: #333a4f;
  --c-muted: #55607d;
  --c-bg: #ffffff;
  --c-bg-soft: #f5f7fa;
  --c-bg-tint: #eef4f4;
  --c-line: #d9dee8;

  --font-brand: "Panton", "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--font-brand);
  --font-head: var(--font-brand);

  --fs-scale: 1;
  --track: 0em;
  --word-space: 0em;
  --leading: 1.65;

  --w-page: 82rem;
  --w-prose: 44rem;
  --gap: clamp(1rem, 3vw, 2rem);
  --pad-section: clamp(2rem, 4vw, 3.5rem);
  --radius: 0.75rem;
  --radius-lg: 1.25rem;
  --shadow: 0 1px 2px rgb(28 37 67 / 8%), 0 8px 24px rgb(28 37 67 / 8%);
  --tap: 2.75rem; /* 44px minimum touch target */
  --ring: 3px;
}

/* Reader text-size control. Everything else is in rem, so scaling the root
   scales the whole page — including spacing — without breaking layout. */
html {
  font-size: calc(100% * var(--fs-scale));
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-body);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: var(--leading);
  letter-spacing: var(--track);
  word-spacing: var(--word-space);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* ---- Reader font options ------------------------------------------------ */
html[data-font="dyslexic"] {
  --font-body: "OpenDyslexic", "Comic Sans MS", var(--font-brand);
  --font-head: "OpenDyslexic", "Comic Sans MS", var(--font-brand);
  --leading: 1.9;
}
html[data-font="hyperlegible"] {
  --font-body: "Atkinson Hyperlegible", Verdana, var(--font-brand);
  --font-head: "Atkinson Hyperlegible", Verdana, var(--font-brand);
  --leading: 1.8;
}

/* ---- Reader spacing options (WCAG 1.4.12 Text Spacing) ------------------ */
html[data-spacing="wide"] {
  --track: 0.12em;
  --word-space: 0.16em;
  --leading: 2;
}

/* ---- Reader contrast options -------------------------------------------- */
html[data-contrast="high"] {
  --c-ink: #000000;
  --c-body: #000000;
  --c-muted: #1a1a1a;
  --c-bg: #ffffff;
  --c-bg-soft: #ffffff;
  --c-bg-tint: #ffffff;
  --c-line: #000000;
  --c-navy: #000000;
  --c-navy-deep: #000000;
  --c-teal-ink: #005f5a;
  --c-coral-ink: #9e2a0c;
}
html[data-contrast="high"] :is(.card, .panel, .faq, .area-card, .post-card, .newsletter-panel) {
  border: 2px solid #000;
}

html[data-contrast="invert"] {
  --c-ink: #ffffff;
  --c-body: #f2f2f2;
  --c-muted: #d8d8d8;
  --c-bg: #000000;
  --c-bg-soft: #0d0d0d;
  --c-bg-tint: #111111;
  --c-line: #ffffff;
  --c-navy: #000000;
  --c-navy-deep: #000000;
  --c-teal: #8fd6d2;
  --c-teal-ink: #8fd6d2;
  --c-sage: #b9e0c4;
  --c-sky: #9dd8e4;
  --c-coral: #ff9c7f;
  --c-coral-ink: #ff9c7f;
}
html[data-contrast="invert"] body { background: #000; }
html[data-contrast="invert"] :is(img, video) { filter: brightness(0.85); }
/* Inverted mode flips button fills, so their label must flip too. */
html[data-contrast="invert"] .btn-primary,
html[data-contrast="invert"] .btn-secondary,
html[data-contrast="invert"] .btn-primary:hover { color: #000; }

html[data-contrast="grayscale"] { filter: grayscale(1); }

/* Dimmed background for light sensitivity. */
html[data-contrast="soft"] {
  --c-bg: #fbf7ef;
  --c-bg-soft: #f4efe4;
  --c-bg-tint: #f0eadd;
}

html[data-underline="on"] :is(main, footer, header) a { text-decoration: underline; }

html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- Typography --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--c-ink);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5.5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--c-teal-ink);
  text-underline-offset: 0.18em;
  text-decoration-thickness: max(1px, 0.06em);
}
a:hover { color: var(--c-coral-ink); }

/* A visible, high-contrast focus ring everywhere. Never remove without
   replacing — keyboard and switch users navigate entirely by this. */
:focus-visible {
  outline: var(--ring) solid var(--c-coral-ink);
  outline-offset: 2px;
  border-radius: 2px;
}
html[data-contrast="invert"] :focus-visible { outline-color: #ffd400; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }
li { margin-bottom: 0.45em; }

strong, b { font-weight: 700; }

img { max-width: 100%; height: auto; }

hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--gap) 0; }

/* Visible only to screen readers. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -100%;
  z-index: 200;
  background: var(--c-navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 0; color: #fff; }

/* ---- Layout ------------------------------------------------------------- */
.wrap {
  width: min(100% - 2rem, var(--w-page));
  margin-inline: auto;
}
.section { padding-block: var(--pad-section); }
.section--soft { background: var(--c-bg-soft); }
.section--tint { background: var(--c-bg-tint); }
.section--navy {
  background: var(--c-navy);
  color: #fff;
}
.section--navy :is(h1, h2, h3, h4) { color: #fff; }
.section--navy a { color: var(--c-sage); }
.section--navy a:hover { color: #fff; }

.prose { max-width: var(--w-prose); }
/* Policy and form pages under Complaints & Feedback run the full page width.
   Capping their body at the prose measure left the content hugging the left
   edge of a much wider container. */
.page--wide .prose { max-width: none; }

.eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-teal-ink);
  margin-bottom: 0.75rem;
}
.section--navy .eyebrow { color: var(--c-sage); }

.lead {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--c-ink);
  font-weight: 700;
  line-height: 1.45;
}
.section--navy .lead { color: #fff; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--tap);
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
/* Resting state uses the darkened coral so white text clears 4.5:1 (5.24:1).
   Hover lifts to the true brand coral, which is the bright orange the palette
   is built around — but white on it is only 3.76:1, so the label flips to near
   black (5.59:1). The colour gets brighter; the text stays readable. */
.btn-primary { background: var(--c-coral-ink); color: #fff; }
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--c-coral);
  color: #1a1a1a;
}
.btn-secondary { background: var(--c-teal-ink); color: #fff; }
.btn-secondary:hover { background: var(--c-navy); color: #fff; }
/* The original site's subscribe button: navy fill, white label. --c-navy goes
   black in both high-contrast and inverted mode, so the white label holds. */
.btn-navy { background: var(--c-navy); color: #fff; }
.btn-navy:hover,
.btn-navy:focus-visible { background: var(--c-navy-deep); color: #fff; }
.btn-ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: currentColor;
}
.btn-ghost:hover { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }
.section--navy .btn-ghost { color: #fff; }
.section--navy .btn-ghost:hover { background: #fff; color: var(--c-navy); }
/* The hero is dark but is not a .section--navy, so the outline button's label
   inherited --c-ink — dark navy on a dark navy photo, 1.12:1 and effectively
   invisible. It gets a solid fill here instead: white on the hero is 13.4:1
   both for the label and for the button against the backdrop. */
.hero .btn-ghost {
  background: #fff;
  color: var(--c-navy);
  border-color: #fff;
}
.hero .btn-ghost:hover,
.hero .btn-ghost:focus-visible {
  background: var(--c-sage);
  color: var(--c-navy);
  border-color: var(--c-sage);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* ---- Header ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.header-top {
  background: var(--c-navy);
  color: #fff;
  font-size: 0.9rem;
}
.header-top .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.4rem;
}
.header-top a { color: #fff; }
/* Zero the margin explicitly. This is a <p>, so it inherits the global
   paragraph bottom margin, and flexbox centres the margin box — leaving the
   text sitting visibly above centre and padding out the bar's height. */
.header-tagline { margin: 0; font-weight: 700; }
.header-top-right {
  display: flex;
  align-items: center;
  gap: 0.25rem 0.75rem;
  flex-wrap: wrap;
}
/* On the navy bar the phone inherits the wrong ink colour from the light theme. */
.header-top .phone-link { color: #fff; font-size: 0.95rem; }
.header-top .phone-link:hover { color: var(--c-sage); }
.social-list {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
}
.social-list svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.social-list a:hover { background: rgb(255 255 255 / 15%); }

/* Staff Portal shortcut: the logo's fish mark alone, sitting after the phone
   number. The mark's own blues (down to #22418a) are within a hair of the navy
   bar behind it, so it rides on a white chip rather than being recoloured —
   that keeps the brand hues and gives the icon something to contrast against.
   The chip is at least --tap tall so it stays a comfortable target. */
.portal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: #fff;
  line-height: 0;
}
.portal-link .tailfin {
  width: auto;
  height: 1.05rem;
  display: block;
}
.portal-link:hover,
.portal-link:focus-visible { background: var(--c-sage); }

.header-main .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem var(--gap);
  padding-block: 0.6rem;
}

.site-logo { display: inline-flex; align-items: center; }
.site-logo img { width: clamp(9rem, 20vw, 12.5rem); height: auto; }

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Every top-level nav item shares one rule, links and the dropdown toggle
   alike, so the toggle cannot drift from its siblings. Scoped with `> li >`
   so the dropdown's own links are not caught by it. */
.nav-list > li > a,
.nav-list > li > .nav-submenu-toggle {
  display: block;
  width: auto;
  /* Natural height is already ~2.8rem; this only guarantees the 44px target
     if the type scale ever shrinks. */
  min-height: var(--tap);
  padding: 0.6rem 0.5rem;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-ink);
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.97rem;
  line-height: var(--leading);
  text-align: left;
  white-space: nowrap;
}
.nav-list > li > .nav-submenu-toggle { cursor: pointer; }
.nav-list > li > a:hover,
.nav-list > li > .nav-submenu-toggle:hover {
  background: var(--c-bg-soft);
  color: var(--c-teal-ink);
}
/* The section in view is still marked with aria-current in JS, so screen
   readers announce it, but it is deliberately not styled: the highlight sat on
   whichever item matched, which in practice meant Contact stayed lit the whole
   time the reader was near the foot of the page, and made one menu item look
   permanently different from its neighbours. Every item now looks the same.

   The open dropdown keeps the treatment — that is a state the reader just
   caused by clicking, not an ambient one. */
.nav-list > li > .nav-submenu-toggle[aria-expanded="true"] {
  color: var(--c-teal-ink);
  box-shadow: inset 0 -3px 0 var(--c-teal-ink);
}

/* The referral link is the header's call to action: same metrics as its
   siblings, filled so it reads as the one thing to do. The icon is decorative
   and inherits the label colour. */
.nav-list > li > .nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.75rem;
  background: var(--c-coral-ink);
  color: #fff;
}
.nav-list > li > .nav-cta:hover,
.nav-list > li > .nav-cta:focus-visible {
  background: var(--c-coral);
  color: #1a1a1a;
}
html[data-contrast="invert"] .nav-list > li > .nav-cta { color: #000; }
.nav-icon { width: 1.1rem; height: 1.1rem; fill: currentColor; flex: none; }

/* ---- Navigation dropdown (disclosure) ----------------------------------- */
.has-submenu { position: relative; }
/* Appearance comes from the shared top-level rule above; only the caret is
   specific to the toggle. It sits inline so the label keeps the same baseline
   as the plain links either side of it. */
.nav-caret {
  width: 1rem;
  height: 1rem;
  margin-left: 0.3rem;
  vertical-align: -0.15em;
  fill: currentColor;
  transition: transform 0.18s ease;
}
.nav-submenu-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-submenu {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 110;
  min-width: max(100%, 17rem);
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.nav-submenu[hidden] { display: none; }
.nav-submenu li { margin: 0; }
.nav-submenu a {
  display: block;
  padding: 0.6rem 0.7rem;
  min-height: var(--tap);
  border-radius: calc(var(--radius) - 0.25rem);
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--c-ink);
  text-decoration: none;
}
.nav-submenu a:hover { background: var(--c-bg-soft); color: var(--c-teal-ink); }

.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
}
.phone-link:hover { color: var(--c-coral-ink); }
.phone-link svg { width: 1.1rem; height: 1.1rem; fill: currentColor; flex: none; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--c-navy);
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-ink);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}
.nav-toggle svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }

@media (max-width: 75rem) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    width: 100%;
    order: 3;
  }
  .site-nav[data-open="true"] { display: block; padding-bottom: 0.75rem; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-list > li > a,
  .nav-list > li > .nav-submenu-toggle {
    width: 100%;
    padding: 0.85rem 0.5rem;
    border-bottom: 1px solid var(--c-line);
    border-radius: 0;
  }
  .header-main .wrap { flex-wrap: wrap; }
  .phone-link .phone-label { display: none; }

  /* In the stacked mobile menu the dropdown expands in flow, so it cannot
     overflow the viewport or cover the links beneath it. */
  /* Caret to the far right in the stacked menu, matching the toggle's full
     width there. */
  .nav-submenu-toggle .nav-caret { float: right; margin-top: 0.35em; }
  .nav-submenu {
    position: static;
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 0 0.75rem;
    background: var(--c-bg-soft);
  }
  .nav-submenu a { border-bottom: 1px solid var(--c-line); border-radius: 0; }
}

/* ---- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--c-navy);
  color: #fff;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Dark scrim so the hero text keeps its contrast over any photograph. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgb(28 37 67 / 94%) 0%, rgb(28 37 67 / 86%) 45%, rgb(28 37 67 / 62%) 100%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.75rem, 5.5vw, 4.5rem);
  max-width: 48rem;
}
.hero h1 { color: #fff; margin-bottom: 0.4em; }
.hero-lead {
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 1em;
}
.hero-body { color: #eef1f7; font-size: 1.08rem; }
.hero-kicker {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--c-sage);
}
/* ---- Cards & grids ------------------------------------------------------ */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.card {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.card h3 { margin-bottom: 0.35em; }
.card p:last-child { margin-bottom: 0; }

.value-card { border-top: 4px solid var(--c-teal); }
.value-card:nth-child(2) { border-top-color: var(--c-sage); }
.value-card:nth-child(3) { border-top-color: var(--c-sky); }
.value-card:nth-child(4) { border-top-color: var(--c-coral); }

.pullquote {
  margin: var(--gap) 0 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--c-navy);
  color: #fff;
  border-radius: var(--radius-lg);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  line-height: 1.35;
  text-align: center;
}

/* ---- Services ----------------------------------------------------------- */
.service {
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
}
.service + .service { margin-top: var(--gap); }
.service-head { border-left: 5px solid var(--c-teal); padding-left: 1rem; margin-bottom: 1.5rem; }
.service:nth-of-type(2) .service-head { border-left-color: var(--c-sage); }
.service-subtitle { color: var(--c-teal-ink); font-weight: 700; font-size: 1.05rem; }

.check-list { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.check-list li {
  position: relative;
  padding-left: 2rem;
  margin: 0;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--c-teal-ink);
  /* Tick drawn as a mask so it inherits the themed colour above. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E") center / 80% no-repeat,
          linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E") center / 80% no-repeat,
        linear-gradient(#000, #000);
  mask-composite: exclude;
}
@media (min-width: 45rem) { .check-list { grid-template-columns: 1fr 1fr; column-gap: var(--gap); } }

.cta-panel {
  margin-top: 1.75rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--c-bg-tint);
  border-radius: var(--radius);
}

/* ---- Image placeholders -------------------------------------------------
   Temporary slots marking where real photography belongs. Each names the shot
   it is waiting for and the size to supply, so the brief travels with the
   markup. Delete the placeholder call in the template once an image lands. */
.img-placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.6rem;
  margin: 0 0 var(--gap);
  padding: clamp(1rem, 3vw, 2rem);
  aspect-ratio: var(--ph-ratio, 16 / 9);
  max-width: 100%;
  text-align: center;
  color: var(--c-teal-ink);
  background: var(--c-bg-tint);
  border: 2px dashed var(--c-teal-ink);
  border-radius: var(--radius-lg);
}
.img-placeholder svg { width: clamp(1.75rem, 4vw, 2.5rem); height: auto; fill: currentColor; opacity: 0.8; }
.img-placeholder figcaption { display: grid; gap: 0.15rem; font-size: 0.92rem; line-height: 1.4; }
.img-placeholder .ph-title { font-family: var(--font-head); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.78rem; }
.img-placeholder .ph-label { font-weight: 700; color: var(--c-ink); }
.img-placeholder .ph-hint { color: var(--c-muted); font-size: 0.85rem; }
.section--navy .img-placeholder {
  color: var(--c-sage);
  background: rgb(255 255 255 / 6%);
  border-color: var(--c-sage);
}
.section--navy .img-placeholder .ph-label { color: #fff; }
.section--navy .img-placeholder .ph-hint { color: #d6dcea; }

/* A block of copy beside its supporting image. Stacks below 60rem, where two
   columns would squeeze the prose past a comfortable measure. The image column
   is capped so a tall portrait slot cannot outgrow the text it supports. */
.media-split {
  display: grid;
  gap: var(--gap);
  align-items: start;
  margin-bottom: var(--gap);
}
@media (min-width: 60rem) {
  .media-split { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
}
.media-split > .img-placeholder { margin: 0; }


/* Placeholder filling a post card's thumbnail slot. */
.post-thumb.img-placeholder { aspect-ratio: 16 / 9; margin: 0; border-radius: 0; border-width: 0 0 2px; }

/* ---- FAQ accordion ------------------------------------------------------ */
.faq-list { display: grid; gap: 0.75rem; }
.faq {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-q { margin: 0; }
.faq-trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: var(--tap);
  padding: 1rem 1.15rem;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--c-ink);
  cursor: pointer;
}
.faq-trigger:hover { background: var(--c-bg-soft); color: var(--c-teal-ink); }
.faq-icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15em; fill: currentColor; transition: transform 0.2s ease; }
.faq-trigger[aria-expanded="true"] .faq-icon { transform: rotate(180deg); }
.faq-panel { padding: 0 1.15rem 1.15rem; }
.faq-panel[hidden] { display: none; }

/* ---- Areas -------------------------------------------------------------- */
.area-card { display: flex; flex-direction: column; }
.area-card h3 { margin-bottom: 0.1em; }
.area-state {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-teal-ink);
}
.area-list {
  list-style: none;
  padding: 0;
  margin: 0.9rem 0 1.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.area-list li {
  margin: 0;
  padding: 0.25rem 0.65rem;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: 0.87rem;
}
.area-card .btn { margin-top: auto; align-self: flex-start; }
.hq-flag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--c-sage);
  color: var(--c-navy);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ---- Posts -------------------------------------------------------------- */
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.post-thumb {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  background: var(--c-bg-soft);
}
.post-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.post-card h3 { font-size: 1.15rem; }
.post-card h3 a { color: var(--c-ink); text-decoration: none; }
.post-card h3 a:hover { color: var(--c-teal-ink); text-decoration: underline; }
.post-date { font-size: 0.85rem; color: var(--c-muted); margin-bottom: 0.5rem; }
.post-excerpt { font-size: 0.97rem; margin-bottom: 1rem; }
.post-card .read-more { margin-top: auto; font-weight: 700; }

.notice {
  padding: 1rem 1.15rem;
  border-left: 5px solid var(--c-coral-ink);
  background: var(--c-bg-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: var(--gap);
}
.notice p { margin: 0; }

/* ---- Forms -------------------------------------------------------------- */
.form-grid { display: grid; gap: 1.1rem; }
@media (min-width: 45rem) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .field--full { grid-column: 1 / -1; }
}
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-family: var(--font-head); font-weight: 700; color: var(--c-ink); }
.field .hint { font-size: 0.87rem; color: var(--c-muted); }
.field :is(input, select, textarea) {
  min-height: var(--tap);
  padding: 0.65rem 0.8rem;
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-body);
  font: inherit;
  width: 100%;
}
.field :is(input, select, textarea):focus-visible { border-color: var(--c-teal-ink); }
.field textarea { min-height: 8rem; resize: vertical; }
.field [aria-invalid="true"] { border-color: var(--c-coral-ink); }
.field-error { color: var(--c-coral-ink); font-weight: 700; font-size: 0.9rem; }
.field-error:empty { display: none; }
.required-star { color: var(--c-coral-ink); }

/* Honeypot: off-screen rather than display:none, so bots that check
   computed styles still fill it. Hidden from AT and keyboard. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: 1rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  font-weight: 700;
}
.form-status:empty { display: none; padding: 0; }
.form-status[data-state="ok"] { background: var(--c-sage); color: var(--c-navy); }
.form-status[data-state="error"] { background: #fdeae5; color: var(--c-coral-ink); border: 1px solid var(--c-coral-ink); }
html[data-contrast="invert"] .form-status[data-state="error"] { background: #2a0e06; }

/* ---- Newsletter ---------------------------------------------------------
   Rebuilt to match the original site's "Subscribe for more" module: a rounded
   sky panel straddling a change of background tone, heading and blurb on the
   left, form on the right, with tall soft-filled inputs whose placeholder is
   the visible label.

   The panel has no vertical padding of its own so the gradient's midpoint
   lands on the panel's midpoint, exactly as the original did. The sections
   above (white) and below (soft) supply the breathing room, and the two
   gradient stops match them so the panel appears to straddle the seam. */
.section--newsletter {
  padding-block: 0;
  background: linear-gradient(180deg, var(--c-bg) 50%, var(--c-bg-soft) 50%);
}
.newsletter-panel {
  display: grid;
  gap: var(--gap);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background: var(--c-sky);
  border-radius: 1.875rem;
  /* Every colour on this panel is keyed to --c-navy rather than --c-ink:
     inverted mode turns --c-ink white while leaving --c-sky light, which would
     be unreadable. --c-navy goes black there instead. */
  color: var(--c-navy);
}
@media (min-width: 64rem) {
  .newsletter-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
}
.newsletter-intro h2 { color: var(--c-navy); margin-bottom: 0.35em; }
.newsletter-intro p { margin: 0; color: var(--c-navy); line-height: 1.4; }

.newsletter-form { display: grid; gap: 0.75rem; }
@media (min-width: 48rem) {
  /* Name, email and the button share a row; everything else spans the width,
     so the reading order down the panel still matches the DOM order. */
  .newsletter-form { grid-template-columns: 1fr 1fr auto; }
  .newsletter-form > :not(.field):not(.btn),
  .newsletter-form .field--consent { grid-column: 1 / -1; }
}
.newsletter-form .field :is(input, select, textarea) {
  min-height: 3.875rem;
  padding: 0.9rem 1rem;
  border: 0;
  border-radius: 0.625rem;
  background: var(--c-bg-soft);
  color: var(--c-ink);
}
.newsletter-form .field :is(input)::placeholder { color: var(--c-muted); opacity: 1; }
.newsletter-form .field label { color: var(--c-navy); }
.newsletter-form .btn { min-height: 3.875rem; align-self: start; }
.newsletter-note { margin: 0; font-size: 0.85rem; color: var(--c-navy); }
.newsletter-note a { color: var(--c-navy); text-decoration: underline; }

/* Consent checkbox: the whole label is the target, so it is comfortably
   clickable and correctly associated for screen readers. */
.consent-label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.45;
  cursor: pointer;
}
.consent-label input[type="checkbox"] {
  width: 1.4rem;
  height: 1.4rem;
  min-height: 0;
  margin: 0.1rem 0 0;
  accent-color: var(--c-teal-ink);
  flex: none;
}
/* On the sky panel the original used a white box with a navy tick. */
.newsletter-form .consent-label input[type="checkbox"] {
  accent-color: var(--c-navy);
  min-height: 0;
  padding: 0;
  border-radius: 0.25rem;
}
.field--consent .field-error { grid-column: 1 / -1; }

/* ---- Referral form ------------------------------------------------------
   The form is authored as ten stacked steps and works that way with no
   JavaScript at all. Only when `has-js` is set does it collapse to one step at
   a time — and `--fallback`, which the script sets if it fails to start, opens
   it straight back up rather than leaving a page of hidden fieldsets. */
.referral-form {
  display: grid;
  gap: var(--gap);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}
.referral-step {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0; /* a fieldset will not shrink below its content without this */
}
.referral-step-legend { padding: 0; margin-bottom: 0.75rem; }
.referral-step-count {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-teal-ink);
}
.referral-step-title {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  color: var(--c-ink);
}
.referral-step-intro { margin: 0 0 1rem; color: var(--c-muted); }
.referral-step + .referral-step { margin-top: var(--pad-section); }

html.has-js .referral-form:not(.referral-form--fallback) .referral-step:not([data-active]) { display: none; }
html.has-js .referral-form:not(.referral-form--fallback) .referral-step + .referral-step { margin-top: 0; }
html.has-js .referral-form:not(.referral-form--fallback) .field--conditional:not([data-shown]) { display: none; }

/* Progress. Rendered by script, so it stays empty and out of the accessibility
   tree when there is nothing to show. */
.referral-progress { display: none; }
.referral-progress:not(:empty) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.referral-progress li {
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--c-line);
}
.referral-progress li[data-state="done"] { background: var(--c-teal-ink); }
.referral-progress li[data-state="current"] { background: var(--c-coral-ink); }

.referral-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.referral-actions .btn[hidden] { display: none; }

/* A checkbox group is a fieldset, so it needs the field styling re-applied. */
.field--group { border: 0; padding: 0; margin: 0; min-width: 0; }
.field--group > legend {
  padding: 0;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--c-ink);
}
.checkbox-group { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
@media (min-width: 45rem) {
  .checkbox-group { grid-template-columns: 1fr 1fr; }
}
.checkbox-item { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; }
.checkbox-item input[type="checkbox"] {
  width: 1.4rem;
  height: 1.4rem;
  min-height: 0;
  margin: 0.1rem 0 0;
  accent-color: var(--c-teal-ink);
}
.checkbox-item label { font-family: var(--font-body); font-weight: 400; line-height: 1.4; }
.field-note {
  margin: 0.5rem 0 0;
  padding: 0.75rem 0.9rem;
  font-size: 0.87rem;
  color: var(--c-body);
  background: var(--c-bg-tint);
  border-radius: var(--radius);
}
/* In the referral form a field spans the row unless it is explicitly marked
   half — the opposite default to the contact form, because most referral
   questions are long. */
@media (min-width: 45rem) {
  .referral-form .form-grid > .field { grid-column: 1 / -1; }
  .referral-form .form-grid > .field--half { grid-column: auto; }
}

/* ---- Contact details ----------------------------------------------------
   Icon colour is themed through a local custom property. The label colour is
   deliberately NOT: it inherits from the container, so it is legible on any
   background. Enumerating dark containers here is what previously left the
   footer labels rendering at 1:1 against their own background. */
.contact-details {
  --contact-icon: var(--c-teal-ink);
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.1rem;
}
.section--navy .contact-details,
.site-footer .contact-details { --contact-icon: var(--c-sage); }

/* Two-column grid rather than flex: the icon column is a fixed track, so the
   label and value of every row share one left edge regardless of icon size or
   how many lines the value wraps to. */
.contact-details li {
  margin: 0;
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  column-gap: 0.75rem;
  align-items: start;
}
.contact-details svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: var(--contact-icon);
  /* Optically centres the icon against the label's cap height. */
  margin-top: 0.12em;
}
.contact-details dt, .contact-label {
  font-family: var(--font-head);
  font-weight: 800;
  color: inherit;
  display: block;
}

/* ---- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--c-navy-deep);
  color: #e7eaf1;
  padding-block: var(--pad-section) 2rem;
}
.site-footer :is(h2, h3, h4) { color: #fff; }
.site-footer a { color: var(--c-sage); }
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  align-items: start;
}
/* The first column is an <h2> for correct document structure; visually every
   footer column heading must match, or the columns start at different heights. */
.footer-grid > div > :is(h2, h3) {
  font-size: 1.15rem;
  margin-bottom: 0.9rem;
  line-height: 1.3;
}
.footer-nav { list-style: none; padding: 0; margin: 0; }
.footer-nav li { margin-bottom: 0.4rem; }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.acknowledgement {
  margin-top: var(--pad-section);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: rgb(255 255 255 / 6%);
  border-radius: var(--radius-lg);
  border-left: 5px solid var(--c-sage);
}
.acknowledgement h2 { font-size: 1.15rem; }
.acknowledgement p { margin: 0; color: #eef1f7; }
.footer-bottom {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 20%);
  font-size: 0.88rem;
  color: #c4cbdb;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
}
/* Same trap as the header tagline: only the last <p> is caught by the global
   p:last-child reset, so the first keeps a bottom margin and the two sit
   unevenly against each other. */
.footer-bottom p { margin: 0; }
/* The supplied NDIS asset is a white wordmark on transparency, so it needs a
   solid dark backing to be legible. Black is fixed, not themed: the artwork
   does not change with the reader's contrast setting, so its backing must not
   either, or the wordmark disappears in one of the themes. */
.ndis-logo {
  background: #000;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius);
  display: inline-block;
}
.ndis-logo img { width: 16rem; height: auto; display: block; }

/* ---- Accessibility toolbar ---------------------------------------------- */
.a11y-toggle {
  position: fixed;
  right: 0;
  top: 30vh;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--tap);
  padding: 0.6rem 0.9rem;
  border: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--c-navy);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.a11y-toggle svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.a11y-toggle:hover { background: var(--c-coral-ink); }

.a11y-panel {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 160;
  width: min(22rem, 100vw);
  overflow-y: auto;
  background: var(--c-bg);
  border-left: 1px solid var(--c-line);
  box-shadow: var(--shadow);
  padding: 1.25rem;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.a11y-close {
  min-height: var(--tap);
  min-width: var(--tap);
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-ink);
  font-size: 1.25rem;
  cursor: pointer;
}
.a11y-group { margin-top: 1.25rem; }
.a11y-group > h3 { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 0.5rem; }
.a11y-options { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.a11y-btn {
  min-height: var(--tap);
  padding: 0.5rem 0.85rem;
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
}
.a11y-btn:hover { border-color: var(--c-teal-ink); color: var(--c-teal-ink); }
/* Active state carries a tick as well as colour — never colour alone. */
.a11y-btn[aria-pressed="true"]::before { content: "\2713\00a0"; }
.a11y-btn[aria-pressed="true"] {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: #fff;
}
.a11y-size { display: flex; align-items: center; gap: 0.5rem; }
.a11y-size output { font-weight: 800; font-family: var(--font-head); min-width: 3.5rem; text-align: center; }
.a11y-reset { width: 100%; margin-top: 1.5rem; }

/* Reading guide: a horizontal rule that tracks the pointer, for readers who
   lose their place in long text. */
.reading-guide {
  position: fixed;
  left: 0;
  right: 0;
  height: 2.5rem;
  z-index: 140;
  pointer-events: none;
  border-top: 3px solid var(--c-coral-ink);
  border-bottom: 3px solid var(--c-coral-ink);
  background: rgb(225 86 54 / 8%);
}
.reading-guide[hidden] { display: none; }

/* ---- Print -------------------------------------------------------------- */
@media print {
  .site-header, .a11y-toggle, .a11y-panel, .reading-guide, .btn-row, form { display: none !important; }
  body { color: #000; font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
  .section { padding-block: 1rem; }
}