/* ==========================================================================
   The Sport Horse Vet
   Tokens sampled from the logo and contrast-verified. Gold never carries text
   on a light background — #BD8C43 is 3.0:1 on white. Use --bronze there.
   ========================================================================== */

:root {
	--navy: #002A54;
	--navy-ink: #001B36;
	--navy-line: #1B4470;
	--gold: #E6B577;
	--gold-deep: #BD8C43;
	--bronze: #7A5A1E;
	--paper: #F7F4EF;
	--white: #FFFFFF;
	--ink: #14212E;
	--ink-soft: #4A5763;
	--on-navy-soft: #B4C4D6;

	--font-display: 'Cinzel', 'Times New Roman', serif;
	--font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;

	--wrap: 1180px;
	--wrap-narrow: 760px;
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--section-y: clamp(4.5rem, 10vw, 10rem);

	/* Zero radius throughout. Rounded corners read as software; this wants to read
	   as print. Sharpness is doing real work here. */
	--radius: 0px;

	--hair: rgba(0, 42, 84, 0.14);
	--hair-gold: rgba(189, 140, 67, 0.4);
}

/* Mobile first. Everything above is the phone; the site then opens up in stages
   all the way to superwide, where a fixed 1180px measure would leave the design
   stranded in the middle of the screen. */
@media (min-width: 90em) {
	:root { --wrap: 1320px; }
}
@media (min-width: 120em) {
	:root { --wrap: 1560px; --gutter: 4rem; --section-y: clamp(7rem, 8vw, 10rem); }
	body { font-size: 18px; }
}
@media (min-width: 160em) {
	:root { --wrap: 1800px; --wrap-narrow: 900px; --gutter: 5rem; }
	body { font-size: 19px; }
}
@media (min-width: 200em) {
	:root { --wrap: 2100px; }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

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

/* --------------------------------------------------------------- typography */

h1, h2 {
	font-family: var(--font-display);
	font-weight: 500;
	/* Looser on a phone, where a long display headline runs to four or five lines
	   and 1.06 becomes a wall. Tightens as the measure widens. */
	line-height: 1.16;
	letter-spacing: -0.005em;
	margin: 0 0 1.25rem;
	text-wrap: balance;
}

/* Cinzel carries the whole tone, so it is allowed to be genuinely large. Restraint
   everywhere else is what earns the headline the room to be this size. */
h1 { font-size: clamp(2.3rem, 1.1rem + 5.2vw, 5.25rem); }
h2 { font-size: clamp(1.85rem, 1.1rem + 2.7vw, 3.4rem); }

@media (min-width: 56em) {
	h1, h2 { line-height: 1.07; }
}

h3, h4 {
	font-family: var(--font-body);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.005em;
	margin: 0 0 0.6rem;
}

h3 { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.25rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--bronze); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--navy); }

strong { font-weight: 500; }

/* Weight stays at 400 on paper. Jost 300 at this size on a light background goes
   thin enough to undo the contrast the colour token was chosen for; it is only
   safe on navy, where the section rules below opt into it. */
.lede {
	font-size: clamp(1.1rem, 1rem + 0.65vw, 1.4rem);
	font-weight: 400;
	line-height: 1.6;
	color: var(--ink-soft);
	max-width: 34em;
}
.section--navy .lede,
.section--ink .lede,
.hero .lede { font-weight: 300; }
.section-head--center .lede,
.text-center .lede { margin-inline: auto; }

/* Eyebrow carries a short gold rule inline — the detail that reads as considered
   rather than templated, and it echoes the swashes under the logo wordmark. */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 0.7rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--bronze);
	margin: 0 0 1.4rem;
}
.eyebrow::before {
	content: '';
	width: 34px;
	height: 1px;
	background: var(--gold-deep);
	flex: none;
}
.section--navy .eyebrow::before,
.section--ink .eyebrow::before,
.hero .eyebrow::before { background: var(--gold); }

.section-head--center .eyebrow,
.text-center .eyebrow { justify-content: center; }

