/* ==========================================================================
   Kristina Elphinstone: home v3.2 sparkle layer (loads after home-v31.css)
   Inspired by the feeling of gabykowalski.org (gold dust over black, flowing gold silk,
   glinting emblems, champagne foil), rebuilt in our own obsidian / white / hot-foil language:
   1. gold-dust river + four-point glints on canvas in the dark bands (assets/js/sparkle.js)
   2. foil shimmer sweeps across gold headline accents and foil buttons
   3. glints on the seal and the door medallions
   4. fine-line gold silk-ribbon dividers (assets/img/silk-ribbon*.svg, generated, ours)
   5. v3.2 hero portrait zoom-out and Literata / Archivo type tuning
   Everything animated stops under prefers-reduced-motion.
   ========================================================================== */

:root {
	--kv-shine: linear-gradient(100deg, rgba(255, 252, 238, 0) 0%, rgba(255, 252, 238, 0) 44%, rgba(255, 252, 238, .95) 50%, rgba(255, 252, 238, 0) 56%, rgba(255, 252, 238, 0) 100%);
	--kv-shine-deep: linear-gradient(100deg, rgba(255, 244, 210, 0) 0%, rgba(255, 244, 210, 0) 45%, rgba(255, 246, 216, .9) 50%, rgba(255, 244, 210, 0) 55%, rgba(255, 244, 210, 0) 100%);
	--kv-glint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='%23FFF6D6' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23F3DC98' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='11' fill='url(%23h)'/%3E%3Cpath d='M20 0Q20.9 19.1 40 20 20.9 20.9 20 40 19.1 20.9 0 20 19.1 19.1 20 0Z' fill='%23FFFBEA'/%3E%3Ccircle cx='20' cy='20' r='1.6' fill='%23fff'/%3E%3C/svg%3E");
}

/* ---------- 1. Gold-dust canvas ---------- */
.kv-sparkle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.kv-hero .kv-sparkle {
	z-index: 2;
	/* keep the dust light over the headline and off the face; let it pool low and right */
	-webkit-mask-image: radial-gradient(30% 34% at 79% 36%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.18) 55%, #000 100%), linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.55) 38%, #000 56%);
	-webkit-mask-composite: source-in;
	mask-image: radial-gradient(30% 34% at 79% 36%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.18) 55%, #000 100%), linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.55) 38%, #000 56%);
	mask-composite: intersect;
}
.kv-hero__grid { z-index: 3; }
.kv-hero__caption { z-index: 4; }
.kv-proof .kv-sparkle, .kv-final .kv-sparkle { z-index: 0; opacity: .85; }
.kv-proof > .kv-wrap, .kv-final > .kv-wrap { position: relative; z-index: 2; }
.kv-final__mark, .kv-final__arc { z-index: 1; }
/* a faint gold haze along the dust river in the hero */
.kv-hero::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: radial-gradient(38% 22% at 30% 84%, rgba(214, 178, 96, .10) 0%, rgba(214, 178, 96, 0) 100%), radial-gradient(30% 18% at 66% 62%, rgba(214, 178, 96, .07) 0%, rgba(214, 178, 96, 0) 100%);
}

/* ---------- 2. Foil shimmer sweeps ---------- */
.kv-foil,
.kv-hero__title em, .kv-authority__quote em, .kv-final__title em {
	background-image: var(--kv-shine), var(--kv-grain), var(--kv-brush), var(--kv-foil-bright);
	background-size: 260% 100%, 180px 180px, auto, 100% 100%;
	background-repeat: no-repeat, repeat, repeat, no-repeat;
	background-position: 100% 0, 0 0, 0 0, 0 0;
	background-blend-mode: normal, overlay, soft-light, normal;
	animation: kv-sheen 8s cubic-bezier(.45, 0, .2, 1) 1.2s infinite;
}
.kv-foil--deep,
.kv-doors .kv-h2 em, .kv-book .kv-h2 em, .kv-optins .kv-h2 em, .kv-door__num {
	background-image: var(--kv-shine-deep), var(--kv-grain), var(--kv-brush), var(--kv-foil-deep);
	background-size: 260% 100%, 180px 180px, auto, 100% 100%;
	background-repeat: no-repeat, repeat, repeat, no-repeat;
	background-position: 100% 0, 0 0, 0 0, 0 0;
	background-blend-mode: normal, overlay, soft-light, normal;
	animation: kv-sheen 9s cubic-bezier(.45, 0, .2, 1) 2.4s infinite;
}
.kv-door:nth-child(2) .kv-door__num { animation-delay: 3s; }
.kv-door:nth-child(3) .kv-door__num { animation-delay: 3.6s; }
@keyframes kv-sheen {
	0% { background-position: 100% 0, 0 0, 0 0, 0 0; }
	26%, 100% { background-position: 0% 0, 0 0, 0 0, 0 0; }
}

