/* ==========================================================================
   Kiara Reju — main stylesheet
   Palette, type and the orb motif are taken from the Kiara Reju packaging:
   a white box with a soft deep-teal orb, a serif wordmark and a syringe line.
   ========================================================================== */

:root {
	--paper: #F6F8F7;
	--studio: #F3F3F3;
	--white: #FFFFFF;
	--mist: #E3EFED;
	--mist-deep: #CFE2DF;
	--teal: #0B5755;
	--teal-mid: #13716D;
	--teal-deep: #083F3E;
	--teal-ink: #062F2E;
	--ink: #10302E;
	--ink-2: #3E5755;
	--ink-3: #526664;
	--rule: #D3DFDD;
	--rule-strong: #B3C6C3;

	/* Ingredient colours, taken from each ingredient's own artwork. */
	--pdrn: #E8A497;
	--ha: #9DB7BB;
	--niacin: #D3A22F;

	--serif: Newsreader, "Iowan Old Style", Georgia, serif;
	--sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	--wrap: 1240px;
	--gutter: clamp(20px, 4vw, 48px);
	--section: clamp(60px, 2rem + 7.5vw, 144px);
	--radius-lg: 28px;
	--radius-md: 18px;

	--syringe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M1.5 2.75v6.5M1.5 6H31M31 1.5v9' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round'/%3E%3Crect x='31' y='3.5' width='56' height='5' rx='.75'/%3E%3Cpath d='M87 6h6' stroke='%23000' stroke-width='2.5'/%3E%3Cpath d='M93 6h25.5' stroke='%23000' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
	--check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4 4.9 8.7 9.6 3.6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--serif);
	font-optical-sizing: auto;
	font-weight: 380;
	line-height: 1.12;
	color: var(--ink);
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.625rem, 1.6rem + 4.2vw, 4.75rem);
	font-weight: 320;
	line-height: 1.02;
	letter-spacing: -0.018em;
}

h2 {
	font-size: clamp(2rem, 1.35rem + 2.5vw, 3.25rem);
	font-weight: 340;
	line-height: 1.06;
	letter-spacing: -0.012em;
}

h3 {
	font-size: 1.5rem;
	line-height: 1.2;
	font-weight: 420;
}

h4 {
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

p,
ul,
ol,
dl,
dd,
figure,
blockquote {
	margin: 0;
}

p,
li,
figcaption,
td,
th,
dd {
	text-wrap: pretty;
}

a {
	color: var(--teal);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 0.2s;
}

a:hover {
	color: var(--teal-deep);
}

strong {
	font-weight: 600;
}

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

::selection {
	background: var(--mist-deep);
	color: var(--teal-ink);
}

.kr-skip {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	padding: 10px 18px;
	background: var(--teal);
	color: #fff;
	border-radius: 999px;
	text-decoration: none;
}

.kr-skip:focus {
	top: 12px;
	color: #fff;
}

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

/* --------------------------------------------------------------------------
   Text helpers
   -------------------------------------------------------------------------- */

.kr-lead {
	font-family: var(--serif);
	font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.4375rem);
	line-height: 1.42;
	font-weight: 380;
	color: var(--ink);
}

.kr-note {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ink-3);
}

.kr-flow > * + * {
	margin-top: 1.1em;
}

.kr-flow > h2 + *,
.kr-flow > h1 + * {
	margin-top: 1.5rem;
}

.kr-flow > * + h3,
.kr-flow > * + h4 {
	margin-top: 2rem;
}

.kr-flow > h3 + *,
.kr-flow > h4 + * {
	margin-top: 0.6rem;
}

.kr-flow > * + .wp-block-buttons,
.kr-flow > * + .kr-compare,
.kr-flow > * + .wp-block-table,
.kr-flow > * + .kr-facts,
.kr-flow > * + .kr-checks,
.kr-flow > * + .kr-dashes {
	margin-top: 2rem;
}

.kr-flow > .kr-lead + p {
	margin-top: 1.25rem;
}

.kr-measure {
	max-width: 62ch;
}

.kr-admin-note {
	padding: 14px 16px;
	border: 1px dashed var(--rule-strong);
	border-radius: 12px;
	font-size: 0.875rem;
	color: var(--ink-3);
	background: var(--white);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.kr-btn,
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0.8rem 1.65rem;
	border: 1px solid var(--teal);
	border-radius: 999px;
	background: var(--teal);
	color: #fff;
	font-family: var(--sans);
	font-size: 0.9688rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.005em;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.kr-btn:hover,
.wp-block-button .wp-block-button__link:hover {
	background: var(--teal-deep);
	border-color: var(--teal-deep);
	color: #fff;
}

.kr-btn--ghost,
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--teal);
	border: 1px solid var(--rule-strong);
	padding: 0.8rem 1.65rem;
}

.kr-btn--ghost:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--white);
	color: var(--teal-deep);
	border-color: var(--teal);
}

.kr-btn--small {
	min-height: 44px;
	padding: 0.55rem 1.2rem;
	font-size: 0.875rem;
}

.kr-btn--light,
.kr-section--teal .wp-block-button .wp-block-button__link,
.kr-cta .wp-block-button .wp-block-button__link {
	background: #fff;
	border-color: #fff;
	color: var(--teal-deep);
}

.kr-btn--light:hover,
.kr-section--teal .wp-block-button .wp-block-button__link:hover,
.kr-cta .wp-block-button .wp-block-button__link:hover {
	background: var(--mist);
	border-color: var(--mist);
	color: var(--teal-ink);
}

/* --------------------------------------------------------------------------
   Notice bar + header
   -------------------------------------------------------------------------- */

.kr-notice {
	background: var(--teal-ink);
	color: #C3DAD6;
	padding: 9px var(--gutter);
	font-size: 0.8125rem;
	font-stretch: 92%;
	line-height: 1.4;
	text-align: center;
}

.kr-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(246, 248, 247, 0.9);
	-webkit-backdrop-filter: saturate(1.3) blur(14px);
	backdrop-filter: saturate(1.3) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s;
}

.kr-header.is-scrolled {
	border-bottom-color: var(--rule);
}

.kr-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin-inline: auto;
	padding: 12px var(--gutter);
}

.kr-brand {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding-block: 5px;
	color: var(--teal);
	text-decoration: none;
}

.kr-brand:hover {
	color: var(--teal-deep);
}

.kr-brand__name {
	font-family: var(--serif);
	font-size: 1.625rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.004em;
	white-space: nowrap;
}

.kr-brand__mark {
	width: 66px;
}

.kr-brand--light,
.kr-brand--light:hover {
	color: #fff;
}

.kr-nav__panel {
	display: flex;
	align-items: center;
	gap: 36px;
}