/* The swash rule under the wordmark, reused as a section motif. */
.rule {
	width: 68px;
	height: 1px;
	background: var(--gold-deep);
	border: 0;
	margin: 1.75rem 0;
}
.rule--center { margin-inline: auto; }

:focus-visible {
	outline: 2px solid var(--gold-deep);
	outline-offset: 3px;
}

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

.skip-link {
	position: absolute; left: 1rem; top: -100px; z-index: 200;
	background: var(--gold); color: var(--navy-ink);
	padding: 0.75rem 1.25rem; font-weight: 500;
}
.skip-link:focus { top: 1rem; }

/* ------------------------------------------------------------------ layout */

.container {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

.section--navy { background: var(--navy); color: var(--white); }
.section--ink { background: var(--navy-ink); color: var(--white); }
.section--white { background: var(--white); }

.section--navy .eyebrow,
.section--ink .eyebrow { color: var(--gold); }

.section--navy p,
.section--ink p { color: var(--on-navy-soft); }

.section--navy h1, .section--navy h2, .section--navy h3,
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--white); }

.section--navy .lede,
.section--ink .lede { color: var(--on-navy-soft); }

.section--navy a,
.section--ink a { color: var(--gold); }
.section--navy a:hover,
.section--ink a:hover { color: var(--white); }

.section--navy .rule,
.section--ink .rule { background: var(--gold); }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }

/* ------------------------------------------------------------------ buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	font-family: var(--font-body);
	font-size: 0.76rem;
	font-weight: 500;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	text-decoration: none;
	/* Generous horizontal padding against small, widely-tracked type — the
	   proportion that reads as expensive rather than the type size itself. */
	padding: 1.15rem 2.5rem;
	min-height: 48px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn--gold { background: var(--gold-deep); color: var(--navy-ink); }
.btn--gold:hover { background: var(--gold); color: var(--navy-ink); }

.btn--navy { background: var(--navy); color: var(--white); }
.btn--navy:hover { background: var(--navy-ink); color: var(--gold); }

.btn--ghost { border-color: var(--navy); color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--white); }

.section--navy .btn--ghost,
.section--ink .btn--ghost { border-color: var(--gold); color: var(--gold); }
.section--navy .btn--ghost:hover,
.section--ink .btn--ghost:hover { background: var(--gold); color: var(--navy-ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }

/* The eyebrow is a flex row (it carries its own rule), so text-align alone cannot
   centre it — these have to travel together. */
.text-center { text-align: center; }
.text-center .btn-row { justify-content: center; }
.text-center .rule { margin-inline: auto; }

/* ----------------------------------------------------------- emergency strip */

.emergency {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	padding: 0.6rem var(--gutter);
	font-size: 0.86rem;
	line-height: 1.5;
	text-align: center;
}

.emergency p { margin: 0; }
.emergency i { color: var(--gold); flex: none; }

.emergency--header {
	background: var(--navy-ink);
	color: var(--on-navy-soft);
}
.emergency--header strong { color: var(--white); }
.emergency--header a { color: var(--gold); font-weight: 500; white-space: nowrap; }

.emergency--footer {
	border-top: 1px solid var(--navy-line);
	border-bottom: 1px solid var(--navy-line);
	color: var(--on-navy-soft);
	margin-bottom: 2.5rem;
}
.emergency--footer strong { color: var(--white); }
.emergency--footer a { color: var(--gold); font-weight: 500; white-space: nowrap; }

/* ------------------------------------------------------------------- topbar */

.topbar {
	background: var(--navy-ink);
	color: var(--on-navy-soft);
	font-size: 0.8rem;
	line-height: 1.5;
	border-bottom: 1px solid var(--navy-line);
}

.topbar__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding-block: 0.55rem;
	text-align: center;
}

.topbar__note {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--on-navy-soft);
}
.topbar__note i { color: var(--gold); padding-top: 0.15em; flex: none; }
.topbar__note strong { color: var(--white); font-weight: 500; }

