/*
Theme Name: Kerry's Insurance
Theme URI: https://www.kerrysinsurance.com/
Author: Kerry's Insurance
Description: A bold, graphic block theme for Kerry's Insurance of Palmdale, CA. Deep brand green with Antelope Valley poppy orange, heavy display type, and an animated high-desert hero.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kerrys
Tags: full-site-editing, block-patterns, one-column, wide-blocks, custom-colors, custom-logo
*/

/* ==========================================================================
   0. Tokens
   ========================================================================== */

:root {
	--k-shell: min(1240px, 100% - 2.5rem);
	--k-ease: cubic-bezier(0.16, 0.84, 0.28, 1);
	--k-header-h: 96px; /* overwritten at runtime by motion.js ResizeObserver */
	--k-rule: 1px solid var(--wp--preset--color--line, #C9D3C5);
}

/* Fallbacks. If a font-size preset ever fails to resolve, the theme.json rule
   drops out and these apply. Bare element selectors sit below theme.json's
   `:root :where(h1)` specificity, so they can never override a working preset. */
h1 { font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem); }
h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
h3 { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); }
h4 { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); }

/* ==========================================================================
   1. Structural fixes (see: block theme playbook)
   ========================================================================== */

/* Root blockGap otherwise leaves a white seam under the header and above the
   footer. Zero it at the root only, so gaps inside sections still work. */
.wp-site-blocks > * + * { margin-block-start: 0; }
main.wp-block-group > .alignfull + .alignfull { margin-block-start: 0; }

/* Grid and flex children default to a min-content floor and cause a few pixels
   of horizontal overflow at one breakpoint. */
.k-grid > *,
.k-cards > *,
.k-foot__cols > * { min-width: 0; overflow-wrap: anywhere; }

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

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.k-shell { width: var(--k-shell); margin-inline: auto; }

/* Accessibility: a visible, unmissable focus ring on the poppy accent. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--poppy, #FF6B1A);
	outline-offset: 3px;
	border-radius: 2px;
}

.k-skip {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--wp--preset--color--ink); color: #fff;
	padding: 0.75rem 1.25rem; font-weight: 600;
}
.k-skip:focus { left: 0; }

/* ==========================================================================
   2. Type utilities
   ========================================================================== */

.k-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--brand-action);
}
.k-eyebrow::before {
	content: "";
	width: 28px; height: 2px;
	background: var(--wp--preset--color--poppy);
	flex: none;
}
.k-eyebrow--light { color: rgba(255,255,255,0.72); }

.k-display {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	line-height: 0.94;
	letter-spacing: -0.03em;
	font-size: clamp(2.75rem, 1.4rem + 6vw, 7rem);
	margin: 0;
	text-wrap: balance;
}

.k-lede {
	font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
	line-height: 1.55;
	max-width: 54ch;
	color: color-mix(in srgb, var(--wp--preset--color--ink) 78%, transparent);
}
.k-lede--light { color: rgba(255,255,255,0.8); }

.k-mark { color: var(--wp--preset--color--poppy); }

/* ==========================================================================
   3. Header
   ========================================================================== */

.k-topbar {
	background: var(--wp--preset--color--ink);
	color: rgba(255,255,255,0.86);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
}
.k-topbar__inner {
	width: var(--k-shell); margin-inline: auto;
	display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
	align-items: center; justify-content: space-between;
	min-height: 40px; padding-block: 0.5rem;
}
.k-topbar a { color: #fff; text-decoration: none; }
.k-topbar a:hover { color: var(--wp--preset--color--poppy); }
.k-topbar__phone { font-weight: 700; letter-spacing: 0.04em; font-size: 0.95rem; }
.k-topbar__phone a { display: inline-flex; align-items: baseline; gap: 0.5rem; }
.k-topbar__phone .k-topbar__num { font-size: 1.15rem; letter-spacing: 0.02em; }
@media (max-width: 560px) { .k-topbar__phone .k-topbar__num { font-size: 1rem; } }
.k-topbar__dot {
	display: inline-block; width: 7px; height: 7px; border-radius: 50%;
	background: var(--wp--preset--color--brand-bright);
	margin-right: 0.5rem; vertical-align: middle;
}
@media (prefers-reduced-motion: no-preference) {
	.k-topbar__dot { animation: k-pulse 2.4s ease-in-out infinite; }
}
@keyframes k-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(63,191,110,0.6); }
	60% { box-shadow: 0 0 0 7px rgba(63,191,110,0); }
}

