/* ==========================================================================
   Steady Steps design system
   Derived from the two approved artifacts:
     - Home            (artifact 29b1c305)
     - Recovery Notes  (artifact 1e71bd7e)

   The two artifacts shipped different neutrals and different type pairs.
   They are reconciled here into one set: Marcellus + DM Sans throughout,
   with the cooler neutral ramp from the Recovery Notes artifact, so the
   masthead never changes shape between pages.

   Sections
     1.  Fonts
     2.  Tokens
     3.  Reset and base type
     4.  Layout primitives
     5.  Buttons
     6.  Masthead and mobile drawer
     7.  Footer
     8.  Hero and gait figure
     9.  Stage rail
     10. Cards, services, posts
     11. Article hub: featured, chips, grid, newsletter
     12. Article body (single post)
     13. Forms
     14. Utilities and motion
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */

@font-face {
	font-family: 'Marcellus';
	src: url(../fonts/marcellus-400.woff2) format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DM Sans';
	src: url(../fonts/dm-sans-100_1000.woff2) format('woff2');
	font-weight: 100 1000;
	font-style: normal;
	font-display: swap;
}

/* 2. Tokens --------------------------------------------------------------- */

:root {
	/* brand */
	--ss-primary: #1E4D67;
	--ss-primary-dark: #14384C;
	/*
	 * The artifacts' terracotta reaches only 3.97:1 on white, so it fails
	 * WCAG AA for text. It is kept for fills, rules and dots — where contrast
	 * rules do not apply — and a darkened tone carries anything set in words.
	 */
	--ss-accent: #DA533E;
	--ss-accent-dark: #9C3423;
	--ss-accent-text: #B03A27;

	/* surfaces */
	--ss-bg: #FFFFFF;
	--ss-card: #FFFFFF;
	--ss-tint: #EAF0F2;
	--ss-paper: #F5F8F9;
	--ss-border: #DEE6EA;
	--ss-rail: #D8DEE2;

	/* text */
	--ss-ink: #16242C;
	--ss-body: #4A4A4A;
	--ss-muted: #55666F; /* darkened from the artifacts' #6C7C85 to clear WCAG AA on the tint band too */
	--ss-on-primary: #FFFFFF;

	/* effects */
	--ss-shadow: rgba(22, 36, 44, .10);
	--ss-wa: #25D366;

	/* type */
	--ss-f-display: 'Marcellus', Georgia, 'Times New Roman', serif;
	--ss-f-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* metrics */
	--ss-wrap: 1140px;
	--ss-measure: 680px;
	--ss-gap: 24px;
	--ss-rad: 6px;
	--ss-pad-y: 96px;
	--ss-pad-y-t: 64px;
	--ss-pad-y-m: 48px;
	--ss-header-h: 80px; /* measured, so in-page anchors clear the sticky bar */
}

/* 3. Reset and base type -------------------------------------------------- */

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

body.ss {
	margin: 0;
	background: var(--ss-bg);
	color: var(--ss-body);
	font-family: var(--ss-f-body);
	font-size: 18px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden; /* belt and braces against a stray wide child */
}

/*
 * The base element rules are wrapped in :where() so they carry no specificity
 * of their own. A rule like `.ss a { color }` is (0,1,1) and silently beats any
 * single-class component rule — that is what made accent buttons unreadable,
 * hid the skip link, closed up article paragraphs, blew up the logo and drew
 * both burger icons at once. With :where() the component class always wins.
 */
.ss :where(h1, h2, h3, h4) {
	color: var(--ss-ink);
	text-wrap: balance;
	margin: 0;
}

.ss :where(h1) {
	font-family: var(--ss-f-display);
	font-weight: 400;
	font-size: clamp(34px, 5vw, 56px);
	line-height: 1.1;
	letter-spacing: -.01em;
}

.ss :where(h2) {
	font-family: var(--ss-f-display);
	font-weight: 400;
	font-size: clamp(27px, 3.4vw, 40px);
	line-height: 1.15;
	letter-spacing: -.005em;
}

.ss :where(h3) {
	font-family: var(--ss-f-body);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.25;
}

.ss :where(h4) {
	font-family: var(--ss-f-body);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
}