.kr-nav__list {
	display: flex;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kr-nav__list a {
	display: inline-block;
	padding-block: 6px;
	color: var(--ink);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	transition: background-size 0.25s, color 0.2s;
}

.kr-nav__list a:hover,
.kr-nav__list .current-menu-item > a,
.kr-nav__list .current_page_item > a {
	color: var(--teal);
	background-size: 100% 1px;
}

.kr-nav__toggle {
	display: none;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin-right: -8px;
	padding: 10px 8px;
	border: 0;
	background: none;
	color: var(--ink);
	font: 600 0.9375rem/1 var(--sans);
	cursor: pointer;
}

.kr-nav__toggle-bars,
.kr-nav__toggle-bars::before,
.kr-nav__toggle-bars::after {
	display: block;
	width: 20px;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.25s, opacity 0.2s;
}

.kr-nav__toggle-bars {
	position: relative;
}

.kr-nav__toggle-bars::before,
.kr-nav__toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.kr-nav__toggle-bars::before {
	top: -6px;
}

.kr-nav__toggle-bars::after {
	top: 6px;
}

.kr-nav__toggle[aria-expanded="true"] .kr-nav__toggle-bars {
	background: transparent;
}

.kr-nav__toggle[aria-expanded="true"] .kr-nav__toggle-bars::before {
	transform: translateY(6px) rotate(45deg);
}

.kr-nav__toggle[aria-expanded="true"] .kr-nav__toggle-bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 860px) {
	.kr-nav__toggle {
		display: inline-flex;
	}

	.kr-nav__panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px var(--gutter) 28px;
		background: var(--paper);
		border-bottom: 1px solid var(--rule);
		box-shadow: 0 24px 40px -28px rgba(6, 47, 46, 0.35);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-6px);
		transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
	}

	.kr-menu-open .kr-nav__panel {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity 0.2s, transform 0.2s;
	}

	.kr-nav__list {
		flex-direction: column;
		gap: 0;
	}

	.kr-nav__list a {
		display: block;
		padding: 16px 0;
		font-family: var(--serif);
		font-size: 1.5rem;
		font-weight: 380;
		border-bottom: 1px solid var(--rule);
		background-image: none;
	}

	.kr-nav__cta {
		margin-top: 24px;
	}
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.kr-crumbs {
	padding: 22px var(--gutter) 0;
}

.kr-crumbs__inner {
	max-width: var(--wrap);
	margin-inline: auto;
	font-size: 0.8125rem;
	color: var(--ink-3);
}

.kr-crumbs a {
	color: var(--ink-2);
	text-decoration: none;
}

.kr-crumbs a:hover {
	color: var(--teal);
	text-decoration: underline;
}

.kr-crumbs__sep {
	margin-inline: 0.55em;
	color: var(--rule-strong);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.kr-section {
	position: relative;
	padding: var(--section) var(--gutter);
}

.kr-section > * {
	max-width: var(--wrap);
	margin-inline: auto;
}

/* Two plain (paper) sections in a row share one gap, not two. */
.kr-section:not(.kr-bg) + .kr-section:not(.kr-bg) {
	padding-top: 0;
}

.kr-section--mist {
	background: var(--mist);
}

.kr-section--studio {
	background: var(--studio);
}

.kr-section--white {
	background: var(--white);
}

.kr-section--teal {
	overflow: hidden;
	overflow: clip;
	background: var(--teal-deep);
	color: #C9DEDB;
}

.kr-section--teal::before {
	content: "";
	position: absolute;
	top: -40%;
	right: -18%;
	width: min(1100px, 110vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(43, 132, 128, 0.55), rgba(19, 113, 109, 0.22) 55%, rgba(8, 63, 62, 0) 100%);
	pointer-events: none;
}

.kr-section--teal > * {
	position: relative;
}

.kr-section--teal h2,
.kr-section--teal h3,
.kr-section--teal .kr-lead {
	color: #fff;
}

.kr-section--teal a {
	color: #fff;
}

/* Section header: heading on the left, supporting text on the right. */
.kr-intro {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 24px clamp(32px, 6vw, 96px);
	align-items: start;
	margin-bottom: clamp(48px, 6vw, 80px);
}

.kr-intro > :last-child > * + * {
	margin-top: 1.1em;
}

/* Document split: sticky heading column + content column (product insert). */
.kr-split {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: 24px clamp(32px, 6vw, 112px);
	align-items: start;
}

.kr-split > :first-child > * + * {
	margin-top: 1.1rem;
}

@media (min-width: 961px) {
	.kr-split > :first-child {
		position: sticky;
		top: 112px;
	}
}

.kr-split + * {
	margin-top: clamp(56px, 7vw, 96px);
}

.kr-subhead {
	margin-bottom: 32px;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 380;
}

@media (max-width: 960px) {
	.kr-intro,
	.kr-split {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Home hero: the box face, rebuilt as the page's opening
   -------------------------------------------------------------------------- */

.kr-hero {
	overflow: hidden;
	overflow: clip;
	padding-top: clamp(32px, 5vw, 72px);
	padding-bottom: clamp(56px, 7vw, 104px);
}

.kr-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(24px, 5vw, 88px);
	align-items: center;
}

.kr-orb {
	container-type: inline-size;
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	width: min(100%, 560px);
	aspect-ratio: 1;
	justify-self: center;
	text-align: center;
}

.kr-orb::before,
.kr-orb::after {
	content: "";
	position: absolute;
	inset: -12%;
	z-index: -1;
	border-radius: 50%;
}

.kr-orb::before {
	background: radial-gradient(closest-side,
		#0A4A49 0%,
		#0B5654 34%,
		#0F6462 50%,
		rgba(22, 116, 112, 0.9) 61%,
		rgba(66, 150, 146, 0.55) 72%,
		rgba(132, 190, 186, 0.26) 83%,
		rgba(196, 226, 222, 0.08) 92%,
		rgba(246, 248, 247, 0) 100%);
}

/* Fine print grain, as on the matte box. */
.kr-orb::after {
	background-image: var(--grain);
	opacity: 0.16;
	mix-blend-mode: soft-light;
	-webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 80%);
	mask-image: radial-gradient(closest-side, #000 55%, transparent 80%);
}

.kr-orb--small {
	width: 180px;
	margin: 0 auto 32px;
}

.kr-orb h1 {
	color: #fff;
	font-weight: 360;
	letter-spacing: 0;
}

.kr-orb__brand {
	display: block;
	font-size: clamp(2.5rem, 1.5rem + 5.2vw, 5.5rem);
	font-size: min(clamp(2.5rem, 1.5rem + 5.2vw, 5.5rem), 15.2cqi);
	line-height: 1;
	letter-spacing: 0.002em;
}

.kr-orb__brand::after {
	content: "";
	display: block;
	width: 62%;
	aspect-ratio: 120 / 12;
	margin: 0.3em auto 0.42em;
	background: currentColor;
	-webkit-mask: var(--syringe) center / contain no-repeat;
	mask: var(--syringe) center / contain no-repeat;
}

.kr-orb__type {
	display: block;
	font-size: clamp(0.9375rem, 0.86rem + 0.5vw, 1.3125rem);
	font-size: max(0.875rem, min(clamp(0.9375rem, 0.86rem + 0.5vw, 1.3125rem), 3.8cqi));
	font-weight: 400;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.9);
}

.kr-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	max-width: 540px;
}

