/*
 * C&S Consultores — design system.
 *
 * Direction: "regulated precision". The firm is a licensed auditor, credentialed
 * by the Superintendencia de Compañías and the Superintendencia de Economía
 * Popular y Solidaria. Credibility is the product, so the design is built from
 * hairline rules, exact spacing and tabular figures rather than decoration.
 *
 * Navy is the firm's existing mark colour, carried forward rather than replaced.
 * Brass appears only on credential marks and section rules — spend the boldness
 * in one place and keep everything around it quiet.
 *
 * Every colour, face and measure below resolves from a custom property set in
 * inc/enqueue.php from Customizer values. Nothing here hardcodes a brand
 * decision, so the client can re-skin the site without touching this file.
 */

:root {
	/* Spacing scale. */
	--cs-space-1: .5rem;
	--cs-space-2: 1rem;
	--cs-space-3: 1.5rem;
	--cs-space-4: 2.5rem;
	--cs-space-5: 4rem;
	--cs-space-6: 6.5rem;

	/* Derived neutrals, biased toward the navy so greys read as chosen. */
	--cs-muted: color-mix(in srgb, var(--cs-ink) 58%, transparent);
	--cs-line: color-mix(in srgb, var(--cs-accent) 16%, transparent);
	--cs-line-strong: color-mix(in srgb, var(--cs-accent) 32%, transparent);
	--cs-surface: color-mix(in srgb, var(--cs-accent) 4%, var(--cs-ground));
	--cs-accent-deep: color-mix(in srgb, var(--cs-accent) 82%, #000);
	/* The brand gold is light enough that white type on it sits under 4.5:1,
	   so anything with a label on it uses the deepened form instead. */
	--cs-action-deep: color-mix(in srgb, var(--cs-action) 88%, #000);

	/* Type scale. */
	--cs-step--1: clamp(.82rem, .8rem + .1vw, .875rem);
	--cs-step-0:  clamp(1rem, .97rem + .15vw, 1.0625rem);
	--cs-step-1:  clamp(1.2rem, 1.13rem + .35vw, 1.4rem);
	--cs-step-2:  clamp(1.45rem, 1.3rem + .7vw, 1.85rem);
	--cs-step-3:  clamp(1.8rem, 1.5rem + 1.4vw, 2.6rem);
	--cs-step-4:  clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem);
}

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

body {
	margin: 0;
	background: var(--cs-ground);
	color: var(--cs-ink);
	font-family: var(--cs-font-body);
	font-size: var(--cs-step-0);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	font-variant-numeric: tabular-nums;
}

/* .cs-hero__title is in this group because a rotating hero renders its first
   headline as the page's h1 and the rest as paragraphs — one h1 per page — so
   the heading treatment has to come from the class, not from the tag. */
h1, h2, h3, h4, h5, h6, .cs-hero__title {
	font-family: var(--cs-font-head);
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1.12;
	text-wrap: balance;
	margin: 0 0 var(--cs-space-2);
	color: var(--cs-accent);
}

/* The display face is matched to the logo's own wordmark rather than merely
   chosen to suit it, so the page reads as the same system as the mark. Below
   h2 the sans takes over: at card-title size these hairlines stop holding up.

   700 rather than 600 because the face runs light — at 600 the display sizes
   read thinner than the wordmark they are meant to echo. The negative tracking
   the old Didone needed is dropped for the same reason: this one is already
   tightly fitted, and pulling it in further closes up the counters. */
h1, h2, .cs-hero__title {
	font-family: var(--cs-font-display);
	font-weight: 700;
	letter-spacing: 0;
}

h1 { font-size: var(--cs-step-4); }
h2 { font-size: var(--cs-step-3); }
h3 { font-size: var(--cs-step-2); }
h4 { font-size: var(--cs-step-1); }

p { margin: 0 0 var(--cs-space-2); }
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--cs-accent); text-underline-offset: .18em; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--cs-seal);
	outline-offset: 2px;
}

/* The eyebrow is the recurring structural label: mono, spaced, brass. It marks
   a section's role, so it is only used where a section genuinely has one. */
.cs-eyebrow {
	font-family: var(--cs-font-data);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cs-seal);
	margin: 0 0 var(--cs-space-2);
	display: block;
}

/* Layout ------------------------------------------------------------ */

.cs-shell {
	width: min(100% - 2 * var(--cs-space-3), var(--cs-measure));
	margin-inline: auto;
}

.cs-main { display: block; }

.cs-layout {
	display: grid;
	gap: var(--cs-space-5);
	padding-block: var(--cs-space-5);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.cs-layout:has(.cs-layout__aside) {
		grid-template-columns: minmax(0, 1fr) 19rem;
	}
}

/* WPBakery emits rows at full viewport width and leaves the container to the
   theme. This is that container: the row stays full-bleed so a tone band still
   reaches both edges, while its columns centre on --cs-measure. Without it
   every element sits flush against the browser edge.
   The 15px the builder puts on .vc_column-inner is subtracted so the visible
   measure matches --cs-measure rather than overshooting the gutter. */
.wpb-content-wrapper .vc_row {
	margin-left: 0;
	margin-right: 0;
	padding-inline: calc(max(var(--cs-space-3), (100% - var(--cs-measure)) / 2) - 15px);
}

/* Sections that paint their own full-width background carry .cs-band and a
   .cs-shell of their own, so the row must not inset them a second time. */
.wpb-content-wrapper .vc_row:has(.cs-band) { padding-inline: 0; }

/* An element that has nothing to show returns no markup — a team grid with no
   team members, say — but its row keeps its vertical padding and leaves a gap
   with nothing in it. Collapse a row only when every column came back empty,
   so a genuinely half-filled row still holds its shape. */
.wpb-content-wrapper .vc_row:has(.wpb_wrapper:empty):not(:has(.wpb_wrapper:not(:empty))) {
	padding-block: 0;
}

/* Builder rows take spacing and tone from the row parameters registered in
   inc/wpbakery.php, so an editor sets section rhythm without writing CSS. */
.cs-space--none  { padding-block: 0; }
.cs-space--tight { padding-block: var(--cs-space-4); }
.cs-space--roomy { padding-block: var(--cs-space-6); }
.vc_row:not([class*="cs-space--"]) { padding-block: var(--cs-space-5); }

/* Belt and braces against a stray negative margin pushing the page sideways. */
body { overflow-x: clip; }

.cs-tone--muted   { background: var(--cs-surface); }
.cs-tone--accent  { background: var(--cs-accent); color: var(--cs-accent-ink); }
.cs-tone--inverse { background: var(--cs-accent-deep); color: var(--cs-accent-ink); }

.cs-tone--accent :where(h1,h2,h3,h4,h5,h6),
.cs-tone--inverse :where(h1,h2,h3,h4,h5,h6),
.cs-tone--accent a,
.cs-tone--inverse a { color: inherit; }

.cs-tone--accent .cs-eyebrow,
.cs-tone--inverse .cs-eyebrow { color: color-mix(in srgb, var(--cs-seal) 70%, #FFF); }

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

.cs-topbar {
	background: var(--cs-accent);
	color: var(--cs-accent-ink);
	font-size: var(--cs-step--1);
}

.cs-topbar__inner,
.cs-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cs-space-3);
	flex-wrap: wrap;
}

.cs-topbar__inner { padding-block: .6rem; }

