/*
Theme Name: Krayniy Painting
Theme URI: https://krayniy.com
Description: Krayniy Painting — "Heritage Trade": editorial serif on a spec-sheet structure. Limewash grounds, warm charcoal ink, red-oxide accent. Built on Twenty Twenty-Five.
Author: Krayniy Painting
Template: twentytwentyfive
Version: 3.0.0
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.4
Text Domain: krayniy-painting
*/

/* ==========================================================================
   Krayniy Painting — component layer
   Direction: Heritage Trade. Editorial serif (Vollkorn) carries the voice,
   Fira Sans does the work, Fira Code labels the spec. Structure comes from
   rules, not cards. Radius 0. No coloured shadows. No blue anywhere.

   Tokens live in site/design/tokens.json -> assets/tokens.css (:root vars).
   NO raw hex belongs in this file, so site/build/audit-a11y.py stays
   authoritative for WCAG 2.1 AA.
   ========================================================================== */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: var(--kp-white);
}

/* Radius is zero across the board — the direction is hard-edged. */
.wp-block-button__link,
.wp-block-details,
.kp-panel,
.kp-photo-ph,
input, select, textarea { border-radius: 0; }

/* --------------------------------------------------------------------------
   1. THE SPEC LINE — the signature device.
   A mono, tracked, hairline-ruled label. It replaces the all-caps sans eyebrow
   and is used only where it carries real information.
   -------------------------------------------------------------------------- */
.kp-eyebrow,
.kp-spec {
	display: block;
	margin: 0 0 var(--kp-space-30);
	font-family: var(--kp-font-mono);
	font-size: var(--kp-text-2xs);
	font-weight: var(--kp-weight-medium);
	letter-spacing: var(--kp-tracking-label);
	text-transform: uppercase;
	color: var(--kp-taupe-ink);
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--kp-taupe-rule);
}
.kp-hero .kp-eyebrow,
.kp-pagehero .kp-eyebrow,
.kp-cta-band .kp-eyebrow,
.kp-band-dark .kp-eyebrow,
.kp-hero .kp-spec,
.kp-cta-band .kp-spec,
.kp-band-dark .kp-spec {
	color: var(--kp-taupe-ink);
	border-bottom-color: var(--kp-grey-2);
}

/* A spec line that runs inline, separated by rules, rather than as a heading. */
.kp-specline {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--kp-font-mono);
	font-size: var(--kp-text-2xs);
	letter-spacing: var(--kp-tracking-label);
	text-transform: uppercase;
	color: var(--kp-muted);
}
.kp-specline > * { padding: .35rem 1.1rem; border-left: 1px solid var(--kp-grey-2); }
.kp-specline > :first-child { padding-left: 0; border-left: 0; }
.kp-hero .kp-specline, .kp-cta-band .kp-specline { color: var(--kp-muted); }
.kp-hero .kp-specline > *, .kp-cta-band .kp-specline > * { border-left-color: var(--kp-grey-2); }

/* --------------------------------------------------------------------------
   2. FOCUS — WCAG 2.4.7. Two contexts so the ring always clears 3:1.
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--kp-ink);
	outline-offset: 2px;
}
.kp-topbar :where(a, button):focus-visible,
.kp-hero :where(a, button, summary):focus-visible,
.kp-pagehero :where(a, button, summary):focus-visible,
.kp-cta-band :where(a, button, summary):focus-visible,
.kp-band-dark :where(a, button, summary):focus-visible,
.kp-footer :where(a, button):focus-visible,
.kp-mobile-bar a:focus-visible {
	outline-color: var(--kp-ink);
}
/* Ink ring reads 3.62:1 on the oxide CTA. */
.wp-block-button.kp-btn-primary .wp-block-button__link:focus-visible { outline-color: var(--kp-ink); }
.kp-hero .kp-btn-primary .wp-block-button__link:focus-visible,
.kp-pagehero .kp-btn-primary .wp-block-button__link:focus-visible,
.kp-cta-band .kp-btn-primary .wp-block-button__link:focus-visible { outline-color: var(--kp-ink); }

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

/* --------------------------------------------------------------------------
   3. BUTTONS — flat, sharp, no lift and no glow. Motion is a rule, not a shadow.
   -------------------------------------------------------------------------- */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--kp-target-primary);
	font-family: var(--kp-font-body);
	font-weight: var(--kp-weight-semibold);
	font-size: var(--kp-text-sm);
	letter-spacing: .02em;
	line-height: 1.2;
	text-decoration: none;
	border-radius: 0;
	box-shadow: none;
	transition: background-color var(--kp-motion-base) var(--kp-motion-ease),
	            color var(--kp-motion-base) var(--kp-motion-ease),
	            box-shadow var(--kp-motion-base) var(--kp-motion-ease);
}

/* Primary — solid oxide with a bone label. The fill clears 3:1 against every
   ground on the site (4.31:1 on bone), so the control needs no boundary ring. */
.wp-block-button.kp-btn-primary .wp-block-button__link {
	background-color: var(--kp-ink);
	color: var(--kp-white);
}
.wp-block-button.kp-btn-primary .wp-block-button__link:hover { background-color: var(--kp-muted); color: var(--kp-white); }
.wp-block-button.kp-btn-primary .wp-block-button__link:active { background-color: var(--kp-ink); color: var(--kp-white); }

