/**
 * Caltrop Defense — core theme styles
 *
 * Sections
 *   1.  Tokens and root
 *   2.  Base elements
 *   3.  Accessibility helpers
 *   4.  Layout, sections and rhythm
 *   5.  Brand geometry (tri-vector motifs, grids, edges)
 *   6.  Buttons and links
 *   7.  Cards, tiles and panels
 *   8.  Eyebrows, headings and text utilities
 *   9.  Homepage and pattern components
 *   10. Light sections
 *   11. Blog, archive and single post
 *   12. Contact, forms and legal
 *   13. Motion and reveal
 *   14. Responsive corrections
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens and root
 * ------------------------------------------------------------------ */

:root {
	--cds-radius-sm: 3px;
	--cds-radius-md: 6px;
	--cds-radius-lg: 10px;

	--cds-line-soft: rgba(255, 255, 255, 0.08);
	--cds-line: rgba(255, 255, 255, 0.12);
	--cds-line-strong: rgba(255, 255, 255, 0.2);
	--cds-line-dark: rgba(14, 20, 27, 0.12);

	--cds-blue: var(--wp--preset--color--blue, #0061fc);
	--cds-blue-bright: var(--wp--preset--color--blue-bright, #2f86ff);
	--cds-cyan: var(--wp--preset--color--cyan, #57d7ff);
	--cds-base: var(--wp--preset--color--base, #0b0f14);
	--cds-surface: var(--wp--preset--color--surface, #11161c);
	--cds-raised: var(--wp--preset--color--surface-raised, #171e26);
	--cds-gunmetal: var(--wp--preset--color--gunmetal, #353b44);
	--cds-contrast: var(--wp--preset--color--contrast, #f7f7f7);
	--cds-muted: var(--wp--preset--color--muted, #9fadbd);
	--cds-ink: var(--wp--preset--color--ink, #0e141b);

	--cds-dur-fast: 140ms;
	--cds-dur: 240ms;
	--cds-dur-slow: 420ms;
	--cds-ease: cubic-bezier(0.16, 0.84, 0.44, 1);

	--cds-header-h: 78px;
	--cds-header-h-scrolled: 66px;

	--cds-shell: 1240px;
	--cds-gutter: clamp(1.25rem, 5vw, 3rem);

	/* The Caltrop tri-vector glyph, used as a bullet and section marker. */
	--cds-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%232f86ff'%3E%3Cpath d='M12 2.2 15.1 10.4 12 8.7 8.9 10.4Z'/%3E%3Cpath d='M12 2.2 15.1 10.4 12 8.7 8.9 10.4Z' transform='rotate(120 12 12.6)'/%3E%3Cpath d='M12 2.2 15.1 10.4 12 8.7 8.9 10.4Z' transform='rotate(240 12 12.6)'/%3E%3C/g%3E%3C/svg%3E");
	--cds-glyph-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%230061fc'%3E%3Cpath d='M12 2.2 15.1 10.4 12 8.7 8.9 10.4Z'/%3E%3Cpath d='M12 2.2 15.1 10.4 12 8.7 8.9 10.4Z' transform='rotate(120 12 12.6)'/%3E%3Cpath d='M12 2.2 15.1 10.4 12 8.7 8.9 10.4Z' transform='rotate(240 12 12.6)'/%3E%3C/g%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ *
 * 2. Base elements
 * ------------------------------------------------------------------ */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
}

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

img,
svg,
video,
canvas {
	max-width: 100%;
	height: auto;
}

::selection {
	background: rgba(0, 97, 252, 0.35);
	color: #fff;
}

hr.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--cds-line-soft);
	opacity: 1;
}

/* Display type sits slightly wider than the body face, echoing the
   squared-off CALTROP wordmark. */
h1,
h2,
.cds-display {
	font-stretch: 108%;
}

/* ------------------------------------------------------------------ *
 * 3. Accessibility helpers
 * ------------------------------------------------------------------ */

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 10000;
	padding: 0.85rem 1.35rem;
	background: var(--cds-blue);
	color: #fff;
	font-weight: 600;
	font-size: 0.9375rem;
	border-radius: var(--cds-radius-sm);
	text-decoration: none;
	transition: top var(--cds-dur) var(--cds-ease);
}

.skip-link:focus {
	top: 1rem;
}

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

.screen-reader-text:focus {
	background-color: #fff;
	border-radius: 3px;
	clip: auto !important;
	clip-path: none;
	color: #111;
	display: block;
	font-size: 0.875rem;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--cds-cyan);
	outline-offset: 3px;
	border-radius: 2px;
}

.cds-section--light :where(a, button, input, select, textarea, summary):focus-visible {
	outline-color: var(--cds-blue);
}

/* ------------------------------------------------------------------ *
 * 4. Layout, sections and rhythm
 * ------------------------------------------------------------------ */

.cds-site-main {
	display: block;
	min-height: 40vh;
}

/* Section blocks are core group blocks carrying these classes. */
.cds-section {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

.cds-section > :where(.wp-block-group__inner-container, *) {
	position: relative;
	z-index: 1;
}

.cds-section--tight {
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.cds-section--pad {
	padding-block: clamp(3.5rem, 7vw, 6rem);
}

.cds-section--pad-lg {
	padding-block: clamp(4.5rem, 9vw, 8rem);
}

/* Vertical hairline that ties stacked sections together. */
.cds-section--seam::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cds-line-soft) 18%, var(--cds-line-soft) 82%, transparent);
	z-index: 0;
}

/* Angled transition between a dark section and the one below it. */
.cds-section--bevel-bottom {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.75vw), 0 100%);
	padding-bottom: calc(clamp(3.5rem, 7vw, 6rem) + 2.75vw);
}

.cds-section--bevel-top {
	clip-path: polygon(0 2.75vw, 100% 0, 100% 100%, 0 100%);
	padding-top: calc(clamp(3.5rem, 7vw, 6rem) + 2.75vw);
}

.cds-shell {
	width: 100%;
	max-width: var(--cds-shell);
	margin-inline: auto;
}

/* Grid helpers used by patterns. Columns collapse predictably. */
.cds-grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
}

.cds-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cds-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cds-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Core columns used as card rows keep equal heights. */
.cds-cards.wp-block-columns {
	align-items: stretch;
}

.cds-cards.wp-block-columns > .wp-block-column {
	display: flex;
	flex-direction: column;
}

/* ------------------------------------------------------------------ *
 * 5. Brand geometry
 * ------------------------------------------------------------------ */

/* Fine engineering grid, barely visible, used behind hero and CTA bands. */
.cds-bg-grid::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(159, 173, 189, 0.055) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(159, 173, 189, 0.055) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 78%);
}