.cs-topbar__contact {
	display: flex;
	gap: var(--cs-space-3);
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-topbar__contact li {
	font-family: var(--cs-font-data);
	font-size: .75rem;
	letter-spacing: .04em;
}

.cs-topbar__contact a { color: inherit; text-decoration: none; }
.cs-topbar__contact a:hover { text-decoration: underline; }
.cs-topbar .cs-social__link:hover { color: color-mix(in srgb, var(--cs-seal) 75%, #FFF); }

.cs-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--cs-ground);
	border-bottom: 1px solid var(--cs-line);
}

.cs-header__inner { padding-block: var(--cs-space-3); }
.cs-header--centered .cs-header__inner { justify-content: center; text-align: center; }

.cs-brand__text { margin: 0; font-family: var(--cs-font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.cs-brand__text a { color: var(--cs-accent); text-decoration: none; }

.cs-brand__link { display: block; line-height: 0; }

/* The supplied artwork is a wide lockup with the wordmark beneath the mark, so
   it is scaled by height and allowed to keep its own aspect ratio. The rule is
   scoped through .cs-brand__link so a plugin stylesheet setting a blanket
   `img { height: auto }` cannot let the logo fall back to its full height. */
.cs-brand__link .cs-brand__logo {
	display: block;
	width: auto;
	/* The full lockup stacks the wordmark under the mark, and the two lines of
	   "CONSULTORES & AUDITORES / CONAUD CIA. LTDA." are only ~9% of the artwork's
	   height each. Below roughly 90px overall they stop being readable, so the
	   header carries a taller logo than a mark-only lockup would need. */
	height: clamp(5.5rem, 8vw, 7rem);
}

.cs-footer__brand { padding-bottom: var(--cs-space-4); }
.cs-footer__brand .cs-brand__logo { height: clamp(3.25rem, 6vw, 4.5rem); }

.cs-footer__legal-name {
	font-family: var(--cs-font-data);
	font-size: .75rem;
	letter-spacing: .06em;
	color: color-mix(in srgb, var(--cs-accent-ink) 70%, transparent);
	margin: var(--cs-space-2) 0 0;
}

.cs-nav__list {
	display: flex;
	align-items: center;
	gap: var(--cs-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
}

.cs-nav__list a {
	color: var(--cs-ink);
	text-decoration: none;
	font-size: var(--cs-step--1);
	font-weight: 600;
	letter-spacing: .01em;
	padding-block: .35rem;
	border-bottom: 2px solid transparent;
}

.cs-nav__list a:hover,
.cs-nav__list .current-menu-item > a {
	color: var(--cs-accent);
	border-bottom-color: var(--cs-seal);
}

/* Dropdowns. A parent item keeps its own link working — the caret is a separate
   button, so "Servicios" still goes to the services page on every device and the
   submenu is never the only way through. */

.cs-nav__list .menu-item-has-children { position: relative; }

.cs-nav__parent {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
}

.cs-nav__caret {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.1rem;
	height: 1.1rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	line-height: 0;
}

.cs-nav__caret svg {
	width: .6rem;
	height: .6rem;
	transition: transform .2s ease;
}

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

.cs-nav__list .sub-menu {
	position: absolute;
	top: calc(100% + .55rem);
	left: -1rem;
	z-index: 60;
	min-width: 15rem;
	margin: 0;
	padding: .4rem;
	list-style: none;
	background: var(--cs-ground);
	border: 1px solid var(--cs-line);
	border-top: 2px solid var(--cs-seal);
	border-radius: var(--cs-radius);
	box-shadow: 0 18px 40px -24px rgba(13, 25, 62, .55);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-.35rem);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.cs-nav__list .menu-item-has-children:hover > .sub-menu,
.cs-nav__list .menu-item-has-children:focus-within > .sub-menu,
.cs-nav__list .menu-item-has-children.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.cs-nav__list .sub-menu li { width: 100%; }

.cs-nav__list .sub-menu a {
	display: block;
	padding: .55rem .7rem;
	border-bottom: 0;
	border-radius: var(--cs-radius);
	font-weight: 500;
	line-height: 1.35;
}

.cs-nav__list .sub-menu a:hover,
.cs-nav__list .sub-menu .current-menu-item > a {
	background: var(--cs-surface);
	color: var(--cs-accent);
}

.cs-nav-toggle { display: none; }

@media (max-width: 860px) {
	.cs-nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		background: none;
		border: 1px solid var(--cs-line-strong);
		border-radius: var(--cs-radius);
		cursor: pointer;
		color: var(--cs-accent);
	}

	.cs-nav-toggle__bar,
	.cs-nav-toggle__bar::before,
	.cs-nav-toggle__bar::after {
		display: block;
		width: 1.125rem;
		height: 2px;
		background: currentColor;
	}

	.cs-nav-toggle__bar { position: relative; }
	.cs-nav-toggle__bar::before,
	.cs-nav-toggle__bar::after { content: ""; position: absolute; left: 0; }
	.cs-nav-toggle__bar::before { top: -6px; }
	.cs-nav-toggle__bar::after  { top: 6px; }

	.cs-nav { display: none; flex-basis: 100%; }
	.cs-nav.is-open { display: block; padding-bottom: var(--cs-space-2); }
	.cs-nav__list { flex-direction: column; align-items: flex-start; gap: 0; }
	.cs-nav__list li { width: 100%; border-top: 1px solid var(--cs-line); }
	.cs-nav__list a { display: block; padding: .7rem 0; border-bottom: 0; }

	/* On a touch screen the submenu expands in flow instead of overlaying, so
	   nothing is hidden behind a hover the device cannot perform. */
	.cs-nav__parent { display: flex; width: 100%; justify-content: space-between; }
	.cs-nav__parent > a { flex: 1; }
	.cs-nav__caret { width: 2.75rem; height: 2.75rem; margin-right: -.5rem; }
	.cs-nav__caret svg { width: .7rem; height: .7rem; }

	.cs-nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
		min-width: 0;
		margin: 0 0 .5rem;
		padding: 0 0 0 var(--cs-space-2);
		border: 0;
		border-left: 2px solid var(--cs-seal);
		border-radius: 0;
		box-shadow: none;
		background: none;
	}

	.cs-nav__list .menu-item-has-children.is-open > .sub-menu { display: block; }
	.cs-nav__list .sub-menu li { border-top: 0; }
	.cs-nav__list .sub-menu a { padding: .5rem 0; }
}

/* Social ------------------------------------------------------------ */

.cs-social {
	display: flex;
	gap: .25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	color: inherit;
	border-radius: var(--cs-radius);
	transition: color .15s ease;
}

.cs-footer .cs-social__link:hover { color: var(--cs-seal); }

/* Hero --------------------------------------------------------------- */

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

/* A hairline ledger grid over a slow drift of light. The canvas underneath
   carries the movement; this only supplies the ruled structure. */
.cs-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(to right, color-mix(in srgb, #FFF 7%, transparent) 1px, transparent 1px);
	background-size: 5rem 100%;
	z-index: 1;
}

.cs-hero__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	z-index: 0;
}

/* Ask-the-assistant ---------------------------------------------------
   The site's primary action. It is deliberately the brightest thing on the
   page: everything else is navy and brass so this reads as the way in. */

/* The panel sits beside the headline and fills what would otherwise be an
   empty half of the hero. */
.cs-hero--chat .cs-hero__inner { align-items: center; }

@media (min-width: 900px) {
	.cs-hero--chat:not(.cs-hero--split) .cs-hero__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	}
}

.cs-ask__panel {
	background: color-mix(in srgb, #FFF 7%, transparent);
	border: 1px solid color-mix(in srgb, #FFF 16%, transparent);
	border-radius: calc(var(--cs-radius) + 14px);
	padding: var(--cs-space-3);
	backdrop-filter: blur(6px);
	box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8);
}

.cs-ask__lead {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 var(--cs-space-2);
	font-family: var(--cs-font-data);
	font-size: .6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--cs-accent-ink) 82%, transparent);
}

/* A live dot, so the panel reads as something that answers now. */
.cs-ask__pulse {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cs-action);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--cs-action) 70%, transparent);
	animation: cs-pulse 2.4s ease-out infinite;
	flex: none;
}

@keyframes cs-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cs-action) 65%, transparent); }
	70%  { box-shadow: 0 0 0 10px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
	.cs-ask__pulse { animation: none; }
}

.cs-ask__form {
	display: flex;
	align-items: center;
	gap: .5rem;
	background: color-mix(in srgb, #FFF 96%, var(--cs-action));
	border-radius: 999px;
	padding: .4rem .4rem .4rem 1rem;
	box-shadow: 0 10px 40px -12px rgba(0, 0, 0, .55),
	            0 0 0 1px color-mix(in srgb, var(--cs-action) 45%, transparent);
	transition: box-shadow .25s ease, transform .25s ease;
}

.cs-ask__form:focus-within {
	transform: translateY(-1px);
	box-shadow: 0 14px 46px -12px rgba(0, 0, 0, .6),
	            0 0 0 2px var(--cs-action),
	            0 0 30px -4px color-mix(in srgb, var(--cs-action) 60%, transparent);
}

.cs-ask__icon { display: flex; color: var(--cs-action); flex: none; }

.cs-ask__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--cs-step-0);
	color: var(--cs-ink);
	padding: .55rem 0;
}

.cs-ask__input::placeholder { color: color-mix(in srgb, var(--cs-ink) 52%, transparent); }
.cs-ask__input:focus { outline: none; }

.cs-ask__send {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	flex: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-family: var(--cs-font-head);
	font-weight: 600;
	font-size: var(--cs-step--1);
	color: #FFF;
	background: var(--cs-action-deep);
	border-radius: 999px;
	padding: .6rem 1.1rem;
	transition: background .2s ease, transform .2s ease;
}

