/* ==========================================================================
   Hope Harbour: components
   Hairline-led, editorial. Shadows are used sparingly and only to lift
   something off the page (drawers, panels, the a11y dialog).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons: min 48px tall so every one clears the 44px touch minimum
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--c-action-solid);
  --btn-fg: #fff;
  --btn-bd: var(--c-action-solid);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.85em 1.7em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  font-family: var(--hh-font-body);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-soft),
              border-color var(--dur) var(--ease-soft),
              color var(--dur) var(--ease-soft),
              box-shadow var(--dur) var(--ease-soft);
}
.btn:hover { background: var(--c-action-solid-hover); border-color: var(--c-action-solid-hover); color: #fff; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }

/* Sheen sweep on hover: pure transform, GPU only */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 700ms var(--ease-out);
}
.btn:hover::after { transform: translateX(110%); }

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--hh-navy);
  --btn-bd: var(--hh-navy);
}
.btn--secondary:hover {
  background: var(--c-chip);
  border-color: var(--c-chip);
  color: var(--c-on-chip);
}

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--c-action-text);
  --btn-bd: var(--c-action-solid);
}
.btn--outline:hover {
  background: var(--c-action-solid);
  border-color: var(--c-action-solid);
  color: #fff;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--hh-navy);
  --btn-bd: var(--c-rule);
}
.btn--ghost:hover {
  background: var(--hh-cream-dim);
  border-color: var(--hh-navy);
  color: var(--hh-navy);
}

.btn--on-navy {
  --btn-bg: var(--c-on-band);
  --btn-fg: var(--c-band);
  --btn-bd: var(--c-on-band);
}
.btn--on-navy:hover {
  background: var(--c-on-band);
  border-color: var(--c-on-band);
  color: var(--c-band);
  filter: brightness(1.08);
}

.btn--on-navy-outline {
  --btn-bg: transparent;
  --btn-fg: var(--c-on-band);
  --btn-bd: rgba(251,249,246,.4);
}
.btn--on-navy-outline:hover {
  background: rgba(251,249,246,.1);
  border-color: var(--c-on-band);
  color: var(--c-on-band);
}

.btn--lg { min-height: 56px; padding: 1em 2.2em; font-size: var(--t-body); }
.btn--sm { min-height: 44px; padding: 0.6em 1.2em; font-size: 0.875rem; }
.btn--block { width: 100%; }

.btn[aria-disabled="true"], .btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}
.btn .btn__icon { flex: none; width: 1.15em; height: 1.15em; }

/* Busy state for form submits */
.btn[data-busy="true"] { pointer-events: none; }
.btn[data-busy="true"] .btn__label { opacity: .55; }
.btn__spinner { display: none; width: 1.1em; height: 1.1em; flex: none; }
.btn[data-busy="true"] .btn__spinner { display: block; animation: hh-spin 800ms linear infinite; }
@keyframes hh-spin { to { transform: rotate(360deg); } }

/* Text link with arrow: the workhorse inline CTA */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--c-action-text);
  text-decoration: none;
  min-height: 44px;
  letter-spacing: 0.01em;
}
.link-arrow > span {
  border-bottom: 1px solid color-mix(in srgb, var(--c-action-text) 35%, transparent);
  padding-bottom: 2px;
  transition: border-color var(--dur) var(--ease-soft);
}
.link-arrow svg {
  flex: none; width: 16px; height: 16px;
  transition: transform var(--dur) var(--ease-out);
}
.link-arrow:hover { color: var(--hh-orange-hover); }
.link-arrow:hover > span { border-color: currentColor; }
.link-arrow:hover svg { transform: translateX(4px); }
.band-navy .link-arrow { color: var(--hh-gold); }
.band-navy .link-arrow:hover { color: #F7C36F; }

/* --------------------------------------------------------------------------
   Pills / chips / badges
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 0.95em;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-pill);
  background: var(--hh-cream);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--c-text-soft);
  line-height: 1.4;
}
.pill--gold { background: var(--hh-gold-wash); border-color: #EBD9AE; color: var(--hh-gold-text); }
.pill--sky { background: var(--hh-sky-wash); border-color: #CFDDEA; color: #2C4F6E; }
.pill--orange { background: var(--hh-orange-wash); border-color: #F2D4C6; color: var(--hh-orange-text); }
.pill--navy { background: var(--c-chip); border-color: var(--c-chip); color: var(--c-on-chip); }
.pill svg { width: 14px; height: 14px; flex: none; }
.band-navy .pill {
  background: rgba(251,249,246,.08);
  border-color: var(--c-band-rule);
  color: var(--c-on-band-soft);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--hh-cream) 88%, transparent);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease-soft),
              border-color var(--dur) var(--ease-soft),
              box-shadow var(--dur) var(--ease-soft);
}
@supports (backdrop-filter: blur(12px)) {
  .site-header { backdrop-filter: blur(14px) saturate(1.4); }
}
.site-header[data-stuck="true"] {
  background: color-mix(in srgb, var(--hh-cream) 95%, transparent);
  border-bottom-color: var(--c-rule);
  box-shadow: var(--shadow-1);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.2rem + 1.6vw, 2rem);
  min-height: var(--header-h);
}

/* -- Logo ---------------------------------------------------------------
   The header shows the mark plus the "Hope Harbour" wordmark only. The
   "NDIS support - Melbourne" tagline is dropped here (it stays in the footer
   and on the drawer) so the name can be set much larger in the same space.
   The component writes the wordmark size as an inline style, hence the
   !important overrides. */
.logo-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  text-decoration: none;
  flex: none;
  border-radius: var(--radius);
}
.logo-link hh-logo { pointer-events: none; }

/* Tagline off in the header only */
/* The "NDIS support - Melbourne" tagline the component draws under the
   wordmark is not used anywhere on this site. Hiding it per-location meant
   every new lockup instance reintroduced it: the mobile drawer shipped with it
   visible because its selector was never added here. So it is hidden once, for
   every <hh-logo variant="lockup">, and cannot come back by omission. */
hh-logo .hh-tag { display: none; }
.site-header .logo-link hh-logo .hh-words { gap: 0; }
.site-header .logo-link hh-logo { gap: 0.5em; }

/* Desktop */
.site-header .logo-link hh-logo svg { width: 74px; height: 74px; }
.site-header .logo-link hh-logo .hh-name {
  font-size: 36px !important;
  font-weight: 600;
  letter-spacing: -0.005em;
}

@media (max-width: 1119px) {
  .site-header .logo-link hh-logo svg { width: 58px; height: 58px; }
  .site-header .logo-link hh-logo .hh-name { font-size: 28px !important; }
}
@media (max-width: 640px) {
  .site-header .logo-link hh-logo svg { width: 48px; height: 48px; }
  .site-header .logo-link hh-logo .hh-name { font-size: 24px !important; }
}
@media (max-width: 400px) {
  .site-header .logo-link hh-logo svg { width: 42px; height: 42px; }
  .site-header .logo-link hh-logo .hh-name { font-size: 21px !important; }
}

/* The brand guide asks for the breeze to be left running on the header logo
   permanently, so the leaves sway on a loop rather than only on hover.
   hh-sway lives in the component's own injected stylesheet.

   :not([data-play]) for the same reason as the hero spray below: at (0,4,1)
   this rule outranks the component's (0,2,1) unfurl, so without the guard the
   permanent sway silently replaced the intro's leaf animation and the header
   logo never unfurled on first load either. */
