/* ==========================================================================
   KKM Partners — component layer
   Tokens come from theme.json. Nothing here redeclares a colour literal
   except where a translucent overlay or a data-URI icon requires it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base corrections
   -------------------------------------------------------------------------- */

:root {
	--kkm-radius-surface: var(--wp--custom--radius--surface, 8px);
	--kkm-radius-control: var(--wp--custom--radius--control, 6px);
	--kkm-rule: 1px solid var(--wp--preset--color--border);
	--kkm-rule-dark: rgba(226, 232, 240, 0.14);
	--kkm-ease: cubic-bezier(.22, 1, .36, 1);
	--kkm-transition: var(--wp--custom--transition, 180ms cubic-bezier(.22, 1, .36, 1));

	/* Icon masks. Drawn once, coloured with background-color wherever used. */
	--kkm-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--kkm-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--kkm-i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

html {
	/* Anchor targets (#diagnostic, #solutions) land below the sticky header. */
	scroll-padding-top: 8.5rem;
	scrollbar-color: var(--wp--preset--color--muted) var(--wp--preset--color--surface);
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-variant-numeric: proportional-nums;
	caret-color: var(--wp--preset--color--accent-deep);
	accent-color: var(--wp--preset--color--accent);
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

:where(h1, h2, h3, h4, summary) { text-wrap: balance; }
:where(p, li, dd) { text-wrap: pretty; }

a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color var(--kkm-transition), text-decoration-color var(--kkm-transition);
}

/* Sections butt together. WordPress's default block gap between template
   parts and between full-width sections left white seams between navy bands. */
.wp-site-blocks > * { margin-block: 0; }
#kkm-main > .alignfull { margin-block: 0; }

/* Readable measure for lead paragraphs and prose inside wide sections. */
.kkm-measure { max-width: var(--wp--custom--measure, 62ch); }

/* Inside a constrained section WordPress centres every child, which pushed
   measured paragraphs off the heading's left edge. Pin them to the content edge. */
.is-layout-constrained > .kkm-measure:not(.has-text-align-center) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}

/* Figures, prices, scorecard values: align the digits. */
.kkm-figures { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* --------------------------------------------------------------------------
   2. Focus + motion floor
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.has-contrast-background-color :where(a, button, summary):focus-visible,
.kkm-dark :where(a, button, summary):focus-visible {
	outline-color: var(--wp--preset--color--accent);
}

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

/* Skip link */
.kkm-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}
.kkm-skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Dark sections — invert text colours without per-block overrides
   -------------------------------------------------------------------------- */

.kkm-dark,
.kkm-dark p,
.kkm-dark li {
	color: #CBD5E1;
}

.kkm-dark :where(h1, h2, h3, h4, h5, h6),
.kkm-dark strong {
	color: var(--wp--preset--color--base);
}

.kkm-dark a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--base);
	text-decoration-color: rgba(234, 179, 8, 0.6);
}
.kkm-dark a:not(.wp-block-button__link):hover { color: var(--wp--preset--color--accent); }
.kkm-dark hr.wp-block-separator { border-color: var(--kkm-rule-dark); color: var(--kkm-rule-dark); }

/* A white panel sitting on a navy band (the diagnostic form) returns to
   light-surface colours. Without this its copy rendered grey-on-white. */
.kkm-dark .has-base-background-color,
.kkm-dark .has-base-background-color :where(p, li, label, dd) {
	color: var(--wp--preset--color--body);
}
.kkm-dark .has-base-background-color :where(h1, h2, h3, h4, h5, h6, strong) {
	color: var(--wp--preset--color--contrast);
}
.kkm-dark .has-base-background-color a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--contrast);
	text-decoration-color: var(--wp--preset--color--accent-deep);
}
.kkm-dark .has-base-background-color a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--accent-ink);
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.kkm-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(1.4) blur(10px);
	background: rgba(255, 255, 255, 0.9);
	border-bottom: var(--kkm-rule);
}

/* The header settles a soft shadow under itself once the page moves. */
@supports (animation-timeline: scroll()) {
	.kkm-header {
		animation: kkm-header-settle linear both;
		animation-timeline: scroll(root);
		animation-range: 0 160px;
	}
	@keyframes kkm-header-settle {
		to { box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.35); border-bottom-color: transparent; }
	}
}

.kkm-header.kkm-dark {
	background: rgba(15, 23, 42, 0.92);
	border-bottom-color: var(--kkm-rule-dark);
}

