@layer child {
	/* Section rhythm. Generous and fluid. */
	.kk-section,
	.kk-pagehero,
	.kk-process {
		padding-block: clamp(5rem, 9.5vw, 9rem);
	}

	/* Cutting-template dashed dividers between grid items. */
	.toc-service-grid__card {
		border-top: 1.5px dashed color-mix(in srgb, var(--color-text) 26%, transparent);
		padding-top: 1.35rem;
	}
	.kk-section__head {
		border-bottom: 1.5px dashed color-mix(in srgb, var(--color-text) 22%, transparent);
		padding-bottom: 1.1rem;
	}

	/* Headings: slab display face, structural. */
	.kk-section h2,
	.kk-pagehero h1,
	.kk-hero h1,
	.kk-story h2,
	.kk-process h2,
	.kk-single-project h1 {
		font-family: var(--font-display);
		font-weight: 700;
		letter-spacing: -0.005em;
		line-height: 1.04;
	}

	/* Kicker: a mono label with a dashed measure mark, like a shop drawing. */
	.kk-kicker,
	.kk-eyebrow {
		display: flex;
		align-items: center;
		gap: 0.65rem;
		font-family: var(--font-mono);
		font-size: var(--size-sm, 0.82rem);
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--color-brand-accent);
		margin: 0 0 1.1rem;
	}
	.kk-kicker::before,
	.kk-eyebrow::before {
		content: "";
		width: 1.75rem;
		border-top: 2px dashed currentColor;
	}

	/* Hero: full-bleed image cover, big left type, content bottom-left. */
	.kk-hero {
		color: var(--color-text-light);
		align-items: flex-end;
	}
	.kk-hero .wp-block-cover__inner-container {
		position: relative;
		width: 100% !important;
		flex-basis: 100% !important;
		max-width: 100% !important;
		padding-inline: max(1.25rem, calc((100% - var(--wp--style--global--content-size, 1200px)) / 2));
	}
	/* Legibility scrim: darkens the bottom (where the content sits) so the
	   light text clears WCAG AA over any part of the photo, without dimming
	   the whole image the way a heavier cover overlay would. */
	.kk-hero .wp-block-cover__inner-container::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to top,
			color-mix(in srgb, var(--color-brand-primary) 82%, transparent) 0%,
			color-mix(in srgb, var(--color-brand-primary) 52%, transparent) 32%,
			transparent 72%
		);
		pointer-events: none;
		z-index: 0;
	}
	.kk-hero__content {
		position: relative;
		z-index: 1;
		max-width: 100%;
		padding-block: clamp(2rem, 5vw, 4rem);
		text-align: left;
	}
	.kk-hero h1 {
		font-size: clamp(2.5rem, 6vw, 4.75rem);
		max-width: 16ch;
		margin: 0 0 1.25rem;
	}
	.kk-hero__sub {
		max-width: 36rem;
	}

	/* Consistent left/right gutter so the hero content lines up with every
	   section on the same margins (padding sits outside the 1200 content column
	   on both, so their content left edges match). */
	.kk-section,
	.kk-pagehero,
	.kk-process,
	.kk-trust,
	.kk-story,
	.kk-footer {
		padding-inline: clamp(1.25rem, 5vw, 2.5rem);
	}
	.kk-hero__cta {
		margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
		gap: 0.75rem;
		justify-content: flex-start;
	}
	/* On the dark hero the kicker goes cream: red-on-photo (and red on the
	   scrim) fails contrast, unlike the red kicker on the light sections. */
	.kk-hero .kk-kicker {
		color: var(--color-text-light);
	}
	/* Belt-and-suspenders legibility for every hero text element. */
	.kk-hero h1,
	.kk-hero__sub,
	.kk-hero .kk-kicker {
		text-shadow: 0 1px 10px color-mix(in srgb, var(--color-brand-primary) 60%, transparent);
	}

	/* Trust bar: dashed spec row, like a cut line. */
	.kk-trust {
		padding-block: 1.15rem;
		border-block: 1.5px dashed color-mix(in srgb, var(--color-text) 28%, transparent);
	}
	.kk-trust__row {
		gap: 1.25rem 2.5rem;
	}
	.kk-trust__item {
		margin: 0;
		font-family: var(--font-mono);
		font-weight: 500;
		font-size: var(--size-sm, 0.82rem);
		letter-spacing: 0.02em;
		color: color-mix(in srgb, var(--color-text) 78%, transparent);
	}

	/* Section head: heading left, "see all" link right. */
	.kk-section__head {
		gap: 1rem 2rem;
		margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
	}
	.kk-section__head h2 { margin: 0; }
	.kk-seelink,
	.kk-inline-link { margin: 0; }
	.kk-seelink a,
	.kk-inline-link a {
		font-family: var(--font-subhead);
		font-weight: 600;
		text-decoration: none;
	}
	.kk-inline-link a { color: var(--color-text-light); }
	.kk-seelink a::after,
	.kk-inline-link a::after { content: " \2192"; }

	/* Story strip: image + text on the brand band. */
	.kk-story {
		padding-block: clamp(4rem, 8vw, 7.5rem);
	}
	.kk-story__cols { gap: clamp(2rem, 5vw, 4rem); }
	.kk-story__img {
		position: relative;
		margin: 0;
	}
	.kk-story__img img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 5;
		object-fit: cover;
		position: relative;
		z-index: 1;
	}
	/* Dashed offset frame, like a drawing registered behind the photo. */
	.kk-story__img::after {
		content: "";
		position: absolute;
		inset: 14px -14px -14px 14px;
		border: 2px dashed var(--color-brand-accent);
		z-index: 0;
	}
	.kk-story h2 { margin: 0 0 1rem; }

	/* Process: made-to-order steps with dashed cut lines and slab numbers. */
	.kk-process__steps {
		margin-block-start: clamp(2rem, 4vw, 3.25rem);
		gap: clamp(1.5rem, 3vw, 2.5rem) !important;
	}
	.kk-step {
		border-top: 2px dashed color-mix(in srgb, var(--color-text) 28%, transparent);
		padding-top: 1.25rem;
		gap: 0.35rem;
	}
	.kk-step__num {
		font-family: var(--font-display);
		font-weight: 700;
		font-size: 2.5rem;
		line-height: 1;
		color: var(--color-brand-accent);
		margin: 0 0 0.6rem;
		font-variant-numeric: tabular-nums;
	}
	.kk-step h3 { margin: 0; font-family: var(--font-display); }
	.kk-step p {
		margin: 0.35rem 0 0;
		color: color-mix(in srgb, var(--color-text) 76%, transparent);
	}
	@media (max-width: 900px) {
		.kk-process__steps { grid-template-columns: repeat(2, 1fr) !important; }
	}
	@media (max-width: 560px) {
		.kk-process__steps { grid-template-columns: 1fr !important; }
	}

	/* Badges (About page). */
	.kk-badge {
		font-family: var(--font-subhead);
		font-weight: 600;
		padding: 0.35rem 0.85rem;
		border-radius: 999px;
		background: color-mix(in srgb, var(--color-brand-secondary) 12%, transparent);
		color: var(--color-text);
		margin: 0;
	}

	/* Contact two-column */
	.kk-contactgrid__cols {
		gap: var(--space-2xl, 2.5rem);
	}

	/* Search results as clean hairline rows (zero the inherited post-card look) */
	.kk-searchresults .wp-block-post-template {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.kk-searchresults .wp-block-post-template > li {
		border: 0;
		border-block-end: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
		padding-block: var(--space-lg, 1.5rem);
	}
	.kk-searchresults .wp-block-post-title {
		border: 0;
	}
	.kk-searchresults .wp-block-post-title a {
		text-decoration: none;
		color: var(--color-text);
		font-family: var(--font-display);
	}
	.kk-searchresults .wp-block-post-title a:hover {
		color: var(--color-brand-secondary);
	}
	/* 404: breathing room between the search field and the "See our work" CTA. */
	.kk-404cta {
		margin-top: var(--space-lg, 1.5rem);
	}

	/* Fluent Forms wrapper: minimal, readable defaults (full polish in Plan 4) */
	.kk-form .ff-el-input--label label {
		font-family: var(--font-subhead);
		font-weight: 600;
		color: var(--color-text);
	}
	.kk-form input[type="text"],
	.kk-form input[type="email"],
	.kk-form input[type="tel"],
	.kk-form select,
	.kk-form textarea {
		width: 100%;
		font: inherit;
	}

	/* Module blocks rendered from patterns. The parent module CSS only loads on
	   CPT archives/singulars (has_block reads post_content, which is empty on
	   pattern-rendered pages), so the child owns their layout in this
	   always-loaded stylesheet. Matches the efx1 build convention. */

	/* Services grid */
	.toc-service-grid {
		display: grid;
		gap: var(--space-xl, 2rem);
		grid-template-columns: repeat(3, 1fr);
	}
	.toc-service-grid__card {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}
	.toc-service-grid__title {
		font-family: var(--font-display);
		font-size: var(--size-xl, 1.4rem);
		margin: 0;
	}
	.toc-service-grid__description {
		margin: 0;
		color: var(--color-text);
		opacity: 0.85;
	}

	/* Testimonials: a stacked list with a dashed divider between each. */
	.toc-testimonial-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
		border-bottom: 1.5px dashed color-mix(in srgb, var(--color-text) 28%, transparent);
	}
	.toc-testimonial-grid__card {
		border: 0;
		border-top: 1.5px dashed color-mix(in srgb, var(--color-text) 28%, transparent);
		border-radius: 0;
		background: transparent;
		padding-block: clamp(1.6rem, 3.2vw, 2.4rem);
		display: grid;
		gap: 0.5rem;
	}
	.toc-testimonial-grid__quote {
		font-family: var(--font-display);
		font-size: clamp(1.25rem, 2.2vw, 1.6rem);
		line-height: 1.35;
		margin: 0;
		max-width: 48ch;
	}
	.toc-testimonial-grid__author {
		margin-block-start: 0.35rem;
	}
	.toc-testimonial-grid__author-name {
		font-family: var(--font-subhead);
		font-weight: 600;
		font-style: normal;
	}
	.toc-testimonial-grid__author-business,
	.toc-testimonial-grid__author-role {
		/* 70% (not 60%) clears 4.5:1 on the cream, grain-textured testimonial band — WCAG AA. */
		color: color-mix(in srgb, var(--color-text) 70%, transparent);
	}

	/* FAQ accordion */
	.toc-faq-accordion {
		max-width: 760px;
		margin-inline: auto;
	}
	.toc-faq-accordion__item {
		border-block-end: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
	}
	.toc-faq-accordion__item summary {
		font-family: var(--font-subhead);
		font-weight: 600;
		cursor: pointer;
		padding-block: 1rem;
		list-style: none;
	}
	.toc-faq-accordion__item summary::-webkit-details-marker { display: none; }
	.toc-faq-accordion__answer {
		padding-block-end: 1rem;
		color: var(--color-text);
		opacity: 0.9;
	}

	/* Project grid (home teaser; the /projects/ archive uses the parent portfolio.css) */
	.toc-project-grid {
		display: grid;
		gap: var(--space-xl, 2rem);
		grid-template-columns: repeat(3, 1fr);
	}
	.toc-project-grid__item {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	/* Module grids collapse on smaller screens */
	@media (max-width: 900px) {
		.toc-service-grid,
		.toc-testimonial-grid,
		.toc-project-grid { grid-template-columns: repeat(2, 1fr); }
	}
	@media (max-width: 600px) {
		.toc-service-grid,
		.toc-testimonial-grid,
		.toc-project-grid { grid-template-columns: 1fr; }
	}
}