.k-header {
	position: sticky; top: 0; z-index: 90;
	background: rgba(251,250,247,0.86);
	backdrop-filter: saturate(1.4) blur(14px);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: var(--k-rule);
	transition: box-shadow 0.3s var(--k-ease);
}
.k-header.is-stuck { box-shadow: 0 10px 34px -22px rgba(10,20,16,0.5); }
.k-header__inner {
	width: var(--k-shell); margin-inline: auto;
	display: flex; align-items: center; justify-content: space-between;
	gap: 1.5rem; min-height: 92px;
}

/* Logo. The real lockup is a vector file rather than reconstructed type, so
   the letterforms are exactly the brand's own. Alt text carries the name for
   search engines, which is what live text would have bought us. */
.k-logo { display: inline-flex; align-items: center; text-decoration: none; }
.k-logo img { display: block; width: auto; height: 52px; }
.k-logo--lg img { height: 68px; }
.k-logo__icon img { height: 52px; width: 52px; }
@media (max-width: 900px) { .k-logo img { height: 42px; } }
@media (max-width: 600px) { .k-logo img { height: 36px; } .k-logo--lg img { height: 48px; } }

.k-header .wp-block-navigation { font-size: 0.95rem; font-weight: 500; }
.k-header .wp-block-navigation a { text-decoration: none; color: var(--wp--preset--color--ink); }
.k-header .wp-block-navigation .wp-block-navigation-item { position: relative; }
.k-header .wp-block-navigation .wp-block-navigation-item > a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
	height: 2px; background: var(--wp--preset--color--poppy);
	transform: scaleX(0); transform-origin: left;
	transition: transform 0.3s var(--k-ease);
}
.k-header .wp-block-navigation .wp-block-navigation-item:hover > a::after,
.k-header .wp-block-navigation .current-menu-item > a::after { transform: scaleX(1); }

.k-header__cta { display: inline-flex; align-items: center; gap: 1.4rem; }

/* Standing phone number in the header. The single most-used control on an
   insurance site, so it is sized like a headline rather than a nav link. */
.k-header__phone {
	display: inline-flex; align-items: center; gap: 0.6rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800; font-size: 1.7rem; letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink); text-decoration: none;
	line-height: 1; white-space: nowrap;
	transition: color 0.25s var(--k-ease);
}
.k-header__phone svg { color: var(--wp--preset--color--brand-action); flex: none; transition: color 0.25s var(--k-ease); }
.k-header__phone:hover, .k-header__phone:hover svg { color: var(--wp--preset--color--poppy); }
@media (max-width: 1180px) { .k-header__phone { font-size: 1.4rem; } }
@media (max-width: 1024px) { .k-header__phone { display: none; } }
@media (max-width: 860px) { .k-header__cta .k-btn { display: none; } }

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.k-btn {
	display: inline-flex; align-items: center; gap: 0.6rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em;
	padding: 0.95rem 1.6rem;
	border: 2px solid transparent; border-radius: 2px;
	text-decoration: none; cursor: pointer;
	transition: background-color 0.25s var(--k-ease), color 0.25s var(--k-ease),
	            transform 0.25s var(--k-ease), border-color 0.25s var(--k-ease);
}
.k-btn svg { transition: transform 0.3s var(--k-ease); }
.k-btn:hover svg { transform: translateX(4px); }

.k-btn--primary { background: var(--wp--preset--color--brand-action); color: #fff; }
.k-btn--primary:hover { background: var(--wp--preset--color--poppy); color: var(--wp--preset--color--ink); }

.k-btn--poppy { background: var(--wp--preset--color--poppy); color: var(--wp--preset--color--ink); }
.k-btn--poppy:hover { background: #fff; }

.k-btn--ghost { border-color: currentColor; color: inherit; background: transparent; }
.k-btn--ghost:hover { background: currentColor; }
.k-btn--ghost.k-btn--on-dark:hover { color: var(--wp--preset--color--ink); }

/* ==========================================================================
   5. Hero
   ========================================================================== */

.k-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--wp--preset--color--brand-deep);
	color: #fff;
	display: flex;
	/* flex-start rather than center: a tall card under a short viewport would
	   otherwise overflow upward, unreachably, beneath the sticky header. */
	align-items: flex-start;
	min-height: clamp(560px, 82vh, 860px);
	padding-block: clamp(4rem, 10vh, 8rem);
}
.k-hero__inner {
	width: var(--k-shell); margin-inline: auto;
	position: relative; z-index: 3;
	margin-block: auto; /* centres when there is room, flex-start when not */
}