/* foil buttons: a light sweep every few seconds, and on hover */
.kv-btn--foil { overflow: hidden; isolation: isolate; }
.kv-btn--foil::after {
	content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: 0; width: 46%; pointer-events: none;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 253, 240, .75) 50%, rgba(255, 255, 255, 0) 100%);
	transform: translateX(-130%) skewX(-18deg);
	animation: kv-btn-sweep 6.5s cubic-bezier(.5, 0, .2, 1) 2s infinite;
	mix-blend-mode: soft-light;
}
.kv-btn--foil:hover::after { animation-duration: 1.6s; animation-delay: 0s; }
@keyframes kv-btn-sweep {
	0% { transform: translateX(-130%) skewX(-18deg); }
	24%, 100% { transform: translateX(330%) skewX(-18deg); }
}

/* ---------- 3. Glints: the seal and the door medallions ---------- */
.kv-hero__seal::before, .kv-hero__seal::after {
	content: ""; position: absolute; z-index: 2; pointer-events: none; background: var(--kv-glint) center / contain no-repeat;
	opacity: 0; transform: scale(.3) rotate(0deg);
	animation: kv-glint 5.2s ease-in-out infinite;
}
.kv-hero__seal::before { top: 6%; right: 4%; width: 34px; height: 34px; }
.kv-hero__seal::after { bottom: 14%; left: -2%; width: 22px; height: 22px; animation-delay: 2.6s; }
.kv-seal { filter: drop-shadow(0 0 14px rgba(214, 178, 96, .26)) drop-shadow(0 0 2px rgba(255, 236, 180, .3)); }
@keyframes kv-glint {
	0%, 62%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
	72% { opacity: 1; transform: scale(1) rotate(45deg); }
	84% { opacity: 0; transform: scale(.4) rotate(90deg); }
}
.kv-door__medal::after {
	content: ""; position: absolute; top: -9px; right: -7px; width: 22px; height: 22px; pointer-events: none;
	background: var(--kv-glint) center / contain no-repeat; filter: sepia(.6) saturate(1.6) brightness(.95) drop-shadow(0 0 2px rgba(180, 136, 54, .5));
	opacity: 0; animation: kv-glint 6s ease-in-out infinite;
}
.kv-door:nth-child(2) .kv-door__medal::after { animation-delay: 2s; }
.kv-door:nth-child(3) .kv-door__medal::after { animation-delay: 4s; }
.kv-door:hover .kv-door__medal::after { animation-duration: 1.4s; animation-delay: 0s; }

/* ---------- 4. Gold silk-ribbon dividers ---------- */
.kv-doors { padding-bottom: calc(var(--kv-band) + clamp(70px, 9vw, 140px)); overflow: hidden; }
.kv-doors::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: clamp(4px, 1.2vw, 20px); height: clamp(90px, 11vw, 170px); pointer-events: none;
	background: url("../img/silk-ribbon-deep.svg") center / 100% 100% no-repeat; opacity: .95;
}
.kv-final::after {
	content: ""; position: absolute; z-index: 1; left: -4%; right: -4%; bottom: calc(var(--kv-term-b) - clamp(20px, 2.4vw, 36px)); height: clamp(70px, 8vw, 130px); pointer-events: none;
	background: url("../img/silk-ribbon.svg") center / 100% 100% no-repeat; opacity: .55; transform: scaleX(-1);
	-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 60%); mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 60%);
}