/* Wide, slow blue field behind hero-scale sections. */
.cds-bg-field::before {
	content: "";
	position: absolute;
	inset: -30% -10% auto -10%;
	height: 130%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(48rem 32rem at 72% 18%, rgba(0, 97, 252, 0.22), transparent 62%),
		radial-gradient(36rem 28rem at 12% 82%, rgba(87, 215, 255, 0.09), transparent 65%);
}

.cds-bg-field--left::before {
	background:
		radial-gradient(42rem 30rem at 18% 22%, rgba(0, 97, 252, 0.18), transparent 62%),
		radial-gradient(32rem 26rem at 88% 78%, rgba(87, 215, 255, 0.07), transparent 65%);
}

/* Three angled traces derived from the mark's 120° geometry. */
.cds-bg-traces::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.5;
	background-image:
		linear-gradient(66deg, transparent calc(50% - 0.5px), rgba(47, 134, 255, 0.16) 50%, transparent calc(50% + 0.5px)),
		linear-gradient(-66deg, transparent calc(50% - 0.5px), rgba(47, 134, 255, 0.1) 50%, transparent calc(50% + 0.5px));
	background-size: 46% 100%, 62% 100%;
	background-position: 8% 0, 96% 0;
	background-repeat: no-repeat;
}

/* Blue edge light along the top of a band. */
.cds-edge-top {
	box-shadow: inset 0 1px 0 0 rgba(47, 134, 255, 0.45);
}

.cds-edge-left {
	border-left: 2px solid var(--cds-blue);
}

/* Small tri-vector marker for section labels and list bullets. */
.cds-glyph {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-image: var(--cds-glyph);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	flex: none;
}

/* Marked lists: replaces default bullets with the Caltrop glyph. */
.cds-list ul,
ul.cds-list {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.cds-list ul li,
ul.cds-list li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.7rem;
}

.cds-list ul li::before,
ul.cds-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 0.85em;
	height: 0.85em;
	background-image: var(--cds-glyph);
	background-size: contain;
	background-repeat: no-repeat;
}

.cds-section--light .cds-list ul li::before,
.cds-section--light ul.cds-list li::before {
	background-image: var(--cds-glyph-dark);
}

/* Checked lists for outcome/benefit copy. */
.cds-list--check ul li::before,
ul.cds-list--check li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f86ff' stroke-width='2.4'%3E%3Cpath d='M4 12.6 9.4 18 20 6.6'/%3E%3C/svg%3E");
	top: 0.34em;
	width: 0.95em;
	height: 0.95em;
}

.cds-section--light .cds-list--check ul li::before,
.cds-section--light ul.cds-list--check li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230061fc' stroke-width='2.4'%3E%3Cpath d='M4 12.6 9.4 18 20 6.6'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ *
 * 6. Buttons and links
 * ------------------------------------------------------------------ */

.wp-block-button__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	transition:
		background-color var(--cds-dur) var(--cds-ease),
		color var(--cds-dur) var(--cds-ease),
		box-shadow var(--cds-dur) var(--cds-ease),
		transform var(--cds-dur-fast) var(--cds-ease);
	text-decoration: none;
	will-change: transform;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 26px -16px rgba(0, 97, 252, 0.85);
	text-decoration: none;
}

.wp-block-button__link:active {
	transform: translateY(0);
}

/* Primary button carries a clipped corner — the one geometric tell that
   repeats from the logo through every interactive element. */
.wp-block-button:not(.is-style-outline):not(.is-style-caltrop-ghost) .wp-block-button__link {
	clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
}

.wp-block-button.is-style-caltrop-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--cds-contrast);
	border: 1px solid var(--cds-line-strong);
	clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
}

.wp-block-button.is-style-caltrop-outline .wp-block-button__link:hover,
.wp-block-button.is-style-caltrop-outline .wp-block-button__link:focus {
	background-color: rgba(47, 134, 255, 0.12);
	border-color: var(--cds-blue-bright);
	color: #fff;
}

.cds-section--light .wp-block-button.is-style-caltrop-outline .wp-block-button__link {
	color: var(--cds-ink);
	border-color: rgba(14, 20, 27, 0.22);
}

.cds-section--light .wp-block-button.is-style-caltrop-outline .wp-block-button__link:hover {
	background-color: rgba(0, 97, 252, 0.08);
	border-color: var(--cds-blue);
	color: var(--cds-ink);
}

/* Ghost button: quiet tertiary action, underline on hover only. */
.wp-block-button.is-style-caltrop-ghost .wp-block-button__link {
	background: transparent;
	color: var(--cds-blue-bright);
	padding-inline: 0;
	padding-block: 0.35rem;
	font-weight: 600;
}