.ss :where(p) {
	margin: 0;
}

.ss :where(a) {
	color: var(--ss-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.ss :focus-visible {
	outline: 2px solid var(--ss-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

.ss :where(img) {
	max-width: 100%;
	height: auto;
}

/* .ss prefix again: without it `.ss a` wins and the link renders its own
   background colour as text, invisible at the moment it is focused. */
.ss .ss-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--ss-primary);
	color: #FFF;
	padding: 12px 20px;
	border-radius: 0 0 var(--ss-rad) 0;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.ss .ss-skip:focus {
	left: 0;
}

/* 4. Layout primitives ---------------------------------------------------- */

.ss-wrap {
	width: 100%;
	max-width: var(--ss-wrap);
	margin-inline: auto;
	padding-inline: 24px;
}

.ss-band {
	padding-block: var(--ss-pad-y);
}

.ss-band--tint {
	background: var(--ss-tint);
}

.ss-band--paper {
	background: var(--ss-paper);
}

@media (max-width: 900px) {
	.ss-band {
		padding-block: var(--ss-pad-y-t);
	}
}

@media (max-width: 600px) {
	.ss-band {
		padding-block: var(--ss-pad-y-m);
	}

	.ss-wrap {
		padding-inline: 20px;
	}
}

.ss-stack {
	display: flex;
	flex-direction: column;
	gap: var(--ss-gap);
}

.ss-stack--tight {
	gap: 12px;
}

.ss-stack--loose {
	gap: 36px;
}

.ss-eyebrow {
	font-family: var(--ss-f-body);
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--ss-accent-text);
	margin: 0;
}

.ss-lede {
	max-width: var(--ss-measure);
	font-size: 18px;
}

.ss-note {
	font-size: 14px;
	color: var(--ss-muted);
}

.ss-disclaimer {
	font-size: 14px;
	color: var(--ss-muted);
	border-left: 3px solid var(--ss-border);
	padding-left: 18px;
	max-width: var(--ss-measure);
}

/* 5. Buttons -------------------------------------------------------------- */

.ss-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--ss-f-body);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	letter-spacing: .02em;
	/* 14px block padding + 15px line-height = 44px tall: minimum comfortable tap target */
	padding: 15px 28px;
	min-height: 44px;
	border-radius: var(--ss-rad);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/*
 * Scoped with .ss so these beat the generic `.ss a { color: ... }` rule —
 * without it an anchor styled as a button renders with link-coloured text on
 * the accent fill, which measures 2.29:1.
 */
.ss .ss-btn--accent {
	background: var(--ss-accent-text);
	color: #FFF;
	border-color: var(--ss-accent-text);
}

.ss .ss-btn--accent:hover,
.ss .ss-btn--accent:focus-visible {
	background: var(--ss-accent-dark);
	border-color: var(--ss-accent-dark);
	color: #FFF;
}

.ss .ss-btn--ghost {
	background: transparent;
	color: var(--ss-primary);
	border-color: var(--ss-border);
}

.ss .ss-btn--ghost:hover,
.ss .ss-btn--ghost:focus-visible {
	border-color: var(--ss-primary);
	color: var(--ss-primary);
}

.ss-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

/* 6. Masthead and mobile drawer ------------------------------------------- */

.ss-masthead {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--ss-bg);
	border-bottom: 1px solid var(--ss-border);
}

.ss-masthead__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 16px;
}

.ss-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	flex: 0 1 auto;
	min-width: 0;
	min-height: 44px;
}

.ss .ss-brand__logo {
	height: 38px;
	width: auto;
	max-width: none;
	display: block;
	border-radius: 4px;
	flex: 0 0 auto;
}

.ss-brand__mark {
	font-family: var(--ss-f-display);
	font-size: 22px;
	color: var(--ss-primary);
	letter-spacing: -.01em;
	white-space: nowrap;
}

