/*
Theme Name: Kimnara Space
Theme URI: https://kimnaraspace.com/
Author: COCO Social Fund
Author URI: https://cocosocialfund.org/
Description: Landing page theme for Kimnara Space, Cepaka — a creative hub for a sustainable community. Stacked colour blocks with rounded top edges, variable-font headline morphs driven by scroll, scroll-linked product rows, and a hover-driven menu. No page builder required.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.7
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: kimnara-space
Tags: one-column, custom-logo, custom-menu, featured-images, full-width-template, landing-page, translation-ready
*/

/* ===========================================================================
 * 1. Tokens
 *
 * The palette is pulled from the brand mark itself: the logo is a single
 * cream (#F6F7EE) on transparent, so cream is the constant and everything
 * else is built underneath it. Greens carry the rice field the venue wraps
 * around; clay is the one warm accent, used sparingly so it stays loud.
 *
 * The --ks- prefix is not decorative. The Management Event plugin ships its
 * own theme layer that already owns --kim-, where --kim-ink is the LIGHT text
 * colour and --kim-font-display is Cormorant — the opposite of what they mean
 * here. This stylesheet loads after that one, so sharing the prefix painted
 * the plugin's body copy near-black on a near-black page. Do not move back.
 * ======================================================================== */
:root {
	--ks-cream: #f6f7ee;
	--ks-paper: #edefe1;
	--ks-ink: #0e1611;
	--ks-forest: #16261c;
	--ks-moss: #24382a;
	--ks-clay: #c4703f;
	--ks-crema: #d9b48c;
	--ks-gold: #c8a96b;
	--ks-sage: #97a88a;

	/* Overwritten from functions.php so the Customizer can retune them. */
	--ks-accent: var(--ks-clay);

	--ks-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	/* The text voice. Urbanist, because it is the typeface the Kimnara
	   wordmark is closest to: the same splayed M whose middle vertex reaches
	   the baseline, the same narrow geometric K, A and R. Poppins and Outfit
	   look related but both stand their M upright. */
	--ks-font-text: "Urbanist", "Helvetica Neue", Arial, sans-serif;
	--ks-font-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;

	/* The stacked-block look: a rounded top edge plus a hairline in the
	   colour of the section above. Both are static — no pinning involved. */
	--ks-block-radius: 24px;
	--ks-gutter: clamp(20px, 5vw, 72px);
	--ks-section-y: clamp(72px, 10vw, 152px);
	--ks-maxw: 1440px;
}

/* ===========================================================================
 * 2. Reset and base
 * ======================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: auto; /* Lenis owns scrolling; native smooth would fight it. */
}

body.kimnara-space {
	margin: 0;
	background-color: var(--ks-ink);
	color: var(--ks-cream);
	font-family: var(--ks-font-ui);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.55;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol {
	margin: 0;
}

ul, ol {
	padding: 0;
	list-style: none;
}

::selection {
	background: var(--ks-clay);
	color: var(--ks-cream);
}

.kim-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.kim-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 999;
	padding: 12px 20px;
	background: var(--ks-cream);
	color: var(--ks-ink);
	border-radius: 999px;
}

.kim-skip-link:focus {
	top: 16px;
}

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

/* ===========================================================================
 * 3. Section shell
 *
 * Every block sits above the one before it with a rounded top edge and a 1px
 * hairline. That, plus hard colour contrast, is the entire "stacking" effect
 * — there is no sticky positioning anywhere in this theme.
 * ======================================================================== */
.kim-block,
.kim-marquee {
	/* Every block overlaps the one before it by exactly its corner radius, so
	   the rounded top corners reveal that block's colour. Without the overlap
	   the corners cut through to the body background and each seam reads as
	   two dark slivers. */
	margin-top: calc(var(--ks-block-radius) * -1);
}

.kim-block {
	position: relative;
	z-index: 1;
	padding: calc(var(--ks-section-y) + var(--ks-block-radius)) 0;
	border-top-left-radius: var(--ks-block-radius);
	border-top-right-radius: var(--ks-block-radius);
	border-top: 1px solid transparent;
}

.kim-block--cream {
	background: var(--ks-cream);
	color: var(--ks-forest);
	border-top-color: var(--ks-clay);
}

.kim-block--paper {
	background: var(--ks-paper);
	color: var(--ks-forest);
	border-top-color: var(--ks-clay);
}

.kim-block--forest {
	background: var(--ks-forest);
	color: var(--ks-cream);
	border-top-color: rgba(151, 168, 138, 0.55);
}

.kim-block--ink {
	background: var(--ks-ink);
	color: var(--ks-cream);
	border-top-color: rgba(246, 247, 238, 0.26);
}

.kim-block--clay {
	background: var(--ks-clay);
	color: var(--ks-cream);
	border-top-color: var(--ks-cream);
}

.kim-shell {
	width: 100%;
	max-width: var(--ks-maxw);
	margin: 0 auto;
	padding: 0 var(--ks-gutter);
}

/* A section label: small caps, tracked out, with a leading rule. */
.kim-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	opacity: 0.7;
}

.kim-eyebrow::before {
	content: "";
	width: 32px;
	height: 1px;
	background: currentColor;
	flex: none;
}

/* The oversized word that sits behind a section's content. */
.kim-ghost-word {
	font-family: var(--ks-font-display);
	font-size: clamp(44px, 13vw, 200px);
	font-weight: 800;
	line-height: 0.82;
	white-space: nowrap;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	pointer-events: none;
	user-select: none;
}

/* ===========================================================================
 * 4. Headline morph
 *
 * The signature move. Each line steps through weight + width while its
 * letter-spacing collapses, so the line appears to harden into place without
 * ever changing how much room it takes. Needs a variable font with both a
 * `wght` and a `wdth` axis — Archivo has both.
 * ======================================================================== */
.kim-morph {
	font-family: var(--ks-font-display);
	text-transform: uppercase;
	line-height: 0.9;
	margin: 0;
	/* Stage one of the morph tracks the line out well past its resting width.
	   Clipping is what keeps that from forcing a horizontal scrollbar; the
	   padding/margin pair buys back the descenders the clip would eat. */
	overflow: hidden;
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}

.kim-morph__line {
	display: block;
	/* A line that rewraps mid-morph would reflow the entire block on every
	   frame. It stays on one row and overflows into the clip instead. */
	white-space: nowrap;
	font-variation-settings: "wght" 800, "wdth" 100;
	letter-spacing: -0.01em;
	will-change: font-variation-settings, letter-spacing;
}

/* Without a variable font the axes are ignored, so pin a static weight that
   reads the same at rest. */
@supports not (font-variation-settings: "wght" 800) {
	.kim-morph__line {
		font-weight: 800;
	}
}

