/* Newland Chase Consulting sub-brand.
   Built on the secondary (blue) palette from phoenix-framework/css/variables.css. */

/* Interactive colors follow the CIBT Digital Guidelines (brand guide pp. 44-54):
   secondary button #05779a, hover #1f3543, focus outline #05779a, pill shape. */
:root {
	--consulting-primary: var(--color-blue);          /* #05779a */
	--consulting-dark: var(--color-dark-blue);        /* #1f3543 */
	--consulting-accent: var(--color-light-blue);     /* #39a8da */
	--consulting-accent-soft: var(--color-bright-blue); /* #a7d7fd */

}

/* ---------- Document defaults ----------
   These two rules used to live in phoenix-framework/css/framework-combined.css.
   That file is vendor code shared with the main site, so a Phoenix update would
   drop them without warning. This stylesheet loads only on consulting- templates
   and is enqueued after framework-combined, so the same rules apply here, scoped
   to the sub-brand. color-scheme stops the browser auto-darkening form controls
   and scrollbars; the body background stops a dark UA default showing through. */
html {
	color-scheme: light;
}

body {
	background-color: rgb(var(--color-white));
}

/* ---------- Skip link ----------
   Off-screen until focused, then visibly parks at the top left. (The main
   theme's .skip-to-main has no focus state, so it never becomes visible.) */
.subbrand-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: calc(var(--spacer) * 0.75) calc(var(--spacer) * 1.25);
	background: rgb(var(--consulting-primary));
	color: rgb(var(--color-white));
	font-family: var(--font-content);
	font-weight: 600;
	text-decoration: none;
}

.subbrand-skip-link:focus {
	left: 0;
	outline: 3px solid rgb(var(--consulting-dark));
	outline-offset: 2px;
}

/* ---------- Header ---------- */
.consulting-header {
	background: rgb(var(--color-white));
	border-bottom: 4px solid rgb(var(--consulting-primary));
}

.consulting-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--spacer) * 2);
	flex-wrap: wrap;
	padding: var(--spacer) 0;
}

.consulting-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

/* Single-line SVG lockup (viewBox 452 x 50, so ~9:1) */
.consulting-logo img {
	width: 290px;
	max-width: 100%;
	height: auto;
	display: block;
}

.consulting-footer .consulting-logo img {
	width: 250px;
}

.consulting-wordmark {
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: rgb(var(--consulting-primary));
	margin-top: 0.25rem;
}

.consulting-nav ul {
	display: flex;
	align-items: center;
	gap: calc(var(--spacer) * 1.5);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

/* Nav per digital guide p.54: all-caps items, underline bar on hover */
.consulting-nav a {
	font-family: var(--font-content);
	font-weight: 400;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: rgb(var(--color-dark));
	text-decoration: none;
	padding-bottom: 4px;
	border-bottom: 3px solid transparent;
}

/* ---------- Mobile navigation ---------- */
.consulting-nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	color: rgb(var(--consulting-primary));
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
	display: block;
	width: 26px;
	height: 2px;
	background: currentColor;
	transition: transform 200ms ease, opacity 200ms ease;
}

.nav-toggle-bars {
	position: relative;
	margin: 0 auto;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
	content: '';
	position: absolute;
	left: 0;
}

.nav-toggle-bars::before {
	top: -8px;
}

.nav-toggle-bars::after {
	top: 8px;
}

[aria-expanded='true'] .nav-toggle-bars {
	background: transparent;
}

[aria-expanded='true'] .nav-toggle-bars::before {
	transform: translateY(8px) rotate(45deg);
}

[aria-expanded='true'] .nav-toggle-bars::after {
	transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 1024px) {
	.consulting-nav-toggle {
		display: block;
	}

	/* Keep the logo and toggle on one row */
	.consulting-header-inner {
		gap: var(--spacer);
	}

	/* Matches the Legal mobile logo HEIGHT (29px): the Consulting lockup
	   is a longer mark (452:50), so the same height means more width */
	.consulting-logo img {
		max-width: 262px;
	}

	.consulting-nav {
		display: none;
		width: 100%;
		order: 3;
		padding-bottom: var(--spacer);
	}

	.consulting-nav.is-open {
		display: block;
	}

	.consulting-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.consulting-nav li {
		border-top: 1px solid rgb(var(--color-gray-5));
	}

	.consulting-nav a:not(.btn) {
		display: block;
		padding: calc(var(--spacer) * 0.85) 0;
		border-bottom: none;
	}

	.consulting-nav a.btn {
		display: inline-block;
		margin-top: var(--spacer);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nav-toggle-bars,
	.nav-toggle-bars::before,
	.nav-toggle-bars::after {
		transition: none;
	}
}

.consulting-nav a:not(.btn):hover {
	color: rgb(var(--consulting-primary));
	border-bottom-color: rgb(var(--consulting-primary));
}

/* ---------- Buttons (CIBT digital guide p.48: pill shape, secondary blue) ---------- */
.btn.btn-consulting,
.btn-consulting,
.btn-consulting-outline,
.btn-consulting-white {
	border-radius: 999px;
}

.btn.btn-consulting,
.btn-consulting {
	background: rgb(var(--consulting-primary));
	color: rgb(var(--color-white));
	border: 2px solid rgb(var(--consulting-primary));
}

.btn-consulting:hover {
	background: rgb(var(--consulting-dark));
	border-color: rgb(var(--consulting-dark));
	color: rgb(var(--color-white));
}

/* On dark backgrounds the guide uses the pale-blue variant (#a7d7fd, hover #39a8da) */
.btn-consulting-outline {
	background: rgb(var(--consulting-accent-soft));
	color: rgb(var(--consulting-dark));
	border: 2px solid rgb(var(--consulting-accent-soft));
}

.btn-consulting-outline:hover {
	background: rgb(var(--consulting-accent));
	border-color: rgb(var(--consulting-accent));
	color: rgb(var(--consulting-dark));
}

.btn-consulting-white {
	background: rgb(var(--color-white));
	color: rgb(var(--consulting-dark));
	border: 2px solid rgb(var(--color-white));
}

.btn-consulting-white:hover {
	background: rgb(var(--color-dark));
	border-color: rgb(var(--color-dark));
	color: rgb(var(--color-white));
}

.btn-consulting:focus-visible,
.btn-consulting-outline:focus-visible,
.btn-consulting-white:focus-visible {
	outline: 2px solid rgb(var(--consulting-primary));
	outline-offset: 3px;
}

/* ---------- Interaction polish ----------
   Buttons lift by a hair on hover, then settle back on click. Transform and
   shadow only, so nothing reflows or nudges neighbours. Deliberately no scale:
   growing the pill resamples its label and reads as bouncy, which is wrong for
   an advisory brand. The lift alone is enough to say the thing is clickable. */
.btn-consulting,
.btn-consulting-outline,
.btn-consulting-white {
	transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease,
		transform 180ms ease-out, box-shadow 180ms ease-out;
}

.btn-consulting:hover,
.btn-consulting-outline:hover,
.btn-consulting-white:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(var(--color-dark), 0.15);
}

.btn-consulting:active,
.btn-consulting-outline:active,
.btn-consulting-white:active {
	transform: translateY(0);
	box-shadow: 0 1px 3px rgba(var(--color-dark), 0.13);
	transition-duration: 60ms;
}

.consulting-nav a:not(.btn) {
	transition: color 180ms ease, border-bottom-color 180ms ease;
}

.consulting-footer-nav a,
.consulting-footer-meta a {
	transition: color 180ms ease;
}

/* Visible focus for keyboard users */
.consulting-nav a:focus-visible,
.consulting-logo:focus-visible,
.consulting-nav-toggle:focus-visible {
	outline: 2px solid rgb(var(--consulting-primary));
	outline-offset: 3px;
	border-radius: 2px;
}

.consulting-footer-nav a:focus-visible,
.consulting-footer-meta a:focus-visible,
.consulting-footer .consulting-logo:focus-visible {
	outline: 2px solid rgb(var(--consulting-accent-soft));
	outline-offset: 3px;
	border-radius: 2px;
}


@media (prefers-reduced-motion: reduce) {
	.btn-consulting,
	.btn-consulting-outline,
	.btn-consulting-white {
		transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
	}

	.btn-consulting:hover,
	.btn-consulting-outline:hover,
	.btn-consulting-white:hover,
	.btn-consulting:active,
	.btn-consulting-outline:active,
	.btn-consulting-white:active {
		transform: none;
	}
}

/* ---------- Hero ---------- */
.c-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, rgb(var(--consulting-dark)) 0%, rgb(var(--consulting-primary)) 100%);
	color: rgb(var(--color-white));
	padding: calc(var(--section-padding) * 1.5) 0;
}

/* With a background image: photo anchored right, brand-colored scrim fading
   left-to-right so the headline always sits on solid color. */
.c-hero-media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
}