.kkm-topbar {
	font-size: var(--wp--preset--font-size--x-small);
	border-bottom: 1px solid var(--kkm-rule-dark);
}

.kkm-topbar a { text-decoration: none; }
.kkm-topbar a:hover { text-decoration: underline; }

/* On phones the sticky header stays to two short rows: numbers above, logo
   and actions below. The tagline and email drop out; both live in the footer. */
@media (max-width: 781px) {
	.kkm-topbar .kkm-topbar-tagline,
	.kkm-topbar .kkm-topbar-email { display: none; }
	.kkm-topbar > .wp-block-group { justify-content: center !important; }
	.kkm-header-main > .wp-block-group { flex-wrap: nowrap !important; }
	.kkm-header-main .wp-block-site-logo img { inline-size: 32px !important; }
	.kkm-header-main .wp-block-button__link { padding: 0.6rem 0.9rem !important; }
	.kkm-header-main .kkm-cta-long { display: none; }
}

.kkm-header .wp-block-site-title a { color: var(--wp--preset--color--contrast); }

.kkm-header .wp-block-navigation-item__content {
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
	transition: border-color var(--kkm-transition), color var(--kkm-transition);
}

.kkm-header .wp-block-navigation-item__content:hover,
.kkm-header .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--accent);
}

/* --------------------------------------------------------------------------
   5. Eyebrow — sentence case, hairline marker, never all-caps
   -------------------------------------------------------------------------- */

.kkm-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--accent-ink);
	margin-bottom: 0.75rem;
}

.kkm-eyebrow::before {
	content: "";
	inline-size: 28px;
	block-size: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
	flex: none;
}

.kkm-dark .kkm-eyebrow { color: var(--wp--preset--color--accent); }

/* --------------------------------------------------------------------------
   6. Ledger rows — the primary structural device
   Practice areas, deliverables, credentials and office details are rendered
   as ruled rows rather than floating cards.
   -------------------------------------------------------------------------- */

.kkm-ledger {
	border-top: var(--kkm-rule);
}

.kkm-ledger > .wp-block-group,
.kkm-ledger > .wp-block-columns,
.kkm-ledger > li {
	border-bottom: var(--kkm-rule);
	padding-block: var(--wp--preset--spacing--50);
	margin-block: 0;
}

.kkm-dark .kkm-ledger,
.kkm-dark .kkm-ledger > * {
	border-color: var(--kkm-rule-dark);
}

/* Row index: only used where content is a real sequence (engagement process). */
.kkm-step-index {
	display: inline-grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-wash);
	box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.45);
	font-family: var(--wp--preset--font-family--heading);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--contrast);
	line-height: 1;
}

/* --------------------------------------------------------------------------
   7. Panels — bordered, modest radius, no default drop shadow
   -------------------------------------------------------------------------- */

.kkm-panel {
	border: var(--kkm-rule);
	border-radius: var(--kkm-radius-surface);
	background: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--50);
}

/* The yellow flag sits inside the radius rather than fighting it. */
.kkm-panel--flag {
	border-top: 0;
	box-shadow: inset 0 3px 0 var(--wp--preset--color--accent);
	padding-top: calc(var(--wp--preset--spacing--50) + 3px);
}

.kkm-dark .kkm-panel {
	background: var(--wp--preset--color--contrast-soft);
	border-color: var(--kkm-rule-dark);
}

/* The single lifted surface on the site: the hero mandate panel. */
.kkm-panel--lift { box-shadow: inset 0 3px 0 var(--wp--preset--color--accent), var(--wp--preset--shadow--lift); }
.kkm-dark .kkm-panel--lift {
	box-shadow: inset 0 3px 0 var(--wp--preset--color--accent), 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   8. Checklist — a drawn tick on a yellow chip
   -------------------------------------------------------------------------- */

.kkm-checklist { list-style: none; padding-left: 0; }

.kkm-checklist li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.7rem;
}

.kkm-checklist li::before,
.kkm-checklist li::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	inline-size: 1.1rem;
	block-size: 1.1rem;
}

.kkm-checklist li::before {
	border-radius: 4px;
	background: var(--wp--preset--color--accent);
}

.kkm-checklist li::after {
	background: var(--wp--preset--color--contrast);
	-webkit-mask: var(--kkm-i-check) center / 70% no-repeat;
	mask: var(--kkm-i-check) center / 70% no-repeat;
}

