/* ==========================================================================
   Kingdom Creations Hair Studio
   --------------------------------------------------------------------------
   Organised top to bottom: tokens, base, motion, header, controls, components,
   home sections, page templates, blog, WooCommerce, footer, breakpoints.

   The palette's four base colours are printed into <head> by PHP so the
   Customizer can repaint the site live (see kc_palette() in inc/setup.php).
   Everything below derives from those four; nothing hard-codes gold or purple.

   Motion follows the reference site's vocabulary exactly: a 15px settle for
   text, a 1.05 scale-down for photographs, one shared easing curve, and a
   cross-fade between pages.
   ========================================================================== */

/* == Tokens =============================================================== */

:root {
	/* --gold, --purple, --cream, --ink and their -rgb forms come from PHP.
	   These are the fallbacks, used if that <style> block is ever stripped. */
	--gold: #CFA73C;
	--purple: #35155A;
	--cream: #FBF7EF;
	--ink: #1B1220;
	--gold-rgb: 207, 167, 60;
	--purple-rgb: 53, 21, 90;
	--ink-rgb: 27, 18, 32;

	--purple-deep: color-mix(in srgb, var(--purple) 76%, #000);
	--purple-lift: color-mix(in srgb, var(--purple) 88%, #fff);
	--gold-deep: color-mix(in srgb, var(--gold) 82%, #000);
	--cream-2: color-mix(in srgb, var(--cream) 92%, var(--gold));
	--surface: #fff;

	--muted: rgba(var(--ink-rgb), .64);
	--line: rgba(var(--purple-rgb), .14);
	--line-soft: rgba(var(--purple-rgb), .08);
	--on-purple: rgba(255, 255, 255, .92);
	--on-purple-dim: rgba(255, 255, 255, .6);

	--font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--fs-xs: .75rem;
	--fs-sm: .875rem;
	--fs-base: 1.0313rem;
	--fs-lg: 1.125rem;

	--wrap: 1320px;
	--gutter: clamp(20px, 5vw, 56px);
	--sec-y: clamp(64px, 8.5vw, 128px);
	--header-h: 76px;
	--announce-h: 0px;

	/* One easing curve for movement, a gentler one for colour and opacity.
	   Both are the reference site's. */
	--ease: cubic-bezier(.33, 0, 0, 1);
	--ease-soft: cubic-bezier(.215, .61, .355, 1);

	--radius: 0px;
	--shadow: 0 18px 50px -28px rgba(var(--purple-rgb), .45);
}

@media (min-width: 900px) {
	:root { --header-h: 82px; }
}


/* == Base ================================================================= */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* The sticky header would otherwise cover an anchor's target. */
	scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body.kc-locked { overflow: hidden; }

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -.012em;
	margin: 0 0 .5em;
	text-wrap: balance;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.2em; }

::selection { background: rgba(var(--gold-rgb), .35); }

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

.kc-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.kc-skip {
	position: fixed;
	top: -100px; left: 12px;
	z-index: 9999;
	padding: 12px 20px;
	background: var(--purple);
	color: #fff;
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: top .2s var(--ease-soft);
}
.kc-skip:focus { top: 12px; }

.kc-hp { position: absolute; left: -9999px; }

.kc-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.kc-section { padding-block: var(--sec-y); }
.kc-section--tight { padding-block: clamp(44px, 5.5vw, 80px); }
.kc-section--cream2 { background: var(--cream-2); }
.kc-section--purple { background: var(--purple); color: var(--on-purple); }
.kc-section--purple h2, .kc-section--purple h3 { color: #fff; }

.kc-main { min-height: 40vh; }


/* == Motion =============================================================== */

/*
 * Two systems, deliberately separate.
 *
 * `hero` runs on page load from a CSS animation, so the first screen settles
 * into place even if JavaScript never arrives.
 *
 * `up`, `fade` and `img` wait for the element to scroll into view, which needs
 * an IntersectionObserver. They start invisible only once the inline script in
 * <head> has confirmed JavaScript is running, and a 2.5-second failsafe in that
 * same script reveals everything if app.js never finishes loading — so a broken
 * script can never leave the page blank.
 */

@keyframes kc-enter {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes kc-hero {
	from { opacity: .001; transform: translateY(15px); }
	to   { opacity: 1; transform: none; }
}

.kc-shell {
	animation: kc-enter .55s var(--ease) both;
}

[data-reveal="hero"] {
	animation: kc-hero .95s var(--ease) both;
	animation-delay: var(--kc-delay, 0ms);
}

.kc-js [data-reveal="up"],
.kc-js [data-reveal="fade"],
.kc-js [data-reveal="img"] {
	opacity: .001;
	transition-delay: var(--kc-delay, 0ms);
	will-change: opacity, transform;
}

.kc-js [data-reveal="up"] {
	transform: translateY(15px);
	transition: opacity .8s var(--ease-soft), transform .8s var(--ease);
}

.kc-js [data-reveal="fade"] {
	transition: opacity 1s var(--ease-soft);
}

.kc-js [data-reveal="img"] {
	transition: opacity .5s var(--ease-soft), transform .7s var(--ease);
}

@media (min-width: 750px) {
	.kc-js [data-reveal="img"] { transform: scale(1.05); }
}

.kc-js [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* The failsafe, and the reduced-motion escape hatch. */
.kc-show-all [data-reveal],
.kc-still [data-reveal] {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
}

/*
 * Cross-page fade. Leaving a page washes a cream curtain over it; the new page
 * fades up from the same colour, so the two halves join in the middle. The
 * curtain is never opaque unless JavaScript put it there, which is why a
 * failed navigation cannot strand the visitor behind it.
 */
.kc-curtain {
	position: fixed;
	inset: 0;
	z-index: 9000;
	background: var(--cream);
	opacity: 0;
	pointer-events: none;
	transition: opacity .28s var(--ease-soft);
}
.kc-leaving .kc-curtain { opacity: 1; }

.kc-still .kc-curtain,
.kc-still .kc-shell { transition: none; animation: none; }


/* == Announcement bar ===================================================== */

.kc-announce {
	position: relative;
	z-index: 60;
	background: var(--gold);
	color: var(--purple);
	text-align: center;
}

.kc-announce__track {
	position: relative;
	height: 38px;
	overflow: hidden;
}

.kc-announce__item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding-inline: 44px;
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: .09em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(100%);
	transition: opacity .5s var(--ease-soft), transform .5s var(--ease);
}
.kc-announce__item.is-on { opacity: 1; transform: none; }

/* Two lines is the realistic worst case on a phone; give the track room for it
   rather than clipping the second one. */
@media (max-width: 620px) {
	.kc-announce__track { height: 46px; }
	.kc-announce__item {
		padding-inline: 16px;
		font-size: 11px;
		letter-spacing: .06em;
		line-height: 1.35;
	}
}
.kc-announce__item.is-out { opacity: 0; transform: translateY(-100%); }
.kc-announce__item a { text-decoration: none; }
.kc-announce__item a:hover { text-decoration: underline; }


/* == Header =============================================================== */

.kc-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--purple);
	color: var(--on-purple);
	transition: background .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}

/*
 * On pages that open with a full-bleed photograph the bar starts transparent
 * and sits on top of the image, then fills in once the page scrolls — the
 * behaviour of the reference site's overlay header. The gradient is what keeps
 * white nav text legible over an unpredictable photo.
 */
.kc-overlay-header .kc-header {
	background: transparent;
}

/*
 * Sticky, not fixed. A fixed header inherits `top: 0` from the rule above and
 * lands on top of the announcement bar; it also leaves a header-sized hole at
 * the top of every non-overlay page. Sticky keeps the bar in the flow — so the
 * announcement scrolls away and the header parks at the top exactly when it
 * reaches it — and the hero is pulled up underneath it instead.
 */
.kc-overlay-header .kc-main {
	margin-top: calc(var(--header-h) * -1);
}
.kc-overlay-header .kc-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0));
	opacity: 1;
	transition: opacity .3s var(--ease-soft);
	pointer-events: none;
}
.kc-overlay-header .kc-header.is-stuck {
	background: var(--purple);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}