.cs-ask__send:hover { background: color-mix(in srgb, var(--cs-action) 68%, #000); transform: translateX(1px); }

.cs-ask__suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: var(--cs-space-2) 0 0;
	padding: 0;
	list-style: none;
}

.cs-ask__chip {
	font: inherit;
	font-size: .8125rem;
	cursor: pointer;
	color: color-mix(in srgb, var(--cs-accent-ink) 88%, transparent);
	background: color-mix(in srgb, #FFF 10%, transparent);
	border: 1px solid color-mix(in srgb, #FFF 22%, transparent);
	border-radius: 999px;
	padding: .4rem .8rem;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.cs-ask__chip:hover {
	background: color-mix(in srgb, var(--cs-action) 22%, transparent);
	border-color: var(--cs-action);
	color: #FFF;
}

@media (max-width: 520px) {
	.cs-ask__send-text { display: none; }
	.cs-ask__send { padding: .6rem .75rem; }
}

/* With the ask box present the hero has one job, so the buttons step down to
   quiet links. Three competing calls to action is none. */
.cs-hero--chat .cs-hero__actions { gap: var(--cs-space-3); margin-top: var(--cs-space-3); }

.cs-hero--chat .cs-hero__actions .cs-button {
	background: none;
	border: 0;
	padding: 0;
	color: color-mix(in srgb, var(--cs-accent-ink) 78%, transparent);
	font-size: var(--cs-step--1);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: .3em;
	text-decoration-color: color-mix(in srgb, var(--cs-accent-ink) 35%, transparent);
	box-shadow: none;
}

.cs-hero--chat .cs-hero__actions .cs-button:hover {
	color: #FFF;
	transform: none;
	box-shadow: none;
	text-decoration-color: var(--cs-action);
}

.cs-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: clamp(var(--cs-space-5), 10vw, 8rem);
	display: grid;
	gap: var(--cs-space-4);
	align-items: center;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.cs-hero--split .cs-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

.cs-hero__title {
	color: inherit;
	font-size: var(--cs-step-4);
	max-width: 18ch;
	margin-bottom: var(--cs-space-3);
}

.cs-hero__intro {
	font-size: var(--cs-step-1);
	line-height: 1.5;
	max-width: 46ch;
	color: color-mix(in srgb, var(--cs-accent-ink) 88%, transparent);
}

.cs-hero__actions {
	display: flex;
	gap: var(--cs-space-2);
	flex-wrap: wrap;
	margin-top: var(--cs-space-3);
}

.cs-hero__media img { border-radius: var(--cs-radius); display: block; }

/* Buttons ------------------------------------------------------------ */

.cs-button {
	display: inline-block;
	padding: .8rem 1.4rem;
	background: var(--cs-accent);
	color: var(--cs-accent-ink);
	border: 1px solid var(--cs-accent);
	border-radius: var(--cs-radius);
	text-decoration: none;
	font-family: var(--cs-font-head);
	font-weight: 600;
	font-size: var(--cs-step--1);
	letter-spacing: .01em;
	transition: background .15s ease, color .15s ease;
}

.cs-button:hover { background: var(--cs-accent-deep); border-color: var(--cs-accent-deep); }

.cs-button--seal {
	background: var(--cs-seal);
	border-color: var(--cs-seal);
	color: #FFF;
}

.cs-button--seal:hover { background: color-mix(in srgb, var(--cs-seal) 82%, #000); border-color: transparent; }

.cs-button--ghost {
	background: transparent;
	color: currentColor;
	border-color: color-mix(in srgb, currentColor 45%, transparent);
}

.cs-button--ghost:hover { background: color-mix(in srgb, currentColor 12%, transparent); }

/* Credentials — the signature element. Regulatory calificaciones are the
   firm's strongest trust asset, so they get their own typographic treatment
   rather than being buried in body copy. */

.cs-credentials__grid {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--cs-line);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
	.cs-credentials__grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
	.cs-credential + .cs-credential { border-left: 1px solid var(--cs-line); }
}

.cs-credential {
	padding: var(--cs-space-3) var(--cs-space-3) var(--cs-space-3) 0;
	border-bottom: 1px solid var(--cs-line);
	position: relative;
}

@media (min-width: 760px) {
	.cs-credential { padding-inline: var(--cs-space-3); border-bottom: 0; }
	.cs-credential:first-child { padding-left: 0; }
}

/* The brass rule is the seal motif: a short mark, not a border. It stands in
   for the issuing body's logo, so it steps aside once a real one is set. */
.cs-credential::before {
	content: "";
	display: block;
	width: 1.75rem;
	height: 2px;
	background: var(--cs-seal);
	margin-bottom: var(--cs-space-2);
}

.cs-credential:has(.cs-credential__logo)::before { content: none; }

/* Regulator marks arrive at whatever size their owner published them, so they
   are normalised to a common optical height rather than a common width. */
.cs-credential__logo {
	display: flex;
	align-items: center;
	min-height: 3rem;
	margin-bottom: var(--cs-space-2);
}

.cs-credential__logo img {
	max-height: 3rem;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.cs-credential__issuer {
	font-family: var(--cs-font-head);
	font-size: var(--cs-step-0);
	font-weight: 600;
	color: var(--cs-accent);
	margin: 0 0 .35rem;
	line-height: 1.3;
}

.cs-credential__detail {
	margin: 0;
	font-size: var(--cs-step--1);
	color: var(--cs-muted);
}

.cs-credential__ref {
	font-family: var(--cs-font-data);
	font-size: .75rem;
	letter-spacing: .06em;
	color: var(--cs-seal);
	display: block;
	margin-top: .4rem;
}

/* Info boxes and stats ----------------------------------------------- */

.cs-infobox {
	display: grid;
	gap: var(--cs-space-2);
	padding: var(--cs-space-3);
	background: var(--cs-surface);
	border-radius: var(--cs-radius);
	border-top: 2px solid var(--cs-seal);
	height: 100%;
}

.cs-infobox__title { margin: 0; font-size: var(--cs-step-1); }
.cs-infobox__body { margin: 0; color: var(--cs-muted); }
.cs-infobox__media img { border-radius: var(--cs-radius); }

.cs-stats {
	display: grid;
	gap: var(--cs-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.cs-stat { border-left: 2px solid var(--cs-seal); padding-left: var(--cs-space-2); }

.cs-stat__figure {
	font-family: var(--cs-font-head);
	font-size: var(--cs-step-3);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--cs-accent);
	font-variant-numeric: tabular-nums;
	display: block;
}

.cs-tone--accent .cs-stat__figure,
.cs-tone--inverse .cs-stat__figure { color: inherit; }

.cs-stat__label {
	font-family: var(--cs-font-data);
	font-size: .6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cs-muted);
	margin: .5rem 0 0;
}

.cs-tone--accent .cs-stat__label,
.cs-tone--inverse .cs-stat__label { color: color-mix(in srgb, var(--cs-accent-ink) 75%, transparent); }

/* Section headers ---------------------------------------------------- */

.cs-section__head {
	max-width: 60ch;
	margin-bottom: var(--cs-space-4);
	padding-bottom: var(--cs-space-2);
	border-bottom: 1px solid var(--cs-line);
}

.cs-section__intro { color: var(--cs-muted); margin: 0; font-size: var(--cs-step-1); line-height: 1.5; }

/* Cards, services and team ------------------------------------------- */

.cs-post-list {
	display: grid;
	gap: var(--cs-space-4);
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.cs-services__grid,
.cs-team__grid {
	display: grid;
	gap: var(--cs-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* The column count is a builder parameter, so the modifier lives on the section
   and the grid inside it follows — services and team share the same scale. */
@media (min-width: 760px) {
	.cs-services--cols-2 :where(.cs-services__grid, .cs-team__grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cs-services--cols-3 :where(.cs-services__grid, .cs-team__grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
	.cs-services--cols-4 :where(.cs-services__grid, .cs-team__grid) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Call to action ----------------------------------------------------- */

.cs-cta__inner { align-items: center; }

@media (min-width: 900px) {
	.cs-cta__inner { grid-template-columns: minmax(0, 1.4fr) auto; }
}

.cs-cta__inner .cs-hero__actions { margin-top: 0; }
.cs-cta h2 { margin-bottom: var(--cs-space-1); }

.cs-card,
.cs-service-card,
.cs-team-card {
	background: var(--cs-ground);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius);
	overflow: hidden;
	transition: border-color .15s ease, transform .15s ease;
}

.cs-service-card:hover,
.cs-card:hover { border-color: var(--cs-line-strong); }

.cs-service-card__link {
	display: block;
	padding: var(--cs-space-3);
	color: inherit;
	text-decoration: none;
	height: 100%;
}

.cs-service-card__title,
.cs-card__title,
.cs-team-card__name {
	margin-bottom: .4rem;
	font-size: var(--cs-step-1);
}

.cs-card__body { padding: var(--cs-space-3); }
.cs-card__title a { color: inherit; text-decoration: none; }

.cs-service-card__excerpt,
.cs-card__excerpt { color: var(--cs-muted); margin-bottom: var(--cs-space-2); }

.cs-service-card__cta {
	font-family: var(--cs-font-data);
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cs-seal);
}

.cs-service-card__media,
.cs-card__media,
.cs-team-card__media { display: block; margin: 0 0 var(--cs-space-2); }

.cs-team-card { text-align: left; }
.cs-team-card__body { padding: var(--cs-space-3); }
.cs-team-card__role {
	font-family: var(--cs-font-data);
	font-size: .6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cs-seal);
	margin: 0 0 var(--cs-space-1);
}
.cs-team-card__bio { color: var(--cs-muted); font-size: var(--cs-step--1); margin: 0; }

/* Entry -------------------------------------------------------------- */

.cs-entry__content { max-width: 68ch; }
.cs-entry__content > * + * { margin-top: var(--cs-space-2); }
.cs-entry__meta { color: var(--cs-muted); font-family: var(--cs-font-data); font-size: .75rem; letter-spacing: .06em; }
.cs-entry--page .cs-entry__head { padding-block: var(--cs-space-5) var(--cs-space-2); }
.cs-entry__media { margin: 0 0 var(--cs-space-3); }
/* Secondary states. A visitor who lands on a 404, an empty search or a blog
   with nothing in it yet still has to meet a finished page, and be given a way
   onward rather than a dead end. */

.cs-archive__head {
	margin-bottom: var(--cs-space-4);
	padding-bottom: var(--cs-space-2);
	border-bottom: 1px solid var(--cs-line);
}

.cs-archive__title {
	margin: 0;
	font-family: var(--cs-font-display);
	font-size: var(--cs-step-3);
	line-height: 1.1;
	letter-spacing: -.015em;
}

.cs-archive__title span { color: var(--cs-seal, var(--cs-accent)); }
.cs-archive__intro { margin-top: var(--cs-space-1); color: var(--cs-muted); }

.cs-404,
.cs-empty {
	max-width: 34rem;
	margin-inline: auto;
	padding-block: var(--cs-space-6);
	text-align: center;
}

.cs-404__title,
.cs-empty__title {
	margin: 0 0 var(--cs-space-2);
	font-family: var(--cs-font-display);
	font-size: var(--cs-step-3);
	line-height: 1.1;
	letter-spacing: -.015em;
}

.cs-404__intro,
.cs-empty p {
	margin: 0 0 var(--cs-space-3);
	color: var(--cs-muted);
	font-size: var(--cs-step-0);
	line-height: 1.6;
}

.cs-404 .search-form,
.cs-empty .search-form {
	display: flex;
	gap: var(--cs-space-1);
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: var(--cs-space-3);
}

/* WordPress builds the search form itself, so its field and button arrive with
   no styling of their own and render as raw browser controls. Styled here
   rather than in a searchform.php override, so the sidebar widget, the 404 and
   the empty archive all match without three copies of the markup. */
.search-form { display: flex; gap: var(--cs-space-1); flex-wrap: wrap; }

.search-form label { flex: 1 1 12rem; min-width: 0; margin: 0; }

.search-field {
	width: 100%;
	font: inherit;
	font-size: var(--cs-step-0);
	color: var(--cs-ink);
	background: var(--cs-ground);
	border: 1px solid var(--cs-line-strong);
	border-radius: var(--cs-radius);
	padding: .7rem .9rem;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.search-field::placeholder { color: color-mix(in srgb, var(--cs-ink) 45%, transparent); }

.search-field:focus {
	outline: none;
	border-color: var(--cs-action);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--cs-action) 30%, transparent);
}

.search-submit {
	flex: none;
	font: inherit;
	font-family: var(--cs-font-head);
	font-size: var(--cs-step--1);
	font-weight: 600;
	letter-spacing: .04em;
	cursor: pointer;
	color: var(--cs-accent-ink);
	background: var(--cs-accent);
	border: 1px solid var(--cs-accent);
	border-radius: var(--cs-radius);
	padding: .7rem 1.3rem;
	transition: background .2s ease, border-color .2s ease;
}

.search-submit:hover {
	background: var(--cs-accent-deep);
	border-color: var(--cs-accent-deep);
}

.cs-empty__actions {
	display: flex;
	gap: var(--cs-space-1);
	justify-content: center;
	flex-wrap: wrap;
}

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

.cs-footer {
	margin-top: var(--cs-space-6);
	background: var(--cs-accent);
	color: var(--cs-accent-ink);
	padding-block: var(--cs-space-5) var(--cs-space-3);
	font-size: var(--cs-step--1);
}

.cs-footer :where(h1,h2,h3,h4,h5,h6),
.cs-footer a { color: inherit; }

.cs-footer .widget__title {
	font-family: var(--cs-font-data);
	font-size: .6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--cs-seal) 70%, #FFF);
	margin-bottom: var(--cs-space-2);
}

.cs-footer__columns {
	display: grid;
	gap: var(--cs-space-4);
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	padding-bottom: var(--cs-space-4);
}

.cs-footer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cs-space-2);
	flex-wrap: wrap;
	border-top: 1px solid color-mix(in srgb, #FFF 18%, transparent);
	padding-top: var(--cs-space-3);
	color: color-mix(in srgb, var(--cs-accent-ink) 78%, transparent);
}

.cs-footer__copyright { margin: 0; font-family: var(--cs-font-data); font-size: .75rem; letter-spacing: .04em; }

.cs-footer__legal {
	display: flex;
	gap: var(--cs-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Forms -------------------------------------------------------------- */

.cs-form-block__body { display: grid; gap: var(--cs-space-4); grid-template-columns: minmax(0, 1fr); }

@media (min-width: 860px) {
	.cs-form-block--split .cs-form-block__body { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

.cs-form__grid { display: grid; gap: var(--cs-space-2); grid-template-columns: minmax(0, 1fr); }

@media (min-width: 640px) {
	.cs-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cs-form__field--wide,
	.cs-form__actions { grid-column: 1 / -1; }
}

.cs-form__field { margin: 0; display: grid; gap: .35rem; }

.cs-form__field label {
	font-family: var(--cs-font-data);
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cs-muted);
}

.cs-form__req { color: var(--cs-seal); }

/* CF7 wraps every control in a span, which breaks grid sizing unless it is
   told to fill its cell. */
.cs-form__field .wpcf7-form-control-wrap { display: block; }

.cs-form-block input[type="text"],
.cs-form-block input[type="email"],
.cs-form-block input[type="tel"],
.cs-form-block select,
.cs-form-block textarea {
	width: 100%;
	font: inherit;
	font-size: var(--cs-step-0);
	padding: .6rem .75rem;
	color: var(--cs-ink);
	background: var(--cs-ground);
	border: 1px solid var(--cs-line-strong);
	border-radius: var(--cs-radius);
}

.cs-form-block textarea { resize: vertical; min-height: 7rem; }

.cs-form-block :where(input, select, textarea):focus-visible {
	outline: 2px solid var(--cs-seal);
	outline-offset: 1px;
	border-color: var(--cs-accent);
}

.cs-form__consent { font-size: var(--cs-step--1); color: var(--cs-muted); }
.cs-form__consent label { font-family: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; }
.cs-form__actions { margin: 0; }
.cs-form-block .cs-button { cursor: pointer; }

/* CF7's own response messages, restyled to match. */
.wpcf7-response-output {
	margin: var(--cs-space-2) 0 0 !important;
	padding: .7rem .9rem !important;
	border: 0 !important;
	border-left: 2px solid var(--cs-seal) !important;
	background: var(--cs-surface);
	font-size: var(--cs-step--1);
}

.wpcf7-not-valid-tip { color: var(--cs-seal); font-size: var(--cs-step--1); }

/* Contact details ---------------------------------------------------- */

.cs-form-block__details { display: grid; gap: var(--cs-space-3); align-content: start; }

.cs-details { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--cs-line); }
.cs-details__row { display: grid; gap: .15rem; padding: var(--cs-space-2) 0; border-bottom: 1px solid var(--cs-line); }

.cs-details dt {
	font-family: var(--cs-font-data);
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cs-muted);
}

.cs-details dd { margin: 0; }
.cs-details dd a { color: var(--cs-accent); }
.cs-form-block__details .cs-button { justify-self: start; }

/* Instagram ---------------------------------------------------------- */

.cs-instagram__link { margin: var(--cs-space-2) 0 0; }

.cs-instagram__link a {
	font-family: var(--cs-font-data);
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cs-seal);
}

/* Social block ------------------------------------------------------- */

.cs-social-block { display: grid; gap: var(--cs-space-1); justify-items: start; }
.cs-social-block--center { justify-items: center; }
.cs-social-block--right { justify-items: end; }
.cs-social-block .cs-eyebrow { margin: 0; }

/* Editor-only notice ------------------------------------------------- */

.cs-notice {
	border: 1px dashed var(--cs-line-strong);
	border-left: 2px solid var(--cs-seal);
	background: var(--cs-surface);
	padding: var(--cs-space-2) var(--cs-space-3);
	font-size: var(--cs-step--1);
	border-radius: var(--cs-radius);
}

.cs-notice p { margin: 0; }

/* Motion --------------------------------------------------------------
   Elements start displaced only once JS has marked them, so a page without
   JavaScript renders everything in place rather than blank. */

.cs-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
	will-change: opacity, transform;
}

.cs-reveal.is-visible { opacity: 1; transform: none; }

/* Cards lift and pick up the action colour on approach, so the grid reads as
   something to interact with rather than a static list. */
.cs-service-card,
.cs-card,
.cs-team-card,
.cs-infobox {
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.cs-service-card:hover,
.cs-card:hover,
.cs-team-card:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--cs-action) 55%, transparent);
	box-shadow: 0 14px 34px -20px rgba(13, 25, 62, .55);
}

.cs-service-card__cta { transition: color .2s ease, letter-spacing .2s ease; }
.cs-service-card:hover .cs-service-card__cta { color: var(--cs-action); letter-spacing: .13em; }

.cs-infobox:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -22px rgba(13, 25, 62, .5); }

/* Header condenses once the page moves. */
.cs-header { transition: box-shadow .25s ease, background .25s ease; }
.cs-header__inner { transition: padding .25s ease; }
.cs-header.is-stuck { box-shadow: 0 6px 26px -18px rgba(13, 25, 62, .8); }
.cs-header.is-stuck .cs-header__inner { padding-block: .55rem; }
/* Shrinks on scroll, but not past the point where the wordmark goes muddy. */
.cs-header.is-stuck .cs-brand__link .cs-brand__logo { height: clamp(4.5rem, 6vw, 5.5rem); }
.cs-brand__link .cs-brand__logo { transition: height .25s ease; }

/* Nav links get an underline that grows from the left. */
.cs-nav__list a { position: relative; border-bottom: 0; }

.cs-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	background: var(--cs-seal);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}

.cs-nav__list a:hover::after,
.cs-nav__list .current-menu-item > a::after { transform: scaleX(1); }

/* Buttons get a little travel so a click feels answered. */
.cs-button { transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.cs-button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(0,0,0,.6); }
.cs-button--seal:hover { box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--cs-seal) 70%, transparent); }