.kr-hero__claims {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--serif);
	font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem);
	font-weight: 340;
	line-height: 1.22;
	color: var(--teal);
}

.kr-hero__copy > .kr-hero__claims {
	order: -1;
	margin-bottom: 0.65rem;
}

.kr-hero__claims li {
	text-wrap: balance;
}

.kr-hero__copy > .wp-block-buttons {
	margin-top: 1.15rem;
}

@media (prefers-reduced-motion: no-preference) {
	.kr-orb::before {
		animation: kr-bloom 1.8s cubic-bezier(0.16, 0.8, 0.24, 1) both;
	}

	.kr-orb__brand::after {
		animation: kr-draw 1.2s 0.5s cubic-bezier(0.65, 0, 0.25, 1) both;
	}
}

/* Starts mostly opaque so the white wordmark is legible from the first frame. */
@keyframes kr-bloom {
	from {
		opacity: 0.75;
		transform: scale(0.86);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes kr-draw {
	from {
		clip-path: inset(0 100% 0 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}

@media (max-width: 860px) {
	.kr-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.kr-orb {
		width: min(100%, 440px);
	}
}

/* Full-width product photograph under the hero. */
.kr-band {
	padding: 0 var(--gutter);
}

.kr-band .wp-block-image img,
.kr-band img {
	width: 100%;
	aspect-ratio: 16 / 8;
	object-fit: cover;
	object-position: 50% 45%;
	border-radius: var(--radius-lg);
}

/* Photos whose subject sits low in the frame (e.g. the box floating in water). */
.kr-band .kr-band__focus-low img {
	object-position: 50% 62%;
}

@media (max-width: 700px) {
	.kr-band .wp-block-image img,
	.kr-band img {
		aspect-ratio: auto;
		border-radius: var(--radius-md);
	}
}

/* --------------------------------------------------------------------------
   Formula: three ingredient lines
   -------------------------------------------------------------------------- */

.kr-ingredients {
	border-bottom: 1px solid var(--rule);
}

.kr-ingredient {
	display: grid;
	grid-template-columns: 168px minmax(0, 0.9fr) minmax(0, 1.5fr);
	grid-template-areas:
		"img dose name"
		"img dose role"
		"img dose text";
	grid-template-rows: auto auto 1fr;
	column-gap: clamp(24px, 4vw, 64px);
	padding-block: clamp(32px, 4vw, 48px);
	border-top: 1px solid var(--rule);
}

.kr-ingredient .wp-block-image {
	grid-area: img;
	align-self: start;
}

.kr-ingredient .wp-block-image img {
	width: 168px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}

.kr-ingredient h3 {
	grid-area: name;
	font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
	font-weight: 360;
}

.kr-ingredient__role {
	grid-area: role;
	margin-top: 6px;
	font-size: 0.9375rem;
	font-weight: 600;
	font-stretch: 88%;
	color: var(--teal);
}

.kr-ingredient > p:not(.kr-dose):not(.kr-ingredient__role) {
	grid-area: text;
	margin-top: 14px;
	color: var(--ink-2);
}

.kr-dose {
	grid-area: dose;
	align-self: start;
	display: flex;
	align-items: baseline;
	gap: 0.4em;
	font-size: 1rem;
	color: var(--ink-3);
	white-space: nowrap;
}

.kr-dose strong {
	position: relative;
	font-family: var(--serif);
	font-size: clamp(4rem, 2.6rem + 4.5vw, 6.5rem);
	font-weight: 280;
	line-height: 0.85;
	letter-spacing: -0.03em;
	color: var(--ink);
}

/* A small dot in the ingredient's own colour, as on a formulation sheet. */
.kr-dose::before {
	content: "";
	flex: none;
	align-self: center;
	width: 10px;
	height: 10px;
	margin-right: 0.35em;
	border-radius: 50%;
	background: var(--dot, var(--teal));
}

.kr-ingredient--pdrn {
	--dot: var(--pdrn);
}

.kr-ingredient--ha {
	--dot: var(--ha);
}

.kr-ingredient--niacinamide {
	--dot: var(--niacin);
}

@media (max-width: 860px) {
	.kr-ingredient {
		grid-template-columns: 96px minmax(0, 1fr);
		grid-template-areas:
			"img dose"
			"name name"
			"role role"
			"text text";
		row-gap: 0;
		align-items: center;
	}

	.kr-ingredient .wp-block-image img {
		width: 96px;
	}

	.kr-dose {
		align-self: center;
	}

	.kr-ingredient h3 {
		margin-top: 24px;
	}
}

/* --------------------------------------------------------------------------
   What is Kiara Reju
   -------------------------------------------------------------------------- */

.kr-what {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(40px, 6vw, 104px);
	align-items: center;
}

.kr-what > .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

.kr-compare {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border: 1px solid var(--rule);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--white);
}

.kr-compare > * {
	padding: 22px 24px 24px;
}

.kr-compare > * > * + * {
	margin-top: 8px;
}

.kr-compare h3 {
	font-family: var(--sans);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ink-2);
}

.kr-compare p {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--ink-2);
}

.kr-compare__kr {
	background: var(--teal);
}

.kr-compare .kr-compare__kr h3,
.kr-compare .kr-compare__kr p {
	color: #fff;
}

@media (max-width: 960px) {
	.kr-what {
		grid-template-columns: minmax(0, 1fr);
	}

	.kr-what > .wp-block-image {
		max-width: 460px;
	}

	.kr-what > .wp-block-image img {
		aspect-ratio: auto;
	}
}

@media (max-width: 560px) {
	.kr-compare {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Points (why choose, key benefits, approach)
   -------------------------------------------------------------------------- */

.kr-points {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 40px);
}

.kr-points--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kr-points--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kr-point {
	padding-top: 22px;
	border-top: 1px solid var(--rule-strong);
}

.kr-point h3 {
	font-size: 1.3125rem;
	line-height: 1.25;
}

.kr-point p {
	margin-top: 10px;
	font-size: 0.975rem;
	line-height: 1.6;
	color: var(--ink-2);
}

.kr-section--teal .kr-point {
	border-top-color: rgba(255, 255, 255, 0.2);
}

.kr-section--teal .kr-point p {
	color: #BCD5D1;
}

@media (max-width: 1080px) {
	.kr-points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.kr-points,
	.kr-points--3,
	.kr-points--2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Media + text
   -------------------------------------------------------------------------- */

.kr-media-text {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(40px, 6vw, 104px);
	align-items: center;
}

.kr-media-text > .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

.kr-media-text--wide > .wp-block-image img {
	aspect-ratio: 5 / 4;
}

@media (max-width: 960px) {
	.kr-media-text {
		grid-template-columns: minmax(0, 1fr);
	}

	.kr-media-text > .wp-block-image img,
	.kr-media-text--wide > .wp-block-image img {
		aspect-ratio: 3 / 2;
	}
}

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */

.kr-checks {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(24px, 3vw, 48px);
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rule-strong);
}

.kr-checks--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kr-checks--1 {
	grid-template-columns: minmax(0, 1fr);
}

.kr-checks li {
	display: flex;
	gap: 14px;
	align-items: baseline;
	padding: 18px 0;
	border-bottom: 1px solid var(--rule-strong);
	font-family: var(--serif);
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--ink);
}

.kr-checks li::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--teal) var(--check) center / 12px no-repeat;
	transform: translateY(2px);
}