.kc-overlay-header .kc-header.is-stuck::before { opacity: 0; }

/* An open mega-panel needs the solid bar behind it whatever the scroll. */
.kc-overlay-header .kc-header.is-open { background: var(--purple); }
.kc-overlay-header .kc-header.is-open::before { opacity: 0; }

.kc-header__bar {
	display: flex;
	align-items: center;
	gap: 16px;
	height: var(--header-h);
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
	position: relative;
	z-index: 2;
}

.kc-header__side {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1 1 0;
}
.kc-header__side--r { justify-content: flex-end; gap: 6px; }

.kc-logo { display: flex; align-items: center; }
.kc-logo__link, .kc-header .custom-logo-link {
	display: block;
	line-height: 0;
}
.kc-logo__img, .kc-header .custom-logo {
	width: auto;
	/* Sized by height so it always clears the bar, capped so the three stacked
	   lines of the lockup stay readable. */
	height: clamp(34px, 4.6vw, 50px);
	max-width: 240px;
	object-fit: contain;
}

/* Scoped to .kc-header so it outranks .kc-iconbtn's display, which is declared
   later in this file at the same specificity. */
.kc-header .kc-header__burger { display: none; }


/* == Desktop menu ========================================================= */

.kc-header__nav {
	display: flex;
	justify-content: center;
	align-self: stretch;
}

.kc-menu {
	display: flex;
	align-items: stretch;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kc-menu__item { display: flex; align-items: stretch; }

.kc-navlink {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 0 15px;
	color: var(--on-purple);
	font-size: var(--fs-sm);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: color .25s var(--ease-soft);
}
.kc-navlink:hover, .kc-navlink:focus-visible { color: #fff; }

/* The underline that grows from the left — the reference site's one nav flourish. */
.kc-navtext {
	position: relative;
	display: block;
	padding-block: 2px;
}
.kc-navtext::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--gold);
	/* The reference animates width; this scales instead. Identical on screen for
	   a solid bar, but it runs on the compositor rather than re-laying out the
	   pseudo-element on every frame of every nav hover. Timing is the
	   reference's, unchanged. */
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s cubic-bezier(.39, .575, .565, 1);
}
.kc-navlink:hover .kc-navtext::after,
.kc-navlink:focus-visible .kc-navtext::after,
.kc-menu__item.is-current > .kc-navlink .kc-navtext::after,
.kc-menu__item:hover > .kc-navlink .kc-navtext::after { transform: scaleX(1); }

.kc-navlink__caret {
	display: flex;
	opacity: .55;
	transition: transform .25s var(--ease-soft);
}
.kc-menu__item:hover > .kc-navlink .kc-navlink__caret { transform: rotate(180deg); }


/* Mega panel */

.kc-drop {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--purple-deep);
	color: var(--on-purple);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s var(--ease-soft), visibility .2s;
}

/*
 * A transparent bridge across the gap between the link and the panel. Without
 * it the pointer crosses a 1px dead zone on the way down and the panel closes
 * under the cursor.
 */
.kc-drop::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 0; right: 0;
	height: 10px;
}

.kc-menu__item.kc-has-drop:hover > .kc-drop,
.kc-menu__item.kc-has-drop:focus-within > .kc-drop,
.kc-drop.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.kc-drop__in {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 40px var(--gutter) 46px;
	max-height: calc(100vh - var(--header-h) - 40px);
	overflow-y: auto;
}

.kc-drop__list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 64px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kc-drop__item { display: block; }

/*
 * Children fade up in sequence. The index comes from the walker as `--i`; the
 * stylesheet turns it into a delay, so re-ordering the menu in the admin
 * re-orders the animation with no other change.
 */
.kc-navlink--child,
.kc-navlink--grandchild {
	display: inline-flex;
	padding: 0;
	opacity: 0;
	transform: translateY(-5px);
	transition:
		transform .15s var(--ease-soft),
		opacity .35s var(--ease-soft),
		color .25s var(--ease-soft);
	transition-delay: calc(var(--i, 0) * 60ms);
}

.kc-navlink--child {
	font-size: 1.0625rem;
	font-family: var(--font-display);
	letter-spacing: 0;
	margin-bottom: 10px;
}

.kc-navlink--grandchild {
	font-size: var(--fs-sm);
	color: var(--on-purple-dim);
}
.kc-navlink--grandchild:hover { color: #fff; }

.kc-menu__item.kc-has-drop:hover .kc-navlink--child,
.kc-menu__item.kc-has-drop:hover .kc-navlink--grandchild,
.kc-menu__item.kc-has-drop:focus-within .kc-navlink--child,
.kc-menu__item.kc-has-drop:focus-within .kc-navlink--grandchild,
.kc-drop.is-open .kc-navlink--child,
.kc-drop.is-open .kc-navlink--grandchild {
	opacity: 1;
	transform: none;
}

/* Closing should be immediate, not a reverse stagger. */
.kc-menu__item.kc-has-drop:not(:hover):not(:focus-within) .kc-navlink--child,
.kc-menu__item.kc-has-drop:not(:hover):not(:focus-within) .kc-navlink--grandchild {
	transition-delay: 0s;
}

.kc-drop__sub {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 7px;
}


/* == Icon buttons ========================================================= */

.kc-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	border-radius: 50%;
	position: relative;
	transition: background .25s var(--ease-soft), color .25s var(--ease-soft);
}
.kc-iconbtn:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.kc-cartbtn__count {
	position: absolute;
	top: 2px;
	right: 1px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--gold);
	color: var(--purple);
	font-size: 10px;
	font-weight: 600;
	line-height: 17px;
	text-align: center;
}