/* --------------------------------------------------------------------------
   9. Contact rows
   -------------------------------------------------------------------------- */

.kkm-contact-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	align-items: baseline;
	padding-block: 0.85rem;
	border-bottom: var(--kkm-rule);
}

.kkm-contact-row dt {
	flex: 0 0 8rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.kkm-contact-row dd { margin: 0; flex: 1 1 14rem; }

.kkm-dark .kkm-contact-row { border-color: var(--kkm-rule-dark); }
.kkm-dark .kkm-contact-row dt { color: #94A3B8; }

/* --------------------------------------------------------------------------
   10. Forms
   -------------------------------------------------------------------------- */

.kkm-form :where(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	inline-size: 100%;
	padding: 0.8rem 1rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
	border: var(--kkm-rule);
	border-radius: var(--kkm-radius-control);
	transition: border-color var(--kkm-transition), box-shadow var(--kkm-transition), background-color var(--kkm-transition);
}

.kkm-form :where(input, select, textarea):hover { border-color: #CBD5E1; }

.kkm-form select {
	appearance: none;
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1rem;
	cursor: pointer;
}

.kkm-form textarea { resize: vertical; min-block-size: 7.5rem; }

.kkm-form ::placeholder { color: var(--wp--preset--color--body); opacity: 0.75; }

.kkm-form :where(input, select, textarea):focus {
	border-color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.35);
	outline: none;
}

.kkm-form label {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.kkm-form .kkm-field { margin-bottom: 1.1rem; }
.kkm-form .kkm-hp { position: absolute; left: -9999px; }

/* Two short fields share a row when there is room. */
.kkm-field-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	column-gap: 1rem;
}

.kkm-form .kkm-consent label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.75rem;
	align-items: start;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	line-height: 1.55;
	color: var(--wp--preset--color--body);
}

.kkm-form .kkm-consent input {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	margin: 0.15rem 0 0;
}

.kkm-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	inline-size: 100%;
	padding-block: 1rem;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--medium);
}

.kkm-form button[type="submit"]::after {
	content: "";
	inline-size: 1.1rem;
	block-size: 1.1rem;
	background: currentColor;
	-webkit-mask: var(--kkm-i-arrow) center / contain no-repeat;
	mask: var(--kkm-i-arrow) center / contain no-repeat;
	transition: transform var(--kkm-transition);
}

.kkm-form button[type="submit"]:hover::after { transform: translateX(3px); }

/* Error and empty states speak plainly. */
.kkm-form .kkm-error {
	color: #B91C1C;
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.35rem;
}

/* --------------------------------------------------------------------------
   11. Buttons — ghost variant for dark bands, quiet outline, arrow links
   -------------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	transition: background-color var(--kkm-transition), color var(--kkm-transition), border-color var(--kkm-transition), transform var(--kkm-transition);
}

.wp-element-button:active,
.wp-block-button__link:active { transform: translateY(1px); }

.wp-block-button.is-style-kkm-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--base);
	border: 1px solid rgba(226, 232, 240, 0.4);
}

.wp-block-button.is-style-kkm-ghost .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-kkm-quiet .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-kkm-quiet .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Text link with a trailing arrow that nudges forward on hover. */
.kkm-arrow-link a,
a.kkm-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	text-decoration: none;
}

.kkm-arrow-link a::after,
a.kkm-arrow-link::after {
	content: "";
	inline-size: 1em;
	block-size: 1em;
	flex: none;
	background: var(--wp--preset--color--accent-deep);
	-webkit-mask: var(--kkm-i-arrow) center / contain no-repeat;
	mask: var(--kkm-i-arrow) center / contain no-repeat;
	transition: transform var(--kkm-transition);
}

.kkm-arrow-link a:hover::after,
a.kkm-arrow-link:hover::after { transform: translateX(4px); }

.kkm-dark .kkm-arrow-link a::after { background: var(--wp--preset--color--accent); }

/* --------------------------------------------------------------------------
   12. Details / FAQ — native disclosure with a drawn plus that turns
   -------------------------------------------------------------------------- */

.wp-block-details {
	border-bottom: var(--kkm-rule);
	padding-block: 0;
}

.wp-block-details summary {
	position: relative;
	display: block;
	list-style: none;
	cursor: pointer;
	padding: var(--wp--preset--spacing--40) 3rem var(--wp--preset--spacing--40) 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	letter-spacing: -0.01em;
	transition: color var(--kkm-transition);
}

