/* ==========================================================================
   Kumtuks — main stylesheet
   Brand Guide v3 (colours §5, typography §7) + approved Figma
   (KUMTUKS wireframes V.1.0: desktop 1440, tablet 768, mobile 360).

   Breakpoints:  mobile < 768  ·  tablet 768–1023  ·  desktop ≥ 1024
   ========================================================================== */

/* 1. Design tokens
   ------------------------------------------------------------------------ */
:root {
	/* Core brand */
	--k-yellow: #ffd600;          /* Primary Yellow — CTAs, highlights */
	--k-blue: #0e3a5e;            /* Primary Blue — navigation, branded surfaces */

	/* Text & dark */
	--k-ink: #040d1a;             /* Primary Text */
	--k-ink-2: #040d1a;           /* Secondary text = main text #040D1A (decision 23 Oct: one text colour; Brand Guide had #0D2637) */
	--k-info: #215b82;            /* Information Blue */

	/* Neutrals */
	--k-bg: #f7f7f7;              /* Background */
	--k-surface: #ffffff;         /* Surface */
	--k-border: #e2e8eb;          /* Borders */

	/* Semantic (states only, never decorative) */
	--k-success: #00884d;
	--k-warning: #b77900;
	--k-error: #cc3430;

	/* Type */
	--k-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--k-h1: 1.75rem;              /* 28 → 48 */
	--k-h2: 1.5rem;               /* 24 → 44 */
	--k-h3: 1.375rem;             /* 22 → 36 */
	--k-h5: 1.25rem;              /* 20 → 28 */
	--k-h6: 1rem;                 /* 16 → 20 */
	--k-text-lg: 1rem;            /* 16 → 22 */
	--k-text-md: 0.9375rem;       /* 15 → 18 */
	--k-text-sm: 0.875rem;        /* 14 */

	/* Layout */
	--k-gutter: 20px;             /* 20 / 24 / 48 */
	--k-section-x: 20px;          /* page sections: 20 / 32 / 48 (Figma tablet uses 32) */
	--k-max: 1440px;
	--k-header-h: 62px;
	--k-border-w: 2px;
	--k-focus: 0 0 0 3px var(--k-surface), 0 0 0 6px var(--k-blue);
}

@media (min-width: 768px) {
	:root {
		--k-h1: 2.25rem;
		--k-h2: 2rem;
		--k-h3: 1.75rem;
		--k-h5: 1.5rem;
		--k-h6: 1.125rem;
		--k-text-lg: 1.125rem;
		--k-text-md: 1rem;
		--k-gutter: 24px;
		--k-section-x: 32px;
	}
}

@media (min-width: 1024px) {
	:root {
		--k-h1: 3rem;
		--k-h2: 2.75rem;
		--k-h3: 2.25rem;
		--k-h5: 1.75rem;
		--k-h6: 1.25rem;
		--k-text-lg: 1.375rem;
		--k-text-md: 1.125rem;
		--k-gutter: 48px;
		--k-section-x: 48px;
		--k-header-h: 69px;
	}
}

/* 2. Base — scoped to body.kumtuks so it wins over Neve's defaults.
      Neve's own variables are pointed at brand values too, so any page
      still rendered by a Neve template (e.g. Privacy Policy) looks on-brand.
   ------------------------------------------------------------------------ */
/* Page canvas = footer blue: iPhone's bounce past the end of the page shows blue under the footer, not white.
   The page itself stays white (body background). */
html:has(> body.kumtuks) { background-color: var(--k-blue); }

body.kumtuks {
	--nv-primary-accent: var(--k-blue);
	--nv-secondary-accent: var(--k-info);
	--nv-site-bg: var(--k-surface);
	--nv-text-color: var(--k-ink);
	--nv-text-dark-bg: var(--k-surface);
	--nv-light-bg: var(--k-bg);
	--nv-dark-bg: var(--k-blue);
	--bodyfontfamily: var(--k-font);
	--headingsfontfamily: var(--k-font);
	--bodyfontsize: 1rem;
	--bodylineheight: 1.6;
	--bodyfontweight: 500;

	margin: 0;
	background: var(--k-surface);
	color: var(--k-ink);
	font-family: var(--k-font);
	font-size: 1rem;
	font-weight: 500;             /* Brand: body copy = Poppins Medium */
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

body.kumtuks :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	font-family: var(--k-font);
	font-weight: 600;             /* Brand: headings = Poppins SemiBold */
	color: inherit;
	text-wrap: balance;
}

body.kumtuks h1 { font-size: var(--k-h1); line-height: 1.2; letter-spacing: -0.01em; }
body.kumtuks h2 { font-size: var(--k-h2); line-height: 1.1; letter-spacing: -0.02em; }
body.kumtuks h3 { font-size: var(--k-h3); line-height: 1.2; }
body.kumtuks h4 { font-size: var(--k-h5); line-height: 1.29; letter-spacing: -0.01em; }
body.kumtuks h5 { font-size: var(--k-h6); line-height: 1.4; }

body.kumtuks p { margin: 0 0 1em; }
body.kumtuks img { max-width: 100%; height: auto; display: block; }

body.kumtuks a { color: var(--k-blue); text-underline-offset: 0.18em; }
body.kumtuks a:hover { color: var(--k-ink); }

body.kumtuks :focus-visible {
	outline: none;
	box-shadow: var(--k-focus);
}

/* Focus ring only for keyboard users: a tap or click never leaves a ring (iPhone kept a white box on tapped links) */
body.kumtuks :focus:not(:focus-visible) { box-shadow: none; outline: none; }

/* On dark sections (footer, blue intros and bands, hero, story/topic headers) the ring is yellow, so it never shows as a white box */
body.kumtuks :is(.k-footer, .k-hero, .k-intro, .k-band, .k-story__hero, .k-topic-hero, .k-contact__intro) { --k-focus: 0 0 0 3px var(--k-yellow); }

/* Tap feedback on phones: a light brand-yellow flash instead of the system grey box */
body.kumtuks { -webkit-tap-highlight-color: rgba(255, 214, 0, 0.3); }

body.kumtuks ::selection { background: var(--k-yellow); color: var(--k-ink); }

/* Neve's .wrapper has overflow:hidden, which turns it into a scroll container and stops
   the sticky header. `clip` still trims sideways overflow but keeps position:sticky working. */
body.kumtuks .wrapper { overflow: clip; }

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

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

.k-skip-link {
	position: absolute;
	left: 12px;
	top: -100px;
	z-index: 1000;
	padding: 10px 16px;
	background: var(--k-yellow);
	color: var(--k-ink) !important;
	font-weight: 600;
	border: var(--k-border-w) solid var(--k-ink);
	text-decoration: none;
}
.k-skip-link:focus { top: 12px; }

.k-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	fill: currentColor;
}
/* Lucide UI icons are stroke icons */
.k-icon--search, .k-icon--menu, .k-icon--x, .k-icon--arrow-right, .k-icon--arrow-left, .k-icon--chevron-down {
	fill: none;
	stroke: currentColor;
}

.k-wordmark {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4153 / 655;     /* fixed 6.34:1 wordmark proportion */
	fill: currentColor;
}

/* 3. Buttons — square corners, 2px Primary Text outline (Figma),
      Poppins caps (Brand §7).
   ------------------------------------------------------------------------ */
.k-btn,
body.kumtuks .k-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 16px;
	background: var(--k-yellow);
	color: var(--k-ink);
	border: var(--k-border-w) solid var(--k-ink);
	border-radius: 0;
	font-family: var(--k-font);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

@media (min-width: 1024px) {
	.k-btn,
	body.kumtuks .k-btn {
		font-size: 1rem;
		font-weight: 700;
	}
}

.k-btn:hover,
body.kumtuks .k-btn:hover {
	background: var(--k-blue);
	color: var(--k-yellow);
}

.k-btn:active { transform: translateY(1px); }

.k-btn--secondary,
body.kumtuks .k-btn--secondary {
	background: var(--k-surface);
}

.k-btn--secondary:hover,
body.kumtuks .k-btn--secondary:hover {
	background: var(--k-blue);
	color: var(--k-surface);
}

.k-btn--block { display: flex; width: 100%; }

/* 4. Topic chips — rounded pills, 2px outline, Poppins Bold caps.
   ------------------------------------------------------------------------ */
.k-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-chip,
body.kumtuks .k-chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 13px;
	background: var(--k-surface);
	color: var(--k-ink);
	border: var(--k-border-w) solid var(--k-ink);
	border-radius: 1000px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

@media (min-width: 1024px) {
	.k-chip,
	body.kumtuks .k-chip { font-size: 1rem; }
}

.k-chip:hover,
body.kumtuks .k-chip:hover { background: var(--k-bg); color: var(--k-ink); }

.k-chip.is-active,
.k-chip[aria-pressed="true"],
body.kumtuks .k-chip.is-active {
	background: var(--k-yellow);
	color: var(--k-ink);
}

/* 5. Story card
      Mobile/tablet: image on top, one topic label in Primary Blue.
      Desktop: white card with 16px padding, 225px image, topic row in caps.
   ------------------------------------------------------------------------ */
.k-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--k-surface);
	color: var(--k-ink);
}

.k-card__media {
	position: relative;
	aspect-ratio: 16 / 9.2;
	overflow: hidden;
	background: var(--k-border);   /* placeholder while no image */
}

body.kumtuks .k-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.k-card:hover .k-card__media img { transform: scale(1.03); }

.k-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 4px 4px;
}

.k-card__topics {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--k-blue);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
}

/* Mobile/tablet: show only the first topic, as in the design. */
.k-card__topics li:not(:first-child) { display: none; }

body.kumtuks .k-card__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
}

body.kumtuks .k-card__link {
	color: var(--k-ink);
	text-decoration: none;
}

/* Whole card is clickable; the title link stretches over it. */
.k-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.k-card:focus-within { box-shadow: var(--k-focus); }
.k-card__link:focus-visible { box-shadow: none !important; }

body.kumtuks .k-card__excerpt {
	margin: 0;
	color: var(--k-ink-2);
	font-size: 0.8125rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (min-width: 1024px) {
	.k-card { padding: 16px 16px 40px; }
	.k-card__media { aspect-ratio: auto; height: 225px; }
	.k-card__body { gap: 12px; padding: 12px 0 0; }
	.k-card__topics {
		color: var(--k-ink);
		font-size: 0.625rem;
		letter-spacing: 0.04em;
	}
	.k-card__topics li:not(:first-child) { display: list-item; }
	body.kumtuks .k-card__title {
		font-size: 1.25rem;
		font-weight: 500;
		letter-spacing: -0.01em;
	}
	body.kumtuks .k-card__excerpt { font-size: 0.875rem; color: var(--k-ink); }
	.k-card__body > .k-card__title + .k-card__excerpt { margin-top: -4px; }
}

/* Card grids */
.k-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.k-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}

@media (min-width: 1024px) {
	.k-grid { gap: 0; }
	.k-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 6. Search field
   ------------------------------------------------------------------------ */
.k-search {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 640px;
	border: var(--k-border-w) solid var(--k-ink);
	background: var(--k-surface);
}

body.kumtuks .k-search__input {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 10px 14px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--k-ink);
	font: 500 1rem/1.5 var(--k-font);
	box-shadow: none;
}

body.kumtuks .k-search__input::placeholder { color: var(--k-ink-2); opacity: 0.7; }
body.kumtuks .k-search__input:focus-visible { box-shadow: inset 0 0 0 2px var(--k-blue); }

body.kumtuks .k-search__submit {
	display: grid;
	place-items: center;
	width: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-left: var(--k-border-w) solid var(--k-ink);
	border-radius: 0;
	background: var(--k-yellow);
	color: var(--k-ink);
	cursor: pointer;
}

body.kumtuks .k-search__submit:hover { background: var(--k-ink); color: var(--k-yellow); }

/* 7. Header
   ------------------------------------------------------------------------ */
.k-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--k-surface);
}

.admin-bar .k-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .k-header { top: 0; } }

.k-header__accent {
	display: none;                /* 8px yellow line — desktop only */
	height: 8px;
	background: var(--k-yellow);
}

.k-header__bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: var(--k-header-h);
	padding: 14px 20px;
	border-bottom: 1px solid var(--k-border);
	background: var(--k-surface);
}

.k-header__nav { display: none; }

.k-header__logo {
	display: block;
	width: 127px;
	color: var(--k-blue);
	line-height: 0;
}

body.kumtuks .k-header__logo:hover { color: var(--k-blue); }

.k-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

