/* ==========================================================================
   QnD Capital — theme styles
   Cormorant Garamond (display) · DM Sans (UI) · approved palette only
   ========================================================================== */

:root {
	/* Colour — the only values permitted anywhere in this file. */
	--color-light: #FAFAF8;
	--color-navy: #0E1C30;
	--color-dark-text: #0E1C30;
	--color-blue: #1B7FC4;
	--color-light-blue: #70CEFA;
	--color-white: #FFFFFF;

	/* Derived from the palette only, never new hues. */
	--rule-light: color-mix(in srgb, var(--color-navy) 14%, transparent);
	--rule-navy: color-mix(in srgb, var(--color-white) 18%, transparent);
	--text-muted: color-mix(in srgb, var(--color-navy) 72%, var(--color-light));
	--text-invert-muted: color-mix(in srgb, var(--color-white) 76%, var(--color-navy));
	--scrim-navy: color-mix(in srgb, var(--color-navy) 72%, transparent);

	/* Type */
	--font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--font-ui: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	--fs-eyebrow: 0.75rem;
	--fs-small: 0.875rem;
	--fs-body: 1rem;
	--fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	--fs-h3: clamp(1.375rem, 1.15rem + 1.1vw, 2rem);
	--fs-h2: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
	--fs-display: clamp(3rem, 1.6rem + 6.6vw, 8.5rem);

	--lh-display: 0.98;
	--lh-title: 1.08;
	--lh-body: 1.7;
	--ls-eyebrow: 0.22em;
	--ls-display: -0.01em;

	/* Space */
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--space-2xl: 6rem;
	--space-3xl: 8.5rem;

	/* Layout */
	--wrap-max: 1360px;
	--inset: max(clamp(20px, 4.2vw, 72px), calc((100% - var(--wrap-max)) / 2));
	--header-h: 5rem;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 320ms;
}

/* ---------- base ---------- */

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

html,
body { overflow-x: clip; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-h);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--color-light);
	color: var(--color-dark-text);
	font-family: var(--font-ui);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
}

body.nav-is-open { overflow: hidden; }

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	line-height: var(--lh-title);
	letter-spacing: var(--ls-display);
	overflow-wrap: anywhere;
	min-width: 0;
}

p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
img, svg { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 3px;
}

.section--navy :where(a, button):focus-visible { outline-color: var(--color-light-blue); }

::selection { background: var(--color-light-blue); color: var(--color-navy); }

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

.skip-link {
	position: absolute;
	top: var(--space-2xs); left: var(--space-2xs);
	z-index: 500;
	transform: translateY(-200%);
	padding: var(--space-2xs) var(--space-sm);
	background: var(--color-navy);
	color: var(--color-white);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	white-space: nowrap;
}

.skip-link:focus { transform: translateY(0); }

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

.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 300;
	background: var(--color-navy);
	color: var(--color-white);
	transition: background-color var(--dur) var(--ease);
}

/* Over a navy hero the bar can sit transparent until the page scrolls. */
.has-overlay-header .site-header { background: transparent; }
.has-overlay-header .site-header.is-scrolled { background: var(--color-navy); }

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	min-height: var(--header-h);
	padding-inline: var(--inset);
}

.site-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-right: auto;
	transition: opacity var(--dur) var(--ease);
}

.site-brand:hover { opacity: 0.82; }

/* Brand lockup: supplied logo artwork, inherits colour from the header. */
.site-brand__logo { display: block; color: var(--color-white); flex: 0 0 auto; }
.site-brand__logo svg { display: block; width: auto; height: 2.25rem; }

@media (max-width: 600px) {
	.site-brand__logo svg { height: 1.875rem; }
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 3rem);
}

.site-nav__list a {
	display: inline-block;
	padding-block: var(--space-2xs);
	border-bottom: 1px solid transparent;
	font-size: var(--fs-eyebrow);
	font-weight: 400;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	white-space: nowrap;
	transition: border-color var(--dur) var(--ease);
}

.site-nav__list a:hover { border-bottom-color: var(--color-light-blue); }

.site-nav__list .current-menu-item > a,
.site-nav__list a[aria-current="page"] { border-bottom-color: var(--color-white); }