@media (prefers-reduced-motion: no-preference) {
  .site-header .logo-link hh-logo[data-hover="breeze"]:not([data-play]) .hh-leaf__in {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: hh-sway 2.6s ease-in-out infinite;
    animation-delay: calc(var(--i) * 34ms);
  }
}
html[data-hh-motion="reduce"] .site-header .logo-link hh-logo .hh-leaf__in { animation: none !important; }

/* -- Desktop nav, sitting immediately right of the logo behind a divider - */
.nav-primary { display: none; }
@media (min-width: 1120px) {
  .nav-primary {
    display: block;
    padding-left: clamp(1rem, 0.2rem + 1.6vw, 2rem);
    border-left: 1px solid var(--c-rule);
    align-self: stretch;
    display: flex;
    align-items: center;
  }
  .nav-list {
    display: flex; align-items: center;
    gap: clamp(0.25rem, -0.75rem + 1.6vw, 1rem);
    list-style: none; margin: 0; padding: 0; max-width: none;
  }
  .nav-list > li { margin: 0; position: relative; }
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  padding: 0 0.7rem;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--hh-navy);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  border-radius: var(--radius);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.7rem; right: 0.7rem; bottom: 8px;
  height: 2px;
  background: var(--c-action-solid);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.nav-link:hover { color: var(--hh-navy); }
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }
.nav-link[aria-current="page"]::after { transform: scaleX(1); background: var(--hh-navy); }
.nav-link .chev { width: 11px; height: 11px; transition: transform var(--dur) var(--ease-soft); opacity: .55; }
.nav-item--has-menu:hover .chev, .nav-item--has-menu:focus-within .chev { transform: rotate(180deg); }

/* Dropdown */
.nav-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: min(660px, 70vw);
  background: var(--hh-cream);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: var(--s-4);
  list-style: none;
  margin: 0;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease-soft),
              transform var(--dur-slow) var(--ease-out),
              visibility var(--dur);
}
.nav-item--has-menu:hover .nav-menu,
.nav-item--has-menu:focus-within .nav-menu,
.nav-menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-menu > li { margin: 0; }
.nav-menu__link {
  display: block;
  padding: var(--s-3);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--hh-navy);
  transition: background-color var(--dur) var(--ease-soft);
}
.nav-menu__link:hover { background: var(--hh-cream-dim); color: var(--hh-navy); }
.nav-menu__link strong { display: block; font-size: var(--t-small); font-weight: 600; margin-bottom: 3px; font-family: var(--hh-font-body); }
.nav-menu__link span { display: block; font-size: 0.8125rem; color: var(--c-text-mute); line-height: 1.45; }

/* -- Right-hand actions ------------------------------------------------- */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  margin-left: auto;
}

/* "Accessibility" as a plain underlined link, the way government and large
   disability services present it. Opens the toolbar. */
.header-a11y {
  display: none;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  padding: 0 0.6rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--hh-font-body);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--hh-navy);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  white-space: nowrap;
  border-radius: var(--radius);
}
.header-a11y:hover { color: var(--c-action-text); }
.header-a11y svg { width: 19px; height: 19px; flex: none; }
@media (min-width: 860px) { .header-a11y { display: inline-flex; } }

.header-cta {
  display: none;
  white-space: nowrap;
}
.header-cta svg { width: 17px; height: 17px; flex: none; }
@media (min-width: 620px) { .header-cta--phone { display: inline-flex; } }
@media (min-width: 1120px) { .header-cta--refer { display: inline-flex; } }

/* Below 620px the phone becomes an icon-only button, still 48px square. */
.header-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  flex: none;
  background: var(--c-action-solid);
  color: #fff;
  border: 1px solid var(--c-action-solid);
  border-radius: 50%;
  transition: background-color var(--dur) var(--ease-soft);
}
.header-call:hover { background: var(--c-action-solid-hover); color: #fff; }
.header-call svg { width: 19px; height: 19px; }
@media (min-width: 620px) { .header-call { display: none; } }

/* Burger */
.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  flex: none;
  background: transparent;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--hh-navy);
  transition: background-color var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft);
}
.burger:hover { background: var(--hh-cream-dim); border-color: var(--hh-navy); }
@media (min-width: 1120px) { .burger { display: none; } }

/* --------------------------------------------------------------------------
   The header at enlarged text sizes

   Every threshold above is in px while the header's contents are in rem, so
   the Accessibility panel's text-size control grows the nav and the two pills
   without giving them any more room. Measured at 1440px with the setting at
   150%: .header-actions runs to x=1694, and because html carries
   overflow-x: clip those pills are not something you can scroll to, they are
   cut off. The phone number and the referral button just vanish. WCAG 2.2
   SC 1.4.4 asks for 200% text with no loss of content.

   Media queries cannot be made to follow the setting: `em` inside a media
   query resolves against the initial 16px, not the scaled root font. So the
   collapse thresholds are restated per setting, and the header falls back to
   the burger earlier, exactly as it does on a narrow screen. Nothing is lost:
   the drawer carries the full nav plus both calls to action.
   -------------------------------------------------------------------------- */
/* Measured right edge of .header-actions against the viewport, per setting:

     125%   1440 fits (collapsed)   1600 -> 1614  OVER
            1680 -> 1664 fits       1920 -> 1811 fits
     150%   1600 fits (collapsed)   1760 -> 1890  OVER
            1920 -> 1989  OVER      and it only grows

   So 125% needs the burger up to about 1680, above which the row fits on its
   own. 150% never fits at any width, so it collapses unconditionally, with no
   media query to leave a gap. (The default size is fine everywhere: 1611 at
   1920, comfortably inside the viewport.) */
@media (max-width: 1680px) {
  html[data-hh-textsize="125"] .nav-primary { display: none; }
  html[data-hh-textsize="125"] .header-cta--refer { display: none; }
  html[data-hh-textsize="125"] .burger { display: inline-flex; }
}
html[data-hh-textsize="150"] .nav-primary { display: none; }
html[data-hh-textsize="150"] .header-cta--refer { display: none; }
html[data-hh-textsize="150"] .burger { display: inline-flex; }

/* At 320px with the text size at 150% even the collapsed header runs 8px
   past the edge: .header-actions measured L224 R328. The gap is in rem so it
   grows with the setting while the viewport does not. Tightening it is enough,
   and the burger stays at 48px so it keeps clearing the 44px touch minimum. */
/* At 320px the collapsed header is logo + call + burger = 224 + 48 + 8 + 48 =
   328, eight past the edge. The two buttons are a fixed 48px and --s-2 is a
   fixed 8px, so the part that grows with the text setting is the logo: the
   component's own `gap: 0.62em` between mark and wordmark resolves against the
   scaled root font. Tightening that gap and the wordmark reclaims the room.
   The buttons stay 48px so they keep clearing the 44px touch minimum. */