.c-hero-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
		rgb(var(--consulting-dark)) 0%,
		rgb(var(--consulting-dark)) 38%,
		rgba(var(--consulting-dark), 0.94) 54%,
		rgba(var(--consulting-primary), 0.7) 70%,
		rgba(var(--consulting-primary), 0.28) 86%,
		rgba(var(--consulting-primary), 0) 100%);
}

.c-hero > .container {
	position: relative;
	z-index: 1;
}

.c-hero {
	/* Fluid headline size, and one shared measure so the headline and the body
	   copy wrap at the same width. 9.58 is the pixel width of 22 display-font
	   characters per 1px of font size, i.e. the old `max-width: 22ch`. */
	--hero-headline-size: clamp(2.5rem, 5.6vw, 4.5rem);
	--hero-measure: calc(var(--hero-headline-size) * 9.58);
}

.c-hero h1 {
	font-size: var(--hero-headline-size);
	line-height: 1.08;
	max-width: var(--hero-measure);
}

.c-hero .c-hero-body,
.c-hero-has-media .c-hero-body {
	max-width: var(--hero-measure);
}

@media (max-width: 900px) {
	.c-hero-media {
		background-position: center;
	}

	.c-hero-scrim {
		background: linear-gradient(100deg,
			rgb(var(--consulting-dark)) 0%,
			rgba(var(--consulting-dark), 0.95) 45%,
			rgba(var(--consulting-dark), 0.85) 100%);
	}
}

.c-hero h1 {
	color: rgb(var(--color-white));
	max-width: 20ch;
}

.c-hero-sub {
	font-size: 1.25rem;
	max-width: 60ch;
	color: rgb(var(--consulting-accent-soft));
}

.c-hero-body {
	max-width: 60ch;
	margin-top: calc(var(--spacer) * 1.5);
}

.c-hero-body p {
	font-size: 1.1rem;
	color: rgb(var(--consulting-accent-soft));
	margin-bottom: var(--spacer);
}

/* Keep the support copy clearly subordinate to the headline on mobile.
   Placed after the base rules so it wins the cascade. */
@media (max-width: 900px) {
	.c-hero-sub {
		font-size: 1.1rem;
	}

	.c-hero-body p {
		font-size: 1.05rem;
	}
}

/* Interior page headers: body copy in white at the standard section body
   size, per the 2026-08-26 design review. The homepage hero keeps the larger pale-blue
   treatment above. */
.c-hero-page .c-hero-body p {
	font-size: 1rem;
	color: rgb(var(--color-white));
}

.c-body {
	max-width: 70ch;
}

.c-body p {
	margin-bottom: var(--spacer);
}

.c-lead-body p {
	font-size: 1.2rem;
}

.c-cta-body {
	max-width: 60ch;
	margin: 0 auto calc(var(--spacer) * 1.5);
}

.c-hero-actions {
	display: flex;
	gap: var(--spacer);
	flex-wrap: wrap;
	margin-top: calc(var(--spacer) * 2);
}

.c-hero-page {
	padding: var(--section-padding) 0;
}

/* With a header image, give the artwork room to breathe. A short band crops a
   wide image hard and leaves it looking cramped. Same treatment as Legal. */
.c-hero-page.c-hero-has-media {
	display: flex;
	align-items: center;
	min-height: 360px;
}

/* ---------- Sections ---------- */
.c-section {
	padding: var(--section-padding) 0;
}

.c-section-alt {
	background: rgb(var(--color-gray-2));
}

/* Wider side margins on desktop only; mobile keeps the standard container
   padding so the content isn't squeezed on small screens. */
@media (min-width: 1025px) {
	.c-section-inset > .container {
		padding-inline: calc(var(--spacer) * 4);
	}
}

.c-section h2 {
	color: rgb(var(--consulting-dark));
}

.c-lead {
	font-size: 1.2rem;
	max-width: 70ch;
}

/* ---------- Cards ---------- */
.c-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: calc(var(--spacer) * 1.5);
	margin-top: calc(var(--spacer) * 2);
}

/* Centered section heading over the region blocks */
#regions > .container > h2 {
	text-align: center;
}

/* Region blocks on Global Reach, per the 2026-08-26 design review: 80%-width splits,
   the heading on a blue-gradient banner left (the header's gradient) with
   an optional landmark photo showing subtly through, copy on white right */
.c-regions {
	display: grid;
	row-gap: calc(var(--spacer) * 1.5);
	margin-top: calc(var(--spacer) * 1.5);
}

.c-region {
	width: 80%;
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
}

.c-region-banner {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, rgb(var(--consulting-dark)) 0%, rgb(var(--consulting-primary)) 100%);
	padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
}

.c-region-media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

/* Even rows carry the blue on the right, alternating like the Industries
   rows; the alternation is display order only, so reading order stays put */
.c-region:nth-child(even) .c-region-banner {
	order: 2;
}

/* The blue half is a square: the strut's padding resolves against the
   banner width, forcing height = width. Not aspect-ratio, which Safari
   mis-sizes on stretched grid items. The extra spacer compensates for the
   percentage resolving against the content box: horizontal padding (2 * 2)
   minus vertical (1.5 * 2) leaves one spacer short of a true square. */
.c-region-banner::before {
	content: '';
	width: 0;
	padding-top: calc(100% + var(--spacer));
}

.c-region-body h3 {
	font-size: 1.8rem;
	color: rgb(var(--consulting-dark));
	margin: 0 0 calc(var(--spacer) * 0.75);
}

.c-region-body {
	background: rgb(var(--color-white));
	padding: calc(var(--spacer) * 1.5) calc(var(--spacer) * 2);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.c-region-body p {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.c-region {
		width: 100%;
		grid-template-columns: 1fr;
	}

	/* Stacked, the image always sits above the copy */
	.c-region:nth-child(even) .c-region-banner {
		order: 0;
	}
}

.c-card {
	background: rgb(var(--color-white));
	border-top: 4px solid rgb(var(--consulting-accent));
	box-shadow: 0 2px 12px rgba(var(--color-dark-blue), 0.08);
	padding: calc(var(--spacer) * 1.5);
}

.c-card h3 {
	color: rgb(var(--consulting-primary));
	margin-top: 0;
}

/* ---------- Centered section variant (icon-card sections) ---------- */
.c-section-centered {
	text-align: center;
}

.c-section-centered .c-body {
	margin-inline: auto;
}

/* Any section heading over an icon-card grid is centered, per the
   2026-08-26 design review - structural, so future icon-card sections inherit it */
.container:has(> .c-cards-iconed) > h2 {
	text-align: center;
}

/* Extra top room so the icon circles can overlap the card edge */
.c-cards-iconed {
	margin-top: calc(var(--spacer) * 3.5);
}

.c-card-iconed {
	position: relative;
	text-align: center;
	padding-top: calc(var(--spacer) * 3);
	box-shadow: none;
}

.c-card-icon {
	position: absolute;
	top: -36px;
	left: 50%;
	transform: translateX(-50%);
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgb(var(--consulting-primary));
	border: 4px solid rgb(var(--color-gray-2));

	/* Font Awesome Light (300) gives the monoline stroke weight */
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-icon);
	font-weight: 300;
	font-style: normal;
	font-size: 1.75rem;
	line-height: 1;
	color: rgb(var(--color-white));
}

/* Below ~900px three columns get too narrow and auto-fit breaks them 2+1 */
@media (max-width: 900px) {
	.c-cards-iconed {
		grid-template-columns: 1fr;
		row-gap: calc(var(--spacer) * 3.5);
		max-width: 520px;
		margin-inline: auto;
	}
}

/* ---------- Stats ---------- */
.c-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	margin-top: calc(var(--spacer) * 2);
	text-align: center;
}

.c-stat {
	padding-inline: calc(var(--spacer) * 1.5);
}

/* Hairline dividers between stats, per the Legal proof bar */
.c-stat + .c-stat {
	border-left: 1px solid rgba(var(--color-white), 0.3);
}

.c-stat strong {
	display: block;
	font-family: var(--font-display);
	/* Fluid like the Legal figures: big on desktop without overflowing */
	font-size: clamp(2.7rem, 4.5vw, 4rem);
	font-weight: 500;
	line-height: 1;
	color: rgb(var(--consulting-primary));
	margin-bottom: calc(var(--spacer) * 0.5);
}

@media (max-width: 720px) {
	.c-stats {
		grid-template-columns: 1fr;
		gap: calc(var(--spacer) * 1.5);
	}

	.c-stat + .c-stat {
		border-left: none;
	}
}

/* ---------- CTA band ---------- */
/* Primary blue rather than the dark navy, so the band separates from the
   dark footer below it (client direction 2026-08-21) */
.c-cta {
	background: rgb(var(--consulting-primary));
	color: rgb(var(--color-white));
	text-align: center;
	padding: var(--section-padding) 0;
}

.c-cta h2 {
	color: rgb(var(--color-white));
}