/* Secondary — a rule, not a fill. */
.wp-block-button.kp-btn-outline .wp-block-button__link {
	background-color: var(--kp-white);
	color: var(--kp-ink);
	box-shadow: inset 0 0 0 1px var(--kp-ink);
}
.wp-block-button.kp-btn-outline .wp-block-button__link:hover { background-color: var(--kp-ink); color: var(--kp-white); }

/* Secondary on a tinted band. No dark grounds remain, so this matches the
   outline variant rather than being a ghost button. */
.wp-block-button.kp-btn-light .wp-block-button__link {
	background-color: var(--kp-white);
	color: var(--kp-ink);
	box-shadow: inset 0 0 0 1px var(--kp-ink);
}
.wp-block-button.kp-btn-light .wp-block-button__link:hover { background-color: var(--kp-ink); color: var(--kp-white); }

/* --------------------------------------------------------------------------
   4. TYPE ROLES
   -------------------------------------------------------------------------- */
.kp-lede {
	font-size: var(--kp-text-lg);
	line-height: var(--kp-leading-normal);
	color: var(--kp-muted);
	max-width: 46ch;
}
.kp-hero .kp-lede,
.kp-pagehero .kp-lede,
.kp-cta-band .kp-lede,
.kp-band-dark .kp-lede { color: var(--kp-muted); }

/* --------------------------------------------------------------------------
   5. UTILITY BAR + HEADER
   -------------------------------------------------------------------------- */
.kp-topbar {
	background: var(--kp-parchment);
	color: var(--kp-ink);
	padding-block: .5rem;
	border-bottom: 1px solid var(--kp-grey-2);
}
.kp-topbar p {
	margin: 0;
	font-family: var(--kp-font-mono);
	font-size: var(--kp-text-2xs);
	letter-spacing: var(--kp-tracking-label);
	text-transform: uppercase;
	line-height: 1.6;
}
.kp-topbar strong { color: var(--kp-ink); font-weight: var(--kp-weight-semibold); }
@media (max-width: 781px) { .kp-topbar { display: none; } }

.kp-header {
	background: var(--kp-white);
	border-bottom: 1px solid var(--kp-ink);
	padding-block: .85rem;
	position: sticky;
	top: 0;
	z-index: 90;
}
.admin-bar .kp-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .kp-header { top: 46px; } }
.kp-header-inner { align-items: center; gap: var(--kp-space-40); }

/* Logo lockup: monochrome ink. The owner's real mark is navy and will differ
   from the palette by design — a mono lockup sits with any brand colour. */
.kp-logo,
.kp-logo a {
	font-family: var(--kp-font-display);
	font-weight: var(--kp-weight-bold);
	font-size: 1.25rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--kp-ink);
	text-decoration: none;
	line-height: 1;
}
.kp-logo {
	display: flex;
	align-items: center;
	min-height: var(--kp-target-primary);
	margin: 0 0 0 var(--kp-space-30);
	padding-left: var(--kp-space-30);
	border-left: 1px solid var(--kp-taupe-rule);
	white-space: nowrap;
	flex: 0 0 auto;
}
/* The owner's real logo. It is a stacked lockup — house-and-brush mark above
   the wordmark — in white on a solid navy (#13213C) field, imported unmodified
   and NOT recoloured. Because the navy ground is baked into the artwork it
   reads as a brand tile; a hairline and generous gap separate it from the set
   wordmark so the navy sits deliberately against the white header rather than
   fighting the warm palette. A brand mark is exempt from WCAG 1.4.3.  */
.kp-brand {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	min-height: var(--kp-target-primary);
}
.kp-mark { display: flex; align-items: center; margin: 0; line-height: 0; }
.kp-mark a,
.kp-mark .custom-logo-link {
	display: flex;
	align-items: center;
	min-height: var(--kp-target-primary);
}
.kp-mark img,
.kp-mark .custom-logo {
	display: block;
	width: 54px;
	height: 54px;
	max-width: none;
	object-fit: contain;
}

.kp-logo a { display: flex; align-items: center; min-height: var(--kp-target-primary); }

/* Nav — quiet, with an oxide rule drawn on hover. */
.kp-nav { font-family: var(--kp-font-body); font-size: var(--kp-text-sm); font-weight: var(--kp-weight-medium); flex: 0 1 auto; }
.kp-nav .wp-block-navigation__container { gap: .1rem; flex-wrap: nowrap; }
.kp-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: var(--kp-target-primary);
	padding: 0 .7rem;
	color: var(--kp-ink);
	text-decoration: none;
	white-space: nowrap;
	position: relative;
}
.kp-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: .7rem; right: .7rem; bottom: 9px;
	height: 2px;
	background: var(--kp-ink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--kp-motion-base) var(--kp-motion-ease);
}
.kp-nav .wp-block-navigation-item__content:hover::after,
.kp-nav .current-menu-item > .wp-block-navigation-item__content::after,
.kp-nav .current-menu-ancestor > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.kp-nav .wp-block-navigation__submenu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	min-height: var(--kp-target-primary);
	padding: 0 .2rem;
	background: transparent;
	border: 0;
}
.kp-nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--kp-ink);
	box-shadow: var(--kp-shadow-float);
	border-radius: 0;
	padding: 0;
	min-width: 16rem;
	background: var(--kp-white);
}
.kp-nav .wp-block-navigation__submenu-container .wp-block-navigation-item { border-top: 1px solid var(--kp-grey-2); }
.kp-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:first-child { border-top: 0; }
.kp-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { width: 100%; padding: 0 1rem; }
.kp-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }
.kp-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--kp-grey-1); color: var(--kp-taupe-ink); }