/* A mid-size morph heading, for sections that are not the hero. */
.kim-morph--md {
	margin-top: clamp(18px, 2.4vw, 30px);
	font-size: clamp(26px, 5.4vw, 78px);
}

/* The plain (non-morphing) section heading. */
.kim-section-title {
	margin-top: clamp(18px, 2.4vw, 30px);
	font-family: var(--ks-font-display);
	font-size: clamp(36px, 7vw, 100px);
	font-weight: 800;
	line-height: 0.96;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

/* ===========================================================================
 * 5. Buttons and pills
 * ======================================================================== */
.kim-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 24px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.kim-pill:hover,
.kim-pill:focus-visible {
	background: var(--ks-clay);
	border-color: var(--ks-clay);
	color: var(--ks-cream);
}

.kim-pill--solid {
	background: var(--ks-clay);
	border-color: var(--ks-clay);
	color: var(--ks-cream);
}

.kim-pill--solid:hover,
.kim-pill--solid:focus-visible {
	background: transparent;
	color: inherit;
	border-color: currentColor;
}

/* ===========================================================================
 * 6. Sticky reservation badge
 *
 * The only genuinely fixed element on the page. It never hides, never
 * resizes, never changes colour — only the status dot moves.
 * ======================================================================== */
.kim-badge {
	position: fixed;
	right: clamp(16px, 3vw, 32px);
	bottom: clamp(16px, 3vw, 32px);
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 22px;
	background: var(--ks-cream);
	color: var(--ks-ink);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
}

.kim-badge__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ks-clay);
	flex: none;
	animation: kim-pulse 2s ease-in-out infinite;
}

@keyframes kim-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(0.75); }
}

/* ===========================================================================
 * 7. Custom cursor
 *
 * `difference` blending is what flips it from cream to green as it crosses a
 * block boundary, so no per-section bookkeeping is needed.
 * ======================================================================== */
.kim-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 90;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	background: var(--ks-cream);
	mix-blend-mode: difference;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.kim-cursor.is-active {
	opacity: 1;
}

/* Pointer devices only. A touch screen has no cursor to replace. */
@media (hover: none), (pointer: coarse) {
	.kim-cursor { display: none; }
}

/* ===========================================================================
 * 8. S01 — Hero
 * ======================================================================== */
.kim-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--ks-ink);
	color: var(--ks-cream);
	padding: 0;
	border-radius: 0;
	border-top: 0;
}

.kim-hero__media {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.kim-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.8s ease;
}

.kim-hero__slide.is-active {
	opacity: 1;
}

.kim-hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Two stops, not one: the top keeps the nav legible, the bottom carries the
   headline, and the middle stays open so the photograph still reads. */
.kim-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(to bottom, rgba(14, 22, 17, 0.72) 0%, rgba(14, 22, 17, 0.16) 30%, rgba(14, 22, 17, 0.5) 62%, rgba(14, 22, 17, 0.93) 100%);
	pointer-events: none;
}

.kim-hero__inner {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 100%;
	max-width: var(--ks-maxw);
	margin: 0 auto;
	padding: clamp(20px, 3.4vw, 34px) var(--ks-gutter) clamp(24px, 4vw, 44px);
}

/* --- Top bar --- */
.kim-hero__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.kim-brand {
	display: flex;
	align-items: center;
	gap: 14px;
}

.kim-brand img {
	width: auto;
	height: clamp(28px, 3.4vw, 42px);
}