/* ---------- Footer ---------- */
.consulting-footer {
	background: rgb(var(--consulting-dark));
	color: rgb(var(--color-white));
	padding: var(--section-padding) 0 calc(var(--spacer) * 2);
}

.consulting-footer-main {
	display: flex;
	justify-content: space-between;
	gap: calc(var(--spacer) * 3);
	flex-wrap: wrap;
}

.consulting-footer-brand {
	max-width: 320px;
}

.consulting-footer-brand img {
	height: auto;
}

.consulting-footer .consulting-wordmark {
	color: rgb(var(--consulting-accent-soft));
}

.consulting-footer-nav {
	display: flex;
	gap: calc(var(--spacer) * 3);
}

.consulting-footer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.consulting-footer-nav li {
	margin-bottom: calc(var(--spacer) * 0.75);
}

/* Touch targets in the footer, 2026-09-24 mobile pass. The links were 20px
   tall with 17px between them: legible, and they clear WCAG 2.5.8 on the
   spacing exception, but they are fiddly under a thumb. Padding takes each
   link to 28px and the list margin comes down by the same amount, so the
   rhythm of the footer is unchanged and only the hit area grows. Applied on
   phones only; the desktop footer is a mouse target and reads better tight. */
@media (max-width: 767px) {
	.consulting-footer-nav li {
		margin-bottom: calc(var(--spacer) * 0.25);
	}

	.consulting-footer-nav a {
		display: inline-block;
		padding-block: 4px;
	}
}

/* Nav lists read as navigation, so no underline needed. The meta line is a
   sentence with an inline link, which must be distinguishable without color. */
.consulting-footer-nav a {
	color: rgb(var(--consulting-accent-soft));
	text-decoration: none;
}

.consulting-footer-meta a {
	color: rgb(var(--consulting-accent-soft));
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.consulting-footer-nav a:hover,
.consulting-footer-meta a:hover {
	color: rgb(var(--color-white));
}

.consulting-footer-meta {
	border-top: 1px solid rgba(var(--color-white), 0.2);
	margin-top: calc(var(--spacer) * 2);
	padding-top: calc(var(--spacer) * 1.5);
	font-size: 0.9rem;
}

/* Certifications and legal links, shared with the main Newland Chase footer.
   The badge images come from the footer_certs theme mod as-is. */
/* Text on the left, certifications in a right-hand column aligned to the
   bottom, matching the main footer. Stacks on phones. */
@media (min-width: 768px) {
	.consulting-footer-meta {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		gap: calc(var(--spacer) * 3);
	}
}

.consulting-footer-meta-text {
	flex: 1 1 auto;
	min-width: 0;
}

.consulting-footer-certifications {
	flex: 0 0 auto;
	max-width: 240px;
	font-size: 0.85rem;
	line-height: 1.6;
	color: rgba(var(--color-white), 0.85);
}

.consulting-footer-certifications p:last-child {
	margin-bottom: 0;
}

.consulting-footer-certifications img {
	display: inline-block;
	margin-right: var(--spacer);
	vertical-align: middle;
}

.consulting-footer-legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--spacer) * 0.5) calc(var(--spacer) * 1.5);
	list-style: none;
	margin: 0 0 var(--spacer);
	padding: 0;
}

/* A list of links reads as navigation, like the main footer nav. */
.consulting-footer-meta .consulting-footer-legal a {
	text-decoration: none;
}

.consulting-footer-meta .consulting-footer-legal a:hover {
	text-decoration: underline;
}

@media (max-width: 767px) {
	.consulting-footer-legal a {
		display: inline-block;
		padding-block: 4px;
	}
}

/* ---------- Split section (image flush left, copy right) ----------
   Ported from the Legal homepage's Legal Expertise pattern, 2026-08-21. */
.c-split-section {
	display: flex;
	align-items: stretch;
}

.c-split-media {
	flex: 0 0 40%;
	min-height: 435px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.c-split-media-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(var(--color-gray-5));
	border-right: 2px dashed rgb(var(--color-gray-25));
}

.c-split-media-placeholder span,
.c-feature-card-media-placeholder span {
	font-family: var(--font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgb(var(--color-gray-50));
}

.c-split-content {
	flex: 1 1 0;
	min-width: 0;
	padding: var(--section-padding) var(--container-padding) var(--section-padding) calc(var(--spacer) * 4.5);
	max-width: 900px;
}

@media (max-width: 768px) {
	.c-split-section {
		flex-direction: column;
	}

	.c-split-media {
		flex-basis: auto;
		min-height: 240px;
		border-right: none;
	}

	.c-split-media-placeholder {
		border-bottom: 2px dashed rgb(var(--color-gray-25));
	}

	.c-split-content {
		padding-left: var(--container-padding);
	}
}

/* ---------- Feature card (About Our Story) ----------
   Ported from the Legal About card as it landed 2026-08-19: image and panel
   50/50, light grey panel, standard section text colours. */
.c-feature-section {
	padding: var(--section-padding) 0;
}

.c-feature-card {
	display: flex;
	align-items: stretch;
}

.c-feature-card-media {
	flex: 0 0 50%;
	min-height: 460px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: rgb(var(--color-gray-5));
}

.c-feature-card-media-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px dashed rgb(var(--color-gray-25));
	border-right: none;
}

.c-feature-card-panel {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: rgb(var(--color-gray-5));
	padding: calc(var(--spacer) * 3.5);
}

.c-feature-card-panel h2 {
	color: rgb(var(--consulting-dark));
	margin-bottom: calc(var(--spacer) * 1.25);
}

.c-feature-card-panel p:last-child {
	margin-bottom: 0;
}

@media (max-width: 900px) {
	.c-feature-card {
		flex-direction: column;
	}

	.c-feature-card-media {
		min-height: 300px;
	}

	.c-feature-card-media-placeholder {
		border-right: 2px dashed rgb(var(--color-gray-25));
		border-bottom: none;
	}

	.c-feature-card-panel {
		padding: calc(var(--spacer) * 2.5) calc(var(--spacer) * 2);
	}
}

/* ---------- Scale band ----------
   The proof bar goes full saturated blue with white figures and a centered
   heading, mirroring the Legal proof band (client direction 2026-08-21).
   White on #05779a measures ~5.1:1. */
.c-scale-band {
	background: rgb(var(--consulting-primary));
	text-align: center;
	/* Tighter than a standard section, per the Legal proof bar */
	padding: calc(var(--spacer) * 2.5) 0 calc(var(--spacer) * 3);
}

/* Quiet label heading rather than a display h2, per the Legal band */
.c-scale-band h2 {
	color: rgb(var(--color-white));
	font-family: var(--font-content);
	font-size: 1.15rem;
	font-weight: 400;
	margin-bottom: calc(var(--spacer) * 2);
}

.c-scale-band .c-stats {
	margin-top: 0;
	max-width: 1080px;
	margin-inline: auto;
}

.c-scale-band .c-stat strong {
	color: rgb(var(--color-white));
}

.c-scale-band .c-stat span {
	color: rgba(var(--color-white), 0.85);
}


/* ==================== Insights listing ====================
   Ported from legal-shared.css 2026-08-21, an exact copy of the Legal
   Insights layout in the Consulting palette: featured post on the grey
   panel, topic pills + search, section grids and alternating tiles, grey
   bands, View More buttons and pagination. The Legal file is the original;
   changes to the shared layout should land in both. Dark-mode rules were
   deliberately not ported yet; they arrive with the Consulting dark pass. */

/* ---------- Insights listing ---------- */
/* Pills on the left, search on the right, one row; wraps on small screens */
.c-filter-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: calc(var(--spacer) * 0.75);
	margin-bottom: calc(var(--spacer) * 2.5);
}

.c-filter-row .c-filter {
	margin-bottom: 0;
}

.c-filter-search {
	display: flex;
	gap: calc(var(--spacer) * 0.5);
	margin-left: auto;
}

.c-filter-search input[type='search'] {
	padding: calc(var(--spacer) * 0.45) calc(var(--spacer) * 1.1);
	border: 1px solid rgb(var(--color-gray-25));
	border-radius: 999px;
	font-family: var(--font-content);
	font-size: 0.9rem;
	color: rgb(var(--color-dark));
	background: rgb(var(--color-white));
	width: min(240px, 60vw);
}

.c-filter-search input[type='search']:focus-visible {
	outline: 2px solid rgb(var(--consulting-primary));
	outline-offset: 3px;
}

.c-filter-search button {
	padding: calc(var(--spacer) * 0.45) calc(var(--spacer) * 1.1);
	border: 1px solid rgb(var(--color-gray-25));
	border-radius: 999px;
	font-family: var(--font-content);
	font-size: 0.9rem;
	color: rgb(var(--color-dark));
	background: rgb(var(--color-white));
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.c-filter-search button:hover {
	border-color: rgb(var(--consulting-primary));
	color: rgb(var(--consulting-primary));
}

.c-filter-search button:focus-visible {
	outline: 2px solid rgb(var(--consulting-primary));
	outline-offset: 3px;
}

.c-filter {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--spacer) * 0.5);
	margin-bottom: calc(var(--spacer) * 2.5);
}