.topbar__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.topbar__contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--on-navy-soft);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}
.topbar__contact a:hover { color: var(--gold); }
.topbar__contact i { color: var(--gold); font-size: 0.9em; }

@media (min-width: 62em) {
	.topbar__inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: left;
		gap: 2rem;
	}
	.topbar__note { justify-content: flex-start; }
	.topbar__contact { justify-content: flex-end; }
}

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

.site-header {
	position: sticky;
	top: 0;
	z-index: 106;
	background: var(--navy);
	border-bottom: 1px solid var(--navy-line);
}

.site-header::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, rgba(230, 181, 119, 0) 0%, rgba(230, 181, 119, 0.45) 50%, rgba(230, 181, 119, 0) 100%);
}

.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 1.15rem;
	transition: padding-block 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 62em) {
	.site-header__bar { padding-block: 1.6rem; }
}

/* ---------------------------------------------------------------- condensed

   Added by main.js once the page is scrolled past the sentinel. The logo gets its
   full moment on landing, then gives the screen back. */

body.is-scrolled .site-header__bar { padding-block: 0.55rem; }

@media (min-width: 62em) {
	body.is-scrolled .site-header__bar { padding-block: 0.7rem; }
}

/* The utility bar is deliberately NOT collapsed here. It is not sticky, so it
   already scrolls away on its own — animating its height at the same time would
   remove content from above the viewport and jerk the page upwards. */

/* Reduced motion is handled by the global rule at the foot of this file, which
   uses !important. A scoped `transition: none` here would sit above the
   .site-brand declarations below and lose the cascade at equal specificity. */

/* The logo gets its full moment on landing, then shrinks and cross-fades into the
   shield on scroll. Both marks are square and share one height variable, so the
   box never jumps as they swap. */
.site-brand {
	position: relative;
	display: flex;
	align-items: center;
	flex: none;
	--logo-h: clamp(74px, 10vw, 116px);
}

.site-brand img {
	height: var(--logo-h);
	width: auto;
	max-width: 100%;
	transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
}

/* The shield sits on top of the full mark and is revealed as it fades out. */
.site-brand__mark {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	pointer-events: none;
}

body.is-scrolled .site-brand { --logo-h: clamp(42px, 5.4vw, 54px); }
body.is-scrolled .site-brand__full { opacity: 0; }
body.is-scrolled .site-brand__mark { opacity: 1; }

/* On a phone the wordmark is unreadable at any height the header can afford, so
   the shield does the whole job and simply gets smaller. */
@media (max-width: 47.9375em) {
	.site-brand { --logo-h: clamp(56px, 15vw, 72px); }
	.site-brand__full { display: none; }
	.site-brand__mark { position: static; transform: none; opacity: 1; }
	body.is-scrolled .site-brand { --logo-h: 42px; }
}

/* The sentinel's HEIGHT is the trigger distance: while any part of it is still in
   view the header stays full size, and it condenses once the visitor has scrolled
   past it. Absolutely positioned, so it takes up no layout space.

   Do NOT do this with a 1px sentinel plus a negative rootMargin — a negative top
   margin pushes the observation edge down the page, so a sentinel at the very top
   reads as "not intersecting" while the page is still at rest, and the header
   arrives already condensed. */
#shv-top-sentinel {
	position: absolute;
	top: 0;
	left: 0;
	height: 90px;
	width: 100%;
	pointer-events: none;
	visibility: hidden;
}
.site-brand__text {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--white);
	text-decoration: none;
}

.primary-nav { display: flex; align-items: center; gap: 1.5rem; }

.primary-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2.1rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Scoped to the list, not .primary-nav — a descendant selector here outranks
   .btn and silently strips the drawer CTA of its button styling. */
.primary-nav__list a {
	position: relative;
	display: inline-block;
	padding-block: 0.35rem;
	font-size: 0.74rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--on-navy-soft);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.3s ease;
}