@media (max-width: 380px) {
  html[data-hh-textsize="125"] .header-actions,
  html[data-hh-textsize="150"] .header-actions { gap: var(--s-1); }

  html[data-hh-textsize="150"] .site-header .logo-link hh-logo { gap: 0.28em; }
  html[data-hh-textsize="150"] .site-header .logo-link hh-logo .hh-name {
    font-size: 17px !important;
  }
}
.burger__box { position: relative; width: 20px; height: 14px; }
.burger__bar {
  position: absolute; left: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-soft);
}
.burger__bar:nth-child(1) { top: 0; }
.burger__bar:nth-child(2) { top: 6.25px; }
.burger__bar:nth-child(3) { bottom: 0; }
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */
.scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(16, 26, 47, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-soft), visibility var(--dur-slow);
}
@supports (backdrop-filter: blur(3px)) {
  .scrim { backdrop-filter: blur(3px); }
}
.scrim[data-open="true"] { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: var(--z-drawer);
  width: min(420px, 90vw);
  background: var(--hh-cream);
  border-left: 1px solid var(--c-rule);
  box-shadow: var(--shadow-4);
  transform: translateX(101%);
  transition: transform var(--dur-slow) var(--ease-out);
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}
.drawer[data-open="true"] { transform: translateX(0); }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  min-height: var(--header-h);
  border-bottom: 1px solid var(--c-rule);
  flex: none;
}
.drawer__body {
  padding: var(--s-4) var(--s-4) var(--s-7);
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.drawer__foot {
  padding: var(--s-4);
  border-top: 1px solid var(--c-rule);
  background: var(--hh-cream-dim);
  flex: none;
  display: grid;
  gap: var(--s-2);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  flex: none;
  background: transparent;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-pill);
  color: var(--hh-navy);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft);
}
.icon-btn:hover { background: var(--hh-cream-dim); border-color: var(--hh-navy); }
.icon-btn svg { width: 20px; height: 20px; }

.drawer-nav { list-style: none; margin: 0; padding: 0; max-width: none; }
.drawer-nav > li { margin: 0; border-bottom: 1px solid var(--c-rule); }
.drawer-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 56px;
  padding: var(--s-3) 0;
  font-family: var(--hh-font-display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--hh-navy);
  text-decoration: none;
}
.drawer-nav a:hover { color: var(--hh-orange-text); }
.drawer-nav a[aria-current="page"] { color: var(--hh-orange-text); }
.drawer-nav a[aria-current="page"]::after { content: "•"; color: var(--hh-orange); }
.drawer-nav--sub { padding-left: var(--s-3); border-left: 1px solid var(--c-rule); margin-bottom: var(--s-3); }
.drawer-nav--sub > li { border-bottom: 0; }
.drawer-nav--sub a {
  min-height: 48px;
  font-family: var(--hh-font-body);
  font-size: var(--t-small);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 1.5rem + 6vw, 6.5rem) clamp(3.5rem, 2rem + 6vw, 7rem);
}
.hero__grid { display: grid; gap: clamp(2.5rem, 1rem + 5vw, 5rem); align-items: center; }
@media (min-width: 880px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.hero__body { position: relative; z-index: 2; }
.hero h1 { margin-bottom: var(--s-4); }
.hero .lede { margin-bottom: var(--s-6); max-width: 48ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-6); }

/* Two elements, deliberately:
   .framed: unclipped. Carries the offset accent rule.
   .framed__inner: clipped. Carries the aspect ratio and the image reveal.
   Collapsing these into one breaks the offset rule, because the overflow
   needed to clip the image also clips the rule. */
.framed { position: relative; isolation: isolate; }
.framed__inner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--hh-paper);
}
.framed__inner > img,
.framed__inner > picture > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.framed--offset::before {
  content: "";
  position: absolute;
  inset: 0;
  translate: 16px 16px;
  border: 1px solid var(--hh-sky);
  border-radius: var(--radius-lg);
  z-index: -1;
  pointer-events: none;
}
.framed--gold::before { border-color: var(--hh-gold); }
.framed--navy::before { border-color: var(--hh-navy); }
.framed--orange::before { border-color: var(--hh-orange); }
@media (max-width: 620px) {
  .framed--offset::before { translate: 10px 10px; }
}