.c-filter-item {
	display: inline-block;
	padding: calc(var(--spacer) * 0.45) calc(var(--spacer) * 1.1);
	border: 1px solid rgb(var(--color-gray-25));
	border-radius: 999px;
	font-family: var(--font-content);
	font-size: 0.9rem;
	color: rgb(var(--color-dark));
	text-decoration: none;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.c-filter-item:hover {
	border-color: rgb(var(--consulting-primary));
	color: rgb(var(--consulting-primary));
}

.c-filter-item.is-active {
	background: rgb(var(--consulting-primary));
	border-color: rgb(var(--consulting-primary));
	color: rgb(var(--color-white));
}

.c-filter-item:focus-visible {
	outline: 2px solid rgb(var(--consulting-primary));
	outline-offset: 3px;
}

/* Numbered pagination on filtered views; items reuse the pill styling */
.c-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(var(--spacer) * 0.5);
	margin-top: calc(var(--spacer) * 2.5);
}

.c-insights {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: calc(var(--spacer) * 2);
}

.c-insight {
	display: flex;
	flex-direction: column;
	background: rgb(var(--color-white));
}

.c-insight-media {
	display: block;
	aspect-ratio: 16 / 10;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: rgb(var(--color-gray-5));
}

.c-insight-media-placeholder {
	border-bottom: 1px solid rgb(var(--color-gray-25));
}

.c-insight-body {
	padding: calc(var(--spacer) * 1.25) 0 calc(var(--spacer) * 1.5);
}

.c-insight-topic {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgb(var(--consulting-primary));
	margin-bottom: calc(var(--spacer) * 0.4);
}

.c-insight-title {
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 0 0 calc(var(--spacer) * 0.6);
}

.c-insight-title a {
	color: rgb(var(--consulting-dark));
	text-decoration: none;
}

.c-insight-title a:hover {
	color: rgb(var(--consulting-primary));
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.c-insight-excerpt {
	color: rgb(var(--color-gray-75));
	margin-bottom: calc(var(--spacer) * 0.75);
}

.c-insight-date {
	font-size: 0.85rem;
	color: rgb(var(--color-gray-50));
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.c-filter-item {
		transition: none;
	}
}

/* ---------- Insight article, Legal shell ---------- */
.c-hero-article .c-article-topic {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: rgb(var(--consulting-accent));
	margin-bottom: calc(var(--spacer) * 0.5);
}

.c-hero-article h1 {
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	max-width: 24ch;
}

.c-article-meta {
	margin-top: calc(var(--spacer) * 0.75);
	color: rgba(var(--color-white), 0.8);
	font-size: 0.95rem;
}

.c-article {
	max-width: 760px;
	margin-inline: auto;
}

.c-article-image {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: calc(var(--spacer) * 2);
}

.c-article-body h2,
.c-article-body h3 {
	color: rgb(var(--consulting-dark));
	margin-top: calc(var(--spacer) * 2);
}

.c-article-body img {
	max-width: 100%;
	height: auto;
}

.c-article-back {
	margin-top: calc(var(--spacer) * 2.5);
	padding-top: calc(var(--spacer) * 1.5);
	border-top: 1px solid rgb(var(--color-gray-25));
}

.c-article-back a {
	color: rgb(var(--consulting-primary));
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ---------- Featured insight and section blocks ---------- */
/* Standard section padding above, like the About page's first section; the
   section below brings its own padding */
.c-featured-wrap {
	padding-bottom: 0;
}

/* The featured layout is driven by these variables (a live tweak panel used
   them during design, 2026-08-19, since removed). 40/60 split and the wider
   copy inset match the homepage Legal Expertise section; the 520px floor was
   chosen by eye against 435. */
.c-featured {
	--c-featured-image-w: 40%;
	--c-featured-min-h: 520px;
	--c-featured-pad-y: calc(var(--spacer) * 1.5);
	--c-featured-pad-left: calc(var(--spacer) * 4.5);
	--c-featured-pad-right: calc(var(--spacer) * 4);
	--c-featured-measure: 760px;
	display: grid;
	grid-template-columns: var(--c-featured-image-w) minmax(0, 1fr);
	align-items: stretch;
}

/* Sized like the tiles: fill the column, floor the height. No aspect-ratio
   here; combined with stretch, Safari resolves it against the wrong axis and
   shrinks the image. */
.c-featured-media {
	display: block;
	height: 100%;
	min-height: var(--c-featured-min-h);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: rgb(var(--color-gray-5));
}

/* The featured article runs full bleed with no container, so the copy side
   carries its own padding; the image side stays flush to the screen edge.
   The copy sits on a light grey panel butted against the image, following the
   split-card pattern, with the content vertically centered. */
.c-featured-body {
	background: rgb(var(--color-gray-5));
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--c-featured-pad-y) var(--c-featured-pad-right) var(--c-featured-pad-y) var(--c-featured-pad-left);
}

.c-featured-body > * {
	max-width: var(--c-featured-measure);
}

.c-featured-title {
	font-size: clamp(1.5rem, 2.4vw, 2.15rem);
	line-height: 1.22;
	margin: 0 0 calc(var(--spacer) * 0.75);
}

.c-featured-title a {
	color: rgb(var(--consulting-dark));
	text-decoration: none;
}

.c-featured-title a:hover {
	color: rgb(var(--consulting-primary));
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.c-featured-excerpt {
	color: rgb(var(--color-gray-75));
	margin-bottom: calc(var(--spacer) * 0.75);
}

.c-section-block + .c-section-block {
	margin-top: calc(var(--spacer) * 3.5);
}

/* A banded block's internal top padding (2.5) counts toward the rhythm:
   1 + 2.5 = the same 3.5 spacers above its heading as every other block. */
.c-section-block + .c-section-block-band {
	margin-top: calc(var(--spacer) * 1);
}

/* Unbanded blocks carry the same 2.5 spacers of internal bottom breathing the
   bands get from their padding, so every section ends with equal air after
   its last row or View More button, banded or not. */
.c-section-block:not(.c-section-block-band) {
	padding-bottom: calc(var(--spacer) * 2.5);
}

/* Articles & Blogs sits on a full-width light grey band, the same grey as
   the featured panel (it was on Employer Guidance for part of 2026-08-19).
   The section block spans the viewport (blocks live outside the shared
   container), so the background needs no width tricks; the padding keeps the
   heading and the last row off the band edges. */
.c-section-block-band {
	background: rgb(var(--color-gray-5));
	padding-block: calc(var(--spacer) * 2.5);
}

/* On the band the white cards read as panels, so the copy needs side padding
   to keep off the card edges. Unbanded grids keep flush text: there the card
   surface is invisible against the white page. */
/* Same fix as the Legal side, 2026-09-15: the article page's related block
   sits on .c-section-band, which this rule did not reach, so its card titles
   ran to the card edge. */
.c-section-block-band .c-insight-body,
.c-section-band .c-insight-body {
	padding-inline: calc(var(--spacer) * 1.25);
}

/* The listing ends on a grey band that runs straight into the black footer,
   so the section drops its bottom padding; the band's own padding keeps the
   last cards off the edge. */
.c-section-flush-footer {
	padding-bottom: 0;
}

.c-section-block-title {
	font-size: 1.5rem;
	color: rgb(var(--consulting-dark));
	margin-bottom: calc(var(--spacer) * 1.75);
}

/* Full bleed card grid (Articles & Blogs): the grid spans the viewport, so
   the card copy gets side padding to keep text off the screen edges. */
.c-insights-bleed .c-insight-body {
	padding-inline: calc(var(--spacer) * 1.25);
}

@media (max-width: 860px) {
	.c-featured {
		grid-template-columns: 1fr;
	}

	/* Stacked, the image sizes by ratio again and the grey panel butts under
	   it; the copy needs padding on both sides. height stays 100% from the
	   base rule: height auto + aspect-ratio collapses to 0 in Safari, the
	   same WebKit trap as the desktop split (see the tiles, which share this
	   exact pattern and render fine). */
	.c-featured-media {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.c-featured-body {
		padding-left: var(--container-padding);
	}
}

/* ---------- Employer Guidance tiles ----------
   Three full-width tiles, image beside copy, sides alternating per row, with a
   View More pill beneath. Client direction 2026-08-19; the other two buckets
   keep the .c-insights card grid. The alternation is nth-child order only, so
   DOM and reading order stay date-descending. */
/* No gap: the rows sit flush, and the alternating images carry the rhythm */
.c-tiles {
	display: grid;
}

.c-tile {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	background: rgb(var(--color-white));
}

.c-tile-media {
	display: block;
	height: 100%;
	min-height: 240px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: rgb(var(--color-gray-5));
}

/* Even tiles carry the image on the right */
.c-tile:nth-child(even) .c-tile-media {
	order: 2;
}

/* Generous padding grows the row, which grows the image beside the copy */
.c-tile-body {
	align-self: center;
	padding: calc(var(--spacer) * 4) calc(var(--spacer) * 3);
}

.c-tile-title {
	font-size: 1.4rem;
	line-height: 1.28;
	margin: 0 0 calc(var(--spacer) * 0.6);
}

.c-tile-title a {
	color: rgb(var(--consulting-dark));
	text-decoration: none;
}

.c-tile-title a:hover {
	color: rgb(var(--consulting-primary));
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.c-tiles-more {
	margin: calc(var(--spacer) * 1.75) 0 0;
	text-align: center;
}

@media (max-width: 767px) {
	.c-tile {
		grid-template-columns: 1fr;
	}

	.c-tile-media {
		aspect-ratio: 16 / 10;
		min-height: 0;
	}

	/* Stacked, the image always sits above the copy */
	.c-tile:nth-child(even) .c-tile-media {
		order: 0;
	}

	.c-tile-body {
		padding: calc(var(--spacer) * 1.25) calc(var(--spacer) * 1.25) calc(var(--spacer) * 1.5);
	}
}


/* ==================== Contact: form + office panel ====================
   Ported from legal-shared.css 2026-08-21 (GF form styling, office details
   panel with icons, social links). Legal is the original. */

/* The nc-cybersource payment plugin enqueues its form test helper on every
   front-end page and injects a "Default All" button beside any form it
   finds. Main-site plugin, not ours to edit; hidden here instead, which
   only reaches sub-brand templates. Flagged for their dev team in the
   handoff. */
#defaultAll {
	display: none;
}

#contact-form .nc-contact-form {
	margin: calc(var(--spacer) * 1.5) 0 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
	font-family: var(--font-content);
	font-size: 1rem;
	color: rgb(var(--color-dark));
}

#contact-form .inquiry-form-section {
	top: calc(var(--spacer) * 6);
}

#contact-form .form-layout-container:has(form) .detailed-form-section {
	flex-basis: calc(60% - 36px);
	max-width: calc(60% - 36px);
}

