/* =========================================================================
   Maple Paw Plumbing - theme.css
   BEM prefix: kfy-
   Mobile-first
   ========================================================================= */

/* ---------- Custom Fonts ---------- */
@font-face {
	font-family: "Coastbelt";
	src: url("../fonts/COASTBELT.woff2") format("woff2"),
	     url("../fonts/COASTBELT.woff")  format("woff");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Ayr Bricker";
	src: url("../fonts/AyrBrickerBlack.woff2") format("woff2"),
	     url("../fonts/AyrBrickerBlack.woff")  format("woff");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ---------- Design Tokens ---------- */
:root {
	/* Colors */
	--color-gold: #C6BB3C;
	--color-burnt-orange: #BA6733;
	--color-red: #CD362C;
	--color-cream: #F8F3E0;
	--color-light-gray: #BDBCBC;
	--color-medium-gray: #585858;
	--color-steel-blue: #617781;
	--color-warm-brown: #8E4420;
	--color-dark-brown: #433931;
	--color-deep-brown: #492C19;
	--color-near-black: #291610;
	--color-dark-teal: #1B282E;

	/* Semantic */
	--bg-primary: var(--color-near-black);
	--bg-secondary: var(--color-dark-teal);
	--bg-light: var(--color-cream);
	--bg-card: var(--color-cream);
	--text-primary: var(--color-cream);
	--text-secondary: var(--color-light-gray);
	--text-on-light: var(--color-dark-brown);
	--text-muted: var(--color-medium-gray);
	--accent-primary: var(--color-gold);
	--accent-secondary: var(--color-burnt-orange);
	--accent-danger: var(--color-red);
	--border-default: var(--color-light-gray);
	--border-dark: var(--color-deep-brown);

	/* Typography */
	--font-display: "Coastbelt", "Anton", "Impact", sans-serif;
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-accent: "Ayr Bricker", "Georgia", serif;

	/* Spacing */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-8: 48px;
	--sp-10: 64px;
	--sp-12: 80px;
	--sp-16: 128px;

	/* Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(41, 22, 16, 0.12);
	--shadow-md: 0 4px 12px rgba(41, 22, 16, 0.15);
	--shadow-lg: 0 8px 32px rgba(41, 22, 16, 0.20);
	--shadow-xl: 0 16px 48px rgba(41, 22, 16, 0.25);
	--shadow-gold: 0 4px 20px rgba(198, 187, 60, 0.30);

	/* Transitions */
	--ease-default: 0.3s ease;
	--ease-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Layout */
	--container-max: 1200px;
	--container-wide: 1440px;
	--header-height: 72px;
	--kfy-header-h: 142px;
}

@media (max-width: 767px) {
	:root { --kfy-header-h: 92px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* JS-driven inertia scroll lives in main.js; keep native smoothing off so
   the two do not compound. Reduced-motion users keep native auto scroll
   because the JS module bails before intercepting wheel events. */
html { scroll-behavior: auto; }
html, body { overscroll-behavior-y: none; }

body {
	margin: 0;
	background: var(--bg-primary);
	color: var(--text-primary);
	font-family: var(--font-body);
	/* Enhanced ADA-friendly base: 17px floor for body copy (well above the
	   16px de-facto WCAG-friendly minimum), scales to 20px on wide viewports.
	   Combined with the 14px hard floor on chips/labels below this gives the
	   site comfortably-readable defaults at every size. */
	font-size: clamp(17px, 0.6vw + 16px, 20px);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-primary); text-decoration: none; transition: color var(--ease-default); }
a:hover { color: var(--accent-secondary); }

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.1;
	margin: 0 0 var(--sp-4);
	letter-spacing: 0.5px;
}

h1 { font-size: clamp(36px, 5vw + 1rem, 72px); }
h2 { font-size: clamp(28px, 3.5vw + 1rem, 48px); }
h3 { font-size: clamp(22px, 2vw + 1rem, 32px); }
h4 { font-family: var(--font-body); font-weight: 600; font-size: clamp(18px, 1vw + 1rem, 24px); margin: 0 0 var(--sp-3); }

p { margin: 0 0 var(--sp-4); }

::selection { background: var(--color-gold); color: var(--color-near-black); }

:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------- Layout primitives ---------- */
.kfy-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--sp-5);
}

.kfy-container--narrow {
	max-width: 820px;
}

@media (min-width: 992px) {
	.kfy-container { padding-inline: var(--sp-6); }
}

.kfy-section {
	padding: clamp(var(--sp-10), 8vw, var(--sp-16)) 0;
}

.kfy-section--dark   { background: var(--bg-primary); color: var(--text-primary); }
.kfy-section--darker { background: var(--bg-secondary); color: var(--text-primary); }
.kfy-section--light  { background: var(--bg-light); color: var(--text-on-light); }
.kfy-section--brown  {
	background: linear-gradient(135deg, var(--color-deep-brown), var(--color-warm-brown));
	color: var(--text-primary);
}

/* ---------- Section header pattern ---------- */
.kfy-section-header {
	text-align: center;
	max-width: 760px;
	margin: 0 auto var(--sp-12);
}

.kfy-section-label {
	display: inline-block;
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 2px;
	color: var(--accent-primary);
	background: rgba(198, 187, 60, 0.12);
	border: 1px solid rgba(198, 187, 60, 0.4);
	padding: 6px 14px;
	border-radius: var(--radius-full);
	margin: 0 0 var(--sp-4);
}

.kfy-section--light .kfy-section-label {
	color: var(--color-warm-brown);
	background: rgba(142, 68, 32, 0.08);
	border-color: rgba(142, 68, 32, 0.3);
}

.kfy-section-title {
	margin: 0 0 var(--sp-3);
}

.kfy-section-subtitle {
	font-size: clamp(17px, 1vw + 15px, 20px);
	color: var(--text-secondary);
	line-height: 1.6;
	margin: 0;
}

.kfy-section--light .kfy-section-subtitle { color: var(--text-muted); }

/* ---------- Inline SVG icons ---------- */
.kfy-icon {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: middle;
	color: currentColor;
}
.kfy-icon--gold { color: var(--color-gold); }
.kfy-icon--brown { color: var(--color-warm-brown); }
.kfy-icon--cream { color: var(--color-cream); }

.kfy-section-divider {
	display: block;
	width: 80px;
	height: 4px;
	background: linear-gradient(90deg, var(--color-gold), var(--color-burnt-orange));
	border-radius: var(--radius-full);
	margin: var(--sp-4) auto 0;
}

/* ---------- Buttons ---------- */
.kfy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	font-family: var(--font-display);
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 14px 28px;
	border: 2px solid transparent;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all var(--ease-default);
	text-decoration: none;
	line-height: 1;
	min-height: 48px;
	white-space: nowrap;
}

.kfy-btn--primary {
	background: linear-gradient(135deg, var(--color-gold), var(--color-burnt-orange));
	color: var(--color-near-black);
	box-shadow: var(--shadow-gold);
	border-color: transparent;
}
.kfy-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 24px rgba(198, 187, 60, 0.45);
	color: var(--color-near-black);
}

.kfy-btn--outline {
	background: transparent;
	color: var(--color-gold);
	border-color: var(--color-gold);
}
.kfy-btn--outline:hover {
	background: var(--color-gold);
	color: var(--color-near-black);
}

.kfy-btn--danger {
	background: linear-gradient(135deg, var(--color-red), #a12a22);
	color: var(--color-cream);
}
.kfy-btn--danger:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 24px rgba(205, 54, 44, 0.4);
	color: var(--color-cream);
}

.kfy-btn--full { width: 100%; }
.kfy-btn--lg { padding: 18px 36px; font-size: 18px; min-height: 56px; }

/* ---------- Generic card ---------- */
.kfy-card {
	background: var(--bg-card);
	color: var(--text-on-light);
	border-radius: var(--radius-lg);
	padding: var(--sp-6);
	box-shadow: var(--shadow-md);
	border: 1px solid rgba(189, 188, 188, 0.3);
	transition: transform var(--ease-default), box-shadow var(--ease-default);
}
.kfy-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

/* =========================================================================
   BLOCK 1 - HEADER
   ========================================================================= */
/* Sticky behavior is applied to the template-part wrapper (the direct parent
   of .kfy-header) because position: sticky is constrained by its parent's
   bounding box. The wrapper's containing block is the page body, which gives
   the header room to actually stick. */
.wp-block-template-part:has(> .kfy-header),
header.wp-block-template-part:has(> .kfy-header) {
	position: sticky;
	top: 0;
	z-index: 1000;
	margin-block: 0 !important;
}

/* Kill the WP "block-gap" margin that WordPress injects between top-level
   siblings of .wp-site-blocks (header → post-content → footer). Without this,
   theme.json's blockGap creates a visible gap between the sticky header and
   the hero. */
.wp-site-blocks > * + *,
.wp-site-blocks > .wp-block-post-content,
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0 !important;
}

/* Also zero out the post-content wrapper's own top spacing so the hero sits
   flush against the header. */
.wp-block-post-content,
.entry-content {
	margin-block-start: 0 !important;
	padding-block-start: 0 !important;
}
.wp-block-post-content > :first-child,
.entry-content > :first-child {
	margin-block-start: 0 !important;
}

/* Kill the block-gap between every sibling inside post-content too - every
   kfy/* section already supplies its own vertical rhythm via .kfy-section
   padding, so WP's flow-layout 2rem gap just creates ugly bands of body
   color between sections. */
.wp-block-post-content.is-layout-flow > * + *,
.entry-content.is-layout-flow > * + *,
.wp-block-post-content > * + *,
.entry-content > * + * {
	margin-block-start: 0 !important;
}

.kfy-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	border-bottom: 0;
	transition: background var(--ease-default);
}
.kfy-header.is-scrolled {
	background: transparent;
}

.kfy-header__nav {
	width: min(1180px, calc(100% - 32px));
	max-width: none;
	margin: var(--sp-3) auto;
	padding: var(--sp-2) var(--sp-4);
	display: grid;
	grid-template-columns: minmax(120px, max-content) 1fr auto;
	grid-template-areas: "brand spacer actions";
	align-items: center;
	gap: var(--sp-3);
	position: relative;
	border: 1px solid rgba(248, 243, 224, 0.16);
	border-radius: var(--radius-full);
	background:
		linear-gradient(180deg, rgba(27, 40, 46, 0.96), rgba(27, 40, 46, 0.90));
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 18px 48px rgba(27, 40, 46, 0.28);
	transition:
		width var(--ease-default),
		margin var(--ease-default),
		border-radius var(--ease-default),
		box-shadow var(--ease-default),
		background var(--ease-default);
}
.kfy-header.is-scrolled .kfy-header__nav {
	margin-block: var(--sp-2);
	border-radius: var(--radius-xl);
	box-shadow: 0 12px 32px rgba(27, 40, 46, 0.24);
}

.kfy-header__brand {
	grid-area: brand;
	display: inline-flex;
	align-items: center;
	line-height: 0;
	flex-shrink: 0;
	transition: transform var(--ease-default);
}
.kfy-header__brand:hover {
	transform: scale(1.03);
}
.kfy-header__brand-img {
	width: auto;
	height: 40px;
	max-width: 220px;
	display: block;
	object-fit: contain;
	filter: drop-shadow(0 2px 6px rgba(41, 22, 16, 0.4));
}
.kfy-header__brand picture {
	display: inline-flex;
	line-height: 0;
}
@media (min-width: 480px) {
	.kfy-header__brand-img { height: 44px; max-width: 260px; }
}
@media (min-width: 768px) {
	.kfy-header__brand-img { width: auto; height: 48px; max-width: 320px; }
}
@media (min-width: 992px) {
	.kfy-header__brand-img { width: auto; height: 64px; max-width: 140px; }
}
@media (min-width: 1200px) {
	.kfy-header__brand-img { width: auto; height: 72px; max-width: 160px; }
}
.kfy-header.is-scrolled .kfy-header__brand-img {
	width: auto;
	height: 36px;
	transition: height var(--ease-default);
}
@media (min-width: 768px) {
	.kfy-header.is-scrolled .kfy-header__brand-img { width: auto; height: 40px; }
}
@media (min-width: 992px) {
	.kfy-header.is-scrolled .kfy-header__brand-img { width: auto; height: 56px; }
}

.kfy-header__center-mark {
	display: none;
	grid-area: center-mark;
	align-items: center;
	justify-content: center;
	width: clamp(96px, 9vw, 130px);
	height: clamp(96px, 9vw, 130px);
	margin-block: -26px -42px;
	background: transparent;
	box-shadow: none;
	line-height: 0;
	transition: transform var(--ease-default), width var(--ease-default), height var(--ease-default);
	z-index: 3;
}
.kfy-header__center-mark:hover {
	transform: scale(1.04) rotate(-2deg);
}
.kfy-header__center-mark-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	filter: drop-shadow(0 4px 10px rgba(15, 8, 6, 0.45));
}
.kfy-header.is-scrolled .kfy-header__center-mark {
	width: 82px;
	height: 82px;
	margin-block: -16px -28px;
}

.kfy-header__menu {
	display: none;
	gap: clamp(12px, 1.35vw, var(--sp-4));
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
	min-width: 0;
}
.kfy-header__menu--left {
	grid-area: left-nav;
	justify-content: flex-end;
}
.kfy-header__menu--right {
	grid-area: right-nav;
	justify-content: flex-start;
}
.kfy-header__menu-item {
	position: relative;
}
.kfy-header__menu-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-cream);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 16px;
	padding: 8px 4px;
	position: relative;
	text-decoration: none;
}
.kfy-header__menu-link::after {
	content: "";
	position: absolute;
	left: 4px; right: 4px; bottom: 2px;
	height: 2px;
	background: var(--color-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ease-default);
}
.kfy-header__menu-link:hover,
.kfy-header__menu-link:focus-visible {
	color: var(--color-gold);
	text-decoration: none;
}
.kfy-header__menu-link:hover::after,
.kfy-header__menu-link:focus-visible::after,
.kfy-header__menu-item--has-dropdown:hover .kfy-header__menu-link::after,
.kfy-header__menu-item--has-dropdown:focus-within .kfy-header__menu-link::after {
	transform: scaleX(1);
}
.kfy-header__menu-caret {
	display: inline-flex;
	color: currentColor;
	transition: transform var(--ease-default);
}
.kfy-header__menu-item--has-dropdown:hover .kfy-header__menu-caret,
.kfy-header__menu-item--has-dropdown:focus-within .kfy-header__menu-caret {
	transform: rotate(180deg);
}

.kfy-header__dropdown {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	z-index: 50;
	min-width: 260px;
	max-width: min(420px, calc(100vw - 32px));
	margin: 0;
	padding: 10px;
	list-style: none;
	border: 1px solid rgba(198, 187, 60, 0.24);
	border-radius: var(--radius-lg);
	background:
		linear-gradient(180deg, rgba(27, 40, 46, 0.98), rgba(41, 22, 16, 0.98));
	box-shadow: var(--shadow-xl);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -6px);
	transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
	pointer-events: none;
}
.kfy-header__menu-item--has-dropdown:hover .kfy-header__dropdown,
.kfy-header__menu-item--has-dropdown:focus-within .kfy-header__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition-delay: 0s;
	pointer-events: auto;
}
.kfy-header__dropdown::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	height: 14px;
}
.kfy-header .kfy-header__dropdown-link {
	display: block;
	padding: 10px 12px;
	border-radius: var(--radius-md);
	color: var(--color-cream);
	font-size: 15px;
	line-height: 1.3;
	text-decoration: none;
	text-decoration-line: none;
	transition: background var(--ease-default), color var(--ease-default), padding-left var(--ease-default);
}
.kfy-header .kfy-header__dropdown-link::after {
	display: none;
}
.kfy-header .kfy-header__dropdown-link:hover,
.kfy-header .kfy-header__dropdown-link:focus-visible {
	background: rgba(198, 187, 60, 0.12);
	color: var(--color-gold);
	padding-left: 16px;
	text-decoration: none;
	text-decoration-line: none;
	outline: none;
}
.kfy-header__menu-item--wide-dropdown .kfy-header__dropdown {
	display: grid;
	grid-template-columns: repeat(2, minmax(160px, 1fr));
	min-width: 420px;
}

.kfy-header__cta {
	display: none;
	grid-area: cta;
	white-space: nowrap;
}
.kfy-header__cta--phone .kfy-icon {
	flex-shrink: 0;
	animation: kfy-ring 2.4s ease-in-out infinite;
}
@keyframes kfy-ring {
	0%, 100% { transform: rotate(0deg); }
	4%       { transform: rotate(15deg); }
	8%       { transform: rotate(-12deg); }
	12%      { transform: rotate(8deg); }
	16%      { transform: rotate(-4deg); }
	20%      { transform: rotate(0deg); }
}

.kfy-header__hamburger {
	grid-area: actions;
	justify-self: end;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(248, 243, 224, 0.25);
	background: transparent;
	border-radius: var(--radius-md);
	cursor: pointer;
	padding: 10px;
}
.kfy-header__hamburger span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--color-cream);
	border-radius: 2px;
	transition: transform var(--ease-default), opacity var(--ease-default);
}
.kfy-header.is-open .kfy-header__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kfy-header.is-open .kfy-header__hamburger span:nth-child(2) { opacity: 0; }
.kfy-header.is-open .kfy-header__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================================
   Mobile drawer - lean, fits in one screen
   ========================================================================= */
.kfy-header__mobile {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	max-height: calc(100dvh - var(--kfy-header-h, 88px));
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;

	background:
		radial-gradient(620px 280px at 50% -10%, rgba(198, 187, 60, 0.10), transparent 65%),
		linear-gradient(180deg, var(--color-dark-teal) 0%, var(--color-near-black) 100%);
	border-top: 1px solid rgba(198, 187, 60, 0.26);
	box-shadow: 0 18px 40px rgba(15, 8, 6, 0.45);

	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition:
		opacity 220ms ease,
		transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
		visibility 0s linear 220ms;
	pointer-events: none;
}
.kfy-header.is-open .kfy-header__mobile {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition: opacity 220ms ease, transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0s;
}