body.kumtuks .k-btn--header {
	min-height: 0;
	padding: 6px 12px;
	font-size: 0.75rem;
	font-weight: 600;
}

body.kumtuks .k-header__burger {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0 -8px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--k-blue);
	cursor: pointer;
}

.k-header__burger .k-icon { width: 28px; height: 28px; stroke-width: 1.75; }
.k-header__burger-close { display: none; }
.k-header__burger[aria-expanded="true"] .k-header__burger-open { display: none; }
.k-header__burger[aria-expanded="true"] .k-header__burger-close { display: block; }

.k-social {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-social a { display: grid; place-items: center; text-decoration: none; }

.k-social--header { display: none; gap: 9px; }
.k-social--header a { color: var(--k-ink); }
.k-social--header .k-icon { width: 22px; height: 22px; }

/* Mobile / tablet menu — drops down under the bar (Figma "Nav — State=Open") */
.k-mobile-nav {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	max-height: calc(100vh - var(--k-header-h));
	overflow-y: auto;
	background: var(--k-surface);
	border-bottom: 1px solid var(--k-border);
	box-shadow: 0 16px 32px rgba(4, 13, 26, 0.12);
}

.k-mobile-nav[hidden] { display: none; }

.k-mobile-nav__search { padding: 16px 20px 8px; }

.k-mobile-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.kumtuks .k-mobile-nav__list a {
	display: block;
	padding: 14px 20px;
	border-bottom: 1px solid var(--k-border);
	color: var(--k-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
}

body.kumtuks .k-mobile-nav__list a:hover,
body.kumtuks .k-mobile-nav__list .current-menu-item > a { background: var(--k-bg); }

.k-mobile-nav__cta { padding: 16px 20px; }
body.kumtuks .k-mobile-nav__cta .k-btn { padding-block: 12px; }

/* Explore panel (desktop) */
.k-explore {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--k-bg);
	border-bottom: var(--k-border-w) solid var(--k-ink);
	box-shadow: 0 16px 32px rgba(4, 13, 26, 0.12);
}

.k-explore[hidden] { display: none; }

.k-explore__inner {
	max-width: var(--k-max);
	margin-inline: auto;
	padding: 32px var(--k-gutter) 40px;
}

body.kumtuks .k-explore__label {
	margin: 24px 0 12px;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

@media (min-width: 1024px) {
	.k-header__accent { display: block; }

	.k-header__bar {
		min-height: 61px;
		padding: 0 24px;
		border-bottom: 0;
	}

	.k-header__nav {
		display: flex;
		align-items: center;
		gap: 16px;
		flex: 1;
	}

	body.kumtuks .k-header__explore,
	body.kumtuks .k-header__menu a {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		margin: 0;
		padding: 4px 0;
		border: 0;
		border-radius: 0;
		background: none;
		color: var(--k-ink);
		font-family: var(--k-font);
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.5;
		text-transform: uppercase;
		text-decoration: none;
		cursor: pointer;
		box-shadow: inset 0 -2px 0 transparent;
		transition: box-shadow 0.15s ease;
	}

	body.kumtuks .k-header__explore:hover,
	body.kumtuks .k-header__explore[aria-expanded="true"],
	body.kumtuks .k-header__menu a:hover,
	body.kumtuks .k-header__menu .current-menu-item > a,
	body.kumtuks .k-header__menu .current-page-ancestor > a {
		color: var(--k-ink);
		box-shadow: inset 0 -2px 0 var(--k-yellow);
	}

	.k-header__divider {
		width: 2px;
		height: 30px;
		background: var(--k-yellow);
	}

	.k-header__menu {
		display: flex;
		gap: 16px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.k-header__logo {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 180px;
		transform: translate(-50%, -50%);
	}

	.k-header__actions {
		flex: 1;
		justify-content: flex-end;
		gap: 8px;
	}

	body.kumtuks .k-btn--header {
		min-height: 40px;
		padding: 8px 16px;
		font-size: 1rem;
		font-weight: 700;
	}

	.k-social--header { display: flex; }
	body.kumtuks .k-header__burger,
	.k-mobile-nav { display: none !important; }
}

/* Small desktops (1024–1199): tighter menu and a smaller logo keep the centred logo clear
   of the menu (brand: clear space of half the logo height; minimum logo width 120px). */
@media (min-width: 1024px) and (max-width: 1199px) {
	.k-header__nav,
	.k-header__menu { gap: 12px; }
	body.kumtuks .k-header__explore,
	body.kumtuks .k-header__menu a { font-size: 0.875rem; }
	.k-header__logo { width: 150px; }
}

/* Wider than the 1440 design: header content lines up with the footer's .k-container. */
@media (min-width: 1441px) {
	.k-header__bar { padding-inline: calc((100% - var(--k-max)) / 2 + var(--k-gutter)); }
}

/* 8. Footer
   ------------------------------------------------------------------------ */
.k-footer {
	background: var(--k-blue);
	color: var(--k-surface);
}

body.kumtuks .k-footer a { color: var(--k-surface); text-decoration: none; }
body.kumtuks .k-footer a:hover { color: var(--k-yellow); }

/* Newsletter ("Stay Updated") */
.k-footer__newsletter { padding-block: 28px; }

.k-footer__newsletter-inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

body.kumtuks .k-footer__newsletter-title {
	margin: 0 0 14px;
	font-size: 1.125rem;
	line-height: 1.2;
}

body.kumtuks .k-footer__newsletter-text {
	margin: 0;
	font-size: 0.8125rem;
}

.k-newsletter-form form,
.k-newsletter-form .mc4wp-form-fields {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Mailchimp for WP: only the fields row is flex; the response sits below it */
.k-newsletter-form form.mc4wp-form { display: block; }
body.kumtuks .k-newsletter-form .mc4wp-form-fields label input { width: 100%; }

/* Mailchimp for WP: recommended form code (label + button) and its default code (<p>s) */
.k-newsletter-form .mc4wp-form-fields > :is(label, p) { flex: 1; display: block; margin: 0; }
.k-newsletter-form .mc4wp-form-fields > p:last-child { flex: 0 0 auto; }
body.kumtuks .k-newsletter-form .mc4wp-form-fields label { color: inherit; font-size: 0.8125rem; font-weight: 500; }
body.kumtuks .k-newsletter-form .mc4wp-form-fields label input { margin-top: 4px; }

body.kumtuks .k-newsletter-form .mc4wp-response:not(:empty) { margin-top: 12px; }
body.kumtuks .k-newsletter-form .mc4wp-alert {
	padding: 10px 12px;
	border-left: 4px solid var(--k-yellow);
	background: rgba(255, 255, 255, 0.08);
	color: inherit;
	font-size: 0.875rem;
}
body.kumtuks .k-newsletter-form .mc4wp-alert p { margin: 0; }

body.kumtuks .k-newsletter-form__admin-note {
	margin: 8px 0 0;
	padding: 6px 10px;
	border-left: 4px solid var(--k-warning);
	background: var(--k-surface);
	color: var(--k-ink);
	font-size: 0.75rem;
}

body.kumtuks .k-newsletter-form input[type="email"] {
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	border: 3px solid var(--k-surface);
	border-radius: 4px;
	background: var(--k-surface);
	color: var(--k-ink);
	font: 500 0.875rem/1.5 var(--k-font);
	box-shadow: none;
}

body.kumtuks .k-newsletter-form input[type="email"]::placeholder { color: var(--k-ink-2); opacity: 1; }

body.kumtuks .k-newsletter-form :is(button, input[type="submit"]) {
	min-height: 0;
	padding: 12px 24px;
	background: var(--k-yellow);
	color: var(--k-ink);
	border: var(--k-border-w) solid var(--k-ink);
	border-radius: 0;
	font: 600 0.75rem/1.5 var(--k-font);
	text-transform: uppercase;
	cursor: pointer;
}

body.kumtuks .k-newsletter-form :is(button, input[type="submit"]):hover {
	background: var(--k-surface);
	color: var(--k-ink);
}

body.kumtuks .k-footer__newsletter-note {
	margin: 0;
	color: var(--k-surface);
	font-size: 0.6875rem;
	line-height: 1.5;
}

/* Main footer area */
.k-footer__main {
	display: grid;
	gap: 16px;
	padding-top: 24px;
	padding-bottom: 16px;
	border-top: 4px solid var(--k-yellow);
}

.k-footer__brand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.k-footer__logo {
	display: block;
	width: 150px;
	line-height: 0;
}

body.kumtuks .k-footer .k-footer__logo,
body.kumtuks .k-footer .k-footer__logo:hover { color: var(--k-yellow); }

.k-footer__brand-actions {
	display: flex;
	flex-wrap: wrap;            /* 5+ social icons move under the Donate button on narrow screens */
	align-items: center;
	gap: 12px;
}

body.kumtuks .k-btn--footer {
	min-height: 0;
	padding: 10px 18px;
	font-size: 0.75rem;
	font-weight: 600;
}

body.kumtuks .k-footer .k-btn--footer,
body.kumtuks .k-footer .k-btn--footer:hover { color: var(--k-ink); }
body.kumtuks .k-footer .k-btn--footer:hover { background: var(--k-surface); }

.k-social--footer { gap: 10px; }

/* Rounded squares at every width (Figma draws circles on tablet/mobile; unified with desktop by decision 10 Oct) */
body.kumtuks .k-social--footer a {
	width: 40px;
	height: 40px;
	border: 1px solid var(--k-surface);
	border-radius: 8px;
	background: transparent;
	color: var(--k-surface);
}

body.kumtuks .k-social--footer a:hover { background: var(--k-yellow); color: var(--k-ink); }
.k-social--footer .k-icon { width: 19px; height: 19px; }

body.kumtuks .k-footer__label {
	margin: 0 0 8px;
	color: var(--k-yellow);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.k-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	font-weight: 500;
}

.k-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 16px;
	padding-bottom: 20px;
	color: var(--k-surface);
	font-size: 0.6875rem;
}

.k-footer__bottom::before {
	content: "";
	display: block;
	height: 1px;
	margin-bottom: 10px;
	background: rgba(255, 255, 255, 0.12);
}

body.kumtuks .k-footer__copy { margin: 0; }

.k-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-footer__legal li + li::before { content: "·"; padding: 0 0.4em; }
body.kumtuks .k-footer__legal a { color: inherit; }

/* Tablet: newsletter form on one row */
@media (min-width: 768px) {
	.k-newsletter-form form,
	.k-newsletter-form .mc4wp-form-fields { flex-direction: row; gap: 16px; }
	body.kumtuks .k-newsletter-form input[type="email"] { flex: 1; }
	body.kumtuks .k-newsletter-form :is(button, input[type="submit"]) { flex: 0 0 142px; }
}

/* Desktop footer (Figma 13339:12733) */
@media (min-width: 1024px) {
	.k-footer__newsletter { padding-block: 32px; }

	.k-footer__newsletter-inner {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 48px;
	}

	.k-footer__newsletter-intro { flex: 0 1 592px; }
	.k-footer__newsletter-action { flex: 0 1 714px; display: flex; flex-direction: column; gap: 12px; }

	body.kumtuks .k-footer__newsletter-title { margin-bottom: 16px; font-size: 2.25rem; }
	body.kumtuks .k-footer__newsletter-text { font-size: 1.125rem; }

	body.kumtuks .k-newsletter-form input[type="email"] {
		padding: 12px;
		border-radius: 0;
		background: transparent;
		color: var(--k-surface);
	}
	body.kumtuks .k-newsletter-form input[type="email"]::placeholder { color: var(--k-surface); opacity: 0.9; }

	body.kumtuks .k-newsletter-form :is(button, input[type="submit"]) {
		border-color: var(--k-yellow);
		font-size: 1rem;
		font-weight: 700;
	}

	body.kumtuks .k-footer__newsletter-note { color: var(--k-surface); font-size: 0.875rem; }

	.k-footer__main {
		grid-template-columns: 210px 1fr;
		grid-template-areas:
			"site topics"
			"brand brand";
		column-gap: 67px;
		row-gap: 96px;
		padding-top: 48px;
		padding-bottom: 48px;
		border-top: 0;
	}

	.k-footer__col--site { grid-area: site; }
	.k-footer__col--topics { grid-area: topics; }
	.k-footer__brand {
		grid-area: brand;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 22px;
	}

	.k-footer__logo { width: 180px; }
	body.kumtuks .k-footer .k-footer__logo,
	body.kumtuks .k-footer .k-footer__logo:hover { color: var(--k-bg); }

	.k-footer__brand-actions { flex-direction: column; align-items: flex-start; gap: 22px; }

	body.kumtuks .k-btn--footer {
		min-height: 40px;
		padding: 8px 40px;
		border-color: var(--k-yellow);
		font-size: 1rem;
		font-weight: 700;
		letter-spacing: 0.02em;
	}

	.k-social--footer { gap: 8px; }
	body.kumtuks .k-social--footer a {
		width: 42px;
		height: 42px;
	}
	.k-social--footer .k-icon { width: 22px; height: 22px; }

	/* No column labels on desktop (kept for screen readers) */
	body.kumtuks .k-footer__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.k-footer__links {
		flex-direction: column;
		gap: 10px;
		font-size: 1.375rem;
		font-weight: 400;
		line-height: 20px;
	}

	.k-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		min-height: 84px;
		padding-block: 10px;
		color: var(--k-surface);
		font-size: 0.875rem;
	}

	.k-footer__bottom::before { display: none; }

	.k-footer__legal { gap: 24px; }
	.k-footer__legal li + li::before { content: none; }
	body.kumtuks .k-footer__legal a { text-decoration: underline; }
}

/* 9. Rich text from the editor / text fields
   ------------------------------------------------------------------------ */
body.kumtuks .k-prose > :first-child { margin-top: 0; }
body.kumtuks .k-prose > :last-child { margin-bottom: 0; }
body.kumtuks .k-prose :is(p, ul, ol, blockquote, figure) { margin: 0 0 1.5em; }
body.kumtuks .k-prose :is(ul, ol) { padding-left: 1.25em; }
body.kumtuks .k-prose ul { list-style: disc; }
body.kumtuks .k-prose ol { list-style: decimal; }
body.kumtuks .k-prose li + li { margin-top: 0.25em; }
body.kumtuks .k-prose a { color: inherit; text-decoration: underline; }
body.kumtuks .k-prose a:hover { color: var(--k-blue); }
body.kumtuks .k-prose :is(h2, h3, h4) { margin: 1.5em 0 0.5em; font-size: 1.15em; line-height: 1.3; }
body.kumtuks .k-prose blockquote { padding-left: 16px; border-left: 4px solid var(--k-yellow); }
body.kumtuks .k-prose img { height: auto; }

/* 10. Story — Figma STORY-VIDEO / STORY-ESSAY (desktop), tablet 15693:4637, mobile 15652:4082
   ------------------------------------------------------------------------ */

/* Hero: mobile — full width, 260px, Primary Blue when there is no image */
.k-story__hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 260px;
	overflow: hidden;
	background: var(--k-blue);
	color: var(--k-surface);
}

.k-story__hero-media,
body.kumtuks .k-story__hero-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.k-story__hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.k-story__hero-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 904px;
	padding: 32px 20px;
	text-align: center;
}

