/* ==========================================================================
   Infinity Assistance
   Every colour, font and measure is a token in :root and nowhere else, so
   swapping in a real brand later is one block rather than a search-and-replace.

   The palette is taken from the client's own logo: deep plum #4B2949 is the
   wordmark, the tan is the ribbon. Contrast note: --gold is a FILL colour
   (3.34:1 on white — fine for an icon, not for text) and --gold-text is its
   darkened sibling for TEXT (5.74 on paper, 5.26 on mist, 5.30 on cream). On
   the dark brand band that flips: --gold-on-dark is 6.83:1 against --brand,
   where the darkened one would be the wrong way round. Do not collapse the
   three into one value.
   ========================================================================== */

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-latin.woff2') format('woff2');
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/opensans-latin.woff2') format('woff2');
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

:root {
	--brand:        #4B2949;
	--brand-700:    #351D34;
	--brand-050:    #F5EFF4;
	--gold:         #B8814F;
	--gold-text:    #8A5C33;
	--gold-on-dark: #E0BB94;
	--amber:        #C0553A;

	--ink:    #241A28;
	--slate:  #5E5566;
	--paper:  #FFFFFF;
	--mist:   #F7F4F8;
	--cream:  #FBF5EF;
	--line:   #E6DDE7;

	--display: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--body:    'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

	--maxw:   1160px;
	--narrow: 780px;
	--gutter: 22px;
	--radius: 14px;
	--radius-lg: 22px;

	--shadow:    0 1px 2px rgba(36, 26, 40, .06), 0 8px 24px rgba(36, 26, 40, .07);
	--shadow-lg: 0 2px 6px rgba(36, 26, 40, .07), 0 18px 44px rgba(36, 26, 40, .12);

	--step: clamp(56px, 7vw, 96px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
	font-family: var(--display);
	color: var(--ink);
	line-height: 1.15;
	letter-spacing: -.004em;
	margin: 0 0 .5em;
	text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.35rem); font-weight: 700; }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.5vw, 2.35rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); font-weight: 700; }

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

a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-700); }

:focus-visible {
	outline: 3px solid var(--gold-text);
	outline-offset: 2px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--brand); color: #fff;
	padding: 12px 20px; border-radius: 0 0 8px 0; font-weight: 700;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: calc(var(--maxw) + (var(--gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--narrow) + (var(--gutter) * 2)); }

.section { padding-block: var(--step); }
.section--tight { padding-block: calc(var(--step) * .62); }

.lede {
	font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem);
	color: var(--slate);
	max-width: 62ch;
}

.eyebrow {
	font-family: var(--display);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold-text);
	margin: 0 0 .7em;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	font-family: var(--display); font-weight: 700; font-size: .97rem;
	padding: 13px 24px;
	border-radius: 999px;
	border: 2px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--lg { padding: 16px 32px; font-size: 1.03rem; }

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-700); color: #fff; }