/* Buttons. UNLAYERED to beat the parent's unlayered block button styles,
   the same pattern used for the gallery filter chips and nav. */
.wp-block-button__link {
	border-radius: 4px;
	font-family: var(--font-subhead);
	font-weight: 600;
}
.wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 1px;
}

/* Search "View page" more-link. The parent (layer:components) makes it a red
   button, but theme.json's UNLAYERED link color (brand-accent = red) overrode
   the text to red-on-red — invisible. So force cream text UNLAYERED (like the
   .has-brand-accent-background-color button above), and take the gold hover
   down to the site's darker red so it matches the hero CTA. */
.kk-searchresults .wp-block-post-excerpt__more-link {
	color: var(--color-text-light) !important;
}
.kk-searchresults .wp-block-post-excerpt__more-link:hover,
.kk-searchresults .wp-block-post-excerpt__more-link:focus-visible {
	background-color: var(--color-brand-secondary);
	border-color: var(--color-brand-secondary);
	color: var(--color-text-light) !important;
}

/* Project card titles: no underline (beats the parent's unlayered link style). */
.toc-project-grid__title-link,
.toc-project-card__title-link {
	text-decoration: none;
}
.toc-project-grid__title-link:hover,
.toc-project-card__title-link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =============================================================
   HEADER. Logo left, nav, dark flush-right "Request a Quote".
   Unlayered to beat the parent header/nav rules.
   ============================================================= */