/* Core clamps every unaligned direct child of a constrained group to
   contentSize and centres it — position:absolute gets no exemption, which
   renders the media layer at ~50% width. Three classes outrank core's two. */
.k-hero.wp-block-group .k-hero__media,
.k-hero .k-hero__media {
	position: absolute; inset: 0; z-index: 0;
	max-width: none; margin-inline: 0;
	pointer-events: none;
}
.k-hero__media video,
.k-hero__media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.k-hero__scrim {
	position: absolute; inset: 0; z-index: 2; max-width: none; margin-inline: 0;
	background: linear-gradient(180deg, rgba(6,61,33,0.30) 0%, rgba(6,61,33,0.70) 52%, rgba(10,20,16,0.94) 100%);
	pointer-events: none;
}

/* --- Animated high-desert horizon (no video file required) --- */
.k-ridge { position: absolute; inset: 0; z-index: 1; max-width: none; margin-inline: 0; overflow: hidden; }
.k-ridge svg { position: absolute; bottom: 0; left: 0; width: 200%; height: auto; display: block; }
.k-ridge__far  { opacity: 0.30; }
.k-ridge__mid  { opacity: 0.45; }
.k-ridge__near { opacity: 0.85; }

@media (prefers-reduced-motion: no-preference) {
	.k-ridge__far  { animation: k-drift 78s linear infinite; }
	.k-ridge__mid  { animation: k-drift 52s linear infinite; }
	.k-ridge__near { animation: k-drift 34s linear infinite; }
}
@keyframes k-drift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Slow light sweep across the field */
.k-sweep {
	position: absolute; inset: -20% -50%; z-index: 1; max-width: none; margin-inline: 0;
	background: radial-gradient(ellipse at 50% 50%, rgba(63,191,110,0.28), transparent 62%);
	pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
	.k-sweep { animation: k-sweep 22s ease-in-out infinite alternate; }
}
@keyframes k-sweep {
	from { transform: translate3d(-14%, 6%, 0) scale(1); }
	to   { transform: translate3d(14%, -6%, 0) scale(1.18); }
}

/* Poppy field: the Antelope Valley bloom, as sparse drifting motes */
.k-poppies { position: absolute; inset: 0; z-index: 1; max-width: none; margin-inline: 0; }
.k-poppies i {
	position: absolute; bottom: -10px;
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--wp--preset--color--poppy);
	opacity: 0; filter: blur(0.4px);
}
@media (prefers-reduced-motion: no-preference) {
	.k-poppies i { animation: k-float linear infinite; }
}
@keyframes k-float {
	0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); }
	12%  { opacity: 0.85; }
	80%  { opacity: 0.5; }
	100% { opacity: 0; transform: translate3d(28px, -46vh, 0) scale(1.1); }
}

/* Fine grain, keeps the flat gradients from banding */
.k-grain {
	position: absolute; inset: 0; z-index: 2; max-width: none; margin-inline: 0;
	opacity: 0.16; mix-blend-mode: overlay; pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hero type */
.k-hero__title { max-width: 16ch; }
.k-hero__title .k-line { display: block; overflow: hidden; }
.k-hero__title .k-line > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
	.k-hero__title .k-line > span {
		transform: translateY(105%);
		animation: k-rise 0.9s var(--k-ease) forwards;
	}
	.k-hero__title .k-line:nth-child(1) > span { animation-delay: 0.10s; }
	.k-hero__title .k-line:nth-child(2) > span { animation-delay: 0.22s; }
	.k-hero__title .k-line:nth-child(3) > span { animation-delay: 0.34s; }
}
@keyframes k-rise { to { transform: translateY(0); } }

.k-hero__lede { margin-top: 1.75rem; }
.k-hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.5rem; }

@media (prefers-reduced-motion: no-preference) {
	.k-hero__lede, .k-hero__actions, .k-hero .k-eyebrow {
		opacity: 0; animation: k-fade 0.8s var(--k-ease) forwards;
	}
	.k-hero .k-eyebrow { animation-delay: 0.05s; }
	.k-hero__lede { animation-delay: 0.5s; }
	.k-hero__actions { animation-delay: 0.62s; }
}
@keyframes k-fade { to { opacity: 1; transform: none; } }