body.kumtuks .k-story__title {
	color: var(--k-surface);
	font-size: 1.1875rem;          /* 19 */
	line-height: 1.4;
	letter-spacing: 0;
}

body.kumtuks .k-story__dek {
	margin: 0;
	color: var(--k-surface);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	text-wrap: balance;
}

body.kumtuks .k-story__play {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	line-height: 0;
	transition: transform 0.15s ease;
}

.k-story__play img { width: 100%; height: 100%; }
body.kumtuks .k-story__play:hover { transform: scale(1.06); }

/* Playing: the embed fills the hero */
.k-story__player {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: #000;
}

.k-story__player :is(iframe, .wp-embed-responsive .wp-block-embed__wrapper) {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}

.k-story__hero.is-playing .k-story__hero-inner { visibility: hidden; }

/* Body: aside (Share, Notes) then main text */
.k-story__aside {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px 20px;
	background: var(--k-bg);
}

.k-story__share,
.k-story__notes {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

body.kumtuks .k-story__aside-title {
	font-size: 0.875rem;
	line-height: 1.5;
	letter-spacing: 0;
}

.k-story__share-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.kumtuks .k-story__share-list a {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	color: var(--k-ink);
	text-decoration: none;
}

body.kumtuks .k-story__share-list a:hover { color: var(--k-blue); }
.k-story__share-list .k-icon { width: 16px; height: 16px; }

body.kumtuks .k-story__notes-text {
	color: var(--k-ink-2);
	font-size: 0.75rem;
	line-height: 1.5;
}

body.kumtuks .k-story__notes-text p { margin-bottom: 0.75em; }

.k-story__main {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 20px;
}

.k-story__section {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

body.kumtuks .k-story__section-title {
	font-size: 1.0625rem;          /* 17 */
	line-height: 1.4;
	letter-spacing: 0;
}

body.kumtuks .k-story__section .k-prose {
	color: var(--k-ink-2);
	font-size: 0.8125rem;
	line-height: 1.5;
}

body.kumtuks .k-story__section .k-prose :is(p, ul, ol, blockquote, figure) { margin-bottom: 1em; }

/* Story tabs: Details / Transcript / Facts & Sources (not in Figma — styled like the
   design's buttons: square, 2px outline, caps; the open tab is yellow) */
.k-tabs {
	display: flex;
	gap: 6px;
	scroll-margin-top: calc(var(--k-header-h) + 16px);   /* clear the sticky header */
}

.k-tabs[hidden] { display: none; }

/* Mobile: one row of equal tabs; long labels wrap inside the tab */
body.kumtuks .k-tabs__tab {
	flex: 1 1 0;
	min-height: 44px;
	margin: 0;
	padding: 6px 6px;
	line-height: 1.25;
	text-align: center;
	border: var(--k-border-w) solid var(--k-ink);
	border-radius: 0;
	background: var(--k-surface);
	color: var(--k-ink);
	font-family: var(--k-font);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

body.kumtuks .k-tabs__tab:hover { background: var(--k-bg); }
body.kumtuks .k-tabs__tab[aria-selected="true"] { background: var(--k-yellow); }

.k-story__panel {
	display: flex;
	flex-direction: column;
	gap: inherit;
}

.k-story__panel[hidden] { display: none; }
.k-story__panel:focus-visible { outline: none; box-shadow: var(--k-focus); }

/* With working tabs the tab names the panel, so its own heading is for screen readers only */
.k-has-tabs .k-story__panel-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

@media (min-width: 768px) {
	.k-tabs { gap: 8px; }
	body.kumtuks .k-tabs__tab { flex: 0 0 auto; min-height: 40px; padding: 8px 14px; }
}

@media (min-width: 1024px) {
	.k-tabs { gap: 12px; }
	body.kumtuks .k-tabs__tab { padding: 8px 20px; font-size: 1rem; font-weight: 700; }
}

/* You will also like */
.k-story__related {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px 20px 32px;
}

body.kumtuks .k-story__related-title {
	font-size: 1.0625rem;
	line-height: 1.4;
	letter-spacing: 0;
}

.k-story__related-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

/* Mobile design shows two related stories */
.k-story__related-grid > :nth-child(n + 3) { display: none; }

/* Tablet */
@media (min-width: 768px) {
	.k-story__hero {
		justify-content: flex-start;
		min-height: 374px;
		margin-inline: 16px;
	}

	.k-story__hero--no-image { background: var(--k-blue); }
	.k-story__hero-media::after { background: rgba(0, 0, 0, 0.28); }

	.k-story__hero-inner {
		align-items: flex-start;
		max-width: none;
		padding: 40px 32px;
		text-align: left;
	}

	body.kumtuks .k-story__title { font-size: 1.625rem; line-height: 1.5; }   /* 26 */
	body.kumtuks .k-story__dek { font-size: 1.125rem; }
	body.kumtuks .k-story__play { width: 72px; height: 72px; }

	.k-story__body {
		display: grid;
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 24px;
		padding: 32px;
	}

	.k-story__aside {
		gap: 20px;
		padding: 0;
		background: none;
	}

	.k-story__share { padding-bottom: 20px; border-bottom: 1px solid var(--k-border); }
	.k-story__notes { gap: 10px; }

	body.kumtuks .k-story__aside-title { font-size: 1.25rem; }
	body.kumtuks .k-story__notes-text { font-size: 0.8125rem; }

	.k-story__main { gap: 28px; padding: 0; }
	.k-story__section { gap: 12px; }
	body.kumtuks .k-story__section-title { font-size: 1.375rem; line-height: 1.5; }
	body.kumtuks .k-story__section .k-prose { font-size: 0.875rem; }

	.k-story__related {
		gap: 20px;
		padding: 32px;
		border-top: 8px solid var(--k-bg);
		border-bottom: 1px solid var(--k-border);
	}

	body.kumtuks .k-story__related-title { font-size: 1.375rem; line-height: 1.5; }

	.k-story__related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.k-story__related-grid > :nth-child(n + 3) { display: flex; }
	.k-story__related-grid > :nth-child(n + 4) { display: none; }
}

/* Desktop */
@media (min-width: 1024px) {
	.k-story__hero {
		justify-content: center;
		max-width: calc(var(--k-max) - 48px);
		min-height: 708px;
		margin-inline: 24px;
	}

	.k-story__hero-media::after { background: rgba(0, 0, 0, 0.5); }

	.k-story__hero-inner {
		align-items: center;
		gap: 29px;
		max-width: 984px;          /* 856 text + 2 × 64 */
		padding: 80px 64px;
		text-align: center;
	}

	.k-story--essay .k-story__hero-inner { gap: 8px; }

	body.kumtuks .k-story__title {
		font-size: 3rem;
		line-height: 1.2;
		letter-spacing: -0.01em;
	}

	body.kumtuks .k-story__dek {
		font-size: 1.75rem;
		line-height: 1.29;
		letter-spacing: -0.01em;
	}

	body.kumtuks .k-story__play { width: 138px; height: 138px; }

	/* Grey Notes column runs to the left edge on wide screens */
	.k-story__body {
		grid-template-columns: 382px minmax(0, 1fr);
		gap: 0;
		max-width: var(--k-max);
		margin-inline: auto;
		padding: 0;
	}

	.k-story__aside {
		gap: 32px;
		padding: 88px 24px 88px 64px;
		background: var(--k-bg);
		box-shadow: 0 0 0 100vmax var(--k-bg);
		clip-path: inset(0 0 0 -100vmax);
	}

	.k-story__share { gap: 8px; padding-bottom: 0; border-bottom: 0; }
	.k-story__notes { gap: 8px; }

	body.kumtuks .k-story__aside-title,
	body.kumtuks .k-story__section-title {
		font-size: 2.25rem;        /* 36 */
		line-height: 1.2;
		letter-spacing: -0.01em;
	}

	.k-story__share-list { gap: 8px; }
	body.kumtuks .k-story__share-list a { width: 24px; height: 24px; }
	.k-story__share-list .k-icon { width: 22px; height: 22px; }

	body.kumtuks .k-story__notes-text { font-size: 1rem; line-height: 1.5; }
	body.kumtuks .k-story__notes-text p { margin-bottom: 1.5em; }

	.k-story__main {
		gap: 48px;
		padding: 88px 64px;
		background: var(--k-surface);
	}

	.k-story__main > * { width: 100%; max-width: 840px; margin-inline: auto; }

	.k-story__section { gap: 16px; }
	body.kumtuks .k-story__section .k-prose { color: var(--k-ink); font-size: 1rem; line-height: 1.5; }
	body.kumtuks .k-story__section .k-prose :is(p, ul, ol, blockquote, figure) { margin-bottom: 1.5em; }

	.k-story__related {
		gap: 18px;
		max-width: var(--k-max);
		margin-inline: auto;
		padding: 65px var(--k-gutter) 128px;
		border: 0;
	}

	body.kumtuks .k-story__related-title { font-size: 2.25rem; line-height: 1.2; }

	.k-story__related-grid { gap: 0; }
}

/* 11. Homepage — Figma HOMEPAGE 10557:10635, tablet 15650:3960, mobile 15650:4135
   ------------------------------------------------------------------------ */

/* Featured stories carousel.
   Mobile/tablet: blue block, image on top, text below. Desktop: text over a 708px image. */
.k-hero {
	position: relative;
	padding: 20px var(--k-section-x) 20px;
	background: var(--k-blue);
	color: var(--k-surface);
}

.k-hero__slide { display: flex; flex-direction: column; gap: 10px; }
.k-hero__slide[hidden] { display: none; }
.k-hero__slide.is-active { animation: k-fade 0.5s ease; }

@keyframes k-fade { from { opacity: 0; } to { opacity: 1; } }

.k-hero__media {
	position: relative;
	height: 190px;
	overflow: hidden;
	background: var(--k-blue);
}

body.kumtuks .k-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.k-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

body.kumtuks .k-hero__eyebrow {
	margin: 0;
	color: var(--k-yellow);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.5;
	text-transform: uppercase;
}

body.kumtuks .k-hero__title {
	color: var(--k-surface);
	font-size: 1.1875rem;
	line-height: 1.4;
	letter-spacing: 0;
}

body.kumtuks .k-hero__dek {
	margin: 0;
	color: var(--k-surface);
	font-size: 0.8125rem;
	line-height: 1.5;
}

body.kumtuks .k-hero__button {
	align-self: stretch;
	min-height: 0;
	padding-block: 12px;
	font-size: 0.75rem;
	font-weight: 600;
}

.k-hero__dots {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-top: 16px;
}

body.kumtuks .k-hero__dot {
	display: grid;
	place-items: center;
	width: 24px;               /* comfortable tap target around a 9px dot */
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.k-hero__dot::before {
	content: "";
	width: 9px;
	height: 9px;
	border: 1.5px solid var(--k-yellow);
	border-radius: 50%;
	background: transparent;
	transition: background-color 0.15s ease;
}

.k-hero__dot[aria-current="true"]::before,
.k-hero__dot:hover::before { background: var(--k-yellow); }

/* Section with a heading and a card grid (New Release, Popular) */
.k-section__inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: var(--k-max);
	margin-inline: auto;
	padding: 28px var(--k-section-x) 8px;
}

body.kumtuks .k-section__title {
	font-size: 1.125rem;       /* 18 */
	line-height: 1.5;
	letter-spacing: 0;
}

.k-load-more {
	display: flex;
	justify-content: center;
	padding: 8px 0 20px;
}

body.kumtuks .k-load-more .k-btn {
	min-height: 0;
	padding: 10px 24px;
	font-size: 0.75rem;
	font-weight: 600;
}

/* What is Kumtuks */
.k-about {
	padding: 28px var(--k-section-x);
	background: var(--k-bg);
}

.k-about__intro {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: var(--k-max);
	margin: 0 auto 14px;
	text-align: center;
}

body.kumtuks .k-about__title {
	font-size: 1.1875rem;
	line-height: 1.4;
	letter-spacing: 0;
}

body.kumtuks .k-about__text {
	color: var(--k-ink-2);
	font-size: 0.8125rem;
	line-height: 1.5;
}

body.kumtuks .k-about__text p { margin: 0 0 0.5em; }
body.kumtuks .k-about__text p:last-child { margin-bottom: 0; }

.k-about__cards {
	display: grid;
	gap: 14px;
	max-width: var(--k-max);
	margin-inline: auto;
}

.k-feature {
	display: flex;
	flex-direction: column;
	background: var(--k-surface);
}

.k-feature__media {
	height: 120px;
	overflow: hidden;
	background: var(--k-border);
}

body.kumtuks .k-feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.k-feature__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 12px 16px 16px;
}

body.kumtuks .k-feature__title {
	font-size: 0.9375rem;
	line-height: 1.4;
	letter-spacing: 0;
}

body.kumtuks .k-feature__text {
	margin: 0;
	color: var(--k-ink-2);
	font-size: 0.75rem;
	line-height: 1.5;
}

body.kumtuks .k-feature__button {
	align-self: stretch;
	min-height: 0;
	margin-top: auto;
	padding-block: 10px;
	font-size: 0.6875rem;
	font-weight: 600;
	white-space: normal;
	text-align: center;
}

/* Explore by topics */
.k-explore-topics__inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: var(--k-max);
	margin-inline: auto;
	padding: 28px var(--k-section-x) 32px;
}

body.kumtuks .k-explore-topics__title {
	font-size: 1.125rem;
	line-height: 1.5;
	letter-spacing: 0;
}

body.kumtuks .k-explore-topics__text {
	margin: 0;
	color: var(--k-ink-2);
	font-size: 0.8125rem;
	line-height: 1.5;
}


/* Tablet */
@media (min-width: 768px) {
	.k-hero { padding: 32px var(--k-section-x); }
	.k-hero__media { height: 300px; }
	body.kumtuks .k-hero__title { font-size: 1.5rem; }

	body.kumtuks .k-section__title,
	body.kumtuks .k-explore-topics__title { font-size: 1.25rem; }

	body.kumtuks .k-about__title { font-size: 1.375rem; }
}

/* Desktop */
@media (min-width: 1024px) {
	.k-hero {
		max-width: calc(var(--k-max) - 48px);
		min-height: 708px;
		margin-inline: 24px;
		padding: 0;
		overflow: hidden;
	}

	.k-hero__slide {
		position: relative;
		justify-content: flex-end;
		min-height: 708px;
		padding: 80px 64px 84px;
	}

	.k-hero__media {
		position: absolute;
		inset: 0;
		height: auto;
	}

	.k-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
	}

	.k-hero__content {
		position: relative;
		gap: 8px;
		max-width: 856px;
	}

	body.kumtuks .k-hero__eyebrow { font-size: 1.125rem; line-height: 1.2; letter-spacing: -0.01em; }
	body.kumtuks .k-hero__title { font-size: 3rem; line-height: 1.2; letter-spacing: -0.01em; }
	body.kumtuks .k-hero__dek {
		color: var(--k-surface);
		font-size: 1.75rem;
		font-weight: 600;
		line-height: 1.29;
		letter-spacing: -0.01em;
	}

	body.kumtuks .k-hero__button {
		align-self: flex-start;
		min-height: 40px;
		margin-top: 21px;          /* 29px gap in the design, minus the 8px text gap */
		padding: 8px 16px;
		font-size: 1rem;
		font-weight: 700;
	}

	.k-hero__dots {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 34px;
		margin: 0;
	}

	.k-section__inner { gap: 16px; padding: 48px 0 24px; }
	.k-section__inner > .k-section__title { padding-inline: var(--k-section-x); }
	.k-section__inner > .k-grid { padding-inline: var(--k-section-x); }
	.k-section--popular .k-section__inner { padding-top: 24px; gap: 35px; }

	body.kumtuks .k-section__title,
	body.kumtuks .k-explore-topics__title,
	body.kumtuks .k-about__title {
		font-size: 2.75rem;        /* 44 */
		line-height: 1.1;
		letter-spacing: -0.02em;
	}

	.k-load-more { padding: 16px 0 80px; }
	body.kumtuks .k-load-more .k-btn {
		min-height: 40px;
		padding: 8px 16px;
		font-size: 1rem;
		font-weight: 700;
	}

	.k-about { padding: 80px 0 64px; }
	.k-about__intro { gap: 16px; margin-bottom: 40px; padding-inline: 64px; }
	body.kumtuks .k-about__text { color: var(--k-ink); font-size: 1.125rem; }
	body.kumtuks .k-about__text p { margin-bottom: 8px; }

	.k-about__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0;
		padding-inline: var(--k-section-x);
	}

	.k-feature {
		gap: 12px;
		padding: 16px 16px 40px;
		background: none;
	}

	.k-feature__media { height: 276px; }
	.k-feature__body { gap: 8px; padding: 0; }

	body.kumtuks .k-feature__title { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }
	body.kumtuks .k-feature__text { color: var(--k-ink); font-size: 0.875rem; }

	body.kumtuks .k-feature__text { margin-bottom: 16px; }   /* 24px to the button, with the 8px gap */
	/* All three buttons: same width (the card's) and on one line at the bottom, however long the text */
	body.kumtuks .k-feature__button {
		align-self: stretch;
		min-height: 40px;
		margin-top: auto;
		padding: 8px 16px;
		font-size: 1rem;
		font-weight: 700;
		white-space: nowrap;
	}

	.k-explore-topics { background: var(--k-bg); }
	.k-explore-topics__inner { gap: 16px; padding: 64px 64px 64px var(--k-section-x); }
	body.kumtuks .k-explore-topics__text { color: var(--k-ink); font-size: 1.375rem; }
}