header .kk-header {
	padding: 0;
	min-height: 84px;
	background: var(--color-bg);
	border-bottom: 1.5px dashed color-mix(in srgb, var(--color-text) 22%, transparent);
	align-items: stretch;
	flex-wrap: nowrap;
}
.kk-header__brand {
	/* Full-bleed (mobile) header: give the logo the page gutter. On desktop the
	   header box is capped at the content size and centred, so its own left edge is
	   already the content column and this collapses to the gutter fallback, which
	   the min-width rule below zeroes out. */
	padding-inline-start: max(1.25rem, calc((100% - var(--wp--style--global--content-size, 1200px)) / 2));
	padding-inline-end: 1.5rem;
	align-items: center;
}
@media (min-width: 1200px) {
	/* The header is centred at the content size, so its left edge sits on the
	   content column already. Drop the extra start padding so the logo lines up
	   with the footer logo and every page section instead of 1.25rem inside them. */
	.kk-header__brand { padding-inline-start: 0; }
}
header .kk-header__brand .wp-block-site-title {
	flex: 0 0 auto !important;
}
.kk-header__brand .wp-block-site-title a {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--size-xl, 1.4rem);
	letter-spacing: -0.01em;
	text-decoration: none;
	color: var(--color-text);
}

/* =============================================================
   LOGO LOCKUP: solid interlocked-KK monogram (vector-traced from the
   client's artwork) + a two-line "Kaufman's Kabinets, Inc." wordmark set
   in the brand face Jazz LET Plain, baked to true glyph outlines (crisp,
   engraved; NOT a trace). Header = espresso monogram + deep-red wordmark on
   the light bar; footer = both cream on the espresso ground. Colour is
   baked into pre-coloured SVG variants (kk-monogram-*, kk-wordmark-*)
   because an SVG loaded through an <img> does NOT inherit currentColor.
   ============================================================= */