/* == Buttons ============================================================== */

.kc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 26px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background .3s var(--ease-soft),
		color .3s var(--ease-soft),
		border-color .3s var(--ease-soft),
		transform .3s var(--ease);
}
.kc-btn:hover { transform: translateY(-2px); }
.kc-btn:active { transform: none; }

.kc-btn__icon {
	display: flex;
	transition: transform .3s var(--ease);
}
.kc-btn:hover .kc-btn__icon { transform: translateX(4px); }

.kc-btn--solid { background: var(--purple); border-color: var(--purple); color: #fff; }
.kc-btn--solid:hover { background: var(--gold); border-color: var(--gold); color: var(--purple); }

.kc-btn--gold { background: var(--gold); border-color: var(--gold); color: var(--purple); }
.kc-btn--gold:hover { background: #fff; border-color: #fff; }

.kc-btn--outline { background: transparent; border-color: currentColor; color: inherit; }
.kc-btn--outline:hover { background: var(--purple); border-color: var(--purple); color: #fff; }

.kc-btn--ghost { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }
.kc-btn--ghost:hover { background: #fff; color: var(--purple); border-color: #fff; }

.kc-btn--sm { padding: 10px 18px; font-size: var(--fs-xs); }
.kc-btn--block { width: 100%; }

.kc-section--purple .kc-btn--outline:hover { background: #fff; color: var(--purple); border-color: #fff; }


/* == Drawer, search, bag, scrim =========================================== */

.kc-scrim {
	position: fixed;
	inset: 0;
	z-index: 600;
	background: rgba(var(--purple-rgb), .5);
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s var(--ease-soft), visibility .35s;
}
body.kc-open .kc-scrim { opacity: 1; visibility: visible; }

.kc-drawer, .kc-bag {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 700;
	width: min(420px, 88vw);
	display: flex;
	flex-direction: column;
	background: var(--purple);
	color: var(--on-purple);
	visibility: hidden;
	transition: transform .45s var(--ease), visibility .45s;
}
.kc-drawer { left: 0; transform: translateX(-100%); }
.kc-bag { right: 0; background: var(--cream); color: var(--ink); transform: translateX(100%); }

.kc-drawer.is-open, .kc-bag.is-open { transform: none; visibility: visible; }

.kc-drawer__head, .kc-bag__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.kc-bag__head { border-bottom-color: var(--line); }

.kc-drawer__title, .kc-bag__title {
	font-family: var(--font-display);
	font-size: 1.25rem;
}

.kc-drawer__nav { flex: 1; overflow-y: auto; padding: 12px 0; }

.kc-drawer__list, .kc-drawer__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kc-drawer__item {
	position: relative;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.kc-drawer__item--1, .kc-drawer__item--2 { border-bottom: 0; }

.kc-drawer__link {
	display: block;
	padding: 15px 60px 15px 22px;
	font-family: var(--font-display);
	font-size: 1.3rem;
	text-decoration: none;
	/* Each row slides in behind the one above it as the drawer opens. */
	opacity: 0;
	transform: translateX(-14px);
	transition: opacity .4s var(--ease-soft), transform .4s var(--ease);
	transition-delay: calc(120ms + var(--i, 0) * 45ms);
}
.kc-drawer.is-open .kc-drawer__link { opacity: 1; transform: none; }

.kc-drawer__item--1 .kc-drawer__link,
.kc-drawer__item--2 .kc-drawer__link {
	padding-block: 9px;
	padding-left: 38px;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	color: var(--on-purple-dim);
}

.kc-drawer__toggle {
	position: absolute;
	top: 6px;
	right: 12px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: transform .3s var(--ease);
}
.kc-drawer__toggle[aria-expanded="true"] { transform: rotate(180deg); }

.kc-drawer__sub { padding-bottom: 10px; }

.kc-drawer__foot {
	padding: 20px 22px calc(20px + env(safe-area-inset-bottom));
	border-top: 1px solid rgba(255, 255, 255, .14);
	display: grid;
	gap: 14px;
	justify-items: start;
}

.kc-drawer__wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-sm);
	text-decoration: none;
	color: var(--on-purple-dim);
}
.kc-drawer__wa:hover { color: #fff; }

.kc-bag__body { flex: 1; overflow-y: auto; padding: 22px; }

/* Search drops down from behind the header. */
.kc-search {
	position: fixed;
	top: 0;
	inset-inline: 0;
	z-index: 650;
	background: var(--cream);
	border-bottom: 1px solid var(--line);
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform .4s var(--ease), visibility .4s;
}
.kc-search.is-open { transform: none; visibility: visible; }

.kc-search__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: var(--header-h);
	padding-block: 14px;
}

.kc-search__form {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 12px;
}
.kc-search__form > svg { color: var(--muted); flex: none; }

.kc-search__field {
	flex: 1;
	min-width: 0;
	border: 0;
	border-bottom: 1px solid var(--line);
	background: none;
	padding: 10px 0;
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 2.6vw, 1.6rem);
	color: var(--ink);
}
.kc-search__field:focus { outline: none; border-bottom-color: var(--gold); }


/* == Forms ================================================================ */

.kc-input {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	transition: border-color .25s var(--ease-soft), box-shadow .25s var(--ease-soft);
}
.kc-input:focus {
	outline: none;
	border-color: var(--purple);
	box-shadow: 0 0 0 3px rgba(var(--purple-rgb), .12);
}

textarea.kc-input { resize: vertical; min-height: 140px; }

.kc-field { display: block; margin: 0 0 18px; }
.kc-field > label {
	display: block;
	margin-bottom: 7px;
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: .02em;
}
.kc-field span[aria-hidden] { color: var(--gold-deep); }

.kc-form__row {
	display: grid;
	gap: 0 20px;
	grid-template-columns: 1fr;
}
@media (min-width: 700px) {
	.kc-form__row { grid-template-columns: 1fr 1fr; }
}

.kc-form__msg, .kc-news__msg {
	padding: 12px 16px;
	margin: 0 0 20px;
	border-left: 3px solid var(--gold);
	background: rgba(var(--gold-rgb), .12);
	font-size: var(--fs-sm);
}
.kc-form__msg--err, .kc-news__msg--err {
	border-left-color: #a33;
	background: rgba(170, 51, 51, .1);
}

.kc-form__actions { margin: 6px 0 0; }

.kc-notice {
	padding: 14px 18px;
	margin: 0 0 24px;
	border-left: 3px solid var(--gold);
	background: rgba(var(--gold-rgb), .12);
	font-size: var(--fs-sm);
}
.kc-notice--admin { border-left-color: var(--purple); }
.kc-notice code { font-size: .95em; }


/* == Section heads ======================================================== */

.kc-head { margin-bottom: clamp(32px, 4vw, 56px); }
.kc-head--center { text-align: center; max-width: 720px; margin-inline: auto; }
.kc-head--left { max-width: 760px; }
.kc-head--split { max-width: none; }

.kc-eyebrow {
	margin: 0 0 14px;
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gold-deep);
}
.kc-section--purple .kc-eyebrow,
.kc-pagehead--image .kc-eyebrow { color: var(--gold); }

.kc-head__title {
	font-size: clamp(1.85rem, 4vw, 3.05rem);
	margin: 0;
}
.kc-head__text {
	margin-top: 18px;
	color: var(--muted);
	font-size: var(--fs-lg);
}
.kc-section--purple .kc-head__text { color: var(--on-purple-dim); }

.kc-h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }


/* == Images and placeholders ============================================== */

.kc-img { width: 100%; height: 100%; object-fit: cover; }

.kc-img--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 180px;
	background:
		linear-gradient(135deg, rgba(var(--purple-rgb), .07), rgba(var(--gold-rgb), .13));
	color: rgba(var(--purple-rgb), .3);
}
.kc-img__mark { display: block; width: 46px; }
.kc-img__mark svg { width: 100%; height: auto; }