/* Hairline that draws in from the left rather than a colour flash. */
.primary-nav__list a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--gold);
	transition: width 0.3s ease;
}
.primary-nav__list a:hover,
.primary-nav__list .current-menu-item > a { color: var(--gold); }
.primary-nav__list a:hover::after,
.primary-nav__list .current-menu-item > a::after { width: 100%; }

/* Drawer header. Hidden entirely on desktop, where the nav is a plain row. */
.primary-nav__head { display: none; }

.nav-toggle, .nav-close {
	display: none;
	background: none;
	border: 1px solid var(--navy-line);
	color: var(--white);
	width: 44px; height: 44px;
	border-radius: var(--radius);
	cursor: pointer;
	font-size: 1.05rem;
	align-items: center;
	justify-content: center;
}

.header-cta { flex: none; }

/* The nav carries its own CTA for the mobile drawer. On desktop the header one
   is used instead, so the drawer's copy has to be hidden or both render. */
@media (min-width: 60.0625em) {
	.primary-nav > .btn { display: none; }
}

@media (max-width: 60em) {
	.nav-toggle { display: inline-flex; }
	/* The close button now sits in the drawer header alongside the logo, rather
	   than floating over it. */
	.nav-close { display: inline-flex; flex: none; }

	.primary-nav__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1.25rem;
		padding-bottom: 1.75rem;
		margin-bottom: 1.75rem;
		border-bottom: 1px solid var(--navy-line);
	}

	.primary-nav__brand { display: block; line-height: 0; }
	.primary-nav__brand img { height: 88px; width: auto; }
	.header-cta { display: none; }

	.primary-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(340px, 86vw);
		background: var(--navy-ink);
		border-left: 1px solid var(--navy-line);
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		padding: 1.5rem 1.75rem 2.5rem;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		z-index: 110;
		overflow-y: auto;
	}
	body.nav-open .primary-nav { transform: translateX(0); }

	.primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.primary-nav__list li { border-bottom: 1px solid var(--navy-line); }
	.primary-nav__list a { display: block; padding: 1rem 0; font-size: 0.9rem; }

	.primary-nav .btn { margin-top: 2rem; justify-content: center; }

	body.nav-open::after {
		content: '';
		position: fixed;
		inset: 0;
		background: rgba(0, 15, 30, 0.6);
		z-index: 105;
	}
	body.nav-open { overflow: hidden; }
}

/* --------------------------------------------------------------------- hero */

.hero {
	position: relative;
	background: var(--navy-ink);
	color: var(--white);
	overflow: hidden;
}

.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Two overlays: a horizontal grade so the headline always has a dark bed, and a
   vertical one so the image sinks into the section below instead of stopping dead. */
.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 20, 42, 0.55) 0%, rgba(0, 20, 42, 0) 30%, rgba(0, 20, 42, 0.5) 100%),
		linear-gradient(90deg, rgba(0, 20, 42, 0.94) 0%, rgba(0, 20, 42, 0.8) 42%, rgba(0, 20, 42, 0.28) 100%);
}

/* Hairline of gold where the hero meets the page. */
.hero::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--gold-deep) 0%, rgba(189, 140, 67, 0) 62%);
	z-index: 3;
}

.hero__inner {
	position: relative;
	z-index: 2;
	padding-block: clamp(4rem, 13vw, 11rem);
	max-width: 40rem;
}

/* On a superwide monitor the hero would otherwise become a thin letterbox, and
   the text column would sit marooned against acres of image. */
@media (min-width: 120em) {
	.hero { min-height: 72vh; display: flex; align-items: center; }
	.hero__inner { max-width: 46rem; }
}
@media (min-width: 160em) {
	.hero__inner { max-width: 52rem; }
}

.hero h1 { color: var(--white); }
.hero .eyebrow { color: var(--gold); }
.hero .lede { color: var(--on-navy-soft); }
.hero .rule { background: var(--gold); }

