/*
 * KHC Clear: blocks. Page layout for block content, the brand block styles
 * (registered in inc/blocks.php) and the KHC blocks. Loads on the site and
 * in the editor, so selectors don't depend on body.khc.
 */

/* ======================================================================
   Page layout: top-level blocks sit in a 760px column; Wide is 1240px;
   Full runs edge to edge. KHC sections are Full groups with their own padding.
   ====================================================================== */
.entry-content > :not(.alignfull) {
	width: min(100% - 2 * var(--khc-pad), var(--khc-measure));
	margin-inline: auto;
}

.entry-content > .alignwide {
	width: min(100% - 2 * var(--khc-pad), var(--khc-content));
}

.entry-content > .alignfull {
	width: 100%;
	max-width: none;
}

.entry-content > * + * {
	margin-block-start: 24px;
}

.entry-content > .alignfull + .alignfull,
.entry-content > .khc-section,
.entry-content > .khc-section + * {
	margin-block-start: 0;
}

.entry-content > *:last-child {
	margin-block-end: 0;
}

/* Sections: full-width bands with the board's padding. Inner blocks follow the group's own layout. */
.khc-section {
	padding: var(--khc-section-y) var(--khc-pad);
}

.khc-section.khc-hero {
	padding-block: clamp(40px, 4.5vw, 64px) clamp(56px, 5vw, 72px);
}

.khc-section > .alignwide,
.khc-section .is-layout-constrained > .alignwide {
	max-width: var(--khc-content);
}

/* Text pages ("Text page" template): the title as the H1 over a 760px column. */
.page-template-page-text .entry {
	width: min(100% - 2 * var(--khc-pad), var(--khc-measure));
	margin: 0 auto;
	padding-block: var(--khc-section-y);
}

.page-template-page-text .entry-title {
	margin-bottom: 32px;
	font-size: clamp(2.25rem, 2.6vw + 1rem, 3.5rem);
}

.page-template-page-text .entry-content > :not(.alignfull) {
	width: 100%;
}