/* The floating launcher earns attention once, shortly after arrival, then
   stops — a permanent pulse becomes noise. */
.cs-chat__launcher { animation: cs-attention 2.2s ease 3s 2; }

@keyframes cs-attention {
	0%, 100% { transform: none; box-shadow: 0 6px 24px rgba(13, 25, 62, .28); }
	50%      { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(13, 25, 62, .4); }
}

@media (prefers-reduced-motion: reduce) {
	.cs-reveal { opacity: 1; transform: none; }
	.cs-chat__launcher { animation: none; }
}

/* Accessibility ------------------------------------------------------ */

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

.cs-skip-link:focus {
	position: fixed;
	top: var(--cs-space-2);
	left: var(--cs-space-2);
	z-index: 999;
	width: auto;
	height: auto;
	clip-path: none;
	padding: var(--cs-space-1) var(--cs-space-2);
	background: var(--cs-ground);
	color: var(--cs-accent);
	border: 1px solid var(--cs-seal);
}

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

/* ======================================================================
   Angled geometry & kinetics
   ----------------------------------------------------------------------
   The client asked for the movement of bdo.ec — steep diagonal panels,
   photography clipped into a band, cards that break out over it, rails
   that slide — but not its flat blue-on-white. So the geometry is
   borrowed and the colour is not: panels sit on deep navy-black, the page
   ground is warm bone rather than white, and the energy colour is the
   brass already in the C&S seal, pushed to a gold gradient.

   Every shape here is clip-path on an element that carries no text, so
   nothing is ever clipped away from a screen reader or from print.
   ====================================================================== */