.hero--inner .hero__inner { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

/* -------------------------------------------------------------------- split */

.split {
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

/* Asymmetric by default. A dead-equal 50/50 split is the single most reliable way
   to make a layout look like a template; an editorial ratio does not. */
@media (min-width: 56em) {
	.split {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
		gap: clamp(3rem, 6vw, 7rem);
		align-items: center;
	}
	.split--reverse { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
	.split--reverse .split__media { order: -1; }

	/* Where one column is a long form, vertical centring strands the short column
	   halfway down the page. */
	.split--top { align-items: start; }
}

@media (min-width: 120em) {
	.split { gap: clamp(5rem, 7vw, 10rem); }
}

/* margin-inline:auto without an explicit width stops a grid item stretching,
   which collapses iframes to their 300px intrinsic default. */
.split__media { width: 100%; }

/* --------------------------------------------------------------- image slots */

.img-slot { margin: 0; aspect-ratio: var(--ratio, 4 / 3); position: relative; }
.img-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }

/* A hairline offset behind the image. Costs nothing, reads as framed rather than
   pasted in, and only appears where there is room for it. */
@media (min-width: 56em) {
	.split__media .img-slot::after {
		content: '';
		position: absolute;
		inset: 1.5rem -1.5rem -1.5rem 1.5rem;
		border: 1px solid var(--hair-gold);
		z-index: -1;
		pointer-events: none;
	}
	.split--reverse .split__media .img-slot::after {
		inset: 1.5rem 1.5rem -1.5rem -1.5rem;
	}
	.split__media { position: relative; z-index: 1; }
}

.section--navy .split__media .img-slot::after,
.section--ink .split__media .img-slot::after { border-color: rgba(230, 181, 119, 0.3); }

.img-slot--empty .img-slot__ratio {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	text-align: center;
	padding: 1.5rem;
	background: rgba(0, 42, 84, 0.05);
	border: 1px dashed rgba(0, 42, 84, 0.3);
	border-radius: var(--radius);
}
.img-slot__id { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }
.img-slot__note { font-size: 0.82rem; color: var(--ink-soft); max-width: 26rem; }

.section--navy .img-slot--empty .img-slot__ratio,
.section--ink .img-slot--empty .img-slot__ratio {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(230, 181, 119, 0.35);
}
.section--navy .img-slot__id,
.section--ink .img-slot__id { color: var(--gold); }
.section--navy .img-slot__note,
.section--ink .img-slot__note { color: var(--on-navy-soft); }

/* -------------------------------------------------------------------- cards */

.cards {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.card {
	background: var(--white);
	border: 1px solid var(--hair);
	border-top: 1px solid var(--gold-deep);
	border-radius: var(--radius);
	padding: clamp(2rem, 3.2vw, 3rem);
	display: flex;
	flex-direction: column;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}
.card:hover { border-color: var(--hair-gold); border-top-color: var(--gold-deep); }

.card__icon {
	font-size: 1.4rem;
	color: var(--gold-deep);
	margin-bottom: 1.5rem;
}

.card h3 { margin-bottom: 0.75rem; }
.card p { color: var(--ink-soft); font-size: 0.97rem; }

.card__link {
	margin-top: auto;
	padding-top: 1.5rem;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--bronze);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.card__link:hover { color: var(--navy); }
.card__link i { transition: transform 0.2s ease; }
.card__link:hover i { transform: translateX(3px); }

.section--navy .card,
.section--ink .card {
	background: rgba(255, 255, 255, 0.035);
	border-color: var(--navy-line);
	border-top-color: var(--gold);
}
.section--navy .card:hover,
.section--ink .card:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(230, 181, 119, 0.35);
	border-top-color: var(--gold);
}
.section--navy .card p,
.section--ink .card p { color: var(--on-navy-soft); }
.section--navy .card__icon,
.section--ink .card__icon { color: var(--gold); }
.section--navy .card__link,
.section--ink .card__link { color: var(--gold); }
.section--navy .card__link:hover,
.section--ink .card__link:hover { color: var(--white); }

/* --------------------------------------------------------------- list marks */

.ticks { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.8rem; }
.ticks li { position: relative; padding-left: 1.85rem; }
.ticks li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 10px;
	height: 1px;
	background: var(--gold-deep);
}
.section--navy .ticks li::before,
.section--ink .ticks li::before { background: var(--gold); }

/* ----------------------------------------------------------------- numbered */

.steps { counter-reset: step; display: grid; gap: 0; margin: 0; padding: 0; }
.steps > li {
	list-style: none;
	counter-increment: step;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: start;
	padding-block: clamp(1.5rem, 2.6vw, 2.25rem);
	border-top: 1px solid var(--hair);
}
.steps > li:first-child { border-top: 0; padding-top: 0; }
.steps > li:last-child { padding-bottom: 0; }

/* The numeral is the ornament. Large, thin, gold, and left to sit in its own space. */
.steps > li::before {
	content: counter(step, decimal-leading-zero);
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem);
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--gold-deep);
	opacity: 0.75;
}
.section--navy .steps > li,
.section--ink .steps > li { border-top-color: var(--navy-line); }
.section--navy .steps > li::before,
.section--ink .steps > li::before { color: var(--gold); }