.wp-block-button.is-style-caltrop-ghost .wp-block-button__link:hover {
	color: var(--cds-cyan);
	transform: none;
	box-shadow: none;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Inline "more" links inside cards and body copy. */
.cds-link-more,
.cds-link-more a {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--cds-blue-bright);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.cds-link-more::after,
.cds-link-more a::after {
	content: "";
	width: 1.1rem;
	height: 1px;
	background: currentColor;
	transition: width var(--cds-dur) var(--cds-ease);
}

.cds-link-more:hover::after,
.cds-link-more a:hover::after {
	width: 1.9rem;
}

/* ------------------------------------------------------------------ *
 * 7. Cards, tiles and panels
 * ------------------------------------------------------------------ */

.cds-card {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: clamp(1.4rem, 2.2vw, 2rem);
	background: linear-gradient(162deg, rgba(23, 30, 38, 0.96) 0%, rgba(11, 15, 20, 0.96) 100%);
	border: 1px solid var(--cds-line-soft);
	border-radius: var(--cds-radius-md);
	transition:
		border-color var(--cds-dur) var(--cds-ease),
		transform var(--cds-dur) var(--cds-ease),
		box-shadow var(--cds-dur) var(--cds-ease);
}

/* Corner bracket: two hairlines meeting at the top-right of every card. */
.cds-card::before {
	content: "";
	position: absolute;
	top: -1px;
	right: -1px;
	width: 26px;
	height: 26px;
	border-top: 2px solid rgba(47, 134, 255, 0.55);
	border-right: 2px solid rgba(47, 134, 255, 0.55);
	border-top-right-radius: var(--cds-radius-md);
	transition: width var(--cds-dur) var(--cds-ease), height var(--cds-dur) var(--cds-ease), border-color var(--cds-dur) var(--cds-ease);
	pointer-events: none;
}

.cds-card:hover,
.cds-card:focus-within {
	border-color: rgba(47, 134, 255, 0.4);
	transform: translateY(-3px);
	box-shadow: 0 26px 50px -34px rgba(0, 97, 252, 0.75);
}

.cds-card:hover::before,
.cds-card:focus-within::before {
	width: 42px;
	height: 42px;
	border-color: var(--cds-cyan);
}

.cds-card :where(h2, h3, h4, h5) {
	margin: 0;
}

.cds-card p {
	margin: 0;
	color: var(--cds-muted);
	font-size: 0.9688rem;
	line-height: 1.62;
}

.cds-card .cds-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -0.012em;
	line-height: 1.25;
	color: var(--cds-contrast);
}

.cds-card .cds-card__title a {
	color: inherit;
	text-decoration: none;
}

/* The title link covers the whole card so the entire surface is clickable,
   while assistive technology still sees exactly one link. */
.cds-card--linked .cds-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.cds-card .cds-link-more {
	margin-top: auto;
	padding-top: 0.6rem;
}

.cds-card--quiet::before {
	display: none;
}

.cds-card--flat {
	background: rgba(255, 255, 255, 0.02);
}

/* Icon tile: angular container for the service SVG icons. */
.cds-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex: none;
	color: var(--cds-blue-bright);
	background: radial-gradient(circle at 32% 26%, rgba(47, 134, 255, 0.2), rgba(47, 134, 255, 0.05) 70%);
	border: 1px solid rgba(47, 134, 255, 0.28);
	clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
	transition: color var(--cds-dur) var(--cds-ease), background var(--cds-dur) var(--cds-ease);
}

.cds-icon svg {
	width: 26px;
	height: 26px;
	display: block;
}

.cds-card:hover .cds-icon {
	color: var(--cds-cyan);
	background: radial-gradient(circle at 32% 26%, rgba(87, 215, 255, 0.26), rgba(0, 97, 252, 0.08) 70%);
}

.cds-icon--sm {
	width: 40px;
	height: 40px;
	clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}

.cds-icon--sm svg {
	width: 20px;
	height: 20px;
}

.cds-icon--lg {
	width: 64px;
	height: 64px;
}

.cds-icon--lg svg {
	width: 32px;
	height: 32px;
}

/* Panel: a large surface used for diagrams, forms and feature blocks. */
.cds-panel {
	position: relative;
	background: linear-gradient(160deg, rgba(23, 30, 38, 0.92), rgba(11, 15, 20, 0.94));
	border: 1px solid var(--cds-line-soft);
	border-radius: var(--cds-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.75rem);
	overflow: hidden;
}

.cds-panel--edge {
	box-shadow: inset 0 1px 0 0 rgba(47, 134, 255, 0.35);
}

.cds-panel--tight {
	padding: clamp(1.1rem, 2vw, 1.75rem);
}

/* Figure wrapper for inline hero/section SVG graphics. */
.cds-figure {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
}

.cds-figure svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* ------------------------------------------------------------------ *
 * 8. Eyebrows, headings and text utilities
 * ------------------------------------------------------------------ */

.cds-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.9rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--cds-blue-bright);
}

.cds-eyebrow::before {
	content: "";
	width: 0.95em;
	height: 0.95em;
	flex: none;
	background-image: var(--cds-glyph);
	background-size: contain;
	background-repeat: no-repeat;
}

.cds-section--light .cds-eyebrow {
	color: var(--cds-blue);
}

.cds-section--light .cds-eyebrow::before {
	background-image: var(--cds-glyph-dark);
}

.cds-lede {
	font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
	line-height: 1.66;
	color: var(--cds-muted);
	max-width: 62ch;
}

.cds-muted {
	color: var(--cds-muted);
}

.cds-measure {
	max-width: 68ch;
}

.cds-balance {
	text-wrap: balance;
}

.cds-kicker {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	color: var(--cds-muted);
}

/* Section heading rule: a short blue bar aligned to the heading baseline. */
.cds-rule {
	position: relative;
	padding-top: 1.1rem;
}

.cds-rule::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 2px;
	background: linear-gradient(90deg, var(--cds-blue), rgba(87, 215, 255, 0.15));
}

.has-text-align-center.cds-rule::before {
	left: 50%;
	transform: translateX(-50%);
}

/* ------------------------------------------------------------------ *
 * 9. Homepage and pattern components
 * ------------------------------------------------------------------ */

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

.cds-hero {
	position: relative;
	padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3.5rem, 7vw, 6rem);
}

.cds-hero__title {
	max-width: 15ch;
}

.cds-hero .cds-lede {
	max-width: 54ch;
}

.cds-hero__actions {
	margin-top: 2rem;
}

/* Assurance row under the hero copy — plain statements, no metrics. */
.cds-hero__assurance {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 1.5rem;
	margin-top: 2.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--cds-line-soft);
	font-size: 0.9375rem;
	color: var(--cds-muted);
}

.cds-hero__assurance span {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.cds-hero__assurance span::before {
	content: "";
	width: 0.8em;
	height: 0.8em;
	background-image: var(--cds-glyph);
	background-size: contain;
	background-repeat: no-repeat;
}

/* Positioning strip -------------------------------------------------- */

.cds-strip {
	border-top: 1px solid var(--cds-line-soft);
	border-bottom: 1px solid var(--cds-line-soft);
	background: rgba(255, 255, 255, 0.015);
}

.cds-strip__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cds-strip__item {
	padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1rem, 2vw, 1.75rem);
	border-left: 1px solid var(--cds-line-soft);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cds-strip__item:first-child {
	border-left: 0;
}

.cds-strip__item h3,
.cds-strip__item .cds-strip__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.008em;
	margin: 0;
	color: var(--cds-contrast);
}

