/*
Theme Name: Kadence Child
Theme URI: https://claruskiev.com
Description: Child theme for ClarusApex. Holds the CSS for the Gutenberg block patterns that replace Elementor widgets during the 2026 migration.
Author: FossaTech EOOD
Template: kadence
Version: 4.5.1790269192
Text Domain: kadence-child
*/

/* ---------------------------------------------------------------------------
   ck-patterns: styling for the Gutenberg patterns that replace Elementor.

   Colours come from Kadence's own global palette rather than being repeated as
   literals, so the brand stays defined in one place:
     palette1 Apex Orange   palette2 Deep Orange   palette3 Ink
     palette4 Graphite      palette6 Steel         palette7 Cloud
     palette8 Bone          palette9 White

   Direction: ClarusApex Compliance Orange. Square corners, warm neutrals, one
   accent, composed and symmetric, no motion.

   IMPORTANT STRUCTURAL NOTE
   Kadence is a classic theme, so core/group renders an extra wrapper:
     <div class="wp-block-group ck-grid">
       <div class="wp-block-group__inner-container"> ...children... </div>
     </div>
   Any rule that lays out a group's children must therefore target the inner
   container as well as the group itself. The grid rules below do that, and stay
   correct if the wrapper ever disappears in a future WordPress version.
   --------------------------------------------------------------------------- */

:root {
	--ck-space-sm: 12px;
	--ck-space-md: 24px;
	--ck-space-lg: 40px;
	--ck-space-xl: 72px;
	--ck-rule: #E4E0DD;
}

/* ck-section: the horizontal band every pattern sits in. Grounds alternate
   between white and Cloud to separate bands without borders or shadow. */
.ck-section { padding-top: var(--ck-space-xl); padding-bottom: var(--ck-space-xl); }
.ck-section--cloud { background-color: var(--global-palette7); }
.ck-section--tint { background-color: #FDF1E6; }

@media (max-width: 767px) {
	.ck-section { padding-top: var(--ck-space-lg); padding-bottom: var(--ck-space-lg); }
}

/* ck-section__inner: the measured column inside a full-bleed band. Migrated
   pages run unboxed and full width, so each band supplies its own container. */
.ck-section__inner {
	max-width: var(--global-content-width, 1290px);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* ck-eyebrow: the small uppercase section label. Kept as a structural device
   because it is part of the established design, not added decoration. */
.ck-eyebrow {
	font-family: 'Roboto Condensed', var(--global-fallback-font);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--global-palette1);
	margin: 0 0 var(--ck-space-sm);
}

/* ck-hero: one moment. Headline, lede, one primary action plus at most one
   secondary. The headline measure is set so the line count stays at two on
   desktop; a three-line hero headline is a sizing error, not a copy problem. */
.ck-hero__title {
	font-size: clamp(32px, 4.4vw, 52px);
	line-height: 1.1;
	margin: 0 0 var(--ck-space-md);
	max-width: 30ch;
}
.ck-hero__lede {
	font-size: 19px;
	line-height: 1.6;
	color: var(--global-palette4);
	max-width: 64ch;
	margin: 0 0 var(--ck-space-lg);
}

/* ck-actions: square buttons, no shadow, condensed label. */
.ck-actions .wp-block-buttons { gap: var(--ck-space-md); align-items: center; }
.ck-actions .wp-block-button__link {
	border-radius: 0;
	box-shadow: none;
	font-family: 'Roboto Condensed', var(--global-fallback-font);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.01em;
	padding: 14px 28px;
	transition: background-color 120ms linear, color 120ms linear;
}
.ck-btn--primary .wp-block-button__link {
	background-color: var(--global-palette1);
	color: var(--global-palette9);
}
.ck-btn--primary .wp-block-button__link:hover,
.ck-btn--primary .wp-block-button__link:focus {
	background-color: var(--global-palette2);
	color: var(--global-palette9);
}
.ck-btn--ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--global-palette3);
	border: 1px solid var(--global-palette3);
}
.ck-btn--ghost .wp-block-button__link:hover,
.ck-btn--ghost .wp-block-button__link:focus {
	background-color: var(--global-palette3);
	color: var(--global-palette9);
}

/* ck-grid: the icon-box group that carries most of the site. Flat by default,
   separated by a hairline top rule rather than card chrome or shadow.
   See the structural note at the top: the inner container is laid out too. */
.ck-grid,
.ck-grid > .wp-block-group__inner-container {
	display: grid;
	gap: var(--ck-space-lg);
}
.ck-grid > .wp-block-group__inner-container {
	grid-column: 1 / -1;
	grid-template-columns: inherit;
}
.ck-grid--4, .ck-grid--4 > .wp-block-group__inner-container { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ck-grid--3, .ck-grid--3 > .wp-block-group__inner-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ck-grid--2, .ck-grid--2 > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1024px) {
	.ck-grid--4, .ck-grid--4 > .wp-block-group__inner-container,
	.ck-grid--3, .ck-grid--3 > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.ck-grid--4, .ck-grid--4 > .wp-block-group__inner-container,
	.ck-grid--3, .ck-grid--3 > .wp-block-group__inner-container,
	.ck-grid--2, .ck-grid--2 > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); }
}

.ck-cell { border-top: 2px solid var(--global-palette1); padding-top: var(--ck-space-md); }
.ck-cell__title {
	font-family: 'Roboto Condensed', var(--global-fallback-font);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.2;
	margin: 0 0 var(--ck-space-sm);
	color: var(--global-palette3);
}
.ck-cell p { color: var(--global-palette4); margin: 0 0 var(--ck-space-md); }
.ck-cell p:last-child { margin-bottom: 0; }