.kc-ratio { position: relative; overflow: hidden; }
.kc-ratio > img, .kc-ratio > .kc-img--empty {
	position: absolute;
	inset: 0;
}
.kc-ratio--43 { aspect-ratio: 4 / 3; }
.kc-ratio--45 { aspect-ratio: 4 / 5; }
.kc-ratio--11 { aspect-ratio: 1 / 1; }
.kc-ratio--169 { aspect-ratio: 16 / 9; }


/* == Grids ================================================================ */

.kc-grid { display: grid; gap: clamp(20px, 2.4vw, 34px); }
.kc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.kc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.kc-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
	.kc-grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
	.kc-grid--3, .kc-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.kc-grid--2, .kc-grid--3, .kc-grid--4 { grid-template-columns: 1fr; }
	.kc-grid--keep2 { grid-template-columns: repeat(2, 1fr); }
}


/* == Home: hero =========================================================== */

.kc-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(88vh, 820px);
	padding-top: calc(var(--header-h) + 40px);
	padding-bottom: clamp(48px, 7vw, 96px);
	background: var(--purple-deep);
	color: #fff;
	overflow: hidden;
}

.kc-hero__bg { position: absolute; inset: 0; }
.kc-hero__bg img { width: 100%; height: 100%; object-fit: cover; }

/*
 * A 16:9 photograph in a tall phone-shaped box loses most of its width. The
 * hero image is composed with the subject on the right and clear space on the
 * left for the headline, so a centred crop throws the subject away. Biasing the
 * focal point right keeps her in frame; the headline sits over the lower third
 * on mobile, not the left, so nothing is lost by it.
 */
@media (max-width: 860px) {
	.kc-hero__bg img { object-position: 72% center; }
}

/*
 * The scrim is two gradients, not one: a horizontal wash that keeps the
 * left-hand column readable, and a soft bottom fade that stops the photograph
 * colliding with the section under it.
 */
.kc-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(var(--purple-rgb), .82) 0%, rgba(var(--purple-rgb), .55) 38%, rgba(var(--purple-rgb), .06) 68%),
		linear-gradient(to top, rgba(var(--purple-rgb), .55), transparent 42%);
}

.kc-hero__inner { position: relative; z-index: 2; width: 100%; }
.kc-hero__box { max-width: 620px; }

.kc-hero__title {
	font-size: clamp(2.4rem, 6vw, 4.4rem);
	line-height: 1.03;
	margin: 0 0 20px;
	color: #fff;
}

.kc-hero__text {
	max-width: 46ch;
	margin: 0 0 32px;
	color: rgba(255, 255, 255, .84);
	font-size: var(--fs-lg);
}

.kc-hero__acts { display: flex; flex-wrap: wrap; gap: 12px; }

.kc-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	z-index: 2;
	display: grid;
	place-items: center;
	color: rgba(255, 255, 255, .6);
	animation: kc-bob 2.4s var(--ease-soft) infinite;
}
@keyframes kc-bob {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, 7px); }
}


/* == Home: welcome ======================================================== */

.kc-intro__grid {
	display: grid;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.kc-intro__grid { grid-template-columns: 1fr 1fr; }
}

.kc-intro__media { position: relative; }
.kc-intro__media .kc-ratio { aspect-ratio: 4 / 5; }

/* A thin gold rule offset behind the photograph, echoing the logo's frame. */
.kc-intro__media::after {
	content: "";
	position: absolute;
	inset: 20px -20px -20px 20px;
	border: 1px solid rgba(var(--gold-rgb), .5);
	z-index: -1;
}

.kc-intro__body p { color: var(--muted); }
.kc-intro__body .kc-btn { margin-top: 12px; }

.kc-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 48px;
	margin: 32px 0 8px;
	padding: 26px 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
}
.kc-stats li { display: block; }
.kc-stats .kc-pairs__k {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	line-height: 1;
	color: var(--purple);
}
.kc-stats .kc-pairs__v {
	display: block;
	margin-top: 6px;
	font-size: var(--fs-sm);
	color: var(--muted);
}


/* == Services ============================================================= */

.kc-service {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line-soft);
	transition: border-color .35s var(--ease-soft), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.kc-service:hover {
	border-color: rgba(var(--gold-rgb), .55);
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}

.kc-service__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.kc-service__media img, .kc-service__media .kc-img--empty {
	position: absolute;
	inset: 0;
	transition: transform .7s var(--ease);
}
.kc-service:hover .kc-service__media img { transform: scale(1.045); }

.kc-service__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px 24px 22px;
}

.kc-service__title { font-size: 1.3rem; margin: 0 0 8px; }

.kc-service__desc {
	color: var(--muted);
	font-size: var(--fs-sm);
	margin: 0 0 18px;
}

.kc-service__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 18px;
	margin: auto 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--line-soft);
}
.kc-service__meta div { margin: 0; }
.kc-service__meta dd { margin: 0; }

.kc-service__price {
	font-family: var(--font-display);
	font-size: 1.2rem;
	color: var(--purple);
}

.kc-service__time dd {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-sm);
	color: var(--muted);
}