/* The board's text page: 28px section heads, gray body text, yellow-underlined links. */
.page-template-page-text .entry-content > :is(h2, h3) {
	margin-block-start: 40px;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.page-template-page-text .entry-content > h3 {
	font-size: 22px;
}

.page-template-page-text .entry-content > :is(p, ul, ol) {
	color: var(--khc-charcoal);
	line-height: 1.65;
}

.page-template-page-text .entry-content a {
	border-bottom: 2px solid var(--khc-yellow);
	overflow-wrap: anywhere;
}

/* ---------- Grounds: dark text by default; white on black, blue, purple and charcoal ---------- */
.has-black-background-color,
.has-charcoal-background-color,
.has-blue-background-color,
.has-purple-background-color {
	color: var(--khc-white);
}

:is(.has-black-background-color, .has-charcoal-background-color, .has-blue-background-color, .has-purple-background-color) a:not(.wp-block-button__link) {
	color: inherit;
}

:is(.has-black-background-color, .has-charcoal-background-color, .has-blue-background-color, .has-purple-background-color) .khc-script {
	color: var(--khc-turquoise);
}

:is(.has-black-background-color, .has-charcoal-background-color, .has-blue-background-color, .has-purple-background-color) .khc-hl {
	background: linear-gradient(transparent 84%, var(--khc-yellow) 84%, var(--khc-yellow) 97%, transparent 97%);
}

:is(.has-black-background-color, .has-charcoal-background-color, .has-blue-background-color, .has-purple-background-color) :is(ul, ol) > li::before {
	color: var(--khc-yellow);
}

.has-charcoal-color {
	color: var(--khc-charcoal);
}

.has-black-background-color .has-charcoal-color {
	color: var(--khc-gray);
}

/* ---------- Type in blocks ---------- */
.wp-block-heading {
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

.wp-block-heading.has-display-font-size,
.wp-block-heading.has-page-font-size {
	line-height: 1;
	letter-spacing: -0.035em;
}

.wp-block-heading.has-section-font-size,
.wp-block-heading.has-heading-font-size {
	line-height: 1.05;
	letter-spacing: -0.035em;
}

.wp-block-heading.has-subhead-font-size {
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.wp-block-heading.has-card-font-size {
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* A heading that carries a script word gets room for the Sacramento descenders. */
.wp-block-heading:has(.khc-script) {
	line-height: 1.12;
	padding-bottom: 0.2em;
}

/* Lists in content: the brand » marker (core list blocks carry .wp-block-list). */
ul.wp-block-list:not(.is-style-khc-plain) {
	padding: 0;
	list-style: none;
}

ul.wp-block-list:not(.is-style-khc-plain) > li {
	position: relative;
	padding-left: 1.15em;
	margin-bottom: 0.5em;
}

ul.wp-block-list:not(.is-style-khc-plain) > li::before {
	content: "\00BB";
	position: absolute;
	left: 0;
	font-weight: 700;
	color: var(--khc-orange);
}

.is-style-khc-plain {
	padding: 0;
	list-style: none;
}

/* ======================================================================
   Paragraph styles
   ====================================================================== */
.is-style-khc-eyebrow {
	font-size: var(--khc-fs-eyebrow) !important;
	font-weight: 700;
	letter-spacing: var(--khc-track-eyebrow);
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--khc-charcoal);
}

/* The tile marker: three 12px squares drawn by one pseudo-element and two shadows. */
.is-style-khc-eyebrow-tiles {
	font-size: var(--khc-fs-eyebrow) !important;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--khc-charcoal);
}

.is-style-khc-eyebrow-tiles::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 60px;
	vertical-align: -1px;
	border-radius: 3px;
	background: var(--khc-turquoise);
	box-shadow: 22px 0 0 var(--khc-orange), 44px 0 0 var(--khc-yellow);
}

.has-text-align-center.is-style-khc-eyebrow-tiles::before {
	margin-right: 60px;
}

:is(.has-black-background-color, .has-charcoal-background-color) :is(.is-style-khc-eyebrow, .is-style-khc-eyebrow-tiles) {
	color: var(--khc-gray);
}

.is-style-khc-lead {
	font-size: var(--khc-fs-lead);
	font-weight: 500;
	line-height: 1.6;
	color: var(--khc-charcoal);
}

:is(.has-black-background-color, .has-charcoal-background-color) .is-style-khc-lead {
	color: var(--khc-gray);
}

/* A big statement set in ExtraBold (the corner-bracket banners). Size comes from the size picker. */
.is-style-khc-statement {
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

/* The sign-off line: Light 26px after a short yellow dash. */
/* The sign-off line as a callout (Kate, Oct. 2): yellow, all small caps, between two short yellow
   rules. Yellow on black; black on light grounds. */
.is-style-khc-signoff {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	font-size: clamp(1.375rem, 1vw + 1rem, 1.875rem) !important;
	font-weight: 700;
	font-variant-caps: all-small-caps;
	letter-spacing: 0.08em;
	line-height: 1.2;
	color: var(--khc-black);
}

:is(.has-black-background-color, .has-charcoal-background-color) .is-style-khc-signoff {
	color: var(--khc-yellow);
}

.is-style-khc-signoff::before,
.is-style-khc-signoff::after {
	content: "";
	flex: 0 0 28px;
	height: var(--khc-line);
	border-radius: 2px;
	background: var(--khc-yellow);
}

.has-text-align-left.is-style-khc-signoff {
	justify-content: flex-start;
}

/* ======================================================================
   Buttons: a black pill by default; turquoise; a text link
   ====================================================================== */
.wp-block-button .wp-block-button__link {
	padding: 20px 32px;
	border: 0;
	border-radius: 999px;
	background: var(--khc-black);
	color: var(--khc-white);
	font-family: var(--khc-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.wp-block-button .wp-block-button__link:hover {
	background: var(--khc-charcoal);
	color: var(--khc-white);
}

.wp-block-button.is-style-khc-turquoise .wp-block-button__link {
	background: var(--khc-turquoise);
	color: var(--khc-black);
}

.wp-block-button.is-style-khc-text .wp-block-button__link {
	text-align: left;
	padding: 0 0 3px;
	border-radius: 0;
	border-bottom: 2px solid currentColor;
	background: none;
	color: inherit;
	font-size: var(--khc-fs-small);
}

.wp-block-button.is-style-khc-text .wp-block-button__link:hover {
	background: none;
	color: var(--khc-charcoal);
}

:is(.has-black-background-color, .has-charcoal-background-color) .wp-block-button:not(.is-style-khc-text, .is-style-khc-turquoise) .wp-block-button__link {
	background: var(--khc-white);
	color: var(--khc-black);
}

/* ======================================================================
   Cards: rounded panels, optionally with a 4px color bar along the top
   ====================================================================== */
[class*="is-style-khc-card"] {
	position: relative;
	overflow: hidden;
	padding: 30px;
	border-radius: 16px;
}

[class*="is-style-khc-card-"]::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: var(--khc-line);
	background: var(--khc-card-bar, transparent);
}

[class*="is-style-khc-card-"] {
	padding-top: 34px;
}

.is-style-khc-card-turquoise { --khc-card-bar: var(--khc-turquoise); }
.is-style-khc-card-yellow { --khc-card-bar: var(--khc-yellow); }
.is-style-khc-card-orange { --khc-card-bar: var(--khc-orange); }
.is-style-khc-card-coral { --khc-card-bar: var(--khc-coral); }
.is-style-khc-card-blue { --khc-card-bar: var(--khc-blue); }
.is-style-khc-card-purple { --khc-card-bar: var(--khc-purple); }

[class*="is-style-khc-card"] > :first-child {
	margin-top: 0;
}

[class*="is-style-khc-card"] > :last-child {
	margin-bottom: 0;
}

/* ======================================================================
   Corner brackets: four 4px turquoise corners framing one statement per page
   ====================================================================== */
.is-style-khc-brackets {
	position: relative;
	padding: clamp(40px, 5vw, 72px) clamp(28px, 7.2vw, 104px);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 76' fill='none'%3E%3Cpath d='M2 74V14C2 7 7 2 14 2H74' stroke='%2372d3c5' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 76' fill='none'%3E%3Cpath d='M74 74V14C74 7 69 2 62 2H2' stroke='%2372d3c5' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 76' fill='none'%3E%3Cpath d='M2 2V62C2 69 7 74 14 74H74' stroke='%2372d3c5' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 76' fill='none'%3E%3Cpath d='M74 2V62C74 69 69 74 62 74H2' stroke='%2372d3c5' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: left top, right top, left bottom, right bottom;
	background-size: clamp(40px, 5.3vw, 76px) clamp(40px, 5.3vw, 76px);
	background-repeat: no-repeat;
}

/* ======================================================================
   Numbered steps: rows of numeral | title | text, ruled like board 10
   ====================================================================== */
.is-style-khc-steps {
	position: relative;
	max-width: 1040px;
	margin-inline: auto;
}

.is-style-khc-steps > .wp-block-columns {
	position: relative;
	gap: 40px;
	margin: 0 !important;
	padding: 0 0 48px;
}

/* Each part's rule runs on the same line as its numeral stub, so the stub reads as the rule's
   colored start; the eyebrow, title and text hang just below it (Kate, Oct. 1). */
.is-style-khc-steps > .wp-block-columns::before {
	content: "";
	position: absolute;
	top: 1.5px;
	left: 104px;
	right: 0;
	height: 1px;
	background: var(--khc-gray);
}

/* The first part's rule matches the rest: 1px gray (Kate, Oct. 2; it was 2px black). */

.is-style-khc-steps > .wp-block-columns > .wp-block-column:not(:first-child) {
	padding-top: 20px;
}

/* The numeral is an inline-flex box, so in a line box it dropped about 8px below the row top and
   the stub hung under the rule. As a flex item it starts at the row top, level with the rule. */
.is-style-khc-steps .khc-numeral,
.khc-path__steps .khc-numeral {
	display: flex;
}

.is-style-khc-steps .wp-block-column > * + * {
	margin-block-start: 12px;
}

@media (max-width: 781px) {
	/* Phones stack the numeral above the text: the rule runs full width with room under it,
	   then the color stub, a little room, then the digits (Kate, Oct. 1). */
	.is-style-khc-steps > .wp-block-columns::before {
		left: 0;
	}

	.is-style-khc-steps > .wp-block-columns {
		padding-top: 24px !important;
	}

	.is-style-khc-steps .khc-num,
	.khc-path__steps .khc-num {
		gap: 12px;
	}

	.is-style-khc-steps > .wp-block-columns {
		gap: 16px;
		padding: 0 0 32px;
	}

	.is-style-khc-steps > .wp-block-columns > .wp-block-column:not(:first-child) {
		padding-top: 0;
	}
}

/* ======================================================================
   Images: rounded; and the offset block in an offer color (hero photos)
   ====================================================================== */
.wp-block-image.is-style-khc-rounded img {
	border-radius: 24px;
}

.wp-block-image[class*="is-style-khc-offset-"] {
	position: relative;
	isolation: isolate;
	margin-right: 24px;
	margin-bottom: 24px;
}

.wp-block-image[class*="is-style-khc-offset-"]::before {
	content: "";
	position: absolute;
	z-index: -1;
	right: -24px;
	bottom: -24px;
	width: 48%;
	aspect-ratio: 1;
	max-width: 190px;
	border-radius: 16px;
	background: var(--khc-offset, var(--khc-yellow));
}

.wp-block-image[class*="is-style-khc-offset-"] img {
	display: block;
	border-radius: 16px;
}

.is-style-khc-offset-yellow { --khc-offset: var(--khc-yellow); }
.is-style-khc-offset-turquoise { --khc-offset: var(--khc-turquoise); }
.is-style-khc-offset-orange { --khc-offset: var(--khc-orange); }
.is-style-khc-offset-purple { --khc-offset: var(--khc-purple); }

@media (max-width: 781px) {
	.wp-block-image[class*="is-style-khc-offset-"] {
		margin-right: 14px;
		margin-bottom: 14px;
	}

	.wp-block-image[class*="is-style-khc-offset-"]::before {
		right: -14px;
		bottom: -14px;
	}
}

/* ---------- The pointer arrow: a yellow 4px stroke, as a separator style ---------- */
.wp-block-separator.is-style-khc-pointer {
	width: 240px;
	max-width: 100%;
	height: 104px;
	margin-left: 0 !important;
	border: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 96' fill='none' stroke='%23f3c427' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c10 40 60 70 176 62'/%3E%3Cpath d='M180 54l20 18-22 12'/%3E%3C/svg%3E") left center / contain no-repeat;
	opacity: 1;
}

/* On phones the cards sit below the heading: the arrow moves to the right, under the end of
   the line above and curves down and left to point at the first card (Kate, Oct. 1). */
@media (max-width: 781px) {
	.wp-block-separator.is-style-khc-pointer {
		width: 200px;
		height: 91px;
		margin-left: auto !important;
		margin-right: 8px !important;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 100' fill='none' stroke='%23f3c427' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M196 6C190 60 120 70 80 92'/%3E%3Cpath d='M89 74l-9 18 20 2'/%3E%3C/svg%3E");
	}
}


/* ======================================================================
   KHC blocks: numeral, chips, case-study cards, Insights cards
   ====================================================================== */
.khc-numeral {
	line-height: 1;
}

.khc-chip {
	align-self: flex-start;
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.3;
	text-transform: uppercase;
}

.khc-case__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--khc-charcoal);
}

/* Home: three listed cases left, the featured case right (board 10). */
.khc-cases--home {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 32px;
	align-items: stretch;
}

.khc-cases__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.khc-case-row {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 20px;
	padding: 26px 28px;
	border-radius: 20px;
	background: var(--khc-white);
	color: var(--khc-black);
	text-decoration: none;
}

.khc-case-row__ring {
	width: 36px;
	height: 36px;
	border: var(--khc-line) solid var(--khc-turquoise);
	border-radius: 50%;
}

.khc-case-row__text,
.khc-case-feature__body,
.khc-case-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.khc-case-row .khc-case__eyebrow {
	font-size: 11px;
}

.khc-case-row__title {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.khc-case-row__summary,
.khc-case-card__summary {
	font-size: 15px;
	line-height: 1.55;
	color: var(--khc-charcoal);
}

.khc-case-feature {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 20px;
	background: var(--khc-white);
	color: var(--khc-black);
	text-decoration: none;
}

.khc-case-feature__media {
	position: relative;
	display: block;
	height: clamp(220px, 25vw, 360px);
	background: var(--khc-turquoise);
}

.khc-case-feature__media img,
.khc-case-card__media img,
.khc-insight-card__strip img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.khc-case-feature__ring {
	display: none; /* Removed (Kate, Oct. 1): decorative, no job. */
	position: absolute;
	left: 28px;
	bottom: 28px;
	width: 72px;
	height: 72px;
	border: var(--khc-line) solid var(--khc-white);
	border-radius: 50%;
}

.khc-case-feature__body {
	gap: 12px;
	padding: 32px;
}

.khc-case-feature__title {
	font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.khc-case-feature__summary {
	font-size: 16px;
	line-height: 1.6;
	color: var(--khc-charcoal);
}

.khc-case-row:hover .khc-case-row__title,
.khc-case-feature:hover .khc-case-feature__title,
.khc-case-card:hover .khc-case-card__title,
.khc-insight-card:hover .khc-insight-card__title {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Grid of case study cards. */
.khc-cases--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 24px;
}

.khc-case-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 20px;
	background: var(--khc-light);
	color: var(--khc-black);
	text-decoration: none;
}

.khc-case-card__media {
	display: block;
	height: 220px;
	background: var(--khc-gray);
}

.khc-case-card__body {
	padding: 28px 32px 32px;
}

.khc-case-card__title {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
}

@media (max-width: 900px) {
	.khc-cases--home {
		grid-template-columns: 1fr;
	}

	.khc-case-feature {
		order: -1;
	}
}

/* Insights, home: the featured essay on black, two posts stacked beside it. */
.khc-insights--home {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.khc-insight-feature {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	padding: 40px;
	border-radius: 20px;
	background: var(--khc-black);
	color: var(--khc-white);
	text-decoration: none;
}

.khc .khc-insight-feature,
.khc .khc-insight-feature:hover,
.editor-styles-wrapper .khc-insight-feature {
	color: var(--khc-white);
}

.khc-insight-feature__text {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.khc-insight-feature__title {
	font-size: clamp(1.625rem, 1.4vw + 1rem, 2.25rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
}

.khc-insight-feature__dek {
	font-size: 16px;
	line-height: 1.6;
	color: var(--khc-gray);
}

.khc-insight-feature__more {
	font-size: 14px;
	font-weight: 700;
	color: var(--khc-turquoise);
}

.khc-insights__stack {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.khc-insight-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	flex-grow: 1;
	padding: 32px;
	border-radius: 20px;
	background: var(--khc-light);
	color: var(--khc-black);
	text-decoration: none;
}

.khc-insight-card__title {
	font-size: clamp(1.25rem, 0.6vw + 1rem, 1.5rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.khc-insight-card__more {
	font-size: 14px;
	font-weight: 700;
}

/* Insights, cards: a 120px image strip from the featured image. */
.khc-insights--cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 24px;
}

.khc-insight-card--image {
	justify-content: flex-start;
	gap: 0;
	overflow: hidden;
	padding: 0;
}

.khc-insight-card__strip {
	display: block;
	height: 120px;
	background: var(--khc-gray);
}

/* A post without a featured image shows its share card: the eyebrow and the start of the title. */
.khc-insight-card__strip.is-share-card {
	background: var(--khc-white);
	border-bottom: 1px solid var(--khc-hairline);
}

.khc-insight-card__strip.is-share-card img {
	object-position: 0 22%;
}

.khc-insight-card__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex-grow: 1;
	padding: 28px 32px 32px;
}

.khc-insight-card__dek {
	font-size: 15px;
	line-height: 1.6;
	color: var(--khc-charcoal);
}

.khc-insight-card--image .khc-insight-card__more {
	margin-top: auto;
}

.is-gray .khc-insight-card,
.has-light-background-color .khc-insight-card {
	background: var(--khc-white);
}

@media (max-width: 900px) {
	.khc-insights--home {
		grid-template-columns: 1fr;
	}
}

/* ======================================================================
   Pattern details
   ====================================================================== */
/* Hero: the photo sits at the right edge of its column; the proof line is small and tight. */
.khc-hero__cols {
	gap: clamp(32px, 5vw, 64px);
}

.khc-hero .wp-block-image[class*="is-style-khc-offset-"] {
	margin-left: auto;
}

.khc-proof {
	gap: 28px;
	margin-top: 40px !important;
	line-height: 1.55;
}

.khc-proof > .wp-block-column {
	padding-top: 14px;
	border-top: 2px solid var(--khc-black);
}

.khc-proof p {
	margin: 0;
}

@media (max-width: 781px) {
	.khc-hero__cols:not(.khc-hero__cols--text-first) > .wp-block-column:last-child {
		order: -1;
	}

	.khc-hero .wp-block-image[class*="is-style-khc-offset-"] {
		margin-left: 0;
	}

	.khc-hero .wp-block-image[class*="is-style-khc-offset-"] img {
		width: min(100%, 300px) !important;
	}

	.khc-proof {
		gap: 16px;
		margin-top: 32px !important;
	}
}

/* Section heads center their eyebrow, heading and link, and may run wider than the text column. */
.khc-section-head {
	text-align: center;
}

.khc-section > .khc-section-head {
	max-width: var(--khc-content);
}

/* The steps' eyebrow is a size smaller than the page's. */
.khc-step .is-style-khc-eyebrow {
	font-size: 12px !important;
	letter-spacing: 0.16em;
}

.khc-step p:last-child {
	margin-bottom: 0;
}

/* ======================================================================
   Services components (SiteServices board)
   ====================================================================== */
/* Image band: a full-width photo, 24px corners, 420px tall on desktop. The focal point sets the crop. */
.wp-block-image.is-style-khc-band img {
	width: 100%;
	height: clamp(220px, 29vw, 420px) !important;
	object-fit: cover;
	border-radius: 24px;
}

/* A placeholder step: dashed gray border and a gray bar. */
.is-style-khc-card-dashed {
	position: relative;
	overflow: hidden;
	padding: 34px 32px 32px;
	border: 2px dashed var(--khc-gray);
	border-radius: 20px;
}

.is-style-khc-card-dashed::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: var(--khc-line);
	background: var(--khc-gray);
}

/* Outlined card: a 4px black border (the "Built for you" card). */
.is-style-khc-outline {
	padding: clamp(28px, 3vw, 36px) clamp(24px, 3.2vw, 44px);
	border: var(--khc-line) solid var(--khc-black);
	border-radius: 20px;
}

/* Short color bar above a title: 56 × 4px. The color comes from the separator's color setting. */
.wp-block-separator.is-style-khc-bar {
	width: 56px !important;
	max-width: 56px;
	height: var(--khc-line);
	margin-left: 0 !important;
	border: 0;
	border-radius: 2px;
	opacity: 1;
}

.wp-block-separator.is-style-khc-bar:not(.has-background) {
	background: var(--khc-turquoise);
}

/* Bordered cards on the Services board carry a 1px gray line; borders set in the editor show as set. */
[class*="is-style-khc-card"].has-border-color {
	border-style: solid;
}

/* Compare table: label column, then one column per offer with its color bar in the header. */
.wp-block-table.is-style-khc-compare {
	overflow-x: auto;
	padding: 40px 48px;
	border-radius: 20px;
	background: var(--khc-white);
}

.wp-block-table.is-style-khc-compare table {
	min-width: 720px;
	border-collapse: collapse;
	border: 0;
	font-size: 16px;
	line-height: 1.55;
}

.wp-block-table.is-style-khc-compare :is(th, td) {
	padding: 22px 24px 22px 0;
	border: 0;
	border-top: 1px solid var(--khc-gray);
	text-align: left;
	vertical-align: top;
	color: var(--khc-charcoal);
}

.wp-block-table.is-style-khc-compare thead :is(th, td) {
	padding-top: 0;
	border-top: 0;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--khc-black);
}

.wp-block-table.is-style-khc-compare thead :is(th, td):not(:first-child)::before {
	content: "";
	display: block;
	width: 56px;
	height: var(--khc-line);
	margin-bottom: 12px;
	border-radius: 2px;
	background: var(--khc-turquoise);
}

.wp-block-table.is-style-khc-compare thead :is(th, td):nth-child(3)::before {
	background: var(--khc-orange);
}

.wp-block-table.is-style-khc-compare thead :is(th, td):nth-child(4)::before {
	background: var(--khc-purple);
}

.wp-block-table.is-style-khc-compare tbody td:first-child {
	width: 200px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.wp-block-table.is-style-khc-compare tbody td strong {
	font-size: 18px;
	font-weight: 800;
	color: var(--khc-black);
}

.wp-block-table.is-style-khc-compare thead {
	border: 0;
}

/* Phones: the table stacks. Each row becomes its label, then each offer's answer under that
   offer's name and color bar (names come from the header via assets/js/blocks.js). */
@media (max-width: 781px) {
	.wp-block-table.is-style-khc-compare {
		overflow: visible;
		padding: 28px 24px;
	}

	.wp-block-table.is-style-khc-compare table {
		min-width: 0;
	}

	.wp-block-table.is-style-khc-compare thead {
		display: none;
	}

	.wp-block-table.is-style-khc-compare :is(tbody, tr, td) {
		display: block;
		width: auto !important;
	}

	.wp-block-table.is-style-khc-compare tbody tr + tr {
		margin-top: 28px;
	}

	.wp-block-table.is-style-khc-compare tbody td {
		padding: 14px 0 0;
		border-top: 0;
	}

	.wp-block-table.is-style-khc-compare tbody td:first-child {
		padding: 0 0 4px;
		border-bottom: 1px solid var(--khc-gray);
	}

	.wp-block-table.is-style-khc-compare tbody td[data-label]:not(:first-child)::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 4px;
		padding-top: 12px;
		background: no-repeat left top / 56px 4px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='4'%3E%3Crect width='56' height='4' rx='2' fill='%2372d3c5'/%3E%3C/svg%3E");
		font-size: 13px;
		font-weight: 800;
		color: var(--khc-black);
	}

	.wp-block-table.is-style-khc-compare tbody td[data-label]:nth-child(3)::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='4'%3E%3Crect width='56' height='4' rx='2' fill='%23f18c4f'/%3E%3C/svg%3E");
	}

	.wp-block-table.is-style-khc-compare tbody td[data-label]:nth-child(4)::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='4'%3E%3Crect width='56' height='4' rx='2' fill='%237a59a2'/%3E%3C/svg%3E");
	}
}

/* Case study cards in a row (Services, For Consulting Firms): the ring cards, three across. */
.khc-cases--row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 24px;
}

.khc-cases--row .khc-case-row {
	padding: 28px;
	background: var(--khc-light);
}

.khc-cases--row .khc-case-row__ring {
	background: var(--khc-white);
}

.khc-cases--row .khc-case-row__title {
	font-size: 24px;
}

/* The Services path: each band pairs phases with the offer card they lead to (phase one with The
   Story Audit; two and three with The Story System), so a tall card pushes the next phase down
   instead of running past it. Rules sit above each phase, as on the board: 2px black over the
   first, 1px gray after. */
.khc-path + .khc-path {
	margin-block-start: 0 !important;
}

.khc-path > .wp-block-column:last-child {
	display: flex;
	flex-direction: column;
	padding-top: 20px;
	padding-bottom: 24px;
}