#contact-form .input-label,
#contact-form .input-label.bold,
#contact-form .section-header,
#contact-form fieldset .input-label,
#contact-form .main_options span,
#contact-form fieldset span {
	font-size: 1rem;
	color: rgb(var(--consulting-dark));
}

#contact-form .input-label.bold,
#contact-form .section-header {
	font-family: var(--font-content);
	font-weight: 700;
}

#contact-form .section-header {
	border-bottom-color: rgb(var(--consulting-primary));
}

#contact-form .inquiry-form-section .main_options {
	border-color: rgb(var(--color-gray-25));
}

#contact-form .main_options:has(.contact-input-radio:checked) {
	border-color: rgb(var(--consulting-primary));
}

#contact-form .contact-input-text,
#contact-form .contact-input-textarea,
#contact-form select {
	font-family: inherit;
	font-size: 1rem;
	color: rgb(var(--color-dark));
	border: 1px solid rgb(var(--color-gray-25));
	border-radius: 4px;
}

#contact-form .contact-input-text:focus,
#contact-form .contact-input-textarea:focus,
#contact-form select:focus {
	border-color: rgb(var(--consulting-primary));
	box-shadow: none;
}

#contact-form .help-block,
#contact-form .error,
#contact-form fieldset .error {
	font-size: 0.9rem;
}

#contact-form .nc-form-submit-button {
	font-family: var(--font-content);
	font-size: 1rem;
	background: rgb(var(--consulting-primary));
	border-color: rgb(var(--consulting-primary));
}

#contact-form .nc-form-submit-button:hover,
#contact-form .nc-form-submit-button:active {
	background: rgb(var(--consulting-dark));
	border-color: rgb(var(--consulting-dark));
}

#contact-form .nc-form-submit-button:focus-visible {
	outline: 2px solid rgb(var(--consulting-primary));
	outline-offset: 3px;
}

@media (max-width: 998px) {
	#contact-form .inquiry-form-section {
		min-height: 0;
	}

	#contact-form .form-layout-container:has(form) .detailed-form-section {
		flex-basis: 100%;
		max-width: 100%;
	}
}

@media (max-width: 768px) {
	#contact-form .nc-contact-form {
		margin: var(--spacer) 0 0;
		padding: 0;
		font-size: 1rem;
	}

	#contact-form .nc-contact-form .col-sm-12:not(.main_options) {
		padding: 0;
	}
}

.c-reach-section {
	padding-top: 0;
}

.c-reach {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: calc(var(--spacer) * 2.5);
	align-items: start;
	background: rgb(var(--color-gray-5));
	padding: calc(var(--spacer) * 2.5);
}

.c-reach h2 {
	font-size: 1.5rem;
	color: rgb(var(--consulting-dark));
	margin-bottom: calc(var(--spacer) * 1);
}

.c-reach-copy p:last-child {
	margin-bottom: 0;
}

.c-reach .c-office {
	margin-top: 0;
}

@media (max-width: 900px) {
	.c-reach {
		grid-template-columns: 1fr;
		padding: calc(var(--spacer) * 2);
	}
}

/* ---------- Contact: office information ---------- */
.c-office {
	list-style: none;
	margin: calc(var(--spacer) * 1.5) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacer);
}

.c-office-row {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--spacer) * 0.75);
}

.c-office-icon {
	font-family: var(--font-icon);
	font-weight: 300;
	font-style: normal;
	font-size: 1.1rem;
	line-height: 1.5;
	color: rgb(var(--consulting-primary));
	width: 24px;
	flex-shrink: 0;
	text-align: center;
}

.c-office-row a {
	color: rgb(var(--consulting-primary));
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Social links: 44px circles for a comfortable touch target */
.c-social {
	list-style: none;
	display: flex;
	gap: calc(var(--spacer) * 0.75);
	margin: calc(var(--spacer) * 2) 0 0;
	padding: 0;
}

.c-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgb(var(--color-gray-25));
	color: rgb(var(--consulting-primary));
	transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease;
}

.c-social a:hover {
	border-color: rgb(var(--consulting-primary));
	background: rgb(var(--consulting-primary));
	color: rgb(var(--color-white));
}

.c-social a:focus-visible {
	outline: 2px solid rgb(var(--consulting-primary));
	outline-offset: 3px;
}

.c-social-icon {
	font-family: FontAwesomeBrands;
	font-weight: 400;
	font-style: normal;
	font-size: 1.15rem;
	line-height: 1;
}

/* ---------- Industries rows ----------
   One row per industry: copy with the icon beside the heading, image
   opposite, sides alternating per row, in the manner of the Legal Employer
   Guidance tiles. Direction from the 2026-08-26 design review. Rows sit flush and the
   alternating images carry the rhythm. Image slots are dashed placeholders
   until comps are chosen. */
.c-industries {
	display: grid;
	margin-top: calc(var(--spacer) * 2);
}

.c-industry {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	background: rgb(var(--color-white));
}

/* Fill with height plus a floor, never aspect-ratio: Safari shrinks
   aspect-ratio on a stretched grid item (the Legal featured-image lesson) */
.c-industry-media {
	height: 100%;
	min-height: 280px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: rgb(var(--color-gray-5));
}

/* Even rows carry the image on the right */
.c-industry:nth-child(even) .c-industry-media {
	order: 2;
}

.c-industry-media-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px dashed rgb(var(--color-gray-25));
}

.c-industry-media-placeholder span {
	font-family: var(--font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 0.8rem;
	text-align: center;
	padding: 0 var(--spacer);
	color: rgb(var(--color-gray-50));
}

.c-industry-body {
	align-self: center;
	padding: calc(var(--spacer) * 4) calc(var(--spacer) * 3);
}

.c-industry-title {
	display: flex;
	align-items: center;
	gap: calc(var(--spacer) * 0.9);
	font-size: 1.6rem;
	line-height: 1.25;
	margin: 0 0 calc(var(--spacer) * 0.9);
	color: rgb(var(--consulting-dark));
}

.c-industry-icon {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgb(var(--consulting-primary));
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-icon);
	font-weight: 300;
	font-style: normal;
	font-size: 1.3rem;
	line-height: 1;
	color: rgb(var(--color-white));
}

@media (max-width: 767px) {
	.c-industry {
		grid-template-columns: 1fr;
	}

	.c-industry-media {
		aspect-ratio: 16 / 10;
		min-height: 0;
	}

	/* Stacked, the image always sits above the copy */
	.c-industry:nth-child(even) .c-industry-media {
		order: 0;
	}

	.c-industry-body {
		padding: calc(var(--spacer) * 1.25) calc(var(--spacer) * 1.25) calc(var(--spacer) * 1.5);
	}

	.c-industry-title {
		font-size: 1.35rem;
	}
}

/* Deeper section band: one step deeper than c-section-alt so white content
   separates clearly. Used on the Industries rows and Regional Headquarters;
   the other alt sections keep their lighter grey. */