.kc-service__note {
	margin: 10px 0 0;
	font-size: var(--fs-xs);
	color: var(--muted);
	font-style: italic;
}

.kc-service__book {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 16px;
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--purple);
}
.kc-service__book svg { transition: transform .3s var(--ease); }
.kc-service__book:hover { color: var(--gold-deep); }
.kc-service__book:hover svg { transform: translateX(4px); }


/* Price list */

.kc-price-list {
	max-width: 900px;
	margin-inline: auto;
	border-top: 1px solid var(--line);
}

.kc-price-group { margin-bottom: clamp(36px, 5vw, 64px); }
.kc-price-group__title {
	font-size: clamp(1.3rem, 2.2vw, 1.75rem);
	margin: 0 0 6px;
}
.kc-price-group__lead { color: var(--muted); margin-bottom: 20px; }

.kc-price-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	align-items: flex-start;
	justify-content: space-between;
	padding: 26px 0;
	border-bottom: 1px solid var(--line);
}

.kc-price-row__main { flex: 1 1 min(420px, 100%); }
.kc-price-row__title { font-size: 1.25rem; margin: 0 0 6px; }
.kc-price-row__desc { color: var(--muted); font-size: var(--fs-sm); }
.kc-price-row__desc p { margin-bottom: .5em; }
.kc-price-row__note {
	margin: 8px 0 0;
	font-size: var(--fs-xs);
	font-style: italic;
	color: var(--muted);
}

.kc-price-row__side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 190px;
}
@media (min-width: 700px) {
	.kc-price-row__side { align-items: flex-end; text-align: right; }
}

.kc-price-row__price {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.5rem;
	color: var(--purple);
	line-height: 1.1;
}
.kc-price-row__time {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--muted);
}


/* == Feature band ========================================================= */

.kc-band {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(72vh, 640px);
	padding-block: clamp(56px, 8vw, 110px);
	background: var(--purple-deep);
	color: #fff;
	overflow: hidden;
}
.kc-band__bg { position: absolute; inset: 0; }
.kc-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.kc-band__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(var(--purple-rgb), .88) 4%, rgba(var(--purple-rgb), .25) 62%, rgba(var(--purple-rgb), .35));
}
.kc-band__inner { position: relative; z-index: 2; max-width: 620px; }
.kc-band__title { font-size: clamp(1.9rem, 4vw, 3rem); color: #fff; margin: 0 0 16px; }
.kc-band__text { color: rgba(255, 255, 255, .84); margin-bottom: 28px; }


/* == Split (training) ===================================================== */

.kc-split {
	display: grid;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.kc-split { grid-template-columns: 1fr 1fr; }
	.kc-split--flip .kc-split__media { order: 2; }
}
.kc-split__media .kc-ratio { aspect-ratio: 4 / 3; }

.kc-checks {
	list-style: none;
	margin: 26px 0 30px;
	padding: 0;
	display: grid;
	gap: 16px;
}
.kc-checks li {
	display: grid;
	gap: 2px;
	padding-left: 26px;
	position: relative;
}
.kc-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 10px;
	height: 10px;
	background: var(--gold);
	transform: rotate(45deg);
}
.kc-checks .kc-pairs__k { font-weight: 500; }
.kc-checks .kc-pairs__v { color: var(--muted); font-size: var(--fs-sm); }


/* == Portfolio ============================================================ */

.kc-work {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--purple-deep);
	cursor: zoom-in;
}
.kc-work img, .kc-work .kc-img--empty {
	aspect-ratio: 4 / 5;
	transition: transform .8s var(--ease), opacity .4s var(--ease-soft);
}
.kc-work:hover img { transform: scale(1.06); opacity: .82; }

.kc-work__cap {
	position: absolute;
	inset: auto 0 0 0;
	padding: 44px 18px 16px;
	background: linear-gradient(to top, rgba(var(--purple-rgb), .9), transparent);
	color: #fff;
	font-size: var(--fs-sm);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .35s var(--ease-soft), transform .35s var(--ease);
}
.kc-work:hover .kc-work__cap,
.kc-work:focus-visible .kc-work__cap { opacity: 1; transform: none; }

.kc-work__title { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.kc-work__meta { display: block; color: rgba(255, 255, 255, .7); font-size: var(--fs-xs); }

/* Filters */
.kc-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 36px;
	padding: 0;
	list-style: none;
}
.kc-filters button {
	padding: 9px 18px;
	border: 1px solid var(--line);
	background: none;
	color: var(--muted);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	letter-spacing: .04em;
	cursor: pointer;
	transition: all .25s var(--ease-soft);
}
.kc-filters button:hover { border-color: var(--purple); color: var(--purple); }
.kc-filters button[aria-pressed="true"] {
	background: var(--purple);
	border-color: var(--purple);
	color: #fff;
}

.kc-work-item.is-hidden { display: none; }

/* Lightbox */
.kc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 8000;
	display: grid;
	place-items: center;
	padding: clamp(16px, 4vw, 56px);
	background: rgba(var(--purple-rgb), .94);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s var(--ease-soft), visibility .3s;
}
.kc-lightbox.is-open { opacity: 1; visibility: visible; }
.kc-lightbox img {
	max-width: 100%;
	max-height: 82vh;
	width: auto;
	object-fit: contain;
	transform: scale(.97);
	transition: transform .35s var(--ease);
}
.kc-lightbox.is-open img { transform: none; }
.kc-lightbox__cap {
	margin-top: 16px;
	color: rgba(255, 255, 255, .78);
	font-size: var(--fs-sm);
	text-align: center;
}
.kc-lightbox__btn {
	position: absolute;
	top: 50%;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .3);
	background: none;
	color: #fff;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background .25s var(--ease-soft);
}
.kc-lightbox__btn:hover { background: rgba(255, 255, 255, .16); }
.kc-lightbox__btn--prev { left: clamp(8px, 2vw, 28px); }
.kc-lightbox__btn--next { right: clamp(8px, 2vw, 28px); }
.kc-lightbox__close { top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); transform: none; }


/* == Testimonials ========================================================= */

.kc-review {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 32px 30px;
	background: var(--surface);
	border: 1px solid var(--line-soft);
	border-top: 2px solid var(--gold);
}

.kc-stars { display: flex; gap: 3px; color: var(--gold); }

.kc-review__quote { margin: 0; font-size: var(--fs-lg); line-height: 1.55; }
.kc-review__quote p:last-child { margin-bottom: 0; }
.kc-review__quote p::before { content: "\201C"; }
.kc-review__quote p:last-of-type::after { content: "\201D"; }

.kc-review__by { margin-top: auto; }
.kc-review__name {
	display: block;
	font-weight: 500;
	letter-spacing: .02em;
}
.kc-review__role {
	display: block;
	font-size: var(--fs-sm);
	color: var(--muted);
}