.khc-path__steps > .khc-step {
	position: relative;
	gap: 36px;
	margin: 0 !important;
	padding: 0 0 48px;
}

.khc-path__steps > .khc-step > .wp-block-column:not(:first-child) {
	padding-top: 20px;
}

.khc-path__steps > .khc-step::before {
	content: "";
	position: absolute;
	top: 1.5px;
	left: 100px;
	right: 0;
	height: 1px;
	background: var(--khc-gray);
}

/* The first part's rule matches the rest: 1px gray (Kate, Oct. 2; it was 2px black). */

.khc-path__steps .wp-block-column > * + * {
	margin-block-start: 12px;
}

@media (max-width: 781px) {
	/* As in Numbered steps: on phones the rule runs full width with room under it. */
	.khc-path__steps > .khc-step::before {
		left: 0;
	}

	.khc-path__steps > .khc-step {
		padding-top: 24px !important;
	}

	.khc-path__steps > .khc-step {
		gap: 16px !important;
	}

	.khc-path__steps > .khc-step > .wp-block-column:not(:first-child) {
		padding-top: 0;
	}

	.khc-path > .wp-block-column:last-child {
		padding-top: 0;
	}
}

/* The Advisory card: black, rounded, a white brand mark beside the copy. */
.khc-dark-card {
	padding: clamp(32px, 3.4vw, 44px) clamp(24px, 3.4vw, 48px);
	border-radius: 24px;
}

.khc-dark-card .wp-block-image img {
	width: 56px;
	height: auto;
}

/* Section spacing for the text hero, the band under it and sections that sit flush under the one above. */
.khc-section.khc-page-hero {
	padding-block: clamp(56px, 6.5vw, 96px) clamp(40px, 4.5vw, 64px);
}

.khc-page-hero .wp-block-heading {
	max-width: 1000px;
}

.khc-page-hero .is-style-khc-lead {
	max-width: 780px;
}

.khc-section.khc-band-section {
	padding-top: 0;
	padding-bottom: clamp(56px, 6.5vw, 96px);
}

.khc-section.khc-section--flush {
	padding-top: 0;
	padding-bottom: 0;
}

/* Sits flush under the section above (offer "What you'll uncover", the Case Studies client cards). */
.khc-section.khc-section--flush-top {
	padding-top: 0;
}

/* ======================================================================
   Offer pages (SiteStoryAudit / SiteFirmStory / SiteAdvisory)
   ====================================================================== */
/* Step count (SPEC §7, B1): a 2 × 3 count before the hero eyebrow on the three offer pages, filled to
   the step (turquoise, yellow, orange; gray for the rest). Replaces the tile marker there. Decorative:
   the text says the step. */
:is(.is-style-khc-step-1, .is-style-khc-step-2, .is-style-khc-step-3) {
	position: relative;
	min-height: 42px;
	display: flex;
	align-items: center;
	padding-left: 43px;
	font-size: var(--khc-fs-eyebrow) !important;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--khc-charcoal);
}

:is(.is-style-khc-step-1, .is-style-khc-step-2, .is-style-khc-step-3)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -21px;
}

.is-style-khc-step-1::before {
	background: var(--khc-turquoise);
	box-shadow: 15px 0px 0 var(--khc-gray), 0px 15px 0 var(--khc-gray), 15px 15px 0 var(--khc-gray), 0px 30px 0 var(--khc-gray), 15px 30px 0 var(--khc-gray);
}

.is-style-khc-step-2::before {
	background: var(--khc-turquoise);
	box-shadow: 15px 0px 0 var(--khc-yellow), 0px 15px 0 var(--khc-gray), 15px 15px 0 var(--khc-gray), 0px 30px 0 var(--khc-gray), 15px 30px 0 var(--khc-gray);
}

.is-style-khc-step-3::before {
	background: var(--khc-turquoise);
	box-shadow: 15px 0px 0 var(--khc-yellow), 0px 15px 0 var(--khc-orange), 15px 15px 0 var(--khc-gray), 0px 30px 0 var(--khc-gray), 15px 30px 0 var(--khc-gray);
}

/* The back link above the hero ("← All services"). */
.khc-backlink {
	font-size: 14px !important;
	font-weight: 600;
}

.khc-backlink a {
	color: var(--khc-charcoal);
}

/* "What you'll uncover / get": a 4px rule in the offer color, the label, then three numbered lines. */
.khc-uncover {
	padding-top: 32px;
	border-top-style: solid;
}

.khc-uncover .khc-uncover__item {
	gap: 16px;
}

.khc-uncover .khc-uncover__item > .khc-numeral {
	flex-shrink: 0;
	/* Lift so the digits' tops meet the cap height of the text's first line and the stub sits
	   above it (Kate, Oct. 1). Measured: stub 4px + gap 5.4px, less the 22px text's half-leading
	   and the difference in cap offset between 36px digits and 22px text. */
	margin-top: -19px;
}

.khc-uncover .khc-uncover__item p {
	margin: 0;
	font-size: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
	font-weight: 800;
	line-height: 1.3;
}

/* Headings with the orange » marker (Who it's for). */
.wp-block-heading.is-style-khc-chevron::before {
	content: "\00BB\00A0";
	font-weight: 700;
	color: var(--khc-orange);
}

/* The self-quote: Kate's name in small caps, and a source link underlined in yellow. */
.is-style-khc-byline {
	font-size: 20px !important;
	font-weight: 600;
	font-variant-caps: all-small-caps;
	letter-spacing: 0.08em;
	line-height: 1.3;
}

.is-style-khc-source {
	font-size: 14px !important;
	font-weight: 700;
}

.is-style-khc-source a {
	padding-bottom: 2px;
	border-bottom: 2px solid var(--khc-yellow);
	color: var(--khc-charcoal);
}

/* FAQ: each question a native <details>, ruled above, with a plus that turns to a minus. */
.wp-block-details.is-style-khc-faq {
	margin: 0 !important;
	padding: 28px 0;
	border-top: 1px solid var(--khc-gray);
}

.wp-block-details.is-style-khc-faq:last-child {
	border-bottom: 1px solid var(--khc-gray);
}

.wp-block-details.is-style-khc-faq summary {
	position: relative;
	padding-right: 48px;
	font-size: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
	font-weight: 800;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

.wp-block-details.is-style-khc-faq summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.is-style-khc-faq summary::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 50%;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wp-block-details.is-style-khc-faq[open] summary::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M4 12h16'/%3E%3C/svg%3E");
}

.wp-block-details.is-style-khc-faq > :not(summary) {
	margin-top: 10px;
	font-size: 17px;
	color: var(--khc-charcoal);
}

/* The investment card: black, rounded, price large, » list in yellow, turquoise button. */
.khc-invest {
	padding: clamp(32px, 3vw, 44px);
	border-radius: 24px;
}

/* More room under the price (Kate, Oct. 1). Set on what follows, since margins collapse into the layout gap. */
.khc-invest .khc-invest__price + * {
	margin-block-start: 40px !important;
}

.khc-invest ul.wp-block-list {
	margin: 0;
	font-size: 17px;
}

.khc-invest ul.wp-block-list > li::before {
	color: var(--khc-yellow);
}

/* "Not the right fit": set off by a thin rule. */
.khc-not-fit {
	padding-top: 24px;
	border-top: 1px solid var(--khc-gray);
}

/* "Then what?" path cards: the current offer in black. Numerals turn white on black. */
.khc-path-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	border-radius: 20px;
}

:is(.has-black-background-color, .has-charcoal-background-color) .khc-num__digits {
	color: var(--khc-white);
}

.khc-path-card .is-style-khc-eyebrow {
	font-size: 11px !important;
}

.khc-path-card .khc-here {
	margin-top: auto;
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--khc-turquoise);
}

.khc-path-card .wp-block-buttons {
	margin-top: auto;
}

/* ======================================================================
   How I Work (SiteHowIWork board)
   ====================================================================== */
/* A list of lines separated by thin rules (the "Questions I ask your clients" card). */
.khc-rule-list > p {
	margin: 0 !important;
	padding: 18px 0;
	border-top: 1px solid var(--khc-gray);
}

.khc-rule-list > p:last-child {
	border-bottom: 1px solid var(--khc-gray);
}

/* Method rows: a big numeral, a color bar over the title, then the text; 2px black rule above each. */
.khc-method > .wp-block-columns {
	margin: 0 !important;
	padding: 44px 0;
	border-top: 2px solid var(--khc-black);
}

.khc-numeral--xl .khc-num__digits {
	line-height: 0.9;
	letter-spacing: -0.05em;
}

@media (max-width: 781px) {
	.khc-method > .wp-block-columns {
		gap: 16px;
		padding: 32px 0;
	}

	.khc-numeral--xl .khc-num {
		--num-size: 64px !important;
	}
}

/* Career timeline: colored stops on a 4px black line that runs off the right edge of the page.
   Each stop's ring takes the stop's border color (Border panel). Phones: a vertical line. */
.khc-timeline {
	position: relative;
}

.khc-timeline::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 16px;
	left: 18px;
	right: calc(-1 * var(--khc-pad) - (100vw - min(100vw, var(--khc-content) + 2 * var(--khc-pad))) / 2);
	height: var(--khc-line);
	background: var(--khc-charcoal); /* charcoal, not black (Kate, Oct. 2) */
}

.khc-timeline > .khc-stop {
	position: relative;
	z-index: 1;
	padding-top: 60px;
	border-style: none !important;
}

.khc-timeline > .khc-stop::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 36px;
	height: 36px;
	border: var(--khc-line) solid;
	border-color: inherit;
	border-radius: 50%;
	background: var(--khc-white);
}

.khc-timeline > .khc-stop:not(.has-border-color)::before {
	border-color: var(--khc-turquoise);
}

.khc-stop > * + * {
	margin-top: 8px !important;
}

.khc-stop p {
	margin: 0;
}

.khc-section:has(.khc-timeline) {
	overflow: hidden;
}

@media (max-width: 781px) {
	.khc-timeline {
		grid-template-columns: 1fr !important;
		row-gap: 32px !important;
	}

	.khc-timeline::before {
		top: 18px;
		bottom: 0;
		left: 16px;
		right: auto;
		width: var(--khc-line);
		height: auto;
	}

	.khc-timeline > .khc-stop {
		padding-top: 0;
		padding-left: 56px;
	}
}

/* Columns under a 4px color rule (Working together). The rule's color is the group's top border. */
.khc-topline {
	padding-top: 20px;
	border-top-style: solid;
}

.khc-topline > * {
	margin-top: 0;
}

/* ======================================================================
   Single case study (single-portfolio.php, SiteCaseStudy board)
   ====================================================================== */
.khc-case .khc-wrap-inner,
.khc-case__image,
.khc-case__glance,
.khc-case__body,
.khc-case__next {
	width: min(100% - 2 * var(--khc-pad), var(--khc-content));
	margin-inline: auto;
}

.khc-section.khc-case__hero {
	padding: clamp(48px, 5vw, 72px) 0 48px;
}

.khc-case__hero .khc-wrap-inner {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.khc-case__hero .khc-wrap-inner > * {
	margin: 0;
}

.khc-case__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.khc-case__crumbs .khc-backlink {
	font-size: 14px;
	font-weight: 600;
	color: var(--khc-charcoal);
}

.khc-case__title {
	max-width: 1100px;
	font-size: var(--wp--preset--font-size--page);
	line-height: 1.02;
}

.khc-case__lead {
	max-width: 820px;
}

.khc-case__image img {
	display: block;
	width: 100%;
	height: clamp(260px, 36vw, 520px);
	object-fit: cover;
	border-radius: 24px;
}

/* Square and tall screenshots: the whole image, centered on a light gray banner of the same size. */
.khc-case__image.is-contain {
	display: flex;
	justify-content: center;
	height: clamp(260px, 36vw, 520px);
	padding: clamp(20px, 3vw, 40px);
	border-radius: 24px;
	background: var(--khc-light);
}

.khc-case__image.is-contain img {
	width: auto;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgb(17 17 17 / 0.08), 0 12px 32px rgb(17 17 17 / 0.10);
}

.khc-case__glance {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	margin-block: 48px 32px;
}

.khc-case__glance > div {
	padding-top: 14px;
	border-top: 2px solid var(--khc-black);
}

.khc-case__glance dt {
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--khc-charcoal);
}

.khc-case__glance dd {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45;
}

.khc-case__body {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
	gap: clamp(32px, 7vw, 104px);
	align-items: start;
	padding-block: 64px 96px;
}

.khc-case__toc {
	position: sticky;
	top: 24px;
}

.khc-case__toc ul {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.khc .khc-case__toc a {
	display: block;
	padding: 10px 0 10px 16px;
	border-left: var(--khc-line) solid var(--khc-gray);
	font-size: 15px;
	font-weight: 500;
	color: var(--khc-charcoal);
}

.khc .khc-case__toc a[aria-current] {
	border-left-color: var(--khc-turquoise);
	font-weight: 700;
	color: var(--khc-black);
}

.khc-case__body:not(:has(.khc-case__toc)) {
	grid-template-columns: minmax(0, 1fr);
	max-width: 900px;
}

/* The story: section heads at 40px, 64px between sections. */
.khc-case__story > :not(.alignfull) {
	width: 100%;
	max-width: none;
}

.khc-case__story > h2 {
	margin-top: 64px;
	font-size: var(--wp--preset--font-size--title);
	letter-spacing: -0.025em;
	scroll-margin-top: 24px;
}

.khc-case__story > h2:first-child {
	margin-top: 0;
}

.khc-case__story > h2 + * {
	margin-top: 20px;
}

.khc-case__story > p {
	color: var(--khc-charcoal);
}

.khc-case__story ul.wp-block-list > li {
	font-size: 17px;
	color: var(--khc-black);
}

.khc-section.khc-case__quote {
	padding-inline: var(--khc-pad);
}

.khc-case__quote .is-style-khc-brackets {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	max-width: var(--khc-content);
	margin-inline: auto;
}

.khc-case__quote .is-style-khc-brackets p {
	max-width: 1000px;
	margin: 0;
}

.khc-case__next {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	margin-top: 88px;
	padding-block: 40px;
	border-top: 2px solid var(--khc-black);
	border-bottom: 2px solid var(--khc-black);
}

.khc .khc-case__all {
	font-size: 15px;
	font-weight: 700;
}

.khc .khc-case__nextlink {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	text-align: right;
}

.khc-case__nexttitle {
	font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

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

	.khc-case__body {
		grid-template-columns: minmax(0, 1fr);
		padding-block: 40px 64px;
	}

	.khc-case__toc {
		display: none;
	}
}

/* Results inside a story: three stat cards. */
.khc-stats {
	gap: 20px !important;
}

/* A lone stat card spans the row: the number beside its line. */
.khc-stats > .khc-stat:only-child {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 28px;
}

.khc-stats > .khc-stat:only-child p:not(.khc-stat__number) {
	flex: 1 1 260px;
	font-size: 17px;
}

.khc-stat .khc-stat__number {
	margin: 0;
	font-size: clamp(2.25rem, 2vw + 1.25rem, 2.75rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--khc-black);
}

.khc-stat p:not(.khc-stat__number) {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--khc-charcoal);
}