/* ck-link: the inline forward link used under each cell. */
.ck-link a, a.ck-link {
	color: var(--global-palette1);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.ck-link a:hover, a.ck-link:hover,
.ck-link a:focus, a.ck-link:focus {
	color: var(--global-palette2);
	border-bottom-color: currentColor;
}

/* ck-section__title / lede: the heading pair that opens a band. */
.ck-section__title { line-height: 1.15; margin: 0 0 var(--ck-space-md); }
.ck-section__lede { color: var(--global-palette4); max-width: 68ch; margin: 0 0 var(--ck-space-lg); }

/* ck-list: replaces Elementor icon-list. A short accent rule as the marker
   rather than a bullet glyph, matching the square, flat register. */
.wp-block-list.ck-list { list-style: none; margin: 0 0 var(--ck-space-md); padding: 0; }
.wp-block-list.ck-list li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--global-palette4); }
.wp-block-list.ck-list li:last-child { margin-bottom: 0; }
.wp-block-list.ck-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 12px;
	height: 2px;
	background-color: var(--global-palette1);
}

/* ck-faq: replaces the Elementor accordion using native core/details, so the
   open and close behaviour is the browser's own and needs no script. Hairline
   rules, no card chrome, accent on the open state. */
.ck-faq .wp-block-details {
	border-top: 1px solid var(--global-palette-mist, #D9D5D2);
	padding: var(--ck-space-md) 0;
}
.ck-faq .wp-block-details:last-child { border-bottom: 1px solid #D9D5D2; }
.ck-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	font-family: 'Roboto Condensed', var(--global-fallback-font);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.25;
	color: var(--global-palette3);
}
.ck-faq summary::-webkit-details-marker { display: none; }
.ck-faq summary::after {
	content: "+";
	flex: 0 0 auto;
	font-weight: 400;
	font-size: 22px;
	line-height: 1;
	color: var(--global-palette6);
}
.ck-faq details[open] > summary { color: var(--global-palette2); }
.ck-faq details[open] > summary::after { content: "\2013"; color: var(--global-palette2); }
.ck-faq .wp-block-details > *:not(summary) {
	color: var(--global-palette4);
	margin-top: var(--ck-space-sm);
	margin-bottom: 0;
	max-width: 72ch;
}

/* ck-media: replaces Elementor image-box, used for people and paired copy.
   Square image, fixed media column, middle aligned, stacks on mobile. */
.ck-media.wp-block-media-text {
	grid-template-columns: 200px 1fr;
	gap: var(--ck-space-md);
	align-items: center;
}
.ck-media .wp-block-media-text__media img { border-radius: 0; display: block; width: 100%; height: auto; }
.ck-media .wp-block-media-text__content { padding: 0; }
.ck-media .ck-media__name {
	font-family: 'Roboto Condensed', var(--global-fallback-font);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.2;
	margin: 0 0 8px;
	color: var(--global-palette3);
}
.ck-media .wp-block-media-text__content p { color: var(--global-palette4); margin: 0; }

@media (max-width: 767px) {
	.ck-media.wp-block-media-text { grid-template-columns: minmax(0, 1fr); }
	.ck-media .wp-block-media-text__media { max-width: 200px; }
}

/* ck-cta: the closing action band. Accent tint ground, one orange action. */
.ck-cta .ck-section__title { max-width: 26ch; }
.ck-cta .ck-section__lede { max-width: 62ch; }

/* ck-posts: the house post-list shortcode renders its own markup and already
   uses the brand palette. Only the outer rhythm is set here. */
.ck-postlist { margin-top: var(--ck-space-md); }

/* Chrome and Safari draw the disclosure triangle differently; remove both. */
.ck-faq summary::marker { content: none; }
.ck-faq summary { display: flex; }

/* Keep the person image column from stretching on wide screens. */
.ck-media .wp-block-media-text__media { max-width: 200px; }

/* ---------------------------------------------------------------------------
   Phase 3 additions: the pieces the services page needs.
   Icons are inline SVG using currentColor, not Font Awesome, so a migrated page
   carries no dependency on Elementor's icon library.
   --------------------------------------------------------------------------- */

:root {
	--ck-hero-eyebrow: #FFD6B0;
	--ck-hero-body: #E8E4E1;
	--ck-icon-pale: #E4ECF5;
	--ck-blue: var(--global-palette10, #2F5D8A); /* Kyiv Blue, referenced as a Kadence token */
}

/* ck-hero--dark: the ink hero band. White headline, peach eyebrow. */
.ck-hero--dark { background-color: var(--global-palette3); }
.ck-hero--dark .ck-eyebrow { color: var(--ck-hero-eyebrow); }
.ck-hero--dark .ck-hero__title { color: var(--global-palette9); }
.ck-hero--dark .ck-hero__lede { color: var(--ck-hero-body); }
.ck-hero--dark .ck-link a { color: var(--ck-hero-eyebrow); }
.ck-hero--dark .ck-link a:hover { color: var(--global-palette9); }

/* ck-hero__lede is narrower in the dark hero, matching the 66/33 split the
   Elementor original used. */
.ck-hero--dark .ck-hero__lede,
.ck-hero--dark .ck-hero__title { max-width: 30ch; }
.ck-hero--dark .ck-hero__lede { max-width: 58ch; }

/* ck-trust: the four-up reassurance strip under the hero. Icon on the left,
   statement, then a small uppercase label. 3px accent rule along the top. */
.ck-trust { border-top: 3px solid var(--global-palette1); }
.ck-trust .ck-grid { gap: var(--ck-space-md) var(--ck-space-lg); }
.ck-trust__item { display: flex; gap: 14px; align-items: flex-start; }
.ck-trust__item svg { flex: 0 0 auto; width: 24px; height: 24px; color: var(--ck-blue); margin-top: 2px; }
.ck-trust__title {
	font-family: 'Roboto Condensed', var(--global-fallback-font);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	color: var(--global-palette3);
	margin: 0 0 4px;
}
.ck-trust__label {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--global-palette6);
	margin: 0;
}

/* ck-cell__icon: the pale icon that sits above a door title. Decorative, so it
   is hidden from assistive technology in the markup. */
.ck-cell__icon { display: block; width: 40px; height: 40px; color: var(--ck-icon-pale); margin-bottom: var(--ck-space-sm); }

/* The four doors and sister-site cells carry no top rule; the icon leads. */
.ck-grid--doors .ck-cell { border-top: 0; padding-top: 0; }

/* ck-split: the closing two-column band, copy left and form right. */
.ck-split { display: grid; grid-template-columns: 52fr 48fr; gap: var(--ck-space-xl); align-items: start; }
.ck-split > .wp-block-group__inner-container { display: grid; grid-column: 1 / -1; grid-template-columns: inherit; gap: inherit; align-items: start; }
@media (max-width: 900px) {
	.ck-split, .ck-split > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); gap: var(--ck-space-lg); }
}