.kp-header-right { align-items: center; gap: var(--kp-space-40); flex-wrap: nowrap; flex: 0 0 auto; }
.kp-header-cta .wp-block-button__link { white-space: nowrap; padding-inline: 1.4rem; }
.kp-header-phone { margin: 0; display: flex; flex-direction: column; justify-content: center; min-height: var(--kp-target-primary); white-space: nowrap; position: relative; }
.kp-header-phone small {
	font-family: var(--kp-font-mono);
	font-size: var(--kp-text-2xs);
	letter-spacing: var(--kp-tracking-label);
	text-transform: uppercase;
	color: var(--kp-muted);
	line-height: 1.3;
}
.kp-header-phone a {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	font-family: var(--kp-font-display);
	font-size: 1.1875rem;
	font-weight: var(--kp-weight-semibold);
	color: var(--kp-ink);
	text-decoration: none;
	line-height: 1.2;
}
.kp-header-phone a::after { content: ""; position: absolute; inset: 0; }
.kp-header-phone a:hover { color: var(--kp-taupe-ink); }
@media (max-width: 1300px) { .kp-header-phone { display: none; } }
@media (max-width: 1120px) {
	.kp-nav { font-size: var(--kp-text-2xs); }
	.kp-nav .wp-block-navigation-item__content { padding: 0 .45rem; }
	.kp-header-right { gap: var(--kp-space-30); }
	.kp-logo, .kp-logo a { font-size: 1.0625rem; }
	.kp-mark img, .kp-mark .custom-logo { width: 44px; height: 44px; }
}
@media (max-width: 600px) {
	/* Must match core's `.wp-block-buttons.is-layout-flex` specificity or the
	   button never hides — that overflow is what pushed the sticky bar
	   off-screen on real phones. */
	.wp-block-buttons.kp-header-cta { display: none; }
}
@media (max-width: 781px) {
	.kp-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--kp-parchment); }
	.kp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--kp-ink); }
}

/* --------------------------------------------------------------------------
   6. HERO — asymmetric, type-led. No centred template, no pill badges.
   -------------------------------------------------------------------------- */
.kp-hero {
	background: var(--kp-parchment);
	color: var(--kp-ink);
	position: relative;
	overflow: hidden;
	padding-block: var(--kp-section-y-lg);
	border-bottom: 1px solid var(--kp-grey-2);
}
.kp-hero::after {
	content: "";
	position: absolute;
	right: -4%;
	top: -10%;
	width: 38%;
	aspect-ratio: 60/68;
	opacity: .05;
	pointer-events: none;
	background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 68'%3E%3Cpath d='M30 2 4 11v25c0 16 11 27 26 30 15-3 26-14 26-30V11z' fill='%23151515'/%3E%3C/svg%3E");
}
.kp-hero > * { position: relative; z-index: 1; }
.kp-hero h1 {
	font-family: var(--kp-font-display);
	color: var(--kp-ink);
	font-size: var(--kp-text-4xl);
	font-weight: var(--kp-weight-semibold);
	line-height: var(--kp-leading-tight);
	letter-spacing: var(--kp-tracking-display);
	margin: 0 0 var(--kp-space-40);
	text-wrap: balance;
}
.kp-hero h1 em { font-style: italic; color: var(--kp-taupe-ink); }

/* The hero spec panel — a bordered, internally ruled sheet, not a card. */
.kp-hero-card,
.kp-panel {
	background: var(--kp-white);
	border: 1px solid var(--kp-taupe-rule);
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}
.kp-hero-card h2,
.kp-panel h2 {
	font-family: var(--kp-font-mono);
	color: var(--kp-taupe-ink);
	font-size: var(--kp-text-2xs);
	font-weight: var(--kp-weight-medium);
	letter-spacing: var(--kp-tracking-label);
	text-transform: uppercase;
	margin: 0;
	padding: var(--kp-space-30) var(--kp-space-40);
	background: var(--kp-grey-1);
	border-bottom: 1px solid var(--kp-taupe-rule);
}
.kp-hero-card p, .kp-panel p {
	color: var(--kp-muted);
	font-size: var(--kp-text-base);
	margin: 0;
	padding: var(--kp-space-30) var(--kp-space-40);
}

/* --------------------------------------------------------------------------
   7. INNER PAGE HERO
   -------------------------------------------------------------------------- */
.kp-pagehero {
	background: var(--kp-grey-1);
	color: var(--kp-ink);
	padding-block: var(--kp-hero-y);
	border-bottom: 1px solid var(--kp-grey-2);
}
.kp-pagehero h1 {
	font-family: var(--kp-font-display);
	color: var(--kp-ink);
	font-size: var(--kp-text-3xl);
	font-weight: var(--kp-weight-semibold);
	line-height: var(--kp-leading-tight);
	letter-spacing: var(--kp-tracking-display);
	margin: 0 0 var(--kp-space-30);
	text-wrap: balance;
	max-width: 20ch;
}
.kp-pagehero p { color: var(--kp-muted); }
.kp-breadcrumb {
	font-family: var(--kp-font-mono);
	font-size: var(--kp-text-2xs);
	letter-spacing: var(--kp-tracking-label);
	text-transform: uppercase;
	color: var(--kp-muted);
	margin: 0 0 var(--kp-space-30);
}
.kp-breadcrumb a { color: var(--kp-muted); text-decoration: none; display: inline-block; padding-block: .35rem; }
.kp-breadcrumb a:hover { color: var(--kp-taupe-ink); text-decoration: underline; }