.ss-brand__loc {
	font-size: 12px;
	color: var(--ss-muted);
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ss-nav {
	display: flex;
	align-items: center;
}

.ss-nav__list {
	display: flex;
	gap: 24px;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	/* The bar must never wrap onto a second line as items are added. */
	flex-wrap: nowrap;
	white-space: nowrap;
}

/*
 * The nav grew when About was added. The locality has been dropped from the
 * masthead altogether — it overflowed into the nav, and it is already in the
 * contact band, the footer and the LocalBusiness schema. This is a deliberate
 * deviation from the approved artifact, which had a shorter nav.
 */
@media (max-width: 1280px) {
	.ss-nav__list {
		gap: 20px;
	}
}

@media (max-width: 1120px) {
	.ss-nav__list {
		gap: 16px;
	}

	.ss-nav a {
		font-size: 14.5px;
	}
}

.ss-nav__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 2px;
}

.ss-nav a {
	font-size: 15px;
	color: var(--ss-body);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 28px;
}

.ss-nav a:hover,
.ss-nav a:focus-visible {
	color: var(--ss-primary);
}

.ss-nav .current-menu-item > a,
.ss-nav .current_page_item > a,
.ss-nav .current-menu-ancestor > a {
	color: var(--ss-primary);
	font-weight: 600;
}

.ss-masthead__cta {
	flex: 0 0 auto;
}

/* Submenu disclosure. The link stays a link; the chevron is its own button. */
.ss-nav__toggle,
.ss-drawer__list .ss-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	min-width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 3px;
	color: var(--ss-muted);
	cursor: pointer;
	flex: 0 0 auto;
}

.ss-nav__toggle svg {
	width: 15px;
	height: 15px;
	display: block;
	transition: transform .18s ease;
}

.ss-nav__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.ss-nav__sub {
	position: absolute;
	top: calc(100% + 14px);
	left: -18px;
	min-width: 250px;
	background: var(--ss-bg);
	border: 1px solid var(--ss-border);
	border-radius: var(--ss-rad);
	box-shadow: 0 12px 34px var(--ss-shadow);
	padding: 8px;
	list-style: none;
	margin: 0;
	display: none;
	z-index: 50;
}

/* Bridges the gap between the item and the panel so the pointer can travel. */
.ss-nav__item--parent::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 14px;
}

.ss-nav__item--parent:hover > .ss-nav__sub,
.ss-nav__item--parent:focus-within > .ss-nav__sub,
.ss-nav__item--parent.is-open > .ss-nav__sub {
	display: block;
}

.ss-nav__sub a {
	display: block;
	padding: 11px 14px;
	min-height: 44px;
	border-radius: 4px;
	font-size: 15px;
	color: var(--ss-body);
}

.ss-nav__sub a:hover,
.ss-nav__sub a:focus-visible {
	background: var(--ss-tint);
	color: var(--ss-primary);
}

/* Burger: hidden on desktop, shown when the horizontal nav collapses. */
.ss-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--ss-border);
	border-radius: var(--ss-rad);
	color: var(--ss-ink);
	cursor: pointer;
}

.ss-burger:hover {
	border-color: var(--ss-primary);
}

.ss-burger svg {
	width: 22px;
	height: 22px;
	display: block;
}

/* (0,2,1) so it beats `.ss-burger svg { display: block }` — otherwise the
   hamburger and the close cross both render, on top of each other. */
.ss-burger .ss-burger__close {
	display: none;
}

.ss-burger[aria-expanded="true"] .ss-burger__open {
	display: none;
}

.ss-burger[aria-expanded="true"] .ss-burger__close {
	display: block;
}