/* A quote inside the story (core Quote). The corner brackets belong to the testimonial banner,
   one per page, so a quote in the story takes the 4px turquoise rule at its left instead. */
.khc-case__story > .wp-block-quote {
	margin-block: 40px;
	padding: 4px 0 4px 28px;
	border-left: var(--khc-line) solid var(--khc-turquoise);
}

.khc-case__story > .wp-block-quote p {
	margin: 0;
	font-size: clamp(1.375rem, 0.8vw + 1.05rem, 1.75rem);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--khc-black);
}

.khc-case__story > .wp-block-quote cite {
	display: block;
	margin-top: 16px;
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
	color: var(--khc-charcoal);
}

/* Jetpack Slideshow in "What We Built": a light gray stage at 16:10, each slide shown whole and
   centered, round black arrows and a small counter underneath. Jetpack sizes the frame from the
   first slide, so mixed sets (wide pages, then tall ones) get one steady frame instead. */
.khc-case__story > .wp-block-jetpack-slideshow {
	margin-block: 32px 40px;
}

.khc-case__story .wp-block-jetpack-slideshow_container {
	container-type: inline-size;
	border-radius: 20px;
	background: var(--khc-light);
}

.khc-case__story .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_container ul.wp-block-jetpack-slideshow_swiper-wrapper {
	/* The wrapper is as wide as every slide together, so the 16:10 comes from the frame's width. */
	height: min(62.5cqw, 75vh) !important;
	max-height: none;
}

.khc-case__story .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide figure {
	height: 100%;
	min-height: 0;
}

.khc-case__story .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide figure {
	box-sizing: border-box;
	padding: clamp(16px, 3vw, 36px) clamp(16px, 6vw, 72px);
}

.khc-case__story .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_image {
	max-height: 100%;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgb(17 17 17 / 0.08), 0 10px 28px rgb(17 17 17 / 0.10);
}

.khc-case__story .wp-block-jetpack-slideshow :is(.wp-block-jetpack-slideshow_button-prev, .wp-block-jetpack-slideshow_button-next) {
	top: 50%;
	width: 44px;
	height: 44px;
	margin: 0;
	transform: translateY(-50%);
	border-radius: 50%;
	background-color: var(--khc-black);
	background-image: none !important;
	opacity: 1;
}

.khc-case__story .wp-block-jetpack-slideshow .swiper-navigation-icon {
	display: none;
}

.khc-case__story .wp-block-jetpack-slideshow :is(.wp-block-jetpack-slideshow_button-prev, .wp-block-jetpack-slideshow_button-next)::after {
	content: "←";
	display: grid;
	place-items: center;
	height: 100%;
	font-family: var(--khc-font);
	font-size: 18px;
	font-weight: 700;
	color: var(--khc-white);
}

.khc-case__story .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-next::after {
	content: "→";
}

.khc-case__story .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-prev { left: 16px; }
.khc-case__story .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-next { right: 16px; }

.khc-case__story .wp-block-jetpack-slideshow :is(.wp-block-jetpack-slideshow_button-prev, .wp-block-jetpack-slideshow_button-next):is(:hover, :focus-visible) {
	background-color: var(--khc-charcoal);
}

.khc-case__story .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_pagination .swiper-pagination-simple {
	padding: 0 0 14px 20px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--khc-charcoal);
}

/* ======================================================================
   Case Studies index (SiteCaseStudies board)
   ====================================================================== */
/* Filter chips: anchor links to each section; the first filled, the rest outlined. */
.wp-block-button:is(.is-style-khc-chip, .is-style-khc-chip-outline) .wp-block-button__link {
	padding: 10px 18px;
	border: 2px solid var(--khc-black);
	font-size: 14px;
}

.wp-block-button.is-style-khc-chip-outline .wp-block-button__link {
	background: transparent;
	color: var(--khc-black);
}

.wp-block-button.is-style-khc-chip-outline .wp-block-button__link:hover {
	background: var(--khc-light);
	color: var(--khc-black);
}

.khc-chips {
	gap: 12px !important;
	padding-top: 24px;
	border-top: 1px solid var(--khc-gray);
}

/* The featured client case: image left, story right. */
.khc-client-feature {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	overflow: hidden;
	border-radius: 24px;
	background: var(--khc-light);
	color: var(--khc-black);
	text-decoration: none;
}

.khc-client-feature__media,
.khc-client-card__media {
	position: relative;
	display: block;
	min-height: 480px;
	background: var(--khc-turquoise);
}

.khc-client-card__media {
	min-height: 220px;
	height: 220px;
}

.khc-client-feature__media img,
.khc-client-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.khc-client-feature__body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	padding: clamp(28px, 3.3vw, 48px);
}

.khc-client-feature__top {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.khc-client-feature__title {
	font-size: clamp(1.75rem, 1.6vw + 1rem, 2.5rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.khc-client-feature__summary {
	font-size: 18px;
	line-height: 1.6;
	color: var(--khc-charcoal);
}

.khc-client-feature__foot {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 20px;
	border-top: 1px solid var(--khc-gray);
}

.khc-client-feature__services {
	font-size: 14px;
	color: var(--khc-charcoal);
}

.khc-client-feature__more {
	font-size: 15px;
	font-weight: 700;
}

.khc-client-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 32px;
	margin-top: 32px;
}

.khc-client-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 24px;
	background: var(--khc-light);
	color: var(--khc-black);
	text-decoration: none;
}

.khc-client-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-grow: 1;
	padding: 32px;
}

.khc-client-card__body .khc-client-feature__more {
	margin-top: auto;
	padding-top: 6px;
}