@media (max-width: 991px) {
	.kfy-header {
		--kfy-mobile-open-nav-h: 58px;
	}

	.kfy-header.is-open .kfy-header__nav {
		width: 100%;
		margin-block: 0;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		background:
			linear-gradient(180deg, rgba(27, 40, 46, 0.99), rgba(27, 40, 46, 0.95));
		box-shadow: 0 12px 32px rgba(15, 8, 6, 0.35);
	}

	.kfy-header.is-open .kfy-header__mobile {
		position: fixed;
		top: var(--kfy-mobile-open-nav-h);
		bottom: 0;
		height: auto;
		max-height: none;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	.kfy-header__mobile-inner {
		min-height: 100%;
		display: flex;
		flex-direction: column;
	}

	.kfy-header__mobile-actions {
		margin-top: auto;
		padding-top: 14px;
	}
}

@media (min-width: 480px) and (max-width: 991px) {
	.kfy-header {
		--kfy-mobile-open-nav-h: 62px;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.kfy-header {
		--kfy-mobile-open-nav-h: 66px;
	}
}

.kfy-header__mobile-inner {
	position: relative;
	padding: 14px var(--sp-5) calc(18px + env(safe-area-inset-bottom, 0px));
	max-width: 520px;
	margin: 0 auto;
}

/* Brand watermark - subtle paw bottom-right */
.kfy-header__mobile-paw {
	position: absolute;
	right: -28px;
	bottom: -38px;
	color: var(--color-gold);
	opacity: 0.06;
	pointer-events: none;
	line-height: 0;
	transform: rotate(-12deg);
}
.kfy-header__mobile-paw .kfy-icon { width: 160px; height: 160px; }

/* Nav list - clean text rows divided by hairlines */
.kfy-header__mobile-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(248, 243, 224, 0.06);
}
.kfy-header__mobile-list li {
	border-bottom: 1px solid rgba(248, 243, 224, 0.06);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 220ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
	transition-delay: calc(40ms + var(--row-index, 0) * 28ms);
}
.kfy-header.is-open .kfy-header__mobile-list li {
	opacity: 1;
	transform: translateX(0);
}

.kfy-header__mobile-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 4px;
	color: var(--color-cream);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.2px;
	text-decoration: none;
	transition: color 160ms ease, padding-left 160ms ease;
}
.kfy-header__mobile-row:hover,
.kfy-header__mobile-row:focus-visible {
	color: var(--color-gold);
	padding-left: 8px;
	outline: none;
}
.kfy-header__mobile-row-chev {
	color: rgba(248, 243, 224, 0.35);
	transition: transform 160ms ease, color 160ms ease;
	display: inline-flex;
}
.kfy-header__mobile-row:hover .kfy-header__mobile-row-chev {
	color: var(--color-gold);
	transform: translateX(3px);
}
.kfy-header__mobile-submenu {
	display: grid;
	gap: 2px;
	margin: -4px 0 10px;
	padding: 0 0 0 var(--sp-5);
	list-style: none;
}
.kfy-header__mobile-submenu li {
	border: 0;
	opacity: 1;
	transform: none;
	transition: none;
}
.kfy-header .kfy-header__mobile-submenu a {
	display: block;
	padding: 8px 4px;
	color: rgba(248, 243, 224, 0.78);
	font-size: 14px;
	line-height: 1.35;
	text-decoration: none;
	text-decoration-line: none;
}
.kfy-header .kfy-header__mobile-submenu a:hover,
.kfy-header .kfy-header__mobile-submenu a:focus-visible {
	color: var(--color-gold);
	text-decoration: none;
	text-decoration-line: none;
	outline: none;
}

/* Action row - compact: one prominent gold pill + ghost call link */
.kfy-header__mobile-actions {
	margin-top: 14px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	position: relative;
	z-index: 1;
}
/* Call - primary, dominant gold pill (matches design-spec .btn-primary) */
.kfy-header__mobile-call {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 14px 20px;
	border-radius: var(--radius-full);
	background: linear-gradient(135deg, var(--color-gold), var(--color-burnt-orange));
	color: var(--color-near-black);
	text-decoration: none;
	box-shadow: var(--shadow-gold);
	transition: transform var(--ease-default), box-shadow var(--ease-default);
}
.kfy-header__mobile-call:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 24px rgba(198, 187, 60, 0.45);
}
.kfy-header__mobile-call .kfy-icon { color: var(--color-near-black); flex-shrink: 0; }
.kfy-header__mobile-call-text {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	white-space: nowrap;
	line-height: 1;
}
.kfy-header__mobile-call-eyebrow {
	font-family: var(--font-display);
	font-size: 14px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	opacity: 0.85;
}
.kfy-header__mobile-call-num {
	font-family: var(--font-display);
	font-size: 18px;
	letter-spacing: 0.5px;
}

/* Contact Us - secondary outline (matches design-spec .btn-secondary) */
.kfy-header__mobile-quote {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 18px;
	border-radius: var(--radius-full);
	background: transparent;
	color: var(--color-gold);
	border: 1.5px solid rgba(198, 187, 60, 0.55);
	font-family: var(--font-display);
	font-size: 14px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--ease-default), border-color var(--ease-default), color var(--ease-default);
}
.kfy-header__mobile-quote:hover {
	background: rgba(198, 187, 60, 0.12);
	border-color: var(--color-gold);
	color: var(--color-gold);
}
.kfy-header__mobile-quote .kfy-icon { color: inherit; transition: transform var(--ease-default); }
.kfy-header__mobile-quote:hover .kfy-icon { transform: translateX(3px); }

@media (min-width: 992px) {
	.kfy-header__nav {
		grid-template-columns: minmax(150px, max-content) minmax(0, 1fr) auto minmax(0, 1fr) max-content;
		grid-template-areas: "brand left-nav center-mark right-nav cta";
		padding-inline: clamp(18px, 2vw, var(--sp-6));
		gap: clamp(12px, 1.5vw, var(--sp-5));
	}
	.kfy-header__menu { display: flex; }
	.kfy-header__center-mark { display: inline-flex; }
	.kfy-header__cta { display: inline-flex; }
	.kfy-header__hamburger { display: none; }
	.kfy-header__mobile { display: none !important; }
}

@media (min-width: 992px) and (max-width: 1180px) {
	.kfy-header__menu-link {
		font-size: 14px;
		padding-inline: 2px;
	}
	.kfy-header__cta {
		padding-inline: 16px;
	}
}

/* =========================================================================
   BLOCK 2 - HERO
   ========================================================================= */
.kfy-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--color-near-black);
	background-image: url("../img/wrap-background.png");
	background-size: cover;
	background-position: center 35%;
	background-repeat: no-repeat;
	color: var(--color-cream);
	padding: clamp(150px, 13vw, 190px) 0 clamp(var(--sp-8), 6vw, var(--sp-12));
	min-height: 100svh;
	display: flex;
	align-items: center;
}
.kfy-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 80% 0%, rgba(198, 187, 60, 0.18), transparent 60%),
		radial-gradient(ellipse at 0% 100%, rgba(142, 68, 32, 0.35), transparent 60%),
		linear-gradient(180deg, rgba(41, 22, 16, 0.55) 0%, rgba(41, 22, 16, 0.75) 60%, rgba(41, 22, 16, 0.92) 100%);
	pointer-events: none;
	z-index: 1;
}
.kfy-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}
.kfy-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--sp-5);
	display: grid;
	gap: var(--sp-8);
	grid-template-columns: 1fr;
	align-items: center;
}

/* The CALL button gets a positioned wrapper so the back-of-van decoration
   can be anchored directly to the button. This means the van follows the
   button at every breakpoint and through any layout reflow.
   The wrapper stretches to fill its grid cell so the primary CTA is at
   least as wide as the secondary "Get Free Quote" button next to it
   (otherwise inline-flex would shrink it to its content). */
.kfy-hero__cta-call-wrap {
	position: relative;
	display: flex;
	width: 100%;
	isolation: isolate;
}
.kfy-hero__cta-call-wrap > .kfy-hero__cta-call {
	position: relative;
	z-index: 2;
	width: 100%;
}

/* HUGE van - sits BEHIND the CALL button, ~3× the original size,
   anchored to the button's bottom edge and pushed downward so the van's
   roof line peeks behind the button while its body extends well below
   into the hero. The hero already has overflow:hidden, so the bottom
   of the van clips cleanly into the page edge. */
.kfy-hero__van {
	position: absolute;
	left: 50%;
	top: 100%;
	width: clamp(432px, 46vw, 720px);
	max-width: none; /* override the global img { max-width: 100% } that caps to parent */
	height: auto;
	z-index: 0; /* sits BEHIND every other hero content layer */
	pointer-events: none;
	opacity: 0.45;
	mix-blend-mode: luminosity;
	filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.35));
	transform: translate(-50%, -38%);
	transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kfy-hero__cta-call-wrap:hover .kfy-hero__van {
	transform: translate(-50%, calc(-38% - 4px));
}

/* Make sure surrounding hero content (badges, area pills, certs, etc.)
   sits ABOVE the van. They share the same stacking context, so giving
   the call wrapper a positive z-index lifts the whole CTA row in front
   of the van. */
.kfy-hero__content > * {
	position: relative;
	z-index: 2;
}
.kfy-hero__cta-call-wrap > .kfy-hero__cta-call {
	z-index: 3;
}

@media (max-width: 1100px) {
	.kfy-hero__van {
		width: clamp(336px, 53vw, 528px);
		opacity: 0.4;
	}
}

@media (max-width: 720px) {
	.kfy-hero__van { display: none; }
}

.kfy-hero__ratings {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-bottom: var(--sp-4);
}
.kfy-hero__rating-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(248, 243, 224, 0.08);
	border: 1px solid rgba(198, 187, 60, 0.3);
	color: var(--color-cream);
	padding: 6px 12px;
	border-radius: var(--radius-full);
	font-size: 14px;
}
.kfy-hero__rating-badge strong { color: var(--color-gold); }

.kfy-hero__title {
	margin: 0 0 var(--sp-4);
	font-size: clamp(34px, 5vw + 0.5rem, 64px);
	line-height: 1.02;
}
.kfy-hero__title span { color: var(--color-gold); display: block; }

.kfy-hero__owner-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(142, 68, 32, 0.4);
	border: 1px solid rgba(198, 187, 60, 0.4);
	color: var(--color-cream);
	padding: 6px 14px;
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 14px;
	margin-bottom: var(--sp-4);
}
.kfy-hero__owner-pill .kfy-icon {
	color: var(--color-gold);
	flex-shrink: 0;
}

.kfy-hero__subtitle {
	font-size: clamp(18px, 1vw + 16px, 21px);
	color: var(--color-cream);
	max-width: 560px;
	margin: 0 0 var(--sp-6);
	line-height: 1.6;
	text-shadow: 0 1px 2px rgba(27, 17, 12, 0.6);
}

.kfy-hero__ctas {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	gap: var(--sp-3);
	margin-bottom: var(--sp-6);
	max-width: 560px;
}
.kfy-hero__ctas > .kfy-btn {
	width: 100%;
	justify-content: center;
}

/* Call is the dominant CTA - bold gold gradient on every breakpoint */
.kfy-hero__cta-call.kfy-btn {
	background: linear-gradient(135deg, var(--color-gold), var(--color-burnt-orange));
	color: var(--color-near-black);
	border: 2px solid transparent;
	box-shadow: var(--shadow-gold);
}
.kfy-hero__cta-call.kfy-btn .kfy-icon { color: var(--color-near-black); }
.kfy-hero__cta-call.kfy-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 24px rgba(198, 187, 60, 0.45);
	color: var(--color-near-black);
}

/* Book Now - secondary outline button, clearly less strong than Call */
.kfy-hero__cta-quote.kfy-btn {
	background: transparent;
	color: var(--color-gold);
	border: 1.5px solid rgba(198, 187, 60, 0.55);
	box-shadow: none;
	padding: 14px 26px;
	min-height: 48px;
	font-size: 16px;
	letter-spacing: 1.2px;
}
.kfy-hero__cta-quote.kfy-btn:hover {
	background: rgba(198, 187, 60, 0.12);
	color: var(--color-gold);
	border-color: var(--color-gold);
	transform: translateY(-1px);
	box-shadow: none;
}
.kfy-hero__cta-quote .kfy-icon {
	color: var(--color-gold);
	transition: transform 0.2s ease;
}
.kfy-hero__cta-quote:hover .kfy-icon {
	transform: translateX(3px);
}

.kfy-hero__certs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-top: var(--sp-5);
}
.kfy-hero__cert {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: rgba(198, 187, 60, 0.1);
	color: var(--color-gold);
	border: 1px solid rgba(198, 187, 60, 0.3);
	padding: 6px 12px;
	border-radius: var(--radius-sm);
	font-family: var(--font-display);
	font-size: 14px;
	letter-spacing: 1px;
}

.kfy-hero__coverage {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: var(--sp-4) 0 0;
	list-style: none;
	padding: 0;
}
.kfy-hero__coverage li {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.4px;
	background: rgba(27, 40, 46, 0.85);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--color-cream);
	padding: 5px 12px;
	border: 1px solid rgba(198, 187, 60, 0.55);
	border-radius: var(--radius-full);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Lead form mockup (right column on desktop) */
.kfy-hero__form-col {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding-bottom: 60px;
}
.kfy-hero__form-wrap {
	background: linear-gradient(160deg, var(--color-cream), #efe6cb);
	color: var(--text-on-light);
	border-radius: var(--radius-xl);
	padding: var(--sp-6);
	box-shadow: var(--shadow-xl);
	border: 1px solid rgba(142, 68, 32, 0.2);
	position: relative;
	overflow: hidden;
}
.kfy-hero__form-wrap::before {
	content: "";
	position: absolute;
	top: -40px; right: -40px;
	width: 180px; height: 180px;
	background: radial-gradient(circle, rgba(198, 187, 60, 0.4), transparent 70%);
	border-radius: 50%;
}

.kfy-hero__form-heading {
	font-family: var(--font-display);
	color: var(--color-warm-brown);
	margin: 0 0 var(--sp-2);
	font-size: clamp(22px, 2vw + 1rem, 28px);
	text-transform: uppercase;
}
.kfy-hero__form-sub {
	margin: 0 0 var(--sp-5);
	color: var(--text-muted);
	font-size: 15px;
}

.kfy-hero__form {
	display: grid;
	gap: var(--sp-3);
	position: relative;
}
.kfy-hero__form label {
	display: block;
	font-size: 14px;
	font-family: var(--font-display);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-dark-brown);
	margin-bottom: 6px;
}
.kfy-hero__form input,
.kfy-hero__form select,
.kfy-hero__form textarea {
	width: 100%;
	padding: 14px 14px;
	border: 1px solid rgba(142, 68, 32, 0.3);
	background: #fff;
	color: var(--color-dark-brown);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	/* 17px is well above the 16px iOS auto-zoom threshold and matches the
	   site's enhanced ADA-friendly body floor. */
	font-size: 17px;
	transition: border-color var(--ease-default), box-shadow var(--ease-default);
}
.kfy-hero__form input:focus,
.kfy-hero__form select:focus,
.kfy-hero__form textarea:focus {
	outline: none;
	border-color: var(--color-gold);
	box-shadow: 0 0 0 3px rgba(198, 187, 60, 0.25);
}

.kfy-hero__form-note {
	font-size: 14px;
	color: var(--text-muted);
	margin: 6px 0 0;
	text-align: center;
	font-style: italic;
	line-height: 1.5;
}

/* Side-view van - sits behind the mascot inside the form column.
   Lower z-index than the mascot (5) so the mascot reads in front.
   Right offset uses max() to clamp how far the van can bleed past the
   form column based on the available room outside the 1200px container.
   Bottom offset is intentionally large/negative so the composition sits
   well below the form and never overlaps the CTA button. */
.kfy-hero__van-side {
	position: absolute;
	right: max(-180px, calc((100vw - 1200px) / -2 + 8px));
	bottom: -90px;
	width: 320px;
	max-width: none;
	height: auto;
	z-index: 3;
	pointer-events: none;
	filter: drop-shadow(0 22px 30px rgba(41, 22, 16, 0.55));
}
@media (min-width: 992px) {
	.kfy-hero__van-side {
		width: 360px;
		right: max(-200px, calc((100vw - 1200px) / -2 + 8px));
		bottom: -110px;
	}
}
@media (min-width: 1200px) {
	.kfy-hero__van-side {
		width: 400px;
		right: max(-220px, calc((100vw - 1200px) / -2 + 8px));
		bottom: -130px;
	}
}
@media (min-width: 1440px) {
	.kfy-hero__van-side { width: 460px; right: -260px; bottom: -150px; }
}
@media (max-width: 767px) {
	.kfy-hero__van-side { display: none; }
}

.kfy-hero__mascot {
	position: absolute;
	right: max(-60px, calc((100vw - 1200px) / -2 + 12px));
	bottom: var(--kfy-hero-mascot-bottom, -30px);
	width: 150px;
	height: auto;
	z-index: 5;
	filter: drop-shadow(0 14px 28px rgba(41, 22, 16, 0.55));
	animation: kfy-float 4s ease-in-out infinite;
	pointer-events: none;
}
@media (min-width: 768px) {
	.kfy-hero__mascot {
		width: 180px;
		right: max(-90px, calc((100vw - 1200px) / -2 + 12px));
		bottom: var(--kfy-hero-mascot-bottom, -100px);
	}
}
@media (min-width: 1200px) {
	.kfy-hero__mascot {
		width: 200px;
		right: max(-110px, calc((100vw - 1200px) / -2 + 12px));
		bottom: var(--kfy-hero-mascot-bottom, -115px);
	}
}
@media (min-width: 1440px) {
	.kfy-hero__mascot { width: 230px; right: -140px; bottom: var(--kfy-hero-mascot-bottom, -125px); }
}

@media (min-width: 992px) {
	.kfy-hero__inner {
		grid-template-columns: 1.2fr 1fr;
		gap: var(--sp-10);
	}
}

/* =========================================================================
   404 - PAGE NOT FOUND
   ========================================================================= */
.kfy-404 {
	position: relative;
	overflow: hidden;
	background-color: var(--color-near-black);
	background-image:
		linear-gradient(180deg, rgba(41, 22, 16, 0.78) 0%, rgba(41, 22, 16, 0.92) 100%),
		url("../img/wrap-background.png");
	background-size: cover;
	background-position: center 40%;
	background-repeat: no-repeat;
	color: var(--color-cream);
	min-height: calc(100svh - var(--kfy-header-h, 130px));
	display: flex;
	align-items: center;
	padding: clamp(var(--sp-8), 6vw, var(--sp-12)) 0;
}
.kfy-404::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 80% 0%, rgba(198, 187, 60, 0.16), transparent 60%),
		radial-gradient(ellipse at 0% 100%, rgba(142, 68, 32, 0.30), transparent 60%);
	pointer-events: none;
	z-index: 1;
}
.kfy-404__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--sp-5);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-8);
	align-items: center;
}
@media (min-width: 992px) {
	.kfy-404__inner {
		grid-template-columns: 1.4fr 1fr;
		gap: var(--sp-10);
	}
}

.kfy-404__content { max-width: 640px; }

.kfy-404__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(142, 68, 32, 0.4);
	border: 1px solid rgba(198, 187, 60, 0.4);
	color: var(--color-cream);
	padding: 6px 14px;
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 14px;
	margin-bottom: var(--sp-5);
}
.kfy-404__eyebrow .kfy-icon { color: var(--color-gold); }