.kk-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	text-decoration: none;
	color: inherit;
	line-height: 1;
}
.kk-logo__mark {
	height: 58px;
	width: auto;
	flex: 0 0 auto;
}
.kk-logo__word {
	height: 58px;
	width: auto;
	flex: 0 1 auto;
	min-width: 0; /* let the wide two-line wordmark shrink rather than overflow */
}
@media (max-width: 600px) {
	.kk-logo { gap: 0.6rem; }
	.kk-logo__mark,
	.kk-logo__word { height: 46px; }
}
/* Footer lock-up spacing (cream variants are supplied by the footer pattern). */
.kk-logo--footer {
	margin-bottom: 1.15rem;
}

/* =============================================================
   SOCIAL BRAND ICONS (parent toc/social-links ships structural CSS only).
   One cohesive filled brand set (Simple Icons), sized and hover-styled here.
   ============================================================= */
.toc-social-links__icon {
	display: block;
	width: 22px;
	height: 22px;
}
.toc-social-links__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}
.toc-social-links__link {
	color: currentColor;
	transition: color 0.2s ease, transform 0.2s ease;
}
.toc-social-links__link:hover,
.toc-social-links__link:focus-visible {
	color: var(--color-brand-accent);
	transform: translateY(-2px);
}
/* On the espresso footer, lift to cream instead of red-on-dark. */
.kk-footer .toc-social-links__link:hover,
.kk-footer .toc-social-links__link:focus-visible {
	color: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
	.toc-social-links__link:hover { transform: none; }
}
.kk-header__end {
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: stretch;
}
.kk-header__end .wp-block-navigation {
	align-items: center;
}
.kk-header__end .wp-block-navigation .wp-block-navigation-item__content {
	font-family: var(--font-subhead);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var(--size-sm, 0.85rem);
	color: var(--color-text);
}
.kk-header__end .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--color-brand-accent);
}
.kk-header__cta {
	align-self: stretch;
	align-items: center;
	margin: 0;
	padding-inline: clamp(1.5rem, 3vw, 2.75rem);
	background: var(--color-brand-primary);
	transition: background-color 0.2s ease;
}
.kk-header__cta:hover { background: var(--color-brand-accent); }
.kk-header__cta p { margin: 0; }
.kk-header__cta a {
	color: var(--color-text-light);
	text-decoration: none;
	font-family: var(--font-subhead);
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	font-size: var(--size-sm, 0.9rem);
}
@media (max-width: 800px) {
	.kk-header__cta { display: none; }
}