.khc-client-card__title {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.khc-client-soon {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 32px;
	border: 2px dashed var(--khc-gray);
	border-radius: 24px;
	text-align: center;
}

.khc-client-soon__title {
	font-size: 22px;
	font-weight: 800;
}

.khc-client-soon__text {
	font-size: 14px;
	color: var(--khc-charcoal);
}

@media (max-width: 900px) {
	.khc-client-feature {
		grid-template-columns: 1fr;
	}

	.khc-client-feature__media {
		min-height: 260px;
	}
}

/* Career rows: ring | name | role | text. The ring takes the row's Border color. */
.is-style-khc-ring-row {
	position: relative;
	display: grid;
	grid-template-columns: 36px 280px 260px minmax(0, 1fr);
	align-items: center;
	column-gap: 0;
	margin: 0 !important;
	padding: 26px 0;
	border-style: none !important;
	border-top: 1px solid var(--khc-gray) !important;
}

.is-style-khc-ring-row:last-child {
	border-bottom: 1px solid var(--khc-gray) !important;
}

.is-style-khc-ring-row::before {
	content: "";
	width: 36px;
	height: 36px;
	box-sizing: border-box;
	border: var(--khc-line) solid;
	border-color: var(--khc-row-ring, var(--khc-turquoise));
	border-radius: 50%;
	background: var(--khc-white);
}

.is-style-khc-ring-row > * {
	margin: 0 !important;
	padding-left: 24px;
}

.is-style-khc-ring-row .khc-ring-row__name {
	margin: 0;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
}

.is-style-khc-ring-row .khc-ring-row__years {
	margin: 0;
}

@media (max-width: 900px) {
	.is-style-khc-ring-row {
		grid-template-columns: 36px minmax(0, 1fr);
		row-gap: 6px;
		align-items: start;
	}

	.is-style-khc-ring-row::before {
		grid-row: span 3;
	}

	.is-style-khc-ring-row > * {
		padding-left: 18px;
	}
}

/* Side-project rows: small ring | name | text, two columns of them. */
.is-style-khc-mini-row {
	position: relative;
	display: grid;
	grid-template-columns: 28px 220px minmax(0, 1fr);
	align-items: baseline;
	margin: 0 !important;
	padding: 18px 0;
	border-style: none !important;
	border-top: 1px solid var(--khc-gray) !important;
}

.is-style-khc-mini-row::before {
	content: "";
	width: 14px;
	height: 14px;
	box-sizing: border-box;
	border: var(--khc-line) solid;
	border-color: var(--khc-row-ring, var(--khc-turquoise));
	border-radius: 50%;
}

.is-style-khc-mini-row > * {
	margin: 0 !important;
}

.is-style-khc-mini-row > p:first-child {
	font-size: 17px;
	font-weight: 800;
}

.is-style-khc-mini-row > p:last-child {
	font-size: 15px;
	line-height: 1.5;
	color: var(--khc-charcoal);
}

.khc-mini-list {
	column-gap: 40px !important;
	row-gap: 0 !important;
}

@media (max-width: 900px) {
	.is-style-khc-mini-row {
		grid-template-columns: 28px minmax(0, 1fr);
	}

	.is-style-khc-mini-row > p:last-child {
		grid-column: 2;
	}
}

/* The same stack whenever the list's own column is narrow (two columns of rows on a small laptop),
   whatever the window width: the text goes under the name instead of into a sliver (Kate, Oct. 10). */
.khc-mini-list {
	container-type: inline-size;
}

@container (max-width: 480px) {
	.is-style-khc-mini-row {
		grid-template-columns: 28px minmax(0, 1fr);
	}

	.is-style-khc-mini-row > p:last-child {
		grid-column: 2;
		margin-top: 4px !important;
	}
}

/* Ring colors come from the row's border color (Border panel). */
:is(.is-style-khc-ring-row, .is-style-khc-mini-row, .is-style-khc-proof).has-turquoise-border-color { --khc-row-ring: var(--khc-turquoise); }
:is(.is-style-khc-ring-row, .is-style-khc-mini-row, .is-style-khc-proof).has-yellow-border-color { --khc-row-ring: var(--khc-yellow); }
:is(.is-style-khc-ring-row, .is-style-khc-mini-row, .is-style-khc-proof).has-orange-border-color { --khc-row-ring: var(--khc-orange); }
:is(.is-style-khc-ring-row, .is-style-khc-mini-row, .is-style-khc-proof).has-coral-border-color { --khc-row-ring: var(--khc-coral); }
:is(.is-style-khc-ring-row, .is-style-khc-mini-row, .is-style-khc-proof).has-blue-border-color { --khc-row-ring: var(--khc-blue); }
:is(.is-style-khc-ring-row, .is-style-khc-mini-row, .is-style-khc-proof).has-purple-border-color { --khc-row-ring: var(--khc-purple); }
:is(.is-style-khc-ring-row, .is-style-khc-mini-row, .is-style-khc-proof).has-teal-border-color { --khc-row-ring: var(--khc-teal); }

/* Stat cards: a big number over a line. */
.khc-stat-card .khc-stat-card__number {
	margin: 0;
	font-size: clamp(2.75rem, 2.8vw + 1.25rem, 4rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
}

.khc-stat-card p:not(.khc-stat-card__number) {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--khc-charcoal);
}

/* Writing tiles: compact cards; Browse sits at the bottom of every tile in a row. */
.khc-tile {
	display: flex;
	flex-direction: column;
	padding: 26px !important;
	padding-top: 30px !important;
}

.khc-tile > .wp-block-buttons {
	margin-top: auto !important;
	padding-top: 10px;
}

.khc-tile > * {
	margin: 0;
}

/* ======================================================================
   About (SiteAbout board)
   ====================================================================== */

/* Portrait mosaic (SPEC §7, the canonical About one): the photo cut into a 3 × 3 grid with 3px
   white gutters and turquoise, yellow and orange corners. One Image block, so Kate can swap the
   photo and move its focal point; the grid is drawn over it. Decorative layers only. */
.wp-block-image.is-style-khc-mosaic {
	--khc-cell: calc((100% - 6px) / 3);
	position: relative;
	max-width: 400px;
	margin-inline-start: auto;
}

.wp-block-image.is-style-khc-mosaic img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.wp-block-image.is-style-khc-mosaic::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(var(--khc-turquoise), var(--khc-turquoise)) left top / var(--khc-cell) var(--khc-cell) no-repeat,
		linear-gradient(var(--khc-yellow), var(--khc-yellow)) right top / var(--khc-cell) var(--khc-cell) no-repeat,
		linear-gradient(var(--khc-orange), var(--khc-orange)) left bottom / var(--khc-cell) var(--khc-cell) no-repeat,
		linear-gradient(to right, transparent var(--khc-cell), #fff 0 calc(var(--khc-cell) + 3px), transparent 0 calc(var(--khc-cell) * 2 + 3px), #fff 0 calc(var(--khc-cell) * 2 + 6px), transparent 0),
		linear-gradient(to bottom, transparent var(--khc-cell), #fff 0 calc(var(--khc-cell) + 3px), transparent 0 calc(var(--khc-cell) * 2 + 3px), #fff 0 calc(var(--khc-cell) * 2 + 6px), transparent 0);
}

@media (max-width: 781px) {
	.wp-block-image.is-style-khc-mosaic {
		max-width: 300px;
		margin-inline-start: 0;
	}
}

/* Bold leads inside gray text read in black, as on the boards. */
.has-charcoal-color strong {
	color: var(--khc-black);
}

/* "How I partner with clients": a left-aligned » list under the centered intro. */
.khc-partner__title {
	font-weight: 800;
}

/* A row of client names between 1px gray rules (About, more than 20 years). */
.khc-names {
	gap: 20px 56px;
	padding-block: 36px;
	border-block: 1px solid var(--khc-gray);
}

.khc-names > p {
	margin: 0;
	letter-spacing: -0.02em;
}

/* Quote cards: the attribution sits at the card's foot, so a pair of cards lines up. */
.khc-quote-card {
	display: flex;
	flex-direction: column;
}

.khc-quote-card > :last-child {
	margin-top: auto;
}

/* Cards with » lists (Recognition, Outside the office). Links carry the yellow underline. */
.khc-list-card {
	padding: clamp(28px, 3vw, 40px);
	padding-top: calc(clamp(28px, 3vw, 40px) + 4px);
	border-radius: var(--khc-radius);
}

.khc-list-card ul.wp-block-list {
	margin: 0;
}

.khc-list-card a {
	font-weight: 700;
	border-bottom: 2px solid var(--khc-yellow);
}

@media (max-width: 781px) {
	.khc-names {
		gap: 10px 28px;
		padding-block: 28px;
	}

	.khc-names > p {
		font-size: 1.375rem !important;
	}
}

/* ======================================================================
   Built for pages (For Consulting Firms, For Small Businesses)
   ====================================================================== */

/* The hero card's closing line, under a 1px rule. */
.khc-card-foot {
	padding-top: 18px;
	border-top: 1px solid var(--khc-gray);
}

/* » markers turn yellow on dark grounds (SPEC). */
:is(.has-black-background-color, .has-charcoal-background-color) ul.wp-block-list:not(.is-style-khc-plain) > li::before {
	color: var(--khc-yellow);
}

/* The black "How it starts" card that leads to an offer page. */
.khc-feature-card {
	padding: clamp(32px, 4.4vw, 56px) clamp(24px, 4.4vw, 64px);
	border-radius: 24px;
}

.khc-feature-card ul.wp-block-list {
	margin: 0;
	font-size: 17px;
}

.khc-feature-card ul.wp-block-list > li + li {
	margin-top: 14px;
}

/* A section that opens with a 1px rule inside the content width (Who it's for, after the card). */
.khc-ruled-top {
	padding-top: var(--khc-section-y);
	border-top: 1px solid var(--khc-gray);
}

/* Proof cards: a 36px ring (the card's Border color) beside category, name, result line and an
   optional link. Cards in a row share a height; the link sits at the foot. */
.is-style-khc-proof {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	grid-auto-rows: min-content;
	column-gap: 18px;
	row-gap: 8px;
	padding: 28px;
	border-radius: var(--khc-radius);
	border-style: none !important;
}

.is-style-khc-proof::before {
	content: "";
	grid-row: 1 / span 4;
	width: 36px;
	height: 36px;
	box-sizing: border-box;
	border: var(--khc-line) solid;
	border-color: var(--khc-row-ring, var(--khc-turquoise));
	border-radius: 50%;
}

.is-style-khc-proof > * {
	grid-column: 2;
	margin: 0 !important;
}

.is-style-khc-proof .wp-block-heading a:hover {
	color: var(--khc-charcoal);
}

.is-style-khc-proof > .wp-block-buttons {
	padding-top: 4px;
}

/* ======================================================================
   Speaking (SiteSpeaking board)
   ====================================================================== */

/* Dark hero: the headline runs about two-thirds wide; the facts sit under white rules. */
.khc-speaking-hero .khc-speaking-hero__text > .wp-block-heading {
	max-width: 15ch;
}

.khc-speaking-hero .khc-speaking-hero__text > .is-style-khc-lead {
	max-width: 620px;
}

.khc-proof--light {
	max-width: 840px;
}

.khc-proof--light > .wp-block-column {
	border-top-color: var(--khc-white);
}

/* The photo under the dark hero: wide and short on desktop, closer to 4:3 on phones. */
.khc-speaking-photo .wp-block-image img {
	border-radius: 24px;
}

@media (max-width: 781px) {
	.khc-speaking-photo .wp-block-image img {
		aspect-ratio: 4 / 3 !important;
	}
}

/* Numbered takeaways between 1px gray rules. */
.khc-takeaways {
	border-bottom: 1px solid var(--khc-gray);
}

.khc-takeaways > .khc-takeaway {
	margin: 0 !important;
	padding-block: 32px;
	border-top: 1px solid var(--khc-gray);
}

.khc-takeaway > .wp-block-column:last-child {
	padding-top: 6px;
}

.khc-takeaway p {
	margin: 0;
}

@media (max-width: 781px) {
	.khc-takeaway {
		flex-wrap: nowrap !important;
		gap: 20px !important;
	}

	.khc-takeaway > .wp-block-column:first-child {
		flex: 0 0 auto !important; /* Two digits at 44px are wider than a fixed 52px; it wrapped "02" onto two lines. */
	}
}

/* Past-talk tiles: 1px outline, centered; the last one dashed, inviting the next event. */
.khc-talk {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 120px;
	padding: 16px 20px;
	text-align: center;
	border: 1px solid var(--khc-gray);
	border-radius: 16px;
}

.khc-talk > * {
	margin: 0 !important;
}

.khc-talk--invite {
	border: 2px dashed var(--khc-black);
}

/* The speaker-kit card: one line beside its link. */
@media (min-width: 782px) {
	.khc-kit__cols > .wp-block-column:last-child .wp-block-buttons {
		justify-content: flex-end;
	}
}

.khc-kit .wp-block-button.is-style-khc-text .wp-block-button__link {
	font-size: 16px;
}

/* ======================================================================
   Insights index (SiteInsights board) and the article (SiteArticle)
   ====================================================================== */
.khc-wrap {
	width: min(100% - 2 * var(--khc-pad), var(--khc-content));
	margin-inline: auto;
}

.khc-section.khc-section--flush-bottom {
	padding-bottom: 0;
}

/* Category chips: filled black for the current one, 2px outlines for the rest; a rule below. */
.khc-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding-bottom: 32px;
	margin-bottom: 48px;
	border-bottom: 1px solid var(--khc-gray);
}

.khc-filter__chip {
	padding: 10px 18px;
	border: 2px solid var(--khc-black);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
}

.khc .khc-filter__chip.is-current,
.khc .khc-filter__chip.is-current:hover {
	background: var(--khc-black);
	color: var(--khc-white);
}

.khc .khc-filter__chip:not(.is-current):hover {
	background: var(--khc-light);
	color: var(--khc-black);
}

/* The featured essay across the page, with its big number in corner brackets. */
.khc-insight-feature--wide {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
	gap: 40px 64px;
	margin-bottom: 48px;
	padding: clamp(32px, 4vw, 56px);
	border-radius: 24px;
}

.khc-insight-feature--wide.has-stat {
	grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
}

.khc-insight-feature--wide .khc-insight-feature__text {
	gap: 22px;
}

.khc-insight-feature--wide .khc-chip {
	align-self: flex-start;
}

.khc-insight-feature--wide .khc-insight-feature__title {
	font-size: clamp(2rem, 2.4vw + 1rem, 3.25rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.khc-insight-feature--wide .khc-insight-feature__dek {
	font-size: 18px;
}

.khc-insight-stat {
	display: block;
	padding: 44px 48px !important;
}

.khc-insight-stat__num {
	display: block;
	font-size: clamp(4.5rem, 6vw, 7.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.05em;
}

.khc-insight-stat__label {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--khc-gray);
}

@media (max-width: 900px) {
	.khc-insight-feature--wide.has-stat {
		grid-template-columns: minmax(0, 1fr);
	}

	.khc-insight-stat {
		justify-self: start;
		padding: 28px 36px !important;
	}
}

/* Pagination: numbered circles, the current one filled, then "Older posts →". */
.khc-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-top: 48px;
	font-size: 15px;
	font-weight: 700;
}

.khc-pager .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	box-sizing: border-box;
	border: 2px solid var(--khc-black);
	border-radius: 50%;
}

.khc-pager .page-numbers.current {
	background: var(--khc-black);
	color: var(--khc-white);
}

.khc-pager .page-numbers.prev,
.khc-pager .page-numbers.next,
.khc-pager .page-numbers.dots {
	padding: 0 12px;
	border: 0;
	border-radius: 0;
}

/* Newsletter band: a gray rounded panel, the sign-up on the right. */
.khc-nl-band {
	padding: clamp(32px, 4vw, 56px) clamp(24px, 4.4vw, 64px);
	border-radius: var(--khc-radius-lg);
}

.khc-newsletter__label {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--khc-charcoal);
}

/* The field on light grounds: 2px black underline, a black Subscribe pill (placeholder and HubSpot alike). */
.khc-newsletter--band .khc-field--inline,
.khc-newsletter--band .khc-hsform form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	border-bottom: 2px solid var(--khc-black);
}

.khc-newsletter--band .khc-field--inline input,
.khc-newsletter--band .khc-hsform .hs-input {
	flex: 1 1 0;
	width: 100%;
	min-width: 0;
	padding: 14px 0;
	border: 0;
	background: transparent;
	color: var(--khc-black);
	font: inherit;
	font-size: 18px;
}

.khc-newsletter--band .khc-hsform .hs_email {
	flex: 1 1 0;
	min-width: 0;
}

.khc-newsletter--band .khc-hsform label:not(.hs-error-msg) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.khc-newsletter--band .khc-field--inline input::placeholder {
	color: var(--khc-charcoal);
}

.khc-newsletter--band .khc-field--inline button,
.khc-newsletter--band .khc-hsform .hs-button {
	margin-bottom: 8px;
	padding: 14px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--khc-black);
	color: var(--khc-white);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

/* Section heads with a link at the right (Keep reading). */
.khc-row-head {
	margin-bottom: 0 !important;
}

@media (max-width: 781px) {
	.khc-row-head .wp-block-buttons {
		justify-content: flex-start !important;
	}
}

/* ---------- The article ---------- */
.khc-article__hero {
	padding-bottom: 48px;
}

.khc-article__head,
.khc-article__body {
	width: min(100% - 2 * var(--khc-pad), 880px);
	margin-inline: auto;
}

.khc-article__head {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.khc-article__head > * {
	margin: 0;
}

.khc-chip-link {
	align-self: flex-start;
}

.khc-article__title {
	font-size: var(--khc-fs-h1);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: var(--khc-track-display);
	text-wrap: balance;
}

.khc-article__dek {
	font-size: var(--khc-fs-lead);
	font-weight: 500;
	line-height: 1.6;
	color: var(--khc-charcoal);
}

.khc-article__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding: 20px 0;
	border-block: 1px solid var(--khc-gray);
}

.khc-article__byline img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.khc-article__who {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.khc-article__name {
	font-weight: 800;
}

.khc-article__when {
	font-size: 14px;
	color: var(--khc-charcoal);
}

.khc-article__share {
	display: flex;
	gap: 20px;
	margin-left: auto;
	font-size: 14px;
	font-weight: 700;
}

.khc-copy {
	padding: 0;
	border: 0;
	background: none;
	color: var(--khc-black);
	font: inherit;
	cursor: pointer;
}

@media (max-width: 600px) {
	.khc-article__share {
		width: 100%;
		margin-left: 0;
	}
}

/* The story: a 720px column, 18px text (the trimmed scale; the board shows 20). */
.khc-article__body {
	width: min(100% - 2 * var(--khc-pad), 720px);
	padding-bottom: var(--khc-section-y);
	font-size: var(--khc-fs-lead);
	line-height: 1.75;
	color: #1f2226;
}

/* The column already sits inside the page gutters, so its blocks take its full width. */
.entry-content.khc-article__body > :not(.alignfull) {
	width: 100%;
}

.khc-article__body > * + * {
	margin-block-start: 28px;
}

.khc-article__body > h2,
.khc-article__body > .wp-block-heading:is(h2) {
	margin-block-start: 44px;
	font-size: clamp(1.625rem, 1vw + 1.1rem, 2rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.khc-article__body > h3 {
	margin-block-start: 36px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.3;
}

.khc-article__body a:not(.wp-block-button__link, .khc-tlink) {
	border-bottom: 2px solid var(--khc-yellow);
}

.khc-article__body .wp-block-image img {
	border-radius: 20px;
}

/* A table in a story reads as the board's scorecard: gray panel, label | score rows. */
.khc-article__body .wp-block-table {
	padding: 32px 36px;
	border-radius: 20px;
	background: var(--khc-light);
	font-size: 17px;
}

.khc-article__body .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

.khc-article__body .wp-block-table :is(td, th) {
	padding: 14px 0;
	border: 0;
	border-top: 1px solid var(--khc-gray);
	text-align: left;
}

.khc-article__body .wp-block-table td:last-child {
	font-weight: 800;
	text-align: right;
}

.khc-article__body .wp-block-table figcaption {
	margin-top: 10px;
	font-size: 13px;
	color: var(--khc-charcoal);
}

/* Quotes in a story with the "Corner brackets" style (one bracketed statement per page). */
.khc-article__body :is(.wp-block-pullquote, .wp-block-quote).is-style-khc-brackets {
	margin-block: 48px;
	padding: 48px 56px;
	border: 0;
	text-align: left;
}

.khc-article__body .wp-block-pullquote p,
.khc-article__body .wp-block-quote p {
	font-size: clamp(1.5rem, 1vw + 1.1rem, 2.125rem);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

/* The self-assessment card at the end of a story (synced pattern). */
.khc-assess {
	margin-block-start: 44px !important;
	padding: 32px 36px;
	border-radius: 20px;
}

.khc-assess__text {
	flex: 1 1 280px;
}

.khc-assess__text > * {
	margin: 0;
}

@media (min-width: 600px) {
	.khc-assess .wp-block-button__link {
		white-space: nowrap;
	}
}

/* Author box. */
.khc-author {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	column-gap: 24px;
	margin-block-start: 48px !important;
	padding-top: 32px;
	border-top: 2px solid var(--khc-black);
}

.khc-author img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
}

.khc-author__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.khc-author__text p {
	margin: 0;
}

.khc-author__name {
	font-size: 18px;
	font-weight: 800;
}

.khc-author__bio {
	font-size: 16px;
	line-height: 1.6;
	color: var(--khc-charcoal);
}

/* ======================================================================
   Book (SiteBook) and Newsletter (SiteNewsletter)
   ====================================================================== */
.khc-text-hero > .is-style-khc-lead {
	max-width: 700px;
}

.khc-text-hero-section {
	padding-bottom: 48px;
}

/* The 30-minute call card: turquoise, rounded; its list sits under a 2px black rule. */
.khc-start-card {
	height: 100%;
	padding: clamp(28px, 3.4vw, 48px);
	border-radius: 24px;
}

.khc-start-card > * {
	margin: 0;
}

.khc-start-card ul.wp-block-list {
	padding-top: 24px;
	border-top: 2px solid var(--khc-black);
	font-size: 17px;
}

.khc-start-card ul.wp-block-list > li + li {
	margin-top: 14px;
}

.khc-book__cols {
	align-items: stretch !important;
}

/* The booking calendar's frame: HubSpot draws the calendar inside it. */
.khc-meetings {
	height: 100%;
	min-height: 420px;
	padding: clamp(20px, 2.8vw, 40px) clamp(16px, 3.4vw, 48px);
	box-sizing: border-box;
	border: 1px solid var(--khc-gray);
	border-radius: 24px;
}

.khc-meetings .meetings-iframe-container iframe {
	width: 100%;
}

.khc-meetings__empty {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 12px;
	height: 100%;
	min-height: 340px;
}

.khc-meetings__empty p {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
}

.khc-meetings__empty .khc-meetings__note {
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--khc-light);
	font-size: 14px;
	font-weight: 500;
	color: var(--khc-charcoal);
}

/* Forms in the boards' style: small caps labels, 2px underlined fields, two columns. */
.khc-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 32px;
}

.khc-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.khc-form__field--wide,
.khc-form__submit {
	grid-column: 1 / -1;
}

.khc-form label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--khc-charcoal);
}