.kfy-404__numerals {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--font-display);
	font-size: clamp(96px, 18vw, 200px);
	line-height: 0.85;
	color: var(--color-gold);
	margin: 0 0 var(--sp-4);
	text-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.kfy-404__numerals-paw {
	display: inline-grid;
	place-items: center;
	width: clamp(80px, 14vw, 160px);
	height: clamp(80px, 14vw, 160px);
	background: linear-gradient(135deg, var(--color-warm-brown), var(--color-burnt-orange));
	color: var(--color-cream);
	border-radius: 50%;
	box-shadow: 0 12px 32px rgba(41, 22, 16, 0.55);
	animation: kfy-pulse 3s ease-in-out infinite;
}
.kfy-404__numerals-paw .kfy-icon { width: 60%; height: 60%; }

.kfy-404__title {
	margin: 0 0 var(--sp-4);
	font-size: clamp(28px, 4vw + 0.5rem, 52px);
	line-height: 1.05;
	font-family: var(--font-display);
	text-transform: uppercase;
}
.kfy-404__title span { color: var(--color-gold); display: block; }

.kfy-404__subtitle {
	font-size: clamp(17px, 0.6vw + 16px, 20px);
	color: rgba(248, 243, 224, 0.85);
	margin: 0 0 var(--sp-6);
	line-height: 1.65;
}

.kfy-404__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-bottom: var(--sp-6);
}

.kfy-404__helpful {
	background: rgba(11, 20, 24, 0.55);
	border: 1px solid rgba(198, 187, 60, 0.18);
	border-radius: var(--radius-lg);
	padding: var(--sp-4) var(--sp-5);
	margin-bottom: var(--sp-5);
}
.kfy-404__helpful-label {
	font-family: var(--font-display);
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--color-gold);
	margin: 0 0 var(--sp-3);
}
.kfy-404__helpful-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-2) var(--sp-4);
}
@media (max-width: 540px) {
	.kfy-404__helpful-list { grid-template-columns: 1fr; }
}
.kfy-404__helpful-list a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-cream);
	font-size: 16px;
	padding: 8px 0;
	transition: color var(--ease-default), transform var(--ease-default);
}
.kfy-404__helpful-list a:hover {
	color: var(--color-gold);
	transform: translateX(3px);
}
.kfy-404__helpful-list .kfy-icon { color: var(--color-gold); }

.kfy-404__call {
	font-size: 16px;
	color: rgba(248, 243, 224, 0.7);
	margin: 0;
}
.kfy-404__call a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-gold);
	font-family: var(--font-display);
	letter-spacing: 0.5px;
	margin-left: 4px;
}
.kfy-404__call a:hover { color: var(--color-cream); }

.kfy-404__mascot-wrap {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 260px;
}
.kfy-404__mascot {
	width: 100%;
	max-width: 340px;
	height: auto;
	filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.55));
	animation: kfy-float 4s ease-in-out infinite;
}
.kfy-404__mascot-bubble {
	position: absolute;
	top: 8%;
	right: 0;
	background: var(--color-cream);
	color: var(--color-warm-brown);
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 15px;
	padding: 10px 18px;
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-lg);
	border: 2px solid var(--color-gold);
	transform: rotate(-6deg);
}
.kfy-404__mascot-bubble::after {
	content: "";
	position: absolute;
	bottom: -8px;
	left: 22px;
	width: 16px;
	height: 16px;
	background: var(--color-cream);
	border-right: 2px solid var(--color-gold);
	border-bottom: 2px solid var(--color-gold);
	transform: rotate(45deg);
}
@media (max-width: 991px) {
	.kfy-404__mascot-wrap { order: -1; min-height: 220px; }
	.kfy-404__mascot { max-width: 240px; }
}

/* =========================================================================
   QUICK ACTIONS - Compact strip between hero and reviews
   ========================================================================= */
.kfy-quick-actions {
	position: relative;
	background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
	padding: var(--sp-6) 0;
	border-top: 1px solid rgba(198, 187, 60, 0.15);
	border-bottom: 1px solid rgba(198, 187, 60, 0.15);
}
.kfy-quick-actions__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-3);
}
@media (min-width: 600px) { .kfy-quick-actions__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .kfy-quick-actions__grid { grid-template-columns: repeat(4, 1fr); } }

.kfy-qa-tile {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-4);
	background: rgba(248, 243, 224, 0.04);
	border: 1px solid rgba(248, 243, 224, 0.1);
	border-radius: var(--radius-lg);
	color: var(--color-cream);
	text-decoration: none;
	transition: transform var(--ease-default), background var(--ease-default), border-color var(--ease-default), box-shadow var(--ease-default);
	min-height: 88px;
}
.kfy-qa-tile:hover {
	transform: translateY(-3px);
	background: rgba(248, 243, 224, 0.08);
	border-color: var(--color-gold);
	box-shadow: var(--shadow-md);
	color: var(--color-cream);
	text-decoration: none;
}
.kfy-qa-tile:focus-visible { text-decoration: none; }

.kfy-qa-tile__icon {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, var(--color-warm-brown), var(--color-burnt-orange));
	color: var(--color-cream);
	flex-shrink: 0;
	transition: transform var(--ease-default);
}
.kfy-qa-tile:hover .kfy-qa-tile__icon { transform: scale(1.05) rotate(-3deg); }

.kfy-qa-tile__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kfy-qa-tile__label {
	font-family: var(--font-display);
	font-size: 16px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-cream);
	line-height: 1.1;
}
.kfy-qa-tile__subtext {
	font-size: 14px;
	color: rgba(248, 243, 224, 0.7);
	line-height: 1.45;
}

.kfy-qa-tile__arrow {
	color: var(--color-gold);
	opacity: 0.6;
	transition: opacity var(--ease-default), transform var(--ease-default);
}
.kfy-qa-tile:hover .kfy-qa-tile__arrow {
	opacity: 1;
	transform: translateX(4px);
}

.kfy-qa-tile--highlight {
	background: linear-gradient(135deg, rgba(198, 187, 60, 0.95), rgba(186, 103, 51, 0.95));
	border-color: var(--color-gold);
	color: var(--color-near-black);
	box-shadow: var(--shadow-gold);
}
.kfy-qa-tile--highlight:hover {
	background: linear-gradient(135deg, var(--color-gold), var(--color-burnt-orange));
	color: var(--color-near-black);
	border-color: var(--color-cream);
}
.kfy-qa-tile--highlight .kfy-qa-tile__icon {
	background: var(--color-near-black);
	color: var(--color-gold);
}
.kfy-qa-tile--highlight .kfy-qa-tile__label,
.kfy-qa-tile--highlight .kfy-qa-tile__subtext { color: var(--color-near-black); }
.kfy-qa-tile--highlight .kfy-qa-tile__subtext { color: rgba(41, 22, 16, 0.75); }
.kfy-qa-tile--highlight .kfy-qa-tile__arrow { color: var(--color-near-black); opacity: 0.85; }

/* =========================================================================
   BLOCK 3 - SOCIAL PROOF
   ========================================================================= */
.kfy-social-proof { background: var(--bg-secondary); }

/* Breathing room between the section header and the Google/Facebook badges,
   and between the badges and the review cards below. */
.kfy-social-proof .kfy-review-badges {
	margin-top: var(--sp-6);
	margin-bottom: var(--sp-8);
}
@media (max-width: 600px) {
	.kfy-social-proof .kfy-review-badges {
		margin-top: var(--sp-5);
		margin-bottom: var(--sp-6);
	}
}

/* ---- Review badges (Google + Facebook) ---- */
.kfy-review-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-4);
	margin: 0 auto var(--sp-8);
	max-width: 720px;
}

.kfy-review-badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 12px 20px 12px 14px;
	background: var(--color-cream);
	color: var(--text-on-light);
	border-radius: var(--radius-lg);
	border: 1px solid rgba(189, 188, 188, 0.4);
	box-shadow: 0 6px 20px rgba(27, 40, 46, 0.18);
	text-decoration: none;
	transition: transform var(--ease-default), box-shadow var(--ease-default), border-color var(--ease-default);
	min-width: 240px;
}
.kfy-review-badge:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(27, 40, 46, 0.28);
	border-color: var(--kfy-badge-accent, rgba(189, 188, 188, 0.4));
}
.kfy-review-badge:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 3px;
}
.kfy-review-badge.is-static {
	cursor: default;
}
.kfy-review-badge.is-static:hover {
	transform: none;
	box-shadow: 0 6px 20px rgba(27, 40, 46, 0.18);
}

.kfy-review-badge--google   { --kfy-badge-accent: #4285F4; }
.kfy-review-badge--facebook { --kfy-badge-accent: #1877F2; }

.kfy-review-badge__logo {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: #fff;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(27, 40, 46, 0.08);
}
.kfy-review-badge__logo svg { display: block; }

.kfy-review-badge__content {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.1;
	/* Allow this flex child to shrink below its intrinsic content width so
	   long labels like "FACEBOOK REVIEWS" can wrap instead of pushing the
	   badge past its container. */
	min-width: 0;
	flex: 1 1 auto;
}
.kfy-review-badge__label {
	overflow-wrap: anywhere;
}
.kfy-review-badge__top {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.kfy-review-badge__score {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--color-near-black);
	letter-spacing: 0.5px;
}
.kfy-review-badge__stars {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	color: var(--color-gold);
}
.kfy-review-badge__stars .kfy-icon { width: 16px; height: 16px; }
.kfy-review-badge__label {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--text-muted);
	font-family: var(--font-display);
}

@media (max-width: 600px) {
	/* Two columns on mobile so Google + Facebook always sit side by side.
	   The compact (--compact) and micro (--micro) variants set their own
	   display rules below and are unaffected. */
	.kfy-social-proof .kfy-review-badges {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		max-width: 520px;
		margin-inline: auto;
	}
	.kfy-social-proof .kfy-review-badge {
		min-width: 0;
		width: 100%;
		max-width: none;
		padding: 10px 12px 10px 10px;
		gap: 8px;
		border-radius: 14px;
	}
	.kfy-social-proof .kfy-review-badge__logo { width: 36px; height: 36px; }
	.kfy-social-proof .kfy-review-badge__score { font-size: 18px; }
	.kfy-social-proof .kfy-review-badge__top { gap: 6px; flex-wrap: wrap; }
	.kfy-social-proof .kfy-review-badge__stars { gap: 0; }
	.kfy-social-proof .kfy-review-badge__stars .kfy-icon { width: 12px; height: 12px; }
	.kfy-social-proof .kfy-review-badge__label {
		font-size: 14px;
		letter-spacing: 0.6px;
		/* Allow wrap so "FACEBOOK REVIEWS" doesn't overflow the chip on
		   narrow viewports. */
		white-space: normal;
		line-height: 1.15;
	}
}

/* Compact variant - used in tight contexts like the hero. Always 2 columns. */
.kfy-review-badges--compact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	max-width: 480px;
	margin: 0 0 var(--sp-4); /* left-aligned by default; mobile media query re-centers */
}
.kfy-review-badges--compact .kfy-review-badge {
	min-width: 0;
	gap: 8px;
	padding: 8px 12px 8px 8px;
	border-radius: 12px;
	box-shadow: 0 4px 14px rgba(27, 40, 46, 0.22);
}
.kfy-review-badges--compact .kfy-review-badge__logo {
	width: 32px;
	height: 32px;
}
.kfy-review-badges--compact .kfy-review-badge__score {
	font-size: 16px;
}
.kfy-review-badges--compact .kfy-review-badge__top { gap: 5px; flex-wrap: wrap; }
.kfy-review-badges--compact .kfy-review-badge__stars { gap: 0; }
.kfy-review-badges--compact .kfy-review-badge__stars .kfy-icon { width: 11px; height: 11px; }
.kfy-review-badges--compact .kfy-review-badge__label {
	font-size: 14px;
	letter-spacing: 0.4px;
	/* Wrap to 2 lines instead of overflowing the chip. */
	white-space: normal;
	line-height: 1.15;
}

/* Micro variant - compact single-line pill, no label. */
.kfy-review-badges--micro {
	display: inline-flex;
	gap: 8px;
	margin: 0;
	max-width: none;
}
.kfy-review-badges--micro .kfy-review-badge {
	min-width: 0;
	gap: 6px;
	padding: 3px 10px 3px 4px;
	border-radius: var(--radius-full);
	border: 1px solid rgba(248, 243, 224, 0.18);
	background: rgba(248, 243, 224, 0.06);
	box-shadow: none;
	color: var(--color-cream);
}
.kfy-review-badges--micro .kfy-review-badge:hover {
	transform: none;
	background: rgba(248, 243, 224, 0.10);
	border-color: var(--kfy-badge-accent, rgba(198, 187, 60, 0.6));
	box-shadow: none;
}
.kfy-review-badges--micro .kfy-review-badge.is-static:hover {
	box-shadow: none;
}
.kfy-review-badges--micro .kfy-review-badge__logo {
	width: 22px;
	height: 22px;
	box-shadow: inset 0 0 0 1px rgba(27, 40, 46, 0.12);
}
.kfy-review-badges--micro .kfy-review-badge__score {
	font-size: 14px;
	letter-spacing: 0.3px;
	color: var(--color-cream);
	line-height: 1;
	display: inline-flex;
	align-items: center;
}
.kfy-review-badges--micro .kfy-review-badge__stars {
	gap: 0;
	line-height: 1;
	align-items: center;
}
.kfy-review-badges--micro .kfy-review-badge__stars .kfy-icon {
	width: 9px;
	height: 9px;
	display: block;
}

.kfy-reviews {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-5);
}
@media (min-width: 768px) { .kfy-reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .kfy-reviews { grid-template-columns: repeat(3, 1fr); } }

.kfy-review {
	background: var(--color-cream);
	color: var(--text-on-light);
	border-radius: var(--radius-lg);
	padding: var(--sp-5);
	box-shadow: var(--shadow-md);
	border: 1px solid rgba(189, 188, 188, 0.3);
	transition: transform var(--ease-default), box-shadow var(--ease-default);
	position: relative;
}
.kfy-review:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.kfy-review--featured {
	border: 2px solid var(--color-gold);
	box-shadow: 0 8px 32px rgba(198, 187, 60, 0.25);
}
.kfy-review--faded { opacity: 0.85; }

.kfy-review__head {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-3);
}
.kfy-review__avatar {
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-warm-brown), var(--color-burnt-orange));
	color: var(--color-cream);
	font-family: var(--font-display);
	font-weight: bold;
	font-size: 16px;
}
.kfy-review__name { font-family: var(--font-display); text-transform: uppercase; font-size: 17px; margin: 0; line-height: 1.15; }
.kfy-review__meta { font-size: 14px; color: var(--text-muted); margin: 2px 0 0; }
.kfy-review__stars { color: var(--color-gold); display: flex; gap: 2px; margin-bottom: var(--sp-2); }
.kfy-review__quote { font-size: 17px; line-height: 1.6; margin: 0 0 var(--sp-3); color: var(--color-dark-brown); }
.kfy-review__date { font-size: 14px; color: var(--text-muted); }

.kfy-social-proof__cta {
	text-align: center;
	margin-top: var(--sp-8);
}
.kfy-social-proof__cta a {
	color: var(--color-gold);
	font-family: var(--font-display);
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 15px;
	border-bottom: 1px solid var(--color-gold);
	padding-bottom: 2px;
}

/* =========================================================================
   BLOCK 4 - SERVICES
   ========================================================================= */
.kfy-services {
	position: relative;
	overflow: hidden;
	background-color: var(--bg-light);
	background-image: url("../img/wrap-background.png");
	background-size: cover;
	background-position: center 40%;
	background-repeat: no-repeat;
	color: var(--text-on-light);
}

/* Heavy cream wash — lets the illustration ghost through at ~12% visibility */
.kfy-services::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 20% 80%, rgba(198, 187, 60, 0.06), transparent 55%),
		radial-gradient(ellipse at 85% 20%, rgba(142, 68, 32, 0.05), transparent 50%),
		linear-gradient(180deg,
			rgba(248, 243, 224, 0.90) 0%,
			rgba(248, 243, 224, 0.86) 40%,
			rgba(248, 243, 224, 0.88) 100%);
	pointer-events: none;
	z-index: 0;
}

/* Lift all direct children above the overlay */
.kfy-services > * { position: relative; z-index: 1; }

.kfy-services__grid {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) { .kfy-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kfy-services__grid { grid-template-columns: repeat(3, 1fr); } }

.kfy-service-card {
	background: #fff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	border: 1px solid rgba(142, 68, 32, 0.12);
	display: flex;
	flex-direction: column;
	transition: transform var(--ease-default), box-shadow var(--ease-default), border-color var(--ease-default);
	position: relative;
}
.kfy-service-card::before {
	content: "";
	position: absolute;
	top: 14px; right: 14px;
	width: 28px; height: 28px;
	background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E4420' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0.2;
	transition: transform var(--ease-default), opacity var(--ease-default);
	z-index: 2;
}
.kfy-service-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lg);
	border-color: var(--color-warm-brown);
}
.kfy-service-card:hover::before { opacity: 0.55; transform: rotate(20deg) scale(1.1); }

.kfy-service-card__image {
	width: 100%;
	height: 200px;
	background: linear-gradient(135deg, var(--color-deep-brown), var(--color-warm-brown));
	position: relative;
	overflow: hidden;
}
.kfy-service-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.kfy-service-card__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(41, 22, 16, 0.5));
}

.kfy-service-card__body {
	padding: var(--sp-6);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.kfy-service-card__icon {
	width: 56px; height: 56px;
	margin: -56px 0 var(--sp-4);
	background: linear-gradient(135deg, var(--color-gold), var(--color-burnt-orange));
	color: var(--color-near-black);
	border-radius: var(--radius-md);
	display: grid;
	place-items: center;
	font-size: 26px;
	box-shadow: var(--shadow-md);
	position: relative;
	z-index: 3;
}

.kfy-service-card__title {
	margin: 0 0 var(--sp-3);
	color: var(--color-dark-brown);
	font-size: clamp(20px, 1.5vw + 1rem, 26px);
}
.kfy-service-card__desc {
	color: var(--text-muted);
	margin: 0 0 var(--sp-5);
	flex: 1;
}
.kfy-service-card__link {
	color: var(--color-warm-brown);
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.kfy-service-card__link:hover { color: var(--color-burnt-orange); gap: 8px; }

/* =========================================================================
   BLOCK 4b - BEFORE & AFTER
   -------------------------------------------------------------------------
   Strict before/after proof gallery. Sits between Trust (dark) and the
   Guarantee ribbon on the home page so the white -> dark rhythm holds.
   Visual language mirrors .kfy-services (cream wash + ghost wrap pattern)
   so the two white bands feel like the same family.
   ========================================================================= */
.kfy-before-after {
	position: relative;
	overflow: hidden;
	background-color: var(--bg-light);
	background-image: url("../img/wrap-background.png");
	background-size: cover;
	background-position: center 60%;
	background-repeat: no-repeat;
	color: var(--text-on-light);
}
.kfy-before-after::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 80% 20%, rgba(198, 187, 60, 0.06), transparent 55%),
		radial-gradient(ellipse at 20% 80%, rgba(142, 68, 32, 0.05), transparent 50%),
		linear-gradient(180deg,
			rgba(248, 243, 224, 0.92) 0%,
			rgba(248, 243, 224, 0.88) 60%,
			rgba(248, 243, 224, 0.92) 100%);
	pointer-events: none;
	z-index: 0;
}
.kfy-before-after > * { position: relative; z-index: 1; }

