/* ==========================================================================
   Kristina Elphinstone: home hero v3.7 (15 Nov 2026), rebuilt from her mockup.
   Live text left (Cormorant Garamond 600/700, hot-foil gold), portrait right, melted into black.
   Loads after home-v32.css on the front page only. Template: template-parts/home/v37-hero.php.
   Revert: inc/customizer.php → 'hero_layout' => 'v3'.
   ========================================================================== */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500 700;font-display:swap;src:url('../fonts/CormorantGaramond-normal-500-700.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500 700;font-display:swap;src:url('../fonts/CormorantGaramond-italic-500-700.woff2') format('woff2')}

.kh-hero {
	--kh-serif: "Cormorant Garamond", "Literata", Georgia, serif;
	--kh-left: max(var(--kv-gutter), calc((100vw - var(--kv-max)) / 2));
	position: relative; overflow: hidden; isolation: isolate;
	display: flex; align-items: center;
	min-height: clamp(560px, 53vw, 820px);
	background: radial-gradient(70% 90% at 62% 40%, #1E150C 0%, #120D08 45%, #080706 80%), #070707; color: #F4EFE6;
	border-bottom: 1px solid rgba(214, 178, 96, .38);
}
.kh-hero::before { /* fine gold hairline under the header, as in the mockup */
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 5;
	background: linear-gradient(90deg, rgba(214,178,96,0) 0%, rgba(214,178,96,.55) 30%, rgba(243,220,152,.8) 60%, rgba(214,178,96,.35) 100%);
}
.kh-hero__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(34% 52% at 76% 42%, rgba(201,150,70,.20) 0%, rgba(201,150,70,0) 70%),
		radial-gradient(40% 50% at 22% 50%, rgba(160,118,52,.10) 0%, rgba(160,118,52,0) 72%),
		radial-gradient(60% 30% at 30% 100%, rgba(214,178,96,.08) 0%, rgba(214,178,96,0) 100%);
}

/* portrait: right half, full hero height, no box */
.kh-hero__portrait { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: min(55vw, 960px); margin: 0; }
.kh-hero__img, .kh-hero__img img { display: block; width: 100%; height: 100%; }
.kh-hero__img img {
	object-fit: cover; object-position: 50% 18%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 14%, #000 30%, #000 97%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 18%, #000 95%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 14%, #000 30%, #000 97%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 18%, #000 95%, transparent 100%);
	mask-composite: intersect;
}
/* gold dust stays off her face */
.kh-hero .kv-sparkle { z-index: 2;
	-webkit-mask-image: radial-gradient(18% 30% at 76% 38%, rgba(0,0,0,.08) 0%, rgba(0,0,0,.08) 60%, #000 100%), linear-gradient(0deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.18) 9%, #000 22%);
	-webkit-mask-composite: source-in;
	mask-image: radial-gradient(18% 30% at 76% 38%, rgba(0,0,0,.08) 0%, rgba(0,0,0,.08) 60%, #000 100%), linear-gradient(0deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.18) 9%, #000 22%);
	mask-composite: intersect;
}

.kh-hero__wrap { position: relative; z-index: 3; width: 100%; padding: clamp(48px, 5vw, 80px) 0 clamp(48px, 5vw, 80px) var(--kh-left); }
.kh-hero__copy { display: inline-flex; flex-direction: column; align-items: flex-start; max-width: 46vw; }

/* WHERE, with gold rules either side */
.kh-hero__eyebrow { align-self: stretch; display: flex; align-items: center; gap: .8em; margin: 0 0 .35em;
	font-family: var(--kh-serif); font-weight: 600; font-size: clamp(16px, 2.1vw, 30px); letter-spacing: .14em; text-transform: uppercase; line-height: 1; }
.kh-hero__eyebrow::before, .kh-hero__eyebrow::after { content: ""; flex: 1 1 0; height: 1px; max-width: 5.4em; }
.kh-hero__eyebrow::before { margin-left: .2em; background: linear-gradient(90deg, rgba(214,178,96,0), #D9B766 70%, #F3DC98); }
.kh-hero__eyebrow::after { background: linear-gradient(90deg, #F3DC98, #D9B766 30%, rgba(214,178,96,0)); }
.kh-hero__eyebrow { justify-content: center; }
.kh-hero__eyebrow span, .kh-hero__gold, .kh-hero__tm {
	color: #E2C27A;
	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;
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
	animation: kv-sheen 8s cubic-bezier(.45, 0, .2, 1) 1.2s infinite;
}
.kh-hero__eyebrow span { padding: 0 .02em; }

.kh-hero__title { margin: 0; font-family: var(--kh-serif); text-transform: uppercase; }
.kh-hero__l1 { display: block; font-weight: 600; font-size: clamp(36px, 5.6vw, 86px); line-height: .92; letter-spacing: .005em; color: #FBF8F2; max-width: none; white-space: nowrap; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.kh-hero__l1 > span { display: block; }
.kh-hero__l2 { display: block; margin-top: .06em; font-style: italic; font-weight: 700; font-size: clamp(44px, 7vw, 108px); line-height: .9; letter-spacing: .01em; max-width: 7em; }
.kh-hero__gold { padding-right: .06em; filter: drop-shadow(0 2px 10px rgba(0,0,0,.55)); }
.kh-hero__tm { font-style: normal; font-weight: 600; font-size: .24em; vertical-align: top; position: relative; top: .42em; margin-left: .1em; letter-spacing: 0; }

.kh-hero__sub { margin: clamp(14px, 1.4vw, 24px) 0 0; max-width: 13em; font-family: var(--kh-serif); font-style: italic; font-weight: 600; font-size: clamp(22px, 3.2vw, 48px); line-height: 1.04; color: #F7F3EC; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.kh-hero__swash { position: relative; display: inline-block; white-space: nowrap; }
.kh-hero__swash::after { /* tapered gold brush stroke */
	content: ""; position: absolute; left: -12%; right: -4%; bottom: -.36em; height: .38em; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23B8892F' stop-opacity='0'/%3E%3Cstop offset='.25' stop-color='%23C99A45'/%3E%3Cstop offset='.6' stop-color='%23F6E2A4'/%3E%3Cstop offset='.85' stop-color='%23D9B766'/%3E%3Cstop offset='1' stop-color='%23B8892F' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 17C70 7 180 1 298 5 210 6 110 10 2 17Z' fill='url(%23g)'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	filter: drop-shadow(0 0 4px rgba(243,220,152,.35));
}

.kh-hero__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .7em;
	margin-top: clamp(26px, 2.8vw, 44px); padding: 0 1.9em; min-height: 3.1em; min-width: 18em;
	font-family: var(--kv-ui); font-weight: 700; font-size: clamp(14px, 1.45vw, 21px); letter-spacing: .1em; text-transform: uppercase; color: #1A1206;
	border-radius: 3px;
	background-image: var(--kv-shine), var(--kv-grain), linear-gradient(180deg, #F4D98F 0%, #E2B95E 38%, #C99536 70%, #A9771F 100%);
	background-size: 260% 100%, 180px 180px, 100% 100%;
	background-repeat: no-repeat, repeat, no-repeat; background-position: 100% 0, 0 0, 0 0;
	background-blend-mode: normal, overlay, normal;
	box-shadow: inset 0 1px 0 rgba(255,246,214,.85), inset 0 -1px 0 rgba(90,60,12,.5), 0 10px 28px rgba(0,0,0,.5), 0 0 22px rgba(214,170,80,.22);
	animation: kv-sheen 8s cubic-bezier(.45, 0, .2, 1) 3s infinite;
	transition: transform .25s var(--kv-ease), box-shadow .25s;
}
.kh-hero__btn svg { width: .5em; height: .8em; }
.kh-hero__btn:hover, .kh-hero__btn:focus-visible { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,246,214,.9), inset 0 -1px 0 rgba(90,60,12,.5), 0 14px 34px rgba(0,0,0,.55), 0 0 30px rgba(230,190,100,.38); }
.kh-hero__btn:focus-visible { outline: 2px solid #F3DC98; outline-offset: 3px; }

.kh-hero__steps { display: flex; flex-wrap: wrap; align-items: center; margin: clamp(16px, 1.6vw, 24px) 0 0; padding: 0 0 0 .1em; list-style: none;
	font-family: var(--kv-ui); font-weight: 600; font-size: clamp(11px, 1.06vw, 15px); letter-spacing: .2em; text-transform: uppercase; color: #EDE7DA; }
.kh-hero__steps li + li::before { content: "›"; display: inline-block; margin: 0 1.25em; color: #D9B766; font-weight: 700; letter-spacing: 0; transform: scale(1.3); }

/* tablet */
@media (max-width: 1100px) {
	.kh-hero__portrait { width: 54vw; }
	.kh-hero__copy { max-width: 50vw; }
}
/* mobile: portrait on top, text below */
@media (max-width: 860px) {
	.kh-hero { display: block; min-height: 0; }
	.kh-hero__portrait { position: relative; width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: 620px; }
	.kh-hero__img img { object-position: 54% 10%;
		-webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 30%, #000 100%), linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
		mask-image: linear-gradient(0deg, transparent 0%, #000 30%, #000 100%), linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); }
	.kh-hero__wrap { margin-top: -22vw; padding: 0 var(--kv-gutter) 56px; text-align: center; }
	.kh-hero__copy { display: flex; align-items: center; max-width: none; }
	.kh-hero__eyebrow { font-size: 17px; }
	.kh-hero__l1 { font-size: clamp(34px, 10vw, 54px); white-space: normal; }
	.kh-hero__l1 > span { display: inline; }
	.kh-hero__l2 { font-size: clamp(42px, 12.4vw, 66px); max-width: none; }
	.kh-hero__sub { font-size: clamp(22px, 6.4vw, 32px); max-width: 14em; margin-inline: auto; }
	.kh-hero__btn { width: 100%; max-width: 420px; min-width: 0; font-size: 15px; min-height: 58px; }
	.kh-hero__steps { justify-content: center; font-size: 11px; letter-spacing: .16em; }
	.kh-hero__steps li + li::before { margin: 0 .8em; }
	.kh-hero .kv-sparkle { -webkit-mask-image: radial-gradient(34% 22% at 52% 24%, rgba(0,0,0,.08) 0%, rgba(0,0,0,.08) 60%, #000 100%), linear-gradient(0deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.15) 14%, #000 26%); mask-image: radial-gradient(34% 22% at 52% 24%, rgba(0,0,0,.08) 0%, rgba(0,0,0,.08) 60%, #000 100%), linear-gradient(0deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.15) 14%, #000 26%); }
}
@media (prefers-reduced-motion: reduce) {
	.kh-hero__eyebrow span, .kh-hero__gold, .kh-hero__tm, .kh-hero__btn { animation: none; }
}

/* ==========================================================================
   v3.6.1: full-bleed clean hero photo (hero-kristina-wide, no text baked in).
   Photo covers the whole hero, anchored right so her face never crops; copy sits in the dark left space.
   ========================================================================== */
.kh-hero { background: #0B0A09; min-height: clamp(560px, 50vw, 860px); }
.kh-hero__glow { display: none; }
.kh-hero__portrait { inset: 0; width: auto; }
.kh-hero__img img {
	object-fit: cover; object-position: 100% 30%;
	-webkit-mask-image: none; mask-image: none;
}
.kh-hero__shade { /* legibility only: darkens the left text field, fades the bottom edge into the page */
	position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(8,7,6,.62) 0%, rgba(8,7,6,.42) 30%, rgba(8,7,6,.12) 50%, rgba(8,7,6,0) 62%),
		linear-gradient(0deg, rgba(8,7,6,.55) 0%, rgba(8,7,6,0) 16%);
}
.kh-hero .kv-sparkle { z-index: 2; }
.kh-hero__copy { max-width: min(48vw, 760px); }

@media (max-width: 1100px) {
	.kh-hero__portrait { width: auto; }
	.kh-hero__img img { object-position: 78% 30%; }
	.kh-hero__shade { background: linear-gradient(90deg, rgba(8,7,6,.78) 0%, rgba(8,7,6,.55) 38%, rgba(8,7,6,.1) 62%, rgba(8,7,6,0) 72%), linear-gradient(0deg, rgba(8,7,6,.55) 0%, rgba(8,7,6,0) 16%); }
}
/* mobile: photo on top (cropped to her side, face kept), text below on charcoal */
@media (max-width: 860px) {
	.kh-hero { display: block; min-height: 0; }
	.kh-hero__portrait { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 640px; }
	.kh-hero__img img { object-position: 84% 22%;
		-webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 32%, #000 100%);
		mask-image: linear-gradient(0deg, transparent 0%, #000 32%, #000 100%); }
	.kh-hero__shade { display: none; }
	.kh-hero__wrap { margin-top: -26vw; }
	.kh-hero__copy { max-width: none; }
}