.ar-3-2  { aspect-ratio: 3 / 2; }
.ar-4-3  { aspect-ratio: 4 / 3; }
.ar-1-1  { aspect-ratio: 1 / 1; }
.ar-4-5  { aspect-ratio: 4 / 5; }
.ar-2-3  { aspect-ratio: 2 / 3; }
.ar-16-9 { aspect-ratio: 16 / 9; }
.ar-21-9 { aspect-ratio: 21 / 9; }
@media (max-width: 620px) {
  .ar-2-3, .ar-4-5 { aspect-ratio: 4 / 5; }
  .ar-21-9 { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   Hero spray
   The hero carries no photograph: the logo mark is the artwork. It sits large
   and low-contrast to the right of the headline, bleeding a little past the
   edge of the section so the branches read as fanning out beyond the page
   rather than sitting in a box. The whole mark is used, vase included, since
   at this scale the vase anchors the plant instead of reading as a blob.

   Two things keep the headline readable, and both matter:
     opacity      drops the whole mark back so it never competes with text
     mask-image   fades it to nothing before it reaches the text column, so
                  running text is always read against flat paper

   .hero clips, so the bleed can never become a horizontal scrollbar.

   It grows in on load and then breezes on a loop, so the brand animation is
   the first movement on the page. Decorative throughout: aria-hidden in the
   markup, inert to the pointer here, and no tabindex because the component is
   built with click="none". The interactive logo lives in the header, where it
   is a sensible size for a target.
   -------------------------------------------------------------------------- */

/* Holds the text off the artwork, so the two never fight for the same column. */
.hero__body { max-width: 36rem; }

.hero__spray {
  position: absolute;
  z-index: 0;
  top: 46%;
  right: -5vw;
  translate: 0 -50%;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  opacity: 0.5;
  /* Angled slightly off vertical so the fade follows the spread of the
     branches rather than cutting straight down through them. */
  --spray-fade: linear-gradient(96deg,
      transparent 2%,
      rgba(0, 0, 0, 0.12) 20%,
      rgba(0, 0, 0, 0.46) 40%,
      rgba(0, 0, 0, 0.82) 62%,
      #000 80%);
  -webkit-mask-image: var(--spray-fade);
          mask-image: var(--spray-fade);
}
.hero__spray hh-logo {
  display: block;
  /* A second, independent fade. The vase is the densest part of the mark and
     it sits at the bottom, where the horizontal fade above leaves it fully
     opaque: unmasked it reads as a solid grey block the plant is standing on,
     not as part of the artwork. Fading the foot lets the plant emerge from the
     page instead.

     The two masks live on different elements on purpose. Stacking both on one
     element would need mask-composite: intersect, whose default is add, so any
     browser that ignored the property would union the gradients and show the
     artwork at full strength. Nesting intersects them with no such cliff. */
  --spray-foot: linear-gradient(to bottom,
      #000 44%,
      rgba(0, 0, 0, 0.58) 72%,
      rgba(0, 0, 0, 0.14) 91%,
      transparent 100%);
  -webkit-mask-image: var(--spray-foot);
          mask-image: var(--spray-foot);
}
.hero__spray hh-logo svg { width: min(58vw, 700px); height: auto; }

/* The leaves breathe so the mark reads as alive without anyone touching it,
   and stand aside while the component plays its own intro.

   The selector carries :not([data-play]) rather than pairing the loop with a
   second rule setting `animation: none` during playback. That override was
   `.hero__spray hh-logo[data-play] .hh-leaf`, specificity (0,3,1), which
   outranks the component's own unfurl rule `hh-logo[data-play="grow"]
   .hh-leaf` at (0,2,1) in assets/logo/hope-harbour-logo.js. So it did not hand
   the intro back: it cancelled the leaf unfurl outright, and the mark grew in
   with its stems drawing while every leaf was already in place. There is no
   @layer in this stylesheet, so injection order could not rescue the
   component's rule either. Not matching at all during playback is what
   actually yields. */
@media (prefers-reduced-motion: no-preference) {
  .hero__spray hh-logo:not([data-play]) .hh-leaf__in {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: hh-sway 4.2s ease-in-out infinite;
    animation-delay: calc(var(--i) * 44ms);
  }
}
html[data-hh-motion="reduce"] .hero__spray hh-logo .hh-leaf__in { animation: none !important; }

@media (min-width: 1400px) {
  .hero__spray hh-logo svg { width: min(54vw, 780px); }
}

/* Below the two-column threshold the text needs the full measure, so the
   artwork retreats: fainter, pushed further off the edge, and anchored to the
   bottom so it sits under the buttons rather than behind the headline. */
@media (max-width: 1039px) {
  .hero__body { max-width: 34rem; }
  .hero__spray { right: -10vw; opacity: 0.34; }
  .hero__spray hh-logo svg { width: min(64vw, 520px); }
}
/* --------------------------------------------------------------------------
   Text size versus the artwork

   The text column is measured in rem (.hero__body max-width) and the artwork
   in vw. Those scale independently, so the Accessibility panel's text-size
   control grows the text column TOWARD the artwork instead of pushing the
   artwork out of the way. Measured at 1040px wide, the lede's right edge moves
   from 613px at 100% to 905px at 150% while the artwork stays at 489px: 417px
   of running text ends up on stems, leaves and the vase.

   So the artwork yields. Someone who has turned the text up has told us
   legibility is what they want, and this is decoration:

     112%  pushed further off the edge, smaller and fainter. Keeps the ink
           under any text at or below what it already is at 100%.
     125%  gone. Past this point there is no position that keeps a mark this
           size both clear of the text and large enough to be worth drawing.
     150%  gone.

   Same reasoning as the contrast theme in css/a11y.css, which hides it too.
   -------------------------------------------------------------------------- */
html[data-hh-textsize="112"] .hero__spray {
  right: -16vw;
  opacity: 0.3;
}
html[data-hh-textsize="112"] .hero__spray hh-logo svg { width: min(44vw, 500px); }

html[data-hh-textsize="125"] .hero__spray,
html[data-hh-textsize="150"] .hero__spray { display: none; }

/* On a phone there is no column to spare: the text runs the full measure, so
   any artwork is behind running text rather than beside it. It therefore drops
   to a watermark, pushed far enough right that only the outer leaves reach the
   text column, and faint enough there that body copy stays comfortably the
   darkest thing on the page. */
@media (max-width: 767px) {
  .hero__body { max-width: none; }
  .hero__spray {
    top: auto;
    bottom: -10%;
    right: -32vw;
    translate: none;
    opacity: 0.17;
    /* Anchored bottom-right now, so the fade runs up and to the left. It
       clears most of the width before the artwork gains any weight. */
    --spray-fade: linear-gradient(58deg,
        transparent 14%,
        rgba(0, 0, 0, 0.1) 38%,
        rgba(0, 0, 0, 0.5) 66%,
        #000 88%);
  }
  .hero__spray hh-logo svg { width: min(104vw, 460px); }
}

/* --------------------------------------------------------------------------
   Trust strip beneath the hero
   Four proof points. On a phone they stack, at tablet they pair up, and on
   desktop they sit in four columns separated by hairlines, which is the same
   structural device the rest of the page uses.
   -------------------------------------------------------------------------- */
.trust-band { padding-block: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }

.trust-strip {
  display: grid;
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
@media (min-width: 600px) {
  .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); }
}
@media (min-width: 1040px) {
  /* gap: 0 with padding on each item, so the dividers land exactly on the
     quarter boundaries and every item has the same space around it. A gap
     plus a negative margin gets the dividers right but the rhythm wrong. */
  .trust-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  /* Left-aligned, not centred: with four equal columns the left edges land on
     an even rhythm, which the eye reads as regular. Centring makes the ragged
     right edges of the labels fight each other instead. */
  .trust-strip > li { padding-inline: var(--s-4); }
  .trust-strip > li:first-child { padding-left: 0; }
  .trust-strip > li:last-child { padding-right: 0; }
  .trust-strip > li + li { border-left: 1px solid var(--c-rule); }
}

.trust-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-3);
  margin: 0;
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-heading);
  text-wrap: balance;
}
.trust-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--hh-gold-wash);
  border: 1px solid #EBD9AE;
  color: var(--hh-gold-text);
}
.trust-item__icon svg { width: 22px; height: 22px; }
.trust-item__icon--sky { background: var(--hh-sky-wash); border-color: #CFDDEA; color: #2C4F6E; }
.trust-item__icon--orange { background: var(--hh-orange-wash); border-color: #F2D4C6; color: var(--c-action-text); }

/* Page hero (interior pages) */
.page-hero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  position: relative;
  overflow: hidden;
}
.page-hero h1 { margin-bottom: var(--s-4); }
.page-hero__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
@media (min-width: 880px) { .page-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }

/* Breadcrumbs */
.crumbs { padding-block: var(--s-3); }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5em; list-style: none; margin: 0; padding: 0; max-width: none;
  font-size: 0.8125rem; color: var(--c-text-mute);
}
.crumbs li { margin: 0; display: flex; align-items: center; gap: 0.5em; }
.crumbs li + li::before { content: "/"; color: var(--c-rule); }
.crumbs a { color: var(--c-text-soft); text-decoration: none; }
.crumbs a:hover { color: var(--c-action-text); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--hh-navy); font-weight: 500; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--hh-cream);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out),
              border-color var(--dur) var(--ease-soft),
              box-shadow var(--dur-slow) var(--ease-soft);
}
.card__media { position: relative; overflow: hidden; background: var(--hh-paper); flex: none; }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.card__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; gap: var(--s-3); }
.card__body > * { margin-bottom: 0; }
.card__body h3, .card__body h4 { margin-bottom: 0; }
.card__body p { color: var(--c-text-soft); font-size: var(--t-small); line-height: 1.65; }
.card__foot { margin-top: auto; padding-top: var(--s-2); }