.cds-strip__item p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--cds-muted);
}

/* Split feature (text + graphic) ------------------------------------- */

.cds-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.cds-split--wide-left {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.cds-split--wide-right {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}

.cds-split--top {
	align-items: start;
}

/* Layer list used by the defense-in-depth section. */
.cds-layers {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cds-layers li {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	padding: 0.85rem 1rem;
	border: 1px solid transparent;
	border-radius: var(--cds-radius-sm);
	transition: background var(--cds-dur) var(--cds-ease), border-color var(--cds-dur) var(--cds-ease);
}

.cds-layers li:hover {
	background: rgba(47, 134, 255, 0.06);
	border-color: rgba(47, 134, 255, 0.22);
}

.cds-layers strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	letter-spacing: -0.008em;
	color: var(--cds-contrast);
}

.cds-layers span {
	font-size: 0.9375rem;
	color: var(--cds-muted);
	line-height: 1.55;
}

/* Process — a genuine sequence, so it is numbered. */
.cds-process {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	counter-reset: cds-step;
}

.cds-process__step {
	position: relative;
	counter-increment: cds-step;
	padding: 2.25rem 1.5rem 1.75rem;
	border-left: 1px solid var(--cds-line-soft);
}

.cds-process__step:first-child {
	border-left: 0;
	padding-left: 0;
}

.cds-process__step::before {
	content: counter(cds-step, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 1.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--cds-blue-bright);
}

.cds-process__step:first-child::before {
	left: 0;
}

.cds-process__step::after {
	content: "";
	position: absolute;
	top: 0.42rem;
	left: 3.4rem;
	right: 1.5rem;
	height: 1px;
	background: linear-gradient(90deg, rgba(47, 134, 255, 0.5), transparent);
}

.cds-process__step:first-child::after {
	left: 1.9rem;
}

.cds-process__step h3 {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
}

.cds-process__step p {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--cds-muted);
	line-height: 1.58;
}

/* Industry tiles ----------------------------------------------------- */

.cds-industries {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--cds-line-dark);
	border: 1px solid var(--cds-line-dark);
	border-radius: var(--cds-radius-md);
	overflow: hidden;
}

.cds-industry {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1.15rem 1.25rem;
	background: #fff;
	color: var(--cds-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9688rem;
	transition: background var(--cds-dur) var(--cds-ease), color var(--cds-dur) var(--cds-ease);
}

.cds-industry svg {
	width: 22px;
	height: 22px;
	flex: none;
	color: var(--cds-blue);
	transition: color var(--cds-dur) var(--cds-ease);
}

.cds-industry:hover,
.cds-industry:focus {
	background: var(--cds-ink);
	color: #fff;
	text-decoration: none;
}

.cds-industry:hover svg,
.cds-industry:focus svg {
	color: var(--cds-cyan);
}

/* Dark variant of the same grid, used on service pages. */
.cds-industries--dark {
	background: var(--cds-line-soft);
	border-color: var(--cds-line-soft);
}

.cds-industries--dark .cds-industry {
	background: var(--cds-surface);
	color: var(--cds-contrast);
}

.cds-industries--dark .cds-industry svg {
	color: var(--cds-blue-bright);
}

.cds-industries--dark .cds-industry:hover {
	background: rgba(47, 134, 255, 0.14);
}

/* Feature rows with an icon column ------------------------------------ */

.cds-feature-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.cds-feature {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: 1.1rem;
	align-items: start;
}

.cds-feature h3,
.cds-feature h4 {
	margin: 0 0 0.4rem;
	font-size: 1.0625rem;
	letter-spacing: -0.008em;
}

.cds-feature p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--cds-muted);
}

/* Contact card ------------------------------------------------------- */

.cds-contact-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(1.75rem, 4vw, 3.5rem);
	padding: clamp(1.5rem, 3.5vw, 3rem);
	background:
		linear-gradient(150deg, rgba(0, 97, 252, 0.16) 0%, rgba(11, 15, 20, 0.2) 46%),
		linear-gradient(160deg, #131b25, #0b0f14);
	border: 1px solid rgba(47, 134, 255, 0.28);
	border-radius: var(--cds-radius-lg);
	box-shadow: 0 40px 90px -50px rgba(0, 97, 252, 0.8);
	overflow: hidden;
}