/* =============================================================
   FOOTER. Dark, cream, dashed cutting-template nav, blurb.
   ============================================================= */
.kk-footer {
	padding-block: clamp(4rem, 8vw, 7rem);
}
.kk-footer a { color: var(--color-text-light); }
.kk-footer .kk-kicker {
	color: color-mix(in srgb, var(--color-text-light) 80%, transparent);
}
.kk-footer__top { gap: clamp(2rem, 6vw, 5rem); }
.kk-footer__nav { display: flex; flex-direction: column; }
.kk-footer__navitem {
	margin: 0;
	border-top: 1.5px dashed color-mix(in srgb, var(--color-text-light) 32%, transparent);
	padding-block: clamp(0.65rem, 1.6vw, 1.05rem);
}
.kk-footer__navitem:last-child {
	border-bottom: 1.5px dashed color-mix(in srgb, var(--color-text-light) 32%, transparent);
}
.kk-footer__navitem a {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-size: clamp(1.6rem, 3.6vw, 2.4rem);
	line-height: 1.1;
	color: var(--color-text-light) !important;
	text-decoration: none;
	display: block;
}
.kk-footer__navitem a:hover { color: var(--color-brand-accent) !important; }
.kk-footer__blurb {
	max-width: 42ch;
	color: color-mix(in srgb, var(--color-text-light) 82%, transparent);
}
.kk-footer__bottom {
	margin-block-start: clamp(2.5rem, 5vw, 4rem);
	padding-block-start: 1.4rem;
	border-top: 1.5px dashed color-mix(in srgb, var(--color-text-light) 26%, transparent);
}
.kk-footer__bottom p {
	margin: 0;
	color: color-mix(in srgb, var(--color-text-light) 72%, transparent);
}