.site-nav__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 26px; height: 26px;
	padding: 0; border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.site-nav__toggle-bar {
	display: block;
	height: 1px;
	background: currentColor;
	transition: transform var(--dur) var(--ease);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:first-child { transform: translateY(3.5px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.site-nav__panel {
	position: fixed;
	inset: var(--header-h) 0 0 0;
	z-index: 290;
	padding: var(--space-lg) var(--inset);
	background: var(--color-navy);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.site-nav__panel[hidden] { display: none; }

.site-nav__panel-list a {
	display: block;
	padding-block: var(--space-md);
	border-bottom: 1px solid var(--rule-navy);
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	color: var(--color-white);
}

.site-nav__panel-list a:hover { color: var(--color-light-blue); }

@media (max-width: 900px) {
	.site-nav { display: none; }
	.site-nav__toggle { display: inline-flex; }
}

/* ---------- section system ---------- */

.section { padding-block: clamp(4rem, 9vw, var(--space-3xl)); }
.section__inner { padding-inline: var(--inset); }

.section--light { background: var(--color-light); color: var(--color-dark-text); }
.section--navy { background: var(--color-navy); color: var(--color-white); }
.section--page-head { padding-bottom: 0; padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6rem)); }

.section-eyebrow {
	margin: 0 0 var(--space-lg);
	font-family: var(--font-ui);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--color-blue);
}

.section-eyebrow--invert { color: var(--color-light-blue); }
.section-eyebrow--center { text-align: center; }

.section-title {
	font-size: var(--fs-h2);
	color: var(--color-dark-text);
}

.section-title--invert { color: var(--color-white); }
.section-title--center { text-align: center; margin-inline: auto; max-width: 22ch; }

.section-intro {
	font-size: var(--fs-lead);
	line-height: var(--lh-body);
	color: var(--text-muted);
}

.section-intro--center {
	margin: 0 auto;
	max-width: 78ch;
	text-align: center;
}

.section-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); }
.section-body--invert { color: var(--text-invert-muted); }

.editorial-prose {
	margin: var(--space-xl) auto 0;
	max-width: 66ch;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.editorial-prose p { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-muted); }

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

.hero {
	position: relative;
	display: grid;
	align-content: end;
	min-height: min(94svh, 52rem);
	padding: calc(var(--header-h) + var(--space-xl)) var(--inset) clamp(2.5rem, 5vw, 4rem);
	background: var(--color-navy);
	color: var(--color-white);
	overflow: clip;
}

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

.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		102deg,
		var(--scrim-navy) 0%,
		color-mix(in srgb, var(--color-navy) 34%, transparent) 54%,
		color-mix(in srgb, var(--color-navy) 58%, transparent) 100%
	);
}

.hero__mark {
	position: absolute;
	z-index: 1;
	right: -3%;
	top: 12%;
	width: min(32%, 400px);
	color: var(--color-light-blue);
	opacity: 0.24;
	pointer-events: none;
}

.hero__mark svg { width: 100%; height: auto; }

.hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-lg);
	align-items: end;
	width: 100%;
}

.hero__title {
	font-size: var(--fs-display);
	font-weight: 400;
	line-height: var(--lh-display);
	letter-spacing: var(--ls-display);
	text-transform: uppercase;
	color: var(--color-white);
	max-width: 13ch;
}

.hero__title-line { display: block; }
.hero__title-line--accent { color: var(--color-light-blue); }

.hero__lead {
	margin-top: var(--space-lg);
	max-width: 52ch;
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--color-white);
}

.hero__statement {
	padding-top: var(--space-md);
	border-top: 1px solid var(--rule-navy);
	max-width: 34ch;
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	line-height: 1.3;
	color: var(--color-light-blue);
}

@media (min-width: 1000px) {
	.hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); }
}

@media (max-width: 999px) {
	.hero__mark { display: none; }
}

/* ---------- what we do ---------- */

.service-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: clamp(2rem, 5vw, 4.5rem);
	row-gap: var(--space-xl);
	margin-top: clamp(2.5rem, 6vw, 4.5rem);
	padding-top: var(--space-xl);
	border-top: 1px solid var(--rule-light);
}

.service { position: relative; }

.service__media { margin-bottom: var(--space-lg); overflow: hidden; }

.service__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	transition: transform 600ms var(--ease);
}

.service:hover .service__media img { transform: scale(1.03); }

.service__numeral {
	margin-bottom: var(--space-xs);
	font-family: var(--font-ui);
	font-size: var(--fs-eyebrow);
	letter-spacing: 0.14em;
	color: var(--text-muted);
}

.service__title { font-size: var(--fs-h3); margin-bottom: var(--space-sm); color: var(--color-dark-text); }
.service__text { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-muted); max-width: 42ch; }

@media (min-width: 900px) {
	.service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.service + .service::before {
		content: "";
		position: absolute;
		left: calc(clamp(2rem, 5vw, 4.5rem) / -2);
		top: 0; bottom: 0;
		width: 1px;
		background: var(--rule-light);
	}
}

/* ---------- who we work with ---------- */

.editorial-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}

.editorial-grid__lead .section-title { margin-bottom: var(--space-lg); }

.partner-list { border-top: 1px solid var(--rule-navy); }

.partner-list__item {
	display: flex;
	align-items: baseline;
	gap: clamp(1.5rem, 4vw, 4rem);
	padding-block: clamp(1.25rem, 2.6vw, 2rem);
	border-bottom: 1px solid var(--rule-navy);
	transition: color var(--dur) var(--ease);
}

.partner-list__item:hover { color: var(--color-light-blue); }

.partner-list__num {
	flex: 0 0 auto;
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	color: var(--color-light-blue);
	font-variant-numeric: lining-nums;
}

.partner-list__label {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	line-height: 1.1;
	color: inherit;
}