/* --------------------------------------------------------------------------
   8. TRUST BAND — a ruled spec line, not four icon cells.
   -------------------------------------------------------------------------- */
.kp-trust-strip {
	background: var(--kp-white);
	border-bottom: 1px solid var(--kp-taupe-rule);
	padding-block: var(--kp-space-30);
}
.kp-trust-strip .wp-block-columns { gap: 0 !important; flex-wrap: wrap; }
.kp-trust-strip .wp-block-column {
	border-left: 1px solid var(--kp-grey-2);
	padding: .55rem 1.25rem;
	flex-basis: auto !important;
	flex-grow: 0 !important;
}
.kp-trust-strip .wp-block-column:first-child { border-left: 0; padding-left: 0; }
.kp-trust-strip p {
	margin: 0;
	font-family: var(--kp-font-mono);
	font-size: var(--kp-text-2xs);
	font-weight: var(--kp-weight-medium);
	letter-spacing: var(--kp-tracking-label);
	text-transform: uppercase;
	color: var(--kp-ink);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   9. SECTION BANDS + RHYTHM — three tiers, not one.
   -------------------------------------------------------------------------- */
.kp-section { padding-block: var(--kp-section-y); }
.kp-section-mist { background: var(--kp-grey-1); }
.kp-section-lg { padding-block: var(--kp-section-y-lg); }

.kp-section-mist + .kp-section-mist { background: var(--kp-white); border-top: 1px solid var(--kp-grey-2); }
.kp-section:not(.kp-section-mist) + .kp-section:not(.kp-section-mist) { border-top: 1px solid var(--kp-grey-2); }

.kp-band-dark,
.kp-band-navy {
	background: var(--kp-parchment);
	color: var(--kp-ink);
	border-block: 1px solid var(--kp-grey-2);
}
.kp-band-dark .kp-step, .kp-band-navy .kp-step { border-top-color: var(--kp-taupe-rule); }
.kp-band-dark h2, .kp-band-dark h3,
.kp-band-navy h2, .kp-band-navy h3 { color: var(--kp-ink); }
.kp-band-dark p, .kp-band-navy p { color: var(--kp-muted); }

/* WordPress' constrained layout centres a group's children at contentSize.
   For a section head inside an alignwide band that reads as an indent, so pull
   the children back to the left edge and put the measure on the text itself. */
.kp-section-head { max-width: none; }
/* Core's rule is `margin-left: auto !important` on constrained children, so the
   override has to carry !important too. */
.kp-section-head.is-layout-constrained > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none;
}
.kp-section-head.is-layout-constrained > .kp-eyebrow,
.kp-section-head.is-layout-constrained > .kp-spec { max-width: 30ch; }

/* Same story for the inner-page hero and the FAQ list: they sit in an alignwide
   band but core centres their children at contentSize, which reads as a random
   indent. Pull them to the left edge and set the measure on the text. */
.kp-pagehero .wp-block-group.alignwide.is-layout-constrained > *,
.kp-faq.is-layout-constrained > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.kp-pagehero .wp-block-group.alignwide.is-layout-constrained > * { max-width: none; }
.kp-pagehero .wp-block-group.alignwide.is-layout-constrained > h1 { max-width: 20ch; }
.kp-pagehero .wp-block-group.alignwide.is-layout-constrained > p { max-width: 52ch; }
.kp-faq.is-layout-constrained > * { max-width: 60rem; }
.kp-section-head.is-layout-constrained > h2 { max-width: 20ch; }
.kp-section-head.is-layout-constrained > p { max-width: 56ch; }
.kp-section-head h2 {
	font-family: var(--kp-font-display);
	font-size: var(--kp-text-2xl);
	font-weight: var(--kp-weight-semibold);
	line-height: var(--kp-leading-snug);
	letter-spacing: var(--kp-tracking-heading);
	color: var(--kp-ink);
	margin: 0 0 var(--kp-space-30);
	text-wrap: balance;
	max-width: 20ch;
}
.kp-band-dark .kp-section-head h2, .kp-band-navy .kp-section-head h2 { color: var(--kp-ink); }
.kp-section-head p { color: var(--kp-muted); margin: 0; font-size: var(--kp-text-md); max-width: 56ch; }
.kp-band-dark .kp-section-head p, .kp-band-navy .kp-section-head p { color: var(--kp-muted); }

/* --------------------------------------------------------------------------
   10. SERVICE ROWS — replaces the identical-feature-card grid.
   A ruled editorial list: oversized serif numeral, title, prose, spec label.
   The first row is the feature; the rest are supporting.
   -------------------------------------------------------------------------- */