/* == FAQ ================================================================== */

.kc-faq { max-width: 840px; margin-inline: auto; border-top: 1px solid var(--line); }

.kc-faq__item { border-bottom: 1px solid var(--line); }

.kc-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 0;
	list-style: none;
	cursor: pointer;
	font-family: var(--font-display);
	font-size: clamp(1.05rem, 1.8vw, 1.3rem);
	transition: color .25s var(--ease-soft);
}
.kc-faq__q::-webkit-details-marker { display: none; }
.kc-faq__q:hover { color: var(--purple); }

.kc-faq__sign {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--line);
	color: var(--purple);
	transition: transform .35s var(--ease), background .25s var(--ease-soft), color .25s var(--ease-soft);
}
.kc-faq__item[open] .kc-faq__sign {
	transform: rotate(135deg);
	background: var(--purple);
	color: #fff;
	border-color: var(--purple);
}

.kc-faq__a {
	padding: 0 60px 24px 0;
	color: var(--muted);
}
/* Set by the accordion script so the answer can slide rather than jump. */
.kc-faq__item[open] .kc-faq__a { animation: kc-open .35s var(--ease) both; }
@keyframes kc-open {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}


/* == Reassurance row ====================================================== */

.kc-pairs { margin: 0; padding: 0; list-style: none; }

.kc-badges {
	display: grid;
	gap: clamp(22px, 3vw, 40px);
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) { .kc-badges { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .kc-badges { grid-template-columns: 1fr; } }

.kc-badges li { padding-top: 18px; border-top: 1px solid var(--line); }
.kc-badges .kc-pairs__k {
	display: block;
	margin-bottom: 6px;
	font-family: var(--font-display);
	font-size: 1.1rem;
}
.kc-badges .kc-pairs__v {
	display: block;
	color: var(--muted);
	font-size: var(--fs-sm);
}


/* == Instagram strip ====================================================== */

.kc-ig__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
@media (max-width: 900px) { .kc-ig__grid { grid-template-columns: repeat(3, 1fr); } }

.kc-ig__cell { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--cream-2); }
.kc-ig__cell img { transition: transform .7s var(--ease), opacity .3s var(--ease-soft); }
.kc-ig__cell:hover img { transform: scale(1.07); opacity: .85; }

.kc-ig__handle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 26px;
	font-size: var(--fs-sm);
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}
.kc-ig__handle:hover { color: var(--gold-deep); }


/* == Page headers ========================================================= */

.kc-pagehead {
	position: relative;
	padding-top: calc(var(--header-h) + clamp(48px, 6vw, 88px));
	padding-bottom: clamp(40px, 5vw, 72px);
	text-align: center;
	overflow: hidden;
}
.kc-pagehead--plain {
	padding-top: clamp(40px, 5vw, 72px);
	border-bottom: 1px solid var(--line);
}
.kc-pagehead--image { background: var(--purple-deep); color: #fff; }
.kc-pagehead__bg { position: absolute; inset: 0; }
.kc-pagehead__bg img { width: 100%; height: 100%; object-fit: cover; }
.kc-pagehead__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(var(--purple-rgb), .72), rgba(var(--purple-rgb), .82));
}
.kc-pagehead__inner { position: relative; z-index: 2; }
.kc-pagehead__title {
	font-size: clamp(2.1rem, 5vw, 3.6rem);
	margin: 0;
}
.kc-pagehead--image .kc-pagehead__title { color: #fff; }
.kc-pagehead__text {
	max-width: 640px;
	margin: 18px auto 0;
	color: var(--muted);
	font-size: var(--fs-lg);
}
.kc-pagehead--image .kc-pagehead__text { color: rgba(255, 255, 255, .82); }


/* == Prose ================================================================ */

.kc-prose {
	max-width: 720px;
	margin-inline: auto;
	font-size: var(--fs-lg);
}
.kc-prose > * + * { margin-top: 1.15em; }
.kc-prose h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-top: 1.8em; }
.kc-prose h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin-top: 1.6em; }
.kc-prose img, .kc-prose figure { margin-block: 2em; }
.kc-prose blockquote {
	margin: 2em 0;
	padding: 4px 0 4px 26px;
	border-left: 2px solid var(--gold);
	font-family: var(--font-display);
	font-size: 1.2em;
	font-style: italic;
}
.kc-prose a { color: var(--purple); text-decoration-color: rgba(var(--gold-rgb), .8); }
.kc-prose ul, .kc-prose ol { padding-left: 1.3em; }
.kc-prose li + li { margin-top: .4em; }
.kc-prose .alignwide { width: min(100vw - var(--gutter) * 2, 1080px); margin-inline: calc(50% - min(50vw - var(--gutter), 540px)); max-width: none; }


/* == About ================================================================ */

.kc-values {
	display: grid;
	gap: clamp(24px, 3vw, 44px);
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 860px) { .kc-values { grid-template-columns: 1fr; } }
.kc-values li { padding-top: 22px; border-top: 2px solid var(--gold); }
.kc-values .kc-pairs__k {
	display: block;
	margin-bottom: 8px;
	font-family: var(--font-display);
	font-size: 1.3rem;
}
.kc-values .kc-pairs__v { display: block; color: var(--muted); }

.kc-person {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}
.kc-person__name { display: block; font-family: var(--font-display); font-size: 1.2rem; }
.kc-person__role { display: block; font-size: var(--fs-sm); color: var(--muted); }


/* == Contact ============================================================== */

.kc-contact__grid {
	display: grid;
	gap: clamp(32px, 5vw, 72px);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 940px) {
	.kc-contact__grid { grid-template-columns: 1.15fr .85fr; }
}

.kc-contact__card {
	padding: clamp(26px, 3vw, 38px);
	background: var(--cream-2);
	border-top: 2px solid var(--gold);
}
.kc-contact__list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 16px; }
.kc-contact__list li { display: flex; gap: 12px; align-items: flex-start; }
.kc-contact__list svg { flex: none; margin-top: 4px; color: var(--gold-deep); }
.kc-contact__list a { text-decoration: none; }
.kc-contact__list a:hover { text-decoration: underline; }

.kc-map { margin-top: clamp(40px, 5vw, 72px); }
.kc-map iframe { width: 100%; height: clamp(280px, 40vw, 460px); border: 0; display: block; filter: saturate(.9); }

.kc-hours { margin: 0; display: grid; gap: 10px; }
.kc-hours > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 9px;
	border-bottom: 1px dashed var(--line);
	font-size: var(--fs-sm);
}
.kc-hours dt { color: var(--muted); }
.kc-hours dd { margin: 0; font-weight: 500; }
/* The footer column is too narrow for a two-up row — "Tuesday – Saturday" and
   "9:00am – 6:00pm" both wrap. Stacked, each line gets the full width. */