/* 12. All Topics & By Topic — Figma 13317:8659 / 15652:4170 / 15652:4294,
       13397:11453 / 15707:4717 / 15707:4718
   ------------------------------------------------------------------------ */
.k-explore-topics--page .k-search { margin-block: 2px 4px; }

/* "Sort by" label + Newest / Popular chips */
.k-sort {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

body.kumtuks .k-sort__title {
	margin: 0;
	color: var(--k-ink-2);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Story listing */
.k-listing {
	max-width: var(--k-max);
	margin-inline: auto;
	padding: 16px var(--k-section-x) 32px;
}

.k-browser__summary {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0 0 16px;
	font-size: 0.875rem;
}

body.kumtuks .k-browser__summary a { color: var(--k-blue); font-weight: 600; }

body.kumtuks .k-browser__empty {
	margin: 24px 0 40px;
	color: var(--k-ink-2);
	font-size: 1rem;
}

.k-browser__back {
	margin: 0;
	text-align: center;
	font-size: 0.875rem;
}

/* By Topic: topic name on Primary Blue */
.k-topic-hero {
	background: var(--k-blue);
	color: var(--k-surface);
}

.k-topic-hero__inner {
	max-width: var(--k-max);
	margin-inline: auto;
	padding: 40px var(--k-section-x) 32px;
}

body.kumtuks .k-topic-hero__title {
	color: var(--k-surface);
	font-size: 1.5rem;
	line-height: 1.3;
	letter-spacing: 0;
}

body.kumtuks .k-topic-hero__text {
	max-width: 720px;
	margin-top: 12px;
	font-size: 0.875rem;
	line-height: 1.5;
}

body.kumtuks .k-topic-hero__text p { margin: 0; }

.k-topic-sort {
	max-width: var(--k-max);
	margin-inline: auto;
	padding: 24px var(--k-section-x) 0;
}

@media (min-width: 768px) {
	.k-topic-hero__inner { padding: 56px var(--k-section-x) 40px; }
	body.kumtuks .k-topic-hero__title { font-size: 2.125rem; }   /* 34 */
	.k-listing { padding-bottom: 40px; }
}

@media (min-width: 1024px) {
	.k-explore-topics--page { background: var(--k-bg); }

	.k-explore-topics .k-sort { gap: 8px; }

	body.kumtuks .k-sort__title {
		color: var(--k-ink);
		font-size: 1.75rem;        /* 28, Heading/H5 */
		line-height: 1.29;
		letter-spacing: -0.01em;
		text-transform: none;
	}

	.k-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 32px; }

	.k-listing { padding: 48px var(--k-section-x) 48px; }

	.k-topic-hero__inner { padding: 64px 64px 64px var(--k-section-x); text-align: center; }
	body.kumtuks .k-topic-hero__title {
		font-size: 2.75rem;
		line-height: 1.1;
		letter-spacing: -0.02em;
		text-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
	}
	body.kumtuks .k-topic-hero__text { margin: 16px auto 0; font-size: 1.125rem; }

	.k-topic-sort { padding-top: 24px; }
	.k-topic-sort .k-sort { align-items: center; gap: 12px; }
	.k-topic-sort .k-chips { justify-content: center; gap: 6px; }
}

/* 13. Content page sections (About; reused by Educators, Support…) —
       Figma ABOUT 13261:9629, tablet 15647:3888, mobile 15647:4039.
       Tablet uses the mobile layout with 32px sides; desktop is multi-column.
   ------------------------------------------------------------------------ */

/* Shared heading / text sizes: mobile 18 / 13 → tablet 20 / 14 → desktop 44 / 22 */
body.kumtuks :is(.k-split__title, .k-format__title, .k-band__title, .k-team__title, .k-involved__title) {
	font-size: 1.125rem;
	line-height: 1.4;
	letter-spacing: 0;
}

body.kumtuks :is(.k-split__text, .k-format__text, .k-band__text, .k-team__text, .k-involved__text) {
	margin: 0;
	color: var(--k-ink-2);
	font-size: 0.8125rem;
	line-height: 1.5;
}

body.kumtuks .k-split__text p { margin: 0 0 0.75em; }
body.kumtuks .k-split__text p:last-child { margin-bottom: 0; }
body.kumtuks .k-split__text a { color: inherit; text-decoration: underline; }

/* Intro (blue) */
.k-intro {
	background: var(--k-blue);
	color: var(--k-surface);
}

.k-intro__inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: var(--k-max);
	margin-inline: auto;
	padding: 20px var(--k-section-x) 28px;
}

body.kumtuks .k-intro__eyebrow {
	margin: 0;
	color: var(--k-yellow);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.5;
	text-transform: uppercase;
}

body.kumtuks .k-intro__text { font-size: 0.8125rem; line-height: 1.5; }
body.kumtuks .k-intro__text p { margin: 0 0 14px; }
body.kumtuks .k-intro__text p:last-child { margin-bottom: 0; }