.kr-checks--plain li {
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.5;
}

@media (max-width: 960px) {
	.kr-checks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.kr-checks.kr-checks--1 {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 600px) {
	.kr-checks,
	.kr-checks--2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.kr-dashes {
	padding: 0;
	list-style: none;
}

.kr-dashes li {
	position: relative;
	padding: 10px 0 10px 28px;
	border-bottom: 1px solid var(--rule);
}

.kr-dashes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.3em;
	width: 14px;
	height: 1px;
	background: var(--teal);
}

/* Ordered process: the only place numbers are used, because it is a sequence. */
.kr-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 40px);
	padding: 0;
	list-style: none;
	counter-reset: kr-step;
}

.kr-steps li {
	counter-increment: kr-step;
	padding-top: 20px;
	border-top: 1px solid var(--rule-strong);
	font-size: 0.975rem;
	line-height: 1.6;
	color: var(--ink-2);
}

.kr-steps li::before {
	content: counter(kr-step);
	display: block;
	margin-bottom: 20px;
	font-family: var(--serif);
	font-size: 3rem;
	font-weight: 280;
	line-height: 1;
	color: var(--teal);
}

.kr-steps li strong {
	display: block;
	margin-bottom: 8px;
	font-family: var(--serif);
	font-size: 1.3125rem;
	font-weight: 420;
	line-height: 1.25;
	color: var(--ink);
}

@media (max-width: 960px) {
	.kr-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.kr-steps {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Treatment areas (section colour matches the photograph's backdrop)
   -------------------------------------------------------------------------- */

.kr-areas {
	padding-right: 0;
	padding-bottom: 0;
}

.kr-areas > .kr-areas__grid {
	max-width: none;
	margin-left: max(0px, calc((100% - var(--gutter) - var(--wrap)) / 2));
	margin-right: 0;
	display: grid;
	grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: end;
}

.kr-areas__text {
	align-self: center;
	padding-bottom: var(--section);
}

.kr-areas__text > * + * {
	margin-top: 1.1rem;
}

.kr-section > .kr-checks + .kr-note {
	margin-top: 28px;
}

.kr-areas__grid > .wp-block-image {
	justify-self: end;
	width: min(100%, 600px);
}

.kr-areas__list {
	margin-top: 2rem;
	border-top: 1px solid var(--rule-strong);
}

.kr-area {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--rule-strong);
}

.kr-area h3 {
	font-size: 1.3125rem;
	line-height: 1.3;
}

.kr-area p {
	font-size: 0.975rem;
	color: var(--ink-2);
}

@media (max-width: 960px) {
	.kr-areas > .kr-areas__grid {
		grid-template-columns: minmax(0, 1fr);
		margin-left: 0;
	}

	.kr-areas__text {
		padding-right: var(--gutter);
		padding-bottom: 0;
	}

	.kr-areas__grid > .wp-block-image {
		width: min(88%, 520px);
	}
}

@media (max-width: 520px) {
	.kr-area {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}
}

/* --------------------------------------------------------------------------
   Tables: formula + specifications, set like a product insert
   -------------------------------------------------------------------------- */

.wp-block-table.kr-table {
	margin: 0;
	overflow-x: auto;
}

.wp-block-table.kr-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.975rem;
	line-height: 1.5;
}

.wp-block-table.kr-table thead {
	border-bottom: 0;
}

.wp-block-table.kr-table th,
.wp-block-table.kr-table td {
	padding: 16px 20px 16px 0;
	border: 0;
	border-bottom: 1px solid var(--rule);
	text-align: left;
	vertical-align: top;
}

.wp-block-table.kr-table thead th {
	padding-top: 0;
	border-bottom: 1px solid var(--ink);
	font-size: 0.8125rem;
	font-weight: 600;
	font-stretch: 88%;
	color: var(--ink-3);
}

.wp-block-table.kr-table tbody th,
.wp-block-table.kr-table.kr-table--spec td:first-child {
	width: 32%;
	font-weight: 600;
	font-size: 0.875rem;
	font-stretch: 88%;
	color: var(--ink-2);
}

.wp-block-table.kr-table--formula td:first-child {
	font-family: var(--serif);
	font-size: 1.25rem;
	color: var(--ink);
}

.wp-block-table.kr-table--formula td:nth-child(2) {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.kr-glance {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(40px, 6vw, 104px);
	align-items: start;
}

.kr-glance__aside > * + * {
	margin-top: 2rem;
}

.kr-glance__aside .wp-block-image img {
	width: 100%;
	border-radius: var(--radius-lg);
}

.kr-glance > :last-child > * + * {
	margin-top: 1.5rem;
}

@media (min-width: 961px) {
	.kr-glance__aside {
		position: sticky;
		top: 112px;
	}
}

@media (max-width: 960px) {
	.kr-glance {
		grid-template-columns: minmax(0, 1fr);
	}

	.kr-glance__aside .wp-block-image {
		max-width: 420px;
	}
}

/* Fact row: suggested protocol. */
.kr-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--rule);
}

.kr-fact {
	padding: 20px 24px 26px 0;
}

.kr-fact + .kr-fact {
	padding-left: 24px;
	border-left: 1px solid var(--rule);
}

.kr-fact__label {
	font-size: 0.8125rem;
	font-weight: 600;
	font-stretch: 88%;
	color: var(--ink-3);
}

.kr-fact__value {
	margin-top: 10px;
	font-family: var(--serif);
	font-size: 1.5rem;
	line-height: 1.22;
	color: var(--ink);
}

@media (max-width: 700px) {
	.kr-facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.kr-fact + .kr-fact {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid var(--rule);
	}
}

/* --------------------------------------------------------------------------
   Figures
   -------------------------------------------------------------------------- */

.kr-figure img {
	width: 100%;
	border-radius: var(--radius-md);
}

.kr-figure--panel {
	padding: clamp(16px, 3vw, 40px);
	background: var(--white);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
}

.kr-figure--panel img {
	border-radius: 0;
}

.kr-figure figcaption,
.wp-block-image.kr-figure .wp-element-caption {
	margin-top: 14px;
	font-size: 0.875rem;
	color: var(--ink-3);
	text-align: left;
}

.kr-scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 700px) {
	.kr-scroll-x img {
		width: 760px;
		max-width: none;
	}
}

/* --------------------------------------------------------------------------
   Safety + callout
   -------------------------------------------------------------------------- */