/* ck-hero--home: the front page hero carries a photograph behind an ink overlay
   at 64 percent, reproducing the Elementor original exactly. */
.ck-hero--home {
	position: relative;
	background-color: var(--global-palette3);
	background-image: url('/wp-content/uploads/2022/05/hero-home-1.png');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
.ck-hero--home::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--global-palette3);
	opacity: 0.64;
}
.ck-hero--home > * { position: relative; z-index: 1; }

/* ck-cell__img: the 128px industry illustrations sit above the cell title,
   where other cells carry an inline SVG icon. */
.ck-cell__img { display: block; width: 64px; margin: 0 0 var(--ck-space-sm); }
.ck-cell__img img { display: block; width: 100%; height: auto; }
.ck-cell__img.wp-block-image { margin-bottom: var(--ck-space-sm); }

/* Note: the house ck_posts shortcode also emits ul.ck-list for its list style,
   so the bullet rules above are scoped to .wp-block-list to avoid a collision. */

/* ck-hero__note: the small candidate line under the hero actions. */
.ck-hero--dark .ck-hero__note { color: var(--ck-hero-body); font-size: 16px; margin: var(--ck-space-md) 0 0; }

/* ---------------------------------------------------------------------------
   Button correction, 2026-09-24. Measured from the live Elementor pages rather
   than inferred from the section radii: the buttons are NOT square. Primary is
   Roboto 500 at 16px, 13px/22px padding, 4px radius. The inline forward links
   are Deep Orange at 15px, not the accent at body size. These rules are not
   scoped to .ck-actions, so buttons inside cells pick them up too.
   --------------------------------------------------------------------------- */
.ck-btn--primary .wp-block-button__link,
.ck-btn--ghost .wp-block-button__link,
.ck-btn--ghost-light .wp-block-button__link,
.ck-actions .wp-block-button__link {
	font-family: Roboto, var(--global-fallback-font);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0;
	line-height: 1;
	padding: 13px 22px;
	border-radius: 4px;
	box-shadow: none;
	transition: background-color 120ms linear, color 120ms linear, border-color 120ms linear;
}
.ck-btn--primary .wp-block-button__link { background-color: var(--global-palette1); color: var(--global-palette9); border: 0; }
.ck-btn--primary .wp-block-button__link:hover,
.ck-btn--primary .wp-block-button__link:focus { background-color: var(--global-palette2); color: var(--global-palette9); }

/* ck-btn--ghost-light: the outlined secondary beside the primary on the dark
   home hero. Transparent ground, 1.6px white stroke. */
.ck-btn--ghost-light .wp-block-button__link {
	background-color: transparent;
	color: var(--global-palette9);
	border: 1.6px solid var(--global-palette9);
}
.ck-btn--ghost-light .wp-block-button__link:hover,
.ck-btn--ghost-light .wp-block-button__link:focus {
	background-color: var(--global-palette9);
	color: var(--global-palette3);
}

/* ck-link: the inline forward link. Deep Orange, 15px, medium weight. */
.ck-link a, a.ck-link { color: var(--global-palette2); font-size: 15px; font-weight: 500; }
.ck-link a:hover, a.ck-link:hover { color: var(--global-palette1); border-bottom-color: currentColor; }
.ck-hero--dark .ck-link a { color: var(--ck-hero-eyebrow); font-size: 15px; font-weight: 500; }
.ck-hero--dark .ck-link a:hover { color: var(--global-palette9); }

/* ---------------------------------------------------------------------------
   Trust strip correction, 2026-09-24. Measured from the live Elementor page:
   the four items are separated by a 1px hairline with 24px of padding, not by a
   grid gap, and the title is Roboto 700 rather than Roboto Condensed.
   --------------------------------------------------------------------------- */
.ck-trust .ck-grid,
.ck-trust .ck-grid > .wp-block-group__inner-container { gap: 0; }

.ck-trust__item { gap: 14px; padding-right: 24px; }
.ck-trust__item + .ck-trust__item {
	border-left: 1px solid #D9D5D2;
	padding-left: 24px;
}
.ck-trust__item svg { width: 22px; height: 22px; stroke-width: 2; margin-top: 1px; }

.ck-trust__title {
	font-family: Roboto, var(--global-fallback-font);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.35;
	color: var(--global-palette3);
	margin: 0 0 6px;
}
.ck-trust__label {
	font-family: Roboto, var(--global-fallback-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--global-palette6);
	margin: 0;
	line-height: 1.5;
}

@media (max-width: 1024px) {
	/* Two across: only the second of each pair keeps a divider. */
	.ck-trust__item + .ck-trust__item { border-left: 0; padding-left: 0; }
	.ck-trust .ck-grid,
	.ck-trust .ck-grid > .wp-block-group__inner-container { gap: var(--ck-space-md) var(--ck-space-lg); }
}

/* The outlined hero secondary needs the extra specificity to beat the theme's
   own button border width. */
.ck-actions .ck-btn--ghost-light .wp-block-button__link,
.ck-btn--ghost-light .wp-block-button__link { border-width: 1.6px; }

/* ---------------------------------------------------------------------------
   Typography correction, 2026-09-24. Every value below was measured from the
   live Elementor pages rather than inferred. Earlier passes guessed the scale
   from section radii and the Kadence defaults and got several sizes wrong.
   --------------------------------------------------------------------------- */