/* Split: image | text */
.k-split__media {
	position: relative;
	height: 220px;
	overflow: hidden;
	background: var(--k-border);
}

body.kumtuks .k-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Split images, phones/tablets: --natural = the box takes the picture's own height (nothing cut off).
   Desktop: the picture fills its half of the block (Figma); --contain = fit the whole picture instead, on white
   (About: cut-out puzzle pieces). Educators collages are meant to be 4:3 (1440×1094) so they fill without cropping. */
.k-split__media--contain { background: var(--k-surface); }
body.kumtuks .k-split__media--contain img { object-fit: contain; }
@media (max-width: 1023px) {
	body.kumtuks .k-split__media.k-split__media--natural { height: auto; }
	body.kumtuks .k-split__media--natural img { height: auto; }
}

.k-split__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	padding: 20px var(--k-section-x) 28px;
	background: var(--k-surface);
}

/* Quote panel: light grey with dark text; on an image, white text over a scrim */
.k-split__media--quote {
	display: flex;
	align-items: flex-end;
	height: auto;
	padding: 36px var(--k-section-x);
}

.k-split__media--quote.has-image { min-height: 220px; }

.k-split__media--quote img { position: absolute; inset: 0; }

.k-split__media--quote.has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
}

body.kumtuks .k-split__quote {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
}

body.kumtuks .k-split__quote p {
	margin: 0;
	color: var(--k-ink);
	font-style: normal;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	text-wrap: balance;
}

body.kumtuks .k-split__media--quote.has-image .k-split__quote p { color: var(--k-surface); }

/* We ask */
.k-ask {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 28px var(--k-section-x);
	background: var(--k-bg);
	text-align: center;
}

body.kumtuks .k-ask__title { font-size: 1.1875rem; line-height: 1.4; letter-spacing: 0; }

.k-ask__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Format */
.k-format {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: var(--k-max);
	margin-inline: auto;
	padding: 28px var(--k-section-x) 28px;
}

.k-format__intro { display: flex; flex-direction: column; gap: 14px; }

.k-format__items,
.k-involved__grid {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Icon tile + title + text (Format items, Get Involved) */
.k-tile {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
}

.k-tile__icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: 4px;
	background: var(--k-blue);
}

.k-tile__icon img { width: 70%; height: 70%; }

.k-tile__icon--image { width: 48px; height: 48px; }
body.kumtuks .k-tile__icon--image img { width: 100%; height: 100%; object-fit: cover; }

.k-tile__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

body.kumtuks .k-tile__title {
	color: var(--k-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

body.kumtuks .k-tile__text {
	color: var(--k-ink-2);
	font-size: 0.75rem;
	line-height: 1.5;
}

/* Whole Get Involved tile is clickable */
.k-tile__link::after { content: ""; position: absolute; inset: 0; }
body.kumtuks .k-tile__link:hover { color: var(--k-blue); text-decoration: underline; }
.k-tile--link:focus-within { box-shadow: var(--k-focus); }
.k-tile__link:focus-visible { box-shadow: none !important; }

/* Blue band with a button (Who It's For) */
.k-band { background: var(--k-blue); color: var(--k-surface); }

.k-band__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	max-width: var(--k-max);
	margin-inline: auto;
	padding: 28px var(--k-section-x);
}

body.kumtuks .k-band__title,
body.kumtuks .k-band__text { color: var(--k-surface); }

body.kumtuks .k-band__button {
	align-self: stretch;
	min-height: 0;
	padding-block: 12px;
	font-size: 0.75rem;
	font-weight: 600;
	white-space: normal;
	text-align: center;
}

/* Team */
.k-team,
.k-involved {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: var(--k-max);
	margin-inline: auto;
	padding: 28px var(--k-section-x) 8px;
}

.k-team__intro,
.k-involved__intro { display: flex; flex-direction: column; gap: 14px; }

.k-team__grid { display: grid; gap: 20px; }

.k-person { display: flex; flex-direction: column; gap: 8px; }

.k-person__photo {
	height: 200px;
	overflow: hidden;
	background: var(--k-blue);
}

body.kumtuks .k-person__photo img { width: 100%; height: 100%; object-fit: cover; }

body.kumtuks .k-person__name {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 0.875rem;
	line-height: 1.4;
	letter-spacing: 0;
}

body.kumtuks .k-person__role {
	color: var(--k-ink-2);
	font-size: 0.75rem;
	font-weight: 500;
}

body.kumtuks .k-person__bio {
	margin: 0;
	color: var(--k-ink-2);
	font-size: 0.75rem;
	line-height: 1.5;
}

body.kumtuks .k-person__bio p { margin: 0 0 0.75em; }
body.kumtuks .k-person__bio p:last-child { margin-bottom: 0; }

.k-involved { padding-bottom: 32px; }

/* Tablet: same layout, a little larger */
@media (min-width: 768px) {
	body.kumtuks :is(.k-split__title, .k-format__title, .k-band__title, .k-team__title, .k-involved__title) { font-size: 1.25rem; }
	body.kumtuks :is(.k-split__text, .k-format__text, .k-band__text, .k-team__text, .k-involved__text) { font-size: 0.875rem; }
	.k-intro__inner { padding-block: 32px; }
	body.kumtuks .k-intro__text { font-size: 0.875rem; }
	.k-split__media { height: 300px; }
	.k-split__media--quote { height: auto; }
	body.kumtuks .k-ask__title { font-size: 1.375rem; }
	body.kumtuks .k-split__quote p { font-size: 1.375rem; }
	.k-person__photo { height: 200px; }
	body.kumtuks .k-person__bio { font-size: 0.8125rem; }
}

/* Desktop */
@media (min-width: 1024px) {
	body.kumtuks :is(.k-split__title, .k-format__title, .k-band__title, .k-team__title, .k-involved__title) {
		font-size: 2.75rem;
		line-height: 1.1;
		letter-spacing: -0.02em;
	}
	body.kumtuks :is(.k-split__text, .k-band__text, .k-team__text, .k-involved__text) { color: inherit; font-size: 1.375rem; }
	body.kumtuks .k-format__text,
	body.kumtuks .k-split__text:not(.k-split__text--lg) { color: var(--k-ink); font-size: 1.125rem; }
	body.kumtuks .k-split__text p { margin-bottom: 8px; }

	.k-intro__inner {
		align-items: center;
		justify-content: center;
		gap: 32px;
		min-height: 675px;
		padding: 80px 64px 88px;
		text-align: center;
	}
	body.kumtuks .k-intro__eyebrow { font-size: 1.75rem; }
	body.kumtuks .k-intro__text {
		max-width: 1040px;
		font-size: 1.25rem;
		line-height: 1.4;
		letter-spacing: -0.01em;
	}
	body.kumtuks .k-intro__text p { margin-bottom: 32px; }

	.k-split {
		display: grid;
		grid-template-columns: 1fr 1fr;
		min-height: 547px;
	}
	.k-split__media { height: auto; min-height: 100%; }
	.k-split__body { gap: 16px; padding: 80px 64px; }
	.k-split__body > * { max-width: 592px; }

	.k-split--quote { min-height: 580px; }
	.k-split__media--quote {
		padding: 80px 64px;
		background: var(--k-border);
	}
	.k-split__media--quote::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
	}
	body.kumtuks .k-split__quote p {
		max-width: 492px;
		color: var(--k-surface);
		font-size: 3rem;
		line-height: 1.2;
		letter-spacing: -0.01em;
	}

	.k-ask {
		gap: 16px;
		padding: 80px 64px;
		background: var(--k-border);
	}
	body.kumtuks .k-ask__title { font-size: 2.75rem; line-height: 1.1; letter-spacing: -0.02em; }
	.k-ask__list { gap: 0; font-size: 1.75rem; line-height: 1.29; letter-spacing: -0.01em; }

	.k-format {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 62px;
		padding: 80px 64px;
	}
	.k-format__intro { flex: 0 1 654px; gap: 16px; }
	.k-format__items { flex: 0 1 581px; gap: 40px; }

	.k-tile { gap: 24px; }
	.k-tile__icon,
	.k-tile__icon--image { width: 124px; height: 125px; }
	.k-tile__icon img { width: 100px; height: 100px; }
	.k-tile__body { gap: 8px; }
	body.kumtuks .k-tile__title { font-size: 1.75rem; line-height: 1.29; letter-spacing: -0.01em; }
	body.kumtuks .k-tile__text { color: var(--k-ink); font-size: 1.125rem; }

	.k-band__inner { gap: 16px; padding: 80px 64px 80px 336px; }
	body.kumtuks .k-band__button {
		align-self: flex-start;
		min-height: 40px;
		padding: 8px 16px;
		font-size: 1rem;
		font-weight: 700;
		white-space: nowrap;
	}

	.k-team {
		gap: 32px;
		max-width: none;
		padding: 80px 0;
		background: var(--k-bg);
	}
	.k-team > * { width: 100%; max-width: var(--k-max); margin-inline: auto; padding-inline: 64px; }
	.k-team__intro { gap: 16px; }
	.k-team__intro > * { max-width: 897px; }
	.k-team__grid { grid-template-columns: repeat(var(--k-team-cols, 3), minmax(0, 1fr)); gap: 27px; }   /* set in page-about.php: 1–3 */
	.k-person { gap: 16px; padding: 16px 16px 40px; background: var(--k-surface); }
	.k-person__photo { height: 354px; }
	body.kumtuks .k-person__name {
		display: block;
		font-size: 1.375rem;
		font-weight: 500;
	}
	body.kumtuks .k-person__role { color: inherit; font-size: inherit; }
	body.kumtuks .k-person__role::before { content: ", "; }
	body.kumtuks .k-person__name + .k-person__bio { margin-top: -8px; color: var(--k-ink); font-size: 0.875rem; }

	.k-involved {
		gap: 40px;
		max-width: none;
		padding: 80px 0;
		background: var(--k-bg);
	}
	.k-involved > * { width: 100%; max-width: var(--k-max); margin-inline: auto; padding-inline: 64px; }
	.k-involved__intro { gap: 16px; }
	.k-involved__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px;
	}
	.k-involved .k-tile { padding-right: 12px; background: var(--k-surface); }
	body.kumtuks .k-involved .k-tile__text { font-size: 1rem; }
}

/* 14. Educators — Figma EDUCATORS 13321:9805, tablet 15651:3982, mobile 15651:4106
   ------------------------------------------------------------------------ */

/* Centered intro with a button */
.k-intro--center .k-intro__inner { align-items: center; gap: 12px; text-align: center; }

body.kumtuks .k-intro__lead {
	margin: 0;
	color: var(--k-surface);
	font-size: 0.8125rem;
	line-height: 1.5;
}

body.kumtuks .k-intro__button {
	min-height: 0;
	padding: 12px 18px;
	font-size: 0.75rem;
	font-weight: 600;
	white-space: normal;
}

/* Text + image blocks on Educators: image inside the page padding on mobile/tablet */
.k-split--h3 { padding: 28px var(--k-section-x) 8px; }
.k-split--h3 + .k-split--h3 { padding-top: 8px; }
.k-split--h3 .k-split__media { height: 180px; }
.k-split--h3 .k-split__body { gap: 12px; padding: 12px 0 0; }

body.kumtuks .k-split__text--list :is(ul, ol) {
	margin: 0 0 12px;
	padding-left: 1.15em;
	list-style: disc;
}

body.kumtuks .k-split__text--list ol { list-style: decimal; }

body.kumtuks .k-split__text--list li + li { margin-top: 10px; }
body.kumtuks .k-split__text--list p { margin-bottom: 12px; }

/* Quotes carousel (yellow) */
.k-quotes {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px var(--k-section-x);
	background: var(--k-yellow);
	color: var(--k-ink);
}

.k-quotes__intro { display: flex; flex-direction: column; gap: 12px; }

body.kumtuks .k-quotes__title { font-size: 1.125rem; line-height: 1.4; letter-spacing: 0; }

body.kumtuks .k-quotes__text {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
}

.k-quotes__card {
	display: grid;
	grid-template-columns: 40px 1fr 40px;
	grid-template-areas:
		"slides slides slides"
		"prev count next";
	align-items: center;
	gap: 12px 0;
	padding: 18px;
	background: var(--k-surface);
}

.k-quotes__slides { grid-area: slides; display: flex; flex-direction: column; gap: 24px; }
.k-quotes__card.is-enhanced .k-quotes__slides { gap: 0; }