/* =============================================================
   MOBILE NAV. Dashed dividers between items.
   ============================================================= */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container
	> .wp-block-navigation-item {
	border-bottom: 1.5px dashed color-mix(in srgb, var(--color-text-light) 32%, transparent) !important;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container
	> .wp-block-navigation-item:first-child {
	border-top: 1.5px dashed color-mix(in srgb, var(--color-text-light) 32%, transparent) !important;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container
	> .wp-block-navigation-item
	> .wp-block-navigation-item__content {
	font-family: var(--font-display) !important;
}
/* Left-align the mobile nav (container, items, and link text). */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100% !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	text-align: left !important;
	justify-content: flex-start !important;
}
/* Each item is a flex column; the parent right-aligns it via align-items.
   Flip that to the start so every link sits on the left margin. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start !important;
}

/* =============================================================
   BUTTONS + LINK HOVERS. Light text over any red; hover states.
   ============================================================= */
.wp-block-button__link.has-brand-accent-background-color {
	color: var(--color-text-light) !important;
}
.wp-block-button__link.has-brand-accent-background-color:hover,
.wp-block-button__link.has-brand-accent-background-color:focus-visible {
	background-color: var(--color-brand-secondary) !important;
	color: var(--color-text-light) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: color-mix(in srgb, currentColor 14%, transparent);
}
.kk-seelink a:hover,
.kk-inline-link a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.kk-section p a:hover,
.kk-pagehero p a:hover,
.kk-process p a:hover {
	color: var(--color-brand-secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Sections touch the header, the footer, and each other (no body-bg gaps). */
.wp-site-blocks > main {
	padding-block: 0 !important;
}
.wp-site-blocks > main > * {
	margin-block: 0 !important;
}

/* WordPress core gives any group WITH a background a flat 1.25em padding
   (unlayered), which overrode our layered section rhythm — so backgrounded
   sections (.kk-story, and every bg-alt .kk-section) came out cramped while
   plain sections were fine. Restore the standard rhythm, unlayered and
   specific enough to win, wherever a section carries a background. The CTA,
   footer, and trust bar keep their own bespoke padding and are not listed. */
.kk-section.has-background,
.kk-story.has-background,
.kk-pagehero.has-background {
	padding-block: clamp(5rem, 9.5vw, 9rem);
	padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

/* Links on dark bands are cream, never red on dark. */
.kk-story a,
.kk-cta a:not(.wp-block-button__link) {
	color: var(--color-text-light) !important;
}
.kk-story .kk-inline-link a {
	color: #F2F2F2 !important;
}

/* Quote CTA band: deep red, dashed light top separator, generous, flush on the footer. */
.kk-cta {
	padding-block: clamp(3.5rem, 7vw, 6rem);
	padding-inline: clamp(1.25rem, 5vw, 2.5rem);
	border-top: 1.5px dashed color-mix(in srgb, var(--color-text-light) 34%, transparent);
}
.kk-cta h2 {
	font-family: var(--font-display);
	letter-spacing: -0.005em;
}
/* Breathing room between the sub-text and the button. */
.kk-cta .wp-block-buttons {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
/* Cream action button on the red band (light over red). */
.kk-cta .wp-block-button__link {
	background-color: var(--color-text-light) !important;
	color: var(--color-brand-primary) !important;
}
.kk-cta .wp-block-button__link:hover,
.kk-cta .wp-block-button__link:focus-visible {
	background-color: #ffffff !important;
	color: var(--color-brand-primary) !important;
}

/* =============================================================
   INTERIOR PAGE HEROES, SERVICE ICONS, BIO, CONTACT, FAQ, FORM.
   ============================================================= */

/* Keep the hero headline/sub left-aligned (WP would center a max-width child). */
.kk-hero h1,
.kk-hero__sub {
	margin-inline: 0 !important;
}

/* Shorter cover hero on interior pages. */
.kk-hero--page h1 {
	font-size: clamp(2.1rem, 4.2vw, 3.4rem);
	max-width: 22ch;
}
.kk-hero--page .kk-hero__content {
	padding-block: clamp(1.5rem, 4vw, 3rem);
}

/* Service icons: masked SVG tinted with the brand accent. */
.toc-service-grid__icon {
	margin-bottom: 0.9rem;
	line-height: 0;
}
.kk-svcico {
	display: inline-block;
	width: 38px;
	height: 38px;
	background-color: var(--color-brand-accent);
	-webkit-mask: var(--kk-ico) no-repeat center / contain;
	mask: var(--kk-ico) no-repeat center / contain;
}
.kk-svcico-kitchen  { --kk-ico: url("../images/icons/kitchen.svg"); }
.kk-svcico-bath     { --kk-ico: url("../images/icons/bath.svg"); }
.kk-svcico-refacing { --kk-ico: url("../images/icons/refacing.svg"); }
.kk-svcico-storage  { --kk-ico: url("../images/icons/storage.svg"); }
.kk-svcico-moulding { --kk-ico: url("../images/icons/moulding.svg"); }
.kk-svcico-builtins { --kk-ico: url("../images/icons/builtins.svg"); }

/* About bio: photo + text, dashed offset frame. */
.kk-bio__cols { gap: clamp(1.75rem, 4vw, 3.5rem); }
.kk-bio__img {
	position: relative;
	margin: 0;
}
.kk-bio__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 6px;
	position: relative;
	z-index: 1;
}
.kk-bio__img::after {
	content: "";
	position: absolute;
	inset: 13px -13px -13px 13px;
	border: 2px dashed var(--color-brand-accent);
	z-index: 0;
}
.kk-bio h2 { margin: 0.25rem 0 0.85rem; }

/* Contact side: titles + icon list. */
.kk-contactside__title {
	font-family: var(--font-mono);
	font-size: var(--size-sm, 0.82rem);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-brand-secondary);
	margin: 2rem 0 0.85rem;
}
.kk-contactside > .kk-contactside__title:first-child { margin-top: 0; }
.kk-contactside .kk-contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}
.kk-contactside .kk-contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
}
.kk-contactside .kk-contact a { color: var(--color-brand-accent); text-decoration: none; }
.kk-contactside .kk-contact a:hover { color: var(--color-brand-secondary); text-decoration: underline; }
.kk-contactside .kk-ic {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--color-brand-accent);
}