.ss-drawer {
	display: none;
	border-top: 1px solid var(--ss-border);
	background: var(--ss-bg);
	max-height: calc(100dvh - var(--ss-header-h));
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ss-drawer.is-open {
	display: block;
}

.ss-drawer__in {
	padding-block: 8px 24px;
	display: flex;
	flex-direction: column;
}

.ss-drawer__list,
.ss-drawer__sub {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ss-drawer__list > li {
	border-bottom: 1px solid var(--ss-border);
}

.ss-drawer__list > li:last-child {
	border-bottom: 0;
}

/* Parent row: link on the left, chevron button on the right. */
.ss-drawer__list > li.ss-nav__item--parent {
	display: grid;
	grid-template-columns: 1fr 44px;
	align-items: center;
}

.ss-drawer__list > li.ss-nav__item--parent > .ss-drawer__sub {
	grid-column: 1 / -1;
}

.ss-drawer .ss-nav__toggle {
	width: 44px;
	height: 44px;
	justify-self: end;
}

.ss-drawer a {
	display: block;
	padding: 14px 4px;
	font-size: 17px;
	color: var(--ss-ink);
	text-decoration: none;
	min-height: 44px;
}

.ss-drawer__sub {
	position: static;
	display: none;
	min-width: 0;
	border: 0;
	box-shadow: none;
	background: var(--ss-paper);
	border-radius: var(--ss-rad);
	padding: 4px 8px;
	margin-bottom: 12px;
}

.ss-drawer__list > li.ss-nav__item--parent.is-open > .ss-drawer__sub {
	display: block;
}

.ss-drawer__sub a {
	font-size: 15px;
	color: var(--ss-body);
	padding: 12px 8px;
}

.ss-drawer .ss-btn {
	margin-top: 20px;
}

@media (max-width: 980px) {
	.ss-nav,
	.ss-masthead__cta {
		display: none;
	}

	.ss-burger {
		display: inline-flex;
	}
}

@media (max-width: 420px) {
	.ss-brand__mark {
		font-size: 20px;
	}
}

/* 7. Footer --------------------------------------------------------------- */

.ss-foot {
	border-top: 1px solid var(--ss-border);
	padding-block: 40px;
	font-size: 14px;
	color: var(--ss-muted);
	background: var(--ss-bg);
}

/*
 * Six columns: address, contact, hours, journey, services, more. A grid keeps
 * them even at every width — the previous flex wrap left a ragged second row
 * once the contact details were added.
 */
.ss-foot__in {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 32px 28px;
	align-items: start;
}

@media (max-width: 1080px) {
	.ss-foot__in {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.ss-foot__in {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 20px;
	}
}

@media (max-width: 380px) {
	.ss-foot__in {
		grid-template-columns: 1fr;
	}
}

.ss-foot__col {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.ss-foot__head {
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ss-ink);
	margin-bottom: 4px;
}

.ss-foot a {
	color: var(--ss-muted);
	text-decoration: none;
	display: inline-block;
	padding-block: 5px; /* lifts the hit area to 30px; bare text is only 20px */
	/* The email address is 34 unbroken characters and will not fit a footer
	   column on a phone; without this it pushes the whole page sideways. */
	overflow-wrap: anywhere;
	max-width: 100%;
}

.ss-foot a:hover,
.ss-foot a:focus-visible {
	color: var(--ss-primary);
	text-decoration: underline;
}

@media (max-width: 768px) {
	/* Comfortable thumb targets in the footer link columns on touch. */
	.ss-foot a {
		padding-block: 11px;
	}

	.ss-foot__col {
		gap: 0;
	}
}

.ss-foot__base {
	border-top: 1px solid var(--ss-border);
	margin-top: 32px;
	padding-top: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
}

/* 8. Hero and gait figure ------------------------------------------------- */

.ss-hero {
	padding-block: 104px 88px;
}

.ss-hero__grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 56px;
	align-items: center;
}

@media (max-width: 900px) {
	.ss-hero {
		padding-block: 56px 48px;
	}

	.ss-hero__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

.ss-gaitfig {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	height: 220px;
}

.ss-gaitfig__bar {
	flex: 1;
	border-radius: var(--ss-rad) var(--ss-rad) 0 0;
	background: linear-gradient(180deg, var(--ss-primary), var(--ss-primary-dark));
	position: relative;
	opacity: .16;
	animation: ss-rise .9s cubic-bezier(.2, .7, .3, 1) both;
}

.ss-gaitfig__bar:nth-child(1) { height: 34%; animation-delay: .05s; }
.ss-gaitfig__bar:nth-child(2) { height: 56%; animation-delay: .20s; }
.ss-gaitfig__bar:nth-child(3) { height: 78%; animation-delay: .35s; }

.ss-gaitfig__bar:nth-child(4) {
	height: 100%;
	animation-delay: .50s;
	background: linear-gradient(180deg, var(--ss-accent), var(--ss-accent-dark));
}

.ss-gaitfig__bar span {
	position: absolute;
	inset-inline: 0;
	top: -26px;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ss-muted);
}

@keyframes ss-rise {
	from { transform: translateY(18px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

@media (max-width: 600px) {
	.ss-gaitfig {
		height: 150px;
		gap: 10px;
	}

	.ss-gaitfig__bar span {
		font-size: 10px;
		letter-spacing: .06em;
		top: -20px;
	}
}

/* 9. Stage rail ----------------------------------------------------------- */

.ss-way {
	position: relative;
	margin-top: 44px;
}

.ss-way__track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ss-gap);
}

.ss-way__line {
	position: absolute;
	top: 19px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--ss-rail);
}

.ss-way__line::after {
	content: "";
	position: absolute;
	inset: 0 100% 0 0;
	background: var(--ss-accent);
	transition: inset-inline-end .9s cubic-bezier(.3, .7, .3, 1);
}

.ss-stage {
	position: relative;
	background: none;
	border: 0;
	text-align: left;
	font: inherit;
	color: inherit;
	padding: 0;
	cursor: pointer;
	display: block;
	text-decoration: none;
}

.ss-stage__dot {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--ss-bg);
	border: 2px solid var(--ss-rail);
	color: var(--ss-muted);
	font-family: var(--ss-f-body);
	font-weight: 700;
	font-size: 15px;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
	position: relative;
	z-index: 1;
}

.ss-band--tint .ss-stage__dot {
	background: var(--ss-tint);
}

.ss-stage__name {
	display: block;
	margin: 18px 0 8px;
	font-family: var(--ss-f-body);
	font-weight: 700;
	font-size: 22px;
	color: var(--ss-ink);
	transition: color .2s ease;
}

.ss-stage__copy {
	display: block;
	font-size: 16px;
	color: var(--ss-body);
	max-width: 24ch;
}

.ss-stage:hover .ss-stage__dot,
.ss-stage:focus-visible .ss-stage__dot,
.ss-stage.is-active .ss-stage__dot {
	background: var(--ss-accent);
	border-color: var(--ss-accent);
	color: #FFF;
	transform: scale(1.08);
}

.ss-stage:hover .ss-stage__name,
.ss-stage.is-active .ss-stage__name {
	color: var(--ss-accent);
}

@media (max-width: 820px) {
	.ss-way__track {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.ss-way__line {
		top: 0;
		bottom: 0;
		left: 19px;
		right: auto;
		width: 2px;
		height: auto;
	}

	.ss-way__line::after {
		inset: 0 0 100% 0;
		transition: inset-block-end .9s cubic-bezier(.3, .7, .3, 1);
	}

	.ss-stage {
		display: grid;
		grid-template-columns: 40px 1fr;
		column-gap: 20px;
		align-items: start;
	}

	/*
	 * Three children in a two-column grid: without an explicit column the
	 * description wraps onto the next row and lands in the 40px dot column,
	 * one word per line.
	 */
	.ss-stage__dot {
		grid-column: 1;
		grid-row: 1;
	}

	.ss-stage__name {
		grid-column: 2;
		grid-row: 1;
		margin: 6px 0 6px;
	}

	.ss-stage__copy {
		grid-column: 2;
		grid-row: 2;
		max-width: none;
	}
}

/* 10. Cards, services, posts ---------------------------------------------- */

.ss-svc {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ss-gap);
}

@media (max-width: 900px) {
	.ss-svc {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.ss-svc {
		grid-template-columns: 1fr;
	}
}

.ss-card {
	background: var(--ss-card);
	border: 1px solid var(--ss-border);
	border-radius: var(--ss-rad);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
	text-decoration: none;
}

.ss-card:hover,
.ss-card:focus-visible {
	border-color: var(--ss-primary);
	box-shadow: 0 10px 30px var(--ss-shadow);
	transform: translateY(-2px);
}

.ss-card__ico {
	width: 34px;
	height: 34px;
	color: var(--ss-primary);
}

.ss-card__ico svg {
	width: 100%;
	height: 100%;
	display: block;
}

.ss-card p {
	font-size: 16px;
	color: var(--ss-body);
}

.ss-card__more {
	margin-top: auto;
	padding-top: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ss-accent-text);
}

.ss-why {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: 56px;
	align-items: start;
}

@media (max-width: 900px) {
	.ss-why {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.ss-pull {
	border-left: 3px solid var(--ss-accent);
	padding-left: 22px;
	font-family: var(--ss-f-display);
	font-size: clamp(21px, 2.4vw, 28px);
	line-height: 1.35;
	color: var(--ss-ink);
}

.ss-posts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ss-gap);
}

@media (max-width: 900px) {
	.ss-posts {
		grid-template-columns: 1fr;
	}
}

.ss-post {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--ss-card);
	border: 1px solid var(--ss-border);
	border-radius: var(--ss-rad);
	padding: 26px;
	text-decoration: none;
	transition: border-color .18s ease, transform .18s ease;
}