.kr-safety {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: 24px clamp(32px, 6vw, 112px);
	padding: clamp(28px, 4vw, 56px);
	background: var(--white);
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius-lg);
}

.kr-safety h2 {
	font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
}

.kr-safety > :last-child > * + * {
	margin-top: 1rem;
}

.kr-callout {
	padding: 22px 24px;
	background: var(--white);
	border: 1px solid var(--rule);
	border-radius: var(--radius-md);
	font-family: var(--serif);
	font-size: 1.25rem;
	line-height: 1.42;
	color: var(--ink);
}

@media (max-width: 860px) {
	.kr-safety {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Inner page hero
   -------------------------------------------------------------------------- */

.kr-page-hero {
	overflow: hidden; /* contains the glow behind the hero image */
	overflow: clip;
	padding-top: clamp(32px, 4vw, 64px);
}

.kr-page-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: clamp(36px, 6vw, 104px);
	align-items: center;
}

/* Optional second line inside an H1 (page subtitle). */
.kr-h1-sub {
	display: block;
	margin-top: 0.4em;
	font-size: 0.4em;
	font-weight: 360;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--teal);
}

.kr-page-hero__grid > :first-child > * + * {
	margin-top: 1.1rem;
}

.kr-page-hero__grid > :first-child > h1 + * {
	margin-top: 1.5rem;
}

.kr-page-hero__grid > :first-child > .wp-block-buttons {
	margin-top: 2rem;
}

.kr-page-hero__grid > .wp-block-image {
	position: relative;
	isolation: isolate;
}

.kr-page-hero__grid > .wp-block-image::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -14% -18% -14% -10%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(19, 113, 109, 0.32), rgba(132, 190, 186, 0.18) 60%, rgba(246, 248, 247, 0) 100%);
}

.kr-page-hero__grid > .wp-block-image img {
	width: 100%;
	border-radius: var(--radius-lg);
}

.kr-page-hero--text .kr-page-hero__grid {
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	align-items: end;
}

.kr-page-hero--text .kr-page-hero__grid > :last-child > * + * {
	margin-top: 1.1rem;
}

@media (max-width: 860px) {
	.kr-page-hero__grid,
	.kr-page-hero--text .kr-page-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Combination protocols (About)
   -------------------------------------------------------------------------- */

.kr-protocols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 40px);
}

.kr-protocol > .wp-block-image img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius-md);
}

.kr-protocol > h3 {
	margin-top: 24px;
}

.kr-protocol > * + p,
.kr-protocol > * + h4,
.kr-protocol > * + ul {
	margin-top: 12px;
}

.kr-protocol p,
.kr-protocol li {
	font-size: 0.975rem;
	line-height: 1.6;
	color: var(--ink-2);
}

.kr-protocol h4 {
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1px solid var(--rule);
	font-size: 0.9375rem;
}

.kr-protocol ul {
	padding-left: 1.1em;
}

.kr-protocol li + li {
	margin-top: 8px;
}

@media (max-width: 960px) {
	.kr-protocols {
		grid-template-columns: minmax(0, 1fr);
	}

	.kr-protocol {
		display: grid;
		grid-template-columns: 180px minmax(0, 1fr);
		column-gap: 28px;
		align-items: start;
	}

	.kr-protocol > .wp-block-image {
		grid-row: span 8;
	}

	.kr-protocol > h3 {
		margin-top: 0;
	}
}

@media (max-width: 560px) {
	.kr-protocol {
		display: block;
	}

	.kr-protocol > h3 {
		margin-top: 20px;
	}
}

/* --------------------------------------------------------------------------
   FAQ (Yoast FAQ block, enhanced into an accordion by main.js)
   -------------------------------------------------------------------------- */

.kr-faq {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: 32px clamp(32px, 6vw, 112px);
	align-items: start;
}

.kr-faq__head > * + * {
	margin-top: 1.1rem;
}

@media (min-width: 961px) {
	.kr-faq__head {
		position: sticky;
		top: 112px;
	}
}

.schema-faq {
	border-top: 1px solid var(--ink);
}

.schema-faq-section {
	border-bottom: 1px solid var(--rule);
}

.schema-faq-question,
.kr-faq__q {
	display: block;
	margin: 0;
	font-family: var(--serif);
	font-size: 1.3125rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--ink);
}

strong.schema-faq-question {
	padding: 22px 0 8px;
}

.kr-faq__q button {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 22px 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.kr-faq__q button:hover {
	color: var(--teal);
}

.kr-faq__q button::after {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 3px;
	border: 1px solid var(--rule-strong);
	border-radius: 50%;
	background:
		linear-gradient(var(--teal), var(--teal)) center / 9px 1.25px no-repeat,
		linear-gradient(var(--teal), var(--teal)) center / 1.25px 9px no-repeat;
	transition: transform 0.25s, background-color 0.2s;
}

.kr-faq__q button[aria-expanded="true"]::after {
	transform: rotate(45deg);
	background-color: var(--mist);
}

.schema-faq-answer {
	max-width: 64ch;
	padding-bottom: 24px;
	color: var(--ink-2);
}

@keyframes kr-reveal {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 960px) {
	.kr-faq {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Closing inquiry panel (synced pattern on every page)
   -------------------------------------------------------------------------- */

.kr-cta {
	padding: 0 var(--gutter) var(--section);
}

.kr-section + .kr-cta,
.kr-content > .kr-cta:first-child {
	padding-top: 0;
}

.kr-bg + .kr-cta,
.kr-bg + .wp-block-block > .kr-cta {
	padding-top: var(--section);
}

.kr-cta__panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 28px clamp(32px, 5vw, 80px);
	align-items: end;
	padding: clamp(28px, 6vw, 88px);
	border-radius: clamp(22px, 3vw, 32px);
	background: var(--teal-deep);
	color: #C9DEDB;
}

.kr-cta__panel::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: -12%;
	bottom: -70%;
	width: min(820px, 120vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(43, 132, 128, 0.6), rgba(19, 113, 109, 0.2) 60%, rgba(8, 63, 62, 0) 100%);
}

.kr-cta__panel h2 {
	color: #fff;
}

.kr-cta__panel > :last-child > * + * {
	margin-top: 1.5rem;
}

@media (max-width: 860px) {
	.kr-cta__panel {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Contact page + Contact Form 7
   -------------------------------------------------------------------------- */

.kr-contact {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(40px, 6vw, 104px);
	align-items: start;
}

.kr-contact__info > * + * {
	margin-top: 1rem;
}

.kr-contact__info > * + h2 {
	margin-top: clamp(40px, 5vw, 56px);
}

.kr-contact__info h2 {
	font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);
}

.kr-form-panel {
	padding: clamp(24px, 4vw, 48px);
	background: var(--white);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
}

.kr-form-panel > h2 {
	font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);
	margin-bottom: 28px;
}

@media (min-width: 961px) {
	.kr-form-panel {
		position: sticky;
		top: 112px;
	}
}

@media (max-width: 960px) {
	.kr-contact {
		grid-template-columns: minmax(0, 1fr);
	}

	.kr-contact > .kr-form-panel {
		order: -1;
	}
}

.kr-contact-list {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--rule-strong);
}