/* FAQ: align to the content margin, dashed dividers like the testimonials. */
.toc-faq-accordion {
	max-width: var(--wp--style--global--content-size, 1200px) !important;
	margin-inline: auto !important;
	border-top: 1.5px dashed color-mix(in srgb, var(--color-text) 26%, transparent);
}
.toc-faq-accordion__item {
	border-block-end: 1.5px dashed color-mix(in srgb, var(--color-text) 26%, transparent) !important;
}

/* Contact form: white fields on the cream page, cream submit-button text. */
.kk-form input[type="text"],
.kk-form input[type="email"],
.kk-form input[type="tel"],
.kk-form select,
.kk-form textarea {
	background: #FFFFFF !important;
	border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent) !important;
	border-radius: 4px !important;
}
.kk-form .ff-btn-submit {
	background: var(--color-brand-accent) !important;
	color: var(--color-text-light) !important;
	border: 0 !important;
	border-radius: 4px !important;
	font-weight: 600 !important;
}
.kk-form .ff-btn-submit:hover { background: var(--color-brand-secondary) !important; }

/* =============================================================
   HOVER MOTION: buttons lift, service icons nudge, footer nav slides.
   ============================================================= */
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.wp-block-button__link:hover {
	transform: translateY(-2px);
}
.kk-svcico {
	transition: transform 0.25s ease;
}
.toc-service-grid__card:hover .kk-svcico {
	transform: scale(1.12) rotate(-3deg);
}
.kk-footer__navitem a {
	transition: color 0.2s ease, padding-left 0.25s ease;
}
.kk-footer__navitem a:hover {
	padding-left: 0.5rem;
}
.kk-header__end .wp-block-navigation .wp-block-navigation-item__content {
	transition: color 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link:hover { transform: none; }
	.toc-service-grid__card:hover .kk-svcico { transform: none; }
	.kk-footer__navitem a:hover { padding-left: 0; }
}
.kk-story a:hover,
.kk-cta a:not(.wp-block-button__link):hover {
	color: color-mix(in srgb, var(--color-text-light) 65%, #ffffff) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =============================================================
   FOOTER section titles + contact list with icons.
   ============================================================= */
.kk-footer__title {
	font-family: var(--font-mono);
	font-size: var(--size-sm, 0.82rem);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: color-mix(in srgb, var(--color-text-light) 68%, transparent);
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0.85rem;
}
.kk-footer__infocol > .kk-footer__title:first-child { margin-top: 0; }
.kk-footer .kk-footer__blurb { margin-top: 0; }
.kk-footer .kk-contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.65rem;
}
.kk-footer .kk-contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	color: color-mix(in srgb, var(--color-text-light) 88%, transparent);
}
.kk-footer .kk-contact a {
	color: var(--color-text-light);
	text-decoration: none;
}
.kk-footer .kk-contact a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.kk-footer .kk-ic {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	margin-top: 2px;
	color: color-mix(in srgb, var(--color-text-light) 72%, transparent);
}