.kc-hours--footer > div {
	display: block;
	border-bottom-color: rgba(255, 255, 255, .16);
}
.kc-hours--footer dt { color: var(--on-purple-dim); margin-bottom: 2px; }
.kc-hours--compact { margin-top: 24px; max-width: 340px; }


/* == Booking ============================================================== */

.kc-amelia { margin-top: clamp(28px, 4vw, 48px); }
.kc-amelia .amelia-app-booking { max-width: none; }

.kc-booking-fallback { margin-top: clamp(28px, 4vw, 48px); }
.kc-booking-fallback__inner {
	max-width: 680px;
	margin-inline: auto;
	padding: clamp(28px, 4vw, 44px);
	background: var(--cream-2);
	border-top: 2px solid var(--gold);
	text-align: center;
}
.kc-booking-fallback__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
}
.kc-booking-fallback .kc-hours { margin-inline: auto; text-align: left; }


/* == Blog ================================================================= */

.kc-post-card { background: var(--surface); border: 1px solid var(--line-soft); height: 100%; }
.kc-post-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}
.kc-post-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.kc-post-card__media img, .kc-post-card__media .kc-img--empty {
	position: absolute;
	inset: 0;
	transition: transform .7s var(--ease);
}
.kc-post-card:hover .kc-post-card__media img { transform: scale(1.05); }
.kc-post-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.kc-post-card__date {
	margin: 0 0 8px;
	font-size: var(--fs-xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gold-deep);
}
.kc-post-card__title { font-size: 1.25rem; margin: 0 0 10px; }
.kc-post-card__excerpt { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 18px; }
.kc-post-card__more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	font-size: var(--fs-sm);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--purple);
}
.kc-post-card:hover .kc-post-card__more svg { transform: translateX(4px); }
.kc-post-card__more svg { transition: transform .3s var(--ease); }

.kc-blog__layout {
	display: grid;
	gap: clamp(32px, 4vw, 64px);
	grid-template-columns: 1fr;
}
@media (min-width: 1000px) {
	.kc-blog__layout--sidebar { grid-template-columns: minmax(0, 1fr) 300px; }
}

.widget { margin-bottom: 36px; font-size: var(--fs-sm); }
.widget__title { font-size: 1.1rem; margin-bottom: 12px; }
.widget ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.widget a { text-decoration: none; }
.widget a:hover { text-decoration: underline; }

.kc-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	justify-content: center;
	margin-top: 18px;
	font-size: var(--fs-sm);
	color: var(--muted);
}

.kc-single__hero { margin-bottom: clamp(32px, 4vw, 56px); }
.kc-single__hero img { width: 100%; }

.kc-pagination { margin-top: clamp(40px, 5vw, 64px); }
.kc-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.kc-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--line);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: all .25s var(--ease-soft);
}
.kc-pagination .page-numbers:hover { border-color: var(--purple); }
.kc-pagination .page-numbers.current {
	background: var(--purple);
	border-color: var(--purple);
	color: #fff;
}

.comment-list { list-style: none; padding: 0; }
.comment-list li { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line-soft); }
.comment-form { display: grid; gap: 4px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--line);
	background: var(--surface);
	font-family: var(--font-body);
	font-size: var(--fs-base);
}
.comment-form .submit {
	justify-self: start;
	padding: 14px 26px;
	border: 0;
	background: var(--purple);
	color: #fff;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	letter-spacing: .07em;
	text-transform: uppercase;
	cursor: pointer;
}


/* == WooCommerce ========================================================== */

.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-top-color: var(--gold) !important;
	background: var(--cream-2);
	font-size: var(--fs-sm);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--gold-deep) !important; }

.woocommerce ul.products {
	display: grid !important;
	gap: clamp(20px, 2.4vw, 34px);
	grid-template-columns: repeat(4, 1fr);
	margin: 0 !important;
	padding: 0;
	list-style: none;
}
@media (max-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	background: var(--surface);
	border: 1px solid var(--line-soft);
	padding: 0 0 22px;
	text-align: center;
	transition: border-color .35s var(--ease-soft), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.woocommerce ul.products li.product:hover {
	border-color: rgba(var(--gold-rgb), .55);
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}
.woocommerce ul.products li.product img { margin-bottom: 18px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-size: 1.1rem !important;
	padding: 0 18px !important;
	margin-bottom: 6px;
}
.woocommerce ul.products li.product .price {
	color: var(--purple) !important;
	font-family: var(--font-display);
	font-size: 1.15rem;
}
.woocommerce ul.products li.product .button {
	margin-top: 14px;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	padding: 13px 24px;
	border-radius: var(--radius);
	background: var(--purple);
	color: #fff;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: .07em;
	text-transform: uppercase;
	transition: background .3s var(--ease-soft), color .3s var(--ease-soft);
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--gold);
	color: var(--purple);
}