.kp-rows { border-top: 1px solid var(--kp-ink); margin-top: var(--kp-space-60); }
.kp-row {
	display: grid;
	grid-template-columns: minmax(4.5rem, 7rem) minmax(0, 1fr) minmax(0, 15rem);
	gap: var(--kp-space-40) var(--kp-space-50);
	align-items: start;
	padding-block: var(--kp-space-50);
	border-bottom: 1px solid var(--kp-grey-2);
	transition: background-color var(--kp-motion-base) var(--kp-motion-ease);
}
.kp-row:hover { background: var(--kp-grey-1); }
.kp-section-mist .kp-row:hover { background: var(--kp-white); }
.kp-row-num {
	font-family: var(--kp-font-display);
	font-size: var(--kp-text-numeral);
	font-weight: var(--kp-weight-regular);
	line-height: .82;
	color: var(--kp-taupe-ink);
	margin: 0;
	font-variant-numeric: lining-nums;
}
.kp-row h3 {
	font-family: var(--kp-font-display);
	font-size: var(--kp-text-xl);
	font-weight: var(--kp-weight-semibold);
	line-height: var(--kp-leading-snug);
	color: var(--kp-ink);
	margin: 0 0 var(--kp-space-20);
}
.kp-row h3 a { color: inherit; text-decoration: none; }
.kp-row h3 a:hover { color: var(--kp-taupe-ink); text-decoration: underline; text-underline-offset: .18em; }
.kp-row p { color: var(--kp-muted); font-size: var(--kp-text-md); line-height: var(--kp-leading-normal); margin: 0; max-width: 54ch; }
.kp-row-spec {
	font-family: var(--kp-font-mono);
	font-size: var(--kp-text-2xs);
	letter-spacing: var(--kp-tracking-label);
	text-transform: uppercase;
	color: var(--kp-muted);
	margin: 0 0 var(--kp-space-30);
}
/* The feature row: bigger numeral, heading steps up a size. */
.kp-row.is-feature { padding-block: var(--kp-space-60); }
.kp-row.is-feature .kp-row-num { font-size: calc(var(--kp-text-numeral) * 1.35); color: var(--kp-ink); }
.kp-row.is-feature h3 { font-size: var(--kp-text-2xl); }
.kp-row.is-feature p { font-size: var(--kp-text-lg); color: var(--kp-ink); max-width: 46ch; }
.kp-band-dark .kp-rows, .kp-band-navy .kp-rows { border-top-color: var(--kp-grey-2); }
.kp-band-dark .kp-row, .kp-band-navy .kp-row { border-bottom-color: var(--kp-grey-2); }
.kp-band-dark .kp-row:hover, .kp-band-navy .kp-row:hover { background: var(--kp-white); }
.kp-band-dark .kp-row h3, .kp-band-navy .kp-row h3 { color: var(--kp-ink); }
.kp-band-dark .kp-row p, .kp-band-navy .kp-row p { color: var(--kp-muted); }
.kp-band-dark .kp-row-num, .kp-band-navy .kp-row-num { color: var(--kp-taupe-ink); }
.kp-band-dark .kp-row-spec, .kp-band-navy .kp-row-spec { color: var(--kp-muted); }
@media (max-width: 860px) {
	.kp-row { grid-template-columns: minmax(3rem, 4rem) minmax(0, 1fr); }
	.kp-row-spec { grid-column: 2; }
	.kp-row .kp-more { grid-column: 2; }
}

/* The link affordance: an underline that thickens. No arrow glyph. */
.kp-more {
	display: inline-flex;
	align-items: center;
	min-height: var(--kp-target-primary);
	font-family: var(--kp-font-mono);
	font-size: var(--kp-text-2xs);
	font-weight: var(--kp-weight-medium);
	letter-spacing: var(--kp-tracking-label);
	text-transform: uppercase;
	color: var(--kp-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .35em;
	transition: color var(--kp-motion-base) var(--kp-motion-ease),
	            text-decoration-thickness var(--kp-motion-base) var(--kp-motion-ease);
}
.kp-more:hover { color: var(--kp-taupe-ink); text-decoration-thickness: 3px; }
.kp-band-dark .kp-more, .kp-band-navy .kp-more { color: var(--kp-ink); }
.kp-band-dark .kp-more:hover, .kp-band-navy .kp-more:hover { color: var(--kp-taupe-ink); }

/* --------------------------------------------------------------------------
   11. NOTES — the pillar / supporting-point pattern.
   Mono index, hairline rule, prose. No coloured stripe, no icon chip.
   -------------------------------------------------------------------------- */
.kp-pillar,
.kp-note-block {
	border-top: 1px solid var(--kp-taupe-rule);
	padding-top: var(--kp-space-30);
}
.kp-pillar h3, .kp-note-block h3 {
	font-family: var(--kp-font-display);
	font-size: var(--kp-text-xl);
	font-weight: var(--kp-weight-semibold);
	line-height: var(--kp-leading-snug);
	color: var(--kp-ink);
	margin: 0 0 var(--kp-space-20);
}
.kp-pillar p, .kp-note-block p { color: var(--kp-muted); font-size: var(--kp-text-base); margin: 0; }
.kp-band-dark .kp-pillar, .kp-band-navy .kp-pillar { border-top-color: var(--kp-grey-2); }
.kp-band-dark .kp-pillar h3, .kp-band-navy .kp-pillar h3 { color: var(--kp-ink); }
.kp-band-dark .kp-pillar p, .kp-band-navy .kp-pillar p { color: var(--kp-muted); }

/* Process steps — serif numerals on a rule, not numbers in circles. */
.kp-step { border-top: 1px solid var(--kp-grey-2); padding-top: var(--kp-space-30); }
.kp-section:not(.kp-band-dark):not(.kp-band-navy) .kp-step { border-top-color: var(--kp-taupe-rule); }
.kp-step .kp-step-num {
	display: block;
	font-family: var(--kp-font-display);
	font-size: 2.25rem;
	font-weight: var(--kp-weight-regular);
	line-height: 1;
	color: var(--kp-taupe-ink);
	margin: 0 0 var(--kp-space-30);
}
.kp-section:not(.kp-band-dark):not(.kp-band-navy) .kp-step .kp-step-num { color: var(--kp-taupe-ink); }
.kp-step h3 {
	font-family: var(--kp-font-display);
	font-size: var(--kp-text-xl);
	font-weight: var(--kp-weight-semibold);
	line-height: var(--kp-leading-snug);
	margin: 0 0 var(--kp-space-20);
}
.kp-step p { font-size: var(--kp-text-base); margin: 0; }
.kp-section:not(.kp-band-dark):not(.kp-band-navy) .kp-step p { color: var(--kp-muted); }

/* Cards: kept as a ruled sheet for any content still using the class. */
.kp-card {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--kp-taupe-rule);
	border-radius: 0;
	padding: var(--kp-space-30) 0 0;
	box-shadow: none;
	align-self: stretch;
	display: flex;
	flex-direction: column;
}
.kp-card h3 {
	font-family: var(--kp-font-display);
	font-size: var(--kp-text-xl);
	font-weight: var(--kp-weight-semibold);
	line-height: var(--kp-leading-snug);
	margin: 0 0 var(--kp-space-20);
}
.kp-card h3 a { color: var(--kp-ink); text-decoration: none; }
.kp-card h3 a:hover { color: var(--kp-taupe-ink); text-decoration: underline; text-underline-offset: .18em; }
.kp-card p { color: var(--kp-muted); font-size: var(--kp-text-base); line-height: var(--kp-leading-normal); margin: 0 0 var(--kp-space-30); }
.kp-card > :last-child { margin-top: auto; margin-bottom: 0; }