.kim-brand__text {
	font-family: var(--ks-font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.kim-nav {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px;
	background: rgba(246, 247, 238, 0.1);
	border: 1px solid rgba(246, 247, 238, 0.22);
	border-radius: 999px;
	backdrop-filter: blur(10px);
}

.kim-nav ul {
	display: flex;
	align-items: center;
	gap: 6px;
}

.kim-nav li {
	list-style: none;
}

.kim-nav a {
	display: block;
	padding: 9px 16px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.kim-nav a:hover,
.kim-nav a:focus-visible {
	background: var(--ks-cream);
	color: var(--ks-ink);
}

/* --- Wordmark + headline --- */
.kim-hero__body {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex: 1;
	padding-top: clamp(32px, 6vw, 80px);
}

/* The wordmark is its own layer so its mask can open without the headline
   shifting a single pixel. */
.kim-hero__wordmark {
	margin-bottom: clamp(14px, 2vw, 26px);
}

.kim-hero__wordmark img {
	width: auto;
	height: clamp(40px, 5vw, 72px);
	opacity: 0.92;
}

.kim-hero__headline {
	font-size: clamp(34px, 9.5vw, 140px);
}

.kim-hero__sub {
	max-width: 46ch;
	margin-top: clamp(18px, 2.4vw, 30px);
	font-family: var(--ks-font-text);
	font-size: clamp(16px, 1.45vw, 20px);
	font-weight: 400;
	line-height: 1.4;
	color: rgba(246, 247, 238, 0.88);
}

.kim-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: clamp(24px, 3vw, 38px);
}

/* --- Bottom row: thumbnails, clock, scroll hint --- */
.kim-hero__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	margin-top: clamp(32px, 5vw, 64px);
}

/* The badge is fixed to the bottom-right corner and its width does not change
   with the viewport, so the reserve for it must not either. Below 861px the
   foot stacks into a column and the two no longer meet. */
@media (min-width: 861px) {
	.kim-hero__foot {
		padding-right: 320px;
	}
}

.kim-thumbs {
	display: flex;
	gap: 10px;
}

.kim-thumb {
	position: relative;
	width: clamp(56px, 6.5vw, 86px);
	height: clamp(42px, 4.8vw, 64px);
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid transparent;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}

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

.kim-thumb.is-active {
	transform: scale(1.15);
	border-color: var(--ks-cream);
}

/* Sits inside the active thumbnail and runs the length of one slide. */
.kim-thumb__progress {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: var(--ks-clay);
	transform: scaleX(0);
	transform-origin: left center;
}

.kim-hero__meta {
	display: flex;
	align-items: flex-end;
	gap: clamp(20px, 3vw, 40px);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.kim-clock__value {
	display: block;
	font-family: var(--ks-font-display);
	font-size: 15px;
	letter-spacing: 0.08em;
}

.kim-clock__label,
.kim-scroll-hint span {
	opacity: 0.6;
}

.kim-scroll-hint {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.kim-scroll-hint::after {
	content: "";
	width: 1px;
	height: 28px;
	background: var(--ks-cream);
	animation: kim-scroll-hint 1.8s ease-in-out infinite;
}

@keyframes kim-scroll-hint {
	0%   { transform: scaleY(0); transform-origin: top; }
	50%  { transform: scaleY(1); transform-origin: top; }
	51%  { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ===========================================================================
 * 9. S02 — Manifesto
 * ======================================================================== */
.kim-manifesto__lines {
	margin-top: clamp(32px, 5vw, 64px);
	font-size: clamp(24px, 6.2vw, 92px);
	color: var(--ks-forest);
}

.kim-manifesto__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 3vw, 40px);
	max-width: 68ch;
	margin-top: clamp(36px, 5vw, 68px);
	margin-left: auto;
	font-family: var(--ks-font-text);
	font-weight: 400;
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.65;
	color: rgba(22, 38, 28, 0.86);
}

/* ===========================================================================
 * 10. S03 — Signatures (scroll-linked row, drifts left)
 * ======================================================================== */
.kim-signatures {
	overflow: hidden;
}

.kim-signatures__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.kim-signatures__lead {
	max-width: 34ch;
	margin: 0;
	font-family: var(--ks-font-text);
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.4;
	color: rgba(246, 247, 238, 0.66);
}

.kim-signatures__ghost {
	position: relative;
	z-index: 1;
	margin-top: clamp(20px, 3vw, 40px);
	color: rgba(246, 247, 238, 0.1);
}

/* Pulled up so the row overlaps the ghost word — the only relationship
   between them is z-index. */
.kim-row {
	position: relative;
	z-index: 2;
	display: flex;
	gap: clamp(24px, 4vw, 64px);
	margin-top: -6vw;
	padding: 0 var(--ks-gutter);
	width: max-content;
	cursor: grab;
	touch-action: pan-y;
}

[data-kim-row] {
	cursor: grab;
	touch-action: pan-y;
	will-change: transform;
}

[data-kim-row].is-dragging {
	cursor: grabbing;
}

.kim-row__viewport {
	overflow: hidden;
}

.kim-card-drink {
	width: clamp(190px, 21vw, 280px);
	flex: none;
	text-align: center;
	/* Set per item from PHP so the tilt is stable across reloads. */
	transform: rotate(var(--ks-tilt, 0deg));
}

.kim-card-drink__art {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 4;
	padding: 18px;
	border-radius: 14px;
	background: rgba(246, 247, 238, 0.05);
	border: 1px solid rgba(246, 247, 238, 0.14);
}

.kim-card-drink__art svg {
	width: 100%;
	height: auto;
}

/* A real photograph fills the frame edge to edge; the drawing needs the
   padding around it, so the padding goes when the photo arrives. */
.kim-card-drink__art--photo {
	padding: 0;
	overflow: hidden;
}

.kim-card-drink__art--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kim-card-drink__name {
	margin-top: 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.kim-card-drink__note {
	margin-top: 8px;
	font-family: var(--ks-font-text);
	font-size: 14px;
	line-height: 1.35;
	color: rgba(246, 247, 238, 0.62);
}

.kim-card-drink__price {
	margin-top: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--ks-crema);
}

.kim-drag-hint {
	display: block;
	margin: clamp(28px, 4vw, 48px) auto 0;
	width: fit-content;
	opacity: 0.55;
}

/* ===========================================================================
 * 11. S04 — Menu (hover driven)
 * ======================================================================== */
.kim-menu__layout {
	display: grid;
	/* minmax(0, …): the swipeable tab row must not stretch the column. */
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(32px, 4vw, 64px);
	margin-top: clamp(32px, 4vw, 56px);
}

@media (min-width: 900px) {
	.kim-menu__layout {
		grid-template-columns: minmax(0, 1fr) minmax(300px, 38%);
		align-items: start;
	}

	/* No photographs anywhere: the list runs alone, held to a readable
	   measure so a price never sits a screen-width away from its dish. */
	.kim-menu__layout--solo {
		grid-template-columns: minmax(0, 1fr);
		max-width: 880px;
	}
}

.kim-menu__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: clamp(18px, 2.4vw, 28px);
}

/* Phones: one row that swipes sideways instead of a wall of wrapped pills
   once a menu has more than a handful of categories. The row bleeds to the
   screen edges, so a pill cut off at the edge says there is more. */
@media (max-width: 899px) {
	.kim-menu__tabs {
		flex-wrap: nowrap;
		margin-inline: calc(-1 * var(--ks-gutter));
		padding: 2px var(--ks-gutter);
		overflow-x: auto;
		scroll-padding-inline: var(--ks-gutter);
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}

	.kim-menu__tabs::-webkit-scrollbar {
		display: none;
	}

	.kim-menu__tab {
		flex: none;
	}
}

.kim-menu__tab {
	padding: 10px 20px;
	border: 1px solid rgba(22, 38, 28, 0.28);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.kim-menu__tab[aria-selected="true"] {
	background: var(--ks-forest);
	border-color: var(--ks-forest);
	color: var(--ks-cream);
}

.kim-menu__panel[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Menu with many categories (past `kim_menu_compact_after`): an instant
 * search on every screen, and on phones one category picker opening a
 * bottom sheet in place of the tab row. `.is-compact` is set by the script,
 * so without it the tabs stay.
 * ------------------------------------------------------------------------ */
.kim-menu__controls {
	display: grid;
	gap: 10px;
	margin-bottom: clamp(18px, 2.4vw, 28px);
}

.kim-menu__controls[hidden],
.kim-menu__group-title[hidden],
.kim-menu__empty[hidden],
.kim-menu__item[hidden] {
	display: none;
}

.kim-menu__search {
	position: relative;
	max-width: 440px;
}

.kim-menu__search svg {
	position: absolute;
	top: 50%;
	left: 18px;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	opacity: 0.55;
	pointer-events: none;
}

.kim-menu__search-input {
	width: 100%;
	min-height: 48px;
	padding: 0 18px 0 46px;
	border: 1px solid rgba(22, 38, 28, 0.28);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.6);
	color: var(--ks-forest);
	font-family: var(--ks-font-text);
	/* 16px or more: iOS does not zoom the page when the field takes focus. */
	font-size: 16px;
	-webkit-appearance: none;
	appearance: none;
}

.kim-menu__search-input::placeholder {
	color: rgba(22, 38, 28, 0.55);
}

.kim-menu__search-input:focus-visible {
	outline: 2px solid var(--ks-forest);
	outline-offset: 2px;
}

/* Results from several categories sit together, each under its name. The
   titles only show while searching. */
.kim-menu__group-title {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.6;
}

/* Space between categories, never above the first one shown. */
.kim-menu__panel:not([hidden]) ~ .kim-menu__panel .kim-menu__group-title {
	margin-top: 34px;
}

/* While searching, the tabs are not what decides the list. */
.kim-menu__layout.is-searching .kim-menu__tab[aria-selected="true"] {
	background: transparent;
	color: inherit;
	border-color: rgba(22, 38, 28, 0.28);
}

.kim-menu__empty {
	padding: 22px 0;
	font-family: var(--ks-font-text);
	font-size: 17px;
	opacity: 0.7;
}

.kim-menu__picker {
	display: none;
}

@media (max-width: 899px) {
	.kim-menu__layout.is-compact .kim-menu__tabs {
		display: none;
	}

	/* Stays at the top of the screen while the list scrolls under it, and
	   leaves with the end of the section. */
	.kim-menu__layout.is-compact .kim-menu__controls {
		position: sticky;
		top: 0;
		z-index: 5;
		margin-inline: calc(-1 * var(--ks-gutter));
		padding: 10px var(--ks-gutter);
		background: var(--ks-cream);
	}

	.kim-menu__layout.is-compact .kim-menu__controls::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 14px;
		background: linear-gradient(var(--ks-cream), rgba(246, 247, 238, 0));
		pointer-events: none;
	}

	.kim-menu__search {
		max-width: none;
	}

	.kim-menu__picker {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		min-height: 48px;
		padding: 0 18px 0 20px;
		border-radius: 999px;
		background: var(--ks-forest);
		color: var(--ks-cream);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		text-align: left;
	}

	.kim-menu__picker-label {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.kim-menu__picker-count {
		flex: none;
		letter-spacing: 0.08em;
		opacity: 0.7;
	}

	.kim-menu__picker svg {
		flex: none;
		width: 16px;
		height: 16px;
	}

	.kim-menu__picker:focus-visible {
		outline: 2px solid var(--ks-forest);
		outline-offset: 3px;
	}
}

/* The page behind the sheet does not scroll. */
html.kim-sheet-open {
	overflow: hidden;
}

.kim-menu__sheet {
	width: 100%;
	max-width: 560px;
	max-height: 85vh;
	max-height: 85dvh;
	margin: auto auto 0;
	padding: 0;
	border: 0;
	border-radius: 24px 24px 0 0;
	background: var(--ks-cream);
	color: var(--ks-forest);
	box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25);
	overflow: hidden;
}

.kim-menu__sheet[open] {
	display: flex;
	flex-direction: column;
	animation: kim-sheet-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.kim-menu__sheet::backdrop {
	background: rgba(14, 22, 17, 0.55);
	animation: kim-sheet-fade 0.32s ease;
}

@keyframes kim-sheet-in {
	from { transform: translateY(100%); }
}

@keyframes kim-sheet-fade {
	from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.kim-menu__sheet[open],
	.kim-menu__sheet::backdrop {
		animation: none;
	}
}

/* A grab handle: says "sheet", and that it came up from the bottom. */
.kim-menu__sheet::before {
	content: "";
	flex: none;
	width: 40px;
	height: 4px;
	margin: 10px auto 0;
	border-radius: 2px;
	background: rgba(22, 38, 28, 0.2);
}

.kim-menu__sheet-head {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 20px 14px 24px;
}

.kim-menu__sheet-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.kim-menu__sheet-close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(22, 38, 28, 0.28);
	border-radius: 50%;
}

.kim-menu__sheet-close svg {
	width: 18px;
	height: 18px;
}

.kim-menu__sheet-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 2px 20px calc(22px + env(safe-area-inset-bottom));
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.kim-menu__sheet-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 58px;
	padding: 10px 14px;
	border: 1px solid rgba(22, 38, 28, 0.2);
	border-radius: 16px;
	font-family: var(--ks-font-text);
	font-size: 16px;
	line-height: 1.2;
	text-align: left;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.kim-menu__sheet-count {
	flex: none;
	font-family: var(--ks-font-ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	opacity: 0.55;
}

.kim-menu__sheet-item[aria-current="true"] {
	background: var(--ks-forest);
	border-color: var(--ks-forest);
	color: var(--ks-cream);
}

.kim-menu__sheet-item:focus-visible,
.kim-menu__sheet-close:focus-visible {
	outline: 2px solid var(--ks-forest);
	outline-offset: 2px;
}

.kim-menu__list {
	border-top: 1px solid rgba(22, 38, 28, 0.16);
}

.kim-menu__item {
	border-bottom: 1px solid rgba(22, 38, 28, 0.16);
}

.kim-menu__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: clamp(14px, 1.8vw, 22px) 0;
	text-align: left;
}

.kim-menu__name {
	font-family: var(--ks-font-text);
	letter-spacing: -0.01em;
	font-size: clamp(20px, 2.2vw, 30px);
	font-weight: 500;
	line-height: 1.1;
	opacity: 0.35;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.kim-menu__price {
	flex: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	opacity: 0.35;
	transition: opacity 0.35s ease;
}

.kim-menu__item.is-active .kim-menu__name {
	opacity: 1;
	transform: translateX(12px);
}

.kim-menu__item.is-active .kim-menu__price {
	opacity: 1;
}

/* Collapsed by default; GSAP animates the real height so the rows below
   glide down instead of snapping. */
.kim-menu__desc {
	overflow: hidden;
	height: 0;
	opacity: 0;
	transition: height 0.3s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.3s ease;
	font-family: var(--ks-font-text);
	font-size: 15px;
	line-height: 1.55;
	color: rgba(22, 38, 28, 0.72);
}

.kim-menu__desc p {
	padding: 0 0 18px 12px;
	max-width: 52ch;
}

/* Two stacked images: the incoming one fades in over the outgoing one, which
   a background-image swap cannot do without flashing. */
.kim-menu__figure {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: 16px;
	overflow: hidden;
	background: rgba(22, 38, 28, 0.08);
}

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

.kim-menu__figcaption {
	margin-top: 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.6;
}

@media (max-width: 899px) {
	.kim-menu__aside { display: none; }
}

/* ---------------------------------------------------------------------------
 * S04b — Promo
 * ------------------------------------------------------------------------ */
.kim-promo__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

@media (min-width: 860px) {
	.kim-promo__layout {
		grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	}

	/* With no image the text has the whole shell, so it should not sit in a
	   column half the page wide. */
	.kim-promo--plain .kim-promo__layout {
		grid-template-columns: 1fr;
	}
}

.kim-promo__figure {
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: 18px;
	overflow: hidden;
	background: rgba(246, 247, 238, 0.06);
}

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

.kim-promo__title {
	margin-top: clamp(14px, 2vw, 22px);
	font-family: var(--ks-font-display);
	font-size: clamp(30px, 4.6vw, 62px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.kim-promo__desc {
	max-width: 54ch;
	margin-top: clamp(14px, 1.8vw, 22px);
	font-family: var(--ks-font-text);
	font-size: clamp(16px, 1.35vw, 19px);
	line-height: 1.6;
	color: rgba(246, 247, 238, 0.84);
}

.kim-promo__cta {
	margin-top: clamp(20px, 2.6vw, 32px);
}

/* --- The code and its copy button --- */
.kim-code {
	margin-top: clamp(22px, 3vw, 34px);
}

.kim-code__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.6;
}

.kim-code__row {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	margin-top: 10px;
	border: 1px dashed rgba(246, 247, 238, 0.4);
	border-radius: 12px;
	overflow: hidden;
}

.kim-code__value {
	display: flex;
	align-items: center;
	padding: 13px clamp(16px, 2vw, 24px);
	font-family: var(--ks-font-display);
	font-size: clamp(16px, 1.8vw, 22px);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	/* The value is selectable so the button is a convenience, not the only
	   way to get the code out. */
	user-select: all;
}

.kim-code__copy {
	padding: 13px clamp(16px, 2vw, 22px);
	background: rgba(246, 247, 238, 0.1);
	border-left: 1px dashed rgba(246, 247, 238, 0.4);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.kim-code__copy:hover {
	background: var(--ks-clay);
	color: var(--ks-cream);
}

.kim-code__copy.is-copied {
	background: var(--ks-sage);
	color: var(--ks-ink);
}

/* The clipboard was refused and the code was selected instead. Marked
   differently from a real copy so the two are not confused. */
.kim-code__copy.is-selected {
	background: var(--ks-crema);
	color: var(--ks-ink);
}

/* --- Terms disclosure --- */
.kim-terms {
	margin-top: clamp(20px, 2.6vw, 30px);
	max-width: 62ch;
	border-top: 1px solid rgba(246, 247, 238, 0.16);
}

.kim-terms summary {
	padding: 14px 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0.62;
	list-style: none;
}

.kim-terms summary::-webkit-details-marker {
	display: none;
}

.kim-terms summary::after {
	content: " +";
	font-family: var(--ks-font-display);
}

.kim-terms[open] summary::after {
	content: " –";
}

.kim-terms summary:hover {
	opacity: 1;
}

.kim-terms__body {
	font-family: var(--ks-font-text);
	padding-bottom: 18px;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(246, 247, 238, 0.6);
}

.kim-terms__body p {
	margin: 0 0 0.8em;
}

/* ===========================================================================
 * 12. S05 — Marquee divider
 *
 * A plain transform loop on a duplicated track. Cheap enough to leave running
 * and it never reflows, unlike animating a textPath offset.
 * ======================================================================== */
.kim-marquee {
	padding: calc(clamp(18px, 2.4vw, 30px) + var(--ks-block-radius)) 0;
	overflow: hidden;
	border-top-left-radius: var(--ks-block-radius);
	border-top-right-radius: var(--ks-block-radius);
	position: relative;
	z-index: 1;
	background: var(--ks-clay);
	color: var(--ks-cream);
	border-top: 1px solid rgba(246, 247, 238, 0.45);
}

.kim-marquee__track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: kim-marquee 34s linear infinite;
}

.kim-marquee__group {
	display: flex;
	align-items: center;
	gap: clamp(24px, 3vw, 44px);
	padding-right: clamp(24px, 3vw, 44px);
	font-family: var(--ks-font-display);
	font-size: clamp(15px, 1.7vw, 22px);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.kim-marquee__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

/* The track holds two identical groups, so -50% lands exactly on the seam. */
@keyframes kim-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

/* ===========================================================================
 * 13. S06 — Reviews
 * ======================================================================== */
.kim-reviews {
	position: relative;
	overflow: hidden;
}

.kim-reviews .kim-shell {
	position: relative;
	z-index: 3;
}

.kim-reviews__ghost {
	position: absolute;
	left: 50%;
	top: clamp(96px, 13vw, 200px);
	z-index: 1;
	transform: translateX(-50%);
	font-size: clamp(64px, 18vw, 300px);
	color: rgba(246, 247, 238, 0.07);
}

/* The rotating brand mark, standing in for a 3D object at a fraction of the
   cost. It is decorative and hidden from assistive tech. */
.kim-reviews__mark {
	position: absolute;
	left: 50%;
	top: 42%;
	z-index: 2;
	width: clamp(180px, 26vw, 380px);
	transform: translate(-50%, -50%);
	opacity: 0.14;
	animation: kim-spin 26s linear infinite;
	pointer-events: none;
}

@keyframes kim-spin {
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --- Header: eyebrow on one side, the aggregate on the other --- */
.kim-reviews__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 40px;
}

.kim-rating {
	display: flex;
	align-items: center;
	gap: 18px;
}

.kim-rating__score {
	font-family: var(--ks-font-display);
	font-size: clamp(48px, 6vw, 76px);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.03em;
}

.kim-rating__detail {
	display: grid;
	gap: 6px;
}

.kim-rating__count {
	font-family: var(--ks-font-text);
	font-size: 15px;
	color: rgba(246, 247, 238, 0.78);
}

.kim-rating__link {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ks-crema);
}

.kim-rating__link:hover {
	color: var(--ks-cream);
}

/* An unearned star is drawn faint rather than left out, so a 4 still reads
   as four of five and not as a shorter row. */
.kim-star {
	display: inline-flex;
}

.kim-star.is-empty {
	opacity: 0.22;
}

/* --- The track ---
   A native scroll-snap strip first, a carousel second: without JS every card
   is still reachable by swiping or with the scrollbar hidden underneath. */
.kim-carousel {
	position: relative;
	z-index: 3;
	margin-top: clamp(32px, 5vw, 64px);
	--kim-per-view: 1;
	--kim-gap: clamp(16px, 2vw, 28px);
}

@media (min-width: 700px) {
	.kim-carousel { --kim-per-view: 2; }
}

@media (min-width: 1100px) {
	.kim-carousel { --kim-per-view: 3; }
}

.kim-carousel__track {
	position: relative;
	display: flex;
	gap: var(--kim-gap);
	/* Room for the first page to rise into view; the fly-in starts below the
	   track's edge, so the clip reads as a mask rather than a cut. */
	padding-block: 12px 18px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	outline-offset: 6px;
}

.kim-carousel__track::-webkit-scrollbar {
	display: none;
}

.kim-carousel__track > .kim-review {
	display: flex;
	flex-direction: column;
	flex: 0 0 calc((100% - (var(--kim-per-view) - 1) * var(--kim-gap)) / var(--kim-per-view));
	scroll-snap-align: start;
}

/* --- Controls --- */
.kim-carousel__controls {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: clamp(20px, 2.6vw, 30px);
}

.kim-carousel__controls[hidden] {
	display: none;
}

.kim-carousel__btn {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid rgba(246, 247, 238, 0.3);
	border-radius: 999px;
	font-size: 15px;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.kim-carousel__btn:hover {
	background: var(--ks-cream);
	border-color: var(--ks-cream);
	color: var(--ks-forest);
}

.kim-carousel__pause {
	margin-left: auto;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.kim-carousel__dots {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.kim-carousel__dot {
	width: 22px;
	height: 3px;
	padding: 0;
	border-radius: 2px;
	background: rgba(246, 247, 238, 0.25);
	transition: background-color 0.3s ease, width 0.3s ease;
}

/* A dot per page stops being useful past a dozen; the row would outgrow
   the controls. The count label below takes over. */
.kim-carousel__dots.is-many .kim-carousel__dot {
	display: none;
}

.kim-carousel__dot[aria-current="true"] {
	width: 38px;
	background: var(--ks-clay);
}

.kim-carousel__count {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: rgba(246, 247, 238, 0.7);
	font-variant-numeric: tabular-nums;
}

.kim-review {
	padding: clamp(24px, 2.8vw, 38px);
	background: rgba(246, 247, 238, 0.05);
	border: 1px solid rgba(246, 247, 238, 0.16);
	border-radius: 18px;
	backdrop-filter: blur(6px);
}

.kim-review__stars {
	display: flex;
	gap: 4px;
	color: var(--ks-crema);
}

.kim-review__stars svg {
	width: 14px;
	height: 14px;
}

.kim-review__quote {
	flex: 1;
	/* Google reviews run long; eight lines keeps a row of cards even. The
	   full text is one click away on Google. */
	display: -webkit-box;
	-webkit-line-clamp: 8;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 18px;
	font-family: var(--ks-font-text);
	font-weight: 400;
	font-size: clamp(17px, 1.45vw, 20px);
	line-height: 1.55;
}

.kim-review__who {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
}

.kim-review__photo {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex: none;
	object-fit: cover;
}

.kim-review__by a:hover {
	text-decoration: underline;
}

.kim-review__by {
	/* Spacing now comes from .kim-review__who. */
	margin-top: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.kim-review__from {
	margin-top: 5px;
	font-size: 12px;
	letter-spacing: 0.06em;
	opacity: 0.55;
}

/* ===========================================================================
 * 14. S07 — Impact (rotating programme stack)
 * ======================================================================== */
.kim-impact__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(32px, 4vw, 64px);
	align-items: center;
	margin-top: clamp(32px, 4vw, 56px);
}

@media (min-width: 900px) {
	.kim-impact__layout { grid-template-columns: 1fr 1fr; }
}

.kim-stack {
	position: relative;
	aspect-ratio: 4 / 3;
	display: grid;
	place-items: center;
}

.kim-stack__item {
	position: absolute;
	width: 62%;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	padding: 12%;
	border-radius: 50%;
	background: rgba(22, 38, 28, 0.06);
	border: 1px solid rgba(22, 38, 28, 0.16);
	/* Only used when GSAP is absent; otherwise GSAP drives these outright. */
	transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.6s ease;
}

.kim-stack__item svg {
	width: 100%;
	height: auto;
}

.kim-stack__item--photo {
	padding: 0;
	overflow: hidden;
}

.kim-stack__item--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* `overflow: hidden` is what makes the vertical swap work — the outgoing and
   incoming titles are both in flow, one just sits outside the box. */
.kim-swap {
	position: relative;
	overflow: hidden;
	min-height: 1.15em;
}

.kim-swap__title {
	font-family: var(--ks-font-display);
	font-size: clamp(28px, 3.8vw, 54px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.kim-swap--desc {
	min-height: 4.5em;
}

.kim-swap__desc {
	max-width: 46ch;
	font-family: var(--ks-font-text);
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.6;
	color: rgba(22, 38, 28, 0.78);
}

.kim-impact__meta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--ks-forest);
	color: var(--ks-cream);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.kim-impact__dots {
	display: flex;
	gap: 8px;
	margin-top: 28px;
}

.kim-impact__dots button {
	width: 30px;
	height: 3px;
	border-radius: 2px;
	background: rgba(22, 38, 28, 0.22);
	transition: background-color 0.3s ease;
}

.kim-impact__dots button[aria-current="true"] {
	background: var(--ks-clay);
}

/* The partner credit, inset into the cream block.
   Dark on purpose: the mark it carries is drawn light for dark grounds. */
.kim-partner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 3vw, 36px);
	align-items: center;
	margin-top: clamp(40px, 5vw, 72px);
	padding: clamp(24px, 3vw, 40px);
	background: var(--ks-forest);
	color: var(--ks-cream);
	border-radius: 18px;
}

@media (min-width: 760px) {
	.kim-partner {
		grid-template-columns: minmax(140px, 22%) 1fr;
	}
}

.kim-partner__mark img {
	width: 100%;
	max-width: 220px;
	height: auto;
}

.kim-partner__name {
	font-family: var(--ks-font-display);
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.kim-partner__mark a {
	display: block;
	transition: opacity 0.25s ease;
}

.kim-partner__mark a:hover {
	opacity: 0.72;
}

.kim-partner__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.6;
}

.kim-partner__note {
	max-width: 60ch;
	margin-top: 12px;
	font-family: var(--ks-font-text);
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.6;
	color: rgba(246, 247, 238, 0.88);
}

/* ===========================================================================
 * 15. S08 — Team carousel
 * ======================================================================== */
.kim-team {
	overflow: hidden;
}

.kim-team__row {
	display: flex;
	gap: clamp(14px, 1.8vw, 26px);
	margin-top: clamp(32px, 4vw, 56px);
	padding: 0 var(--ks-gutter);
	width: max-content;
	cursor: grab;
	touch-action: pan-y;
}

.kim-team__row.is-dragging { cursor: grabbing; }

.kim-person {
	position: relative;
	width: clamp(210px, 23vw, 320px);
	flex: none;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: rgba(246, 247, 238, 0.06);
}

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

/* Shown until real staff photography exists. */
.kim-person--plain {
	display: grid;
	place-items: center;
	background: rgba(246, 247, 238, 0.05);
	border: 1px solid rgba(246, 247, 238, 0.16);
}

.kim-person__monogram {
	font-family: var(--ks-font-display);
	font-size: clamp(44px, 6vw, 76px);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: rgba(246, 247, 238, 0.28);
}

.kim-person--plain .kim-person__label {
	background: none;
	padding-top: 20px;
}

.kim-person__label {
	position: absolute;
	inset: auto 0 0 0;
	padding: 60px 20px 20px;
	background: linear-gradient(to top, rgba(14, 22, 17, 0.9), transparent);
}

.kim-person__name {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.kim-person__role {
	margin-top: 5px;
	font-family: var(--ks-font-text);
	font-size: 14px;
	opacity: 0.72;
}

/* ===========================================================================
 * 16. S09 — Events (scroll-linked row, drifts right)
 * ======================================================================== */
.kim-events {
	overflow: hidden;
}

.kim-events__row {
	display: flex;
	gap: clamp(16px, 2vw, 28px);
	margin-top: clamp(32px, 4vw, 56px);
	padding: 0 var(--ks-gutter);
	width: max-content;
}

.kim-event {
	display: flex;
	flex-direction: column;
	width: clamp(250px, 27vw, 380px);
	flex: none;
	padding: clamp(20px, 2.4vw, 30px);
	border: 1px solid rgba(22, 38, 28, 0.2);
	border-radius: 16px;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.kim-event:hover {
	border-color: var(--ks-clay);
	background: rgba(196, 112, 63, 0.06);
}

.kim-event__date {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ks-clay);
}

.kim-event__title {
	margin-top: 14px;
	font-family: var(--ks-font-text);
	letter-spacing: -0.01em;
	font-size: clamp(19px, 1.8vw, 24px);
	font-weight: 600;
	line-height: 1.18;
}

.kim-event__excerpt {
	font-family: var(--ks-font-text);
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.45;
	color: rgba(22, 38, 28, 0.7);
}

.kim-event__more {
	margin-top: auto;
	padding-top: 22px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ===========================================================================
 * 17. S10 — Location
 * ======================================================================== */
.kim-location {
	text-align: center;
}

.kim-location__heading {
	margin-top: clamp(24px, 3vw, 40px);
	font-family: var(--ks-font-display);
	font-size: clamp(40px, 8vw, 116px);
	font-weight: 800;
	line-height: 0.94;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.kim-location__eyebrow {
	justify-content: center;
}

.kim-location__address {
	max-width: 34ch;
	margin: clamp(22px, 3vw, 34px) auto 0;
	font-family: var(--ks-font-text);
	font-size: clamp(17px, 1.6vw, 21px);
	line-height: 1.55;
	color: rgba(246, 247, 238, 0.86);
}

.kim-location__hours {
	margin-top: 18px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.62;
}

/* Filled in by JS against the venue clock, so it starts hidden. */
.kim-openness {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 14px;
	padding: 7px 16px;
	border: 1px solid rgba(246, 247, 238, 0.24);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.7;
}

.kim-openness.is-open {
	border-color: rgba(151, 168, 138, 0.6);
	opacity: 1;
}

.kim-openness__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
}

.kim-openness.is-open .kim-openness__dot {
	background: var(--ks-sage);
	opacity: 1;
	animation: kim-pulse 2s ease-in-out infinite;
}

.kim-location__cta {
	margin-top: clamp(26px, 3vw, 40px);
}

/* ===========================================================================
 * 18. S11 — Journal
 * ======================================================================== */
.kim-journal__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(18px, 2.4vw, 32px);
	margin-top: clamp(32px, 4vw, 56px);
}

@media (min-width: 700px) {
	.kim-journal__grid { grid-template-columns: repeat(3, 1fr); }
}

.kim-post {
	display: flex;
	flex-direction: column;
	padding: clamp(20px, 2.2vw, 28px);
	border: 1px solid rgba(22, 38, 28, 0.2);
	border-radius: 16px;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* No lift, no shadow — the whole page refuses them, so a colour shift is the
   only hover language available here. */
.kim-post:hover {
	border-color: var(--ks-forest);
	background: rgba(22, 38, 28, 0.05);
}

.kim-post__thumb {
	aspect-ratio: 16 / 10;
	margin-bottom: 20px;
	border-radius: 10px;
	overflow: hidden;
	background: rgba(22, 38, 28, 0.08);
}

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

.kim-post__meta {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.55;
}

.kim-post__title {
	margin-top: 12px;
	font-family: var(--ks-font-text);
	letter-spacing: -0.01em;
	font-size: clamp(18px, 1.7vw, 23px);
	font-weight: 600;
	line-height: 1.2;
}

.kim-post__excerpt {
	font-family: var(--ks-font-text);
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.45;
	color: rgba(22, 38, 28, 0.7);
}

/* ===========================================================================
 * 19. S12 — FAQ
 * ======================================================================== */
.kim-faq__list {
	max-width: 900px;
	margin: clamp(32px, 4vw, 56px) auto 0;
	border-top: 1px solid rgba(246, 247, 238, 0.18);
}

.kim-faq__item {
	border-bottom: 1px solid rgba(246, 247, 238, 0.18);
}

.kim-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: clamp(18px, 2vw, 26px) 0;
	text-align: left;
	font-family: var(--ks-font-text);
	font-size: clamp(17px, 1.7vw, 22px);
	/* The button sits inside an <h3> for outline purposes, so its inherited
	   bold has to be undone rather than left to chance. */
	font-weight: 500;
	line-height: 1.25;
}

.kim-faq__icon {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
	/* A back-out curve: the cross overshoots very slightly, which is what
	   gives the toggle its pop. */
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kim-faq__icon::before,
.kim-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transform: translateY(-50%);
}

/* The plus becomes a cross by rotating the whole icon 45°, so the two bars
   stay perfectly registered throughout. */
.kim-faq__icon::after {
	transform: translateY(-50%) rotate(90deg);
}

.kim-faq__a {
	overflow: hidden;
	height: 0;
	opacity: 0;
	transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s linear 0.1s;
}

.kim-faq__a p {
	font-family: var(--ks-font-text);
	max-width: 68ch;
	padding-bottom: 24px;
	font-size: 17px;
	line-height: 1.55;
	color: rgba(246, 247, 238, 0.72);
}

/* ===========================================================================
 * 20. S13 — Footer
 * ======================================================================== */
.kim-footer {
	padding-bottom: clamp(48px, 6vw, 88px);
}

.kim-footer__mail {
	display: inline-block;
	position: relative;
	margin-top: clamp(20px, 3vw, 34px);
	font-family: var(--ks-font-display);
	font-size: clamp(20px, 5.6vw, 88px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	word-break: break-word;
}

.kim-footer__mail::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0.06em;
	width: 100%;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.kim-footer__mail:hover::after,
.kim-footer__mail:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.kim-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(28px, 4vw, 48px);
	margin-top: clamp(44px, 6vw, 84px);
	padding-top: clamp(28px, 3vw, 44px);
	border-top: 1px solid rgba(22, 38, 28, 0.18);
}

@media (min-width: 760px) {
	.kim-footer__grid { grid-template-columns: repeat(4, 1fr); }
}

.kim-footer__col h3 {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.55;
}

.kim-footer__col li {
	margin-top: 10px;
	font-family: var(--ks-font-text);
	font-size: 16px;
}

.kim-footer__col a {
	transition: opacity 0.25s ease;
}

.kim-footer__col a:hover { opacity: 0.6; }

.kim-socials {
	display: flex;
	gap: 12px;
	margin-top: 14px;
}

.kim-socials a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid currentColor;
	border-radius: 50%;
	transition: transform 0.2s ease, background-color 0.25s ease, color 0.25s ease;
}

.kim-socials a:hover {
	transform: scale(1.12);
	background: var(--ks-forest);
	color: var(--ks-cream);
}

.kim-socials svg { width: 16px; height: 16px; }

.kim-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: clamp(32px, 4vw, 56px);
	padding-top: 24px;
	border-top: 1px solid rgba(22, 38, 28, 0.18);
	font-size: 12px;
	letter-spacing: 0.06em;
	opacity: 0.6;
}

.kim-footer__logo img {
	height: 46px;
	width: auto;
}

/* ===========================================================================
 * 21. Inner pages (anything that is not the front page)
 * ======================================================================== */
.kim-page {
	padding: clamp(120px, 16vw, 200px) 0 clamp(72px, 10vw, 130px);
}

.kim-page__title {
	font-family: var(--ks-font-display);
	font-size: clamp(36px, 6vw, 84px);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.kim-prose {
	max-width: 70ch;
	margin-top: clamp(24px, 3vw, 40px);
	font-family: var(--ks-font-text);
	font-size: 18px;
	line-height: 1.7;
}

.kim-prose > * + * { margin-top: 1.1em; }

.kim-prose a { text-decoration: underline; }

.kim-prose h2,
.kim-prose h3 {
	font-family: var(--ks-font-display);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin-top: 1.6em;
}

/* A single post reads as one centred column. The column itself is the
   measure, so everything inside it — image, prose, comments — fills it
   instead of each carrying its own narrower max-width and drifting left. */
.kim-article {
	max-width: calc(760px + 2 * var(--ks-gutter));
}

/* Only the header is centred. Body paragraphs stay ranged left: centred
   running text is harder to read, because every line starts somewhere new. */
.kim-article__head {
	text-align: center;
}

.kim-article__head .kim-eyebrow {
	justify-content: center;
}

/* The eyebrow's leading rule would push a centred label off-centre, so a
   centred eyebrow gets a matching rule on the other side. */
.kim-article__head .kim-eyebrow::after {
	content: "";
	width: 32px;
	height: 1px;
	background: currentColor;
	flex: none;
}

.kim-article .kim-page__title {
	font-size: clamp(34px, 5vw, 64px);
}

.kim-article .kim-prose,
.kim-article .comments-area {
	max-width: none;
}

.kim-article .kim-post__thumb--single {
	max-width: none;
}

.kim-post__thumb--single {
	aspect-ratio: 16 / 9;
	max-width: 900px;
	margin-top: clamp(24px, 3vw, 40px);
	border-radius: 16px;
}

.kim-pagination {
	margin-top: clamp(32px, 4vw, 56px);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.kim-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.kim-pagination a,
.kim-pagination .current {
	display: block;
	padding: 10px 16px;
	border: 1px solid rgba(22, 38, 28, 0.28);
	border-radius: 999px;
}

.kim-pagination .current {
	background: var(--ks-forest);
	border-color: var(--ks-forest);
	color: var(--ks-cream);
}

/* ---------------------------------------------------------------------------
 * Comments
 *
 * Core prints this markup, so the job here is to bring it into the same
 * type system rather than to restructure it.
 * ------------------------------------------------------------------------ */
.comments-area {
	max-width: 70ch;
	margin-top: clamp(40px, 5vw, 72px);
	padding-top: clamp(24px, 3vw, 40px);
	border-top: 1px solid rgba(22, 38, 28, 0.18);
}

.comments-title,
.comment-reply-title {
	font-family: var(--ks-font-display);
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.comment-list {
	margin: 24px 0 0;
}

.comment-list li {
	padding: 20px 0;
	border-bottom: 1px solid rgba(22, 38, 28, 0.12);
}

.comment-list .children {
	margin-left: 24px;
	border-left: 1px solid rgba(22, 38, 28, 0.12);
	padding-left: 20px;
}

.comment-author img {
	display: inline-block;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 10px;
}

.comment-author {
	font-family: var(--ks-font-text);
	font-size: 16px;
	font-weight: 600;
}

.comment-author .says {
	font-weight: 400;
	opacity: 0.6;
}

.comment-metadata a,
.reply a {
	color: inherit;
}

.reply {
	margin-top: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.comment-metadata,
.comment-notes,
.logged-in-as {
	font-size: 12px;
	letter-spacing: 0.04em;
	opacity: 0.6;
}

.comment-content {
	margin-top: 10px;
	font-family: var(--ks-font-text);
	font-size: 16px;
	line-height: 1.5;
}

.comment-respond {
	margin-top: clamp(28px, 3vw, 44px);
}

.comment-form p {
	margin-top: 16px;
}

.comment-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.65;
}

/* The consent line is a sentence, not a field label — the tracked caps above
   turn it into a banner. */
.comment-form .comment-form-cookies-consent label {
	display: inline;
	margin: 0 0 0 6px;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	opacity: 0.7;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	max-width: 100%;
	padding: 12px 14px;
	font: inherit;
	font-size: 16px;
	color: inherit;
	background: transparent;
	border: 1px solid rgba(22, 38, 28, 0.28);
	border-radius: 10px;
}

.comment-form textarea {
	min-height: 140px;
	resize: vertical;
}

.comment-form .submit {
	display: inline-flex;
	padding: 13px 26px;
	background: var(--ks-forest);
	color: var(--ks-cream);
	border: 0;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.comment-form .submit:hover {
	background: var(--ks-clay);
}

/* ===========================================================================
 * 22. Small screens
 * ======================================================================== */
@media (max-width: 860px) {
	.kim-nav { display: none; }

	.kim-hero__foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.kim-scroll-hint { display: none; }

	.kim-manifesto__body { margin-left: 0; }

	.kim-row { margin-top: 0; }

	.kim-signatures__ghost { font-size: clamp(56px, 20vw, 120px); }
}

@media (max-width: 520px) {
	body.kimnara-space { font-size: 16px; }

	.kim-badge {
		left: 16px;
		right: 16px;
		justify-content: center;
		font-size: 10px;
	}

	.kim-hero__meta { gap: 20px; }

	/* The badge spans the full width down here, so the hero's bottom row has
	   to clear it vertically instead of horizontally. */
	.kim-hero__inner { padding-bottom: 86px; }

	.kim-hero__sub { font-size: 17px; }
}

/* ===========================================================================
 * 23. Reduced motion
 *
 * The JS half of this lives in js/kimnara.js: ScrollTriggers are never
 * created and every element is written straight to its final state. What is
 * left here are the CSS-only loops.
 * ======================================================================== */
@media (prefers-reduced-motion: reduce) {
	.kim-badge__dot,
	.kim-openness__dot,
	.kim-marquee__track,
	.kim-reviews__mark,
	.kim-scroll-hint::after {
		animation: none;
	}

	.kim-scroll-hint::after { transform: scaleY(1); }

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
	}
}