:root {
	/* The single diagonal the whole site is cut from. Reused by every band
	   so the angles agree instead of each section choosing its own. */
	--cs-cut: polygon(100% 0, 100% 50%, 0 85%, 0 35%);
	--cs-cut-flip: polygon(0 0, 100% 35%, 100% 85%, 0 50%);
	--cs-cut-top: polygon(0 4.5vw, 100% 0, 100% 100%, 0 100%);
	--cs-cut-bottom: polygon(0 0, 100% 0, 100% calc(100% - 4.5vw), 0 100%);

	--cs-gradient: linear-gradient(112deg, var(--cs-seal) 0%, var(--cs-glow) 100%);
	--cs-gradient-deep: linear-gradient(150deg, var(--cs-deep) 0%, var(--cs-accent) 62%, color-mix(in srgb, var(--cs-accent) 70%, var(--cs-seal)) 100%);
	--cs-shadow-lift: 0 26px 60px -34px rgba(8, 15, 31, .75);
}

/* Full-bleed helper — WPBakery hands us a padded row, so a band that must
   reach both edges pulls itself back out to the viewport.

   100vw counts the scrollbar, which body's clip alone does not contain: the
   overflow lands on the root element and the page gains a few pixels of
   sideways scroll. Clipping on html as well contains it. `clip` rather than
   `hidden` on purpose — hidden would make html a scroll container and kill
   the sticky header. */
html { overflow-x: clip; }

.cs-bleed {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
}

/* --- The diagonal band ---------------------------------------------- */

.cs-diagonal {
	position: relative;
	isolation: isolate;
	padding-block: clamp(4rem, 9vw, 8.5rem);
	overflow: hidden;
	background: var(--cs-ground);
}

/* The wash is painted whether or not a photograph was chosen, so the type
   inside the cut always sits on the deep gradient and is always inverse. The
   tone switch only changes what shows above and below the cut. */
.cs-diagonal { color: var(--cs-accent-ink); }
.cs-diagonal--deep { background: var(--cs-deep); }

.cs-diagonal :where(h1, h2, h3, h4, h5, h6),
.cs-diagonal a { color: inherit; }
.cs-diagonal .cs-eyebrow { color: var(--cs-glow); }

/* The clipped photograph. It is decorative, so it is a background layer
   and never a content image. */
.cs-diagonal__bg {
	position: absolute;
	inset: -6% 0;
	z-index: -2;
	clip-path: var(--cs-cut);
	overflow: hidden;
}

.cs-diagonal--flip .cs-diagonal__bg { clip-path: var(--cs-cut-flip); }

.cs-diagonal__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Oversized so the parallax translate never exposes an edge. */
	transform: translate3d(0, var(--cs-par, 0px), 0) scale(1.12);
	will-change: transform;
}

/* A tint so type stays legible over any photograph the client uploads,
   and so the band reads as brand rather than as stock imagery. */
.cs-diagonal__wash {
	position: absolute;
	inset: -6% 0;
	z-index: -1;
	clip-path: var(--cs-cut);
	background: linear-gradient(100deg,
		color-mix(in srgb, var(--cs-deep) 92%, transparent) 0%,
		color-mix(in srgb, var(--cs-accent) 72%, transparent) 46%,
		color-mix(in srgb, var(--cs-seal) 30%, transparent) 100%);
}

/* The flip layout moves the copy to the right, so the gradient's dark end has to
   travel with it. Without this the heading lands on the palest part of the wash
   and any photograph behind the band shows straight through the type. */
.cs-diagonal--flip .cs-diagonal__wash {
	clip-path: var(--cs-cut-flip);
	background: linear-gradient(260deg,
		color-mix(in srgb, var(--cs-deep) 92%, transparent) 0%,
		color-mix(in srgb, var(--cs-accent) 72%, transparent) 46%,
		color-mix(in srgb, var(--cs-seal) 30%, transparent) 100%);
}

.cs-diagonal__inner { position: relative; }

.cs-diagonal__grid {
	display: grid;
	gap: var(--cs-space-4);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

@media (min-width: 900px) {
	.cs-diagonal__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.cs-diagonal--flip .cs-diagonal__body { grid-column: 2; grid-row: 1; }
}

.cs-diagonal__title { font-size: var(--cs-step-3); margin-bottom: var(--cs-space-2); }
.cs-diagonal__intro { max-width: 46ch; }
.cs-diagonal__actions { margin-top: var(--cs-space-3); display: flex; flex-wrap: wrap; gap: var(--cs-space-2); }

/* Cards break out of the column and sit over the diagonal, the way the
   reference's service cards overlap their photo band. */
.cs-diagonal__cards {
	display: grid;
	gap: var(--cs-space-2);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-diagonal__card {
	background: var(--cs-ground);
	color: var(--cs-ink);
	border: 1px solid var(--cs-line);
	padding: var(--cs-space-3);
	box-shadow: var(--cs-shadow-lift);
	position: relative;
	transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}

/* The gold cap is drawn rather than set as a border, so it can wipe in on
   approach instead of simply being there. */
.cs-diagonal__card::before {
	content: "";
	position: absolute;
	inset: -1px -1px auto -1px;
	height: 3px;
	background: var(--cs-gradient);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s cubic-bezier(.22,.61,.36,1);
}

.cs-diagonal__card:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -34px rgba(8,15,31,.8); }
.cs-diagonal__card:hover::before,
.cs-diagonal__card:focus-within::before { transform: scaleX(1); }

.cs-diagonal__card h3 { font-size: var(--cs-step-1); margin-bottom: var(--cs-space-1); color: var(--cs-accent); }
.cs-diagonal__card h3 a { color: inherit; text-decoration: none; }
.cs-diagonal__card h3 a:hover { color: var(--cs-seal); }
.cs-diagonal__card p { margin: 0; font-size: var(--cs-step--1); color: var(--cs-muted); }

/* --- Corner wedge ---------------------------------------------------- */

/* The reference plants a hard triangle of brand colour in the corner of the
   hero and again behind the publication rail. Same device, brass instead. */
.cs-wedge {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	background: var(--cs-gradient);
	clip-path: polygon(100% 0, 100% 100%, 0 0);
	opacity: .92;
}

.cs-wedge--tr { top: 0; right: 0; width: clamp(12rem, 26vw, 30rem); aspect-ratio: 1.6 / 1; }
.cs-wedge--bl { bottom: 0; left: 0; width: clamp(10rem, 22vw, 26rem); aspect-ratio: 1.6 / 1; clip-path: polygon(0 100%, 0 0, 100% 100%); }
.cs-wedge--ghost { background: color-mix(in srgb, var(--cs-seal) 20%, transparent); }

/* --- Slanted section edges ------------------------------------------ */

.cs-band--slant-top {
	clip-path: var(--cs-cut-top);
	margin-top: -1px;
	padding-top: calc(var(--cs-space-5) + 4.5vw);
}

.cs-band--slant-bottom {
	clip-path: var(--cs-cut-bottom);
	margin-bottom: -1px;
	padding-bottom: calc(var(--cs-space-5) + 4.5vw);
}

.cs-band--slant-both {
	clip-path: polygon(0 4.5vw, 100% 0, 100% calc(100% - 4.5vw), 0 100%);
	padding-block: calc(var(--cs-space-5) + 4.5vw);
}

/* --- Deep panel ------------------------------------------------------ */

.cs-band--deep {
	background: var(--cs-gradient-deep);
	color: var(--cs-accent-ink);
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.cs-band--deep h1,
.cs-band--deep h2,
.cs-band--deep h3,
.cs-band--deep h4 { color: var(--cs-accent-ink); }
.cs-band--deep p { color: color-mix(in srgb, var(--cs-accent-ink) 78%, transparent); }
.cs-band--deep .cs-eyebrow { color: var(--cs-glow); }
.cs-band--deep .cs-stat__figure { color: var(--cs-glow); }

/* A hairline gold rule reading across the top of a deep panel, so the band
   announces itself before any type arrives. */
.cs-band--deep::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: var(--cs-gradient);
	z-index: 1;
}

/* A slanted band already announces itself with its edge, and the straight
   rule would be sliced into a wedge by the clip. */
.cs-band--slant-top::before,
.cs-band--slant-both::before { content: none; }

/* --- Rails (the carousel, without a carousel library) ---------------- */

/* Native scroll-snap rather than Swiper: it drags on touch for free, keeps
   keyboard focus order intact, and degrades to a plain scroller with
   JavaScript off. */
.cs-rail { position: relative; }

.cs-rail__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Room for the card lift and its shadow, which would otherwise clip. */
	padding: .75rem .25rem 1.5rem;
	margin: -.75rem -.25rem -1.5rem;
}

.cs-rail__viewport::-webkit-scrollbar { display: none; }

.cs-rail__track {
	display: flex;
	gap: var(--cs-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-rail__track > * {
	flex: 0 0 clamp(15rem, 27vw, 21rem);
	scroll-snap-align: start;
}

.cs-rail__controls {
	display: flex;
	align-items: center;
	gap: var(--cs-space-2);
	margin-top: var(--cs-space-3);
}

.cs-rail__btn {
	inline-size: 2.75rem;
	block-size: 2.75rem;
	flex: none;
	border-radius: 50%;
	border: 1px solid var(--cs-line-strong);
	background: var(--cs-ground);
	color: var(--cs-accent);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease;
}

.cs-rail__btn:hover:not(:disabled) {
	background: var(--cs-gradient);
	border-color: transparent;
	color: var(--cs-deep);
	transform: scale(1.08);
}

.cs-rail__btn:disabled { opacity: .3; cursor: default; }
.cs-rail__btn svg { width: 1rem; height: 1rem; }

/* Bar-style position indicator, as on the reference's publication rail. */
.cs-rail__dots {
	display: flex;
	gap: .4rem;
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
}

.cs-rail__dot {
	inline-size: 2rem;
	block-size: 3px;
	border: 0;
	padding: 0;
	background: var(--cs-line-strong);
	cursor: pointer;
	transition: background .3s ease, inline-size .3s ease;
}

.cs-rail__dot.is-active { background: var(--cs-seal); inline-size: 3.25rem; }

.cs-band--deep .cs-rail__btn,
.cs-diagonal--deep .cs-rail__btn {
	background: transparent;
	color: var(--cs-accent-ink);
	border-color: color-mix(in srgb, var(--cs-accent-ink) 35%, transparent);
}

.cs-band--deep .cs-rail__dot,
.cs-diagonal--deep .cs-rail__dot { background: color-mix(in srgb, var(--cs-accent-ink) 28%, transparent); }
.cs-band--deep .cs-rail__dot.is-active,
.cs-diagonal--deep .cs-rail__dot.is-active { background: var(--cs-glow); }

/* --- Hero: angled split ---------------------------------------------- */

.cs-hero { position: relative; }

/* The brass wedge cutting in from the right, echoing the reference hero's
   corner block without copying its colour. */
.cs-hero--angled::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 46%;
	background: var(--cs-gradient);
	clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%);
	opacity: .16;
	z-index: 0;
	pointer-events: none;
}