.kp-quote {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--kp-taupe-rule);
	border-radius: 0;
	padding: var(--kp-space-30) 0 0;
	align-self: stretch;
	margin: 0;
}
.kp-quote p { font-family: var(--kp-font-display); color: var(--kp-ink); font-size: var(--kp-text-xl); line-height: var(--kp-leading-snug); margin: 0 0 var(--kp-space-30); }
.kp-quote cite {
	font-style: normal;
	font-family: var(--kp-font-mono);
	font-size: var(--kp-text-2xs);
	letter-spacing: var(--kp-tracking-label);
	text-transform: uppercase;
	color: var(--kp-muted);
}

/* --------------------------------------------------------------------------
   12. IMAGE PLACEHOLDERS — labelled as a job spec, obviously provisional.
   -------------------------------------------------------------------------- */
.kp-photo-ph {
	display: flex;
	align-items: flex-end;
	min-height: 260px;
	border: 1px solid var(--kp-taupe-rule);
	border-radius: 0;
	background: var(--kp-grey-1);
	padding: var(--kp-space-30);
	color: var(--kp-muted);
	font-family: var(--kp-font-mono);
	font-size: var(--kp-text-2xs);
	font-weight: var(--kp-weight-medium);
	letter-spacing: var(--kp-tracking-label);
	text-transform: uppercase;
	line-height: 1.7;
}
.kp-section-mist .kp-photo-ph { background: var(--kp-white); }
.kp-photo-ph.is-tall { min-height: 380px; }

/* --------------------------------------------------------------------------
   13. LISTS
   -------------------------------------------------------------------------- */
.kp-facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--kp-taupe-rule); }
.kp-facts li {
	padding: var(--kp-space-30) 0;
	border-bottom: 1px solid var(--kp-grey-2);
	display: flex;
	gap: var(--kp-space-30);
	flex-wrap: wrap;
	font-size: var(--kp-text-base);
	color: var(--kp-ink);
}
.kp-facts strong {
	font-family: var(--kp-font-mono);
	font-size: var(--kp-text-2xs);
	letter-spacing: var(--kp-tracking-label);
	text-transform: uppercase;
	color: var(--kp-muted);
	flex: 0 0 9.5rem;
	padding-top: .25rem;
	font-weight: var(--kp-weight-medium);
}
.kp-facts li > span { flex: 1 1 14rem; }

.kp-check { list-style: none; margin: 0; padding: 0; }
.kp-check li {
	position: relative;
	padding: .55rem 0 .55rem 1.6rem;
	border-bottom: 1px solid var(--kp-grey-2);
	color: var(--kp-muted);
	font-size: var(--kp-text-base);
	line-height: var(--kp-leading-normal);
}
.kp-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.12rem;
	width: 8px;
	height: 1px;
	background: var(--kp-taupe-ink);
}
.kp-check.is-light li { color: var(--kp-muted); border-bottom-color: var(--kp-grey-2); }
.kp-check.is-light li::before { background: var(--kp-taupe-ink); }
.kp-hero-card .kp-check li, .kp-panel .kp-check li { padding-inline: var(--kp-space-40); }
.kp-check li a { color: var(--kp-ink); display: inline-flex; align-items: center; min-height: var(--kp-target-dense-pointer); }
.kp-check li a:hover { color: var(--kp-taupe-ink); }
@media (pointer: coarse) { .kp-check li a { min-height: var(--kp-target-dense-touch); } }

/* --------------------------------------------------------------------------
   14. FAQ — ruled rows, no boxes.
   -------------------------------------------------------------------------- */
.kp-faq { border-top: 1px solid var(--kp-ink); }
.kp-faq .wp-block-details {
	border: 0;
	border-bottom: 1px solid var(--kp-grey-2);
	border-radius: 0;
	background: transparent;
	margin: 0;
}
.kp-faq summary {
	display: flex;
	align-items: center;
	min-height: var(--kp-target-primary);
	padding: var(--kp-space-30) 0;
	font-family: var(--kp-font-display);
	font-weight: var(--kp-weight-semibold);
	font-size: var(--kp-text-md);
	color: var(--kp-ink);
	cursor: pointer;
}
.kp-faq summary::marker { color: var(--kp-taupe-ink); }
.kp-faq summary:hover { color: var(--kp-taupe-ink); }
.kp-faq .wp-block-details p { color: var(--kp-muted); margin: 0; padding: 0 0 var(--kp-space-40) 1.1rem; font-size: var(--kp-text-base); max-width: 62ch; }