/* Whole card clickable via a stretched pseudo-element on the title link */
.card--link { position: relative; }
.card--link .card__title-link { text-decoration: none; color: inherit; }
.card--link .card__title-link::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
}
.card--link:hover { transform: translateY(-4px); border-color: var(--hh-navy-80); box-shadow: var(--shadow-2); }
.card--link:hover .card__media img { transform: scale(1.045); }
.card--link:hover .link-arrow svg { transform: translateX(4px); }
.card--link:focus-within { border-color: var(--hh-navy); }
.card--link:focus-within .card__title-link::after { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.card--link .card__foot { position: relative; z-index: 2; pointer-events: none; }

.card--flat { background: transparent; border: 0; border-radius: 0; }
.card--flat .card__body { padding: 0; }
.card--paper { background: var(--hh-paper); }
.card--navy { background: var(--c-band); border-color: var(--c-band); color: var(--c-on-band-soft); }
.card--navy h3, .card--navy h4 { color: var(--c-on-band); }
.card--navy p { color: var(--c-on-band-soft); }

/* Ruled list-card: no box, just a top hairline. Used for feature rows. */
.ruled {
  border-top: 1px solid var(--c-rule);
  padding-top: var(--s-4);
}
.ruled h4 { margin-bottom: var(--s-2); }
.ruled p { font-size: var(--t-small); color: var(--c-text-soft); margin-bottom: 0; }
.band-navy .ruled { border-color: var(--c-band-rule); }

/* Single open role, presented as a panel rather than one lonely card in a grid */
.role-card { max-width: 74ch; }
.role-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-rule);
}
.role-card .lede { max-width: none; }

/* Icon feature */
.feature { display: grid; gap: var(--s-3); }
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--radius-pill);
  background: var(--hh-gold-wash);
  color: var(--hh-gold-text);
  border: 1px solid #EBD9AE;
  flex: none;
}
.feature__icon svg { width: 24px; height: 24px; }
.feature__icon--sky { background: var(--hh-sky-wash); border-color: #CFDDEA; color: #2C4F6E; }
.feature__icon--orange { background: var(--hh-orange-wash); border-color: #F2D4C6; color: var(--hh-orange-text); }
.feature h4 { margin-bottom: 0; }
.feature p { font-size: var(--t-small); color: var(--c-text-soft); margin-bottom: 0; }
.band-navy .feature__icon {
  background: rgba(240,168,58,.14);
  border-color: rgba(240,168,58,.32);
  color: var(--hh-gold);
}

/* --------------------------------------------------------------------------
   Numbered process steps
   -------------------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 0; list-style: none; padding: 0; margin: 0; max-width: none; }
/* minmax(0, 1fr), not 1fr. A 1fr track's automatic minimum is min-content, so
   the text column refuses to shrink below its longest line and the whole grid
   blows out wider than the column it sits in. Measured on a service page at
   390px with the Accessibility text size at 150%: the track resolved to 408px
   inside a 330px column, pushing the .panel and every heading and paragraph in
   it to x=438, past the 390px viewport. Since html is overflow-x: clip that is
   lost content, not a scroll. minmax(0, 1fr) lets the column shrink and the
   text wrap instead. */
.steps > li {
  counter-increment: step;
  display: grid;
  gap: var(--s-2) var(--s-5);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  padding-block: var(--s-5);
  border-top: 1px solid var(--c-rule);
  margin: 0;
}
.steps > li:last-child { border-bottom: 1px solid var(--c-rule); }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--hh-font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--hh-gold-text);
  font-variant-numeric: tabular-nums;
  grid-row: span 2;
  min-width: 2.2ch;
}
.steps h4 { margin: 0; align-self: center; }
.steps p { margin: 0; font-size: var(--t-small); color: var(--c-text-soft); grid-column: 2; }
.band-navy .steps > li { border-color: var(--c-band-rule); }
.band-navy .steps > li::before { color: var(--hh-gold); }
.band-navy .steps p { color: var(--c-on-band-soft); }

/* On a phone the counter and its gutter were eating 76px of a ~330px column
   at the larger text sizes, which left about seven characters a line. Both
   shrink so the prose keeps a usable measure. */
@media (max-width: 620px) {
  .steps > li { gap: var(--s-2) var(--s-4); }
  .steps > li::before {
    font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
    min-width: 1.9ch;
  }
}

/* --------------------------------------------------------------------------
   Tables that will not fit

   A table does not shrink below the min-content of its cells, so a two-column
   table cannot fit a narrow phone once the text size is turned up. Measured on
   a service page at 390px with the Accessibility setting at 150%: the funding
   table's floor is 335px, which with the surrounding panel's 36px of padding
   each side forced a 408px block through a 330px column. Because html carries
   overflow-x: clip that content does not become scrollable, it is simply cut
   off the side of the screen.

   Each table therefore gets its own scroll container. The role="region" and
   tabindex="0" in the markup are not decoration: a bare overflow-x: auto div
   cannot be scrolled by keyboard, which fails WCAG 2.2 SC 2.1.1. The table's
   existing visually-hidden caption supplies the accessible name.
   -------------------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.table-scroll:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.table-scroll > table { width: 100%; border-collapse: collapse; }

/* --------------------------------------------------------------------------
   Checklist
   -------------------------------------------------------------------------- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); max-width: var(--measure); }

/* The tick is positioned, not a grid or flex item. A grid <li> would turn
   `<strong>Label.</strong> Sentence.` into TWO items, pushing the sentence
   into the 22px icon column one word per line. Absolute positioning keeps the
   whole item as one normal run of text. */
.checklist > li {
  position: relative;
  padding-left: 38px;
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--c-text-soft);
}
.checklist > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px; height: 22px;
  background: var(--hh-gold-wash);
  border: 1px solid #EBD9AE;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A5B10' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 13px;
  background-repeat: no-repeat;
  background-position: center;
}
.checklist--2 { max-width: none; }
@media (min-width: 700px) { .checklist--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3) var(--s-6); } }
.band-navy .checklist > li { color: var(--c-on-band-soft); }
.band-navy .checklist > li::before {
  background-color: rgba(240,168,58,.16);
  border-color: rgba(240,168,58,.34);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0A83A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Accordion / FAQ: animated with grid-template-rows so there is no JS
   height measuring and no layout thrash.
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--c-rule); }
.acc-item { border-bottom: 1px solid var(--c-rule); }
.acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  min-height: 64px;
  padding: var(--s-4) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--hh-font-display);
  font-size: var(--t-h5);
  font-weight: 600;
  color: var(--hh-navy);
  line-height: 1.35;
  transition: color var(--dur) var(--ease-soft);
}
.acc-trigger:hover { color: var(--hh-orange-text); }
.acc-trigger:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.acc-icon {
  flex: none;
  width: 32px; height: 32px;
  border: 1px solid var(--c-rule);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  transition: background-color var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft);
}
.acc-icon::before, .acc-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-soft);
}
.acc-icon::before { width: 12px; height: 1.5px; }
.acc-icon::after  { width: 1.5px; height: 12px; }
.acc-trigger:hover .acc-icon { border-color: var(--hh-orange); background: var(--hh-orange-wash); }
.acc-trigger[aria-expanded="true"] .acc-icon::after { transform: scaleY(0); opacity: 0; }
.acc-trigger[aria-expanded="true"] .acc-icon { transform: rotate(180deg); }
.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.acc-panel[data-open="true"] { grid-template-rows: 1fr; }
.acc-panel__inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-soft);
}
.acc-panel[data-open="true"] .acc-panel__inner { opacity: 1; transition-delay: 90ms; }
.acc-panel__inner > div { padding-bottom: var(--s-5); padding-right: var(--s-6); }
.acc-panel__inner p { font-size: var(--t-small); color: var(--c-text-soft); }
.acc-panel__inner > div > *:last-child { margin-bottom: 0; }
@supports not (grid-template-rows: 1fr) {
  .acc-panel { display: block; height: 0; overflow: hidden; }
  .acc-panel[data-open="true"] { height: auto; }
  .acc-panel__inner { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.quote { position: relative; }
.quote__mark {
  font-family: var(--hh-font-display);
  font-size: 5rem;
  line-height: .7;
  color: var(--hh-gold);
  display: block;
  margin-bottom: var(--s-2);
  user-select: none;
}
.quote__text {
  font-family: var(--hh-font-display);
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 2rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--hh-navy);
  letter-spacing: -0.008em;
  margin-bottom: var(--s-5);
  max-width: 34ch;
}
.band-navy .quote__text { color: var(--c-on-band); }
.quote__by { display: flex; align-items: center; gap: var(--s-3); }
.quote__avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 1px solid var(--c-rule);
}
.quote__name { font-weight: 600; font-size: var(--t-small); color: var(--hh-navy); display: block; line-height: 1.35; }
.band-navy .quote__name { color: var(--c-on-band); }
.quote__role { font-size: 0.8125rem; color: var(--c-text-mute); display: block; }
.band-navy .quote__role { color: var(--c-on-band-mute); }