.cds-contact-card::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(159, 173, 189, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(159, 173, 189, 0.05) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: linear-gradient(120deg, #000 0%, transparent 55%);
	-webkit-mask-image: linear-gradient(120deg, #000 0%, transparent 55%);
}

.cds-contact-card > * {
	position: relative;
	z-index: 1;
}

.cds-contact-card__aside :where(h2, h3) {
	margin-top: 0;
}

/* Final CTA band ----------------------------------------------------- */

.cds-cta-band {
	position: relative;
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
	background: linear-gradient(140deg, #0a1626 0%, #0b0f14 58%);
	border-top: 1px solid rgba(47, 134, 255, 0.3);
	overflow: clip;
}

.cds-cta-band__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

.cds-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: flex-end;
}

/* Related services list ---------------------------------------------- */

.cds-related {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.cds-related__item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1rem 1.15rem;
	border: 1px solid var(--cds-line-soft);
	border-radius: var(--cds-radius-sm);
	color: var(--cds-contrast);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9688rem;
	background: rgba(255, 255, 255, 0.02);
	transition: border-color var(--cds-dur) var(--cds-ease), background var(--cds-dur) var(--cds-ease);
}

.cds-related__item:hover {
	border-color: rgba(47, 134, 255, 0.45);
	background: rgba(47, 134, 255, 0.08);
	color: #fff;
	text-decoration: none;
}

.cds-related__item svg {
	width: 22px;
	height: 22px;
	color: var(--cds-blue-bright);
	flex: none;
}

/* Breadcrumb --------------------------------------------------------- */

.cds-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	font-size: 0.875rem;
	color: var(--cds-muted);
	list-style: none;
	padding: 0;
}

.cds-breadcrumb li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.cds-breadcrumb li + li::before {
	content: "";
	width: 5px;
	height: 5px;
	background: currentColor;
	opacity: 0.5;
	transform: rotate(45deg);
}

.cds-breadcrumb a {
	color: var(--cds-muted);
	text-decoration: none;
}

.cds-breadcrumb a:hover {
	color: var(--cds-blue-bright);
	text-decoration: underline;
}

.cds-breadcrumb [aria-current="page"] {
	color: var(--cds-contrast);
}

/* Page hero for interior pages --------------------------------------- */

.cds-page-hero {
	position: relative;
	padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
	border-bottom: 1px solid var(--cds-line-soft);
}

.cds-page-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

/* ------------------------------------------------------------------ *
 * 10. Light sections
 * ------------------------------------------------------------------ */

.cds-section--light {
	background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
	color: var(--cds-ink);
}

.cds-section--light :where(h1, h2, h3, h4, h5, h6, strong) {
	color: var(--cds-ink);
}

.cds-section--light p,
.cds-section--light li {
	color: #3b4653;
}

.cds-section--light .cds-lede,
.cds-section--light .cds-muted,
.cds-section--light .cds-card p {
	color: #4a5666;
}

.cds-section--light a:not(.wp-block-button__link):not(.cds-industry) {
	color: var(--cds-blue);
}

.cds-section--light .cds-card {
	background: #fff;
	border-color: rgba(14, 20, 27, 0.1);
	box-shadow: 0 1px 2px rgba(14, 20, 27, 0.05), 0 18px 34px -30px rgba(14, 20, 27, 0.5);
}

.cds-section--light .cds-card::before {
	border-color: rgba(0, 97, 252, 0.4);
}

.cds-section--light .cds-card:hover {
	border-color: rgba(0, 97, 252, 0.35);
	box-shadow: 0 26px 46px -32px rgba(0, 97, 252, 0.5);
}

.cds-section--light .cds-icon {
	color: var(--cds-blue);
	background: rgba(0, 97, 252, 0.07);
	border-color: rgba(0, 97, 252, 0.22);
}

.cds-section--light .cds-strip,
.cds-section--light .cds-strip__item,
.cds-section--light .cds-hero__assurance,
.cds-section--light .cds-process__step {
	border-color: rgba(14, 20, 27, 0.12);
}

.cds-section--light .cds-panel {
	background: #fff;
	border-color: rgba(14, 20, 27, 0.1);
}

/* Soft dark-blue band, used to break up long stretches of black. */
.cds-section--deep {
	background: linear-gradient(180deg, #0b0f14 0%, #0d1620 45%, #0b0f14 100%);
}

.cds-section--carbon {
	background: var(--cds-surface);
}

/* ------------------------------------------------------------------ *
 * 11. Blog, archive and single post
 * ------------------------------------------------------------------ */

.cds-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: linear-gradient(162deg, rgba(23, 30, 38, 0.9), rgba(11, 15, 20, 0.95));
	border: 1px solid var(--cds-line-soft);
	border-radius: var(--cds-radius-md);
	overflow: hidden;
	transition: border-color var(--cds-dur) var(--cds-ease), transform var(--cds-dur) var(--cds-ease);
}

.cds-post-card:hover {
	border-color: rgba(47, 134, 255, 0.4);
	transform: translateY(-3px);
}

.cds-post-card .wp-block-post-featured-image {
	margin: 0;
	border-radius: 0;
}

.cds-post-card .wp-block-post-featured-image img {
	border-radius: 0;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}

.cds-post-card .wp-block-post-title {
	font-size: 1.1875rem;
	line-height: 1.28;
	margin: 0;
}

.cds-post-card .wp-block-post-title a {
	color: var(--cds-contrast);
	text-decoration: none;
}

.cds-post-card .wp-block-post-title a:hover {
	color: var(--cds-blue-bright);
}

.cds-post-card .wp-block-post-excerpt__excerpt {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--cds-muted);
}

.cds-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	font-size: 0.875rem;
	color: var(--cds-muted);
}

.cds-post-meta a {
	color: var(--cds-muted);
	text-decoration: none;
}

.cds-post-meta a:hover {
	color: var(--cds-blue-bright);
}

.wp-block-post-terms a,
.cds-term-pill {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	margin-right: 0.35rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--cds-blue-bright);
	background: rgba(47, 134, 255, 0.1);
	border: 1px solid rgba(47, 134, 255, 0.25);
	border-radius: 2px;
	text-decoration: none;
}

.wp-block-post-terms a:hover {
	background: rgba(47, 134, 255, 0.2);
	text-decoration: none;
}

/* Long-form article typography. */
.cds-article :where(p, ul, ol) {
	max-width: 72ch;
}

.cds-article :where(h2) {
	margin-top: 2.75rem;
	scroll-margin-top: calc(var(--cds-header-h) + 1.5rem);
}

.cds-article :where(h3) {
	margin-top: 2rem;
	scroll-margin-top: calc(var(--cds-header-h) + 1.5rem);
}

.cds-article img {
	border-radius: var(--cds-radius-md);
}

.cds-article figcaption {
	font-size: 0.875rem;
	color: var(--cds-muted);
}

.wp-block-post-content > * + * {
	margin-top: 1.35rem;
}

/* Pagination and search field. */
.wp-block-query-pagination {
	gap: 0.5rem;
	margin-top: 2.5rem;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .current {
	padding: 0.55rem 0.95rem;
	border: 1px solid var(--cds-line-soft);
	border-radius: var(--cds-radius-sm);
	text-decoration: none;
	color: var(--cds-contrast);
}

.wp-block-query-pagination a:hover {
	border-color: rgba(47, 134, 255, 0.5);
	background: rgba(47, 134, 255, 0.1);
}

.wp-block-query-pagination .current {
	background: var(--cds-blue);
	border-color: var(--cds-blue);
	color: #fff;
}

.wp-block-search__input {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--cds-line);
	border-radius: var(--cds-radius-sm);
	color: var(--cds-contrast);
	padding: 0.8rem 1rem;
	font-family: inherit;
	font-size: 0.9375rem;
}