.k-quote { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.k-quote[hidden] { display: none; }

/* All slides share one grid cell, so the card is as tall as the tallest slide and doesn't
   jump when switching; inactive slides are invisible (and skipped by screen readers). */
.k-quotes__card.is-enhanced .k-quotes__slides { display: grid; }
.k-quotes__card.is-enhanced .k-quote { grid-area: 1 / 1; }
.k-quotes__card.is-enhanced .k-quote[hidden] { display: flex; visibility: hidden; }

.k-quote__mark { display: none; }

body.kumtuks .k-quote__text {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 0.8125rem;
	font-style: normal;
	font-weight: 500;
	line-height: 1.5;
}

body.kumtuks .k-quote__text p { margin: 0; font-style: normal; }
body.kumtuks .k-quote__text p::before { content: "“"; }
body.kumtuks .k-quote__text p:last-child::after { content: "”"; }

body.kumtuks .k-quote__by {
	color: var(--k-ink-2);
	font-size: 0.6875rem;
	line-height: 1.5;
}

/* Text slide: heading + paragraph instead of a quote */
body.kumtuks .k-quote__heading {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
}

body.kumtuks .k-quote__body {
	color: var(--k-ink-2);
	font-size: 0.8125rem;
	line-height: 1.6;
}

body.kumtuks .k-quote__body p { margin: 0 0 0.75em; }
body.kumtuks .k-quote__body p:last-child { margin-bottom: 0; }
body.kumtuks p.k-quote__by { margin: 0; }

body.kumtuks .k-quotes__arrow {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--k-ink);
	cursor: pointer;
}

body.kumtuks .k-quotes__arrow[hidden] { display: none; }
body.kumtuks .k-quotes__arrow:hover { background: var(--k-bg); }
.k-quotes__arrow--prev { grid-area: prev; justify-self: start; }
.k-quotes__arrow--next { grid-area: next; justify-self: end; }
.k-quotes__arrow .k-icon { width: 24px; height: 24px; }

body.kumtuks .k-quotes__count {
	grid-area: count;
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
}

/* Contribute band: centred on mobile/tablet */
.k-band--contribute .k-band__inner { align-items: center; gap: 12px; text-align: center; }

.k-band__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--k-surface);
	font-size: 0.75rem;
	line-height: 1.5;
}

body.kumtuks .k-band--contribute .k-band__button { align-self: center; padding-inline: 18px; }

/* For Educators stories: heading + See all */
.k-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

body.kumtuks .k-section__more {
	min-height: 0;
	padding: 8px 14px;
	font-size: 0.75rem;
	font-weight: 600;
}

.k-section__more .k-icon { width: 18px; height: 18px; }
.k-section--edu .k-section__inner { padding-bottom: 32px; }

@media (min-width: 768px) {
	body.kumtuks .k-intro__lead { font-size: 0.875rem; }
	body.kumtuks .k-quotes__title { font-size: 1.25rem; }
	body.kumtuks .k-quote__text { font-size: 0.875rem; }
	body.kumtuks .k-quote__heading { font-size: 1.25rem; }
	body.kumtuks .k-quote__body { font-size: 0.875rem; }
	.k-section--edu .k-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.k-intro--center .k-intro__inner { gap: 32px; }
	body.kumtuks .k-intro__lead {
		max-width: 1040px;
		font-size: 1.75rem;
		font-weight: 600;
		line-height: 1.29;
		letter-spacing: -0.01em;
	}
	body.kumtuks .k-intro__button {
		min-height: 40px;
		padding: 8px 40px;
		font-size: 1rem;
		font-weight: 700;
		white-space: nowrap;
	}
	body.kumtuks h1.k-intro__eyebrow { font-size: 1.75rem; line-height: 1.5; letter-spacing: 0; }

	.k-split--h3,
	.k-split--h3 + .k-split--h3 { padding: 0; }
	.k-split--h3 .k-split__media { height: auto; }
	.k-split--h3 .k-split__body { gap: 16px; padding: 80px 64px; }
	.k-split--reverse .k-split__media { order: 2; }
	body.kumtuks .k-split--h3 .k-split__title { font-size: 2.25rem; line-height: 1.2; letter-spacing: 0; }
	body.kumtuks .k-split__text--list { color: var(--k-ink); font-size: 1.125rem; }
	body.kumtuks .k-split__text--list :is(ul, ol) { margin-bottom: 19px; padding-left: 1.5em; }
	body.kumtuks .k-split__text--list li + li { margin-top: 0; }
	body.kumtuks .k-split__text--list p { margin-bottom: 19px; }

	.k-quotes {
		display: grid;
		grid-template-columns: 434px minmax(0, 1fr);
		gap: 0;
		padding: 0;
	}
	.k-quotes__intro { justify-content: center; gap: 16px; padding: 80px 60px 80px 64px; }
	body.kumtuks .k-quotes__title { font-size: 3rem; line-height: 1.2; letter-spacing: -0.01em; }
	body.kumtuks .k-quotes__text { font-size: 1.125rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
	.k-quotes__stage { padding: 80px 64px; }

	.k-quotes__card {
		grid-template-columns: 24px minmax(0, 1fr) 24px;
		grid-template-areas:
			"prev slides next"
			". count .";
		gap: 40px;
		min-height: 503px;
		padding: 120px 32px 80px;
	}
	body.kumtuks .k-quotes__arrow { width: 24px; height: 24px; }
	body.kumtuks .k-quotes__arrow:hover { background: none; color: var(--k-blue); }
	.k-quote { gap: 12px; }
	.k-quote__mark {
		display: block;
		height: 35px;
		font-size: 7.5rem;
		font-weight: 500;
		line-height: 1;
	}
	body.kumtuks .k-quote__text { font-size: 1.75rem; font-weight: 600; line-height: 1.29; letter-spacing: -0.01em; }
	body.kumtuks .k-quote__text p::before,
	body.kumtuks .k-quote__text p:last-child::after { content: none; }
	body.kumtuks .k-quote__by { color: var(--k-ink); font-size: 1.125rem; }
	.k-quote--text { gap: 20px; }
	body.kumtuks .k-quote__heading { font-size: 1.75rem; line-height: 1.29; letter-spacing: -0.01em; }
	body.kumtuks .k-quote__body { color: var(--k-ink); font-size: 1.125rem; }
	body.kumtuks .k-quotes__count { justify-self: end; font-size: 1.25rem; }

	.k-band--contribute .k-band__inner { align-items: flex-start; gap: 16px; text-align: left; }
	.k-band__list {
		gap: 0;
		padding-left: 1.5em;
		list-style: disc;
		color: var(--k-surface);
		font-size: 1.375rem;
	}
	body.kumtuks .k-band--contribute .k-band__text { font-weight: 400; }
	body.kumtuks .k-band--contribute .k-band__button { align-self: flex-start; padding-inline: 16px; }

	.k-section--edu .k-section__inner { gap: 16px; padding: 48px 0; }
	.k-section__inner > .k-section__head { padding-inline: var(--k-section-x); }
	body.kumtuks .k-section__more {
		gap: 8px;
		min-height: 0;
		padding: 16px 48px;
		font-size: 1.125rem;
		font-weight: 600;
	}
	.k-section__more .k-icon { width: 24px; height: 24px; }
	.k-section--edu .k-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Small desktops (1024–1199): narrower title column and smaller quote so the card stays readable */
@media (min-width: 1024px) and (max-width: 1199px) {
	.k-quotes { grid-template-columns: 320px minmax(0, 1fr); }
	.k-quotes__intro { padding-right: 40px; }
	body.kumtuks .k-quotes__title { font-size: 2.5rem; }
	.k-quotes__stage { padding: 64px 40px; }
	.k-quotes__card { min-height: 0; padding: 64px 24px 48px; gap: 24px; }
	body.kumtuks .k-quote__text { font-size: 1.375rem; }
}

/* 15. Support — Figma SUPPORT 13335:12099, tablet 15684:4357, mobile 15684:4358
   ------------------------------------------------------------------------ */

/* Intro: big white heading on mobile/tablet, yellow caps label on desktop */
.k-intro--stack .k-intro__inner {
	align-items: flex-start;
	gap: 16px;
	padding-block: 48px;
	text-align: left;
}

body.kumtuks .k-intro--stack .k-intro__eyebrow {
	color: var(--k-surface);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
}

body.kumtuks .k-intro--stack .k-intro__lead {
	color: var(--k-surface);
	font-size: 0.9375rem;
	font-weight: 400;
}

/* Image + text + button rows */
.k-split--row,
.k-split--row + .k-split--row { padding: 32px var(--k-section-x); }
.k-split--row + .k-split--row { border-top: 1px solid var(--k-border); }
.k-split--row { display: flex; flex-direction: column; gap: 20px; }
.k-split--row .k-split__body { padding: 0; }
body.kumtuks .k-split--row .k-split__title { font-size: 1.1875rem; }
body.kumtuks .k-split--row .k-split__text { font-size: 0.875rem; }

body.kumtuks .k-split__button {
	align-self: flex-start;
	min-height: 0;
	padding: 14px 24px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	white-space: normal;
}

body.kumtuks .k-btn--secondary-mobile { background: var(--k-surface); }
body.kumtuks .k-btn--secondary-mobile:hover { background: var(--k-blue); color: var(--k-surface); }

@media (min-width: 768px) {
	.k-intro--stack .k-intro__inner { padding: 64px 48px; }
	body.kumtuks .k-intro--stack .k-intro__eyebrow { font-size: 2.25rem; }
	body.kumtuks .k-intro--stack .k-intro__lead { font-size: 1rem; }

	.k-split--row,
	.k-split--row + .k-split--row {
		display: grid;
		grid-template-columns: 280px minmax(0, 1fr);
		align-items: center;
		gap: 40px;
		padding: 48px;
	}
	.k-split--row.k-split--reverse { grid-template-columns: minmax(0, 1fr) 280px; }
	.k-split--row.k-split--reverse .k-split__media { order: 2; }
	.k-split--row .k-split__media { height: 200px; }
	body.kumtuks .k-split--row .k-split__title { font-size: 1.375rem; }
}

@media (min-width: 1024px) {
	.k-intro--stack .k-intro__inner {
		align-items: center;
		gap: 32px;
		padding: 80px 64px 88px;
		text-align: center;
	}
	body.kumtuks .k-intro--stack .k-intro__eyebrow {
		color: var(--k-yellow);
		font-size: 1.75rem;
		line-height: 1.5;
		text-transform: uppercase;
	}
	body.kumtuks .k-intro--stack .k-intro__lead { color: var(--k-surface); font-size: 1.75rem; font-weight: 600; }

	.k-split--row,
	.k-split--row + .k-split--row {
		grid-template-columns: 1fr 1fr;
		gap: 0;
		min-height: 314px;
		padding: 0;
		border: 0;
	}
	.k-split--row.k-split--reverse { grid-template-columns: 1fr 1fr; }
	/* Picture fills the whole half of the row, however tall the text side is */
	.k-split--row .k-split__media { position: relative; height: auto; }
	body.kumtuks .k-split--row .k-split__media img { position: absolute; inset: 0; }
	.k-split--row .k-split__body { padding: 80px 64px; }
	body.kumtuks .k-split--row .k-split__title { font-size: 2.25rem; }
	body.kumtuks .k-split--row .k-split__text { font-size: 1.125rem; }

	body.kumtuks .k-split__button {
		min-height: 40px;
		padding: 8px 40px;
		font-size: 1rem;
		font-weight: 700;
		letter-spacing: 0;
		white-space: nowrap;
	}
	body.kumtuks .k-btn--secondary-mobile { background: var(--k-yellow); }
	body.kumtuks .k-btn--secondary-mobile:hover { background: var(--k-blue); color: var(--k-yellow); }
}

/* 16. Form pages (Donate; reused by Newsletter, Contact) — Figma DONATE 13499:12743,
       "FORMS TEMPLATE" tablet 15652:4394 / mobile 15652:4467
   ------------------------------------------------------------------------ */
.k-form-area {
	padding: 32px var(--k-section-x);
	background: var(--k-surface);
}

.k-form-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 621px;
	margin-inline: auto;
	background: var(--k-surface);
}

.k-form-card--donate { align-items: stretch; text-align: center; }

body.kumtuks .k-form-card__title {
	font-size: 1.75rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

body.kumtuks .k-form-card__text {
	color: var(--k-ink-2);
	font-size: 0.875rem;
	line-height: 1.5;
}

body.kumtuks .k-form-card__text p { margin: 0 0 0.75em; }
body.kumtuks .k-form-card__text p:last-child { margin-bottom: 0; }

body.kumtuks .k-form-card__button {
	min-height: 0;
	padding-block: 14px;
	font-size: 0.8125rem;
	font-weight: 600;
}

body.kumtuks .k-form-card__note {
	margin: 0;
	color: var(--k-ink-2);
	font-size: 0.75rem;
	line-height: 1.5;
}

body.kumtuks .k-form-card__notice {
	margin: 0;
	padding: 12px 14px;
	border-left: 4px solid var(--k-yellow);
	background: var(--k-bg);
	color: var(--k-ink-2);
	font-size: 0.8125rem;
	text-align: left;
}

/* Embedded CanadaHelps form: give it the full card width (its two-column fields need ~560px) */
.k-donate-embed { min-height: 480px; }                       /* reserve space while it loads */
.k-donate-embed iframe { display: block; width: 100% !important; max-width: 100%; border: 0; }
body.kumtuks .k-form-card__note a { color: var(--k-blue); text-decoration: underline; }

/* QR code for donating from a phone — square, 2px ink frame like buttons/cards; phones are hidden
   (the visitor is already on the phone that would scan it) */
.k-donate-qr { display: none; }

@media (min-width: 768px) {
	.k-donate-qr {
		display: flex;
		align-items: center;
		gap: 24px;
		padding-top: 24px;
		border-top: 2px solid var(--k-border);
		text-align: left;
	}

	body.kumtuks .k-donate-qr__code {
		flex: 0 0 auto;
		width: 148px;
		height: 148px;
		padding: 6px;
		border: 2px solid var(--k-ink);
		background: #fff;
		object-fit: contain;
	}

	.k-donate-qr__text { display: flex; flex-direction: column; gap: 8px; }

	body.kumtuks .k-donate-qr__title {
		margin: 0;
		font-size: 0.875rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		line-height: 1.3;
		text-transform: uppercase;
	}

	body.kumtuks .k-donate-qr__text p {
		margin: 0;
		color: var(--k-ink-2);
		font-size: 0.875rem;
		line-height: 1.5;
	}
}

@media (min-width: 768px) {
	body.kumtuks .k-form-card__title { font-size: 2.25rem; }
}

@media (min-width: 1024px) {
	.k-form-card--embed { max-width: 680px; padding: 48px 24px; }
}

@media (min-width: 1024px) {
	.k-form-area {
		padding: 64px var(--k-section-x) 80px;
		background: var(--k-border);
	}

	.k-form-card {
		gap: 24px;
		padding: 64px 48px;
	}

	body.kumtuks .k-form-card__text { color: var(--k-ink); font-size: 1.125rem; }
	body.kumtuks .k-form-card__button {
		min-height: 52px;
		padding-block: 12px;
		font-size: 1rem;
		font-weight: 700;
	}
	body.kumtuks .k-form-card__note { font-size: 0.875rem; }
}

/* 17. Newsletter — Figma NEWSLETTER 13499:11970, tablet 15707:4719, mobile 15707:4720
   ------------------------------------------------------------------------ */
.k-intro__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

/* Stacked field + full-width button below desktop (the footer form goes to one row on tablet) */
@media (max-width: 1023px) {
	.k-intro__form .k-newsletter-form form,
	.k-intro__form .k-newsletter-form .mc4wp-form-fields { flex-direction: column; }
	body.kumtuks .k-intro__form .k-newsletter-form :is(button, input[type="submit"]) { flex: 0 0 auto; width: 100%; padding-block: 10px; }
	body.kumtuks .k-intro__form .k-newsletter-form input[type="email"] { border-radius: 0; }
}

body.kumtuks .k-intro__note {
	margin: 0;
	color: var(--k-surface);
	font-size: 0.75rem;
	line-height: 1.5;
}

/* From the Press */
.k-press {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: var(--k-max);
	margin-inline: auto;
	padding: 40px var(--k-section-x);
}

body.kumtuks .k-press__title,
body.kumtuks .k-section--alerts .k-section__title { font-size: 1.25rem; line-height: 1.4; letter-spacing: 0; }

.k-press__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-press__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.k-press__media {
	height: 140px;
	overflow: hidden;
	background: var(--k-border);
}

body.kumtuks .k-press__media img { width: 100%; height: 100%; object-fit: cover; }

.k-press__body { display: flex; flex-direction: column; gap: 6px; }

body.kumtuks .k-press__item-title {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
}

body.kumtuks .k-press__link { color: var(--k-ink); text-decoration: none; }
body.kumtuks .k-press__link:hover { text-decoration: underline; }
.k-press__link::after { content: ""; position: absolute; inset: 0; }
.k-press__item:focus-within { box-shadow: var(--k-focus); }
.k-press__link:focus-visible { box-shadow: none !important; }

body.kumtuks .k-press__text {
	margin: 0;
	color: var(--k-ink-2);
	font-size: 0.75rem;
	line-height: 1.5;
}

/* Topic & Story Alerts */
.k-section--alerts { border-top: 8px solid var(--k-bg); }
.k-section--alerts .k-section__inner { gap: 20px; padding-block: 40px; }

@media (min-width: 768px) {
	.k-press__item {
		display: grid;
		grid-template-columns: 160px minmax(0, 1fr);
		align-items: center;
		gap: 20px;
	}
	.k-press__media { height: 100px; }
	body.kumtuks .k-press__title,
	body.kumtuks .k-section--alerts .k-section__title { font-size: 1.5rem; }
	.k-section--alerts .k-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.k-intro__form { max-width: 714px; text-align: left; }
	body.kumtuks .k-intro__note { color: var(--k-surface); font-size: 0.875rem; }

	.k-press { gap: 16px; padding: 65px 0 0; }
	body.kumtuks .k-press__title,
	body.kumtuks .k-section--alerts .k-section__title { font-size: 2.25rem; line-height: 1.2; }
	.k-press__title { padding: 0 var(--k-section-x); }
	.k-press__list { gap: 0; }
	.k-press__item {
		grid-template-columns: 311px minmax(0, 1fr);
		align-items: start;
		gap: 12px;
		width: 100%;
		max-width: 1005px;
		margin-inline: auto;
		padding-block: 16px;
	}
	body.kumtuks .k-press__item-title { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }
	.k-press__body { gap: 8px; }
	body.kumtuks .k-press__text { color: var(--k-ink); font-size: 0.875rem; }

	.k-section--alerts { border-top: 0; }
	.k-section--alerts .k-section__inner { gap: 18px; padding: 65px 0 128px; }
}

/* 18. Contact + Contact Form 7 — Figma CONTACT 13335:11349, tablet 15684:4359, mobile 15684:4360
       Form code: docs/07-contact-form.md
   ------------------------------------------------------------------------ */
.k-contact-banner { display: none; }

.k-contact__intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 48px var(--k-section-x);
	background: var(--k-blue);
	color: var(--k-surface);
}

body.kumtuks .k-contact__title { color: var(--k-surface); font-size: 1.75rem; line-height: 1.3; letter-spacing: 0; }

body.kumtuks .k-contact__intro .k-contact__text {
	margin: 0;
	color: var(--k-surface);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.5;
}

.k-contact__form { padding: 32px var(--k-section-x); }

/* Form fields */
.k-cf7 { display: flex; flex-direction: column; gap: 20px; }

.k-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.k-field-row { display: grid; gap: 20px; }

/* CF7 wraps each field's line in <p>; let label and control sit directly in the field */
.k-field > p { display: contents; }

body.kumtuks .k-field > p > label,
body.kumtuks .k-field > legend {
	padding: 0;
	color: var(--k-ink);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
}

body.kumtuks .k-field > legend { margin: 0 0 8px; }

.k-field .wpcf7-form-control-wrap { display: block; }

body.kumtuks .k-cf7 :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px 14px;
	border: 1.5px solid var(--k-ink);
	border-radius: 0;
	background: var(--k-surface);
	color: var(--k-ink);
	font: 500 0.9375rem/1.4 var(--k-font);
	box-shadow: none;
}