.kfy-before-after .kfy-section-label    { color: var(--color-warm-brown); }
.kfy-before-after .kfy-section-title    { color: var(--color-dark-brown); }
.kfy-before-after .kfy-section-subtitle { color: var(--text-muted); }

/* Dark variant (forward-compat — block defaults to light, but the editor
   exposes a tone select). */
.kfy-before-after--dark {
	background-color: var(--bg-primary);
	color: var(--text-primary);
}
.kfy-before-after--dark::before {
	background:
		radial-gradient(ellipse at 80% 20%, rgba(198, 187, 60, 0.10), transparent 55%),
		radial-gradient(ellipse at 20% 80%, rgba(142, 68, 32, 0.18), transparent 50%),
		linear-gradient(180deg,
			rgba(41, 22, 16, 0.88) 0%,
			rgba(27, 40, 46, 0.92) 60%,
			rgba(41, 22, 16, 0.95) 100%);
}
.kfy-before-after--dark .kfy-section-label    { color: var(--color-gold); }
.kfy-before-after--dark .kfy-section-title    { color: var(--color-cream); }
.kfy-before-after--dark .kfy-section-subtitle { color: var(--text-secondary); }

.kfy-before-after__grid {
	display: grid;
	gap: var(--sp-8);
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.kfy-before-after__grid { grid-template-columns: repeat(2, 1fr); }

	/* Orphan-row centering: when the last card is alone on its final row
	   (e.g. the 3rd card in the 3-default layout, or any odd-numbered
	   trailing card the editor adds), span both columns and center it
	   inside the grid track so it doesn't read as "left-aligned dangler".
	   Match the column width using max-width so the card itself stays
	   the same size as its row-mates. */
	.kfy-before-after__card:nth-child(odd):last-child {
		grid-column: 1 / -1;
		justify-self: center;
		max-width: calc((100% - var(--sp-8)) / 2);
		width: 100%;
	}
}

.kfy-before-after__card {
	background: #fff;
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	border: 1px solid rgba(142, 68, 32, 0.12);
	display: flex;
	flex-direction: column;
	transition: transform var(--ease-default), box-shadow var(--ease-default), border-color var(--ease-default);
}
.kfy-before-after__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--color-warm-brown);
}
.kfy-before-after--dark .kfy-before-after__card {
	background: linear-gradient(180deg, rgba(27, 40, 46, 0.7), rgba(27, 40, 46, 0.4));
	border-color: rgba(198, 187, 60, 0.2);
}

/* Slider-style comparison frame: After fills the stage; Before is clipped
   to the left with a centered divider/handle. This gives the block the
   fuller "drag slider" visual without requiring JS for the first pass. */
.kfy-before-after__pair {
	--kfy-ba-pos: 56%;
	position: relative;
	aspect-ratio: 16 / 10;
	min-height: 260px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--color-deep-brown), var(--color-dark-brown));
	isolation: isolate;
}
@media (min-width: 1200px) {
	.kfy-before-after__pair { min-height: 320px; }
}

.kfy-before-after__layer {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
	background-color: var(--color-dark-brown);
}
.kfy-before-after__layer--after {
	z-index: 1;
}
.kfy-before-after__layer--before {
	z-index: 2;
	width: var(--kfy-ba-pos);
	clip-path: inset(0 0 0 0);
	box-shadow: 10px 0 24px rgba(41, 22, 16, 0.28);
	transition: width 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kfy-before-after__card:hover .kfy-before-after__pair {
	--kfy-ba-pos: 64%;
}

.kfy-before-after__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Empty placeholder: a warm cream/brown gradient with a subtle paw motif
   so the slot reads as "intentional placeholder" rather than broken. */
.kfy-before-after__layer--empty {
	background:
		radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.18), transparent 55%),
		linear-gradient(135deg, var(--color-warm-brown) 0%, var(--color-deep-brown) 100%);
	display: grid;
	place-items: center;
	color: rgba(248, 243, 224, 0.85);
}

/* "Before" / "After" labels stay pinned to the comparison frame, not the
   image crop, so the slider still makes sense when one image is missing. */
.kfy-before-after__ribbon {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 5;
	padding: 5px 12px;
	background: var(--color-cream);
	color: var(--color-dark-brown);
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	border-radius: var(--radius-full);
	border: 1px solid rgba(73, 44, 25, 0.18);
	box-shadow: 0 2px 4px rgba(41, 22, 16, 0.20);
}
.kfy-before-after__ribbon--after {
	left: auto;
	right: 10px;
	background: var(--color-burnt-orange);
	color: var(--color-cream);
	border-color: rgba(248, 243, 224, 0.35);
}

.kfy-before-after__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--kfy-ba-pos);
	z-index: 4;
	width: 3px;
	background: linear-gradient(180deg, transparent, var(--color-gold) 18%, var(--color-cream) 50%, var(--color-gold) 82%, transparent);
	box-shadow: 0 0 0 1px rgba(41, 22, 16, 0.18), 0 0 24px rgba(198, 187, 60, 0.35);
	transform: translateX(-50%);
	transition: left 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kfy-before-after__handle-knob {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 48px;
	height: 48px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	place-items: center;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-gold), var(--color-burnt-orange));
	border: 3px solid var(--color-cream);
	box-shadow: 0 8px 24px rgba(41, 22, 16, 0.38);
	transform: translate(-50%, -50%);
}
.kfy-before-after__handle-knob span {
	display: block;
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--color-near-black);
	border-left: 2px solid var(--color-near-black);
}
.kfy-before-after__handle-knob span:first-child { transform: rotate(-45deg); }
.kfy-before-after__handle-knob span:last-child  { transform: rotate(135deg); }

.kfy-before-after__range {
	position: absolute;
	inset: 0;
	z-index: 6;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
}
.kfy-before-after__pair:focus-within .kfy-before-after__handle-knob {
	box-shadow: 0 0 0 4px rgba(198, 187, 60, 0.35), 0 8px 24px rgba(41, 22, 16, 0.38);
}

.kfy-before-after__placeholder {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	font-size: 13px;
	text-align: center;
	padding: var(--sp-4);
	max-width: 80%;
	line-height: 1.4;
}

.kfy-before-after__body {
	padding: var(--sp-5) var(--sp-6) var(--sp-6);
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	flex: 1;
}
.kfy-before-after__title {
	margin: 0;
	color: var(--color-dark-brown);
	font-size: clamp(18px, 1.2vw + 0.9rem, 22px);
	line-height: 1.25;
}
.kfy-before-after--dark .kfy-before-after__title { color: var(--color-cream); }

.kfy-before-after__location {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-warm-brown);
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	font-size: 12px;
}
.kfy-before-after--dark .kfy-before-after__location { color: var(--color-gold); }

.kfy-before-after__summary {
	margin: 0;
	color: var(--text-muted);
	font-size: 15px;
	line-height: 1.55;
}
.kfy-before-after--dark .kfy-before-after__summary { color: var(--text-secondary); }

/* =========================================================================
   BLOCK 5 - PROCESS
   ========================================================================= */
.kfy-process {
	position: relative;
	overflow: hidden;
	background-color: var(--bg-primary);
	background-image: url("../img/wrap-background.png");
	background-size: cover;
	background-position: center 45%;
	background-repeat: no-repeat;
	color: var(--text-primary);
}

/* Warm dark wash + subtle gold/brown glows so the process section feels
   like a cousin of the hero (same wrap art, same tonal language) without
   competing with the hero's brightness. Glows sit in opposite corners to
   the hero's so the rhythm down the page doesn't repeat. */
.kfy-process::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 15% 0%, rgba(198, 187, 60, 0.14), transparent 55%),
		radial-gradient(ellipse at 100% 100%, rgba(142, 68, 32, 0.28), transparent 60%),
		linear-gradient(180deg,
			rgba(41, 22, 16, 0.86) 0%,
			rgba(27, 40, 46, 0.92) 60%,
			rgba(41, 22, 16, 0.95) 100%);
	pointer-events: none;
	z-index: 0;
}

.kfy-process > * { position: relative; z-index: 1; }

.kfy-process__steps {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 1fr;
	position: relative;
}
@media (min-width: 768px) {
	.kfy-process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
	.kfy-process__steps::before {
		display: none;
	}
}

@media (min-width: 1180px) {
	.kfy-process__steps:has(.kfy-step:nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.kfy-process__steps:has(.kfy-step:nth-child(4):last-child) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--sp-4);
	}
}

.kfy-step {
	background: linear-gradient(180deg, rgba(27, 40, 46, 0.7), rgba(27, 40, 46, 0.4));
	border: 1px solid rgba(198, 187, 60, 0.2);
	border-radius: var(--radius-lg);
	padding: var(--sp-6);
	text-align: center;
	position: relative;
	z-index: 1;
	backdrop-filter: blur(6px);
}

.kfy-step__num {
	width: 76px;
	height: 76px;
	margin: 0 auto var(--sp-4);
	background: linear-gradient(135deg, var(--color-gold), var(--color-burnt-orange));
	color: var(--color-near-black);
	font-family: var(--font-display);
	font-size: 36px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	box-shadow: 0 0 0 6px rgba(198, 187, 60, 0.15), var(--shadow-gold);
}

.kfy-step__title { margin: 0 0 var(--sp-3); color: var(--color-cream); }
.kfy-step__desc { color: var(--text-secondary); margin: 0; font-size: 17px; line-height: 1.6; }

.kfy-step__image {
	width: 160px;
	height: 160px;
	margin: 0 auto var(--sp-4);
	border-radius: 50%;
	background-color: var(--color-deep-brown);
	background-image: linear-gradient(135deg, var(--color-deep-brown), var(--color-dark-brown));
	background-size: cover;
	background-position: center;
	border: 4px solid rgba(198, 187, 60, 0.25);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.kfy-process--light .kfy-step__image {
	border-color: rgba(142, 68, 32, 0.18);
	box-shadow: var(--shadow-md);
}

/* ----- Light tone variant ----------------------------------------------
 * Used when the home page rhythm needs the process beat as a white
 * decision-support band between two dark proof sections. Mirrors the
 * cream wash + paw-print background language of .kfy-services so the
 * two white bands feel like the same family.
 */
.kfy-process--light {
	background-color: var(--bg-light);
	color: var(--text-on-light);
}
.kfy-process--light::before {
	background:
		radial-gradient(ellipse at 20% 80%, rgba(198, 187, 60, 0.06), transparent 55%),
		radial-gradient(ellipse at 85% 20%, rgba(142, 68, 32, 0.05), transparent 50%),
		linear-gradient(180deg,
			rgba(248, 243, 224, 0.92) 0%,
			rgba(248, 243, 224, 0.88) 60%,
			rgba(248, 243, 224, 0.92) 100%);
}
.kfy-process--light .kfy-section-label { color: var(--color-warm-brown); }
.kfy-process--light .kfy-section-title { color: var(--color-dark-brown); }
.kfy-process--light .kfy-step {
	background: #fff;
	border-color: rgba(142, 68, 32, 0.18);
	box-shadow: var(--shadow-md);
	backdrop-filter: none;
}
.kfy-process--light .kfy-step__title { color: var(--color-dark-brown); }
.kfy-process--light .kfy-step__desc  { color: var(--text-muted); }

/* =========================================================================
   BLOCK 6 - TRUST
   ========================================================================= */
.kfy-trust {
	position: relative;
	background-color: var(--bg-secondary);
	background-image:
		linear-gradient(180deg, rgba(27, 40, 46, 0.94) 0%, rgba(27, 40, 46, 0.97) 100%),
		url("../img/wrap-background.png");
	background-size: cover;
	background-position: center 70%;
	background-repeat: no-repeat;
}
.kfy-trust > * { position: relative; z-index: 1; }

.kfy-trust__split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-8);
	align-items: start;
}
@media (min-width: 992px) {
	.kfy-trust__split { grid-template-columns: 1.2fr 1fr; gap: var(--sp-10); }
}

.kfy-trust__points {
	display: grid;
	gap: var(--sp-5);
}

.kfy-trust-point {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: var(--sp-4);
	align-items: start;
}
.kfy-trust-point__icon {
	width: 56px; height: 56px;
	background: linear-gradient(135deg, var(--color-warm-brown), var(--color-burnt-orange));
	color: var(--color-cream);
	border-radius: var(--radius-md);
	display: grid;
	place-items: center;
	font-size: 26px;
}
.kfy-trust-point__title {
	font-family: var(--font-display);
	text-transform: uppercase;
	color: var(--color-cream);
	margin: 0 0 4px;
	font-size: 19px;
	letter-spacing: 0.5px;
}
.kfy-trust-point__desc { color: var(--text-secondary); margin: 0; font-size: 17px; line-height: 1.6; }

.kfy-trust__photo {
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-xl);
	background:
		radial-gradient(circle at 30% 20%, rgba(198, 187, 60, 0.18), transparent 55%),
		linear-gradient(135deg, var(--color-warm-brown) 0%, var(--color-deep-brown) 100%);
	background-size: cover;
	background-position: center center;
	box-shadow: var(--shadow-xl);
	position: relative;
	overflow: hidden;
	border: 3px solid rgba(198, 187, 60, 0.25);
}
.kfy-trust__photo--mascot {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: var(--sp-4);
}
.kfy-trust__photo--mascot img {
	max-width: 90%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
	animation: kfy-float 5s ease-in-out infinite;
}

.kfy-trust__stats {
	margin-top: var(--sp-10);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-5);
	background: linear-gradient(135deg, rgba(142, 68, 32, 0.3), rgba(73, 44, 25, 0.4));
	padding: var(--sp-6);
	border-radius: var(--radius-lg);
	border: 1px solid rgba(198, 187, 60, 0.25);
}
@media (min-width: 768px) { .kfy-trust__stats { grid-template-columns: repeat(3, 1fr); } }

.kfy-stat { text-align: center; }
.kfy-stat__number {
	font-family: var(--font-display);
	font-size: clamp(36px, 4vw + 1rem, 56px);
	color: var(--color-gold);
	line-height: 1;
}
.kfy-stat__label {
	font-size: 14px;
	color: var(--text-secondary);
	font-family: var(--font-display);
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-top: 6px;
}

.kfy-trust__certs {
	margin-top: var(--sp-8);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3);
}
.kfy-trust-cert {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--color-gold);
	color: var(--color-near-black);
	padding: 6px 14px;
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	font-size: 14px;
	letter-spacing: 1px;
}
.kfy-trust-cert::before {
	content: "";
	display: inline-block;
	width: 6px; height: 6px;
	background: var(--color-near-black);
	border-radius: 50%;
}

/* =========================================================================
   BLOCK 7 - SERVICE AREAS
   Coverage-decision section: proof strip → framed map → grouped towns →
   missing-town recovery CTA. The visual rhythm intentionally mirrors the
   hero/process/trust treatment (wrap-background art under a warm dark
   wash) so the coverage page reads as a continuation of the brand,
   not a separate screen.
   ========================================================================= */
.kfy-areas {
	position: relative;
	overflow: hidden;
	background-color: var(--bg-primary);
	background-image: url("../img/wrap-background.png");
	background-size: cover;
	background-position: center 60%;
	background-repeat: no-repeat;
	color: var(--color-cream);
}

/* Warm wash + opposite-corner glows (gold top-right, brown bottom-left) so
   the page rhythm doesn't repeat the hero or process glows directly. */
.kfy-areas::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 92% 0%, rgba(198, 187, 60, 0.16), transparent 55%),
		radial-gradient(ellipse at 0% 100%, rgba(142, 68, 32, 0.30), transparent 60%),
		linear-gradient(180deg,
			rgba(41, 22, 16, 0.88) 0%,
			rgba(27, 40, 46, 0.92) 60%,
			rgba(41, 22, 16, 0.95) 100%);
	pointer-events: none;
	z-index: 0;
}
.kfy-areas > * { position: relative; z-index: 1; }

/* ---------- Proof strip: "Based in", "Dispatch radius", "Licensing" ----- */
.kfy-areas__proof {
	list-style: none;
	margin: 0 auto var(--sp-8);
	padding: var(--sp-4) var(--sp-5);
	max-width: 900px;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
	background: rgba(27, 40, 46, 0.55);
	border: 1px solid rgba(198, 187, 60, 0.22);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	backdrop-filter: blur(6px);
}
@media (min-width: 640px) {
	.kfy-areas__proof {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-5);
	}
}
.kfy-areas__proof-item {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-width: 0;
}
.kfy-areas__proof-icon {
	display: inline-grid;
	place-items: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, var(--color-gold), var(--color-burnt-orange));
	color: var(--color-near-black);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.kfy-areas__proof-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.kfy-areas__proof-eyebrow {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 1.4px;
	font-size: 11px;
	color: var(--color-gold);
	opacity: 0.85;
}
.kfy-areas__proof-text strong {
	font-size: 15px;
	color: var(--color-cream);
	line-height: 1.3;
}

/* ---------- Map panel + caption ----------
 * Real Leaflet/OpenStreetMap map (no API key) — every town renders a
 * mascot DivIcon that pans + zooms with the map, instead of the old
 * static iframe overlay marker that "floated" above pan gestures.
 */
.kfy-areas__map-wrap {
	margin: 0 auto var(--sp-8);
	max-width: 1000px;
}

.kfy-areas__map {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	border: 1px solid rgba(198, 187, 60, 0.3);
	background: var(--bg-secondary);
	aspect-ratio: 16 / 9;
	position: relative;
	cursor: grab;
}
.kfy-areas__map.kfy-map--wheel-active { cursor: grab; }
.kfy-areas__map .leaflet-container {
	width: 100%;
	height: 100%;
	background: var(--bg-secondary);
	font-family: var(--font-body);
}
.kfy-areas__map .leaflet-control-attribution {
	background: rgba(248, 243, 224, 0.92);
	color: var(--color-dark-brown);
	font-size: 11px;
}
.kfy-areas__map .leaflet-control-attribution a {
	color: var(--color-burnt-orange);
}
.kfy-areas__map .leaflet-bar a {
	background: var(--color-cream);
	color: var(--color-dark-brown);
	border-color: rgba(73, 44, 25, 0.18);
}
.kfy-areas__map .leaflet-bar a:hover {
	background: #fffaee;
	color: var(--color-burnt-orange);
}
.kfy-areas__map .leaflet-tooltip {
	background: var(--color-cream);
	color: var(--color-dark-brown);
	border: 1px solid rgba(73, 44, 25, 0.20);
	box-shadow: 0 2px 6px rgba(41, 22, 16, 0.25);
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: var(--radius-full);
}
.kfy-areas__map .leaflet-tooltip-top:before { display: none; }