.c-section-band {
	background: rgb(var(--color-gray-5));
}

/* Top-of-page intro cards (the section right beneath the page header, and
   About's Our Story): a 5px brand-blue rule along the bottom edge, per
   the design review 2026-08-26 */
.c-intro-card {
	border-bottom: 5px solid rgb(var(--consulting-primary));
}

/* ---------- Capability splits ----------
   per the 2026-08-26 design review: each Capabilities section splits 40/60, heading and
   body copy on a brand-blue block left, bullet heading and bullets right.
   The blue matches the CTA band; the block stretches the row height with
   its copy centered, like the other split treatments. */
.c-capability-split {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	align-items: stretch;
}

.c-capability-intro {
	background: rgb(var(--consulting-primary));
	padding: calc(var(--spacer) * 2.5);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.c-capability-intro h2 {
	color: rgb(var(--color-white));
}

.c-capability-intro p {
	color: rgb(var(--color-white));
	font-size: 1.2rem;
	margin-bottom: 0;
}

/* White panel behind the bullets so the split reads as two blocks on the
   grey band */
.c-capability-detail h3 {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 1.05rem;
	color: rgb(var(--consulting-dark));
}

.c-capability-detail {
	background: rgb(var(--color-white));
	padding: calc(var(--spacer) * 2.5);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.c-capability-detail h3 {
	margin-top: 0;
}

.c-capability-detail ul {
	margin-bottom: 0;
}

/* One shared height across all four sections, sized to the tallest
   (Strategic Consulting, 505px at 1440) with a little margin. Content can
   still push past it at narrow desktop widths. */
@media (min-width: 901px) {
	.c-capability-split {
		min-height: 520px;
	}
}

@media (max-width: 900px) {
	.c-capability-split {
		grid-template-columns: 1fr;
		row-gap: calc(var(--spacer) * 1.5);
	}
}

/* ---------- Section rhythm ----------
   25% less vertical space between sections on Consulting, per the
   2026-08-26 design review. The framework sets spacer*4 (spacer*2.5 under 768px); this
   stylesheet loads only on consulting- templates, so the override is
   sub-brand scoped by construction. */
:root {
	--section-padding: calc(var(--spacer) * 3);
}

@media (max-width: 768px) {
	:root {
		--section-padding: calc(var(--spacer) * 1.875);
	}
}

/* Consecutive banded sections share one continuous band, so their stacked
   paddings would double the gap between content blocks. Zeroing the top
   padding of a banded section that follows another keeps exactly one
   --section-padding of grey between blocks - the standard gap wherever
   banded sections meet, per the 2026-08-26 design review (matches Capabilities). */
.c-section-band + .c-section-band {
	padding-top: 0;
}

/* Divider list, all capability sections: copy in one flow with the blue
   lead-in, subtle rules between items, no bullet dots */
.c-capability-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.c-capability-list li {
	padding: var(--spacer) 0;
}

.c-capability-list li + li {
	border-top: 1px solid rgba(var(--color-gray-25), 0.5);
}

.c-capability-list li strong {
	color: rgb(var(--consulting-primary));
}

/* Icon circle beside the heading in the blue block: monoline on the dark
   ground - a white outlined circle with the white Light-weight glyph, no
   solid fill. Per the 2026-08-26 design review. */
.c-capability-title {
	display: flex;
	align-items: center;
	gap: calc(var(--spacer) * 0.9);
}

.c-capability-icon {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: transparent;
	border: 2px solid rgb(var(--color-white));
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-icon);
	font-weight: 300;
	font-style: normal;
	font-size: 1.3rem;
	line-height: 1;
	color: rgb(var(--color-white));
}

/* ---------- Careers people splits ----------
   per the 2026-08-26 design review: copy left (40), photo right (60), icon beside the
   heading, in the Industries row language. Photos are placeholders from the
   main site's own media library until real people photography is chosen. */
.c-people-split {
	/* Same width as the Regions We Serve blocks */
	width: 80%;
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	background: rgb(var(--color-white));
}

/* Markup keeps the photo first; on desktop it displays on the right */
.c-people-media {
	order: 2;
}

/* One shared height across the four sections, sized to the tallest (What
   We Ask, 424px at 1440) with a little margin */
@media (min-width: 768px) {
	.c-people-split {
		min-height: 430px;
	}
}

/* Fill with height plus a floor, never aspect-ratio, per the Safari lesson */
.c-people-media {
	height: 100%;
	min-height: 320px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: rgb(var(--color-gray-5));
}

.c-people-body {
	align-self: center;
	padding: calc(var(--spacer) * 3) calc(var(--spacer) * 2.5);
}

.c-people-body p:last-child {
	margin-bottom: 0;
}

.c-people-title {
	display: flex;
	align-items: center;
	gap: calc(var(--spacer) * 0.9);
	font-size: 1.6rem;
	line-height: 1.25;
	margin: 0 0 calc(var(--spacer) * 0.9);
	color: rgb(var(--consulting-dark));
}

.c-people-icon {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgb(var(--consulting-primary));
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-icon);
	font-weight: 300;
	font-style: normal;
	font-size: 1.3rem;
	line-height: 1;
	color: rgb(var(--color-white));
}

@media (max-width: 767px) {
	.c-people-split {
		width: 100%;
		grid-template-columns: 1fr;
	}

	.c-people-media {
		order: 0;
		aspect-ratio: 16 / 10;
		min-height: 0;
	}

	.c-people-body {
		padding: calc(var(--spacer) * 1.25) calc(var(--spacer) * 1.25) calc(var(--spacer) * 1.5);
	}

	.c-people-title {
		font-size: 1.35rem;
	}
}

/* ---------- What Makes Us Different tab rail ----------
   Mock per the 2026-08-26 design review: the four principle titles run down a left
   rail, the active one carries the blue bar, its copy shows in the panel
   beside. consulting-tabs.js enhances; without it the items render
   stacked with everything visible. */
/* Dark-blue section ground (trial on What Makes Us Different) */
.c-section-blue {
	background: rgb(var(--consulting-dark));
}

.c-section-blue h2 {
	color: rgb(var(--color-white));
}

/* Centered heading over the rail, on any blue tab section */
.c-section-blue > .container > h2 {
	text-align: center;
	margin-bottom: calc(var(--spacer) * 2);
}

/* Intro line between the heading and the rail */
.c-tabs-intro {
	text-align: center;
	max-width: 70ch;
	margin: calc(var(--spacer) * -1) auto calc(var(--spacer) * 1.5);
}

.c-section-blue .c-tabs-intro {
	color: rgb(var(--color-white));
}

.c-tabs.is-enhanced {
	/* Sized so the rail keeps its titles on one line and the panel side
	   carries the balance */
	width: 86.5%;
	margin-inline: auto;
	display: grid;
	/* The rail sizes to its longest title, so the grey after the titles
	   matches the panel copy's inset off the seam */
	grid-template-columns: auto minmax(0, 1fr);
	align-items: stretch;
	margin-top: calc(var(--spacer) * 1.5);
}

/* The panel side goes white on the section's grey band and centers its
   copy; the active tab takes the same white so title and copy read as one
   connected piece */
.c-tabs-panels {
	background: rgb(var(--color-white));
	/* White seam against the resting tabs so the active title reads as
	   connected to its panel */
	border-left: 5px solid rgb(var(--color-white));
	padding: calc(var(--spacer) * 2) calc(var(--spacer) * 2.25);
	display: flex;
	flex-direction: column;
}

/* Panel image, flush to the panel edges above the copy. Placeholders from
   the main site's own media library until real art is chosen. */
.c-tab-media {
	height: 352px;
	margin: calc(var(--spacer) * -2) calc(var(--spacer) * -2.25) 0;
	background-size: cover;
	background-position: center;
	background-color: rgb(var(--color-gray-5));
}

.c-tabs-rail {
	display: grid;
}

.c-tab {
	text-align: left;
	/* A step lighter than the band so inactive titles read as resting tabs */
	background: rgb(var(--color-gray-2));
	border: none;
	border-radius: 0;
	border-left: 4px solid rgb(var(--color-gray-25));
	/* Right padding mirrors the panel copy's left padding across the seam */
	padding: calc(var(--spacer) * 0.9) calc(var(--spacer) * 2.25) calc(var(--spacer) * 0.9) calc(var(--spacer) * 1.25);
	font-family: var(--font-content);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.3;
	color: rgb(var(--color-gray-50));
	cursor: pointer;
	transition: color 200ms ease, border-color 200ms ease;
}

.c-tab {
	display: flex;
	align-items: center;
	gap: calc(var(--spacer) * 0.75);
}

/* Monoline glyph beside the title, grey at rest, following the indicator
   into the accent when active */
.c-tab-icon {
	flex: 0 0 auto;
	font-family: var(--font-icon);
	font-weight: 300;
	font-style: normal;
	font-size: 1.38rem;
	line-height: 1;
	color: rgb(var(--color-gray-50));
	transition: color 200ms ease;
}