.khc-form :is(input, textarea) {
	padding: 10px 0;
	border: 0;
	border-bottom: 2px solid var(--khc-black);
	background: transparent;
	font: inherit;
	font-size: 16px;
	resize: none;
}

.khc-form__submit {
	margin: 4px 0 0;
}

.khc-form__submit button {
	font-family: inherit;
	font-weight: 700;
}

.khc-form--placeholder :is(input, textarea, button)[disabled] {
	cursor: not-allowed;
}

.khc-form--placeholder button[disabled] {
	opacity: 1;
}

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

/* HubSpot's contact form, drawn the same way. */
.khc-hsform--contact form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 32px;
}

.khc-hsform--contact :is(.hs_message, .hs-submit, .hs_error_rollup, .legal-consent-container) {
	grid-column: 1 / -1;
}

.khc-hsform--contact label:not(.hs-error-msg) {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--khc-charcoal);
}

.khc-hsform--contact .hs-input {
	width: 100%;
	padding: 10px 0;
	border: 0;
	border-bottom: 2px solid var(--khc-black);
	background: transparent;
	font: inherit;
	font-size: 16px;
}

.khc-hsform--contact .hs-button {
	padding: 20px 32px;
	border: 0;
	border-radius: 999px;
	background: var(--khc-black);
	color: var(--khc-white);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* Contact details under color rules. */
.khc-contact-list .khc-topline {
	padding-top: 18px;
}

.khc-contact-list .khc-topline a {
	word-break: break-word;
}

/* The newsletter card in the Newsletter hero: stacked fields. */
.khc-nl-card {
	padding: clamp(28px, 3vw, 44px);
	padding-top: calc(clamp(28px, 3vw, 44px) + 4px);
	border-radius: 24px;
}

.khc-newsletter--card .khc-form {
	grid-template-columns: minmax(0, 1fr);
}

.khc-newsletter--card .khc-form :is(input, textarea) {
	font-size: 18px;
	padding: 12px 0;
}

.khc-newsletter--card .khc-hsform form {
	display: flex;
	flex-direction: column;
	gap: 24px;
	border: 0;
}

.khc-newsletter--card .khc-hsform label:not(.hs-error-msg) {
	position: static;
	width: auto;
	height: auto;
	clip: auto;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--khc-charcoal);
}

.khc-newsletter--card .khc-hsform .hs-input {
	border-bottom: 2px solid var(--khc-black);
}

.khc-newsletter--card .khc-hsform .hs-button {
	padding: 20px 32px;
	font-size: 16px;
}

/* ======================================================================
   Utility pages (SiteUtility board)
   ====================================================================== */
/* A circle photo in an 8px white ring (the closing block's portrait, on any page). */
.wp-block-image.is-style-khc-circle img {
	box-sizing: border-box;
	aspect-ratio: 1;
	padding: 8px;
	border-radius: 50%;
	background: var(--khc-white);
	object-fit: cover;
}

@media (max-width: 781px) {
	.khc-booked__cols .wp-block-image.is-style-khc-circle img {
		width: 220px !important;
		height: 220px !important;
	}
}

/* Rows of text links. */
.khc-link-row {
	gap: 16px 28px;
}

/* 404: the big number with its orange period, the line and the ways back. */
.khc-404 {
	padding-block: 40px;
	text-align: center;
}

.khc-404__num {
	margin: 0;
	font-size: clamp(6rem, 10vw, 10rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.06em;
}

/* Dark (the self-assessment result): the footer's field style, with a white label. */
.khc-newsletter--dark .khc-newsletter__label {
	color: var(--khc-white);
}

/* ======================================================================
   Self-assessment (SiteSelfAssessment board; assets/js/assessment.js)
   ====================================================================== */
.khc-quiz__progress > * {
	margin: 0;
}

.khc-quiz__bar {
	display: block;
	height: 6px;
	overflow: hidden;
	border-radius: 3px;
	background: var(--khc-gray);
}

.khc-quiz__bar > span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--khc-turquoise);
}

/* The questions: number | question | three choices, between 1px rules. The options line is
   only read by the script. */
.khc-quiz__options {
	display: none;
}

.khc-quiz__questions {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--khc-gray);
}

.khc-quiz__row {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) minmax(0, 460px);
	align-items: center;
	column-gap: 32px;
	row-gap: 16px;
	padding: 28px 0;
	border-top: 1px solid var(--khc-gray);
}

.khc-quiz__num {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--khc-gray);
}

.khc-quiz__row.is-answered .khc-quiz__num {
	color: var(--khc-black);
}

.khc-quiz__q {
	font-size: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
	font-weight: 700;
	line-height: 1.4;
}

.khc-quiz__choices {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.khc-quiz__choices button {
	padding: 14px 8px;
	border: 2px solid var(--khc-black);
	border-radius: 999px;
	background: var(--khc-white);
	color: var(--khc-black);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.khc-quiz__choices button[aria-checked="true"] {
	background: var(--khc-black);
	color: var(--khc-white);
}

@media (max-width: 900px) {
	.khc-quiz__row {
		grid-template-columns: 44px minmax(0, 1fr);
	}

	.khc-quiz__num {
		font-size: 24px;
	}

	.khc-quiz__choices {
		grid-column: 1 / -1;
	}

	.khc-quiz__choices button {
		font-size: 14px;
	}
}

/* The result, on black: the score in corner brackets beside the band's words. */
.khc-quiz__scorebox > * {
	margin: 0;
}

.khc-quiz__score {
	font-size: clamp(5rem, 8vw, 8.75rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.05em;
}

.khc-band > * {
	margin: 0;
}

/* Theme-drawn HubSpot forms (inc/footer.php, assets/js/forms.js): status line and consent. */
.khc-hs__status {
	flex-basis: 100%;
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.5;
}

.khc-hs__status:empty {
	display: none;
}

.khc-hs__status.is-error {
	color: var(--khc-coral);
}

.has-black-background-color .khc-hs__status.is-error,
.khc-footer .khc-hs__status.is-error {
	color: var(--khc-yellow);
}

.khc-form__consent label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.5;
	color: var(--khc-charcoal);
}

.khc-form__consent input {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	accent-color: var(--khc-black);
}

.khc-field--inline.khc-hs {
	flex-wrap: wrap;
}

.khc-hs.is-sent :is(input, button) {
	opacity: 0.5;
}

/* ======================================================================
   Writing: the hub list (khc/writing), clip pages and term lists
   (inc/writing.php, single-writing.php, taxonomy-publication.php)
   ====================================================================== */
.khc-writing {
	display: flex;
	flex-direction: column;
	gap: clamp(56px, 6vw, 88px);
}

.khc-writing-section {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: clamp(28px, 6vw, 96px);
	align-items: start;
	scroll-margin-top: 24px;
}

.khc-writing-section__head {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.khc-writing-section__head > * {
	margin: 0;
}

.khc-writing-section__bar {
	display: block;
	width: 56px;
	height: var(--khc-line);
	border-radius: 2px;
}

.khc-writing-section__about {
	font-size: 15px;
	color: var(--khc-charcoal);
}

.khc-writing-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 2px solid var(--khc-black);
}

.khc-writing-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 4px 24px;
	padding: 14px 0;
	border-bottom: 1px solid var(--khc-gray);
}

.khc .khc-writing-row a {
	font-size: 16px;
	font-weight: 700;
	color: var(--khc-black);
}

.khc .khc-writing-row a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.khc-writing-row__meta {
	font-size: 13px;
	color: var(--khc-charcoal);
	white-space: nowrap;
}

.khc .khc-writing-more {
	font-size: 15px;
	font-weight: 700;
	border-bottom: 2px solid var(--khc-black);
	padding-bottom: 3px;
}

/* A clip page. */
.khc-clip__wrap,
.khc-clip__body,
.khc-clip__more {
	width: min(100% - 2 * var(--khc-pad), var(--khc-content));
	margin-inline: auto;
}

.khc-section.khc-clip__hero {
	padding: clamp(48px, 5vw, 72px) 0 40px;
}

.khc-clip__wrap {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.khc-clip__wrap > * {
	margin: 0;
}

.khc-clip__wrap .khc-backlink {
	font-size: 14px;
	font-weight: 600;
	color: var(--khc-charcoal);
}

.khc-clip__title {
	max-width: 1000px;
	font-size: var(--wp--preset--font-size--section);
	line-height: 1.05;
}

.khc-clip__dek {
	max-width: 820px;
}

.khc-clip__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 48px;
	margin: 8px 0 0;
}

.khc-clip__facts > div {
	min-width: 180px;
	padding-top: 14px;
	border-top: 2px solid var(--khc-black);
}

.khc-clip__facts dt {
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--khc-charcoal);
}

.khc-clip__facts dd {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
}

.khc-clip__body {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(32px, 6vw, 88px);
	align-items: start;
	padding-block: 32px 72px;
}

.khc-clip__body.is-text-only {
	grid-template-columns: minmax(0, 1fr);
	max-width: var(--khc-measure);
}

.khc-clip__preview {
	position: sticky;
	top: 24px;
	margin: 0;
	padding: clamp(20px, 3vw, 36px);
	border-radius: 24px;
	background: var(--khc-light);
}

.khc-clip__preview img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 80vh;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgb(17 17 17 / 0.08), 0 12px 32px rgb(17 17 17 / 0.10);
}

.khc-clip__story > :first-child {
	margin-top: 0;
}

.khc-clip__story > p {
	color: var(--khc-charcoal);
}

.khc-clip__story > h2,
.khc-clip__story > h3 {
	margin-top: 40px;
	font-size: var(--wp--preset--font-size--card);
}

.khc-clip__story img {
	height: auto;
	border-radius: 12px;
}

.khc .khc-writing-pdf__link {
	display: inline-block;
	padding: 16px 28px;
	border-radius: 999px;
	background: var(--khc-black);
	color: var(--khc-white);
	font-size: 15px;
	font-weight: 700;
}

.khc .khc-writing-pdf__link:hover {
	background: var(--khc-charcoal);
}

.khc-clip__credit {
	margin-top: 32px;
	padding-top: 16px;
	border-top: 1px solid var(--khc-gray);
	font-size: 13px;
	color: var(--khc-charcoal);
}

.khc-clip__more {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 88px;
	padding-top: 40px;
	border-top: 2px solid var(--khc-black);
}

.khc-clip__more > p {
	margin: 0;
}

.khc-clip__more .khc-writing-list {
	border-top: 0;
}

.khc-writing-term {
	padding-block: 16px 96px;
	max-width: 900px;
}

@media (max-width: 900px) {
	.khc-writing-section,
	.khc-clip__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.khc-clip__preview {
		position: static;
		max-width: 480px;
	}

	.khc-writing-row__meta {
		white-space: normal;
	}
}

/* ======================================================================
   Kate's review, Oct. 2
   ====================================================================== */

/* Short pages: the footer sits at the bottom of the window, with no white space under it. */
.site-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.site-inner {
	flex: 1 0 auto;
}

/* How I Work: the questions card one size down. */
.khc-rule-list > p {
	font-size: 20px !important;
}