/* --------------------------------------------------------------------------
   15. CTA BAND
   -------------------------------------------------------------------------- */
.kp-cta-band {
	background: var(--kp-parchment);
	color: var(--kp-ink);
	padding-block: var(--kp-section-y-lg);
	border-top: 1px solid var(--kp-taupe-rule);
}
.kp-cta-band h2 {
	font-family: var(--kp-font-display);
	color: var(--kp-ink);
	font-size: var(--kp-text-2xl);
	font-weight: var(--kp-weight-semibold);
	line-height: var(--kp-leading-snug);
	letter-spacing: var(--kp-tracking-heading);
	margin: 0 0 var(--kp-space-30);
	text-wrap: balance;
}
.kp-cta-band .kp-lede { max-width: 54ch; }

/* --------------------------------------------------------------------------
   16. FOOTER — a masthead block plus a ruled index. Not four equal columns.
   -------------------------------------------------------------------------- */
.kp-footer {
	background: var(--kp-grey-2);
	color: var(--kp-ink);
	padding-block: var(--kp-section-y) 0;
	border-top: 1px solid var(--kp-taupe-rule);
}
.kp-footer h2, .kp-footer h3 {
	color: var(--kp-muted);
	font-family: var(--kp-font-mono);
	font-size: var(--kp-text-2xs);
	letter-spacing: var(--kp-tracking-label);
	text-transform: uppercase;
	margin: 0 0 var(--kp-space-30);
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--kp-taupe-rule);
	font-weight: var(--kp-weight-medium);
}
.kp-footer p { font-size: var(--kp-text-sm); line-height: var(--kp-leading-normal); margin: 0 0 var(--kp-space-30); color: var(--kp-muted); }
.kp-footer a { color: var(--kp-ink); text-decoration: none; }
.kp-footer a:hover { color: var(--kp-taupe-ink); text-decoration: underline; }
.kp-footer ul { list-style: none; margin: 0; padding: 0; }
.kp-footer li { font-size: var(--kp-text-sm); }
.kp-footer li a { display: inline-flex; align-items: center; min-height: var(--kp-target-dense-pointer); }
@media (pointer: coarse) { .kp-footer li a { min-height: var(--kp-target-dense-touch); } }
.kp-footer .kp-footer-brand {
	font-family: var(--kp-font-display);
	font-weight: var(--kp-weight-bold);
	font-size: 1.5rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--kp-ink);
	margin-bottom: var(--kp-space-30);
}
.kp-footer .kp-footer-phone { margin: 0 0 var(--kp-space-30); }
.kp-footer .kp-footer-phone a {
	font-family: var(--kp-font-display);
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	font-weight: var(--kp-weight-semibold);
	color: var(--kp-ink);
	display: inline-flex;
	align-items: center;
	min-height: var(--kp-target-primary);
	line-height: 1.1;
	text-decoration: none;
}
.kp-footer .kp-footer-phone a:hover { color: var(--kp-taupe-ink); text-decoration: underline; }
.kp-footer-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kp-space-50); }
@media (max-width: 700px) { .kp-footer-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px) { .kp-footer-index { grid-template-columns: 1fr; } }
.kp-footer-bottom {
	border-top: 1px solid var(--kp-taupe-rule);
	margin-top: var(--kp-space-60);
	padding-block: var(--kp-space-40);
	color: var(--kp-muted);
}
.kp-footer-bottom p {
	font-family: var(--kp-font-mono);
	font-size: var(--kp-text-2xs);
	letter-spacing: var(--kp-tracking-label);
	text-transform: uppercase;
	margin: 0;
	color: var(--kp-muted);
}

/* --------------------------------------------------------------------------
   17. STICKY MOBILE CTA BAR
   -------------------------------------------------------------------------- */