.c-tab[aria-selected='true'] .c-tab-icon {
	color: rgb(var(--consulting-accent));
}

.c-tab:hover {
	color: rgb(var(--consulting-primary));
}

.c-tab[aria-selected='true'] {
	border-left-color: rgb(var(--consulting-primary));
	color: rgb(var(--consulting-dark));
	background: rgb(var(--color-white));
}

.c-tab:focus-visible {
	outline: 2px solid rgb(var(--consulting-primary));
	outline-offset: 2px;
}

.c-tab-panel {
	display: flex;
	flex-direction: column;
}

/* display:flex above would defeat the hidden attribute's UA display:none */
.c-tab-panel[hidden] {
	display: none;
}

/* Copy centers in the space beneath the pinned image; the symmetric
   padding keeps a minimum gap on both sides so centering stays true */
.c-tab-copy {
	margin-block: auto;
	padding-block: calc(var(--spacer) * 1.5);
}

.c-tab-copy p:last-child {
	margin-bottom: 0;
}

.c-tab-panel:focus-visible {
	outline: 2px solid rgb(var(--consulting-primary));
	outline-offset: 4px;
}

@keyframes c-tab-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.c-tabs.is-enhanced .c-tab-panel:not([hidden]) {
	animation: c-tab-fade 500ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
	.c-tabs.is-enhanced .c-tab-panel:not([hidden]) {
		animation: none;
	}
}

/* No-JS fallback keeps the stacked headings in the section colours */
.c-tabs:not(.is-enhanced) .c-tab-title {
	color: rgb(var(--consulting-dark));
}

.c-tabs-kicker {
	width: 55%;
	margin: calc(var(--spacer) * 2) auto 0;
	font-size: 1.15rem;
	text-align: center;
	color: rgb(var(--consulting-dark));
}

.c-section-blue .c-tabs-kicker {
	color: rgb(var(--consulting-accent-soft));
}

/* The kicker reads as a quiet closing line, not a second heading */
.c-tabs-kicker strong {
	font-weight: 400;
}

/* On the blue ground the primary-blue indicator would vanish; the accent
   light blue carries the active state instead */
.c-section-blue .c-tab[aria-selected='true'] {
	border-left-color: rgb(var(--consulting-accent));
}

/* The chevron only appears in the stacked accordion, where rows toggle */
.c-tab-marker {
	display: none;
}

@media (max-width: 767px) {
	.c-tabs-kicker {
		width: 100%;
	}

	/* ---------- Accordion mode ----------
	   Below 768px the rail is taller than the screen and the active title
	   never shares a viewport with its panel, so consulting-tabs.js relays
	   the same nodes as an accordion: each title toggles its own image and
	   copy directly beneath it, and the accent bar runs down both so the
	   pair reads as one piece. */
	.c-tabs.is-accordion {
		display: block;
		width: 100%;
		margin-top: calc(var(--spacer) * 1.5);
	}

	.c-tabs.is-accordion .c-tab {
		width: 100%;
		gap: calc(var(--spacer) * 0.6);
		padding: calc(var(--spacer) * 1) calc(var(--spacer) * 1.1);
		font-size: 1.15rem;
		background: rgb(var(--color-gray-2));
		border-left: 4px solid rgb(var(--color-gray-25));
		border-bottom: 1px solid rgb(var(--color-gray-5));
	}

	.c-tabs.is-accordion .c-tab[aria-expanded='true'] {
		background: rgb(var(--color-white));
		border-left-color: rgb(var(--consulting-accent));
		border-bottom-color: transparent;
		color: rgb(var(--consulting-dark));
	}

	.c-tabs.is-accordion .c-tab[aria-expanded='true'] .c-tab-icon {
		color: rgb(var(--consulting-accent));
	}

	/* CSS chevron, so the toggle needs no icon-font glyph */
	.c-tabs.is-accordion .c-tab-marker {
		display: block;
		flex: 0 0 auto;
		margin-left: auto;
		width: 9px;
		height: 9px;
		border-right: 2px solid rgb(var(--color-gray-50));
		border-bottom: 2px solid rgb(var(--color-gray-50));
		transform: translateY(-2px) rotate(45deg);
		transition: transform 200ms ease;
	}

	.c-tabs.is-accordion .c-tab[aria-expanded='true'] .c-tab-marker {
		border-color: rgb(var(--consulting-accent));
		transform: translateY(2px) rotate(-135deg);
	}

	/* The panel carries its own ground and padding here, since the shared
	   .c-tabs-panels wrapper is not in play; the accent bar continues from
	   the open title down its content. */
	.c-tabs.is-accordion .c-tab-panel {
		background: rgb(var(--color-white));
		border-left: 4px solid rgb(var(--consulting-accent));
		border-bottom: 1px solid rgb(var(--color-gray-5));
		padding: 0 calc(var(--spacer) * 1.1) calc(var(--spacer) * 1.25);
	}

	.c-tabs.is-accordion .c-tab-media {
		height: 200px;
		margin: 0 calc(var(--spacer) * -1.1) calc(var(--spacer) * 1.1);
	}

	.c-tabs.is-accordion .c-tab-copy {
		padding-block: 0;
	}

	@media (prefers-reduced-motion: reduce) {
		.c-tabs.is-accordion .c-tab-marker {
			transition: none;
		}
	}
}

/* ---------- Our Team grid ----------
   Client-requested page. Cards carry a square headshot, name and role, and
   open their own bio; consulting-team.js does the toggling and the server
   renders every bio open without it. Cards open independently so two people
   can be read side by side, and the grid is start-aligned so an open card
   never stretches its neighbours. */
/* Optional roster group headings (Our Team). Unused while the grouping
   question is open (CLIENT-QUESTIONS 5g): every person's Group Heading is
   blank, so the page renders one unlabelled grid and none of this applies.
   Filling one in starts a new labelled grid at that person, which is why
   the headings sit BETWEEN grids rather than inside one. A heading cannot
   live inside .c-team-grid: grid-auto-rows: 1fr would stretch it to a full
   card's height. */
.c-team-group-heading {
	color: rgb(var(--consulting-dark));
	font-size: 1.3rem;
	margin: calc(var(--spacer) * 2.5) 0 0;
}

.c-team-group-heading:first-child {
	margin-top: 0;
}

/* The grid's own top margin is the gap under a section h2; under a group
   heading it is too much */
.c-team-group-heading + .c-team-grid {
	margin-top: calc(var(--spacer) * 0.75);
}

.c-team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	/* Every row the height of the tallest card, so names and roles of
	   different lengths do not give the grid a ragged bottom edge */
	grid-auto-rows: 1fr;
	gap: calc(var(--spacer) * 1.5);
	margin-top: calc(var(--spacer) * 2);
}

.c-person {
	display: flex;
	flex-direction: column;
	background: rgb(var(--color-white));
	border-bottom: 5px solid rgb(var(--consulting-primary));
}

.c-person-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--spacer) * 0.75);
	align-content: flex-start;
	flex: 1;
	width: 100%;
	padding: 0 0 calc(var(--spacer) * 1.1);
	background: none;
	border: none;
	border-radius: 0;
	text-align: left;
	font-family: var(--font-content);
	cursor: pointer;
}

/* The portrait squares off with a padding strut rather than aspect-ratio,
   which Safari mis-sizes on stretched flex and grid items */
.c-person-portrait {
	position: relative;
	flex: 0 0 100%;
	margin-bottom: calc(var(--spacer) * 0.9);
	/* The headshots come on flat white with no transparency. A pale blue
	   ground was tried (multiplying the image against it) and dropped: the
	   subjects lost definition against the grey section band. */
	background-color: rgb(var(--color-gray-5));
	background-size: cover;
	background-position: center top;
}

.c-person-portrait::before {
	content: '';
	display: block;
	padding-top: 100%;
}

.c-person-portrait-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px dashed rgb(var(--color-gray-25));
}

.c-person-portrait-placeholder span {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 0.8rem;
	color: rgb(var(--color-gray-50));
}

.c-person-id {
	flex: 1 1 0;
	min-width: 0;
	padding-left: calc(var(--spacer) * 1.1);
}

.c-person-name {
	display: block;
	font-size: 1.25rem;
	line-height: 1.25;
	color: rgb(var(--consulting-dark));
}

.c-person-role {
	display: block;
	margin-top: 0.15em;
	font-size: 0.95rem;
	line-height: 1.35;
	color: rgb(var(--consulting-primary));
}

/* CSS chevron, so the toggle needs no icon-font glyph */
.c-person-marker {
	flex: 0 0 auto;
	margin-right: calc(var(--spacer) * 1.1);
	width: 9px;
	height: 9px;
	border-right: 2px solid rgb(var(--color-gray-50));
	border-bottom: 2px solid rgb(var(--color-gray-50));
	transform: rotate(-45deg);
	transition: transform 200ms ease, border-color 200ms ease;
}

