/*
Theme Name: Wellness Directory
Theme URI: https://melbourne-wellness-directory.test
Author: ArsenalTech Pvt. Ltd. 
Description: Presentation-only companion theme for the Wellness Directory Core plugin. Templates and assets, no business logic — all directory data is read through the plugin's helper functions, and the design tokens come from the plugin's stylesheet so the theme and the directory screens stay one product.
Version: 0.4.3
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wellness-directory
Tags: directory, business, custom-menu, translation-ready
*/

/* Tokens come from the plugin's wd-front.css, which this stylesheet depends
   on. The fallbacks below keep the theme presentable if it is ever activated
   without the plugin. */

/* Element defaults sit in the `base` layer that wd-front.css opens, below the
   plugin's `components` and `utilities`. Unlayered CSS beats layered CSS at any
   specificity, so an unlayered `a { color }` here would repaint the label of
   every plugin component built on a link � buttons, tabs, chips � and a white
   label on a blue fill would come out blue on blue. Theme *component* rules
   stay unlayered below, where they are meant to win. */
@layer base {

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

body {
	margin: 0;
	background: var(--wd-paper, #f5f8fc);
	color: var(--wd-text, #2e3d50);
	font-family: var(--wd-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	color: var(--wd-ink, #0a1120);
	line-height: 1.2;
	letter-spacing: 0;
}

/* a {
	color: var(--wd-primary, #2b5ca1);
} */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--wd-primary, #2b5ca1);
	outline-offset: 2px;
}

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

/* Touch: no grey flash over whatever was tapped, and no double-tap-to-zoom
   wait on controls — two of the things that make a phone page feel like a
   document rather than an app. Pressed states and focus rings still show. */
html {
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

a,
button,
summary,
label,
input,
select,
textarea {
	touch-action: manipulation;
}

/* iOS zooms the page into any field set under 16px when it is focused, and
   leaves it zoomed. Important in the base layer outranks every component's
   own size; iOS-only, so Android and desktop keep their designed sizes. */
@supports (-webkit-touch-callout: none) {
	input,
	select,
	textarea {
		font-size: max(16px, 1em) !important;
	}
}

}

.wd-container {
	width: 100%;
	max-width: 1510px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 5vw, 2.5rem);
}

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------ */

.wd-site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	border-bottom: 1px solid var(--wd-border, #dbe5f1);
	background: color-mix(in srgb, var(--wd-cream, #fff) 94%, transparent);
	box-shadow: 0 10px 30px rgba(10, 17, 32, 0.04);
	backdrop-filter: blur(18px);
}

.wd-site-header__inner {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(0.65rem, 1.7vw, 1.2rem);
	min-height: 4rem;
	padding-block: 0.55rem;
}

/* The search box and the account/list-business actions travel together as one
   group, pinned to the end of the bar — the nav's centring below measures
   against this group's width, not against search and actions separately. */
.wd-site-header__right {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(0.5rem, 1.2vw, 0.85rem);
	margin-left: auto;
	min-width: 0;
}

/* True centring — not "centred in whatever space is left after the logo and
   the actions" — needs the nav taken out of the flex flow, because the search
   field beside it changes width every time the header sticks or unsticks and
   a flex-based centre would jump with it. Held back until there is reliably
   enough width either side of a centred nav to clear the logo and the search
   group without touching either. */
@media (min-width: 1200px) {
	.wd-nav--primary {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
}

.wd-site-title {
	margin: 0;
	flex: 0 0 auto;
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0;
}

/* On the brand itself, not on `.wd-site-title a`: the footer prints the same
   brand outside the title paragraph, and without the flex box the logo plate
   is a block that fills the whole footer column. */
.wd-site-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wd-ink, #0a1120);
	text-decoration: none;
}

.wd-site-brand__mark {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: var(--wd-radius-sm, 8px);
	background: linear-gradient(140deg, var(--wd-primary, #2b5ca1), var(--wd-primary-dark, #204579));
	color: var(--wd-on-primary, #fff);
	box-shadow: var(--wd-shadow-sm, 0 1px 2px rgba(10, 17, 32, 0.06));
	overflow: hidden;
}

/* No plate: the logo is a transparent PNG and sits straight on the header. */
.wd-site-brand__logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

/* Sized off the image, not the wrapper: a percentage height has nothing
   definite to resolve against here and the mark overflows. */
/* One curve for every screen: 2.3rem on a phone up to 3.2rem on a desktop,
   which is as tall as the 4rem header row takes without the bar growing. */
.wd-site-brand__img {
	display: block;
	width: auto;
	height: clamp(2.6rem, 4.9vw, 3.75rem);
	max-width: min(17rem, 52vw);
	object-fit: contain;
}

/* One lockup per ground. The dark build repaints the navy middle word, which
   is invisible on the dark theme and wrong on the light one. */
.wd-site-brand__img--dark {
	display: none;
}

:root[data-theme="dark"] .wd-site-brand__img--light {
	display: none;
}

:root[data-theme="dark"] .wd-site-brand__img--dark {
	display: block;
}

.wd-site-brand__mark {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0;
}

.wd-site-brand__name {
	white-space: nowrap;
	max-width: 18rem;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wd-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wd-nav a {
	color: var(--wd-text, #2e3d50);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.wd-nav a:hover,
.wd-nav a:focus-visible {
	color: var(--wd-primary-dark, #204579);
}

.wd-nav .current-menu-item > a {
	color: var(--wd-primary-dark, #204579);
}

.wd-site-header__actions > .wd-button--ghost {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

.wd-site-header__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	font-size: 0.95rem;
}

/* ---------------------------------------------------------------------------
 * Main
 * ------------------------------------------------------------------------ */

.wd-main {
	padding-block: clamp(2rem, 4vw, 3.25rem);
	min-height: 60vh;
}

/* Sticky footer: on pages with little content (e.g. a short owner-dashboard
   tab) the footer ended mid-viewport with a strip of page background below
   it. The body is the column and the main absorbs the spare height, so the
   footer always rests on the bottom of the screen. The footer's own top
   margin is untouched, so long pages look exactly as before. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wd-main {
	flex: 1 0 auto;
	width: 100%;
}

.wd-site-header,
.wd-site-footer {
	flex: none;
	width: 100%;
}

/* The inner-page titlebar: the same gradient band as the home hero, one third
   the height, directly under a solid header. Every screen that prints a page
   heading gets it, so an archive, a term page and an ordinary page open the
   same way. Its ground is pinned to the light-mode brand values for the same
   reason the hero's is — it is always a dark surface. */
.wd-page-header {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-block: 0 clamp(1.75rem, 4vw, 2.75rem);
	padding-block: clamp(1.85rem, 4.5vw, 3rem);
	padding-inline: clamp(1rem, 5vw, 2.5rem);
	color: #fff;
	background:
		radial-gradient(80% 140% at 10% 0%, rgba(184, 50, 128, 0.3), transparent 60%),
		linear-gradient(135deg, #2b5ca1 0%, #0a3a8f 52%, #0a1120 100%);
}

/* The heading and its line of orientation stay on the container's grid even
   though the band behind them does not. */
.wd-page-header > * {
	max-width: 1510px;
	margin-inline: auto;
}

.wd-page-header h1 {
	margin: 0 0 0.4rem;
	color: #fff;
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	font-weight: 800;
}

.wd-page-header p {
	margin: 0;
	color: color-mix(in srgb, #fff 78%, transparent);
	max-width: 68ch;
}

.wd-page-header a {
	color: #fff;
}

/* A titlebar sits flush under the header, so the main column's top padding
   would be a gap between two coloured bands. */
.wd-main:has(.wd-page-header) {
	padding-top: 0;
}

.wd-entry + .wd-entry {
	margin-top: 2rem;
	border-top: 1px solid var(--wd-border, #dbe5f1);
	padding-top: 2rem;
}

.wd-entry__title {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
}

.wd-entry__meta {
	margin: 0 0 0.75rem;
	color: var(--wd-text-muted, #657489);
	font-size: 0.9rem;
}

.wd-entry__content {
	max-width: 68ch;
}

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * Footer
 *
 * Two shapes. The full one is a four-part grid — brand and a search box, two
 * columns of the directory's own depth, and a card asking for a listing — on a
 * dark ground so the page ends somewhere rather than fading out. The minimal
 * one, for anybody signed in, is the bottom bar and nothing else.
 * ------------------------------------------------------------------------ */

.wd-site-footer {
	position: relative;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.92rem;
	background:
		radial-gradient(ellipse 60% 70% at 10% 0%, rgba(var(--wd-primary-rgb), 0.35), transparent 62%),
		radial-gradient(ellipse 50% 60% at 92% 100%, rgba(var(--wd-tertiary-rgb), 0.22), transparent 60%),
		#0a1120;
}

/* The hairline that separates the page from the footer, drawn in the brand
   rather than in grey, so the seam is deliberate. */
.wd-site-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: linear-gradient(90deg, var(--wd-primary), var(--wd-secondary), var(--wd-tertiary));
}

.wd-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.25fr) minmax(0, 1.2fr);
	gap: clamp(1.75rem, 4vw, 3.5rem);
	padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.75rem, 3vw, 2.5rem);
}

.wd-footer__brand .wd-site-brand {
	color: #fff;
}

.wd-footer__brand .wd-site-brand__name {
	color: #fff;
}

/* The footer's ground is the same near-black whichever theme the page is in,
   so it always takes the dark build of the lockup. The light build paints the
   middle word navy and that word simply vanishes down here — which is what the
   theme-level swap above cannot know, because it follows the page and not the
   surface the logo is actually sitting on. */
.wd-footer__brand .wd-site-brand__img--light {
	display: none;
}

.wd-footer__brand .wd-site-brand__img--dark {
	display: block;
}

/* And bigger than the header's: down here it is a sign-off, not a 4rem bar. */
.wd-footer__brand .wd-site-brand__img {
	height: clamp(3rem, 5.5vw, 4.25rem);
	max-width: min(19rem, 62vw);
}

.wd-footer__pitch {
	margin: 1rem 0 1.35rem;
	max-width: 40ch;
	color: rgba(255, 255, 255, 0.66);
	line-height: 1.6;
}

.wd-footer__search {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	max-width: 24rem;
	padding: 0.35rem 0.35rem 0.35rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--wd-radius-pill, 999px);
	background: rgba(255, 255, 255, 0.06);
}

.wd-footer__search svg {
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 0.55);
}

.wd-footer__search input {
	width: 100%;
	height: 2.35rem;
	border: 0;
	background: transparent;
	color: #fff;
	font: inherit;
	outline: none;
}

.wd-footer__search input::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

.wd-footer__search button {
	flex: 0 0 auto;
	height: 2.35rem;
	padding-inline: 1.1rem;
	border: 0;
	border-radius: var(--wd-radius-pill, 999px);
	background: var(--wd-primary);
	color: var(--wd-on-primary, #fff);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 160ms var(--wd-ease);
}

.wd-footer__search button:hover {
	background: var(--wd-primary-dark);
}

.wd-footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: 1.5rem 2rem;
}

.wd-footer__column h2 {
	margin: 0 0 0.75rem;
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.wd-footer__column ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wd-footer__column li + li {
	margin-top: 0.45rem;
}

.wd-footer__column a {
	color: rgba(255, 255, 255, 0.68);
	text-decoration: none;
	transition: color 140ms var(--wd-ease);
}

.wd-footer__column a:hover,
.wd-footer__column a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

/* For businesses: its four links read as one line, with the listing card
   under them rather than in a column of its own. */
.wd-footer__business {
	display: grid;
	align-content: start;
	gap: 1.5rem;
}

.wd-footer__column--inline ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem 1.1rem;
}

.wd-footer__column--inline li + li {
	margin-top: 0;
}

.wd-footer__cta {
	align-self: start;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--wd-radius-lg, 16px);
	background: linear-gradient(150deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
}

.wd-footer__cta-eyebrow {
	margin: 0 0 0.35rem;
	color: var(--wd-primary-neon, #4a81cf);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.wd-footer__cta h2 {
	margin: 0 0 0.5rem;
	color: #fff;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.25;
}

.wd-footer__cta p {
	margin: 0 0 1.1rem;
	color: rgba(255, 255, 255, 0.66);
	line-height: 1.55;
}

.wd-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	padding-block: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.85rem;
}

.wd-site-footer--minimal .wd-footer__bottom {
	border-top: 0;
}

.wd-footer__copy {
	margin: 0;
}

.wd-footer__minilinks,
.wd-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.15rem;
	margin: 0;
}

.wd-footer__legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wd-footer__minilinks a,
.wd-footer__legal a {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
}

.wd-footer__minilinks a:hover,
.wd-footer__legal a:hover {
	color: #fff;
}

.wd-footer__contact {
	margin-left: auto;
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
}

.wd-footer__contact:hover {
	color: #fff;
}

@media (max-width: 1020px) {

	.wd-footer__top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.wd-footer__business {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {

	.wd-footer__top {
		grid-template-columns: minmax(0, 1fr);
	}

	.wd-footer__contact {
		margin-left: 0;
	}

	/* One line per heading, so the two link columns start level. */
	.wd-footer__column h2 {
		letter-spacing: 0.06em;
	}

	/* For businesses: a two-by-two grid on the same 2rem gutter as the
	   columns above, instead of a wrapping line that left "Log in" on its
	   own, and a tighter listing card under it. */
	.wd-footer__business {
		gap: 1.1rem;
	}

	.wd-footer__column--inline ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.45rem 2rem;
	}

	.wd-footer__cta {
		padding: 1rem 1.1rem;
	}

	.wd-footer__cta h2 {
		font-size: 1.05rem;
	}

	.wd-footer__cta p {
		margin-bottom: 0.85rem;
		font-size: 0.88rem;
	}

	.wd-footer__cta .wd-button {
		min-height: 40px;
		padding: 0.5rem 1.1rem;
		font-size: 0.9rem;
	}
}

/* ---------------------------------------------------------------------------
 * Pagination
 * ------------------------------------------------------------------------ */

.wd-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: clamp(2rem, 5vw, 3rem);
}

.wd-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding-inline: 0.6rem;
	border: 1px solid var(--wd-border, #dbe5f1);
	border-radius: 999px;
	color: var(--wd-text, #2e3d50);
	text-decoration: none;
}

.wd-pagination .page-numbers:hover {
	border-color: var(--wd-mid, #a8b6c8);
}

.wd-pagination .page-numbers.current {
	background: var(--wd-primary, #2b5ca1);
	border-color: var(--wd-primary, #2b5ca1);
	color: var(--wd-on-primary, #fff);
}

/* ---------------------------------------------------------------------------
 * Utilities
 * ------------------------------------------------------------------------ */

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

.skip-link:focus {
	position: absolute;
	top: 8px;
	left: 8px;
	clip-path: none;
	width: auto;
	height: auto;
	padding: 10px 16px;
	background: var(--wd-cream, #fff);
	z-index: 100;
}

/* ---------------------------------------------------------------------------
 * Header: nav, search, account
 * ------------------------------------------------------------------------ */

.wd-site-header__inner {
	flex-wrap: nowrap;
}

.wd-nav--primary {
	flex: 0 1 auto;
	min-width: 0;
}

.wd-nav ul.wd-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A search box in the header is how somebody uses a directory. It shrinks
   before the navigation does, and disappears before the brand. Wrapped in a
   <details> so the same markup also answers the collapsed, icon-only shape
   the stuck header uses further down — see "header search, collapsed". */
.wd-headersearch-drop {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 19rem;
	min-width: 13rem;
	max-width: 29rem;
}

.wd-headersearch-drop > summary {
	list-style: none;
	cursor: pointer;
}

.wd-headersearch-drop > summary::-webkit-details-marker {
	display: none;
}

/* The icon trigger only exists for the collapsed, stuck-header shape; while
   the field is shown inline there is nothing to click. */
.wd-headersearch-drop__icon {
	display: none;
}

.wd-headersearch-drop__panel {
	width: 100%;
}

.wd-headersearch {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.wd-headersearch svg {
	position: absolute;
	left: 0.75rem;
	width: 1rem;
	height: 1rem;
	color: var(--wd-text-soft, #8a96a7);
	pointer-events: none;
}

.wd-headersearch input {
	width: 100%;
	height: 2.5rem;
	padding: 0 0.9rem 0 2.25rem;
	border: 1px solid var(--wd-border, #dbe5f1);
	border-radius: 999px;
	background: var(--wd-cream, #fff);
	color: inherit;
	font: inherit;
	font-size: 0.85rem;
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--wd-cream, #fff) 75%, transparent);
}

.wd-headersearch input:focus-visible {
	border-color: var(--wd-primary, #2b5ca1);
	outline: none;
	box-shadow: var(--wd-focus, 0 0 0 3px rgba(0, 194, 255, 0.3));
}

/* --- header search, collapsed --------------------------------------------
 *
 * Once the bar has scrolled solid there is no room to keep the full field
 * inline next to a centred nav and the account actions, so it folds down to
 * its icon; hovering, focusing or clicking it drops the same field below. The
 * `<details>` element already gives click-to-open and keyboard support for
 * free — the hover/focus rules below just add the second way in, and the
 * `[open]` state is also what wd-header.js's popup manager watches to close
 * this alongside the account and category menus.
 * ------------------------------------------------------------------------ */

.wd-site-header.is-stuck .wd-headersearch-drop {
	flex: 0 0 auto;
	min-width: 0;
	max-width: none;
}

.wd-site-header.is-stuck .wd-headersearch-drop__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--wd-border, #dbe5f1);
	border-radius: 999px;
	background: var(--wd-cream, #fff);
	color: var(--wd-text-soft, #8a96a7);
	transition: border-color 140ms var(--wd-ease), color 140ms var(--wd-ease);
}

.wd-site-header.is-stuck .wd-headersearch-drop__icon svg {
	width: 1.05rem;
	height: 1.05rem;
}

.wd-site-header.is-stuck .wd-headersearch-drop:hover .wd-headersearch-drop__icon,
.wd-site-header.is-stuck .wd-headersearch-drop:focus-within .wd-headersearch-drop__icon,
.wd-site-header.is-stuck .wd-headersearch-drop[open] .wd-headersearch-drop__icon {
	border-color: var(--wd-primary, #2b5ca1);
	color: var(--wd-primary, #2b5ca1);
}

.wd-site-header.is-stuck .wd-headersearch-drop__panel {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 0.75rem);
	z-index: 40;
	width: max(20rem, 100%);
	padding: 0.5rem;
	border: 1px solid var(--wd-border, #dbe5f1);
	border-radius: var(--wd-radius, 14px);
	background: var(--wd-cream, #fff);
	box-shadow: var(--wd-shadow-lg, 0 18px 48px rgba(10, 17, 32, 0.13));
}

.wd-site-header.is-stuck .wd-headersearch-drop:hover .wd-headersearch-drop__panel,
.wd-site-header.is-stuck .wd-headersearch-drop:focus-within .wd-headersearch-drop__panel,
.wd-site-header.is-stuck .wd-headersearch-drop[open] .wd-headersearch-drop__panel {
	display: block;
}

.wd-site-header__actions {
	margin-left: 0;
	flex: 0 0 auto;
}

/* The account menu is a <details>: it opens, closes and traps focus correctly
   with no script, and it still works if the script never loads. */
.wd-account {
	position: relative;
	z-index: 1;
}

.wd-account[open] {
	z-index: 60;
}

.wd-account > summary {
	display: grid;
	place-items: center;
	width: 2.55rem;
	min-width: 2.55rem;
	height: 2.55rem;
	min-height: 2.55rem;
	padding: 0;
	border: 1px solid var(--wd-border, #dbe5f1);
	border-radius: 50%;
	background: var(--wd-cream, #fff);
	cursor: pointer;
	list-style: none;
	font-size: 0.9rem;
	font-weight: 600;
}

.wd-account > summary::-webkit-details-marker {
	display: none;
}

.wd-account__avatar {
	display: grid;
	place-items: center;
	width: 2.05rem;
	height: 2.05rem;
	border-radius: 999px;
	background: var(--wd-primary, #2b5ca1);
	color: var(--wd-on-primary, #fff);
	font-size: 0.7rem;
	letter-spacing: 0.02em;
}

.wd-account__avatar img,
.wd-account__identity-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

.wd-account__name {
	display: none;
}

.wd-account__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 0.5rem);
	z-index: 40;
	width: min(13.5rem, calc(100vw - 2rem));
	padding: 0.65rem;
	border: 1px solid var(--wd-border, #dbe5f1);
	border-radius: 1rem;
	background: var(--wd-cream, #fff);
	box-shadow: 0 14px 34px rgba(20, 37, 64, 0.2);
}

.wd-account__panel::before {
	position: absolute;
	top: -7px;
	right: calc(1.275rem - 6px);
	width: 12px;
	height: 12px;
	border-top: 1px solid var(--wd-border, #dbe5f1);
	border-left: 1px solid var(--wd-border, #dbe5f1);
	background: var(--wd-cream, #fff);
	content: "";
	transform: rotate(45deg);
}

.wd-account__identity {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-width: 0;
	padding: 0.35rem 0.3rem 0.65rem;
	border-bottom: 1px solid var(--wd-border, #dbe5f1);
}

.wd-account__identity-avatar {
	display: grid;
	place-items: center;
	flex: 0 0 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--wd-primary, #2b5ca1);
	color: var(--wd-on-primary, #fff);
	font-size: 0.78rem;
	font-weight: 700;
}

.wd-account__identity-copy {
	display: grid;
	min-width: 0;
	line-height: 1.4;
}

.wd-account__identity-copy strong,
.wd-account__identity-copy > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wd-account__identity-copy strong {
	color: var(--wd-ink, #0a1120);
	font-size: 0.82rem;
	font-weight: 700;
}

.wd-account__identity-copy > span {
	color: var(--wd-text-muted, #657489);
	font-size: 0.75rem;
}

.wd-account__panel ul {
	margin: 0.5rem 0;
	padding: 0 0 0.5rem;
	border-bottom: 1px solid var(--wd-border, #dbe5f1);
	list-style: none;
}

.wd-account__panel a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-height: 2.35rem;
	padding: 0.45rem 0.65rem;
	border-radius: 0.55rem;
	color: var(--wd-text, #2e3d50);
	text-decoration: none;
	font-size: 0.82rem;
	font-weight: 500;
}

.wd-account__panel a:hover,
.wd-account__panel a:focus-visible {
	background: var(--wd-surface, #eaf1fb);
}

.wd-account__panel a[aria-current="page"] {
	background: #edf3fc;
	color: var(--wd-primary, #2b5ca1);
}

.wd-account__link-icon {
	flex: 0 0 1rem;
	width: 1rem;
	height: 1rem;
}

.wd-account__logout {
	min-height: 2.35rem;
	background: #fff2f3;
	color: #df2835 !important;
}

.wd-account__logout:hover,
.wd-account__logout:focus-visible {
	background: #ffe5e8 !important;
	color: #c71f2c !important;
}

/* The burger only exists below the breakpoint. */
.wd-burger {
	display: none;
	position: relative;
}

/* Phone-only copies of the header's theme switch and guest actions. */
.wd-burger__extras {
	display: none;
}

.wd-burger > summary {
	display: grid;
	place-items: center;
	width: 2.55rem;
	height: 2.55rem;
	border: 1px solid var(--wd-border, #dbe5f1);
	border-radius: var(--wd-radius-sm, 8px);
	background: var(--wd-cream, #fff);
	cursor: pointer;
	list-style: none;
}

.wd-burger > summary::-webkit-details-marker {
	display: none;
}

.wd-burger__bars,
.wd-burger__bars::before,
.wd-burger__bars::after {
	display: block;
	width: 1.05rem;
	height: 2px;
	border-radius: 2px;
	background: var(--wd-ink, #0a1120);
}

.wd-burger__bars {
	position: relative;
}

.wd-burger__bars::before,
.wd-burger__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.wd-burger__bars::before {
	top: -5px;
}

.wd-burger__bars::after {
	top: 5px;
}

.wd-burger__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 0.5rem);
	z-index: 40;
	min-width: min(15rem, calc(100vw - 2rem));
	padding: 0.5rem;
	border: 1px solid var(--wd-border, #dbe5f1);
	border-radius: var(--wd-radius, 14px);
	background: var(--wd-cream, #fff);
	box-shadow: var(--wd-shadow-lg, 0 18px 48px rgba(10, 17, 32, 0.13));
}

.wd-burger__panel ul {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wd-burger__panel a {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.55rem 0.7rem;
	border-radius: var(--wd-radius-sm, 8px);
	color: var(--wd-text, #2e3d50);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 600;
}

.wd-burger__panel a:hover,
.wd-burger__panel a:focus-visible {
	background: var(--wd-surface, #eaf1fb);
}

/* Inside the burger the menu stacks: undo the desktop one-line row, and let
   the Categories dropdown open inline so Directory and its options align in
   one list instead of floating off the panel. */
.wd-burger__panel ul.wd-menu {
	display: grid;
	gap: 2px;
	white-space: normal;
}

.wd-burger__panel .wd-menu__has-children {
	position: static;
}

.wd-burger__panel .wd-dropdown > summary {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.55rem 0.7rem;
	border-radius: var(--wd-radius-sm, 8px);
	color: var(--wd-text, #2e3d50);
	font-size: 0.95rem;
	font-weight: 600;
}

.wd-burger__panel .wd-dropdown > summary:hover,
.wd-burger__panel .wd-dropdown[open] > summary {
	background: var(--wd-surface, #eaf1fb);
}

.wd-burger__panel .wd-dropdown__caret {
	margin-left: auto;
}

.wd-burger__panel .wd-dropdown__panel {
	position: static;
	min-width: 0;
	margin-top: 2px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.wd-burger__panel .wd-dropdown__panel a {
	min-height: 2.75rem;
	padding-left: 1rem;
	font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
 * Responsive header
 * ------------------------------------------------------------------------ */

@media (max-width: 1000px) {
	.wd-nav--primary {
		display: none;
	}

	.wd-burger {
		display: block;
	}
}

@media (max-width: 860px) {
	.wd-site-brand__name {
		max-width: 12rem;
	}
}

@media (max-width: 1000px) {

	/* The tablet row carries brand, search and every action at once — and on
	   home the search box only joins in once the bar sticks. Slim each part
	   down so the stuck header always fits its viewport instead of forcing
	   a sideways scroll the sticky bar then stretches across. Nothing is
	   hidden: labels truncate, boxes shrink, buttons tighten. */
	.wd-site-header__inner {
		gap: 0.5rem;
	}

	.wd-site-brand__name {
		max-width: 9rem;
	}

	.wd-headersearch-drop {
		flex-basis: 10rem;
		min-width: 0;
	}

	.wd-site-header__actions {
		gap: 0.4rem;
	}

	.wd-button--add {
		gap: 0.4rem;
		padding: 0.55rem 0.9rem;
		font-size: 0.85rem;
	}
}

@media (max-width: 720px) {
	:root {
		--wd-header-mobile-control-size: 2.5rem;
	}

	.wd-headersearch-drop {
		display: none;
	}

	.wd-site-brand__name,
	.wd-account__name,
	.wd-hide-sm {
		display: none;
	}

	.wd-account > summary {
		justify-content: center;
		width: 2.5rem;
		min-width: 2.5rem;
		height: 2.5rem;
		min-height: 2.5rem;
		padding: 0;
		border-radius: 50%;
	}

	.wd-account__panel::before {
		right: calc(1.25rem - 6px);
	}

	.wd-account__avatar {
		flex: 0 0 auto;
		width: 2.05rem;
		height: 2.05rem;
		border: 1px solid var(--wd-cream, #fff);
		box-shadow: 0 0 0 1px var(--wd-border, #dbe5f1);
	}

	.wd-account > summary:focus-visible {
		outline: none;
		box-shadow: var(--wd-focus, 0 0 0 3px rgba(0, 194, 255, 0.3));
	}

	.wd-site-header__inner {
		gap: 0.5rem;
		min-height: 4rem;
	}

	/* The actions stay on one line and pin to the right, so the burger sits
	   top-right on every page. A later base rule resets the group's left
	   margin to zero — harmless on desktop, where the search box holds the
	   group right, but on phones the search is hidden and inner pages
	   left-aligned the burger. Home never showed it because its overlay rule
	   keeps the auto margin. */
	.wd-site-header__actions {
		flex-wrap: nowrap;
		margin-left: auto;
	}

	/* Keep the account and menu controls on one shared touch-target grid. */
	.wd-site-header__actions .wd-account > summary,
	.wd-site-header__actions .wd-burger > summary {
		box-sizing: border-box;
		flex: 0 0 var(--wd-header-mobile-control-size, 2.5rem) !important;
		width: var(--wd-header-mobile-control-size, 2.5rem) !important;
		min-width: var(--wd-header-mobile-control-size, 2.5rem) !important;
		height: var(--wd-header-mobile-control-size, 2.5rem) !important;
		min-height: var(--wd-header-mobile-control-size, 2.5rem) !important;
		padding: 0 !important;
	}

	.wd-site-header__actions .wd-account > summary {
		display: grid;
		place-items: center;
		border: 0;
	}

	.wd-site-header__actions .wd-account__avatar {
		box-sizing: border-box;
		width: var(--wd-header-mobile-control-size, 2.5rem);
		height: var(--wd-header-mobile-control-size, 2.5rem);
	}

	/* --- header, phone ---------------------------------------------------
	 *
	 * Logo in the middle, the menu (and the account, once signed in) on the
	 * right. A 1fr / auto / 1fr grid centres the logo on the bar itself rather
	 * than in whatever room the controls leave. The theme switch and the
	 * guest actions move into the burger panel (`.wd-burger__extras`). */
	.wd-site-header__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	}

	.wd-site-title {
		grid-row: 1;
		grid-column: 2;
	}

	.wd-site-header__right {
		grid-row: 1;
		grid-column: 3;
		justify-self: end;
	}

	.wd-site-brand__img {
		height: 3.25rem;
		max-width: 62vw;
	}

	.wd-site-header__actions > .wd-theme-toggle,
	.wd-site-header__actions > .wd-button--add {
		display: none;
	}

	.wd-burger__panel {
		width: min(18rem, calc(100vw - 2rem));
	}

	.wd-burger__extras {
		display: grid;
		gap: 0.35rem;
		margin-top: 0.35rem;
		padding-top: 0.5rem;
		border-top: 1px solid var(--wd-border, #dbe5f1);
	}

	.wd-burger__mode {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		min-height: 2.75rem;
		padding: 0 0.15rem 0 0.7rem;
		color: var(--wd-text, #2e3d50);
		font-size: 0.95rem;
		font-weight: 600;
	}

	.wd-burger__panel .wd-burger__cta {
		justify-content: center;
		gap: 0.45rem;
		margin-top: 0.15rem;
		border-radius: var(--wd-radius-pill, 999px);
		background: var(--wd-primary);
		color: var(--wd-on-primary, #fff);
		font-size: 0.95rem;
	}

	.wd-burger__panel .wd-burger__cta:hover,
	.wd-burger__panel .wd-burger__cta:focus-visible {
		background: var(--wd-primary-dark);
		color: var(--wd-on-primary, #fff);
	}

	/* Every page shares the home header on phones: a transparent bar over the
	   top of the page, solid chrome again once it sticks. The is-stuck script
	   runs on all pages, so no script change is needed for the switch. */
	.wd-site-header:not(.wd-site-header--overlay):not(.is-stuck) {
		background: transparent;
		border-bottom-color: transparent;
		box-shadow: none;
		backdrop-filter: none;
	}

	.wd-site-header:not(.wd-site-header--overlay):not(.is-stuck) .wd-account > summary,
	.wd-site-header:not(.wd-site-header--overlay):not(.is-stuck) .wd-burger > summary {
		background: color-mix(in srgb, var(--wd-cream, #fff) 85%, transparent);
		border-color: var(--wd-border, #dbe5f1);
		backdrop-filter: blur(10px);
	}
}

@media (max-width: 420px) {
	.wd-site-brand__mark {
		width: 2.2rem;
		height: 2.2rem;
	}
}

@media (max-width: 560px) {

	/* Keep the header actions compact on phones while preserving a named,
	   touch-sized listing action. */
	.wd-site-header__actions {
		gap: 0.4rem;
	}

}

@media (max-width: 360px) {

	.wd-site-header__actions {
		gap: 0.35rem;
	}

}

/* ---------------------------------------------------------------------------
 * Header: overlay mode
 *
 * On the home page the bar has no chrome of its own until the page scrolls —
 * it sits on the hero photograph and the script adds `is-stuck` on the way
 * down. Everything below is the same header, painted for a dark ground.
 * ------------------------------------------------------------------------ */

:root {
	--wd-header-h: 4.75rem;
}

.wd-site-header__inner {
	min-height: var(--wd-header-h);
	padding-block: 0;
}

.wd-site-header {
	transition: background-color 180ms var(--wd-ease, ease), box-shadow 180ms var(--wd-ease, ease), border-color 180ms var(--wd-ease, ease);
}

.wd-site-header--overlay:not(.is-stuck) {
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
	backdrop-filter: none;
}

/* The search box belongs to the hero while the hero is on screen; it comes
   back the moment the bar turns solid. */
.wd-site-header--overlay:not(.is-stuck) .wd-headersearch-drop {
	display: none;
}

.wd-site-header--overlay:not(.is-stuck) .wd-site-title a,
.wd-site-header--overlay:not(.is-stuck) .wd-nav > ul > li > a,
.wd-site-header--overlay:not(.is-stuck) .wd-dropdown > summary,
.wd-site-header--overlay:not(.is-stuck) .wd-account > summary {
	color: var(--wd-text, #1e293b);
}

.wd-site-header--overlay:not(.is-stuck) .wd-nav > ul > li > a:hover,
.wd-site-header--overlay:not(.is-stuck) .wd-nav > ul > li > a:focus-visible,
.wd-site-header--overlay:not(.is-stuck) .wd-dropdown > summary:hover,
.wd-site-header--overlay:not(.is-stuck) .wd-dropdown[open] > summary,
.wd-site-header--overlay:not(.is-stuck) .wd-nav > ul > .current-menu-item > a {
	color: var(--wd-primary);
}

.wd-site-header--overlay:not(.is-stuck) .wd-account > summary,
.wd-site-header--overlay:not(.is-stuck) .wd-burger > summary {
	background: color-mix(in srgb, var(--wd-cream, #fff) 85%, transparent);
	border-color: var(--wd-border, #dbe5f1);
	color: var(--wd-text, #1e293b);
	backdrop-filter: blur(10px);
}

.wd-site-header--overlay:not(.is-stuck) .wd-burger__bars,
.wd-site-header--overlay:not(.is-stuck) .wd-burger__bars::before,
.wd-site-header--overlay:not(.is-stuck) .wd-burger__bars::after {
	background: var(--wd-text, #1e293b);
}

.wd-site-header--overlay:not(.is-stuck) .wd-button--ghost {
	border-color: var(--wd-border, #dbe5f1);
	color: var(--wd-text, #1e293b);
	background: var(--wd-cream, #fff);
}

.wd-site-header--overlay:not(.is-stuck) .wd-button--ghost:hover,
.wd-site-header--overlay:not(.is-stuck) .wd-button--ghost:focus-visible {
	border-color: var(--wd-primary);
	color: var(--wd-primary);
	background: rgba(var(--wd-primary-rgb), 0.08);
}

/* The "add a listing" button carries its icon on every screen. */
.wd-button--add svg {
	width: 1rem;
	height: 1rem;
}

/* ---------------------------------------------------------------------------
 * Front page
 * ------------------------------------------------------------------------ */

/* The templates all render inside the header's .wd-container, so a section
   that wants the full window steps back out of it. 100vw is wider than the
   content box by the scrollbar, and `overflow-x: clip` on the body absorbs
   that without creating a scroll container — which is what would break the
   sticky header. */
body {
	overflow-x: clip;
}

.wd-bleed {
	margin-inline: calc(50% - 50vw);
}

.home .wd-main {
	padding-top: 0;
	padding-bottom: 0;
}

/* --- continuous page wash -------------------------------------------------
 *
 * The homepage's tinted blobs and drawn lines are the site's shared front-end
 * background. Keeping the wash on the document body means the homepage,
 * directory views, profiles, forms and account screens all meet the same
 * visual ground, while their own cards and panels remain readable above it.
 * Fixed layers keep the treatment calm and continuous on long pages.
 * ------------------------------------------------------------------------ */

body {
	background:
		radial-gradient(ellipse 90% 55% at 50% 0%, rgba(var(--wd-primary-rgb), 0.08), transparent 65%),
		radial-gradient(circle at 8% 15%, rgba(var(--wd-secondary-rgb), 0.05), transparent 40%),
		radial-gradient(circle at 92% 30%, rgba(var(--wd-tertiary-rgb), 0.05), transparent 40%),
		var(--wd-paper, #f5f8fc);
	background-attachment: fixed, fixed, fixed, scroll;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' fill='none'%3E%3Cpath d='M-100,220 C350,60 850,480 1750,160' stroke='rgba(43,92,161,0.07)' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M-50,340 C420,130 750,580 1800,280' stroke='rgba(43,92,161,0.05)' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M-120,470 C380,240 920,670 1850,420' stroke='rgba(43,92,161,0.04)' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M100,-60 C650,420 1250,110 1750,620' stroke='rgba(43,92,161,0.05)' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* --- hero ----------------------------------------------------------------
 *
 * The landing band: a headline, one wide search bar and the showcase deck.
 * Everything here resolves through the plugin's `--wd-*` tokens, so the hero
 * follows the theme into dark mode instead of staying a light photograph of
 * itself. The deck's own styles live in the plugin, next to the code that
 * renders it.
 * ------------------------------------------------------------------------ */

.wd-hero {
	position: relative;
	isolation: isolate;
	/* Not `overflow: hidden`: the suburb and treatment pickers open a panel
	   below the search bar, and hiding overflow here clips it. Nothing in the
	   hero bleeds out — the decorative layer is `inset: 0` and the page body
	   already clips the horizontal axis. */
	margin-block: calc(-1 * var(--wd-header-h)) clamp(2.5rem, 6vw, 4.5rem);
	padding-block: calc(var(--wd-header-h) + clamp(2.25rem, 5vw, 3.75rem)) clamp(2.75rem, 5vw, 4rem);
	color: var(--wd-text, #2e3d50);
	/* No opaque ground of its own: `body.home` now paints the same wash the
	   whole page sits on, so the hero blends into it instead of handing off to
	   a flat colour at its own lower edge. */
	background:
		radial-gradient(ellipse 90% 60% at 50% -10%, rgba(var(--wd-primary-rgb), 0.09), transparent 70%),
		radial-gradient(circle at 8% 25%, rgba(var(--wd-secondary-rgb), 0.05), transparent 45%),
		radial-gradient(circle at 92% 35%, rgba(var(--wd-tertiary-rgb), 0.05), transparent 45%);
}

/* The drawn lines behind the hero. `currentColor` is not available to a data
   URI, so the strokes are the brand blue at the opacity the light ground
   wants; in dark mode the whole layer is dropped to a faint wash instead. */
.wd-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' fill='none'%3E%3Cpath d='M-100,220 C350,60 850,480 1750,160' stroke='rgba(43,92,161,0.09)' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M-50,340 C420,130 750,580 1800,280' stroke='rgba(43,92,161,0.06)' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M-120,470 C380,240 920,670 1850,420' stroke='rgba(43,92,161,0.05)' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M100,-60 C650,420 1250,110 1750,620' stroke='rgba(43,92,161,0.06)' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-size: cover;
	background-position: center;
	pointer-events: none;
}

.wd-hero__inner {
	position: relative;
	text-align: center;
}

.wd-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 auto 1rem;
	padding: 0.35rem 0.9rem 0.35rem 0.45rem;
	border: 1px solid var(--wd-border, #dbe5f1);
	border-radius: var(--wd-radius-pill, 999px);
	background: var(--wd-cream, #fff);
	box-shadow: var(--wd-shadow-sm);
	color: var(--wd-text-muted, #657489);
	font-size: 0.83rem;
	font-weight: 600;
}

.wd-hero__eyebrow strong {
	padding: 0.15rem 0.6rem;
	border-radius: var(--wd-radius-pill, 999px);
	background: rgba(var(--wd-primary-rgb), 0.12);
	color: var(--wd-primary-dark);
	font-weight: 700;
}

/* Wider than the old 22ch: the headline is the first thing that says what the
   site is for, and breaking it over three short lines made it read as a slogan
   rather than a sentence. */
.wd-hero__title {
	margin: 0 auto clamp(0.9rem, 2vw, 1.35rem);
	max-width: 26ch;
	color: var(--wd-ink, #0a1120);
	font-size: clamp(2.35rem, 5.2vw, 4.1rem);
	font-weight: 700;
	/* Loose enough that the scribble's underline stroke, which hangs below the
	   "right place" line, has clear air above the line that follows instead of
	   crowding into its ascenders. */
	line-height: 1.3;
	letter-spacing: -0.025em;
}

.wd-scribble {
	position: relative;
	display: inline-block;
	color: var(--wd-primary);
	white-space: nowrap;
}

.wd-scribble__line {
	position: absolute;
	left: 0;
	bottom: -0.22em;
	width: 100%;
	height: 0.35em;
	color: var(--wd-primary);
	overflow: visible;
	pointer-events: none;
}

.wd-hero__lede {
	margin: 0 auto clamp(1.75rem, 3.5vw, 2.5rem);
	max-width: 62ch;
	color: var(--wd-text-muted, #657489);
	font-size: clamp(1.02rem, 1.6vw, 1.18rem);
	line-height: 1.55;
	text-align: center;
}

/* --- the search bar ------------------------------------------------------
 *
 * One row, four things: what, where, which treatment, go. It is deliberately
 * the widest element on the page — finding a business is what the site does,
 * and the bar is the sentence a visitor completes to do it.
 * ---------------------------------------------------------------------- */

.wd-herosearch {
	max-width: 72rem;
	margin-inline: auto;
	margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
	padding: 0.5rem 0.5rem 0.5rem 1.4rem;
	border: 1px solid var(--wd-border, #dbe5f1);
	border-radius: var(--wd-radius-pill, 999px);
	background: var(--wd-cream, #fff);
	box-shadow: var(--wd-shadow-lg);
	color: var(--wd-text, #2e3d50);
	text-align: left;
	transition: box-shadow 0.25s var(--wd-ease), border-color 0.25s var(--wd-ease);
}

.wd-herosearch:focus-within {
	border-color: rgba(var(--wd-primary-rgb), 0.45);
	box-shadow: var(--wd-shadow-lg), 0 0 0 3px rgba(var(--wd-primary-rgb), 0.12);
}

.wd-herosearch__row {
	display: flex;
	align-items: center;
	width: 100%;
}

.wd-herosearch__field {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-width: 0;
}

.wd-herosearch__field--query {
	flex: 1.5 1 14rem;
}

/* The suburb and treatment fields are the picture pickers, which bring their
   own padding — the field is only here to give them a share of the row. */
.wd-herosearch__field--picker {
	flex: 1 1 11rem;
}

.wd-herosearch__divider {
	flex-shrink: 0;
	width: 1px;
	height: 32px;
	margin: 0 0.6rem;
	background: var(--wd-border, #dbe5f1);
}

.wd-herosearch__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	color: var(--wd-primary);
}

.wd-herosearch__icon svg {
	width: 1.15rem;
	height: 1.15rem;
}

.wd-herosearch input[type="search"] {
	width: 100%;
	height: 3rem;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--wd-ink, #0a1120);
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	outline: none;
	box-shadow: none;
}

.wd-herosearch input::placeholder {
	color: var(--wd-text-soft, #8a96a7);
	font-weight: 400;
}

.wd-herosearch__submit {
	flex-shrink: 0;
	margin-left: 0.5rem;
}

.wd-herosearch__submit .wd-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	height: 3.35rem;
	padding: 0 2.1rem;
	border: none;
	border-radius: var(--wd-radius-pill, 999px);
	background: linear-gradient(135deg, var(--wd-primary) 0%, var(--wd-primary-dark) 100%);
	color: var(--wd-on-primary, #fff);
	font-size: 1rem;
	font-weight: 700;
	box-shadow: 0 6px 18px rgba(var(--wd-primary-rgb), 0.35);
	cursor: pointer;
	transition: transform 0.18s var(--wd-ease), box-shadow 0.18s var(--wd-ease);
}

.wd-herosearch__submit .wd-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 26px rgba(var(--wd-primary-rgb), 0.45);
}

/* --- what sits under the bar -------------------------------------------- */

.wd-hero__deck {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.wd-hero__ctas {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.wd-hero__cta-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 2.2rem;
	border-radius: var(--wd-radius-pill, 999px);
	background: var(--wd-primary);
	color: var(--wd-on-primary, #fff);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(var(--wd-primary-rgb), 0.32);
	transition: background-color 0.2s var(--wd-ease), transform 0.2s var(--wd-ease), box-shadow 0.2s var(--wd-ease);
}

.wd-hero__cta-primary:hover {
	transform: translateY(-2px);
	background: var(--wd-primary-dark);
	color: var(--wd-on-primary, #fff);
	box-shadow: 0 8px 26px rgba(var(--wd-primary-rgb), 0.45);
}

.wd-hero__cta-secondary {
	padding: 0.75rem 1rem;
	color: var(--wd-text, #2e3d50);
	font-size: 0.98rem;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.15s var(--wd-ease);
}

.wd-hero__cta-secondary:hover {
	color: var(--wd-primary-dark);
}

.wd-hero__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0 auto;
	font-size: 0.88rem;
}

.wd-hero__tags-label {
	margin-right: 0.25rem;
	color: var(--wd-text-muted, #657489);
	font-weight: 600;
}

.wd-hero__tags a {
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--wd-border, #dbe5f1);
	border-radius: var(--wd-radius-pill, 999px);
	background: var(--wd-cream, #fff);
	color: var(--wd-text, #2e3d50);
	text-decoration: none;
	transition: background-color 0.18s var(--wd-ease), border-color 0.18s var(--wd-ease), color 0.18s var(--wd-ease);
}

.wd-hero__tags a:hover,
.wd-hero__tags a:focus-visible {
	border-color: var(--wd-primary);
	background: rgba(var(--wd-primary-rgb), 0.08);
	color: var(--wd-primary-dark);
}

/* The three facts under the search bar. They used to be bare numbers floating
   on the page background, which read as a caption rather than as the claim the
   hero closes on; on a card with hairline dividers and an icon each they read
   as a panel of evidence. */

.wd-herostats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 56rem;
	margin: clamp(2rem, 4vw, 3rem) auto 0;
	padding: clamp(0.6rem, 1.2vw, 0.9rem) clamp(0.4rem, 1.5vw, 1rem);
	border: 1px solid var(--wd-border, #dbe5f1);
	border-radius: var(--wd-radius-lg, 16px);
	background:
		radial-gradient(ellipse 70% 120% at 0% 0%, rgba(var(--wd-primary-rgb), 0.07), transparent 62%),
		radial-gradient(ellipse 70% 120% at 100% 100%, rgba(var(--wd-tertiary-rgb), 0.06), transparent 62%),
		var(--wd-cream, #ffffff);
	box-shadow: var(--wd-shadow-sm, 0 1px 2px rgba(10, 17, 32, 0.06));
	list-style: none;
}

.wd-herostat {
	display: flex;
	flex: 1 1 13rem;
	align-items: center;
	gap: 0.7rem;
	min-width: 0;
	padding: 0.55rem clamp(0.75rem, 1.8vw, 1.4rem);
}

.wd-herostat + .wd-herostat {
	border-left: 1px solid var(--wd-border, #dbe5f1);
}

.wd-herostat__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgba(var(--wd-primary-rgb), 0.1);
	color: var(--wd-primary, #2b5ca1);
}

.wd-herostat__icon svg {
	width: 1.15rem;
	height: 1.15rem;
}

/* The tick is a promise kept, not a brand moment — the status green says so. */
.wd-herostat__icon--good {
	background: rgba(var(--wd-status-good-rgb), 0.12);
	color: var(--wd-status-good, #2f8067);
}

.wd-herostat__text {
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
	min-width: 0;
}

.wd-herostat__num {
	color: var(--wd-ink, #0a1120);
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

/* Words do not get numeral size. Set at 1.75rem beside "93" and "52" this read
   as a third statistic whose number had gone missing. */
.wd-herostat__num--word {
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.wd-herostat__label {
	color: var(--wd-text-muted, #657489);
	font-size: 0.85rem;
	line-height: 1.25;
}

/* Phones: the three facts stay one row — each stacks icon, figure and caption
   in its own third — rather than three full-width rows; and the popular tags
   become a single swipeable line, faded at the right edge to say there is
   more, instead of three centred rows of pills. */
@media (max-width: 700px) {

	.wd-herostats {
		flex-wrap: nowrap;
		margin-top: 1.5rem;
		padding: 0.6rem 0.2rem;
	}

	.wd-herostat {
		flex: 1 1 0;
		flex-direction: column;
		justify-content: flex-start;
		gap: 0.35rem;
		padding: 0.2rem 0.4rem;
		text-align: center;
	}

	.wd-herostat__icon {
		width: 2rem;
		height: 2rem;
	}

	.wd-herostat__icon svg {
		width: 1rem;
		height: 1rem;
	}

	.wd-herostat__text {
		align-items: center;
	}

	.wd-herostat__num {
		font-size: 1.3rem;
	}

	.wd-herostat__num--word {
		font-size: 0.85rem;
	}

	.wd-herostat__label {
		font-size: 0.72rem;
	}

	.wd-hero__tags {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		padding-block: 0.15rem;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
		mask-image: linear-gradient(90deg, #000 82%, transparent);
	}

	.wd-hero__tags::-webkit-scrollbar {
		display: none;
	}

	.wd-hero__tags > * {
		flex: none;
		white-space: nowrap;
	}

	/* Room to scroll the last pill clear of the fade. */
	.wd-hero__tags::after {
		content: "";
		flex: none;
		width: 2.5rem;
	}
}

/* --- hero, narrow -------------------------------------------------------
 *
 * The bar becomes a two-line card: the query across the top, then suburb,
 * treatment and an icon-only search button sharing the second line. A pill
 * row with four things in it at 375px is four things nobody can hit; a stack
 * of four full-width rows is a card taller than the hero needs.
 * ---------------------------------------------------------------------- */

@media (max-width: 860px) {

	.wd-herosearch {
		position: relative;
		padding: 0.4rem;
		border-radius: var(--wd-radius-lg, 16px);
		margin-bottom: 1.75rem;
	}

	.wd-herosearch__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
		align-items: center;
		gap: 0.25rem;
	}

	.wd-herosearch__field--query {
		grid-column: 1 / -1;
		padding-inline: 0.45rem;
		border-bottom: 1px solid var(--wd-border, #dbe5f1);
	}

	/* The rule under the query does the first divider's job; the second
	   stays as the short upright between the two pickers. */
	.wd-herosearch__field--query + .wd-herosearch__divider {
		display: none;
	}

	.wd-herosearch__divider {
		height: 1.75rem;
		margin: 0;
	}

	/* 1rem, not smaller: iOS zooms the page into any field under 16px. */
	.wd-herosearch input[type="search"] {
		height: 2.75rem;
		font-size: 1rem;
	}

	/* Half a line each, so tighter padding and no caret — the label and the
	   value still fit beside the icon at 360px. */
	.wd-herosearch .wd-picker__button {
		gap: 0.4rem;
		padding: 0.4rem 0.45rem;
	}

	.wd-herosearch .wd-picker__caret {
		display: none;
	}

	/* The option panels hang off the whole card, not the half-width field. */
	.wd-herosearch .wd-picker {
		position: static;
	}

	.wd-herosearch__submit {
		margin-left: 0;
	}

	.wd-herosearch__submit .wd-button {
		width: 2.75rem;
		height: 2.75rem;
		min-height: 0;
		padding: 0;
	}

	.wd-herosearch__submit .wd-button span {
		display: none;
	}

	.wd-herosearch__submit .wd-button svg {
		width: 1.15rem;
		height: 1.15rem;
	}

	.wd-hero__ctas {
		flex-direction: column;
		gap: 0.75rem;
	}

	.wd-hero__cta-primary {
		width: 100%;
		max-width: 320px;
	}
}

/* --- home sections ------------------------------------------------------ */

.wd-home-section {
	max-width: 1510px;
	margin: 0 auto clamp(2.25rem, 6vw, 4rem);
}

/* --- the section panel ---------------------------------------------------
 *
 * Every home section is a card on the page ground: one radius, one inset, and
 * a ground that changes between neighbours so two panels in a row do not read
 * as one slab. The bands that used to break the container — how it works, the
 * quotes, the closing call — are panels too: full-bleed stripes made the home
 * page read as four unrelated pages stacked on top of each other.
 * ---------------------------------------------------------------------- */

.wd-section-panel {
	padding: clamp(1.35rem, 3.5vw, 3rem);
	border: 1px solid var(--wd-border, #dbe5f1);
	border-radius: clamp(1.25rem, 2.5vw, 2rem);
	background: var(--wd-cream, #ffffff);
}

/* The page ground itself, for a panel between two white ones. */
.wd-section-panel--paper {
	background: var(--wd-paper, #f5f8fc);
}

/* Both brand washes over the surface tint, which is the ground "how it works"
   carried when it was a full-width band. */
.wd-section-panel--tint {
	background:
		radial-gradient(ellipse 70% 60% at 12% 10%, rgba(var(--wd-primary-rgb), 0.09), transparent 60%),
		radial-gradient(ellipse 60% 60% at 92% 90%, rgba(var(--wd-tertiary-rgb), 0.08), transparent 60%),
		var(--wd-surface, #eaf1fb);
}

/* Saturated panels keep the light-mode brand literals for the same reason the
   hero and the facts tile do: they are always dark surfaces under white text,
   and the dark-mode token swap lightens the blues out from under it. */
.wd-section-panel--brand {
	border-color: transparent;
	background: #2b5ca1;
	color: #fff;
}

/* The scribble's stroke is the brand blue, which disappears on the brand
   panel's own solid blue ground — white reads instead, everywhere else its
   default colour already contrasts. */
.wd-section-panel--brand .wd-scribble {
	color: #fff;
}

.wd-section-panel--ink {
	border-color: transparent;
	background: linear-gradient(135deg, #0a1120 0%, #0a3a8f 100%);
	color: #fff;
}

/* A light-coloured neon wash — three brand-token glows over the cream ground,
   plus a soft outer glow instead of a hard border — for the one panel the
   page wants to feel brighter than its neighbours rather than just tinted. */
.wd-section-panel--neon {
	position: relative;
	border-color: transparent;
	background:
		radial-gradient(circle at 12% 18%, rgba(var(--wd-primary-rgb), 0.18), transparent 55%),
		radial-gradient(circle at 88% 12%, rgba(var(--wd-tertiary-rgb), 0.16), transparent 50%),
		radial-gradient(circle at 50% 100%, rgba(var(--wd-tertiary-rgb), 0.14), transparent 60%),
		var(--wd-cream, #fff);
	box-shadow:
		inset 0 0 0 1px rgba(var(--wd-primary-rgb), 0.1),
		0 25px 70px -35px rgba(var(--wd-primary-rgb), 0.4);
}

/* On the home page the hero's wash (see `body.home` above) is the page's one
   background. The plain, paper and tint panels drop their own opaque fill so
   they read as part of that continuous surface rather than a differently
   toned card; the neon, brand and CTA and ink quote panels stay deliberately
   distinct. */
body.home .wd-section-panel:not(.wd-section-panel--neon):not(.wd-section-panel--brand):not(.wd-section-panel--ink) {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.wd-home-section__header {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 0.65rem 1rem;
	margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}

.wd-home-section__header h2 {
	margin: 0;
	font-size: clamp(1.4rem, 3vw, 1.95rem);
	font-weight: 800;
	letter-spacing: 0;
}

.wd-home-section__eyebrow {
	margin: 0 0 0.3rem;
	color: var(--wd-primary, #2b5ca1);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* The reference sets a line of explanatory copy under each section title; the
   header keeps its left-aligned title-and-link shape, so the lead sits with
   the title rather than centred under it. */
.wd-home-section__lead {
	max-width: 46ch;
	margin: 0.45rem 0 0;
	color: var(--wd-text-muted, #657489);
	font-size: 0.95rem;
}

.wd-home-section__header .wd-button--link {
	font-size: 0.95rem;
	font-weight: 800;
}

/* The map header: "Search this area" shares one row with the compact
   Suburbs/Categories triggers, so it steps down to their size. */
@media (max-width: 960px) {
	.wd-dirmap-header__meta > .wd-button--link {
		font-size: 0.85rem;
	}
}

/* --- how it works --------------------------------------------------------
 *
 * Two columns: the claim on the left, the three steps threaded on a rail down
 * the right. The rail is what makes it read as a sequence rather than as three
 * unrelated boxes — the old centred row said "three features", not "three
 * steps in this order".
 * ---------------------------------------------------------------------- */

.wd-how {
	max-width: 1510px;
	margin: 0 auto clamp(2.25rem, 6vw, 4rem);
	padding-block: clamp(1.5rem, 3.5vw, 2.5rem);
}

.wd-how__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.wd-how__intro {
	position: sticky;
	top: calc(var(--wd-header-h) + 1.5rem);
}

.wd-how__intro h2 {
	margin: 0 0 0.75rem;
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	font-weight: 800;
	line-height: 1.14;
	color: var(--wd-ink, #0a1120);
}

.wd-how__intro p {
	margin: 0 0 1.5rem;
	max-width: 40ch;
	color: var(--wd-text-muted, #657489);
	font-size: 1.02rem;
	line-height: 1.6;
}

.wd-how__list {
	position: relative;
	display: grid;
	gap: clamp(0.85rem, 2vw, 1.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The rail. It runs behind the medallions from the first to the last, which is
   why it is inset by half a medallion at each end. */
.wd-how__list::before {
	content: "";
	position: absolute;
	top: 3.4rem;
	bottom: 3.4rem;
	left: 2.55rem;
	width: 2px;
	background: linear-gradient(
		180deg,
		var(--wd-primary) 0%,
		rgba(var(--wd-primary-rgb), 0.35) 60%,
		rgba(var(--wd-primary-rgb), 0.12) 100%
	);
}

.wd-how__step {
	position: relative;
	display: grid;
	grid-template-columns: 3.6rem minmax(0, 1fr);
	grid-template-areas:
		"icon num"
		"icon title"
		"icon body";
	align-items: start;
	gap: 0.15rem 1.25rem;
	padding: clamp(1.15rem, 2.4vw, 1.6rem);
	border: 1px solid var(--wd-border, #dbe5f1);
	border-radius: var(--wd-radius-lg, 16px);
	background: var(--wd-cream, #fff);
	box-shadow: var(--wd-shadow-sm);
	transition: transform 180ms var(--wd-ease), box-shadow 180ms var(--wd-ease), border-color 180ms var(--wd-ease);
}

.wd-how__step:hover {
	transform: translateY(-3px);
	border-color: rgba(var(--wd-primary-rgb), 0.45);
	box-shadow: var(--wd-shadow);
}

.wd-how__icon {
	grid-area: icon;
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 3.6rem;
	height: 3.6rem;
	border-radius: var(--wd-radius-pill, 999px);
	background: linear-gradient(150deg, var(--wd-primary), var(--wd-primary-dark));
	color: var(--wd-on-primary, #fff);
	box-shadow: 0 8px 20px rgba(var(--wd-primary-rgb), 0.32);
}

.wd-how__icon svg {
	width: 1.5rem;
	height: 1.5rem;
	stroke-width: 1.9;
}

.wd-how__num {
	grid-area: num;
	color: var(--wd-primary);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.16em;
}

.wd-how__step h3 {
	grid-area: title;
	margin: 0 0 0.3rem;
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--wd-ink, #0a1120);
}

.wd-how__step p {
	grid-area: body;
	margin: 0;
	max-width: 46ch;
	color: var(--wd-text-muted, #657489);
	font-size: 0.95rem;
	line-height: 1.6;
}

@media (max-width: 900px) {

	.wd-how__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.wd-how__intro {
		position: static;
	}

	.wd-how__list::before {
		display: none;
	}
}

/* On a phone the step number goes and the title sits beside the medallion,
   with the description running full width underneath — a shorter card that
   still leads with the icon. */
@media (max-width: 480px) {

	.wd-how__step {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"icon title"
			"body body";
		align-items: center;
		gap: 0.75rem 0.9rem;
	}

	.wd-how__num {
		display: none;
	}

	.wd-how__step h3 {
		margin: 0;
	}

	.wd-how__icon {
		width: 3rem;
		height: 3rem;
	}
}

/* --- the tile shell ----------------------------------------------------- */

.wd-tilecard {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.9rem;
	width: 100%;
	min-width: 0;
	height: 100%;
	padding: clamp(1rem, 1.5vw, 1.35rem) clamp(1.1rem, 1.6vw, 1.45rem);
	border: 1px solid transparent;
	border-radius: var(--wd-radius-lg, 16px);
	overflow: hidden;
	isolation: isolate;
	color: #fff;
	text-decoration: none;
	transition: transform 160ms var(--wd-ease, ease), box-shadow 160ms var(--wd-ease, ease),
		border-color 160ms ease;
}

.wd-tilecard:hover,
.wd-tilecard:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 18px 44px rgba(10, 17, 32, 0.2);
}

/* Eyebrow on the left, badge on the right, and `margin-bottom: auto` is what
   pins the body to the floor of the tile at every height. */
.wd-tilecard__top {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: auto;
}

.wd-tilecard__eyebrow {
	min-width: 0;
	color: rgba(255, 255, 255, 0.74);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wd-tilecard__mark {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
}

.wd-tilecard__mark svg {
	width: 1rem;
	height: 1rem;
}

.wd-tilecard__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.wd-tilecard__name {
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.wd-tilecard__count {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.85rem;
}

/* The count as a display numeral, the way the reference sets its stats: the
   number does the work and the unit is a caption under it. */
.wd-tilecard__stat {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.wd-tilecard__num {
	font-size: clamp(2.1rem, 3.4vw, 3rem);
	font-weight: 600;
	letter-spacing: -0.04em;
}

.wd-tilecard__unit {
	margin-top: 0.3rem;
	color: rgba(255, 255, 255, 0.74);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}

/* The arrow sits out of the way until the tile is hovered, then slides in —
   the affordance the reference floats over its cards. */
.wd-tilecard__go {
	position: absolute;
	right: clamp(1.1rem, 1.6vw, 1.45rem);
	bottom: clamp(1rem, 1.5vw, 1.35rem);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	opacity: 0;
	transform: translateX(-0.4rem);
	transition: opacity 160ms var(--wd-ease, ease), transform 160ms var(--wd-ease, ease);
}

.wd-tilecard__go svg {
	width: 1.05rem;
	height: 1.05rem;
}

.wd-tilecard:hover .wd-tilecard__go,
.wd-tilecard:focus-visible .wd-tilecard__go {
	opacity: 1;
	transform: translateX(0);
}

/* The body keeps clear of the arrow's corner: on touch the arrow is always
   showing, and a long business name ran underneath it. */
.wd-tilecard__body:has(~ .wd-tilecard__go) {
	padding-right: 3rem;
}

/* --- the facts panel ---------------------------------------------------- */

/* Pinned to the light-mode brand values for the same reason as the quotes
   band: this panel is always a saturated surface carrying white text, so the
   dark-mode token swap — which lightens `--wd-primary` — must not reach it. */
.wd-tilecard--facts {
	justify-content: flex-end;
	background:
		radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, 0.22), transparent 58%),
		linear-gradient(160deg, #2b5ca1 0%, #0041a0 100%);
	box-shadow: 0 10px 28px rgba(43, 92, 161, 0.18);
}

.wd-tilecard--facts:hover,
.wd-tilecard--facts:focus-visible {
	box-shadow: 0 18px 44px rgba(43, 92, 161, 0.28);
}

.wd-tilecard--facts .wd-tilecard__body {
	gap: 0.75rem;
}

.wd-tilecard--facts .wd-tilecard__action {
	align-self: flex-start;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 0.4rem;
	width: fit-content;
	max-width: 100%;
}

.wd-tilecard--facts .wd-tilecard__action-label {
	min-width: 0;
	max-width: 100px;
}

.wd-tilecard--facts .wd-tilecard__action svg {
	display: block;
}

.wd-tilecard__aside {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	color: rgba(255, 255, 255, 0.86);
	font-size: 0.85rem;
}

.wd-tilecard__aside strong {
	font-size: 1.05rem;
	font-weight: 800;
}

.wd-tilecard__action {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	font-weight: 800;
}

.wd-tilecard__action svg {
	width: 1rem;
	height: 1rem;
	transition: transform 160ms var(--wd-ease, ease);
}

.wd-tilecard--facts:hover .wd-tilecard__action svg,
.wd-tilecard--facts:focus-visible .wd-tilecard__action svg {
	transform: translateX(0.2rem);
}

/* On a phone the rotator's arrows and counter are wider than the 7rem lane
   the slide keeps for them, and the action ran underneath. Clear them by
   height instead: the action gets its own line above the arrow row, which
   the tile's spare height above the numeral absorbs. */
@media (max-width: 640px) {

	.wd-tilecard--facts [data-wd-rotator-slide] {
		padding-right: 0;
		padding-bottom: 2.75rem;
	}

	.wd-tilecard--facts .wd-tilecard__action-label {
		max-width: none;
	}
}

/* --- photographed suburbs ----------------------------------------------- */

.wd-tilecard__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 420ms var(--wd-ease, ease);
}

/* Darkened top as well as bottom: the eyebrow sits on the photograph. */
.wd-tilecard--image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(10, 17, 32, 0.52) 0%,
		rgba(10, 17, 32, 0.08) 36%,
		rgba(10, 17, 32, 0.84) 100%
	);
	pointer-events: none;
}

.wd-tilecard--image:hover .wd-tilecard__media,
.wd-tilecard--image:focus-visible .wd-tilecard__media {
	transform: scale(1.05);
}

/* The lead suburb, at display scale. */
.wd-tilecard--hero .wd-tilecard__name {
	font-size: clamp(1.75rem, 3.6vw, 2.9rem);
	font-weight: 700;
	letter-spacing: -0.035em;
}

.wd-tilecard--hero .wd-tilecard__count {
	font-size: 0.95rem;
}

.wd-tilecard--hero .wd-tilecard__num {
	font-size: clamp(2.6rem, 5vw, 4rem);
}

/* The watermark behind a panel: the glyph the term already draws on the map,
   blown up until it is texture rather than illustration and bled off the
   bottom-right corner. It is what stops a tile without a photograph from
   reading as a picture that failed to load. */
.wd-tilecard__glyph {
	position: absolute;
	right: -1.5rem;
	bottom: -2.25rem;
	z-index: 0;
	display: block;
	width: clamp(7rem, 11vw, 10.5rem);
	height: clamp(7rem, 11vw, 10.5rem);
	color: currentcolor;
	opacity: 0.1;
	pointer-events: none;
}

.wd-tilecard__glyph svg {
	width: 100%;
	height: 100%;
	stroke-width: 1;
}

/* Paper is a light ground, so the same opacity reads far heavier on it. */
.wd-tilecard--paper .wd-tilecard__glyph {
	color: var(--wd-primary, #2b5ca1);
	opacity: 0.14;
}

/* The hero is wide enough to carry the glyph at a size that reads as art. */
.wd-tilecard--hero .wd-tilecard__glyph {
	right: -2rem;
	bottom: -3rem;
	width: clamp(9rem, 16vw, 15rem);
	height: clamp(9rem, 16vw, 15rem);
}

/* --- ink and paper panels ----------------------------------------------- */

/* A suburb whose only picture is a business logo gets a panel instead: a logo
   stretched edge to edge reads as a mistake. The hue arc is the theme's three
   brand hues, kept dark enough that white text stays above 4.5:1. */
.wd-tilecard--ink {
	background:
		radial-gradient(130% 120% at 100% 0%, hsl(var(--wd-tile-hue, 216) 72% 26%) 0%, transparent 62%),
		linear-gradient(160deg, #16213a 0%, #0a1120 100%);
}

.wd-tilecard--paper {
	border-color: var(--wd-border, #dbe5f1);
	background: var(--wd-cream, #ffffff);
	color: var(--wd-ink, #0a1120);
	box-shadow: 0 1px 2px rgba(10, 17, 32, 0.04);
}

.wd-tilecard--paper:hover,
.wd-tilecard--paper:focus-visible {
	border-color: var(--wd-primary, #2b5ca1);
	box-shadow: 0 18px 44px rgba(10, 17, 32, 0.13);
}

.wd-tilecard--paper .wd-tilecard__eyebrow {
	color: var(--wd-text-soft, #8a96a7);
}

.wd-tilecard--paper .wd-tilecard__unit,
.wd-tilecard--paper .wd-tilecard__count {
	color: var(--wd-text-muted, #657489);
}

.wd-tilecard--paper .wd-tilecard__mark {
	border-color: var(--wd-border, #dbe5f1);
	background: var(--wd-surface, #eaf1fb);
	color: var(--wd-primary, #2b5ca1);
}

.wd-tilecard--paper .wd-tilecard__go {
	border-color: transparent;
	background: var(--wd-primary, #2b5ca1);
	color: var(--wd-on-primary, #fff);
}

@media (prefers-reduced-motion: reduce) {

	.wd-tilecard,
	.wd-tilecard__media,
	.wd-tilecard__go,
	.wd-tilecard__action svg {
		transition: none;
	}

	.wd-tilecard:hover,
	.wd-tilecard:focus-visible {
		transform: none;
	}

	.wd-tilecard--image:hover .wd-tilecard__media,
	.wd-tilecard--image:focus-visible .wd-tilecard__media {
		transform: none;
	}

	.wd-tilecard__go {
		transform: none;
	}

	.wd-tilecard--facts:hover .wd-tilecard__action svg,
	.wd-tilecard--facts:focus-visible .wd-tilecard__action svg {
		transform: none;
	}
}

/* Touch: there is no hover, so the arrow is simply always there. */
@media (hover: none) {

	.wd-tilecard__go {
		opacity: 1;
		transform: none;
	}
}

/* --- what people said --------------------------------------------------- */

/* Pinned to the light-mode brand values for the same reason as the hero: this
   band is always a dark surface. */
.wd-quotes {
	max-width: 1510px;
	margin: 0 auto clamp(2.25rem, 6vw, 4rem);
}

.wd-quotes__intro {
	max-width: 1510px;
	margin: 0 auto clamp(1.5rem, 4vw, 2.25rem);
	text-align: center;
}

.wd-quotes__intro h2 {
	margin: 0;
	color: #fff;
	font-size: clamp(1.5rem, 3.4vw, 2.1rem);
	font-weight: 800;
}

.wd-quotes .wd-home-section__eyebrow {
	color: color-mix(in srgb, #fff 72%, transparent);
}

.wd-quotes__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	max-width: 1510px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.wd-quote {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border-radius: var(--wd-radius-lg, 16px);
	background: var(--wd-cream, #fff);
	color: var(--wd-text, #2e3d50);
	box-shadow: 0 18px 40px rgba(10, 17, 32, 0.24);
}

.wd-quote blockquote {
	margin: 0;
}

.wd-quote blockquote p {
	margin: 0;
	color: var(--wd-ink, #0a1120);
	font-size: 1.02rem;
	line-height: 1.55;
}

.wd-quote__by {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: auto 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wd-border, #dbe5f1);
	font-size: 0.9rem;
}

.wd-quote__by strong {
	display: block;
	color: var(--wd-ink, #0a1120);
}

.wd-quote__by a {
	color: var(--wd-primary, #2b5ca1);
	font-size: 0.85rem;
}

.wd-quote__avatar {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 999px;
	background: var(--wd-primary-soft, #e8eef8);
	color: var(--wd-primary-dark, #204579);
	font-size: 0.78rem;
	font-weight: 800;
}

/* --- closing call to action --------------------------------------------- */

.wd-band {
	max-width: 1510px;
	margin: 0 auto clamp(2.25rem, 6vw, 4rem);
}

.wd-band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	max-width: 1510px;
}

.wd-band h2 {
	margin: 0 0 0.35rem;
	color: #fff;
	font-size: clamp(1.3rem, 3vw, 1.8rem);
}

.wd-band p {
	margin: 0;
	max-width: 46ch;
	color: color-mix(in srgb, #fff 82%, transparent);
}

.wd-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/* The ghost button sits on the brand colour here, so it needs its own
   treatment rather than the light-background one. */
.wd-band .wd-button {
	background: #fff;
	border-color: #fff;
	color: #204579;
}

.wd-band .wd-button--ghost {
	background: transparent;
	border-color: color-mix(in srgb, #fff 55%, transparent);
	color: #fff;
}

.wd-band .wd-button--ghost:hover {
	background: color-mix(in srgb, #fff 14%, transparent);
}

/* --- from the blog ------------------------------------------------------ */

.wd-postgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wd-postcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--wd-border, #dbe5f1);
	border-radius: var(--wd-radius-lg, 16px);
	background: var(--wd-cream, #fff);
	overflow: hidden;
	text-decoration: none;
	transition: transform 140ms var(--wd-ease, ease), box-shadow 140ms var(--wd-ease, ease), border-color 140ms ease;
}

.wd-postcard:hover,
.wd-postcard:focus-visible {
	transform: translateY(-2px);
	border-color: var(--wd-primary, #2b5ca1);
	box-shadow: 0 14px 34px rgba(10, 17, 32, 0.12);
}

.wd-postcard__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.wd-postcard__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.1rem 1.2rem 1.35rem;
}

.wd-postcard__date {
	color: var(--wd-text-soft, #8a96a7);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wd-postcard__title {
	color: var(--wd-ink, #0a1120);
	font-size: 1.08rem;
	font-weight: 800;
	line-height: 1.3;
}

.wd-postcard__excerpt {
	color: var(--wd-text-muted, #657489);
	font-size: 0.92rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Error pages
 * ------------------------------------------------------------------------ */

.wd-error {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(19rem, 0.8fr);
	gap: clamp(1.25rem, 4vw, 3rem);
	align-items: center;
	min-height: clamp(34rem, 68vh, 46rem);
	padding-block: clamp(1rem, 4vw, 3rem);
}

.wd-error__copy {
	max-width: 42rem;
}

.wd-error__code {
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	margin: 0 0 0.9rem;
	padding-inline: 0.8rem;
	border: 1px solid color-mix(in srgb, var(--wd-primary, #2b5ca1) 32%, var(--wd-border, #dbe5f1));
	border-radius: var(--wd-radius-pill, 999px);
	background: var(--wd-primary-soft, #e8eef8);
	color: var(--wd-primary-dark, #204579);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.wd-error h1 {
	margin: 0;
	max-width: 12ch;
	font-size: clamp(2.4rem, 8vw, 5.4rem);
	line-height: 0.98;
}

.wd-error__copy > p:not(.wd-error__code) {
	margin: 1rem 0 0;
	max-width: 36rem;
	color: var(--wd-text-muted, #657489);
	font-size: clamp(1rem, 2vw, 1.15rem);
}

.wd-error__search {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.65rem;
	align-items: center;
	margin-top: 1.6rem;
	padding: 0.65rem;
	border: 1px solid var(--wd-border, #dbe5f1);
	border-radius: var(--wd-radius, 14px);
	background: var(--wd-cream, #fff);
	box-shadow: var(--wd-shadow, 0 4px 16px rgba(10, 17, 32, 0.07));
}

/* Pinned to the field's middle (form padding + half the 2.9rem field − half
   the icon): left to its static position it dropped below the field once the
   button stacked under it on a phone. */
.wd-error__search svg {
	position: absolute;
	top: 1.6rem;
	left: 1.45rem;
	width: 1rem;
	height: 1rem;
	color: var(--wd-text-soft, #8a96a7);
	pointer-events: none;
}

.wd-error__search input {
	width: 100%;
	height: 2.9rem;
	min-width: 0;
	padding: 0 1rem 0 2.35rem;
	border: 1px solid transparent;
	border-radius: var(--wd-radius-sm, 8px);
	background: var(--wd-paper, #f5f8fc);
	color: inherit;
	font: inherit;
}

.wd-error__search input:focus-visible {
	border-color: var(--wd-primary, #2b5ca1);
	outline: none;
	box-shadow: var(--wd-focus, 0 0 0 3px rgba(0, 194, 255, 0.3));
}

.wd-error__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-top: 1rem;
}

.wd-error__panel {
	position: relative;
	overflow: hidden;
	padding: clamp(1rem, 3vw, 1.4rem);
	border: 1px solid var(--wd-border, #dbe5f1);
	border-radius: var(--wd-radius-lg, 20px);
	background:
		linear-gradient(160deg, color-mix(in srgb, var(--wd-primary-soft, #e8eef8) 72%, var(--wd-cream, #fff)), var(--wd-paper, #f5f8fc));
	box-shadow: var(--wd-shadow-lg, 0 18px 48px rgba(10, 17, 32, 0.13));
}

.wd-error__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--wd-primary, #2b5ca1) 10%, transparent) 1px, transparent 1px),
		linear-gradient(color-mix(in srgb, var(--wd-primary, #2b5ca1) 10%, transparent) 1px, transparent 1px);
	background-size: 28px 28px;
	mask-image: linear-gradient(160deg, #000 0%, transparent 70%);
	pointer-events: none;
}

.wd-error__brand,
.wd-error__status,
.wd-error__tiles,
.wd-error__details {
	position: relative;
}

/* A spacing wrapper now, not a plate: the logo is transparent and carries its
   own shape, and the initials chip inside brings its own. */
.wd-error__brand {
	display: flex;
	margin-bottom: 1rem;
	color: var(--wd-primary-dark, #204579);
	font-weight: 800;
	font-size: 1.25rem;
}

.wd-error__brand .wd-site-brand__img {
	height: clamp(3rem, 5vw, 4rem);
	max-width: min(16rem, 60%);
}

.wd-error__status {
	display: grid;
	gap: 0.2rem;
	margin-bottom: 1rem;
}

.wd-error__status span {
	color: var(--wd-primary-dark, #204579);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wd-error__status strong {
	color: var(--wd-ink, #0a1120);
	font-size: clamp(1.25rem, 3vw, 1.7rem);
	line-height: 1.15;
}

.wd-error__tiles {
	display: grid;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wd-error__tiles a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 4.15rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--wd-border, #dbe5f1);
	border-radius: var(--wd-radius-sm, 8px);
	background: color-mix(in srgb, var(--wd-cream, #fff) 88%, transparent);
	color: inherit;
	text-decoration: none;
	transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.wd-error__tiles a:hover,
.wd-error__tiles a:focus-visible {
	border-color: var(--wd-primary, #2b5ca1);
	transform: translateY(-2px);
	box-shadow: var(--wd-shadow, 0 4px 16px rgba(10, 17, 32, 0.07));
}

.wd-error__tiles span {
	color: var(--wd-ink, #0a1120);
	font-weight: 700;
}

.wd-error__tiles small {
	color: var(--wd-text-soft, #8a96a7);
	white-space: nowrap;
}

.wd-error__details {
	margin-top: 0.9rem;
	border-top: 1px solid var(--wd-border, #dbe5f1);
	padding-top: 0.9rem;
}

.wd-error__details summary {
	color: var(--wd-primary-dark, #204579);
	cursor: pointer;
	font-weight: 700;
}

.wd-error__details p {
	margin: 0.5rem 0 0;
	color: var(--wd-text-muted, #657489);
	font-size: 0.92rem;
}

@media (max-width: 820px) {
	.wd-error {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.wd-error h1 {
		max-width: 13ch;
	}
}

@media (max-width: 560px) {
	.wd-error__search {
		grid-template-columns: 1fr;
	}

	.wd-error__search .wd-button {
		width: 100%;
	}

	.wd-error__actions .wd-button {
		flex: 1 1 100%;
	}
}

/* ---------------------------------------------------------------------------
 * The categories menu in the header
 * ------------------------------------------------------------------------ */

.wd-nav ul.wd-menu {
	flex-wrap: nowrap;
	white-space: nowrap;
}

.wd-menu__has-children {
	position: relative;
}

.wd-dropdown > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	cursor: pointer;
	list-style: none;
	color: var(--wd-text, #2e3d50);
	font-size: 0.9rem;
	font-weight: 600;
}

.wd-dropdown > summary::-webkit-details-marker {
	display: none;
}

.wd-dropdown > summary:hover,
.wd-dropdown[open] > summary {
	color: var(--wd-primary-dark, #204579);
}

.wd-dropdown__caret {
	width: 0.4rem;
	height: 0.4rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform 140ms ease;
}

.wd-dropdown[open] .wd-dropdown__caret {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.wd-dropdown__panel {
	position: absolute;
	left: 0;
	top: calc(100% + 0.75rem);
	z-index: 40;
	min-width: 15rem;
	padding: 0.4rem;
	border: 1px solid var(--wd-border, #dbe5f1);
	border-radius: var(--wd-radius, 14px);
	background: var(--wd-cream, #fff);
	box-shadow: var(--wd-shadow-lg, 0 18px 48px rgba(10, 17, 32, 0.13));
}

.wd-dropdown__panel ul {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: normal;
}

/* The panel is a white card wherever the bar it hangs off is painted, so its
   links state their own colour rather than inheriting the nav's — over the
   hero the nav is white, and white on white is an empty menu. */
.wd-dropdown__panel a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0.7rem;
	border-radius: var(--wd-radius-sm, 8px);
	color: var(--wd-text, #2e3d50);
	font-size: 0.92rem;
	font-weight: 500;
	text-decoration: none;
}

.wd-dropdown__panel a:hover,
.wd-dropdown__panel a:focus-visible {
	background: var(--wd-surface, #eaf1fb);
}

.wd-dropdown__count {
	color: var(--wd-text-soft, #8a96a7);
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
}

/* The search box gets its space back now the nav is one line. */
.wd-headersearch-drop {
	flex: 1 1 19rem;
	min-width: 13rem;
}

@media (max-width: 1180px) {
	.wd-headersearch-drop {
		flex-basis: 13rem;
	}
}

/* ---------------------------------------------------------------------------
 * Directory profile visibility fixes
 * ------------------------------------------------------------------------ */

@media (min-width: 783px) {
	.single-wd_business.admin-bar .wd-site-header {
		top: 32px;
	}
}

@media (min-width: 601px) and (max-width: 782px) {
	.single-wd_business.admin-bar .wd-site-header {
		top: 46px;
	}
}

/* Below 900px the profile stacks its identity bar and section tabs straight
   under this header ("Profile headers below 900px" in the plugin), so the
   page starts at the bars rather than after the main column's top padding,
   and the header is solid from the first paint instead of only once the
   page scrolls: three bars that read as one app header. */
@media (max-width: 899px) {
	.single-wd_business .wd-main {
		padding-top: 0;
	}

	.single-wd_business .wd-site-header:not(.is-stuck) {
		border-bottom-color: var(--wd-border, #dbe5f1);
		background: color-mix(in srgb, var(--wd-cream, #fff) 94%, transparent);
		box-shadow: none;
		backdrop-filter: blur(18px);
	}
}

.wd-profile__identity {
	position: relative;
	z-index: 2;
}

.wd-profile__logo {
	position: relative;
	z-index: 3;
	margin-top: 0;
}

.wd-profile__actions > .wd-button,
.wd-profile__actions > .wd-favourite .wd-button {
	min-width: 6.25rem;
}

/* Not the text-link variant: it has no fill, and white on the card made
   "Full week" invisible. */
.wd-profile .wd-button:not(.wd-button--ghost):not(.wd-button--secondary):not(.wd-button--link),
.wd-contact-card .wd-button:not(.wd-button--ghost):not(.wd-button--secondary):not(.wd-button--link),
.wd-actionbar .wd-button:not(.wd-button--ghost):not(.wd-button--secondary):not(.wd-button--link) {
	color: var(--wd-on-primary, #fff);
}

.wd-profile .wd-button:not(.wd-button--ghost):not(.wd-button--secondary) svg,
.wd-contact-card .wd-button:not(.wd-button--ghost):not(.wd-button--secondary) svg,
.wd-actionbar .wd-button:not(.wd-button--ghost):not(.wd-button--secondary) svg {
	color: currentColor;
	stroke: currentColor;
}

.wd-profile .wd-button__label {
	display: inline-block;
	color: inherit;
	font-weight: 700;
	line-height: 1.2;
}

.wd-profile .wd-button--ghost {
	color: var(--wd-ink, #0a1120);
}

.wd-profile .wd-button--secondary,
.wd-actionbar .wd-button--secondary {
	color: var(--wd-primary-dark, #204579);
}

.wd-branchbar,
.wd-branchtabs {
	align-items: center;
}

.wd-branchbar__item,
.wd-branchtabs__item {
	min-width: 9rem;
	max-width: 16rem;
}

.wd-branchbar__item.is-current,
.wd-branchtabs__item.is-current {
	color: var(--wd-on-primary, #fff);
}

/* Dashboard branch tabs docked in a section header render as a text tab
   strip, not a card: the active tab takes the primary colour (as on hover),
   overriding the card style's white above. */
.wd-section__header .wd-branchtabs__item.is-current,
.wd-section__header .wd-branchtabs__item.is-current:hover,
.wd-section__header .wd-branchtabs__item.is-current:focus-visible {
	background: transparent;
	border-color: transparent;
	border-bottom-color: var(--wd-primary, #204579);
	box-shadow: none;
	color: var(--wd-primary-dark, #204579);
}

.wd-branchbar__item.is-current .wd-branchbar__name,
.wd-branchbar__item.is-current .wd-branchbar__place,
.wd-branchtabs__item.is-current .wd-branchtabs__name,
.wd-branchtabs__item.is-current .wd-branchtabs__place {
	color: var(--wd-on-primary, #fff);
}

/* Google map autocomplet options CSS */
.wd-locationdialog [data-wd-err-for]::before,
.wd-locationdialog [data-wd-loc-form-error]::before { display: none; }
.wd-field--autocomplete { position: relative; }
.wd-location-autocomplete {
	z-index: 20;
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% - 0.15rem);
	max-height: 14rem;
	overflow: auto;
	border: 1px solid var(--wd-border);
	border-radius: var(--wd-radius-sm);
	background: var(--wd-cream);
	box-shadow: var(--wd-shadow-md);
}
.wd-location-autocomplete__item {
	display: block;
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--wd-border);
	background: transparent;
	color: var(--wd-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	padding: 0.8rem 0.95rem;
}
.wd-location-autocomplete__item:last-child { border-bottom: 0; }
.wd-location-autocomplete__item:hover,
.wd-location-autocomplete__item:focus-visible {
	background: var(--wd-primary-soft);
	color: var(--wd-ink);
	outline: none;
}

/* --- the bento rotator -------------------------------------------------- */

/* The slide arriving under the arrows. Only the incoming one is animated: a
   true crossfade needs both slides in the layout at once, and three of these
   tiles size themselves to their contents. A 320ms rise carries the change
   without the tile changing height under it. */
@keyframes wd-rotator-in {

	from {
		opacity: 0;
		transform: translateY(0.6rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

[data-wd-rotator-slide].is-entering {
	animation: wd-rotator-in 0.32s var(--wd-ease, ease) both;
}

/* The photograph behind the spotlight slide gets its own, slower move, so the
   picture settles a beat after the words do. */
[data-wd-rotator-slide].is-entering img {
	animation: wd-rotator-zoom 0.7s var(--wd-ease, ease) both;
}

@keyframes wd-rotator-zoom {

	from {
		transform: scale(1.06);
	}

	to {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	[data-wd-rotator-slide].is-entering,
	[data-wd-rotator-slide].is-entering img {
		animation: none;
	}
}

/* --- the treatment grid: a scattered arrangement, and its scroll-in -------
 *
 * The scatter itself is a plain inline `margin-top` PHP writes per card
 * (front-page.php) — a small random amount of extra space above some cards
 * and none above others — combined with `items-start` on the list, which is
 * what lets a row's other column sit at the top of that taller row instead
 * of stretching to fill it. A margin is load-bearing for the grid's own
 * row-height math in a way a transform is not, which is why this is not a
 * custom property read here: however far a card drifts, the grid always
 * reserves the room for it, so nothing can overlap. It needs neither class
 * nor JavaScript to show — it is simply how the cards are laid out.
 *
 * Entrance is layered on top of that: each card starts lifted and faded once
 * its group is "armed" (`wd-treatment-reveal.js`), then falls the rest of
 * the way — landing at `transform: none`, i.e. wherever the margin above
 * already put it — once the group scrolls into view. Armed is a class that
 * script adds rather than something the markup carries from the start: a
 * visitor with no JavaScript, or a browser with no IntersectionObserver,
 * never receives it, so the opacity/entrance transform below never applies
 * and the cards are simply there, scattered, from the first paint.
 *
 * The fall itself is per card rather than per position: `--wd-reveal-x`,
 * `--wd-reveal-y`, `--wd-reveal-rot` and `--wd-reveal-delay` are written onto
 * each card by that same script, one random draw per card, rather than a
 * fixed set of nth-child rules repeating every few cards.
 * ------------------------------------------------------------------------ */

[data-wd-reveal-group].wd-reveal-armed [data-wd-reveal] {
	opacity: 0;
	transform:
		translate(var(--wd-reveal-x, 0), var(--wd-reveal-y, -1.5rem))
		rotate(var(--wd-reveal-rot, 0deg))
		scale(0.9);
}

[data-wd-reveal-group].wd-reveal-armed.is-revealed [data-wd-reveal] {
	animation: wd-treatment-fall 0.65s var(--wd-ease, ease) both;
	animation-delay: var(--wd-reveal-delay, 0ms);
}

@keyframes wd-treatment-fall {

	from {
		opacity: 0;
		transform:
			translate(var(--wd-reveal-x, 0), var(--wd-reveal-y, -1.5rem))
			rotate(var(--wd-reveal-rot, 0deg))
			scale(0.9);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	[data-wd-reveal-group].wd-reveal-armed [data-wd-reveal] {
		opacity: 1;
		transform: none;
	}

	[data-wd-reveal-group].is-revealed [data-wd-reveal] {
		animation: none;
	}
}

/* --- swipeable rails on phones --------------------------------------------
 *
 * A list stacked one card per row is a long scroll on a phone. `.wd-rail`
 * lays it out as one horizontal scroll-snap row instead, the next column
 * peeking in so it reads as swipeable; the treatment grid takes four cards to
 * a column, the collections' business cards one. wd-slider.js (plugin) wires
 * the `.wd-rail__nav` arrows. Plain overflow, so swiping needs no script.
 * Unlayered, so it beats the lists' grid-cols utilities and `.wd-grid`.
 * ------------------------------------------------------------------------ */

.wd-rail__nav {
	display: none;
}

@media (max-width: 639px) {

	.wd-rail {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 86%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 0.35rem;
		scrollbar-width: none;
		/* Room for the cards' tilt and shadow, which the scroll box would
		   otherwise clip. */
		padding: 0.5rem 0.35rem 0.75rem;
	}

	.wd-rail::-webkit-scrollbar {
		display: none;
	}

	.wd-rail > li {
		scroll-snap-align: start;
	}

	.wd-treatments {
		grid-template-rows: repeat(4, auto);
	}

	.wd-rail__nav {
		display: flex;
		justify-content: center;
		gap: 0.75rem;
		margin-top: 0.5rem;
	}

	.wd-rail__arrow {
		display: grid;
		place-items: center;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		border: 2px solid var(--wd-primary);
		border-radius: var(--wd-radius-pill, 999px);
		background: var(--wd-primary);
		color: var(--wd-on-primary, #fff);
		cursor: pointer;
		transition: background-color 140ms var(--wd-ease, ease), color 140ms var(--wd-ease, ease);
	}

	.wd-rail__arrow:hover:not(:disabled) {
		border-color: var(--wd-primary-dark);
		background: var(--wd-primary-dark);
	}

	.wd-rail__arrow:focus-visible {
		outline: none;
		box-shadow: var(--wd-focus);
	}

	/* At either end the arrow drops to an outline rather than fading. */
	.wd-rail__arrow:disabled {
		background: transparent;
		color: var(--wd-primary);
		cursor: default;
	}

	.wd-rail__arrow svg {
		width: 1.25rem;
		height: 1.25rem;
	}
}