.wp-block-details summary::-webkit-details-marker { display: none; }

.wp-block-details summary::before {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	inline-size: 2rem;
	block-size: 2rem;
	margin-top: -1rem;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border);
	transition: background-color var(--kkm-transition), box-shadow var(--kkm-transition);
}

.wp-block-details summary::after {
	content: "";
	position: absolute;
	right: 0.5rem;
	top: 50%;
	inline-size: 1rem;
	block-size: 1rem;
	margin-top: -0.5rem;
	background: var(--wp--preset--color--contrast);
	-webkit-mask: var(--kkm-i-plus) center / contain no-repeat;
	mask: var(--kkm-i-plus) center / contain no-repeat;
	transition: transform 260ms var(--kkm-ease);
}

.wp-block-details summary:hover { color: var(--wp--preset--color--accent-ink); }
.wp-block-details summary:hover::before,
.wp-block-details[open] summary::before {
	background: var(--wp--preset--color--accent);
	box-shadow: none;
}
.wp-block-details[open] summary::after { transform: rotate(45deg); }

.wp-block-details > :not(summary) {
	max-width: 64ch;
	margin-top: 0;
	padding-bottom: var(--wp--preset--spacing--40);
}

/* --------------------------------------------------------------------------
   13. Utilities
   -------------------------------------------------------------------------- */

.kkm-sticky-aside { position: sticky; top: 8rem; }

@media (max-width: 781px) {
	.kkm-sticky-aside { position: static; }
	.kkm-contact-row dt { flex-basis: 100%; }
}

.kkm-hairline-top { border-top: var(--kkm-rule); }
.kkm-hairline-bottom { border-bottom: var(--kkm-rule); }

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

/* Line icons. 24px grid, 1.75 stroke, inherit colour. */
.kkm-icon {
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: var(--kkm-radius-surface);
	background: var(--wp--preset--color--accent-wash);
	color: var(--wp--preset--color--accent-ink);
}