/* ---------------------------------------------------------------- statement

   One full-bleed typographic moment per long page. Sites read as expensive when
   they are confident enough to give a single sentence an entire screen. */

.statement {
	background: var(--navy-ink);
	color: var(--white);
	padding-block: clamp(5rem, 12vw, 11rem);
	position: relative;
	overflow: hidden;
}

.statement__inner {
	max-width: 56rem;
	margin-inline: auto;
	text-align: center;
	position: relative;
	z-index: 2;
}

.statement p {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.6rem, 0.9rem + 2.9vw, 3.1rem);
	line-height: 1.24;
	letter-spacing: -0.005em;
	color: var(--white);
	margin: 0;
	text-wrap: balance;
}

.statement cite {
	display: block;
	margin-top: 2.25rem;
	font-family: var(--font-body);
	font-style: normal;
	font-size: 0.72rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gold);
}

/* A single oversized quote mark, cropped by the section — print, not decoration. */
.statement::before {
	content: '\201C';
	position: absolute;
	top: -0.34em;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-display);
	font-size: 26rem;
	line-height: 1;
	color: rgba(230, 181, 119, 0.06);
	pointer-events: none;
	z-index: 1;
}

/* ------------------------------------------------------------------- marque

   Credentials, not invented statistics. A new practice has no review count to
   boast about, and inventing one would be the fastest way to look cheap. */

.marque {
	border-block: 1px solid var(--hair);
	padding-block: clamp(2rem, 4vw, 3rem);
}