.cs-hero--angled .cs-hero__inner { position: relative; z-index: 1; }

/* The chevron that invites the first scroll. */
.cs-scrollcue {
	position: absolute;
	left: 50%;
	bottom: clamp(1rem, 3vw, 2.25rem);
	margin-left: -1.375rem;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--cs-accent-ink) 45%, transparent);
	background: color-mix(in srgb, var(--cs-deep) 35%, transparent);
	color: var(--cs-accent-ink);
	display: grid;
	place-items: center;
	cursor: pointer;
	z-index: 2;
	animation: cs-cue 2.4s ease-in-out infinite;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.cs-scrollcue:hover { background: var(--cs-seal); border-color: var(--cs-seal); color: var(--cs-deep); }
.cs-scrollcue svg { width: 1.1rem; height: 1.1rem; }

@keyframes cs-cue {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(6px); }
}

/* --- Photography behaviour ------------------------------------------- */

/* Images sit in a mask and grow inside it, so the card edge stays put while
   the picture moves — the reference's hover, without the layout shift. */
.cs-service-card__media,
.cs-card__media,
.cs-team-card__media {
	overflow: hidden;
	position: relative;
}

.cs-service-card__media img,
.cs-card__media img,
.cs-team-card__media img {
	display: block;
	width: 100%;
	transition: transform .7s cubic-bezier(.22,.61,.36,1);
}

.cs-service-card:hover .cs-service-card__media img,
.cs-card:hover .cs-card__media img,
.cs-team-card:hover .cs-team-card__media img { transform: scale(1.07); }

/* A wash that lifts on approach, so a grid of photographs reads as one
   system rather than as a contact sheet. */
.cs-service-card__media::after,
.cs-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 42%, color-mix(in srgb, var(--cs-deep) 62%, transparent) 100%);
	opacity: .7;
	transition: opacity .4s ease;
	pointer-events: none;
}

.cs-service-card:hover .cs-service-card__media::after,
.cs-card:hover .cs-card__media::after { opacity: .3; }

/* --- Masked heading reveal ------------------------------------------- */

/* Headings wipe up from behind a mask instead of only fading, which is what
   makes the reference's sections feel deliberate rather than loaded. */
.cs-wipe { overflow: hidden; display: block; }

.cs-wipe > * {
	display: block;
	transform: translateY(105%);
	transition: transform .75s cubic-bezier(.16, 1, .3, 1);
}

.cs-wipe.is-visible > * { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.cs-scrollcue { animation: none; }
	.cs-diagonal__bg img { transform: scale(1.12); }
	.cs-wipe > * { transform: none; }
	.cs-rail__viewport { scroll-behavior: auto; }
}

/* A deep band inherits the same inverted link and button behaviour the tone
   classes already define, so an element can be moved onto one without every
   link inside it turning navy-on-navy. */
.cs-band--deep :where(h1, h2, h3, h4, h5, h6),
.cs-band--deep a,
.cs-diagonal--deep :where(h1, h2, h3, h4, h5, h6),
.cs-diagonal--deep a { color: inherit; }

.cs-band--deep .cs-button--ghost,
.cs-diagonal--deep .cs-button--ghost {
	border-color: color-mix(in srgb, var(--cs-accent-ink) 45%, transparent);
	color: var(--cs-accent-ink);
}

.cs-band--deep .cs-button--ghost:hover,
.cs-diagonal--deep .cs-button--ghost:hover {
	background: color-mix(in srgb, var(--cs-accent-ink) 12%, transparent);
	border-color: var(--cs-glow);
}

/* The CTA band sits between two light sections and is the loudest thing on
   the page, so its heading gets the display face at full size. */
.cs-cta__title { font-size: var(--cs-step-3); }

/* Slanted bands overlap their neighbours by a hair to stop a sub-pixel seam
   showing through on fractional device pixel ratios. */
.cs-band--slant-top,
.cs-band--slant-bottom,
.cs-band--slant-both { position: relative; z-index: 1; }

/* Rails inside a section that already caps its width must still be able to
   run their cards to the edge of that measure, not of the viewport. */
.cs-services--rail .cs-rail__track > * { flex-basis: clamp(16rem, 30vw, 22rem); }
.cs-services--rail .cs-service-card { height: 100%; }
.cs-services--rail .cs-service-card__link { height: 100%; display: flex; flex-direction: column; }
.cs-services--rail .cs-service-card__cta { margin-top: auto; }

/* On a phone one card fills the rail, which is the only readable size. */
@media (max-width: 640px) {
	.cs-rail__track > * { flex-basis: min(82vw, 20rem); }
	.cs-wedge--tr, .cs-wedge--bl { display: none; }
	.cs-hero--angled::before { width: 62%; opacity: .12; }
}

/* The diagonal is far too steep at phone width — it would eat the type. Below
   the two-column breakpoint the cut flattens into a simple band. */
@media (max-width: 899px) {
	/* The cut is far too steep at phone width — it would eat the type. Below
	   the two-column breakpoint it flattens into a plain full-height band. */
	.cs-diagonal__bg,
	.cs-diagonal__wash { clip-path: none; inset: 0; }
	.cs-diagonal__card { color: var(--cs-ink); }
	.cs-band--slant-top { clip-path: polygon(0 6vw, 100% 0, 100% 100%, 0 100%); }
	.cs-band--slant-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%); }
}


/* Content on a deep band must sit above the corner wedge, which is absolutely
   positioned and would otherwise paint over a static shell. */
.cs-band--deep > .cs-shell,
.cs-band--deep > .cs-shell > * { position: relative; z-index: 1; }

/* The mask cuts flush with the text box, which is tighter than the type: at
   display sizes an accented capital rides above the box and a descender below
   it, and both get shaved. The padding gives them room and the negative
   margins hand the same space back, so nothing in the layout moves. */
.cs-wipe {
	padding-block: .16em .12em;
	/* Only the top is compensated. Setting margin-block here would overwrite
	   the heading's own bottom margin, which sets the space to the paragraph
	   under it; the extra .12em below is a couple of pixels and is left alone. */
	margin-top: -.16em;
}

/* ======================================================================
   Hero slide deck
   ----------------------------------------------------------------------
   The reference opens on a rotating headline with a thumbnail strip, arrows
   and a pause control. Same mechanism here, with one difference: the strip
   carries short labels rather than photographs, because the site runs no
   stock imagery. The assistant panel beside it never rotates — it is the
   site's call to action and has to stay where the visitor left it.
   ====================================================================== */

/* Slides stack in one grid cell, so the deck is as tall as its tallest
   headline and nothing below it moves when the slide changes. */
.cs-hero__deck { display: grid; }

.cs-hero__deck > .cs-hero__slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity .55s ease, transform .55s cubic-bezier(.16, 1, .3, 1), visibility .55s;
}

.cs-hero__deck > .cs-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* The slide leaving goes up and out, so the two never look like a crossfade
   of the same block. */
.cs-hero__deck > .cs-hero__slide.is-leaving { transform: translateY(-16px); }

/* Each line arrives a beat after the one above it. The delays only apply to
   the incoming slide, so the outgoing one leaves as a single piece. */
.cs-hero__slide > * {
	transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}

.cs-hero__deck > .cs-hero__slide:not(.is-active) > * {
	opacity: 0;
	transform: translateY(14px);
}

.cs-hero__deck > .cs-hero__slide.is-active > *  { opacity: 1; transform: none; }
.cs-hero__deck > .cs-hero__slide.is-active > *:nth-child(1) { transition-delay: .06s; }
.cs-hero__deck > .cs-hero__slide.is-active > *:nth-child(2) { transition-delay: .14s; }
.cs-hero__deck > .cs-hero__slide.is-active > *:nth-child(3) { transition-delay: .22s; }
.cs-hero__deck > .cs-hero__slide.is-active > *:nth-child(4) { transition-delay: .30s; }

/* --- The strip ------------------------------------------------------- */

.cs-hero__strip {
	grid-area: 2 / 1;
	display: flex;
	align-items: center;
	gap: var(--cs-space-1);
	margin-top: var(--cs-space-4);
	flex-wrap: wrap;
}

.cs-hero__thumbs {
	display: flex;
	gap: var(--cs-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 34rem;
}

/* Equal shares, so the strip reads as a measure of the whole rotation rather
   than as four labels of whatever width their text happened to be. */
.cs-hero__thumbs > li { flex: 1 1 0; min-width: 0; }

.cs-hero__step,
.cs-hero__toggle {
	inline-size: 2.25rem;
	block-size: 2.25rem;
	flex: none;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--cs-accent-ink) 30%, transparent);
	background: transparent;
	color: var(--cs-accent-ink);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.cs-hero__step:hover,
.cs-hero__toggle:hover {
	background: var(--cs-seal);
	border-color: var(--cs-seal);
	color: var(--cs-deep);
	transform: scale(1.08);
}

.cs-hero__step svg,
.cs-hero__toggle svg { width: .85rem; height: .85rem; }