/* Horizontal scroll rail: scroll-snap, no JS carousel */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(360px, 82vw);
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-bottom: var(--s-4);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-track { background: var(--hh-paper); border-radius: 3px; }
.rail::-webkit-scrollbar-thumb { background: var(--hh-sky); border-radius: 3px; }
@media (min-width: 1000px) {
  .rail {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    gap: var(--s-6);
  }
}
.rail-hint {
  font-size: 0.8125rem;
  color: var(--c-text-mute);
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--s-2);
}
@media (min-width: 1000px) { .rail-hint { display: none; } }

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */
.stats { display: grid; gap: var(--s-5); }
@media (min-width: 560px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat { border-top: 1px solid var(--c-rule); padding-top: var(--s-4); }
.band-navy .stat { border-color: var(--c-band-rule); }
.stat__num {
  font-family: var(--hh-font-display);
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.75rem);
  font-weight: 300;
  line-height: 1;
  color: var(--hh-navy);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: var(--s-2);
  letter-spacing: -0.02em;
}
.band-navy .stat__num { color: var(--hh-gold); }
.stat__label { font-size: var(--t-small); color: var(--c-text-soft); line-height: 1.5; display: block; }
.band-navy .stat__label { color: var(--c-on-band-soft); }

/* --------------------------------------------------------------------------
   Panels / callouts
   -------------------------------------------------------------------------- */
.panel {
  background: var(--hh-paper);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.panel--gold { background: var(--hh-gold-wash); border-color: #EBD9AE; }
.panel--sky { background: var(--hh-sky-wash); border-color: #CFDDEA; }
.panel--orange { background: var(--hh-orange-wash); border-color: #F2D4C6; }
.panel--navy { background: var(--c-band); border-color: var(--c-band); color: var(--c-on-band-soft); }
.panel--navy h2, .panel--navy h3, .panel--navy h4 { color: var(--c-on-band); }
.panel--cream { background: var(--hh-cream); }
.panel > *:last-child { margin-bottom: 0; }

.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3) var(--s-4);
  padding: var(--s-4);
  border-radius: var(--radius-lg);
  background: var(--hh-sky-wash);
  border: 1px solid #CFDDEA;
  font-size: var(--t-small);
  line-height: 1.6;
}
.callout svg { width: 22px; height: 22px; color: #2C4F6E; flex: none; margin-top: 1px; }
.callout > div > *:last-child { margin-bottom: 0; }
.callout p { font-size: var(--t-small); }
.callout--gold { background: var(--hh-gold-wash); border-color: #EBD9AE; }
.callout--gold svg { color: var(--hh-gold-text); }

/* Aside nav (service page sidebar) */
.aside-card {
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--hh-cream);
}
.aside-card__head {
  padding: var(--s-4);
  background: var(--hh-paper);
  border-bottom: 1px solid var(--c-rule);
}
.aside-card__head h2, .aside-card__head h3 { font-size: var(--t-h5); margin: 0; }
.aside-card__body { padding: var(--s-4); }
.aside-card__body > *:last-child { margin-bottom: 0; }
.aside-links { list-style: none; margin: 0; padding: 0; max-width: none; }
.aside-links > li { margin: 0; border-bottom: 1px solid var(--c-rule); }
.aside-links > li:last-child { border-bottom: 0; }
.aside-links a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 48px; padding: var(--s-2) var(--s-4);
  font-size: var(--t-small); font-weight: 500;
  color: var(--hh-navy); text-decoration: none;
  transition: background-color var(--dur) var(--ease-soft), padding-left var(--dur) var(--ease-out);
}
.aside-links a:hover { background: var(--hh-cream-dim); padding-left: calc(var(--s-4) + 4px); color: var(--hh-orange-text); }
.aside-links a[aria-current="page"] { background: var(--hh-gold-wash); color: var(--hh-gold-text); font-weight: 600; }
.aside-links svg { width: 15px; height: 15px; opacity: .5; flex: none; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s-5); }
.fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-4);
}
.fieldset > legend {
  font-family: var(--hh-font-display);
  font-size: var(--t-h4);
  font-weight: 500;
  color: var(--hh-navy);
  padding: 0;
  margin-bottom: var(--s-2);
  float: left;   /* lets legend behave as a block for grid gap purposes */
  width: 100%;
}
.fieldset > legend + * { clear: both; }
.fieldset__note {
  font-size: var(--t-small);
  color: var(--c-text-mute);
  margin: 0;
  max-width: var(--measure);
}
.field-row { display: grid; gap: var(--s-4); }
@media (min-width: 620px) {
  .field-row--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .field-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.field { display: grid; gap: 6px; }
.field > label, .field-label {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--hh-navy);
  line-height: 1.4;
}
.req { color: var(--c-error); margin-left: 2px; font-weight: 600; }
.opt { color: var(--c-text-mute); font-weight: 400; font-size: 0.8125rem; margin-left: 4px; }
.hint {
  font-size: 0.8125rem;
  color: var(--c-text-mute);
  line-height: 1.5;
  margin: 0;
  max-width: var(--measure);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="number"],