.c-person-head:hover .c-person-marker {
	border-color: rgb(var(--consulting-primary));
	transform: translateX(3px) rotate(-45deg);
}

.c-person-head:focus-visible {
	outline: 2px solid rgb(var(--consulting-primary));
	outline-offset: -2px;
}

.c-person-bio {
	padding: 0 calc(var(--spacer) * 1.1) calc(var(--spacer) * 1.25);
}

.c-person-bio p {
	font-size: 0.95rem;
}

.c-person-bio p:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.c-person-marker {
		transition: none;
	}
}

/* ---------- Person dialog ----------
   The bio opens here rather than in the card, so the grid never reflows.
   Native <dialog>, so focus trapping, Escape and focus restoration come
   for free. */
.c-person-dialog {
	/* Explicit, because the framework's own dialog rules override the UA
	   margin that would otherwise centre it */
	margin: auto;
	width: min(760px, calc(100vw - var(--spacer) * 2));
	max-height: min(85vh, 900px);
	padding: 0;
	border: none;
	background: rgb(var(--color-white));
	color: rgb(var(--color-dark));
	overflow: hidden;
}

.c-person-dialog::backdrop {
	background: rgba(var(--consulting-dark), 0.72);
}

.c-person-dialog-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	max-height: min(85vh, 900px);
	padding: calc(var(--spacer) * 2);
}

.c-person-dialog-head {
	display: flex;
	align-items: center;
	gap: calc(var(--spacer) * 1.25);
	padding-right: calc(var(--spacer) * 2.5);
	margin-bottom: calc(var(--spacer) * 1.25);
	border-bottom: 5px solid rgb(var(--consulting-primary));
	padding-bottom: calc(var(--spacer) * 1.25);
}

.c-person-dialog-portrait {
	flex: 0 0 120px;
	height: 120px;
	background-color: rgb(var(--color-gray-5));
	background-size: cover;
	background-position: center top;
}

.c-person-dialog-portrait.is-empty {
	border: 2px dashed rgb(var(--color-gray-25));
}

.c-person-dialog-name {
	font-size: 1.6rem;
	line-height: 1.2;
	margin: 0;
	color: rgb(var(--consulting-dark));
}

.c-person-dialog-role {
	margin: 0.25em 0 0;
	color: rgb(var(--consulting-primary));
}

/* Only the bio scrolls, so the name stays put on a long read */
.c-person-dialog-bio {
	overflow-y: auto;
	padding-right: var(--spacer);
}

.c-person-dialog-bio p:last-child {
	margin-bottom: 0;
}

.c-person-dialog-close {
	position: absolute;
	top: calc(var(--spacer) * 1.25);
	right: calc(var(--spacer) * 1.25);
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

.c-person-dialog-close:hover {
	background: rgb(var(--color-gray-5));
}

.c-person-dialog-close:focus-visible {
	outline: 2px solid rgb(var(--consulting-primary));
	outline-offset: 2px;
}

.c-person-dialog-close-x,
.c-person-dialog-close-x::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 17px;
	height: 2px;
	background: rgb(var(--consulting-dark));
	content: '';
}

.c-person-dialog-close-x {
	transform: translate(-50%, -50%) rotate(45deg);
}

.c-person-dialog-close-x::before {
	top: 0;
	left: 0;
	transform: rotate(90deg);
}

@media (max-width: 600px) {
	.c-person-dialog-inner {
		padding: calc(var(--spacer) * 1.25);
	}

	/* Stacked, so a long title gets the full width instead of wrapping into
	   a narrow column beside the portrait */
	.c-person-dialog-head {
		flex-direction: column;
		align-items: flex-start;
		gap: calc(var(--spacer) * 0.75);
		padding-right: calc(var(--spacer) * 2.25);
	}

	/* The head stacks here, and in a column flex container flex-basis sizes
	   the height while the width collapses to content, so both are explicit */
	.c-person-dialog-portrait {
		flex: 0 0 auto;
		width: 96px;
		height: 96px;
	}

	.c-person-dialog-name {
		font-size: 1.3rem;
	}
}

/* ---------- Testimonial slider ---------- */
/* Above the closing CTA on the homepage, added 2026-09-15. Server renders
   every quote stacked; subbrand-testimonials.js turns two or more into a
   slider. Everything here is written so the stacked state is presentable on
   its own, because that is what a no-JS visitor gets. */
.c-testimonials-headline {
	text-align: center;
	margin-bottom: calc(var(--spacer) * 2);
}

.c-testimonials {
	max-width: 62rem;
	margin-inline: auto;
}

/* Stacked, before enhancement: quotes separated by a rule so they read as a
   list rather than one run-on block. */
.c-testimonials:not(.is-enhanced) .c-testimonial + .c-testimonial {
	border-top: 1px solid rgb(var(--color-gray-25));
	margin-top: calc(var(--spacer) * 2);
	padding-top: calc(var(--spacer) * 2);
}

.c-testimonial {
	margin: 0;
	text-align: center;
}

/* The opening mark is decorative and sits above the quote rather than inline,
   so it never pushes the first line out of alignment with the rest. */
.c-testimonial-quote {
	margin: 0;
	border: 0;
	padding: 0;
	position: relative;
	padding-top: calc(var(--spacer) * 2.25);
}

.c-testimonial-quote::before {
	content: '\201C';
	position: absolute;
	top: calc(var(--spacer) * -0.5);
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-display);
	font-size: 4.5rem;
	line-height: 1;
	color: rgb(var(--consulting-primary));
	opacity: 0.25;
}

.c-testimonial-quote p {
	font-family: var(--font-display);
	font-size: 1.45rem;
	line-height: 1.5;
	color: rgb(var(--consulting-dark));
}

.c-testimonial-quote p:last-child {
	margin-bottom: 0;
}

.c-testimonial-source {
	margin-top: calc(var(--spacer) * 1.5);
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-family: var(--font-display);
}

.c-testimonial-person {
	font-weight: 600;
	color: rgb(var(--consulting-dark));
}

.c-testimonial-sep {
	margin-inline: 0.5em;
	color: rgb(var(--color-gray-50));
}

.c-testimonial-business {
	color: rgb(var(--consulting-primary));
}

/* ---------- enhanced: one at a time, with controls ---------- */
.c-testimonials.is-enhanced .c-testimonial-viewport {
	display: flex;
	align-items: center;
	justify-content: center;
}

.c-testimonial-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--spacer) * 1.25);
	margin-top: calc(var(--spacer) * 2);
}

.c-testimonial-arrow {
	appearance: none;
	background: none;
	border: 1px solid rgb(var(--color-gray-25));
	border-radius: 50%;
	width: 44px;
	height: 44px;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.c-testimonial-arrow:hover,
.c-testimonial-arrow:focus-visible {
	border-color: rgb(var(--consulting-primary));
	background: rgba(var(--consulting-primary), 0.06);
}

/* A chevron drawn in CSS, so the control needs no icon font to be usable. */
.c-testimonial-arrow span {
	width: 9px;
	height: 9px;
	border-right: 2px solid rgb(var(--consulting-primary));
	border-bottom: 2px solid rgb(var(--consulting-primary));
}

.c-testimonial-arrow-next span {
	transform: rotate(-45deg);
	margin-left: -3px;
}

.c-testimonial-arrow-prev span {
	transform: rotate(135deg);
	margin-right: -3px;
}

.c-testimonial-dots {
	display: flex;
	align-items: center;
}

/* The button IS the tap target and the visible dot is drawn inside it, rather
   than a 9px button with its hit area pushed outwards. Expanding outwards was
   tried first and was wrong: at this spacing the neighbouring hit areas
   overlapped, so a click aimed at one dot landed on the next. Adjacent boxes
   with no gap cannot overlap, and 30x44 clears the touch-target minimum. */
.c-testimonial-dot {
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	width: 30px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.c-testimonial-dot::before {
	content: '';
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 1px solid rgb(var(--consulting-primary));
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.c-testimonial-dot.is-current::before {
	background: rgb(var(--consulting-primary));
	transform: scale(1.3);
}

@media (max-width: 600px) {
	.c-testimonial-quote p {
		font-size: 1.2rem;
	}
	.c-testimonial-quote::before {
		font-size: 3.4rem;
	}
	.c-testimonial-source {
		font-size: 0.85rem;
	}
	/* Person and business stack, so a long company name does not crush the
	   name next to it. The slash would read as a dangling mark, so it goes. */
	.c-testimonial-source {
		display: flex;
		flex-direction: column;
		gap: 0.2rem;
	}
	.c-testimonial-sep {
		display: none;
	}
}

/* Regulatory / scope-of-practice line in the footer, above the corporate
   line. Smaller and quieter than the corporate paragraph, because it is a
   standing disclaimer rather than something to read every visit. Renders
   only when the client's approved wording is set. */
.consulting-footer-disclaimer {
	font-size: 0.85rem;
	line-height: 1.6;
	opacity: 0.75;
	margin-bottom: calc(var(--spacer) * 0.75);
}