/* One icon at a time: pause while it runs, play once it is stopped. */
.cs-hero__toggle .cs-hero__icon-play { display: none; }
.cs-hero__toggle[aria-pressed="true"] .cs-hero__icon-pause { display: none; }
.cs-hero__toggle[aria-pressed="true"] .cs-hero__icon-play { display: block; }

/* A thumb is a label over a rule that fills as its slide plays out — the
   reference's progress bar, carrying the slide's name instead of a picture. */
.cs-hero__thumb {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: .45rem 0 0;
	cursor: pointer;
	color: color-mix(in srgb, var(--cs-accent-ink) 55%, transparent);
	font-family: var(--cs-font-data);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: color .25s ease;
}

.cs-hero__thumb:hover { color: var(--cs-accent-ink); }
.cs-hero__thumb.is-active { color: var(--cs-glow); }

.cs-hero__thumb-label {
	display: block;
	margin-bottom: .5rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cs-hero__thumb-track {
	display: block;
	height: 2px;
	background: color-mix(in srgb, var(--cs-accent-ink) 22%, transparent);
	overflow: hidden;
}

.cs-hero__thumb-fill {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--cs-gradient);
	transform: scaleX(0);
	transform-origin: left;
}

/* The fill is driven by an animation rather than a transition, so restarting
   it is a matter of re-adding the class — no measuring, no timers in CSS. */
.cs-hero__thumb.is-active .cs-hero__thumb-fill {
	animation: cs-thumb-fill var(--cs-slide-time, 7000ms) linear forwards;
}

.cs-hero__thumb.is-active.is-paused .cs-hero__thumb-fill { animation-play-state: paused; }
.cs-hero__thumb.is-done .cs-hero__thumb-fill { transform: scaleX(1); }

@keyframes cs-thumb-fill {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* On a phone the arrows crowd the labels out, so the strip drops to the thumbs
   and the play/pause control — the thumbs are tappable targets themselves.
   Four equal shares of a 390px screen leaves about 80px a label, which cuts
   "TRIBUTACIÓN" off mid-word, so the thumbs go two to a row instead. The strip
   itself stops wrapping at the same time, or the toggle is pushed onto a line
   of its own below them. */
@media (max-width: 640px) {
	.cs-hero__step { display: none; }

	.cs-hero__strip { flex-wrap: nowrap; }

	.cs-hero__thumbs {
		flex-wrap: wrap;
		gap: var(--cs-space-2);
	}

	.cs-hero__thumbs > li { flex: 1 1 calc(50% - var(--cs-space-2)); }

	.cs-hero__thumb-label { font-size: .625rem; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
	.cs-hero__deck > .cs-hero__slide,
	.cs-hero__slide > * { transition: none; }
	.cs-hero__thumb.is-active .cs-hero__thumb-fill { animation: none; transform: scaleX(1); }
}

/* ======================================================================
   Second pass of motion
   ----------------------------------------------------------------------
   Everything below is driven by the same scroll observer as the reveals, so
   it costs one rAF for the whole page and stops entirely when a panel is off
   screen or the Customizer's motion switch is off.
   ====================================================================== */

/* Anything that should ride the scroll rather than sit still. The observer
   only ever writes --cs-par, so a layer opts in by consuming it. */
.cs-drift { transform: translate3d(0, var(--cs-par, 0px), 0); will-change: transform; }

/* Reveals gain a sideways component: a card on the left of its row arrives
   from the left, one on the right from the right, and a centred block still
   simply rises. The offset is small on purpose — it should read as weight,
   not as a slideshow. */
.cs-reveal--left  { transform: translate3d(-22px, 14px, 0); }
.cs-reveal--right { transform: translate3d(22px, 14px, 0); }
.cs-reveal--left.is-visible,
.cs-reveal--right.is-visible { transform: none; }

/* A sweep of light crosses the primary button on approach, which is the one
   piece of decoration the design spends on a call to action. */
.cs-button--seal { position: relative; overflow: hidden; }

.cs-button--seal::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 -60%;
	width: 45%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
	transform: skewX(-18deg);
	pointer-events: none;
	transition: left .55s cubic-bezier(.22, .61, .36, 1);
}

.cs-button--seal:hover::after,
.cs-button--seal:focus-visible::after { left: 115%; }

/* The rule under a section heading draws itself in as the heading arrives. */
.cs-section__head::after,
.cs-services__head::after {
	content: "";
	display: block;
	height: 2px;
	width: 4.5rem;
	margin-top: var(--cs-space-2);
	background: var(--cs-gradient);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .7s cubic-bezier(.16, 1, .3, 1) .2s;
}

.cs-section__head.is-visible::after,
.cs-services__head.is-visible::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
	.cs-drift { transform: none; }
	.cs-reveal--left,
	.cs-reveal--right { transform: none; }
	.cs-button--seal::after { display: none; }
	.cs-section__head::after,
	.cs-services__head::after { transform: scaleX(1); transition: none; }
}

/* Entry meta ---------------------------------------------------------- */

.cs-entry__meta .cs-entry__sep { opacity: .45; margin-inline: .45em; }
.cs-entry__meta a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--cs-line-strong); }
.cs-entry__meta a:hover { color: var(--cs-seal); border-bottom-color: var(--cs-seal); }

/* Nav baseline ---------------------------------------------------------

   A parent item's caret lives in an inline-flex wrapper the script adds at
   run time. An inline-flex box sits on its line's baseline and reserves
   descender space beneath it, so that one item measures ~6px taller than a
   plain one; the flex row then centres the shorter items and their text lands
   ~1.6px below the parent's. Laying every top-level item out the same way —
   block links inside a flex item — removes the baseline from the equation and
   all four align exactly. Desktop only: below the breakpoint each item is a
   full-width tap target and must stay a block. */

@media (min-width: 861px) {
	.cs-nav__list > li { display: flex; align-items: center; }
	.cs-nav__list > li > a { display: block; }
	.cs-nav__parent { display: flex; }
}

/* ======================================================================
   Blog sidebar and post navigation
   ----------------------------------------------------------------------
   An article that ends in nothing is a dead end: the reader has to reach for
   the back button. Every entry now offers the index, its two neighbours, and
   a sidebar that stays with them through the archive as well.
   ====================================================================== */

.cs-layout__aside {
	align-self: start;
	/* Follows the reader down a long article, clearing the sticky header. */
	position: sticky;
	top: calc(var(--cs-space-5) + 5rem);
	display: grid;
	gap: var(--cs-space-4);
}

@media (max-width: 899px) {
	.cs-layout__aside { position: static; }
}

.cs-layout__aside .widget { margin: 0; }

.cs-layout__aside .widget__title {
	font-family: var(--cs-font-data);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cs-seal);
	margin: 0 0 var(--cs-space-2);
	padding-bottom: var(--cs-space-1);
	border-bottom: 1px solid var(--cs-line);
}

/* Widget lists are link lists, so they lose the bullet and gain a rule between
   rows — the same hairline the rest of the design is built from. */
.cs-layout__aside .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cs-layout__aside .widget li {
	border-bottom: 1px solid var(--cs-line);
	padding-block: .5rem;
	font-size: var(--cs-step--1);
	line-height: 1.45;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .5rem;
	align-items: baseline;
	justify-content: space-between;
}

.cs-layout__aside .widget li:last-child { border-bottom: 0; }

.cs-layout__aside .widget a {
	color: var(--cs-ink);
	text-decoration: none;
	font-weight: 600;
	transition: color .18s ease;
}

.cs-layout__aside .widget a:hover { color: var(--cs-seal); }

/* The recent-posts widget prints its date as a sibling of the link. */
.cs-layout__aside .widget .post-date {
	font-family: var(--cs-font-data);
	font-size: .625rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cs-muted);
	flex-basis: 100%;
}

/* The category count that WordPress appends in parentheses. */
.cs-layout__aside .widget li { color: var(--cs-muted); }

/* Search ------------------------------------------------------------- */

.cs-layout__aside .widget form,
.widget_search form {
	display: flex;
	gap: .4rem;
}

.widget_search :where(input[type="search"], input[type="text"]) {
	font: inherit;
	font-size: var(--cs-step--1);
	flex: 1 1 auto;
	min-width: 0;
	padding: .55rem .7rem;
	border: 1px solid var(--cs-line-strong);
	border-radius: var(--cs-radius);
	background: var(--cs-ground);
	color: var(--cs-ink);
}

.widget_search :where(input[type="search"], input[type="text"]):focus-visible {
	border-color: var(--cs-seal);
}

.widget_search button,
.widget_search input[type="submit"] {
	font: inherit;
	font-size: var(--cs-step--1);
	font-weight: 600;
	padding: .55rem .9rem;
	border: 0;
	border-radius: var(--cs-radius);
	background: var(--cs-accent);
	color: var(--cs-accent-ink);
	cursor: pointer;
	transition: background .18s ease;
}

.widget_search button:hover,
.widget_search input[type="submit"]:hover { background: var(--cs-seal); color: var(--cs-deep); }

/* The widget's own label duplicates the visible title. */
.widget_search .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Post navigation ---------------------------------------------------- */

.cs-post-nav {
	margin-top: var(--cs-space-5);
	padding-top: var(--cs-space-3);
	border-top: 1px solid var(--cs-line);
	max-width: 34rem;
}

.cs-post-nav__index {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--cs-font-data);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cs-seal);
	text-decoration: none;
	margin-bottom: var(--cs-space-3);
}

.cs-post-nav__index svg { transition: transform .2s ease; }
.cs-post-nav__index:hover { color: var(--cs-accent); }
.cs-post-nav__index:hover svg { transform: translateX(-3px); }

.cs-post-nav__siblings {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--cs-space-3);
}

@media (min-width: 620px) {
	.cs-post-nav__siblings { grid-template-columns: 1fr 1fr; }
	.cs-post-nav__item--next { text-align: right; }

	/* With only a next entry it must still sit on the right. */
	.cs-post-nav__item--next:only-child { grid-column: 2; }
}

