/* Greater Health: the motion redesign (October 2026, Linear ENV-58).
   Shared by every page: brand tokens, type, buttons, the header with its Larger text and Pause motion switches, the
   wave lines, the inner page hero, the call-to-action band, FAQs and the footer. The homepage and Our team add their
   own sheets (front matter pageStyle). Motion lives in js/main.js and always respects Pause motion and reduced motion. */
:root {
  --navy: #0B2A4A; --navy-deep: #071D34; --navy-2: #16395E;
  --blue: #1B78C2;        /* buttons with white text (passes AA) */
  --sky: #5BB8F0;         /* brand light blue, use with navy text */
  --tint: #EAF4FB; --mist: #F5F9FC; --line: #DCE7F0;
  --ink: #14212E; --body: #3A4A5C; --muted: #50637A; --eyebrow: #1A6AA8;
  --error: #A4161A;       /* form errors (passes AA on white and mist) */
  --fd: 'Fraunces', Georgia, serif; --fb: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --shadow: 0 20px 60px rgba(11, 42, 74, .14); --shadow-sm: 0 8px 24px rgba(11, 42, 74, .10);
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* Older names, still used by inner page styles */
  --sky-tint: var(--tint); --font-body: var(--fb); --font-display: var(--fd);
  --placeholder: #DCEAF5; --placeholder-line: #9FBBD3;
  interpolate-size: allow-keywords;
}
* { box-sizing: border-box; }
/* The fixed header is about 90px tall: anything scrolled to (anchors, form steps, error summaries) lands below it */
html { font-size: 100%; scroll-padding-top: 110px; }
html.text-lg { font-size: 112.5%; }
@media (prefers-reduced-motion: no-preference) { html:not(.motion-off) { scroll-behavior: smooth; } }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--fb); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: var(--blue); }
a:hover { color: var(--navy); }
b, strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.on-dark :focus-visible, .dark :focus-visible { outline-color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; background: #fff; color: var(--navy); padding: 12px 18px; z-index: 100; }
.skip-link:focus { left: 12px; top: 12px; }
[hidden] { display: none !important; }

/* Layout */
.wrap, .container { max-width: 1240px; margin: 0 auto; position: relative; }
.wrap { padding: 0 24px; }
.sec { position: relative; padding: clamp(88px, 10vw, 140px) 0; }
.section { padding: clamp(72px, 9vw, 128px) 24px; }
.section > .container.stack { gap: clamp(36px, 4vw, 56px); }
.section-intro { align-items: center; text-align: center; margin: 0 auto; }
.stack { display: flex; flex-direction: column; }
.intro { display: flex; flex-direction: column; gap: 18px; }
.intro.center { align-items: center; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* Type */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: .9375rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--eyebrow); }
.eyebrow::before { content: ''; width: 28px; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; }
.eyebrow.center::before, .section-intro .eyebrow::before, .intro.center .eyebrow::before { display: none; }
.h2 { margin: 0; font-family: var(--fd); font-weight: 300; font-size: clamp(2.375rem, 4.4vw, 3.875rem); line-height: 1.05; letter-spacing: -.015em; color: var(--navy); text-wrap: balance; }
.h2 em, .h2 i { font-style: italic; }
.h3 { margin: 0; font-family: var(--fb); font-size: 1.375rem; font-weight: 600; line-height: 1.3; color: var(--navy); }
.lead { margin: 0; font-size: 1.1875rem; line-height: 1.6; color: var(--body); max-width: 40rem; }
.on-dark .h2, .dark .h2 { color: #fff; }
.on-dark .lead, .dark .lead { color: #CFE3F3; }
.on-dark .eyebrow, .dark .eyebrow { color: var(--sky); }
/* Highlighter band (brand signature): white behind a word in a heading */
.hl { position: relative; z-index: 0; display: inline-block; padding: 0 .08em; }
.hl::before { content: ''; position: absolute; left: 0; right: 0; bottom: .02em; height: 40%; z-index: -1; background: rgba(255,255,255,.88); border-radius: 3px; box-shadow: 0 2px 4px rgba(11,42,74,.25), 0 10px 24px rgba(11,42,74,.3); transform-origin: left center; }
.hl-sky::before { background: var(--sky); box-shadow: none; opacity: .55; }
/* Links inside sentences */
main p a:not(.btn):not(.text-link):not(.phone):not(.contact-link), main li a:not(.btn):not(.text-link) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a[href^="tel:"] { white-space: nowrap; }

/* Icons: Lucide line icons, inlined at build time by the "icon" shortcode (eleventy.config.js). Always decoration. */
.icon { flex: none; width: 24px; height: 24px; }
.icon-badge { display: block; width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--tint); color: var(--blue); }
.note-card .icon-badge { background: #fff; }
.dark .icon-badge, .on-dark .icon-badge { background: rgba(255, 255, 255, .1); color: var(--sky); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border-radius: 999px; font-family: inherit; font-weight: 600; font-size: 1.125rem; line-height: 1.2; text-align: center; text-decoration: none; border: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .35s var(--ease), background-color .3s, box-shadow .35s var(--ease), color .3s, border-color .3s; }
.btn .icon { width: 1.15em; height: 1.15em; transition: transform .35s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover > .icon:last-child:not(:first-child) { transform: translateX(4px); }
.btn-navy { background: var(--navy); color: #fff; box-shadow: 0 10px 24px rgba(11,42,74,.22); }
.btn-navy:hover { background: var(--navy-deep); color: #fff; }
.btn-white { background: #fff; color: var(--navy); box-shadow: 0 10px 24px rgba(11,42,74,.10); }
.btn-white:hover { color: var(--navy); box-shadow: 0 14px 30px rgba(11,42,74,.16); }
.btn-primary, .btn-blue { background: var(--blue); color: #fff; }
.btn-primary:hover, .btn-blue:hover { background: #155f9a; color: #fff; }
.btn-outline { background: #fff; color: var(--navy); border-color: rgba(11,42,74,.3); }
.btn-outline:hover { border-color: var(--navy); color: var(--navy); }
.btn-outline-light, .btn-line { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-outline-light:hover, .btn-line:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn-sm { min-height: 48px; padding: 0 22px; font-size: 1.0625rem; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
/* "Learn more" links with an arrow, in the darker eyebrow blue so they pass AA on white, mist and tint */
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 1.0625rem; color: var(--eyebrow); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; text-decoration-color: rgba(26,106,168,.35); transition: text-decoration-color .3s, gap .3s var(--ease); }
.text-link:hover { color: var(--navy); text-decoration-color: currentColor; gap: 12px; }
.text-link svg { flex: none; }
.stack > .text-link, .info-card > .text-link, .note-card > .text-link { align-self: flex-start; }
.stack > .text-link.is-centred { align-self: center; }
.dark .text-link, .on-dark .text-link, .hub-card .text-link { color: var(--sky); text-decoration-color: rgba(91,184,240,.4); }
.dark .text-link:hover, .on-dark .text-link:hover, .hub-card .text-link:hover { color: #fff; }

/* ---------- Header: a frosted pill fixed to the top ---------- */
.hdr { position: fixed; top: 12px; left: 16px; right: 16px; z-index: 50; }
.hdr-pill { position: relative; max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 10px 12px 10px 24px; background: rgba(255,255,255,.74); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border: 1px solid rgba(255,255,255,.8); border-radius: 999px; box-shadow: 0 10px 30px rgba(11,42,74,.12); transition: box-shadow .4s, background-color .4s; }
.hdr.is-scrolled .hdr-pill { background: rgba(255,255,255,.88); box-shadow: 0 14px 40px rgba(11,42,74,.16); }
.hdr-logo { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.hdr-logo img { height: 44px; width: auto; max-width: none; }
.hdr-nav { flex: 1; display: flex; justify-content: space-evenly; gap: 6px; }
.hdr-nav a { position: relative; color: var(--navy); text-decoration: none; font-size: 1.125rem; font-weight: 500; padding: 10px 6px; }
.hdr-nav a::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--sky); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.hdr-nav a:hover::after { transform: scaleX(1); }
.hdr-nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--navy); }
.hdr-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.tool-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; min-width: 48px; padding: 0 14px; border-radius: 999px; border: 1.5px solid rgba(11,42,74,.18); background: rgba(255,255,255,.6); color: var(--navy); font-family: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; transition: background-color .3s, border-color .3s; }
.tool-btn:hover { border-color: var(--navy); }
.tool-btn[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.tool-btn .icon { width: 1.15rem; height: 1.15rem; }
.menu-btn { display: none !important; }
@media (max-width: 1279.98px) { .js .menu-btn:not([hidden]) { display: inline-flex !important; } }
.tool-btn .when-paused, .tool-btn[aria-pressed="true"] .when-playing { display: none; }
.tool-btn[aria-pressed="true"] .when-paused, .tool-btn .when-playing { display: inline-flex; }
@media (max-width: 1519.98px) { .tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .tool-btn { padding: 0 12px; } }
/* Below 1280px wide the links fold behind Menu. Without JavaScript they just show, under the logo. */
@media (max-width: 1279.98px) {
  .js .hdr-nav { display: none; }
  .js .hdr.menu-open .hdr-nav { display: flex; position: absolute; top: calc(100% + 10px); left: 0; right: 0; flex-direction: column; gap: 0; padding: 10px 22px; background: #fff; border-radius: 24px; box-shadow: var(--shadow); }
  .js .hdr.menu-open .hdr-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .js .hdr.menu-open .hdr-nav a:last-child { border-bottom: 0; }
  .hdr-tools { margin-left: auto; }
  html:not(.js) .hdr-pill { flex-wrap: wrap; border-radius: 28px; }
  /* Without JavaScript the links sit in one row under the logo that scrolls sideways, so the header stays short */
  html:not(.js) .hdr-nav { order: 3; flex-basis: 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; }
  html:not(.js) .hdr-nav a { flex: none; font-size: 1rem; }
}
@media (max-width: 640px) { .hdr { left: 12px; right: 12px; } .hdr-pill { padding-left: 16px; gap: 8px; } .hdr-logo img { height: 38px; } .hdr-cta { display: none; } }

/* ---------- Wave lines: drifting contour lines on the sky sections and the footer (js/main.js) ---------- */
.contours { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.contours path { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 1.2; }
.footer .contours path { stroke: rgba(91,184,240,.12); }
.grain { position: absolute; inset: 0; z-index: -1; opacity: .12; mix-blend-mode: soft-light; pointer-events: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.pulse { position: relative; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--navy); }
.pulse::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--navy); opacity: 0; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(2); opacity: 0; } }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7); color: var(--navy); font-size: .9375rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Inner page hero: sky blue with the wave lines ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--sky); padding: clamp(136px, 12vw, 176px) 24px clamp(72px, 7vw, 112px); }
.page-hero .container { max-width: 980px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.page-hero h1 { margin: 0; font-family: var(--fd); font-weight: 300; font-size: clamp(2.75rem, 6vw, 5.25rem); line-height: 1.02; letter-spacing: -.02em; color: var(--navy); text-wrap: balance; }
.page-hero p { margin: 0; font-size: clamp(1.1875rem, 1.8vw, 1.375rem); line-height: 1.55; color: var(--navy); max-width: 42rem; }
.page-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 8px; }
.page-jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(255,255,255,.75); color: var(--navy); font-size: 1rem; font-weight: 600; text-decoration: none; transition: background-color .25s, transform .35s var(--ease); }
.page-jump a:hover { background: #fff; color: var(--navy); transform: translateY(-2px); }
/* About, Our team, Contact us and Make a referral (front matter heroMap): a faint South East map low in the hero. Decoration only. */
.page-hero-map::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("/img/map-desktop.webp") center bottom / cover no-repeat; opacity: .55; -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 70%); mask-image: linear-gradient(to top, #000 10%, transparent 70%); }
@media (max-width: 640px) { .page-hero-map::before { background-image: url("/img/map-phone.webp"); } }

/* ---------- Call-to-action band: a route line to the flag, "Who's getting in touch?", and a tile per audience ---------- */
.start { position: relative; background: var(--sky); overflow: hidden; isolation: isolate; padding: clamp(88px, 10vw, 140px) 0; }
.start-route { position: absolute; left: 0; right: 0; top: 70px; height: 120px; z-index: -1; pointer-events: none; }
.start-route svg { width: 100%; height: 100%; overflow: visible; }
.start-route path { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1 10; }
.start-route .solid { stroke: #fff; stroke-dasharray: none; }
.flag { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--navy); color: var(--sky); box-shadow: 0 14px 30px rgba(11,42,74,.3); margin-bottom: 18px; }
.flag .icon { width: 1.6rem; height: 1.6rem; }
.start .h2 { font-size: clamp(2.75rem, 6vw, 5.25rem); }
.start .lead { color: var(--navy); }
.pathways { max-width: 1040px; margin: 44px auto 0; text-align: center; }
.pw-q { margin: 0 0 14px; font-weight: 600; color: var(--navy); font-size: 1.0625rem; }
.pw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pw { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 120px; padding: 18px 14px; border-radius: 24px; border: 2px solid rgba(255,255,255,.7); background: rgba(255,255,255,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--navy); font-family: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; cursor: pointer; transition: background-color .3s, border-color .3s, box-shadow .3s; }
.pw:hover { background: rgba(255,255,255,.75); }
.pw[aria-pressed="true"] { background: #fff; border-color: var(--navy); box-shadow: 0 14px 30px rgba(11,42,74,.16); }
.pw-ico { width: 48px; height: 48px; border-radius: 50%; background: var(--navy); color: var(--sky); display: grid; place-items: center; }
.pw-ico .icon { width: 1.3rem; height: 1.3rem; }
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1040px; margin: 44px auto 0; }
.door { position: relative; border-radius: 34px; padding: 38px 36px 36px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; outline: 4px solid transparent; outline-offset: 6px; transition: box-shadow .45s, outline-color .3s; }
.door.is-focus { outline-color: #fff; }
.door-navy { background: var(--navy); color: #fff; box-shadow: 0 30px 60px rgba(11,42,74,.3); }
.door-white { background: #fff; color: var(--navy); box-shadow: 0 30px 60px rgba(11,42,74,.16); }
.door .eyebrow { font-size: .8125rem; }
.door .eyebrow::before { display: none; }
.door h3 { margin: 0; font-family: var(--fd); font-weight: 300; font-size: 2.375rem; line-height: 1.05; }
.door p { margin: 0; font-size: 1.0625rem; line-height: 1.55; }
.door-navy p { color: #E3EEF7; }
.door-white p { color: var(--body); }
.door-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 10px; }
.door-navy .door-actions a.phone { color: #fff; font-weight: 600; }
.door-deco { position: absolute; right: -30px; bottom: -40px; opacity: .07; pointer-events: none; color: var(--navy); }
.door-deco .icon { width: 11rem; height: 11rem; }
.door-navy .door-deco { color: var(--sky); opacity: .12; }
.door-note { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: var(--tint); color: var(--navy); font-size: 1rem; line-height: 1.5; transition: background-color .3s, color .3s; }
.door-note .icon { width: 1.15rem; height: 1.15rem; margin-top: 3px; color: var(--blue); }
/* The GP note's email link: the darker eyebrow blue, as button blue on the tint is only 4.17:1 (ENV-87) */
.door-note a { color: var(--eyebrow); }
.door-note.is-focus { background: var(--navy); color: #fff; }
.door-note.is-focus a, .door-note.is-focus .icon { color: var(--sky); }
@media (max-width: 760px) { .pw-grid { grid-template-columns: 1fr 1fr; } .doors { grid-template-columns: 1fr; } .door { padding: 28px 24px; } }

/* ---------- FAQs (homepage and the FAQs page) ---------- */
.faq-list { flex: 2 1 560px; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; font-size: 1.1875rem; font-weight: 600; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq .pm { width: 40px; height: 40px; border-radius: 50%; background: var(--tint); color: var(--blue); display: grid; place-items: center; flex: none; transition: transform .4s var(--ease), background-color .3s, color .3s; }
.faq .pm .icon { width: 20px; height: 20px; }
.faq[open] .pm { transform: rotate(45deg); background: var(--blue); color: #fff; }
.faq .chev { flex: none; transition: transform .3s var(--ease); }
.faq[open] .chev { transform: rotate(45deg); }
.faq > p, .faq .ans { margin: 0; padding: 0 56px 22px 0; color: var(--body); font-size: 1.0625rem; line-height: 1.65; max-width: 820px; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-off) .faq::details-content { height: 0; overflow: clip; transition: height .45s var(--ease), content-visibility .45s allow-discrete; }
  html:not(.motion-off) .faq[open]::details-content { height: auto; }
}

/* ---------- Footer ---------- */
.footer { position: relative; background: var(--navy); color: #CFE3F3; padding: 90px 0 36px; overflow: hidden; isolation: isolate; }
.foot-big { margin: 0; max-width: 980px; font-family: var(--fd); font-weight: 300; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.04; color: #fff; letter-spacing: -.015em; }
.foot-big em { color: var(--sky); }
.foot-cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; margin-top: 70px; padding-top: 44px; border-top: 1px solid rgba(255,255,255,.14); }
.foot-cols > * { display: flex; flex-direction: column; }
.foot-head { margin: 0 0 8px; color: #fff; font-size: 1rem; font-weight: 600; }
.foot-cols a { display: flex; align-items: center; min-height: 44px; color: #CFE3F3; text-decoration: none; font-size: 1rem; }
.foot-cols a:hover { color: #fff; text-decoration: underline; }
.foot-logo { display: inline-block; align-self: flex-start; background: #fff; border-radius: 18px; padding: 10px 14px; }
.foot-logo img { height: 52px; width: auto; }
.foot-tag { margin: 18px 0 0; max-width: 18rem; }
.foot-ndis { margin: 10px 0 0; color: #fff; font-weight: 700; }
.socials { display: flex; gap: 8px; margin-top: 16px; }
.foot-cols .socials a { width: 44px; height: 44px; justify-content: center; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.3); color: #fff; }
.foot-cols .socials a:hover { background: var(--sky); color: var(--navy); border-color: var(--sky); text-decoration: none; }
.socials .icon { width: 20px; height: 20px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; font-size: .9375rem; }
.foot-bottom p { margin: 0; }
.foot-bottom a { color: #CFE3F3; }
@media (max-width: 1100px) { .foot-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .foot-cols { grid-template-columns: 1fr; } }

/* ---------- Motion: paused or reduced means nothing loops or slides ---------- */
/* The hero's opening rise waits for js/main.js (the page's head script adds .pre-motion only when motion is allowed,
   and takes it off again after 3 seconds if the scripts never run) */
.pre-motion [data-rise-group] > *, .pre-motion [data-rise] { opacity: 0; }
html.motion-off .pulse::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pulse::after { animation: none; }
  .btn, .btn .icon, .text-link, .page-jump a, .pw, .door, .faq .pm, .hdr-nav a::after { transition: none !important; }
  .btn:hover, .page-jump a:hover { transform: none; }
}
html.motion-off .btn:hover, html.motion-off .page-jump a:hover { transform: none; }


/* ---------- Inner page building blocks (motion redesign, ENV-62) ----------
   About, Services, Who we help, Blog, FAQs, Contact us, Make a referral, Privacy and Terms, in the redesign's language:
   Fraunces headings with an italic word, soft rounded cards, photos in arches and windows, navy bands with drifting
   lights, and routes that draw themselves (js/pages.js). Sizes are in rem so the Larger text switch scales them.
   GSAP moves anything marked data-reveal, data-parallax and the routes, so none of those has a CSS transition on
   transform or opacity: hover effects here change shadows, borders and colours (or move a small icon inside). */

/* Sections */
.section { position: relative; }
.section-mist { background: var(--mist); }
.section-intro.stack { gap: 16px; }
.intro-narrow { max-width: 760px; }
.section-tight { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
/* Navy sections: faint sky wave lines (data-waves) and two soft lights that drift (js/pages.js). clip, not hidden,
   so sticky columns inside still stick. */
.dark { position: relative; isolation: isolate; overflow: hidden; overflow: clip; background: var(--navy); color: #fff; }
.dark .contours path { stroke: rgba(91, 184, 240, .13); }
.blobs { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); }
.blob.b1 { width: 520px; height: 520px; left: -180px; top: -200px; background: rgba(27, 120, 194, .45); }
.blob.b2 { width: 460px; height: 460px; right: -160px; bottom: -220px; background: rgba(91, 184, 240, .26); }

/* Type */
.prose { display: flex; flex-direction: column; gap: 16px; }
.prose p { margin: 0; font-size: 1.125rem; line-height: 1.65; color: var(--body); max-width: 68ch; }
.sub-block { gap: 20px; }
.sub-title { font-size: 1.25rem; }
.card-title { font-family: var(--fb); font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--navy); }
.card-body { font-size: 1rem; line-height: 1.55; color: var(--body); }
.label { font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--eyebrow); }
.contact-link { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; font-size: 1.25rem; font-weight: 600; overflow-wrap: anywhere; }
/* Links inside text on the mist background use the darker blue so they pass AA */
.inline-link { color: var(--eyebrow); }
.text-link .icon { width: 1.15em; height: 1.15em; }

/* Icon tiles: rounded squares (tint and blue, or navy and sky) in the inner pages' cards */
.feature-text > .icon-badge, .info-card .icon-badge, .note-card .icon-badge, .path-box .icon-badge, .gp-note .icon-badge,
.grid-funding .fund-card .icon-badge, .legal-card .icon-badge { width: 52px; height: 52px; padding: 13px; border-radius: 16px; flex: none; }
.icon-badge.icon-navy { background: var(--navy); color: var(--sky); }

/* Ticked list, two columns where there's room */
.check-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 12px 28px; }
.check-list li { position: relative; padding-left: 36px; font-size: 1.0625rem; line-height: 1.5; color: var(--body); }
.check-list li::before { content: ''; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B78C2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.section-mist .check-list li::before { background-color: #fff; box-shadow: inset 0 0 0 1px var(--line); }
/* Pills (Who we help: settings and funding) */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tag { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 14px; border-radius: 999px; background: var(--tint); color: var(--navy); font-size: 1rem; font-weight: 600; line-height: 1.3; }
.tag .icon { width: 1.1rem; height: 1.1rem; color: var(--blue); }
.tag-funding { background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }

/* Text beside a photo. On wide screens the two sit side by side (.feature-flip puts the photo first); narrower, the
   photo follows the text. */
.feature { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(48px, 7vw, 104px); align-items: center; }
.feature-flip { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.feature-flip > .feature-media { order: -1; }
.feature-text { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.feature-text > .stack, .feature-text > .prose { align-self: stretch; }
.feature-text > .btn-row { padding-top: 4px; }
.feature-media { position: relative; min-width: 0; isolation: isolate; }
/* A soft tint disc behind each photo */
.feature-media::before { content: ''; position: absolute; z-index: -1; right: -6%; top: -6%; width: 58%; aspect-ratio: 1; border-radius: 50%; background: var(--tint); }
.feature-flip > .feature-media::before { right: auto; left: -6%; }
@media (max-width: 959.98px) {
  .feature, .feature-flip { grid-template-columns: minmax(0, 1fr); }
  .feature-flip > .feature-media { order: 0; }
  .feature-media { width: 100%; max-width: 520px; }
  .feature-media::before { right: -3%; }
  .feature-flip > .feature-media::before { left: auto; right: -3%; }
}
/* Photo frames: an arch (portraits) or a window (the hero window's shape). The photo is a little taller than its frame
   so it can drift as you scroll (data-parallax, js/pages.js); still, it sits centred. */
.frame { position: relative; overflow: hidden; aspect-ratio: var(--ratio, 4 / 5); border-radius: 36px; background: var(--tint); box-shadow: var(--shadow); }
.frame img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; max-width: none; object-fit: cover; }
/* A true half circle on top: 50% of the width across, and the same length down (40% of a 4:5 frame's height) */
.frame-arch { border-radius: 50% 50% 36px 36px / 40% 40% 36px 36px; }
.frame-window { border-radius: 180px 36px 36px 36px; }
/* A navy badge with an icon, at the photo's lower corner. Decoration. */
.frame-badge { position: absolute; left: -16px; bottom: 40px; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--navy); color: var(--sky); border: 5px solid #fff; box-shadow: 0 16px 40px rgba(11, 42, 74, .3); }
.frame-badge .icon { width: 2rem; height: 2rem; }
.feature-flip .frame-badge { left: auto; right: -16px; }
@media (max-width: 640px) { .frame-badge { width: 68px; height: 68px; left: -8px; bottom: 24px; } .feature-flip .frame-badge { right: -8px; } .frame-badge .icon { width: 1.6rem; height: 1.6rem; } }

/* White cards with soft shadows (not clickable, so no lift) */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.info-card { position: relative; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); }
.info-card p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--body); }
.info-card > .text-link { margin-top: auto; }
.info-card .icon-badge { margin-bottom: 4px; }
/* Buttons inside cards may wrap onto two lines (long names with Larger text on a phone) */
.info-card .btn { max-width: 100%; white-space: normal; }
.info-card .num { font-family: var(--fd); font-size: 2.75rem; font-weight: 300; line-height: 1; color: var(--blue); }
.info-card.info-card-navy { background: var(--navy); border-color: var(--navy); box-shadow: 0 24px 50px rgba(11, 42, 74, .25); }
.info-card-navy .h3 { color: #fff; }
.info-card-navy p { color: #CFE3F3; }
.info-card-navy .contact-link { color: #fff; }
.info-card-navy .contact-link:hover { color: var(--sky); }
/* A quiet, low-key note (Support work; the referral forms use it too) */
.note-card { max-width: 860px; margin: 0 auto; background: var(--mist); border: 1px solid var(--line); border-radius: 28px; padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 12px; }
.note-card p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--body); }
.note-card-row { flex-direction: row; align-items: flex-start; gap: 24px; }
.note-card-row > .stack { min-width: 0; gap: 10px; }
@media (max-width: 600px) { .note-card-row { flex-direction: column; gap: 14px; } }

/* Numbered steps on a route (Services "How it works", Contact us "Three easy ways", Make a referral "What happens
   next"). Wide screens: one row of cards, each number on a line that runs from the first to the last (the line draws
   in as it arrives, js/pages.js). Narrower: the cards wrap and each number sits at the top of its card. --n: cards. */
.steps-route { --n: 3; --gap: 20px; position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--gap); }
.steps-route > .ep-step, .steps-route > .step-card { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 26px; background: #fff; border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-sm); }
.steps-route .num { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; background: #fff; border: 3px solid var(--sky); font-family: var(--fd); font-size: 1.5rem; font-weight: 300; line-height: 1; color: var(--blue); box-shadow: var(--shadow-sm); }
.steps-route .card-title { margin: 0; }
.steps-route .step-card .btn { align-self: flex-start; margin-top: auto; }
.route-fill { display: none; }
@media (min-width: 1000px) {
  .steps-route { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding-top: 84px; }
  /* The dashed line, and the sky line drawn over it, from the first number's centre to the last one's */
  .steps-route::before, .steps-route .route-fill { content: ''; position: absolute; left: 52px; right: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n) - 52px); }
  .steps-route::before { top: 27px; height: 3px; background: repeating-linear-gradient(90deg, rgba(11, 42, 74, .2) 0 6px, transparent 6px 14px); }
  .steps-route .route-fill { display: block; top: 26px; height: 5px; border-radius: 5px; background: var(--sky); transform-origin: left center; transform: scaleX(var(--p, 1)); }
  .steps-route .num { position: absolute; top: -84px; left: 24px; margin: 0; }
  .steps-route .num::after { content: ''; position: absolute; left: calc(50% - 1px); top: calc(100% + 3px); width: 2px; height: 22px; background: var(--line); }
}
.section-mist .steps-route .num { background: #fff; }

/* About: values */
.value-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .value-grid { grid-template-columns: minmax(0, 1fr); } }
.value-card { overflow: hidden; gap: 14px; padding: 30px 28px 32px; }
.value-card::after { content: ''; position: absolute; right: -56px; top: -56px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 184, 240, .28), transparent 70%); pointer-events: none; }
.value-card .h3 { font-family: var(--fd); font-weight: 300; font-size: 1.75rem; line-height: 1.12; letter-spacing: -.005em; }
/* About: the NDIS band */
.band { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.band-text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.band-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.band-mark { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: var(--sky); color: var(--navy); box-shadow: 0 0 0 14px rgba(91, 184, 240, .14), 0 24px 50px rgba(0, 0, 0, .3); }
.band-mark .icon { width: 3.25rem; height: 3.25rem; }
@media (max-width: 900px) { .band { grid-template-columns: minmax(0, 1fr); } .band-mark { display: none; } }

/* Community connections: a navy Greater Health bubble, with a line to each organisation's card.
   Wide screens: three curved lines (.net) branch to three cards, with a pulse travelling down each while motion is on.
   Narrower: the line runs down the left. Lines, dots and pulses are decoration. */
.community { margin-top: clamp(16px, 3vw, 40px); }
.pathway { position: relative; display: flex; flex-direction: column; align-items: center; }
.pathway-hub { display: flex; flex-direction: column; align-items: center; width: 100%; }
.hub-card { position: relative; isolation: isolate; overflow: hidden; max-width: 700px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(30px, 4vw, 44px); text-align: center; background: var(--navy); border-radius: 32px; box-shadow: var(--shadow); }
.hub-card::before { content: ''; position: absolute; z-index: -1; left: 50%; top: -120px; width: 360px; height: 240px; margin-left: -180px; border-radius: 50%; background: radial-gradient(closest-side, rgba(91, 184, 240, .3), transparent); }
.hub-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--sky); color: var(--navy); }
.hub-card h3 { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.hub-title { font-family: var(--fd); font-weight: 300; font-size: clamp(2rem, 3vw, 2.5rem); line-height: 1.05; letter-spacing: -.01em; color: #fff; }
.hub-subtitle { font-family: var(--fb); font-weight: 700; font-size: 1.125rem; line-height: 1.3; color: var(--sky); }
.hub-card .lead { color: #E3EEF7; font-size: 1.0625rem; }
.hub-stem { display: none; }
.pathway .net { display: none; }
.grid-community { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; width: 100%; margin: 0; padding: 0; list-style: none; position: relative; }
.connection { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-sm); transition: box-shadow .4s; }
.connection:hover { box-shadow: var(--shadow); }
.connection-logo-box { display: flex; align-items: center; height: 72px; margin-bottom: 4px; }
.connection-logo { display: block; width: auto; height: auto; max-height: 72px; max-width: 180px; object-fit: contain; }
.connection h4 { margin: 0; font-family: var(--fb); font-size: 1.25rem; font-weight: 600; color: var(--navy); }
.connection p { margin: 0; flex: 1; font-size: 1.0625rem; line-height: 1.55; color: var(--body); }
.connection .text-link { font-size: 1rem; }
.pathway .connection::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 4px var(--mist); }
@media (min-width: 960px) {
  .pathway .net { display: block; position: relative; width: 100%; height: 120px; }
  .pathway .net-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .pathway .net-path { fill: none; stroke: var(--sky); stroke-width: 2.5; stroke-linecap: round; }
  .pathway .net-pulse { position: absolute; left: 50%; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(27, 120, 194, .18); opacity: 0; }
  /* Three across, centred under the lines' ends */
  .pathway .grid-community { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pathway .connection::after { top: -8px; left: calc(50% - 8px); }
}
@media (max-width: 959.98px) {
  .pathway { align-items: stretch; padding-left: 48px; }
  .pathway-hub { margin-left: -48px; width: calc(100% + 48px); }
  .hub-card { max-width: none; width: 100%; }
  .pathway .grid-community { grid-template-columns: minmax(0, 1fr); padding-top: 24px; }
  .pathway .grid-community::before, .pathway .connection::before { content: ''; position: absolute; background: var(--sky); width: 2px; }
  .pathway .grid-community::before { top: 0; left: -25px; height: 63px; }
  .pathway .connection::before { top: 39px; left: -26px; height: calc(100% + 20px); }
  .pathway .connection:last-child::before { display: none; }
  .pathway .connection::after { top: 31px; left: -33px; }
}

/* Services: where sessions happen. A route over the four setting cards (wide screens only; the car drives along it
   as you scroll, js/pages.js; still, it waits at the last stop), then the cards: a photo with its words over a navy fade. */
.settings-route { display: none; }
@media (min-width: 1100px) {
  .settings-route { display: block; position: relative; height: 60px; margin: 0 0 22px; }
  .settings-route > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
}
.settings-route .route-base { fill: none; stroke: rgba(11, 42, 74, .2); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
.settings-route .route-line { fill: none; stroke: var(--sky); stroke-width: 4; stroke-linecap: round; }
.settings-route .route-stop { position: absolute; left: var(--x); top: 30px; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; border: 3px solid var(--sky); }
.settings-route .route-car { position: absolute; left: 88.17%; top: 30px; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--navy); color: #fff; box-shadow: 0 0 0 6px rgba(91, 184, 240, .3), 0 10px 22px rgba(11, 42, 74, .3); }
.settings-route .route-car .icon { width: 1.3rem; height: 1.3rem; }
.setting-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1099.98px) { .setting-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .setting-cards { grid-template-columns: minmax(0, 1fr); } }
.setting-card { position: relative; isolation: isolate; overflow: hidden; min-width: 0; min-height: 440px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 32px; background: var(--navy-2); color: #fff; box-shadow: var(--shadow); }
.setting-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.setting-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 29, 52, 0) 22%, rgba(7, 29, 52, .72) 50%, rgba(7, 29, 52, .94) 78%); }
.setting-body { display: flex; flex-direction: column; gap: 8px; padding: 26px 24px 28px; }
.setting-num { font-family: var(--fd); font-weight: 300; font-size: 1.125rem; color: var(--sky); }
.setting-card .card-title { display: flex; align-items: center; gap: 10px; font-family: var(--fd); font-weight: 300; font-size: 2rem; line-height: 1.05; color: #fff; }
.setting-card .card-title .icon { width: 1.5rem; height: 1.5rem; color: var(--sky); }
.setting-card .card-body { font-size: 1.0625rem; color: #E3EEF7; }
@media (max-width: 600px) { .setting-card { min-height: 340px; } }
.where-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.where-foot .lead { font-size: 1.125rem; max-width: 46rem; }
/* Services: funding (navy). The big outlined number counts the ways (decoration); the intro sticks beside the cards. */
.funding-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.funding-intro { position: sticky; top: 130px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.big-count { font-family: var(--fd); font-weight: 300; font-size: clamp(8rem, 14vw, 13rem); line-height: .8; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--sky); }
.grid-funding { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid-funding > .fund-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.grid-funding .fund-card { display: flex; flex-direction: column; gap: 8px; padding: 24px 22px 22px; border-radius: 24px; background: var(--navy-2); border: 1px solid rgba(255, 255, 255, .08); transition: border-color .3s; }
.grid-funding .fund-card:hover { border-color: rgba(91, 184, 240, .5); }
.grid-funding .fund-card .icon-badge { margin-bottom: 6px; background: rgba(91, 184, 240, .14); color: var(--sky); }
.grid-funding .fund-card .card-title { margin: 0; font-size: 1.25rem; font-weight: 700; color: #fff; }
.grid-funding .fund-card .card-body { color: #CFE3F3; }
@media (max-width: 959.98px) { .funding-layout { grid-template-columns: minmax(0, 1fr); } .funding-intro { position: static; } .big-count { font-size: 7rem; } }
@media (max-width: 600px) { .grid-funding { grid-template-columns: minmax(0, 1fr); } }

/* Who we help: the photo in an arch with the settings and funding on a card over its foot */
.person-media { display: flex; flex-direction: column; align-items: center; }
.person-media .frame { width: 100%; }
.person-card { position: relative; z-index: 1; width: calc(100% - 40px); margin-top: -96px; display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 26px; background: #fff; border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); }
.person-card .h3 { font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--eyebrow); }
.person-card .tag-list + .h3 { margin-top: 8px; }
@media (max-width: 640px) { .person-card { width: calc(100% - 20px); margin-top: -72px; padding: 20px; } }

/* Blog: 1 column on phones, 2 on tablets, 3 on desktop; cards in a row share a height */
.grid-posts { grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 700px) { .grid-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card { gap: 14px; padding: 30px 28px 24px; transition: box-shadow .4s, border-color .3s; }
.post-card:hover { box-shadow: var(--shadow); border-color: rgba(91, 184, 240, .6); }
.post-card[hidden] { display: none; }
.post-meta { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--tint); color: var(--navy); font-size: 1rem; font-weight: 600; }
.post-meta .icon { width: 1.1rem; height: 1.1rem; color: var(--blue); }
.post-card h3 { margin: 4px 0 0; font-family: var(--fd); font-size: 1.75rem; font-weight: 300; line-height: 1.15; letter-spacing: -.01em; color: var(--navy); text-wrap: balance; }
.post-card .text-link { margin-top: auto; padding-top: 6px; }
.posts-more { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.posts-more[hidden], .posts-more .btn[hidden] { display: none; }
.posts-count { margin: 0; font-size: 1rem; color: var(--muted); }

/* FAQs page: a search card, then one block per group with its heading beside the questions (it sticks while you
   read them on wide screens). The questions use the shared FAQ look. */
.faq-search { max-width: 860px; margin: 0 auto clamp(56px, 7vw, 96px); display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 36px); background: #fff; border: 1px solid var(--line); border-radius: 32px; box-shadow: var(--shadow); }
.faq-search[hidden], .faq-search-empty[hidden], .faq[hidden], .faq-group[hidden] { display: none; }
.faq-search-label { font-family: var(--fd); font-weight: 300; font-size: 1.875rem; line-height: 1.1; color: var(--navy); }
.faq-search-row { display: flex; flex-wrap: wrap; gap: 10px; }
.faq-search-field { position: relative; flex: 1 1 240px; min-width: 0; }
.faq-search-field .icon { position: absolute; left: 20px; top: 50%; width: 22px; height: 22px; margin-top: -11px; color: var(--muted); pointer-events: none; }
.faq-search input { width: 100%; min-height: 56px; padding: 0 20px 0 52px; font-family: inherit; font-size: 1.125rem; color: var(--ink); background: var(--mist); border: 2px solid #7F97AD; border-radius: 999px; -webkit-appearance: none; appearance: none; transition: border-color .3s, background-color .3s; }
.faq-search input:focus { border-color: var(--blue); background: #fff; }
.faq-search input::placeholder { color: var(--muted); opacity: 1; }
.faq-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.faq-search-status { margin: 0; font-size: 1rem; color: var(--muted); }
.faq-search-empty { margin: 0; font-size: 1.125rem; line-height: 1.55; color: var(--navy); }
.faq-group { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px clamp(40px, 6vw, 88px); align-items: start; padding-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--line); }
.faq-group + .faq-group { margin-top: clamp(40px, 5vw, 72px); }
.faq-group-head { position: sticky; top: 120px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.faq-group-num { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--tint); font-family: var(--fd); font-weight: 300; font-size: 1.25rem; color: var(--eyebrow); }
.faq-group .h2 { font-size: clamp(2.125rem, 3.4vw, 3rem); }
.faq-group-head .lead { font-size: 1.125rem; }
.faq-group .faq-list { min-width: 0; }
.faq-group .faq:first-child summary { padding-top: 0; }
@media (max-width: 899.98px) { .faq-group { grid-template-columns: minmax(0, 1fr); } .faq-group-head { position: static; } }
.faq-more { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 760px; margin: clamp(56px, 7vw, 96px) auto 0; padding: 20px 28px; border-radius: 24px; background: var(--tint); color: var(--navy); font-size: 1.125rem; line-height: 1.5; text-align: center; }
.faq-more .icon { color: var(--blue); }
.faq-more a { color: var(--eyebrow); font-weight: 600; overflow-wrap: anywhere; }

/* Contact us: hero call and email chips */
.hero-chips a { gap: 8px; }
.hero-chips .icon { width: 20px; height: 20px; }
/* "Who are you getting help for?": four big link boxes. The two for people and families jump to the next steps; the two
   navy ones, for professionals, go to Make a referral. Four across on wide screens, two on tablets, one on phones. */
.path-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) { .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .path-grid { grid-template-columns: minmax(0, 1fr); } }
.path-box { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 28px 26px 24px; border: 1.5px solid var(--line); border-radius: 28px; background: #fff; color: var(--navy); text-decoration: none; box-shadow: var(--shadow-sm); transition: box-shadow .4s, border-color .3s; }
.path-box:hover { color: var(--navy); border-color: var(--sky); box-shadow: var(--shadow); }
.path-box:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.path-box .icon-badge { margin-bottom: 6px; }
.path-title { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.path-text { font-size: 1.0625rem; line-height: 1.55; color: var(--body); }
.path-go { display: grid; place-items: center; width: 48px; height: 48px; margin-top: auto; border-radius: 50%; background: var(--tint); color: var(--blue); transition: background-color .3s, color .3s; }
.path-arrow { width: 1.3rem; height: 1.3rem; transition: transform .35s var(--ease); }
.path-box:hover .path-go { background: var(--blue); color: #fff; }
.path-box:hover .path-arrow { transform: translateY(3px); }
.path-box-navy { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 24px 50px rgba(11, 42, 74, .25); }
.path-box-navy:hover { color: #fff; border-color: var(--sky); box-shadow: 0 28px 60px rgba(11, 42, 74, .32); }
.path-box-navy:focus-visible { outline-color: var(--navy); }
.path-box-navy .path-text { color: #CFE3F3; }
.path-box-navy .icon-badge { background: rgba(91, 184, 240, .14); color: var(--sky); }
.path-box-navy .path-go { background: var(--sky); color: var(--navy); }
.path-box-navy:hover .path-go { background: #fff; color: var(--navy); }
.path-box-navy:hover .path-arrow { transform: translateX(3px); }
/* "Ask us a question": the enquiry form (js/main.js sends it) with phone and email beside it, stacked on narrow screens */
.enquiry-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 899.98px) { .enquiry-layout { grid-template-columns: minmax(0, 1fr); } }
.enquiry-panel { min-width: 0; display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 3.4vw, 44px); background: var(--mist); border: 1px solid var(--line); border-radius: 32px; }
.enquiry-aside { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.enquiry-form { display: flex; flex-direction: column; gap: 22px; }
.enquiry-form[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 1.125rem; font-weight: 600; color: var(--navy); }
.field .optional { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 56px; padding: 12px 18px; font-family: inherit; font-size: 1.125rem; color: var(--ink); background: #fff; border: 2px solid #7F97AD; border-radius: 18px; transition: border-color .3s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); }
.field textarea { min-height: 168px; line-height: 1.5; resize: vertical; }
.field select { -webkit-appearance: none; appearance: none; padding-right: 52px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 18px center / 20px no-repeat; }
.field [aria-invalid="true"] { border-color: var(--error); }
.field-error { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--error); }
.field-error[hidden] { display: none; }
.enquiry-hint { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--body); }
.enquiry-hint a { color: var(--eyebrow); font-weight: 600; }
.enquiry-form .btn { align-self: flex-start; }
.enquiry-form .btn .icon { width: 20px; height: 20px; }
.enquiry-form .btn[aria-disabled="true"] { opacity: .75; cursor: progress; }
/* Spam trap: off screen and out of reach for people (aria-hidden, no tab stop), so only bots fill it in */
.enquiry-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.enquiry-status { font-size: 1.0625rem; line-height: 1.55; color: var(--navy); }
/* The thank-you and "didn't send" messages: shown by js/main.js (.is-shown) or, without JavaScript, when they are the
   address's #target (the server sends the visitor to /contact/#enquiry-sent or #enquiry-failed). After a send without
   JavaScript, the thank-you takes the form's place. */
.enquiry-message { display: none; align-items: flex-start; gap: 12px; padding: 18px 20px; border: 2px solid var(--blue); border-radius: 18px; background: #fff; color: var(--navy); }
.enquiry-message:target, .enquiry-message.is-shown { display: flex; }
.enquiry-message p { margin: 0; font-size: 1.125rem; line-height: 1.55; }
.enquiry-message .icon { margin-top: 2px; color: var(--blue); }
.enquiry-message.is-failed { border-color: var(--error); }
.enquiry-message.is-failed .icon { color: var(--error); }
.enquiry-message a { font-weight: 600; color: var(--eyebrow); overflow-wrap: anywhere; }
.enquiry-message a[href^="tel:"] { white-space: nowrap; }
.enquiry-message:focus-visible, .enquiry-message a:focus-visible, .enquiry-hint a:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
#enquiry-sent:target ~ .enquiry-form { display: none; }
/* Contact details: two cards, kept to a readable width */
.details-grid { width: 100%; max-width: 920px; margin: 0 auto; }
/* "Follow us": labelled buttons, two by two where they fit */
.social-list { margin: 4px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.social-link { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 1.5px solid var(--line); border-radius: 999px; color: var(--navy); font-size: 1.0625rem; font-weight: 600; text-decoration: none; transition: background-color .3s, border-color .3s; }
.social-link:hover { border-color: var(--navy); background: var(--tint); color: var(--navy); }
.social-link .icon { width: 20px; height: 20px; color: var(--blue); }
.social-link:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
/* "Not you?": one line sending the other audience to its page (Make a referral and Contact us) */
.not-you { margin: 0; text-align: center; font-size: 1.0625rem; line-height: 1.55; color: var(--body); }
.not-you a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--eyebrow); }
.not-you a:hover { color: var(--navy); }
.not-you a:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.dark .not-you { color: #CFE3F3; }
.dark .not-you a, .dark .not-you a:hover { color: #fff; }
.dark .not-you a:focus-visible { outline-color: #fff; }

/* Make a referral (/refer/). Refer yourself or a loved one (/refer-yourself/) reuses the notes under the pathway cards
   (.refer-notes, .refer-after, .gp-note), so a change to those shows on both pages; its own cards and choices are in
   css/refer-yourself.css. Only the print sheet further down is kept to Make a referral (body.page-refer). */
/* Hero: "Copy link to this page" and "Print or save as PDF" (js/main.js). Hidden without JavaScript.
   If the browser blocks copying, the read-only address box shows beside the copy button, selected. */
.share-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; width: 100%; padding-top: 8px; }
.share-actions[hidden], .share-url[hidden] { display: none; }
.share-actions .btn .icon { width: 20px; height: 20px; }
.share-url { flex: 0 1 340px; min-width: 0; min-height: 56px; padding: 0 20px; font-family: inherit; font-size: 1.0625rem; color: var(--ink); background: #fff; border: 2px solid var(--navy); border-radius: 999px; }
/* At a glance: five short cards, one row on wide screens; narrower screens wrap them into centred rows */
.grid-glance { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.grid-glance > * { flex: 1 1 200px; max-width: 300px; }
.grid-glance .info-card { gap: 10px; padding: 26px 22px; }
.grid-glance .h3 { font-size: 1.25rem; }
.grid-glance .info-card p { font-size: 1rem; }
@media (max-width: 520px) { .grid-glance > * { max-width: none; } }
/* How to refer: a card per funding pathway, three across with a centred last row. Landing on one from another page
   (/refer/#referral-ndis) rings it in blue. */
.grid-pathways { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.grid-pathways > * { flex: 1 1 340px; max-width: 400px; }
.pathway-card { gap: 14px; padding: 28px 26px 26px; transition: box-shadow .4s, border-color .3s; }
.pathway-card:hover { box-shadow: var(--shadow); border-color: rgba(91, 184, 240, .6); }
.pathway-card:target { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(27, 120, 194, .2), var(--shadow); }
.pathway-top { display: flex; align-items: center; gap: 14px; }
.pathway-top .icon-badge { margin: 0; }
.pathway-card .card-title { margin: 0; font-family: var(--fd); font-weight: 300; font-size: 1.875rem; line-height: 1.08; letter-spacing: -.01em; }
.pathway-card .who { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 18px; background: var(--mist); }
.pathway-card .btn { align-self: flex-start; margin-top: auto; }
/* Under the pathway cards: how long the forms take, then the GP note */
.refer-notes { gap: 20px; }
.refer-after { margin: 0; text-align: center; font-size: 1.0625rem; line-height: 1.55; color: var(--body); }
.gp-note { display: flex; align-items: center; gap: 18px; width: 100%; max-width: 760px; margin: 0 auto; padding: clamp(20px, 3vw, 28px); background: #fff; border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-sm); }
.gp-note p { margin: 0; font-size: 1.125rem; line-height: 1.55; color: var(--body); }
.gp-note strong { color: var(--navy); }
.gp-note a { overflow-wrap: anywhere; }
.gp-note a:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
@media (max-width: 520px) { .gp-note { flex-direction: column; align-items: flex-start; gap: 12px; } }
/* Talk to Caroline directly (navy): phone and email in large type, the hours under them */
.direct-lines { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; text-align: center; }
.direct-line { display: inline-flex; align-items: center; gap: 14px; min-height: 64px; max-width: 100%; padding: 8px 28px 8px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .16); font-size: clamp(1.375rem, 2.6vw, 2rem); font-weight: 600; color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-decoration-thickness: 1.5px; text-underline-offset: 7px; overflow-wrap: anywhere; transition: background-color .3s, border-color .3s; }
.direct-line:hover { color: #fff; text-decoration-color: #fff; background: rgba(255, 255, 255, .1); border-color: var(--sky); }
.direct-line:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.direct-line .icon { flex: none; width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--sky); color: var(--navy); }
.direct-hours { flex-basis: 100%; margin: 6px 0 0; font-size: 1.0625rem; color: #CFE3F3; }
/* Only in print: the QR code and each referral form's address */
.print-only { display: none; }

/* Privacy policy and terms of use: one readable column (for now, one card) */
.legal { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.legal .note-card { margin: 0; }
.legal-section { display: flex; flex-direction: column; gap: 8px; }
.legal-section h2 { margin: 0; font-family: var(--fd); font-weight: 300; font-size: clamp(1.625rem, 3vw, 2rem); line-height: 1.2; letter-spacing: -.01em; color: var(--navy); }
.legal-section p { margin: 0; font-size: 1.125rem; line-height: 1.65; color: var(--body); }
.legal .covers { font-size: .9375rem; color: var(--muted); }
.legal-card { flex-direction: row; align-items: center; gap: 22px; padding: clamp(24px, 3vw, 36px); background: #fff; border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); }
.legal-card p { font-size: 1.1875rem; }
@media (max-width: 600px) { .legal-card { flex-direction: column; align-items: flex-start; } }


/* Paused or reduced motion: small hover nudges stay still too */
@media (prefers-reduced-motion: reduce) {
  .path-arrow, .connection, .path-box, .post-card, .pathway-card { transition: none !important; }
  .path-box:hover .path-arrow { transform: none; }
}
html.motion-off .path-box:hover .path-arrow { transform: none; }

/* Make a referral: print. One A4 sheet to hand on: the logo, the at-a-glance facts, the seven pathways (name, who can
   refer and the form's address as plain text), the GP note, next steps, phone and email, and a QR code back to the page.
   No menu, footer, call-to-action band, map, buttons or "Not you?" line. Browsers leave backgrounds out by default, so
   nothing depends on them (the navy section prints as navy text on white). Checked in headless Chrome: one A4 page.
   The named page keeps the A4 size and margins to this page; other pages print with the browser's defaults.
   Anything still waiting for its scroll reveal prints in its final place. */
@page refer-sheet { size: A4; margin: 12mm; }
@media print {
  .page-refer { page: refer-sheet; }
  .page-refer [data-reveal], .page-refer [data-reveal] > *, .page-refer main .h2, .page-refer main .h2 *, .page-refer [data-rise-group] > * { opacity: 1 !important; transform: none !important; visibility: visible !important; }
  .page-refer .skip-link, .page-refer .hdr-nav, .page-refer .hdr-tools, .page-refer .footer, .page-refer .start,
  .page-refer .share-actions, .page-refer .not-you, .page-refer .eyebrow, .page-refer .text-link, .page-refer .icon-badge,
  .page-refer .pathway-for, .page-refer .pathway-card .btn, .page-refer .direct-line .icon, .page-refer .blobs,
  .page-refer .route-fill { display: none !important; }
  .page-refer .print-only { display: block; }
  /* Just the logo, top right beside the heading */
  .page-refer .hdr { position: static; float: right; margin-left: 6mm; }
  .page-refer .hdr-pill { display: block; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .page-refer .hdr-logo img { height: 32px; }
  /* No backgrounds, shadows, borders or big spacing; everything left aligned */
  .page-refer .page-hero, .page-refer .section { padding: 0; background: none !important; color: var(--ink); overflow: visible; }
  .page-refer main > * + * { margin-top: 4mm; }
  .page-refer .container { max-width: none; }
  .page-refer .page-hero .container, .page-refer .section-intro { align-items: flex-start; text-align: left; margin: 0; gap: 1mm !important; }
  .page-refer .section > .container.stack { gap: 2mm; }
  .page-refer .page-hero-map::before, .page-refer .hl::before, .page-refer .contours, .page-refer .grain, .page-refer .pulse { display: none; }
  .page-refer .hero-eyebrow { font-size: 8.5pt; }
  .page-refer .page-hero h1 { font-size: 21pt; }
  .page-refer .page-hero p { max-width: none; font-size: 10.5pt; }
  .page-refer .h2, .page-refer .dark .h2 { font-size: 13.5pt; color: var(--navy); }
  .page-refer .lead, .page-refer .dark .lead, .page-refer .info-card p, .page-refer .card-body, .page-refer .refer-after,
  .page-refer .gp-note p, .page-refer .direct-hours { font-size: 10.5pt; line-height: 1.4; color: var(--ink); }
  .page-refer .info-card, .page-refer .gp-note { box-shadow: none; border: 0; }
  /* At a glance: five short columns */
  .page-refer .grid-glance { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4mm; }
  .page-refer .grid-glance > * { max-width: none; }
  .page-refer .grid-glance .info-card { gap: .5mm; padding: 1.5mm 0 0; border-top: 1.5pt solid var(--navy); border-radius: 0; }
  .page-refer .grid-glance .h3 { font-size: 10.5pt; line-height: 1.3; }
  .page-refer .grid-glance .info-card p { font-size: 9.5pt; line-height: 1.35; }
  /* The seven pathways: a tight two-column list. The cards and the notes share one grid, so the notes fill the space
     beside the seventh card. */
  .page-refer #pathways .container { display: grid; grid-template-columns: 1fr 1fr; gap: 2mm; }
  .page-refer #pathways .section-intro { grid-column: 1 / -1; }
  .page-refer .grid-pathways { display: contents; }
  .page-refer .grid-pathways > * { max-width: none; }
  .page-refer .pathway-card { gap: .5mm; padding: 1.8mm 2.5mm; border: .75pt solid var(--placeholder-line); border-radius: 2mm; break-inside: avoid; }
  .page-refer .pathway-top { display: block; }
  .page-refer .pathway-card .card-title { font-family: var(--fb); font-weight: 600; font-size: 11pt; line-height: 1.25; letter-spacing: 0; }
  .page-refer .pathway-card .who { display: block; padding: 0; border: 0; border-radius: 0; background: none; font-size: 9.5pt; line-height: 1.35; }
  .page-refer .pathway-card .label { display: inline; margin-right: 1.5mm; font-size: 7.5pt; }
  .page-refer .pathway-card .who p { display: inline; font-size: 9.5pt; line-height: 1.35; }
  .page-refer .pathway-card .form-address { margin: 0; font-size: 9pt; line-height: 1.35; font-weight: 500; color: var(--navy); }
  .page-refer .refer-notes { align-self: center; gap: 1.5mm !important; padding: 0 1mm 0 2mm; }
  .page-refer .refer-after, .page-refer .gp-note p { font-size: 9.5pt; line-height: 1.35; text-align: left; }
  .page-refer .gp-note { max-width: none; margin: 0; padding: 0; border-radius: 0; background: none; }
  /* Next steps: three across, each number beside its title, under a navy rule */
  .page-refer #next .steps-route { grid-template-columns: repeat(3, 1fr); gap: 4mm; padding-top: 0; }
  .page-refer #next .steps-route::before { display: none; }
  .page-refer .steps-route > .ep-step { display: grid; grid-template-columns: auto 1fr; align-items: baseline; align-content: start; gap: .5mm 2mm; padding: 1.5mm 0 0; background: none; border: 0; border-top: 1.5pt solid var(--navy); border-radius: 0; box-shadow: none; }
  .page-refer .steps-route .num { position: static; display: inline; width: auto; height: auto; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 13pt; }
  .page-refer .steps-route .num::after { display: none; }
  .page-refer .ep-step .card-title { font-size: 10.5pt; }
  .page-refer .ep-step .card-body { grid-column: 1 / -1; font-size: 9.5pt; line-height: 1.35; }
  /* Contact: the QR code on the right with the address beside it, phone and email on the left */
  .page-refer #contact-referrers { color: var(--ink); }
  .page-refer #contact-referrers .container { display: flow-root; }
  .page-refer #contact-referrers .container > * + * { margin-top: 2mm; }
  .page-refer .print-qr { display: flex; float: right; align-items: center; gap: 3mm; margin: 0 0 0 6mm; }
  .page-refer .print-qr img { flex: none; width: 26mm; height: 26mm; }
  .page-refer .print-qr p { margin: 0; font-size: 9.5pt; line-height: 1.4; color: var(--ink); }
  .page-refer .print-qr strong { white-space: nowrap; color: var(--navy); }
  .page-refer #contact-referrers .lead { font-size: 9.5pt; line-height: 1.35; }
  .page-refer .direct-lines { justify-content: flex-start; gap: 0 8mm; text-align: left; }
  .page-refer .direct-line { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: 14pt; color: var(--navy); text-decoration: none; }
}