.btn--accent { background: var(--gold); color: #fff; }
.btn--accent:hover { background: var(--gold-text); color: #fff; }

.btn--ghost { border-color: var(--brand); color: var(--brand); background: transparent; }
.btn--ghost:hover { background: var(--brand); color: #fff; }

/* On a dark band the ghost button has to invert or it disappears. */
.band--dark .btn--ghost { border-color: rgba(255,255,255,.75); color: #fff; }
.band--dark .btn--ghost:hover { background: #fff; color: var(--brand); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* --------------------------------------------------------------------------
   Top bar + header
   -------------------------------------------------------------------------- */
.topbar {
	background: var(--brand-700);
	color: #EFE6EE;
	font-size: .84rem;
}
.topbar__inner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 6px 22px; padding-block: 8px;
}
.topbar p { margin: 0; }
.topbar__note { color: #CDBECC; }
.topbar__contact { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.topbar__link { color: #fff; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.topbar__link:hover { color: #fff; text-decoration: underline; }
@media (max-width: 640px) { .topbar__note { display: none; } }

.site-header {
	position: sticky; top: 0; z-index: 60;
	background: rgba(255,255,255,.94);
	backdrop-filter: saturate(1.4) blur(8px);
	border-bottom: 1px solid var(--line);
}
.nav-inner {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	min-height: 78px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand__img { display: block; height: 46px; width: auto; }
@media (max-width: 420px) { .brand__img { height: 38px; } }

.primary-nav { display: flex; align-items: center; gap: 26px; }
.primary-nav .menu { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.primary-nav .menu a {
	font-family: var(--display); font-weight: 600; font-size: .96rem;
	color: var(--ink); text-decoration: none; padding-block: 6px;
	border-bottom: 2px solid transparent;
}
.primary-nav .menu a:hover { color: var(--brand); border-bottom-color: var(--brand); }
.primary-nav .current-menu-item > a { color: var(--brand); border-bottom-color: var(--brand); }

.nav-toggle {
	display: none;
	width: 46px; height: 46px;
	align-items: center; justify-content: center;
	background: var(--brand-050); border: 1px solid var(--line); border-radius: 12px;
	cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
	display: block; width: 20px; height: 2px; background: var(--brand); border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* Breakpoint set by measuring the real drawer, not by guessing: five links plus
   a CTA stop fitting beside the wordmark just under 1000px. */
@media (max-width: 1000px) {
	.nav-toggle { display: inline-flex; }
	.primary-nav {
		position: absolute; inset: 100% 0 auto 0;
		flex-direction: column; align-items: stretch; gap: 0;
		background: #fff; border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow-lg);
		padding: 8px var(--gutter) 20px;
		display: none;
	}
	.primary-nav.is-open { display: flex; }
	.primary-nav .menu { flex-direction: column; align-items: stretch; gap: 0; }
	.primary-nav .menu a { display: block; padding: 14px 2px; border-bottom: 1px solid var(--line); }
	.primary-nav .menu a:hover { border-bottom-color: var(--line); }
	.nav-cta { margin-top: 16px; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(1100px 460px at 88% -8%, rgba(184,129,79,.16), transparent 62%),
		radial-gradient(760px 420px at 4% 108%, rgba(75,41,73,.13), transparent 60%),
		linear-gradient(180deg, var(--mist) 0%, var(--paper) 100%);
	padding-block: clamp(52px, 7vw, 96px) clamp(56px, 7.5vw, 104px);
	border-bottom: 1px solid var(--line);
}
/* The hero's two columns are a core/columns block so the client can edit them.
   Core sets its own gap, which is too tight at this scale. */
.hero .wp-block-columns { gap: clamp(30px, 4vw, 58px); align-items: center; }

.hero h1 { margin-bottom: .35em; }
.hero .lede { max-width: 56ch; }

/* The logo tile stands in for photography, which the client has not supplied.
   It is decorative and hidden from assistive technology.

   The tile is LIGHT on purpose. The obvious move is a deep plum tile for weight
   against the white hero, but the logo's own wordmark is deep plum, so it would
   need the lightened reverse artwork and the client would be looking at a
   washed-out version of the brand they just sent. A cream-to-plum-tint wash
   with a hairline and the large shadow carries enough weight, and the logo
   keeps its real colours. */
.hero__mark {
	display: grid; place-items: center;
	aspect-ratio: 1 / .82;
	border-radius: var(--radius-lg);
	background: linear-gradient(150deg, var(--cream) 0%, var(--brand-050) 55%, #EFE2D6 130%);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-lg);
	padding: 9%;
}
.hero__mark img { width: 100%; height: auto; display: block; }
@media (max-width: 899px) { .hero__mark { display: none; } }

.hero__trust {
	display: flex; flex-wrap: wrap; gap: 10px 26px;
	margin-top: 30px; padding-top: 24px;
	border-top: 1px solid var(--line);
	list-style: none; padding-inline: 0;
}
.hero__trust li {
	display: flex; align-items: center; gap: 9px;
	font-size: .92rem; font-weight: 600; color: var(--slate);
}
.hero__trust li::before {
	content: ''; flex: none; width: 20px; height: 20px; border-radius: 50%;
	background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* --------------------------------------------------------------------------
   Page header (inner pages)
   -------------------------------------------------------------------------- */
.page-head {
	background: linear-gradient(180deg, var(--brand-050) 0%, var(--paper) 100%);
	border-bottom: 1px solid var(--line);
	padding-block: clamp(34px, 4.4vw, 58px);
}

.crumbs { font-size: .85rem; margin-bottom: 14px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: '/'; margin-right: 6px; color: #9A8FA0; }
.crumbs a { color: var(--slate); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   Bands
   -------------------------------------------------------------------------- */
.band--mist  { background: var(--mist); }
.band--cream { background: var(--cream); }
.band--dark  { background: var(--brand); color: #F0E9EF; }
.band--dark h1, .band--dark h2, .band--dark h3 { color: #fff; }
.band--dark .eyebrow { color: var(--gold-on-dark); }
.band--dark .lede { color: #CDBECC; }
.band--dark a { color: #fff; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card-grid {
	display: grid;
	gap: 22px;
	list-style: none; margin: 0; padding: 0;
	grid-template-columns: 1fr;
}
/* Explicit column counts rather than auto-fit: six cards on a 1160px column
   auto-fit into a 4 + 2 split, which reads as a mistake rather than a grid. */
@media (min-width: 660px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
/* WordPress emits `:where(.wp-block-group) > * + * { margin-block-start: <gap> }`,
   which pushes every grid item except the first down by the block gap, so no row
   of cards is ever level. Zero it on the grid container itself. */
.card-grid > * + * { margin-block-start: 0 !important; }

@media (min-width: 1000px) {
	.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
	.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px 26px 30px;
	box-shadow: var(--shadow);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #DDCFDC; }
.card__title { margin-bottom: .4em; }
/* A single-line card title is a 23px-tall link — one pixel under WCAG 2.2's
   24px minimum target size, which measure.mjs flags. Vertical padding on an
   INLINE element grows its hit box without touching the line box, so this
   fixes the target with no layout shift. Do not swap it for a line-height
   change: that moves every card title. */
.card__title a { text-decoration: none; color: var(--ink); padding-block: 3px; }
.card__title a:hover { color: var(--brand); }
.card__body { color: var(--slate); font-size: .97rem; margin-bottom: .8em; }
.card__meta {
	font-size: .78rem; font-weight: 700; letter-spacing: .04em;
	text-transform: uppercase; color: var(--gold-text); margin: 0;
}

.band--mist .card, .band--cream .card { background: var(--paper); }

/* --------------------------------------------------------------------------
   Icons — drawn from a CLASS via ::before, never a shortcode, so they render
   identically in the block editor and on the page.
   -------------------------------------------------------------------------- */
.card__icon, .svc__icon {
	display: grid; place-items: center;
	width: 52px; height: 52px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--brand) 0%, var(--gold-text) 100%);
	margin-bottom: 18px;
	flex: none;
}
.card__icon::before, .svc__icon::before {
	content: '';
	width: 26px; height: 26px;
	background: #fff;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
}
.icon-daily::before     { -webkit-mask-image: var(--m-heart);     mask-image: var(--m-heart); }
.icon-community::before { -webkit-mask-image: var(--m-users);     mask-image: var(--m-users); }
.icon-household::before { -webkit-mask-image: var(--m-home);      mask-image: var(--m-home); }
.icon-transport::before { -webkit-mask-image: var(--m-car);       mask-image: var(--m-car); }
.icon-skills::before    { -webkit-mask-image: var(--m-spark);     mask-image: var(--m-spark); }

:root {
	--m-heart:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1L12 21l7.7-7.7 1.1-1a5.5 5.5 0 0 0 0-7.7z'/%3E%3C/svg%3E");
	--m-users:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
	--m-home:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
	--m-car:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17h14M6.5 17V9.8L8 6h8l1.5 3.8V17'/%3E%3Cpath d='M4 12h16'/%3E%3Ccircle cx='7.5' cy='17' r='1.6'/%3E%3Ccircle cx='16.5' cy='17' r='1.6'/%3E%3C/svg%3E");
	--m-spark:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 14.2 9l6.5 2.2-6.5 2.2L12 20l-2.2-6.6L3.3 11.2 9.8 9z'/%3E%3C/svg%3E");
	--m-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-3.6 8-10V5.2L12 2 4 5.2V12c0 6.4 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	--m-phone:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
	--m-mail:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2.5 6.5 9.5 7 9.5-7'/%3E%3C/svg%3E");
	--m-pin:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 1 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	--m-doc:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E");
}

/* Inline glyphs in the top bar and footer, tinted to the current text colour. */
.i {
	display: inline-block; width: 15px; height: 15px;
	background: currentColor;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
	vertical-align: -2px;
}
.i-phone { -webkit-mask-image: var(--m-phone); mask-image: var(--m-phone); }
.i-mail  { -webkit-mask-image: var(--m-mail);  mask-image: var(--m-mail); }

/* --------------------------------------------------------------------------
   Services detail
   -------------------------------------------------------------------------- */
.svc-list { display: grid; gap: 20px; }
.svc {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(26px, 3.2vw, 40px);
	scroll-margin-top: 110px;
}
.svc--alt { background: var(--mist); }
.svc__head { display: flex; align-items: flex-start; gap: 18px; }
.svc__icon { margin-bottom: 0; }
.svc__title { margin: 0 0 .2em; }
.svc__meta {
	margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .05em;
	text-transform: uppercase; color: var(--gold-text);
}
.svc__summary { margin-top: 18px; color: var(--slate); max-width: 70ch; }
.svc__cta { margin-top: 22px; }

.ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 700px) { .ticks { grid-template-columns: 1fr 1fr; gap: 10px 28px; } }
.ticks li { position: relative; padding-left: 30px; color: var(--ink); font-size: .97rem; }
.ticks li::before {
	content: ''; position: absolute; left: 0; top: .3em;
	width: 19px; height: 19px; border-radius: 50%;
	background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */
.steps {
	display: grid; gap: 22px; list-style: none; margin: 0; padding: 0;
	grid-template-columns: 1fr;
	counter-reset: step;
}
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps > * + * { margin-block-start: 0 !important; }
.step {
	background: var(--paper); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 28px 26px;
	box-shadow: var(--shadow);
}
.step__num {
	display: grid; place-items: center;
	width: 42px; height: 42px; border-radius: 50%;
	background: linear-gradient(135deg, var(--brand) 0%, var(--gold-text) 100%); color: #fff;
	font-family: var(--display); font-weight: 800; font-size: 1.1rem;
	margin-bottom: 16px;
}
.step__title { margin-bottom: .35em; }
.step__body { color: var(--slate); font-size: .97rem; margin: 0; }

/* --------------------------------------------------------------------------
   Contact panel
   -------------------------------------------------------------------------- */
.nap { display: grid; gap: 20px; }
.nap__row { display: flex; gap: 15px; align-items: flex-start; }
.nap__icon {
	flex: none; width: 42px; height: 42px; border-radius: 12px;
	background: var(--brand-050);
	display: grid; place-items: center;
	position: relative;
}
.nap__icon::before {
	content: ''; width: 20px; height: 20px; background: var(--brand);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
}
.nap__icon.i-phone::before { -webkit-mask-image: var(--m-phone); mask-image: var(--m-phone); }
.nap__icon.i-mail::before  { -webkit-mask-image: var(--m-mail);  mask-image: var(--m-mail); }
.nap__icon.i-pin::before   { -webkit-mask-image: var(--m-pin);   mask-image: var(--m-pin); }
.nap__icon.i-doc::before   { -webkit-mask-image: var(--m-doc);   mask-image: var(--m-doc); }
/* .i sets its own size for inline use; inside .nap the tile controls it. */
.nap__icon.i { width: 42px; height: 42px; background: var(--brand-050); }

.nap__label {
	display: block; font-size: .74rem; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--slate);
}
.nap__value { display: block; font-weight: 700; color: var(--ink); text-decoration: none; font-size: 1.03rem; }
a.nap__value:hover { color: var(--brand); text-decoration: underline; }
.nap__note { display: block; font-size: .88rem; color: var(--slate); margin-top: 3px; }

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.form-wrap { scroll-margin-top: 110px; }
.form {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(24px, 3vw, 36px);
	box-shadow: var(--shadow);
}
.field-row { display: grid; gap: 0 20px; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }

.field { margin: 0 0 18px; }
.field label {
	display: block; font-family: var(--display); font-weight: 600;
	font-size: .92rem; color: var(--ink); margin-bottom: 6px;
}
.req { color: var(--amber); }

.field input, .field select, .field textarea {
	width: 100%;
	font-family: var(--body); font-size: 1rem; color: var(--ink);
	padding: 12px 14px;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	background-color: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus {
	border-color: var(--brand); box-shadow: 0 0 0 3px rgba(75,41,73,.16); outline: none;
}

/* The caret is painted with background-image, so this must never be collapsed
   into the `background` shorthand — the shorthand resets background-image and
   the chevron silently disappears. */
.field select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355607A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 17px;
	padding-right: 42px;
}

.hp { position: absolute; left: -9999px; }

.form__privacy { font-size: .88rem; color: var(--slate); }
.form__submit { margin: 22px 0 0; }

.notice { border-radius: var(--radius); padding: 20px 22px; margin-bottom: 24px; }
.notice h2 { font-size: 1.15rem; margin-bottom: .3em; }
.notice p { margin: 0; }
.notice--ok  { background: #E7F6F3; border: 1px solid #A8DED6; }
.notice--ok h2 { color: #0A5E58; }
.notice--bad { background: #FDECE7; border: 1px solid #F3C3B2; }
.notice--bad h2 { color: #9B3410; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--brand-700); color: #CDBECC; margin-top: 0; }
.footer__grid {
	display: grid; gap: 36px 30px;
	padding-block: clamp(46px, 5vw, 68px);
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.footer__col--brand { grid-column: span 1; }
@media (min-width: 900px) { .footer__col--brand { grid-column: span 1; max-width: 320px; } }

.footer .brand__img { height: 44px; margin-bottom: 16px; }
.footer__blurb { font-size: .94rem; color: #CDBECC; }
.footer__abn { font-size: .85rem; color: #B09FB0; margin: 0; }

.footer__head {
	font-family: var(--display); font-size: .82rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: #fff; margin: 0 0 16px;
}
.footer__menu, .footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__menu a, .footer__contact a { color: #E2D6E1; text-decoration: none; font-size: .95rem; }
.footer__menu a:hover, .footer__contact a:hover { color: #fff; text-decoration: underline; }
.footer__contact li { font-size: .95rem; color: #CDBECC; }
.footer__cta { margin-top: 20px; }

.footer__bar { border-top: 1px solid rgba(255,255,255,.15); }
.footer__bar-inner {
	display: flex; flex-wrap: wrap; gap: 8px 24px;
	justify-content: space-between; padding-block: 20px;
	font-size: .85rem; color: #B09FB0;
}
.footer__bar p { margin: 0; }
.footer__legal { display: flex; gap: 10px; flex-wrap: wrap; }
.footer__legal a { color: #E2D6E1; }

/* --------------------------------------------------------------------------
   Long-form content (privacy policy and any page the client writes)
   -------------------------------------------------------------------------- */
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; color: var(--slate); }
.prose li { margin-bottom: .5em; }
.prose a { font-weight: 600; }

.result-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 20px; }
.result-list a { font-family: var(--display); font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.result-list p { color: var(--slate); margin: .3em 0 0; }

/* --------------------------------------------------------------------------
   Block editor bridges
   WordPress force-centres every child of a constrained group with
   `margin-left/right:auto !important`. Zeroing the margin is also wrong: the
   containing block is the padded full-width group, not the content column, so
   the element lands further left than the heading above it. This reproduces
   WordPress's own centring maths instead.
   -------------------------------------------------------------------------- */
.align-left-in-group,
.is-layout-constrained > .lede {
	margin-left: max(0px, calc((100% - var(--maxw)) / 2)) !important;
	margin-right: 0 !important;
}

/* Inside a column (the hero) the containing block IS the column, so the maths
   above would push the lede right by half the leftover width. Columns are a
   flex layout, not a constrained one, so the selector above does not reach
   them — but be explicit, because a client who wraps a column's contents in a
   Group block would turn one into the other. */
.wp-block-column .lede,
.wp-block-column .is-layout-constrained > .lede {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.wp-block-group.is-layout-constrained > .alignwide { max-width: var(--maxw); }

/* --------------------------------------------------------------------------
   Wordmark (placeholder brand)
   The mark is inline SVG so it inherits currentColor, and the name is real HTML
   text so it uses the same @font-face as the headings. A logo uploaded under
   Site Identity replaces the whole thing.
   -------------------------------------------------------------------------- */
.wordmark {
	--wm-accent: var(--gold);
	display: inline-flex; align-items: center; gap: 11px;
	color: var(--brand);
}
.wordmark__mark { width: 46px; height: 29px; flex: none; }
.wordmark__text {
	display: grid; line-height: 1;
	font-family: var(--display);
}
.wordmark__text strong {
	font-size: 1.31rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink);
}
.wordmark__text span {
	font-size: .705rem; font-weight: 600; letter-spacing: .245em;
	text-transform: uppercase; color: var(--gold-text); margin-top: 4px;
}
.wordmark--reverse { --wm-accent: var(--gold-on-dark); color: #fff; }
.wordmark--reverse .wordmark__text strong { color: #fff; }
.wordmark--reverse .wordmark__text span { color: var(--gold-on-dark); }

@media (max-width: 420px) {
	.wordmark__mark { width: 38px; height: 24px; }
	.wordmark__text strong { font-size: 1.12rem; }
	.wordmark__text span { font-size: .63rem; letter-spacing: .2em; }
}

/* --------------------------------------------------------------------------
   Core button block, styled to match .btn
   Page CTAs are core/buttons rather than hand-written anchors so the client can
   change the label and destination in the editor.
   -------------------------------------------------------------------------- */
.wp-block-buttons { gap: 12px; }
.wp-block-button__link {
	font-family: var(--display);
	font-weight: 700;
	font-size: .97rem;
	padding: 14px 26px;
	border-radius: 999px;
	border: 2px solid transparent;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.wp-block-button__link:hover { transform: translateY(-1px); }

.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--brand);
	color: #fff;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: var(--brand-700);
	color: #fff;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--brand);
	color: var(--brand);
	background-color: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--brand);
	color: #fff;
}

/* On the dark band an outline button in brand colours is invisible. */
.band--dark .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--gold);
	color: #fff;
}
.band--dark .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: #fff;
	color: var(--brand);
}
.band--dark .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: rgba(255,255,255,.75);
	color: #fff;
}
.band--dark .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: #fff;
	color: var(--brand);
}

/* --------------------------------------------------------------------------
   FAQ (core/details)
   -------------------------------------------------------------------------- */
.wp-block-details {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px 24px;
}
.wp-block-details + .wp-block-details { margin-top: 14px; }
.wp-block-details summary {
	font-family: var(--display); font-weight: 700; font-size: 1.03rem;
	color: var(--ink); cursor: pointer;
}
.wp-block-details summary:hover { color: var(--brand); }
.wp-block-details p { color: var(--slate); margin-top: 14px; }

/* --------------------------------------------------------------------------
   Value list used on the About page
   -------------------------------------------------------------------------- */
.value-grid {
	display: grid; gap: 26px 36px; list-style: none; margin: 0; padding: 0;
	grid-template-columns: 1fr;
}
/* Two across, not four: at four the headings wrap mid-phrase. */
@media (min-width: 720px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
.value-grid > * + * { margin-block-start: 0 !important; }
.value {
	border-left: 3px solid var(--gold);
	padding: 4px 0 4px 20px;
}
.value h3 { margin-bottom: .35em; }
.value p { color: var(--slate); font-size: .97rem; margin: 0; }

/* --------------------------------------------------------------------------
   Inside a column
   Columns are narrower than a full section, so the section-scale heading and
   the two-up tick list both need pulling back. These are viewport media
   queries, not container queries, so they cannot know they are in a 40% column
   — the class does.
   -------------------------------------------------------------------------- */
.wp-block-column h2 { font-size: clamp(1.45rem, 1.2rem + .9vw, 1.85rem); }
.wp-block-column .ticks { grid-template-columns: 1fr; }

/* --------------------------------------------------------------------------
   Card internals
   Push the NDIS budget line to the bottom so it sits on one line across a row
   regardless of how long each card's title and summary run.
   -------------------------------------------------------------------------- */
.card { display: flex; flex-direction: column; }
.card__body { flex: 1 1 auto; }
.card__meta { margin-top: auto; padding-top: 4px; }

/* --------------------------------------------------------------------------
   Tap targets
   The top bar and footer links measured at ~22px tall, under the 24px minimum.
   Padding on the inline box is enough; the visual layout does not move.
   -------------------------------------------------------------------------- */
.topbar__link,
.footer__menu a,
.footer__contact a,
.footer__legal a,
.crumbs a { display: inline-block; padding-block: 4px; }
.topbar__link { display: inline-flex; }

/* --------------------------------------------------------------------------
   AA fix, measured not guessed: white on --gold #B8814F is 3.34:1, under the
   4.5 small-text minimum. Every gold button carrying a white label therefore
   uses --gold-text #8A5C33 as its FILL (5.74:1 with white), while --gold stays
   untouched for tick marks and icon tiles, which are graphics and need only 3:1.
   contrast.mjs proves it; a checker left on the old token would report the fix
   as a failure.
   -------------------------------------------------------------------------- */
.btn--accent { background: var(--gold-text); }
.btn--accent:hover { background: #6F4926; }

.band--dark .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--gold-text);
}

/* --------------------------------------------------------------------------
   Support Coordination icon (added when the client confirmed the service set)
   -------------------------------------------------------------------------- */
:root {
	--m-compass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpolygon points='16.2 7.8 13.9 13.9 7.8 16.2 10.1 10.1'/%3E%3C/svg%3E");
}
.icon-compass::before { -webkit-mask-image: var(--m-compass); mask-image: var(--m-compass); }