.kr-contact-list > div {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--rule-strong);
}

.kr-contact-list dt {
	font-size: 0.875rem;
	font-weight: 600;
	font-stretch: 88%;
	color: var(--ink-3);
}

.kr-contact-list--footer {
	border-top-color: rgba(255, 255, 255, 0.14);
	margin-bottom: 20px;
}

.kr-contact-list--footer > div {
	grid-template-columns: 1fr;
	gap: 2px;
	border-bottom-color: rgba(255, 255, 255, 0.14);
}

.kr-contact-list--footer dt {
	color: #8FB0AB;
}

.kr-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.kr-field--full,
.kr-form__submit {
	grid-column: 1 / -1;
}

.kr-field label,
.kr-field__label {
	display: block;
}

.kr-field__label {
	margin-bottom: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink-2);
}

.kr-field__label .kr-optional {
	font-weight: 400;
	color: var(--ink-3);
}

.kr-form input[type="text"],
.kr-form input[type="email"],
.kr-form input[type="tel"],
.kr-form select,
.kr-form textarea {
	width: 100%;
	min-height: 50px;
	padding: 12px 16px;
	border: 1px solid var(--rule-strong);
	border-radius: 12px;
	background: var(--paper);
	color: var(--ink);
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
	-webkit-appearance: none;
	appearance: none;
}

.kr-form select {
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230B5755' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px;
}

.kr-form textarea {
	min-height: 160px;
	resize: vertical;
}

.kr-form input::placeholder,
.kr-form textarea::placeholder {
	color: #6A7C7A;
}

.kr-form input:focus,
.kr-form select:focus,
.kr-form textarea:focus {
	outline: none;
	border-color: var(--teal);
	background: var(--white);
	box-shadow: 0 0 0 3px rgba(11, 87, 85, 0.14);
}

.kr-form .wpcf7-not-valid {
	border-color: #B2453A;
}

.wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 0.8125rem;
	color: #9E3A30;
}

.kr-form input[type="submit"] {
	min-height: 52px;
	padding: 0.85rem 2rem;
	border: 1px solid var(--teal);
	border-radius: 999px;
	background: var(--teal);
	color: #fff;
	font: 600 1rem/1 var(--sans);
	cursor: pointer;
	transition: background-color 0.2s;
}

.kr-form input[type="submit"]:hover {
	background: var(--teal-deep);
}

.kr-form__submit {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

.wpcf7 form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 16px;
	border-radius: 12px;
	font-size: 0.9375rem;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--teal);
	background: var(--mist);
	color: var(--teal-ink);
}

@media (max-width: 560px) {
	.kr-form {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Articles, archives, 404 (for future posts)
   -------------------------------------------------------------------------- */

.kr-article,
.kr-archive,
.kr-notfound {
	max-width: 760px;
	margin-inline: auto;
	padding: clamp(40px, 6vw, 88px) var(--gutter) var(--section);
}

.kr-notfound {
	text-align: center;
}

.kr-notfound > * + * {
	margin-top: 1.25rem;
}

.kr-notfound__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}

.kr-article__date {
	margin-top: 12px;
	color: var(--ink-3);
	font-size: 0.875rem;
}

.kr-prose {
	margin-top: 40px;
}

.kr-prose > * + * {
	margin-top: 1.15em;
}

.kr-prose > * + h2 {
	margin-top: 2em;
	font-size: 2rem;
}

.kr-prose > * + h3 {
	margin-top: 1.6em;
}

.kr-archive__list {
	margin-top: 40px;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rule);
}

.kr-archive__list li {
	padding: 20px 0;
	border-bottom: 1px solid var(--rule);
}

.kr-archive__list a {
	font-family: var(--serif);
	font-size: 1.5rem;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.kr-footer {
	padding: clamp(56px, 7vw, 88px) var(--gutter) 36px;
	background: var(--teal-ink);
	color: #B5CFCB;
	font-size: 0.9375rem;
}

.kr-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 48px clamp(32px, 5vw, 80px);
	max-width: var(--wrap);
	margin-inline: auto;
}

.kr-footer__brand p {
	max-width: 36ch;
	margin-top: 22px;
}

.kr-footer .kr-brand {
	align-items: flex-start;
}

.kr-footer .kr-brand__name {
	font-size: 2rem;
}

.kr-footer .kr-brand__mark {
	width: 82px;
	margin-left: 4px;
}

.kr-footer__heading {
	margin-bottom: 16px;
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 600;
	font-stretch: 88%;
	color: #8FB0AB;
}

.kr-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kr-footer__list li + li {
	margin-top: 10px;
}

.kr-footer a {
	color: #fff;
	text-decoration: none;
}

.kr-footer a:hover {
	text-decoration: underline;
}

.kr-footer .kr-btn--light {
	color: var(--teal-deep);
}

.kr-footer .kr-btn--light:hover {
	text-decoration: none;
}

.kr-footer__contact p {
	margin-bottom: 20px;
}

.kr-footer__legal {
	grid-column: 1 / -1;
	padding-top: 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: #8FB0AB;
}

.kr-footer__legal p {
	max-width: 110ch;
}

.kr-footer__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-top: 14px;
}

.kr-footer__meta a {
	color: #B5CFCB;
}