.ss-post:hover,
.ss-post:focus-visible {
	border-color: var(--ss-primary);
	transform: translateY(-2px);
}

.ss-post__cat {
	font-family: var(--ss-f-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ss-accent-text);
}

.ss-post h3 {
	font-size: 20px;
}

.ss-post p {
	font-size: 16px;
	color: var(--ss-body);
}

.ss-post__meta {
	margin-top: auto;
	padding-top: 10px;
	font-size: 14px;
	color: var(--ss-muted);
}

/* --- About: the clinicians --- */
.ss-team {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ss-gap);
}

@media (max-width: 820px) {
	.ss-team {
		grid-template-columns: 1fr;
	}
}

.ss-person {
	background: var(--ss-card);
	border: 1px solid var(--ss-border);
	border-radius: var(--ss-rad);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ss-person__head {
	display: flex;
	gap: 18px;
	align-items: center;
}

/*
 * Circular and modest on purpose. The two source photographs were taken in
 * different places with different light, and at this size that reads as a
 * deliberate treatment rather than a mismatch.
 */
.ss-person__shot {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 auto;
	background: var(--ss-tint);
	border: 1px solid var(--ss-border);
}

.ss-person__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ss-person h3 {
	font-size: 20px;
}

.ss-person__quals {
	font-size: 14px;
	color: var(--ss-muted);
	margin-top: 3px;
}

.ss-person__award {
	font-size: 13px;
	font-weight: 700;
	color: var(--ss-accent-text);
	margin-top: 6px;
}

.ss-person__approach {
	font-size: 16px;
	color: var(--ss-body);
}

.ss-person__facts {
	margin: 0;
	display: grid;
	gap: 10px 20px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid var(--ss-border);
	padding-top: 16px;
}

@media (max-width: 480px) {
	.ss-person__facts {
		grid-template-columns: 1fr;
	}
}

.ss-person__facts dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ss-muted);
}