/* Static placeholder shown until Leaflet boots (or as a noscript fallback).
   Same warm shade as the OSM tiles so there is no flash when the map drops in. */
.kfy-areas__map-fallback {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 30% 35%, rgba(255, 255, 255, 0.5), transparent 55%),
		radial-gradient(circle at 70% 65%, rgba(73, 44, 25, 0.10), transparent 60%),
		var(--bg-secondary);
	display: grid;
	place-items: center;
	color: var(--color-cream);
	font-size: 14px;
	text-align: center;
	padding: var(--sp-5);
}
.kfy-areas__map-fallback-text { margin: 0; }

/* ----- Mascot DivIcon ------------------------------------------------
 * The HQ marker is larger than service-town markers, but all pins render
 * as the raw mascot PNG (no halo, no border, no tail). A drop-shadow
 * keeps them readable over busy tiles, and a tiny hover lift gives the
 * marker the only affordance it needs.
 */
.kfy-areas__pin-wrap {
	background: transparent !important;
	border: 0 !important;
	cursor: pointer;
}
.kfy-areas__pin {
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	filter: drop-shadow(0 4px 6px rgba(41, 22, 16, 0.45));
	transition: transform 0.15s ease;
}
.kfy-areas__pin-wrap:hover .kfy-areas__pin,
.kfy-areas__pin-wrap:focus-visible .kfy-areas__pin {
	transform: translateY(-3px) scale(1.04);
}
.kfy-areas__pin--hq {
	filter: drop-shadow(0 6px 10px rgba(41, 22, 16, 0.55));
}

.kfy-areas__map-caption {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: var(--sp-3) 0 0;
	font-size: 13px;
	color: rgba(248, 243, 224, 0.75);
	font-style: italic;
	text-align: center;
}
.kfy-areas__map-caption-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.kfy-areas__map-caption-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.kfy-areas--split .kfy-areas__coverage-split {
	display: grid;
	gap: var(--sp-6);
	align-items: stretch;
	max-width: 1120px;
	margin: 0 auto;
}

@media (min-width: 900px) {
	.kfy-areas--split .kfy-areas__coverage-split {
		grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
	}
}

.kfy-areas--split .kfy-areas__map-wrap,
.kfy-areas--split .kfy-areas__towns {
	min-width: 0;
	width: 100%;
	max-width: none;
	margin: 0;
}

.kfy-areas--split .kfy-areas__map {
	width: 100% !important;
	max-width: 100%;
	height: 100%;
	min-height: 460px;
	box-sizing: border-box;
}

.kfy-areas--split .leaflet-container {
	width: 100% !important;
	max-width: 100%;
}

.kfy-areas--split .kfy-areas__towns {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--sp-6);
	border: 1px solid rgba(142, 68, 32, 0.18);
	border-radius: var(--radius-xl);
	background: rgba(255, 255, 255, 0.62);
	box-shadow: var(--shadow-sm);
}

.kfy-areas--split .kfy-areas__group-hd {
	text-align: left;
	margin-inline: 0;
}

.kfy-areas--split .kfy-areas__town-list {
	justify-content: flex-start;
}

@media (max-width: 600px) {
	.kfy-areas__map {
		aspect-ratio: 4 / 3;
		border-radius: var(--radius-md);
	}
	.kfy-areas__map-wrap { margin-bottom: var(--sp-6); }
}

/* ---------- Town list: single dot-marked evidence list ----------
 * City leaf pages are linked when the block receives a town URL. The pill
 * treatment stays consistent whether a town is a link or evidence text.
 */
.kfy-areas__towns {
	max-width: 980px;
	margin: 0 auto var(--sp-10);
}

.kfy-areas__group-hd {
	text-align: center;
	max-width: 720px;
	margin: 0 auto var(--sp-5);
}

.kfy-areas__group-title {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: clamp(18px, 1vw + 14px, 22px);
	color: var(--color-gold);
	margin: 0 0 var(--sp-2);
}

.kfy-areas__group-sub {
	font-size: 15px;
	line-height: 1.55;
	color: rgba(248, 243, 224, 0.78);
	margin: 0;
}

.kfy-areas__town-list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	justify-content: center;
	max-width: 900px;
}

/* Town evidence chip — friendly, non-actionable, dot-led. Cursor stays
   default and there is no hover lift so it never reads as a button. */
.kfy-area-pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: rgba(248, 243, 224, 0.08);
	color: var(--color-cream);
	padding: 10px 18px;
	border: 1px solid rgba(198, 187, 60, 0.32);
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 15px;
	line-height: 1;
	min-height: 44px;
	cursor: default;
}

.kfy-area-pill__dot {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--color-gold);
	box-shadow: 0 0 0 4px rgba(198, 187, 60, 0.16);
}
.kfy-area-pill__dot::after {
	content: "";
	position: absolute;
	inset: -6px;
	border: 1px solid rgba(198, 187, 60, 0.45);
	border-radius: 50%;
	animation: kfy-area-dot-pulse 1.9s ease-out infinite;
}
@keyframes kfy-area-dot-pulse {
	0% {
		opacity: 0.75;
		transform: scale(0.65);
	}
	70% {
		opacity: 0;
		transform: scale(1.45);
	}
	100% {
		opacity: 0;
		transform: scale(1.45);
	}
}
@media (prefers-reduced-motion: reduce) {
	.kfy-area-pill__dot::after { animation: none; }
}

.kfy-area-pill__name {
	display: inline-block;
	min-width: 0;
}

/* ---------- Light tone variant ----------
 * Page rhythm calls for the coverage section to render on cream so the
 * service-area page can alternate dark / light / dark. The wrap-background
 * art is dropped here, replaced with a soft cream wash + subtle warm glow.
 */
.kfy-areas--light {
	background-color: var(--bg-light);
	background-image: none;
	color: var(--text-on-light);
}
.kfy-areas--light::before {
	background:
		radial-gradient(ellipse at 92% 0%, rgba(198, 187, 60, 0.12), transparent 55%),
		radial-gradient(ellipse at 0% 100%, rgba(142, 68, 32, 0.10), transparent 60%),
		linear-gradient(180deg, rgba(248, 243, 224, 0.0) 0%, rgba(248, 243, 224, 0.0) 100%);
}
.kfy-areas--light .kfy-section-label {
	color: var(--color-warm-brown);
	background: rgba(142, 68, 32, 0.08);
	border-color: rgba(142, 68, 32, 0.3);
}
.kfy-areas--light .kfy-section-title { color: var(--color-dark-brown); }
.kfy-areas--light .kfy-section-subtitle { color: var(--color-medium-gray); }

.kfy-areas--light .kfy-areas__proof {
	background: #fff;
	border-color: rgba(73, 44, 25, 0.18);
	box-shadow: var(--shadow-sm);
	backdrop-filter: none;
}
.kfy-areas--light .kfy-areas__proof-text strong { color: var(--color-dark-brown); }
.kfy-areas--light .kfy-areas__proof-eyebrow { color: var(--color-warm-brown); opacity: 1; }

.kfy-areas--light .kfy-areas__map { border-color: rgba(73, 44, 25, 0.18); }
.kfy-areas--light .kfy-areas__map-fallback { color: var(--text-on-light); }
.kfy-areas--light .kfy-areas__map-caption { color: var(--color-medium-gray); }

.kfy-areas--light .kfy-areas__group-title { color: var(--color-warm-brown); }
.kfy-areas--light .kfy-areas__group-sub   { color: var(--color-medium-gray); }

.kfy-areas--light .kfy-area-pill {
	background: #fff;
	color: var(--color-dark-brown);
	border-color: rgba(142, 68, 32, 0.25);
	box-shadow: var(--shadow-sm);
}
.kfy-areas--light .kfy-area-pill__dot {
	background: var(--color-warm-brown);
	box-shadow: 0 0 0 4px rgba(142, 68, 32, 0.13);
}
.kfy-areas--light .kfy-area-pill__dot::after {
	border-color: rgba(142, 68, 32, 0.38);
}
.kfy-areas--light .kfy-areas__recovery {
	background: linear-gradient(135deg, rgba(198, 187, 60, 0.18), rgba(248, 243, 224, 1));
	border-color: rgba(142, 68, 32, 0.28);
	box-shadow: var(--shadow-md);
}
.kfy-areas--light .kfy-areas__recovery-eyebrow { color: var(--color-warm-brown); }
.kfy-areas--light .kfy-areas__recovery-text { color: var(--color-dark-brown); }
.kfy-areas--light .kfy-areas__recovery-call {
	background: rgba(73, 44, 25, 0.06);
	color: var(--color-dark-brown);
	border-color: rgba(73, 44, 25, 0.30);
}
.kfy-areas--light .kfy-areas__recovery-call:hover {
	background: rgba(73, 44, 25, 0.10);
	border-color: var(--color-warm-brown);
	color: var(--color-dark-brown);
}
.kfy-areas--light .kfy-areas__recovery-call .kfy-icon { color: var(--color-warm-brown); }
.kfy-areas--light .kfy-areas__recovery-call-eyebrow { color: var(--color-warm-brown); }
.kfy-areas--light .kfy-areas__recovery-call-num    { color: var(--color-dark-brown); }

/* Mascot marker inside the recovery eyebrow line — same friendly mascot
   cue as the town list, no chip background so the PNG reads naturally. */
.kfy-areas__recovery-mascot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}
.kfy-areas__recovery-mascot img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* ---------- Recovery CTA: handles "town missing" + "I just want to talk" --- */
.kfy-areas__recovery {
	max-width: 900px;
	margin: 0 auto;
	padding: var(--sp-6) var(--sp-6);
	display: grid;
	gap: var(--sp-5);
	align-items: center;
	background: linear-gradient(135deg, rgba(142, 68, 32, 0.45), rgba(27, 40, 46, 0.6));
	border: 1px solid rgba(198, 187, 60, 0.28);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}
@media (min-width: 768px) {
	.kfy-areas__recovery {
		grid-template-columns: 1.4fr 1fr;
		padding: var(--sp-6) var(--sp-8);
	}
}

.kfy-areas__recovery-copy { min-width: 0; }

.kfy-areas__recovery-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 13px;
	color: var(--color-gold);
	margin: 0 0 var(--sp-2);
}
.kfy-areas__recovery-eyebrow .kfy-icon { color: var(--color-gold); flex-shrink: 0; }

.kfy-areas__recovery-text {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--color-cream);
}

.kfy-areas__recovery-actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--sp-3);
	justify-content: flex-start;
	min-width: 0;
}
.kfy-areas__recovery-actions > .kfy-btn {
	flex: 1 1 0;
	min-width: 0;
	white-space: nowrap;
}
@media (min-width: 768px) {
	.kfy-areas__recovery-actions { justify-content: flex-end; }
	.kfy-areas__recovery-actions > .kfy-btn { flex: 0 1 auto; }
}

/* Tight viewports: shrink padding and text so both buttons still share one
   row instead of stacking. The address-check stays the dominant action. */
@media (max-width: 520px) {
	.kfy-areas__recovery-actions { gap: var(--sp-2); }
	.kfy-areas__recovery-actions > .kfy-btn {
		padding: 10px 12px;
		font-size: 13px;
		letter-spacing: 0.4px;
		min-height: 48px;
	}
	.kfy-areas__recovery-call-num { font-size: 14px; }
}

.kfy-areas__recovery-cta {
	min-height: 52px;
	padding: 14px 22px;
}

/* The "Call now" button is intentionally quieter than the gold primary so
   the address-check is the dominant action — but it carries a visible
   eyebrow + phone number stack so it doesn't read as a stray ghost link. */
.kfy-areas__recovery-call {
	background: rgba(248, 243, 224, 0.08);
	color: var(--color-cream);
	border: 1.5px solid rgba(248, 243, 224, 0.35);
	padding: 10px 20px;
	min-height: 52px;
	letter-spacing: 0.6px;
	text-transform: none;
	font-family: var(--font-body);
	font-weight: 600;
}
.kfy-areas__recovery-call:hover {
	background: rgba(248, 243, 224, 0.14);
	border-color: var(--color-gold);
	color: var(--color-cream);
	transform: translateY(-1px);
	box-shadow: none;
}
.kfy-areas__recovery-call .kfy-icon { color: var(--color-gold); flex-shrink: 0; }

.kfy-areas__recovery-call-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.1;
	gap: 2px;
}
.kfy-areas__recovery-call-eyebrow {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 1.2px;
	font-size: 10px;
	color: var(--color-gold);
}
.kfy-areas__recovery-call-num {
	font-family: var(--font-display);
	font-size: 17px;
	letter-spacing: 0.5px;
	color: var(--color-cream);
}

/* =========================================================================
   BLOCK – GUARANTEE BANNER (compact ribbon)
   ========================================================================= */
.kfy-guarantee {
	position: relative;
	overflow: visible;           /* let the vehicle bleed out */
	background-color: var(--color-near-black);
	background-image: url("../img/wrap-background.png");
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	color: var(--color-cream);
	padding: var(--sp-6) 0 0;
	text-align: left;
}
/* Dark overlay matching the hero treatment */
.kfy-guarantee::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 80% 0%, rgba(198, 187, 60, 0.12), transparent 60%),
		radial-gradient(ellipse at 0% 100%, rgba(142, 68, 32, 0.25), transparent 60%),
		linear-gradient(180deg, rgba(41, 22, 16, 0.65) 0%, rgba(41, 22, 16, 0.80) 60%, rgba(41, 22, 16, 0.92) 100%);
	pointer-events: none;
	z-index: 1;
}

.kfy-guarantee__inner {
	position: relative;
	z-index: 2;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--sp-5);
	display: grid;
	grid-template-columns: 1fr;
	align-items: end;
	gap: var(--sp-4);
}

/* --- Corner paw decorations --- */
.kfy-guarantee__paw {
	position: absolute;
	z-index: 3;
	color: var(--color-gold);
	opacity: 0.25;
	pointer-events: none;
	line-height: 0;
}
.kfy-guarantee__paw .kfy-icon { width: 36px; height: 36px; }
.kfy-guarantee__paw--tl {
	top: var(--sp-3);
	left: var(--sp-3);
	transform: rotate(-20deg);
}
.kfy-guarantee__paw--tr {
	top: var(--sp-3);
	right: var(--sp-3);
	transform: rotate(20deg) scaleX(-1);
}

/* --- Text content --- */
.kfy-guarantee__content {
	position: relative;
	z-index: 2;
	padding-bottom: var(--sp-5);
}
.kfy-guarantee__eyebrow {
	font-family: var(--font-body);
	font-size: 14px;
	letter-spacing: 0.5px;
	color: rgba(248, 243, 224, 0.8);
	margin: 0 0 var(--sp-2);
	padding: 0;
	background: none;
	border: none;
}
.kfy-guarantee__headline {
	font-family: var(--font-display);
	font-size: clamp(24px, 3vw + 0.5rem, 42px);
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 var(--sp-4);
	text-shadow: 0 2px 8px rgba(41, 22, 16, 0.5);
}

/* --- CTA --- */
.kfy-guarantee__actions {
	margin-bottom: 0;
}
.kfy-guarantee__cta.kfy-btn {
	font-size: 15px;
	padding: 14px 28px;
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-gold);
}
.kfy-guarantee__cta.kfy-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 24px rgba(198, 187, 60, 0.45);
}

/* --- Vehicle --- */
.kfy-guarantee__vehicle {
	position: relative;
	z-index: 2;
	line-height: 0;
	justify-self: center;
}
.kfy-guarantee__vehicle-img {
	width: 100%;
	max-width: 340px;
	height: auto;
	filter: drop-shadow(0 6px 18px rgba(41, 22, 16, 0.45));
	transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kfy-guarantee:hover .kfy-guarantee__vehicle-img {
	transform: translateX(6px);
}


/* --- Desktop: compact side-by-side ribbon --- */
@media (min-width: 768px) {
	.kfy-guarantee {
		padding: 0;                 /* vehicle provides the visual height */
	}
	.kfy-guarantee__inner {
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: var(--sp-6);
	}
	.kfy-guarantee__content {
		padding: var(--sp-6) 0;
	}
	.kfy-guarantee__vehicle {
		align-self: end;
		margin-bottom: -1px;        /* sit flush on treeline */
	}
	.kfy-guarantee__vehicle-img {
		max-width: 380px;
	}
	.kfy-guarantee__paw .kfy-icon { width: 44px; height: 44px; }
}

@media (min-width: 1200px) {
	.kfy-guarantee__headline {
		font-size: 42px;
	}
	.kfy-guarantee__vehicle-img {
		max-width: 440px;
	}
	.kfy-guarantee__paw .kfy-icon { width: 56px; height: 56px; }
	.kfy-guarantee__paw--tl { top: var(--sp-4); left: var(--sp-6); }
	.kfy-guarantee__paw--tr { top: var(--sp-4); right: var(--sp-6); }
}

/* =========================================================================
   BLOCK – TRUST BANNER (compact ribbon)
   A centered trust confidence strip with hero-style wrap background.
   ========================================================================= */
.kfy-trust-banner {
	position: relative;
	overflow: visible;
	background-color: var(--color-near-black);
	background-image: url("../img/wrap-background.png");
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	color: var(--color-cream);
	padding: clamp(var(--sp-8), 5vw, var(--sp-12)) 0 0;
	text-align: center;
}

/* Dark overlay — same treatment as hero */
.kfy-trust-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 80% 0%, rgba(198, 187, 60, 0.10), transparent 60%),
		radial-gradient(ellipse at 0% 100%, rgba(142, 68, 32, 0.20), transparent 60%),
		linear-gradient(180deg, rgba(41, 22, 16, 0.60) 0%, rgba(41, 22, 16, 0.78) 60%, rgba(41, 22, 16, 0.90) 100%);
	pointer-events: none;
	z-index: 1;
}

.kfy-trust-banner__inner {
	position: relative;
	z-index: 2;
	max-width: 800px;
	margin-inline: auto;
	padding-inline: var(--sp-5);
}

.kfy-trust-banner__headline {
	font-family: var(--font-display);
	font-size: clamp(20px, 2.5vw + 0.4rem, 32px);
	line-height: 1.35;
	font-style: italic;
	font-weight: 700;
	margin: 0 0 var(--sp-5);
	text-shadow: 0 2px 8px rgba(41, 22, 16, 0.5);
}