body.kumtuks .k-cf7 textarea { min-height: 120px; resize: vertical; }
body.kumtuks .k-cf7 ::placeholder { color: var(--k-ink-2); opacity: 0.75; }

body.kumtuks .k-cf7 select.wpcf7-select {
	padding-right: 40px;
	appearance: none;
	background: var(--k-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23040d1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
	cursor: pointer;
}

body.kumtuks .k-cf7 :is(input, select, textarea):focus-visible { outline: none; box-shadow: var(--k-focus); }

/* Radios: Email / Call */
.k-field--choice .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 24px; }
.k-field--choice .wpcf7-list-item { margin: 0; }

body.kumtuks .k-field--choice label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9375rem;
	font-weight: 500;
	cursor: pointer;
}

body.kumtuks .k-field--choice input[type="radio"] {
	width: 20px;
	height: 20px;
	margin: 0;
	border: 2px solid var(--k-ink);
	border-radius: 50%;
	background: var(--k-surface);
	appearance: none;
	cursor: pointer;
}

body.kumtuks .k-field--choice input[type="radio"]:checked { background: var(--k-yellow); }
body.kumtuks .k-field--choice input[type="radio"]:focus-visible { box-shadow: var(--k-focus); }

/* Submit */
.k-field--submit { position: relative; flex-direction: row; align-items: center; gap: 12px; }

body.kumtuks .k-cf7 .wpcf7-submit {
	width: 100%;
	min-height: 48px;
	padding: 12px 24px;
	font-size: 0.8125rem;
	font-weight: 600;
}

/* "(optional)" / "(required)" after a label; privacy note under the button */
body.kumtuks .k-field__opt { color: var(--k-ink-2); font-weight: 400; }
body.kumtuks .k-cf7__note { margin: 4px 0 0; color: var(--k-ink-2); font-size: 0.8125rem; line-height: 1.5; }
body.kumtuks .k-cf7__note a { color: var(--k-ink); text-decoration: underline; }

/* Cloudflare Turnstile ("not a robot" check, CF7 Integration); hidden while it isn't set up */
.k-field--captcha:not(:has(.cf-turnstile)) { display: none; }
.k-field--captcha .cf-turnstile { min-height: 65px; }

/* Honeypot: off-screen, never shown to people */
body.kumtuks .k-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Spinner sits over the button's right end so the button can stay full width */
.k-cf7 .wpcf7-spinner { position: absolute; top: 50%; right: 12px; margin: -12px 0 0; }

/* Validation and result messages: colour + text (never colour alone) */
body.kumtuks .k-cf7 :is(input, select, textarea).wpcf7-not-valid { border-color: var(--k-error); }

body.kumtuks .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: var(--k-error);
	font-size: 0.8125rem;
	font-weight: 500;
}

body.kumtuks .k-contact .wpcf7 form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 12px 14px;
	border: 2px solid var(--k-warning);
	font-size: 0.875rem;
}

body.kumtuks .k-contact .wpcf7 form.sent .wpcf7-response-output { border-color: var(--k-success); }
body.kumtuks .k-contact .wpcf7 form:is(.invalid, .failed, .aborted, .spam) .wpcf7-response-output { border-color: var(--k-error); }

/* General inquiries */
.k-inquiries { background: var(--k-bg); }

.k-inquiries__inner {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: var(--k-max);
	margin-inline: auto;
	padding: 32px var(--k-section-x);
}

body.kumtuks .k-inquiries__title { font-size: 1rem; line-height: 1.4; letter-spacing: 0; }
body.kumtuks .k-inquiries__email { margin: 0; font-size: 0.8125rem; }
body.kumtuks .k-inquiries__email a { color: var(--k-ink); }

@media (min-width: 768px) {
	.k-contact__intro { padding: 64px 48px; }
	body.kumtuks .k-contact__title { font-size: 2.25rem; }
	body.kumtuks .k-contact__intro .k-contact__text { font-size: 1rem; }
	.k-contact__form { padding: 48px; }
	.k-field-row { grid-template-columns: 1fr 1fr; gap: 24px; }
	body.kumtuks .k-cf7 .wpcf7-submit { width: auto; }
	.k-cf7 .wpcf7-spinner { position: static; margin: 0; }
	.k-inquiries__inner { padding: 48px; }
	body.kumtuks .k-inquiries__title { font-size: 1.25rem; }
	body.kumtuks .k-inquiries__email { font-size: 1rem; }
}