/* How I Work timeline: dates, companies, roles and descriptions line up across the stops. */
@media (min-width: 782px) {
	.khc-timeline {
		grid-template-rows: repeat(4, auto);
		row-gap: 0 !important;
	}

	.khc-timeline > .khc-stop {
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
		row-gap: 8px;
		align-content: start;
	}

	.khc-timeline > .khc-stop > * + * {
		margin-top: 0 !important;
	}
}

/* About: quote cards give the attribution more room. */
.khc-quote-card > :last-child {
	padding-top: 12px;
}

/* About: Recognition / Outside the office titles get more room before their lists. */
.khc-list-card > .wp-block-heading {
	margin-bottom: 8px !important;
}

/* About: the portrait mosaic's right column no longer shows a sliver of photo at the edge. */
.wp-block-image.is-style-khc-mosaic {
	overflow: hidden;
}

.wp-block-image.is-style-khc-mosaic img {
	width: calc(100% + 1px);
	max-width: none;
}

.wp-block-image.is-style-khc-mosaic::after {
	inset: 0 -1px 0 0;
}

/* Book: the call card's list sits under the thinnest rule, with white » markers on turquoise. */
.khc-start-card ul.wp-block-list {
	border-top-width: 1px;
}

.has-turquoise-background-color ul.wp-block-list:not(.is-style-khc-plain) > li::before {
	color: var(--khc-white);
}

/* The featured essay (Home and Insights): its photo behind the text under a dark scrim. */
.khc-insight-feature.has-image {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.khc-insight-feature__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.khc-insight-feature__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.khc-insight-feature__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.78);
}

/* Compare table on phones: one card per offer instead of the stacked table (assets/js/blocks.js). */
.khc-compare-cards {
	display: none;
}

@media (max-width: 781px) {
	.wp-block-table.is-style-khc-compare:has(+ .khc-compare-cards) {
		display: none;
	}

	.khc-compare-cards {
		display: grid;
		gap: 20px;
	}

	.khc-compare-card {
		--bar: var(--khc-turquoise);
		position: relative;
		overflow: hidden;
		padding: 24px;
		padding-top: 28px;
		border-radius: var(--khc-radius);
		background: var(--khc-white);
	}

	.khc-compare-card::before {
		content: "";
		position: absolute;
		inset: 0 0 auto;
		height: var(--khc-line);
		background: var(--bar);
	}

	.khc-compare-card--2 { --bar: var(--khc-orange); }
	.khc-compare-card--3 { --bar: var(--khc-purple); }

	.khc-compare-card__name {
		margin: 0 0 12px;
		font-size: 22px;
		font-weight: 800;
	}

	.khc-compare-card dl {
		margin: 0;
	}

	.khc-compare-card dt {
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid var(--khc-gray);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--khc-charcoal);
	}

	.khc-compare-card dt:first-child {
		margin-top: 0;
	}

	.khc-compare-card dd {
		margin: 6px 0 0;
		font-size: 16px;
		line-height: 1.55;
	}
}

/* About: names that have a case study link to it, with the yellow underline. */
.khc-names a {
	border-bottom: 3px solid var(--khc-yellow);
}

.khc-names a:hover {
	color: var(--khc-charcoal);
}

/* Speaking: a past-talk tile whose name links to the recording. */
.khc-talk a {
	border-bottom: 2px solid var(--khc-yellow);
}

/* Self-assessment: questions one step lighter and smaller (Kate, Oct. 2). */
.khc-quiz__q {
	font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
	font-weight: 600;
}

/* ======================================================================
   Slideshow style on the core Gallery block (assets/js/slideshow.js; replaces Jetpack Slideshow)
   ====================================================================== */
.wp-block-gallery.is-style-khc-slideshow.is-ready {
	display: block !important;
}

.khc-slideshow__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--khc-radius);
	background: var(--khc-light);
}

.khc-slideshow__track::-webkit-scrollbar {
	display: none;
}

.khc-slideshow__track:focus-visible {
	outline: 3px solid var(--khc-black);
	outline-offset: 3px;
}

.wp-block-gallery.is-style-khc-slideshow.is-ready .khc-slideshow__track > .wp-block-image {
	flex: 0 0 100%;
	width: 100% !important;
	margin: 0 !important;
	aspect-ratio: 16 / 9;
	scroll-snap-align: start;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wp-block-gallery.is-style-khc-slideshow.is-ready .khc-slideshow__track img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}

.wp-block-gallery.is-style-khc-slideshow.is-ready .khc-slideshow__track figcaption {
	display: none;
}

.khc-slideshow__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 16px;
}

.khc-slideshow__bar button {
	width: 44px;
	height: 44px;
	border: 2px solid var(--khc-black);
	border-radius: 50%;
	background: var(--khc-white);
	color: var(--khc-black);
	font: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.khc-slideshow__bar button:hover {
	background: var(--khc-black);
	color: var(--khc-white);
}

.khc-slideshow__count {
	min-width: 56px;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--khc-charcoal);
}

.wp-block-gallery.is-style-khc-slideshow.is-ready > figcaption {
	margin-top: 10px;
	text-align: center;
	font-size: 14px;
	color: var(--khc-charcoal);
}

/* ======================================================================
   Build 3, Oct. 2: case study review notes (Kate, via the migration session)
   ====================================================================== */
/* At a glance: up to five items (Clients added), values a step lighter with more air. */
.khc-case__glance {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.khc-case__glance dt {
	margin-bottom: 10px;
}

.khc-case__glance dd {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	padding-top: 1px;
}

/* One body style in the story: list items read like the paragraphs (16px charcoal). */
.khc-case__story ul.wp-block-list > li {
	font-size: inherit;
	color: var(--khc-charcoal);
}

/* Option for the in-story quote: the Corner brackets style, as on articles (white ground). */
.khc-case__story > .wp-block-quote.is-style-khc-brackets {
	margin-block: 48px;
	padding: 44px 52px;
	border-left: 0;
	text-align: center;
}

.khc-case__story > .wp-block-quote.is-style-khc-brackets p {
	font-size: clamp(1.5rem, 1vw + 1.1rem, 2.125rem);
	line-height: 1.25;
}

/* Build 3, Oct. 2 (Kate's second pass). Case study hero: the Kind chip left, "All case studies →"
   top right as a text link (the Writing section's treatment), so the two never collide. */
.khc-case__crumbs {
	justify-content: space-between;
}

.khc .khc-case__index {
	padding-bottom: 3px;
	border-bottom: 2px solid currentColor;
	font-size: var(--khc-fs-small);
	font-weight: 700;
	color: var(--khc-black);
}

.khc .khc-case__index:hover {
	color: var(--khc-charcoal);
}

/* Next case study: both sides sit on the bottom line; the next title a size down. */
.khc-case__next {
	align-items: flex-end;
}

.khc-case__nexttitle {
	font-size: clamp(1.25rem, 0.6vw + 1rem, 1.5rem);
	font-weight: 700;
}

/* Theme slideshow: a light gray edge so white slides don't melt into the page, and more room
   above the arrows. */
.khc-slideshow__track {
	border: 1px solid var(--khc-gray);
}

.khc-slideshow__bar {
	margin-top: 28px;
}

/* Article byline share links as icons (LinkedIn, email); the copy-link button is gone. */
.khc-article__share {
	align-items: center;
	gap: 12px;
}

.khc .khc-article__share a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 2px solid var(--khc-black);
	border-radius: 50%;
	color: var(--khc-black);
}

.khc .khc-article__share a:hover {
	background: var(--khc-black);
	color: var(--khc-white);
}

.khc-article__share svg {
	width: 20px;
	height: 20px;
}

.khc-article__byline img,
.khc-author img {
	object-fit: cover;
}

/* Speaking hero: the two calls to action sit on the facts' grid, so "Download the speaker kit"
   starts where "Keynote or workshop." does. */
@media (min-width: 782px) {
	.khc-speaking-hero .khc-speaking-hero__text > .wp-block-buttons {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 28px;
		align-items: center;
		max-width: 840px;
	}

	.khc-speaking-hero .khc-proof--light {
		gap: 28px;
	}

	.khc-speaking-hero .khc-speaking-hero__text > .wp-block-buttons .wp-block-button {
		justify-self: start;
	}
}

/* About: more room under the Recognition / Outside the office titles. */
.khc .khc-list-card > .wp-block-heading {
	margin-bottom: 20px !important;
}


/* Case Studies hero: the headline and lead align left with the eyebrow (Kate, Oct. 2), and the
   rule over the filter chips sits closer to both. */
.khc-page-hero--left > :is(.wp-block-heading, .is-style-khc-lead) {
	margin-left: 0 !important;
}

.khc-page-hero--left > .khc-chips {
	margin-top: 4px !important;
	padding-top: 20px;
}

/* ======================================================================
   Build 3, Oct. 2 (Kate's third pass)
   ====================================================================== */
/* One breadcrumb row everywhere (case studies, clips, articles): the chip left, "All … →" top
   right as an underlined text link; the bottom links sit at the right too. */
.khc-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.khc .khc-crumbs__index {
	margin-left: auto;
	padding-bottom: 3px;
	border-bottom: 2px solid currentColor;
	font-size: var(--khc-fs-small);
	font-weight: 700;
	color: var(--khc-black);
}

.khc .khc-crumbs__index:hover {
	color: var(--khc-charcoal);
}

.khc-case__next {
	flex-direction: column;
	align-items: flex-end;
	gap: 20px;
}

.khc-clip__more > .khc-crumbs__index {
	align-self: flex-end;
}

/* The theme slideshow: room between the frame and its arrows (a gallery layout rule had zeroed it). */
.wp-block-gallery.is-style-khc-slideshow.is-ready > .khc-slideshow__bar {
	margin-top: 28px !important;
}

/* Page heroes: headline and lead align left with the eyebrow on every page (Services, Case
   Studies and the rest), not centered under it. */
.khc-page-hero > :is(.wp-block-heading, .is-style-khc-lead) {
	margin-left: 0 !important;
}

/* Services "where to start" cards: eyebrows, titles, text and the Free lines share rows, so
   each lines up with its neighbor. */
@supports (grid-template-rows: subgrid) {
	.khc-start-cards > [class*="is-style-khc-card"] {
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
		align-content: start;
	}

	.khc-start-cards > [class*="is-style-khc-card"] > * {
		margin: 0 !important;
	}

	.khc-start-cards > [class*="is-style-khc-card"] > :last-child {
		align-self: end;
	}

	/* About quote cards: quote, then the attribution 16px below the longer quote, level across. */
	.khc-quote-card {
		display: grid;
		grid-row: span 2;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.khc-quote-card > * {
		margin: 0 !important;
	}

	.khc-quote-card > :last-child {
		align-self: start;
		margin-top: 0;
		padding-top: 16px;
	}
}

/* The highlighter looks the same on dark grounds as on light (Speaking's "room." matches Case
   Studies' "client"). */
:is(.has-black-background-color, .has-charcoal-background-color, .has-blue-background-color, .has-purple-background-color) .khc-hl,
.khc-hl--dark,
.is-dark .khc-hl {
	background: linear-gradient(transparent 60%, var(--khc-yellow) 60%, var(--khc-yellow) 94%, transparent 94%);
}

/* Article: the featured image as a band over the headline, the Services band's height. */
.khc-article__image {
	width: min(100% - 2 * var(--khc-pad), var(--khc-content));
	margin: 0 auto clamp(32px, 4vw, 56px);
}

.khc-article__image img {
	display: block;
	width: 100%;
	height: clamp(220px, 29vw, 420px);
	object-fit: cover;
	border-radius: 24px;
}

/* Article share icons: no circles; turquoise on hover. */
.khc .khc-article__share a {
	width: auto;
	height: auto;
	border: 0;
	border-radius: 0;
	background: none;
}

.khc .khc-article__share a:hover,
.khc .khc-article__share a:focus-visible {
	background: none;
	color: var(--khc-turquoise);
}

.khc-article__share svg {
	width: 24px;
	height: 24px;
}

/* Writing lists: the format and date sit at the right, on their own line when the title wraps. */
.khc-writing-row__meta {
	margin-left: auto;
	text-align: right;
}

/* Clip pages: "Read the PDF" sits level with the bottom of the preview, and the space above the
   preview matches the space above the "More from" rule (48px each). */
.khc-section.khc-clip__hero {
	padding-bottom: 16px;
}

.khc-clip__body {
	align-items: stretch;
	padding-block: 32px 48px;
}

.khc-clip__preview {
	align-self: start;
}

.khc-clip__body:not(.is-text-only) .khc-clip__story {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.khc-clip__body:not(.is-text-only) .khc-clip__story > * {
	margin-block: 0;
}

.khc-clip__body:not(.is-text-only) .khc-clip__story > * + * {
	margin-top: 20px;
}

@media (max-width: 900px) {
	.khc-clip__body:not(.is-text-only) .khc-clip__story {
		justify-content: flex-start;
	}
}

/* ======================================================================
   Build 3, Oct. 2 (Kate's fourth pass)
   ====================================================================== */
/* Services start cards: the Free line and the link stack in both cards at every width, so the
   two bottoms always match. */
.khc-start-cards > [class*="is-style-khc-card"] > .wp-block-group:last-child {
	flex-direction: column;
	align-items: flex-start !important;
	gap: 12px !important;
}

/* Insights cards: chips, titles, descriptions and Read links line up across a row (subgrid). */
@supports (grid-template-rows: subgrid) {
	.khc-insights--cards > .khc-insight-card--image {
		display: grid;
		grid-row: span 5;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.khc-insights--cards > .khc-insight-card--image > .khc-insight-card__body {
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
		row-gap: 16px;
		align-items: start;
	}

	.khc-insights--cards > .khc-insight-card--image > .khc-insight-card__body > .khc-insight-card__more {
		align-self: end;
		margin-top: 0;
	}
}

/* Article byline: the share icons sit on the bottom line (the date row), LinkedIn's own logo
   a touch smaller than the line icon so the two read the same size. */
.khc-article__share {
	align-self: flex-end;
}

.khc-article__share .khc-icon--linkedin-logo {
	width: 21px;
	height: 21px;
}

/* The case studies index (/case-studies/all/): Insights-style chips over a three-column grid of
   cards; chips, types, titles, summaries and links line up across a row. */
.khc-cases--index .khc-filter {
	margin-bottom: clamp(32px, 4vw, 48px);
}

.khc-index-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 24px;
}

.khc .khc-index-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 20px;
	background: var(--khc-light);
	color: var(--khc-black);
	text-decoration: none;
}

.khc-index-card__media {
	display: block;
	height: 200px;
	background: var(--khc-gray);
}

.khc-index-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.khc-index-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex-grow: 1;
	padding: 28px 32px 32px;
}