.kfy-trust-banner__actions {
	padding-bottom: clamp(var(--sp-6), 4vw, var(--sp-10));
}

.kfy-trust-banner__cta.kfy-btn {
	font-size: 15px;
	padding: 14px 32px;
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-gold);
}
.kfy-trust-banner__cta.kfy-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 24px rgba(198, 187, 60, 0.45);
}



/* =========================================================================
   BLOCK 8 - FINAL CTA
   ========================================================================= */
.kfy-final-cta {
	position: relative;
	background-color: var(--color-deep-brown);
	background-image:
		linear-gradient(135deg, rgba(73, 44, 25, 0.88) 0%, rgba(142, 68, 32, 0.82) 100%),
		url("../img/wrap-background.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--color-cream);
	overflow: hidden;
	text-align: center;
	padding: clamp(var(--sp-12), 10vw, 160px) 0;
}
.kfy-final-cta::before {
	content: "";
	position: absolute;
	top: 10%;
	right: 8%;
	width: 240px; height: 240px;
	background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8F3E0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0.08;
	transform: rotate(-25deg);
	animation: kfy-wrench-spin 18s linear infinite;
	pointer-events: none;
}
.kfy-final-cta__inner {
	position: relative;
	z-index: 2;
	max-width: 880px;
	margin-inline: auto;
	padding-inline: var(--sp-5);
}
.kfy-final-cta__headline {
	font-size: clamp(34px, 5vw + 1rem, 60px);
	margin: 0 0 var(--sp-4);
	line-height: 1.05;
}
.kfy-final-cta__headline span { color: var(--color-gold); display: block; }
.kfy-final-cta__sub {
	font-size: clamp(17px, 1vw + 15px, 20px);
	color: rgba(248, 243, 224, 0.9);
	line-height: 1.6;
	margin: 0 0 var(--sp-8);
}
.kfy-final-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	justify-content: center;
}

/* =========================================================================
   BLOCK 9 - FOOTER
   ========================================================================= */
.kfy-footer {
	position: relative;
	background-color: var(--bg-secondary);
	background-image:
		linear-gradient(180deg, rgba(27, 40, 46, 0.92) 0%, rgba(27, 40, 46, 0.97) 60%, rgba(27, 40, 46, 0.99) 100%),
		url("../img/wrap-background.png");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	color: var(--color-cream);
	padding: var(--sp-12) 0 var(--sp-5);
	border-top: 4px solid var(--color-warm-brown);
}
.kfy-footer > * {
	position: relative;
	z-index: 1;
}

.kfy-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-8);
}
@media (min-width: 600px) { .kfy-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kfy-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: var(--sp-6); } }

.kfy-footer__col h3 {
	font-family: var(--font-display);
	color: var(--color-gold);
	text-transform: uppercase;
	font-size: 17px;
	letter-spacing: 1.5px;
	line-height: 1.2;
	margin: 0 0 var(--sp-4);
	padding-bottom: var(--sp-2);
	border-bottom: 1px solid rgba(198, 187, 60, 0.25);
}

/* Brand column - center the Maple Paw logo (and the supporting tag/owner
   line + social icons) inside its own column at every breakpoint. The
   column is the leftmost cell of the desktop grid and the first stacked
   item on mobile, so without centering the logo floats to the left and
   reads as misaligned against the rest of the footer. */
.kfy-footer__col--brand {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.kfy-footer__brand-mark {
	display: inline-block;
	margin: 0 auto var(--sp-4);
	line-height: 0;
}
.kfy-footer__brand-mark img {
	width: 100%;
	max-width: 260px;
	height: auto;
	margin-inline: auto;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
	transition: transform var(--ease-default);
}
.kfy-footer__brand-mark:hover img {
	transform: scale(1.03);
}
.kfy-footer__tag { color: var(--text-secondary); font-size: 16px; margin: 0 0 var(--sp-3); font-style: italic; line-height: 1.55; }
.kfy-footer__owner { color: var(--text-secondary); font-size: 15px; margin: 0 0 var(--sp-4); line-height: 1.55; }

.kfy-footer__socials {
	display: flex;
	gap: var(--sp-2);
	flex-wrap: wrap;
}
.kfy-footer__social {
	width: 38px; height: 38px;
	display: grid; place-items: center;
	border-radius: var(--radius-md);
	background: rgba(248, 243, 224, 0.08);
	color: var(--color-cream);
	font-size: 16px;
	transition: background var(--ease-default), transform var(--ease-default);
}
.kfy-footer__social:hover {
	background: var(--color-gold);
	color: var(--color-near-black);
	transform: translateY(-2px);
}

.kfy-footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.kfy-footer__list a { color: var(--text-secondary); font-size: 16px; line-height: 1.55; }
.kfy-footer__list a:hover { color: var(--color-gold); }
.kfy-footer__list span { color: var(--text-secondary); font-size: 16px; line-height: 1.55; }

.kfy-footer__contact { display: grid; gap: var(--sp-3); font-size: 16px; }
.kfy-footer__contact a, .kfy-footer__contact span { color: var(--text-secondary); }
.kfy-footer__contact a:hover { color: var(--color-gold); }
.kfy-footer__contact-row {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 12px;
	align-items: start;
	font-size: 16px;
	line-height: 1.55;
}
.kfy-footer__contact-icon { color: var(--color-gold); margin-top: 3px; }

.kfy-footer__hours-row {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-2);
	font-size: 15px;
	color: var(--text-secondary);
	padding: 6px 0;
	border-bottom: 1px dashed rgba(248, 243, 224, 0.08);
}
.kfy-footer__hours-row strong {
	color: var(--color-cream);
	font-family: var(--font-display);
	letter-spacing: 1px;
	min-width: 48px;
}

.kfy-footer__bottom {
	margin-top: var(--sp-10);
	padding-top: var(--sp-5);
	border-top: 1px solid rgba(248, 243, 224, 0.08);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sp-3);
	font-size: 14px;
	color: var(--text-secondary);
}
.kfy-footer__bottom a { color: var(--text-secondary); }
.kfy-footer__bottom a:hover { color: var(--color-gold); }
.kfy-footer__legal { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* =========================================================================
   Quote / Contact Modal
   ========================================================================= */
.kfy-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-4);
	visibility: hidden;
	opacity: 0;
	transition: opacity 200ms ease, visibility 0s linear 200ms;
	pointer-events: none;
}
.kfy-modal.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 200ms ease, visibility 0s linear 0s;
}
.kfy-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 10, 8, 0.72);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.kfy-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 540px;
	max-height: calc(100vh - var(--sp-6));
	overflow-y: auto;
	background: var(--color-cream);
	color: var(--color-near-black);
	border-radius: var(--radius-lg, 16px);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(198, 187, 60, 0.25);
	padding: clamp(20px, 4vw, 32px);
	transform: translateY(12px) scale(0.98);
	transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kfy-modal.is-open .kfy-modal__dialog { transform: translateY(0) scale(1); }

.kfy-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: transparent;
	color: var(--color-near-black);
	border: 1px solid rgba(27, 17, 12, 0.15);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.kfy-modal__close:hover {
	background: rgba(27, 17, 12, 0.06);
	border-color: var(--color-gold);
	color: var(--color-burnt-orange);
	transform: rotate(90deg);
}
.kfy-modal__close:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
}

.kfy-modal__header { margin-bottom: var(--sp-4); padding-right: 44px; }
.kfy-modal__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--color-burnt-orange);
	margin-bottom: 8px;
}
.kfy-modal__eyebrow .kfy-icon { color: var(--color-burnt-orange); }
.kfy-modal__title {
	font-family: var(--font-display);
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.15;
	margin: 0 0 6px;
	color: var(--color-near-black);
}
.kfy-modal__subtitle {
	margin: 0;
	font-size: 16px;
	color: rgba(27, 17, 12, 0.72);
	line-height: 1.55;
}

.kfy-modal__form .kfy-hero__form-note,
.kfy-modal__form .kfy-hero__form-note a {
	color: rgba(27, 17, 12, 0.7);
}
.kfy-modal__form .kfy-hero__form-note a {
	color: var(--color-burnt-orange);
	font-weight: 600;
	text-decoration: none;
}
.kfy-modal__form .kfy-hero__form-note a:hover { text-decoration: underline; }

/* Lock body scroll while the modal or mobile menu is open */
body.kfy-modal-open,
body.kfy-menu-open { overflow: hidden; }

@media (max-width: 480px) {
	.kfy-modal { padding: var(--sp-2); align-items: flex-end; }
	.kfy-modal__dialog {
		max-height: 92vh;
		border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
		padding: 22px 18px 24px;
	}
}

/* Honor reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	.kfy-modal,
	.kfy-modal__dialog,
	.kfy-modal__close { transition: none; }
}

/* Sticky mobile call bar - hidden by default, slides up once the user
   scrolls past the hero (the hero has its own large Call CTA). */
.kfy-mobile-callbar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 999;
	background: linear-gradient(135deg, var(--color-gold), var(--color-burnt-orange));
	color: var(--color-near-black);
	padding: 14px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 1px;
	box-shadow: 0 -4px 16px rgba(41, 22, 16, 0.3);
	transform: translateY(110%);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}
.kfy-mobile-callbar.is-visible {
	transform: translateY(0);
	pointer-events: auto;
}
.kfy-mobile-callbar a { color: var(--color-near-black); display: inline-flex; align-items: center; gap: 6px; }

@media (min-width: 768px) {
	.kfy-mobile-callbar { display: none; }
}

/* =========================================================================
   MOBILE OPTIMIZATIONS (≤767px)
   - Hide the lead form to push users to call
   - Make "Call Now" the dominant, full-width CTA
   - Show a compact mobile mascot inside the hero content
   - Tighten section padding & make primary CTAs full-width
   ========================================================================= */

/* Mobile-only mascot inside hero content (hidden on tablet/desktop) */
.kfy-hero__mascot--mobile { display: none; }

@media (max-width: 767px) {
	/* ---- Hero ---- */
	.kfy-hero {
		min-height: 0;
		padding: clamp(120px, 24vw, 150px) 0 var(--sp-8);
	}
	.kfy-hero__inner {
		gap: var(--sp-5);
		grid-template-columns: 1fr;
	}
	.kfy-hero__content {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.kfy-hero__title {
		font-size: clamp(30px, 8vw + 4px, 42px);
		text-wrap: balance;
	}
	.kfy-hero__subtitle {
		font-size: 16px;
		line-height: 1.6;
		margin: 0 auto var(--sp-5);
	}
	.kfy-hero__owner-pill { font-size: 14px; padding: 6px 12px; }

	/* Tuck the original right-column form + big mascot away */
	.kfy-hero__form-col { display: none; }

	/* Mobile mascot - sits below the credentials, centered */
	.kfy-hero__mascot--mobile {
		display: block;
		position: static;
		width: 180px;
		height: auto;
		margin: var(--sp-5) auto 0;
		filter: drop-shadow(0 14px 24px rgba(41, 22, 16, 0.55));
		animation: kfy-float 4s ease-in-out infinite;
		pointer-events: none;
	}

	/* CTAs: stack 1-column on mobile (Call dominant, Contact Us subtle) */
	.kfy-hero__ctas {
		grid-template-columns: minmax(0, 1fr);
		align-self: stretch;
		max-width: none;
		gap: var(--sp-2);
		margin-bottom: var(--sp-5);
	}
	/* The call wrapper is inline-flex (to anchor the van decoration), so on
	   mobile we have to explicitly stretch it - otherwise it shrinks to its
	   content while the sibling Quote button fills the grid cell, making the
	   primary CTA look smaller than the secondary one. */
	.kfy-hero__cta-call-wrap {
		display: flex;
		width: 100%;
	}
	.kfy-hero__cta-call-wrap > .kfy-hero__cta-call {
		width: 100%;
	}
	.kfy-hero__cta-call.kfy-btn {
		padding: 18px 18px;
		font-size: 17px;
		line-height: 1.15;
		min-height: 56px;
	}
	.kfy-hero__cta-quote.kfy-btn {
		padding: 14px 18px;
		font-size: 15px;
		min-height: 48px;
		opacity: 0.9;
	}

	/* Trim hero secondary content + center inline groups on mobile */
	.kfy-hero__coverage {
		justify-content: center;
		margin-top: var(--sp-3);
	}
	.kfy-hero__coverage li { font-size: 14px; padding: 4px 10px; }
	.kfy-hero__certs {
		justify-content: center;
		margin-top: var(--sp-4);
	}
	.kfy-hero__review-badges {
		/* Keep the Google + FB review chips left-aligned on mobile, even
		   though the surrounding hero content is centered. align-self
		   beats the parent's `align-items: center` for this one item. */
		justify-content: flex-start;
		align-self: flex-start;
		margin: 0 0 var(--sp-3);
	}

	/* ---- Sections ---- */
	.kfy-section { padding: var(--sp-10) 0; }
	.kfy-section-header { margin-bottom: var(--sp-8); }
	.kfy-container { padding-inline: var(--sp-4); }

	/* ---- Final CTA: stack buttons full-width ---- */
	.kfy-final-cta { padding: var(--sp-12) 0; }
	.kfy-final-cta__buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.kfy-final-cta__buttons .kfy-btn { width: 100%; justify-content: center; }

	/* ---- Trust: less ornament ---- */
	.kfy-trust__photo { display: none; }
	.kfy-trust__split { gap: var(--sp-6); }

	/* ---- Quick actions: tighter cards ---- */
	.kfy-quick-actions__grid { gap: var(--sp-3); }

	/* ---- Mobile callbar: bigger tap target + iOS safe-area ---- */
	.kfy-mobile-callbar {
		font-size: 16px;
		padding: 14px;
		padding-bottom: max(14px, env(safe-area-inset-bottom));
	}
	/* Only reserve space when the bar is actually showing */
	body:has(.kfy-mobile-callbar.is-visible) {
		padding-bottom: calc(64px + env(safe-area-inset-bottom));
	}
}

/* Very small phones - tighten further */
@media (max-width: 380px) {
	.kfy-hero__mascot--mobile { width: 150px; }
	.kfy-hero__title { font-size: 28px; }
	.kfy-review-badges--compact { gap: 8px; }
	.kfy-review-badges--compact .kfy-review-badge { padding: 6px 8px; gap: 6px; }
	.kfy-review-badges--compact .kfy-review-badge__logo { width: 28px; height: 28px; }
}

/* =====================================================================
   kfy/local-faq - accordion (used on service & city pages for SEO Q&A)
   ===================================================================== */
.kfy-local-faq {
	background: var(--bg-light);
	color: var(--text-on-light);
	/* Pull up into the service-section's wave area so there's no dead gap.
	   The wave SVG is 80px tall; we overlap most of it so the FAQ header
	   sits right where the wave crests. */
	margin-top: -40px;
	position: relative;
	z-index: 1;
	padding-top: var(--sp-8);
}

.kfy-local-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.kfy-local-faq__item {
	background: var(--color-cream);
	border: 1px solid var(--color-soft-tan);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--ease-default), border-color var(--ease-default);
}

.kfy-local-faq__item:hover {
	box-shadow: var(--shadow-md);
	border-color: var(--color-warm-brown);
}

.kfy-local-faq__item[open] {
	border-color: var(--color-gold);
}

.kfy-local-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-5);
	cursor: pointer;
	font-family: var(--font-accent);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.4;
	color: var(--text-on-light);
	list-style: none;
	user-select: none;
	transition: color var(--ease-default);
}

.kfy-local-faq__q::-webkit-details-marker { display: none; }
.kfy-local-faq__q::marker { content: ''; }

.kfy-local-faq__q:hover { color: var(--color-deep-brown); }

.kfy-local-faq__q-text { flex: 1; }

.kfy-local-faq__q-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--color-gold);
	transition: transform var(--ease-default);
}

.kfy-local-faq__item[open] .kfy-local-faq__q-icon {
	transform: rotate(90deg);
}

.kfy-local-faq__a {
	padding: 0 var(--sp-5) var(--sp-5);
	color: var(--text-on-light);
	font-size: 17px;
	line-height: 1.65;
	animation: kfyFaqOpen 0.22s ease-out;
}

.kfy-local-faq__a p { margin: 0; }

@keyframes kfyFaqOpen {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
	.kfy-local-faq__q { padding: var(--sp-3) var(--sp-4); font-size: 17px; }
	.kfy-local-faq__a { padding: 0 var(--sp-4) var(--sp-4); font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.kfy-local-faq__a { animation: none; }
	.kfy-local-faq__item,
	.kfy-local-faq__q-icon { transition: none; }
}

/* =========================================================================
   Long-copy + symptom-list groups (service & area leaf-page intros)
   ========================================================================= */
.kfy-long-copy,
.kfy-symptom-list {
	background: var(--bg-primary);
	color: var(--text-primary);
	padding: clamp(var(--sp-8), 6vw, var(--sp-12)) var(--sp-5);
	max-width: 880px;
	margin-inline: auto;
	box-sizing: content-box;
}

.kfy-long-copy .kfy-container--narrow,
.kfy-symptom-list .kfy-container--narrow {
	max-width: 820px;
	margin-inline: auto;
}

.kfy-long-copy h2,
.kfy-symptom-list h2 {
	font-family: var(--font-display);
	font-size: clamp(1.625rem, 2.5vw + 0.75rem, 2.25rem);
	color: var(--color-cream);
	text-transform: uppercase;
	line-height: 1.15;
	margin: 0 0 var(--sp-4);
}

.kfy-long-copy h3 {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 1.5vw + 0.75rem, 1.5rem);
	color: var(--color-gold);
	text-transform: uppercase;
	line-height: 1.2;
	margin: var(--sp-7) 0 var(--sp-3);
}

.kfy-long-copy p,
.kfy-symptom-list li {
	font-size: var(--fs-base);
	line-height: 1.75;
	color: var(--text-primary);
	margin: 0 0 var(--sp-4);
}

.kfy-long-copy p:last-child { margin-bottom: 0; }

.kfy-long-copy a,
.kfy-symptom-list a {
	color: var(--color-gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.kfy-long-copy a:hover,
.kfy-symptom-list a:hover { color: var(--color-burnt-orange); }

.kfy-symptom-list ul {
	list-style: none;
	padding: 0;
	margin: var(--sp-4) 0 0;
	display: grid;
	gap: var(--sp-2);
}

.kfy-symptom-list li {
	position: relative;
	padding-left: var(--sp-6);
	margin: 0;
}

.kfy-symptom-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-gold);
}

/* =========================================================================
   Simple page wrapper (legal, contact, generic user-created pages)
   ========================================================================= */