/* Eyebrow. Note the house ck_posts shortcode ships an unscoped .ck-eyebrow rule
   at 11px, which was silently winning on every page that renders a post list.
   Ours is raised to p.ck-eyebrow, and the card eyebrow is restored verbatim. */
p.ck-eyebrow {
	font-family: Roboto, var(--global-fallback-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--global-palette2);
	margin: 0 0 var(--ck-space-sm);
}
.ck-hero--dark p.ck-eyebrow { color: var(--ck-hero-eyebrow); }
.ck-card p.ck-eyebrow { font: 700 11px/1.3 Roboto, Arial, sans-serif; letter-spacing: .12em; color: #C9640F; margin: 0; }

/* Section heading is 36px, not 28px. */
.ck-section__title { font-size: 36px; line-height: 1.15; }

/* Hero column is 750px wide in the original, so the text wraps at 730. */
.ck-hero--dark .ck-hero__title { max-width: 730px; }
.ck-hero--dark .ck-hero__lede { font-size: 18px; color: var(--global-palette7); max-width: 730px; }
.ck-hero--dark .ck-hero__note { font-size: 15px; color: #D9D5D2; max-width: 730px; }

/* Service cells. */
.ck-cell__title { font-size: 22px; }
.ck-cell p { font-size: 16px; }
.ck-cell .ck-link a { font-size: 15px; }

/* Image-led cells (the industry row) run one step smaller. */
.ck-cell:has(.ck-cell__img) .ck-cell__title { font-size: 20px; }
.ck-cell:has(.ck-cell__img) p { font-size: 15px; }

/* People cards. */
.ck-media .wp-block-media-text__content p { font-size: 15px; }

/* Prose measure: running text stops at 820px, lists at 860px, rather than
   running the full 1290px container. */
.ck-section__lede { max-width: 820px; font-size: 17px; }
.ck-section__inner > .wp-block-group__inner-container > p { max-width: 820px; }
.wp-block-list.ck-list { max-width: 860px; }
.ck-split .wp-block-list.ck-list,
.ck-split p { max-width: none; }

/* ---------------------------------------------------------------------------
   Band and accordion correction, 2026-09-24. Measured from /recruit/.
   Section padding is 64px, not 72. The hero and the trust strip have their own
   tighter values. The accordion is Roboto 17px with the marker on the LEFT, and
   the contact form is simply the theme default, so our overrides were removed.
   --------------------------------------------------------------------------- */
.ck-section { padding-top: 64px; padding-bottom: 64px; }
.ck-hero { padding-top: 56px; padding-bottom: 48px; }
.ck-trust { padding-top: 26px; padding-bottom: 22px; }
@media (max-width: 767px) {
	.ck-section { padding-top: 40px; padding-bottom: 40px; }
	.ck-hero { padding-top: 40px; padding-bottom: 36px; }
}

/* Accordion: hairline between items, marker on the left, Roboto not Condensed. */
.ck-faq .ck-section__inner > .wp-block-group__inner-container > .wp-block-details,
.ck-faq .wp-block-details { max-width: 860px; padding: 0; border-top: 1px solid #D9D5D2; border-bottom: 0; }
.ck-faq .wp-block-details:last-of-type { border-bottom: 1px solid #D9D5D2; }

.ck-faq summary {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: flex-start;
	gap: 12px;
	padding: 18px 20px;
	font-family: Roboto, var(--global-fallback-font);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.4;
	color: var(--global-palette4);
}
.ck-faq summary::after { content: none; }
.ck-faq summary::before {
	content: "+";
	order: -1;
	flex: 0 0 auto;
	width: 14px;
	font-weight: 400;
	font-size: 20px;
	line-height: 1;
	color: var(--global-palette6);
}
.ck-faq details[open] > summary { color: var(--global-palette2); }
.ck-faq details[open] > summary::before { content: "\2013"; color: var(--global-palette2); }
.ck-faq .wp-block-details > *:not(summary) {
	font-size: 16px;
	color: var(--global-palette4);
	border-top: 1px solid #D9D5D2;
	padding: 4px 20px 20px;
	margin: 0;
	max-width: none;
}

/* ---------------------------------------------------------------------------
   Card correction, 2026-09-24. The biggest miss of the migration: the service,
   industry and people cells are CARDS in the original, not flat blocks. White
   ground, 1px #D9D5D2 hairline, 4px radius, roughly 26px of padding. The icons
   are Kyiv Blue at 22-24px, not pale blue at 40px, and the staff photographs
   are circular. All measured from the live pages.
   --------------------------------------------------------------------------- */

.ck-cell,
.ck-grid--doors .ck-cell {
	background-color: var(--global-palette9);
	border: 1px solid #D9D5D2;
	border-radius: 4px;
	padding: 26px;
}
.ck-grid--4 .ck-cell { padding: 24px; }

/* Cards sit 20px apart, not 40. */
.ck-grid,
.ck-grid > .wp-block-group__inner-container { gap: 20px; }
.ck-trust .ck-grid,
.ck-trust .ck-grid > .wp-block-group__inner-container { gap: 0; }

/* The cell icon is a small Kyiv Blue glyph above the title. */
.ck-cell__icon {
	width: 24px;
	height: 24px;
	color: var(--global-palette10);
	margin-bottom: 14px;
}

/* Industry illustrations are 52px. */
.ck-cell__img { width: 52px; margin-bottom: 14px; }

/* People cards: same card treatment, circular portrait. */
.ck-media.wp-block-media-text {
	background-color: var(--global-palette9);
	border: 1px solid #D9D5D2;
	border-radius: 4px;
	padding: 24px;
	grid-template-columns: 121px 1fr;
	gap: 20px;
}
.ck-media .wp-block-media-text__media { max-width: 121px; }
.ck-media .wp-block-media-text__media img {
	width: 121px;
	height: 113px;
	object-fit: cover;
	border-radius: 50%;
}
@media (max-width: 767px) {
	.ck-media.wp-block-media-text { grid-template-columns: minmax(0, 1fr); }
}

/* The open accordion title stays graphite in the original. */
.ck-faq details[open] > summary { color: var(--global-palette4); }

/* ---------------------------------------------------------------------------
   Contact list icons, 2026-09-24. The closing contact list in the original uses
   an envelope, phone, clock and document glyph in Kyiv Blue, not the accent
   dash. Delivered as inline data URIs so no page markup has to change.
   --------------------------------------------------------------------------- */
.ck-split .wp-block-list.ck-list li {
	padding-left: 33px;
	background-repeat: no-repeat;
	background-position: 0 3px;
	background-size: 18px 18px;
	margin-bottom: 12px;
}
.ck-split .wp-block-list.ck-list li::before { content: none; }
.ck-split .wp-block-list.ck-list li:nth-child(1) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232F5D8A'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm9 9L3.4 7.6 3 8.4 12 15l9-6.6-.4-.8Z'/%3E%3C/svg%3E"); }
.ck-split .wp-block-list.ck-list li:nth-child(2) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232F5D8A'%3E%3Cpath d='M6.6 3h3.2l1.6 4-2 1.4a12 12 0 0 0 6.2 6.2l1.4-2 4 1.6v3.2A1.6 1.6 0 0 1 19.4 19 16.4 16.4 0 0 1 5 4.6 1.6 1.6 0 0 1 6.6 3Z'/%3E%3C/svg%3E"); }
.ck-split .wp-block-list.ck-list li:nth-child(3) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232F5D8A'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 10.4V6h-2v7.5l5 3 1-1.7-4-2.4Z'/%3E%3C/svg%3E"); }
.ck-split .wp-block-list.ck-list li:nth-child(4) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232F5D8A'%3E%3Cpath d='M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7l-5-5Zm.5 2.2L17.8 7.5H14.5V4.2Z'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------------------
   List glyphs and container width, 2026-09-24. The original lists carry a Kyiv
   Blue glyph per list, not the accent dash. Each list gained a modifier class;
   the glyphs ride in as data URIs so nothing else in the markup changed.
   Container is 1230px wide in the original, so the inner column is 1278 minus
   its 24px gutters.
   --------------------------------------------------------------------------- */
.ck-section__inner { max-width: 1278px; }

.wp-block-list.ck-list[class*="ck-list--"] li {
	padding-left: 33px;
	background-repeat: no-repeat;
	background-position: 0 3px;
	background-size: 18px 18px;
	margin-bottom: 12px;
}
.wp-block-list.ck-list[class*="ck-list--"] li::before { content: none; }

.ck-list--arrow li { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232F5D8A'%3E%3Cpath d='M4 11h12.2l-5-5L12.6 4.6 20 12l-7.4 7.4-1.4-1.4 5-5H4z'/%3E%3C/svg%3E"); }
.ck-list--check li { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232F5D8A'%3E%3Cpath d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E"); }
.ck-list--checkcircle li { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232F5D8A'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 14.6-4.2-4.2 1.4-1.4 2.8 2.8 5.8-5.8 1.4 1.4Z'/%3E%3C/svg%3E"); }
.ck-list--warn li { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232F5D8A'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-2h2Zm0-4h-2V7h2Z'/%3E%3C/svg%3E"); }
.ck-list--ban li { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232F5D8A'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM4 12a8 8 0 0 1 12.9-6.3L5.7 16.9A7.9 7.9 0 0 1 4 12Zm8 8a7.9 7.9 0 0 1-4.9-1.7L18.3 7.1A8 8 0 0 1 12 20Z'/%3E%3C/svg%3E"); }
.ck-list--angle li { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232F5D8A'%3E%3Cpath d='M9.4 5.6 8 7l5 5-5 5 1.4 1.4L15.8 12z'/%3E%3C/svg%3E"); }
.ck-list--bullhorn li { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232F5D8A'%3E%3Cpath d='M3 10v4a1 1 0 0 0 1 1h3l7 4V5L7 9H4a1 1 0 0 0-1 1Zm15.5-1.3a1 1 0 0 0-1.3 1.5 2.5 2.5 0 0 1 0 3.6 1 1 0 0 0 1.3 1.5 4.5 4.5 0 0 0 0-6.6Z'/%3E%3C/svg%3E"); }

/* The front page risk list mixes three different glyphs. */
.ck-list--why li:nth-child(1) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232F5D8A'%3E%3Cpath d='M12 2.5 9.5 5H4v2h1.6L2.5 14.2a3.9 3.9 0 0 0 7.8 0L7.2 7H11v12H7v2h10v-2h-4V7h3.8l-3.1 7.2a3.9 3.9 0 0 0 7.8 0L18.4 7H20V5h-5.5z'/%3E%3C/svg%3E"); }
.ck-list--why li:nth-child(2) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232F5D8A'%3E%3Cpath d='M9 3a4 4 0 1 1 0 8 4 4 0 0 1 0-8ZM1.5 21v-1.6A5.4 5.4 0 0 1 6.9 14h4.2a5.4 5.4 0 0 1 3 .9A3 3 0 0 0 13 17.5V21Zm15.5-8.5V11a2.5 2.5 0 0 1 5 0v1.5h.5V19h-6v-6.5Zm1.6 0h1.8V11a.9.9 0 0 0-1.8 0Z'/%3E%3C/svg%3E"); }
.ck-list--why li:nth-child(3) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232F5D8A'%3E%3Cpath d='M4 2h10v20H4Zm12 8h5v12h-5ZM6.2 4.4h2.2v2.2H6.2Zm3.6 0H12v2.2H9.8ZM6.2 8.6h2.2v2.2H6.2Zm3.6 0H12v2.2H9.8ZM6.2 12.8h2.2V15H6.2Zm3.6 0H12V15H9.8Zm11.4-.6h2v2h-2Zm0 4h2v2h-2Z'/%3E%3C/svg%3E"); }

/* Plain post cards put the date above the title. */
.ck-posts.plain .ck-meta--top { margin: 0 0 6px; }
.ck-posts.plain h3 { margin-top: 0; }

/* Card row inset, 2026-09-24. The original card rows sit 10px inside the
   container, which makes a three-across row 390px per card rather than 397. */
.ck-grid--doors { padding-left: 10px; padding-right: 10px; }

/* === HOME FIDELITY PASS — measured against claruskiev.com, 2026-09-24 ===
   Everything that could move another page is scoped to .home. The two
   unscoped rules at the end are noted where they appear. */

/* Band rhythm. The front page runs 72/72 where the inner pages run 64/64;
   the post band is 56/56 and the closing band 64/64. */
.home .ck-section { padding-top: 72px; padding-bottom: 72px; }
.home .ck-section.ck-hero { padding-top: 56px; padding-bottom: 48px; }
.home .ck-section.ck-trust { padding-top: 26px; padding-bottom: 22px; }
.home .ck-section:has(.ck-posts) { padding-top: 56px; padding-bottom: 56px; }
.home .ck-section:has(.ck-split) { padding-top: 64px; padding-bottom: 64px; }

/* Hero rhythm. 15 + 26 + 108 + 50 + 58 + 50 + 45 + 29 + 24 + 15, inside
   56/48 padding, is production's 524px band. */
.ck-hero--home p.ck-eyebrow { max-width: 730px; line-height: 1.15; margin-top: 0; margin-bottom: 26px; }
.ck-hero--home h1.ck-hero__title { line-height: 54px; margin-top: 0; margin-bottom: 50px; }
.ck-hero--home .ck-hero__lede { max-width: 730px; margin-top: 0; margin-bottom: 50px; }
.ck-hero--home .wp-block-group:has(> .wp-block-buttons) { margin-bottom: 0; }
.ck-hero--home .wp-block-buttons { gap: 12px; }
.ck-hero--home .ck-hero__note { max-width: 730px; margin: 29px 0 15px; }

/* Trust strip. Production's strip spans the full 1250px container rather than
   the 1230px content column, and that 20px is what keeps each title on one
   line instead of two. */
.home .ck-trust .ck-grid--4 { margin-left: -10px; margin-right: -10px; }
.home .ck-trust__item { gap: 16px; padding: 4px 20px 4px 0; }
.home .ck-trust__item + .ck-trust__item { padding-left: 24px; }

/* People. The two-up carries the same 10px row inset as the other card rows. */
.home .ck-grid--2 { padding-left: 10px; padding-right: 10px; }

/* Closing band. Production splits 650/600 across the full 1250px. */
.home .ck-split { margin-left: -10px; margin-right: -10px; }
.home .ck-split,
.home .ck-split > .wp-block-group__inner-container { grid-template-columns: 650px 600px; gap: 0; }
.home .ck-split > .wp-block-group__inner-container > *:first-child { padding-right: 48px; }
.home .ck-split > .wp-block-group__inner-container > *:last-child { padding-left: 39px; }

/* Front-page post cards are the plain Qi cards: no panel, no padding, a 2:1
   image and the date above the title. */
.home .ck-posts.plain { gap: 30px; }
.home .ck-posts.plain .ck-card { background: transparent; border: 0; border-radius: 0; }
.home .ck-posts.plain .ck-card .ck-body { padding: 0; }
.home .ck-posts.plain .ck-thumb { display: block; margin-bottom: 25px; }
.home .ck-posts.plain .ck-thumb img { display: block; width: 100%; height: auto; }
.home .ck-posts.plain .ck-meta--top { font-size: 15.3px; color: #111; margin: 0 0 5px; }
.home .ck-posts.plain .ck-card h3 { font-size: 20px; line-height: 1.25; margin: 0 0 10px; }
.home .ck-posts.plain .ck-card h3 a { font-size: inherit; color: inherit; }

/* Unscoped, deliberately: the closing contact list and the accordion answer
   are the same block on all eleven pages that carry them, and production
   renders the address line as plain text, not as an orange link. */
.ck-split .wp-block-list.ck-list a { color: inherit; font-size: inherit; font-weight: inherit; text-decoration: none; }
.wp-block-details > p { margin-top: 16px; margin-bottom: 16px; }
/* === HOME FIDELITY PASS, ROUND 2 — 2026-09-24 ===
   Six residuals found by re-measuring after round 1. */

/* The hero h1 is tracked -0.5px in production; without it the line wraps to
   three lines instead of two and the whole band grows by 54px. */
.ck-hero--home h1.ck-hero__title { letter-spacing: -0.5px; }

/* The 730px hero measure needs the element-qualified selector to beat the
   820px prose measure. */
.ck-hero--home p.ck-hero__lede,
.ck-hero--home p.ck-hero__note { max-width: 730px; }

/* Trust titles sit 4px above their label, not a full paragraph space. */
.home .ck-trust__title { margin: 0 0 4px; }

/* Three-up service cells are padded 29px in production, giving a 332px measure. */
.home .ck-grid--3 .ck-cell { padding: 28px; }

/* The form column is inset 39px on both sides. */
.home .ck-split > .wp-block-group__inner-container > *:last-child { padding-left: 39px; padding-right: 39px; }

/* Front-page card images keep their own aspect ratio at card width rather than
   being cropped to a fixed box. */
.home .ck-posts.plain .ck-thumb { display: block; aspect-ratio: auto; overflow: visible; line-height: 0; }
.home .ck-posts.plain .ck-thumb img { width: 100%; height: auto; object-fit: fill; }

/* Production renders address details as plain text. The orange arrow links
   carry .ck-link and keep their accent. */
.home .ck-section p:not(.ck-link) a[href^="mailto"],
.home .ck-section p:not(.ck-link) a[href^="tel"] { color: inherit; font-size: inherit; font-weight: inherit; text-decoration: none; }
/* === HOME FIDELITY PASS, ROUND 3 — 2026-09-24 ===
   The card images keep the aspect ratio the browser derives from their width
   and height attributes, so no CSS aspect-ratio may be declared on them at
   all: even `aspect-ratio: auto` discards that derived ratio and collapses an
   unloaded image to zero height. Both earlier declarations are now removed. */

/* Trust items are grid children, so their paragraph bottom margin is not
   collapsed away and was adding 32px to the row. */
.home .ck-trust__item { margin-bottom: 0; }

/* The hero column keeps the note's closing 15px inside the band. */
.ck-hero--home .ck-section__inner { display: flow-root; }
/* === HOME FIDELITY PASS, ROUND 4 — 2026-09-24 ===
   Production runs one header rhythm in every content band: the eyebrow text
   is 15px tall, 30px of air to the h2, then 32px from the h2 to the content.
   Staging was running 20 / 54 / 18, which cost 15px a band. */
.home p.ck-eyebrow { line-height: 1.15; margin: 0 0 30px; }
.home h2.ck-section__title { margin-top: 0; margin-bottom: 32px; }

/* Production's bullet lists breathe 22px between items, not 12px. */
.home .wp-block-list.ck-list > li { margin-bottom: 22px; }
.home .wp-block-list.ck-list > li:last-child { margin-bottom: 0; }
/* === HOME FIDELITY PASS, ROUND 5 — 2026-09-24 ===
   Kadence's 32px block gap was applying inside cards and strip items, where
   production uses tighter, element-specific spacing. */

/* Trust items are flex containers, so the child group's bottom margin counts
   towards the row height instead of collapsing away. */
.home .ck-trust__item > * { margin-bottom: 0; }

/* Industry cells: 14px under the illustration, nothing above the title. */
.home .ck-grid--4 .ck-cell figure.wp-block-image { margin: 0 0 14px; }
.home .ck-grid--4 .ck-cell h3 { margin: 0; line-height: 1.5; }

/* The open accordion answer sits 20px below the question and 36px above the
   next hairline, which production gets from a padded wrapper plus 16px
   paragraph margins. Expressed here as padding so nothing collapses. */
.ck-faq details.wp-block-details > p { margin: 0; padding: 20px 20px 36px; }
/* === HOME FIDELITY PASS, ROUND 6 — 2026-09-24 ===
   The trust item is a flex row inside a grid cell, so any descendant bottom
   margin survives collapsing and sets the row height. Zero them all, then put
   back the 4px the title needs. */
.home .ck-trust__item,
.home .ck-trust__item * { margin-top: 0; margin-bottom: 0; }
.home .ck-trust__title { margin: 0 0 4px; }

/* Service-cell titles are 22px on a 1.5 line box in production, giving a 33px
   line rather than 26px. */
.home .ck-grid--3 .ck-cell h3 { margin: 38px 0 11px; line-height: 1.5; }
/* === HOME FIDELITY PASS, ROUND 7 — 2026-09-24 ===
   The trust item is a flex row whose icon, gap and text add up to exactly the
   column width, so it was wrapping the icon onto its own line and adding 36px
   to every row. Hold it on one line and let the text column shrink. */
.home .ck-trust__item { flex-wrap: nowrap; }
.home .ck-trust__item > .wp-block-group { flex: 1 1 auto; min-width: 0; }
/* === HOME FIDELITY PASS, ROUND 8 — 2026-09-24 ===
   Measured again after the webfonts were repaired, since every earlier height
   had been taken against the fallback face. */

/* The closing band carried a trailing 32px block margin below the split. */
.home .ck-split { margin-bottom: 0; }

/* The plain card's date is a 17px line in production, not a 31px one. */
.home .ck-posts.plain .ck-meta--top { line-height: 1.1; }

/* The cell's closing link sits in a 37px block; the paragraph alone is 26px. */
.home .ck-grid--3 .ck-cell > .wp-block-group__inner-container > p:last-child { padding-bottom: 11px; }
/* === HOME FIDELITY PASS, ROUND 9 — 2026-09-24 ===
   The split's left column carried a 32px bottom margin, which set the grid
   row height and stretched the closing band. */
.home .ck-split > .wp-block-group__inner-container > * { margin-bottom: 0; }

/* === HOME FIDELITY PASS, ROUND 10 — 2026-09-24 ===
   Production sets the 'All insights' link 45px below the card row. */
/* superseded by the site-wide rule below */

/* === SITE-WIDE FIDELITY PASS — 2026-09-24 ===
   Measured on claruskiev.com/recruit/ and cross-checked against the front page.
   Production uses the same trust strip and the same header rhythm on every
   page, so these belong outside the .home scope. Where the front page genuinely
   differs (72/72 bands, a 30px eyebrow gap, 22px list spacing) its own rules sit
   earlier in this file at a higher specificity and still win. */

/* Trust strip. Production spans the full 1250px container, holds the icon and
   text on one line, and sets the title 4px above its label. */
.ck-trust .ck-grid--4 { margin-left: -10px; margin-right: -10px; }
.ck-trust__item { gap: 16px; padding: 4px 20px 4px 0; flex-wrap: nowrap; margin-bottom: 0; }
.ck-trust__item + .ck-trust__item { padding-left: 24px; }
.ck-trust__item > .wp-block-group { flex: 1 1 auto; min-width: 0; }
.ck-trust__item * { margin-top: 0; margin-bottom: 0; }
.ck-trust__title { margin: 0 0 4px; }

/* Header rhythm: a 15px eyebrow, 28px to the h2, 32px from the h2 to content. */
p.ck-eyebrow { line-height: 1.15; margin: 0 0 28px; }
h2.ck-section__title { margin-top: 0; margin-bottom: 32px; }

/* Bullet lists breathe 14px between items on the inner pages. */
.wp-block-list.ck-list > li { margin-bottom: 14px; }
.wp-block-list.ck-list > li:last-child { margin-bottom: 0; }
/* === SITE-WIDE FIDELITY PASS, PART 2 — 2026-09-24 ===
   Measured on /recruit/, /employ/ and /about/, which agree. */

/* Trust strip. The margin resets in part 1 sat at .ck-trust__item, one step
   below the block-gap rule that was setting 32px, so they never applied off the
   front page. Raised a level; the front page's own rules still win over these. */
.ck-trust .ck-trust__item { margin-bottom: 0; }
.ck-trust .ck-trust__item * { margin-top: 0; margin-bottom: 0; }
.ck-trust .ck-trust__title { margin: 0 0 4px; }

/* Inner-page hero. Production runs a 48px h1 tracked -0.5px on a 755px measure,
   with 28px under the eyebrow, 52px under the h1 and 38px under the lede. */
.ck-hero .ck-section__inner { display: flow-root; }
.ck-hero p.ck-eyebrow { max-width: 755px; margin-bottom: 28px; }
.ck-hero h1.ck-hero__title {
	font-size: 48px;
	line-height: 50.88px;
	letter-spacing: -0.5px;
	max-width: 755px;
	margin-top: 0;
	margin-bottom: 52px;
}
.ck-hero p.ck-hero__lede { max-width: 755px; margin-top: 0; margin-bottom: 38px; }
.ck-hero .ck-actions { margin-top: 0; margin-bottom: 0; }

/* The front page hero is the one that differs: 52px on a 730px measure. These
   repeat its earlier values so they are not lost to the rules above. */
.ck-hero--home p.ck-eyebrow { max-width: 730px; margin-bottom: 26px; }
.ck-hero--home h1.ck-hero__title { font-size: 52px; line-height: 54px; max-width: 730px; margin-bottom: 50px; }
.ck-hero--home p.ck-hero__lede { max-width: 730px; margin-bottom: 50px; }
.ck-hero--home p.ck-hero__note { max-width: 730px; margin: 29px 0 15px; }
/* === HERO SECOND CTA — 2026-09-24 ===
   The secondary hero action sat low against the primary button. Two causes: the
   buttons wrapper kept a 32px bottom margin inside the flex row, so centring it
   pushed the link down, and the link was inheriting a 24px line box where
   production uses 15px. Production sits the link 8px below the button's top with
   20px of air after the button, so the row is aligned from the top, not centred. */
.ck-hero .ck-actions { align-items: flex-start; gap: 20px; }
.ck-hero .ck-actions .wp-block-buttons { margin-bottom: 0; }
.ck-hero .ck-actions p.ck-link { line-height: 15px; margin-top: 8px; margin-bottom: 0; }
/* === CARD ROW ALIGNMENT — 2026-09-24 ===
   Every card in a grid row carried a 32px block-gap bottom margin except the
   last one. That made the grid row 32px taller than the cards, so only the last
   card stretched to fill it and the row ended with ragged bottoms. The row gap
   is already handled by the grid's own gap, so the margin is redundant. */
.ck-grid > .wp-block-group__inner-container > *,
.ck-grid > * { margin-bottom: 0; }

/* The hero's secondary link keeps production's 15px line box. */
.ck-hero .ck-actions p.ck-link a { display: inline-block; line-height: 15px; }
/* === COLUMN PADDING — 2026-09-24 ===
   Production's content column carries 10px of top and bottom padding inside
   every band, which is 20px a band that staging was missing. Verified identical
   on home, recruit, employ and about. Two bands are genuinely different and are
   excluded: the trust strip, whose items carry 4px instead, and the closing
   band, whose left column has no vertical padding at all. */
.ck-section .ck-section__inner { padding-top: 10px; padding-bottom: 10px; }
.ck-trust .ck-section__inner,
.ck-section:has(.ck-split) .ck-section__inner { padding-top: 0; padding-bottom: 0; }
/* === HOME HERO RE-DERIVED — 2026-09-24 ===
   The front-page hero rhythm was tuned before the column padding went in, so two
   of its gaps had absorbed that 20px and were double-counting it. Re-derived from
   production's element boxes: 10 padding + 15 eyebrow + 26 + 108 h1 + 50 + 58
   lede + 44 + 42 buttons + 15 + 24 note + 15 + 10 padding = production's 420px
   column inside a 524px band. */
.ck-hero--home p.ck-hero__lede { margin-bottom: 44px; }
.ck-hero--home p.ck-hero__note { margin: 15px 0 15px; }
/* === POST BAND CLOSING LINK — 2026-09-24 ===
   Measured on /contact-us/, whose closing band uses the same [ck_posts]
   shortcode as staging. Production sets a 20px margin under the card grid and
   wraps the closing link in a widget with 20px above and below its text, which
   together were the bulk of that band's 81px shortfall. */
.ck-section .ck-posts { margin-bottom: 20px; }
/* padding, not margin: the grid's bottom margin and the link's top margin are
   adjacent siblings and collapse into one 20px gap, where production's separate
   Elementor widgets give 20 + 20. */
.ck-section:has(.ck-posts) p.ck-link { margin-top: 0; margin-bottom: 0; padding-top: 20px; padding-bottom: 20px; }
/* === FRONT PAGE POST BAND — 2026-09-24 ===
   The front page's closing post band was built on the Qi blog widget in
   production, not the [ck_posts] shortcode the inner pages use, so it does not
   carry the 20px above and below the closing link. Only the grid's own bottom
   margin applies here. */
.home .ck-section:has(.ck-posts) p.ck-link { padding-top: 0; padding-bottom: 0; }

/* === PROJECT FIGURES — 2026-09-24 ===
   ck-figure: the drawn diagrams on the project reference pages. The section
   inner is 1290px wide, which scales a 760-unit drawing well past its design
   size and thins its linework, so the figure is held narrower and centred.
   The caption is narrower again so it reads as a caption, not as body copy. */
.ck-figure {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}
.ck-figure svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}
.ck-figure figcaption {
	max-width: 72ch;
	margin: var(--ck-space-md) auto 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--global-palette4);
}

/* Below the tablet break a 760-unit technical drawing would shrink its own
   labels to a few pixels. The frame scrolls sideways instead, holding the
   drawing at a legible width; the caption stays outside the scroll. */
@media (max-width: 720px) {
	.ck-figure__frame {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.ck-figure__frame svg { min-width: 600px; }
	.ck-figure figcaption { font-size: 13px; }
}