@media (max-width: 860px) {
	.kr-footer__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.kr-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 520px) {
	.kr-footer__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Editor parity: keep blocks readable inside the editor canvas
   -------------------------------------------------------------------------- */

.editor-styles-wrapper .kr-section > * {
	max-width: var(--wrap);
}

.editor-styles-wrapper .kr-orb h1 {
	color: #fff;
}

/* ==========================================================================
   Responsive refinements (screen-size QA pass)
   ========================================================================== */

/* Full-bleed wrappers that are not .kr-section still align to the content grid. */
.kr-band > *,
.kr-cta > * {
	max-width: var(--wrap);
	margin-inline: auto;
}

/* Long text never runs past a comfortable measure. */
.kr-content p,
.kr-content li {
	max-width: 70ch;
}

.kr-content .kr-checks li,
.kr-content .kr-dose {
	max-width: none;
}

/* Keep a word or number together (brand name, value + unit). */
.kr-nowrap {
	white-space: nowrap;
}

/* Breadcrumbs: links distinguishable from the trail text, comfortable to tap. */
.kr-crumbs a {
	display: inline-block;
	padding-block: 6px;
	text-decoration: underline;
	text-decoration-color: var(--rule-strong);
	text-underline-offset: 0.25em;
}

.kr-crumbs a:hover {
	text-decoration-color: currentColor;
}

/* Touch screens: a full 44px target without moving the trail. */
@media (pointer: coarse) {
	.kr-crumbs a {
		margin-block: -6px;
		padding-block: 12px;
	}
}

/* Notice bar: one or two lines on small phones. */
@media (max-width: 420px) {
	.kr-notice {
		padding-block: 7px;
		font-size: 0.75rem;
	}
}

/* Hero claims: no orphaned words on the narrowest phones. */
@media (max-width: 360px) {
	.kr-hero__claims {
		font-size: 1.375rem;
	}
}

/* Phone landscape: orb and copy side by side so the first screen is not empty. */
@media (max-width: 960px) and (orientation: landscape) and (max-height: 560px) {
	.kr-hero {
		padding-top: 20px;
	}

	.kr-hero__grid {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
	}

	.kr-orb {
		width: min(100%, 300px);
	}

	.kr-page-hero__grid > .wp-block-image img {
		width: auto;
		max-height: 70vh;
	}
}

/* Inner-page hero image when stacked: a product shot, not a whole screen. */
@media (max-width: 860px) {
	.kr-page-hero__grid > .wp-block-image {
		max-width: 440px;
	}
}

/* Mobile menu: scrollable on short screens, with a scrim behind it. */
.kr-scrim {
	position: fixed;
	inset: 0;
	z-index: 40;
	background: rgba(6, 47, 46, 0.32);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s, visibility 0s 0.25s;
}

@media (max-width: 860px) {
	.kr-nav__panel {
		max-height: calc(100dvh - 104px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.kr-menu-open,
	.kr-menu-open body {
		overflow: hidden;
	}

	.kr-menu-open .kr-scrim {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.25s;
	}
}

@media (max-width: 860px) and (max-height: 520px) {
	.kr-nav__list a {
		padding: 10px 0;
		font-size: 1.25rem;
	}

	.kr-nav__cta {
		margin-top: 16px;
	}
}

/* Ingredient rows: no dead dose column on small laptops / tablets. */
@media (min-width: 861px) and (max-width: 1100px) {
	.kr-ingredient {
		grid-template-columns: 132px minmax(150px, 0.6fr) minmax(0, 1.5fr);
	}

	.kr-ingredient .wp-block-image img {
		width: 132px;
	}
}

/* "Why choose": titles and paragraphs line up across each row. */
@media (min-width: 1081px) {
	.kr-points:not(.kr-points--3):not(.kr-points--2) .kr-point {
		display: grid;
		grid-row: span 2;
		grid-template-rows: subgrid;
		row-gap: 10px;
	}

	.kr-points:not(.kr-points--3):not(.kr-points--2) .kr-point p {
		margin-top: 0;
	}
}

/* Treatment areas: room for the photo at 961–1199, less drift on very wide screens. */
@media (min-width: 961px) and (max-width: 1199px) {
	.kr-areas > .kr-areas__grid {
		grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
	}
}

@media (min-width: 1600px) {
	.kr-areas > .kr-areas__grid {
		grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
	}

	.kr-areas__grid > .wp-block-image {
		width: min(100%, 820px);
	}
}

/* Protocol photos: shorter on phones. */
@media (max-width: 560px) {
	.kr-protocol > .wp-block-image img {
		aspect-ratio: 16 / 10;
	}
}

/* Suggested protocol: one fact per row until there is room for three. */
@media (max-width: 1199px) {
	.kr-facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.kr-fact {
		display: grid;
		grid-template-columns: 160px minmax(0, 1fr);
		gap: 16px;
		align-items: baseline;
		padding: 16px 0;
	}

	.kr-fact + .kr-fact {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid var(--rule);
	}

	.kr-fact__value {
		margin-top: 0;
		font-size: 1.3125rem;
	}
}

@media (max-width: 520px) {
	.kr-fact {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
	}
}

/* Process steps on phones: number beside the title, half the height. */
@media (max-width: 600px) {
	.kr-steps {
		row-gap: 28px;
	}

	.kr-steps li {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr);
		column-gap: 12px;
		align-items: start;
	}

	.kr-steps li::before {
		grid-row: span 2;
		margin: -4px 0 0;
		font-size: 2.25rem;
	}

	.kr-steps li strong {
		margin-bottom: 4px;
	}
}

/* Tables on phones: no mid-word breaks. */
@media (max-width: 480px) {
	.wp-block-table.kr-table th,
	.wp-block-table.kr-table td {
		word-break: normal;
		overflow-wrap: break-word;
	}

	/* Specification tables: label above value. */
	.wp-block-table.kr-table--spec tr {
		display: block;
		padding: 12px 0;
		border-bottom: 1px solid var(--rule);
	}

	.wp-block-table.kr-table.kr-table--spec td {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
	}

	.wp-block-table.kr-table.kr-table--spec td:first-child {
		width: auto;
		margin-bottom: 2px;
	}

	/* Formula table: ingredient and concentration on one line, role beneath. */
	.wp-block-table.kr-table--formula thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.wp-block-table.kr-table--formula tbody tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 16px;
		padding: 14px 0;
		border-bottom: 1px solid var(--rule);
	}

	.wp-block-table.kr-table.kr-table--formula td {
		padding: 0;
		border: 0;
	}

	.wp-block-table.kr-table.kr-table--formula td:nth-child(3) {
		grid-column: 1 / -1;
		margin-top: 4px;
		font-size: 0.9375rem;
		color: var(--ink-2);
	}

	.wp-block-table.kr-table--formula tbody tr:first-child {
		border-top: 1px solid var(--ink);
	}
}

/* Wide diagrams and the before/after strip on phones: an obvious, edge-to-edge
   horizontal scroller with the caption kept in place. */
@media (max-width: 700px) {
	.kr-scroll-x {
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		scroll-padding-inline: var(--gutter);
		overscroll-behavior-x: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--rule-strong) transparent;
		padding-bottom: 10px;
	}

	.kr-figure--panel.kr-scroll-x {
		margin-inline: 0;
		padding-inline: 16px;
	}

	.kr-scroll-x::before {
		content: "Swipe sideways to see the full image";
		position: sticky;
		left: 0;
		display: block;
		margin-bottom: 10px;
		font-size: 0.8125rem;
		color: var(--ink-3);
	}

	.kr-scroll-x figcaption {
		position: sticky;
		left: 0;
		max-width: calc(100vw - 2 * var(--gutter));
	}
}

.kr-scroll-x:focus-visible {
	outline-offset: -2px;
}

/* FAQ split into labelled groups. */
.kr-faq__group {
	margin: 0 0 12px;
	font-family: var(--sans);
	font-size: 0.875rem;
	font-weight: 600;
	font-stretch: 88%;
	letter-spacing: 0.01em;
	color: var(--ink-3);
}

.kr-faq__list > .schema-faq + .kr-faq__group {
	margin-top: 44px;
}

/* Footer column labels are not headings. */
p.kr-footer__heading {
	margin-top: 0;
}
/* --------------------------------------------------------------------------
   Motion
   The language is taken from the product: a printed formulation sheet whose
   rules draw in, photographs that come into focus like the soft orb on the
   box, and concentrations that rise into place. Everything here is gated on
   prefers-reduced-motion and on .kr-js (set before first paint), and only
   below-the-fold elements are ever hidden, so content and LCP are unaffected.
   -------------------------------------------------------------------------- */