.kkm-icon svg {
	inline-size: 1.4rem;
	block-size: 1.4rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kkm-dark .kkm-icon {
	background: rgba(234, 179, 8, 0.12);
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   14. Homepage components
   ========================================================================== */

/* Hero — navy with a slate lift top-right so the band has depth, not flatness. */
.kkm-hero {
	position: relative;
	isolation: isolate;
	background-image:
		radial-gradient(70rem 40rem at 100% 0%, rgba(51, 65, 85, 0.55), transparent 60%),
		linear-gradient(180deg, var(--wp--preset--color--contrast) 0%, #0B1222 100%);
}

.kkm-hero h1 {
	font-size: clamp(2.25rem, 2.6vw + 1.2rem, 3.5rem);
	line-height: 1.08;
}

.kkm-trustline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.kkm-trustline li {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
}

.kkm-trustline li::before {
	content: "";
	inline-size: 0.95rem;
	block-size: 0.95rem;
	background: var(--wp--preset--color--accent);
	-webkit-mask: var(--kkm-i-check) center / contain no-repeat;
	mask: var(--kkm-i-check) center / contain no-repeat;
}

/* Hero kicker — the four disciplines as a ruled lockup above the H1. */
.kkm-kicker {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(0.9375rem, 0.5vw + 0.8rem, 1.125rem);
	letter-spacing: -0.01em;
	line-height: 1.4;
	color: var(--wp--preset--color--accent);
	padding-bottom: 0.9rem;
	margin-bottom: 1.4rem;
	border-bottom: 2px solid rgba(234, 179, 8, 0.35);
}

.kkm-kicker span:not(.kkm-pipe) { white-space: nowrap; }

.kkm-kicker .kkm-pipe {
	color: rgba(234, 179, 8, 0.45);
	padding: 0 0.15rem;
	font-weight: 400;
}

/* Hero side panel: four entry points that jump to the diagnostic form. */
.kkm-entry-list { list-style: none; padding-left: 0; margin: 0; }

.kkm-entry-list li { border-bottom: 1px solid var(--kkm-rule-dark); }
.kkm-entry-list li:last-child { border-bottom: 0; }

.kkm-dark .kkm-entry-list a,
.kkm-entry-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-inline: -0.75rem;
	padding: 0.95rem 0.75rem;
	border-radius: var(--kkm-radius-control);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	transition: color var(--kkm-transition), background-color var(--kkm-transition);
}

.kkm-entry-list a::after {
	content: "";
	inline-size: 1.1rem;
	block-size: 1.1rem;
	flex: none;
	background: var(--wp--preset--color--accent);
	opacity: 0.55;
	-webkit-mask: var(--kkm-i-arrow) center / contain no-repeat;
	mask: var(--kkm-i-arrow) center / contain no-repeat;
	transition: transform var(--kkm-transition), opacity var(--kkm-transition);
}

.kkm-dark .kkm-entry-list a:hover,
.kkm-entry-list a:hover {
	color: var(--wp--preset--color--accent);
	background: rgba(234, 179, 8, 0.08);
}

.kkm-entry-list a:hover::after { opacity: 1; transform: translateX(3px); }

/* Credibility bar — facts divided by hairlines, not floating. */
.kkm-credbar .wp-block-column { position: relative; }

@media (min-width: 782px) {
	.kkm-credbar .wp-block-column + .wp-block-column {
		padding-left: var(--wp--preset--spacing--50);
		border-left: var(--kkm-rule);
	}
}

/* Solution panels — 2x2, yellow flag, deliverables ruled off from the promise. */
@media (min-width: 900px) {
	.kkm-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

.kkm-solution { display: flex; flex-direction: column; height: 100%; }

.kkm-solution-head {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.kkm-solution-head h3 { margin: 0; }

.kkm-solution .kkm-solution-promise {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--wp--preset--color--accent-ink);
}

.kkm-solution .kkm-solution-outcome {
	margin-top: auto;
	padding: 1rem 1.15rem;
	border-radius: var(--kkm-radius-control);
	background: var(--wp--preset--color--accent-wash);
	color: var(--wp--preset--color--contrast-soft);
	font-size: var(--wp--preset--font-size--small);
}

.kkm-solution .kkm-solution-outcome strong { color: var(--wp--preset--color--contrast); }

/* A fifth, operational service runs the full width under the 2x2 so the grid
   never ends on an orphan. Its deliverables split into two columns. */
@media (min-width: 900px) {
	.kkm-solution--wide { grid-column: 1 / -1; }
	.kkm-checklist--cols { columns: 2; column-gap: var(--wp--preset--spacing--60); }
	.kkm-checklist--cols li { break-inside: avoid; }
}

.kkm-solution-outcome.wp-block-group { gap: 0.5rem 1.5rem; }
.kkm-solution-outcome.wp-block-group p { margin: 0; max-width: 70ch; }

/* Industry blocks — hairline grid, no shadows. */
.kkm-industry-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--wp--preset--color--border);
	border: var(--kkm-rule);
	border-radius: var(--kkm-radius-surface);
	overflow: hidden;
}

.kkm-industry-grid > * {
	background: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--50);
	margin: 0;
}

.kkm-industry-grid .kkm-icon { margin-bottom: var(--wp--preset--spacing--40); }
.kkm-industry-grid h3 { margin-bottom: 0.6rem; }
.kkm-industry-grid p { margin: 0; }

@media (max-width: 900px) { .kkm-industry-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kkm-industry-grid { grid-template-columns: 1fr; } }

/* Methodology — five measured stages on a single rule. */
.kkm-flow {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--wp--preset--spacing--40);
	border-top: 2px solid var(--wp--preset--color--border);
	padding-top: 0;
}

.kkm-flow .kkm-flow-step {
	position: relative;
	padding-top: var(--wp--preset--spacing--50);
	padding-right: var(--wp--preset--spacing--30);
}

.kkm-flow .kkm-flow-step::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 0;
	inline-size: 14px;
	block-size: 14px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 4px var(--wp--preset--color--base);
}