.ss-person__facts dd {
	margin: 2px 0 0;
	font-size: 15px;
	color: var(--ss-ink);
}

.ss-person__focus {
	font-size: 15px;
	border-top: 1px solid var(--ss-border);
	padding-top: 16px;
}

.ss-person__focuslabel {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ss-muted);
	margin-bottom: 4px;
}

.ss-person__profile {
	margin-top: auto;
	font-size: 15px;
	font-weight: 600;
}

/* 11. Article hub --------------------------------------------------------- */

.ss-head {
	padding-block: 56px 32px;
}

@media (max-width: 600px) {
	.ss-head {
		padding-block: 36px 24px;
	}
}

.ss-feat {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 44px;
	align-items: center;
	background: var(--ss-paper);
	border: 1px solid var(--ss-border);
	border-radius: var(--ss-rad);
	padding: 36px;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.ss-feat:hover,
.ss-feat:focus-visible {
	border-color: var(--ss-primary);
	box-shadow: 0 10px 26px var(--ss-shadow);
}

@media (max-width: 940px) {
	.ss-feat {
		grid-template-columns: 1fr;
		gap: 26px;
		padding: 26px;
	}
}

@media (max-width: 600px) {
	.ss-feat {
		padding: 22px;
	}
}

.ss-feat__art {
	aspect-ratio: 16 / 11;
	border-radius: var(--ss-rad);
	background: var(--ss-tint);
	display: grid;
	place-items: center;
	overflow: hidden;
}

.ss-feat__art svg {
	width: 82%;
	height: auto;
}

.ss-feat__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ss-meta {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--ss-muted);
}