@media (min-width: 1024px) {
	.k-contact-banner {
		display: block;
		position: relative;
		max-width: calc(var(--k-max) - 48px);
		height: clamp(293px, 28vw, 400px);   /* Figma 293px; a little taller on wide screens so the picture isn't cut */
		margin-inline: 24px;
		overflow: hidden;
		background: var(--k-blue);
	}
	body.kumtuks .k-contact-banner img { width: 100%; height: 100%; object-fit: cover; }
	/* No dark overlay: the banner carries no text (Figma's overlay was for a placeholder photo) */

	.k-contact {
		display: flex;
		flex-direction: column;
		gap: 46px;
		max-width: var(--k-max);
		margin-inline: auto;
		padding: 47px 64px 0 100px;
	}
	.k-contact__intro { max-width: 696px; padding: 0; background: none; color: var(--k-ink); }
	body.kumtuks .k-contact__title { color: var(--k-ink); font-size: 2.75rem; line-height: 1.1; letter-spacing: -0.02em; }
	body.kumtuks .k-contact__intro .k-contact__text { color: var(--k-ink); font-size: 1.375rem; font-weight: 600; }

	.k-contact__form { max-width: 696px; padding: 0; }
	.k-cf7 { gap: 16px; }
	.k-field { gap: 4px; }
	.k-field--half { max-width: 336px; }
	body.kumtuks .k-field > p > label,
	body.kumtuks .k-field > legend { font-size: 1.125rem; font-weight: 500; }
	body.kumtuks .k-field > legend { margin-bottom: 12px; }
	body.kumtuks .k-cf7 :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) { font-size: 0.875rem; }
	body.kumtuks .k-cf7 textarea { min-height: 132px; }
	body.kumtuks .k-field--choice label { font-size: 0.875rem; }
	body.kumtuks .k-cf7 .wpcf7-submit {
		min-height: 40px;
		padding: 8px 40px;
		font-size: 1rem;
		font-weight: 700;
	}

	.k-inquiries { background: none; }
	.k-inquiries__inner { gap: 16px; padding: 46px 64px 80px 100px; }
	body.kumtuks .k-inquiries__title { font-size: 2.75rem; line-height: 1.1; letter-spacing: -0.02em; }
	body.kumtuks .k-inquiries__email { font-size: 1.125rem; }
}

@media (min-width: 1441px) {
	.k-contact-banner { margin-inline: auto; }
}

/* 19. Text pages (Privacy Policy, Terms of Service) — no Figma frame; By Topic band + text column
   ------------------------------------------------------------------------ */
.k-text-page__body {
	max-width: calc(760px + 2 * var(--k-section-x));
	margin-inline: auto;
	padding: 32px var(--k-section-x) 56px;
	font-size: 0.9375rem;
	line-height: 1.6;
}

body.kumtuks .k-text-page__body h2 { margin: 2em 0 0.5em; font-size: 1.25rem; line-height: 1.3; }
body.kumtuks .k-text-page__body h3 { margin: 1.5em 0 0.5em; font-size: 1.0625rem; line-height: 1.4; }
body.kumtuks .k-text-page__body :is(p, ul, ol) { margin-bottom: 1em; }
body.kumtuks .k-text-page__body a { color: var(--k-blue); }
body.kumtuks .k-text-page__body .k-legal__updated { color: var(--k-ink-2); font-size: 0.875rem; }

@media (min-width: 1024px) {
	.k-text-page__body { padding-block: 56px 80px; font-size: 1.0625rem; }
	body.kumtuks .k-text-page__body h2 { font-size: 1.75rem; }
	body.kumtuks .k-text-page__body h3 { font-size: 1.25rem; }
}

/* Wide screens: centre the 1392px hero */
@media (min-width: 1441px) {
	.k-story__hero,
	.k-hero { margin-inline: auto; }
}

/* Older posts and pages rendered by Neve templates: on-brand buttons (comment form, Button blocks) */
body.kumtuks :is(#respond input[type="submit"], .wp-block-button__link, .nv-content-wrap .button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 16px;
	border: var(--k-border-w) solid var(--k-ink);
	border-radius: 0;
	background: var(--k-yellow);
	color: var(--k-ink);
	font: 700 1rem/1.5 var(--k-font);
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: none;
}

body.kumtuks :is(#respond input[type="submit"], .wp-block-button__link, .nv-content-wrap .button):hover {
	background: var(--k-ink);
	color: var(--k-yellow);
}

/* Pages still rendered by Neve templates (Privacy, Terms): breathing room before the footer. */
body.kumtuks .single-page-container,
body.kumtuks .archive-container { padding-bottom: 64px; }

/* 20. Neve leftovers — hide anything Neve might still print around our header. */
body.kumtuks .header-main,
body.kumtuks .hfg_header,
body.kumtuks .site-footer,
body.kumtuks .scroll-to-top { display: none; }   /* Neve "back to top": not in the design, covered footer links */

/* 21. Reduced motion */
@media (prefers-reduced-motion: reduce) {
	body.kumtuks *,
	body.kumtuks *::before,
	body.kumtuks *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* 22. Mobile polish (decisions 23 Oct 2026) — one heading scale, full-width buttons, steady hero,
       button hover by background, back-to-top button.
   ------------------------------------------------------------------------ */

/* Homepage hero: every slide shares one cell, so the block keeps the height of the tallest slide
   and doesn't jump while the carousel turns (inactive slides are invisible and skipped by screen readers). */
.k-hero__slides { display: grid; }
.k-hero__slide { grid-area: 1 / 1; }
.k-hero__slide[hidden] { display: flex; visibility: hidden; }

/* Button hover follows the background: blue on light sections, white on dark (blue / photo) ones. */
body.kumtuks :is(.k-hero, .k-intro, .k-band, .k-story__hero, .k-topic-hero) .k-btn:hover {
	background: var(--k-surface);
	color: var(--k-ink);
}

/* Back to top (phones and tablets) */
body.kumtuks .k-to-top {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 90;
	display: none;   /* shown per device type below */
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: var(--k-border-w) solid var(--k-ink);
	border-radius: 0;
	background: var(--k-yellow);
	color: var(--k-ink);
	cursor: pointer;
	opacity: 1;
	transition: opacity 0.2s ease, background-color 0.15s ease;
}
/* Shown only on the device types ticked in Customize → Kumtuks, and only once scrolled (no [hidden]) */
@media (max-width: 767px) {
	body.kumtuks .k-to-top--phone:not([hidden]) { display: grid; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	body.kumtuks .k-to-top--tablet:not([hidden]) { display: grid; }
}
body.kumtuks .k-to-top:hover { background: var(--k-blue); color: var(--k-yellow); }
body.kumtuks .k-to-top:focus-visible { box-shadow: var(--k-focus); outline: none; }
.k-to-top .k-icon { width: 18px; height: 18px; transform: rotate(-90deg); }   /* the “See all” arrow, pointing up */
@media (min-width: 1024px) {
	body.kumtuks .k-to-top--desktop:not([hidden]) { display: grid; }
}

/* Heading scale for phones and tablets (Figma desktop sizes stay as they are):
   page titles · section titles · item titles; story cards keep their own size. */
@media (max-width: 1023px) {
	body.kumtuks :is(.k-intro__eyebrow, .k-intro--stack .k-intro__eyebrow) { color: var(--k-yellow); text-transform: uppercase; }
	body.kumtuks :is(.k-section__title, .k-section--alerts .k-section__title, .k-about__title, .k-explore-topics__title, .k-split__title, .k-split--row .k-split__title, .k-ask__title, .k-format__title, .k-band__title, .k-team__title, .k-involved__title, .k-quotes__title, .k-form-card__title, .k-inquiries__title, .k-story__section-title, .k-story__related-title, .k-text-page__body h2) {
		font-size: var(--k-h2);
		line-height: 1.3;
		letter-spacing: 0;
	}
	/* After the section rule on purpose: All Topics uses the topics heading as its page title */
	body.kumtuks :is(.k-intro__eyebrow, .k-intro--stack .k-intro__eyebrow, .k-contact__title, .k-topic-hero__title, .k-story__title, .k-explore-topics--page .k-explore-topics__title) {
		font-size: var(--k-h1);
		line-height: 1.25;
		letter-spacing: -0.01em;
	}
	body.kumtuks .k-hero__title { font-size: var(--k-h-hero); line-height: 1.25; }
	body.kumtuks :is(.k-feature__title, .k-person__name, .k-quote__heading, .k-text-page__body h3) { font-size: var(--k-h3); line-height: 1.35; }
}
@media (max-width: 767px) {
	body.kumtuks { --k-h1: 1.75rem; --k-h2: 1.375rem; --k-h3: 1.125rem; --k-h-hero: 1.5rem; }   /* 28 / 22 / 18 / 24 */
}
@media (min-width: 768px) and (max-width: 1023px) {
	body.kumtuks { --k-h1: 2.25rem; --k-h2: 1.75rem; --k-h3: 1.25rem; --k-h-hero: 1.75rem; }  /* 36 / 28 / 20 / 28 */
}

/* Phones: every page intro (About, Educators, Support, Donate, Get Updates, Contact, topic and text pages)
   looks like the Support one — 48px of air top and bottom, left-aligned, yellow CAPS title, 15px white text. */
@media (max-width: 767px) {
	body.kumtuks :is(.k-intro .k-intro__inner, .k-contact__intro, .k-topic-hero__inner) {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 48px var(--k-section-x);
		text-align: left;
	}
	body.kumtuks .k-topic-hero { padding: 0; }
	body.kumtuks :is(.k-contact__title, .k-topic-hero__title) { color: var(--k-yellow); text-transform: uppercase; }
	body.kumtuks :is(.k-intro__lead, .k-intro__text, .k-intro__text p, .k-intro--stack .k-intro__lead, .k-contact__intro .k-contact__text, .k-topic-hero__text, .k-topic-hero__text p) {
		margin: 0;
		color: var(--k-surface);
		font-size: 0.9375rem;
		font-weight: 400;
		line-height: 1.5;
	}
	body.kumtuks .k-intro .k-intro__text p + p { margin-top: 1em; }   /* beats the :is() reset above */
	body.kumtuks .k-intro__button { margin-top: 8px; }
}

/* Phones (< 768px): buttons full width — except the header/footer buttons, "See all", and the in-row Search/arrows/tabs */
@media (max-width: 767px) {
	body.kumtuks .k-btn:not(.k-btn--header):not(.k-btn--footer):not(.k-section__more) {
		display: flex;
		align-self: stretch;
		width: 100%;
		white-space: normal;
		text-align: center;
	}
	body.kumtuks .k-cf7 .wpcf7-submit { width: 100%; }
}

/* 23. One button system (decision 23 Oct 2026): every button on the site — header/footer Donate, "See all",
       Subscribe, Submit, content buttons — is the same height and type on each screen size.
       Phones/tablets 44px · 14px; computers 48px · 16px. Widths: phones full width (except header/footer Donate and
       See all); Support's three buttons share one width from tablet up.
   ------------------------------------------------------------------------ */
body.kumtuks :is(.k-btn, .k-cf7 .wpcf7-submit, .k-newsletter-form :is(button, input[type="submit"])) {
	box-sizing: border-box;
	min-height: 44px;
	height: auto;
	padding: 10px 24px;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
body.kumtuks .k-section__more { gap: 8px; }
body.kumtuks .k-section__more .k-icon { width: 18px; height: 18px; }
/* The email field next to Subscribe matches the button */
body.kumtuks .k-newsletter-form input[type="email"] { box-sizing: border-box; min-height: 44px; height: 44px; }
/* Field and Subscribe side by side (tablet up): line them up; on phones they stack full width */
@media (min-width: 768px) { body.kumtuks .k-newsletter-form .mc4wp-form-fields { align-items: center; } }
body.kumtuks .k-newsletter-form .mc4wp-form-fields label input { margin-top: 0; }
body.kumtuks .k-newsletter-form :is(button, input[type="submit"]) { padding-block: 10px; }

@media (min-width: 1024px) {
	body.kumtuks :is(.k-btn, .k-cf7 .wpcf7-submit, .k-newsletter-form :is(button, input[type="submit"])) {
		min-height: 48px;
		padding: 11px 32px;
		font-size: 1rem;
	}
	body.kumtuks .k-newsletter-form input[type="email"] { min-height: 48px; height: 48px; }
	body.kumtuks .k-section__more .k-icon { width: 20px; height: 20px; }
}

/* Header Donate stays compact on phones/tablets so the bar keeps its height */
@media (max-width: 1023px) {
	body.kumtuks .k-btn--header { min-height: 36px; padding: 6px 14px; font-size: 0.8125rem; }
}

/* Support: the three buttons share one width from tablet up */
@media (min-width: 768px) {
	body.kumtuks .k-split--row .k-split__button { width: min(100%, 320px); padding-inline: 16px; justify-content: center; text-align: center; }
}