.kfy-simple-page {
	color: var(--text-primary);
	max-width: 800px;
	margin: 0 auto;
}
.kfy-simple-page h1 {
	margin: 0 0 var(--sp-6);
	color: var(--color-cream);
}
.kfy-simple-page h2 { margin: var(--sp-8) 0 var(--sp-3); color: var(--color-cream); }
.kfy-simple-page h3 { margin: var(--sp-6) 0 var(--sp-2); color: var(--color-cream); }
.kfy-simple-page p,
.kfy-simple-page li { line-height: 1.7; color: var(--text-primary); }
.kfy-simple-page a { color: var(--color-gold); text-decoration: underline; }
.kfy-simple-page a:hover { color: var(--color-burnt-orange); }

/* Light-section overrides — high-contrast dark-on-light for reading-heavy pages */
.kfy-section--light .kfy-simple-page { color: var(--text-on-light); }
.kfy-section--light .kfy-simple-page h1 { color: var(--color-near-black); }
.kfy-section--light .kfy-simple-page h2 { color: var(--color-deep-brown); }
.kfy-section--light .kfy-simple-page h3 { color: var(--color-warm-brown); }
.kfy-section--light .kfy-simple-page p,
.kfy-section--light .kfy-simple-page li { color: var(--text-on-light); }
.kfy-section--light .kfy-simple-page a { color: var(--color-warm-brown); }
.kfy-section--light .kfy-simple-page a:hover { color: var(--color-deep-brown); }

/* =========================================================================
   kfy/contact - Contact page form + info section
   ========================================================================= */
.kfy-contact {
	background: var(--bg-primary);
	color: var(--text-primary);
	padding: clamp(var(--sp-10), 8vw, var(--sp-12)) var(--sp-5);
	position: relative;
	overflow: hidden;
}
.kfy-contact::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 15% 20%, rgba(198, 187, 60, 0.08), transparent 45%),
		radial-gradient(circle at 85% 80%, rgba(186, 103, 51, 0.10), transparent 50%);
	pointer-events: none;
	z-index: 1;
}
.kfy-contact__inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	z-index: 2;
}

/* ---------- Wrap-background (page-hero) modifier ----------
   Used when the block sits at the top of a page (e.g. /contact/) and
   needs to carry the same brand presence as the standard kfy/hero.
   Layers: wrap PNG → autumn-toned dark gradient overlay → content.
   Layout (>=960px): two columns - header + info card on the left,
   form spanning full height on the right - so the entire contact UI
   fits inside one viewport on standard desktops without scrolling. */
.kfy-contact--wrap-bg {
	background-color: var(--color-near-black);
	color: var(--color-cream);
	padding-top: clamp(var(--sp-6), 4vw, var(--sp-10));
	padding-bottom: clamp(var(--sp-6), 4vw, var(--sp-10));
	min-height: calc(100svh - var(--kfy-header-h, 120px));
	display: flex;
	align-items: center;
}
.kfy-contact--wrap-bg .kfy-contact__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 35%;
	background-repeat: no-repeat;
	z-index: 0;
}
.kfy-contact--wrap-bg::before {
	background:
		radial-gradient(ellipse at 80% 0%, rgba(198, 187, 60, 0.18), transparent 60%),
		radial-gradient(ellipse at 0% 100%, rgba(142, 68, 32, 0.35), transparent 60%),
		linear-gradient(180deg, rgba(41, 22, 16, 0.55) 0%, rgba(41, 22, 16, 0.75) 60%, rgba(41, 22, 16, 0.92) 100%);
}
.kfy-contact--wrap-bg .kfy-contact__inner {
	width: 100%;
}

/* Compact, left-aligned header so the form sits beside it on desktop. */
.kfy-contact--wrap-bg .kfy-contact__header {
	max-width: 56ch;
	margin: 0 0 var(--sp-5);
	text-align: left;
}
.kfy-contact--wrap-bg .kfy-contact__owner-pill {
	margin-bottom: var(--sp-3);
}
.kfy-contact--wrap-bg .kfy-contact__title {
	font-size: clamp(28px, 3.2vw + 0.25rem, 48px);
	line-height: 1.05;
	margin-bottom: var(--sp-3);
}
.kfy-contact--wrap-bg .kfy-contact__intro {
	color: var(--color-cream);
	text-shadow: 0 1px 2px rgba(27, 17, 12, 0.6);
	font-size: clamp(15px, 0.5vw + 0.85rem, 17px);
	line-height: 1.55;
}

/* Two-column hero layout: header(L-top) + info(L-bottom) | form(R, full).
   Below 960px we fall back to the single-column stack defined below. */
@media (min-width: 960px) {
	.kfy-contact--wrap-bg .kfy-contact__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(380px, 0.95fr);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"header form"
			"info   form";
		column-gap: clamp(var(--sp-6), 3vw, var(--sp-10));
		row-gap: var(--sp-5);
		align-items: start;
	}
	.kfy-contact--wrap-bg .kfy-contact__header { grid-area: header; }
	.kfy-contact--wrap-bg .kfy-contact__grid { display: contents; }
	.kfy-contact--wrap-bg .kfy-contact__info { grid-area: info; }
	.kfy-contact--wrap-bg .kfy-contact__form-col { grid-area: form; align-self: stretch; }
}

/* Tighten the info card so the left column comfortably fits beside the
   form. Hours laid out in two columns saves ~120px of vertical space. */
.kfy-contact--wrap-bg .kfy-contact__info {
	padding: var(--sp-4) var(--sp-5);
}
.kfy-contact--wrap-bg .kfy-contact__badge {
	margin-bottom: var(--sp-3);
	font-size: 12px;
	padding: 6px 12px;
}
.kfy-contact--wrap-bg .kfy-contact__channels {
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
}
@media (min-width: 960px) {
	.kfy-contact--wrap-bg .kfy-contact__info .kfy-contact__channels {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.kfy-contact--wrap-bg .kfy-contact__channel {
	padding-bottom: var(--sp-3);
}
.kfy-contact--wrap-bg .kfy-contact__info .kfy-contact__channel {
	padding-bottom: 0;
	border-bottom: 0;
}
.kfy-contact--wrap-bg .kfy-contact__channel-value {
	font-size: 16px;
}
.kfy-contact--wrap-bg .kfy-contact__hours {
	margin-bottom: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
}
.kfy-contact--wrap-bg .kfy-contact__hours-title {
	margin-bottom: var(--sp-2);
}
.kfy-contact--wrap-bg .kfy-contact__hours-list {
	gap: 2px;
}
.kfy-contact--wrap-bg .kfy-contact__hours-row {
	font-size: 13px;
	padding: 2px 0;
}

/* Tighten the form card - form fields keep their 17px font (above the iOS
   16px auto-zoom threshold) but the surrounding card breathes less.
   The form heading + subtitle are visually hidden in wrap-bg mode because
   the page-level H1 + intro already establish the section context; we keep
   them in the DOM for screen-reader users so the form still has a labeled
   heading. */
.kfy-contact--wrap-bg .kfy-hero__form-wrap,
.kfy-contact--wrap-bg .kfy-contact__form-wrap {
	padding: var(--sp-5);
}
.kfy-contact--wrap-bg .kfy-hero__form-heading,
.kfy-contact--wrap-bg .kfy-hero__form-sub {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}
.kfy-contact--wrap-bg .kfy-hero__form,
.kfy-contact--wrap-bg .kfy-contact__form {
	gap: var(--sp-3);
}
.kfy-contact--wrap-bg .kfy-hero__form input,
.kfy-contact--wrap-bg .kfy-hero__form select,
.kfy-contact--wrap-bg .kfy-hero__form textarea {
	padding: 11px 13px;
}
.kfy-contact--wrap-bg .kfy-hero__form label {
	margin-bottom: 4px;
}
.kfy-contact--wrap-bg .kfy-contact__form textarea {
	min-height: 80px;
}
.kfy-contact--wrap-bg .kfy-contact__required-hint {
	margin-bottom: var(--sp-2);
}
.kfy-contact--wrap-bg .kfy-hero__form-note {
	margin-top: 4px;
	font-size: 13px;
}

.kfy-contact__header {
	max-width: 760px;
	margin: 0 auto var(--sp-10);
	text-align: center;
}
.kfy-contact__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-gold);
	font-family: var(--font-display);
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: 14px;
	margin-bottom: var(--sp-3);
}
.kfy-contact__title {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: clamp(32px, 4vw + 1rem, 52px);
	line-height: 1.05;
	margin: 0 0 var(--sp-4);
	color: var(--color-cream);
}
.kfy-contact__title-accent {
	display: block;
	color: var(--color-gold);
}
.kfy-contact__intro {
	font-size: clamp(16px, 1vw + 0.8rem, 18px);
	line-height: 1.65;
	color: var(--text-secondary);
	margin: 0;
}

.kfy-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-8);
	align-items: start;
}
@media (min-width: 880px) {
	.kfy-contact__grid {
		grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
		gap: var(--sp-10);
	}
}

/* ---------- Info card (left) ---------- */
.kfy-contact__info {
	background: linear-gradient(165deg, rgba(27, 40, 46, 0.95), rgba(41, 22, 16, 0.85));
	border: 1px solid rgba(198, 187, 60, 0.18);
	border-radius: var(--radius-xl);
	padding: var(--sp-6);
	box-shadow: var(--shadow-lg);
	position: relative;
}
.kfy-contact__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, var(--color-red), #a72820);
	color: #fff;
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 8px 14px;
	border-radius: var(--radius-full);
	margin-bottom: var(--sp-5);
	box-shadow: 0 4px 14px rgba(205, 54, 44, 0.35);
}

.kfy-contact__channels {
	list-style: none;
	margin: 0 0 var(--sp-6);
	padding: 0;
	display: grid;
	gap: var(--sp-4);
}
.kfy-contact__channel {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid rgba(198, 187, 60, 0.12);
}
.kfy-contact__channel:last-child { border-bottom: 0; padding-bottom: 0; }

.kfy-contact__channel-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	flex-shrink: 0;
	background: rgba(198, 187, 60, 0.12);
	color: var(--color-gold);
	border-radius: var(--radius-md);
}
.kfy-contact__channel-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.kfy-contact__channel-label {
	font-family: var(--font-display);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--text-secondary);
}
.kfy-contact__channel-value {
	color: var(--color-cream);
	font-size: 17px;
	line-height: 1.35;
	word-break: break-word;
}
a.kfy-contact__channel-value {
	text-decoration: none;
	transition: color var(--ease-default);
}
a.kfy-contact__channel-value:hover { color: var(--color-gold); }

.kfy-contact__channel-sub {
	color: var(--color-gold);
	font-size: 13px;
	text-decoration: none;
	margin-top: 2px;
	border-bottom: 1px dashed rgba(198, 187, 60, 0.4);
	align-self: flex-start;
	transition: color var(--ease-default), border-color var(--ease-default);
}
.kfy-contact__channel-sub:hover {
	color: var(--color-burnt-orange);
	border-bottom-color: var(--color-burnt-orange);
}

.kfy-contact__channels--form {
	margin: 0 0 var(--sp-5);
	padding: 0;
	gap: var(--sp-3);
}
.kfy-contact--wrap-bg .kfy-contact__channels--form {
	margin: 0 0 var(--sp-4);
	gap: var(--sp-3);
}
.kfy-contact__channels--form .kfy-contact__channel {
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3);
	background: rgba(198, 187, 60, 0.08);
	border: 1px solid rgba(142, 68, 32, 0.16);
	border-radius: var(--radius-md);
}
.kfy-contact__channels--form .kfy-contact__channel:last-child {
	padding: var(--sp-3);
	border-bottom: 1px solid rgba(142, 68, 32, 0.16);
}
.kfy-contact__channels--form .kfy-contact__channel-icon {
	background: rgba(186, 103, 51, 0.12);
	color: var(--color-warm-brown);
}
.kfy-contact__channels--form .kfy-contact__channel-label {
	color: var(--color-warm-brown);
}
.kfy-contact__channels--form .kfy-contact__channel-value {
	color: var(--color-dark-brown);
	font-size: 16px;
}
.kfy-contact__channels--form a.kfy-contact__channel-value:hover,
.kfy-contact__channels--form .kfy-contact__channel-sub:hover {
	color: var(--color-red);
}
.kfy-contact__channels--form .kfy-contact__channel-sub {
	color: var(--color-burnt-orange);
	border-bottom-color: rgba(186, 103, 51, 0.35);
}

/* ---------- Hours block ---------- */
.kfy-contact__hours {
	background: rgba(0, 0, 0, 0.2);
	border-radius: var(--radius-md);
	padding: var(--sp-4);
	margin-bottom: var(--sp-5);
}
.kfy-contact__hours-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--sp-3);
	font-family: var(--font-display);
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--color-gold);
}
.kfy-contact__hours-list {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	gap: 4px;
}
.kfy-contact__hours-row {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-3);
	font-size: 14px;
	color: var(--text-primary);
	padding: 4px 0;
}
.kfy-contact__hours-day {
	color: var(--text-secondary);
}
.kfy-contact__hours-row.is-today {
	color: var(--color-gold);
	font-weight: 600;
}
.kfy-contact__hours-row.is-today .kfy-contact__hours-day {
	color: var(--color-gold);
}
.kfy-contact__hours-row.is-today::after {
	content: "TODAY";
	font-family: var(--font-display);
	font-size: 10px;
	letter-spacing: 1.5px;
	background: var(--color-gold);
	color: var(--color-near-black);
	padding: 2px 6px;
	border-radius: var(--radius-sm);
	margin-left: 8px;
	align-self: center;
}

.kfy-contact__credentials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-4);
}
.kfy-contact__cred {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--text-secondary);
}
.kfy-contact__cred svg {
	color: var(--color-gold);
}

/* ---------- Form column (right) - reuses .kfy-hero__form-wrap ---------- */
.kfy-contact__form-col {
	min-width: 0;
}
.kfy-contact__form-wrap {
	scroll-margin-top: 96px; /* account for sticky header on anchor jump */
}
.kfy-contact__form { gap: var(--sp-4); }
.kfy-contact__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-4);
}
@media (min-width: 560px) {
	.kfy-contact__row {
		grid-template-columns: 1fr 1fr;
	}
}
.kfy-contact__form textarea {
	width: 100%;
	padding: 14px;
	border: 1px solid rgba(142, 68, 32, 0.3);
	background: #fff;
	color: var(--color-dark-brown);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.5;
	resize: vertical;
	min-height: 110px;
	transition: border-color var(--ease-default), box-shadow var(--ease-default);
}
.kfy-contact__form textarea:focus {
	outline: none;
	border-color: var(--color-gold);
	box-shadow: 0 0 0 3px rgba(198, 187, 60, 0.25);
}
.kfy-contact__form label span[aria-hidden="true"] {
	color: var(--color-red);
	margin-left: 2px;
}

.kfy-contact__quick-links {
	margin-top: var(--sp-5);
	padding-top: var(--sp-4);
	border-top: 1px solid rgba(142, 68, 32, 0.18);
}
.kfy-contact__quick-title {
	display: block;
	margin-bottom: var(--sp-3);
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--color-warm-brown);
}
.kfy-contact__quick-actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-2);
}
.kfy-contact__quick-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 14px;
	border: 1px solid rgba(142, 68, 32, 0.22);
	border-radius: var(--radius-md);
	background: rgba(198, 187, 60, 0.08);
	color: var(--color-dark-brown);
	font-family: var(--font-display);
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	transition: background var(--ease-default), color var(--ease-default), border-color var(--ease-default), transform var(--ease-default);
}
.kfy-contact__quick-link:hover,
.kfy-contact__quick-link:focus-visible {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: var(--color-near-black);
	transform: translateY(-1px);
}
@media (min-width: 560px) {
	.kfy-contact__quick-actions {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Honeypot - visually + accessibly hidden, but still POSTs to the server */
.kfy-contact__honeypot {
	position: absolute !important;
	left: -10000px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Visually-hidden helper for assistive-tech-only text. Mirrors the WordPress
   .screen-reader-text pattern but namespaced so it's safe inside any block. */
.kfy-sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}

/* Required-field legend at the top of the form. */
.kfy-contact__required-hint {
	margin: 0 0 var(--sp-3);
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.4;
}
.kfy-contact__required-hint span[aria-hidden="true"] {
	color: var(--color-red);
	font-weight: 700;
	margin-right: 4px;
}

/* Explicit visible focus on every interactive surface inside the contact
   block - WCAG 2.4.7 (Focus Visible) compliance, especially for keyboard
   users on the dark wrap-bg variant where the default browser ring blends
   into the background. */
.kfy-contact a:focus-visible,
.kfy-contact button:focus-visible {
	outline: 3px solid var(--color-gold);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}
.kfy-contact .kfy-hero__form input:focus-visible,
.kfy-contact .kfy-hero__form select:focus-visible,
.kfy-contact .kfy-hero__form textarea:focus-visible,
.kfy-contact__form textarea:focus-visible {
	outline: 3px solid var(--color-gold);
	outline-offset: 1px;
}

/* ---------- Result banners ---------- */
.kfy-contact__banner {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	padding: var(--sp-4);
	border-radius: var(--radius-md);
	margin-bottom: var(--sp-4);
	font-size: 15px;
	line-height: 1.45;
}
.kfy-contact__banner > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.kfy-contact__banner strong {
	font-family: var(--font-display);
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 14px;
}
.kfy-contact__banner svg {
	flex-shrink: 0;
	margin-top: 2px;
}
.kfy-contact__banner--success {
	background: rgba(110, 167, 89, 0.18);
	border: 1px solid rgba(110, 167, 89, 0.4);
	color: #2f5121;
}
.kfy-contact__banner--success strong { color: #2f5121; }
.kfy-contact__banner--success svg { color: #2f5121; }

.kfy-contact__banner--error {
	background: rgba(205, 54, 44, 0.12);
	border: 1px solid rgba(205, 54, 44, 0.4);
	color: #7a1c16;
}
.kfy-contact__banner--error strong { color: #7a1c16; }
.kfy-contact__banner--error svg { color: var(--color-red); }

/* =========================================================================
   Service Section block (kfy/service-section)
   Long-form, 2-column EEAT-aligned section with localized callout, tier
   cards, and a smooth-curve wave divider that color-flows into whatever
   section comes next via the `data-next-tone` attribute.
   ========================================================================= */
.kfy-service-section {
	position: relative;
	overflow: hidden;
	padding: clamp(var(--sp-10), 8vw, var(--sp-16)) 0 calc(clamp(var(--sp-10), 8vw, var(--sp-16)) + 80px);
}
.kfy-service-section__inner { position: relative; z-index: 1; }

/* Cream-tone variant gets the same wrap-background art as the services grid
   and hero, but ghosted under a heavy cream wash so the long-form copy
   stays calm and readable. Layered as a single background-image stack so
   the existing wave divider (z-index:0) and inner content (z-index:1)
   stacking is untouched. Two soft brand-tinted radial glows in opposite
   corners give the slab visual depth without leaning halftone/comic. */
.kfy-service-section--light {
	background-color: var(--bg-light);
	background-image:
		radial-gradient(ellipse at 12% 8%, rgba(198, 187, 60, 0.10), transparent 55%),
		radial-gradient(ellipse at 92% 100%, rgba(142, 68, 32, 0.10), transparent 55%),
		linear-gradient(180deg,
			rgba(248, 243, 224, 0.92) 0%,
			rgba(248, 243, 224, 0.86) 50%,
			rgba(248, 243, 224, 0.92) 100%),
		url("../img/wrap-background.png");
	background-size: auto, auto, auto, cover;
	background-position: top left, bottom right, center, center 40%;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

/* When two light service sections stack back-to-back, alternate which
   corner the glow sits in so the page doesn't read as a single uniform
   slab. Targets the image-left layout that follows an image-right one. */
.kfy-service-section--light.kfy-service-section--image-left {
	background-image:
		radial-gradient(ellipse at 88% 8%, rgba(198, 187, 60, 0.10), transparent 55%),
		radial-gradient(ellipse at 8% 100%, rgba(142, 68, 32, 0.10), transparent 55%),
		linear-gradient(180deg,
			rgba(248, 243, 224, 0.92) 0%,
			rgba(248, 243, 224, 0.86) 50%,
			rgba(248, 243, 224, 0.92) 100%),
		url("../img/wrap-background.png");
	background-position: top right, bottom left, center, center 60%;
}

.kfy-service-section__hd {
	max-width: 760px;
	margin: 0 auto var(--sp-8);
	text-align: center;
}

.kfy-service-section__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-6);
	align-items: center;
	margin-bottom: var(--sp-8);
}
@media (min-width: 880px) {
	.kfy-service-section__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: clamp(var(--sp-6), 4vw, var(--sp-10));
	}
	/* Image-on-left variant flips the column order with a grid-area pair. */
	.kfy-service-section--image-left .kfy-service-section__copy { order: 2; }
	.kfy-service-section--image-left .kfy-service-section__media { order: 1; }
}

.kfy-service-section__lead {
	font-size: clamp(17px, 1vw + 14px, 20px);
	line-height: 1.65;
	margin: 0 0 var(--sp-5);
}
.kfy-service-section__sub-h {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: clamp(18px, 1vw + 14px, 22px);
	margin: 0 0 var(--sp-3);
	color: var(--accent-primary);
}
.kfy-service-section--light .kfy-service-section__sub-h { color: var(--color-warm-brown); }

.kfy-service-section__sublist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-3);
}
.kfy-service-section__sublist-item {
	padding-left: var(--sp-5);
	position: relative;
	line-height: 1.6;
}
.kfy-service-section__sublist-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--accent-primary);
	box-shadow: 0 0 0 4px rgba(198, 187, 60, 0.18);
}
.kfy-service-section--light .kfy-service-section__sublist-item::before {
	background: var(--color-warm-brown);
	box-shadow: 0 0 0 4px rgba(142, 68, 32, 0.16);
}