.woocommerce span.onsale {
	border-radius: 0;
	background: var(--gold);
	color: var(--purple);
	font-size: var(--fs-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	min-height: 0;
	line-height: 1;
	padding: 8px 12px;
	min-width: 0;
}

.woocommerce div.product .product_title { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.woocommerce div.product p.price, .woocommerce div.product span.price {
	color: var(--purple);
	font-family: var(--font-display);
	font-size: 1.6rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border-radius: 0;
	background: var(--cream-2);
	border-color: var(--line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--surface); }

.woocommerce .quantity .qty {
	padding: 10px;
	border: 1px solid var(--line);
	font-family: var(--font-body);
}

/* The bag drawer */
.kc-bag__lines { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 18px; }
.kc-bag__line { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: start; }
.kc-bag__line img { width: 76px; aspect-ratio: 3 / 4; object-fit: cover; }
.kc-bag__name { display: block; font-family: var(--font-display); font-size: 1.02rem; text-decoration: none; }
.kc-bag__vari { display: block; font-size: var(--fs-xs); color: var(--muted); }
.kc-bag__qty { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.kc-bag__qty button {
	width: 28px; height: 28px;
	display: grid; place-items: center;
	border: 1px solid var(--line);
	background: none;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
}
.kc-bag__qty button:hover { border-color: var(--purple); }
.kc-bag__qty span { min-width: 20px; text-align: center; font-size: var(--fs-sm); }
.kc-bag__price { font-family: var(--font-display); }
.kc-bag__remove {
	display: block;
	margin-top: 8px;
	border: 0;
	background: none;
	padding: 0;
	font-size: var(--fs-xs);
	color: var(--muted);
	text-decoration: underline;
	cursor: pointer;
}
.kc-bag__foot { padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.kc-bag__total { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: 1.15rem; }
.kc-bag__empty { text-align: center; color: var(--muted); padding: 40px 0; }
.kc-bag.is-busy { opacity: .6; pointer-events: none; }


/* == CTA, newsletter, footer ============================================== */

.kc-cta { background: var(--purple); color: #fff; }
.kc-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	padding-block: clamp(44px, 6vw, 80px);
}
.kc-cta__title { font-size: clamp(1.7rem, 3.4vw, 2.6rem); color: #fff; margin: 0; }
.kc-cta__sub { margin: 10px 0 0; color: rgba(255, 255, 255, .75); max-width: 48ch; }
.kc-cta__act { display: flex; flex-wrap: wrap; gap: 12px; }

.kc-news { background: var(--cream-2); }
.kc-news__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	padding-block: clamp(40px, 5vw, 64px);
}

/*
 * A grid once there is room for one. Under flex the form only got whatever the
 * headline left over, which was never quite enough for the field and the button
 * side by side — so the button dropped to its own line at every desktop width.
 * Reserving the column is the fix; flex-basis on the field is not.
 */
@media (min-width: 880px) {
	.kc-news__inner {
		display: grid;
		grid-template-columns: 1fr minmax(380px, 460px);
		gap: 40px;
	}
}
.kc-news__text { max-width: 46ch; }
.kc-news__title { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 8px; }
.kc-news__text p { color: var(--muted); margin: 0; }
.kc-news__form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* Grow into whatever the row leaves rather than claiming a fixed width, which
   pushed the button onto its own line at most desktop widths. */
.kc-news__form .kc-input { flex: 1 1 240px; min-width: 0; }
.kc-news__form .kc-btn { flex: 0 0 auto; }
.kc-news__msg { flex-basis: 100%; margin: 0; }

.kc-footer { background: var(--purple); color: var(--on-purple); }
.kc-footer__top {
	display: grid;
	gap: clamp(30px, 4vw, 56px);
	grid-template-columns: 1.6fr 1fr 1.2fr 1.1fr;
	padding-block: clamp(48px, 6vw, 84px) clamp(32px, 4vw, 48px);
}
@media (max-width: 1000px) { .kc-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .kc-footer__top { grid-template-columns: 1fr; } }

.kc-footer__logo { width: 200px; height: auto; margin-bottom: 18px; }
.kc-footer__blurb { color: var(--on-purple-dim); font-size: var(--fs-sm); max-width: 38ch; }

.kc-footer__h {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 18px;
}

.kc-footer__list, .kc-footer__contact, .kc-footer__legallist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 11px;
	font-size: var(--fs-sm);
}
.kc-footer__list a, .kc-footer__contact a {
	text-decoration: none;
	color: var(--on-purple-dim);
	transition: color .25s var(--ease-soft);
}
.kc-footer__list a:hover, .kc-footer__contact a:hover { color: #fff; }
.kc-footer__contact li { display: flex; gap: 10px; align-items: flex-start; color: var(--on-purple-dim); }
.kc-footer__contact svg { flex: none; margin-top: 4px; color: var(--gold); }
.kc-footer__col .kc-btn { margin-top: 20px; }

.kc-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-block: 22px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: var(--fs-xs);
	color: var(--on-purple-dim);
}
.kc-footer__credit { margin: 0; }
.kc-footer__legallist { display: flex; gap: 20px; }
.kc-footer__legallist a { text-decoration: none; }
.kc-footer__legallist a:hover { color: #fff; }

.kc-socials { display: flex; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.kc-socials a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, .22);
	color: inherit;
	transition: background .25s var(--ease-soft), border-color .25s var(--ease-soft), color .25s var(--ease-soft);
}
.kc-socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--purple); }


/* == WhatsApp ============================================================= */

.kc-wa {
	position: fixed;
	right: clamp(14px, 2.5vw, 28px);
	bottom: clamp(14px, 2.5vw, 28px);
	z-index: 400;
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: 56px;
	padding: 0 15px;
	border-radius: 28px;
	background: #25D366;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .5);
	/* Only transform, which is composited. The pill's growth is the label's job
	   below — animating the button's own gap and padding as well meant three
	   layout properties re-laying out on every frame of the hover to produce
	   exactly this. */
	transition: transform .3s var(--ease);
}
.kc-wa:hover { transform: translateY(-2px); }

/*
 * Expand-to-reveal. max-width is the one layout property here that has no
 * composited equivalent: scaleX would squash the letterforms, and the label's
 * width is not known ahead of time. It is one small fixed-position element
 * animating on hover, so it reflows nothing but itself.
 *
 * The 10px of separation lives in the label's own padding, and is deliberately
 * left out of the transition so it snaps rather than animates. max-width: 0
 * cannot shrink a box below its own padding — border-box or not — so animating
 * the padding too would be the only way to reach a clean circle, and that is
 * the layout animation this is avoiding. Snapping it is invisible at the start
 * of a hover and leaves the resting button a true 56px pill.
 */
.kc-wa__label {
	max-width: 0;
	padding-left: 0;
	overflow: hidden;
	white-space: nowrap;
	font-size: var(--fs-sm);
	font-weight: 500;
	transition: max-width .35s var(--ease);
}
.kc-wa:hover .kc-wa__label { max-width: 170px; padding-left: 10px; }

@media (max-width: 700px) {
	/* The button sits where a thumb rests, so it stays a plain circle on a phone. */
	.kc-wa:hover .kc-wa__label { max-width: 0; }
}


/* == Breakpoints ========================================================== */

@media (max-width: 1080px) {
	.kc-header__nav { display: none; }
	.kc-header .kc-header__burger { display: inline-flex; }
	.kc-header__side { flex: 0 0 auto; }
	.kc-header__side--l { flex: 1; }
	.kc-header__bar { justify-content: space-between; }
}

@media (max-width: 860px) {
	.kc-hide-sm { display: none !important; }
}

@media (max-width: 700px) {
	.kc-hero { min-height: 78vh; }
	.kc-hero__acts .kc-btn { flex: 1 1 100%; }
	.kc-faq__a { padding-right: 0; }
	.kc-cta__inner, .kc-news__inner { flex-direction: column; align-items: flex-start; }
	.kc-news__form .kc-input { min-width: 0; flex: 1; }
}


/* == Preferences and print ================================================ */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	[data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media print {
	.kc-header, .kc-announce, .kc-cta, .kc-news, .kc-wa, .kc-footer__top, .kc-scrim, .kc-drawer, .kc-bag { display: none !important; }
	body { background: #fff; color: #000; }
	[data-reveal] { opacity: 1 !important; transform: none !important; }
}