/* =============================================================
   WOOD-GRAIN TEXTURE BANDS (parallax). A section tagged .kk-tex gets
   a grayscale wood texture behind its content, tinted by the band's
   own background color through mix-blend-mode, and drifted on scroll
   by parallax.js (which sets --kk-tex-py). The ::before is oversized
   top and bottom so an edge never shows as it travels. isolation
   keeps the blend from bleeding onto neighboring sections.
   ============================================================= */
.kk-tex {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.kk-tex::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -14%;
	bottom: -14%;
	background: var(--kk-tex-img) center / cover no-repeat;
	opacity: var(--kk-tex-op, 0.5);
	mix-blend-mode: var(--kk-tex-blend, soft-light);
	transform: translate3d(0, var(--kk-tex-py, 0px), 0);
	will-change: transform;
	z-index: 0;
	pointer-events: none;
}
.kk-tex > * {
	position: relative;
	z-index: 1;
}
/* Dramatic tree-ring, tinted by a dark band (espresso or red). Kept low so
   the band colour stays dominant and light text keeps its contrast. */
.kk-tex--rings {
	--kk-tex-img: url("../images/natural-wood-grain.webp");
	--kk-tex-op: 0.22;
	--kk-tex-blend: soft-light;
}
/* Subtle flowing plank grain for light bands (cream / gray). */
.kk-tex--grain {
	--kk-tex-img: url("../images/wood-grain.webp");
	--kk-tex-op: 0.35;
	--kk-tex-blend: multiply;
}
/* Cracked, knotted slab for the red CTA band. */
.kk-tex--cracked {
	--kk-tex-img: url("../images/cracked-knotted-grain.webp");
	--kk-tex-op: 0.42;
	--kk-tex-blend: soft-light;
}

/* =============================================================
   SCROLL REVEAL. reveal.js sets .kk-js on <html> before paint and
   adds .is-visible as each element scrolls into view. The hidden
   state only applies under .kk-js (JS present) and only when the
   viewer has not asked to reduce motion, so no-JS and reduced-motion
   visitors always see content in place.
   ============================================================= */
@media (prefers-reduced-motion: no-preference) {
	.kk-js .kk-hero__content,
	.kk-js .kk-kicker,
	.kk-js .kk-section > .wp-block-heading,
	.kk-js .kk-section__head,
	.kk-js .kk-story__cols,
	.kk-js .kk-bio__cols,
	.kk-js .kk-cta,
	.kk-js .kk-process > .wp-block-heading,
	.kk-js .kk-trust__row,
	.kk-js .kk-badge,
	.kk-js .toc-project-grid__item,
	.kk-js .toc-service-grid__card,
	.kk-js .toc-testimonial-grid__card,
	.kk-js .kk-step {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
			transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
		will-change: opacity, transform;
	}
	.kk-js .is-visible {
		opacity: 1;
		transform: none;
	}
}