.cs-post-nav__item .cs-eyebrow { margin-bottom: .35rem; }

.cs-post-nav__item a {
	color: var(--cs-accent);
	text-decoration: none;
	font-family: var(--cs-font-head);
	font-weight: 600;
	line-height: 1.3;
	display: block;
	transition: color .18s ease;
}

.cs-post-nav__item a:hover { color: var(--cs-seal); }

/* Archive head ------------------------------------------------------- */

/* The blog index gets the same gold rule the section heads carry, so it reads
   as part of the same system rather than as a bare WordPress archive. */
.cs-archive__head { margin-bottom: var(--cs-space-4); }

/* Social links in the main menu ---------------------------------------

   The nav holds two groups now, so it becomes the flex row and the menu list
   stops being the only thing in it. The separator is a border on the social
   list rather than a pseudo-element: inside a flex container a ::before would
   become a flex item of its own and pick up the icon gap. */

.cs-nav { display: flex; align-items: center; gap: var(--cs-space-3); }

.cs-social--nav {
	padding-left: var(--cs-space-3);
	border-left: 1px solid var(--cs-line-strong);
	gap: .1rem;
}

.cs-social--nav .cs-social__link {
	color: var(--cs-muted);
	width: 2.125rem;
	height: 2.125rem;
	transition: color .18s ease, transform .18s ease;
}

.cs-social--nav .cs-social__link:hover {
	color: var(--cs-seal);
	transform: translateY(-2px);
}

.cs-social--nav .cs-social__icon { width: 1.0625rem; height: 1.0625rem; }

/* The header condenses on scroll; the icons come with it. */
.cs-header.is-stuck .cs-social--nav .cs-social__link { width: 2rem; height: 2rem; }

@media (max-width: 860px) {
	/* Open, the nav is a stacked panel: the menu, then a full-width rule, then
	   the icons. The separator turns from a vertical rule into a horizontal one
	   so it still reads as the same divide. */
	.cs-nav { display: none; }

	.cs-nav.is-open {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.cs-nav__list { width: 100%; }

	.cs-social--nav {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid var(--cs-line);
		padding-top: var(--cs-space-2);
		margin-top: var(--cs-space-2);
		gap: .25rem;
	}

	.cs-social--nav .cs-social__link { width: 2.75rem; height: 2.75rem; }
	.cs-social--nav .cs-social__icon { width: 1.25rem; height: 1.25rem; }
}

/* ======================================================================
   Service pages
   ----------------------------------------------------------------------
   A service is a thing someone is deciding whether to buy, so the page is
   built as an answer to that decision: what it is, what is included, how it
   runs, and who else could help. The icon grid is generated from the bullet
   list the editor already writes — no custom fields, no per-service markup.
   ====================================================================== */

.cs-service { max-width: 58rem; }

.cs-service__head {
	padding-bottom: var(--cs-space-4);
	margin-bottom: var(--cs-space-5);
	border-bottom: 1px solid var(--cs-line);
}

.cs-service__title {
	font-family: var(--cs-font-display);
	font-weight: 700;
	font-size: var(--cs-step-4);
	margin-bottom: var(--cs-space-2);
}

.cs-service__lead {
	font-size: var(--cs-step-1);
	line-height: 1.5;
	color: var(--cs-muted);
	max-width: 42ch;
	margin-bottom: var(--cs-space-3);
}

.cs-service__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cs-space-2);
}

.cs-service__body { max-width: 40rem; }
.cs-service__body > *:last-child { margin-bottom: 0; }

.cs-service__section { margin-top: var(--cs-space-5); }

.cs-service__section-title {
	font-family: var(--cs-font-data);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cs-seal);
	margin-bottom: var(--cs-space-3);
	padding-bottom: var(--cs-space-1);
	border-bottom: 1px solid var(--cs-line);
}

/* --- What the service includes --------------------------------------- */

.cs-service__grid {
	display: grid;
	gap: var(--cs-space-2);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-service__item {
	display: flex;
	align-items: flex-start;
	gap: var(--cs-space-2);
	padding: var(--cs-space-3);
	border: 1px solid var(--cs-line);
	background: var(--cs-surface);
	transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.cs-service__item:hover {
	border-color: color-mix(in srgb, var(--cs-seal) 55%, transparent);
	transform: translateY(-3px);
	box-shadow: 0 14px 34px -24px rgba(8, 15, 31, .55);
}

/* The icon sits in a square of its own so the labels align on one edge
   whether they run to one line or three. */
.cs-service__icon {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 1px solid var(--cs-line-strong);
	color: var(--cs-seal);
	background: var(--cs-ground);
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.cs-service__item:hover .cs-service__icon {
	background: var(--cs-gradient);
	border-color: transparent;
	color: var(--cs-deep);
}

.cs-icon { width: 1.375rem; height: 1.375rem; display: block; }

.cs-service__item-label {
	font-family: var(--cs-font-head);
	font-weight: 600;
	line-height: 1.35;
	align-self: center;
	color: var(--cs-accent);
}

/* --- How the work runs ------------------------------------------------ */

.cs-service__steps {
	display: grid;
	gap: var(--cs-space-3);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.cs-service__step {
	padding-top: var(--cs-space-2);
	border-top: 2px solid var(--cs-line-strong);
}

/* The step number is the only place a figure appears on this page, so it
   takes the mono face the rest of the design reserves for data. */
.cs-service__step-num {
	display: block;
	font-family: var(--cs-font-data);
	font-size: .75rem;
	letter-spacing: .12em;
	color: var(--cs-seal);
	margin-bottom: var(--cs-space-1);
}

.cs-service__step-title {
	font-size: var(--cs-step-1);
	margin-bottom: .4rem;
}

.cs-service__step p {
	margin: 0;
	font-size: var(--cs-step--1);
	color: var(--cs-muted);
	line-height: 1.55;
}

/* --- The other services ----------------------------------------------- */

.cs-service__other-list {
	display: grid;
	gap: var(--cs-space-3);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-service__other { border-left: 2px solid var(--cs-line-strong); padding-left: var(--cs-space-2); }

.cs-service__other h3 { font-size: var(--cs-step-1); margin-bottom: .35rem; }

.cs-service__other a {
	color: var(--cs-accent);
	text-decoration: none;
	transition: color .18s ease;
}

.cs-service__other a:hover { color: var(--cs-seal); }

.cs-service__other p {
	margin: 0;
	font-size: var(--cs-step--1);
	color: var(--cs-muted);
	line-height: 1.5;
}

/* The assistant button is a <button>, so it needs the anchor's own metrics to
   sit level with the quote button beside it. */
.cs-service__actions .cs-button--ghost {
	font: inherit;
	font-size: var(--cs-step--1);
	font-weight: 600;
	cursor: pointer;
}

/* Who the service is for --------------------------------------------- */

.cs-service__fits {
	display: grid;
	gap: var(--cs-space-2);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-service__fits li {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	line-height: 1.5;
	font-size: var(--cs-step--1);
	padding-bottom: var(--cs-space-2);
	border-bottom: 1px solid var(--cs-line);
}

.cs-service__tick {
	flex: none;
	color: var(--cs-seal);
	/* Nudged to the cap height of the first line rather than its box top. */
	margin-top: .18em;
}

/* Hero photography ----------------------------------------------------
   The rotating headline can carry a picture behind it. Every slide owns a
   layer; they are stacked and cross-faded by the same code that moves the
   words, so the image changes with the headline rather than after it. */

.cs-hero__bgs {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.cs-hero__bg {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .9s ease;
}

.cs-hero__bg.is-active { opacity: 1; }

/* Oversized and drifting, so a portada that sits still for seven seconds is
   never a completely static picture. */
.cs-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.08);
	transition: transform 8s linear;
}

.cs-hero__bg.is-active img { transform: scale(1.14); }

/* The scrim is what makes the type readable. Heaviest on the left where the
   headline sits, lighter on the right so the picture is actually seen, and
   never clear enough to lose the brand navy underneath. */
.cs-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(100deg,
		color-mix(in srgb, var(--cs-accent) 95%, transparent) 0%,
		color-mix(in srgb, var(--cs-accent) 82%, transparent) 44%,
		color-mix(in srgb, var(--cs-deep) 58%, transparent) 100%);
}

/* The assistant panel sits over the photograph, so it needs a little more
   body than it does over flat navy. */
.cs-hero--photo .cs-ask__panel {
	background: color-mix(in srgb, var(--cs-deep) 46%, transparent);
	border-color: color-mix(in srgb, #FFF 22%, transparent);
}

/* Angled heroes already raise their inner column; this covers the rest. */
.cs-hero--photo .cs-hero__inner { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
	.cs-hero__bg { transition: none; }
	.cs-hero__bg img,
	.cs-hero__bg.is-active img { transition: none; transform: scale(1.08); }
}

/* Offices beside the contact form ------------------------------------- */

/* The firm answers from more than one city, so the form's sidebar lists them
   under the shared details rather than repeating a single address. */
.cs-offices {
	margin-top: var(--cs-space-3);
	padding-top: var(--cs-space-3);
	border-top: 1px solid var(--cs-line);
}

.cs-offices__title {
	margin: 0 0 var(--cs-space-2);
	font-family: var(--cs-font-data);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cs-muted);
}

.cs-offices__item + .cs-offices__item { margin-top: var(--cs-space-2); }

.cs-offices__city {
	display: block;
	font-family: var(--cs-font-head);
	font-weight: 600;
	color: var(--cs-accent);
}

.cs-offices__line {
	display: block;
	font-size: var(--cs-step--1);
	color: var(--cs-muted);
}

a.cs-offices__line { color: var(--cs-accent); text-decoration: none; }
a.cs-offices__line:hover { text-decoration: underline; }