.wp-block-search__input::placeholder {
	color: rgba(159, 173, 189, 0.75);
}

.wp-block-search__input:focus {
	border-color: var(--cds-blue-bright);
	outline: none;
	box-shadow: 0 0 0 3px rgba(47, 134, 255, 0.2);
}

.wp-block-search__button {
	background: var(--cds-blue);
	border: 0;
	color: #fff;
	font-weight: 600;
	padding: 0.8rem 1.25rem;
	border-radius: var(--cds-radius-sm);
	cursor: pointer;
	transition: background var(--cds-dur) var(--cds-ease);
}

.wp-block-search__button:hover {
	background: var(--cds-blue-bright);
}

.cds-section--light .wp-block-search__input {
	background: #fff;
	border-color: rgba(14, 20, 27, 0.18);
	color: var(--cds-ink);
}

/* Comments ----------------------------------------------------------- */

.wp-block-comments {
	border-top: 1px solid var(--cds-line-soft);
	padding-top: 2.5rem;
	margin-top: 3rem;
}

.wp-block-comment-author-name a {
	color: var(--cds-contrast);
	text-decoration: none;
	font-weight: 600;
}

.comment-respond :where(input[type="text"], input[type="email"], input[type="url"], textarea) {
	width: 100%;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--cds-line);
	border-radius: var(--cds-radius-sm);
	color: var(--cds-contrast);
	padding: 0.75rem 0.9rem;
	font-family: inherit;
	font-size: 0.9375rem;
}

.comment-respond label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.875rem;
	font-weight: 600;
}

.comment-respond .submit {
	background: var(--cds-blue);
	color: #fff;
	border: 0;
	border-radius: var(--cds-radius-sm);
	padding: 0.85rem 1.5rem;
	font-weight: 600;
	cursor: pointer;
}

/* ------------------------------------------------------------------ *
 * 12. Contact, forms and legal
 * ------------------------------------------------------------------ */

/* Company information block: rows hide themselves when left empty so the
   owner can fill them in later without a broken-looking layout. */
.cds-info {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cds-info__row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--cds-line-soft);
}

.cds-info__row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.cds-info__label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--cds-muted);
	margin-bottom: 0.15rem;
}

.cds-info__value {
	font-size: 1rem;
	color: var(--cds-contrast);
	line-height: 1.5;
}

.cds-info__value a {
	color: var(--cds-contrast);
	text-decoration: none;
}

.cds-info__value a:hover {
	color: var(--cds-blue-bright);
	text-decoration: underline;
}

/* Any info row whose value is blank is removed from the page by
   assets/js/caltrop.js, and hidden here as a no-JS fallback. */
.cds-info__row[data-empty="true"] {
	display: none;
}

.cds-map-slot:empty {
	display: none;
}

.cds-privacy-note {
	margin-top: 1rem;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--cds-muted);
}

/* Notice shown to administrators only when a form plugin is missing. */
.cds-form-fallback {
	border: 1px dashed rgba(47, 134, 255, 0.5);
	border-radius: var(--cds-radius-md);
	background: rgba(47, 134, 255, 0.07);
	padding: 1.25rem 1.5rem;
	font-size: 0.9375rem;
	color: var(--cds-contrast);
}

.cds-form-fallback p {
	margin: 0 0 0.5rem;
}

.cds-form-fallback p:last-child {
	margin-bottom: 0;
}

/* Legal pages -------------------------------------------------------- */

.cds-legal .wp-block-post-content :where(h2) {
	margin-top: 2.5rem;
	font-size: 1.5rem;
}

.cds-legal .wp-block-post-content :where(h3) {
	margin-top: 1.75rem;
	font-size: 1.1875rem;
}

.cds-legal .wp-block-post-content :where(p, li) {
	color: var(--cds-muted);
}

/* 404 ---------------------------------------------------------------- */

.cds-404 {
	display: grid;
	place-items: center;
	text-align: center;
	padding-block: clamp(4rem, 12vw, 8rem);
}

.cds-404__emblem {
	width: 84px;
	height: auto;
	margin-bottom: 1.75rem;
	opacity: 0.9;
}

.cds-404__code {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--cds-blue-bright);
	margin-bottom: 0.75rem;
}

/* ------------------------------------------------------------------ *
 * 13. Motion and reveal
 * ------------------------------------------------------------------ */

/* One orchestrated entrance on the hero graphic; everything else is
   triggered by the visitor's own actions. */
@keyframes cds-trace {
	from { stroke-dashoffset: var(--cds-dash, 600); }
	to { stroke-dashoffset: 0; }
}

@keyframes cds-pulse-node {
	0%, 100% { opacity: 0.35; r: 3; }
	50% { opacity: 1; r: 4.2; }
}

@keyframes cds-sweep {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes cds-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.cds-anim-trace {
	stroke-dasharray: var(--cds-dash, 600);
	stroke-dashoffset: var(--cds-dash, 600);
	animation: cds-trace 2.2s var(--cds-ease) forwards;
}

.cds-anim-node {
	animation: cds-pulse-node 3.6s ease-in-out infinite;
	transform-box: fill-box;
}

.cds-anim-sweep {
	transform-origin: center;
	animation: cds-sweep 9s linear infinite;
}

.cds-anim-fade {
	animation: cds-fade-in 1s var(--cds-ease) 0.2s both;
}

/* Reveal is opt-in per element (data-cds-reveal) rather than applied to every
   section, and it only fades — nothing slides in from offscreen. */
[data-cds-reveal] {
	opacity: 0;
	transition: opacity 700ms var(--cds-ease);
}

[data-cds-reveal].is-revealed {
	opacity: 1;
}

.cds-delay-1 { animation-delay: 0.25s; }
.cds-delay-2 { animation-delay: 0.5s; }
.cds-delay-3 { animation-delay: 0.75s; }
.cds-delay-4 { animation-delay: 1s; }

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.cds-anim-trace {
		stroke-dashoffset: 0;
	}

	.cds-card:hover,
	.cds-post-card:hover,
	.wp-block-button__link:hover {
		transform: none;
	}
}