.ss-cat {
	display: inline-block;
	font-family: var(--ss-f-body);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ss-accent-text);
}

.ss-filters {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
}

.ss .ss-chip {
	font-family: var(--ss-f-body);
	font-size: 14px;
	font-weight: 600;
	/* 12px block padding + 14px line = 44px tall */
	padding: 12px 18px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	border-radius: 99px;
	border: 1px solid var(--ss-border);
	background: transparent;
	color: var(--ss-body);
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s, color .15s, border-color .15s;
}

.ss .ss-chip:hover,
.ss .ss-chip:focus-visible {
	border-color: var(--ss-primary);
	color: var(--ss-primary);
}

.ss .ss-chip.is-on {
	background: var(--ss-primary);
	border-color: var(--ss-primary);
	color: var(--ss-bg);
}

.ss-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

@media (max-width: 940px) {
	.ss-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.ss-grid {
		grid-template-columns: 1fr;
	}
}

.ss-art {
	background: var(--ss-card);
	border: 1px solid var(--ss-border);
	border-radius: var(--ss-rad);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	transition: border-color .16s, transform .16s, box-shadow .16s;
}

.ss-art:hover,
.ss-art:focus-visible {
	border-color: var(--ss-primary);
	transform: translateY(-2px);
	box-shadow: 0 10px 26px var(--ss-shadow);
}

.ss-art__top {
	height: 8px;
	background: var(--ss-tint);
}

.ss-art__top--advice { background: var(--ss-accent); }
.ss-art__top--practice { background: var(--ss-primary); }
.ss-art__top--news { background: #7B4B52; } /* midpoint of primary and accent, stated literally for old-browser safety */

.ss-art__in {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.ss-art p {
	font-size: 15px;
	color: var(--ss-body);
}

.ss-art__meta {
	margin-top: auto;
	padding-top: 10px;
	font-size: 13px;
	color: var(--ss-muted);
	display: flex;
	gap: 12px;
}

.ss-news {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	background: var(--ss-primary);
	border-radius: var(--ss-rad);
	padding: 40px;
	color: #FFF;
}

.ss-news h2 {
	color: #FFF;
}

.ss-news p {
	color: rgba(255, 255, 255, .85);
}

@media (max-width: 860px) {
	.ss-news {
		grid-template-columns: 1fr;
		gap: 22px;
		padding: 28px;
	}
}

.ss-news__form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.ss-news__form input {
	flex: 1;
	min-width: 200px;
	font-family: var(--ss-f-body);
	font-size: 16px; /* 16px minimum stops iOS Safari zooming the page on focus */
	padding: 13px 15px;
	border-radius: var(--ss-rad);
	border: 1px solid rgba(255, 255, 255, .4);
	background: rgba(255, 255, 255, .12);
	color: #FFF;
}

.ss-news__form input::placeholder {
	color: rgba(255, 255, 255, .7);
}

.ss-news__note {
	font-size: 12px;
	color: rgba(255, 255, 255, .75);
	margin-top: 10px;
}

.ss-pager {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 32px;
}

.ss-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--ss-border);
	border-radius: var(--ss-rad);
	color: var(--ss-body);
	text-decoration: none;
	font-size: 15px;
}

.ss-pager .page-numbers:hover {
	border-color: var(--ss-primary);
	color: var(--ss-primary);
}

.ss-pager .page-numbers.current {
	background: var(--ss-primary);
	border-color: var(--ss-primary);
	color: #FFF;
}

/* 12. Article body -------------------------------------------------------- */

.ss-article {
	padding-block: 48px 72px;
}

.ss-crumbs {
	font-size: 13px;
	color: var(--ss-muted);
	margin-bottom: 24px;
}

.ss-crumbs a {
	color: var(--ss-muted);
	text-decoration: none;
}

.ss-crumbs a:hover {
	color: var(--ss-primary);
	text-decoration: underline;
}

.ss-article__head {
	max-width: var(--ss-measure);
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 40px;
}

.ss-prose {
	max-width: var(--ss-measure);
	font-size: 19px;
	line-height: 1.72;
	color: var(--ss-body);
}

/*
 * `.ss p { margin: 0 }` is (0,1,1) and would otherwise beat this rule, closing
 * every gap between paragraphs in an article.
 */