@media (min-width: 1000px) {
	.editorial-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ---------- what we bring ---------- */

.bring-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
	margin-top: clamp(2.5rem, 6vw, 5rem);
}

.bring-grid__figure { position: relative; display: flex; align-items: center; justify-content: center; }
.bring-grid__symbol { width: min(46%, 260px); color: var(--color-navy); }
/* The travelling block only runs here; elsewhere the mark is static. */
.bring-grid__element { width: min(46%, 300px); margin-left: -10%; color: var(--color-navy); opacity: 0.42; align-self: center; }
.bring-grid__element svg { width: 100%; height: auto; overflow: visible; }
.bring-grid__element .mark-runner { fill: var(--color-blue); }

.bring-list { display: flex; flex-direction: column; gap: var(--space-lg); }

.bring-list__label {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-2xs);
	font-family: var(--font-ui);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--color-blue);
}

/* Thin rule running out from each label, ending on a small open node. */
.bring-list__label::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--rule-light);
	position: relative;
}

.bring-list__text {
	margin: 0;
	max-width: 44ch;
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--color-dark-text);
}

@media (min-width: 1000px) {
	.bring-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

/* ---------- what we focus on ---------- */

.focus-grid {
	display: flex;
	flex-direction: column;
	gap: clamp(3rem, 7vw, 6rem);
	margin-top: clamp(2.5rem, 6vw, 5rem);
}

.focus-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-lg);
	align-items: center;
}

.focus-row__title { font-size: var(--fs-h2); margin-bottom: var(--space-md); max-width: 18ch; }

.focus-row__text {
	padding-left: var(--space-md);
	border-left: 1px solid var(--color-blue);
	max-width: 42ch;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--text-muted);
}

.focus-row__media img { width: 100%; max-width: 640px; height: auto; margin-inline: auto; }

@media (min-width: 900px) {
	.focus-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); }
	.focus-row--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.focus-row--reverse .focus-row__copy { order: 2; }
	.focus-row--reverse .focus-row__media { order: 1; }
}

/* ---------- connect ---------- */

.connect {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: start;
}

.connect__lead .section-title { margin-bottom: var(--space-md); }

.connect__label {
	font-family: var(--font-ui);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--color-light-blue);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--rule-navy);
}

.connect__label--spaced { margin-top: var(--space-lg); }

.connect__email { margin-top: var(--space-2xs); font-family: var(--font-display); font-size: var(--fs-h3); }
.connect__email a { border-bottom: 1px solid var(--rule-navy); transition: border-color var(--dur) var(--ease); }
.connect__email a:hover { border-bottom-color: var(--color-light-blue); }
.connect__place { margin-top: var(--space-2xs); font-family: var(--font-display); font-size: var(--fs-h3); }

@media (min-width: 1000px) {
	.connect { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
}

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

.site-footer {
	position: relative;
	background: var(--color-navy);
	color: var(--color-white);
	padding-block: clamp(3rem, 7vw, 6rem);
	overflow: clip;
}

.site-footer__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-xl);
	padding-inline: var(--inset);
	grid-template-areas:
		"statement"
		"nav"
		"lockup"
		"contact"
		"legal";
}

.site-footer__statement {
	grid-area: statement;
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	line-height: 1.28;
	max-width: 22ch;
}

.site-footer__statement-sub { color: var(--text-invert-muted); }

.site-footer__nav { grid-area: nav; }

.site-footer__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm) var(--space-lg);
}