/* ------------------------------------------------------------------ *
 * 14. Responsive corrections
 * ------------------------------------------------------------------ */

@media (max-width: 1200px) {
	.cds-related {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

	.cds-strip__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cds-strip__item:nth-child(3) {
		border-left: 0;
	}

	.cds-strip__item:nth-child(n + 3) {
		border-top: 1px solid var(--cds-line-soft);
	}

	.cds-process {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cds-process__step:nth-child(3) {
		border-left: 0;
		padding-left: 0;
	}

	.cds-process__step:nth-child(3)::before {
		left: 0;
	}

	.cds-process__step:nth-child(n + 3) {
		margin-top: 1.5rem;
	}
}

@media (max-width: 900px) {
	.cds-split,
	.cds-split--wide-left,
	.cds-split--wide-right,
	.cds-page-hero__grid,
	.cds-contact-card,
	.cds-cta-band__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.cds-cta-band__actions {
		justify-content: flex-start;
	}

	.cds-feature-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.cds-hero__title {
		max-width: 100%;
	}

	.cds-section--bevel-bottom,
	.cds-section--bevel-top {
		clip-path: none;
		padding-block: clamp(3.5rem, 7vw, 6rem);
	}
}

@media (max-width: 780px) {
	.cds-industries {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cds-related {
		grid-template-columns: minmax(0, 1fr);
	}

	.cds-process {
		grid-template-columns: minmax(0, 1fr);
	}

	.cds-process__step {
		border-left: 0;
		padding-left: 0;
		padding-top: 2rem;
		margin-top: 0;
	}

	.cds-process__step::before {
		left: 0;
	}

	.cds-process__step::after {
		left: 1.9rem;
		right: 0;
	}
}

@media (max-width: 600px) {
	.cds-strip__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cds-strip__item {
		border-left: 0;
		border-top: 1px solid var(--cds-line-soft);
	}

	.cds-strip__item:first-child {
		border-top: 0;
	}

	.cds-industries {
		grid-template-columns: minmax(0, 1fr);
	}

	.cds-hero__assurance {
		gap: 0.5rem 1rem;
	}

	.cds-card {
		padding: 1.35rem;
	}
}

@media (max-width: 430px) {
	.cds-feature {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 0.85rem;
	}

	.cds-icon {
		width: 44px;
		height: 44px;
	}

	.cds-icon svg {
		width: 22px;
		height: 22px;
	}
}

/* Print -------------------------------------------------------------- */

@media print {
	.cds-header,
	.cds-footer,
	.cds-cta-band,
	.cds-contact-card {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
	}
}

/* ==========================================================================
   15. Composed page components
   Classes used by the block patterns and by the pages the starter installer
   creates. Kept together so the section structure above stays readable.
   ========================================================================== */

/* Section variants --------------------------------------------------------- */

.cds-section--narrow > .wp-block-group__inner-container,
.cds-section--narrow {
	--cds-section-max: 820px;
}

.cds-section--narrow .cds-lead {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--light);
	max-width: 68ch;
}

.cds-section--strip {
	padding-block: var(--wp--preset--spacing--50);
	border-block-end: 1px solid var(--wp--preset--color--hairline);
}

.cds-section--contact {
	background-color: var(--wp--preset--color--surface);
	border-block: 1px solid var(--wp--preset--color--hairline);
}

.cds-section--related {
	padding-block: var(--wp--preset--spacing--60);
	border-block-start: 1px solid var(--wp--preset--color--hairline);
}

.cds-section__actions {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Positioning strip -------------------------------------------------------- */

.cds-strip {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cds-strip__item {
	position: relative;
	padding-inline-start: var(--wp--preset--spacing--30);
	border-inline-start: 2px solid var(--wp--preset--color--blue);
}

.cds-strip__title {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-block-end: 0.4em;
}

.cds-strip__item p {
	color: var(--wp--preset--color--muted);
	margin-block: 0;
}

/* Card grids --------------------------------------------------------------- */

.cds-cards {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--50);
}

.cds-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cds-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cds-cards--plain .cds-card {
	background: none;
	border: 0;
	padding-inline: 0;
}

.cds-cards--plain .cds-card::before {
	display: none;
}

.cds-card__title {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.25;
	margin-block: 0.6em 0.4em;
}

.cds-card__title a {
	color: inherit;
	text-decoration: none;
}

.cds-card__title a:hover,
.cds-card__title a:focus-visible {
	color: var(--wp--preset--color--cyan);
}

/* A whole-card click target that keeps the real link keyboard-focusable. */
.cds-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cds-card p {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	margin-block-end: 0;
}

/* Diagrams ----------------------------------------------------------------- */

.cds-graphic {
	display: block;
	width: 100%;
}

.cds-graphic svg {
	display: block;
	width: 100%;
	height: auto;
}

.cds-graphic--hero {
	max-width: 620px;
	margin-inline: auto;
}

/* Industry tiles ----------------------------------------------------------- */

.cds-industries {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	background-color: var(--wp--preset--color--hairline);
	border: 1px solid var(--wp--preset--color--hairline);
	margin-block-start: var(--wp--preset--spacing--50);
}

.cds-industries__tile {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--light);
	text-decoration: none;
	transition: background-color var(--cds-duration) var(--cds-ease), color var(--cds-duration) var(--cds-ease);
}

.cds-industries__tile:hover,
.cds-industries__tile:focus-visible {
	background-color: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--contrast);
}

.cds-industries__tile .cds-icon {
	flex: none;
}

.cds-industries__name {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
}

/* Stages (Our Approach) ---------------------------------------------------- */

.cds-stage {
	position: relative;
	max-width: 780px;
}

.cds-stage__num {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--blue);
	line-height: 1;
	margin-block-end: 0.25em;
}

.cds-stage__title {
	margin-block: 0 0.5em;
}

/* Panels ------------------------------------------------------------------- */

.cds-panel--wide {
	max-width: 780px;
	margin-inline: auto;
}

.cds-panel--note {
	border-style: dashed;
}

.cds-panel--alert {
	border-inline-start: 3px solid var(--wp--preset--color--cyan);
}