/* Image / placeholder */
.kfy-service-section__media {
	margin: 0;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(0, 0, 0, 0.15);
	position: relative;
}
.kfy-service-section--light .kfy-service-section__media {
	border-color: rgba(73, 44, 25, 0.18);
	background: rgba(142, 68, 32, 0.06);
}
.kfy-service-section__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.kfy-service-section__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	background:
		repeating-linear-gradient(135deg,
			rgba(198, 187, 60, 0.08) 0 18px,
			rgba(198, 187, 60, 0.02) 18px 36px);
	color: var(--accent-primary);
	font-family: var(--font-display);
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: 13px;
}
.kfy-service-section--light .kfy-service-section__placeholder {
	background:
		repeating-linear-gradient(135deg,
			rgba(142, 68, 32, 0.08) 0 18px,
			rgba(142, 68, 32, 0.02) 18px 36px);
	color: var(--color-warm-brown);
}
.kfy-service-section__placeholder-icon { color: inherit; opacity: 0.85; }
.kfy-service-section__placeholder-label { color: inherit; }

/* Localized EEAT callout */
.kfy-service-section__local {
	background: rgba(198, 187, 60, 0.06);
	border-left: 4px solid var(--accent-primary);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	padding: var(--sp-5) var(--sp-6);
	margin: 0 0 var(--sp-8);
	box-shadow: var(--shadow-sm);
}
.kfy-service-section--light .kfy-service-section__local {
	background: rgba(142, 68, 32, 0.06);
	border-left-color: var(--color-warm-brown);
}
.kfy-service-section__local-h {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-3);
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: clamp(18px, 1vw + 14px, 22px);
	color: var(--accent-primary);
}
.kfy-service-section--light .kfy-service-section__local-h { color: var(--color-warm-brown); }
.kfy-service-section__local-icon { color: inherit; }
.kfy-service-section__local-body {
	margin: 0 0 var(--sp-4);
	line-height: 1.6;
}
.kfy-service-section__local-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-4);
}
.kfy-service-section__local-item {
	display: grid;
	gap: 4px;
	padding-left: var(--sp-5);
	position: relative;
	line-height: 1.55;
}
.kfy-service-section__local-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
	transform: rotate(45deg);
}
.kfy-service-section__local-item-t {
	font-family: var(--font-display);
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 14px;
	color: var(--accent-primary);
}
.kfy-service-section--light .kfy-service-section__local-item-t { color: var(--color-warm-brown); }
.kfy-service-section__local-item-b { display: block; }

/* Tier grid (Good / Better / Best) */
.kfy-service-section__options {
	margin: 0 0 var(--sp-8);
}
.kfy-service-section__options-h {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: clamp(20px, 1.2vw + 14px, 26px);
	margin: 0 0 var(--sp-5);
	text-align: center;
}
.kfy-tier-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-5);
}
@media (min-width: 700px) {
	.kfy-tier-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kfy-tier {
	position: relative;
	padding: var(--sp-6) var(--sp-5) var(--sp-5);
	background: rgba(248, 243, 224, 0.06);
	border: 1px solid rgba(198, 187, 60, 0.18);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	transition: transform var(--ease-default), box-shadow var(--ease-default);
}
.kfy-service-section--light .kfy-tier {
	background: rgba(255, 255, 255, 0.65);
	border-color: rgba(73, 44, 25, 0.12);
}
.kfy-tier:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}
.kfy-tier__accent {
	position: absolute;
	inset: 0 0 auto 0;
	height: 5px;
	background: var(--color-light-gray);
}
.kfy-tier--good   .kfy-tier__accent { background: linear-gradient(90deg, var(--color-light-gray), #e6e0c1); }
.kfy-tier--better .kfy-tier__accent { background: linear-gradient(90deg, var(--color-warm-brown), var(--color-burnt-orange)); }
.kfy-tier--best   .kfy-tier__accent { background: linear-gradient(90deg, var(--color-gold), #e6d645); }
.kfy-tier--best {
	box-shadow: var(--shadow-md), 0 0 0 1px rgba(198, 187, 60, 0.35) inset;
}
.kfy-tier__eyebrow {
	margin: 0;
	font-family: var(--font-display);
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--accent-primary);
}
.kfy-service-section--light .kfy-tier__eyebrow { color: var(--color-warm-brown); }
.kfy-tier--better .kfy-tier__eyebrow { color: var(--color-burnt-orange); }
.kfy-tier--best   .kfy-tier__eyebrow { color: var(--color-gold); }
.kfy-tier__label {
	margin: 0;
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: clamp(18px, 1vw + 14px, 22px);
	line-height: 1.15;
}
.kfy-tier__body {
	margin: 0;
	line-height: 1.6;
	font-size: clamp(15px, 0.4vw + 14px, 17px);
}

.kfy-service-section__trust {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	font-size: clamp(15px, 0.4vw + 14px, 17px);
	line-height: 1.65;
	opacity: 0.92;
}

.kfy-service-section__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
}
.kfy-service-section__cta .kfy-btn {
	min-width: min(100%, 220px);
	justify-content: center;
}
.kfy-service-section--light .kfy-service-section__cta-secondary {
	color: var(--color-warm-brown);
	border-color: var(--color-warm-brown);
}
.kfy-service-section--light .kfy-service-section__cta-secondary:hover {
	background: var(--color-warm-brown);
	color: var(--color-cream);
}

/* Smooth-curve wave divider. The `fill` is a CSS custom property so the
   wave naturally drops into whatever section comes next.
   --kfy-wave-fill is set per section based on data-next-tone below. */
.kfy-service-section__wave {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 80px;
	display: block;
	z-index: 0;
	fill: var(--kfy-wave-fill, var(--bg-primary));
	pointer-events: none;
}
.kfy-service-section[data-next-tone="brown"] {
	/* The next section uses --section--brown, which is itself a gradient.
	   We pick the dominant deep-brown hue for the wave so the transition
	   reads as one continuous flow into the next section. */
	--kfy-wave-fill: var(--color-deep-brown);
}
.kfy-service-section[data-next-tone="light"] { --kfy-wave-fill: var(--bg-light); }
.kfy-service-section[data-next-tone="dark"]  { --kfy-wave-fill: var(--bg-primary); }

/* =========================================================================
   About page - owner-led story split
   Used by the wizard-authored "Do It Right the First Time" section on the
   About page (themes/.../inc/kfy-setup-data.php $about_story).
   Layout:
     - Mobile: image card stacks above copy column; proof chips wrap.
     - >=860px: two-column split (media | copy) with proof chips in 2 cols.
   Media slot uses an existing brand image today; swap the URL only when
   Patrick's portrait is available - layout stays the same.
   ========================================================================= */
.kfy-about-story { position: relative; }

.kfy-about-story__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-6);
	align-items: start;
}

@media (min-width: 860px) {
	.kfy-about-story__split {
		grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.05fr);
		gap: clamp(var(--sp-6), 4vw, var(--sp-10));
		align-items: center;
	}
}

.kfy-about-story__media {
	margin: 0;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--color-cream);
	box-shadow: var(--shadow-lg);
	border: 1px solid rgba(142, 68, 32, 0.12);
	position: relative;
}

.kfy-about-story__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	object-position: center;
}

.kfy-about-story__media-caption {
	padding: var(--sp-3) var(--sp-4);
	background: rgba(41, 22, 16, 0.06);
	color: var(--color-warm-brown);
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-align: center;
}

.kfy-about-story__copy { min-width: 0; }

.kfy-about-story__eyebrow {
	display: inline-block;
	margin: 0 0 var(--sp-3);
	padding: 6px 12px;
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-warm-brown);
	background: rgba(186, 103, 51, 0.12);
	border: 1px solid rgba(186, 103, 51, 0.32);
	border-radius: var(--radius-full);
}

.kfy-about-story__title {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw + 0.5rem, 44px);
	line-height: 1.05;
	color: var(--color-deep-brown);
	text-transform: uppercase;
}

.kfy-about-story__lead {
	margin: 0 0 var(--sp-5);
	color: var(--text-on-light);
	font-size: clamp(15px, 0.4vw + 14px, 17px);
	line-height: 1.65;
}

.kfy-about-story__quote {
	margin: 0 0 var(--sp-5);
	padding: var(--sp-4) var(--sp-5);
	border-left: 4px solid var(--color-gold);
	background: rgba(198, 187, 60, 0.10);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.kfy-about-story__quote p {
	margin: 0 0 var(--sp-2);
	font-family: var(--font-accent);
	font-size: clamp(17px, 0.6vw + 14px, 20px);
	line-height: 1.45;
	color: var(--color-deep-brown);
	font-style: italic;
}
.kfy-about-story__quote footer {
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--color-warm-brown);
}

.kfy-about-story__proofs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-3);
}
@media (min-width: 560px) {
	.kfy-about-story__proofs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.kfy-about-story__proofs li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--sp-3) var(--sp-4);
	background: var(--color-cream);
	border: 1px solid rgba(142, 68, 32, 0.18);
	border-left: 3px solid var(--color-gold);
	border-radius: var(--radius-md);
	color: var(--text-on-light);
	font-size: 14px;
	line-height: 1.4;
}
.kfy-about-story__proofs li strong {
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--color-warm-brown);
}

/* Scannable proof modules beneath the split */
.kfy-about-story__detail {
	margin-top: clamp(var(--sp-8), 5vw, var(--sp-10));
	color: var(--text-on-light);
}

.kfy-about-story__detail-intro {
	max-width: 820px;
	margin-bottom: var(--sp-5);
}

.kfy-about-story__detail-intro h3 {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-display);
	color: var(--color-deep-brown);
	text-transform: uppercase;
	font-size: clamp(24px, 2vw + 14px, 36px);
	line-height: 1.08;
}

.kfy-about-story__detail-intro p {
	margin: 0;
	font-size: clamp(15px, 0.4vw + 14px, 17px);
	line-height: 1.65;
}

.kfy-about-story__detail-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-4);
}

@media (min-width: 760px) {
	.kfy-about-story__detail-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: stretch;
	}
}

.kfy-about-proof-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: clamp(var(--sp-4), 2.5vw, var(--sp-6));
	border-radius: var(--radius-xl);
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(248, 241, 229, 0.96)),
		var(--color-cream);
	border: 1px solid rgba(142, 68, 32, 0.16);
	box-shadow: var(--shadow-md);
	overflow: hidden;
}

.kfy-about-proof-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 5px;
	background: var(--color-gold);
}

.kfy-about-proof-card--experience::before { background: var(--color-burnt-orange); }
.kfy-about-proof-card--respect::before { background: var(--color-gold); }
.kfy-about-proof-card--trust::before { background: var(--color-warm-brown); }

.kfy-about-proof-card__kicker {
	display: inline-flex;
	width: fit-content;
	padding: 5px 10px;
	border-radius: var(--radius-full);
	background: rgba(142, 68, 32, 0.10);
	color: var(--color-warm-brown);
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
}

.kfy-about-proof-card h4 {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(19px, 1vw + 14px, 24px);
	line-height: 1.1;
	color: var(--color-deep-brown);
	text-transform: uppercase;
}

.kfy-about-proof-card p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-on-light);
}

.kfy-about-proof-list {
	display: grid;
	gap: var(--sp-2);
	margin: auto 0 0;
	padding: 0;
	list-style: none;
}

.kfy-about-proof-list li {
	position: relative;
	padding-left: 22px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--text-on-light);
}

.kfy-about-proof-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.48em;
	width: 9px;
	height: 9px;
	border-radius: var(--radius-full);
	background: var(--color-gold);
	box-shadow: 0 0 0 3px rgba(198, 187, 60, 0.16);
}

.kfy-about-proof-list--badges {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-2);
}

.kfy-about-proof-list--badges li {
	padding: 8px 10px;
	border-radius: var(--radius-md);
	background: rgba(41, 22, 16, 0.06);
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-deep-brown);
}

.kfy-about-proof-list--badges li::before { display: none; }

.kfy-about-story__mini-cta {
	margin: var(--sp-5) 0 0;
	padding: var(--sp-4) var(--sp-5);
	border-radius: var(--radius-lg);
	background: rgba(142, 68, 32, 0.10);
	color: var(--color-deep-brown);
	font-family: var(--font-display);
	font-size: clamp(16px, 0.5vw + 14px, 19px);
	text-transform: uppercase;
	letter-spacing: 0.8px;
}

.kfy-about-story__mini-cta a {
	color: var(--color-warm-brown);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

@media (max-width: 520px) {
	.kfy-about-proof-list--badges {
		grid-template-columns: minmax(0, 1fr);
	}

	.kfy-about-story__mini-cta {
		padding: var(--sp-4);
	}
}

/* ---------- Leaf Page Decision Sections ---------- */
.kfy-leaf-section {
	position: relative;
}

.kfy-leaf-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: var(--sp-5);
}

.kfy-leaf-card {
	display: flex;
	flex-direction: column;
	flex: 0 1 100%;
	gap: var(--sp-3);
	min-height: 100%;
	padding: var(--sp-5);
	border: 1px solid rgba(142, 68, 32, 0.18);
	border-radius: var(--radius-xl);
	background: rgba(255, 255, 255, 0.58);
	box-shadow: var(--shadow-sm);
}

@media (min-width: 700px) {
	.kfy-leaf-card {
		flex-basis: calc((100% - var(--sp-5)) / 2);
	}
}

@media (min-width: 980px) {
	.kfy-leaf-card {
		flex-basis: calc((100% - var(--sp-5) - var(--sp-5)) / 3);
	}

	.kfy-leaf-grid:has(.kfy-leaf-card:nth-child(4):last-child) .kfy-leaf-card {
		flex-basis: calc((100% - var(--sp-5)) / 2);
	}
}

.kfy-leaf-card h3 {
	margin: 0;
	font-size: clamp(20px, 1.2vw + 16px, 28px);
	color: var(--color-deep-brown);
}

.kfy-leaf-card p {
	margin: 0;
	color: var(--text-muted);
}

.kfy-leaf-card__link {
	margin-top: auto;
	font-family: var(--font-display);
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-warm-brown);
}

.kfy-inline-link {
	color: var(--color-warm-brown);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.kfy-inline-link:hover {
	color: var(--color-burnt-orange);
}

.kfy-leaf-quick-cta {
	text-align: center;
}

.kfy-leaf-quick-cta .kfy-container {
	max-width: 820px;
}

.kfy-leaf-quick-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
}

.kfy-leaf-quick-cta h2 {
	margin-bottom: var(--sp-4);
}

.kfy-leaf-quick-cta p {
	color: rgba(248, 243, 224, 0.86);
	font-size: clamp(18px, 0.8vw + 16px, 22px);
}

.kfy-area-pill a.kfy-area-pill__name {
	color: inherit;
	text-decoration: none;
}

.kfy-area-pill a.kfy-area-pill__name:hover {
	color: var(--color-warm-brown);
}

/* =========================================================================
   Form validation states (kfy-input--invalid, kfy-field-error)
   ========================================================================= */

.kfy-input--invalid,
input.kfy-input--invalid,
select.kfy-input--invalid,
textarea.kfy-input--invalid {
	border-color: #d63638 !important;
	box-shadow: 0 0 0 1px #d63638;
	background-color: #fff5f5;
}

.kfy-input--invalid:focus,
input.kfy-input--invalid:focus,
select.kfy-input--invalid:focus,
textarea.kfy-input--invalid:focus {
	outline-color: #d63638;
	box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.18);
}

.kfy-field-error {
	display: block;
	margin-top: 6px;
	color: #b32228;
	font-size: 0.85rem;
	line-height: 1.35;
	font-weight: 600;
}

.kfy-field-error::before {
	content: "\26A0\FE0F";
	margin-right: 6px;
}