.khc-index-card__title {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.khc-index-card__summary {
	font-size: 15px;
	line-height: 1.6;
	color: var(--khc-charcoal);
}

.khc-index-card__more {
	margin-top: auto;
	padding-top: 8px;
	font-size: 14px;
	font-weight: 700;
}

.khc .khc-index-card:hover .khc-index-card__title {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

@supports (grid-template-rows: subgrid) {
	.khc-index-grid > .khc-index-card {
		display: grid;
		grid-row: span 6;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.khc-index-grid > .khc-index-card > .khc-index-card__body {
		display: grid;
		grid-row: span 5;
		grid-template-rows: subgrid;
		row-gap: 12px;
		align-items: start;
	}

	.khc-index-card__body > :empty {
		display: block;
		height: 0;
	}

	.khc-index-card__more {
		align-self: end;
	}
}

/* Text-only clips (poems, the Ravelry pieces): the text column lines up with the header's left edge. */
.khc-clip__body.is-text-only {
	max-width: none;
	grid-template-columns: minmax(0, var(--khc-measure));
}

/* Insights: the quiet "Earlier writing: bylines and clips →" line under the article grid. */
.khc-earlier {
	margin-top: 40px !important;
	font-size: var(--khc-fs-small);
	color: var(--khc-charcoal);
}

.khc .khc-earlier a {
	padding-bottom: 2px;
	border-bottom: 2px solid currentColor;
	font-weight: 700;
	color: var(--khc-black);
}

/* Links inside a case study or clip story: the site's in-text link (2px yellow underline, as in
   articles and the About cards), not the browser default. */
:is(.khc-case__story, .khc-clip__story) :is(p, li) a:not(.wp-block-button__link, .khc-writing-pdf__link) {
	border-bottom: 2px solid var(--khc-yellow);
	font-weight: 600;
	color: var(--khc-black);
	text-decoration: none;
}

:is(.khc-case__story, .khc-clip__story) :is(p, li) a:not(.wp-block-button__link, .khc-writing-pdf__link):hover {
	color: var(--khc-charcoal);
}

/* ======================================================================
   Build 3, Oct. 2 (Kate's fifth pass)
   ====================================================================== */
/* Bottom of a case study: "← All case studies" at the left, the next case study at the right,
   both on the bottom line (clips: "← All writing" at the left). */
.khc-case__next {
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
}

.khc-clip__more > .khc-case__all {
	align-self: flex-start;
}

/* Article share icons: both solid squares (LinkedIn's logo and a matching envelope), top-aligned
   with the author's name. */
.khc-article__share {
	align-self: flex-start;
	margin-top: 2px;
}

.khc-article__share .khc-icon--email-solid {
	width: 21px;
	height: 21px;
}

/* Bottom of a case study: "← All case studies" and the next title share a baseline. Share icons
   are circles now; same size for both. */
.khc-case__next {
	align-items: last baseline;
}

.khc-article__share :is(.khc-icon--linkedin-logo, .khc-icon--email-solid) {
	width: 26px;
	height: 26px;
}

/* ======================================================================
   Build 4, Oct. 2: launch polish (SEO session)
   ====================================================================== */

/* Case Studies client cards: titles inherited the body's line height, so two-line names
   ("Imagination Publishing (now The MX Group)") sat too far apart (Kate). */
.khc-client-card__title {
	line-height: 1.2;
}

/* 3.16 Hover on whole-card links: a 3px lift, a soft shadow, the title underline and the image
   easing in 3%. Restrained: nothing moves until the pointer is on the card. */
:is(.khc-insight-card, .khc-insight-feature, .khc-case-row, .khc-case-feature, .khc-case-card,
	.khc-client-card, .khc-client-feature, .khc-index-card) {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

:is(.khc-insight-card, .khc-insight-feature, .khc-case-row, .khc-case-feature, .khc-case-card,
	.khc-client-card, .khc-client-feature, .khc-index-card):is(:hover, :focus-visible) {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px -12px rgb(0 0 0 / 0.18);
}

:is(.khc-insight-card__strip, .khc-case-feature__media, .khc-case-card__media, .khc-client-card__media,
	.khc-client-feature__media, .khc-index-card__media) {
	overflow: hidden;
}

:is(.khc-insight-card__strip, .khc-case-feature__media, .khc-case-card__media, .khc-client-card__media,
	.khc-client-feature__media, .khc-index-card__media, .khc-insight-feature__bg) img {
	transition: transform 0.5s ease;
}

:is(.khc-insight-card, .khc-insight-feature, .khc-case-feature, .khc-case-card, .khc-client-card,
	.khc-client-feature, .khc-index-card):is(:hover, :focus-visible) :is(.khc-insight-card__strip,
	.khc-case-feature__media, .khc-case-card__media, .khc-client-card__media, .khc-client-feature__media,
	.khc-index-card__media, .khc-insight-feature__bg) img {
	transform: scale(1.03);
}

.khc :is(.khc-insight-feature, .khc-client-card, .khc-client-feature):is(:hover, :focus-visible)
	:is(.khc-insight-feature__title, .khc-client-card__title, .khc-client-feature__title),
.khc :is(.khc-case-row, .khc-case-feature, .khc-case-card, .khc-insight-card, .khc-index-card):focus-visible
	:is(.khc-case-row__title, .khc-case-feature__title, .khc-case-card__title, .khc-insight-card__title, .khc-index-card__title) {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Text stays black on hover (the sitewide link hover turned whole cards charcoal). */
.khc :is(.khc-insight-card, .khc-case-row, .khc-case-feature, .khc-case-card, .khc-client-card,
	.khc-client-feature, .khc-index-card):hover {
	color: var(--khc-black);
}

@media (prefers-reduced-motion: reduce) {
	:is(.khc-insight-card, .khc-insight-feature, .khc-case-row, .khc-case-feature, .khc-case-card,
		.khc-client-card, .khc-client-feature, .khc-index-card),
	:is(.khc-insight-card, .khc-insight-feature, .khc-case-feature, .khc-case-card, .khc-client-card,
		.khc-client-feature, .khc-index-card) img {
		transition: none;
		transform: none !important;
	}
}

/* Case Studies showcase: the "More case studies" card (only when there aren't three cases to show)
   is a link now, not a placeholder. */
.khc a.khc-client-soon {
	color: var(--khc-black);
	text-decoration: none;
}

/* Case Studies hero: the rule over the chips sat against the lead's last line (Kate, Oct. 3).
   Even room above and below it. */
.khc-page-hero--left > .khc-chips {
	margin-top: 24px !important;
	padding-top: 24px;
}

/* ======================================================================
   Build 5, Oct. 3: phone pass (3.7)
   ====================================================================== */

/* Insights card chips sit at their own width. The cards' subgrid body stretched them across the card. */
.khc-insight-card__body .khc-chip {
	justify-self: start;
}

/* Newsletter band: room between the address and the Subscribe pill, so the placeholder isn't clipped at 390. */
.khc-newsletter--band .khc-field--inline,
.khc-newsletter--band .khc-hsform form {
	column-gap: 12px;
}

@media (max-width: 480px) {
	.khc-newsletter--band .khc-field--inline input,
	.khc-newsletter--band .khc-hsform .hs-input {
		font-size: 16px;
	}
}

/* The article head and body line up on phones: the hero section's own side padding was doubling the head's inset. */
.khc-article__hero {
	padding-inline: 0;
}

/* Stub numerals never wrap their two digits. */
.khc-num__digits {
	white-space: nowrap;
}

/* Long statement quotes on phones (Kate, Oct. 3): `is-long` comes from khc_long_statement() in inc/blocks.php. */
@media (max-width: 600px) {
	.is-style-khc-statement.is-long {
		font-size: 24px !important;
		line-height: 1.2;
		letter-spacing: -0.02em;
	}
}

/* Accessibility pass (Oct. 3): unanswered quiz numbers were #d9d9d9 on white (1.4:1). This gray keeps the
   "fills in black as you answer" cue and clears 3:1 for large text. */
.khc-quiz__num {
	color: #858b93;
}

/* Booking pages (Kate, Oct. 4): Book's "Book this" links sit on one line at the cards' feet. */
#booking-options .wp-block-group.alignwide > .wp-block-group {
	display: flex;
	flex-direction: column;
}

#booking-options .wp-block-group.alignwide > .wp-block-group > .wp-block-buttons {
	margin-top: auto;
	padding-top: 12px; /* Keeps the card's usual gap when its text runs long. */
}

/* Booking pages with the live HubSpot calendar (Kate, Oct. 4): the details card keeps its natural height,
   and the calendar sits without the site's frame (HubSpot draws its own outline), so there's no double
   border and no empty space under it. The frame stays for the email fallback. */
.khc-book__cols {
	align-items: flex-start !important;
}

.khc-meetings:has(.meetings-iframe-container) {
	height: auto;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

/* Booking pages, desktop (Kate, Oct. 4): the details card lines up with the HubSpot calendar, top and
   bottom. HubSpot draws its calendar about 16px inside its iframe, so the card takes the same inset and
   stretches to the calendar's height. */
@media (min-width: 782px) {
	.khc-book__cols:has(.meetings-iframe-container) {
		align-items: stretch !important;
	}

	.khc-book__cols:has(.meetings-iframe-container) > .wp-block-column {
		display: flex;
		flex-direction: column;
	}

	.khc-book__cols:has(.meetings-iframe-container) > .wp-block-column > .wp-block-group {
		flex: 1 1 auto;
	}
}

/* HubSpot's calendar, measured Oct. 4 by loading its embed page at several widths: from 640px wide it's a
   two-panel card 4px in, 16px down and 670px tall, with a 1px #ccc border and a soft shadow; narrower, it's
   one 400px card centered at the top, 669px tall. Its iframe runs taller than the card, which left a blank
   band. So the iframe gets the card's exact height, and in the two-panel layout the site clips HubSpot's
   border and shadow and draws one light gray outline of its own (Kate: one outline, flush with the card). */
.khc-meetings:has(.meetings-iframe-container) {
	container-type: inline-size;
	overflow: hidden;
}

.khc-meetings .meetings-iframe-container iframe {
	display: block;
	height: 670px !important;
}

@container (min-width: 640px) {
	.khc-meetings .meetings-iframe-container iframe {
		width: calc(100% + 10px) !important;
		height: 702px !important;
		margin: -17px -5px;
	}
}

/* Booking pages, desktop (Kate via the HubSpot session, Oct. 4): one light gray outline around the calendar
   when the site clips HubSpot's (frames 640px and wider; narrower, HubSpot's own card is the only outline),
   and a slightly tighter details card so the calendar is the taller box and the card stretches to match. */
@supports (container-type: inline-size) {
	.khc-meetings:has(.meetings-iframe-container) {
		border-radius: 24px;
	}
}

.khc-meetings:has(.meetings-iframe-container) .meetings-iframe-container {
	border-radius: inherit;
}

@media (min-width: 782px) {
	.khc-book__cols:has(.meetings-iframe-container) .khc-start-card,
	.khc-book__cols:has(.meetings-iframe-container) > .wp-block-column > [class*="is-style-khc-card"] {
		padding: 36px !important;
	}

	.khc-book__cols:has(.meetings-iframe-container) > .wp-block-column > .wp-block-group > * + * {
		margin-block-start: 18px !important;
	}

	.khc-book__cols:has(.meetings-iframe-container) .khc-start-card ul.wp-block-list {
		padding-top: 18px;
	}

	.khc-book__cols:has(.meetings-iframe-container) > .wp-block-column > .wp-block-group ul.wp-block-list > li + li {
		margin-top: 10px;
	}
}

/* The single outline for the two-panel calendar (the container query can't style .khc-meetings itself). */
@container (min-width: 640px) {
	.khc-meetings .meetings-iframe-container {
		height: 670px; /* 668px of HubSpot's card inside a 1px outline. */
		overflow: hidden;
		border: 1px solid var(--khc-gray);
		border-radius: 24px;
		box-sizing: border-box;
	}
}

/* Hero photos with an offset square hold their frame (Kate, Oct. 4): swapping the image in the editor
   wrote the new file's size onto the block (width:315px, a different aspect ratio) and the frame shrank.
   The frame is the column's width at 25/28, the photo covers it; inline sizes from the editor don't win.
   khc_offset_image_frame() in inc/blocks.php also strips them on the front end. */
.khc-hero .wp-block-image[class*="is-style-khc-offset-"] {
	display: block;
	width: auto !important;
	max-width: none;
}

.khc-hero .wp-block-image[class*="is-style-khc-offset-"] img {
	width: 100% !important;
	max-width: 100%;
	height: auto !important;
	aspect-ratio: 25 / 28 !important;
	object-fit: cover !important;
}

/* Stacked (phones and narrow windows): the frame itself is capped, not just the photo, so the offset
   square stays tucked behind the photo's corner instead of drifting to the column's edge (Kate, Oct. 10). */
@media (max-width: 781px) {
	.khc-hero .wp-block-image[class*="is-style-khc-offset-"] {
		width: min(100%, 300px) !important;
	}

	.khc-hero .wp-block-image[class*="is-style-khc-offset-"] img {
		width: 100% !important;
	}
}