/* Trust strip pinned to the bottom of the hero */
.k-hero__strip {
	position: relative; z-index: 3;
	width: var(--k-shell); margin: 3.5rem auto 0;
	border-top: 1px solid rgba(255,255,255,0.18);
	padding-top: 1.25rem;
	display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: rgba(255,255,255,0.62);
}

/* ==========================================================================
   6. Sections
   ========================================================================== */

.k-section { padding-block: clamp(4rem, 9vw, 8rem); }
.k-section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.k-section--mist { background: var(--wp--preset--color--mist); }
.k-section--ink { background: var(--wp--preset--color--ink); color: #fff; }
.k-section--ink h2, .k-section--ink h3 { color: #fff; }

.k-section__head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.k-section__head h2 { margin: 0; text-wrap: balance; }
.k-section__head .k-lede { margin-top: 1.25rem; }

/* ==========================================================================
   7. Product cards
   ========================================================================== */

.k-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.k-card {
	position: relative; overflow: hidden; isolation: isolate;
	background: #fff;
	border: var(--k-rule);
	border-radius: 2px;
	padding: 2.25rem 2rem 2rem;
	display: flex; flex-direction: column;
	min-height: 340px;
	text-decoration: none; color: inherit;
	transition: transform 0.45s var(--k-ease), box-shadow 0.45s var(--k-ease), border-color 0.45s var(--k-ease);
}
.k-card::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(150deg, var(--wp--preset--color--brand-deep), var(--wp--preset--color--brand));
	opacity: 0; transition: opacity 0.45s var(--k-ease);
}
.k-card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 28px 60px -32px rgba(6,61,33,0.65); }
.k-card:hover::before { opacity: 1; }
.k-card:hover, .k-card:hover h3, .k-card:hover p { color: #fff; }
.k-card:hover .k-card__num { color: rgba(255,255,255,0.28); }
.k-card:hover .k-card__go { background: var(--wp--preset--color--poppy); color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--poppy); }
.k-card:hover .k-card__icon { color: var(--wp--preset--color--poppy); }

.k-card__icon { width: 48px; height: 48px; color: var(--wp--preset--color--brand-action); transition: color 0.45s var(--k-ease); }
.k-card__icon svg { width: 100%; height: 100%; display: block; }
.k-card h3 { margin: 1.5rem 0 0.75rem; transition: color 0.45s var(--k-ease); }
.k-card p { margin: 0; font-size: 0.98rem; line-height: 1.6; transition: color 0.45s var(--k-ease);
            color: color-mix(in srgb, var(--wp--preset--color--ink) 72%, transparent); }
.k-card__foot { margin-top: auto; padding-top: 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.k-card__go {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border: 2px solid var(--wp--preset--color--line);
	border-radius: 50%; flex: none;
	transition: background-color 0.35s var(--k-ease), border-color 0.35s var(--k-ease), color 0.35s var(--k-ease);
}
.k-card__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
}

/* ==========================================================================
   8. Split feature
   ========================================================================== */

.k-split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
           grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.k-split__media { position: relative; border-radius: 2px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--wp--preset--color--brand-deep); }
.k-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-split__badge {
	position: absolute; left: 0; bottom: 0;
	background: var(--wp--preset--color--poppy); color: var(--wp--preset--color--ink);
	padding: 1.25rem 1.5rem; max-width: 62%;
}
.k-split__badge strong { display: block; font-family: var(--wp--preset--font-family--display); font-size: 2rem; line-height: 1; }
.k-split__badge span { font-family: var(--wp--preset--font-family--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; }

.k-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.k-list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.k-list li::before {
	content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
	background: var(--wp--preset--color--brand-action);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E") center / 78% no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E") center / 78% no-repeat;
}

/* ==========================================================================
   9. Stat band
   ========================================================================== */

.k-stats { display: grid; gap: 1px; background: rgba(255,255,255,0.14);
           grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.k-stat { background: var(--wp--preset--color--ink); padding: 2.25rem 1.75rem; }
.k-stat__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	font-weight: 800; line-height: 1; letter-spacing: -0.03em;
	color: var(--wp--preset--color--brand-bright);
	display: block;
}
.k-stat__num sup { font-size: 0.42em; vertical-align: super; color: var(--wp--preset--color--poppy); }
.k-stat__label {
	display: block; margin-top: 0.75rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: rgba(255,255,255,0.6); line-height: 1.5;
}