.field input[type="url"],
.field select,
.field textarea {
  width: 100%;
  /* A form control's min-content size comes from its own contents, not from
     width: 100%: an <input> reports its size attribute (about 20 characters)
     and a <select> reports its widest <option>. Measured on /referral at 360px
     with the Accessibility text size at 150%: the select carrying
     "NDIA-managed (agency managed)" reported a 406px floor and the text inputs
     303px, against a 300px column. That floor propagates up through the
     fieldset and the form, so the section heading and lede beside them were
     dragged off-screen too. min-width: 0 lets the control shrink to the space
     it has; the native control handles its own text from there. */
  min-width: 0;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  font-family: var(--hh-font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--c-text);
  background: #fff;
  border: 1px solid #CFCAC0;
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft);
  appearance: none;
}
.field textarea { min-height: 132px; resize: vertical; padding-top: 0.75rem; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355524D' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 17px;
  padding-right: 2.5rem;
  cursor: pointer;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--hh-ink-mute); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--hh-navy);
  box-shadow: 0 0 0 3px rgba(22, 35, 63, .16);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 1px;
}
.field input::placeholder, .field textarea::placeholder { color: #A39D93; opacity: 1; }

/* Invalid: never colour alone; an icon and a message always accompany it */
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea {
  border-color: var(--c-error);
  border-width: 2px;
  background: var(--c-error-wash);
}
.field-error {
  display: none;
  align-items: flex-start;
  gap: 0.45em;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #8E1F23;
  line-height: 1.45;
}
.field[data-invalid="true"] .field-error { display: flex; }
.field-error svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

/* Choice inputs */
.choices { display: grid; gap: var(--s-2); }
@media (min-width: 620px) { .choices--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  border: 1px solid #CFCAC0;
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  font-size: var(--t-small);
  line-height: 1.5;
  transition: border-color var(--dur) var(--ease-soft), background-color var(--dur) var(--ease-soft);
}
.choice:hover { border-color: var(--hh-navy-80); background: var(--hh-cream); }
.choice input { width: 21px; height: 21px; margin: 1px 0 0; accent-color: var(--hh-orange); cursor: pointer; flex: none; }
.choice:has(input:checked) { border-color: var(--hh-orange); background: var(--hh-orange-wash); }
.choice:has(input:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.choice__label { font-weight: 500; color: var(--hh-navy); display: block; }
.choice__desc { font-size: 0.8125rem; color: var(--c-text-mute); display: block; margin-top: 2px; }

/* --------------------------------------------------------------------------
   File upload
   The real <input type="file"> is stretched transparently over the zone, so
   the pointer target, the keyboard behaviour and the screen reader semantics
   are all the browser's own. The visible cue underneath is decorative.
   -------------------------------------------------------------------------- */
.upload {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 12px 16px;
  border: 1.5px dashed #C8C2B7;
  border-radius: var(--radius-lg);
  background: var(--hh-cream-dim);
  transition: border-color var(--dur) var(--ease-soft),
              background-color var(--dur) var(--ease-soft);
}
.upload:hover { border-color: var(--hh-navy-80); background: var(--hh-cream); }
.upload[data-drag="true"] {
  border-color: var(--c-action-solid);
  border-style: solid;
  background: var(--hh-orange-wash);
}
/* The focus ring belongs on the zone, because the input itself is invisible. */
.upload:focus-within {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  border-color: var(--hh-navy);
  border-style: solid;
}

.upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload__cue {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  pointer-events: none;
  min-width: 0;
}
.upload__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--hh-orange-wash);
  border: 1px solid #F2D4C6;
  color: var(--c-action-text);
}
/* Belt and braces: the attribute sets it, this pins it. */
.upload__icon svg { width: 17px; height: 17px; }

.upload__text {
  display: block;
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--c-text-soft);
  min-width: 0;
}
.upload__text strong { color: var(--hh-navy); font-weight: 600; }
.upload__text small {
  display: block;
  font-size: 0.75rem;
  color: var(--c-text-mute);
  margin-top: 1px;
}

.upload__list {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
  max-width: none;
}
.upload__list:empty { margin: 0; }
.upload__list > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--s-3);
  align-items: center;
  margin: 0;
  padding: 10px 10px 10px 14px;
  background: var(--hh-cream);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  font-size: var(--t-small);
}
.upload__name {
  font-weight: 500;
  color: var(--hh-navy);
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.upload__size {
  font-size: 0.8125rem;
  color: var(--c-text-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.upload__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  margin: -6px -4px -6px 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--c-text-soft);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft);
}
.upload__remove:hover { background: var(--c-error-wash); color: #8E1F23; }
.upload__remove:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -2px; }
.upload__remove svg { width: 17px; height: 17px; }
/* Where FileList cannot be rebuilt, removing one file is impossible, so the
   control is hidden rather than left doing nothing. */
.upload[data-no-remove="true"] ~ .upload__list .upload__remove { display: none; }

.field[data-invalid="true"] .upload {
  border-color: var(--c-error);
  border-style: solid;
  background: var(--c-error-wash);
}

/* Checkbox group error: the fieldset carries data-invalid, not a .field */
fieldset[data-invalid="true"] .choice { border-color: var(--c-error); }
fieldset[data-invalid="true"] > .field-error { display: flex; }

/* Honeypot: off-screen, not display:none (bots read the computed style) */
.hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   Form status region
   This is a live region, so it must be in the accessibility tree from page
   load. display:none would remove it, and a screen reader does not reliably
   announce content injected into an element that becomes visible in the same
   task. So the empty state is collapsed to zero height instead of hidden.
   -------------------------------------------------------------------------- */
.form-status {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  margin: 0;
}
.form-status[data-state="error"], .form-status[data-state="success"] {
  display: grid;
  height: auto;
  overflow: visible;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--radius-lg);
  border: 1px solid;
  font-size: var(--t-small);
  line-height: 1.6;
}
.form-status:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.form-status[data-state="error"] { background: var(--c-error-wash); border-color: #E3B4B6; color: #7A1B1F; }
.form-status[data-state="success"] { background: var(--c-success-wash); border-color: #B6D5C5; color: #14523A; }
.form-status svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.form-status strong { display: block; margin-bottom: 3px; color: inherit; }
.form-status a { color: inherit; font-weight: 600; }
.form-status ul { margin: var(--s-2) 0 0; padding-left: 1.2em; }
.form-status li { font-size: 0.8125rem; }

/* Progress across a long form */
.form-progress {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.8125rem;
  color: var(--c-text-mute);
  margin-bottom: var(--s-2);
}
.form-progress__track {
  flex: 1;
  height: 4px;
  background: var(--hh-rule);
  border-radius: 2px;
  overflow: hidden;
  max-width: 240px;
}
.form-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--hh-orange);
  border-radius: 2px;
  transition: width var(--dur-slow) var(--ease-out);
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band__inner { position: relative; z-index: 1; }
.cta-band .cluster { margin-top: var(--s-6); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--c-band-deep); color: var(--c-on-band-soft); }

/* Footer logo: mark plus wordmark only, set larger. Same treatment as the
   header, so the two read as the same lockup at two sizes. */
.site-footer hh-logo .hh-words { gap: 0; }
.site-footer hh-logo { gap: 0.5em; }
.site-footer hh-logo svg { width: 66px; height: 66px; }
.site-footer hh-logo .hh-name { font-size: 32px !important; font-weight: 600; }
@media (max-width: 699px) {
  .site-footer hh-logo svg { width: 54px; height: 54px; }
  .site-footer hh-logo .hh-name { font-size: 27px !important; }
}

/* NDIS Registered Provider badge. A text badge until the official mark from
   the Commission's provider portal is dropped in (see the comment in the
   footer markup). .ndis-mark styles that official image when it arrives. */