/* The one authored motion on the page: as the methodology scrolls into view
   the yellow rule draws across the five stages, left to right. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.kkm-flow::before {
			content: "";
			position: absolute;
			top: -2px;
			left: 0;
			inline-size: 100%;
			block-size: 2px;
			background: var(--wp--preset--color--accent);
			transform-origin: left center;
			animation: kkm-draw-x linear both;
			animation-timeline: view();
			animation-range: entry 30% cover 50%;
		}
		@keyframes kkm-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
	}
}

.kkm-flow-num {
	font-family: var(--wp--preset--font-family--heading);
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--accent-ink);
	display: block;
	margin-bottom: 0.35rem;
}

.kkm-flow-out {
	display: block;
	margin-top: 0.85rem;
	padding: 0.75rem 0.9rem;
	border-radius: var(--kkm-radius-control);
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.55;
	color: var(--wp--preset--color--body);
}

@media (max-width: 980px) { .kkm-flow { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 600px) {
	.kkm-flow {
		grid-template-columns: 1fr;
		border-top: 0;
		border-left: 2px solid var(--wp--preset--color--border);
		padding-left: var(--wp--preset--spacing--40);
		gap: var(--wp--preset--spacing--50);
	}
	.kkm-flow .kkm-flow-step { padding-top: 0; }
	.kkm-flow .kkm-flow-step::before {
		top: 0.3rem;
		left: calc(var(--wp--preset--spacing--40) * -1 - 8px);
	}
	.kkm-flow::before {
		top: 0 !important;
		left: -2px !important;
		inline-size: 2px !important;
		block-size: 100% !important;
		transform-origin: center top !important;
		animation-name: kkm-draw-y !important;
	}
	@keyframes kkm-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}

/* Diagnostic checklist — real checkboxes that travel with the form submission. */
.kkm-checkbank { list-style: none; padding-left: 0; margin: 0; }

.kkm-checkbank li {
	margin: 0;
	border-bottom: var(--kkm-rule);
}

.kkm-checkbank label {
	position: relative;
	display: block;
	padding: 0.95rem 0.5rem 0.95rem 2.6rem;
	margin-inline: -0.5rem;
	border-radius: var(--kkm-radius-control);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	cursor: pointer;
	transition: color var(--kkm-transition), background-color var(--kkm-transition);
}

.kkm-checkbank input {
	position: absolute;
	left: 0.5rem;
	top: 1.2rem;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.kkm-checkbank label::before,
.kkm-checkbank label::after {
	content: "";
	position: absolute;
	left: 0.5rem;
	top: 1.2rem;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	border-radius: 4px;
	pointer-events: none;
}

.kkm-checkbank label::before {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--contrast);
	transition: background-color var(--kkm-transition), box-shadow var(--kkm-transition);
}

.kkm-checkbank label::after {
	background: var(--wp--preset--color--contrast);
	-webkit-mask: var(--kkm-i-check) center / 72% no-repeat;
	mask: var(--kkm-i-check) center / 72% no-repeat;
	transform: scale(0.4);
	opacity: 0;
	transition: transform 220ms var(--kkm-ease), opacity 120ms linear;
}

.kkm-checkbank label:has(input:checked)::before {
	background: var(--wp--preset--color--accent);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--accent);
}

.kkm-checkbank label:has(input:checked)::after { transform: scale(1); opacity: 1; }

.kkm-checkbank label:has(input:focus-visible)::before {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.kkm-dark .kkm-checkbank li { border-color: var(--kkm-rule-dark); }
.kkm-dark .kkm-checkbank label { color: #CBD5E1; }
.kkm-dark .kkm-checkbank label:hover { background: rgba(255, 255, 255, 0.04); color: var(--wp--preset--color--base); }
.kkm-dark .kkm-checkbank label::before { box-shadow: inset 0 0 0 2px rgba(234, 179, 8, 0.7); }
.kkm-dark .kkm-checkbank label:has(input:checked) { color: var(--wp--preset--color--base); }

/* Live tally under the checklist, counted in CSS from the ticked boxes. */
.kkm-dx { counter-reset: kkm-ticked; }
.kkm-dx .kkm-checkbank input:checked { counter-increment: kkm-ticked; }

.kkm-tally {
	display: none;
	margin-top: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent);
}

.kkm-dx:has(.kkm-checkbank input:checked) .kkm-tally { display: block; }
.kkm-tally::before { content: counter(kkm-ticked) " ticked. "; }

/* What happens next — three timed steps. */
.kkm-next-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: kkm-step;
}

.kkm-next-steps li {
	counter-increment: kkm-step;
	position: relative;
	margin: 0;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 2px solid var(--wp--preset--color--accent);
}

.kkm-next-steps li::before {
	content: counter(kkm-step);
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--wp--preset--font-family--heading);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-ink);
}

.kkm-next-steps strong {
	display: block;
	margin-bottom: 0.3rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--contrast);
	letter-spacing: -0.01em;
}

.kkm-next-steps span { font-size: var(--wp--preset--font-size--small); }