/* ---------- 5a. Hero portrait: zoomed out (head smaller, headroom, more shoulders) ---------- */
@media (min-width: 901px) {
	.kv-hero__img img {
		height: 78%; right: 1%;
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 12%, rgba(0,0,0,.75) 26%, #000 40%), linear-gradient(0deg, transparent 0%, rgba(0,0,0,.4) 9%, rgba(0,0,0,.88) 24%, #000 36%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 7%, rgba(0,0,0,.8) 15%, #000 22%), linear-gradient(270deg, transparent 0%, rgba(0,0,0,.6) 6%, #000 14%);
		mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 12%, rgba(0,0,0,.75) 26%, #000 40%), linear-gradient(0deg, transparent 0%, rgba(0,0,0,.4) 9%, rgba(0,0,0,.88) 24%, #000 36%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 7%, rgba(0,0,0,.8) 15%, #000 22%), linear-gradient(270deg, transparent 0%, rgba(0,0,0,.6) 6%, #000 14%);
		-webkit-mask-composite: source-in, source-in, source-in; mask-composite: intersect;
	}
	/* deepen the studio room around the head so the photo has no visible top edge */
	.kv-hero__portrait::before {
		content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
		background: radial-gradient(34% 26% at 92% 26%, rgba(7,7,7,.85) 0%, rgba(7,7,7,0) 100%), radial-gradient(26% 22% at 44% 28%, rgba(7,7,7,.8) 0%, rgba(7,7,7,0) 100%);
	}
	/* v36: slightly wider copy so the new AI headline wraps to two lines, not a stranded 'weekend.' */
	.kv-hero__copy { max-width: min(800px, 62%); }
	.kv-hero__title { font-size: clamp(42px, 4.7vw, 74px); }
	.kv-hero__title em { max-width: 17em; }
}
@media (max-width: 900px) {
	.kv-hero__img img {
		inset: 14% 17% 0 17%; width: 66%; height: 86%; object-position: 50% 0%;
		-webkit-mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,.6) 16%, #000 40%), linear-gradient(90deg, transparent 0, rgba(0,0,0,.7) 16%, #000 32%, #000 72%, rgba(0,0,0,.7) 86%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 12%, #000 28%);
		mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,.6) 16%, #000 40%), linear-gradient(90deg, transparent 0, rgba(0,0,0,.7) 16%, #000 32%, #000 72%, rgba(0,0,0,.7) 86%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 12%, #000 28%);
		-webkit-mask-composite: source-in, source-in; mask-composite: intersect;
	}
	.kv-hero__portrait::before {
		content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
		background: radial-gradient(40% 30% at 22% 18%, rgba(7,7,7,.9) 0%, rgba(7,7,7,0) 100%), radial-gradient(40% 30% at 80% 16%, rgba(7,7,7,.75) 0%, rgba(7,7,7,0) 100%);
	}
}

/* ---------- 5b. Type: Literata (bold, solid, optical sizes) + Archivo ---------- */
.ke-v3 { font-optical-sizing: auto; }
.kv-hero__title { font-weight: 800; letter-spacing: -.022em; line-height: 1.0; }
.kv-hero__title em { font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.kv-h2, .kv-final__title { font-weight: 800; letter-spacing: -.02em; }
.kv-door__name { font-weight: 800; letter-spacing: -.02em; }
.kv-proof__num { font-weight: 800; letter-spacing: -.035em; }
@media (min-width: 901px) { .kv-proof__num { font-size: clamp(60px, 7.6vw, 124px); } }
.kv-door__num { font-style: normal; font-weight: 800; font-size: 26px; letter-spacing: .06em; }
.kv-quote blockquote p { font-weight: 450; }
.kv-door__line { font-weight: 650; }

/* ---------- Reduced motion: everything still ---------- */
@media (prefers-reduced-motion: reduce) {
	.kv-foil, .kv-hero__title em, .kv-authority__quote em, .kv-final__title em,
	.kv-foil--deep, .kv-doors .kv-h2 em, .kv-book .kv-h2 em, .kv-optins .kv-h2 em, .kv-door__num,
	.kv-btn--foil::after, .kv-hero__seal::before, .kv-hero__seal::after, .kv-door__medal::after { animation: none !important; }
	.kv-btn--foil::after { display: none; }
	.kv-hero__seal::before { opacity: .8; transform: scale(.8) rotate(45deg); }
}

/* ---------- v3.4 nav: five labels + Book a Call on one line ---------- */
.ke-v3 .ke-nav__list a, .ke-v3 .ke-nav__cta, .ke-v3 .ke-brand__sub { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1280px) {
	.ke-v3 .ke-header__in { gap: 20px; }
	.ke-v3 .ke-nav { gap: 18px; }
	.ke-v3 .ke-nav__list { gap: 18px; }
	.ke-v3 .ke-nav__list a { font-size: 10.5px; letter-spacing: .12em; }
	.ke-v3 .ke-nav__cta { padding: 11px 13px 11px 15px; font-size: 10.5px; letter-spacing: .12em; }
	.ke-v3 .ke-brand__sub { font-size: 8.5px; letter-spacing: .2em; }
}
@media (min-width: 901px) and (max-width: 1040px) {
	.ke-v3 .ke-nav__list { gap: 14px; }
	.ke-v3 .ke-nav__list a { letter-spacing: .08em; }
	.ke-v3 .ke-brand__sub { display: none; }
}