.ndis-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
  padding: 12px 20px 12px 16px;
  border: 1px solid var(--c-band-rule);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--c-on-band) 7%, transparent);
  max-width: max-content;
}
.ndis-badge svg { width: 30px; height: 30px; color: var(--hh-gold); flex: none; }
.ndis-badge span {
  display: block;
  font-family: var(--hh-font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--c-on-band-soft);
}
.ndis-badge strong {
  display: block;
  color: var(--c-on-band);
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* The official Registered NDIS Provider mark.
   The supplied artwork is the full-colour version on transparency: its purple
   wordmark would be unreadable on the navy footer, so it sits on a white plate
   with clear space around it, which is also what the NDIA brand guidelines
   ask for. Aspect ratio 898:244 is declared so it never causes layout shift.
   If you later swap in the reverse (white) version, drop the background,
   the padding and the border-radius. */
.ndis-mark {
  display: block;
  margin-top: var(--s-5);
  width: min(100%, 244px);
  aspect-ratio: 898 / 244;
  height: auto;
  background: #fff;
  padding: 11px 15px;
  border-radius: var(--radius-lg);
  box-sizing: content-box;
}

.footer-line {
  margin-top: var(--s-5);
  max-width: 32ch;
  font-family: var(--hh-font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--c-on-band);
}
.site-footer h2, .site-footer h3, .site-footer h4 { color: var(--c-on-band); }
.footer-top { padding-block: var(--s-8) var(--s-7); }
.footer-grid { display: grid; gap: var(--s-6); }
@media (min-width: 700px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-6); } }

.footer-col h4 {
  font-family: var(--hh-font-body);
  font-size: var(--t-kicker);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-on-band-mute);
  margin-bottom: var(--s-4);
}
.footer-links { list-style: none; margin: 0; padding: 0; max-width: none; }
.footer-links > li { margin: 0; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-small);
  color: var(--c-on-band-soft);
  text-decoration: none;
  transition: color var(--dur) var(--ease-soft), transform var(--dur) var(--ease-out);
}
.footer-links a:hover { color: var(--hh-gold); transform: translateX(3px); }

.footer-contact { display: grid; gap: var(--s-3); }
.footer-contact a, .footer-contact div {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  min-height: 44px;
  padding-block: 6px;
  font-size: var(--t-small);
  color: var(--c-on-band-soft);
  text-decoration: none;
  line-height: 1.5;
}
.footer-contact a:hover { color: var(--hh-gold); }
.footer-contact svg { width: 17px; height: 17px; color: var(--hh-gold); flex: none; margin-top: 3px; }

.footer-bottom {
  border-top: 1px solid var(--c-band-rule);
  padding-block: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--c-on-band-mute);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); align-items: center; margin-inline: -8px; }
.footer-bottom a {
  color: var(--c-on-band-mute);
  text-decoration: none;
  min-height: 44px;
  padding-inline: 8px;
  display: inline-flex;
  align-items: center;
}
.footer-bottom a:hover { color: var(--hh-gold); text-decoration: underline; }

.ack {
  border-top: 1px solid var(--c-band-rule);
  padding-block: var(--s-5);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--c-on-band-mute);
  max-width: 78ch;
}

.socials { display: flex; gap: var(--s-2); }
.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--c-band-rule);
  border-radius: 50%;
  color: var(--c-on-band-soft);
  transition: background-color var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft);
}
.socials a:hover { background: var(--hh-gold); border-color: var(--hh-gold); color: #16233F; }
.socials svg { width: 19px; height: 19px; }

/* --------------------------------------------------------------------------
   Back to top
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: var(--z-sticky);
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hh-cream);
  color: var(--hh-navy);
  border: 1px solid var(--c-rule);
  border-radius: 50%;
  box-shadow: var(--shadow-2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease-soft), transform var(--dur-slow) var(--ease-out), visibility var(--dur), background-color var(--dur) var(--ease-soft);
}
.to-top[data-show="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--c-chip); color: var(--c-on-chip); border-color: var(--c-chip); }
.to-top svg { width: 19px; height: 19px; }

/* --------------------------------------------------------------------------
   Accessibility launcher + panel
   -------------------------------------------------------------------------- */
.a11y-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--z-a11y);
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 52px;
  padding: 0 1.1rem 0 0.85rem;
  background: var(--c-chip);
  color: var(--c-on-chip);
  border: 1px solid var(--c-chip);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-3);
  cursor: pointer;
  font-family: var(--hh-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-soft);
}
.a11y-launcher:hover { background: var(--c-chip-hover); transform: translateY(-2px); }
.a11y-launcher:focus-visible { outline: 3px solid var(--hh-gold); outline-offset: 3px; }
.a11y-launcher svg { width: 24px; height: 24px; flex: none; }
.a11y-launcher__text { display: none; }
@media (min-width: 480px) { .a11y-launcher__text { display: inline; } }
@media (max-width: 479px) { .a11y-launcher { padding: 0; width: 52px; justify-content: center; } }

.a11y-panel {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: var(--z-a11y);
  width: min(390px, calc(100vw - 40px));
  max-height: min(76vh, 680px);
  background: var(--hh-cream);
  border: 1px solid var(--c-rule);
  border-radius: 12px;
  box-shadow: var(--shadow-4);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.97);
  transform-origin: bottom right;
  transition: opacity var(--dur) var(--ease-soft),
              transform var(--dur-slow) var(--ease-out),
              visibility var(--dur-slow);
}
.a11y-panel[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.a11y-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--c-rule);
  flex: none;
}
.a11y-panel__head h2 { font-size: var(--t-h5); margin: 0; }
.a11y-panel__body { padding: var(--s-4); overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.a11y-panel__foot {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-rule);
  background: var(--hh-cream-dim);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.a11y-group + .a11y-group { margin-top: var(--s-5); }
.a11y-group__title {
  font-size: var(--t-kicker);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  margin: 0 0 var(--s-3);
}

/* Segmented control (text size) */
.seg { display: flex; border: 1px solid var(--c-rule); border-radius: var(--radius-pill); overflow: hidden; background: #fff; }
.seg button {
  flex: 1;
  min-height: 46px;
  padding: 0 0.35rem;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--c-rule);
  cursor: pointer;
  font-family: var(--hh-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--hh-navy);
  transition: background-color var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft);
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--hh-cream-dim); }
.seg button[aria-pressed="true"] { background: var(--c-chip); color: var(--c-on-chip); }
.seg button:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }

/* Toggle rows */
.a11y-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: var(--s-2) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--c-rule);
  cursor: pointer;
  text-align: left;
  font-family: var(--hh-font-body);
}
.a11y-toggle:last-child { border-bottom: 0; }
.a11y-toggle:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.a11y-toggle__label { font-size: var(--t-small); font-weight: 600; color: var(--hh-navy); display: block; }
.a11y-toggle__desc { font-size: 0.75rem; color: var(--c-text-mute); display: block; line-height: 1.45; margin-top: 2px; }
.a11y-toggle__switch {
  position: relative;
  width: 48px; height: 28px;
  flex: none;
  background: #CFCAC0;
  border-radius: 999px;
  transition: background-color var(--dur) var(--ease-soft);
}
.a11y-toggle__switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
  transition: transform var(--dur-slow) var(--ease-spring);
}
.a11y-toggle[aria-pressed="true"] .a11y-toggle__switch { background: var(--hh-orange); }
.a11y-toggle[aria-pressed="true"] .a11y-toggle__switch::after { transform: translateX(20px); }

.a11y-reset {
  background: none;
  border: 0;
  padding: 0.5rem 0;
  min-height: 40px;
  font-family: var(--hh-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-action-text);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.a11y-reset:hover { color: var(--hh-orange-hover); }