.cds-note {
	padding: var(--wp--preset--spacing--30);
	border: 1px dashed var(--wp--preset--color--hairline);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Headings with a rule ----------------------------------------------------- */

.cds-heading-rule {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: var(--wp--preset--font-size--medium);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.cds-heading-rule::after {
	content: "";
	flex: 1;
	height: 1px;
	background-color: var(--wp--preset--color--hairline);
}

/* Loops and results -------------------------------------------------------- */

.cds-loop__grid {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cds-loop__list {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.cds-result {
	padding-block-end: var(--wp--preset--spacing--30);
	border-block-end: 1px solid var(--wp--preset--color--hairline);
}

.cds-result__title {
	font-size: var(--wp--preset--font-size--medium);
	margin-block: 0 0.4em;
}

.cds-breadcrumb-bar {
	padding-block: var(--wp--preset--spacing--20);
	border-block-end: 1px solid var(--wp--preset--color--hairline);
}

/* Contact information rows ------------------------------------------------- */

.cds-info--large .cds-info__value {
	font-size: var(--wp--preset--font-size--medium);
}

/* Responsive --------------------------------------------------------------- */

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

@media (max-width: 900px) {
	.cds-cards--3,
	.cds-loop__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cds-strip {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}
}

@media (max-width: 600px) {
	.cds-cards--2,
	.cds-cards--3,
	.cds-loop__grid {
		grid-template-columns: 1fr;
	}

	.cds-industries {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cds-heading-rule::after {
		display: none;
	}
}

/* Section and hero geometry ------------------------------------------------ *
   Structural wrappers use the flow layout so this stylesheet owns the width
   and the gutters. That keeps a full-bleed background with constrained content
   without depending on core's constrained-layout child rules, which would cap
   card grids at the narrower content width. */

.cds-section {
	padding-block: clamp(3.25rem, 6.5vw, 5.5rem);
	/* Full-bleed background, shell-width content, without an extra wrapper. */
	padding-inline: max(var(--cds-gutter), calc((100% - var(--cds-shell)) / 2));
}

/* Narrow sections keep the shell's left edge so the eye does not have to
   re-find the column between sections; only the measure changes. */
.cds-section--narrow > * {
	max-width: 820px;
}

.cds-section__title {
	max-width: 24ch;
}

.cds-section__lead {
	max-width: 68ch;
	color: var(--cds-muted);
}

.cds-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
	padding-inline: max(var(--cds-gutter), calc((100% - var(--cds-shell)) / 2));
}

.cds-hero--tight {
	grid-template-columns: minmax(0, 1fr);
	padding-block: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.cds-hero__lead {
	max-width: 56ch;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--cds-muted);
}

.cds-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
}

.cds-split--aside {
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: start;
}

.cds-split__title {
	max-width: 20ch;
}

.cds-process {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin-block-start: var(--wp--preset--spacing--50);
}

.cds-process--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cds-cta-band {
	padding-block: clamp(3rem, 6vw, 4.5rem);
	padding-inline: max(var(--cds-gutter), calc((100% - var(--cds-shell)) / 2));
}

.cds-contact-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

@media (max-width: 900px) {
	.cds-hero,
	.cds-split,
	.cds-split--aside,
	.cds-contact-card {
		grid-template-columns: minmax(0, 1fr);
	}

	.cds-split--reverse .cds-split__art {
		order: 2;
	}

	.cds-process,
	.cds-process--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.cds-process,
	.cds-process--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Grid children must fill their track even if a group is later switched to the
   constrained layout in the editor, which would otherwise add auto inline
   margins and shrink the column to the artwork's intrinsic size. */
.cds-hero > *,
.cds-split > *,
.cds-contact-card > * {
	width: 100%;
	min-width: 0;
	margin-inline: 0;
	max-width: none;
}

/* 1.1.3 — generated page width correction.
   The starter-page builders already own their horizontal geometry: heroes and
   sections create a full-width band, then use --cds-shell + --cds-gutter for
   the readable inner width. Do not run that content through WordPress's
   constrained child layout as well. The explicit rules below also neutralize
   stale constrained-layout classes if an existing site has cached template
   markup from an earlier theme version. */
.cds-site-main--flush,
.cds-generated-page-content,
.cds-site-main--flush > .wp-block-post-content,
.cds-service > .wp-block-post-content,
.cds-industry-page > .wp-block-post-content {
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
}

.cds-generated-page-content > *,
.cds-generated-page-content > :where(.cds-hero, .cds-section),
.cds-site-main--flush > .wp-block-post-content > :where(.cds-hero, .cds-section),
.cds-service > .wp-block-post-content > :where(.cds-hero, .cds-section),
.cds-industry-page > .wp-block-post-content > :where(.cds-hero, .cds-section) {
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
}

/* Breadcrumbs follow the same shell edge as the page sections. */
.cds-service > .cds-breadcrumb-bar,
.cds-industry-page > .cds-breadcrumb-bar {
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
	padding-inline: max(var(--cds-gutter), calc((100% - var(--cds-shell)) / 2));
}

.cds-breadcrumb-bar > * {
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
}

/* 1.1.0 — page-specific art added to legal drafts. */
.cds-legal__art {
	max-width: 720px;
	margin: 0 auto clamp(2rem, 5vw, 4rem);
}

.cds-legal__art .cds-figure {
	margin: 0;
}

/* Direct contact block ------------------------------------------------------ *
 * Rendered by the [caltrop_form] shortcode in place of the consultation form.
 * It reuses the .cds-info rows used elsewhere, so this only adds the sizing
 * that suits sitting on its own in the contact card rather than in a sidebar
 * list, and makes the values the prominent thing on the card.
 */

.cds-contact-direct {
	margin-block: 0.5rem 0;
}

.cds-contact-direct .cds-info__row {
	padding-block: 0.9rem;
}

.cds-contact-direct .cds-info__value,
.cds-contact-direct .cds-info__value a {
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	word-break: break-word;
}

.cds-contact-direct .cds-info__value a {
	text-decoration: none;
	border-bottom: 1px solid rgba(47, 134, 255, 0.35);
}

.cds-contact-direct .cds-info__value a:hover,
.cds-contact-direct .cds-info__value a:focus-visible {
	border-bottom-color: currentColor;
}