.kp-mobile-bar { display: none; }
@media (max-width: 781px) {
	.kp-mobile-bar {
		display: grid;
		/* minmax(0, 1fr) — a bare 1fr floors at min-content, so a long label can
		   force its track wider than half the bar and overflow. */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		position: fixed;
		left: 0; right: 0; bottom: 0;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		z-index: 95;
		border-top: 1px solid var(--kp-ink);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	.kp-mobile-bar a {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		min-width: 0;
		min-height: var(--kp-bar-h);
		padding: .5rem .5rem;
		font-family: var(--kp-font-body);
		font-weight: var(--kp-weight-semibold);
		font-size: var(--kp-text-sm);
		line-height: 1.25;
		white-space: nowrap;
		text-decoration: none;
	}
	.kp-mobile-bar .kp-mb-call { background: var(--kp-white); color: var(--kp-ink); box-shadow: inset 0 0 0 1px var(--kp-ink); }
	.kp-mobile-bar .kp-mb-quote { background: var(--kp-ink); color: var(--kp-white); }
	/* +1px for the bar's own border-top, so nothing hides behind it. */
	body { padding-bottom: calc(var(--kp-bar-h) + 1px + env(safe-area-inset-bottom, 0px)); }
}

/* Very narrow phones, or a user running larger text: step the labels down so
   they still sit inside their half without clipping. */
@media (max-width: 380px) {
	.kp-mobile-bar a { font-size: var(--kp-text-xs); padding-inline: .35rem; }
}

/* --------------------------------------------------------------------------
   18. FORMS
   -------------------------------------------------------------------------- */
.kp-form-wrap {
	background: var(--kp-white);
	border: 1px solid var(--kp-ink);
	border-radius: 0;
	padding: var(--kp-space-50);
	box-shadow: none;
}
.kp-section-mist .kp-form-wrap { background: var(--kp-white); }
.kp-form-wrap .fluentform .ff-el-input--label label,
.kp-form-wrap label {
	font-family: var(--kp-font-mono);
	font-size: var(--kp-text-2xs);
	font-weight: var(--kp-weight-medium);
	letter-spacing: var(--kp-tracking-label);
	text-transform: uppercase;
	color: var(--kp-ink);
}
.kp-form-wrap .ff-el-is-required > label::after { color: var(--kp-taupe-ink); }
.kp-form-wrap input[type="text"],
.kp-form-wrap input[type="email"],
.kp-form-wrap input[type="tel"],
.kp-form-wrap select,
.kp-form-wrap textarea,
.kp-form-wrap .ff-el-form-control {
	min-height: var(--kp-target-primary) !important;
	border: 1px solid var(--kp-taupe-rule) !important;
	border-radius: 0 !important;
	padding: .75rem .85rem !important;
	font-size: var(--kp-text-base) !important;
	font-family: var(--kp-font-body) !important;
	background: var(--kp-white) !important;
	color: var(--kp-ink) !important;
	box-shadow: none !important;
}
.kp-form-wrap .ff-el-form-control:hover { border-color: var(--kp-ink) !important; }
.kp-form-wrap .ff-el-form-control:focus,
.kp-form-wrap .ff-el-form-control:focus-visible {
	border-color: var(--kp-ink) !important;
	outline: 3px solid var(--kp-ink) !important;
	outline-offset: 1px !important;
}
.kp-form-wrap textarea, .kp-form-wrap textarea.ff-el-form-control { min-height: 130px !important; }
.kp-form-wrap .ff-el-form-check { padding: .25rem 0; }
.kp-form-wrap .ff-el-form-check label,
.kp-form-wrap .ff_t_c label {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	min-height: var(--kp-target-primary);
	padding: .5rem 0;
	font-family: var(--kp-font-body);
	font-weight: var(--kp-weight-regular);
	font-size: var(--kp-text-sm);
	letter-spacing: 0;
	text-transform: none;
	line-height: var(--kp-leading-normal);
	color: var(--kp-ink);
	cursor: pointer;
}
.kp-form-wrap input[type="checkbox"],
.kp-form-wrap input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 22px;
	width: 22px; height: 22px;
	margin: .15rem 0 0 !important;
	border: 1px solid var(--kp-taupe-rule);
	border-radius: 0;
	background: var(--kp-white);
	cursor: pointer;
	display: inline-grid;
	place-content: center;
}
.kp-form-wrap input[type="checkbox"]:checked,
.kp-form-wrap input[type="radio"]:checked { background: var(--kp-ink); border-color: var(--kp-ink); }
.kp-form-wrap input[type="checkbox"]:checked::before {
	content: "";
	width: 11px; height: 11px;
	background: var(--kp-white);
	clip-path: polygon(14% 45%, 0 60%, 40% 100%, 100% 22%, 85% 8%, 38% 70%);
}
.kp-form-wrap input[type="radio"]:checked::before { content: ""; width: 8px; height: 8px; background: var(--kp-white); }
.kp-form-wrap .ff-btn-submit,
.kp-form-wrap .wp-block-button__link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 52px !important;
	background: var(--kp-ink) !important;
	color: var(--kp-white) !important;
	font-family: var(--kp-font-body) !important;
	font-weight: var(--kp-weight-semibold) !important;
	letter-spacing: .02em !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: .9rem 2rem !important;
	font-size: var(--kp-text-sm) !important;
	box-shadow: none !important;
}
.kp-form-wrap .ff-btn-submit:hover { background: var(--kp-muted) !important; }
.kp-form-wrap .ff-el-group { margin-bottom: var(--kp-space-40); }
.kp-form-wrap .text-danger, .kp-form-wrap .error-text { color: var(--kp-danger); font-size: var(--kp-text-sm); }
.kp-form-note { font-size: var(--kp-text-sm); color: var(--kp-muted); margin-top: var(--kp-space-30); }

/* --------------------------------------------------------------------------
   19. UTILITY
   -------------------------------------------------------------------------- */
.kp-divider { height: 1px; width: 100%; background: var(--kp-taupe-rule); border: 0; margin: 0 0 var(--kp-space-40); }
.kp-todo { font-family: var(--kp-font-mono); font-size: var(--kp-text-2xs); letter-spacing: var(--kp-tracking-label); text-transform: uppercase; color: var(--kp-muted); }
.skip-link:focus-visible {
	background: var(--kp-ink) !important;
	color: var(--kp-white) !important;
	padding: .75rem 1.25rem !important;
	z-index: 200 !important;
}

/* === kp hero media - decorative brand image (added 2026-08-27) === */
.kp-hero-media { margin: 0 0 var(--kp-space-40) 0; overflow: hidden; border: 1px solid var(--kp-grey-2); }
.kp-hero-media img { display: block; width: 100%; height: 17rem; flex: 0 0 auto; object-fit: cover; }