.marque__grid {
	display: grid;
	gap: clamp(1.75rem, 3vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
	text-align: center;
}

/* Font Awesome sizes the <i> to its glyph, so `display: block` alone leaves a
   27px box that text-align has nothing to centre inside. The explicit width is
   what lets it follow the grid's alignment — centred on a phone, left above 56em. */
.marque__item i {
	display: block;
	width: 100%;
	font-size: 1.35rem;
	color: var(--gold-deep);
	margin-bottom: 0.9rem;
}

.marque__item h3 {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 0.94rem;
	letter-spacing: 0.06em;
	margin-bottom: 0.35rem;
}

.marque__item p {
	font-size: 0.88rem;
	color: var(--ink-soft);
	margin: 0;
}

@media (min-width: 56em) {
	.marque__grid { text-align: left; }
	.marque__item { padding-left: 1.75rem; border-left: 1px solid var(--hair); }
	.marque__item:first-child { padding-left: 0; border-left: 0; }
}

/* -------------------------------------------------------------------- forms */

.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; gap: 1.25rem; }
@media (min-width: 40em) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: grid; gap: 0.45rem; }
.field label { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.field .req { color: var(--bronze); }

.field input, .field select, .field textarea {
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--ink);
	background: var(--white);
	border: 1px solid rgba(0, 42, 84, 0.22);
	border-radius: var(--radius);
	padding: 0.85rem 1rem;
	width: 100%;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { min-height: 170px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
	outline: none;
	border-color: var(--gold-deep);
	box-shadow: 0 0 0 3px rgba(189, 140, 67, 0.16);
}

/* Honeypot. Off-screen rather than display:none so headless bots still see it. */
.hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

.form__note { font-size: 0.88rem; color: var(--ink-soft); }

.notice {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	padding: 1.1rem 1.35rem;
	border-radius: var(--radius);
	margin-bottom: 2rem;
	font-size: 0.95rem;
}
.notice p { margin: 0; }
.notice--ok { background: rgba(0, 42, 84, 0.06); border-left: 3px solid var(--navy); }
.notice--ok i { color: var(--navy); }
.notice--err { background: rgba(160, 40, 40, 0.07); border-left: 3px solid #A02828; }
.notice--err i { color: #A02828; }

.callout {
	background: rgba(0, 42, 84, 0.05);
	border-left: 3px solid var(--gold-deep);
	padding: clamp(1.25rem, 2.5vw, 1.85rem);
	border-radius: 0;
}
.callout p:last-child { margin-bottom: 0; }
.section--navy .callout,
.section--ink .callout {
	background: rgba(255, 255, 255, 0.05);
	border-left-color: var(--gold);
}

/* -------------------------------------------------------------------- prose */

.prose h2 { margin-top: 3rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2.25rem; }
.prose ul, .prose ol { margin: 0 0 1.5rem; padding-left: 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.prose dl { margin: 0 0 1.5rem; }
.prose dt { font-weight: 500; margin-top: 1.25rem; }
.prose dd { margin: 0.25rem 0 0; color: var(--ink-soft); }

/* --------------------------------------------------------------------- FAQs */

.faq { border-top: 1px solid rgba(0, 42, 84, 0.14); }
.faq details { border-bottom: 1px solid rgba(0, 42, 84, 0.14); }
.faq summary {
	cursor: pointer;
	list-style: none;
	padding: 1.35rem 2.5rem 1.35rem 0;
	font-size: 1.05rem;
	font-weight: 500;
	position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: '\002B';
	position: absolute;
	right: 0.35rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--gold-deep);
	font-size: 1.2rem;
}
.faq details[open] summary::after { content: '\2212'; }
.faq details > div { padding-bottom: 1.5rem; color: var(--ink-soft); }

.section--navy .faq,
.section--ink .faq { border-top-color: var(--navy-line); }
.section--navy .faq details,
.section--ink .faq details { border-bottom-color: var(--navy-line); }
.section--navy .faq summary,
.section--ink .faq summary { color: var(--white); }
.section--navy .faq summary::after,
.section--ink .faq summary::after { color: var(--gold); }
.section--navy .faq details > div,
.section--ink .faq details > div { color: var(--on-navy-soft); }

.u-mt { margin-top: 2.5rem; }

/* ------------------------------------------------------------------- footer */

.site-footer {
	background: var(--navy-ink);
	color: var(--on-navy-soft);
	padding-block: clamp(3rem, 6vw, 5rem) 2rem;
	font-size: 0.94rem;
}

.site-footer h4 {
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 1.1rem;
}

.site-footer a { color: var(--on-navy-soft); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }

.footer-grid {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	margin-bottom: 3rem;
}

/* The footer has the room, so the full mark runs at its proper size here. */
.footer-brand img { width: clamp(180px, 20vw, 215px); height: auto; margin-bottom: 1.5rem; }

.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

.footer-bottom {
	border-top: 1px solid var(--navy-line);
	padding-top: 1.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	justify-content: space-between;
	font-size: 0.85rem;
}
.footer-bottom p { margin: 0; }

/* -------------------------------------------------------------------- motion

   The brief is deliberately static — the weight comes from the typography, the
   space and the photography, not from things sliding around. The only movement
   on the site is hover feedback and the mobile drawer. */

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