.site-footer__list a {
	font-size: var(--fs-small);
	color: var(--text-invert-muted);
	border-bottom: 1px solid transparent;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.site-footer__list a:hover { color: var(--color-white); border-bottom-color: var(--color-light-blue); }

.site-footer__lockup {
	grid-area: lockup;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
}

.site-footer__logo { display: block; color: var(--color-white); }
.site-footer__logo svg { display: block; width: auto; height: 3.75rem; }

@media (max-width: 600px) {
	.site-footer__logo svg { height: 2.75rem; }
}

.site-footer__element {
	position: absolute;
	right: var(--inset);
	top: 50%;
	transform: translateY(-50%);
	width: min(17%, 180px);
	color: var(--color-white);
	opacity: 0.2;
	pointer-events: none;
}

.site-footer__element svg { width: 100%; height: auto; }

.site-footer__contact { grid-area: contact; display: flex; align-items: center; gap: var(--space-sm); }
.site-footer__icon { width: 24px; color: var(--color-white); flex: 0 0 auto; }
.site-footer__contact a { font-size: var(--fs-body); border-bottom: 1px solid transparent; }
.site-footer__contact a:hover { border-bottom-color: var(--color-light-blue); }

.site-footer__legal { grid-area: legal; font-size: var(--fs-small); color: var(--text-invert-muted); }

.back-to-top {
	position: absolute;
	right: 0; bottom: 0;
	width: 44px; height: 32px;
	padding: 0; border: 0;
	background: transparent;
	color: var(--color-white);
	cursor: pointer;
	opacity: 0.7;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.back-to-top:hover { opacity: 1; transform: translateY(-3px); }

@media (min-width: 900px) {
	.site-footer__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"statement nav      ."
			".         lockup   ."
			"contact   legal    .";
		align-items: center;
	}
	.site-footer__element { top: 46%; }
}

/* ---------- editorial fallback content ---------- */

.entry-list { display: flex; flex-direction: column; gap: var(--space-lg); margin-top: var(--space-xl); }
.entry__title { font-size: var(--fs-h3); }
.entry__excerpt { color: var(--text-muted); }
.entry-content > * + * { margin-top: var(--space-md); }
.entry-content a { color: var(--color-blue); border-bottom: 1px solid currentColor; }

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

/* Static instances of the mark hide the runner entirely. */
.hero__mark .mark-runner,
.site-footer__element .mark-runner { display: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.service:hover .service__media img,
	.back-to-top:hover { transform: none; }
	.mark-runner { display: none; }
}


/* ===== QND MOTION START — scroll choreography v1 (2026-08-22) ==============
   Additive layer for the qnd-capital theme.
   ROLLBACK: delete everything between the START and END markers.
   Paired with the block in assets/js/theme.js and the qndc_motion_flag()
   helper in functions.php.
   ========================================================================= */

:root {
	--m-ease: cubic-bezier(.16, 1, .3, 1);   /* expo-out */
	--m-dur: 900ms;
	--m-dur-sm: 680ms;
	--m-dur-lg: 1150ms;
	--m-rise: 26px;
}

/* The hidden state exists only when JS is available: html.qndc-motion is set
   by an inline snippet in <head>, so visitors without JS see full content. */
.qndc-motion [data-m] {
	opacity: 0;
	transform: translate3d(var(--m-x, 0px), var(--m-y, var(--m-rise)), 0) scale(var(--m-sc, 1));
	transition:
		opacity var(--m-dur) var(--m-ease) var(--m-delay, 0ms),
		transform var(--m-dur) var(--m-ease) var(--m-delay, 0ms),
		clip-path var(--m-dur) var(--m-ease) var(--m-delay, 0ms);
}

.qndc-motion [data-m].is-in {
	opacity: 1;
	transform: none;
}

/* Elements already scrolled past on load land without playing. */
.qndc-motion [data-m][data-m-instant] {
	transition: none !important;
}

/* --- variants ----------------------------------------------------------- */
.qndc-motion [data-m="fade"]    { --m-y: 0px; }
.qndc-motion [data-m="rise-sm"] { --m-y: 14px; --m-dur: var(--m-dur-sm); }
.qndc-motion [data-m="left"]    { --m-x: -30px; --m-y: 0px; }
.qndc-motion [data-m="right"]   { --m-x: 30px; --m-y: 0px; }
.qndc-motion [data-m="zoom"]    { --m-y: 18px; --m-sc: .965; --m-dur: var(--m-dur-lg); }

/* --- masked line reveal (headings) -------------------------------------- */
.qndc-motion [data-m="mask"] {
	opacity: 1;
	transform: none;
}

.qndc-motion .m-clip {
	display: block;
	overflow: hidden;
	padding-block: .16em;
	margin-block: -.16em;
}

.qndc-motion .m-clip > .m-in {
	display: block;
	opacity: 0;
	transform: translate3d(0, 110%, 0);
	transition:
		transform var(--m-dur-lg) var(--m-ease) var(--m-delay, 0ms),
		opacity 600ms linear var(--m-delay, 0ms);
}

.qndc-motion [data-m="mask"].is-in .m-clip > .m-in {
	opacity: 1;
	transform: none;
}

.qndc-motion [data-m="mask"][data-m-instant] .m-clip > .m-in {
	transition: none !important;
	opacity: 1;
	transform: none;
}

/* --- focus-row artwork -------------------------------------------------- */
/* Line-art WebP: no clip-path wipe and no scale. clip-path is not GPU
   composited, so it repaints on every frame, and scaling raster line art
   resamples the strokes so they read soft until the animation lands. Opacity
   plus transform stays on the compositor from start to finish. */
.qndc-motion [data-m="media"] {
	--m-x: 26px;
	--m-y: 10px;
	--m-dur: 1050ms;
}

/* Artwork drifts in from the outer edge of whichever side it sits on. */
.qndc-motion .focus-row--reverse [data-m="media"] {
	--m-x: -26px;
}

/* --- hero parallax staging ---------------------------------------------- */
.qndc-motion .hero__media {
	overflow: hidden;
}

.qndc-motion .hero__media img {
	position: relative;
	top: -10%;
	height: 120%;
}

/* --- hero: fill the viewport -------------------------------------------- */
/* The theme ships min-height: 94vh, which leaves a strip of the next section
   showing under the fold. svh stops mobile browsers jumping when the URL bar
   collapses; the admin-bar offsets only ever apply to logged-in staff. */
.hero {
	min-height: 100vh;
	min-height: 100svh;
}

.admin-bar .hero {
	min-height: calc(100vh - 32px);
	min-height: calc(100svh - 32px);
}

@media screen and (max-width: 782px) {
	.admin-bar .hero {
		min-height: calc(100vh - 46px);
		min-height: calc(100svh - 46px);
	}
}

/* --- hero mark: let the outline settle back into the photograph --------- */
/* Kept outside the .qndc-motion guard so the mark reads the same with or
   without the motion layer; the opacity sits on the SVG child so the fade-in
   on .hero__mark can still run 0 -> 1 on its own. */
@media (min-width: 768px) {
	.hero__mark {
		margin-right: clamp(48px, 7vw, 120px);
	}
}

.hero__mark > svg {
	opacity: .38;
}

/* --- header on scroll ---------------------------------------------------- */
.qndc-motion .site-header {
	transition:
		background-color 520ms var(--m-ease),
		backdrop-filter 520ms var(--m-ease),
		box-shadow 520ms var(--m-ease);
}

.qndc-motion .site-header.is-scrolled {
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	box-shadow: 0 1px 0 color-mix(in srgb, var(--color-white, #FFFFFF) 12%, transparent);
}

/* --- reading progress ---------------------------------------------------- */
.qndc-progress {
	position: fixed;
	inset: 0 auto auto 0;
	z-index: 9990;
	width: 100%;
	height: 2px;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg,
		var(--color-light-blue, #70CEFA),
		color-mix(in srgb, var(--color-light-blue, #70CEFA) 35%, var(--color-white, #FFFFFF)));
	opacity: 0;
	pointer-events: none;
	transition: opacity 400ms var(--m-ease);
}

.qndc-progress.is-on {
	opacity: 1;
}

.admin-bar .qndc-progress {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .qndc-progress { top: 46px; }
}

/* --- back to top --------------------------------------------------------- */
.qndc-motion .back-to-top {
	transition:
		opacity 420ms var(--m-ease),
		transform 420ms var(--m-ease),
		visibility 420ms var(--m-ease);
}

/* --- accessibility ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.qndc-motion [data-m],
	.qndc-motion [data-m="mask"] .m-clip > .m-in,
	.qndc-motion [data-m="media"],
	.qndc-motion [data-m="media"] img {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}

	.qndc-progress { display: none; }
}

/* ===== QND MOTION END ==================================================== */


/* ===== QND CONNECT START — modal, footer, focus titles (2026-08-23) ========
   ROLLBACK: delete everything between the START and END markers. Pairs with
   the qndc_connect_modal() block in functions.php and the modal block in
   assets/js/theme.js.
   ========================================================================= */

/* --- focus titles: two-line lockups -------------------------------------- */
/* The copy holds a real newline, so each sector reads as a two-line lockup
   instead of orphaning a word. pre-line still wraps when the column is
   narrower than a line, so nothing breaks on a phone. */
.focus-row__title {
	white-space: pre-line;
}

/* --- footer -------------------------------------------------------------- */
/* Was three columns with the third left empty and the lockup marooned in the
   middle. Now: statement opposite the lockup, a full-width rule, then contact
   opposite the navigation, with the legal line closing it out. */
.site-footer__inner {
	position: relative;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	grid-template-areas:
		"statement lockup"
		"rule      rule"
		"contact   nav"
		"legal     legal";
	column-gap: clamp(32px, 5vw, 96px);
	row-gap: 0;
	align-items: start;
}

.site-footer__inner::before {
	content: "";
	grid-area: rule;
	width: 100%;
	height: 1px;
	margin-top: clamp(48px, 6vw, 80px);
	background: color-mix(in srgb, var(--color-white, #FFFFFF) 16%, transparent);
}

.site-footer__statement {
	grid-area: statement;
	max-width: 26ch;
	margin: 0;
}

.site-footer__lockup {
	grid-area: lockup;
	justify-self: end;
	align-self: start;
	margin: 0;
}

.site-footer__contact {
	grid-area: contact;
	margin: clamp(28px, 3vw, 40px) 0 0;
}

.site-footer__nav {
	grid-area: nav;
	justify-self: end;
	margin: clamp(28px, 3vw, 40px) 0 0;
}

.site-footer__legal {
	grid-area: legal;
	margin: clamp(44px, 4.5vw, 64px) 0 0;
}

/* Decorative cubes become a watermark rather than a column of their own. */
.site-footer__element {
	right: clamp(-56px, -3vw, -16px);
	bottom: 0;
	z-index: 0;
	opacity: .16;
	pointer-events: none;
}

/* Keep every line of type crisply above the watermark. */
.site-footer__inner > *:not(.site-footer__element):not(.back-to-top) {
	position: relative;
	z-index: 1;
}

@media (max-width: 860px) {
	.site-footer__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"statement"
			"lockup"
			"rule"
			"contact"
			"nav"
			"legal";
	}

	.site-footer__lockup,
	.site-footer__nav {
		justify-self: start;
	}

	.site-footer__lockup {
		margin-top: clamp(28px, 6vw, 40px);
	}

	.site-footer__element {
		display: none;
	}
}

/* --- Connect with us modal ------------------------------------------------ */
body.qndc-modal-open {
	overflow: hidden;
}

.qndc-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: clamp(16px, 4vw, 48px);
}

.qndc-modal[hidden] {
	display: none;
}

.qndc-modal__scrim {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--color-navy, #0E1C30) 80%, transparent);
	backdrop-filter: blur(10px) saturate(120%);
	-webkit-backdrop-filter: blur(10px) saturate(120%);
	opacity: 0;
	transition: opacity 320ms var(--m-ease, cubic-bezier(.16, 1, .3, 1));
}

.qndc-modal.is-open .qndc-modal__scrim {
	opacity: 1;
}

.qndc-modal__panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
	width: min(1020px, 100%);
	max-height: min(88svh, 780px);
	overflow: auto;
	background: var(--color-white, #FFFFFF);
	box-shadow: 0 40px 120px -30px rgba(6, 14, 28, .55);
	opacity: 0;
	transform: translate3d(0, 22px, 0) scale(.985);
	transition:
		opacity 420ms var(--m-ease, cubic-bezier(.16, 1, .3, 1)),
		transform 520ms var(--m-ease, cubic-bezier(.16, 1, .3, 1));
}

.qndc-modal.is-open .qndc-modal__panel {
	opacity: 1;
	transform: none;
}

.qndc-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-dark-text, #0E1C30);
	cursor: pointer;
	transition: transform 320ms var(--m-ease, cubic-bezier(.16, 1, .3, 1));
}

.qndc-modal__close svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.3;
	stroke-linecap: round;
}

.qndc-modal__close:hover,
.qndc-modal__close:focus-visible {
	transform: rotate(90deg);
}

/* Aside ------------------------------------------------------------------- */
.qndc-modal__aside {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(14px, 1.8vw, 22px);
	padding: clamp(32px, 4vw, 56px);
	background: var(--color-navy, #0E1C30);
	color: var(--color-white, #FFFFFF);
}

.qndc-modal__aside::after {
	content: "";
	position: absolute;
	right: -32%;
	bottom: -38%;
	width: 92%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%,
		color-mix(in srgb, var(--color-light-blue, #70CEFA) 24%, transparent),
		transparent 68%);
	pointer-events: none;
}

.qndc-modal__eyebrow {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--fs-eyebrow, .75rem);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--color-light-blue, #70CEFA);
}

.qndc-modal__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.4rem + 1.7vw, 3rem);
	line-height: 1.06;
	letter-spacing: -.01em;
	font-weight: 400;
}

.qndc-modal__lead {
	margin: 0;
	max-width: 34ch;
	font-family: var(--font-ui);
	font-size: .9375rem;
	line-height: var(--lh-body, 1.7);
	color: var(--text-invert-muted, rgba(255, 255, 255, .76));
}

.qndc-modal__mail {
	position: relative;
	margin-top: auto;
	padding-bottom: 4px;
	font-family: var(--font-ui);
	font-size: .875rem;
	color: var(--color-white, #FFFFFF);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--color-white, #FFFFFF) 34%, transparent);
	transition: border-color 300ms var(--m-ease, cubic-bezier(.16, 1, .3, 1));
}

.qndc-modal__mail:hover {
	border-bottom-color: var(--color-light-blue, #70CEFA);
}

/* Form -------------------------------------------------------------------- */
.qndc-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 2.2vw, 26px) clamp(20px, 2.6vw, 32px);
	align-content: start;
	padding: clamp(32px, 4vw, 56px);
	background: var(--color-white, #FFFFFF);
}

.qndc-form[hidden] {
	display: none;
}

.qndc-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.qndc-field {
	position: relative;
}

.qndc-field--wide,
.qndc-form__foot {
	grid-column: 1 / -1;
}

.qndc-field input,
.qndc-field select,
.qndc-field textarea {
	display: block;
	width: 100%;
	padding: 26px 0 10px;
	border: 0;
	border-bottom: 1px solid var(--rule-light, rgba(14, 28, 48, .14));
	border-radius: 0;
	background: transparent;
	font-family: var(--font-ui);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--color-dark-text, #0E1C30);
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 280ms var(--m-ease, cubic-bezier(.16, 1, .3, 1));
}

.qndc-field textarea {
	min-height: 104px;
	resize: vertical;
}

.qndc-field input:focus,
.qndc-field select:focus,
.qndc-field textarea:focus {
	outline: none;
}

.qndc-field label {
	position: absolute;
	top: 26px;
	left: 0;
	font-family: var(--font-ui);
	font-size: 1rem;
	line-height: 1.4;
	color: color-mix(in srgb, var(--color-dark-text, #0E1C30) 52%, transparent);
	pointer-events: none;
	transform-origin: 0 0;
	transition:
		transform 280ms var(--m-ease, cubic-bezier(.16, 1, .3, 1)),
		color 280ms var(--m-ease, cubic-bezier(.16, 1, .3, 1));
}

.qndc-field label span {
	font-size: .75em;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .62;
}

.qndc-field input:focus + label,
.qndc-field input:not(:placeholder-shown) + label,
.qndc-field textarea:focus + label,
.qndc-field textarea:not(:placeholder-shown) + label,
.qndc-field--select label {
	transform: translateY(-24px) scale(.72);
	color: color-mix(in srgb, var(--color-dark-text, #0E1C30) 62%, transparent);
}

/* Focus underline grows from the left edge. */
.qndc-field::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background: var(--color-light-blue, #70CEFA);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 400ms var(--m-ease, cubic-bezier(.16, 1, .3, 1));
}

.qndc-field:focus-within::after {
	transform: none;
}

.qndc-field--select select {
	cursor: pointer;
}

.qndc-field__chevron {
	position: absolute;
	right: 2px;
	bottom: 14px;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: color-mix(in srgb, var(--color-dark-text, #0E1C30) 55%, transparent);
	stroke-width: 1.4;
	pointer-events: none;
}

.qndc-form__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: clamp(6px, 1vw, 14px);
}

.qndc-form__status {
	margin: 0;
	min-height: 1.3em;
	font-family: var(--font-ui);
	font-size: .8125rem;
	line-height: 1.4;
	color: color-mix(in srgb, var(--color-dark-text, #0E1C30) 62%, transparent);
}

.qndc-form__status.is-error {
	color: #A83A2B;
}

.qndc-submit {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: none;
	padding: 15px 26px;
	border: 1px solid var(--color-navy, #0E1C30);
	background: var(--color-navy, #0E1C30);
	color: var(--color-white, #FFFFFF);
	font-family: var(--font-ui);
	font-size: .75rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color 320ms var(--m-ease, cubic-bezier(.16, 1, .3, 1)),
		color 320ms var(--m-ease, cubic-bezier(.16, 1, .3, 1));
}

.qndc-submit svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 320ms var(--m-ease, cubic-bezier(.16, 1, .3, 1));
}

.qndc-submit:hover,
.qndc-submit:focus-visible {
	background: transparent;
	color: var(--color-navy, #0E1C30);
}

.qndc-submit:hover svg {
	transform: translateX(4px);
}

.qndc-submit[disabled] {
	opacity: .55;
	cursor: progress;
}

/* Success ----------------------------------------------------------------- */
.qndc-modal__done {
	grid-column: 2;
	display: grid;
	align-content: center;
	justify-items: start;
	gap: 14px;
	padding: clamp(40px, 5vw, 64px);
}

.qndc-modal__done[hidden] {
	display: none;
}

.qndc-modal__done svg {
	width: 38px;
	height: 38px;
	fill: none;
	stroke: var(--color-light-blue, #70CEFA);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.qndc-modal__done h3 {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
	font-weight: 400;
	line-height: 1.1;
	color: var(--color-dark-text, #0E1C30);
}

/* Focused by script so screen readers announce the result; the ring on a
   heading nobody can tab to only reads as a glitch. */
.qndc-modal__done h3:focus {
	outline: none;
}

.qndc-modal__done p {
	margin: 0;
	max-width: 32ch;
	font-family: var(--font-ui);
	font-size: .9375rem;
	line-height: var(--lh-body, 1.7);
	color: color-mix(in srgb, var(--color-dark-text, #0E1C30) 68%, transparent);
}

.qndc-modal__doneclose {
	margin-top: 10px;
	padding: 0 0 4px;
	border: 0;
	border-bottom: 1px solid var(--rule-light, rgba(14, 28, 48, .2));
	background: transparent;
	font-family: var(--font-ui);
	font-size: .75rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--color-dark-text, #0E1C30);
	cursor: pointer;
	transition: border-color 300ms var(--m-ease, cubic-bezier(.16, 1, .3, 1));
}

.qndc-modal__doneclose:hover {
	border-bottom-color: var(--color-navy, #0E1C30);
}

@media (max-width: 860px) {
	.qndc-modal {
		padding: 0;
	}

	.qndc-modal__panel {
		grid-template-columns: minmax(0, 1fr);
		width: 100%;
		height: 100svh;
		max-height: 100svh;
	}

	.qndc-modal__aside {
		padding-top: clamp(52px, 9vw, 68px);
	}

	.qndc-form,
	.qndc-modal__done {
		grid-column: 1;
		grid-template-columns: minmax(0, 1fr);
	}

	.qndc-form__foot {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.qndc-submit {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qndc-modal__scrim,
	.qndc-modal__panel,
	.qndc-modal__close,
	.qndc-field::after,
	.qndc-field label,
	.qndc-submit,
	.qndc-submit svg {
		transition: none !important;
	}

	.qndc-modal__panel {
		transform: none;
	}
}

/* --- subject dropdown ---------------------------------------------------- */
/* The OS select popup drags system chrome — rounded corners, its own font, a
   bright accent — into an otherwise typographic form. A listbox built from the
   same tokens keeps the panel on brand; the native select stays in the markup
   as the value that submits. */
.qndc-field--select.is-enhanced .qndc-select__native {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
}

.qndc-field--select.is-enhanced .qndc-field__chevron {
	display: none;
}

.qndc-select__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 26px 0 10px;
	border: 0;
	border-bottom: 1px solid var(--rule-light, rgba(14, 28, 48, .14));
	border-radius: 0;
	background: transparent;
	font-family: var(--font-ui);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--color-dark-text, #0E1C30);
	text-align: left;
	cursor: pointer;
}

.qndc-select__toggle:focus {
	outline: none;
}

.qndc-select__toggle svg {
	flex: none;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: color-mix(in srgb, var(--color-dark-text, #0E1C30) 55%, transparent);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 300ms var(--m-ease, cubic-bezier(.16, 1, .3, 1));
}

.qndc-field--select.is-open .qndc-select__toggle svg {
	transform: rotate(180deg);
}

.qndc-select__list {
	position: absolute;
	z-index: 5;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: var(--color-white, #FFFFFF);
	border: 1px solid color-mix(in srgb, var(--color-dark-text, #0E1C30) 12%, transparent);
	box-shadow: 0 24px 48px -18px rgba(6, 14, 28, .3);
	opacity: 0;
	transform: translate3d(0, -6px, 0);
	pointer-events: none;
	transition:
		opacity 200ms var(--m-ease, cubic-bezier(.16, 1, .3, 1)),
		transform 240ms var(--m-ease, cubic-bezier(.16, 1, .3, 1));
}

.qndc-select__list[hidden] {
	display: none;
}

.qndc-field--select.is-open .qndc-select__list {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.qndc-field--select.is-up .qndc-select__list {
	top: auto;
	bottom: calc(100% + 6px);
	transform: translate3d(0, 6px, 0);
}

.qndc-field--select.is-up.is-open .qndc-select__list {
	transform: none;
}

.qndc-select__option {
	position: relative;
	padding: 11px 18px 11px 30px;
	font-family: var(--font-ui);
	font-size: .9375rem;
	line-height: 1.4;
	color: color-mix(in srgb, var(--color-dark-text, #0E1C30) 78%, transparent);
	cursor: pointer;
	transition:
		background-color 180ms var(--m-ease, cubic-bezier(.16, 1, .3, 1)),
		color 180ms var(--m-ease, cubic-bezier(.16, 1, .3, 1));
}

.qndc-select__option::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 14px;
	width: 5px;
	height: 5px;
	margin-top: -3px;
	background: var(--color-light-blue, #70CEFA);
	opacity: 0;
	transform: scale(.4);
	transition:
		opacity 200ms var(--m-ease, cubic-bezier(.16, 1, .3, 1)),
		transform 200ms var(--m-ease, cubic-bezier(.16, 1, .3, 1));
}

.qndc-select__option.is-active {
	background: color-mix(in srgb, var(--color-navy, #0E1C30) 5%, transparent);
	color: var(--color-dark-text, #0E1C30);
}

.qndc-select__option.is-selected {
	color: var(--color-navy, #0E1C30);
}

.qndc-select__option.is-selected::before {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.qndc-select__list,
	.qndc-select__option,
	.qndc-select__option::before,
	.qndc-select__toggle svg {
		transition: none !important;
	}
}

/* ===== QND CONNECT END =================================================== */


/* ===== QND FOCUS START — what we focus on + bring heading (2026-08-23) =====
   ROLLBACK: delete everything between the START and END markers.
   ========================================================================= */

/* --- "Capital. Experience. Partnership." on one line --------------------- */
/* The theme caps section titles at a reading measure (535px) which is narrower
   than this particular line needs (652px). Lift the cap on wide screens only;
   below the breakpoint it wraps normally rather than overflowing. */
@media (min-width: 860px) {
	#what-we-bring .section-title {
		max-width: none;
		white-space: nowrap;
	}
}

/* --- what we focus on: numbered rows ------------------------------------- */
.focus-grid {
	counter-reset: qndc-focus;
}

/* Give the copy enough room for a one-line title, and drop the two-line
   lockup rule that the three-sector version needed. */
.focus-row {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

.focus-row__title {
	white-space: normal;
	/* The theme caps the title at a 343px measure; the longer sector name
	   needs 442px to stay on one line. */
	max-width: none;
	font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
}

/* 01 — 02 — set in the display serif above each title. The blue matches the
   rule already drawn down the left edge of the body copy. */
.focus-row__title::before {
	counter-increment: qndc-focus;
	content: counter(qndc-focus, decimal-leading-zero) " \2014";
	display: block;
	margin-bottom: clamp(12px, 1.4vw, 20px);
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 1rem + .35vw, 1.5rem);
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
	line-height: 1;
	letter-spacing: .06em;
	color: #1B7FC4;
}

@media (max-width: 860px) {
	.focus-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- hero accent line ---------------------------------------------------- */
/* Cormorant Garamond is served here at 300/400/500/600, so 600 is a real cut
   rather than a synthesised bold that would smear the thin strokes at display
   size. Applies to the accent line on both the home and About heroes. */
.hero__title-line--accent {
	font-weight: 600;
}

/* ===== QND FOCUS END ===================================================== */