/* ==========================================================================
   10. Service tiles (claims / pay / changes)
   ========================================================================== */

.k-tiles { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.k-tile {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
	padding: 2rem; min-height: 200px;
	background: #fff; border: var(--k-rule); border-radius: 2px;
	text-decoration: none; color: inherit;
	transition: background-color 0.35s var(--k-ease), color 0.35s var(--k-ease), transform 0.35s var(--k-ease);
}
.k-tile::after {
	content: ""; position: absolute; right: -30%; top: -30%;
	width: 70%; aspect-ratio: 1; border-radius: 50%;
	background: var(--wp--preset--color--mist);
	transition: transform 0.55s var(--k-ease), background-color 0.35s var(--k-ease);
}
.k-tile:hover { background: var(--wp--preset--color--brand-action); color: #fff; transform: translateY(-4px); }
.k-tile:hover::after { transform: scale(2.6); background: rgba(255,255,255,0.08); }
.k-tile > * { position: relative; z-index: 1; }
.k-tile h3 { margin: 0; font-size: 1.5rem; }
.k-tile__meta { font-family: var(--wp--preset--font-family--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }

/* ==========================================================================
   11. Quote CTA
   ========================================================================== */

.k-cta {
	position: relative; overflow: hidden; isolation: isolate;
	background: linear-gradient(140deg, var(--wp--preset--color--brand-deep) 0%, var(--wp--preset--color--brand) 100%);
	color: #fff;
	padding-block: clamp(4rem, 8vw, 7rem);
}
.k-cta__inner { width: var(--k-shell); margin-inline: auto; position: relative; z-index: 2;
                display: grid; gap: 2.5rem; align-items: center;
                grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.k-cta h2 { margin: 0; }
.k-cta__phone {
	display: inline-flex; align-items: baseline; gap: 0.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.6rem, 1.4rem + 4.2vw, 4.75rem);
	font-weight: 800; letter-spacing: -0.03em;
	color: #fff; text-decoration: none;
}
.k-cta__phone:hover { color: var(--wp--preset--color--poppy); }
.k-cta__hours { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-top: 0.75rem; }

/* Oversized watermark shield */
.k-cta__watermark {
	position: absolute; right: -4%; top: 50%; translate: 0 -50%;
	width: min(460px, 42vw); z-index: 1; opacity: 0.07; color: #fff; pointer-events: none;
}
.k-cta__watermark svg { width: 100%; height: auto; display: block; }

/* ==========================================================================
   12. Footer
   ========================================================================== */

.k-footer { background: var(--wp--preset--color--ink); color: rgba(255,255,255,0.7); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; }
.k-footer a { color: rgba(255,255,255,0.7); text-decoration: none; }
.k-footer a:hover { color: var(--wp--preset--color--poppy); }
.k-foot__cols { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.k-foot__title {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--wp--preset--color--brand-bright);
	margin: 0 0 1.25rem;
}
.k-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; font-size: 0.95rem; }
.k-foot__phone a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em;
	color: #fff; line-height: 1.1; display: inline-block; margin-block: 0.25rem;
}
.k-foot__phone a:hover { color: var(--wp--preset--color--poppy); }
.k-foot__bottom {
	margin-top: 3.5rem; padding-top: 1.75rem;
	border-top: 1px solid rgba(255,255,255,0.12);
	display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
	color: rgba(255,255,255,0.45);
}

/* ==========================================================================
   13. Scroll reveal
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.k-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--k-ease), transform 0.7s var(--k-ease); }
	.k-reveal.is-in { opacity: 1; transform: none; }
	.k-reveal--d1 { transition-delay: 0.08s; }
	.k-reveal--d2 { transition-delay: 0.16s; }
	.k-reveal--d3 { transition-delay: 0.24s; }
}
/* No-JS and reduced-motion users must still see everything. */
.no-js .k-reveal { opacity: 1; transform: none; }

/* ==========================================================================
   14. Editor + misc
   ========================================================================== */

.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--brand-deep); color: #fff; }
.wp-block-navigation__responsive-container.is-menu-open a { color: #fff; }

figure { margin: 0; }
img { max-width: 100%; height: auto; }