.kkm-dark .kkm-next-steps li::before { color: var(--wp--preset--color--accent); }
.kkm-dark .kkm-next-steps strong { color: var(--wp--preset--color--base); }

/* Compact variant inside the diagnostic column. */
.kkm-next-steps--compact { gap: var(--wp--preset--spacing--30); }
@media (min-width: 600px) {
	.kkm-next-steps--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kkm-next-steps--compact li { padding-top: 0.75rem; border-top-width: 1px; border-top-color: var(--kkm-rule-dark); }
.kkm-next-steps--compact strong { font-size: var(--wp--preset--font-size--medium); }

/* Partner lockup */
.kkm-lockup {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
	letter-spacing: -0.02em;
}

.kkm-lockup .kkm-lockup-x {
	color: var(--wp--preset--color--accent);
	font-weight: 400;
	font-size: 0.7em;
}

/* Founder note — portrait, letter, signature. */
.kkm-portrait img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--kkm-radius-surface);
	background: var(--wp--preset--color--surface);
}

.kkm-portrait { position: relative; margin: 0; }

.kkm-portrait::after {
	content: "";
	position: absolute;
	left: var(--wp--preset--spacing--40);
	bottom: calc(var(--wp--preset--spacing--40) * -1);
	inline-size: 38%;
	block-size: 6px;
	border-radius: 3px;
	background: var(--wp--preset--color--accent);
}

.kkm-letter p { font-size: var(--wp--preset--font-size--large); line-height: 1.75; }

.kkm-signature {
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--kkm-rule);
}

.kkm-signature .kkm-signature-name {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
}

/* Testimonials — one lead quote, two supporting. */
.kkm-quotes {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: var(--wp--preset--spacing--40);
}

.kkm-quotes > .kkm-quote:first-child { grid-row: span 2; }

@media (max-width: 900px) {
	.kkm-quotes { grid-template-columns: 1fr; }
	.kkm-quotes > .kkm-quote:first-child { grid-row: auto; }
}

.kkm-quote {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: var(--wp--preset--spacing--50);
	border: var(--kkm-rule);
	border-radius: var(--kkm-radius-surface);
	background: var(--wp--preset--color--base);
}

.kkm-quote svg {
	inline-size: 2.25rem;
	block-size: 2.25rem;
	fill: var(--wp--preset--color--accent);
}

.kkm-quote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--wp--preset--color--contrast);
}

.kkm-quote blockquote p { margin: 0; }

.kkm-quote--lead {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

.kkm-quote--lead blockquote {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.45;
	color: var(--wp--preset--color--base);
}

.kkm-quote figcaption {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--body);
}

.kkm-quote figcaption strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--contrast);
}

.kkm-quote--lead figcaption { color: #CBD5E1; }
.kkm-quote--lead figcaption strong { color: var(--wp--preset--color--base); }

.kkm-avatar {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

/* ==========================================================================
   15. Footer
   ========================================================================== */

.kkm-footer h2 {
	color: #94A3B8 !important;
	font-weight: 600;
	margin-bottom: var(--wp--preset--spacing--40);
}

.kkm-footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.kkm-footer-links li { margin: 0 0 0.75rem; }

.kkm-dark .kkm-footer-links a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: var(--wp--preset--color--base);
}

.kkm-footer-links a::after {
	content: "";
	inline-size: 0.9em;
	block-size: 0.9em;
	background: var(--wp--preset--color--accent);
	opacity: 0;
	transform: translateX(-4px);
	-webkit-mask: var(--kkm-i-arrow) center / contain no-repeat;
	mask: var(--kkm-i-arrow) center / contain no-repeat;
	transition: opacity var(--kkm-transition), transform var(--kkm-transition);
}

.kkm-footer-links a:hover::after { opacity: 1; transform: none; }

.kkm-footer .kkm-contact-row a { text-decoration: none; }
.kkm-footer .kkm-contact-row a:hover { text-decoration: underline; }

.kkm-footer-legal,
.kkm-footer-legal p { color: #94A3B8; }

/* ==========================================================================
   16. Full width (no title) page template
   Sections placed in the editor run edge to edge and butt together, exactly
   as they do on the homepage. Plain paragraphs still sit in the content width.
   ========================================================================== */

.kkm-full-content > .alignfull { margin-block: 0 !important; }
.kkm-full-content > :first-child { margin-top: 0 !important; }