.ss .ss-prose > * + * {
	margin-top: 1.1em;
}

.ss .ss-prose h2 {
	font-size: clamp(25px, 3vw, 32px);
	margin-top: 1.8em;
	margin-bottom: .1em;
}

.ss .ss-prose h3 {
	font-size: 21px;
	margin-top: 1.6em;
	margin-bottom: .1em;
}

.ss-prose ul,
.ss-prose ol {
	padding-left: 1.3em;
}

.ss .ss-prose li + li {
	margin-top: .5em;
}

.ss .ss-prose li {
	margin-top: .35em;
}

.ss-prose blockquote {
	margin: 1.6em 0;
	padding-left: 22px;
	border-left: 3px solid var(--ss-accent);
	font-family: var(--ss-f-display);
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.4;
	color: var(--ss-ink);
}

.ss-prose img {
	border-radius: var(--ss-rad);
}

.ss-prose a {
	color: var(--ss-primary);
}

.ss-prose code {
	font-size: .9em;
	background: var(--ss-paper);
	border: 1px solid var(--ss-border);
	border-radius: 3px;
	padding: 1px 6px;
}

.ss-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.ss-prose th,
.ss-prose td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--ss-border);
}

.ss-tablescroll {
	overflow-x: auto;
}

/* 13. Forms --------------------------------------------------------------- */

.ss-contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}

@media (max-width: 900px) {
	.ss-contact {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.ss-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.ss-field label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ss-muted);
}

.ss-field input,
.ss-field textarea,
.ss-field select {
	font-family: var(--ss-f-body);
	font-size: 16px; /* 16px minimum stops iOS Safari zooming the page on focus */
	color: var(--ss-ink);
	background: var(--ss-bg);
	border: 1px solid var(--ss-border);
	border-radius: var(--ss-rad);
	padding: 13px 14px;
	width: 100%;
}

.ss-field textarea {
	min-height: 110px;
	resize: vertical;
}

.ss-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	color: var(--ss-muted);
}

.ss-consent input {
	width: 24px;
	height: 24px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--ss-primary);
}

.ss-wa {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	font-weight: 600;
	font-size: 15px;
	color: var(--ss-ink);
	text-decoration: none;
}

.ss-wa__dot {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ss-wa);
	display: grid;
	place-items: center;
	color: #FFF;
	font-size: 13px;
	flex: 0 0 auto;
}

/* Address and hours beside the enquiry form */
.ss-contact__details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 32px;
	margin-top: 4px;
}

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

.ss-contact__block {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 15px;
	color: var(--ss-body);
	overflow-wrap: anywhere;
}

.ss-contact__block address {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ss-contact__head {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ss-muted);
	margin-bottom: 4px;
}

.ss-contact__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 8px;
}

.ss-foot__address {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ss-formnote {
	font-size: 14px;
	border-radius: var(--ss-rad);
	padding: 12px 14px;
}

.ss-formnote--ok {
	background: var(--ss-tint);
	color: var(--ss-primary-dark);
	border: 1px solid var(--ss-border);
}

.ss-formnote--err {
	background: #FCEDEA;
	color: var(--ss-accent-dark);
	border: 1px solid #F2C9C1;
}

/* 14. Utilities and motion ------------------------------------------------ */

.ss-hidden {
	display: none !important;
}

.ss-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Reveal-on-scroll is progressive enhancement only. The content is visible by
 * default; it is hidden solely when the .ss-js flag says JavaScript is running
 * and can put it back. Without this, a JS failure leaves whole bands blank.
 */
.ss-js .ss-reveal {
	opacity: 0;
	transform: translateY(14px);
}

.ss-js .ss-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
	.ss *,
	.ss *::before,
	.ss *::after {
		animation-duration: .001ms !important;
		animation-delay: 0ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.ss-js .ss-reveal {
		opacity: 1;
		transform: none;
	}

	.ss-gaitfig__bar {
		opacity: 1;
	}
}

/* Anchor links must not land under the sticky masthead. */
.ss html,
html:has(body.ss) {
	scroll-behavior: smooth;
}

.ss [id] {
	scroll-margin-top: calc(var(--ss-header-h) + 16px);
}