:root {
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-draw: cubic-bezier(0.65, 0, 0.25, 1);
}

@media (prefers-reduced-motion: no-preference) {

	/* Text blocks: settle up into place. */
	.kr-js [data-kr-reveal="fade"] {
		transition:
			opacity 0.9s var(--ease-out) var(--kr-delay, 0s),
			transform 1.1s var(--ease-out) var(--kr-delay, 0s);
	}

	.kr-js [data-kr-reveal="fade"]:not(.is-in) {
		opacity: 0;
		transform: translateY(18px);
	}

	/* Table rows: opacity only (transforms on rows are unreliable). */
	.kr-js [data-kr-reveal="row"] {
		transition: opacity 0.7s var(--ease-out) var(--kr-delay, 0s);
	}

	.kr-js [data-kr-reveal="row"]:not(.is-in) {
		opacity: 0;
	}

	/* Ruled items: the hairline draws left to right while the content settles.
	   The original border is replaced by a background line of the same colour. */
	.kr-js [data-kr-line] {
		background-image: linear-gradient(var(--kr-line), var(--kr-line));
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 0% 1px;
		transition:
			background-size 1.2s var(--ease-draw) var(--kr-delay, 0s),
			opacity 0.9s var(--ease-out) calc(var(--kr-delay, 0s) + 0.12s),
			transform 1.1s var(--ease-out) calc(var(--kr-delay, 0s) + 0.12s);
	}

	.kr-js [data-kr-line="top"] {
		border-top-color: transparent !important;
	}

	.kr-js [data-kr-line="bottom"] {
		background-position: 0 100%;
		border-bottom-color: transparent !important;
	}

	.kr-js [data-kr-line].is-in {
		background-size: 100% 1px;
	}

	.kr-js [data-kr-line]:not(.is-in) {
		opacity: 0;
		transform: translateY(12px);
	}

	/* Photographs: a focus pull, from soft (like the orb) to sharp. */
	.kr-js [data-kr-reveal="image"] img {
		transition:
			filter 1.4s var(--ease-out) var(--kr-delay, 0s),
			opacity 1s var(--ease-out) var(--kr-delay, 0s);
	}

	.kr-js [data-kr-reveal="image"]:not(.is-in) img {
		filter: blur(14px) saturate(0.85);
		opacity: 0.3;
	}

	/* Ingredient spheres turn gently into place as their line is drawn. */
	.kr-js .kr-ingredient[data-kr-line] .wp-block-image img {
		transition:
			filter 1.4s var(--ease-out) calc(var(--kr-delay, 0s) + 0.1s),
			opacity 1s var(--ease-out) calc(var(--kr-delay, 0s) + 0.1s),
			transform 1.6s var(--ease-out) calc(var(--kr-delay, 0s) + 0.1s);
	}

	.kr-js .kr-ingredient[data-kr-line]:not(.is-in) .wp-block-image img {
		filter: blur(10px);
		opacity: 0.2;
		transform: rotate(-14deg) scale(0.9);
	}

	/* Concentrations rise out of a mask. */
	.kr-js .kr-ingredient[data-kr-line] .kr-dose strong {
		display: inline-block;
		clip-path: inset(-20% -10% -20% -10%);
		transition:
			clip-path 1.1s var(--ease-out) calc(var(--kr-delay, 0s) + 0.3s),
			transform 1.1s var(--ease-out) calc(var(--kr-delay, 0s) + 0.3s);
	}

	.kr-js .kr-ingredient[data-kr-line]:not(.is-in) .kr-dose strong {
		clip-path: inset(100% -10% -20% -10%);
		transform: translateY(45%);
	}

	.kr-js .kr-ingredient[data-kr-line] .kr-dose::before {
		transition: transform 0.6s var(--ease-out) calc(var(--kr-delay, 0s) + 0.55s);
	}

	.kr-js .kr-ingredient[data-kr-line]:not(.is-in) .kr-dose::before {
		transform: scale(0);
	}

	/* Process step numbers: same rise as the concentrations. */
	.kr-js .kr-steps > li[data-kr-line]::before {
		transition:
			clip-path 1s var(--ease-out) calc(var(--kr-delay, 0s) + 0.25s),
			transform 1s var(--ease-out) calc(var(--kr-delay, 0s) + 0.25s);
		clip-path: inset(-20% -10% -20% -10%);
	}

	.kr-js .kr-steps > li[data-kr-line]:not(.is-in)::before {
		clip-path: inset(100% -10% -20% -10%);
		transform: translateY(40%);
	}

	/* The hero orb breathes slowly once it has bloomed, like light in water. */
	.kr-orb::before {
		animation:
			kr-bloom 1.8s cubic-bezier(0.16, 0.8, 0.24, 1) both,
			kr-breathe 9s ease-in-out 2s infinite alternate;
	}

	/* Deep-teal panels: their glow drifts almost imperceptibly. */
	.kr-section--teal::before,
	.kr-cta__panel::before {
		animation: kr-drift 24s ease-in-out infinite alternate;
	}

	/* Mobile menu: links arrive in sequence. */
	.kr-menu-open .kr-nav__list li,
	.kr-menu-open .kr-nav__cta {
		animation: kr-menu-in 0.45s var(--ease-out) both;
	}

	.kr-menu-open .kr-nav__list li:nth-child(2) { animation-delay: 0.05s; }
	.kr-menu-open .kr-nav__list li:nth-child(3) { animation-delay: 0.1s; }
	.kr-menu-open .kr-nav__list li:nth-child(4) { animation-delay: 0.15s; }
	.kr-menu-open .kr-nav__cta { animation-delay: 0.2s; }

	/* Tactile press on buttons. */
	.kr-btn,
	.wp-block-button .wp-block-button__link,
	.kr-form input[type="submit"],
	.kr-faq__q button::after {
		transition-property: background-color, color, border-color, transform;
	}

	.kr-btn:active,
	.wp-block-button .wp-block-button__link:active,
	.kr-form input[type="submit"]:active {
		transform: scale(0.97);
		transition-duration: 0.1s;
	}

	/* Cross-document page transitions (progressive: supporting browsers only).
	   The header stays put; the page underneath cross-fades. */
	@view-transition {
		navigation: auto;
	}

	.kr-header {
		view-transition-name: kr-header;
	}

	.kr-notice {
		view-transition-name: kr-notice;
	}

	::view-transition-old(root) {
		animation: kr-vt-out 0.22s ease-in both;
	}

	::view-transition-new(root) {
		animation: kr-vt-in 0.45s var(--ease-out) both;
	}
}

@keyframes kr-breathe {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.035);
	}
}

@keyframes kr-drift {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}
	to {
		transform: translate3d(-5%, 4%, 0) scale(1.08);
	}
}

@keyframes kr-menu-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes kr-vt-out {
	to {
		opacity: 0;
	}
}

@keyframes kr-vt-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}